/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0a0d14;
    --surface: #111520;
    --surface2: #161b2e;
    --border: #1e2640;
    --accent: #4f8ef7;
    --teal: #00d4b4;
    --text: #e2e8f0;
    --muted: #64748b;
    --cat1: #22c55e;
    --cat2: #f59e0b;
    --cat3: #ef4444;
    --cat4: #8b5cf6;
    --danger: #ef4444;
    --header-h: 56px;
    --sidebar-w: 280px;
    --surface-hover-sticky: rgba(20,40,70,.95);
    --surface-sel-sticky: rgba(30,55,100,.95);
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    overflow: hidden;
}

    /* ── Grid bg ───────────────────────────────────────────────────────────── */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image: linear-gradient(rgba(79,142,247,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(79,142,247,.04) 1px, transparent 1px);
        background-size: 40px 40px;
    }

/* ── Header ────────────────────────────────────────────────────────────── */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: rgba(17,21,32,.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.header-center {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.header-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    /* Logo is light on white — invert for dark bg */
    filter: invert(1) brightness(0.85);
    flex-shrink: 0;
}

.header-logo-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 4px;
}

.logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0a0d14;
}

.app-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
}

    .app-title span {
        color: var(--accent);
    }

.app-sub {
    font-size: 9px;
    color: var(--muted);
    letter-spacing: .05em;
}

.proj-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.proj-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

.sync-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(100,116,139,.15);
    color: var(--muted);
    border: 1px solid var(--border);
}

    .sync-badge.synced {
        background: rgba(34,197,94,.12);
        color: var(--cat1);
        border-color: rgba(34,197,94,.3);
    }

    .sync-badge.merged {
        background: rgba(79,142,247,.12);
        color: var(--accent);
        border-color: rgba(79,142,247,.3);
    }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-login, .btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    transition: opacity .15s;
}

    .btn-login:hover, .btn-primary:hover {
        opacity: .82;
    }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    transition: border-color .15s, color .15s;
}

    .btn-ghost:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .btn-ghost.sm {
        padding: 4px 9px;
        font-size: 11px;
    }

.btn-acc {
    background: rgba(0,212,180,.12);
    border: 1px solid rgba(0,212,180,.3);
    color: var(--teal);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    transition: background .15s;
}

    .btn-acc:hover {
        background: rgba(0,212,180,.22);
    }

.upload-label {
    cursor: pointer;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
#layout {
    display: flex;
    height: 100vh;
    padding-top: var(--header-h);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.panel-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* ── Sidebar branding footer ───────────────────────────────────────────── */
.sidebar-brand {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    z-index: 1;
}

.sidebar-brand-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin-bottom: 6px;
}

.sidebar-brand-logo {
    width: auto;
    height: 64px;
    object-fit: contain;
    filter: invert(1) brightness(0.85);
    opacity: 0.9;
}

.sidebar-brand-text {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.6;
    letter-spacing: .03em;
}

body[data-theme="light"] .sidebar-brand-logo {
    filter: none;
}

/* ── Main content area (flex sibling to sidebar) ───────────────────────── */
#main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

/* ── Hub/Project Selector Panel ────────────────────────────────────────── */
#selectorPanel {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.sel-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.sel-title {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}

.sel-sub {
    font-size: 11px;
    color: var(--muted);
}

.sel-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sel-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sel-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--border);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

#stepHub .sel-step-num {
    background: rgba(79,142,247,.2);
    color: var(--accent);
}

#stepProject .sel-step-num {
    background: rgba(0,212,180,.2);
    color: var(--teal);
}

.sel-control {
    position: relative;
}

    .sel-control select {
        width: 100%;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        padding: 9px 12px;
        font-size: 12px;
        font-family: 'DM Mono', monospace;
        outline: none;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        transition: border-color .15s;
    }

        .sel-control select:focus {
            border-color: var(--accent);
        }

        .sel-control select:disabled {
            opacity: .45;
            cursor: not-allowed;
        }

.sel-loading {
    position: absolute;
    bottom: -18px;
    left: 2px;
    font-size: 10px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.sel-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    display: inline-block;
    animation: spin .7s linear infinite;
}

.sel-go-btn {
    margin-top: 4px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 11px 16px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    letter-spacing: .02em;
}

    .sel-go-btn:hover:not(:disabled) {
        opacity: .88;
        transform: translateY(-1px);
    }

    .sel-go-btn:disabled {
        opacity: .35;
        cursor: not-allowed;
        transform: none;
    }

.sel-hint {
    font-size: 11px;
    color: var(--cat3);
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 6px;
    padding: 8px 10px;
}

/* ── Active Project Panel ──────────────────────────────────────────────── */
#activeProjectPanel {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.act-hub-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom: 4px;
}

.act-proj-name {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

.act-proj-meta {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 8px;
}

/* Sidebar breakdown button */
.btn-breakdown {
    background: rgba(79,142,247,.08);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all .15s;
    font-family: 'DM Mono', monospace;
    width: 100%;
    text-align: left;
}

    .btn-breakdown:hover {
        color: var(--accent);
        border-color: var(--accent);
        background: rgba(79,142,247,.12);
    }

/* Sidebar nav buttons */
.act-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.act-nav-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: all .12s;
    font-family: 'DM Mono', monospace;
    text-align: left;
}

    .act-nav-btn:hover {
        background: rgba(79,142,247,.06);
        color: var(--text);
        border-color: var(--border);
    }

    .act-nav-btn.active {
        background: rgba(79,142,247,.12);
        color: var(--accent);
        border-color: rgba(79,142,247,.3);
    }

/* ── Header project breadcrumb ─────────────────────────────────────────── */
.btn-home {
    background: rgba(79,142,247,.1);
    border: 1px solid rgba(79,142,247,.2);
    color: var(--accent);
    cursor: pointer;
    font-size: 15px;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all .15s;
    flex-shrink: 0;
}

    .btn-home:hover {
        background: rgba(79,142,247,.2);
    }

.header-proj-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.proj-hub {
    color: var(--muted);
    font-size: 11px;
}

.proj-sep {
    color: var(--border);
    font-size: 14px;
}

.proj-name {
    color: var(--text);
    font-weight: 600;
}


/* ── Empty state ───────────────────────────────────────────────────────── */
#emptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    padding: 40px;
    text-align: center;
    min-height: 0;
}

.empty-icon {
    font-size: 48px;
    opacity: .4;
}

.empty-title {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.empty-sub {
    font-size: 12px;
    color: var(--muted);
    max-width: 420px;
    line-height: 1.7;
}

.empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

/* ── KPI Row ───────────────────────────────────────────────────────────── */
#kpiRow {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 14px 16px 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 110px;
    flex: 1;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .15s;
}

    .kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
    }

    .kpi-card:hover {
        border-color: rgba(79,142,247,.4);
    }

    .kpi-card.active-filter {
        border-color: var(--accent);
        background: rgba(79,142,247,.08);
    }

    .kpi-card.blue::before {
        background: var(--accent);
    }

    .kpi-card.green::before {
        background: var(--cat1);
    }

    .kpi-card.amber::before {
        background: var(--cat2);
    }

    .kpi-card.red::before {
        background: var(--cat3);
    }

    .kpi-card.purple::before {
        background: var(--cat4);
    }

    .kpi-card.accent::before {
        background: var(--accent);
    }

    .kpi-card.muted::before {
        background: var(--muted);
    }

    .kpi-card.danger::before {
        background: var(--danger);
    }
    /* Classes actually used in HTML */
    .kpi-card.cat1::before {
        background: var(--cat1);
    }

    .kpi-card.cat2::before {
        background: var(--cat2);
    }

    .kpi-card.cat3::before {
        background: var(--cat3);
    }

    .kpi-card.cat4::before {
        background: var(--cat4);
    }

    .kpi-card.rev::before {
        background: var(--accent);
    }

    .kpi-card.none::before {
        background: var(--muted);
    }

    .kpi-card.over::before {
        background: #ef4444;
    }

    .kpi-card.cat1 .kpi-val {
        color: var(--cat1);
    }

    .kpi-card.cat2 .kpi-val {
        color: var(--cat2);
    }

    .kpi-card.cat3 .kpi-val {
        color: var(--cat3);
    }

    .kpi-card.cat4 .kpi-val {
        color: var(--cat4);
    }

    .kpi-card.rev .kpi-val {
        color: var(--accent);
    }

    .kpi-card.over .kpi-val {
        color: #ef4444;
    }

.kpi-val {
    font-family: 'Syne', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.kpi-lbl {
    font-size: 10px;
    color: var(--text);
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}

.kpi-card.green .kpi-val {
    color: var(--cat1);
}

.kpi-card.amber .kpi-val {
    color: var(--cat2);
}

.kpi-card.red .kpi-val {
    color: var(--cat3);
}

.kpi-card.purple .kpi-val {
    color: var(--cat4);
}

.kpi-card.danger .kpi-val {
    color: var(--danger);
}

.kpi-card.accent .kpi-val {
    color: var(--accent);
}

.kpi-card.blue .kpi-val {
    color: var(--text);
}

.kpi-card.muted .kpi-val {
    color: var(--muted);
}

/* ── Filter Bar ────────────────────────────────────────────────────────── */
#filterBar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

#txtSearch {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    outline: none;
    width: 220px;
    transition: border-color .15s;
}

    #txtSearch:focus {
        border-color: var(--accent);
    }

select {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-family: 'DM Mono', monospace;
    outline: none;
    cursor: pointer;
}

.chk-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
}

    .chk-wrap input {
        accent-color: var(--accent);
    }

.row-count {
    font-size: 10px;
    color: var(--muted);
    margin-left: auto;
}

/* ── Table ─────────────────────────────────────────────────────────────── */
#tableWrap {
    flex: 1;
    overflow: auto;
    padding: 0 16px 16px;
}

#registerTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    #registerTable thead th {
        background: var(--surface2);
        color: var(--muted);
        padding: 8px 10px;
        text-align: left;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .1em;
        position: sticky;
        /* The two header rows (rev-groups and column-headers) are BOTH
           sticky-top. With both at top:0 they layered on top of each
           other on scroll, masking column headers behind the rev-groups
           row's blank colspan cell. The fix: rev-groups stays at top:0
           (overridden below for the .rev-groups class), and the
           column-headers row sits BELOW it at the rev-groups height. */
        top: 24px;
        white-space: nowrap;
        border-bottom: 1px solid var(--border);
        z-index: 10;
    }
    /* Rev group header row — sits ABOVE the column-headers row when
       the table sticks to the top of the viewport. Top:0 + slightly
       higher z-index keeps it on top when both rows stick simultaneously. */
    #registerTable thead tr.rev-groups th {
        top: 0;
        z-index: 11;
        text-align: center;
        font-size: 10px;
        font-weight: 700;
        padding: 5px;
        text-transform: none;
        letter-spacing: 0;
    }

th.rg-r00 {
    border-top: 2px solid #4f8ef7;
    color: #4f8ef7;
}

th.rg-r01 {
    border-top: 2px solid #00d4b4;
    color: #00d4b4;
}

th.rg-r02 {
    border-top: 2px solid #8b5cf6;
    color: #8b5cf6;
}

th.rg-r03 {
    border-top: 2px solid #f59e0b;
    color: #f59e0b;
}

th.rg-r04 {
    border-top: 2px solid #22c55e;
    color: #22c55e;
}

#registerTable tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}

    #registerTable tbody tr:hover {
        background: rgba(79,142,247,.05);
    }

    #registerTable tbody tr:nth-child(even) {
        background: rgba(100,116,139,.04);
    }

    #registerTable tbody tr.row-selected {
        background: rgba(79,142,247,.12) !important;
    }

#registerTable td {
    padding: 9px 10px;
    vertical-align: middle;
}

    /* Sticky checkbox column */
    #registerTable td.col-check,
    #registerTable thead th.col-check {
        position: sticky;
        left: 0;
        width: 36px;
        min-width: 36px;
        padding: 0 8px;
        background: var(--surface);
        z-index: 6;
        box-shadow: 2px 0 4px rgba(0,0,0,.25);
    }

#registerTable thead th.col-check {
    background: var(--surface2);
    z-index: 16;
    /* Two-axis sticky: left:0 keeps it pinned during horizontal scroll;
       top:24px places it in the column-headers row (BELOW the rev-groups
       row at top:0). Without explicit top, the cell can end up floating
       inconsistently across browsers when both header rows are sticky. */
    top: 24px;
}

/* Sticky doc-num column (second column) */
/* MUST have opaque background — transparent sticky td shows content scrolling beneath it */
td.doc-num {
    color: var(--accent);
    font-weight: 500;
    letter-spacing: .02em;
    min-width: 160px;
    max-width: 200px;
    width: 180px;
    position: sticky;
    left: 36px;
    background: var(--surface); /* solid default — overridden per row-type below */
    z-index: 5;
    box-shadow: 2px 0 6px rgba(0,0,0,.35);
}

/* Row banding: odd rows get slightly lighter bg — apply to sticky td too */
#registerTable tbody tr:nth-child(even) td.doc-num,
#apTable tbody tr:nth-child(even) td.doc-num {
    background: var(--surface2);
}

#registerTable tbody tr:nth-child(odd) td.doc-num,
#apTable tbody tr:nth-child(odd) td.doc-num {
    background: var(--surface);
}

/* Line-clamp on inner span — avoids display:flex conflict with sticky td */
td.doc-num .doc-num-inner {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
    max-width: 180px;
}

#registerTable thead th.col-docnum {
    position: sticky;
    left: 36px;
    top: 24px;
    z-index: 15;
    background: var(--surface2);
    box-shadow: 2px 0 4px rgba(0,0,0,.2);
}

/* Description column — kept non-sticky-left because the doc-num
   column to its left has variable width (auto-layout shrinks it to
   content), so a hardcoded `left: 216px` here would misalign with
   doc-num's actual right edge by tens of pixels and render as a
   visible gap. If sticky-left becomes essential later, it has to be
   computed from the doc-num cell's rendered width via JavaScript,
   not hardcoded in CSS.
   Cap the column so very long descriptions don't push the rest of
   the table off-screen. */
td.doc-desc {
    /* Wrap long descriptions to two lines instead of stretching the col */
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    max-width: 280px;
}

/* Description header — sticky-top only, NOT sticky-left. Sits in the
   column-headers row at top:24px (below the rev-groups row). */
#registerTable thead th[data-colkey="description"] {
    position: sticky;
    top: 24px;
    z-index: 10;
    background: var(--surface2);
}

/* Sticky Actions column — pinned to the right edge of the table.
   Was previously left-sticky next to doc-num (between R00 and R01 caused
   layout confusion); the conventional and clearer place is the trailing
   column where most users instinctively look for row controls. The right
   shadow direction is reversed (negative x) so the depth cue points
   inward toward the data. Width is 44px — enough for one ⋮ button. */
td.col-actions {
    min-width: 44px;
    width: 44px;
    position: sticky;
    right: 0;
    background: var(--surface);
    z-index: 5;
    box-shadow: -2px 0 6px rgba(0,0,0,.35);
    padding: 4px;
    text-align: center;
}

#registerTable tbody tr:nth-child(even) td.col-actions,
#apTable tbody tr:nth-child(even) td.col-actions {
    background: var(--surface2);
}

