/* ============================================================================
   Aristoqle — admin console theme (brand 2.0: gold / cream / taupe / charcoal).

   Single stylesheet for the admin console. Revised against the 2026-09 handoff
   (Aktivnosti / Informacije / Breznica redesign), whose three rules govern
   every component here:

     1. Action hierarchy — one filled primary per screen, a white secondary,
        a text-only tertiary, and destructive actions as low-emphasis text
        parked at the opposite end of a footer from the safe actions.
     2. Density discipline — content and controls are capped to what they
        hold (.content-narrow 820px, .content-table 1060px, .form-input--short
        420px, .form-input--xs 88px); rows are 56px; related fields pair up.
     3. No duplicated information — card headers that repeat the H1, per-row
        type icons beside a type tag, and decorative field/heading icons are
        gone (.form-section-icon, .cell-name-icon and .form-input-icon are
        hidden here so untouched pages comply too).

   Class vocabulary is unchanged (.master-sidebar, .master-content, .form-input,
   .btn-primary-action, .data-table, .nav-tree-*, .edit-panel …) so every admin
   page picks up the look; the new patterns (.page-title-row, .count-pill,
   .type-tag, .card-region, .card-footer, .toggle-row, .dropzone, .modal-*,
   .alert-*, .drag-grip) are additive.
   ============================================================================ */

/* ── Manrope (variable, 200–800 in one file per subset) ──────────────────────
   Self-hosted: no Google Fonts CDN request per page load. latin-ext carries the
   Croatian diacritics (č ć đ š ž — all inside U+0100-02BA). */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────
   Values are the handoff's design tokens. Every text/background pair used at
   small sizes meets AA 4.5:1 — the muted ramp was darkened for that. */
:root {
    /* Brand */
    --brand-gold:       #A5893C;  /* primary button, focus border, active-toggle track, avatar, nav accent */
    --brand-gold-hover: #967C34;
    --brand-gold-ink:   #8D7332;  /* accent as TEXT on white (links, tertiary button) */
    --brand-gold-ink-2: #7A6329;  /* accent as text on tinted panels (#faf7f1) */
    --brand-gold-soft:  #C9A752;  /* secondary nav accent (deep sidebar level) */
    --brand-cream:      #E9E0CB;  /* login brand panel */
    --brand-taupe:      #6D6155;  /* sidebar */
    --brand-taupe-hover:#5F544A;
    --brand-charcoal:   #2C261E;

    /* Surfaces */
    --canvas:        #EFE9DD;     /* page background */
    --surface:       #FFFFFF;     /* cards, inputs */
    --surface-sunk:  #FAF7F1;     /* table header, card footers, dropzone, row hover */
    --surface-top:   #F5F1E8;     /* top header, preview body */
    --paper:         #F3ECDB;     /* callout / responsibility notice */
    --paper-border:  rgba(165,137,60,.4);
    --accent-wash:   #E9E1D1;     /* tertiary button hover */
    --surface-hover: #FAF7F1;     /* secondary button hover */
    --tag-bg:        #F0EADE;
    --tag-border:    #E4DBC9;
    --pill-bg:       #E6DFD0;
    --pill-border:   #DCD2BE;
    --thumb-bg:      #EFE9DD;
    --thumb-border:  #E2DACB;
    --cell-bg:       #E0D8C6;

    /* Ink */
    --ink:           #2C261E;     /* primary ink */
    --ink-2:         #6F6759;     /* body / helper / breadcrumb / back link — minimum muted tone for small text */
    --ink-3:         #7D745F;     /* uppercase micro-labels; resting delete icon */
    --ink-label:     #4A4238;     /* field labels */
    --ink-soft:      #5C5346;     /* secondary button text, tag text */
    --ink-on-tint:   #3A332A;     /* ink on light-filled active nav row / icon hover */
    --ink-icon:      #A09884;     /* placeholder-slot icon */

    /* Lines */
    --hairline:        #E6DFD0;   /* card border */
    --hairline-strong: #D8CFBD;   /* input border, dashed dropzone */
    --hairline-btn:    #D8CFBD;   /* secondary button border */
    --hairline-btn-hover: #C2B69F;
    --divider:         #ECE5D7;   /* internal card divider */
    --row-line:        #F1EBDE;   /* table row border, toggle-row divider */
    --ctrl-border:     #DDD4C2;   /* header controls; off-toggle track */
    --top-border:      #E2DACB;   /* top header border */
    --grip:            #B3A993;

    /* Sidebar (on taupe #6D6155). White alphas stay ≥ .88 so every label
       clears 4.5:1; the resting tone is achieved by weight, not by dimming. */
    --sb-item:      rgba(255,255,255,.9);
    --sb-subitem:   rgba(255,255,255,.88);
    --sb-group:     rgba(255,255,255,.72);
    --sb-hairline:  rgba(255,255,255,.14);
    --sb-fill:      rgba(255,255,255,.1);
    --sb-border:    rgba(255,255,255,.14);
    --sb-active-bg: rgba(255,255,255,.1);
    --sb-chip:      rgba(255,255,255,.16);
    --sb-unit-bg:   #EFE9DD;      /* selected unit — filled light row */
    --sb-unit-ink:  #3A332A;

    /* Functional */
    --danger:        #9C3A31;     /* destructive button text */
    --danger-strong: #A8382F;     /* destructive icon hover; required asterisk */
    --danger-tint:   #FBECEB;     /* destructive hover tint */
    --success:       #2F7A3A;
    --success-tint:  #EEF6EA;
    --success-border:#CFE5C6;

    /* Geometry */
    --radius-ctrl:  8px;          /* button / input */
    --radius-card:  10px;         /* card / dropzone */
    --radius-tag:   5px;
    --radius-icon:  6px;          /* icon button */
    --radius-small: 7px;          /* small labelled button */
    --radius-pill:  20px;
    --sidebar-w:    260px;
    --topbar-h:     54px;
    --focus-ring:   0 0 0 3px rgba(165,137,60,.16);
    --shadow-device: 0 14px 34px rgba(44,38,30,.22);
}

/* ── Compatibility aliases (migration layer) ────────────────────────────────
   Admin pages still carry inline <style> blocks that reference the two older
   token sets (--color-* from MasterThemeVer1, --brand/--ink/… from
   AdminRestyle). Re-pointing those names at the Aristoqle palette keeps every
   page coherent without per-page edits. Scaffolding, not API: delete an alias
   when its last reference is gone; do not add new ones.

   --color-orange-500 → gold-INK (text-safe) because it is used for both fills
   and text; the old "primary" (navy) roles map to taupe; --color-slate-400 →
   --ink-2 so small muted copy stays ≥ 4.5:1. */
