/*
  SIDAN2 — shared application CSS.
  Custom classes shared by ADMIN and LIVE: layout helpers (.splash-*,
  .auth-*, .form-card, .form-page), brand chrome (.brand-link, .brand-logo,
  .lang-pill, .lang-row, .modal-header-back, .app-footer*, …), the tree component,
  the admin-section rubric, and generic resets.

  Bootstrap theming/overrides do NOT live here — see css/bootstrap.css for
  anything that styles a Bootstrap class globally (CLAUDE.md "Bootstrap
  overrides"). Component-scoped overrides via ancestor classes
  (e.g. `.admin-checkbox-list .form-check`) stay in css/admin.css.
*/

/* ──────────────────────────────────────────────────────────────────────
   0. Global resets and type defaults
   ────────────────────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--sidan-font-family);
    font-weight: var(--sidan-font-weight-regular);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--sidan-text);
    background-color: var(--sidan-bg);
    -webkit-font-smoothing: antialiased;
}

/* Transparent wrapper used by the layouts to force a live re-render of the
   page body when the UI language changes (its @key flips). display:contents
   keeps it out of the box tree so flex/grid layouts are unaffected. */
.lang-rerender { display: contents; }

/* Blazor error UI — keep it visible but unobtrusive. */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ──────────────────────────────────────────────────────────────────────
   1. Layout helpers — splash / form pages
   ────────────────────────────────────────────────────────────────────── */
.splash-page {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top-anchored (not centered) so the logo sits at the same height on all
       splash pages (landing + both logins) — switching pages barely moves it. */
    justify-content: flex-start;
    text-align: center;
    padding: 12vh 24px 48px;
}

.splash-logo {
    display: block;
    height: 64px;
    width: auto;
}

/* Back-to-landing link, top-left of the splash (white background on all
   entry pages — landing + both logins). */
.splash-back {
    position: absolute;
    top: 24px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sidan-text-muted);
    text-decoration: none;
    font-size: var(--sidan-text-md);
}
.splash-back:hover { color: var(--sidan-color-primary); }

.form-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3rem;
    min-height: 70vh;
}

.form-card {
    width: 100%;
    max-width: 420px;
}

.code-input {
    font-size: var(--sidan-text-3xl);
    letter-spacing: 0.5rem;
    font-weight: var(--sidan-font-weight-bold);
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────
   2. Brand link + logo (used in shell headers)
   ────────────────────────────────────────────────────────────────────── */
.brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 38px;
    width: auto;
}

/* ──────────────────────────────────────────────────────────────────────
   3. Auth layout — shared by ADMIN and LIVE login.
   Pages compose .auth-header + .auth-main directly under RootLayout, which
   already provides the viewport-height flex column and the footer.
   ────────────────────────────────────────────────────────────────────── */
.auth-header {
    flex: 0 0 auto;
    height: 64px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    background: var(--sidan-surface);
    border-bottom: 1px solid var(--sidan-border);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sidan-text);
    text-decoration: none;
}

.auth-brand:hover {
    color: var(--sidan-text);
    text-decoration: none;
}

.auth-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    overflow-y: auto;
}

.auth-card {
    width: 100%;
    max-width: 540px;
    background: var(--sidan-card-bg);
    color: var(--sidan-card-text);
    border-radius: var(--sidan-radius-lg);
    padding: 36px;
    box-shadow: var(--sidan-shadow-md);
}

.auth-card-head {
    text-align: center;
    margin-bottom: 28px;
}

.auth-card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.auth-card-logo img {
    display: block;
    height: 72px;
    width: auto;
    max-width: 100%;
}

/* Large area wordmark under the logo (e.g. "ADMIN" / "LIVE").
   Twice the largest type token, Museo Sans 500. */
.auth-card-area {
    text-align: center;
    font-family: var(--sidan-font-sans);
    font-size: calc(var(--sidan-text-3xl) * 2);
    font-weight: var(--sidan-font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sidan-text-muted);
    margin-bottom: 5px;
}

/* Halve the logo→area gap (only when an area wordmark follows, so the
   landing page — logo without area label — keeps its full spacing). */
.auth-card-logo:has(+ .auth-card-area) {
    margin-bottom: 12px;
}

