/* OtOpcUa Admin — app-only view layer over the shared ZB.MOM.WW.Theme kit.
   The kit's theme.css (tokens) + layout.css (side-rail shell, login card) are
   linked via <ThemeHead/> and own all of the shell/rail/login styling. This
   sheet carries only the few rules the kit does not provide. */

/* Static (non-collapsible) eyebrow label — used for the "Session" caption in the
   rail footer. The kit styles a collapsible section <summary> as
   .rail-eyebrow-toggle; a plain inline label needs this lighter rule. */
.rail-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    padding: 0.3rem 0.6rem;
}

/* OtOpcUa domain pages (Alerts, ScriptLog, Fleet, Hosts, AlarmsHistorian,
   RoleGrants, ImportEquipment) use two extra status-chip variants on top of the
   kit's .chip base + .chip-ok/.chip-warn/.chip-bad/.chip-idle/.chip-info set.
   .chip-alert is the red/danger variant (mirrors the kit's .chip-bad);
   .chip-caution is the amber variant (mirrors the kit's .chip-warn). Both reuse
   the kit's status tokens so they stay on-palette. */
.chip-alert   { color: var(--bad);      background: var(--bad-bg);  border-color: var(--bad-border); }
.chip-caution { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-border); }

/* Button sizing lives in the kit since ZB.MOM.WW.Theme 0.4.0 (layout.css ships the
   .btn / .btn-sm CSS-variable overrides this sheet carried locally under 0.3.1). */

/* Red variant of the kit's .notice inline banner (theme.css styles .notice amber,
   off the --warn-* tokens). Error banners across the AdminUI want the red tint, and
   were reaching for it with an inline style="border-color:var(--alert)" — but no
   --alert token exists in Theme 0.3.1, site.css or anywhere else, so that inline
   rule resolved to nothing and the banner stayed amber. The kit's red family is the
   --bad-* set (--bad / --bad-bg / --bad-border), the same tokens .chip-alert above
   uses; combine as `class="panel notice notice-alert"`. */
.notice-alert {
    color: var(--bad);
    background: var(--bad-bg);
    border-color: var(--bad-border);
}

/* Fixed-width expander column for the tree components (RawTree, AclScopeTree, and
   friends). Their rows are d-flex, so a bare `width` on an expander button or its
   empty-leaf placeholder is a suggestion the flex algorithm is free to shrink —
   flex-basis is what actually holds the column, hence both properties here. */
.tree-twist {
    flex: 0 0 18px;
    width: 18px;
}

/* Modal sizing (#631). Bootstrap sizes .modal-backdrop with 100vw/100vh, and 100vw includes the
   scrollbar gutter, so on a tall form (Configure driver / Modbus) the backdrop overran the viewport
   and produced a page-level horizontal scrollbar. Pin it with inset:0 instead (no vw/vh), and keep
   the dialog inside the viewport. These modals are hand-rolled (display:block, no Bootstrap JS). */
.modal-backdrop {
    inset: 0;
    width: auto;
    height: auto;
}

.modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    max-width: min(var(--bs-modal-width, 500px), calc(100vw - 2rem));
}