#registerTable tbody tr:nth-child(odd) td.col-actions,
#apTable tbody tr:nth-child(odd) td.col-actions {
    background: var(--surface);
}

#registerTable thead th.col-actions {
    position: sticky;
    right: 0;
    top: 24px;
    z-index: 15;
    min-width: 44px;
    width: 44px;
    background: var(--surface2);
    box-shadow: -2px 0 4px rgba(0,0,0,.2);
}

/* Hover/selected row colors for the new sticky actions cell — match the
   doc-num convention so the sticky cells don't show a different shade
   than the rest of the row when it's hovered or selected. */
#registerTable tbody tr:hover td.col-actions,
#apTable tbody tr:hover td.col-actions {
    background: var(--surface-hover-sticky, rgba(20,40,70,.95));
}

#registerTable tbody tr.row-selected td.col-actions,
#apTable tbody tr.row-selected td.col-actions {
    background: var(--surface-sel-sticky, rgba(30,55,100,.95));
}

/* Hover/selected backgrounds still need explicit sticky td colour to prevent bleed-through */
#registerTable tbody tr:hover td.col-check,
#registerTable tbody tr:hover td.doc-num {
    background: rgba(20,50,80,.98) !important;
}

#registerTable tbody tr.row-selected td.col-check,
#registerTable tbody tr.row-selected td.doc-num {
    background: rgba(30,65,115,.98) !important;
}

td.doc-desc {
    white-space: normal;
    word-break: break-word;
    min-width: 120px;
}

td.date {
    color: var(--muted);
    white-space: nowrap;
    font-size: 11px;
}

    td.date.overdue {
        color: var(--cat3);
    }

/* Bulk action bar — full width between filter bar and table */
#bulkBar {
    display: none;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 7px 16px;
    background: rgba(79,142,247,.1);
    border-bottom: 1px solid rgba(79,142,247,.35);
    font-size: 12px;
}

    #bulkBar.visible {
        display: flex;
    }

    #bulkBar .bulk-count {
        font-weight: 700;
        color: var(--accent);
    }

    #bulkBar .btn-bulk {
        padding: 4px 12px;
        border-radius: 4px;
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text);
        font-size: 11px;
        cursor: pointer;
        transition: background .15s;
        white-space: nowrap;
    }

        #bulkBar .btn-bulk:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        #bulkBar .btn-bulk.danger:hover {
            background: var(--cat3);
            border-color: var(--cat3);
        }

    #bulkBar .bulk-sep {
        flex: 1;
    }

/* Category badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-cat1 {
    background: rgba(34,197,94,.12);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,.25);
}

.badge-cat2 {
    background: rgba(245,158,11,.12);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.25);
}

.badge-cat3 {
    background: rgba(239,68,68,.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.25);
}

.badge-cat4 {
    background: rgba(139,92,246,.12);
    color: #a78bfa;
    border: 1px solid rgba(139,92,246,.25);
}

.badge-review {
    background: rgba(79,142,247,.12);
    color: #93c5fd;
    border: 1px solid rgba(79,142,247,.25);
}

.badge-none {
    background: rgba(100,116,139,.1);
    color: var(--muted);
    border: 1px solid var(--border);
}

.badge-appr {
    background: rgba(79,142,247,.1);
    color: #93c5fd;
    border: 1px solid rgba(79,142,247,.2);
}

.badge-info {
    background: rgba(100,116,139,.1);
    color: #94a3b8;
    border: 1px solid var(--border);
}

/* ACC availability badges — used in the register column to show which
   docs have a known ACC version URN from the last sync. Green = in ACC,
   muted = not in ACC. The version number ("v3") is shown when known;
   plain "✓" if we only have a lineage URN with no version. The static
   label gives instant feedback without per-row server calls — accuracy
   tracks the last Sync ACC. */
.badge-acc-on {
    background: rgba(34,197,94,.12);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,.3);
    font-size: 9px;
    padding: 2px 6px;
}

.badge-acc-off {
    background: rgba(100,116,139,.08);
    color: #64748b;
    border: 1px solid rgba(100,116,139,.2);
    font-size: 10px;
    padding: 2px 6px;
}

.badge-acc {
    background: rgba(0,212,180,.1);
    color: var(--teal);
    border: 1px solid rgba(0,212,180,.2);
    font-size: 8px;
}

.badge-excel {
    background: rgba(245,158,11,.08);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.2);
    font-size: 8px;
}

.badge-merged {
    background: rgba(79,142,247,.08);
    color: #93c5fd;
    border: 1px solid rgba(79,142,247,.2);
    font-size: 8px;
}

/* Progress bar */
.prog-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
}

.prog-track {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
}

.prog-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .5s;
}

.prog-label {
    font-size: 9px;
    color: var(--muted);
    white-space: nowrap;
}

/* Row menu button — single ⋮ that opens a popover with the row's actions
   (Edit, Upload, Delete, …). Replaced the old three-icon inline strip
   because that took too much horizontal space in the new sticky-left
   column position, and didn't scale to additional actions. */
.row-menu-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.row-menu-btn:hover {
    background: rgba(79,142,247,.12);
    color: var(--accent);
    border-color: rgba(79,142,247,.3);
}

.row-menu-btn.open {
    background: rgba(79,142,247,.18);
    color: var(--accent);
    border-color: var(--accent);
}

/* Popover that opens on ⋮ click. Positioned absolutely against the body
   in JS (computed from the button's getBoundingClientRect), so it isn't
   clipped by table overflow:hidden or the sticky cell. */
.row-menu-popover {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    min-width: 180px;
    padding: 6px;
    z-index: 700;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.row-menu-item {
    background: transparent;
    border: none;
    color: var(--text);
    text-align: left;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-family: inherit;
    transition: background .1s;
    white-space: nowrap;
}

.row-menu-item:hover {
    background: rgba(79,142,247,.12);
    color: var(--accent);
}

.row-menu-item.danger {
    color: var(--cat3);
}

.row-menu-item.danger:hover {
    background: rgba(239,68,68,.12);
    color: var(--cat3);
}

.row-menu-item-ico {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    font-size: 13px;
}

.row-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 2px;
}

/* The legacy .row-actions / .act-btn rules are kept below for now —
   they may still be referenced by other tables (Approved Drawings etc).
   The register table no longer renders them. */
.row-actions {
    display: flex;
    gap: 4px;
    opacity: .75;
    transition: opacity .1s;
}

tr:hover .row-actions {
    opacity: 1;
}

.act-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all .1s;
}

    .act-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .act-btn.del:hover {
        border-color: var(--cat3);
        color: var(--cat3);
    }

/* ── Modals ────────────────────────────────────────────────────────────── */
#modalOverlay, #rowModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

#breakdownModal, #rowModal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}

#rowModal {
    width: 500px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.modal-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
}

.modal-sub {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 16px;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Level rows in breakdown modal */
.level-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
}

    .level-row input[type=text] {
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 5px 8px;
        border-radius: 5px;
        font-size: 12px;
        width: 130px;
        font-family: 'DM Mono', monospace;
    }

    .level-row select {
        flex: 1;
    }

    .level-row .lvl-btn {
        background: none;
        border: 1px solid var(--border);
        color: var(--muted);
        width: 24px;
        height: 24px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
    }

        .level-row .lvl-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .level-row .lvl-btn.del:hover {
            border-color: var(--cat3);
            color: var(--cat3);
        }

.breakdown-preview {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--surface2);
    border-radius: 8px;
    font-size: 12px;
    color: var(--teal);
    letter-spacing: .03em;
}

/* Row form */
.row-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .form-group.full {
        grid-column: 1 / -1;
    }

    .form-group label {
        font-size: 10px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .form-group input, .form-group select {
        background: var(--surface2);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 7px 9px;
        border-radius: 6px;
        font-size: 12px;
        font-family: 'DM Mono', monospace;
        outline: none;
        width: 100%;
    }

        .form-group input:focus, .form-group select:focus {
            border-color: var(--accent);
        }

/* ── Loading ────────────────────────────────────────────────────────────── */
#loadingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(10,13,20,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.spinner-wrap {
    text-align: center;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin: 0 auto 12px;
}

.spinner-text {
    font-size: 12px;
    color: var(--muted);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
/* User feedback: the 6px scrollbars were nearly invisible against the dark
   theme. Bumped to 12px with a stronger thumb colour + small inset so users
   can both see them and grab them comfortably. Firefox uses scrollbar-width
   + scrollbar-color since it doesn't support the ::-webkit-scrollbar
   pseudo-elements. */
* {
    scrollbar-width: auto;                                   /* Firefox */
    scrollbar-color: var(--muted) var(--bg);                 /* Firefox: thumb track */
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--muted);
    border: 2px solid var(--bg);
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text);
    }

/* ── Sync badge states ─────────────────────────────────────────────────── */
.sync-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(100,116,139,.15);
    color: var(--muted);
}

    .sync-badge.synced {
        background: rgba(34,197,94,.15);
        color: var(--cat1);
    }

    .sync-badge.merged {
        background: rgba(79,142,247,.15);
        color: var(--accent);
    }

    .sync-badge.error {
        background: rgba(239,68,68,.2);
        color: var(--cat3);
        font-weight: 600;
    }

.sync-detail {
    font-size: 10px;
    color: var(--muted);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(100,116,139,.1);
}

/* ── Diagnostics panel ────────────────────────────────────────────────── */
#diagPanel {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 520px;
    max-height: 520px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#diagHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    flex-shrink: 0;
}

    #diagHeader select {
        font-size: 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 4px;
        padding: 2px 6px;
        cursor: pointer;
    }

#diagStats {
    display: flex;
    gap: 12px;
    padding: 6px 14px;
    background: rgba(79,142,247,.05);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    color: var(--muted);
    flex-shrink: 0;
}

    #diagStats span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

#diagBody {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    font-size: 10.5px;
    font-family: 'DM Mono', monospace;
    line-height: 1.5;
}

#diagFooter {
    display: flex;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

.diag-link {
    font-size: 10px;
    color: var(--accent);
    text-decoration: none;
    opacity: .7;
}

    .diag-link:hover {
        opacity: 1;
    }

.diag-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
}

    .diag-close:hover {
        color: var(--text);
    }

/* Log entries */
.diag-line {
    display: flex;
    gap: 6px;
    padding: 2px 14px;
    align-items: baseline;
}

    .diag-line:hover {
        background: rgba(100,116,139,.07);
    }

.diag-time {
    color: var(--muted);
    font-size: 9px;
    min-width: 68px;
    flex-shrink: 0;
    opacity: .6;
}

.diag-icon {
    min-width: 12px;
    text-align: center;
    flex-shrink: 0;
}

.diag-msg {
    word-break: break-all;
    flex: 1;
}

.diag-phase .diag-icon {
    color: var(--accent);
}

.diag-phase .diag-msg {
    color: var(--accent);
    font-weight: 600;
    font-size: 11px;
}

.diag-ok .diag-icon {
    color: var(--cat1);
}

.diag-ok .diag-msg {
    color: var(--cat1);
}

.diag-info .diag-icon {
    color: var(--muted);
}

.diag-info .diag-msg {
    color: var(--text-dim, #94a3b8);
}

.diag-warn .diag-icon {
    color: var(--cat2);
}

.diag-warn .diag-msg {
    color: var(--cat2);
}

.diag-error .diag-icon {
    color: var(--cat3);
    font-weight: 700;
}

.diag-error .diag-msg {
    color: var(--cat3);
    font-weight: 600;
}

.diag-empty {
    padding: 20px;
    text-align: center;
    color: var(--muted);
}

/* Diag badges */
.diag-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 500;
    margin-left: 6px;
}

    .diag-badge.ok {
        background: rgba(34,197,94,.15);
        color: var(--cat1);
    }

    .diag-badge.warn {
        background: rgba(245,158,11,.15);
        color: var(--cat2);
    }

    .diag-badge.err {
        background: rgba(239,68,68,.2);
        color: var(--cat3);
    }

/* Diagnostics button error state */
.btn-ghost.btn-err {
    border-color: var(--cat3);
    color: var(--cat3);
}

#diagCopyBtn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}

    #diagCopyBtn:hover {
        color: var(--text);
        border-color: var(--text);
    }

.diag-stat-err {
    color: var(--cat3) !important;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   LAYOUT FIX — ensures correct full-height, correct tab switching
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tab panels: full-height flex columns ──────────────────────────────── */
#dashTab, #trackerTab, #reviewsTab, #approvedTab, #analyticsTab, #usersTab, #settingsTab, #scheduleTab, #issuesTab {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

    #dashTab.active, #trackerTab.active, #reviewsTab.active, #approvedTab.active,
    #analyticsTab.active, #usersTab.active, #settingsTab.active, #scheduleTab.active, #issuesTab.active {
        display: flex;
    }

#dashboard {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* KPI strip */
#kpiStrip {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

    #kpiStrip .kpi-card {
        min-width: 100px;
        flex: 1;
    }

.kpi-card.cat1 .kpi-val {
    color: var(--cat1);
}

.kpi-card.cat2 .kpi-val {
    color: var(--cat2);
}

.kpi-card.cat3 .kpi-val {
    color: var(--cat3);
}

.kpi-card.cat4 .kpi-val {
    color: var(--cat4);
}

.kpi-card.rev .kpi-val {
    color: var(--accent);
}

.kpi-card.over .kpi-val {
    color: var(--cat3);
}

.kpi-card.none .kpi-val {
    color: var(--muted);
}

/* Controls bar */
.dash-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}

    .dash-controls input[type=text] {
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 5px 10px;
        border-radius: 6px;
        font-family: 'DM Mono', monospace;
        font-size: 12px;
        outline: none;
        min-width: 200px;
        flex: 1;
    }

        .dash-controls input[type=text]:focus {
            border-color: var(--accent);
        }

/* Breakdown + table layout */
.dash-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* required for nested flex children to shrink correctly */
    height: 100%;
}

.breakdown-tree-wrap {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    /* Stretch full height of the parent dash-body */
    align-self: stretch;
}

.breakdown-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

    .breakdown-tree:empty {
        display: none;
    }
/* ── Breakdown tree nodes ──────────────────────────────────────────────── */
.bd-node {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text);
    transition: background .12s;
}

    .bd-node:hover {
        background: rgba(79,142,247,.07);
    }

    .bd-node.active {
        background: rgba(79,142,247,.15);
        color: var(--accent);
    }

.bd-bar {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--border);
    flex-shrink: 0;
}

.bd-node.active .bd-bar {
    background: var(--accent);
}

.bd-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-count {
    font-size: 10px;
    color: var(--muted);
    flex-shrink: 0;
}

.bd-pct {
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

.bd-warn {
    font-size: 9px;
    color: var(--cat3);
    flex-shrink: 0;
}

.bd-children {
    padding-left: 14px;
}

.bd-level-0 {
    font-weight: 600;
}

.bd-level-1 {
    padding-left: 14px;
}

.bd-level-2 {
    padding-left: 24px;
}

.bd-level-3 {
    padding-left: 34px;
}


.table-wrap {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
}

/* ── Export Modal ──────────────────────────────────────────────────────── */
#exportModal {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
}

#exportBox {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 420px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

#exportHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

#exportBody {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#exportFooter {
    padding: 12px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border);
}