:root {
    --color-orange-500: var(--brand-gold-ink);
    --color-orange-600: var(--brand-gold-ink);
    --color-orange-400: var(--brand-gold);
    --color-orange-300: var(--brand-gold);
    --color-orange-50:  var(--accent-wash);

    --color-slate-900: var(--ink);
    --color-slate-800: var(--ink);
    --color-slate-700: var(--ink);
    --color-slate-600: var(--ink-2);
    --color-slate-500: var(--ink-2);
    --color-slate-400: var(--ink-2);
    --color-slate-300: var(--hairline-strong);
    --color-slate-200: var(--hairline);
    --color-slate-100: var(--canvas);
    --color-slate-50:  var(--surface-sunk);

    --color-surface:                   var(--canvas);
    --color-surface-bright:            var(--surface);
    --color-surface-dim:               var(--surface-sunk);
    --color-surface-container:         var(--surface-sunk);
    --color-surface-container-low:     var(--surface-sunk);
    --color-surface-container-high:    var(--canvas);
    --color-surface-container-highest: var(--canvas);
    --color-surface-container-lowest:  var(--surface);
    --color-surface-variant:           var(--surface-sunk);
    --color-on-surface:                var(--ink);
    --color-on-surface-variant:        var(--ink-2);
    --color-outline:                   var(--hairline-strong);
    --color-outline-variant:           var(--hairline);
    --color-primary:                   var(--brand-taupe);
    --color-primary-container:         var(--brand-taupe);
    --color-on-primary:                #ffffff;
    --color-on-primary-container:      #ffffff;
    --color-primary-fixed:             var(--canvas);
    --color-primary-fixed-dim:         var(--hairline);
    --color-secondary:                 var(--brand-taupe);
    --color-secondary-container:       var(--brand-taupe);
    --color-error:                     var(--danger);
    --color-on-error:                  #ffffff;

    --brand:         var(--brand-gold-ink);
    --brand-hover:   var(--brand-gold-ink);
    --brand-soft:    var(--accent-wash);
    --brand-border:  var(--paper-border);
    --text:          var(--ink-2);
    --muted:         var(--ink-2);
    --page:          var(--canvas);
    --card:          var(--surface);
    --border:        var(--hairline);
    --border-strong: var(--hairline-strong);
    --field-bg:      var(--surface);
    --navy:          var(--brand-taupe);
    --shadow-card:   none;
}

* { box-sizing: border-box; }

body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: var(--canvas);
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* The old theme's gradient utility survives in markup across several pages.
   The design has no gradients — neutralise it to flat fills. */
.signature-gradient { background: var(--brand-taupe); }
.glass-panel        { background: var(--surface); backdrop-filter: none; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.master-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    height: 100vh;
    width: var(--sidebar-w, 260px);
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--brand-taupe);
    color: var(--thumb-bg);
    border-right: 0;
    box-shadow: none;
}

/* Brand row is exactly as tall as the top header, so the two line up across
   the sidebar edge; the lockup is scaled to sit inside it. */
.master-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    flex: none;
    padding: 5px 12px;
    margin: 0;
}

.master-sidebar .sidebar-lockup {
    display: block;
    height: 100%;
    min-width: 0;
    text-decoration: none;
}

/* Fills the row's full height; width follows the artwork's ratio and is
   capped by the rail, with object-fit keeping the ratio when the cap wins. */
.master-sidebar .sidebar-lockup img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.master-sidebar .sidebar-search {
    padding: 0 16px;
    position: relative;
}

.master-sidebar .sidebar-search .search-icon {
    position: absolute;
    left: 27px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgba(255,255,255,.55);
    pointer-events: none;
}

.master-sidebar .sidebar-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    background: var(--sb-fill);
    box-shadow: none;
    outline: none;
    color: #fff;
    font: 400 13px/1 'Manrope', sans-serif;
    transition: border-color .15s;
}

.master-sidebar .sidebar-search input::placeholder { color: rgba(255,255,255,.6); }
.master-sidebar .sidebar-search input:focus        { border-color: rgba(255,255,255,.45); }

.master-sidebar nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

/* Flat nav links (non-tree pages) */
.master-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 22px;
    border-left: 2px solid transparent;
    color: var(--sb-item);
    font: 400 13px/1.25 'Manrope', sans-serif;
    text-decoration: none;
    transition: background .12s, color .12s;
}

.master-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); transform: none; }

.master-sidebar .nav-link.active {
    background: var(--sb-active-bg);
    border-left-color: var(--brand-gold);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    transform: none;
    border-radius: 0;
}

.master-sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--sb-hairline);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#sidebar-resizer {
    position: fixed;
    left: var(--sidebar-w, 260px);
    top: 0;
    width: 5px;
    height: 100vh;
    z-index: 51;
    cursor: col-resize;
    background: transparent;
    transition: background .15s;
}
#sidebar-resizer:hover,
#sidebar-resizer.is-dragging { background: var(--brand-gold); }

/* ── Navigation tree ──────────────────────────────────────────────────────
   Clients are flush rows with the chevron at the right edge. Every deeper row
   is [gutter][icon][label][count]: the 14px gutter holds the chevron (branches)
   or a tick (leaves) and sits on a vertical guide dropped from the parent's
   icon centre. --tree-step is what makes that line up:
   gutter 14 + gap 3 + half icon 8 - half gutter 7 = 18. */
#nav-tree-root {
    --tree-row-h:  30px;   /* row pitch: 28px pill + 1px air either side */
    --tree-gutter: 14px;
    --tree-step:   18px;
    --tree-guide:  rgba(255,255,255,.24);
    padding: 0 8px;
}

/* The 1px air is padding, not margin, so it stays inside the node box and the
   guides run unbroken from row to row. */
.nav-tree-node { padding: 1px 0; transition: none; }
.nav-tree-node.hidden-by-search   { display: none; }
.nav-tree-children.collapsed      { display: none; }

/* Row metrics: 13px labels, 16px icons and chevrons, 28px pill. Fills are inset
   rounded pills that start at the row's own indent. Row ink travels in custom
   properties, so a state (hover, client context, selection) restyles the label
   and glyphs by setting them once on the row. */
.nav-tree-toggle,
.nav-tree-leaf {
    --row-ink:    var(--sb-item);
    --row-glyph:  rgba(255,255,255,.75);
    --row-weight: 400;
    position: relative;
    z-index: 1;               /* state fills paint over the guides */
    display: flex;
    align-items: center;
    height: calc(var(--tree-row-h) - 2px);
    margin-left: -4px;        /* the pill starts a little left of the gutter */
    padding: 0 8px 0 4px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}

.nav-tree-leaf { --row-ink: var(--sb-subitem); }

.nav-tree-node[data-node-type="client"] > .nav-tree-toggle,
.nav-tree-node[data-node-type="client"] > .nav-tree-leaf {
    --row-weight: 500;
    margin-left: 0;
    padding-left: 9px;
}

.nav-tree-toggle:hover,
.nav-tree-leaf:hover {
    --row-glyph: var(--brand-gold-soft);
    background: rgba(255,255,255,.07);
}

/* Guides. Each nested node draws its own segment of the parent's vertical
   guide, so the last child can stop at its row centre (the elbow) however tall
   its own subtree is. On branch rows the chevron sits on the guide, so the
   guide breaks around it: ::before above, ::after below. */
.nav-tree-branch { padding-left: var(--tree-step); }
.nav-tree-node[data-node-type="client"] > .nav-tree-branch { padding-left: 10px; }

.nav-tree-branch > .nav-tree-node { position: relative; }
.nav-tree-branch > .nav-tree-node::before,
.nav-tree-branch > .nav-tree-node.has-kids::after {
    content: "";
    position: absolute;
    left: 6px;
    width: 1px;
    background: var(--tree-guide);
    pointer-events: none;
}
.nav-tree-branch > .nav-tree-node::before            { top: 0; bottom: 0; }
.nav-tree-branch > .nav-tree-node:last-child::before { bottom: auto; height: calc(var(--tree-row-h) / 2 + 1px); }
.nav-tree-branch > .nav-tree-node.has-kids::before   { bottom: auto; height: calc(var(--tree-row-h) / 2 - 6px); }
.nav-tree-branch > .nav-tree-node.has-kids::after    { top: calc(var(--tree-row-h) / 2 + 6px); bottom: 0; }
.nav-tree-branch > .nav-tree-node.has-kids:last-child::after { content: none; }

.nav-tree-gutter {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tree-gutter);
    height: var(--tree-gutter);
    margin-right: 3px;
}

