/* Vatenia back office. Same edged design as the public site: square corners,
   flat surfaces, navy fills, teal only as an accent (text, icons, thin lines). */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-heQdAz3.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-AuPgurU.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-RV1hfMj.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-5ePuYxR.woff2") format("woff2"); }

:root {
    --navy: #123f65;
    --navy-2: #0d2f4d;
    --mint: #5eead4;
    --teal: #0b8584;
    --ink: #0b1b30;
    --text: #3b4a5f;
    --muted: #6b7a90;
    --line: #e3e9f1;
    --line-strong: #cfd8e3;
    --soft: #f4f6f9;
    --danger: #b42318;
    --warn: #b45309;
    --ok: #0b7a55;
    --shadow: 0 1px 3px rgb(6 26 51 / 8%);
    --shadow-lg: 0 8px 28px rgb(6 26 51 / 16%);
    --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Sidebar geometry, identical folded and unfolded so icons never move */
    --rail: 64px;
    --sidebar: 248px;
    --row: 34px;
    --label: 28px;
    --bar: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.bo { font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--text); background: var(--soft); -webkit-font-smoothing: antialiased; }
a { color: var(--navy); }
h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0; }
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; }
.bo-nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Shell -------------------------------------------------------------------- */

.bo-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); height: 100vh; transition: grid-template-columns .2s ease; }
html.bo-folded .bo-shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
.bo-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.bo-main-scroll { flex: 1; min-height: 0; }

/* Scroll areas: only the area under the logo bar / top bar scrolls. Slim square
   scrollbar without arrows, visible only while the pointer is over the area.
   Chrome doesn't repaint a scrollbar when its area's :hover changes, so the
   thumb inherits the area's border-color (the areas have no border) and the
   transition on that colour forces the repaint. Chrome ignores
   ::-webkit-scrollbar once scrollbar-color is set, so the standard properties
   are Firefox-only. */