/* Export option rows */
.export-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .export-opt:hover {
        border-color: var(--accent);
        background: rgba(79,142,247,.06);
    }

    .export-opt input {
        accent-color: var(--accent);
        margin-top: 2px;
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

.export-opt-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.2;
}

.export-opt strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.export-opt-sub {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.5;
}

.export-opt:has(input:checked) {
    border-color: rgba(79,142,247,.4);
    background: rgba(79,142,247,.07);
}

/* ── Archived review badge ─────────────────────────────────────────────── */
.badge-archived {
    background: rgba(100,116,139,.18);
    color: #94a3b8;
    border: 1px solid rgba(100,116,139,.35);
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 500;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* ── Users tab layout (display handled by unified tab rule above) ──────── */
#usersToolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

#usersTable tbody tr:hover {
    background: rgba(79,142,247,.04);
}

/* Coming soon nav button */
.act-nav-btn.coming {
    opacity: .4;
    cursor: not-allowed;
    font-style: italic;
}

    .act-nav-btn.coming::after {
        content: ' (soon)';
        font-size: 9px;
        opacity: .7;
    }

/* ── Refresh button ─────────────────────────────────────────────────────── */
#btnRefresh {
    letter-spacing: .02em;
}
/* no transform on active */

/* ── Coming Soon nav tag ───────────────────────────────────────────────── */
.act-nav-btn.coming {
    opacity: .55;
    cursor: not-allowed;
    position: relative;
}

    .act-nav-btn.coming:hover {
        opacity: .65;
    }

.coming-tag {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .06em;
    background: rgba(245,158,11,.25);
    color: #f59e0b;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ── KPI card min height so label never gets cut ───────────────────────── */
.kpi-card {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ── Settings Tab ───────────────────────────────────────────────────────────── */
#settingsTab {
    flex-direction: column;
}

.settings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

.settings-role-chip {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.settings-table-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    text-transform: uppercase;
    flex-shrink: 0;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}

    .settings-row:hover {
        background: rgba(79,142,247,.05);
    }

.settings-name {
    font-size: 13px;
    font-weight: 500;
}

.settings-email {
    font-size: 11px;
    color: var(--muted);
}

.settings-acc-role {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
}

.perm-role-select {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
}

    .perm-role-select:focus {
        border-color: var(--accent);
        outline: none;
    }

.settings-discs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 28px;
}

.perm-disc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background .12s, border-color .12s;
}

    .perm-disc-chip:has(input:checked) {
        background: rgba(79,142,247,.18);
        border-color: var(--accent);
    }

    .perm-disc-chip input {
        width: 12px;
        height: 12px;
        accent-color: var(--accent);
    }

/* ── Sidebar sync stats ─────────────────────────────────────────────────── */
.act-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 10px;
    background: rgba(79,142,247,.12);
    color: var(--accent);
    border: 1px solid rgba(79,142,247,.25);
    font-weight: 600;
    letter-spacing: .02em;
}

    .act-sync-badge.excel {
        background: rgba(34,197,94,.1);
        color: var(--cat1);
        border-color: rgba(34,197,94,.25);
    }

    .act-sync-badge.merged {
        background: rgba(79,142,247,.12);
        color: var(--accent);
        border-color: rgba(79,142,247,.3);
    }

    .act-sync-badge.error {
        background: rgba(239,68,68,.1);
        color: var(--cat3);
        border-color: rgba(239,68,68,.25);
    }

#actSyncDetail span {
    display: block;
    color: var(--muted);
    font-size: 10px;
}

/* ── Header clarity improvements ────────────────────────────────────────── */
#header {
    border-bottom: 1px solid rgba(79,142,247,.15);
    background: rgba(10,13,20,.97);
}

.header-center {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0 20px;
    margin: 0 8px;
    height: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   NEW STYLES — v3 upgrade
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Go to ACC button in header ─────────────────────────────────────────── */
.btn-go-acc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,212,180,.1);
    border: 1px solid rgba(0,212,180,.35);
    color: var(--teal);
    padding: 6px 13px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'DM Mono', monospace;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

    .btn-go-acc:hover {
        background: rgba(0,212,180,.2);
        border-color: rgba(0,212,180,.6);
        color: var(--teal);
    }

/* ── Settings toolbar nav (matches Reviews toolbar style) ─────────────── */
#settingsToolbarNav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

#settingsViewBtns {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

/* ── Settings sub-tabs ──────────────────────────────────────────────────── */
.settings-subtabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.stab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 6px;
    transition: all .12s;
    font-family: 'DM Mono', monospace;
}

    .stab-btn:hover {
        background: rgba(79,142,247,.06);
        color: var(--text);
        border-color: var(--border);
    }

    .stab-btn.active {
        background: rgba(79,142,247,.14);
        color: var(--accent);
        border-color: rgba(79,142,247,.3);
    }

/* Settings pane: hidden by default, shown when active */
.settings-pane {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

    .settings-pane.active-pane {
        display: flex;
    }

/* ── Drawing Register Settings pane ────────────────────────────────────── */
.reg-settings-section {
}

.reg-settings-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.reg-settings-sub {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

.reg-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.reg-cat-chip {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.55;
    border: 1px solid var(--border);
}

    .reg-cat-chip.cat1 {
        background: rgba(34,197,94,.06);
        border-color: rgba(34,197,94,.2);
        color: #bbf7d0;
    }

    .reg-cat-chip.cat2 {
        background: rgba(245,158,11,.06);
        border-color: rgba(245,158,11,.2);
        color: #fde68a;
    }

    .reg-cat-chip.cat3 {
        background: rgba(239,68,68,.06);
        border-color: rgba(239,68,68,.2);
        color: #fecaca;
    }

    .reg-cat-chip.cat4 {
        background: rgba(139,92,246,.06);
        border-color: rgba(139,92,246,.2);
        color: #ddd6fe;
    }

.reg-settings-list {
    margin-top: 8px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
}

/* #approvedTab handled by master tab rule above */

#apToolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

    #apToolbar input[type=text] {
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 5px 10px;
        border-radius: 6px;
        font-family: 'DM Mono', monospace;
        font-size: 12px;
        outline: none;
        width: 200px;
        transition: border-color .15s;
    }

        #apToolbar input[type=text]:focus {
            border-color: var(--accent);
        }

#apKpis {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.rv-kpi.cat1 .rv-kpi-val {
    color: var(--cat1);
}

#apTableWrap {
    flex: 1;
    overflow: auto;
}

#apTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    #apTable thead th {
        background: var(--surface2);
        color: var(--muted);
        padding: 8px 12px;
        text-align: left;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .1em;
        position: sticky;
        top: 0;
        white-space: nowrap;
        border-bottom: 1px solid var(--border);
        z-index: 10;
    }

    #apTable tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background .1s;
    }

        #apTable tbody tr:hover {
            background: rgba(79,142,247,.04);
        }

    #apTable td {
        padding: 9px 12px;
        vertical-align: middle;
    }

.ap-doc-num {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    min-width: 180px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-doc-desc {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    min-width: 100px;
}

.ap-disc-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    background: rgba(79,142,247,.1);
    color: #93c5fd;
    border: 1px solid rgba(79,142,247,.2);
    white-space: nowrap;
}

.ap-acc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 11px;
    text-decoration: none;
    font-weight: 500;
    padding: 2px 7px;
    border: 1px solid rgba(79,142,247,.25);
    border-radius: 4px;
    background: rgba(79,142,247,.07);
    transition: background .12s;
}

    .ap-acc-link:hover {
        background: rgba(79,142,247,.16);
    }

.ap-ver-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    background: rgba(0,212,180,.1);
    color: var(--teal);
    border-radius: 3px;
    border: 1px solid rgba(0,212,180,.2);
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Zoho Sign button ────────────────────────────────────────────────────── */
/* ── Zoho signing status badge (non-signers) ─────────────────────────────── */
.zoho-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: .03em;
    cursor: help;
}

.zoho-status-pending {
    background: rgba(124,58,237,.12);
    border: 1px solid rgba(124,58,237,.3);
    color: #a78bfa;
}

.zoho-status-complete {
    background: rgba(22,163,74,.12);
    border: 1px solid rgba(22,163,74,.3);
    color: #86efac;
}

.btn-zoho-sign {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
    color: #fbbf24;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 11px;
    font-family: 'DM Mono', monospace;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}

    .btn-zoho-sign:hover {
        background: rgba(245,158,11,.2);
        border-color: rgba(245,158,11,.5);
        color: #fde68a;
    }

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Signing Queue Section (Approved Tab)                                 ── */
/* ══════════════════════════════════════════════════════════════════════════ */

#signingQueueSection {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

.sq-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 10px;
    border-bottom: 1px solid rgba(79,142,247,.12);
    flex-wrap: wrap;
}

.sq-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text);
}

.sq-section-sub {
    font-size: 10px;
    color: var(--muted);
}

.sq-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

#signingQueue {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 380px;
    overflow-y: auto;
    padding: 10px 16px;
}

.sq-loading {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sq-empty {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

/* ── Queue item card ──────────────────────────────────────────────────────── */
.sq-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--surface2);
    transition: border-color .15s, box-shadow .15s;
}

    .sq-item:last-child {
        margin-bottom: 0;
    }

.sq-item-mine {
    border-color: rgba(245,158,11,.4);
    background: rgba(245,158,11,.04);
    box-shadow: 0 0 0 1px rgba(245,158,11,.12);
}

.sq-item-complete {
    border-color: rgba(34,197,94,.3);
    background: rgba(34,197,94,.03);
}

.sq-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sq-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sq-doc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.sq-doc-list-item {
    font-size: 10px;
    color: var(--text);
    padding: 2px 0;
    letter-spacing: .02em;
}

.sq-multi-badge {
    background: rgba(0,212,180,.12);
    border: 1px solid rgba(0,212,180,.3);
    color: var(--teal);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 600;
}

.sq-doc-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .02em;
}

.sq-review-label {
    font-size: 10px;
    color: var(--muted);
}

.sq-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sq-role-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
}

.sq-role-reviewer {
    background: rgba(79,142,247,.12);
    color: #93c5fd;
    border: 1px solid rgba(79,142,247,.25);
}

.sq-role-approver {
    background: rgba(0,212,180,.1);
    color: var(--teal);
    border: 1px solid rgba(0,212,180,.25);
}

.sq-dispatched-date {
    font-size: 10px;
    color: var(--muted);
}

/* ── Signers chain ───────────────────────────────────────────────────────── */
.sq-signers-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.sq-signer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 9px;
    font-size: 10px;
    color: var(--muted);
}

.sq-signer-me {
    border-color: rgba(245,158,11,.5);
    color: #fbbf24;
    background: rgba(245,158,11,.07);
}

.sq-signer-done {
    border-color: rgba(34,197,94,.4);
    color: #86efac;
    background: rgba(34,197,94,.06);
}

.sq-signer-icon {
    font-size: 11px;
}

.sq-signer-name em {
    font-style: normal;
    font-size: 9px;
    opacity: .75;
}

.sq-signer-role {
    font-size: 9px;
    opacity: .65;
    margin-left: 2px;
}

.sq-chain-sep {
    color: var(--muted);
    font-size: 12px;
    padding: 0 2px;
}

.sq-chain-sep-seq {
    color: var(--accent);
    font-weight: 700;
}

/* ── Item footer ─────────────────────────────────────────────────────────── */
.sq-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.sq-status-area, .sq-action-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sq-status {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sq-status-pending {
    color: #fbbf24;
}

.sq-status-signed {
    color: #86efac;
}

.sq-status-complete {
    color: #4ade80;
}

.sq-status-waiting {
    color: var(--muted);
}

.sq-status-watching {
    color: var(--muted);
    font-weight: 400;
}

.sq-waiting-note {
    font-size: 10px;
    color: var(--muted);
    font-style: italic;
}

/* ── Sign Now button ─────────────────────────────────────────────────────── */
.btn-sign-now {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245,158,11,.15);
    border: 1px solid rgba(245,158,11,.45);
    color: #fbbf24;
    padding: 6px 14px;
    border-radius: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    letter-spacing: .04em;
    white-space: nowrap;
}

    .btn-sign-now:hover {
        background: rgba(245,158,11,.28);
        border-color: rgba(245,158,11,.7);
        color: #fde68a;
    }

    .btn-sign-now:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-download-signed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.3);
    color: #86efac;
    padding: 5px 12px;
    border-radius: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
    white-space: nowrap;
}

    .btn-download-signed:hover {
        background: rgba(34,197,94,.2);
    }

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Zoho Sign Iframe Modal                                               ── */
/* ══════════════════════════════════════════════════════════════════════════ */

.sign-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.sign-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
}

.sign-modal-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1080px;
    margin: auto;
    height: calc(100vh - 40px);
    max-height: 900px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.6);
}

.sign-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sign-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .02em;
}

.sign-modal-close {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 14px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s;
}

    .sign-modal-close:hover {
        background: rgba(255,255,255,.08);
        color: var(--text);
    }

.sign-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sign-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface2);
}

/* ── Notification sign CTA button ───────────────────────────────────────── */
.notif-sign-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.3);
    color: #fbbf24;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .1s;
    white-space: nowrap;
}

    .notif-sign-cta:hover {
        background: rgba(245,158,11,.22);
    }

/* ── Error toast for signing errors ─────────────────────────────────────── */
.sq-error-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9500;
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.4);
    color: #fca5a5;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    max-width: 360px;
    transform: translateY(24px);
    opacity: 0;
    transition: transform .25s, opacity .25s;
}

.sq-error-toast-show {
    transform: translateY(0);
    opacity: 1;
}

/* ── Light theme overrides ───────────────────────────────────────────────── */
body[data-theme="light"] .sq-item {
    background: #f8fafd;
}

body[data-theme="light"] .sq-item-mine {
    background: #fffbeb;
}

body[data-theme="light"] .sq-signer {
    background: #f0f4f8;
}

body[data-theme="light"] .sign-modal-content {
    background: #fff;
}

/* ── Company filter in reviews toolbar ──────────────────────────────────── */
#rvFilterCompany {
    font-size: 11px;
    min-width: 120px;
}

/* ── Sidebar — collapse project info, show nav-only ─────────────────────── */
#activeProjectPanel {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Users table — 5-col variant ─────────────────────────────────────────── */
#usersTable thead th {
    padding: 8px 12px;
    text-align: left;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

#usersTable td {
    padding: 9px 12px;
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
}


/* ══════════════════════════════════════════════════════════════════════════
   v4.1 — KPI strip cleanup & Approved Drawings dashboard format
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reviews & Users: no KPI strip, toolbar only ────────────────────────── */
#rvKpis {
    display: none !important;
}
/* hidden — counts shown in toolbar badge */

/* ── Go to ACC — matches btn-ghost exactly, no custom colour override ────── */
.btn-go-acc {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-family: 'DM Mono', monospace !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: border-color .15s, color .15s !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

    .btn-go-acc:hover {
        border-color: var(--accent) !important;
        color: var(--accent) !important;
        background: transparent !important;
    }

/* ── Approved Drawings — dashboard-style KPI strip ──────────────────────── */
#apKpiStrip {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

    #apKpiStrip .kpi-card {
        min-width: 120px;
        flex: 1;
    }

        #apKpiStrip .kpi-card.open::before {
            background: var(--cat1);
        }

        #apKpiStrip .kpi-card.open .kpi-val {
            color: var(--cat1);
        }

        #apKpiStrip .kpi-card.pend::before {
            background: var(--cat2);
        }

        #apKpiStrip .kpi-card.pend .kpi-val {
            color: var(--cat2);
        }