/* Leaf tick: from the guide to just short of the icon. */
.nav-tree-leaf > .nav-tree-gutter::before {
    content: "";
    position: absolute;
    left: 7px;
    right: -1px;
    top: 50%;
    height: 1px;
    background: var(--tree-guide);
}

/* One glyph, rotated: chevron_right closed, pointing down when open. */
.nav-tree-chevron {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--row-glyph);
    opacity: .8;
    transition: transform .2s ease;
}
.nav-tree-toggle:not(.collapsed) > .nav-tree-chevron { transform: rotate(90deg); }
.nav-tree-toggle.collapsed > .nav-tree-chevron       { transform: rotate(0deg); }
.nav-tree-chevron-end { margin-left: auto; }

/* Fixed box + clip: the row does not jump while the icon font is still loading. */
.nav-tree-icon {
    flex: none;
    width: 16px;
    margin-right: 6px;
    overflow: hidden;
    font-size: 16px;
    color: var(--row-glyph);
}

.nav-tree-icon-img {
    height: 16px;
    opacity: .85;
    transition: opacity .15s;
}
.nav-tree-leaf:hover .nav-tree-icon-img,
.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-icon-img { opacity: 1; }

.nav-tree-label {
    min-width: 0;
    margin-right: 6px;
    font: 400 13px/1.25 'Manrope', sans-serif;
    font-weight: var(--row-weight);
    color: var(--row-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-tree-label:last-child { margin-right: 0; }

/* Group heading ("KLIJENTI" + client count) above the client rows. */
.nav-tree-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px 8px;
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sb-group);
}
.nav-tree-group-label a { color: inherit; text-decoration: none; }
.nav-tree-group-label a:hover,
.nav-tree-node.nav-active > .nav-tree-group-label a { color: #fff; }

/* Count chip: small, square-cornered, sits at the row's right edge. */
.nav-tree-count {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
    background: rgba(255,255,255,.2);
    color: rgba(255,255,255,.92);
    font: 500 11px/1.4 'Manrope', sans-serif;
    padding: 1px 6px;
    border-radius: 4px;
}
.nav-tree-count + .nav-tree-chevron-end { margin-left: 6px; }
.nav-tree-group-label .nav-tree-count   { margin-left: 0; letter-spacing: 0; }

/* States, weakest first - later rules win at equal specificity. */
.nav-tree-node.search-match > .nav-tree-toggle,
.nav-tree-node.search-match > .nav-tree-leaf { --row-ink: var(--brand-gold-soft); --row-weight: 600; }

/* Active trail: ancestors of the selection brighten so the path reads. The
   guides carry the rest, so trail rows take no fill. */
.nav-tree-node.nav-trail > .nav-tree-toggle { --row-ink: #fff; --row-weight: 500; }

/* Selected node: gold pill, darker gold edge, dark ink. */
.nav-tree-node.nav-active > .nav-tree-leaf,
.nav-tree-node.nav-active > .nav-tree-toggle {
    --row-ink:    var(--ink);
    --row-glyph:  var(--ink-on-tint);
    --row-weight: 600;
    background: var(--brand-gold-soft);
    box-shadow: inset 3px 0 0 var(--brand-gold-ink);
}
.nav-tree-node.nav-active > .nav-tree-leaf > .nav-tree-gutter::before { content: none; }
.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-icon-img { filter: invert(.8); }

/* The client you are inside (on the trail, or selected itself) is the cream
   pill, so the block you are working in is findable at a glance. Selected
   itself, it keeps the gold edge from the rule above. */
.nav-tree-node[data-node-type="client"].nav-trail  > .nav-tree-toggle,
.nav-tree-node[data-node-type="client"].nav-active > .nav-tree-toggle {
    --row-ink:    var(--sb-unit-ink);
    --row-glyph:  var(--brand-taupe);
    --row-weight: 600;
    background: var(--sb-unit-bg);
}

.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-count,
.nav-tree-node.nav-active > .nav-tree-toggle .nav-tree-count {
    background: rgba(44,38,30,.14);
    color: var(--row-ink);
}

/* An open client is closed off with a hairline, so the next client reads as a
   new block. */
.nav-tree-node[data-node-type="client"] > .nav-tree-children:not(.collapsed) {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--sb-hairline);
}
.nav-tree-node[data-node-type="client"]:last-child > .nav-tree-children {
    margin-bottom: 0;
    border-bottom: 0;
}

/* ── Main + topbar ──────────────────────────────────────────────────────── */
.master-main {
    margin-left: var(--sidebar-w, 260px);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* Tinted header band, one hairline. No product name — the sidebar brands. */
.master-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    height: var(--topbar-h);
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--surface-top);
    border-bottom: 1px solid var(--top-border);
    backdrop-filter: none;
    box-shadow: none;
}

.master-topbar .topbar-left  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.master-topbar .topbar-right { display: flex; align-items: center; gap: 18px; flex: none; }

.master-topbar .topbar-title,
.master-topbar .topbar-divider { display: none; }

.master-topbar .breadcrumb-nav { display: flex; align-items: center; gap: 10px; min-width: 0; }

.master-topbar .breadcrumb-nav .breadcrumb-item {
    font: 400 14px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.master-topbar .breadcrumb-nav a.breadcrumb-item:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.master-topbar .breadcrumb-nav .breadcrumb-separator {
    font-size: 14px;
    color: var(--ink-2);
    opacity: .5;
}
.master-topbar .breadcrumb-nav .breadcrumb-separator.material-symbols-outlined { display: none; }

/* Current page is plain text — not a link, not gold. */
.master-topbar .breadcrumb-nav .breadcrumb-active {
    font: 500 14px/1.3 'Manrope', sans-serif;
    color: var(--ink);
    border-bottom: 0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Page-owned left side (editors): the back link replaces the breadcrumb. */
.master-topbar .topbar-page {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.master-topbar .topbar-page .back-link { font-size: 14px; }
.master-topbar .topbar-page .back-link .material-symbols-outlined { font-size: 16px; }

.master-topbar .topbar-icons { display: flex; align-items: center; gap: 2px; }

.master-topbar .topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-ctrl);
    background: none;
    color: var(--brand-taupe);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.master-topbar .topbar-icon-btn:hover  { background: var(--canvas); color: var(--ink); }
.master-topbar .topbar-icon-btn:active { transform: none; }
.master-topbar .topbar-icon-btn .material-symbols-outlined { font-size: 19px; }

/* User block: avatar (initials on gold) + name/role. The avatar is a button
   opening a small menu — sign-out lives there, not in the icon row. */
.master-topbar .topbar-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    margin-left: 0;
    border-left: 1px solid var(--top-border);
}
.master-topbar .topbar-user-info { text-align: left; }
.master-topbar .topbar-user-name { font: 600 13.5px/1.3 'Manrope', sans-serif; color: var(--ink); margin: 0; }
.master-topbar .topbar-user-role { font: 400 11.5px/1.3 'Manrope', sans-serif; color: var(--ink-2); margin: 0; }

.master-topbar .topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
    box-shadow: none;
}

.master-topbar .topbar-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-gold);
    color: #fff;
    font: 600 13px/1 'Manrope', sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .12s;
}
.master-topbar .topbar-avatar-btn:hover { background: var(--brand-gold-hover); }

.topbar-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 200px;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-ctrl);
    box-shadow: 0 10px 28px rgba(44,38,30,.14);
}
.topbar-user-menu.open { display: block; }
.topbar-user-menu-head { padding: 8px 14px 10px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
.topbar-user-menu-head .topbar-user-name { font-size: 13.5px; }
.topbar-user-menu a,
.topbar-user-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: none;
    font: 400 13.5px/1.3 'Manrope', sans-serif;
    color: var(--ink);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}