.bo-scroll {
    --thumb: rgb(18 63 101 / 22%); --thumb-hover: rgb(18 63 101 / 40%);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    border-color: transparent; transition: border-color .15s;
}
.bo-scroll-dark { --thumb: rgb(255 255 255 / 22%); --thumb-hover: rgb(255 255 255 / 40%); }
.bo-scroll:hover { border-color: var(--thumb); }
.bo-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.bo-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.bo-scroll::-webkit-scrollbar-track, .bo-scroll::-webkit-scrollbar-corner { background: transparent; }
.bo-scroll::-webkit-scrollbar-thumb { border-radius: 0; border: 0 solid; border-right-width: 6px; border-color: inherit; }
.bo-scroll::-webkit-scrollbar-thumb:hover, .bo-scroll::-webkit-scrollbar-thumb:active { border-color: var(--thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
    .bo-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .bo-scroll:hover { scrollbar-color: var(--thumb) transparent; }
}

/* Sidebar ------------------------------------------------------------------ */

.bo-sidebar {
    display: flex; flex-direction: column; height: 100vh; overflow: hidden;
    background: var(--navy); color: #d5e0ec;
}
.bo-brand {
    flex-shrink: 0; display: flex; align-items: center; height: var(--bar); padding-left: calc((var(--rail) - 32px) / 2);
    border-bottom: 1px solid rgb(255 255 255 / 10%); color: #fff; text-decoration: none; white-space: nowrap;
}
.bo-brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
.bo-brand-text { margin-left: 12px; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.bo-brand-text small, .bo-login-brand small { font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-left: 4px; vertical-align: middle; }

.bo-nav { flex: 1; min-height: 0; padding: 8px 0 16px; }
.bo-nav ul { list-style: none; margin: 0; padding: 0; }
.bo-nav-label {
    position: relative; display: flex; align-items: center; height: var(--label); margin: 6px 0 0; padding-left: 22px;
    font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8fa6c0; white-space: nowrap;
}
.bo-nav-sep { height: 0; margin: 8px 0; border: 0; border-top: 1px solid rgb(255 255 255 / 10%); }
.bo-nav-link {
    display: flex; align-items: center; height: var(--row); color: #d5e0ec; text-decoration: none; white-space: nowrap;
    font-size: .86rem; font-weight: 500; transition: background-color .15s, color .15s;
}
.bo-nav-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--rail); width: var(--rail); height: var(--row); color: #a9bdd3; }
.bo-nav-icon .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.bo-nav-link:hover { background: rgb(255 255 255 / 6%); color: #fff; }
.bo-nav-link:hover .bo-nav-icon { color: var(--mint); }
.bo-nav-link.is-active { background: rgb(255 255 255 / 10%); color: #fff; box-shadow: inset 3px 0 0 var(--mint); }
.bo-nav-link.is-active .bo-nav-icon { color: var(--mint); }

/* Folded: only the labels disappear; section titles become a short line */
html.bo-folded .bo-brand-text,
html.bo-folded .bo-nav-text { opacity: 0; pointer-events: none; }
html.bo-folded .bo-nav-label span { visibility: hidden; }
html.bo-folded .bo-nav-label::after {
    content: ""; position: absolute; left: calc((var(--rail) - 24px) / 2); top: 50%;
    width: 24px; height: 1px; background: rgb(255 255 255 / 25%);
}

/* Top bar ------------------------------------------------------------------ */

.bo-topbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-shrink: 0;
    height: var(--bar); padding: 0 28px; background: #fff; border-bottom: 1px solid var(--line);
}
.bo-topbar-title { flex: 1; min-width: 0; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-topbar-title a { color: var(--muted); text-decoration: none; }
.bo-topbar-title a:hover { color: var(--navy); }
.bo-topbar-title span[aria-hidden] { margin: 0 6px; opacity: .6; }

.bo-icon-btn {
    display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--text); cursor: pointer; text-decoration: none;
}
.bo-icon-btn:hover { color: var(--navy); border-color: var(--navy); }
.bo-icon-btn .icon { width: 16px; height: 16px; }
.bo-icon-btn-danger:hover { color: var(--danger); border-color: var(--danger); }

.bo-usermenu { position: relative; }
.bo-usermenu summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 4px 6px; border-radius: 2px; color: var(--text); }
.bo-usermenu summary::-webkit-details-marker { display: none; }
.bo-usermenu summary:hover { background: var(--soft); }
.bo-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; font-size: .85rem; }
.bo-usermenu-name { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-usermenu-panel {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; z-index: 30;
    background: #fff; border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-lg);
}
.bo-usermenu-meta { margin: 0 0 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--ink); word-break: break-all; }
.bo-usermenu-meta small { color: var(--muted); }
.bo-usermenu-panel a, .bo-usermenu-panel button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--text); text-decoration: none; border-radius: 2px; }
.bo-usermenu-panel a:hover, .bo-usermenu-panel button:hover { background: var(--soft); color: var(--navy); }
.bo-usermenu-panel form { margin: 0; }
.bo-usermenu-panel button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }

/* Content ------------------------------------------------------------------ */

.bo-content { padding: 30px 28px 48px; width: 100%; max-width: 1240px; }
.bo-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.bo-page-head h1 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; }
.bo-page-help { margin: 6px 0 0; color: var(--muted); max-width: 72ch; }
.bo-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bo-section-title { margin: 30px 0 12px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bo-muted { color: var(--muted); }
.bo-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--teal); }