/* Remove old apKpis styles */
#apKpis {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   v4.2 — Settings permissions table (matches Users tab style)
   ══════════════════════════════════════════════════════════════════════════ */

/* Shared permission table cells */
.sp-th {
    padding: 8px 14px;
    text-align: left;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

.sp-td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
}

.sp-row {
    transition: background .1s;
}

    .sp-row:hover {
        background: rgba(79,142,247,.04);
    }

/* Tighten the role dropdown inside table */
.sp-td .perm-role-select {
    min-width: 140px;
}

/* Settings toolbar — remove old legend styles that conflict */
.settings-legend {
    display: none !important;
}

.settings-table-header {
    display: none !important;
}

.settings-row {
    display: none !important;
}


/* ── Reviews KPI Row ─────────────────────────────────────────────────── */
#rvKpiRow {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    padding: 14px 16px 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

    #rvKpiRow .kpi-card {
        flex: 1 1 150px !important;
        min-width: 130px !important;
        max-width: 220px !important;
        width: auto !important;
        cursor: default;
    }


/* ══════════════════════════════════════════════════════════════════════════════
   SETTINGS SIDEBAR SUB-NAV
   ══════════════════════════════════════════════════════════════════════════════ */
#settingsSubNav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.act-nav-sub {
    padding: 7px 10px 7px 28px !important;
    font-size: 12px !important;
    color: var(--muted);
    border-left: 2px solid transparent !important;
    border-radius: 0 6px 6px 0 !important;
    margin-left: 4px;
    letter-spacing: 0;
}

    .act-nav-sub:hover {
        border-left-color: var(--border) !important;
        color: var(--text) !important;
    }

    .act-nav-sub.active {
        background: rgba(79,142,247,.1) !important;
        color: var(--accent) !important;
        border-left-color: var(--accent) !important;
    }



/* ══════════════════════════════════════════════════════════════════════════
   FOLDER SCOPE  —  hardcoded values only, no CSS var dependencies
   Font: Inter (loaded in <head>)  |  ACC blue: #0696d7  |  Gold: #ffcd45
   ══════════════════════════════════════════════════════════════════════════ */

/* Scope pane: full-height flex column */
#settingsScopePane {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.sc-toolbar {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface);
    min-height: 48px;
}

.sc-toolbar-title {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.sc-toolbar-desc {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    color: var(--muted);
    flex: 1;
    line-height: 1.5;
}

/* Toggle */
.ac-toggle-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.ac-toggle-label {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    min-width: 74px;
}

    .ac-toggle-label.on {
        color: #0696d7;
    }

.ac-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    background: rgba(100,116,139,.2);
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

    .ac-toggle:hover {
        border-color: var(--muted);
    }

    .ac-toggle.on {
        background: #0696d7;
        border-color: #0696d7;
    }

.ac-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left .18s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.ac-toggle.on .ac-toggle-knob {
    left: 21px;
}

/* Save button */
.ac-btn-primary {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: #0696d7;
    color: #fff;
    border: none;
    padding: 0 20px;
    height: 32px;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .14s;
    letter-spacing: 0;
}

    .ac-btn-primary:hover {
        background: #0580ba;
    }

    .ac-btn-primary:disabled {
        background: rgba(6,150,215,.35);
        cursor: default;
    }

/* ── Body: side-by-side panels ──────────────────────────────────────────── */
#scopeBody {
    display: flex !important;
    flex: 1 !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* ══ LEFT: Folder Tree ══════════════════════════════════════════════════════ */
#scopeTreeWrap {
    width: 400px !important;
    min-width: 280px;
    max-width: 480px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--surface);
}

.sc-panel-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 9px;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface2);
}

#scopeTree {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    padding: 6px 0 12px;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* ── Folder rows ──────────────────────────────────────────────────────────── */
.sf-node {
}

.sf-row {
    display: flex;
    align-items: center;
    height: 36px;
    min-width: max-content;
    padding-right: 18px;
    cursor: pointer;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 14px; /* larger as requested */
    color: var(--text);
    user-select: none;
    white-space: nowrap;
    transition: background .08s;
    border-radius: 0;
}

    .sf-row:hover {
        background: rgba(79,142,247,.06);
    }

/* Chevron — rotates on expand */
.sf-chev {
    width: 22px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--muted);
    font-size: 10px;
    transition: transform .15s ease;
    cursor: pointer;
    font-style: normal;
}

    .sf-chev.open {
        transform: rotate(90deg);
    }

    .sf-chev.leaf {
        visibility: hidden;
    }

/* Checkbox — prominent, visible square */
.sf-cb {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid var(--border);
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    transition: background .12s, border-color .12s;
    position: relative;
}
    /* Checkmark via SVG-like CSS */
    .sf-cb::after {
        content: '';
        display: block;
        width: 5px;
        height: 9px;
        border: 2px solid transparent;
        border-top: none;
        border-left: none;
        transform: rotate(45deg) translate(-1px, -1px);
        transition: border-color .12s;
    }

    .sf-cb.checked {
        background: #0696d7;
        border-color: #0696d7;
    }

        .sf-cb.checked::after {
            border-color: #fff;
        }

/* Folder icon — tabbed folder shape */
.sf-ico {
    width: 20px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 9px;
    position: relative;
}

    .sf-ico::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 12px;
        background: #ffcd45;
        border-radius: 0 1px 1px 1px;
    }

    .sf-ico::after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 10px;
        height: 5px;
        background: #ffcd45;
        border-radius: 2px 4px 0 0;
    }

/* Folder name */
.sf-name {
    flex: 1;
    font-size: 14px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Children */
.sf-children {
}

    .sf-children.hidden {
        display: none;
    }

/* ══ RIGHT: Selected folders table ══════════════════════════════════════════ */
#scopeSelectedWrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--surface2);
    min-width: 0;
}

#scopeSelectedList {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* Table */
.sst {
    width: 100%;
    border-collapse: collapse;
    min-width: 440px;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
}

    .sst thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 0 14px;
        height: 36px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .sst tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background .08s;
        cursor: grab;
    }

        .sst tbody tr:hover {
            background: rgba(79,142,247,.05);
        }

        .sst tbody tr.drag-over {
            background: rgba(6,150,215,.1);
            outline: 1px solid #0696d7;
        }

        .sst tbody tr:last-child {
            border-bottom: none;
        }

    .sst td {
        padding: 6px 14px;
        color: var(--text);
        vertical-align: middle;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
    }

/* Priority badge */
.sst-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(6,150,215,.1);
    border: 1px solid rgba(6,150,215,.35);
    color: #0696d7;
    font-size: 11px;
    font-weight: 700;
}

/* Folder name + path */
.sst-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sst-fn {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

.sst-fp {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

/* Sub-folder checkbox */
.sst-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #7a8a9a;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

    .sst-sub input[type=checkbox] {
        accent-color: #0696d7;
        cursor: pointer;
        width: 14px;
        height: 14px;
    }

/* Drag handle */
.sst-drag-handle {
    color: #444;
    font-size: 18px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    transition: color .1s;
}

    .sst-drag-handle:hover {
        color: #aaa;
    }

/* Remove button */
.sst-rm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .sst-rm:hover {
        background: rgba(239,68,68,.15);
        color: #ef4444;
    }

/* Empty state */
.sc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 160px;
    gap: 12px;
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: var(--muted);
    text-align: center;
}

.sc-empty-ico {
    position: relative;
    width: 48px;
    height: 42px;
    opacity: .4;
    flex-shrink: 0;
}

    .sc-empty-ico::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 28px;
        background: #ffcd45;
        border-radius: 2px;
    }

    .sc-empty-ico::after {
        content: '';
        position: absolute;
        bottom: 26px;
        left: 0;
        width: 20px;
        height: 7px;
        background: #ffcd45;
        border-radius: 2px 5px 0 0;
    }

.sc-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.sc-empty-sub {
    font-size: 13px;
    max-width: 230px;
    line-height: 1.6;
}

/* Thin scrollbars */
#scopeTree::-webkit-scrollbar,
#scopeSelectedList::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#scopeTree::-webkit-scrollbar-track,
#scopeSelectedList::-webkit-scrollbar-track {
    background: transparent;
}

#scopeTree::-webkit-scrollbar-thumb,
#scopeSelectedList::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,.25);
    border-radius: 3px;
}

    #scopeTree::-webkit-scrollbar-thumb:hover,
    #scopeSelectedList::-webkit-scrollbar-thumb:hover {
        background: rgba(100,116,139,.45);
    }

/* Settings sidebar sub-nav */
#settingsSubNav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.act-nav-sub {
    padding: 7px 10px 7px 28px !important;
    font-size: 12px !important;
    color: var(--muted);
    border-left: 2px solid transparent !important;
    border-radius: 0 6px 6px 0 !important;
    margin-left: 4px;
}

    .act-nav-sub:hover {
        border-left-color: rgba(79,142,247,.4) !important;
        color: var(--text) !important;
    }

    .act-nav-sub.active {
        background: rgba(79,142,247,.1) !important;
        color: #4a8ef7 !important;
        border-left-color: #4a8ef7 !important;
    }

#btnSync:disabled, #btnRefresh:disabled {
    cursor: not-allowed;
    opacity: .6;
}


/* ── Register Config — ACC-style Parameter Editor ────────────────────────── */

/* Pane toolbar */
.rcp-pane-toolbar {
    padding: 14px 24px 13px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.rcp-pane-toolbar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .02em;
}

.rcp-pane-toolbar-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.5;
}

/* Layout */
.rcp-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Left nav */
.rcp-left {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.rcp-left-hdr {
    padding: 12px 18px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.rcp-group-list {
    flex: 1;
    overflow-y: auto;
}

.rcp-group-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background .13s;
    border-left: 3px solid transparent;
}

    .rcp-group-row:hover {
        background: rgba(79,142,247,.05);
    }

    .rcp-group-row.active {
        background: rgba(6,150,215,.08);
        border-left-color: #0696d7;
        padding-left: 15px;
    }

.rcp-group-icon {
    color: var(--muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.rcp-group-row.active .rcp-group-icon {
    color: #0696d7;
}

.rcp-group-info {
    flex: 1;
    min-width: 0;
}

.rcp-group-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.rcp-group-row.active .rcp-group-name {
    color: var(--accent);
}

.rcp-group-count {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.rcp-group-chev {
    font-size: 15px;
    color: var(--muted);
    flex-shrink: 0;
}

.rcp-group-row.active .rcp-group-chev {
    color: rgba(6,150,215,.7);
}

/* Right detail */
.rcp-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rcp-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.rcp-detail-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.rcp-detail-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.rcp-detail-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.rcp-detail-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

/* Add button — ACC blue */
.rcp-add-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0696d7;
    border: none;
    color: #fff;
    border-radius: 2px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: Inter, sans-serif;
    flex-shrink: 0;
    transition: background .13s;
}

    .rcp-add-btn-primary:hover {
        background: #0581be;
    }

    .rcp-add-btn-primary:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

/* Table */
.rcp-table-wrap {
    flex: 1;
    overflow-y: auto;
}

.rcp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .rcp-table thead tr {
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
    }

    .rcp-table th {
        padding: 9px 24px;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .rcp-table td {
        padding: 13px 24px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        vertical-align: middle;
        white-space: normal;
        word-break: break-word;
    }

    .rcp-table tbody tr:hover {
        background: rgba(79,142,247,.04);
    }

    .rcp-table .rcp-td-actions {
        text-align: right;
        width: 80px;
        padding: 0 12px 0 0;
        white-space: nowrap;
    }

/* Short badge */
.rcp-short-badge {
    display: inline-block;
    background: rgba(6,150,215,.13);
    border: 1px solid rgba(6,150,215,.28);
    color: #60b8e6;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
}

/* Row action buttons */
.rcp-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    opacity: 0;
    transition: opacity .15s;
}

/* Show actions on row hover */
.rcp-table tbody tr:hover .rcp-row-actions {
    opacity: 1;
}

.rcp-btn-action {
    background: none;
    border: 1px solid transparent;
    color: var(--muted);
    border-radius: 5px;
    padding: 4px 7px;
    font-size: 11px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: all .12s;
    white-space: nowrap;
    line-height: 1;
}

    .rcp-btn-action:hover {
        border-color: var(--border);
        background: rgba(79,142,247,.08);
        color: var(--accent);
    }

    .rcp-btn-action.del:hover {
        border-color: rgba(248,113,113,.3);
        color: #f87171;
        background: rgba(248,113,113,.07);
    }

/* Empty state */
.rcp-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

/* Modal overlay */
.rcp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rcp-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 440px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 24px 64px rgba(0,0,0,.7);
    animation: rcpModalIn .15s ease-out;
}

@keyframes rcpModalIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rcp-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 15px;
    border-bottom: 1px solid var(--border);
}

.rcp-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.rcp-modal-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    transition: color .12s;
}

    .rcp-modal-close:hover {
        color: var(--text);
        background: rgba(100,116,139,.12);
    }

.rcp-modal-body {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rcp-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rcp-modal-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

    .rcp-modal-label .req {
        color: #f87171;
    }

.rcp-modal-input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: Inter, sans-serif;
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

    .rcp-modal-input:focus {
        border-color: #0696d7;
        box-shadow: 0 0 0 2px rgba(6,150,215,.15);
    }

    .rcp-modal-input::placeholder {
        color: var(--muted);
    }

.rcp-modal-hint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
}

.rcp-modal-error {
    font-size: 12px;
    color: #f87171;
    padding: 8px 12px;
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.2);
    border-radius: 3px;
    display: none;
}

    .rcp-modal-error.visible {
        display: block;
    }

.rcp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
}

.rcp-modal-cancel {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 2px;
    padding: 7px 18px;
    font-size: 13px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: all .12s;
}

    .rcp-modal-cancel:hover {
        border-color: var(--text);
        color: var(--text);
    }

.rcp-modal-save {
    background: #0696d7;
    border: none;
    color: #fff;
    border-radius: 2px;
    padding: 7px 22px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: background .12s;
}

    .rcp-modal-save:hover {
        background: #0581be;
    }

    .rcp-modal-save:disabled {
        opacity: .5;
        cursor: not-allowed;
    }


/* ── RCP additions: multi-select, nav divider, breakdown rows ─────────────── */

/* Section divider in left nav */
.rcp-group-divider {
    padding: 14px 18px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* Detail header button cluster */
.rcp-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Secondary "Add Multiple" button */
.rcp-add-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 2px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: all .13s;
}

    .rcp-add-btn-secondary:hover {
        border-color: var(--text);
        color: var(--text);
    }

/* Multi-select action bar */
.rcp-selection-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    background: rgba(6,150,215,.1);
    border-bottom: 1px solid rgba(6,150,215,.2);
    font-size: 12px;
    color: #7dd3fc;
    flex-shrink: 0;
}

.rcp-sel-del-btn {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.25);
    color: #fca5a5;
    border-radius: 2px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: all .12s;
}

    .rcp-sel-del-btn:hover {
        background: rgba(239,68,68,.2);
        border-color: rgba(239,68,68,.4);
    }