.topbar-user-menu a:hover,
.topbar-user-menu button:hover { background: var(--surface-sunk); }
.topbar-user-menu .material-symbols-outlined { font-size: 18px; color: var(--ink-2); }

/* Language selector — white, hairline, 8px. Code + name. */
.lang-dropdown { position: relative; display: inline-block; }

.lang-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ctrl-border);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: none;
    font: 500 14px/1 'Manrope', sans-serif;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .12s;
}
.lang-dropdown-btn:hover { background: var(--surface); border-color: var(--hairline-btn-hover); }
.lang-dropdown-btn .lang-code {
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.lang-dropdown-btn .material-symbols-outlined { font-size: 16px; color: var(--ink-2); }

.lang-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    z-index: 20;
    margin-top: 6px;
    min-width: 12rem;
    padding: 4px 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(44,38,30,.14);
    overflow: hidden;
}
.lang-dropdown-menu.open { display: block; }

.lang-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font: 400 13.5px/1 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.lang-dropdown-menu a:hover { background: var(--surface-sunk); color: var(--ink); }

/* ── Content ────────────────────────────────────────────────────────────── */
.master-content {
    width: 100%;
    max-width: none;
    padding: 36px 40px 60px;
}

/* Width caps — maximums, not fixed widths. A table page caps at 1060px, a
   settings form at 820px; below that everything shrinks. */
.content-narrow { max-width: 820px; }
.content-table  { max-width: 1060px; }
.page-stack     { display: flex; flex-direction: column; gap: 26px; }

/* Page title group: back link → H1 (+ pill/tag) → subtitle, 10px apart. */
.master-content .page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
}

.master-content .page-title {
    margin: 0;
    font: 600 38px/1.1 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}
.master-content .page-title--editor { font-size: 34px; }

.page-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-title-row--center { align-items: center; gap: 12px; }

.count-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--pill-bg);
    font: 400 14px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    white-space: nowrap;
}

.type-tag {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--pill-border);
    border-radius: var(--radius-tag);
    background: var(--pill-bg);
    font: 500 12.5px/1.4 'Manrope', sans-serif;
    color: var(--ink-soft);
    white-space: nowrap;
}

.master-content .page-subtitle {
    margin: 0;
    max-width: 60ch;
    font: 400 15px/1.5 'Manrope', sans-serif;
    color: var(--ink-2);
}
.master-content .page-subtitle strong { color: var(--ink); font-weight: 600; }

/* Action row under the title group — one primary, then secondary/tertiary. */
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-actions .btn-accent-action,
.page-actions .btn-tertiary-action { margin-left: 2px; }

/* Eyebrow / section micro-label — 11.5px/600 caps. */
.eyebrow,
.section-label {
    display: block;
    font: 600 11.5px/1 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.eyebrow { color: var(--brand-gold-ink); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0;
    font: 400 13.5px/1 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .12s;
}
.back-link:hover { color: var(--ink); }
.back-link .material-symbols-outlined { font-size: 16px; }

.accent-rule { width: 42px; height: 2px; background: var(--brand-gold); border: 0; margin: 0; }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.form-section,
.card-panel {
    background: var(--surface);
    padding: 26px 28px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: none;
}

/* Region cards: the padding lives on the regions, the card only clips. */
.card-regions,
.card-table { padding: 0; overflow: hidden; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--divider);
    font: 600 14px/1.3 'Manrope', sans-serif;
    color: var(--ink);
}

.card-region {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px 28px;
}
.card-region + .card-region { border-top: 1px solid var(--divider); }
.card-region--settings { gap: 14px; padding: 22px 28px; }

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 28px;
    background: var(--surface-sunk);
    border-top: 1px solid var(--divider);
}
.card-footer-left,
.card-footer-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-footer-right { margin-left: auto; }

/* Legacy in-card header — kept as a plain title row; the icon tile is gone. */
.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.form-section-icon { display: none; }

.form-section-title {
    margin: 0;
    font: 600 15px/1.3 'Manrope', sans-serif;
    letter-spacing: -.005em;
    color: var(--ink);
}
.form-section-subtitle { display: block; margin-top: 2px; font: 400 13px/1.4 'Manrope', sans-serif; color: var(--ink-2); }

.paper-notice {
    background: var(--paper);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-card);
    padding: 20px;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group:last-child { margin-bottom: 0; }

.form-label {
    display: block;
    margin: 0 0 7px;
    font: 600 13.5px/1.3 'Manrope', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-label);
}
.req { color: var(--danger-strong); }

.form-input {
    width: 100%;
    min-height: 42px;
    height: auto;
    padding: 9px 13px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: none;
    outline: none;
    color: var(--ink);
    font: 400 15px/1.4 'Manrope', sans-serif;
    transition: border-color .12s, box-shadow .12s;
}

textarea.form-input { padding: 10px 13px; line-height: 1.55; resize: vertical; }

select.form-input {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f6759' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    cursor: pointer;
}

.form-input::placeholder { color: var(--ink-3); }

.form-input:focus {
    border-color: var(--brand-gold);
    box-shadow: var(--focus-ring);
}
.form-input:disabled,
.form-input[readonly] { background: var(--surface-sunk); color: var(--ink-2); }

/* Width caps for controls — sized to what they hold. */
.form-input--short { max-width: 420px; }
.form-input--sm    { width: 140px; }
.form-input--xs    { width: 88px; }

.form-help {
    margin: 6px 0 0;
    font: 400 12.5px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
}

.form-input-wrapper { position: relative; }
.form-input-with-prefix { padding-left: 4.5rem; }
/* Decorative in-field icons are dropped (they decorated rather than informed). */
.form-input-with-icon   { padding-left: 13px; }
.form-input-icon        { display: none; }

.form-input-prefix {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3);
    pointer-events: none;
}

.form-separator { height: 1px; background: var(--divider); margin: 22px 0; border: 0; }

.form-grid-2 {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 20px;
}
.form-grid-2 > .form-group { margin-bottom: 0; }

/* Inline pair ("Redovi × Stupci" + derived readout). */
.field-inline { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.field-inline .form-group { margin-bottom: 0; }
.field-times { font: 400 15px/1 'Manrope', sans-serif; color: var(--ink-2); padding-bottom: 14px; }

.grid-readout { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.grid-readout-cells { display: grid; gap: 2px; }
.grid-readout-cell { width: 9px; height: 9px; background: var(--cell-bg); border-radius: 1.5px; }
.grid-readout-text { font: 400 13.5px/1 'Manrope', sans-serif; color: var(--ink-2); white-space: nowrap; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand-gold); }

/* ── Toggle rows ────────────────────────────────────────────────────────────
   A <label> so the whole row is the hit target; title + optional description
   on the left, the switch right-aligned; hairline dividers, no boxes. */
.toggle-list { display: flex; flex-direction: column; }

.toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    margin: 0;
    cursor: pointer;
}
.toggle-list > .toggle-row:first-child { padding-top: 0; }
.toggle-list > .toggle-row:last-child  { padding-bottom: 0; }
.toggle-row + .toggle-row { border-top: 1px solid var(--row-line); }
.toggle-row--compact { max-width: 560px; }

.toggle-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row-title { font: 500 15px/1.35 'Manrope', sans-serif; color: var(--ink); }
.toggle-row-desc  { font: 400 13px/1.45 'Manrope', sans-serif; color: var(--ink-2); }
.toggle-row .mod-switch { margin-top: 2px; }