.auth-card-head h1 {
    font-size: var(--sidan-text-3xl);
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    /* Headlines must never look focused. Some browsers/AT add a focus ring
       around any element they treat as a landmark — explicitly suppress it. */
    outline: none;
}
.auth-card-head h1:focus,
.auth-card-head h1:focus-visible { outline: none; box-shadow: none; }

.auth-card-head p {
    font-size: var(--sidan-text-md);
    color: var(--sidan-text-muted);
    margin: 0;
}

.auth-field {
    margin-bottom: 14px;
}

/* Off-screen decoy field — see Admin/Login.razor. Intentionally generic class
   name so it doesn't shout "honeypot" in the DOM (sophisticated bots grep for
   that). position:absolute + negative offset instead of display:none so the
   element stays in the document tree; bots that filter by visibility:hidden
   /display:none won't filter it out, but a form-filler will still write into
   it. aria-hidden in the markup keeps screen readers silent. */
.auth-extra-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.auth-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.auth-field-label-row .form-label {
    margin-bottom: 0;
}

.auth-field-link {
    font-size: var(--sidan-text-base);
    font-weight: 500;
    color: var(--sidan-color-primary);
    cursor: pointer;
    text-decoration: none;
}

.auth-field-link:hover {
    text-decoration: underline;
    color: var(--sidan-color-primary-hover);
}

.auth-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--sidan-text-md);
    /* Tighten the label's line box so its optical centre lines up with the
       fixed-height checkbox — otherwise the tall default line-height pushes the
       box visually above the text. */
    line-height: 1.2;
    color: var(--sidan-text);
    margin: 18px 0 22px;
    cursor: pointer;
    user-select: none;
}

.auth-check-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--sidan-border-strong);
    border-radius: 4px;
    background: var(--sidan-surface);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
    margin: 0;
}

.auth-check-row input[type="checkbox"]:checked {
    background: var(--sidan-color-primary);
    border-color: var(--sidan-color-primary);
}

.auth-check-row input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 10px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.auth-meta {
    margin-top: 22px;
    font-size: var(--sidan-text-md);
    color: var(--sidan-text-muted);
    text-align: center;
}

.auth-error,
.auth-info {
    margin: 8px 0 16px;
    padding: 12px 14px;
    border-radius: var(--sidan-radius-sm);
    font-size: var(--sidan-text-base);
    line-height: 1.45;
}