.rcp-sel-cancel-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    font-family: Inter, sans-serif;
}

    .rcp-sel-cancel-btn:hover {
        color: var(--text);
    }

/* Selected row highlight */
.rcp-row-selected {
    background: rgba(6,150,215,.06) !important;
}

    .rcp-row-selected td {
        border-bottom-color: rgba(6,150,215,.12);
    }

/* Breakdown level rows inside panel */
.rcp-bd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

    .rcp-bd-row input[type=checkbox] {
        flex-shrink: 0;
        accent-color: #0696d7;
    }

/* CAT table wider description col */
.rcp-table td:last-child {
    color: var(--muted);
    font-size: 12px;
}

/* Textarea in modal */
.rcp-modal-input[rows] {
    min-height: 140px;
}


/* ── Multi-add table UI ──────────────────────────────────────────────────── */
.rcp-multi-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rcp-multi-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 7px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.rcp-multi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}

    .rcp-multi-row:last-child {
        border-bottom: none;
    }

.rcp-multi-input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 7px 10px;
    color: var(--text);
    font-size: 13px;
    font-family: Inter, sans-serif;
    outline: none;
    transition: border-color .15s;
}

    .rcp-multi-input:focus {
        border-color: #0696d7;
    }

    .rcp-multi-input::placeholder {
        color: var(--muted);
        font-size: 12px;
    }

.rcp-multi-full {
    flex: 1;
}

.rcp-multi-short {
    width: 110px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.rcp-multi-rm {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .12s;
}

    .rcp-multi-rm:hover {
        color: #f87171;
        background: rgba(248,113,113,.08);
    }

.rcp-multi-add-row {
    margin-top: 8px;
    align-self: flex-start;
    background: none;
    border: 1px dashed var(--border);
    color: var(--muted);
    border-radius: 2px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    width: 100%;
    transition: all .12s;
    text-align: center;
}

    .rcp-multi-add-row:hover {
        border-color: rgba(6,150,215,.4);
        color: #60b8e6;
    }

/* Wider modal for multi-add */
.rcp-modal:has(#rcpMultiRows) {
    width: 520px;
}

/* ── Add Custom Parameter button ─────────────────────────────────────── */
.rcp-add-custom-param-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: calc(100% - 24px);
    margin: 8px 12px 4px;
    background: none;
    border: 1px dashed rgba(6,150,215,.3);
    color: rgba(6,150,215,.7);
    border-radius: 2px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: all .13s;
    justify-content: center;
}

    .rcp-add-custom-param-btn:hover {
        border-color: #0696d7;
        color: #0696d7;
        background: rgba(6,150,215,.06);
    }

/* Reorder and delete buttons on custom param rows */
.rcp-custom-order-btns {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.rcp-order-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
    padding: 1px 3px;
    line-height: 1;
    border-radius: 2px;
    transition: all .12s;
}

    .rcp-order-btn:hover:not(:disabled) {
        color: var(--accent);
        background: rgba(79,142,247,.08);
    }

    .rcp-order-btn:disabled {
        opacity: .2;
        cursor: default;
    }

.rcp-custom-del-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
    line-height: 1;
    border-radius: 2px;
    transition: all .12s;
}

    .rcp-custom-del-btn:hover {
        color: #f87171;
        background: rgba(248,113,113,.08);
    }

/* ── ACC Upload drop zones ───────────────────────────────────────────────── */
.acc-drop-zone {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--surface2);
}

    .acc-drop-zone:hover, .acc-drop-zone.drag-over {
        border-color: var(--accent);
        background: rgba(79,142,247,.06);
    }

    .acc-drop-zone.file-ok {
        border-color: #22c55e;
        background: rgba(34,197,94,.06);
    }

    .acc-drop-zone.file-err {
        border-color: var(--cat3);
        background: rgba(239,68,68,.06);
    }

.acc-valid-ok {
    color: #22c55e;
    font-weight: 600;
}

.acc-valid-err {
    color: var(--cat3);
    font-weight: 600;
}

/* ── Upload modal: per-file rows ──────────────────────────────────────────
   Each row in the multi-file list shows: kind badge (CAD / PDF) · filename ·
   match status · remove button. Visual state tracks whether the file is
   ready to upload (green tinge) or not (red tinge). */
.acc-fl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}

.acc-fl-row:last-child {
    border-bottom: none;
}

.acc-fl-row.acc-fl-ok {
    background: rgba(34,197,94,.04);
}

.acc-fl-row.acc-fl-err {
    background: rgba(239,68,68,.06);
}

.acc-fl-kind {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: .04em;
    flex-shrink: 0;
    min-width: 32px;
    text-align: center;
}

.acc-fl-kind-cad {
    background: rgba(0,212,180,.18);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,.4);
}

.acc-fl-kind-pdf {
    background: rgba(79,142,247,.18);
    color: var(--accent);
    border: 1px solid rgba(79,142,247,.4);
}

.acc-fl-kind-unk {
    background: rgba(148,163,184,.15);
    color: var(--muted);
    border: 1px solid var(--border);
}

.acc-fl-file {
    flex: 1;
    min-width: 0;
}

.acc-fl-name {
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acc-fl-meta {
    color: var(--muted);
    font-size: 10px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acc-fl-row.acc-fl-err .acc-fl-meta {
    color: var(--cat3);
}

.acc-fl-status {
    font-size: 14px;
    font-weight: 700;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.acc-fl-row.acc-fl-ok .acc-fl-status {
    color: #22c55e;
}

.acc-fl-row.acc-fl-err .acc-fl-status {
    color: var(--cat3);
}

.acc-fl-rm {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .1s, background .1s;
    flex-shrink: 0;
}

.acc-fl-rm:hover {
    color: var(--cat3);
    background: rgba(239,68,68,.1);
}


/* ── Register Config: breakdown level row inputs ─────────────────────────── */
.rcp-bd-input,
.rcp-bd-select {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 5px 8px;
    color: var(--text);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color .15s;
}

.rcp-bd-input {
    width: 110px;
}

    .rcp-bd-input:focus,
    .rcp-bd-select:focus {
        border-color: var(--accent);
    }

    .rcp-bd-input::placeholder {
        color: var(--muted);
    }


/* ══════════════════════════════════════════════════════════════════════════════
   REVIEW WORKFLOW SETTINGS PANE  (table layout + modal)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ────────────────────────────────────────────────────────────────── */
.wf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    gap: 12px;
}

.wf-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wf-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-toolbar-title {
    font-family: 'Syne',sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}

.wf-toolbar-desc {
    font-size: 11px;
    color: var(--muted);
}

/* ── Status bar ─────────────────────────────────────────────────────────────── */
.wf-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

    .wf-status-bar.ok {
        color: var(--cat1);
        border-left: 3px solid var(--cat1);
    }

    .wf-status-bar.err {
        color: var(--cat3);
        border-left: 3px solid var(--cat3);
    }

    .wf-status-bar.info {
        color: var(--accent);
        border-left: 3px solid var(--accent);
    }

.wf-status-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
}

/* ── Read-only banner ───────────────────────────────────────────────────────── */
.wf-readonly-banner {
    padding: 7px 20px;
    background: rgba(245,158,11,.08);
    border-bottom: 1px solid rgba(245,158,11,.2);
    font-size: 11px;
    color: var(--cat2);
    flex-shrink: 0;
}

/* ── KPI strip ──────────────────────────────────────────────────────────────── */
.wf-kpi-strip {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.wf-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 11px 24px;
    gap: 2px;
    border-right: 1px solid var(--border);
}

    .wf-kpi:last-child {
        border-right: none;
    }

.wf-kpi-val {
    font-family: 'Syne',sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

    .wf-kpi-val.accent {
        color: var(--accent);
    }

    .wf-kpi-val.teal {
        color: var(--teal);
    }

    .wf-kpi-val.muted {
        color: var(--muted);
    }

.wf-kpi-lbl {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Loading / empty ────────────────────────────────────────────────────────── */
.wf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 1;
    color: var(--muted);
    font-size: 12px;
}

.wf-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    animation: wf-spin .7s linear infinite;
}

@keyframes wf-spin {
    to {
        transform: rotate(360deg);
    }
}

.wf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    color: var(--muted);
}

.wf-empty-icon {
    font-size: 40px;
    opacity: .3;
}

.wf-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.wf-empty-sub {
    font-size: 12px;
    text-align: center;
    max-width: 320px;
}

/* ── Main table container ───────────────────────────────────────────────────── */
.wf-table-outer {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.wf-table-scroll {
    flex: 1;
    overflow: auto;
}

    .wf-table-scroll::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .wf-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(100,116,139,.25);
        border-radius: 3px;
    }

/* ── Main table ─────────────────────────────────────────────────────────────── */
.wf-main-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

.wf-th {
    background: var(--surface2);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
}

.wf-th-num {
    width: 46px;
    text-align: center;
}

.wf-th-c {
    width: 60px;
    text-align: center;
}

.wf-th-act {
    width: 90px;
    text-align: center;
}

.wf-td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.wf-td-num {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

.wf-td-c {
    text-align: center;
    font-weight: 600;
}

.wf-td-act {
    text-align: center;
}

.wf-td-muted {
    color: var(--muted);
    font-style: italic;
}

.wf-row:hover td {
    background: rgba(79,142,247,.03);
}

.wf-row:last-child td {
    border-bottom: none;
}

/* ── Cell components ────────────────────────────────────────────────────────── */
.wf-name-text {
    font-weight: 600;
    color: var(--text);
}

.wf-type-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    vertical-align: middle;
}

.wf-step-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 90px;
}

.wf-step-cands {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.wf-tat-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wf-tat-total {
    font-weight: 700;
    color: var(--text);
}

.wf-tat-breakdown {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
}

.wf-folder-set {
    color: var(--teal);
    font-weight: 500;
}

/* ── Step type chips ────────────────────────────────────────────────────────── */
.wf-step-type-chip {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}

    .wf-step-type-chip.initiator {
        background: rgba(100,116,139,.12);
        border: 1px solid rgba(100,116,139,.25);
        color: var(--muted);
    }

    .wf-step-type-chip.review {
        background: rgba(79,142,247,.1);
        border: 1px solid rgba(79,142,247,.25);
        color: var(--accent);
    }

    .wf-step-type-chip.approval {
        background: rgba(34,197,94,.1);
        border: 1px solid rgba(34,197,94,.25);
        color: var(--cat1);
    }

    .wf-step-type-chip.comment {
        background: rgba(245,158,11,.1);
        border: 1px solid rgba(245,158,11,.25);
        color: var(--cat2);
    }

    .wf-step-type-chip.void {
        background: rgba(239,68,68,.1);
        border: 1px solid rgba(239,68,68,.25);
        color: var(--cat3);
    }

    .wf-step-type-chip.pending {
        background: rgba(245,158,11,.1);
        border: 1px solid rgba(245,158,11,.25);
        color: var(--cat2);
    }

/* ── Status chips ───────────────────────────────────────────────────────────── */
.wf-status-chip {
    display: inline-block;
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .04em;
}

    .wf-status-chip.active {
        background: rgba(34,197,94,.1);
        color: var(--cat1);
        border: 1px solid rgba(34,197,94,.25);
    }

    .wf-status-chip.inactive {
        background: rgba(100,116,139,.1);
        color: var(--muted);
        border: 1px solid var(--border);
    }

    .wf-status-chip.review {
        background: rgba(79,142,247,.1);
        color: var(--accent);
        border: 1px solid rgba(79,142,247,.25);
    }

    .wf-status-chip.pending {
        background: rgba(245,158,11,.1);
        color: var(--cat2);
        border: 1px solid rgba(245,158,11,.25);
    }

    .wf-status-chip.void {
        background: rgba(239,68,68,.1);
        color: var(--cat3);
        border: 1px solid rgba(239,68,68,.25);
    }

/* ── Edit button ────────────────────────────────────────────────────────────── */
.wf-btn-edit {
    padding: 4px 12px;
    background: rgba(79,142,247,.1);
    border: 1px solid rgba(79,142,247,.3);
    color: var(--accent);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s,border-color .12s;
}

    .wf-btn-edit:hover {
        background: rgba(79,142,247,.2);
        border-color: var(--accent);
    }

/* ── Step number badge ──────────────────────────────────────────────────────── */
.wf-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(79,142,247,.12);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDIT MODAL
   ══════════════════════════════════════════════════════════════════════════════ */
.wf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wf-modal {
    background: var(--surface);
    border-radius: 12px;
    width: min(860px,100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

/* Modal header */
.wf-modal-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.wf-modal-title {
    font-family: 'Syne',sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}

.wf-modal-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

.wf-modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .12s,background .12s;
}

    .wf-modal-close:hover {
        color: var(--text);
        background: var(--surface2);
    }

/* Top fields row */
.wf-modal-fields {
    display: flex;
    gap: 16px;
    padding: 16px 22px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.wf-field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wf-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.wf-field-input {
    min-width: 260px;
    padding: 7px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

    .wf-field-input:focus {
        border-color: var(--accent);
    }

.wf-field-select {
    padding: 7px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    outline: none;
    cursor: pointer;
}

    .wf-field-select:focus {
        border-color: var(--accent);
    }

/* Section title */
.wf-modal-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 10px 22px 6px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
}

/* Steps table in modal */
.wf-modal-table-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 22px;
}

    .wf-modal-table-wrap::-webkit-scrollbar {
        width: 4px;
    }

    .wf-modal-table-wrap::-webkit-scrollbar-thumb {
        background: rgba(100,116,139,.25);
        border-radius: 3px;
    }

.wf-steps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .wf-steps-table thead th {
        background: var(--surface2);
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: 8px 12px;
        text-align: left;
        border-bottom: 2px solid var(--border);
        position: sticky;
        top: 0;
    }

    .wf-steps-table tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background .1s;
    }

        .wf-steps-table tbody tr:last-child {
            border-bottom: none;
        }

        .wf-steps-table tbody tr:hover {
            background: rgba(79,142,247,.03);
        }

    .wf-steps-table td {
        padding: 9px 12px;
        vertical-align: middle;
    }

/* Editable cells */
.wf-cell-edit {
    background: none;
    border: 1px solid transparent;
    color: var(--text);
    font-size: 12px;
    font-family: 'DM Mono',monospace;
    padding: 4px 7px;
    border-radius: 4px;
    width: 100%;
    transition: background .14s,border-color .14s;
    outline: none;
}

    .wf-cell-edit:hover {
        background: var(--surface2);
        border-color: var(--border);
    }

    .wf-cell-edit:focus {
        background: var(--surface);
        border-color: var(--accent);
    }

/* Reviewer chips */
.wf-reviewer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.wf-reviewer-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 3px 8px 3px 6px;
    border-radius: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
}

.wf-reviewer-rm {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    line-height: 1;
    transition: color .12s;
}

    .wf-reviewer-rm:hover {
        color: var(--cat3);
    }

.wf-reviewer-add {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    background: none;
    border: 1px dashed var(--border);
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s,color .15s;
}

    .wf-reviewer-add:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

/* Folder picker */
.wf-modal-folder-wrap {
    padding: 0 22px 12px;
    flex-shrink: 0;
}

.wf-folder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wf-folder-set {
    color: var(--teal);
    font-weight: 500;
    font-size: 12px;
}

