/* ═══════════════════════════════════════════════════════════════════════════
   office.css — back-office styling on the SHARED tablet design tokens (2f).
   Requires _content/NormarCapture.UI/app-theme.css (tokens, IBM Plex,
   DevExpress berry→orange recolor) to be linked BEFORE this sheet.
   All colors/shape/type come from var(--…); no functional markup here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    font-family: var(--font-ui);
    background: var(--surface);
    color: var(--ink);
}

h1 { font-size: 1.6rem; font-weight: 900; color: var(--ink); margin: var(--sp-4) 0 var(--sp-3); }
h2 { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: var(--sp-6) 0 var(--sp-2); }
h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
     color: var(--ink-mut); margin: var(--sp-4) 0 var(--sp-1); }
a { color: var(--primary); }

.bo-root { display: flex; flex-direction: column; min-height: 100vh; }
.bo-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto;
           padding: var(--sp-4) var(--sp-6) var(--sp-6); box-sizing: border-box; }

/* ── Nav shell ─────────────────────────────────────────────────────────────
   The bar itself, the brand, the method switcher and the user-pill button
   all reuse the tablet's .app-nav* / .app-user-btn family (app-theme.css,
   loaded before this sheet — see App.razor). Only the pieces below have no
   shared equivalent because the tablet's user menu is a DxDropDown (which
   supplies its own popup chrome via a portal); the office toggles a plain
   div instead, so it still needs its own position/shadow rule. ───────────── */
.bo-user { position: relative; }
.bo-user-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--card); color: var(--ink);
    border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    z-index: 300;
}

/* ── Login card (tablet auth idiom) ───────────────────────────────────────── */
.bo-login {
    max-width: 360px; margin: 12vh auto 0;
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3);
}
.bo-login h1 { font-size: 1.25rem; margin: 0 0 var(--sp-2); }
.bo-login input {
    height: 44px; padding: 0 12px;
    border: 1.5px solid var(--line); border-radius: var(--radius);
    font-family: var(--font-ui); font-size: 1rem; color: var(--ink); background: var(--card);
}
.bo-login input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.bo-login button {
    height: 44px; border: none; border-radius: var(--radius);
    background: var(--primary); color: #fff;
    font-family: var(--font-ui); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.bo-login button:hover:not(:disabled) { background: var(--primary-hi); }
.bo-login button:disabled { opacity: 0.6; cursor: default; }
/* text-only button (e.g. "back to sign-in", "send the code by e-mail") — no card chrome.
   The .bo-login button rule above outranks a bare .bo-btn-link on specificity alone, so the
   login-scoped selector is repeated to win there too. */
.bo-btn-link,
.bo-login button.bo-btn-link {
    background: none; border: none; height: auto; padding: 0;
    color: var(--primary); font-weight: 600; text-decoration: underline; cursor: pointer;
}
.bo-btn-link:hover:not(:disabled),
.bo-login button.bo-btn-link:hover:not(:disabled) { color: var(--primary-hi); background: none; }
.bo-btn-link:disabled,
.bo-login button.bo-btn-link:disabled { opacity: 0.6; cursor: default; }

/* ── Chips (tablet mma-chip idiom) ────────────────────────────────────────── */
.bo-chip {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border: 2px solid var(--line); border-radius: 100px;
    background: var(--card); color: var(--ink);
    font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; cursor: pointer;
    margin: 0 4px 4px 0;
}
.bo-chip:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
.bo-chip.active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* ── Page seams ───────────────────────────────────────────────────────────── */
/* SDD page: the tablet's three-tab view (DxTabs; app-theme.css recolours the strip) and the
   section heads inside the tabs — an h2 line with the section's own save bar on the right */
.bo-sdd-tabs, .bo-sections-tabs { margin: var(--sp-3) 0; }
.bo-sdd-tabs .dxbl-tabs-content-panel, .bo-sections-tabs .dxbl-tabs-content-panel { padding-top: var(--sp-3); }
.bo-sec-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); }
.bo-sec-head h2 { margin: 0; }
.bo-sys-chips { margin: 0 0 var(--sp-2); }
/* Sistemi tab: one row per system — name + kind badge, kind chips, description, completeness note */
.bo-sys-card { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.bo-sys-name { font-weight: 700; min-width: 10rem; }

/* SDD system row: kind chips, work description, completeness note
   (bo-chip/bo-chip.active and bo-chip-row are the shared mma-chip idiom above). */
.bo-sys-strip { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-2); }
.bo-sys-desc { min-width: 20rem; flex: 1 1 24rem; }
.bo-sys-desc textarea { resize: vertical; }
.bo-sys-note { font-size: 0.85rem; color: var(--ink-mut); }
.bo-sys-summary { font-size: 0.85rem; color: var(--ink-mut); margin: 0 0 var(--sp-3); }
.bo-warn { color: var(--warn); font-weight: 700; }