/* Switch — 40×23, 12px track. */
.mod-switch { position: relative; display: inline-block; width: 40px; height: 23px; cursor: pointer; flex-shrink: 0; }
.mod-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mod-switch-slider { position: absolute; inset: 0; background: var(--ctrl-border); border-radius: 12px; transition: background .15s; }
.mod-switch-slider::before {
    content: "";
    position: absolute;
    left: 2.5px;
    top: 2.5px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
    box-shadow: none;
}
.mod-switch input:checked + .mod-switch-slider { background: var(--brand-gold); }
.mod-switch input:checked + .mod-switch-slider::before { transform: translateX(17px); }
.mod-switch input:focus-visible + .mod-switch-slider { box-shadow: var(--focus-ring); }
.mod-switch input:disabled + .mod-switch-slider { opacity: .5; cursor: not-allowed; }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Tiers: primary (filled gold) › secondary (white, hairline) › tertiary /
   accent (text, gold ink) › quiet (text, muted). Destructive is quiet red;
   .btn-danger-solid is reserved for the confirm step inside a dialog. */
.btn-primary-action,
.btn-secondary-action,
.btn-accent-action,
.btn-tertiary-action,
.btn-quiet-action,
.btn-danger-action,
.btn-danger-outline,
.btn-danger-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    font: 600 14.5px/1.2 'Manrope', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background .12s, border-color .12s, color .12s;
}
.btn-primary-action .material-symbols-outlined,
.btn-secondary-action .material-symbols-outlined,
.btn-accent-action .material-symbols-outlined,
.btn-tertiary-action .material-symbols-outlined,
.btn-quiet-action .material-symbols-outlined,
.btn-danger-action .material-symbols-outlined,
.btn-danger-outline .material-symbols-outlined,
.btn-danger-solid .material-symbols-outlined { font-size: 18px; }

.btn-primary-action { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.btn-primary-action:hover  { background: var(--brand-gold-hover); border-color: var(--brand-gold-hover); }
.btn-primary-action:active { transform: none; }
.btn-primary-action.signature-gradient { background: var(--brand-gold); box-shadow: none; }
.btn-primary-action.signature-gradient:hover { background: var(--brand-gold-hover); }

.btn-secondary-action { background: var(--surface); border-color: var(--hairline-btn); color: var(--ink-soft); font-weight: 500; padding: 0 16px; }
.btn-secondary-action:hover { background: var(--surface-hover); border-color: var(--hairline-btn-hover); }

.btn-accent-action,
.btn-tertiary-action { background: transparent; border-color: transparent; color: var(--brand-gold-ink); font-weight: 500; padding: 0 14px; }
.btn-accent-action:hover,
.btn-tertiary-action:hover { background: var(--accent-wash); }

.btn-quiet-action { background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; padding: 0 14px; }
.btn-quiet-action:hover { background: var(--thumb-bg); color: var(--ink); }

.btn-danger-action { background: transparent; border-color: transparent; color: var(--danger); font-weight: 500; font-size: 14px; padding: 0 12px; gap: 8px; }
.btn-danger-action:hover { background: var(--danger-tint); }
.btn-danger-action .material-symbols-outlined { font-size: 17px; }

.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #8A3229; border-color: #8A3229; }

/* Outlined destructive — same height/radius as its neighbours, red ink, faint red border. */
.btn-danger-outline { background: var(--surface); border-color: rgba(156,58,49,.35); color: var(--danger); font-weight: 500; padding: 0 16px; }
.btn-danger-outline:hover { background: var(--danger-tint); border-color: rgba(156,58,49,.55); }

.btn-primary-action:disabled,
.btn-secondary-action:disabled,
.btn-accent-action:disabled,
.btn-tertiary-action:disabled,
.btn-quiet-action:disabled,
.btn-danger-action:disabled,
.btn-danger-outline:disabled,
.btn-danger-solid:disabled { opacity: .5; cursor: not-allowed; }

.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn-sm .material-symbols-outlined { font-size: 16px; }

/* Small labelled control (preview "Osvježi") */
.btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--ctrl-border);
    border-radius: var(--radius-small);
    background: var(--surface);
    font: 500 12.5px/1.3 'Manrope', sans-serif;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .12s;
}
.btn-mini:hover { background: var(--thumb-bg); }
.btn-mini .material-symbols-outlined { font-size: 14px; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    font: 500 14px/1.5 'Manrope', sans-serif;
    margin-bottom: 20px;
}
.alert .material-symbols-outlined { font-size: 18px; flex: none; margin-top: 1px; }
.alert-success { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
.alert-error   { background: var(--danger-tint);  border-color: #F0C9C5; color: var(--danger); }
.alert-info    { background: var(--paper); border-color: var(--paper-border); color: var(--ink); }

/* ── Data table ─────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead tr { background: var(--surface-sunk); border-bottom: 0; }

.data-table thead th {
    padding: 12px 20px;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: var(--ink-3);
    border-bottom: 1px solid var(--divider);
}
.data-table thead th.col-actions { text-align: right; }
.data-table thead th.col-num     { width: 56px; }

.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--surface-sunk); }

.data-table tbody td {
    height: 56px;
    padding: 8px 20px;
    font: 400 14px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
    vertical-align: middle;
    border-bottom: 1px solid var(--row-line);
}
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table .cell-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Per-row type icons are gone — the VRSTA tag already encodes the type. */
.data-table .cell-name-icon { display: none; }

.data-table .cell-name-text {
    display: block;
    font: 500 15px/1.3 'Manrope', sans-serif;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.data-table a.cell-name-text:hover { text-decoration: underline; text-underline-offset: 2px; }

.data-table .cell-secondary { font-size: 14px; color: var(--ink-2); }
.data-table .cell-clamp {
    display: block;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table .cell-link {
    font: 500 14px/1.3 'Manrope', sans-serif;
    color: var(--brand-gold-ink);
    text-decoration: none;
}
.data-table .cell-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Type tag / chip */
.data-table .cell-badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--tag-border);
    border-radius: var(--radius-tag);
    background: var(--tag-bg);
    font: 500 12px/1.4 'Manrope', sans-serif;
    color: var(--ink-soft);
    white-space: nowrap;
}
.chip--ai       { background: #EEE9F7; border-color: #DDD3EE; color: #5B3E8F; }
.chip--verified { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
.chip--draft    { background: #FBF3DA; border-color: #EEDFAE; color: #7A5A12; }

/* Several tags in one cell stay on one line; the column takes the width
   they need instead of wrapping them while the text columns stretch. */
.data-table .cell-nowrap { white-space: nowrap; }
.data-table .cell-tags { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.data-table .cell-actions { text-align: right; white-space: nowrap; }
.data-table .cell-actions-inner { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* Ordinal + drag grip (grip fades in on row hover). */
.data-table .cell-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.drag-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 16px;
    color: var(--grip);
    cursor: grab;
    opacity: 0;
    transition: opacity .12s;
    background: none;
    border: 0;
    padding: 0;
}
.drag-grip svg { width: 12px; height: 16px; display: block; }
.data-table tbody tr:hover .drag-grip,
.data-table tbody tr:focus-within .drag-grip,
.drag-grip:focus-visible { opacity: 1; }
.data-table tbody tr.is-dragging { opacity: .45; }
.data-table tbody tr.is-dragging .drag-grip { cursor: grabbing; }
.data-table tbody tr.drop-before td { box-shadow: inset 0 2px 0 var(--brand-gold); }
.data-table tbody tr.drop-after  td { box-shadow: inset 0 -2px 0 var(--brand-gold); }

.icon-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-icon);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.icon-action-btn .material-symbols-outlined { font-size: 18px; }
.icon-action-btn:hover { background: var(--thumb-bg); color: var(--ink-on-tint); }
.icon-action-btn--danger { color: var(--ink-3); }
.icon-action-btn--danger:hover { background: var(--danger-tint); color: var(--danger-strong); }
.icon-action-btn.is-disabled { opacity: .3; cursor: default; pointer-events: none; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state { padding: 48px 24px; text-align: center; color: var(--ink-2); }
.empty-state .material-symbols-outlined { display: block; margin: 0 auto 10px; font-size: 40px; color: var(--ink-icon); }
.empty-state-title { margin: 0 0 4px; font: 600 15px/1.3 'Manrope', sans-serif; color: var(--ink); }
.empty-state-text  { margin: 0; font: 400 14px/1.5 'Manrope', sans-serif; }

/* ── Modal (confirmation dialogs) ───────────────────────────────────────── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(44,38,30,.45);
    backdrop-filter: blur(2px);
}
.modal-backdrop.is-open { display: flex; }

.modal-card {
    width: 100%;
    max-width: 440px;
    padding: 26px 28px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-device);
}
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--danger-tint);
    color: var(--danger-strong);
}
.modal-icon .material-symbols-outlined { font-size: 20px; }
.modal-icon--warn { background: var(--paper); color: var(--brand-gold-ink); }
.modal-title { margin: 0; font: 600 17px/1.3 'Manrope', sans-serif; color: var(--ink); }
.modal-body  { margin: 0 0 12px; font: 400 14.5px/1.55 'Manrope', sans-serif; color: var(--ink-2); }
.modal-body strong { color: var(--ink); font-weight: 600; }
.modal-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font: 500 13px/1.5 'Manrope', sans-serif;
    color: var(--danger);
}
.modal-warning .material-symbols-outlined { font-size: 16px; margin-top: 2px; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; }
.modal-actions form { margin: 0; }

/* ── Dropzone (image upload) ────────────────────────────────────────────────
   Empty: dashed, a 92px thumbnail slot, a title and "drag here or browse".
   With an image: solid border, the image in the slot, replace/remove actions. */
.dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border: 1.5px dashed var(--hairline-strong);
    border-radius: var(--radius-card);
    background: var(--surface-sunk);
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background .12s;
}
.dropzone:hover,
.dropzone.is-dragover { border-color: var(--brand-gold); }
.dropzone.has-image { border-style: solid; border-color: var(--hairline); background: var(--surface); cursor: default; }

.dropzone-thumb {
    width: 92px;
    height: 92px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--thumb-border);
    border-radius: var(--radius-ctrl);
    background: var(--thumb-bg);
    color: var(--ink-icon);
}
.dropzone-thumb .material-symbols-outlined { font-size: 26px; }
.dropzone-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dropzone-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dropzone-title { font: 600 15px/1.3 'Manrope', sans-serif; color: var(--ink); }
.dropzone-hint  { font: 400 13px/1.45 'Manrope', sans-serif; color: var(--ink-2); }
.dropzone-browse { color: var(--brand-gold-ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.dropzone-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.dropzone-actions .doclib-btn { margin: 0; }

.dropzone-progress {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.78);
    border-radius: inherit;
}
.dropzone-progress.uploading { display: flex; }

.spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid var(--hairline);
    border-top-color: var(--brand-gold);
    border-radius: 50%;
    animation: smk-spin .7s linear infinite;
}
@keyframes smk-spin { to { transform: rotate(360deg); } }

/* ── Stat / chart / results cards ─────────────────────────────────────── */
/* auto-fit (not auto-fill): empty tracks collapse, so four or five cards
   always stretch across the full content width. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}

.stat-card-icon  { font-size: 22px; color: var(--ink-2); }
.stat-card-value { font: 600 30px/1.1 'Manrope', sans-serif; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-card-label {
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
/* Two equal columns; a card can span both (grid-column: 1 / -1). */
.chart-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .chart-grid--2 { grid-template-columns: 1fr; }
}

.chart-card,
.res-card {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}
.res-card { margin-bottom: 16px; overflow-x: auto; }

.chart-title {
    margin-bottom: 16px;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.chart-canvas-wrap { position: relative; height: 220px; }

.stats-table { width: 100%; border-collapse: collapse; }

.stats-table th {
    padding: 12px 20px;
    text-align: left;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--divider);
}

.stats-table td {
    padding: 12px 20px;
    font: 400 14px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
    border-bottom: 1px solid var(--row-line);
}
.stats-table tr:last-child td { border-bottom: none; }
.stats-table tbody tr:hover td { background: var(--surface-sunk); }
.stats-table td.num,
.stats-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge-sessions,
.res-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-tag);
    background: var(--brand-taupe);
    color: #fff;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
}

.step-badge {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--tag-border);
    border-radius: var(--radius-tag);
    background: var(--tag-bg);
    color: var(--ink-soft);
    font: 500 12px/1.4 'Manrope', sans-serif;
}