.wf-btn-pick-folder {
    padding: 5px 13px;
    background: rgba(79,142,247,.08);
    border: 1px solid rgba(79,142,247,.25);
    color: var(--accent);
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: background .12s;
}

    .wf-btn-pick-folder:hover {
        background: rgba(79,142,247,.16);
    }

#wfFolderCurrent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* Modal footer */
.wf-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface2);
}

.wf-btn-save {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Mono',monospace;
    transition: opacity .15s;
}

    .wf-btn-save:hover {
        opacity: .85;
    }

    .wf-btn-save:disabled {
        opacity: .4;
        cursor: default;
    }

.wf-btn-discard {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'DM Mono',monospace;
    transition: border-color .15s,color .15s;
}

    .wf-btn-discard:hover {
        border-color: var(--text);
        color: var(--text);
    }

.wf-footer-status {
    font-size: 11px;
    color: var(--muted);
    margin-left: 4px;
}

    .wf-footer-status.ok {
        color: var(--cat1);
    }

    .wf-footer-status.err {
        color: var(--cat3);
    }

.wf-modal-acc-note {
    font-size: 11px;
    color: #e6a817;
    line-height: 1.4;
    flex: 1;
    padding: 4px 6px;
    background: rgba(230,168,23,.08);
    border-radius: 4px;
    border: 1px solid rgba(230,168,23,.25);
}

    .wf-modal-acc-note a {
        color: #e6a817;
        text-decoration: underline;
    }