/* Kind badge on the system tabs: Č/S/I once defined, amber "?" while undefined */
.bo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 3px; margin-left: 6px;
    border-radius: 100px; background: var(--line); color: var(--ink-soft);
    font-size: 0.65rem; font-weight: 700; line-height: 1;
}
.bo-badge-warn { background: var(--warn); color: #fff; }

/* AI suggest checkbox row */
.bo-inline { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }

/* Catalog / master-data editors */
.bo-catalog-tabs { margin: var(--sp-3) 0; }
.bo-catalog-add { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); flex-wrap: wrap; }

/* Studies folder tree (2g UX — tablet mma-btn icon idiom).
   The toolbar is a stock DxToolbar — only spacing here, layout is DX's. */
.bo-tree-toolbar { margin: var(--sp-2) 0 var(--sp-3); }
/* Virtual scrolling needs a bounded viewport: fill the window under nav/h1/toolbar. */
/* 203px: nav + page paddings + h1 + toolbar above, and a 32px bottom gap — the same
   breathing room as between the nav bar and the "Posnetki" header (measured live) */
.bo-tree { height: calc(100vh - 203px); min-height: 320px; }
.bo-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 28px; padding: 2px 6px;
    border: 2px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); color: var(--ink);
    font-family: var(--font-ui); font-size: 0.85rem; line-height: 1; cursor: pointer;
}
.bo-icon-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.bo-icon-btn:disabled { opacity: 0.5; cursor: default; }
.bo-tree-folder { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.bo-tree-actions { display: flex; gap: 4px; justify-content: center; }
/* Per-type study icons (Z2 stopwatch / MMA sector / SDD timeline) */
.bo-study-ico { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; flex: none; }
.bo-ico-z2  { color: var(--primary); }
.bo-ico-mma { color: var(--accent); }
.bo-ico-sdd { color: var(--ink-soft); }
.bo-ico-section { color: var(--ink-soft); }
/* Folder-row icons: folder / bin (Koš) / question mark (Nerazporejeno).
   No margin — .bo-tree-folder's gap provides the spacing. */
.bo-folder-ico { width: 16px; height: 16px; flex: none; }
.bo-ico-folder  { color: var(--accent); }
.bo-ico-bin, .bo-ico-unfiled { color: var(--ink-mut); }
/* Toolbar / context-menu command icons: standard glyphs (scissors, documents, clipboard,
   clipboard-x, trash) as currentColor masks — hooked in via IconCssClass, so they inherit
   the item's text color incl. the disabled state. */
.bo-cmd-ico {
    display: inline-block; width: 16px; height: 16px; flex: none;
    background-color: currentColor;
    -webkit-mask: var(--bo-ico) center / contain no-repeat;
    mask: var(--bo-ico) center / contain no-repeat;
}
.bo-ico-cut { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61 3.5 3.5zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zm7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z'/%3E%3C/svg%3E"); }
.bo-ico-copy { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z'/%3E%3C/svg%3E"); }
.bo-ico-paste { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M5.5 6a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zm0 2.5A.5.5 0 0 1 6 8h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); }
.bo-ico-paste-empty { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M6.146 6.646a.5.5 0 0 1 .708 0L8 7.793l1.146-1.147a.5.5 0 1 1 .708.708L8.707 8.5l1.147 1.146a.5.5 0 0 1-.708.708L8 9.207l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 8.5 6.146 7.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); }
.bo-ico-purge-class { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414l-3.879-3.879zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z'/%3E%3C/svg%3E"); }
.bo-ico-delete { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/%3E%3C/svg%3E"); }
.bo-ico-reference { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z'/%3E%3C/svg%3E"); }
/* Preglej / Potrdi: the read-only field and its button share the label's cell — a flex row with the
   field taking the width, so the pair never wraps apart in the header grid. */
.bo-approve { display: flex; gap: var(--sp-2); align-items: stretch; }
.bo-approve > :first-child { flex: 1 1 auto; min-width: 0; }
.bo-approve > :not(:first-child) { flex: none; white-space: nowrap; }
/* Reference badge before a flagged study's name in the tree (spec 2026-09-20). */
.bo-ref-badge { display: inline-block; margin-right: .3rem; color: #b8901b; font-size: .95em; vertical-align: -1px; }
.bo-ico-columns { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1H1.5zM10 15V1H6v14h4zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11v14z'/%3E%3C/svg%3E"); }
/* System rows (Koš / Nerazporejeno): no drag affordance */
.bo-drag-anchor-off > * { visibility: hidden; }
/* Changes modal (Spremenjen link → revision history) */
.bo-rev-link { color: var(--primary); text-decoration: underline; cursor: pointer; }
.bo-rev-list { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 60vh; overflow-y: auto; }
.bo-rev-head { font-weight: 700; display: flex; align-items: center; gap: var(--sp-3);
               justify-content: space-between; }
.bo-rev-changes { margin: var(--sp-1) 0 0; padding-left: 1.2rem; }

/* PDF / ghost action button */
.bo-pdf {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border: 2px solid var(--primary); border-radius: var(--radius);
    background: var(--card); color: var(--primary);
    font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.bo-pdf:hover { background: var(--primary); color: #fff; }

/* Z2 allowances / header panels — labeled-input grids on a card */
.bo-z2-allowances, .bo-z2-header, .bo-z2-header-links {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3); background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: var(--sp-4); margin: var(--sp-2) 0 var(--sp-4);
}
.bo-z2-allowances label, .bo-z2-header label, .bo-z2-header-links label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ink-mut);
}

/* Te1 build-up */
.bo-z2-buildup {
    list-style: none; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink);
    display: flex; flex-direction: column; gap: 4px;
}
.bo-z2-buildup strong { color: var(--accent); font-size: 1rem; }
/* Study title row (StudyHeader): same vertical rhythm as the plain h1 pages —
   sp-4 below the nav (like Posnetki) and sp-3 before the info line below it. */
.study-header { margin: var(--sp-4) 0 var(--sp-3); }
/* renaming: the text box takes the slack and the buttons never wrap ("V koš" used to fold onto two lines) */
.study-header > .dxbl-btn { white-space: nowrap; flex: 0 0 auto; }
.study-header h1 { min-width: 0; }
.study-header-edit { flex: 1 1 16rem; min-width: 10rem; max-width: 40rem; }
/* Sestav časa rows + worker practice rows (legacy Časi / Ljudje tabs) */
.bo-z2-components { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.bo-z2-component-row, .bo-z2-practice-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.bo-z2-practice { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.bo-z2-practice-name { min-width: 160px; font-weight: 700; }
/* Collapsible page sections (DxAccordion) — lightweight: no backgrounds, no borders,
   compact headers that read like the page's h2 line with the chevron beside them. */
.bo-acc {
    --dxbl-accordion-group-header-bg: transparent;
    --dxbl-accordion-group-header-color: var(--ink);
    --dxbl-accordion-group-header-hover-bg: transparent;
    --dxbl-accordion-group-header-hover-color: var(--primary);
    --dxbl-accordion-group-header-selected-bg: transparent;
    --dxbl-accordion-group-header-selected-color: var(--ink);
    --dxbl-accordion-group-item-btn-bg: transparent;
    --dxbl-accordion-group-item-btn-hover-bg: transparent;
    --dxbl-accordion-group-border-color: transparent;
    --dxbl-accordion-group-border-width: 0;
    --dxbl-accordion-group-border-radius: 0;
    --dxbl-accordion-group-header-font-size: 0.9rem;
    --dxbl-accordion-group-header-line-height: 1.3;
    --dxbl-accordion-group-header-padding-x: 0;
    --dxbl-accordion-group-header-padding-y: 4px;
    --dxbl-accordion-group-header-text-padding-y: 0;
}
.bo-acc, .bo-acc .dxbl-accordion-items-container { background: transparent; }
/* vertical rhythm matches the other pages' h2 sections: sp-6 between sections,
   sp-2 between a header and its content (same as `h2 { margin: sp-6 0 sp-2 }`) */
.bo-acc { margin-top: var(--sp-4); }
.bo-acc .dxbl-accordion-group {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    margin-bottom: var(--sp-6);
}
/* header = the tree folder-row feel: same size and 700 weight as bo-tree-folder */
.bo-acc .dxbl-accordion-group-header { background: transparent; font-weight: 700; min-height: 0; }
.bo-acc .dxbl-accordion-item-content { padding: var(--sp-2) var(--sp-2) 0 var(--sp-3); }
.bo-acc .dxbl-accordion-group-body { padding-top: var(--sp-1); }
.bo-acc .z2-form-wrap { margin-top: var(--sp-2); }
/* selected form row (drives the kontrolni diagram below the form) */
.z2-form tbody.z2-seg tr { cursor: pointer; }
.z2-form tbody.z2-seg tr.z2-row-sel td { box-shadow: inset 0 0 0 999px rgba(41, 98, 255, 0.16); }
.bo-z2-chart-title { margin-top: var(--sp-4); }
/* excluded readings (invalid or outside the section band): red background, out of ∑/tg;
   text stays as-is. The second selector outranks the row-selection tint (same box-shadow
   property) so the red stays visible on a selected row too. */
.z2-form td.z2-cell-excl,
.z2-form tbody.z2-seg tr.z2-row-sel td.z2-cell-excl { box-shadow: inset 0 0 0 999px rgba(198, 40, 40, 0.28); }
/* grafična kontrola, legacy FormGrafKontrola look: "Vsi časi" dashed red, "Izbrani časi"
   green with markers + value labels, yellow rubber-band selection (fixed CSS height =
   viewBox height so pointer Y maps 1:1 to chart units) */
.bo-z2-chart-svg { width: 100%; height: 280px; display: block; background: var(--card);
                   border: 1px solid var(--line); border-radius: var(--radius-sm);
                   touch-action: none; cursor: crosshair; font-family: var(--font-ui); }
.bo-z2-line-all { stroke: rgba(192, 0, 0, .47); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bo-z2-line-sel { stroke: rgba(0, 160, 0, .75); stroke-width: 2; }
.bo-z2-chart-pt { fill: rgb(0, 150, 0); }
.bo-z2-chart-pt-out { fill: #c62828; }
.bo-z2-pt-label { font-size: 0.7rem; font-weight: 600; fill: var(--ink-mut); text-anchor: middle; }
.bo-z2-axis { stroke: var(--line); stroke-width: 1; }
.bo-z2-axis-label { font-size: 0.7rem; fill: var(--ink-mut); }
.bo-z2-sel { fill: rgba(241, 234, 111, .35); stroke: rgba(186, 165, 0, .35); }
/* login card: the framed brand logo needs air for the protruding 4 */
.bo-login-logo { display: flex; justify-content: center; padding: 0.5rem 0 0.6rem; }
/* second-factor step: small muted copy above the code box (app/e-mail hint, resend confirmation) */
.bo-login-hint { color: var(--ink-mut); font-size: 0.85rem; margin: 0; }

/* header back arrow: shared .nv-back component (app-theme.css) */
.bo-h1-back { display: flex; align-items: center; gap: var(--sp-2); }
/* šifrant picker + "…" button (opens Matični podatki on the matching tab) */
.bo-sifrant-row { display: flex; gap: 4px; align-items: center; }
.bo-sifrant-row > :first-child { flex: 1; min-width: 0; }
.bo-sifrant-btn { flex: 0 0 auto; }
/* Časi section: unit picker + the sestav-časa table with the build-up result below */
.bo-z2-unit { display: flex; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-3); }
.bo-z2-times { border-collapse: collapse; margin-bottom: var(--sp-3); }
.bo-z2-times th, .bo-z2-times td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.bo-z2-times th { background: var(--surface); color: var(--ink-mut); font-weight: 700; }
.bo-z2-times-te1 td { font-weight: 700; }

/* Z2 form table — tablet parity (rules mirror Z2AnalysisView.razor.css; same tokens,
   since the office links the shared app-theme.css) */
.z2-form-wrap { border: 1px solid var(--line, #e0e0e0); border-radius: 10px;
                overflow-x: auto; width: fit-content; max-width: 100%;
                margin-bottom: var(--sp-4); background: var(--card, #fff); }
.z2-form { border-collapse: separate; border-spacing: 0; border: 0; table-layout: fixed;
           font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.z2-form th, .z2-form td { border: 0; border-right: 1px solid var(--line, #e6e6e6);
                           border-bottom: 1px solid var(--line, #e6e6e6);
                           padding: 1px 5px; text-align: center; }
.z2-form th { background: var(--accent, #2962ff); color: #fff; font-weight: 600; }
.z2-form td { background: var(--card, #fff); }
.z2-form td.z2-sum { background: var(--accent-weak, #e3f0ff); }
.z2-form td.z2-cell-left { text-align: left; }
.z2-form td.z2-foot { background: var(--surface, #fff); color: var(--ink-mut, #555);
                      font-weight: 600; text-align: right; }
.z2-form th .z2-unit { font-weight: 400; font-size: 0.72em; opacity: 0.9; }
/* sticky frame columns (widths match the colgroup) */
.z2-form th.z2-fz-st,   .z2-form td.z2-fz-st   { position: sticky; left: 0;     z-index: 3; }
.z2-form th.z2-fz-name, .z2-form td.z2-fz-name { position: sticky; left: 44px;  z-index: 3; }
.z2-form th.z2-fz-kol,  .z2-form td.z2-fz-kol  { position: sticky; left: 184px; z-index: 3; }
.z2-form th.z2-fz-zy,   .z2-form td.z2-fz-zy   { position: sticky; left: 230px; z-index: 3;
                                                 box-shadow: 2px 0 0 rgba(0,0,0,0.10); }
.z2-form th.z2-fz-sum,  .z2-form td.z2-fz-sum  { position: sticky; right: 112px; z-index: 3;
                                                 box-shadow: -2px 0 0 rgba(0,0,0,0.10); }
.z2-form th.z2-fz-avg,  .z2-form td.z2-fz-avg  { position: sticky; right: 54px;  z-index: 3; }
.z2-form th.z2-fz-t,    .z2-form td.z2-fz-t    { position: sticky; right: 0;     z-index: 3; }
.z2-form td.z2-fz-foot  { position: sticky; right: 54px; z-index: 3; }
.z2-form td.z2-ti-intr  { font-weight: 700; color: #c62828; }
.z2-form tbody.z2-seg:hover td { box-shadow: inset 0 0 0 999px rgba(41, 98, 255, 0.10); }
/* the two protocolled interactions */
.z2-form td.z2-mdrag { cursor: grab; }
.z2-form td.z2-mdrag:active { cursor: grabbing; }
.z2-form td.z2-m-edit { cursor: pointer; text-decoration: underline dotted; }
.z2-form td.z2-m-edit:hover { color: var(--primary); }
/* protocol dialog */
.bo-protocol-meta { font-weight: 700; color: var(--ink-mut); }
.bo-protocol-field { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.bo-protocol-memo { width: 100%; }
.bo-protocol-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Control chart */
.bo-z2-chart { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
               padding: var(--sp-4); margin-bottom: var(--sp-4); }
.bo-z2-chart-band { display: flex; gap: var(--sp-3); align-items: end; flex-wrap: wrap; margin-top: var(--sp-3); }
.bo-eps-over { color: var(--bad); font-weight: 700; }

/* Shrani bar lives INSIDE the accordion header, right-aligned; visible even collapsed */
.bo-acc-head { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.bo-acc-head-save { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: normal; }
.bo-acc-head-save .edit-save-bar { margin: 0 !important; }

/* per-user settings page */
.bo-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
               gap: var(--sp-3); margin: var(--sp-3) 0; }
.bo-settings label { display: flex; flex-direction: column; gap: 4px;
                     font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.bo-settings-hint { color: var(--ink-mut); font-size: 0.85rem; }

/* SDD exclusive-event overrides stack */
.bo-overrides { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-left: var(--sp-2);
                border-left: 3px solid var(--line); }

/* ── Alerts / gate ────────────────────────────────────────────────────────── */
.bo-error {
    background: rgba(217, 48, 37, 0.08); color: var(--bad);
    border: 1px solid rgba(217, 48, 37, 0.35); border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3); font-weight: 600;
}
.bo-gate { max-width: 420px; margin: 15vh auto 0; text-align: center; color: var(--ink-soft); }

/* dismissable server-change nudge (ChangesHub) on the open study pages — non-modal, so it must
   never look like a blocking alert the way .bo-error does */
.bo-changefeed-banner {
    display: flex; align-items: center; gap: var(--sp-3);
    background: rgba(245, 166, 35, 0.12); color: var(--ink);
    border: 1px solid rgba(245, 166, 35, 0.4); border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
}
.bo-changefeed-banner span { flex: 1 1 auto; font-weight: 600; }
.bo-changefeed-dismiss {
    background: none; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer;
    color: var(--ink-soft);
}

/* section CRUD in the Z2 obrazec */
.z2-sec-drag { cursor: grab; }
.z2-sec-cell { position: relative; }
.z2-sec-label { cursor: text; }
.z2-sec-label:hover { text-decoration: underline dotted; }
.z2-sec-edit { display: inline-flex; gap: 2px; align-items: center; }
.z2-sec-del { position: absolute; top: 2px; right: 2px; border: none; background: none;
              color: var(--ink-mut); font-size: 0.95rem; line-height: 1; cursor: pointer;
              opacity: 0; padding: 0 2px; }
.z2-sec-cell:hover .z2-sec-del { opacity: 1; }
.z2-sec-del:hover { color: var(--bad); }
.z2-add-section { margin-top: var(--sp-2); }

/* section rows in the studies tree */
.bo-tree-section { color: var(--ink-soft); font-size: 0.9em; }

/* ghost "+" row + full-width inline section editor */
/* add-segment "+" row — NormarTab4 parity: centered oversized plus in the accent color,
   hover tint on the whole row; sticky keeps the glyph at the viewport center while the
   wide table scrolls horizontally */
tbody.z2-seg-add .z2-add-cell {
    text-align: center; font-size: 1.6rem; line-height: 1; font-weight: 400;
    color: var(--accent, #2962ff); cursor: pointer; padding: 0.35rem;
    background: var(--surface, #fff); user-select: none;
}
tbody.z2-seg-add:hover .z2-add-cell { background: var(--accent-weak, #e3f0ff); }
.z2-add-plus { position: sticky; left: 50%; transform: translateX(-50%); display: inline-block; }
.z2-sec-edit { display: block; }
.z2-sec-edit .z2-sec-editor { width: 100%; min-width: 110px; }
.z2-sec-edit .z2-sec-editor-no { min-width: 56px; }

/* unsaved-changes hint: pulsing red dot + ink-colored text (orange text-warning was
   unreadable, especially inside the accordion headers) */
.bo-unsaved { display: inline-flex; align-items: center; gap: 6px;
              color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.bo-unsaved-dot { width: 8px; height: 8px; border-radius: 50%; background: #c62828;
                  flex: none; animation: bo-unsaved-pulse 1.6s ease-in-out infinite; }
@keyframes bo-unsaved-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* company-logo preview on the settings page */
.bo-logo-preview { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bo-logo-preview img { max-height: 56px; max-width: 220px; border: 1px solid var(--line, #d5dbe3);
                       border-radius: 6px; padding: 4px; background: #fff; }

/* inline-editable labels stay clickable even when the value is empty */
.z2-sec-label { display: inline-block; min-width: 48px; min-height: 1em; }
.z2-sec-label-empty { color: var(--ink-mut); }

/* praksa delavcev: fixed columns + persistent header labels above the two fields */
.bo-z2-practice-row { display: grid; grid-template-columns: 160px minmax(180px, 1fr) minmax(180px, 1fr); }
.bo-z2-practice-head span { font-size: 0.8rem; font-weight: 600; color: var(--ink-mut); }


/* deleži po kategorijah — chart block in the tablet SDD Rezultati layout */
.bo-cat-chart { margin: 8px 0 16px; max-width: 640px; }
.bo-rez-chart { margin: 8px 0 20px; }
.bo-rez-chart-head { display: flex; align-items: center; gap: 0.5rem 0.75rem;
                     margin-bottom: 0.5rem; flex-wrap: wrap; }
.bo-chip-row { display: inline-flex; align-items: center; }
.bo-chip-row .bo-chip { margin: 0 4px 0 0; }
.bo-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
              letter-spacing: 0.08em; color: var(--ink-mut); }
.bo-copy-row { display: flex; align-items: center; gap: 12px; }
/* the one copy-button idiom (Z2 and SDD charts/tables): bo-icon-btn pushed to the right;
   feedback is always the bo-toast below */
.bo-copy-btn { margin-left: auto; }

/* transient toast: the shared ToastHost (.app-toast in app-theme.css) */
/* the save row sits above its control, aligned to the right */
.edit-save-bar { justify-content: flex-end; }

/* settings page — the tablet's mma-settings-group idiom: eyebrow + chips / input+unit */
.bo-settings-group { display: flex; flex-direction: column; gap: 8px;
                     align-items: flex-start; margin: 0 0 var(--sp-4); }
.bo-settings-group .bo-settings-hint { margin: 0; }
.bo-input-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bo-input {
    height: 44px; padding: 0 12px; width: 110px;
    border: 1.5px solid var(--line); border-radius: var(--radius);
    font-family: var(--font-ui); font-size: 1rem; color: var(--ink); background: var(--card);
}
.bo-input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.bo-input-unit { font-size: 0.9rem; color: var(--ink-mut); font-weight: 600; }

/* ── Operator usage statistics (spec 2026-08-26) ─────────────────────────── */
.bo-stat-tiles { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-4); }
.bo-stat-tile {
    display: flex; flex-direction: column; gap: 2px; min-width: 10rem;
    padding: var(--sp-3) var(--sp-4);
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.bo-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.bo-stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
                 letter-spacing: 0.05em; color: var(--ink-mut); }
.bo-stat-chart { margin-bottom: var(--sp-4); }

/* ── AI classification (SddStudy: the events toolbar and the badges in the code cells) ── */
.bo-ai-suggest { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bo-ai-busy { color: var(--ink-mut); }
.bo-ai-error { color: #b00020; }
.bo-ai-model { color: var(--ink-mut); font-size: 0.85rem; }
/* one proposal in a still-empty code cell: amber like the other "needs a decision" markers */
.bo-ai-badge {
    display: inline-block; padding: 1px 6px; border-radius: 100px;
    background: var(--warn); color: #fff; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.bo-ai-act {
    margin-left: 2px; padding: 0 3px; border: 0; background: none; cursor: pointer;
    color: var(--ink-mut); font-size: 0.8rem; line-height: 1;
}
.bo-ai-act:hover { color: var(--ink); }

/* SDD row-tool dialogs (delete confirmation, insert with duration) */
.bo-sdd-dialog .dxbl-popup-body { min-width: 22rem; }
.bo-dialog-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.bo-sdd-toolbar { margin: 0 0 var(--sp-2); }
.bo-ico-insert-row { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h11A1.5 1.5 0 0 1 15 2.5v2A1.5 1.5 0 0 1 13.5 6h-11A1.5 1.5 0 0 1 1 4.5v-2zM2.5 2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-11zM1 11.5A1.5 1.5 0 0 1 2.5 10h11a1.5 1.5 0 0 1 1.5 1.5v2A1.5 1.5 0 0 1 13.5 15h-11A1.5 1.5 0 0 1 1 13.5v-2zm1.5-.5a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-11z'/%3E%3Cpath d='M8 6.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 0 1h-.5V9a.5.5 0 0 1-1 0v-.5H7a.5.5 0 0 1 0-1h.5V7a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E"); }
.bo-ico-insert-dur { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E"); }
.bo-ico-paste-same { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M8 6a.5.5 0 0 1 .5.5v2.793l.646-.647a.5.5 0 0 1 .708.708l-1.5 1.5a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708l.646.647V6.5A.5.5 0 0 1 8 6zM5.5 12.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); }
.bo-table-actions { display: flex; justify-content: flex-end; margin: var(--sp-1) 0 var(--sp-3); }
/* activity classification cell: the combo root (.dxbl-text-edit) is a full-width flex block, so the
   AI star and the M/V "!" sit in a flex row next to it instead of wrapping under it */
.bo-tag-cell { display: flex; align-items: center; gap: 2px; }
.bo-tag-cell .dxbl-text-edit { flex: 1 1 auto; min-width: 0; }
.bo-tag-cell .sdd-ai-ico, .bo-tag-cell .sdd-mv-warn-ico { flex: 0 0 auto; }
.bo-ai-priority .bo-chip-row { margin-bottom: var(--sp-1); }
.bo-ai-acc-table, .bo-ai-acc-misses { margin-top: var(--sp-2); border-collapse: collapse; }
.bo-ai-acc-table th, .bo-ai-acc-table td, .bo-ai-acc-misses th, .bo-ai-acc-misses td { padding: 2px 10px 2px 0; text-align: left; }
.bo-mma-toolbar { margin: 0 0 var(--sp-2); }
.bo-tb-unit { display: inline-flex; align-items: center; gap: 6px; }
.bo-tb-label { font-size: 0.85rem; color: var(--ink-soft); }
.bo-tb-unit-combo { width: 7.5rem; }
.bo-ico-ai { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z'/%3E%3C/svg%3E"); }
.bo-ico-translate { --bo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z'/%3E%3Cpath d='M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z'/%3E%3C/svg%3E"); }
/* the AI command while a run is in flight (icon-only toolbars have no text to show it) */
@keyframes bo-ico-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.bo-ico-running { animation: bo-ico-pulse 1.2s ease-in-out infinite; }

/* the AI's question dialog (SDD/MMA): the model's options as buttons, a free answer, Prezri */
.bo-ai-ask-dialog .bo-ai-ask-for { color: var(--ink-mut); margin: 0 0 var(--sp-1); }
.bo-ai-ask-dialog .bo-ai-ask-unsure { color: var(--ink-mut); font-size: 0.9rem; margin: 0 0 var(--sp-1); }
.bo-ai-ask-dialog .bo-ai-ask-text { font-weight: 600; margin: 0 0 var(--sp-2); }
.bo-ai-ask-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.bo-ai-ask-free { display: flex; gap: var(--sp-2); align-items: center; }
.bo-ai-ask-free .dxbl-text-edit { flex: 1; }

/* RehAI code under the SDD title (Z2 keeps it inside the header grid) */
.bo-sdd-external-ref { max-width: 260px; margin: var(--sp-2) 0 var(--sp-3); }
.bo-sdd-external-ref label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ink-mut);
}

/* Build stamp in the nav bar (upper right, left of the user pill): small and quiet. */
.bo-version {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    font-size: 0.58rem; line-height: 1.15; opacity: 0.4; letter-spacing: 0.02em; white-space: nowrap;
    align-self: center; margin-right: var(--sp-2);
}
.bo-version-row { display: block; }
@media (max-width: 900px) { .bo-version { display: none; } }