.model-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--ink-2);
}

/* ── Module editor panels ───────────────────────────────────────────────── */
.master-content .quizedit-container,
.master-content .icedit-container,
.master-content .jigedit-container,
.master-content .mazeedit-container,
.master-content .mpe-container,
.master-content .sortedit-container,
.master-content .wsedit-container,
.master-content .thedit-container,
.master-content .memedit-container,
.master-content .cbedit-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Form left, 400px preview right; the preview is sticky. */
.master-content .quizedit-outer-grid,
.master-content .icedit-grid,
.master-content .jigedit-grid,
.master-content .mazeedit-grid,
.master-content .mpe-grid,
.master-content .sortedit-grid,
.master-content .wsedit-outer-grid,
.master-content .thedit-outer-grid,
.master-content .memedit-grid,
.master-content .cbedit-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 400px;
    gap: 24px;
    align-items: start;
}
.master-content .quizedit-outer-grid > .edit-panel,
.master-content .icedit-grid > .edit-panel,
.master-content .jigedit-grid > .edit-panel,
.master-content .mazeedit-grid > .edit-panel,
.master-content .mpe-grid > .edit-panel,
.master-content .sortedit-grid > .edit-panel,
.master-content .wsedit-outer-grid > .edit-panel,
.master-content .thedit-outer-grid > .edit-panel,
.master-content .memedit-grid > .edit-panel,
.master-content .cbedit-grid > .edit-panel { height: auto; }

.master-content .quizedit-outer-grid > .edit-panel:last-child,
.master-content .icedit-grid > .edit-panel:last-child,
.master-content .jigedit-grid > .edit-panel:last-child,
.master-content .mazeedit-grid > .edit-panel:last-child,
.master-content .mpe-grid > .edit-panel:last-child,
.master-content .sortedit-grid > .edit-panel:last-child,
.master-content .wsedit-outer-grid > .edit-panel:last-child,
.master-content .thedit-outer-grid > .edit-panel:last-child,
.master-content .memedit-grid > .edit-panel:last-child,
.master-content .cbedit-grid > .edit-panel:last-child {
    /* Stacks under the header AND the editor action bar — both measured, both
       variable height (they wrap at narrow widths). Lowest of the three
       sticky layers. */
    position: sticky;
    top: calc(var(--topbar-measured, var(--topbar-h)) + var(--editor-bar-h, 0px) + 24px);
    max-height: calc(100vh - var(--topbar-measured, var(--topbar-h)) - var(--editor-bar-h, 0px) - 48px);
    z-index: 10;
}