/* ── Light theme overrides ──────────────────────────────────────────────────── */
body[data-theme="light"] .wf-toolbar {
    background: var(--surface);
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-toolbar-title {
    color: var(--text);
}

body[data-theme="light"] .wf-status-bar {
    background: var(--surface2);
}

body[data-theme="light"] .wf-kpi-strip {
    background: var(--surface);
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-kpi {
    border-right-color: var(--border);
}

body[data-theme="light"] .wf-th {
    background: var(--surface2);
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-td {
    border-bottom-color: var(--border);
    color: var(--text);
}

body[data-theme="light"] .wf-row:hover td {
    background: rgba(29,78,216,.03);
}

body[data-theme="light"] .wf-btn-edit {
    background: rgba(29,78,216,.08);
    border-color: rgba(29,78,216,.25);
    color: var(--accent);
}

    body[data-theme="light"] .wf-btn-edit:hover {
        background: rgba(29,78,216,.16);
    }

body[data-theme="light"] .wf-modal {
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
}

body[data-theme="light"] .wf-modal-hdr {
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-modal-title {
    color: var(--text);
}

body[data-theme="light"] .wf-modal-fields {
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-field-input,
body[data-theme="light"] .wf-field-select {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

body[data-theme="light"] .wf-modal-section-title {
    border-top-color: var(--border);
}

body[data-theme="light"] .wf-steps-table thead th {
    background: var(--surface2);
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-steps-table tbody tr {
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-cell-edit:hover {
    background: var(--surface2);
    border-color: var(--border);
}

body[data-theme="light"] .wf-cell-edit:focus {
    background: var(--bg);
    border-color: var(--accent);
}

body[data-theme="light"] .wf-reviewer-chip {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}

body[data-theme="light"] .wf-reviewer-add {
    border-color: var(--border);
    color: var(--muted);
}

body[data-theme="light"] .wf-modal-footer {
    background: var(--surface2);
    border-top-color: var(--border);
}

body[data-theme="light"] .wf-btn-discard {
    border-color: var(--border);
    color: var(--muted);
}

body[data-theme="light"] .wf-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(71,85,105,.25);
}


/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.wf-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.wf-filter-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}

.wf-filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wf-filter-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    flex-shrink: 0;
}

.wf-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 320px;
}

.wf-search-icon {
    position: absolute;
    left: 9px;
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
}

.wf-search-input {
    width: 100%;
    padding: 6px 28px 6px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

    .wf-search-input:focus {
        border-color: var(--accent);
    }

.wf-search-clear {
    position: absolute;
    right: 7px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    line-height: 1;
    transition: color .12s;
}

    .wf-search-clear:hover {
        color: var(--text);
    }

.wf-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.wf-fchip {
    padding: 4px 11px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    transition: background .12s,border-color .12s,color .12s;
}

    .wf-fchip:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .wf-fchip.active {
        background: rgba(79,142,247,.12);
        border-color: rgba(79,142,247,.4);
        color: var(--accent);
    }

/* ── New Workflow button ─────────────────────────────────────────────────────── */
.wf-btn-new {
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    font-family: 'DM Mono',monospace;
}

    .wf-btn-new:hover {
        opacity: .85;
    }

/* ── Add Step button in modal ───────────────────────────────────────────────── */
.wf-btn-add-step {
    margin-left: 10px;
    padding: 3px 10px;
    background: rgba(79,142,247,.1);
    border: 1px solid rgba(79,142,247,.3);
    color: var(--accent);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Mono',monospace;
    transition: background .12s;
}

    .wf-btn-add-step:hover {
        background: rgba(79,142,247,.2);
    }

/* ══════════════════════════════════════════════════════════════════════════════
   ACC PEOPLE PICKER DROPDOWN
   ══════════════════════════════════════════════════════════════════════════════ */
.wf-people-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
    width: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 360px;
}

.wf-picker-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 6px;
    border-bottom: 1px solid var(--border);
}

.wf-picker-search {
    flex: 1;
    padding: 6px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

    .wf-picker-search:focus {
        border-color: var(--accent);
    }

.wf-picker-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.wf-picker-tab {
    flex: 1;
    padding: 7px 4px;
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .12s,border-color .12s;
}

    .wf-picker-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

    .wf-picker-tab:hover {
        color: var(--text);
    }

.wf-picker-list {
    overflow-y: auto;
    flex: 1;
}

    .wf-picker-list::-webkit-scrollbar {
        width: 4px;
    }

    .wf-picker-list::-webkit-scrollbar-thumb {
        background: rgba(100,116,139,.25);
        border-radius: 3px;
    }

.wf-picker-item {
    padding: 9px 12px;
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid var(--border);
}

    .wf-picker-item:last-child {
        border-bottom: none;
    }

    .wf-picker-item:hover {
        background: rgba(79,142,247,.07);
    }

.wf-picker-item-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.wf-picker-item-sub {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-picker-empty {
    padding: 16px;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

/* Light theme for picker + filter bar */
body[data-theme="light"] .wf-filterbar {
    background: var(--surface2);
    border-bottom-color: var(--border);
}

body[data-theme="light"] .wf-search-input {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

    body[data-theme="light"] .wf-search-input:focus {
        border-color: var(--accent);
    }

body[data-theme="light"] .wf-fchip {
    border-color: var(--border);
    color: var(--muted);
}

    body[data-theme="light"] .wf-fchip.active {
        background: rgba(29,78,216,.1);
        border-color: rgba(29,78,216,.4);
        color: var(--accent);
    }

body[data-theme="light"] .wf-people-picker {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(15,23,42,.18);
}

body[data-theme="light"] .wf-picker-search {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

body[data-theme="light"] .wf-picker-tab {
    color: var(--muted);
}

    body[data-theme="light"] .wf-picker-tab.active {
        color: var(--accent);
    }

body[data-theme="light"] .wf-picker-item {
    border-bottom-color: var(--border);
}

    body[data-theme="light"] .wf-picker-item:hover {
        background: rgba(29,78,216,.06);
    }

body[data-theme="light"] .wf-picker-item-name {
    color: var(--text);
}

body[data-theme="light"] .wf-picker-item-sub {
    color: var(--muted);
}

body[data-theme="light"] .wf-btn-add-step {
    background: rgba(29,78,216,.08);
    border-color: rgba(29,78,216,.25);
    color: var(--accent);
}

/* ── People picker — fixed position (overrides absolute) ───────────────────── */
.wf-people-picker-fixed {
    position: fixed !important;
    top: auto;
    left: auto;
}

/* ── New Workflow Wizard step rows ─────────────────────────────────────────── */
.wf-wizard-step-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.wf-wizard-step-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}

.wf-wizard-step-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wf-wizard-step-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

body[data-theme="light"] .wf-wizard-step-row {
    background: var(--bg);
    border-color: var(--border);
}


/* ── Wizard flow preview ────────────────────────────────────────────────────── */
.wf-wz-template-select {
    font-size: 13px !important;
}

.wf-wz-flow-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--surface2);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.wf-wz-node {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    letter-spacing: .04em;
    white-space: nowrap;
}

    .wf-wz-node.init {
        background: rgba(148,163,184,.2);
        color: var(--muted);
        border: 1px solid rgba(148,163,184,.3);
    }

    .wf-wz-node.review {
        background: rgba(79,142,247,.12);
        color: var(--accent);
        border: 1px solid rgba(79,142,247,.3);
    }

    .wf-wz-node.approval {
        background: rgba(16,185,129,.12);
        color: #10b981;
        border: 1px solid rgba(16,185,129,.3);
    }

.wf-wz-arrow {
    color: var(--muted);
    font-size: 11px;
    flex-shrink: 0;
}

body[data-theme="light"] .wf-wz-flow-preview {
    background: var(--bg);
    border-color: var(--border);
}

body[data-theme="light"] .wf-wz-node.init {
    background: rgba(100,116,139,.1);
    color: var(--muted);
}

body[data-theme="light"] .wf-wz-node.review {
    background: rgba(29,78,216,.08);
    color: var(--accent);
}

body[data-theme="light"] .wf-wz-node.approval {
    background: rgba(5,150,105,.08);
    color: #059669;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Full token override (ACC-inspired design system)
   All CSS vars are updated via JS _applyTheme → root.style.setProperty
   This block handles structural/component differences that need explicit overrides
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Global ───────────────────────────────────────────────────────────────── */
body[data-theme="light"] {
    background: var(--bg);
    color: var(--text);
}

    body[data-theme="light"]::before {
        opacity: 0;
    }
    /* hide grid dot bg */

    /* ── Header ───────────────────────────────────────────────────────────────── */
    body[data-theme="light"] #header {
        background: rgba(255,255,255,.97) !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: 0 1px 6px rgba(15,23,42,.08);
    }

    body[data-theme="light"] .app-title {
        color: var(--text);
    }

        body[data-theme="light"] .app-title span {
            color: var(--accent);
        }

    body[data-theme="light"] .app-sub {
        color: var(--muted);
    }

    body[data-theme="light"] .proj-name {
        color: var(--text);
    }

    body[data-theme="light"] .proj-hub,
    body[data-theme="light"] .proj-label {
        color: var(--muted);
    }

    /* Breadcrumb */
    body[data-theme="light"] .hub-crumb,
    body[data-theme="light"] .hub-crumb-sep {
        color: var(--muted);
    }

        body[data-theme="light"] .hub-crumb.active {
            color: var(--text);
        }

    /* Header buttons */
    body[data-theme="light"] .btn-ghost {
        border-color: var(--border);
        color: var(--muted);
        background: transparent;
    }

        body[data-theme="light"] .btn-ghost:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

    body[data-theme="light"] .btn-acc {
        background: rgba(13,148,136,.1);
        border-color: rgba(13,148,136,.35);
        color: var(--teal);
    }

    body[data-theme="light"] .sync-badge {
        background: rgba(71,85,105,.1);
        color: var(--muted);
        border-color: var(--border);
    }

        body[data-theme="light"] .sync-badge.merged {
            background: rgba(29,78,216,.1);
            color: var(--accent);
            border-color: rgba(29,78,216,.3);
        }

    /* ── Sidebar ──────────────────────────────────────────────────────────────── */
    body[data-theme="light"] #sidebar {
        background: var(--surface) !important;
        border-right: 1px solid var(--border) !important;
    }

    body[data-theme="light"] .act-nav-btn {
        color: var(--muted);
    }

        body[data-theme="light"] .act-nav-btn:hover {
            background: rgba(29,78,216,.06);
            color: var(--text);
            border-color: rgba(29,78,216,.2);
        }

        body[data-theme="light"] .act-nav-btn.active {
            background: rgba(29,78,216,.1);
            color: var(--accent);
            border-color: rgba(29,78,216,.3);
        }
        /* Nav icons inherit colour from button */
        body[data-theme="light"] .act-nav-btn svg,
        body[data-theme="light"] .act-nav-btn .nav-ico {
            color: inherit;
        }

    body[data-theme="light"] .panel-divider {
        background: var(--border);
    }

    body[data-theme="light"] .act-nav-sub {
        color: var(--muted) !important;
    }

        body[data-theme="light"] .act-nav-sub:hover {
            color: var(--text) !important;
            background: rgba(29,78,216,.04);
        }

        body[data-theme="light"] .act-nav-sub.active {
            background: rgba(29,78,216,.08) !important;
            color: var(--accent) !important;
            border-left-color: var(--accent) !important;
        }

    /* Hub/project selector */
    body[data-theme="light"] #selStep,
    body[data-theme="light"] .sel-step {
        background: var(--surface);
        border-color: var(--border);
    }

    body[data-theme="light"] .sel-title {
        color: var(--text);
    }

    body[data-theme="light"] .sel-sub {
        color: var(--muted);
    }

    body[data-theme="light"] .sel-control select {
        background: var(--bg);
        border-color: var(--border);
        color: var(--text);
    }

    body[data-theme="light"] .sel-step-num {
        background: rgba(29,78,216,.12);
        color: var(--accent);
    }

    /* ── Main content area ────────────────────────────────────────────────────── */
    body[data-theme="light"] #main {
        background: var(--bg);
    }

    body[data-theme="light"] #content {
        background: var(--bg);
    }

    /* ── KPI Cards ────────────────────────────────────────────────────────────── */
    body[data-theme="light"] .kpi-card {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        box-shadow: 0 1px 4px rgba(15,23,42,.06);
    }

    body[data-theme="light"] .kpi-lbl {
        color: var(--muted);
    }

    body[data-theme="light"] .kpi-val {
        color: var(--text);
    }

    body[data-theme="light"] .kpi-sub {
        color: var(--muted);
    }

    /* ── Filter / Toolbar bars ────────────────────────────────────────────────── */
    body[data-theme="light"] #filterBar,
    body[data-theme="light"] #rvToolbar,
    body[data-theme="light"] #usersToolbar,
    body[data-theme="light"] #apToolbar,
    body[data-theme="light"] .rv-toolbar {
        background: var(--surface) !important;
        border-bottom: 1px solid var(--border) !important;
        color: var(--text);
    }

        body[data-theme="light"] #filterBar label,
        body[data-theme="light"] #rvToolbar label,
        body[data-theme="light"] #usersToolbar label {
            color: var(--text);
        }

    body[data-theme="light"] .row-count {
        color: var(--muted);
    }

    /* All filter inputs and selects */
    body[data-theme="light"] select,
    body[data-theme="light"] input[type="text"],
    body[data-theme="light"] input[type="search"],
    body[data-theme="light"] input[type="date"],
    body[data-theme="light"] textarea {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }

        body[data-theme="light"] input::placeholder,
        body[data-theme="light"] textarea::placeholder {
            color: var(--muted) !important;
        }

        body[data-theme="light"] select:focus,
        body[data-theme="light"] input:focus {
            border-color: var(--accent) !important;
            outline: none;
        }

    /* ── Tables — all ─────────────────────────────────────────────────────────── */
    /* registerTable */
    body[data-theme="light"] #registerTable thead th {
        background: var(--surface2) !important;
        color: var(--muted);
        border-bottom: 2px solid var(--border);
    }

        body[data-theme="light"] #registerTable thead th.col-check {
            background: var(--surface2) !important;
        }

        body[data-theme="light"] #registerTable thead th.col-docnum {
            background: var(--surface2) !important;
        }

    body[data-theme="light"] #registerTable tbody tr {
        border-bottom-color: var(--border);
    }

        body[data-theme="light"] #registerTable tbody tr:nth-child(even) {
            background: rgba(15,23,42,.025);
        }

        body[data-theme="light"] #registerTable tbody tr:hover {
            background: rgba(29,78,216,.04);
        }

        body[data-theme="light"] #registerTable tbody tr.row-selected {
            background: rgba(29,78,216,.1) !important;
        }

    body[data-theme="light"] #registerTable td {
        color: var(--text);
    }

    body[data-theme="light"] td.col-check,
    body[data-theme="light"] td.doc-num {
        background: var(--surface) !important;
    }

    body[data-theme="light"] #registerTable tbody tr:hover td.col-check,
    body[data-theme="light"] #registerTable tbody tr:hover td.doc-num {
        background: var(--surface2) !important;
    }

    body[data-theme="light"] #registerTable tbody tr.row-selected td.col-check,
    body[data-theme="light"] #registerTable tbody tr.row-selected td.doc-num {
        background: rgba(219,234,254,.95) !important;
    }

    /* rvTable (Reviews) */
    body[data-theme="light"] #rvTableWrap {
        background: var(--bg);
    }

    body[data-theme="light"] #rvTable {
        background: var(--surface);
    }

        body[data-theme="light"] #rvTable thead th {
            background: var(--surface2) !important;
            color: var(--muted);
            border-bottom: 2px solid var(--border);
        }

        body[data-theme="light"] #rvTable tbody tr {
            border-bottom-color: var(--border);
        }

            body[data-theme="light"] #rvTable tbody tr:hover {
                background: rgba(29,78,216,.04);
            }

        body[data-theme="light"] #rvTable td {
            color: var(--text);
        }

    body[data-theme="light"] .rv-name {
        color: var(--text);
    }

    body[data-theme="light"] .rv-people,
    body[data-theme="light"] .rv-pending-wrap,
    body[data-theme="light"] .rv-seq {
        color: var(--muted);
    }

    /* Status chips — brighter in light mode */
    body[data-theme="light"] .rv-s-open {
        background: rgba(29,78,216,.08);
        color: #1d4ed8;
        border-color: rgba(29,78,216,.25);
    }

    body[data-theme="light"] .rv-s-closed {
        background: rgba(22,163,74,.08);
        color: #15803d;
        border-color: rgba(22,163,74,.25);
    }

    body[data-theme="light"] .rv-s-pending {
        background: rgba(217,119,6,.08);
        color: #b45309;
        border-color: rgba(217,119,6,.25);
    }

    body[data-theme="light"] .rv-s-void {
        background: rgba(100,116,139,.08);
        color: #475569;
        border-color: rgba(100,116,139,.2);
    }

    /* apTable (Approved Drawings) */
    body[data-theme="light"] #apTableWrap {
        background: var(--bg);
    }

    body[data-theme="light"] #apTable thead th {
        background: var(--surface2) !important;
        color: var(--muted);
        border-bottom: 2px solid var(--border);
    }

    body[data-theme="light"] #apTable tbody tr {
        border-bottom-color: var(--border);
    }

        body[data-theme="light"] #apTable tbody tr:hover {
            background: rgba(29,78,216,.04);
        }

    body[data-theme="light"] #apTable td {
        color: var(--text);
    }

    body[data-theme="light"] .ap-disc-chip {
        background: rgba(29,78,216,.08);
        color: var(--accent);
        border-color: rgba(29,78,216,.2);
    }

    body[data-theme="light"] .ap-ver-badge {
        background: rgba(13,148,136,.08);
        color: var(--teal);
        border-color: rgba(13,148,136,.2);
    }

    /* usersTable */
    body[data-theme="light"] #usersTable thead th {
        background: var(--surface2) !important;
        color: var(--muted);
        border-bottom: 2px solid var(--border);
    }

    body[data-theme="light"] #usersTable tbody tr {
        border-bottom-color: var(--border);
    }

        body[data-theme="light"] #usersTable tbody tr:hover {
            background: rgba(29,78,216,.04);
        }

    body[data-theme="light"] #usersTable td {
        color: var(--text);
    }

    /* trackerTable */
    body[data-theme="light"] #trackerTable thead th {
        background: var(--surface2) !important;
        color: var(--muted);
        border-bottom: 2px solid var(--border);
    }

    body[data-theme="light"] #trackerTable tbody tr {
        border-bottom-color: var(--border);
    }

        body[data-theme="light"] #trackerTable tbody tr:hover {
            background: rgba(29,78,216,.04);
        }

    body[data-theme="light"] #trackerTable td {
        color: var(--text);
    }

    /* rcp-table (Register config) */
    body[data-theme="light"] .rcp-table thead tr {
        background: var(--surface2);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .rcp-table th {
        color: var(--muted);
    }

    body[data-theme="light"] .rcp-table td {
        color: var(--text);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .rcp-table tbody tr:hover {
        background: rgba(29,78,216,.04);
    }

    body[data-theme="light"] .rcp-table td:last-child {
        color: var(--muted);
    }

    /* sst (Scope selected table) */
    body[data-theme="light"] .sst thead th {
        background: var(--surface2);
        color: var(--muted);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .sst tbody tr {
        border-bottom-color: var(--border);
    }

        body[data-theme="light"] .sst tbody tr:hover {
            background: rgba(29,78,216,.04);
        }

    body[data-theme="light"] .sst td,
    body[data-theme="light"] .sst-fn {
        color: var(--text);
    }

    body[data-theme="light"] .sst-fp {
        color: var(--muted);
    }

    body[data-theme="light"] .sst-rm {
        color: var(--muted);
    }

        body[data-theme="light"] .sst-rm:hover {
            background: rgba(220,38,38,.1);
            color: #dc2626;
        }

    /* Settings permissions table */
    body[data-theme="light"] .sp-th {
        background: var(--surface2) !important;
        color: var(--muted);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .sp-td {
        border-bottom-color: var(--border);
        color: var(--text);
    }

    body[data-theme="light"] .sp-row:hover {
        background: rgba(29,78,216,.04);
    }

    /* ── Bulk bar ──────────────────────────────────────────────────────────────── */
    body[data-theme="light"] #bulkBar {
        background: rgba(29,78,216,.06);
        border-bottom-color: rgba(29,78,216,.2);
    }

        body[data-theme="light"] #bulkBar .bulk-count {
            color: var(--accent);
        }

        body[data-theme="light"] #bulkBar .btn-bulk {
            background: var(--surface);
            color: var(--text);
            border-color: var(--border);
        }

            body[data-theme="light"] #bulkBar .btn-bulk:hover {
                background: var(--accent);
                color: #fff;
            }

    /* ── Settings pane ────────────────────────────────────────────────────────── */
    body[data-theme="light"] #settingsTab {
        background: var(--bg);
    }

    body[data-theme="light"] .settings-pane {
        background: var(--bg);
    }

    body[data-theme="light"] .stab-bar {
        background: var(--surface);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .stab-btn {
        color: var(--muted);
        border-color: transparent;
    }

        body[data-theme="light"] .stab-btn:hover {
            background: rgba(29,78,216,.06);
            color: var(--text);
        }

        body[data-theme="light"] .stab-btn.active {
            background: rgba(29,78,216,.1);
            color: var(--accent);
            border-color: rgba(29,78,216,.3);
        }

    body[data-theme="light"] .settings-legend {
        background: var(--surface2);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .settings-role-chip {
        background: var(--surface);
        border-color: var(--border);
        color: var(--muted);
    }

    body[data-theme="light"] .settings-table-header {
        background: var(--surface2);
        color: var(--muted);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .settings-row {
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .settings-name {
        color: var(--text);
    }

    body[data-theme="light"] .settings-email {
        color: var(--muted);
    }

    body[data-theme="light"] .settings-acc-role {
        background: var(--surface2);
        color: var(--muted);
    }

    /* ── Scope Pane ───────────────────────────────────────────────────────────── */
    body[data-theme="light"] #settingsScopePane {
        background: var(--bg) !important;
    }

    body[data-theme="light"] .sc-toolbar {
        background: var(--surface) !important;
        border-bottom-color: var(--border) !important;
    }

    body[data-theme="light"] .sc-toolbar-title {
        color: var(--text) !important;
    }

    body[data-theme="light"] .sc-toolbar-desc {
        color: var(--muted) !important;
    }

    body[data-theme="light"] #scopeTreeWrap {
        background: var(--surface) !important;
        border-right-color: var(--border) !important;
    }

    body[data-theme="light"] .sc-panel-hdr {
        background: var(--surface2) !important;
        color: var(--muted) !important;
        border-bottom-color: var(--border) !important;
    }

    body[data-theme="light"] #scopeSelectedWrap {
        background: var(--surface2) !important;
    }

    body[data-theme="light"] .sf-row {
        color: var(--text) !important;
    }

        body[data-theme="light"] .sf-row:hover {
            background: rgba(29,78,216,.05) !important;
        }

    body[data-theme="light"] .sf-chev {
        color: var(--muted) !important;
    }

    body[data-theme="light"] .sf-cb {
        border-color: var(--border) !important;
    }

    body[data-theme="light"] .sc-empty {
        color: var(--muted) !important;
    }

    body[data-theme="light"] .sc-empty-title {
        color: var(--text) !important;
    }

    body[data-theme="light"] .ac-toggle-label {
        color: var(--muted) !important;
    }

    body[data-theme="light"] .ac-toggle {
        background: rgba(71,85,105,.15) !important;
        border-color: var(--border) !important;
    }

        body[data-theme="light"] .ac-toggle.on {
            background: var(--accent) !important;
            border-color: var(--accent) !important;
        }

    /* ── Register Config Pane ─────────────────────────────────────────────────── */
    body[data-theme="light"] .rcp-group-icon {
        color: var(--muted) !important;
    }

    body[data-theme="light"] .rcp-group-count {
        color: var(--muted) !important;
    }

    body[data-theme="light"] .rcp-group-chev {
        color: var(--muted) !important;
    }

    body[data-theme="light"] .rcp-detail-hdr {
        background: var(--surface);
        border-bottom-color: var(--border);
    }

    body[data-theme="light"] .rcp-short-badge {
        background: rgba(29,78,216,.08);
        border-color: rgba(29,78,216,.2);
        color: var(--accent);
    }

    body[data-theme="light"] .rcp-btn-action {
        border-color: var(--border);
        color: var(--muted);
    }

        body[data-theme="light"] .rcp-btn-action:hover {
            border-color: var(--text);
            color: var(--text);
        }

    body[data-theme="light"] .rcp-table-empty {
        color: var(--muted);
    }

    /* ── Modals ───────────────────────────────────────────────────────────────── */
    body[data-theme="light"] #breakdownModal,
    body[data-theme="light"] #rowModal,
    body[data-theme="light"] #exportBox,
    body[data-theme="light"] .rcp-modal,
    body[data-theme="light"] #userMenuPanel {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        box-shadow: 0 12px 48px rgba(15,23,42,.15) !important;
    }

    body[data-theme="light"] .modal-title,
    body[data-theme="light"] .rcp-modal-title {
        color: var(--text);
    }

    body[data-theme="light"] .modal-sub {
        color: var(--muted);
    }

    body[data-theme="light"] .modal-close,
    body[data-theme="light"] .rcp-modal-close {
        color: var(--muted);
    }

        body[data-theme="light"] .modal-close:hover,
        body[data-theme="light"] .rcp-modal-close:hover {
            color: var(--text);
            background: rgba(15,23,42,.06);
        }

    body[data-theme="light"] .level-row {
        background: var(--surface2);
        border-color: var(--border);
    }

        body[data-theme="light"] .level-row input[type="text"] {
            background: var(--bg);
        }

    body[data-theme="light"] .rcp-modal-hint {
        color: var(--muted);
    }

    body[data-theme="light"] .rcp-modal-label {
        color: var(--muted);
    }

    /* Export modal checkboxes */
    body[data-theme="light"] #exportBox label {
        color: var(--text);
    }

    /* ── User menu panel ──────────────────────────────────────────────────────── */
    body[data-theme="light"] #userAvatarBtn {
        background: rgba(29,78,216,.08);
        border-color: rgba(29,78,216,.2);
        color: var(--text);
    }

    body[data-theme="light"] #userMenuPanel * {
        color: var(--text);
    }

    body[data-theme="light"] #menuBtnSync,
    body[data-theme="light"] #menuBtnGoAcc,
    body[data-theme="light"] #menuBtnTheme,
    body[data-theme="light"] #menuBtnLogout {
        color: var(--text);
    }

        body[data-theme="light"] #menuBtnSync:hover,
        body[data-theme="light"] #menuBtnGoAcc:hover,
        body[data-theme="light"] #menuBtnTheme:hover,
        body[data-theme="light"] #menuBtnLogout:hover {
            background: rgba(29,78,216,.06);
        }

    body[data-theme="light"] .menu-divider {
        background: var(--border);
    }

    /* ── Notification bell ────────────────────────────────────────────────────── */
    body[data-theme="light"] #notifBtn {
        color: var(--muted);
    }

        body[data-theme="light"] #notifBtn:hover {
            color: var(--text);
        }

    body[data-theme="light"] #notifPanel {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        box-shadow: 0 8px 32px rgba(15,23,42,.12);
    }

    body[data-theme="light"] .notif-item {
        border-bottom-color: var(--border);
        color: var(--text);
    }

        body[data-theme="light"] .notif-item:hover {
            background: rgba(29,78,216,.04);
        }

    body[data-theme="light"] .notif-time {
        color: var(--muted);
    }

    body[data-theme="light"] .notif-hdr {
        background: var(--surface2);
        border-bottom-color: var(--border);
        color: var(--text);
    }

    /* ── Login Screen ─────────────────────────────────────────────────────────── */
    body[data-theme="light"] #loginScreen {
        background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    }

    body[data-theme="light"] #loginCard {
        background: #ffffff;
        border-color: var(--border);
        box-shadow: 0 8px 40px rgba(15,23,42,.1), 0 1px 4px rgba(15,23,42,.06);
    }

        body[data-theme="light"] #loginCard .app-title {
            color: var(--text);
        }

        body[data-theme="light"] #loginCard .app-sub {
            color: var(--muted);
        }

    /* ── Empty states ─────────────────────────────────────────────────────────── */
    body[data-theme="light"] .empty-title {
        color: var(--text);
    }

    body[data-theme="light"] .empty-sub {
        color: var(--muted);
    }

    /* ── Dashboard breakdown chart ────────────────────────────────────────────── */
    body[data-theme="light"] #diagModal {
        background: var(--surface);
        border-color: var(--border);
    }

    body[data-theme="light"] .diag-line:hover {
        background: rgba(29,78,216,.04);
    }

    body[data-theme="light"] .diag-time {
        color: var(--muted);
    }

    /* ── Progress bars ────────────────────────────────────────────────────────── */
    body[data-theme="light"] .prog-bar-bg {
        background: var(--surface2);
    }

    /* ── Scrollbars ───────────────────────────────────────────────────────────── */
    body[data-theme="light"] ::-webkit-scrollbar-thumb {
        background: rgba(71,85,105,.25);
    }

        body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
            background: rgba(71,85,105,.4);
        }

    body[data-theme="light"] ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* ── Pager ────────────────────────────────────────────────────────────────── */
    body[data-theme="light"] .rv-pg-btn {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
    }

        body[data-theme="light"] .rv-pg-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

    body[data-theme="light"] .rv-pg-active {
        background: var(--accent) !important;
        color: #fff !important;
        border-color: var(--accent) !important;
    }

    /* ── Role/discipline chips ────────────────────────────────────────────────── */
    body[data-theme="light"] .perm-disc-chip {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
    }

    /* ── Coming-soon tags ─────────────────────────────────────────────────────── */
    body[data-theme="light"] .coming-tag {
        background: rgba(217,119,6,.15);
        color: #b45309;
    }