.bo-card { background: #fff; border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow); }

/* Buttons */
.bo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
    border: 1px solid var(--line-strong); border-radius: 2px; background: #fff; color: var(--ink); cursor: pointer;
    font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.bo-btn:hover { border-color: var(--navy); color: var(--navy); }
.bo-btn .icon { width: 15px; height: 15px; }
.bo-btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.bo-btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.bo-btn-light { background: #fff; border-color: #fff; color: var(--navy); }
.bo-btn-light:hover { background: #eef3f8; color: var(--navy-2); }
.bo-btn-ghost { background: transparent; border-color: rgb(255 255 255 / 35%); color: #fff; }
.bo-btn-ghost:hover { border-color: #fff; color: #fff; }
.bo-btn-danger-ghost { border-color: transparent; background: transparent; color: var(--danger); padding: 0 10px; }
.bo-btn-danger-ghost:hover { border-color: var(--danger); color: var(--danger); }
.bo-btn-block { width: 100%; }

/* Flash messages */
.bo-flash { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border-radius: 2px; border: 1px solid; font-weight: 500; }
.bo-flash-success { background: #ecfdf5; border-color: #a7f3d0; color: var(--ok); }
.bo-flash-error { background: #fef3f2; border-color: #fecdca; color: var(--danger); }

/* Lists -------------------------------------------------------------------- */

.bo-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.bo-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; min-width: 260px; background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--muted); }
.bo-search:focus-within { border-color: var(--navy); }
.bo-search input { flex: 1; border: 0; outline: 0; font: inherit; color: var(--ink); background: transparent; }
.bo-select select { height: 38px; padding: 0 32px 0 12px; border: 1px solid var(--line-strong); border-radius: 2px; background: #fff; font: inherit; color: var(--ink); }

.bo-table-card { overflow: hidden; }
.bo-table-wrap { overflow-x: auto; }
.bo-table { width: 100%; border-collapse: collapse; }
.bo-table th { padding: 12px 16px; text-align: left; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: #fafbfc; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bo-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
.bo-table tbody tr:last-child td { border-bottom: 0; }
.bo-table tbody tr:hover td { background: #f9fbfc; }
.bo-row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.bo-row-link:hover { color: var(--navy); text-decoration: underline; }
.bo-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.bo-col-actions form { display: inline; }
.bo-col-actions .bo-icon-btn + .bo-icon-btn, .bo-col-actions .bo-icon-btn + form { margin-left: 6px; }
.bo-col-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-col-image, .bo-col-icon { width: 1%; }
.bo-excerpt { color: var(--muted); }
.bo-table-texts td:nth-child(2), .bo-table-texts td:nth-child(3) { width: 34%; }
.bo-thumb { display: grid; place-items: center; width: 56px; height: 40px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); background: var(--soft); color: #a3b1c2; }
.bo-cell-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 2px; background: #eef2f7; color: var(--navy); }
.bo-badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; background: #eef2f7; color: var(--muted); white-space: nowrap; }
.bo-badge-on, .bo-badge-created { background: #e7f6ee; color: var(--ok); }
.bo-badge-warn, .bo-badge-deleted { background: #fef3e2; color: var(--warn); }
.bo-badge-role_admin { background: var(--navy); color: #fff; }
.bo-badge-updated { background: #e8f0f9; color: var(--navy); }
.bo-empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.bo-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: .82rem; }
.bo-pagination nav { display: flex; align-items: center; gap: 10px; }

.bo-tabs { display: flex; gap: 2px; margin-bottom: 14px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.bo-tab { padding: 10px 16px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bo-tab:hover { color: var(--ink); }
.bo-tab.is-active { color: var(--navy); border-bottom-color: var(--teal); }

/* Forms -------------------------------------------------------------------- */

.bo-fieldset { padding: 22px 24px 8px; margin-bottom: 16px; }
.bo-fieldset-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bo-fieldset-head h2 { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.bo-fieldset-head p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.bo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 20px; }
.bo-field { grid-column: span 12; margin-bottom: 16px; min-width: 0; }
.bo-field.half { grid-column: span 6; }
.bo-field.third { grid-column: span 4; }
.bo-field.two-thirds { grid-column: span 8; }
.bo-field.quarter { grid-column: span 3; }
.bo-collection.full { grid-column: span 12; }
@media (max-width: 800px) { .bo-field.half, .bo-field.third, .bo-field.two-thirds, .bo-field.quarter { grid-column: span 12; } }

.bo-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .82rem; color: var(--ink); }
.bo-label.required::after { content: " *"; color: var(--danger); }
.bo input[type="text"], .bo input[type="email"], .bo input[type="tel"], .bo input[type="password"], .bo input[type="url"], .bo input[type="number"], .bo input[type="search"]:not(.bo-search input), .bo select, .bo textarea {
    width: 100%; padding: 9px 12px; font: inherit; color: var(--ink); background: #fff;
    border: 1px solid var(--line-strong); border-radius: 2px; transition: border-color .15s, box-shadow .15s;
}
.bo textarea { resize: vertical; min-height: 44px; line-height: 1.6; }
.bo input:focus, .bo select:focus, .bo textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(18 63 101 / 12%); }
.bo input:disabled, .bo select:disabled, .bo textarea:disabled { background: var(--soft); color: var(--muted); }
.bo-help { margin: 6px 0 0; font-size: .78rem; color: var(--muted); }
.bo-errors { list-style: none; margin: 6px 0 0; padding: 0; color: var(--danger); font-size: .8rem; font-weight: 500; }
.bo-field.has-error input, .bo-field.has-error textarea, .bo-field.has-error select { border-color: var(--danger); }
.bo-counter { float: right; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bo-counter.is-over { color: var(--warn); }

/* Switches and option lists */
.bo-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--ink); font-size: .86rem; }
.bo-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bo-switch-track { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: 11px; background: #cfd8e3; transition: background-color .15s; }
.bo-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 20%); transition: transform .15s; }
.bo-switch input:checked + .bo-switch-track { background: var(--navy); }
.bo-switch input:checked + .bo-switch-track::after { transform: translateX(16px); }
.bo-switch input:focus-visible + .bo-switch-track { outline: 2px solid var(--teal); outline-offset: 2px; }
.bo-switch.is-disabled { cursor: not-allowed; opacity: .6; }
.bo-field-check .bo-help { margin-left: 48px; }

.bo-options { display: grid; gap: 6px; }
.bo-options.is-multiple { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bo-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font-weight: 500; color: var(--ink); }
.bo-option:hover { border-color: var(--navy); }
.bo-option:has(input:checked) { border-color: var(--navy); background: #f2f6fa; }
.bo-option input { accent-color: var(--navy); margin: 0; }
.bo-option.is-disabled { cursor: not-allowed; opacity: .6; }

/* Image fields */
.bo-current-image { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--muted); }
.bo-current-image img { max-width: 240px; max-height: 150px; border-radius: 2px; border: 1px solid var(--line); }
.bo-current-image .bo-thumb { width: 72px; height: 52px; }
.bo-file input { width: 100%; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 2px; background: #fafbfc; font: inherit; }

/* Collections (services of a category) */
.bo-collection-items { display: grid; gap: 10px; margin-bottom: 14px; }
.bo-collection-item { position: relative; padding: 16px 56px 0 16px; border: 1px solid var(--line); border-radius: 2px; background: #fafbfc; }
.bo-collection-item > .bo-icon-btn { position: absolute; top: 14px; right: 12px; }

.bo-form-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.bo-spacer { flex: 1; }

/* Dashboard ---------------------------------------------------------------- */

.bo-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 30px; margin-bottom: 16px; border-radius: 2px; background: var(--navy); color: #d5e0ec; }
.bo-welcome h1 { color: #fff; font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; }
.bo-welcome p { margin: 0; max-width: 60ch; }
.bo-kicker { font-size: .66rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-bottom: 8px !important; }
.bo-welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.bo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow); }
.bo-stat { padding: 16px 20px; border-left: 1px solid var(--line); min-width: 0; }
.bo-stat:first-child { border-left: 0; }
.bo-stat small { display: block; margin-bottom: 4px; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bo-stat strong { display: flex; align-items: center; gap: 6px; font-size: .98rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-stat .bo-on { color: var(--ok); }
.bo-stat .bo-off { color: var(--warn); }
@media (max-width: 1100px) {
    .bo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bo-stat:nth-child(3) { border-left: 0; }
    .bo-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.bo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .bo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bo-shortcut { display: flex; align-items: flex-start; gap: 14px; padding: 18px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.bo-shortcut:hover { border-color: var(--navy); box-shadow: 0 4px 14px rgb(6 26 51 / 10%); }
.bo-shortcut-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 2px; background: #eef2f7; color: var(--navy); transition: background-color .15s, color .15s; }
.bo-shortcut:hover .bo-shortcut-icon { background: var(--navy); color: #fff; }
.bo-shortcut strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 2px; }
.bo-shortcut small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.45; }

.bo-activity { list-style: none; margin: 0 0 12px; padding: 4px 18px; }
.bo-activity li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bo-activity li:last-child { border-bottom: 0; }
.bo-activity-when { flex: 0 0 84px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Login -------------------------------------------------------------------- */

body.bo-login { display: grid; place-items: center; min-height: 100vh; background: var(--navy); padding: 24px; }
.bo-login-box { width: 100%; max-width: 380px; }
.bo-login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px; color: #fff; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; }
.bo-login-card { padding: 28px; }
.bo-login-card h1 { font-size: 1.2rem; font-weight: 600; margin-bottom: 18px; }
.bo-login-card .bo-switch { margin: 2px 0 20px; font-weight: 500; }
.bo-login-back { text-align: center; margin-top: 18px; }
.bo-login-back a { color: #b7c7d9; text-decoration: none; font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; }
.bo-login-back a:hover { color: #fff; }

/* Phones and tablets: the sidebar slides in over the content ---------------- */

.bo-backdrop { display: none; }
@media (max-width: 991px) {
    .bo-shell, html.bo-folded .bo-shell { grid-template-columns: minmax(0, 1fr); }
    .bo-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar); transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
    html.bo-folded .bo-brand-text, html.bo-folded .bo-nav-text { opacity: 1; pointer-events: auto; }
    html.bo-folded .bo-nav-label span { visibility: visible; }
    html.bo-folded .bo-nav-label::after { display: none; }
    html.bo-menu-open .bo-sidebar { transform: none; }
    html.bo-menu-open .bo-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(6 26 51 / 45%); }
    .bo-topbar { padding: 0 16px; }
    .bo-content { padding: 22px 16px 40px; }
    .bo-usermenu-name { display: none; }
    .bo-search { min-width: 0; flex: 1; }
    .bo-cards { grid-template-columns: minmax(0, 1fr); }
    .bo-page-actions .bo-btn:not(.bo-btn-primary) { display: none; }
}
@media (max-width: 600px) {
    .bo-stats { grid-template-columns: minmax(0, 1fr); }
    .bo-stat { border-left: 0; border-top: 1px solid var(--line); }
    .bo-stat:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bo-shell, .bo-sidebar, .bo-switch-track::after { transition: none; }
}

/* ---------- Customer area additions (same edged look) ---------- */
.bo-lang { margin-left: auto; margin-right: 6px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; color: var(--ink); }
.bo-lang:hover { border-color: var(--navy); color: var(--navy); }
.bo-login-box.is-wide { max-width: 640px; }
.bo-login-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bo-login-top .bo-lang { margin: 0 0 18px; }
.bo-login-intro { margin: -6px 0 18px; color: var(--muted); }
.bo-login-switch { margin: 16px 0 0; text-align: center; }
.bo-login-switch a { font-weight: 600; }
.bo-check-email { text-align: center; margin-bottom: 18px; }
.bo-check-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 10px; background: var(--navy); color: #fff; border-radius: 2px; }
.bo-check-icon .icon { width: 24px; height: 24px; }
.bo-flash-warn { border-color: #f3d19e; background: #fff8eb; color: var(--warn); }
.bo-narrow { max-width: 620px; }
.bo-steps { max-width: 620px; margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text); }
.bo-steps li { padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 2px; }
.bo-records td { vertical-align: top; }
.bo-copy { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.bo-copy code { flex: 1; min-width: 0; padding: 4px 8px; background: var(--soft); border: 1px solid var(--line); border-radius: 2px; font-size: .78rem; color: var(--ink); overflow-wrap: anywhere; word-break: break-all; }
.bo-copy .bo-icon-btn { width: 30px; height: 30px; flex: none; }
.bo-copy .bo-icon-btn.is-copied { border-color: var(--ok); color: var(--ok); }
.bo-required { color: var(--danger); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.bo-more { margin: 14px 0 6px; }
.bo-more summary { cursor: pointer; font-weight: 600; color: var(--navy); font-size: .84rem; margin-bottom: 10px; }
.bo-address { display: flex; align-items: stretch; }
.bo-address input { flex: 1; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.bo-address-domain { display: flex; align-items: center; padding: 0 12px; background: var(--soft); border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 2px 2px 0; color: var(--muted); font-weight: 500; white-space: nowrap; }
.bo-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bo-sizes .bo-option { justify-content: center; padding: 18px 12px; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
progress.bo-usage { display: block; width: 100%; max-width: 220px; height: 6px; margin: 4px 0 2px; border: 0; border-radius: 0; background: var(--line); appearance: none; }
progress.bo-usage::-webkit-progress-bar { background: var(--line); }
progress.bo-usage::-webkit-progress-value { background: var(--navy); }
progress.bo-usage::-moz-progress-bar { background: var(--navy); }
.bo-usage-cell small { color: var(--muted); }
.bo-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.bo-stat progress.bo-usage { max-width: none; margin-top: 8px; }
.bo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bo-two > .bo-fieldset { margin-bottom: 16px; }
.bo-settings-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; align-items: center; margin: 14px 0; }
.bo-settings-list dt { font-weight: 600; color: var(--ink); font-size: .84rem; }
.bo-settings-list dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bo-settings-list .bo-copy { flex: 0 1 auto; }
.bo-danger-zone { border-left: 3px solid var(--danger); }
.bo-danger-zone p { margin: 0; }
.bo-password-tools { display: flex; gap: 6px; margin-top: 6px; }
.bo-password-tools .bo-btn { padding: 6px 10px; }
.bo-page-head h1 .bo-badge { vertical-align: middle; margin-left: 8px; }
@media (max-width: 760px) {
    .bo-sizes, .bo-two, .bo-stats-3 { grid-template-columns: 1fr; }
    .bo-settings-list { grid-template-columns: 1fr; }
}

.bo-login .bo-lang { color: #fff; border-color: rgb(255 255 255 / 40%); }
.bo-login .bo-lang:hover { color: #fff; border-color: #fff; }
.bo-login .bo-login-switch { color: var(--on-dark, #dde7f2); }
.bo-login .bo-login-switch a { color: #fff; }
.bo-records th:nth-child(2), .bo-records td:nth-child(2) { width: 30%; min-width: 220px; }
.bo-records th:first-child, .bo-records td:first-child { width: 1%; white-space: nowrap; }

/* ---------- Billing ---------- */
.bo-price-table { margin-bottom: 14px; border: 1px solid var(--line); }
.bo-price-table td, .bo-price-table th { padding: 9px 14px; }
.bo-months-row { margin-top: 16px; align-items: end; }
.bo-month-shortcuts > span:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-month-shortcuts .bo-btn { padding: 7px 10px; }
.bo-btn-sm { padding: 6px 12px; font-size: .66rem; }
.bo-verify { margin-top: 8px; }
.bo-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 6px; padding: 14px 16px; background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: 2px; }
.bo-total small { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bo-total strong { font-size: 1.3rem; color: var(--ink); }
.bo-sizes-compact .bo-option { padding: 12px 10px; font-size: .95rem; }
.bo-highlight { border-left: 3px solid var(--teal); }
.bo-upgrade-prices { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.bo-payment-methods { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bo-payment-methods .bo-fieldset { margin-bottom: 0; }
.bo-pre { white-space: pre-line; }
.bo-cancel-order { margin-top: 18px; }
.bo-row-group td { background: var(--soft); }
.bo-price-edit input { max-width: 160px; }
.bo-price-edit td.has-error input { border-color: var(--danger); }
.bo-toolbar input[type="search"] { min-width: 260px; }
.bo-tabs { margin-bottom: 14px; }

/* Invoice (its own page; printed as is) */
.bo-invoice-page { background: var(--soft); padding: 24px 16px; }
.bo-invoice-actions { max-width: 800px; margin: 0 auto 12px; text-align: right; }
.bo-invoice { max-width: 800px; margin: 0 auto; padding: 40px; background: #fff; border: 1px solid var(--line); }
.bo-invoice p { margin: 0 0 4px; }
.bo-invoice-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 2px solid var(--navy); }
.bo-invoice-brand { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; color: var(--ink); margin-bottom: 10px !important; }
.bo-invoice-brand .bo-brand-mark { width: 34px; height: 34px; }
.bo-invoice-meta { text-align: right; }
.bo-invoice-meta h1 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.bo-invoice-to { margin: 24px 0; }
.bo-invoice table { border: 1px solid var(--line); }
.bo-invoice tfoot th { padding: 12px 16px; font-size: .85rem; color: var(--ink); background: var(--soft); text-align: left; }
.bo-invoice tfoot th.bo-col-number, .bo-invoice .bo-col-number { text-align: right; }
.bo-invoice-paid { margin-top: 20px !important; color: var(--ok); font-weight: 600; }
@media print {
    .bo-invoice-page { background: #fff; padding: 0; }
    .bo-invoice-actions { display: none; }
    .bo-invoice { border: 0; padding: 0; }
}