@media (max-width: 1100px) {
    .master-content .quizedit-outer-grid,
    .master-content .icedit-grid,
    .master-content .jigedit-grid,
    .master-content .mazeedit-grid,
    .master-content .mpe-grid,
    .master-content .sortedit-grid,
    .master-content .wsedit-outer-grid,
    .master-content .thedit-outer-grid,
    .master-content .memedit-grid,
    .master-content .cbedit-grid {
        grid-template-columns: 1fr;
    }
    .master-content .quizedit-outer-grid > .edit-panel:last-child,
    .master-content .icedit-grid > .edit-panel:last-child,
    .master-content .jigedit-grid > .edit-panel:last-child,
    .master-content .mazeedit-grid > .edit-panel:last-child,
    .master-content .mpe-grid > .edit-panel:last-child,
    .master-content .sortedit-grid > .edit-panel:last-child,
    .master-content .wsedit-outer-grid > .edit-panel:last-child,
    .master-content .thedit-outer-grid > .edit-panel:last-child,
    .master-content .memedit-grid > .edit-panel:last-child,
    .master-content .cbedit-grid > .edit-panel:last-child {
        position: static;
        max-height: none;
    }
}

.edit-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: none;
}

.edit-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 18px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--divider);
}
.edit-panel-header--wide { padding: 14px 28px; }

.edit-panel-title {
    font: 600 14px/1.3 'Manrope', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

/* Labelled refresh (was a bare icon). */
.edit-panel-refresh {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--ctrl-border);
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--ink-soft);
    font: 500 12.5px/1.3 'Manrope', sans-serif;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.edit-panel-refresh:hover { color: var(--ink); background: var(--thumb-bg); }
.edit-panel-refresh .material-symbols-outlined { font-size: 14px; }

.edit-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 28px; }
.edit-panel-body--flush { padding: 0; }

.edit-panel-preview { padding: 24px; background: var(--surface-top); overflow: hidden; display: flex; flex-direction: column; }
.edit-panel-preview > * { border-radius: var(--radius-card); overflow: hidden; background: transparent; }

/* Device frames across the editors. The panels are no longer stretched to the
   grid row, so the editors' own `height:100%` phone had nothing to resolve
   against — the frame is sized here instead: a 264px device, shrunk on short
   viewports so the sticky panel still fits, with the screen pinned inside the
   bezel (every editor uses the same 2.15rem / .5rem / 1.55rem bezel). */
.edit-panel-preview [class$="-preview-stage"] {
    padding: 6px 0 20px;
    min-height: 0;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.edit-panel-preview [class$="-phone"] {
    position: relative;
    flex: none;
    width: min(280px, 100%, calc((100vh - var(--topbar-measured, var(--topbar-h)) - var(--editor-bar-h, 0px) - 172px) / 2));
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 2;
    padding: 10px;
    border-radius: 40px;
    background: #14100C;
    box-shadow: var(--shadow-device);
}
/* Home indicator inside the screen. */
.edit-panel-preview [class$="-phone"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,.7);
    z-index: 3;
    pointer-events: none;
}
.edit-panel-preview [class$="-phone-screen"] {
    position: absolute;
    inset: 10px;
    width: auto;
    height: auto;
    border-radius: 30px;
    overflow: hidden;
}

/* The save form wraps a stack of cards (configuration · content · publication);
   each card sizes to its content. */
.editor-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.editor-stack .edit-panel { height: auto; }

/* ── Editor action bar ──────────────────────────────────────────────────────
   One sticky strip directly under the app header: back link + title + type tag
   on the left, "unsaved" label + Delete | Cancel · Save on the right. Its top
   is the header's MEASURED height (--topbar-measured, published by the
   _EditorActionBar script from a ResizeObserver) — the header wraps at narrow
   widths, so a constant would drift. Paint order is explicit: header z 40 ›
   bar z 30 › sticky preview z 10. The negative margins let it span the full
   content width (cancelling .master-content's padding) so nothing scrolls
   past it in the gutters. */
.editor-bar {
    position: sticky;
    top: var(--topbar-measured, var(--topbar-h));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: -36px -40px 24px;
    padding: 16px 40px 12px;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline-strong);
    transition: box-shadow .12s;
}
.editor-bar.is-stuck {
    box-shadow: 0 10px 22px -16px rgba(44,38,30,.4);
}

/* Actions-only variant: the title lives in the top header (TopbarTitle section). */
.editor-bar--actions { justify-content: flex-end; padding-top: 12px; padding-bottom: 12px; }

.editor-bar-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 320px;
}
.editor-bar-title .page-title-row { flex-wrap: nowrap; min-width: 0; }
.master-content .editor-bar .page-title {
    font-size: 26px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-bar .type-tag { flex: none; }

.editor-bar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}
.editor-bar-actions > .btn-primary-action,
.editor-bar-actions > .btn-secondary-action,
.editor-bar-actions > .btn-danger-outline { white-space: nowrap; }
.editor-bar-dirty {
    font: 400 13.5px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    margin-right: 4px;
    white-space: nowrap;
}
.editor-bar-divider {
    width: 1px;
    height: 24px;
    flex: none;
    margin: 0 4px;
    background: var(--hairline-strong);
}

/* Editor footer — destructive left, safe actions right. */
.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 24px;
    padding: 16px 28px;
    background: var(--surface-sunk);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}
.editor-footer form { margin: 0; display: inline-flex; }
.editor-footer-left,
.editor-footer-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor-footer-right { margin-left: auto; }