/* ══════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR — icon-only snap when collapsed
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar width transitions */
#sidebar {
    transition: width 0.22s cubic-bezier(.4,0,.2,1);
    /* Outer sidebar: no scroll. Inner panels (selectorPanel /
       activeProjectPanel) are the scroll containers, so the Prism Logic
       footer stays pinned to the bottom while the nav scrolls above it
       independently when the viewport is short. */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 56px;
    min-height: 0;
}

/* Selector panel (home / pick-a-project view) — make its content scroll
   when the viewport is short enough that the dropdowns + button don't fit. */
#selectorPanel {
    overflow-y: auto;
    min-height: 0;
}

/* Active project panel — becomes the scroll container for sidebar nav.
   flex:1 + min-height:0 is the standard pattern that lets a flex child
   actually shrink below its content height (without it, the min-content
   size locks the column and overflow never engages). */
#activeProjectPanel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    /* The nav-buttons area is what scrolls. The brand footer stays fixed
   below it, pushed down by `.act-nav { flex:1 }` taking the slack. */
    #activeProjectPanel .act-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* Brand footer pinned at the bottom of the active-project panel by flex
   order. Previously this was position:sticky which caused it to overlap
   the last nav item when the sidebar content was taller than the viewport. */
    #activeProjectPanel .sidebar-brand {
        position: static;
        flex-shrink: 0;
    }

#sidebar {
    width: var(--sidebar-w);
}

    #sidebar.sidebar-collapsed {
        width: 56px;
    }

/* ── Sidebar collapse button ── */
#sidebarToggleBtn {
    position: fixed;
    bottom: 52px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -3px;
    border-radius: 4px;
    transition: color .15s, background .15s, left .22s cubic-bezier(.4,0,.2,1);
    padding: 0;
    z-index: 8010;
}

    #sidebarToggleBtn:hover {
        color: var(--accent);
        background: rgba(79,142,247,.1);
    }

/* ── Text hiding when collapsed ── */
#sidebar.sidebar-collapsed .act-nav-btn .nav-label,
#sidebar.sidebar-collapsed .act-nav-sub .nav-label {
    display: none;
}

#sidebar.sidebar-collapsed #selectorPanel {
    opacity: 0;
    pointer-events: none;
}

#sidebar.sidebar-collapsed .sidebar-brand-text,
#sidebar.sidebar-collapsed .sidebar-brand-divider,
#sidebar.sidebar-collapsed #settingsSubNav {
    display: none !important;
}

#sidebar.sidebar-collapsed .sidebar-brand-logo {
    height: 32px;
}

/* ── Nav buttons ── */
.act-nav {
    padding: 4px 6px;
}

.act-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    white-space: nowrap;
    overflow: hidden;
    transition: all .12s;
}

#sidebar.sidebar-collapsed .act-nav {
    padding: 4px 4px;
}

#sidebar.sidebar-collapsed .act-nav-btn {
    justify-content: center;
    padding: 10px 0;
}

.nav-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    display: inline-block;
}

/* Tooltip on collapsed icons */
#sidebar.sidebar-collapsed .act-nav-btn {
    position: relative;
}

    #sidebar.sidebar-collapsed .act-nav-btn::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--surface2);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 11px;
        padding: 5px 10px;
        border-radius: 6px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
        box-shadow: 0 4px 14px rgba(0,0,0,.35);
        z-index: 9999;
    }

    #sidebar.sidebar-collapsed .act-nav-btn:hover::after {
        opacity: 1;
    }

#sidebar.sidebar-collapsed #activeProjectPanel {
    padding: 8px 0;
}

#sidebar.sidebar-collapsed .sidebar-brand {
    align-items: center;
    padding: 10px 0 14px;
}

/* ── Light theme ── */
body[data-theme="light"] #sidebarToggleBtn {
    color: var(--muted);
    background: transparent;
}

    body[data-theme="light"] #sidebarToggleBtn:hover {
        background: rgba(29,78,216,.06);
        color: var(--accent);
    }

body[data-theme="light"] #sidebar.sidebar-collapsed .act-nav-btn::after {
    background: #fff;
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 4px 14px rgba(15,23,42,.12);
}

/* ── Collapsed sidebar: Settings sub-nav flyout ──────────────────────────── */
.sidebar-collapsed #settingsSubNav {
    display: block !important;
    position: fixed;
    left: 56px;
    top: 56px;
    width: 200px;
    background: var(--surface, #0f1923);
    border: 1px solid var(--border, #1e3a4a);
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 0 20px rgba(0,0,0,.5);
    z-index: 999;
    padding: 6px 0;
}

    .sidebar-collapsed #settingsSubNav .act-nav-btn {
        padding: 10px 14px;
        font-size: 11px;
    }

    .sidebar-collapsed #settingsSubNav .nav-label {
        display: inline !important;
    }
/* Hide the flyout when Settings tab is not active */
#settingsSubNav[style*="display: none"] {
    display: none !important;
}
/* ── v34: Submit-for-Review modal ─────────────────────────────────────────── */
/* Mirrors ACC's "Submit for review" dialog. The look is intentionally close to
   the existing rowModal so the dashboard feels coherent. */
#srModalOverlay,
#srPickerOverlay {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
#srModal {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; width: 820px; max-width: 96vw;
    /* No max-height + overflow-y:auto on body — that's what creates the
       inner scrollbar the user complained about. Let the modal grow with
       its content; if the viewport is genuinely too small, the overlay
       (which uses flex centering) will allow the modal to push above the
       fold and the page itself will scroll. */
    max-height: 96vh;
    display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#srPickerBox {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; width: 760px; max-width: 96vw;
    max-height: 88vh; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#srModalHeader,
#srPickerHeader {
    padding: 14px 18px; background: var(--surface2);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: 14px;
}
#srModalBody {
    /* flex:1 + overflow-y:auto used to make the body scroll inside the
       modal. Replaced with overflow:visible so the body grows to fit
       content; the modal as a whole still has max-height:96vh to clamp
       the worst case (very long workflow with 50+ steps), in which case
       the BODY scrolls — not nested scrollbars. */
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 14px;
}
#srModalFooter,
#srPickerFooter {
    padding: 12px 18px; background: var(--surface2);
    border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}

.sr-field { display: flex; flex-direction: column; gap: 6px; }
.sr-label { font-size: 12px; font-weight: 600; color: var(--text); }
.sr-req   { color: var(--cat3); margin-left: 2px; }
.sr-input {
    background: var(--bg2,#0f1216); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text);
    padding: 8px 10px; font-size: 13px; width: 100%; box-sizing: border-box;
    font-family: inherit;
}
.sr-input:focus { outline: none; border-color: var(--accent); }
.sr-textarea { resize: vertical; min-height: 80px; }

.sr-link-btn {
    background: none; border: none; color: var(--accent);
    cursor: pointer; font-size: 11px; padding: 0; font-family: inherit;
}
.sr-link-btn:hover { text-decoration: underline; }

/* Workflow Overview panel — collapsible, shown after a workflow is picked. */
.sr-collapsible-header {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; font-size: 12px; font-weight: 600;
    user-select: none;
}
.sr-collapsible-body {
    padding: 12px 14px; border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 6px 6px; background: rgba(255,255,255,.02);
    font-size: 12px;
}
.sr-chev {
    color: var(--muted); font-size: 10px; transition: transform .15s;
    display: inline-block;
}

.sr-files-total { font-size: 11px; color: var(--muted); margin: 2px 0; }
.sr-files-list {
    max-height: 200px; overflow-y: auto;
    background: var(--bg2,#0f1216); border: 1px solid var(--border);
    border-radius: 6px;
}
.sr-file-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: 12px;
    border-left: 3px solid transparent;
    transition: background .12s, border-color .12s;
}
.sr-file-row:last-child { border-bottom: none; }
.sr-file-row .sr-file-doc   { font-weight: 600; color: var(--text); }
.sr-file-row .sr-file-desc  { color: var(--muted); font-size: 11px; }
.sr-file-row .sr-file-rm {
    margin-left: auto; background: none; border: none; color: var(--muted);
    cursor: pointer; font-size: 14px; padding: 2px 6px;
}
.sr-file-row .sr-file-rm:hover { color: var(--cat3); }
/* Error state for files lacking an ACC URN: prominent red left border,
   subtle tinted background, the doc number itself styled red, and the
   `(no ACC URN)` tag set as a chip rather than tiny suffix text so the
   user instantly sees which file is the problem when there are 12+ in
   the list. The row is no longer dimmed — keeping it at full opacity
   makes the error easier to read, not harder. */
.sr-file-row.sr-file-no-urn {
    border-left-color: var(--cat3);
    background: rgba(239,68,68,.04);
}
.sr-file-row.sr-file-no-urn .sr-file-doc { color: var(--cat3); }
.sr-file-row.sr-file-no-urn .sr-file-doc::after {
    content: ' NO ACC URN';
    color: var(--cat3);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: .08em;
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.4);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Resolution preview state for the doc-row in the Submit modal. Each row
   has one of three states once /resolve-preview has run:
   - resolving: small spinner / "Looking up…" text (transient)
   - resolved : green left border + folder/filename hint shown below the
                doc number
   - failed   : red left border + the resolver's error message inline.
   These supersede the older sr-file-no-urn state which was based on
   stored URN presence; live resolution is now the source of truth. */
.sr-file-row.sr-resolving  { border-left-color: var(--muted); }
.sr-file-row.sr-resolved   { border-left-color: var(--cat1); }
.sr-file-row.sr-failed     {
    border-left-color: var(--cat3);
    background: rgba(239,68,68,.04);
}
.sr-file-row.sr-failed .sr-file-doc { color: var(--cat3); }

/* The hint line shown beneath the doc number — folder path on success,
   error message on failure. Wraps if long. */
.sr-file-hint {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.4;
}
.sr-file-row.sr-resolved .sr-file-hint { color: #22c55e; }
.sr-file-row.sr-failed .sr-file-hint   { color: var(--cat3); }

/* Pick-folder button shown for docs without a discipline mapping —
   gives the user an explicit way to override before submit. */
.sr-pick-folder-btn {
    background: rgba(79,142,247,.12);
    border: 1px dashed rgba(79,142,247,.4);
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    margin-left: 8px;
    font-family: inherit;
}
.sr-pick-folder-btn:hover {
    background: rgba(79,142,247,.18);
    border-style: solid;
}

/* Picker filters — discipline/stage/category dropdowns above the search
   in Add Files modal. Compact but readable; selects share the same dark
   look as the rest of the form. */
.sr-picker-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.sr-picker-filter {
    flex: 1;
    min-width: 120px;
    background: var(--surface2, #0a1520);
    border: 1px solid var(--border, #1e3a4a);
    border-radius: 5px;
    color: var(--text, #cce0f5);
    font-size: 11px;
    padding: 6px 8px;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}
.sr-picker-filter:hover { border-color: var(--accent); }
.sr-picker-filter:focus { border-color: var(--accent); }

/* Kind preference toggle — small radio cluster above the files list. */
.sr-kind-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0 6px;
    font-size: 11px;
    color: var(--muted);
}
.sr-kind-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
}
.sr-kind-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--text);
    font-size: 12px;
}
.sr-kind-opt input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.sr-error  { color: var(--cat3); font-size: 11px; margin-top: 4px; }
.sr-status { padding: 8px 12px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; line-height: 1.5; }
.sr-status.err  { background: rgba(239,68,68,.1); color: var(--cat3); border: 1px solid rgba(239,68,68,.3); }
.sr-status.warn { background: rgba(245,158,11,.1); color: var(--cat2); border: 1px solid rgba(245,158,11,.3); }
.sr-status.ok   { background: rgba(34,197,94,.1);  color: var(--cat1); border: 1px solid rgba(34,197,94,.3); }

/* Workflow Overview content */
.sr-overview-flow {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; flex-wrap: wrap;
}
.sr-overview-step {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--accent); display: inline-block;
}
.sr-overview-step.sq { border-radius: 3px; }
.sr-overview-arrow { color: var(--muted); }
.sr-overview-section { margin-top: 8px; }
.sr-overview-section h5 {
    margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--text);
}
.sr-overview-list { font-size: 11px; color: var(--muted); margin: 0; padding-left: 18px; }

/* Add-files picker list */
#srPickerList {
    flex: 1; overflow-y: auto; min-height: 200px;
    background: var(--bg2,#0f1216);
}
.sr-picker-row {
    display: grid;
    grid-template-columns: 28px 1fr 80px 100px;
    align-items: center; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: 12px; cursor: pointer;
}
.sr-picker-row:hover { background: rgba(79,142,247,.06); }
.sr-picker-row.disabled { opacity: .45; cursor: not-allowed; }
.sr-picker-row.disabled:hover { background: transparent; }
.sr-picker-row .sr-pick-doc  { font-weight: 600; }
.sr-picker-row .sr-pick-desc { color: var(--muted); }
.sr-picker-row .sr-pick-meta { color: var(--muted); font-size: 10px; }

/* ──────────────────────────────────────────────────────────────────────────
   Round 16 — Workflow Excel import modal
   ────────────────────────────────────────────────────────────────────────── */

/* Generic modal body / footer used by the workflow import flow. Sit inside
   the existing .wf-modal container. */
.wf-modal-body {
    overflow-y: auto;
    flex: 1;
}
.wf-modal-foot {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.wf-modal-foot .btn-acc,
.wf-modal-foot .btn-ghost {
    font-size: 12px;
    padding: 6px 14px;
}

/* Candidate chips inside the preview rows — one per assignee/reviewer. */
.wf-imp-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 2px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}
.wf-imp-chip-ok {
    background: rgba(34,197,94,.13);
    color: #166534;
    border-color: rgba(34,197,94,.35);
}
.wf-imp-chip-bad {
    background: rgba(220,38,38,.10);
    color: #b91c1c;
    border-color: rgba(220,38,38,.35);
}

/* Status tags shown per workflow row (top-right of the card) */
.wf-imp-tag {
    display: inline-block;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid transparent;
}
.wf-imp-tag-create {
    background: rgba(34,197,94,.18);
    color: #166534;
    border-color: rgba(34,197,94,.35);
}
.wf-imp-tag-skip {
    background: rgba(245,158,11,.18);
    color: #b45309;
    border-color: rgba(245,158,11,.35);
}