.auth-error {
    background: var(--sidan-danger-bg, #fdecec);
    color: var(--sidan-danger, #b32424);
    border: 1px solid var(--sidan-danger-border, #f3c0c0);
}

.auth-info {
    background: var(--sidan-info-bg, #eaf2ff);
    color: var(--sidan-info, #1c3d7a);
    border: 1px solid var(--sidan-info-border, #b8cdee);
}

/* Password-rules checklist on the ChangePassword auth-card. Each entry shows a
   Material Symbols "check" glyph; the marker + text switch from muted to the
   customer's primary color as each rule is satisfied (li.is-ok is toggled
   from the page). */
.auth-rules {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    color: var(--sidan-text-muted);
}
.auth-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    /* Matching line-height on both items is the only reliable way to vertically
       center an icon glyph against running text — align-items: center centers
       the boxes, not the visual centers, so mismatched line-heights leave the
       icon visibly above or below the text. */
    line-height: 1.4;
}
.auth-rules li::before {
    content: "check_circle";
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1.4;
    color: var(--sidan-border, rgba(0, 0, 0, .35));
    flex: 0 0 auto;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    /* FILL=1 renders the solid disc variant (white check cut out of a filled
       circle) instead of the outlined circle. */
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.auth-rules li.is-ok { color: var(--sidan-color-primary); }
.auth-rules li.is-ok::before { color: var(--sidan-color-primary); }

/* ──────────────────────────────────────────────────────────────────────
   4. Application footer (shared by ADMIN and LIVE)
   ────────────────────────────────────────────────────────────────────── */
.app-footer {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 8px 24px;
    background: var(--sidan-surface);
    border-top: 1px solid var(--sidan-border);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--sidan-text-base);
    color: var(--sidan-text-muted);
}

.app-footer-version {
    color: var(--sidan-text-subtle);
    font-variant-numeric: tabular-nums;
}

.app-footer-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Extra space before the language picker so the gap roughly matches the
   privacy↔imprint distance (which includes the "·" separator). */
.app-footer-right .lang-pill {
    margin-left: 20px;
}

.app-footer-link {
    color: var(--sidan-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color .12s;
}

.app-footer-link:hover {
    color: var(--sidan-color-primary);
    text-decoration: none;
}

.app-footer-sep {
    color: var(--sidan-text-subtle);
    user-select: none;
}

/* ──────────────────────────────────────────────────────────────────────
   5. Language picker — flag pill + modal
   ────────────────────────────────────────────────────────────────────── */
.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 10px;
    background: var(--sidan-surface);
    border: 1px solid var(--sidan-border-strong);
    border-radius: var(--sidan-radius-sm);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    color: var(--sidan-text);
    font: inherit;
    font-size: var(--sidan-text-md);
}

.lang-pill:hover {
    background: var(--sidan-surface-sunk);
}

.lang-pill .flag {
    flex-shrink: 0;
}

/* Spinner shown left of the flag while a language is being translated. */
.lang-pill-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    color: var(--sidan-color-primary);
    flex-shrink: 0;
}

.lang-pill--sm .lang-pill-spinner {
    width: 13px;
    height: 13px;
}

.lang-pill .material-symbols-outlined {
    font-size: var(--sidan-text-md);
    color: var(--sidan-text-muted);
}

.lang-pill-code {
    font-weight: 500;
    letter-spacing: 0.02em;
}

.lang-pill--sm {
    height: 36px;
    padding: 0 8px 0 10px;
    font-size: var(--sidan-text-base);
    gap: 5px;
}

.lang-pill--sm .flag {
    width: 18px;
    height: 13px;
}

.lang-pill--sm .material-symbols-outlined {
    font-size: var(--sidan-text-base);
}

/* Flag wrappers. The SVG flag assets are designed as round disks (viewBox
   512×512, content inscribed in a circle), so we render them as squares with
   a full circle border-radius — anything else would crop the artwork. */
.flag {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sidan-surface-sunk);
    box-shadow: 0 0 0 1px rgba(20, 25, 35, 0.08) inset;
    line-height: 0;
    vertical-align: middle;
}

.flag svg,
.flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Languages without a mapped country flag: borderless globe placeholder. */
.flag.flag--globe {
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.flag .flag-globe {
    font-size: 16px;
    color: var(--sidan-text-subtle);
    line-height: 1;
}

.flag.flag-lg .flag-globe { font-size: 22px; }
.flag.flag-sm .flag-globe { font-size: 13px; }

.flag.flag-lg {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.flag.flag-sm {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* ──────────────────────────────────────────────────────────────────────
   6. Modal header controls + language-picker content
   The modal chrome itself is Bootstrap (themed in css/bootstrap.css). The
   classes below are CONTENT used inside modal bodies/headers: the icon
   buttons in a .modal-header (close / back) and the language-picker rows.
   ────────────────────────────────────────────────────────────────────── */

/* Back ("arrow_back") icon button in a .modal-header — closing is handled by
   AdminModal's standard btn-close, this is only the drill-down back affordance. */
.modal-header-back {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--sidan-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header-back:hover {
    background: var(--sidan-surface-sunk);
    color: var(--sidan-text);
}

/* Spinner shown in a language row while that language is being translated,
   sized to fill the same 28px slot the flag occupies. */
.lang-row-spinner {
    width: 24px;
    height: 24px;
    margin: 0 2px;
    color: var(--sidan-color-primary);
    flex-shrink: 0;
}

/* Status line shown after an activation completes. */
.lang-flash {
    margin: 4px 20px 12px;
    padding: 10px 14px;
    border-radius: var(--sidan-radius-sm);
    background: var(--sidan-color-primary-faint);
    color: var(--sidan-text-muted);
    font-size: var(--sidan-text-base);
    line-height: 1.45;
}

/* Language list inside the add-language modal. The Bootstrap .modal-body is the
   scroll container (the search bar stays put via its own sticky rule), so the
   list just lays out its rows. */
.lang-list {
    padding: 8px 0;
}

/* Session-warning modal: oversized monospaced countdown sitting between the
   explanatory paragraph and the "Stay signed in" button. */
.session-warning-countdown {
    margin: 20px 0 8px;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--sidan-color-primary);
}

/* Language rows inside the modal */
.lang-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background .12s;
}

.lang-row:hover {
    background: var(--sidan-surface-sunk);
}

.lang-row.is-active {
    background: var(--sidan-color-primary-faint);
}

.lang-row-text {
    flex: 1;
    min-width: 0;
}

.lang-row-name {
    font-weight: 500;
    font-size: var(--sidan-text-md);
    color: var(--sidan-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-row-native {
    font-size: var(--sidan-text-base);
    color: var(--sidan-text-subtle);
}

.lang-row-meta {
    font-size: var(--sidan-text-base);
    color: var(--sidan-text-muted);
    text-align: right;
    flex-shrink: 0;
}

.lang-row .check {
    color: var(--sidan-color-primary);
    flex-shrink: 0;
}

.lang-row.is-add {
    color: var(--sidan-color-primary);
    font-weight: 500;
    border-top: 1px solid var(--sidan-border);
    margin-top: 8px;
    padding-top: 14px;
}

.lang-row.is-add:hover {
    background: var(--sidan-color-primary-soft);
}

/* Globe leading icon on the "add language" row — sized like the flag slot. */
.lang-row-globe {
    width: 28px;
    font-size: 26px;
    color: var(--sidan-color-primary);
    flex-shrink: 0;
    text-align: center;
}

.lang-row .add-icon {
    color: var(--sidan-text-subtle);
    flex-shrink: 0;
}

/* Search box at the top of the "add language" view. */
.lang-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 12px;
    /* The Bootstrap .modal-body scrolls; keep the search bar pinned to the top
       so it stays usable while the language list scrolls beneath it. */
    position: sticky;
    top: 0;
    background: var(--sidan-surface);
    z-index: 1;
}

.lang-search .material-symbols-outlined {
    color: var(--sidan-text-subtle);
    flex-shrink: 0;
}

.lang-section-head {
    font-size: var(--sidan-text-base);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidan-text-subtle);
    font-weight: 600;
    padding: 12px 20px 4px;
}

/* ──────────────────────────────────────────────────────────────────────
   7. Tree — generic hierarchical browser/picker/viewer.
   Ported from FeedbackSchool's <TreePicker>/<TreeEditor>. Connector lines
   are Windows-Explorer style: a vertical spine in the indent strip, an
   L-branch off it for each leaf row. Colors come from sidan tokens.

   Shared by <TreeView>, <TreePicker>, and the customer-hierarchy admin
   view — purely visual chrome, no behavioural assumptions.
   ────────────────────────────────────────────────────────────────────── */
.tree-view {
    user-select: none;
    display: flex;
    flex-direction: column;
}

.tree-view-content {
    flex: 1;
    min-height: 0;
}

.tree-picker-scroll {
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
}

.tree-node { cursor: pointer; }

.tree-node-header {
    display: flex;
    align-items: center;
    padding: 2px 0;
    gap: 2px;
}

.tree-node-header:hover .tree-node-name {
    background-color: var(--sidan-surface-sunk, rgba(0, 0, 0, .05));
}

.tree-node-header.assigned .tree-node-name {
    background: var(--sidan-color-primary);
    color: var(--sidan-color-primary-ink);
}

.tree-node-header.highlighted .tree-node-name {
    box-shadow: inset 0 0 0 1px var(--sidan-color-primary);
}

.tree-node-header.selected .tree-node-name {
    background: var(--sidan-color-primary);
    color: var(--sidan-color-primary-ink);
}

.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    flex-shrink: 0;
    /* White background masks the spine where it would otherwise cross the
       glyph (Windows-Explorer effect). */
    background-color: var(--sidan-surface, #fff);
    z-index: 1;
    position: relative;
    color: var(--sidan-text-muted);
}
.tree-toggle .material-symbols-outlined { font-size: 18px; }

.tree-toggle-placeholder {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}

.tree-node-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 8px;
    border-radius: var(--sidan-radius-sm, 6px);
    transition: background-color .12s;
    font-size: var(--sidan-text-md);
}

.tree-node-grouping > .tree-node-header .tree-node-name {
    color: var(--sidan-text-muted);
    font-weight: 500;
}

.tree-children {
    padding-left: 1.75rem;
}

.tree-connector { position: relative; }

/*  Tree connectors deliberately use a darker ink than .admin- surface borders
    (--sidan-border, ~10% darker than white) so the parent/child relationship
    actually reads. --sidan-text-subtle (#8A92A1, ~45% L) sits between the
    surface tokens and the body text — visible enough to follow with the eye,
    quiet enough that the node names stay the primary signal. */
.tree-connector::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: -0.4rem;
    bottom: 0;
    border-left: 1px solid var(--sidan-text-subtle, rgba(0, 0, 0, .45));
}

.tree-connector-leaf::before {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: 1rem;
    width: 0.9rem;
    border-top: 1px solid var(--sidan-text-subtle, rgba(0, 0, 0, .45));
}

.tree-connector-last::after { bottom: auto; height: 1.65rem; }
.tree-connector-last.tree-connector-leaf::after { height: 1.4rem; }

/* Root level: no spine going up out of the page. */
.tree-connector-root::after { top: 0.4rem; }
.tree-connector-root.tree-connector-leaf::before { top: 1rem; }

.tree-node-readonly .tree-node-header { cursor: default; }
.tree-node-readonly .tree-node-header:hover .tree-node-name { background: transparent; }

/* Rubric block — section + heading + hint. Used inside an admin tab panel
   to group related form fields under a labelled heading (e.g. "Stamm" +
   "Kontakt" inside the Customer Stamm tab). The 32px top gap separates one
   rubric from the next; the :first-child reset cancels it for the leading
   rubric so it hugs the tab header. */
.admin-section { margin-top: 32px; }
.admin-section:first-child { margin-top: 0; }

/* Two .admin-section blocks side by side in a 2-column grid. Used where two
   rubrics belong on the same row (e.g. Roles + Customer). Reset the second
   column's margin-top so both rubric headings line up at the same y. */
.admin-section-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.admin-section-pair > .admin-section {
    margin-top: 0;
}

/* Two-column wrapper for a tab/panel that hosts MULTIPLE stacked
   .admin-section blocks per column (vs .admin-section-pair, which pairs
   exactly one section in each column). Each column is a plain div that
   holds whatever the panel needs — sections, buttons, anything; the
   first child's top-margin is reset so both columns start flush with
   the tab header. Collapses to one column below 880px so each section
   gets its full reading width on tablet-portrait. */
.admin-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.admin-two-col > * > :first-child {
    margin-top: 0;
}
@media (max-width: 880px) {
    .admin-two-col { grid-template-columns: minmax(0, 1fr); }
}
.admin-section-title {
    font-size: var(--sidan-text-md);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--sidan-text);
    margin: 0 0 14px;
}
.admin-section-hint {
    color: var(--sidan-text-muted);
    font-size: var(--sidan-text-md);
    margin: 0 0 14px;
    max-width: 60ch;
}
.admin-checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-switch.is-disabled { opacity: .5; cursor: not-allowed; }
.admin-hint-pill {
    background: var(--sidan-surface-strong, rgba(0, 0, 0, .05));
    color: var(--sidan-text-muted);
    font-size: var(--sidan-text-sm);
    padding: 2px 8px;
    border-radius: var(--sidan-radius-pill, 999px);
}
.admin-inherit-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-inherit-pill {
    font-size: var(--sidan-text-sm);
    color: var(--sidan-text-muted);
    background: var(--sidan-surface-strong, rgba(0, 0, 0, .04));
    padding: 4px 10px;
    border-radius: var(--sidan-radius-pill, 999px);
    white-space: nowrap;
}
.admin-inherit-reset {
    background: none;
    border: none;
    color: var(--sidan-text-muted);
    cursor: pointer;
    padding: 4px;
}
.admin-inherit-reset:hover { color: var(--sidan-color-primary); }

/* Inherit visualisation: when a settings field has no own value it shows
   the inherited number with a dashed border + muted text so the operator
   can tell at a glance which rows are still on the default and which ones
   override it. Focus swaps to the regular solid style so editing reads
   normal — the dashed state is purely a "this is a preview" cue. */
.form-control.admin-input-inherited {
    border-style: dashed;
    color: var(--sidan-text-muted);
}

.form-control.admin-input-inherited:focus {
    border-style: solid;
    color: var(--sidan-text);
}