/* ── Module meta row + settings ("Objava i vidljivost") ──────────────────── */
.master-content .module-meta-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 20px;
    align-items: start;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--divider);
}
.master-content .quizedit-meta .module-meta-row { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
@media (max-width: 560px) {
    .master-content .module-meta-row,
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* Settings block: a micro-label heading, then plain toggle rows with
   hairline dividers, capped at 560px so label and switch stay in one glance. */
.master-content .mod-settings { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--divider); }
/* Inside a region card the region already carries the divider and padding. */
.card-region > .mod-settings { margin-top: 0; padding-top: 0; border-top: 0; }
.master-content .mod-set-title {
    margin: 0 0 6px;
    font: 600 11.5px/1 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.master-content .mod-set-card  { padding: 0; border: 0; border-radius: 0; background: transparent; max-width: 560px; }
.master-content .mod-set-row   {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    min-height: 0;
    margin: 0;
    cursor: default;
}
label.mod-set-row { cursor: pointer; }
.master-content .mod-set-row + .mod-set-row,
.master-content .mod-set-row.has-divider { border-top: 1px solid var(--row-line); }
.master-content .mod-grouped .mod-set-card + .mod-set-card { margin-top: 0; border-top: 1px solid var(--row-line); }
.master-content .mod-set-label { font: 500 15px/1.35 'Manrope', sans-serif; color: var(--ink); }
.master-content .mod-set-row select.form-input,
.master-content .mod-set-row input.form-input { width: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.master-content .mod-set-points-input { width: 84px; text-align: right; }

/* ── Phone chrome for module-editor previews ──────────────────────────────
   The status bar is drawn INSIDE the screen, over the game's own background
   (the player layout reserves 48 design-px under it in preview mode — see
   body.wa-preview in MasterWebAppLayout). Its height follows the screen width
   via aspect-ratio so it always matches that reserved strip after scaling. */
.smk-phone-topbar {
    position: absolute; top: 10px; left: 10px; right: 10px;
    aspect-ratio: 390 / 48; height: auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px; z-index: 3; pointer-events: none;
    color: #fff; font: 600 11.5px/1 'Manrope', sans-serif; letter-spacing: .02em;
}
.smk-phone-icons { display: flex; align-items: center; gap: 3px; }
.smk-phone-icons .material-symbols-outlined { font-size: 14px; line-height: 1; }
.smk-phone-island { display: none; }
[class*="-phone-screen"] > iframe { transform-origin: top left; }

/* ── Step wizard (AI Graditelj modula) ──────────────────────────────────── */
.wizard-steps {
    display: grid;
    /* One equal column per step, so the strip follows the markup (six steps today). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: 22px;
}

.wizard-step-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-right: 1px solid var(--divider);
    border-bottom: 2px solid transparent;
    min-width: 0;
}
.wizard-step-wrap:last-child { border-right: 0; }
/* Visited steps become buttons (the wizard JS toggles .clickable); the rest stay indicators. */
.wizard-step-wrap.clickable { cursor: pointer; transition: background 0.15s; }
.wizard-step-wrap.clickable:hover { background: var(--surface-hover); }
.wizard-step-wrap.clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }

.wizard-step-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wizard-step-check {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    place-items: center;
    flex: none;
}
.wizard-step-wrap.done .wizard-step-check { display: grid; }
.wizard-step-check .material-symbols-outlined { font-size: 12px; font-weight: 700; }

.wizard-step-eyebrow {
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

.wizard-step-label {
    font: 500 13.5px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-step-wrap.active { border-bottom-color: var(--brand-gold); }
.wizard-step-wrap.active .wizard-step-eyebrow,
.wizard-step-wrap.done   .wizard-step-eyebrow { color: var(--brand-gold-ink); }
.wizard-step-wrap.active .wizard-step-label { font-weight: 600; color: var(--ink); }
.wizard-step-wrap.done   .wizard-step-label { color: var(--ink); }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

.wizard-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .wizard-grid { grid-template-columns: 1fr; }
}

/* Heading of one wizard step: title + one-line instruction, above the step's card. */
.wizard-step-head { margin-bottom: 20px; }
.wizard-step-head h2 {
    margin: 0 0 4px;
    font: 600 18px/1.3 'Manrope', sans-serif;
    letter-spacing: -.005em;
    color: var(--ink);
}
.wizard-step-head p { margin: 0; max-width: 78ch; font: 400 14px/1.5 'Manrope', sans-serif; color: var(--ink-2); }

.wizard-lede h2 {
    margin: 0 0 12px;
    font: 600 22px/1.25 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}
.wizard-lede p {
    margin: 0;
    max-width: 68ch;   /* the card spans the wizard width; the prose keeps a readable measure */
    font: 400 14.5px/1.6 'Manrope', sans-serif;
    color: var(--ink-2);
}

.wizard-numbered { display: flex; flex-direction: column; gap: 16px; }
.wizard-numbered-row { display: flex; gap: 14px; align-items: flex-start; }
.wizard-num {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-icon);
    font: 600 11px/1 'Manrope', sans-serif;
    color: var(--ink);
}
.wizard-num-title { font: 600 14px/1.3 'Manrope', sans-serif; color: var(--ink); margin: 0 0 5px; }
.wizard-num-desc  { font: 400 13px/1.5 'Manrope', sans-serif; color: var(--ink-2); margin: 0; max-width: 68ch; }

.wizard-ack {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font: 500 13px/1.5 'Manrope', sans-serif;
    color: var(--ink);
    cursor: pointer;
}
.wizard-ack input { width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0; }

.wizard-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--divider);
}

/* ── Login screen ──────────────────────────────────────────────────────────
   Shared by AdminLogin and UserLogin (Layout = null). Cream brand panel left,
   taupe form panel right. */
.login-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: 100%;
    flex: 1;
    min-height: 100vh;
}

.login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px 52px;
    background: var(--brand-cream);
    color: var(--ink);
}

.login-brand > * { position: relative; z-index: 1; }

.login-lockup { display: block; width: min(400px, 62%); }
.login-lockup img { display: block; width: 100%; height: auto; }

.login-watermark {
    position: absolute;
    z-index: 0;
    left: -46px;
    bottom: -72px;
    width: 400px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.login-pitch {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-left: clamp(0px, 42%, 360px);
    max-width: 380px;
}

.login-title {
    margin: 0;
    font: 500 40px/1.15 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: pretty;
}

.login-lead {
    margin: 0;
    font: 400 15px/1.55 'Manrope', sans-serif;
    color: var(--ink-2);
    text-wrap: pretty;
}

.login-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 60px;
    background: var(--brand-taupe);
    color: #fff;
}

.login-form-col {
    width: 100%;
    max-width: 384px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.login-mark { display: block; width: 66px; height: auto; margin-bottom: 2px; }

.login-heading { display: flex; flex-direction: column; gap: 10px; }
.login-heading h1 {
    margin: 0;
    font: 500 24px/1.2 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: #fff;
}
.login-heading p {
    margin: 0;
    font: 400 13.5px/1.5 'Manrope', sans-serif;
    color: rgba(255,255,255,.9);
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 7px; }

.login-label {
    font: 500 12.5px/1 'Manrope', sans-serif;
    color: #fff;
}

.login-input {
    height: 44px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    background: #fff;
    font: 400 15px/1 'Manrope', sans-serif;
    color: var(--ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.login-input::placeholder { color: var(--ink-3); }
.login-input:focus { border-color: var(--brand-gold); box-shadow: var(--focus-ring); }

.login-btn {
    height: 46px;
    margin-top: 6px;
    border: none;
    border-radius: var(--radius-ctrl);
    background: var(--brand-gold);
    color: #fff;
    font: 600 14.5px/1 'Manrope', sans-serif;
    cursor: pointer;
    transition: background .15s;
}
.login-btn:hover { background: var(--brand-gold-hover); }

.login-card :focus-visible { outline-color: #fff; }

.login-note {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    font: 400 13px/1.55 'Manrope', sans-serif;
    color: rgba(255,255,255,.85);
}
.login-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.login-note a:hover { color: var(--brand-cream); }

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(156,58,49,.35);
    border-radius: var(--radius-ctrl);
    background: var(--danger-tint);
    font: 500 13px/1.5 'Manrope', sans-serif;
    color: var(--danger);
}
.login-error .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }

.login-banner {
    padding: 14px 16px;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-card);
    background: var(--brand-cream);
}
.login-banner-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-gold-ink);
}
.login-banner-title .material-symbols-outlined { font-size: 15px; }
.login-banner p { margin: 0; font: 400 13px/1.55 'Manrope', sans-serif; color: var(--ink-2); }

@media (max-width: 900px) {
    .login-wrapper { grid-template-columns: 1fr; min-height: 100dvh; }
    .login-brand { padding: 28px 24px 36px; gap: 28px; }
    .login-lockup { width: min(320px, 80%); }
    .login-watermark { display: none; }
    .login-pitch { margin-left: 0; max-width: none; }
    .login-title { font-size: 28px; }
    .login-card { padding: 32px 24px 56px; }
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}
.form-input:focus-visible { outline: none; }
.master-sidebar :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .master-topbar { padding: 0 24px; }
    .master-topbar .topbar-user-info { display: none; }
}

@media (max-width: 768px) {
    .master-sidebar  { display: none; }
    #sidebar-resizer { display: none; }
    .master-main     { margin-left: 0; }
    .master-topbar   { padding: 0 16px; gap: 12px; }
    .master-topbar .topbar-icons { display: none; }
    .master-content  { padding: 20px 16px 40px; }
    .master-content .page-title { font-size: 28px; }
    .editor-bar { margin: -20px -16px 20px; padding: 12px 16px 10px; }
    .master-content .editor-bar .page-title { font-size: 22px; }
    .card-region, .form-section, .card-panel { padding: 20px; }
    .card-header, .card-footer, .editor-footer { padding: 14px 20px; }
    .edit-panel-body { padding: 20px; }
}