/* =========================================================================
   MerchXCRM — one stylesheet, no framework.
   Palette is the MerchXCRM product identity — brand red and teal.
   ========================================================================= */

:root {
    /* MerchXCRM brand — the red and teal of the mark. */
    --brand: #D7263D;
    --brand-dark: #AE1E31;
    --brand-light: #FCEAEC;
    --teal: #10565B;
    --teal-dark: #0B3F43;
    --teal-light: #E4EEEF;

    --accent: #10b981;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;

    --ink: #0f172a;
    --ink-2: #475569;
    --ink-3: #94a3b8;
    --line: #e6eaf0;
    --bg: #f6f8fb;
    --surface: #f6f8fb;
    --card: #ffffff;

    --sidebar-bg: #0b1120;
    --sidebar-bg-2: #10182b;
    --sidebar-border: rgba(255, 255, 255, .08);
    --sidebar-text: rgba(226, 232, 240, .62);
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: linear-gradient(135deg, rgba(215, 38, 61, .24), rgba(16, 86, 91, .22));
    --teal-on-dark: #5eb8bf;

    --chip-bg: #eef2f7;
    --chip-fg: #334155;

    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .06);
    --sidebar-w: 250px;
    --max-w: 1440px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Legacy aliases. The module stylesheets below were written against the
       old palette; mapping them here re-skins every screen without touching
       hundreds of rules. */
    --navy-900: #0b1120;
    --navy-800: #0f172a;
    --navy-700: #D7263D;
    --navy-600: #AE1E31;
    --navy-100: #eef2f7;
    --cyan-500: #10565B;
    --cyan-100: #E4EEEF;
    --coral-500: #D7263D;
    --coral-600: #AE1E31;
    --amber-500: #d97706;
    --green-600: #16a34a;
    --green-100: #dcfce7;
    --bg-soft: #eef2f7;
}


/* ---------- Icons ----------
   One base rule: every .ico is a stroke drawing that follows currentColor,
   so an icon looks right on the dark sidebar and on a white card alike. */
.ico {
    width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -.15em;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font: 14px/1.55 var(--font);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-700); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--navy-100);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--navy-800);
}

.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.skip {
    position: absolute; left: -9999px;
    background: var(--navy-700); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }

/* Three-part column: fixed head, scrolling nav, fixed foot. Only the middle
   moves, so the brand and the search box never scroll away. */
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    background-image: linear-gradient(180deg, var(--sidebar-bg-2), var(--sidebar-bg) 240px);
    border-right: 1px solid var(--sidebar-border);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.sidebar__head { flex: none; padding: 16px 14px 10px; border-bottom: 1px solid var(--sidebar-border); }
.sidebar__foot { flex: none; padding: 10px 12px; border-top: 1px solid var(--sidebar-border); }

.sidebar__brand { display: block; text-decoration: none; }
.sidebar__brand:hover { text-decoration: none; }

.xc-logo { display: inline-flex; align-items: center; gap: 9px; }
.xc-logo__mark { flex: none; display: block; }
.xc-logo__word { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }

.sidebar__org {
    display: flex; flex-direction: column; gap: 1px;
    margin: 12px 0 12px; padding: 8px 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--sidebar-border);
    border-radius: 9px;
}
.sidebar__org-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--teal-on-dark);
}
.sidebar__org-name { font-size: 12.5px; font-weight: 600; color: #e2e8f0; }

/* ---------- Menu search ---------- */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search__icon {
    position: absolute; left: 10px; width: 15px; height: 15px;
    color: var(--sidebar-text); pointer-events: none;
}
.nav-search input {
    width: 100%; font: inherit; font-size: 12.5px; padding: 8px 30px 8px 32px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--sidebar-border);
    border-radius: 9px; color: #fff;
}
.nav-search input::placeholder { color: var(--sidebar-text); }
.nav-search input:focus {
    outline: none; background: rgba(255, 255, 255, .1);
    border-color: rgba(215, 38, 61, .55);
    box-shadow: 0 0 0 3px rgba(215, 38, 61, .15);
}
.nav-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.45); }
.nav-search__key {
    position: absolute; right: 9px; font: 10px/1 var(--font); color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border); border-radius: 4px; padding: 3px 5px;
    pointer-events: none;
}
.nav-search input:focus ~ .nav-search__key { display: none; }

/* ---------- Nav ---------- */
.nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 10px 18px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
.nav::-webkit-scrollbar-track { background: transparent; }


.nav-link {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; margin-bottom: 2px;
    color: var(--sidebar-text); font-size: 13.5px; font-weight: 500;
    background: none; border: 0; border-radius: 9px;
    text-align: left; cursor: pointer; font-family: inherit;
    transition: background .12s ease, color .12s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-link > .ico { width: 18px; height: 18px; flex: none; opacity: .85; }

.nav-link.is-active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--brand);
}
.nav-link.is-active .ico { opacity: 1; color: #fff; }

/* A parent whose child is the current page: lit, but less than the child. */
.nav-link--parent.is-current { color: #fff; }
.nav-link--parent.is-current .ico { opacity: 1; }

.nav-link__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-link__chevron {
    width: 14px; height: 14px; flex: none; opacity: .6;
    transform: rotate(90deg); transition: transform .16s ease;
}
.nav-parent.is-open > .nav-link__chevron,
.nav-parent.is-open .nav-link__chevron { transform: rotate(-90deg); }

/* Children collapse by height so the animation is cheap and the closed
   state is genuinely hidden from tab order. */
.nav-children {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease;
    margin-left: 13px; padding-left: 12px;
    border-left: 1px solid var(--sidebar-border);
}
.nav-children > * { overflow: hidden; }
.nav-parent.is-open > .nav-children { grid-template-rows: 1fr; }
.nav-parent:not(.is-open) .nav-sub { visibility: hidden; }
.nav-parent.is-open .nav-sub { visibility: visible; }

.nav-sub {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; margin-bottom: 1px; border-radius: 8px;
    color: var(--sidebar-text); font-size: 12.75px;
}
.nav-sub:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.nav-sub__dot {
    width: 5px; height: 5px; border-radius: 50%; flex: none;
    background: currentColor; opacity: .4;
}
.nav-sub.is-active {
    background: var(--sidebar-active-bg); color: #fff; font-weight: 600;
}
.nav-sub.is-active .nav-sub__dot { background: var(--brand); opacity: 1; }

/* ---------- Sidebar footer ---------- */
.sidebar__user {
    display: flex; align-items: center; gap: 9px; padding: 7px 8px;
    border-radius: 9px; color: var(--sidebar-text);
}
.sidebar__user:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.sidebar__user-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar__user-name {
    font-size: 12.5px; font-weight: 600; color: #e2e8f0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__user-role { font-size: 10.5px; color: var(--sidebar-text); }

/* ---------- Top bar ---------- */
.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 24px; background: var(--card);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.page-title { margin: 0; font-size: 17px; font-weight: 700; flex: 1 1 auto; letter-spacing: -.01em; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.icon-btn {
    display: grid; place-items: center; position: relative;
    width: 34px; height: 34px; background: none; border: 1px solid var(--line);
    border-radius: 9px; cursor: pointer; color: var(--ink-2); flex: none;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn .ico { width: 17px; height: 17px; }
.badge-dot {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 20px; background: var(--brand); color: #fff;
    font-size: 10px; font-weight: 700; display: grid; place-items: center;
}

.chip {
    font-size: 11px; padding: 3px 9px; border-radius: 999px;
    background: var(--chip-bg); color: var(--chip-fg); font-weight: 600; white-space: nowrap;
}
.chip-super { background: var(--brand); color: #fff; }

.menu { position: relative; }
.user-btn {
    display: flex; align-items: center; gap: 8px; background: none;
    border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 4px;
    cursor: pointer; font: inherit; color: var(--ink);
}
.user-btn:hover { border-color: var(--brand); }
.user-btn__chevron { width: 13px; height: 13px; opacity: .5; transform: rotate(90deg); }
.avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--brand), var(--teal));
    color: #fff; font-size: 12px; font-weight: 700;
    display: grid; place-items: center;
}
.avatar.lg { width: 48px; height: 48px; font-size: 20px; }
.user-name { font-size: 13px; font-weight: 500; }

.menu-pop {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 6px; z-index: 30;
}
.menu-pop a, .menu-pop .linklike {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 13px;
}
.menu-pop .ico { width: 15px; height: 15px; opacity: .55; }
.menu-pop a:hover, .menu-pop .linklike:hover { background: var(--surface); text-decoration: none; }

.content { flex: 1 1 auto; padding: 24px; max-width: 1440px; width: 100%; }
.foot { padding: 6px 24px 24px; color: var(--ink-3); font-size: 12px; }

/* ---------- Blocks ---------- */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.card-h {
    margin: 0 0 12px; font-size: 14px; font-weight: 700;
    display: flex; align-items: baseline; gap: 8px;
}
.card-more { margin-left: auto; font-size: 12px; font-weight: 500; }
.card-note { margin: -4px 0 14px; color: var(--ink-2); font-size: 12.5px; max-width: 70ch; }
.note { color: var(--ink-3); font-size: 12.5px; max-width: 80ch; }
.lede { margin: 0 0 16px; color: var(--ink-2); max-width: 85ch; }
.empty { color: var(--ink-3); padding: 22px; text-align: center; }
.narrow { max-width: 640px; }
.stack > * { margin-bottom: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.stat-n { margin: 0; font-size: 26px; font-weight: 800; color: var(--navy-800); }
.stat-l { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); font-weight: 700; border-bottom: 2px solid var(--line); white-space: nowrap;
}
.table thead th a { color: inherit; }
.table tbody tr:hover { background: #fafcff; }
.table tbody tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.row-actions form { display: inline; }

.diff .was { color: var(--coral-600); }
.diff .now { color: var(--green-600); }
.diff tr.is-changed { background: #fffdf3; }

.matrix th.matrix-mod { width: 240px; font-weight: 600; color: var(--ink); }
.matrix .matrix-act { text-align: center; width: 92px; }
.na { color: var(--line); }
.cbox { display: inline-grid; place-items: center; cursor: pointer; }
.cbox input { width: 16px; height: 16px; accent-color: var(--navy-700); cursor: pointer; }
select.mini { font-size: 11.5px; padding: 3px 4px; border-radius: 5px; border: 1px solid var(--line); }
select.mini.is-set { border-color: var(--amber-500); background: #fffaf0; font-weight: 600; }

/* ---------- Tags ---------- */
.tag {
    display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--navy-100); color: var(--navy-800); font-weight: 600; white-space: nowrap;
}
.tag-active, .tag-create { background: var(--green-100); color: #076b3b; }
.tag-probation, .tag-update { background: #fff3d6; color: #8a5a00; }
.tag-suspended, .tag-locked { background: #ffe7d4; color: #9a4b00; }
.tag-resigned { background: #eceff4; color: var(--ink-2); }
.tag-terminated, .tag-delete, .tag-login_failed, .tag-access_denied, .tag-csrf_failed {
    background: #ffe0e8; color: var(--coral-600);
}
.tag-restore, .tag-login { background: var(--cyan-100); color: #045b78; }
.tag-permission_change, .tag-password_change, .tag-password_reset { background: #ede4ff; color: #5b2ec4; }

/* ---------- Lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.list li:last-child { border-bottom: 0; }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.timeline li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }

.dl { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; margin: 0; font-size: 13px; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; }

.pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pay-grid div {
    background: var(--bg); border-radius: 8px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
}
.pay-grid span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pay-grid strong { font-size: 15px; color: var(--navy-800); }

/* ---------- Org tree ---------- */
.org-tree, .org-tree ul { list-style: none; margin: 0; padding-left: 0; }
.org-tree ul { padding-left: 22px; border-left: 1px dashed var(--line); margin-left: 10px; }
.org-tree li { padding: 4px 0; }
.org-node { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; }
.org-name { font-weight: 600; }
.org-meta { font-size: 12px; color: var(--ink-3); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 13px; }
/* An author display:flex beats the browser's own [hidden] rule, so a field
   toggled with el.hidden stayed on screen. Every conditional field in the app
   depends on this one line. */
.field[hidden] { display: none; }
.field.wide { grid-column: 1 / -1; }
.field > span, .field > legend { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], select, textarea {
    font: inherit; font-size: 13.5px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
    width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--navy-600); outline-offset: -1px; border-color: var(--navy-600);
}
textarea { resize: vertical; }

.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--coral-500); }
.err { color: var(--coral-600); font-size: 12px; font-style: normal; }
.hint { color: var(--ink-3); font-size: 11.5px; font-style: normal; }

fieldset.field { border: 0; padding: 0; margin: 0 0 13px; }
.radio-card {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: pointer;
}
.radio-card:hover { border-color: var(--navy-600); }
.radio-card input { margin-top: 3px; accent-color: var(--navy-700); }
.radio-card em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); }

.check { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 12px; font-size: 13px; }
.check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--navy-700); }

.pw-wrap { position: relative; display: block; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; font: inherit; font-size: 12px;
    color: var(--navy-700); cursor: pointer; padding: 4px 6px;
}

.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sticky-actions {
    position: sticky; bottom: 0; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow);
}

.toolbar {
    display: flex; gap: 14px; align-items: center; justify-content: space-between;
    flex-wrap: wrap; margin-bottom: 16px;
}
.filters { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
.filters input[type=search] { min-width: 220px; }
.inline-field { display: flex; flex-direction: column; gap: 3px; }
.inline-field span { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.head-id { display: flex; gap: 14px; align-items: center; }
.head-name { margin: 0; font-size: 18px; }
.btn-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px;
    border-radius: 8px; border: 1px solid transparent; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--navy-700); color: #fff; }
.btn-primary:hover { background: var(--navy-800); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--navy-600); color: var(--navy-700); }
.btn-plain { background: none; color: var(--ink-3); }
.btn-danger { background: var(--coral-500); color: #fff; }
.btn-danger:hover { background: var(--coral-600); }
.btn-block { width: 100%; }

.linklike {
    background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
    color: var(--navy-700); cursor: pointer; text-decoration: none;
}
.linklike:hover { text-decoration: underline; }
.linklike.danger { color: var(--coral-600); }
.linklike.small { font-size: 11.5px; }
.linklike[disabled] { color: var(--ink-3); cursor: not-allowed; text-decoration: none; }

/* ---------- Alerts ---------- */
.alert {
    padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px;
    display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent;
}
.alert-success { background: var(--green-100); color: #076b3b; border-color: #b9e6cd; }
.alert-error { background: #ffe0e8; color: var(--coral-600); border-color: #ffc2d2; }
.alert-warning { background: #fff3d6; color: #8a5a00; border-color: #ffe0a3; }
.alert-info { background: var(--cyan-100); color: #045b78; border-color: #b6e6f7; }
.alert-x { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.alert-x:hover { opacity: 1; }

/* ---------- Pagination ---------- */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.pager-count { color: var(--ink-3); font-size: 12.5px; margin: 0; }
.pager-links { display: flex; gap: 4px; align-items: center; }
.pager-links a, .pager-links span {
    padding: 5px 10px; border-radius: 6px; font-size: 13px; border: 1px solid var(--line); background: #fff;
}
.pager-links a:hover { border-color: var(--navy-600); text-decoration: none; }
.pager-links .is-current { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.pager-gap { border: 0; background: none; color: var(--ink-3); }

/* ---------- Auth & error pages ---------- */
.auth-body {
    position: relative;
    display: grid; place-items: center; min-height: 100vh; padding: 20px;
    background: var(--bg);
}
.auth-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 384px; background: var(--card);
    border: 1px solid var(--line); border-radius: 14px; padding: 28px;
    box-shadow: var(--shadow);
}
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-brand h1 { margin: 0; font-size: 19px; }
.auth-brand p { margin: 2px 0 0; font-size: 13px; }
.auth-foot { margin: 18px 0 0; font-size: 12px; text-align: center; }

.error-card { text-align: center; max-width: 440px; }
.error-code { font-size: 46px; font-weight: 800; color: var(--navy-100); margin: 0; line-height: 1; }
.error-card h1 { margin: 6px 0 8px; font-size: 20px; }
.error-actions { margin: 20px 0 0; }

/* ---------- Auth background scene ----------
   The road behind the login card: a garments factory, a bank, a port — the
   three stops a shipment used to mean physically driving between. One car
   tours all three, a sign gives a small notice-pulse as it passes each, then
   it settles at the centre and the checkmark lands. Structure follows Park
   X's proven street scene (see D:\xampp\htdocs\pk\park_here): every moving
   piece keeps its static placement on an outer <g transform=...> in the
   markup and puts the CSS-animated transform on an inner <g> with no
   attribute of its own, because a CSS `transform` replaces an SVG `transform`
   attribute rather than combining with it. Purely decorative — aria-hidden,
   no pointer events, hidden on narrow screens, frozen for reduced motion. */
.auth-body { overflow: hidden; }
.auth-scene {
    position: absolute; left: 50%; bottom: 0; width: 100%; min-width: 1600px;
    transform: translateX(-50%);
    z-index: 0; pointer-events: none;
}

.auth-scene__cloud { animation: auth-cloud-drift 80s linear infinite; }
.auth-scene__cloud--2 { animation-delay: -34s; animation-duration: 110s; }
@keyframes auth-cloud-drift {
    from { transform: translateX(-340px); }
    to   { transform: translateX(1760px); }
}

.auth-scene__smoke { animation: auth-smoke 6s ease-in infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes auth-smoke {
    0%   { opacity: 0; transform: translateY(0) scale(.7); }
    30%  { opacity: .5; }
    100% { opacity: 0; transform: translateY(-30px) scale(1.3); }
}

/* ---- signs: a small notice-pulse timed to when the hero car passes ---- */
.auth-scene__sign { transform-box: fill-box; transform-origin: 50% 100%; }
.auth-scene__sign--1 { animation: auth-sign-1 34s ease-in-out infinite; }
.auth-scene__sign--2 { animation: auth-sign-2 34s ease-in-out infinite; }
.auth-scene__sign--3 { animation: auth-sign-3 34s ease-in-out infinite; }
@keyframes auth-sign-1 { 0%, 17% { transform: scale(1); } 20% { transform: scale(1.12); } 24%, 100% { transform: scale(1); } }
@keyframes auth-sign-2 { 0%, 37% { transform: scale(1); } 40% { transform: scale(1.12); } 44%, 100% { transform: scale(1); } }
@keyframes auth-sign-3 { 0%, 59% { transform: scale(1); } 62% { transform: scale(1.12); } 66%, 100% { transform: scale(1); } }

/* ---- the hero: runs the whole circuit, then settles in the open gap ----
   between the bank and the port (x=1080) — not at the viewport's own centre
   (x=800), because that's exactly where the card sits and the runner would
   arrive there invisibly, hidden behind it. Waypoints are chosen so the
   runner's own visual centre — about 10 units in from its local origin —
   lines up near each sign, and its resting spot lines up with the relief
   checkmark at x=1080. */
.auth-scene__hero { will-change: transform; animation: auth-hero-tour 34s ease-in-out infinite; }
@keyframes auth-hero-tour {
    0%        { opacity: 0; transform: translateX(-260px); }
    3%        { opacity: 1; transform: translateX(-140px); }
    16%       { transform: translateX(200px); }
    22%       { transform: translateX(200px); }
    36%       { transform: translateX(790px); }
    42%       { transform: translateX(790px); }
    58%       { transform: translateX(1340px); }
    64%       { transform: translateX(1340px); }
    82%       { transform: translateX(1070px); }
    97%       { opacity: 1; transform: translateX(1070px); }
    100%      { opacity: 0; transform: translateX(1070px); }
}

/* A quick up-down bounce while running, on its own element so it never has
   to share a `transform` with the journey animation above. */
.auth-scene__runner-bob {
    animation: auth-runner-bob .42s ease-in-out infinite;
    transform-box: fill-box; transform-origin: bottom center;
}
@keyframes auth-runner-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Sweat: a fast little flick (always looping) whose parent visibility is
   synced to the SAME 34s journey — visible while running, gone during each
   pause and gone for good once it settles into relief. */
.auth-scene__sweat-group { animation: auth-sweat-visible 34s linear infinite; }
@keyframes auth-sweat-visible {
    0%, 14%  { opacity: 1; }
    16%, 22% { opacity: 0; }
    24%, 34% { opacity: 1; }
    36%, 42% { opacity: 0; }
    44%, 56% { opacity: 1; }
    58%, 64% { opacity: 0; }
    66%, 80% { opacity: 1; }
    82%, 100% { opacity: 0; }
}
.auth-scene__sweat {
    animation: auth-sweat-flick .5s ease-in infinite;
    transform-box: fill-box; transform-origin: center;
}
.auth-scene__sweat--2 { animation-delay: -.25s; }
@keyframes auth-sweat-flick {
    0%   { opacity: .9; transform: translate(0, 0) scale(1); }
    70%, 100% { opacity: 0; transform: translate(10px, 14px) scale(.4); }
}

/* ---- relief: the checkmark that lands once the tour is done ---- */
.auth-scene__relief {
    transform-box: fill-box; transform-origin: center;
    animation: auth-relief 34s ease-in-out infinite;
}
@keyframes auth-relief {
    0%, 82% { opacity: 0; transform: scale(.5); }
    87%     { opacity: 1; transform: scale(1.15); }
    93%, 97% { opacity: 1; transform: scale(1); }
    100%    { opacity: 0; transform: scale(.5); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-scene__cloud, .auth-scene__smoke, .auth-scene__sign,
    .auth-scene__hero, .auth-scene__runner-bob, .auth-scene__sweat-group,
    .auth-scene__sweat, .auth-scene__relief {
        animation: none !important;
    }
    .auth-scene__hero { opacity: 1; transform: translateX(1070px); }
    .auth-scene__sweat-group { opacity: 0; }
    .auth-scene__relief { opacity: 1; transform: scale(1); }
}

/* Narrower than the scene's native 1600px: it crops rather than shrinks, the
   same choice Park X's street scene makes. The runner's resting spot (x=1080)
   is offset from the viewport's own centre (x=800) specifically so the card
   never covers it — but on a narrow phone the crop is centred on x=800, so
   the resting moment can scroll out of the visible slice. Decorative only,
   so that's an acceptable trade rather than something to chase further. */

/* ---------- Attendance ---------- */
.punch-state { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.punch-state > div { display: flex; flex-direction: column; gap: 2px; }
.punch-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.punch-state strong { font-size: 19px; color: var(--navy-800); }

.net-state {
    font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin: 0 0 14px;
    border: 1px solid transparent;
}
.net-state.is-ok { background: var(--green-100); color: #076b3b; border-color: #b9e6cd; }
.net-state.is-blocked { background: #fff3d6; color: #8a5a00; border-color: #ffe0a3; }

.punch-result { font-size: 13px; margin: 10px 0 0; min-height: 1.2em; }
.punch-result.is-ok { color: var(--green-600); }
.punch-result.is-err { color: var(--coral-600); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin: 0 0 12px; }
.legend b { color: var(--navy-800); }

.inline-decide { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mini-input { font-size: 11.5px; padding: 3px 6px; width: 120px; border-radius: 5px; border: 1px solid var(--line); }

/* Attendance grid — dense on purpose, one month must fit on screen */
.sheet { font-size: 11.5px; }
.sheet th, .sheet td { padding: 3px 4px; }
.sheet .sheet-name { min-width: 150px; text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--card); z-index: 1; }
.sheet thead .sheet-name { z-index: 2; }
.sheet .sheet-day { text-align: center; width: 22px; font-weight: 600; }
.sheet .sheet-dow { font-weight: 400; color: var(--ink-3); font-size: 9.5px; }
.sheet .sheet-day.is-off { background: #f2f5fa; color: var(--ink-3); }
.sheet .sheet-sum { text-align: center; width: 34px; background: var(--bg); font-weight: 700; }
.sheet td.st-present  { color: var(--green-600); }
.sheet td.st-late     { color: #8a5a00; background: #fff8e8; }
.sheet td.st-half_day { color: #9a4b00; background: #fff1e4; }
.sheet td.st-absent   { color: var(--coral-600); background: #ffeef3; }
.sheet td.st-leave    { color: #045b78; background: var(--cyan-100); }

.tag-late { background: #fff3d6; color: #8a5a00; }
.tag-half_day { background: #ffe7d4; color: #9a4b00; }
.tag-pending { background: #fff3d6; color: #8a5a00; }
.tag-approved { background: var(--green-100); color: #076b3b; }
.tag-rejected { background: #ffe0e8; color: var(--coral-600); }
.tag-punch_in, .tag-punch_out { background: var(--cyan-100); color: #045b78; }
.tag-punch_blocked, .tag-approve, .tag-reject { background: #ede4ff; color: #5b2ec4; }

/* ---------- Leave, claims, tasks ---------- */
.right { text-align: right; }
.prewrap { white-space: pre-line; margin: 0; }
.is-overdue { color: var(--coral-600); font-weight: 600; }

.journey-row {
    display: grid; grid-template-columns: 130px 1fr 1fr 1.4fr 100px 90px;
    gap: 6px; margin-bottom: 6px;
}
.journey-row input { font-size: 12.5px; padding: 6px 8px; }

.checklist-items { list-style: none; margin: 0; padding: 0; }
.checklist-items li { padding: 3px 0; }
.checklist-items .is-done { text-decoration: line-through; color: var(--ink-3); }

.bar {
    display: inline-block; width: 74px; height: 6px; border-radius: 3px;
    background: var(--line); overflow: hidden; vertical-align: middle;
}
.bar-fill { display: block; height: 100%; background: var(--navy-600); border-radius: 3px; }

.tag-pri-low { background: #eceff4; color: var(--ink-2); }
.tag-pri-normal { background: var(--navy-100); color: var(--navy-800); }
.tag-pri-high { background: #fff3d6; color: #8a5a00; }
.tag-pri-urgent { background: #ffe0e8; color: var(--coral-600); }

.tag-open { background: var(--navy-100); color: var(--navy-800); }
.tag-in_progress { background: var(--cyan-100); color: #045b78; }
.tag-on_hold { background: #fff3d6; color: #8a5a00; }
.tag-completed { background: var(--green-100); color: #076b3b; }
.tag-cancelled { background: #eceff4; color: var(--ink-2); }

.tag-pending_supervisor, .tag-pending_hr { background: #fff3d6; color: #8a5a00; }
.tag-draft { background: #eceff4; color: var(--ink-2); }
.tag-reimbursed { background: var(--green-100); color: #076b3b; }
.tag-submit, .tag-comment, .tag-upload, .tag-download { background: var(--cyan-100); color: #045b78; }
.tag-cancel, .tag-salary_set, .tag-cron, .tag-install { background: #ede4ff; color: #5b2ec4; }

.table tfoot th { border-top: 2px solid var(--line); font-size: 12.5px; }

@media (max-width: 900px) {
    .journey-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .grid-2 { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .pay-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 40;
        transform: translateX(-100%); transition: transform .18s ease;
    }
    body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow); }
    body.nav-open::after {
        content: ''; position: fixed; inset: 0; background: rgba(8, 33, 79, .4); z-index: 35;
    }
    .icon-btn { display: block; }
    .content { padding: 16px; }
    .dl { grid-template-columns: 1fr; gap: 2px 0; }
    .dl dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media print {
    .sidebar, .topbar, .toolbar, .foot, .form-actions, .row-actions { display: none !important; }
    .card { border: 0; box-shadow: none; }
    body { background: #fff; }
}

/* ---------- Payroll ---------- */
.payslip { max-width: 900px; }
.payslip-head { display: flex; justify-content: space-between; align-items: flex-start;
                border-bottom: 2px solid var(--navy-700); padding-bottom: 12px; margin-bottom: 16px; }
.payslip-head h2 { margin: 0; font-size: 18px; color: var(--navy-800); }
.payslip-head p { margin: 2px 0 0; font-size: 12.5px; }
.payslip-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.payslip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.payslip-cols h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
                   letter-spacing: .05em; color: var(--ink-3); }
.payslip-net { margin: 18px 0 0; padding: 12px 14px; background: var(--navy-100);
               border-radius: 8px; font-size: 15px; display: flex; justify-content: space-between; }
.payslip-net strong { font-size: 19px; color: var(--navy-800); }
.inline-form { display: inline; }

.tag-locked { background: #fff3d6; color: #8a5a00; }
.tag-paid, .tag-deducted { background: var(--green-100); color: #076b3b; }
.tag-due { background: var(--navy-100); color: var(--navy-800); }
.tag-waived { background: #eceff4; color: var(--ink-2); }
.tag-running { background: var(--cyan-100); color: #045b78; }
.tag-closed { background: #eceff4; color: var(--ink-2); }
.tag-generate, .tag-lock, .tag-payslip_line, .tag-waive { background: #ede4ff; color: #5b2ec4; }

@media (max-width: 780px) {
    .payslip-meta, .payslip-cols { grid-template-columns: 1fr; }
}
@media print {
    .no-print { display: none !important; }
    .payslip { max-width: none; }
}

/* ---------- Performance & lifecycle ---------- */
.kpi-row { display: grid; grid-template-columns: 1fr 70px 60px; gap: 6px; margin-bottom: 6px; }
.kpi-row input { font-size: 12.5px; padding: 6px 8px; }
.sub-h { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase;
         letter-spacing: .05em; color: var(--ink-3); }
.notice.is-pinned { border-left: 3px solid var(--amber-500); }
.notice .card-h { align-items: center; }

.tag-available { background: var(--green-100); color: #076b3b; }
.tag-issued { background: var(--cyan-100); color: #045b78; }
.tag-repair { background: #fff3d6; color: #8a5a00; }
.tag-retired { background: #eceff4; color: var(--ink-2); }
.tag-lost { background: #ffe0e8; color: var(--coral-600); }
.tag-cleared { background: var(--cyan-100); color: #045b78; }
.tag-settled { background: var(--green-100); color: #076b3b; }
.tag-pending_self { background: #fff3d6; color: #8a5a00; }
.tag-issue, .tag-return, .tag-clear, .tag-settle, .tag-complete, .tag-increment,
.tag-close, .tag-download, .tag-payslip_line {
    background: #ede4ff; color: #5b2ec4;
}

/* Icons without their own glyph fall back to the generic bars mask. */

/* ---------- CRM pipeline ---------- */
.stage-strip { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
.stage-chip {
    flex: 1 0 auto; min-width: 92px; text-align: center; padding: 9px 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: 8px;
    color: var(--ink); text-decoration: none;
}
.stage-chip:hover { border-color: var(--navy-600); text-decoration: none; }
.stage-chip.is-active { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.stage-n { display: block; font-size: 18px; font-weight: 800; }
.stage-l { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }

.activity-form { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }

.tag-stage { background: var(--navy-100); color: var(--navy-800); }
.tag-lead, .tag-prospect { background: #fff3d6; color: #8a5a00; }
.tag-dormant, .tag-on_hold { background: #eceff4; color: var(--ink-2); }
.tag-blacklisted { background: #ffe0e8; color: var(--coral-600); }
.tag-approved, .tag-active { background: var(--green-100); color: #076b3b; }
.tag-confirmed { background: var(--navy-100); color: var(--navy-800); }
.tag-in_production, .tag-booked, .tag-planned { background: var(--cyan-100); color: #045b78; }
.tag-ready, .tag-arrived { background: #fff3d6; color: #8a5a00; }
.tag-shipped, .tag-delivered, .tag-received { background: var(--green-100); color: #076b3b; }
.tag-delayed, .tag-overdue { background: #ffe0e8; color: var(--coral-600); }

.tag-audit-passed { background: var(--green-100); color: #076b3b; }
.tag-audit-conditional { background: #fff3d6; color: #8a5a00; }
.tag-audit-failed { background: #ffe0e8; color: var(--coral-600); }
.tag-audit-not_audited { background: #eceff4; color: var(--ink-2); }

.tag-insp-passed { background: var(--green-100); color: #076b3b; }
.tag-insp-failed { background: #ffe0e8; color: var(--coral-600); }
.tag-insp-conditional { background: #fff3d6; color: #8a5a00; }
.tag-insp-pending { background: #eceff4; color: var(--ink-2); }

.tag-act-call, .tag-act-whatsapp { background: var(--green-100); color: #076b3b; }
.tag-act-email { background: var(--cyan-100); color: #045b78; }
.tag-act-meeting, .tag-act-visit { background: #ede4ff; color: #5b2ec4; }
.tag-act-sample { background: #fff3d6; color: #8a5a00; }
.tag-act-note { background: #eceff4; color: var(--ink-2); }
.tag-stage_move, .tag-activity, .tag-follow_up { background: #ede4ff; color: #5b2ec4; }


.brand-text { line-height: 1.25; }
.brand-text b { display: block; font-size: 10.5px; font-weight: 600; color: #7f95c4;
                letter-spacing: .06em; text-transform: uppercase; }

.auth-vendor { margin: 14px 0 0; font-size: 11.5px; text-align: center; }
.foot a { color: var(--ink-2); text-decoration: underline; }

/* =========================================================================
   MerchXCRM component pass — applied after the module styles so it wins.
   ========================================================================= */

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

body { background: var(--bg); font-size: 14px; }
a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

h1, h2, h3 { letter-spacing: -.01em; }

/* ---------- Buttons: MerchXCRM uses brand red for the primary action ---------- */
.btn {
    border-radius: 10px; font-weight: 600; font-size: 13.5px;
    padding: 9px 16px; gap: 7px; transition: background .12s ease, border-color .12s ease;
}
.btn .ico { width: 15px; height: 15px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn-plain { background: none; border-color: transparent; color: var(--ink-3); }
.btn-plain:hover { color: var(--ink-2); }
/* Destructive is deliberately not the brand red — an outline reads as
   "careful" where a filled brand button reads as "go". */
.btn-danger { background: #fff; border-color: #fca5a5; color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.linklike { color: var(--teal); }
.linklike.danger { color: var(--danger); }

/* ---------- Cards and tables ---------- */
.card {
    border-radius: var(--radius); border-color: var(--line);
    box-shadow: var(--shadow-sm); padding: 18px 20px;
}
.card-h { font-size: 13.5px; letter-spacing: -.005em; }
.stat { border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.stat-n { font-size: 25px; color: var(--ink); letter-spacing: -.02em; }
.stat-l { font-size: 11px; color: var(--ink-3); }

.table thead th {
    background: var(--surface); color: var(--ink-3);
    border-bottom: 1px solid var(--line); font-size: 10.5px;
}
.table tbody tr:hover { background: var(--surface); }
.table th, .table td { padding: 10px 12px; }

code { background: var(--chip-bg); color: var(--ink); }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=search], select, textarea {
    border-radius: 9px; border-color: var(--line); font-size: 13.5px; padding: 9px 11px;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(215, 38, 61, .12);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.err { color: var(--danger); }

/* ---------- Alerts ---------- */
.alert { border-radius: 10px; align-items: center; }
.alert .ico { width: 16px; height: 16px; flex: none; }
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-error { background: var(--brand-light); color: var(--brand-dark); border-color: #f7c7ce; }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-info { background: var(--teal-light); color: var(--teal-dark); border-color: #c3dcde; }
.alert-x { display: grid; place-items: center; padding: 2px; }
.alert-x .ico { width: 14px; height: 14px; }

/* ---------- Tags: neutral by default, colour only where it means something --- */
.tag { background: var(--chip-bg); color: var(--chip-fg); border-radius: 6px; padding: 3px 8px; }
.tag-active, .tag-approved, .tag-passed, .tag-present, .tag-completed,
.tag-paid, .tag-received, .tag-deducted, .tag-settled, .tag-delivered,
.tag-available, .tag-audit-passed, .tag-insp-passed, .tag-create {
    background: #dcfce7; color: #15803d;
}
.tag-pending, .tag-pending_supervisor, .tag-pending_hr, .tag-pending_self,
.tag-draft, .tag-late, .tag-due, .tag-locked, .tag-ready, .tag-on_hold,
.tag-repair, .tag-lead, .tag-prospect, .tag-conditional, .tag-audit-conditional,
.tag-insp-conditional, .tag-update {
    background: #fef3c7; color: #92400e;
}
.tag-rejected, .tag-absent, .tag-failed, .tag-terminated, .tag-lost,
.tag-blacklisted, .tag-overdue, .tag-delayed, .tag-delete, .tag-login_failed,
.tag-access_denied, .tag-csrf_failed, .tag-audit-failed, .tag-insp-failed {
    background: var(--brand-light); color: var(--brand-dark);
}
.tag-in_progress, .tag-in_production, .tag-shipped, .tag-booked, .tag-running,
.tag-open, .tag-confirmed, .tag-stage, .tag-login, .tag-restore, .tag-arrived {
    background: var(--teal-light); color: var(--teal-dark);
}

/* ---------- Pipeline strip ---------- */
.stage-chip { border-radius: 10px; }
.stage-chip.is-active { background: var(--brand); border-color: var(--brand); }
.stage-n { font-size: 17px; }

.pager-links .is-current { background: var(--brand); border-color: var(--brand); }
.bar-fill { background: var(--teal); }
.brand-mark { background: linear-gradient(135deg, var(--brand), var(--teal)); }

/* ---------- Auth pages ----------
   A flat sky, so it can never disagree with the scene's own horizon —
   the SVG draws no sky of its own and relies on this showing through. */
.auth-body {
    background: linear-gradient(180deg, #F3D9DC 0%, #F7E9DF 38%, #FBF3EC 68%, #FBFAF8 100%);
}
.auth-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 30px; }
.auth-brand { margin-bottom: 22px; }
.auth-brand .xc-logo { justify-content: center; margin-bottom: 10px; }
.auth-brand h1 { font-size: 17px; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sidebar {
        position: fixed; left: 0; top: 0; height: 100dvh;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow); }
    body.nav-open::after {
        content: ''; position: fixed; inset: 0; background: rgba(11, 17, 32, .5); z-index: 35;
    }
    .icon-btn[data-toggle] { display: grid; }
    .content { padding: 16px; }
    .user-name, .user-btn__chevron { display: none; }
}
@media (min-width: 901px) {
    .icon-btn[data-toggle] { display: none; }
}
@media print {
    .sidebar, .topbar, .foot, .no-print { display: none !important; }
    .content { padding: 0; max-width: none; }
}

/* Wordmark colour follows the variant: white on the sidebar, ink on cards. */
.xc-logo--light .xc-logo__word { color: #fff; }
.xc-logo--dark .xc-logo__word { color: var(--ink); }

/* Chevron and count sit inside .nav-link, so they need to out-specify it. */
.nav-link > .ico.nav-link__chevron { width: 14px; height: 14px; opacity: .55; }
.nav-search .ico.nav-search__icon { width: 15px; height: 15px; }

/* ---------- Submenu collapse, corrected ----------
   The grid 0fr→1fr trick needs one grid item, so .nav-children holds a single
   inner wrapper. visibility:hidden is gone: it still reserved layout space,
   which is what left the big gaps under a closed group. */
.nav-children {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease;
    margin: 0 0 2px 13px; padding: 0;
    border-left: 1px solid var(--sidebar-border);
}
.nav-children__inner { overflow: hidden; min-height: 0; padding-left: 11px; }
.nav-parent.is-open > .nav-children { grid-template-rows: 1fr; }
.nav-parent:not(.is-open) > .nav-children { border-left-color: transparent; }
.nav-parent:not(.is-open) .nav-sub,
.nav-parent.is-open .nav-sub { visibility: visible; }

/* ---------- Filter bars stay on one line ----------
   Inputs default to width:100%, which turned every filter into its own row. */
.filters { align-items: flex-end; row-gap: 10px; }
.filters > * { width: auto; flex: 0 0 auto; }
.filters > input[type=search] { width: 220px; min-width: 160px; flex: 1 1 200px; }
    /* Inside a labelled field the input must not flex, or it grows down
       the label's column axis into a very tall box. */
    .filters .inline-field input[type=search] { width: 220px; min-width: 160px; flex: 0 0 auto; }
.filters input[type=date], .filters input[type=text] { width: 150px; }
.filters select { width: auto; min-width: 140px; padding-right: 30px; }
.filters .inline-field { width: auto; }
.filters .inline-field select, .filters .inline-field input { width: 100%; }
.filters .check { margin: 0; align-self: center; white-space: nowrap; }
.filters .btn { flex: 0 0 auto; }

.toolbar { gap: 16px; align-items: flex-end; }
.toolbar .lede { margin-bottom: 0; }

@media (max-width: 720px) {
    .filters > *, .filters input[type=search] { width: 100%; flex: 1 1 100%; }
}

/* ---------- Menu search, corrected ----------
   The generic input[type=search] rule below matched .nav-search input at equal
   specificity and won on source order, wiping the padding that keeps the text
   clear of the icon and the "/" hint. Typed selectors fix that for good. */
.nav-search { display: block; }
.nav-search input[type=search] {
    display: block; width: 100%;
    padding: 9px 34px 9px 33px;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--sidebar-border);
    border-radius: 9px; color: #fff;
}
.nav-search input[type=search]::placeholder { color: var(--sidebar-text); }
.nav-search input[type=search]:focus {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(215, 38, 61, .55);
    box-shadow: 0 0 0 3px rgba(215, 38, 61, .15);
}
.nav-search .ico.nav-search__icon { top: 50%; transform: translateY(-50%); }
.nav-search__key { top: 50%; transform: translateY(-50%); }

/* ---------- Footer: product line sits right ---------- */
.foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.foot__left { color: var(--ink-3); }
.foot__right { margin-left: auto; text-align: right; }
.foot__version {
    font-variant-numeric: tabular-nums; padding: 2px 7px; border-radius: 5px;
    background: var(--chip-bg); color: var(--ink-2); font-size: 11px; font-weight: 600;
}

/* =========================================================================
   Responsive pass
   -------------------------------------------------------------------------
   The root cause of the horizontal scrolling was CSS Grid, not the phone:
   `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` floor means a
   column refuses to shrink below its content. One wide table therefore pushed
   the whole page out. `minmax(0, 1fr)` plus `min-width: 0` lets columns
   actually shrink, which is what makes the inner table scroll instead of the
   document.
   ========================================================================= */
.grid-2  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pay-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }

.grid-2 > *, .stat-row > *, .pay-grid > *, .form-grid > * { min-width: 0; }
.main-col, .content, .card, .table-wrap { min-width: 0; max-width: 100%; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1080px) {
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .stat-row, .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .content { padding: 14px; }
    .topbar { padding: 10px 14px; }
    .foot { padding: 4px 14px 20px; font-size: 11px; }
    .foot__right { text-align: left; margin-left: 0; }

    .card { padding: 14px; border-radius: 10px; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar .btn-row { justify-content: flex-start; }

    /* Filters stack rather than squeeze into unreadable slivers. */
    .filters { flex-direction: column; align-items: stretch; }
    .filters > *, .filters input, .filters select, .filters .btn { width: 100%; }
    .filters .inline-field { width: 100%; }

    /* One number per row reads better than four cramped ones. */
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { padding: 12px 14px; }
    .stat-n { font-size: 20px; }

    .page-title { font-size: 15px; }
    .payslip-cols, .payslip-meta { grid-template-columns: minmax(0, 1fr); }
    .journey-row, .kpi-row { grid-template-columns: minmax(0, 1fr); }

    /* Tables keep their shape and scroll sideways inside the card, so the
       page itself never does. */
    .table { font-size: 12.5px; min-width: 560px; }
    .table th, .table td { padding: 8px 9px; }
    .sheet { min-width: 720px; }

    /* Two-column label/amount tables that sit outside a .table-wrap — the
       payslip's earnings and deductions — must not take the 560px scroll
       width, or they push the page sideways. They fit their column instead. */
    .payslip-cols .table { min-width: 0; }

    .stage-strip { margin: 0 -14px 14px; padding: 0 14px 6px; }
    .row-actions { flex-wrap: wrap; gap: 6px; }
    .form-actions .btn { flex: 1 1 auto; }
    .dl { grid-template-columns: minmax(0, 1fr); }
    .dl dd { margin-bottom: 8px; }
}

@media (max-width: 480px) {
    .stat-row { grid-template-columns: minmax(0, 1fr); }
    .menu-pop { position: fixed; left: 12px; right: 12px; top: 60px; min-width: 0; }
    .menu-pop--notify:not([hidden]) {
        bottom: 12px; display: flex; flex-direction: column; overflow: hidden;
    }
    .menu-pop--notify .notify-list { flex: 1 1 auto; min-height: 0; max-height: none; }
}

/* ---------- Settings tabs ---------- */
.tabs {
    display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px;
    border-bottom: 1px solid var(--line); padding-bottom: 0;
}
.tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
    color: var(--ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tab .ico { width: 15px; height: 15px; }

/* =========================================================================
   Slide-over drawer
   -------------------------------------------------------------------------
   Add and edit forms used to sit permanently beside the list, which made
   every screen half form. They now live in a drawer opened by an explicit
   button. The form markup and its POST target are unchanged, so no
   controller had to move.
   ========================================================================= */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer::before {
    content: ''; position: absolute; inset: 0; background: rgba(11, 17, 32, .45);
    opacity: 0; transition: opacity .18s ease;
}
.drawer.is-open::before { opacity: 1; }

.drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
    background: var(--card); box-shadow: -8px 0 32px rgba(15, 23, 42, .18);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .2s ease;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.drawer__head h2 { margin: 0; font-size: 16px; }

.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }

.drawer__foot {
    position: sticky; bottom: -18px; display: flex; gap: 10px; flex-wrap: wrap;
    padding: 14px 0 0; margin-top: 14px; background: var(--card);
    border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
    .drawer__panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .drawer::before, .drawer__panel { transition: none; }
}

/* ---------- Invoice builder ---------- */
.invoice-row {
    display: grid; grid-template-columns: 150px 1fr 80px 70px 100px 90px;
    gap: 6px; align-items: center; margin-bottom: 6px;
}
.invoice-row input, .invoice-row select { font-size: 12.5px; padding: 7px 8px; }
.invoice-row__total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }

.invoice-totals {
    display: flex; gap: 22px; justify-content: flex-end; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.invoice-totals div { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.invoice-totals span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.invoice-totals strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.invoice-totals div:last-child strong { font-size: 20px; color: var(--brand); }

/* ---------- Printable documents ---------- */
.doc-sheet { max-width: 900px; }
.doc-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
            border-bottom: 2px solid var(--brand); padding-bottom: 14px; margin-bottom: 16px; }
.doc-company { margin: 0 0 4px; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
.doc-title { margin: 0 0 4px; font-size: 20px; color: var(--brand); letter-spacing: .04em; }
.doc-meta { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.doc-band { background: var(--surface); padding: 10px 12px; border-radius: 8px;
            font-size: 12.5px; color: var(--ink-2); margin: 0 0 16px; }
.doc-party { margin-bottom: 16px; }
.doc-party p { margin: 0 0 2px; }
.doc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
             color: var(--ink-3); font-weight: 700; margin: 0 0 4px; }
.doc-table { margin-bottom: 8px; }
.doc-table tfoot th { border-top: 1px solid var(--line); }
.doc-table tfoot .doc-total th { border-top: 2px solid var(--ink); font-size: 14px; }
.doc-block { margin: 14px 0; font-size: 12.5px; color: var(--ink-2); }
.doc-signatures { display: flex; gap: 40px; margin: 40px 0 10px; }
.doc-signatures div { flex: 1 1 0; text-align: center; }
.doc-signatures span { display: block; border-top: 1px solid var(--ink-3); margin-bottom: 6px; }
.doc-signatures p { margin: 0; font-size: 12px; color: var(--ink-2); }
.doc-foot { border-top: 1px solid var(--line); padding-top: 10px; margin: 16px 0 0;
            font-size: 11.5px; color: var(--ink-3); text-align: center; }

@media (max-width: 780px) {
    .invoice-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .doc-head { flex-direction: column; }
    .doc-head .right { text-align: left; }
}
@media print {
    .doc-sheet { max-width: none; border: 0; box-shadow: none; padding: 0; }
    /* The wrapper only exists so a six-column table can scroll on a phone.
       On paper there is nothing to scroll, and a clipped invoice is useless. */
    .doc-sheet .table-wrap { overflow: visible; }
}

/* ---------- Guidelines ---------- */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.guide-aside { position: sticky; top: 16px; }

.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list li + li { border-top: 1px solid var(--line); }

.guide-item { display: block; padding: 11px 4px; text-decoration: none; border-radius: 8px; }
.guide-item:hover { background: var(--surface); }
.guide-item.is-current { background: var(--surface); }
.guide-item__title { display: block; font-weight: 600; color: var(--ink); font-size: 13.5px; }
.guide-item.is-current .guide-item__title { color: var(--brand); }
.guide-item__sum { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* The article itself. Wider line-height than the rest of the app: this is the
   one screen people actually read rather than scan. */
.guide-body { max-width: 68ch; line-height: 1.65; color: var(--ink-2); font-size: 14px; }
.guide-body h3 { margin: 22px 0 8px; font-size: 14.5px; color: var(--ink);
                 letter-spacing: .01em; font-weight: 700; }
.guide-body h3:first-child { margin-top: 0; }
.guide-body p { margin: 0 0 12px; }
.guide-body ul, .guide-body ol { margin: 0 0 12px; padding-left: 20px; }
.guide-body li { margin-bottom: 5px; }
.guide-body li::marker { color: var(--ink-3); }
.guide-body strong { color: var(--ink); font-weight: 650; }
.guide-body code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
                   padding: 1px 5px; font-size: 12.5px; font-family: ui-monospace, "Cascadia Mono", monospace; }

@media (max-width: 900px) {
    .guide-layout { grid-template-columns: minmax(0, 1fr); }
    .guide-aside { position: static; }
}

/* A toolbar that carries only the add button keeps it on the right,
   so the button lands in the same place on every screen. */
.toolbar > .btn-row:only-child { margin-left: auto; }

/* A card heading with its own add button on the right. Used on detail pages,
   where each card owns the records it lists. */
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.card-head .card-h { margin-bottom: 0; }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-sm .ico { width: 14px; height: 14px; }

/* =========================================================================
   Menu search results
   -------------------------------------------------------------------------
   Matches are listed under the search box instead of filtering the tree in
   place. Hiding most of the menu mid-search removed the landmarks people
   navigate by, exactly when they were looking for something.
   ========================================================================= */
.sidebar__head { position: relative; z-index: 5; }
.nav-results {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 6;
    max-height: 340px; overflow-y: auto;
    background: var(--sidebar-bg-2); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px; padding: 4px; box-shadow: 0 14px 32px rgba(2, 6, 23, .55);
}
.nav-result {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 7px 9px; border-radius: 6px; text-decoration: none; color: #e8eefc;
    font-size: 12.5px; line-height: 1.3;
}
.nav-result:hover, .nav-result.is-marked { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-result.is-marked { box-shadow: inset 2px 0 0 var(--brand); }
.nav-result__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-result__group {
    flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--sidebar-text); opacity: .85;
}
.nav-results__empty { margin: 0; padding: 9px; font-size: 12px; color: var(--sidebar-text); }

/* ---------- Page help ---------- */
.drawer__head h2 .ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; color: var(--brand); }
.help-topic { margin-top: 0; }
.help-rule { border: 0; border-top: 1px solid var(--line); margin: 22px 0 18px; }
.help-more { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.help-more a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.help-more .ico { width: 15px; height: 15px; }
/* ---------- Install app ----------
   A <button> made to sit in the menu like the links above it. It is hidden
   until the browser confirms the site can be installed, so most of the time
   this rule set does nothing at all. */
.nav-link--install {
    width: 100%; font: inherit; text-align: left; cursor: pointer;
    background: none; border: 0; margin-top: 6px;
}
.nav-link--install::before {
    content: ""; position: absolute; left: 10px; right: 10px; top: -4px;
    border-top: 1px solid var(--sidebar-border);
}
.nav-link--install { position: relative; }
.nav-link--install .ico { color: var(--cyan-400, #5eead4); opacity: .9; }
.nav-link--install:hover .ico { opacity: 1; }
.nav-link--install[hidden] { display: none; }

/* =========================================================================
   Phase 8 — trade, compliance, costing, security
   ========================================================================= */

/* ---------- Deadline rows ----------
   A date that has passed should be visible from across the room, not found
   by reading a column. */
.lc-row--late  { background: rgba(215, 38, 61, .06); }
.lc-row--urgent{ background: rgba(215, 38, 61, .04); }
.lc-row--soon  { background: rgba(249, 165, 26, .07); }
.was { color: var(--ink-3); text-decoration: line-through; }
.is-late { color: var(--brand); font-weight: 600; }
.stat--late .stat-n { color: var(--brand); }

/* ---------- Supplier score ---------- */
.score { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.score--good { color: #15803d; }
.score--fair { color: #b45309; }
.score--poor { color: var(--brand); }

/* ---------- Costing sheet builder ---------- */
.costing-head, .costing-row {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 90px 100px 1.2fr;
    gap: 6px; align-items: center;
}
.costing-head {
    margin-bottom: 4px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-3); font-weight: 700;
}
.costing-row { margin-bottom: 6px; }
.costing-row input, .costing-row select { font-size: 12.5px; padding: 7px 8px; }
.costing-row [data-cost-amount] { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }

/* ---------- Bank format columns ---------- */
.bank-col-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }

/* ---------- Document pack meter ---------- */
.pack-figure { margin: 0 0 10px; font-size: 15px; }
.meter { height: 10px; border-radius: 20px; background: var(--surface); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: 20px; transition: width .3s ease; }
.meter__fill--part { background: linear-gradient(90deg, var(--brand), #f59e0b); }
.meter__fill--done { background: #16a34a; }

/* ---------- Two-factor ---------- */
.otp-input {
    font-size: 22px; letter-spacing: .32em; text-align: center;
    font-variant-numeric: tabular-nums;
}
.setup-key { margin: 10px 0; }
.setup-key code {
    display: block; padding: 12px 14px; font-size: 15px; letter-spacing: .08em;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    word-break: break-all;
}
.code-grid { list-style: none; margin: 0 0 16px; padding: 0;
             display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.code-grid code {
    display: block; padding: 9px 12px; text-align: center; font-size: 14px;
    letter-spacing: .06em; background: var(--surface);
    border: 1px solid var(--line); border-radius: 7px;
}

/* ---------- Top bar: search and saved views ---------- */
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search input[type=search] {
    width: 210px; padding: 8px 12px 8px 32px; font-size: 13px;
    border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
}
.topbar-search input[type=search]:focus {
    outline: none; background: var(--card); border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(215, 38, 61, .12);
}
.topbar-search__icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--ink-3); pointer-events: none;
}
.grow-search input[type=search] { width: 320px; max-width: 100%; }

.menu-pop--wide { min-width: 280px; }
.menu-pop__note { margin: 0; padding: 10px 12px; font-size: 12.5px; color: var(--ink-3); }
.menu-pop__form {
    display: grid; gap: 8px; padding: 10px 12px;
    border-top: 1px solid var(--line); margin-top: 6px;
}
.menu-pop__form input[type=text] { width: 100%; font-size: 13px; }
.menu-pop .chip { margin-left: auto; }

/* ---------- Collapsible detail ---------- */
.details { margin-top: 14px; }
.details > summary {
    cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    padding: 8px 0;
}
.details > summary:hover { color: var(--brand); }

@media (max-width: 900px) {
    .costing-head { display: none; }
    .costing-row  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bank-col-row { grid-template-columns: minmax(0, 1fr); }
    .topbar-search input[type=search] { width: 130px; }
    .grow-search input[type=search] { width: 100%; }
}
@media (max-width: 620px) {
    .topbar-search { display: none; }
}

/* ---------- Notifications dropdown (the top-bar bell) ---------- */
.menu-pop--notify { width: 340px; max-width: calc(100vw - 24px); padding: 0; }

.notify-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.notify-head strong { font-size: 13.5px; }
.notify-head .linklike { font-size: 12px; color: var(--brand); padding: 0; }

.notify-list { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; }
.notify-item {
    display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none;
    color: var(--ink); position: relative;
}
.notify-item:hover { background: var(--surface); }
/* Unread carry a brand rail and a heavier title; read ones fade back. */
.notify-item.is-unread { box-shadow: inset 2px 0 0 var(--brand); }
.notify-item:not(.is-unread) { opacity: .68; }
.notify-item__title { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.notify-item.is-unread .notify-item__title { color: var(--ink); }
.notify-item__body { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.notify-item__time { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.notify-empty { margin: 0; padding: 22px 14px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

.notify-foot {
    display: block; padding: 10px 14px; border-top: 1px solid var(--line);
    font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: center;
}
.notify-foot:hover { color: var(--brand); text-decoration: none; }

/* The bell is a button now, not a link — keep the badge anchored to it. */
.icon-btn--badge { position: relative; }