/* ============================================================
   AE Partners — Enterprise workspace design tokens
   Light + dark, indigo accent. Legacy variable names kept so
   existing component styles adopt the new system automatically.
   ============================================================ */

:root {
    --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* surfaces */
    --paper: #f6f7f9;      /* app canvas */
    --surface-2: #eef0f3;  /* subtle raised / hover */
    --card: #ffffff;       /* panels, tables, cards */
    --line: #e4e7eb;       /* borders / dividers */

    /* text */
    --ink: #16181d;        /* primary text */
    --ink-deep: #0f1115;   /* strongest text */
    --ink-soft: #626b76;   /* secondary text */

    /* accent (indigo) — links, active nav, focus, primary actions, progress */
    --accent: #5b5bd6;
    --accent-hover: #4b4bc4;
    --accent-soft: rgba(91, 91, 214, 0.12);
    --copper: #5b5bd6;     /* legacy accent name → indigo */

    /* status */
    --good: #2f9e44;
    --bad: #e03131;

    /* role accents (permissions matrix, team lists) */
    --role-admin: #5b5bd6;
    --role-editor: #2f9e7a;
    --role-reviewer: #c9822e;
    --role-viewer: #626b76;

    /* text that always sits on a coloured/dark fill */
    --on-dark: #ffffff;
    --cream: #ffffff;

    /* app-shell chrome (neutral dark, constant across themes) */
    --sidebar-bg: #17181c;
    --sidebar-fg: #c6cad2;
    --sidebar-fg-soft: #8a909b;
    --sidebar-active-bg: rgba(255, 255, 255, 0.08);

    /* admin rail — light values here, dark ones in the two dark blocks below */
    --rail-bg: var(--card);
    --rail-border: var(--line);
    --rail-divider: var(--line);
    --rail-brand-ink: var(--ink);
    --rail-brand-tag: var(--ink-soft);
    --rail-btn-bg: var(--surface-2);
    --rail-btn-border: var(--line);
    --rail-btn-ink: var(--ink-soft);
    --rail-btn-hover: #e4e7ec;
    --rail-group-ink: #8a909b;
    --rail-item-ink: #5c636e;
    --rail-item-hover: rgba(16, 18, 24, 0.05);
    --rail-active-bg: rgba(91, 91, 214, 0.1);
    --rail-active-ink: #3535a8;
    --rail-active-bar: var(--accent);
    --rail-pill: var(--accent);
    --rail-badge-bg: rgba(91, 91, 214, 0.14);
    --rail-badge-ink: #4b4bc4;
    --rail-count-ink: #8a909b;
    --rail-card-bg: var(--paper);
    --rail-card-ink: var(--ink);
    --rail-logout-ink: var(--ink-soft);
    --rail-logout-hover: rgba(16, 18, 24, 0.07);
    --rail-drawer-bg: var(--card);
    --rail-topbar-bg: var(--card);
    --rail-burger-bar: var(--ink);
    --rail-scrim: rgba(16, 18, 24, 0.45);
    --rail-modal-bg: var(--card);
    --rail-modal-border: var(--line);
    --rail-modal-title: var(--ink);
    --rail-modal-body: var(--ink-soft);
    --rail-cancel-bg: var(--surface-2);
    --rail-cancel-border: var(--line);
    --rail-cancel-ink: var(--ink);

    /* elevation */
    --shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.06), 0 1px 3px rgba(16, 18, 24, 0.05);
    --shadow-md: 0 4px 12px rgba(16, 18, 24, 0.08), 0 2px 4px rgba(16, 18, 24, 0.05);
    --shadow-lg: 0 12px 32px rgba(16, 18, 24, 0.14);

    --radius: 8px;
}

/* dark — applied when the user picks it, or by system default when unset */
:root[data-theme="dark"] {
    --paper: #0d0d12;
    --surface-2: #1b1b22;
    --card: #131319;
    --line: rgba(255, 255, 255, 0.08);

    --ink: #e8e8ec;
    --ink-deep: #f4f4f8;
    --ink-soft: rgba(232, 232, 236, 0.6);

    --accent: #6d5cf5;
    --accent-hover: #8b7bff;
    --accent-soft: rgba(109, 92, 245, 0.16);
    --copper: #6d5cf5;

    --good: #3ec77e;
    --bad: #f06d6d;

    --role-admin: #6d5cf5;
    --role-editor: #3ec77e;
    --role-reviewer: #e0a250;
    --role-viewer: rgba(232, 232, 236, 0.6);

    --sidebar-bg: #0a0a0e;

    --rail-bg: #0f0f12;
    --rail-border: rgba(255, 255, 255, 0.07);
    --rail-divider: rgba(255, 255, 255, 0.06);
    --rail-brand-ink: #ffffff;
    --rail-brand-tag: #77777f;
    --rail-btn-bg: rgba(255, 255, 255, 0.06);
    --rail-btn-border: rgba(255, 255, 255, 0.09);
    --rail-btn-ink: #c4c4cc;
    --rail-btn-hover: rgba(255, 255, 255, 0.11);
    --rail-group-ink: #63636d;
    --rail-item-ink: #9a9aa4;
    --rail-item-hover: rgba(255, 255, 255, 0.05);
    --rail-active-bg: rgba(124, 108, 240, 0.15);
    --rail-active-ink: #ffffff;
    --rail-active-bar: #7b6cf0;
    --rail-pill: #6c5ce7;
    --rail-badge-bg: rgba(124, 108, 240, 0.2);
    --rail-badge-ink: #c9c4f5;
    --rail-count-ink: #63636d;
    --rail-card-bg: rgba(255, 255, 255, 0.04);
    --rail-card-ink: #e6e6ea;
    --rail-logout-ink: #8f8f98;
    --rail-logout-hover: rgba(255, 255, 255, 0.07);
    --rail-drawer-bg: #0c0c0e;
    --rail-topbar-bg: #141419;
    --rail-burger-bar: #e6e6ea;
    --rail-scrim: rgba(6, 6, 8, 0.72);
    --rail-modal-bg: #17171c;
    --rail-modal-border: rgba(255, 255, 255, 0.1);
    --rail-modal-title: #ffffff;
    --rail-modal-body: #9a9aa4;
    --rail-cancel-bg: rgba(255, 255, 255, 0.07);
    --rail-cancel-border: rgba(255, 255, 255, 0.1);
    --rail-cancel-ink: #e6e6ea;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #0d0d12;
        --surface-2: #1b1b22;
        --card: #131319;
        --line: rgba(255, 255, 255, 0.08);

        --ink: #e8e8ec;
        --ink-deep: #f4f4f8;
        --ink-soft: rgba(232, 232, 236, 0.6);

        --accent: #6d5cf5;
        --accent-hover: #8b7bff;
        --accent-soft: rgba(109, 92, 245, 0.16);
        --copper: #6d5cf5;

        --good: #3ec77e;
        --bad: #f06d6d;

        --role-admin: #6d5cf5;
        --role-editor: #3ec77e;
        --role-reviewer: #e0a250;
        --role-viewer: rgba(232, 232, 236, 0.6);

        --sidebar-bg: #0a0a0e;

        --rail-bg: #0f0f12;
        --rail-border: rgba(255, 255, 255, 0.07);
        --rail-divider: rgba(255, 255, 255, 0.06);
        --rail-brand-ink: #ffffff;
        --rail-brand-tag: #77777f;
        --rail-btn-bg: rgba(255, 255, 255, 0.06);
        --rail-btn-border: rgba(255, 255, 255, 0.09);
        --rail-btn-ink: #c4c4cc;
        --rail-btn-hover: rgba(255, 255, 255, 0.11);
        --rail-group-ink: #63636d;
        --rail-item-ink: #9a9aa4;
        --rail-item-hover: rgba(255, 255, 255, 0.05);
        --rail-active-bg: rgba(124, 108, 240, 0.15);
        --rail-active-ink: #ffffff;
        --rail-active-bar: #7b6cf0;
        --rail-pill: #6c5ce7;
        --rail-badge-bg: rgba(124, 108, 240, 0.2);
        --rail-badge-ink: #c9c4f5;
        --rail-count-ink: #63636d;
        --rail-card-bg: rgba(255, 255, 255, 0.04);
        --rail-card-ink: #e6e6ea;
        --rail-logout-ink: #8f8f98;
        --rail-logout-hover: rgba(255, 255, 255, 0.07);
        --rail-drawer-bg: #0c0c0e;
        --rail-topbar-bg: #141419;
        --rail-burger-bar: #e6e6ea;
        --rail-scrim: rgba(6, 6, 8, 0.72);
        --rail-modal-bg: #17171c;
        --rail-modal-border: rgba(255, 255, 255, 0.1);
        --rail-modal-title: #ffffff;
        --rail-modal-body: #9a9aa4;
        --rail-cancel-bg: rgba(255, 255, 255, 0.07);
        --rail-cancel-border: rgba(255, 255, 255, 0.1);
        --rail-cancel-ink: #e6e6ea;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    }
}

html, body {
    font-family: var(--font-ui);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

h1:focus {
    outline: none;
}

::selection {
    background: var(--accent-soft);
}

.validation-message {
    color: var(--bad);
}

/* ---- global select theming ----
   Native <select> ignores the app theme (renders OS chrome) unless
   appearance is reset and a custom chevron is drawn. Applies everywhere
   except selects that opt into a bespoke look (.pill-select select). */
select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--ink);
    background-color: var(--card);
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
        linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) center, calc(100% - 0.85rem) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.5rem 2.2rem 0.5rem 0.7rem;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

select option {
    background: var(--card);
    color: var(--ink);
}

/* --- shared list-page toolbar (view toggle, search) --- */

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.search-box {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--ink);
    padding: 0.5rem 0.8rem;
    min-width: 18rem;
    box-shadow: var(--shadow-sm);
}

.search-box:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.view-switch {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 2px;
}

.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.9rem;
    border: none;
    background: none;
    color: var(--ink-soft);
    border-radius: 6px;
    cursor: pointer;
}

.view-btn svg {
    width: 16px;
    height: 16px;
}

.view-btn.active {
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

/* --- shared list-page filter bar (pill dropdowns) --- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.filter-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-right: 0.15rem;
}

.pill-select {
    position: relative;
    display: inline-block;
}

.pill-trigger {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.4rem 1.9rem 0.4rem 0.9rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.12s ease;
    white-space: nowrap;
}

.pill-trigger:hover {
    border-color: var(--ink-soft);
}

.pill-trigger:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* custom filter dropdown — replaces native <select> so the open list
   matches the app's dark theme instead of OS chrome */

.filter-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 11rem;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
}

.filter-option {
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--ink);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.filter-option:hover {
    background: var(--surface-2);
}

.filter-option.selected {
    color: var(--accent);
    font-weight: 600;
    background: var(--accent-soft);
}

/* chevron */
.pill-select::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--ink-soft);
    border-bottom: 1.5px solid var(--ink-soft);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.pill-select.active .pill-trigger {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.pill-select.active::after {
    border-color: var(--accent);
}

.clear-filters {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
}

.clear-filters:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* --- QuickGrid bridge (admin list pages) --- */

/* QuickGrid ships two stylesheets. Its Themes/Default.css is keyed entirely on
   [theme=default], so passing Theme="aep" on the grid switches every one of
   those rules off in one move — padding, bold headers, grey hover fills, the
   lot. What's left below is only the component's own scoped CSS, which we
   can't switch off and have to out-specify.

   Specificity matters here: app.css is linked BEFORE the scoped bundle
   (App.razor), so an equal-specificity rule loses. Every selector below leads
   with `table.quickgrid` / `div.table-pager` to add the element that wins the
   tie. Don't "simplify" those away. */

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

/* Table chrome — header, cell padding, row rules — lives here, not per page.
   This used to exist only as ~50 lines of `::deep .rq-grid th/td` on the requests
   page, so every other grid rendered as unpadded, unruled browser-default rows. */

table.quickgrid th {
    padding: 13px 12px 13px 0;
    text-align: left;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

table.quickgrid td {
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

/* The row inset belongs at the row edges, not between every column. */
table.quickgrid th:first-child,
table.quickgrid td:first-child {
    padding-left: 18px;
}

table.quickgrid th:last-child,
table.quickgrid td:last-child {
    padding-right: 18px;
}

/* Head corners round into the .tablecard that wraps the grid. */
table.quickgrid thead tr th:first-child {
    border-radius: 12px 0 0 0;
}

table.quickgrid thead tr th:last-child {
    border-radius: 0 12px 0 0;
}

/* No rule under the last real row — :last-child would land on a hidden filler
   row (see the display:none rule below); real rows carry aria-rowindex. */
table.quickgrid tbody tr[aria-rowindex]:not(:has(~ tr[aria-rowindex])) td {
    border-bottom: none;
}

/* QuickGrid pads every page out to ItemsPerPage with blank <tr>s so the table
   keeps a constant height — which reads as a run of empty ruled lines after the
   last record. Real rows carry aria-rowindex; the filler never does. */
table.quickgrid tbody tr:not([aria-rowindex]) {
    display: none;
}

/* Sortable headers render as <button>. Strip the button back to plain text so
   the page's own `th` typography (weight, size, letter-spacing) shows through
   unchanged — a sorted table must look identical to an unsorted one. */
table.quickgrid th .col-title {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 0;
    align-items: center;
}

table.quickgrid th button.col-title {
    cursor: pointer;
}

table.quickgrid th button.col-title:hover {
    color: var(--accent);
}

/* QuickGrid's caret is a black data-URI SVG — invisible on dark. Paint it with
   a mask instead so it takes currentColor and follows the theme. */
table.quickgrid th .sort-indicator {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.55;
}

table.quickgrid .col-sort-asc .sort-indicator,
table.quickgrid .col-sort-desc .sort-indicator {
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z"/></svg>') center / 0.7rem no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z"/></svg>') center / 0.7rem no-repeat;
}

table.quickgrid .col-sort-asc .sort-indicator {
    color: var(--accent);
    opacity: 1;
}

table.quickgrid .col-sort-desc .sort-indicator {
    color: var(--accent);
    opacity: 1;
}

/* QuickGrid 10.0.10 has no OnRowClick parameter and we don't control the <tr>,
   so "click the row to open it" lives on a wrapper inside each cell that should
   navigate. Cells that must NOT navigate (group filter chip, action buttons)
   simply omit it — that reproduces the old @onclick:stopPropagation exactly.

   The negative margins pull the wrapper out over the td's padding band so the
   whole cell is the target, not just the text inside it. They must stay in step
   with the `table.quickgrid td` padding above (and the wider first/last-child
   inset), otherwise the row grows or a dead edge comes back. */
.cell-hit {
    display: block;
    margin: -14px -12px -14px 0;
    padding: 14px 12px 14px 0;
}

table.quickgrid td:first-child .cell-hit {
    margin-left: -18px;
    padding-left: 18px;
}

table.quickgrid td:last-child .cell-hit {
    margin-right: -18px;
    padding-right: 18px;
}

/* Pager. Wrap every <Paginator> in <div class="table-pager"> — the wrapper is
   what lets these beat the Paginator's own scoped rules.

   Paginator's markup is:
     .paginator > .summary ("N items")
               > nav > .go-first .go-previous .pagination-text .go-next .go-last

   Its own CSS pins nav right with `margin-left:auto` and draws a bare grey
   rule on top. Both are replaced here: the whole control centres under the
   table as one card, using the same surface/border/radius as the table itself. */
div.table-pager {
    display: flex;
    justify-content: center;
    margin-top: 0.9rem;
}

div.table-pager .paginator {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--ink-soft);
}

/* Kills the `margin-left:auto` that would shove the buttons to the far right. */
div.table-pager .paginator nav {
    margin-left: 0;
    gap: 0.3rem;
}

div.table-pager .summary,
div.table-pager .pagination-text {
    margin: 0;
    white-space: nowrap;
}

div.table-pager .summary strong,
div.table-pager .pagination-text strong {
    font-weight: 600;
    color: var(--ink);
}

/* Divider between the item count and the controls, matching the table rules. */
div.table-pager .summary {
    padding-right: 1rem;
    border-right: 1px solid var(--line);
}

div.table-pager .pagination-text {
    padding: 0 0.35rem;
}

div.table-pager nav button {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    line-height: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* QuickGrid paints the four arrows as black data-URI SVGs, which vanish on the
   dark theme. Repaint them with a mask so they take currentColor instead.
   `background: none center/1rem no-repeat` in its scoped CSS is a shorthand, so
   background-image has to be cleared explicitly here. */
div.table-pager nav button.go-first,
div.table-pager nav button.go-previous,
div.table-pager nav button.go-next,
div.table-pager nav button.go-last {
    background-image: none;
    color: var(--ink-soft);
}

div.table-pager nav button.go-first::before,
div.table-pager nav button.go-previous::before,
div.table-pager nav button.go-next::before,
div.table-pager nav button.go-last::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 0.62rem;
    mask-size: 0.62rem;
}

div.table-pager nav button.go-previous::before,
div.table-pager nav button.go-next::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z"/></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z"/></g></svg>');
}

div.table-pager nav button.go-first::before,
div.table-pager nav button.go-last::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect height="2" width="20" y="20.5" x="2"/></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect height="2" width="20" y="20.5" x="2"/></g></svg>');
}

div.table-pager nav button:not([disabled]):hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background-color: var(--accent-soft);
    color: var(--accent);
}

div.table-pager nav button:not([disabled]):active {
    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

div.table-pager nav button[disabled] {
    opacity: 0.32;
}

/* --- shared table row actions (admin list pages) --- */

/* Keep action cells as real table-cells: display:flex on a <td> drops it out
   of table layout and makes the row divider misalign. Right-align instead. */
.cell-actions {
    white-space: nowrap;
    text-align: right;
}

.cell-actions > a,
.cell-actions > button {
    margin-left: 0.4rem;
    vertical-align: middle;
}

.cell-actions > a:first-child,
.cell-actions > button:first-child {
    margin-left: 0;
}

/* Use / Edit / Delete / user actions rendered as visible pill badges. */
.row-link,
.row-delete,
.row-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

.row-link,
.row-action {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.row-link:hover,
.row-action:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    text-decoration: none;
}

.row-delete {
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 12%, transparent);
    border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}

.row-delete:hover {
    background: color-mix(in srgb, var(--bad) 22%, transparent);
    text-decoration: none;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.2rem;
    color: white;
}

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

/* --- Kanban board (shared by Requests and Clients board view) --- */
.kanban-board {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 0.6rem;
}

.kanban-col {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 8rem;
    /* Cap to the viewport (170px board top + a little breathing room) so a full
       column scrolls its own cards instead of scrolling the whole page. */
    max-height: calc(100vh - 12rem);
    padding: 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius, 12px);
}

/* Cards scroll here; the column head stays pinned. */
.kanban-col-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink-soft) 28%, transparent) transparent;
}

.kanban-col-body::-webkit-scrollbar { width: 8px; }
.kanban-col-body::-webkit-scrollbar-track { background: transparent; }
.kanban-col-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink-soft) 28%, transparent);
    border-radius: 8px;
}

.kanban-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.2rem 0.2rem;
}

.kanban-col-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.kanban-card {
    cursor: pointer;
    margin: 0;
}

.kanban-card[draggable="true"] {
    cursor: grab;
}

.kanban-card[draggable="true"]:active {
    cursor: grabbing;
}

/* --- Back navigation, every detail page (see Shared/BackLink.razor) ---
   Global, not scoped: one look for every module. The chevron comes from
   Icon.ChevronLeft at 18px, sized down here so it matches the label's cap
   height instead of towering over it. */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.back-link svg {
    width: 15px;
    height: 15px;
}

.back-link:hover {
    opacity: .82;
    color: var(--accent);
    text-decoration: none;
}

/* Three pages sit the link inside a horizontal bar next to the title instead of
   on its own line above it. There the bar owns the spacing — the link's own
   bottom margin would just lift it off the title's centre line. */
.detail-bar .back-link,
.detail-head .back-link,
.wiz-topbar .back-link {
    margin-bottom: 0;
}

/* --- "nothing here" / "not found" copy, every module ---
   Was six scoped copies with six different sizes, paddings and greys. One rule:
   --ink-soft is re-declared inside the module token blocks to the same value
   their local --dim carries, so this reads identically in all of them. */

.empty-note {
    color: var(--ink-soft);
    font-size: 0.875rem;
    padding: 1.2rem 0;
}

/* --- Request status pill, every module (see Shared/StatusBadge.razor) ---
   One progression: unsent grey, out with the client accent, being filled amber,
   waiting on us blue, done green — and overdue red, which outranks all of them.
   Keyed on data-status rather than a .status-… class so it cannot collide with
   the .st-… container modifiers the requests board already uses. */

.status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.status-badge[data-status="draft"] {
    background: var(--surface-2);
    color: var(--ink-soft);
}

.status-badge[data-status="sent"] {
    background: var(--accent-soft);
    color: var(--accent);
}

.status-badge[data-status="inprogress"] {
    background: color-mix(in srgb, #e0a13a 18%, transparent);
    color: #b9791f;
}

.status-badge[data-status="submitted"] {
    background: color-mix(in srgb, #4a83d4 18%, transparent);
    color: #3a6fbf;
}

.status-badge[data-status="approved"] {
    background: color-mix(in srgb, var(--good) 16%, transparent);
    color: var(--good);
}

.status-badge[data-status="overdue"],
.status-badge[data-status="expired"] {
    background: color-mix(in srgb, var(--bad) 15%, transparent);
    color: var(--bad);
}

/* --- Buttons, every module (see Shared/Button.razor) ---
   There used to be no bare .btn rule at all, despite 27 elements asking for one:
   .btn-primary was redefined five times, .btn-ghost and .btn-cancel four each,
   every copy in its own module palette. So the same button was indigo on one
   screen, violet on another, and a different height on a third.

   One base + three variants + three sizes, on the global tokens. Legacy names
   (btn-save, btn-confirm, btn-invite, btn-discard, btn-cancel, btn-softdelete,
   btn-reactivate, btn-add) all map onto these — see git history if you are
   looking for one of them. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: 600 13px var(--font-ui);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* A button that is an <a> still matches the global `a:hover { text-decoration:
   underline }`, which outranks .btn on its own. Kill it on every state, or every
   link-shaped button underlines the moment you point at it. */
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
    text-decoration: none;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: default;
}

.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* sizes */

.btn-lg {
    height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 14.5px;
}

.btn-sm {
    height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 12.5px;
}

.btn-xs {
    height: 30px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 12px;
}

/* Variants.
   Doubled class (.btn.btn-variant) on purpose, not by accident: a module that
   colours its links — `.clients-page a { color: var(--c-link) }` — is (0,1,1) and
   would otherwise beat a single-class .btn-primary and repaint every button that
   happens to be an <a>. Two classes puts the button ahead of any `.page a` rule
   in both the resting and hover state. */

.btn.btn-primary {
    background: var(--accent);
    color: var(--on-dark);
}

.btn.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: var(--on-dark);
}

.btn.btn-ghost {
    border-color: var(--line);
    background: var(--card);
    color: var(--ink);
    font-weight: 550;
}

.btn.btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--ink);
}

.btn.btn-danger {
    border-color: color-mix(in srgb, var(--bad) 35%, transparent);
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    color: var(--bad);
    font-weight: 550;
}

.btn.btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bad) 18%, transparent);
    color: var(--bad);
}

/* Square icon-only button. Combine with a variant and a size:
   class="btn btn-ghost btn-icon btn-sm". */
.btn-icon {
    width: 38px;
    padding: 0;
}

.btn-icon.btn-sm {
    width: 34px;
}

.btn-icon.btn-xs {
    width: 30px;
}

/* Fill the row it sits in — the team cards put two buttons side by side and want
   the left one to stretch. Was .btn-reactivate.wide. */
.btn.wide {
    flex: 1;
}

/* --- List-page header, every module (see Shared/PageHeader.razor) ---
   .page-head lived in four scoped stylesheets, the title answered to three
   different class names and the eyebrow to three more. One block, global. */

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.page-eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.page-title {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.page-sub {
    margin: 0.4rem 0 0;
    max-width: 46rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.page-head-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* --- Row selection and the bulk bar, every list ---
   Was clients-only. Selection now means the same thing on every list view, so the
   tick, the "N selected" bar and its buttons are defined once. */

.tickbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: transparent;
    font-size: 10px;
    color: var(--on-dark);
    cursor: pointer;
}

.tickbox.on {
    border-color: var(--accent);
    background: var(--accent);
}

/* Partially selected: some rows on the page ticked, not all. */
.tickbox.some {
    border-color: var(--accent);
    color: var(--accent);
}

.bulkbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.bulk-count {
    color: var(--accent);
    font-size: 12px;
}

.bulk-btn {
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--card);
    color: var(--ink);
    font: 500 12px var(--font-ui);
    cursor: pointer;
}

.bulk-btn:hover {
    background: var(--surface-2);
}

.bulk-btn.danger {
    border-color: color-mix(in srgb, var(--bad) 35%, transparent);
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    color: var(--bad);
}

.bulk-btn.restore {
    border-color: color-mix(in srgb, var(--good) 35%, transparent);
    background: color-mix(in srgb, var(--good) 10%, transparent);
    color: var(--good);
}

.bulk-clear {
    border: none;
    background: none;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* --- Tab bar, every module ---
   Three near-identical copies existed (clients, team roster, team member) and the
   requests page had none at all, which is why its ACTIVE/ARCHIVED tabs rendered as
   plain browser buttons. One definition, on the global tokens. */

.tabbar {
    margin-bottom:2% !important;
    display: flex;
    gap: 26px;
    margin: 22px 0 0;
    border-bottom: 1px solid var(--line);
}

.tab {
    position: relative;
    padding: 0 0 11px;
    border: none;
    background: none;
    font: 600 11.5px var(--font-mono);
    letter-spacing: 0.11em;
    color: var(--ink-soft);
    cursor: pointer;
}

.tab.on {
    color: var(--ink);
}

/* The record count beside a tab label. Was hand-spaced with &nbsp; on the clients
   page and had no rule at all on requests, so it read as "ACTIVE34". */
.tab-count {
    margin-left: 7px;
    color: var(--ink-soft);
    font-weight: 500;
}

.tab.on .tab-count {
    color: var(--accent);
}

.tab-count:empty {
    display: none;
}

/* Underline for the active tab. A span rather than a border so switching tabs
   cannot shift the row by a pixel. */
.tab-bar {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: transparent;
}

.tab.on .tab-bar {
    background: var(--accent);
}

/* The row above a list: how many records on the left, the bulk bar on the right.
   Shared so selection controls sit in the same place on every list view. */

.listmeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.listmeta-strong {
    color: var(--ink);
    font-weight: 600;
}

/* A selected row reads as selected on every list, not just clients. */
.list-row.picked {
    background: var(--accent-soft);
}

/* The bulk bar's Dropdown would otherwise stretch to fill the flex row. */
.bulkbar .role-bulk,
.bulkbar .req-filter {
    min-width: 150px;
    max-width: 190px;
}

/* --- How a list row and a card respond to the pointer, everywhere ---
   Every list page had invented its own: some rows tinted, some did nothing, some
   cards lifted, some only changed border. Two classes now carry the behaviour and
   each page's own rule set keeps only its layout.

   Rows tint, cards lift. A row that lifted would tear the table apart, and a card
   that only tinted reads as disabled next to one that lifts. */

.list-row,
.grid-card {
    cursor: pointer;
}

.grid-card {
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Doubled class: the scoped `.mcard[b-x]` / `.tpl-card[b-x]` base borders are
   also (0,2,0) and load after app.css, so a single-class hover lost the tie —
   which is why only the requests cards picked up the accent border. */
.grid-card.grid-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.list-row {
    transition: background 0.15s ease;
}

.list-row:hover {
    background: var(--surface-2);
}

/* The per-row menu, the selection tick and anything else clickable inside a row
   or card is its own target — the pointer should not claim the whole surface. */
.list-row .row-menu-trigger,
.list-row .tickbox,
.grid-card .row-menu-trigger,
.grid-card .tickbox {
    cursor: pointer;
}

/* Respect the OS setting: the lift is decoration, the border change carries the
   meaning, so drop only the movement. */
@media (prefers-reduced-motion: reduce) {
    .grid-card:hover {
        transform: none;
    }
}

/* --- KPI strip, every module (dashboard's shape, made shared) ---
   Three strips existed: the dashboard's kpi-card (coloured left rail, icon chip,
   big value, label, footnote), the requests page's req-stat (dot + label + count)
   and the clients page's stat-card (label + value + note + progress bar). Same
   job, three looks. This is the dashboard's, with a dot and a track added so the
   other two fit without inventing anything. */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    /* Top margin matters on the detail pages, where the strip follows a header
       directly — the per-page .stat-row rules each carried 20-22px and losing it
       ran the cards into the heading. It collapses against .page-head's larger
       bottom margin on the list pages, so those are unchanged. */
    margin: 1.25rem 0 0.75rem;
}

.kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem 0.85rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* The left rail is what tells the four apart at a glance.
   Drawn as a clipped pseudo-element, not border-left: a 3px left border meeting a
   1px top border across a 12px corner radius renders a visible wedge above the
   corner — the coloured sliver poking out of the top-left of the first card. */
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--kpi-rail, transparent);
}

.kpi-l-indigo { --kpi-rail: var(--accent); }
.kpi-l-blue { --kpi-rail: #4a83d4; }
.kpi-l-amber { --kpi-rail: #e0a13a; }
.kpi-l-green { --kpi-rail: var(--good); }
.kpi-l-red { --kpi-rail: var(--bad); }
.kpi-l-grey { --kpi-rail: var(--ink-soft); }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.kpi-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 10px;
    flex: none;
}

.kpi-chip svg {
    width: 16px;
    height: 16px;
}

/* For a strip whose rows are statuses, not actions — a dot instead of an icon. */
.kpi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.kpi-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--ink-deep);
}

.kpi-label {
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.kpi-foot {
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* Optional fill bar, for a stat that is a share of something. */
.kpi-track {
    height: 4px;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.kpi-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

/* Icon-chip and fill tints. Shared with the dashboard's activity feed. */
.tone-indigo { background: var(--accent-soft); color: var(--accent); }
.tone-blue { background: color-mix(in srgb, #4a83d4 16%, transparent); color: #4a83d4; }
.tone-amber { background: color-mix(in srgb, #e0a13a 20%, transparent); color: #c9822e; }
.tone-red { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.tone-green { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.tone-grey { background: var(--surface-2); color: var(--ink-soft); }

.kpi-fill.tone-indigo { background: var(--accent); }
.kpi-fill.tone-blue { background: #4a83d4; }
.kpi-fill.tone-amber { background: #e0a13a; }
.kpi-fill.tone-red { background: var(--bad); }
.kpi-fill.tone-green { background: var(--good); }
.kpi-fill.tone-grey { background: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
    .kpi-card:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   Reminders module — mirrors Reminders.dc.html one-for-one. Every
   number below is the design's own px value. The token block re-points
   both the design's names and the app's legacy names, so nested
   components (Dropdown, Quill, ConfirmDialog) adopt the palette too.
   ------------------------------------------------------------------ */

.rem-shell,
.tpl-shell {
    --surface: #ffffff;
    --surface2: #f3f3f6;
    --head: #fafafb;
    --cat-mix: 12%;
    --field: #f5f5f8;
    --border: rgba(20, 20, 30, .09);
    --text: #181820;
    --dim: rgba(24, 24, 32, .58);
    --faint: rgba(24, 24, 32, .36);
    --danger: #dc4b4b;
    --danger-soft: rgba(220, 75, 75, .08);
    --warn-soft: #fdf6e3;
    --warn-border: #eacf7a;
    --warn-text: #8a6d12;

    --accent: #6d5cf5;
    --accent-hover: #5c4ae4;
    --accent-soft: rgba(109, 92, 245, .1);

    /* legacy names → design palette, for nested components */
    --line: rgba(20, 20, 30, .09);
    --card: #ffffff;
    --surface-2: #f3f3f6;
    --ink: #181820;
    --ink-soft: rgba(24, 24, 32, .58);
    --bad: #dc4b4b;

    color: var(--text);
}

:root[data-theme="dark"] .rem-shell,
:root[data-theme="dark"] .tpl-shell {
    --surface: #111117;
    --surface2: #191921;
    --head: #0f0f15;
    --cat-mix: 16%;
    --field: #0d0d12;
    --border: rgba(255, 255, 255, .075);
    --text: #e8e8ec;
    --dim: rgba(232, 232, 236, .6);
    --faint: rgba(232, 232, 236, .34);
    --danger: #f06d6d;
    --danger-soft: rgba(240, 109, 109, .14);
    --warn-soft: rgba(234, 179, 8, .1);
    --warn-border: rgba(234, 179, 8, .28);
    --warn-text: #e8c766;

    --accent: #6d5cf5;
    --accent-hover: #8b7bff;
    --accent-soft: rgba(109, 92, 245, .16);

    --line: rgba(255, 255, 255, .075);
    --card: #111117;
    --surface-2: #191921;
    --ink: #e8e8ec;
    --ink-soft: rgba(232, 232, 236, .6);
    --bad: #f06d6d;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rem-shell,
    :root:not([data-theme="light"]) .tpl-shell {
        --surface: #111117;
        --surface2: #191921;
        --head: #0f0f15;
        --cat-mix: 16%;
        --field: #0d0d12;
        --border: rgba(255, 255, 255, .075);
        --text: #e8e8ec;
        --dim: rgba(232, 232, 236, .6);
        --faint: rgba(232, 232, 236, .34);
        --danger: #f06d6d;
        --danger-soft: rgba(240, 109, 109, .14);
        --warn-soft: rgba(234, 179, 8, .1);
        --warn-border: rgba(234, 179, 8, .28);
        --warn-text: #e8c766;

        --accent: #6d5cf5;
        --accent-hover: #8b7bff;
        --accent-soft: rgba(109, 92, 245, .16);

        --line: rgba(255, 255, 255, .075);
        --card: #111117;
        --surface-2: #191921;
        --ink: #e8e8ec;
        --ink-soft: rgba(232, 232, 236, .6);
        --bad: #f06d6d;
    }
}

/* --- page head ---
   Size and weight come from the global .page-title now; only the tighter
   bottom margin these two modules want lives here. */

.rem-shell .page-title,
.tpl-shell .page-title {
    margin: 0 0 6px;
}

.rem-shell .page-title.no-sub {
    margin-bottom: 26px;
}

/* --- tabs --- */

.rem-shell .tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px;
}

/* This module's tabs are deliberately a different shape from the shared .tabbar —
   14px UI font, not 11.5px tracked mono. It overrides the family, size, weight and
   colour but inherits nothing else, so the tracking has to be reset explicitly. */
.rem-shell .tab {
    position: relative;
    border: none;
    background: none;
    padding: 12px 4px;
    margin-right: 22px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--dim);
    cursor: pointer;
}

.rem-shell .tab.on {
    font-weight: 650;
    color: var(--text);
}

.rem-shell .tab-rule {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

/* --- schedule cards --- */

.rem-shell .sched-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
    width: auto;
    padding:0% 2%;
}

.rem-shell .sched-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 20px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rem-shell .sched-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.rem-shell .sc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rem-shell .sc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rem-shell .sc-titles {
    min-width: 0;
}

.rem-shell .sc-name {
    font-size: 15.5px;
    font-weight: 650;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rem-shell .sc-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 7px;
    border-radius: 5px;
}

.rem-shell .sc-updated {
    font-size: 12px;
    color: var(--faint);
    margin-top: 2px;
}

.rem-shell .sc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rem-shell .sc-dot {
    width: 8px;
    height: 8px;
    border-radius: 2.5px;
    background: var(--accent);
    flex: none;
}

.rem-shell .sc-dot.faint {
    background: var(--faint);
}

.rem-shell .sc-rules {
    font-size: 13px;
    font-weight: 500;
    color: var(--dim);
}

.rem-shell .sc-foot {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: auto;
}

.rem-shell .sched-add {
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    background: transparent;
    padding: 20px;
    min-height: 180px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--dim);
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
}

.rem-shell .sched-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- template table --- */

.rem-shell .tmpl-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    width: auto;
    padding:0% 2%;
}

/* Was a CSS grid of `2.2fr 2.6fr 1fr 1.4fr`. `fr` has no table equivalent, so
   the same proportions are expressed as percentages of the 7.2fr total under
   table-layout:fixed — which distributes width the same way grid did. */
.rem-shell .tmpl-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.rem-shell .tmpl-table th:nth-child(1) { width: 30.56%; }
.rem-shell .tmpl-table th:nth-child(2) { width: 36.11%; }
.rem-shell .tmpl-table th:nth-child(3) { width: 13.89%; }
.rem-shell .tmpl-table th:nth-child(4) { width: 19.44%; }

.rem-shell .tmpl-table th {
    padding: 13px 0;
    text-align: left;
    background: var(--head);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dim);
}

.rem-shell .tmpl-table td {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

/* The grid put its 22px inset on the container, not between columns — so the
   padding goes on the outer edges only, or columns 2-4 would shift right. */
.rem-shell .tmpl-table th:first-child,
.rem-shell .tmpl-table td:first-child {
    padding-left: 22px;
}

.rem-shell .tmpl-table th:last-child,
.rem-shell .tmpl-table td:last-child {
    padding-right: 22px;
}

.rem-shell .tmpl-row {
    cursor: pointer;
}

.rem-shell .t-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.rem-shell .t-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rem-shell .t-icon.email {
    background: rgba(75, 139, 244, .15);
    color: #4b8bf4;
}

.rem-shell .t-icon.sms {
    background: rgba(45, 212, 191, .15);
    color: #2dd4bf;
}

.rem-shell .t-icon.team {
    background: var(--accent-soft);
    color: var(--accent);
}

.rem-shell .t-titles {
    min-width: 0;
}

.rem-shell .t-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-shell .t-internal {
    font-size: 11px;
    color: var(--faint);
}

.rem-shell .t-sub {
    font-size: 13px;
    color: var(--dim);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px;
}

.rem-shell .t-updated {
    font-size: 13px;
    color: var(--dim);
}

.rem-shell .t-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.rem-shell .tmpl-add {
    padding: 15px 22px;
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rem-shell .tmpl-add:hover {
    background: var(--surface2);
}

.rem-shell .tmpl-empty {
    padding: 22px;
    font-size: 13.5px;
    color: var(--dim);
    border-bottom: 1px solid var(--border);
}

/* --- editor layouts --- */

.rem-shell .sched-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    width:  auto;
    align-items: start;
    padding:0% 2%;
}

.rem-shell .tmpl-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    width: auto;
    align-items: start;
    padding:0% 2%;
}

.rem-shell .layout-main {
    min-width: 0;
}

@media (max-width: 1140px) {
    .rem-shell .sched-layout,
    .rem-shell .tmpl-layout {
        grid-template-columns: 1fr;
    }

    .rem-shell .rail {
        position: static;
    }
}

.rem-shell .panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 22px;
}

.rem-shell .settings-panel {
    margin-bottom: 26px;
}

.rem-shell .editor-panel {
    padding: 24px;
    min-width: 0;
}

/* --- fields --- */

.rem-shell .field-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.rem-shell .field {
    margin-bottom: 18px;
}

.rem-shell .field-last {
    margin-top: 18px;
}

.rem-shell .flabel {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--dim);
    margin-bottom: 7px;
}

.rem-shell .flabel .opt {
    color: var(--faint);
    font-weight: 400;
}

.rem-shell .finput,
.rem-shell .ftextarea {
    width: 100%;
    height: 40px;
    padding: 0 13px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--field);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13.5px;
}

.rem-shell .ftextarea {
    height: auto;
    min-height: 64px;
    padding: 10px 13px;
    line-height: 1.5;
    resize: vertical;
}

.rem-shell .finput:focus,
.rem-shell .ftextarea:focus,
.rem-shell .num-input:focus,
.rem-shell .time-input:focus,
.rem-shell .body-area:focus {
    outline: none;
    border-color: var(--accent);
}

.rem-shell input::placeholder,
.rem-shell textarea::placeholder {
    color: var(--faint);
}

.rem-shell .cbx-row {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

.rem-shell .cbx-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.rem-shell .cbx {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--field);
    flex: none;
    margin: 0;
    cursor: pointer;
}

.rem-shell .cbx:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.rem-shell .cbx:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 11px;
    height: 5px;
    border-left: 2.4px solid #fff;
    border-bottom: 2.4px solid #fff;
    transform: rotate(-45deg);
}

/* --- section head --- */

.rem-shell .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.rem-shell .sec-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.rem-shell .sec-sub {
    font-size: 12.5px;
    color: var(--dim);
    margin: 3px 0 0;
}

/* --- rule timeline --- */

.rem-shell .timeline {
    position: relative;
    padding-left: 40px;
    margin-top: 16px;
}

.rem-shell .timeline::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--border);
}

.rem-shell .tl-group {
    position: relative;
    margin: 26px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rem-shell .tl-group::before {
    content: "";
    position: absolute;
    left: -33px;
    top: 1px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--paper);
}

.rem-shell .tl-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text);
}

.rem-shell .tl-line {
    height: 1px;
    flex: 1;
    background: var(--border);
}

.rem-shell .tl-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--faint);
}

.rem-shell .rule {
    position: relative;
    margin-bottom: 12px;
}

.rem-shell .timeline .rule::before {
    content: "";
    position: absolute;
    left: -31px;
    top: 22px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--faint);
    box-shadow: 0 0 0 4px var(--paper);
}

/* Design draws the card with overflow:hidden; the themed Dropdown opens an
   absolutely-positioned menu inside the body, so it has to stay visible. */
.rem-shell .rule-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.rem-shell .rule-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 13px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}

.rem-shell .day-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    flex: none;
    line-height: 1;
}

.rem-shell .day-num {
    font-size: 16px;
    font-weight: 750;
}

.rem-shell .day-unit {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .8;
}

.rem-shell .rule-titles {
    flex: 1 1 130px;
    min-width: 130px;
}

.rem-shell .rule-title {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--text);
}

.rem-shell .rule-meta {
    font-size: 12px;
    color: var(--dim);
    margin-top: 2px;
}

.rem-shell .rule-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.rem-shell .ch-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--surface2);
    color: var(--dim);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.rem-shell .rule-remove {
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 550;
    color: var(--danger);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.rem-shell .rule-remove:hover {
    background: var(--danger-soft);
}

.rem-shell .rule-body {
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
    font-size: 13px;
    color: var(--dim);
}

/* the design's day box is 46px wide — no room for the native spinners */
.rem-shell .num-input::-webkit-outer-spin-button,
.rem-shell .num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rem-shell .num-input {
    appearance: textfield;
    -moz-appearance: textfield;
    width: 46px;
    height: 34px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--field);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 650;
}

.rem-shell .time-input {
    width: 92px;
    height: 34px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--field);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 550;
}

/* the themed Dropdown, sized to the design's <select> */
.rem-shell .rule-body .dd-trigger,
.rem-shell .insert-var .dd-trigger {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--field);
    color: var(--text);
    font-size: 13px;
    font-weight: 550;
}

.rem-shell .dd-wide {
    min-width: 190px;
}

.rem-shell .dd-med {
    min-width: 150px;
}

.rem-shell .dd-var {
    min-width: 120px;
}

.rem-shell .rule-add {
    position: relative;
    width: 100%;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    background: transparent;
    padding: 14px;
    margin-top: 16px;
    text-align: center;
    color: var(--dim);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rem-shell .rule-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.rem-shell .timeline .rule-add::before {
    content: "";
    position: absolute;
    left: -31px;
    top: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px dashed var(--faint);
}

.rem-shell .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

/* --- side rail --- */

.rem-shell .rail {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 20px;
    position: sticky;
    top: 20px;
}

.rem-shell .rail-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
}

.rem-shell .rail-sub {
    font-size: 12px;
    color: var(--dim);
    margin: -11px 0 14px;
}

.rem-shell .rail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}

.rem-shell .rail-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--faint);
    flex: none;
}

.rem-shell .rail-label {
    font-size: 13px;
    font-weight: 550;
    color: var(--text);
    flex: 1;
}

.rem-shell .rail-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--dim);
}

.rem-shell .rail-stats {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 16px;
}

.rem-shell .rail-stat-l {
    font-size: 11px;
    color: var(--dim);
    margin-bottom: 3px;
}

.rem-shell .rail-stat-v {
    font-size: 20px;
    font-weight: 750;
    color: var(--text);
}

.rem-shell .rail-note {
    margin-top: 16px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--faint);
}

/* --- message body editor --- */

.rem-shell .body-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.rem-shell .body-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dim);
}

.rem-shell .insert-var {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rem-shell .insert-var-note {
    font-size: 11.5px;
    color: var(--faint);
}

.rem-shell .body-box {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.rem-shell .body-area {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 16px 18px;
    min-height: 200px;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    resize: vertical;
}

/* A fieldset used only to disable a whole editor at once — it must not add any
   box of its own. min-width:0 stops the UA default from breaking the layout. */
.rem-shell .edit-lock {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.rem-shell .edit-lock:disabled {
    opacity: 0.72;
}

/* The same body shown to a role that may look but not change it. */
.rem-shell .body-readonly {
    padding: 16px 18px;
    min-height: 200px;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.7;
    color: var(--dim);
}

.rem-shell .readonly-note {
    margin: 0 0 16px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--dim);
}

/* Quill sits inside .body-box; the extra .rte in the chain outranks the
   component's own scoped rules, which load after app.css. */
.rem-shell .body-box .rte {
    border-radius: 0;
}

.rem-shell .body-box .rte .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--head);
    padding: 7px 10px;
}

.rem-shell .body-box .rte .ql-container.ql-snow {
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
}

.rem-shell .body-box .rte .ql-editor {
    min-height: 200px;
    max-height: none;
    padding: 16px 18px;
    line-height: 1.7;
    color: var(--text);
}

.rem-shell .sms-count {
    display: flex;
    justify-content: flex-end;
    font-size: 11.5px;
    color: var(--faint);
    margin-top: 8px;
}

.rem-shell .sms-warn {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 9px;
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--warn-text);
}

/* --- merge-variable rail --- */

.rem-shell .var-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rem-shell .var-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: var(--surface2);
    text-align: left;
    cursor: pointer;
}

.rem-shell .var-chip:hover {
    background: var(--accent-soft);
}

.rem-shell .var-token {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.rem-shell .var-desc {
    font-size: 12px;
    color: var(--dim);
    flex: 1;
    text-align: right;
}

/* ============================================================
   Hue chips — shared by Clients list/detail: entity type badges,
   group/partner dots and avatars. --h is set inline per item so
   every name paints a stable, theme-adaptive colour.
   ============================================================ */

.hue-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.55rem;
    border-radius: 7px;
    background: color-mix(in oklch, oklch(0.7 0.13 var(--h, 245)) 20%, var(--card));
    color: color-mix(in oklch, oklch(0.5 0.16 var(--h, 245)) 68%, var(--ink));
    white-space: nowrap;
}

.hue-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: oklch(0.62 0.16 var(--h, 245));
}

.hue-avatar {
    background: color-mix(in oklch, oklch(0.7 0.13 var(--h, 245)) 26%, var(--card));
    color: color-mix(in oklch, oklch(0.46 0.16 var(--h, 245)) 72%, var(--ink));
}

/* ------------------------------------------------------------------
   Templates module — mirrors Templates.dc.html one-for-one. Every
   number below is the design's own px value. Category colour rides on
   --cat, set by the .tpl-cat-… class on the group (list) or on the
   shell itself (detail page); --cat-mix is the tint strength, which
   the token block lifts from 12% to 16% in dark.
   ------------------------------------------------------------------ */

.tpl-shell {
    --cat: var(--accent);
}

/* Compliance / Onboarding / Tax are the design's own hues; the other five
   categories in TemplateCategories.All follow the same saturation. */
.tpl-cat-general { --cat: #64748b; }
.tpl-cat-accounting { --cat: #4b8bf4; }
.tpl-cat-bookkeeping { --cat: #0ea5e9; }
.tpl-cat-tax { --cat: #e0a11b; }
.tpl-cat-advisory { --cat: #a855f7; }
.tpl-cat-compliance { --cat: #14b8a6; }
.tpl-cat-payroll { --cat: #f97316; }
.tpl-cat-onboarding { --cat: #6d5cf5; }

.tpl-shell .page-title {
    margin: 0 0 22px;
}

/* --- toolbar --- */

.tpl-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.tpl-filter-label {
    font-size: 13px;
    color: var(--dim);
}

.tpl-toolbar-gap {
    flex: 1;
}

.tpl-filter {
    position: relative;
}

.tpl-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 38px;
    min-width: 170px;
    padding: 0 12px 0 14px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}

.tpl-filter-btn.open {
    border-color: var(--accent);
}

.tpl-filter-btn svg {
    opacity: .6;
    flex: none;
}

.tpl-shell .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.tpl-filter-menu {
    position: absolute;
    top: 44px;
    left: 0;
    z-index: 21;
    width: 250px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

.tpl-filter-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow: auto;
}

.tpl-filter-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.tpl-filter-row:hover {
    background: var(--surface2);
}

.tpl-check {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--faint);
    color: #fff;
}

.tpl-check.on {
    border: none;
    background: var(--accent);
}

.tpl-filter-name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--text);
}

.tpl-filter-count {
    font-size: 11.5px;
    color: var(--faint);
}

.tpl-filter-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding: 10px 6px 4px;
}

.tpl-filter-clear {
    font-size: 13px;
    font-weight: 550;
    color: var(--dim);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.tpl-filter-clear:hover {
    color: var(--text);
}

.tpl-filter-apply {
    height: 32px;
    padding: 0 18px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.tpl-search {
    position: relative;
}

.tpl-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--faint);
    pointer-events: none;
}

.tpl-search-input {
    width: 250px;
    height: 38px;
    padding: 0 14px 0 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
}

.tpl-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.tpl-search-input::placeholder {
    color: var(--faint);
}

.tpl-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* the shared ViewSwitch, wearing the design's segmented control */
.tpl-shell .view-switch {
    display: flex;
    gap: 0;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.tpl-shell .view-switch .view-btn {
    width: 32px;
    height: 30px;
    border-radius: 7px;
    background: transparent;
    color: var(--dim);
    box-shadow: none;
}

.tpl-shell .view-switch .view-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: none;
}

/* --- category group --- */

.tpl-group {
    margin-bottom: 34px;
}

.tpl-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.tpl-group-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cat) var(--cat-mix), transparent);
    color: var(--cat);
}

.tpl-group-title {
    font-family: var(--font-display);
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.tpl-group-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--faint);
    background: var(--surface2);
    padding: 2px 8px;
    border-radius: 20px;
}

.tpl-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--cat);
    background: color-mix(in srgb, var(--cat) var(--cat-mix), transparent);
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- card grid --- */

.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 16px;
}

.tpl-card {
    display: flex;
    flex-direction: column;
    min-height: 176px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.tpl-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tpl-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cat) var(--cat-mix), transparent);
    color: var(--cat);
}

.tpl-card-menu {
    position: relative;
}

.tpl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--faint);
    cursor: pointer;
}

.tpl-dots:hover {
    color: var(--text);
    background: var(--surface2);
}

.tpl-card-name {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.32;
    color: var(--text);
    margin-bottom: 6px;
}

.tpl-card-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dim);
    margin-bottom: 14px;
}

.tpl-card-spacer {
    flex: 1;
}

.tpl-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}

.tpl-card-meta {
    font-size: 12px;
    color: var(--faint);
    white-space: nowrap;
}

.tpl-card-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 176px;
    padding: 18px;
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    background: transparent;
    color: var(--dim);
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.tpl-card-new:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
    opacity: 1;
}

.tpl-card-new-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
}

/* --- list view --- */

.tpl-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

.tpl-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.tpl-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cat) var(--cat-mix), transparent);
    color: var(--cat);
}

.tpl-row-titles {
    min-width: 0;
    flex: 1;
}

.tpl-row-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-row-desc {
    font-size: 12.5px;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-row-fields {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dim);
}

.tpl-row-updated {
    flex: none;
    width: 120px;
    text-align: right;
    font-size: 12.5px;
    color: var(--faint);
}

.tpl-row-new {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.tpl-row-new:hover {
    background: var(--surface2);
    color: var(--accent);
    text-decoration: none;
    opacity: 1;
}

/* --- card row menu --- */

.tpl-shell .row-menu {
    position: absolute;
    right: 0;
    top: 28px;
    z-index: 21;
    min-width: 9rem;
    padding: 6px;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

.tpl-shell .row-menu a,
.tpl-shell .row-menu button {
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 550;
    color: var(--text);
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.tpl-shell .row-menu a:hover,
.tpl-shell .row-menu button:hover {
    background: var(--surface2);
    text-decoration: none;
    opacity: 1;
}

.tpl-shell .row-menu .menu-danger {
    color: var(--danger);
}

/* --- empty states --- */

.tpl-empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--dim);
}

.tpl-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.tpl-empty-sub {
    font-size: 13px;
}

/* --- detail page head --- */

.tpl-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tpl-head-icon {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cat) var(--cat-mix), transparent);
    color: var(--cat);
}

.tpl-head-main {
    flex: 1;
    min-width: 220px;
}

.tpl-head-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.tpl-head-sub {
    font-size: 12px;
    color: var(--faint);
}

.tpl-head-title {
    font-family: var(--font-display);
    margin: 0 0 6px;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--text);
}

.tpl-head-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dim);
    max-width: 640px;
}

.tpl-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* --- the shared RequestPreview, wearing the design's preview page ---
   Three-class selectors deliberately: the component's own scoped rules
   load after app.css, so a two-class override would lose the tie. */

.tpl-shell .prev-wrap .prev-lockbar {
    gap: 10px;
    padding: 11px 16px;
    border: none;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    margin-bottom: 20px;
}

.tpl-shell .prev-wrap .prev-lockbar svg {
    width: 16px;
    height: 16px;
}

.tpl-shell .prev-wrap .prev-shell {
    grid-template-columns: 250px 1fr;
    gap: 22px;
    max-width: auto;
    padding:0% 1%
}

.tpl-shell .prev-wrap .prev-nav {
    position: sticky;
    top: 20px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
}

.tpl-shell .prev-wrap .prev-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    padding: 2px 6px 12px;
    border-bottom: 1px solid var(--border);
    margin: 0 0 8px;
}

.tpl-shell .prev-wrap .prev-nav-list {
    gap: 2px;
}

.tpl-shell .prev-wrap .prev-nav-item {
    gap: 10px;
    padding: 9px 10px;
    margin-bottom: 2px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.35;
    color: var(--text);
}

.tpl-shell .prev-wrap .prev-nav-item:hover {
    background: var(--surface2);
}

.tpl-shell .prev-wrap .prev-nav-item.active {
    background: color-mix(in srgb, var(--cat) var(--cat-mix), transparent);
    color: var(--cat);
    font-weight: 650;
}

.tpl-shell .prev-wrap .prev-nav-sub {
    margin: 0;
    padding-left: 0;
    border-left: none;
}

.tpl-shell .prev-wrap .prev-nav-subitem {
    gap: 10px;
    padding: 8px 10px 8px 22px;
    margin-bottom: 2px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 450;
    line-height: 1.35;
    color: var(--dim);
}

.tpl-shell .prev-wrap .prev-nav-subitem:hover {
    background: var(--surface2);
}

.tpl-shell .prev-wrap .prev-nav-count {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--faint);
    background: var(--surface2);
    padding: 2px 8px;
    border-radius: 20px;
}

.tpl-shell .prev-wrap .prev-nav-tick {
    background: var(--cat);
}

.tpl-shell .prev-wrap .prev-body {
    gap: 16px;
    counter-reset: tplsec;
}

.tpl-shell .prev-wrap .prev-card {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: none;
}

/* Instructions is page 1 when present, so it bumps the counter and the
   first section head numbers itself 2 — exactly as the nav numbers it. */
.tpl-shell .prev-wrap #prev-instructions {
    counter-increment: tplsec;
}

.tpl-shell .prev-wrap .prev-section-head {
    gap: 11px;
    justify-content: flex-start;
    padding: 15px 20px;
    margin: 0 0 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface2);
}

.tpl-shell .prev-wrap .prev-section-head:not(.sub)::before {
    counter-increment: tplsec;
    content: counter(tplsec);
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 750;
    background: color-mix(in srgb, var(--cat) var(--cat-mix), transparent);
    color: var(--cat);
}

.tpl-shell .prev-wrap .prev-section-head.sub {
    margin-top: 16px;
}

.tpl-shell .prev-wrap .prev-heading {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.tpl-shell .prev-wrap .prev-subheading {
    flex: 1;
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
}

.tpl-shell .prev-wrap .prev-section-count {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--faint);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 20px;
}

/* --- page summary --- */

.tpl-shell .prev-wrap .sum {
    margin-top: 8px;
}

.tpl-shell .prev-wrap .sum-title {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--faint);
    margin: 0 0 10px;
}

.tpl-shell .prev-wrap .sum-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.tpl-shell .prev-wrap .sum-tile {
    flex: 1;
    min-width: 120px;
    gap: 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
}

.tpl-shell .prev-wrap .sum-figure {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 750;
    line-height: 1;
    color: var(--text);
}

.tpl-shell .prev-wrap .sum-tile:last-child .sum-figure {
    color: var(--accent);
}

.tpl-shell .prev-wrap .sum-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--dim);
    margin-top: 6px;
}

.tpl-shell .prev-wrap .sum-card {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
}

.tpl-shell .prev-wrap .sum-head {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 3px;
}

.tpl-shell .prev-wrap .sum-note {
    font-size: 12.5px;
    color: var(--dim);
    margin: 0 0 12px;
}

.tpl-shell .prev-wrap .sum-list {
    margin: 0;
}

.tpl-shell .prev-wrap .sum-list li {
    border-top: 1px solid var(--border);
}

.tpl-shell .prev-wrap .sum-link {
    font-size: 13.5px;
    font-weight: 550;
    color: var(--accent);
    padding: 9px 0;
}

.tpl-shell .prev-wrap .sum-link:hover {
    opacity: .8;
    text-decoration: none;
}

/* the design collapses the preview's two columns at 860px */
@media (max-width: 860px) {
    .tpl-shell .prev-wrap .prev-shell {
        grid-template-columns: 1fr;
    }

    .tpl-shell .prev-wrap .prev-nav {
        position: static;
    }
}

/* ------------------------------------------------------------------
   Requests module — mirrors Requests.dc.html one-for-one. Every number
   below is the design's own px value. The token block re-points both
   the design's names and the app's legacy names, so nested components
   (Dropdown, RequestPreview, PortalField, Quill) adopt the palette too.
   Status colour rides on --st / --st-soft, set by the .st-… class.
   ------------------------------------------------------------------ */

.req-shell {
    --bg: #f4f4f7;
    --surface: #ffffff;
    --surface2: #f2f2f6;
    --head: #fafafb;
    --border: rgba(20, 20, 30, .09);
    --text: #181820;
    --dim: rgba(24, 24, 32, .58);
    --faint: rgba(24, 24, 32, .36);
    --track: rgba(20, 20, 30, .1);

    --accent: #6d5cf5;
    --accent-hover: #5c4ae4;
    --accent-soft: rgba(109, 92, 245, .1);
    --ok: #16a34a;
    --ok-soft: rgba(22, 163, 74, .1);
    --ok-border: rgba(22, 163, 74, .28);
    --danger: #dc4b4b;
    --danger-soft: rgba(220, 75, 75, .08);

    /* chip fills — hex2rgba(colour, .12) in light, .16 in dark */
    --st-draft-soft: rgba(24, 24, 32, .12);
    --st-sent-soft: rgba(75, 139, 244, .12);
    --st-inprogress-soft: rgba(224, 161, 27, .12);
    --st-submitted-soft: rgba(22, 163, 74, .12);
    --st-approved-soft: rgba(109, 92, 245, .12);
    --st-expired-soft: rgba(220, 75, 75, .12);

    /* legacy names → design palette, for nested components */
    --line: rgba(20, 20, 30, .09);
    --card: #ffffff;
    --surface-2: #f2f2f6;
    --paper: #f4f4f7;
    --field: #f4f4f7;
    --ink: #181820;
    --ink-deep: #181820;
    --ink-soft: rgba(24, 24, 32, .58);
    --good: #16a34a;
    --bad: #dc4b4b;
    --radius: 12px;

    color: var(--text);
}

:root[data-theme="dark"] .req-shell {
    --bg: #0d0d12;
    --surface: #131319;
    --surface2: #1c1c24;
    --head: #0f0f15;
    --border: rgba(255, 255, 255, .08);
    --text: #e8e8ec;
    --dim: rgba(232, 232, 236, .6);
    --faint: rgba(232, 232, 236, .34);
    --track: rgba(255, 255, 255, .1);

    --accent: #6d5cf5;
    --accent-hover: #8b7bff;
    --accent-soft: rgba(109, 92, 245, .16);
    --ok: #3ec77e;
    --ok-soft: rgba(62, 199, 126, .12);
    --ok-border: rgba(62, 199, 126, .3);
    --danger: #f06d6d;
    --danger-soft: rgba(240, 109, 109, .14);

    --st-draft-soft: rgba(232, 232, 236, .16);
    --st-sent-soft: rgba(75, 139, 244, .16);
    --st-inprogress-soft: rgba(224, 161, 27, .16);
    --st-submitted-soft: rgba(62, 199, 126, .16);
    --st-approved-soft: rgba(109, 92, 245, .16);
    --st-expired-soft: rgba(240, 109, 109, .16);

    --line: rgba(255, 255, 255, .08);
    --card: #131319;
    --surface-2: #1c1c24;
    --paper: #0d0d12;
    --field: #0d0d12;
    --ink: #e8e8ec;
    --ink-deep: #e8e8ec;
    --ink-soft: rgba(232, 232, 236, .6);
    --good: #3ec77e;
    --bad: #f06d6d;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .req-shell {
        --bg: #0d0d12;
        --surface: #131319;
        --surface2: #1c1c24;
        --head: #0f0f15;
        --border: rgba(255, 255, 255, .08);
        --text: #e8e8ec;
        --dim: rgba(232, 232, 236, .6);
        --faint: rgba(232, 232, 236, .34);
        --track: rgba(255, 255, 255, .1);

        --accent: #6d5cf5;
        --accent-hover: #8b7bff;
        --accent-soft: rgba(109, 92, 245, .16);
        --ok: #3ec77e;
        --ok-soft: rgba(62, 199, 126, .12);
        --ok-border: rgba(62, 199, 126, .3);
        --danger: #f06d6d;
        --danger-soft: rgba(240, 109, 109, .14);

        --st-draft-soft: rgba(232, 232, 236, .16);
        --st-sent-soft: rgba(75, 139, 244, .16);
        --st-inprogress-soft: rgba(224, 161, 27, .16);
        --st-submitted-soft: rgba(62, 199, 126, .16);
        --st-approved-soft: rgba(109, 92, 245, .16);
        --st-expired-soft: rgba(240, 109, 109, .16);

        --line: rgba(255, 255, 255, .08);
        --card: #131319;
        --surface-2: #1c1c24;
        --paper: #0d0d12;
        --field: #0d0d12;
        --ink: #e8e8ec;
        --ink-deep: #e8e8ec;
        --ink-soft: rgba(232, 232, 236, .6);
        --good: #3ec77e;
        --bad: #f06d6d;
    }
}

/* ST = { Draft: faint, Sent: #4b8bf4, In progress: #e0a11b,
          Submitted: ok, Approved: accent } */
.req-shell .st-draft { --st: var(--faint); --st-soft: var(--st-draft-soft); }
.req-shell .st-sent { --st: #4b8bf4; --st-soft: var(--st-sent-soft); }
.req-shell .st-inprogress { --st: #e0a11b; --st-soft: var(--st-inprogress-soft); }
.req-shell .st-submitted { --st: var(--ok); --st-soft: var(--st-submitted-soft); }
.req-shell .st-approved { --st: var(--accent); --st-soft: var(--st-approved-soft); }
.req-shell .st-expired { --st: var(--bad); --st-soft: var(--st-expired-soft); }

/* --- shared atoms (status chip, avatar, ring, bar) --- */

.req-shell .st-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--st);
    background: var(--st-soft);
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.req-shell .st-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--st);
    flex: none;
}

.req-shell .st-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--st);
}

.req-shell .req-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 10px;
    background: var(--surface2);
    color: var(--dim);
    font-weight: 700;
}

.req-shell .req-avatar.lg { width: 42px; height: 42px; font-size: 12px; }
.req-shell .req-avatar.sm { width: 30px; height: 30px; font-size: 10.5px; }

.req-shell .req-ring {
    position: relative;
    flex: none;
}

.req-shell .req-ring svg { transform: rotate(-90deg); display: block; }

.req-shell .req-ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
}

.req-shell .req-ring.big .req-ring-pct { font-size: 12px; }

.req-shell .req-bar {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: var(--surface2);
    overflow: hidden;
}

.req-shell .req-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}

/* --- the shared Dropdown, wearing the design's selects --- */

.req-shell .req-filter .dd-trigger {
    position: relative;
    height: 38px;
    padding: 0 32px 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 550;
    min-width: 132px;
}

/* the design draws the chevron as a pinned glyph, so it leaves the flex row */
.req-shell .req-filter .dd-trigger::after {
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -4px;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint);
    transform: rotate(45deg);
}

.req-shell .req-select .dd-trigger {
    position: relative;
    height: 46px;
    padding: 0 40px 0 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

.req-shell .req-select .dd-trigger::after {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -5px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint);
    transform: rotate(45deg);
}

.req-shell .dd-menu {
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

/* ------------------------------------------------------------------
   The shared RequestPreview + PortalField + PageSummary, wearing the
   design's review column. Three-class selectors deliberately: those
   components' scoped rules load after app.css, so a two-class override
   would lose the tie.
   ------------------------------------------------------------------ */

.req-shell .prev-wrap .prev-lockbar {
    gap: 10px;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: var(--surface2);
    color: var(--dim);
    font-size: 13px;
    margin-bottom: 20px;
}

.req-shell .prev-wrap .prev-lockbar svg {
    width: 16px;
    height: 16px;
    color: var(--dim);
}

.req-shell .prev-wrap .prev-shell {
    grid-template-columns: 280px 1fr;
    gap: 24px;
    width: auto;
    padding:0% 2%
}

/* the client sits in the header card on this page, not in the rail */
.req-shell .prev-wrap .prev-client { display: none; }

.req-shell .prev-wrap .prev-nav {
    position: sticky;
    top: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: none;
}

.req-shell .prev-wrap .prev-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.req-shell .prev-wrap .prev-due {
    font-size: 11.5px;
    color: var(--faint);
    margin: 0 0 14px;
}

.req-shell .prev-wrap .prev-nav-list { gap: 0; }

.req-shell .prev-wrap .prev-nav-item {
    gap: 8px;
    padding: 9px 10px;
    margin-bottom: 2px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dim);
}

.req-shell .prev-wrap .prev-nav-item:hover { background: var(--surface2); }

.req-shell .prev-wrap .prev-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 650;
}

.req-shell .prev-wrap .prev-nav-sub {
    margin: 0;
    padding-left: 0;
    border-left: none;
}

.req-shell .prev-wrap .prev-nav-subitem {
    gap: 8px;
    padding: 8px 10px 8px 22px;
    margin-bottom: 2px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dim);
}

.req-shell .prev-wrap .prev-nav-subitem:hover { background: var(--surface2); }

.req-shell .prev-wrap .prev-nav-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--faint);
    background: none;
    padding: 0;
    flex: none;
}

.req-shell .prev-wrap .prev-nav-tick {
    width: 18px;
    height: 18px;
    background: var(--ok);
    color: #fff;
}

.req-shell .prev-wrap .prev-nav-tick svg { width: 11px; height: 11px; }

.req-shell .prev-wrap .prev-body { gap: 16px; }

.req-shell .prev-wrap .prev-card {
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: none;
}

.req-shell .prev-wrap .prev-section-head {
    align-items: baseline;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.req-shell .prev-wrap .prev-section-head.sub { margin-top: 16px; }

.req-shell .prev-wrap .prev-heading {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.req-shell .prev-wrap .prev-subheading {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.req-shell .prev-wrap .prev-section-count {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--faint);
    background: none;
    padding: 0;
}

/* --- question cards --- */

.req-shell .prev-wrap .field-row {
    display: flex;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: none;
    margin: 0;
}

.req-shell .prev-wrap .field-no {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.req-shell .prev-wrap .field-main {
    flex: 1;
    min-width: 0;
    gap: 0;
}

.req-shell .prev-wrap .field-label {
    font-size: 15px;
    font-weight: 650;
    color: var(--text);
    margin-bottom: 8px;
}

.req-shell .prev-wrap .field-description {
    font-size: 13px;
    color: var(--dim);
    margin-bottom: 10px;
}

/* a locked answer reads as a filled block, not an input */
.req-shell .prev-wrap .field-row.locked :is(input[type=text], input[type=number], input[type=date], textarea) {
    width: 100%;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--dim);
    padding: 10px 14px;
    background: var(--surface2);
    border: none;
    border-radius: 10px;
    margin-bottom: 14px;
    opacity: 1;
}

.req-shell .prev-wrap .yesno-group,
.req-shell .prev-wrap .checkbox-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.req-shell .prev-wrap .yesno-option,
.req-shell .prev-wrap .checkbox-option {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--dim);
}

.req-shell .prev-wrap .field-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.req-shell .prev-wrap .field-actions .review {
    display: flex;
    align-items: center;
    gap: 12px;
}

.req-shell .prev-wrap .review-hint {
    font-size: 12.5px;
    color: var(--faint);
}

.req-shell .prev-wrap .pill {
    height: 27px;
    padding: 0 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--dim);
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.req-shell .prev-wrap .pill.approve {
    border-color: var(--ok-border);
    background: var(--ok-soft);
    color: var(--ok);
}

.req-shell .prev-wrap .pill.changes { color: var(--accent); }
.req-shell .prev-wrap .pill.changes:hover { background: var(--accent-soft); }

.req-shell .prev-wrap .pill.comment {
    margin-left: auto;
    font-weight: 600;
}

.req-shell .prev-wrap .pill.comment:hover {
    background: var(--surface2);
    color: var(--text);
}

/* --- page summary --- */

.req-shell .prev-wrap .sum { margin-top: 26px; }

.req-shell .prev-wrap .sum-title {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 10px;
}

.req-shell .prev-wrap .sum-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.req-shell .prev-wrap .sum-tile {
    flex: 1;
    min-width: 120px;
    gap: 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: none;
}

.req-shell .prev-wrap .sum-figure {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 750;
    line-height: 1;
    color: var(--text);
}

.req-shell .prev-wrap .sum-tile:last-child .sum-figure { color: var(--accent); }

.req-shell .prev-wrap .sum-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dim);
    margin-top: 6px;
}

.req-shell .prev-wrap .sum-card {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: none;
}

.req-shell .prev-wrap .sum-done {
    display: flex;
    align-items: center;
    gap: 12px;
}

.req-shell .prev-wrap .sum-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.req-shell .prev-wrap .sum-check svg { width: 15px; height: 15px; }

.req-shell .prev-wrap .sum-head {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 3px;
}

.req-shell .prev-wrap .sum-note {
    font-size: 12.5px;
    color: var(--dim);
    margin: 0 0 10px;
}

.req-shell .prev-wrap .sum-list { margin: 0; }
.req-shell .prev-wrap .sum-list li { border-top: 1px solid var(--border); }

.req-shell .prev-wrap .sum-link {
    font-size: 13.5px;
    font-weight: 550;
    color: var(--accent);
    padding: 9px 0;
}

.req-shell .prev-wrap .sum-link:hover { opacity: .8; text-decoration: none; }

/* the design collapses the review columns at 900px */
@media (max-width: 900px) {
    .req-shell .prev-wrap .prev-shell { grid-template-columns: 1fr; }
    .req-shell .prev-wrap .prev-nav { position: static; }
}

/* ============================================================
   Landing + login ("vault") tokens.
   Dark is the design, literal; light is the same layout on paper.
   light-dark() picks per used colour-scheme, so one token list
   covers both — the theme toggle just flips color-scheme below.
   ponytail: needs light-dark() (Chrome 123 / Safari 17.5 / FF 120).
   ============================================================ */

.landing-shell,
.auth-shell {
    color-scheme: light dark;

    --lv-bg: light-dark(#f6f7f9, #08080b);
    --lv-fg: light-dark(#16181d, #ffffff);
    --lv-fg-60: light-dark(#4b535e, rgba(255, 255, 255, 0.6));
    --lv-fg-55: light-dark(#4b535e, rgba(255, 255, 255, 0.55));
    --lv-fg-50: light-dark(#626b76, rgba(255, 255, 255, 0.5));
    --lv-fg-40: light-dark(#757d88, rgba(255, 255, 255, 0.4));
    --lv-fg-35: light-dark(#868e99, rgba(255, 255, 255, 0.35));
    --lv-fg-32: light-dark(#8d95a0, rgba(255, 255, 255, 0.32));

    --lv-line-soft: light-dark(#eef0f3, rgba(255, 255, 255, 0.04));
    --lv-hairline: light-dark(#e4e7eb, rgba(255, 255, 255, 0.055));
    --lv-line-mid: light-dark(#e8ebef, rgba(255, 255, 255, 0.06));
    --lv-line: light-dark(#e4e7eb, rgba(255, 255, 255, 0.07));
    --lv-line-09: light-dark(#e4e7eb, rgba(255, 255, 255, 0.09));
    --lv-line-10: light-dark(#dfe3e8, rgba(255, 255, 255, 0.1));
    --lv-line-12: light-dark(#d8dde3, rgba(255, 255, 255, 0.12));
    --lv-line-strong: light-dark(#cfd5dc, rgba(255, 255, 255, 0.16));
    --lv-line-hover: light-dark(#9aa3ae, rgba(255, 255, 255, 0.4));
    --lv-footline: light-dark(#e4e7eb, rgba(255, 255, 255, 0.05));

    --lv-surface: light-dark(#ffffff, rgba(255, 255, 255, 0.02));
    --lv-surface-2: light-dark(#ffffff, rgba(255, 255, 255, 0.03));
    --lv-surface-3: light-dark(#f2f3f6, rgba(255, 255, 255, 0.04));
    --lv-tint: light-dark(rgba(109, 92, 245, 0.08), rgba(109, 92, 245, 0.14));
    --lv-tint-2: light-dark(rgba(109, 92, 245, 0.03), rgba(109, 92, 245, 0.05));
    --lv-chrome-fill: light-dark(linear-gradient(180deg, #ffffff, #fbfbfd), linear-gradient(180deg, rgba(34, 34, 46, 0.42), rgba(13, 13, 19, 0.18)));

    --lv-violet: #6d5cf5;
    --lv-violet-2: #7b6bff;
    --lv-violet-strong: light-dark(#6d5cf5, #8b7cff);
    --lv-violet-text: light-dark(#5b4bd8, #a99cff);
    --lv-violet-eyebrow: light-dark(#5b4bd8, #9b8cff);
    --lv-violet-soft: light-dark(rgba(109, 92, 245, 0.1), rgba(109, 92, 245, 0.16));
    --lv-violet-line: light-dark(rgba(109, 92, 245, 0.35), rgba(139, 124, 255, 0.28));
    --lv-violet-line-2: light-dark(rgba(109, 92, 245, 0.4), rgba(139, 124, 255, 0.4));
    --lv-violet-icon-bg: light-dark(rgba(109, 92, 245, 0.1), rgba(109, 92, 245, 0.15));
    --lv-violet-icon-line: light-dark(rgba(109, 92, 245, 0.22), rgba(139, 124, 255, 0.25));
    --lv-violet-icon-fg: light-dark(#6d5cf5, #a99cff);
    --lv-teal: light-dark(#0f9b84, #5eead4);
    --lv-teal-soft: light-dark(rgba(15, 155, 132, 0.12), rgba(94, 234, 212, 0.12));
    --lv-amber: light-dark(#b3761c, #f0a840);
    --lv-amber-soft: light-dark(rgba(179, 118, 28, 0.12), rgba(240, 168, 64, 0.14));
    --lv-bar: light-dark(#dfe2e8, #2a2a38);

    --lv-grad-a: light-dark(#6d5cf5, #a99cff);
    --lv-grad-b: light-dark(#0f9b84, #5eead4);

    --lv-glow-1: light-dark(rgba(109, 92, 245, 0.14), rgba(109, 92, 245, 0.3));
    --lv-glow-2: light-dark(rgba(94, 234, 212, 0.16), rgba(94, 234, 212, 0.09));
    --lv-vignette: light-dark(rgba(16, 18, 24, 0.05), rgba(0, 0, 0, 0.5));

    --lv-card-bg: light-dark(#ffffff, linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)));
    --lv-card-line: light-dark(#e4e7eb, rgba(255, 255, 255, 0.1));
    /* two tokens: light-dark() takes exactly two args, and a shadow list has commas */
    --lv-card-shadow: light-dark(0 30px 70px -35px rgba(16, 18, 24, 0.35), 0 40px 100px -30px rgba(0, 0, 0, 0.85));
    --lv-card-inset: light-dark(inset 0 1px 0 rgba(255, 255, 255, 0), inset 0 1px 0 rgba(255, 255, 255, 0.09));
    --lv-field-bg: light-dark(#f6f7f9, rgba(255, 255, 255, 0.03));
}

/* the site toggle drives which half of every light-dark() applies */
:root[data-theme="light"] .landing-shell,
:root[data-theme="light"] .auth-shell { color-scheme: light; }

:root[data-theme="dark"] .landing-shell,
:root[data-theme="dark"] .auth-shell { color-scheme: dark; }

/* ==========================================================================
   Auth card — design 5a "vault, refined".
   --------------------------------------------------------------------------
   Global rather than a .razor.css because sign-in and password reset are
   separate components rendering the same card; scoped styles can't be shared.
   ========================================================================== */

.login-card {
    width: 420px;
    max-width: 100%;
    border-radius: 20px;
    padding: 38px 40px 30px;
    background: var(--lv-card-bg);
    border: 1px solid var(--lv-card-line);
    box-shadow: var(--lv-card-shadow), var(--lv-card-inset);
    animation: rise-in 0.5s ease-out;
}

.login-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
}

.login-mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: block;
    box-shadow: 0 12px 28px -6px rgba(109, 92, 245, 0.75);
}

.login-eyebrow {
    margin-top: 16px;
    font: 600 10.5px "JetBrains Mono", monospace;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lv-violet-eyebrow);
}

.login-title {
    font: 700 24px/1.15 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin: 8px 0 0;
    letter-spacing: -0.015em;
}

.login-sub {
    font: 400 13px/1.5 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-60);
    margin: 10px 0 0;
    text-align: center;
}

/* --- Microsoft SSO --- */

.ms-button {
    width: 100%;
    height: 46px;
    border-radius: 9px;
    border: 1px solid var(--lv-line-strong);
    background: var(--lv-surface);
    color: var(--lv-fg);
    font: 500 13.5px "Schibsted Grotesk", var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
}

.ms-button:hover {
    border-color: var(--lv-line-hover);
}

.ms-button:disabled {
    cursor: not-allowed;
}

.ms-form {
    margin: 0;
}

.ms-logo {
    display: grid;
    grid-template-columns: 8px 8px;
    grid-template-rows: 8px 8px;
    gap: 2px;
}

.ms-logo i:nth-child(1) { background: #f25022; }
.ms-logo i:nth-child(2) { background: #7fba00; }
.ms-logo i:nth-child(3) { background: #00a4ef; }
.ms-logo i:nth-child(4) { background: #ffb900; }

/* Shown in place of the password form once Entra SSO is the only way in. */
.login-sso-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--lv-fg-35);
}

.login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.login-or span {
    flex: 1;
    height: 1px;
    background: var(--lv-line-09);
}

.login-or em {
    font: 400 11px "JetBrains Mono", monospace;
    font-style: normal;
    color: var(--lv-fg-35);
}

/* --- fields --- */

.login-label {
    display: block;
    font: 500 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-60);
    margin: 0 0 8px;
}

.login-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.login-forgot {
    font: 500 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-violet-eyebrow);
    text-decoration: none;
}

.login-forgot:hover {
    text-decoration: underline;
}

.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
    width: 100%;
    height: 46px;
    border-radius: 9px;
    border: 1px solid var(--lv-line-10);
    background: var(--lv-field-bg);
    color: var(--lv-fg);
    font: 400 14px "Schibsted Grotesk", var(--font-ui);
    padding: 0 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card input::placeholder {
    color: var(--lv-fg-35);
}

.login-card input:focus {
    outline: none;
    border-color: var(--lv-violet);
    box-shadow: 0 0 0 3px var(--lv-violet-soft);
}

/* email block spacing, then the password block */
.login-card input[type="email"] {
    margin-bottom: 13px;
}

.password-wrap {
    position: relative;
    margin-bottom: 18px;
}

.password-wrap input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--lv-fg-40);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.password-toggle:hover {
    color: var(--lv-fg-60);
}

.password-toggle svg {
    width: 17px;
    height: 17px;
}

.login-button {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 9px;
    background: var(--lv-violet);
    color: #fff;
    font: 600 14px "Schibsted Grotesk", var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.login-button:hover {
    background: var(--lv-violet-2);
}

.login-error {
    display: block;
    color: var(--bad);
    font: 400 12px "Schibsted Grotesk", var(--font-ui);
    margin: 0 0 10px;
}

/* Confirmations and expiry notices — same shape as .login-error, calmer colour. */
.login-note {
    display: block;
    color: var(--lv-fg-60);
    background: var(--lv-tint);
    border: 1px solid var(--lv-violet-line);
    border-radius: 9px;
    padding: 11px 13px;
    font: 400 12.5px/1.5 "Schibsted Grotesk", var(--font-ui);
    margin: 0 0 16px;
}

/* Back to the sign-in page from a reset screen. */
.login-foot {
    text-align: center;
    margin: 18px 0 0;
    font: 400 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-60);
}

.login-foot a {
    color: var(--lv-violet-eyebrow);
    text-decoration: none;
}

.login-foot a:hover {
    text-decoration: underline;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card { animation: none; }
}

/* ==========================================================================
   Inline video players
   --------------------------------------------------------------------------
   VideoEmbeds.Expand rewrites recognised video links into this wrapper at
   render time. It lives here rather than in a .razor.css because the markup
   arrives through MarkupString, which never carries a Blazor scope attribute —
   scoped rules would not match it.
   ========================================================================== */

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 44rem;
    margin: 1rem 0;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line);
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ============================================================
   Team module tokens. The redesign is dark-first; the light
   values below are its counterpart so the module follows the
   app's theme toggle instead of forcing dark on everyone.
   ============================================================ */

:root {
    --t-canvas: #f1f3f6;
    --t-panel: #ffffff;
    --t-panel-2: #f7f8fa;
    --t-panel-3: #eef0f4;
    --t-modal: #ffffff;
    --t-field: #ffffff;
    --t-field-2: #ffffff;
    --t-idle: #eceff3;
    --t-hover: #f4f6f9;
    --t-hover-2: #e8ebf0;
    --t-hover-3: #eceff3;
    --t-track: #e4e7ec;
    --t-track-2: #e4e7ec;
    --t-switch-on: #6f5bf0;
    --t-pick-on: #f0edff;
    --t-reactivate-bg: #f0edff;
    --t-reactivate-hover: #e5e0ff;
    --t-invite-hover: #f4f1ff;
    --t-invite-plus: #e9e4ff;
    --t-accent: #5b4be0;
    --t-accent-hi: #4c3ccf;
    --t-link: #5b4be0;
    --t-link-hi: #4436c4;
    --t-violet: #6f5bf0;
    --t-violet-soft: #4436c4;
    --t-violet-tint: #ece9ff;
    --t-violet-tint-2: #e0dbff;
    --t-eyebrow: #5b4be0;
    --t-on-accent: #ffffff;
    --t-green: #1f8a54;
    --t-green-tint: #e2f3e9;
    --t-green-tint-2: #e2f3e9;
    --t-amber: #9a6a0c;
    --t-amber-tint: #fbf1da;
    --t-amber-ink: #7a570e;
    --t-red: #c0392f;
    --t-red-tint: #fbe7e5;
    --t-red-ink: #a3302a;
    --t-red-bg: #fdedec;
    --t-red-bg-hover: #fbe0de;
    --t-red-btn: #b5484f;
    --t-blue: #2b6cb0;
    --t-blue-tint: #e6effa;
    --t-grey-tint: #eef0f3;
    --t-grey-dot: #626b76;
    --t-avatar-ink: #4b3f8a;
    --t-off-ink: #7c8590;
    --t-arrow: #9aa2ad;
    --t-sep: #c3c9d1;
    --t-g0: #16181d;
    --t-g-strong: #16181d;
    --t-g1: #1f2229;
    --t-g2: #343a43;
    --t-g3: #3d434c;
    --t-g4: #4b525c;
    --t-g5: #545b65;
    --t-g6: #5a626c;
    --t-g7: #626b76;
    --t-g7b: #656e79;
    --t-g8: #69727d;
    --t-g9: #6f7883;
    --t-g9b: #727b86;
    --t-g9c: #757e89;
    --t-g10: #767f8a;
    --t-g11: #7c8590;
    --t-g12: #838c96;
    --t-g12b: #838c96;
    --t-g12c: #878f99;
    --t-g13: #8a929c;
    --t-g14: #919aa3;
    --t-line: rgba(16, 18, 24, 0.10);
    --t-line-2: rgba(16, 18, 24, 0.14);
    --t-line-3: rgba(16, 18, 24, 0.12);
    --t-line-4: rgba(16, 18, 24, 0.16);
    --t-line-5: rgba(16, 18, 24, 0.09);
    --t-line-soft: rgba(16, 18, 24, 0.07);
    --t-line-hair: rgba(16, 18, 24, 0.08);
    --t-line-faint: rgba(16, 18, 24, 0.06);
    --t-line-faint-2: rgba(16, 18, 24, 0.07);
    --t-line-dash: rgba(16, 18, 24, 0.18);
    --t-line-strong: rgba(16, 18, 24, 0.24);
    --t-line-strong-2: rgba(16, 18, 24, 0.20);
    --t-line-box: rgba(16, 18, 24, 0.28);
    --t-dash-accent: rgba(111, 91, 240, 0.35);
    --t-dash-accent-hi: rgba(111, 91, 240, 0.6);
    --t-focus: rgba(111, 91, 240, 0.55);
    --t-accent-border: rgba(111, 91, 240, 0.35);
    --t-amber-border: rgba(154, 106, 12, 0.45);
    --t-amber-border-2: rgba(154, 106, 12, 0.28);
    --t-red-border: rgba(192, 57, 47, 0.24);
    --t-red-border-2: rgba(192, 57, 47, 0.3);
    --t-scrim: rgba(16, 18, 24, 0.45);
    --t-shadow-menu: 0 12px 32px rgba(16, 18, 24, 0.16);
    --t-shadow-modal: 0 24px 60px rgba(16, 18, 24, 0.22);
    --t-shadow-accent: 0 6px 18px -8px rgba(91, 75, 224, 0.8);
    --t-av-0: #e6e2f6;
    --t-av-1: #e0eaf2;
    --t-av-2: #e3f0e1;
    --t-av-3: #f6e8de;
    --t-av-4: #f1e5f3;
    --t-av-5: #e0eff1;
    --t-av-6: #f1eedb;
    --t-av-7: #e8e1f6;
    --t-av-8: #e1e9f3;
    --t-av-9: #f5e4e5;
    --t-av-10: #e1f1e7;
}

:root[data-theme="dark"] {
    --t-canvas: #08080b;
    --t-panel: #0b0b10;
    --t-panel-2: #0e0e14;
    --t-panel-3: #0c0c11;
    --t-modal: #0e0e15;
    --t-field: #12121a;
    --t-field-2: #14141c;
    --t-idle: #16161d;
    --t-hover: #12121a;
    --t-hover-2: #1a1a24;
    --t-hover-3: #1e1e28;
    --t-track: #191921;
    --t-track-2: #1b1b23;
    --t-switch-on: #3d2fa8;
    --t-pick-on: #161228;
    --t-reactivate-bg: #171429;
    --t-reactivate-hover: #1f1b38;
    --t-invite-hover: #100e1c;
    --t-invite-plus: #1a1630;
    --t-accent: #6f5bf0;
    --t-accent-hi: #7f6dff;
    --t-link: #a394ff;
    --t-link-hi: #c1b6ff;
    --t-violet: #8b7cf8;
    --t-violet-soft: #b9adff;
    --t-violet-tint: #1e1a33;
    --t-violet-tint-2: #241f3d;
    --t-eyebrow: #7a6ce0;
    --t-on-accent: #ffffff;
    --t-green: #79c98f;
    --t-green-tint: #16241b;
    --t-green-tint-2: #1b2a1e;
    --t-amber: #e0b463;
    --t-amber-tint: #241f14;
    --t-amber-ink: #dcc08a;
    --t-red: #e08a8a;
    --t-red-tint: #2b1c1c;
    --t-red-ink: #d8a9a9;
    --t-red-bg: #1c1315;
    --t-red-bg-hover: #241719;
    --t-red-btn: #b5484f;
    --t-blue: #7fa9e8;
    --t-blue-tint: #1a2333;
    --t-grey-tint: #1a1a22;
    --t-grey-dot: #8b8b99;
    --t-avatar-ink: #cfc9e8;
    --t-off-ink: #71717f;
    --t-arrow: #4b4b5a;
    --t-sep: #3a3a46;
    --t-g0: #f2f2f5;
    --t-g-strong: #d7d7e0;
    --t-g1: #e8e8ef;
    --t-g2: #d5d5de;
    --t-g3: #c8c8d2;
    --t-g4: #c3c3ce;
    --t-g5: #b6b6c2;
    --t-g6: #9d9daa;
    --t-g7: #8b8b99;
    --t-g7b: #8d8d9a;
    --t-g8: #83838f;
    --t-g9: #7c7c8a;
    --t-g9b: #7b7b88;
    --t-g9c: #7f7f8d;
    --t-g10: #757582;
    --t-g11: #6f6f7d;
    --t-g12: #6a6a78;
    --t-g12b: #6d6d7b;
    --t-g12c: #676774;
    --t-g13: #63636f;
    --t-g14: #5f5f6d;
    --t-line: rgba(255, 255, 255, 0.07);
    --t-line-2: rgba(255, 255, 255, 0.09);
    --t-line-3: rgba(255, 255, 255, 0.08);
    --t-line-4: rgba(255, 255, 255, 0.1);
    --t-line-5: rgba(255, 255, 255, 0.06);
    --t-line-soft: rgba(255, 255, 255, 0.045);
    --t-line-hair: rgba(255, 255, 255, 0.055);
    --t-line-faint: rgba(255, 255, 255, 0.04);
    --t-line-faint-2: rgba(255, 255, 255, 0.05);
    --t-line-dash: rgba(255, 255, 255, 0.12);
    --t-line-strong: rgba(255, 255, 255, 0.16);
    --t-line-strong-2: rgba(255, 255, 255, 0.14);
    --t-line-box: rgba(255, 255, 255, 0.18);
    --t-dash-accent: rgba(139, 124, 248, 0.28);
    --t-dash-accent-hi: rgba(139, 124, 248, 0.5);
    --t-focus: rgba(139, 124, 248, 0.5);
    --t-accent-border: rgba(139, 124, 248, 0.3);
    --t-amber-border: rgba(224, 180, 99, 0.4);
    --t-amber-border-2: rgba(224, 180, 99, 0.22);
    --t-red-border: rgba(224, 138, 138, 0.22);
    --t-red-border-2: rgba(224, 138, 138, 0.25);
    --t-scrim: rgba(4, 4, 7, 0.7);
    --t-shadow-menu: 0 22px 50px -14px #000;
    --t-shadow-modal: 0 40px 90px -30px #000;
    --t-shadow-accent: 0 6px 18px -8px #6f5bf0;
    --t-av-0: #2a2340;
    --t-av-1: #1e2a33;
    --t-av-2: #22301f;
    --t-av-3: #31241c;
    --t-av-4: #2b1f2e;
    --t-av-5: #1c2a2c;
    --t-av-6: #2d2a1c;
    --t-av-7: #241d33;
    --t-av-8: #1f2733;
    --t-av-9: #2c2224;
    --t-av-10: #1e2b24;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --t-canvas: #08080b;
        --t-panel: #0b0b10;
        --t-panel-2: #0e0e14;
        --t-panel-3: #0c0c11;
        --t-modal: #0e0e15;
        --t-field: #12121a;
        --t-field-2: #14141c;
        --t-idle: #16161d;
        --t-hover: #12121a;
        --t-hover-2: #1a1a24;
        --t-hover-3: #1e1e28;
        --t-track: #191921;
        --t-track-2: #1b1b23;
        --t-switch-on: #3d2fa8;
        --t-pick-on: #161228;
        --t-reactivate-bg: #171429;
        --t-reactivate-hover: #1f1b38;
        --t-invite-hover: #100e1c;
        --t-invite-plus: #1a1630;
        --t-accent: #6f5bf0;
        --t-accent-hi: #7f6dff;
        --t-link: #a394ff;
        --t-link-hi: #c1b6ff;
        --t-violet: #8b7cf8;
        --t-violet-soft: #b9adff;
        --t-violet-tint: #1e1a33;
        --t-violet-tint-2: #241f3d;
        --t-eyebrow: #7a6ce0;
        --t-on-accent: #ffffff;
        --t-green: #79c98f;
        --t-green-tint: #16241b;
        --t-green-tint-2: #1b2a1e;
        --t-amber: #e0b463;
        --t-amber-tint: #241f14;
        --t-amber-ink: #dcc08a;
        --t-red: #e08a8a;
        --t-red-tint: #2b1c1c;
        --t-red-ink: #d8a9a9;
        --t-red-bg: #1c1315;
        --t-red-bg-hover: #241719;
        --t-red-btn: #b5484f;
        --t-blue: #7fa9e8;
        --t-blue-tint: #1a2333;
        --t-grey-tint: #1a1a22;
        --t-grey-dot: #8b8b99;
        --t-avatar-ink: #cfc9e8;
        --t-off-ink: #71717f;
        --t-arrow: #4b4b5a;
        --t-sep: #3a3a46;
        --t-g0: #f2f2f5;
        --t-g-strong: #d7d7e0;
        --t-g1: #e8e8ef;
        --t-g2: #d5d5de;
        --t-g3: #c8c8d2;
        --t-g4: #c3c3ce;
        --t-g5: #b6b6c2;
        --t-g6: #9d9daa;
        --t-g7: #8b8b99;
        --t-g7b: #8d8d9a;
        --t-g8: #83838f;
        --t-g9: #7c7c8a;
        --t-g9b: #7b7b88;
        --t-g9c: #7f7f8d;
        --t-g10: #757582;
        --t-g11: #6f6f7d;
        --t-g12: #6a6a78;
        --t-g12b: #6d6d7b;
        --t-g12c: #676774;
        --t-g13: #63636f;
        --t-g14: #5f5f6d;
        --t-line: rgba(255, 255, 255, 0.07);
        --t-line-2: rgba(255, 255, 255, 0.09);
        --t-line-3: rgba(255, 255, 255, 0.08);
        --t-line-4: rgba(255, 255, 255, 0.1);
        --t-line-5: rgba(255, 255, 255, 0.06);
        --t-line-soft: rgba(255, 255, 255, 0.045);
        --t-line-hair: rgba(255, 255, 255, 0.055);
        --t-line-faint: rgba(255, 255, 255, 0.04);
        --t-line-faint-2: rgba(255, 255, 255, 0.05);
        --t-line-dash: rgba(255, 255, 255, 0.12);
        --t-line-strong: rgba(255, 255, 255, 0.16);
        --t-line-strong-2: rgba(255, 255, 255, 0.14);
        --t-line-box: rgba(255, 255, 255, 0.18);
        --t-dash-accent: rgba(139, 124, 248, 0.28);
        --t-dash-accent-hi: rgba(139, 124, 248, 0.5);
        --t-focus: rgba(139, 124, 248, 0.5);
        --t-accent-border: rgba(139, 124, 248, 0.3);
        --t-amber-border: rgba(224, 180, 99, 0.4);
        --t-amber-border-2: rgba(224, 180, 99, 0.22);
        --t-red-border: rgba(224, 138, 138, 0.22);
        --t-red-border-2: rgba(224, 138, 138, 0.25);
        --t-scrim: rgba(4, 4, 7, 0.7);
        --t-shadow-menu: 0 22px 50px -14px #000;
        --t-shadow-modal: 0 40px 90px -30px #000;
        --t-shadow-accent: 0 6px 18px -8px #6f5bf0;
        --t-av-0: #2a2340;
        --t-av-1: #1e2a33;
        --t-av-2: #22301f;
        --t-av-3: #31241c;
        --t-av-4: #2b1f2e;
        --t-av-5: #1c2a2c;
        --t-av-6: #2d2a1c;
        --t-av-7: #241d33;
        --t-av-8: #1f2733;
        --t-av-9: #2c2224;
        --t-av-10: #1e2b24;
    }
}

.admin-main:has(.team-page) {
    padding: 26px 32px 80px;
    width: auto;
    background: var(--t-canvas);
    color: var(--t-g0);
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

@media (max-width: 720px) {
    .admin-main:has(.team-page) {
        padding: 18px 14px 60px;
    }
}

/* ============================================================
   Clients module tokens. Same arrangement as the team block
   above: the dark values are the "Client Module Redesign"
   mockup's exact palette, the light ones its counterpart.
   ============================================================ */

:root {
    --c-canvas: #f1f3f6;
    --c-panel: #ffffff;
    --c-panel-2: #f7f8fa;
    --c-panel-3: #eef0f4;
    --c-card: #ffffff;
    --c-field: #ffffff;
    --c-field-hover: #f4f6f9;
    --c-hover: #f7f8fa;
    --c-note: #f7f5ff;
    --c-modal: #ffffff;
    --c-modal-cancel: #ffffff;
    --c-menu: #ffffff;
    --c-menu-hover: #f0f2f6;
    --c-menu-btn: #eceff3;
    --c-idle: #eceff3;
    --c-track: #e4e7ec;
    --c-toggle-off: #ccd2da;
    --c-chip-on: #ece9ff;
    --c-chip-ink: #4436c4;
    --c-danger-bg: #fdedec;
    --c-restore-bg: #e8f5ec;
    --c-tab-on: #1f2229;
    --c-accent: #5b4be0;
    --c-accent-hi: #4c3ccf;
    --c-violet: #6f5bf0;
    --c-violet-soft: #4436c4;
    --c-eyebrow: #5b4be0;
    --c-link: #5b4be0;
    --c-link-hi: #4436c4;
    --c-on-accent: #ffffff;
    --c-company: #4257c9;
    --c-company-bg: rgba(66, 87, 201, 0.10);
    --c-unit: #17796a;
    --c-unit-bg: rgba(23, 121, 106, 0.10);
    --c-family: #2f7c40;
    --c-family-bg: rgba(47, 124, 64, 0.10);
    --c-individual: #8a5c14;
    --c-individual-bg: rgba(138, 92, 20, 0.10);
    --c-red: #c0392f;
    --c-red-ink: #a3302a;
    --c-red-soft: #a3302a;
    --c-red-bd: rgba(192, 57, 47, 0.28);
    --c-red-tint: rgba(192, 57, 47, 0.10);
    --c-attn-bg: #fdedec;
    --c-attn-bd: rgba(192, 57, 47, 0.32);
    --c-amber: #9a6a0c;
    --c-amber-tint: rgba(154, 106, 12, 0.12);
    --c-green: #1f8a54;
    --c-green-bd: rgba(31, 138, 84, 0.30);
    --c-green-tint: rgba(31, 138, 84, 0.11);
    --c-blue: #2b5fd0;
    --c-blue-tint: rgba(43, 95, 208, 0.10);
    --c-draft-tint: rgba(16, 18, 24, 0.06);
    --c-confirm: #b5484f;
    --c-g0: #16181d;
    --c-g1: #1f2229;
    --c-g-input: #16181d;
    --c-g2: #343a43;
    --c-g3: #3d434c;
    --c-g4: #4b525c;
    --c-g5: #545b65;
    --c-g6: #5a626c;
    --c-g7: #69727d;
    --c-g8: #626b76;
    --c-g9: #69727d;
    --c-g10: #6f7883;
    --c-g11: #767f8a;
    --c-g12: #7c8590;
    --c-g13: #838c96;
    --c-g14: #878f99;
    --c-g16: #919aa3;
    --c-line: rgba(16, 18, 24, 0.10);
    --c-line-2: rgba(16, 18, 24, 0.14);
    --c-line-3: rgba(16, 18, 24, 0.12);
    --c-line-14: rgba(16, 18, 24, 0.14);
    --c-line-menu: rgba(16, 18, 24, 0.14);
    --c-line-soft: rgba(16, 18, 24, 0.07);
    --c-line-faint: rgba(16, 18, 24, 0.08);
    --c-line-box: rgba(16, 18, 24, 0.28);
    --c-sel-row: rgba(111, 91, 240, 0.07);
    --c-sel-bd: rgba(111, 91, 240, 0.45);
    --c-pick-bd: rgba(111, 91, 240, 0.50);
    --c-pick-bg: rgba(111, 91, 240, 0.07);
    --c-note-bd: rgba(111, 91, 240, 0.25);
    --c-scrim: rgba(16, 18, 24, 0.45);
    --c-shadow-menu: 0 12px 32px rgba(16, 18, 24, 0.16);
    --c-shadow-modal: 0 24px 60px rgba(16, 18, 24, 0.22);
    --c-shadow-accent: 0 6px 18px -8px rgba(91, 75, 224, 0.8);
    --c-av0-bg: #ece9fb;
    --c-av0: #4b3f9e;
    --c-av1-bg: #e2f4f0;
    --c-av1: #14705f;
    --c-av2-bg: #fbf0e1;
    --c-av2: #8a5c14;
    --c-av3-bg: #fceaef;
    --c-av3: #a33b5c;
    --c-av4-bg: #e6f4e9;
    --c-av4: #2a7a3c;
}

:root[data-theme="dark"] {
    --c-canvas: #08080b;
    --c-panel: #0b0b10;
    --c-panel-2: #0e0e14;
    --c-panel-3: #0c0c11;
    --c-card: #0d0d13;
    --c-field: #101017;
    --c-field-hover: #17171f;
    --c-hover: #101017;
    --c-note: #101018;
    --c-modal: #0f0f16;
    --c-modal-cancel: #131319;
    --c-menu: #13131b;
    --c-menu-hover: #1d1d27;
    --c-menu-btn: #191921;
    --c-idle: #16161d;
    --c-track: #1b1b23;
    --c-toggle-off: #23232c;
    --c-chip-on: #241f3d;
    --c-chip-ink: #c3b8ff;
    --c-danger-bg: #1b1013;
    --c-restore-bg: #101a12;
    --c-tab-on: #efeaff;
    --c-accent: #6f5bf0;
    --c-accent-hi: #7f6dff;
    --c-violet: #8b7cf8;
    --c-violet-soft: #b9adff;
    --c-eyebrow: #7a6ce0;
    --c-link: #a394ff;
    --c-link-hi: #c1b6ff;
    --c-on-accent: #ffffff;
    --c-company: #8b9dff;
    --c-company-bg: rgba(139, 157, 255, 0.13);
    --c-unit: #5fc8b4;
    --c-unit-bg: rgba(95, 200, 180, 0.13);
    --c-family: #7fcb8b;
    --c-family-bg: rgba(127, 203, 139, 0.13);
    --c-individual: #d9a45f;
    --c-individual-bg: rgba(217, 164, 95, 0.13);
    --c-red: #e98b8b;
    --c-red-ink: #e99a9a;
    --c-red-soft: #f0a3a3;
    --c-red-bd: rgba(233, 120, 120, 0.3);
    --c-red-tint: rgba(233, 139, 139, 0.13);
    --c-attn-bg: rgba(233, 139, 139, 0.12);
    --c-attn-bd: rgba(233, 139, 139, 0.35);
    --c-amber: #e0b579;
    --c-amber-tint: rgba(217, 164, 95, 0.13);
    --c-green: #9adba4;
    --c-green-bd: rgba(127, 203, 139, 0.3);
    --c-green-tint: rgba(127, 203, 139, 0.13);
    --c-blue: #a8b6ff;
    --c-blue-tint: rgba(139, 157, 255, 0.13);
    --c-draft-tint: rgba(255, 255, 255, 0.06);
    --c-confirm: #c65f5f;
    --c-g0: #f2f2f5;
    --c-g1: #e3e3ea;
    --c-g-input: #eaeaf0;
    --c-g2: #d7d7e0;
    --c-g3: #d5d5de;
    --c-g4: #c3c3ce;
    --c-g5: #b9b9c6;
    --c-g6: #a7a7b4;
    --c-g7: #9a9aa8;
    --c-g8: #8b8b99;
    --c-g9: #83838f;
    --c-g10: #7a7a88;
    --c-g11: #757582;
    --c-g12: #71717f;
    --c-g13: #6d6d7b;
    --c-g14: #676775;
    --c-g16: #5c5c6b;
    --c-line: rgba(255, 255, 255, 0.07);
    --c-line-2: rgba(255, 255, 255, 0.09);
    --c-line-3: rgba(255, 255, 255, 0.08);
    --c-line-14: rgba(255, 255, 255, 0.12);
    --c-line-menu: rgba(255, 255, 255, 0.11);
    --c-line-soft: rgba(255, 255, 255, 0.05);
    --c-line-faint: rgba(255, 255, 255, 0.06);
    --c-line-box: rgba(255, 255, 255, 0.17);
    --c-sel-row: rgba(111, 91, 240, 0.07);
    --c-sel-bd: rgba(111, 91, 240, 0.4);
    --c-pick-bd: rgba(111, 91, 240, 0.5);
    --c-pick-bg: rgba(111, 91, 240, 0.08);
    --c-note-bd: rgba(111, 91, 240, 0.22);
    --c-scrim: rgba(5, 5, 8, 0.72);
    --c-shadow-menu: 0 20px 40px -18px rgba(0, 0, 0, 0.9);
    --c-shadow-modal: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
    --c-shadow-accent: 0 6px 18px -8px #6f5bf0;
    --c-av0-bg: rgba(139, 124, 248, 0.16);
    --c-av0: #b3a6ff;
    --c-av1-bg: rgba(95, 200, 180, 0.15);
    --c-av1: #7fd8c8;
    --c-av2-bg: rgba(217, 164, 95, 0.15);
    --c-av2: #e0b579;
    --c-av3-bg: rgba(232, 127, 155, 0.15);
    --c-av3: #f0a1b8;
    --c-av4-bg: rgba(127, 203, 139, 0.15);
    --c-av4: #9adba4;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-canvas: #08080b;
        --c-panel: #0b0b10;
        --c-panel-2: #0e0e14;
        --c-panel-3: #0c0c11;
        --c-card: #0d0d13;
        --c-field: #101017;
        --c-field-hover: #17171f;
        --c-hover: #101017;
        --c-note: #101018;
        --c-modal: #0f0f16;
        --c-modal-cancel: #131319;
        --c-menu: #13131b;
        --c-menu-hover: #1d1d27;
        --c-menu-btn: #191921;
        --c-idle: #16161d;
        --c-track: #1b1b23;
        --c-toggle-off: #23232c;
        --c-chip-on: #241f3d;
        --c-chip-ink: #c3b8ff;
        --c-danger-bg: #1b1013;
        --c-restore-bg: #101a12;
        --c-tab-on: #efeaff;
        --c-accent: #6f5bf0;
        --c-accent-hi: #7f6dff;
        --c-violet: #8b7cf8;
        --c-violet-soft: #b9adff;
        --c-eyebrow: #7a6ce0;
        --c-link: #a394ff;
        --c-link-hi: #c1b6ff;
        --c-on-accent: #ffffff;
        --c-company: #8b9dff;
        --c-company-bg: rgba(139, 157, 255, 0.13);
        --c-unit: #5fc8b4;
        --c-unit-bg: rgba(95, 200, 180, 0.13);
        --c-family: #7fcb8b;
        --c-family-bg: rgba(127, 203, 139, 0.13);
        --c-individual: #d9a45f;
        --c-individual-bg: rgba(217, 164, 95, 0.13);
        --c-red: #e98b8b;
        --c-red-ink: #e99a9a;
        --c-red-soft: #f0a3a3;
        --c-red-bd: rgba(233, 120, 120, 0.3);
        --c-red-tint: rgba(233, 139, 139, 0.13);
        --c-attn-bg: rgba(233, 139, 139, 0.12);
        --c-attn-bd: rgba(233, 139, 139, 0.35);
        --c-amber: #e0b579;
        --c-amber-tint: rgba(217, 164, 95, 0.13);
        --c-green: #9adba4;
        --c-green-bd: rgba(127, 203, 139, 0.3);
        --c-green-tint: rgba(127, 203, 139, 0.13);
        --c-blue: #a8b6ff;
        --c-blue-tint: rgba(139, 157, 255, 0.13);
        --c-draft-tint: rgba(255, 255, 255, 0.06);
        --c-confirm: #c65f5f;
        --c-g0: #f2f2f5;
        --c-g1: #e3e3ea;
        --c-g-input: #eaeaf0;
        --c-g2: #d7d7e0;
        --c-g3: #d5d5de;
        --c-g4: #c3c3ce;
        --c-g5: #b9b9c6;
        --c-g6: #a7a7b4;
        --c-g7: #9a9aa8;
        --c-g8: #8b8b99;
        --c-g9: #83838f;
        --c-g10: #7a7a88;
        --c-g11: #757582;
        --c-g12: #71717f;
        --c-g13: #6d6d7b;
        --c-g14: #676775;
        --c-g16: #5c5c6b;
        --c-line: rgba(255, 255, 255, 0.07);
        --c-line-2: rgba(255, 255, 255, 0.09);
        --c-line-3: rgba(255, 255, 255, 0.08);
        --c-line-14: rgba(255, 255, 255, 0.12);
        --c-line-menu: rgba(255, 255, 255, 0.11);
        --c-line-soft: rgba(255, 255, 255, 0.05);
        --c-line-faint: rgba(255, 255, 255, 0.06);
        --c-line-box: rgba(255, 255, 255, 0.17);
        --c-sel-row: rgba(111, 91, 240, 0.07);
        --c-sel-bd: rgba(111, 91, 240, 0.4);
        --c-pick-bd: rgba(111, 91, 240, 0.5);
        --c-pick-bg: rgba(111, 91, 240, 0.08);
        --c-note-bd: rgba(111, 91, 240, 0.22);
        --c-scrim: rgba(5, 5, 8, 0.72);
        --c-shadow-menu: 0 20px 40px -18px rgba(0, 0, 0, 0.9);
        --c-shadow-modal: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
        --c-shadow-accent: 0 6px 18px -8px #6f5bf0;
        --c-av0-bg: rgba(139, 124, 248, 0.16);
        --c-av0: #b3a6ff;
        --c-av1-bg: rgba(95, 200, 180, 0.15);
        --c-av1: #7fd8c8;
        --c-av2-bg: rgba(217, 164, 95, 0.15);
        --c-av2: #e0b579;
        --c-av3-bg: rgba(232, 127, 155, 0.15);
        --c-av3: #f0a1b8;
        --c-av4-bg: rgba(127, 203, 139, 0.15);
        --c-av4: #9adba4;
    }
}

.admin-main:has(.clients-page) {
    padding: 26px 32px 90px;
    width: auto;
    background: var(--c-canvas);
    color: var(--c-g0);
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

@media (max-width: 720px) {
    .admin-main:has(.clients-page) {
        padding: 18px 14px 60px;
    }
}

/* ------------------------------------------------------------
   Clients module — a direct port of the "Client Module Redesign"
   mockup. Not scoped CSS: the list and the client page share most
   of these rules, and scoped stylesheets can't be shared.
   ------------------------------------------------------------ */

@keyframes clientFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes clientFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes clientGrowBar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.clients-page {
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--c-g0);
}

.clients-page a {
    color: var(--c-link);
    text-decoration: none;
}

.clients-page a:hover {
    color: var(--c-link-hi);
}

.clients-page .screen {
    animation: clientFadeUp 0.28s ease both;
}

.clients-page .notfound {
    color: var(--c-g9);
    font-size: 13.5px;
}

/* ---------- page header ---------- */

/* ---------- tabs ---------- */

/* ---------- stat cards ---------- */

/* ---------- toolbar ---------- */

/* justify-content is pinned: the shared .toolbar above sets space-between, and
   this row spaces itself with the .toolbar-gap spacer instead. */
.clients-page .toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
}

.clients-page .searchbox {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-panel-2);
    border: 1px solid var(--c-line-2);
    border-radius: 9px;
    padding: 0 12px;
    height: 36px;
    min-width: 280px;
}

.clients-page .search-icon {
    color: var(--c-g16);
    font-size: 13px;
}

.clients-page .searchbox input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: var(--c-g0);
    font-size: 13px;
    font-family: inherit;
}

.clients-page .searchbox input:focus {
    outline: none;
}

.clients-page .searchbox input::placeholder {
    color: var(--c-g16);
}

.clients-page .segbar {
    display: flex;
    gap: 6px;
    background: var(--c-panel-3);
    border: 1px solid var(--c-line);
    border-radius: 9px;
    padding: 3px;
    flex-wrap: wrap;
}

.clients-page .seg {
    border: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 6px 11px;
    font: 500 12px "IBM Plex Sans", sans-serif;
    background: transparent;
    color: var(--c-g8);
}

.clients-page .seg.on {
    background: var(--c-chip-on);
    color: var(--c-chip-ink);
}

.clients-page .chip-toggle {
    border: 1px solid var(--c-line-2);
    background: var(--c-panel-2);
    color: var(--c-g8);
    border-radius: 9px;
    height: 36px;
    padding: 0 13px;
    font: 500 12px "IBM Plex Sans", sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

.clients-page .chip-toggle.on {
    border-color: var(--c-attn-bd);
    background: var(--c-attn-bg);
    color: var(--c-red-soft);
}

.clients-page .toolbar-gap {
    flex: 1;
}

.clients-page .viewtoggle {
    display: flex;
    gap: 3px;
    background: var(--c-panel-3);
    border: 1px solid var(--c-line);
    border-radius: 9px;
    padding: 3px;
}

.clients-page .viewtoggle button {
    border: none;
    cursor: pointer;
    border-radius: 6px;
    width: 32px;
    height: 28px;
    font-size: 12px;
    background: transparent;
    color: var(--c-g8);
}

.clients-page .viewtoggle button.on {
    background: var(--c-chip-on);
    color: var(--c-chip-ink);
}

.clients-page .sortbox {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--c-g13);
    font-size: 12px;
}

/* The native <select> popup can't be themed, so the module drives the app's
   Dropdown and restyles its trigger and menu to the design's select. */
.clients-page .groupbox .dd-trigger,
.clients-page .sortbox .dd-trigger {
    background: var(--c-panel-2);
    border: 1px solid var(--c-line-2);
    color: var(--c-g3);
    height: 36px;
    font: 400 12.5px "IBM Plex Sans", sans-serif;
    gap: 8px;
}

.clients-page .groupbox .dd-trigger {
    border-radius: 9px;
    padding: 0 10px;
}

.clients-page .sortbox .dd-trigger {
    border-radius: 8px;
    padding: 0 9px;
}

.clients-page .dd-wrap .dd-trigger::after {
    width: 5px;
    height: 5px;
    border-width: 1.4px;
    border-color: currentColor;
    opacity: 0.7;
}

.clients-page .dd-wrap .dd-trigger:hover {
    border-color: var(--c-line-box);
}

.clients-page .dd-wrap .dd-menu {
    background: var(--c-menu);
    border: 1px solid var(--c-line-menu);
    border-radius: 10px;
    box-shadow: var(--c-shadow-menu);
    padding: 5px;
}

.clients-page .dd-wrap .dd-option {
    color: var(--c-g2);
    font: 400 12.5px "IBM Plex Sans", sans-serif;
    padding: 8px 10px;
    border-radius: 7px;
}

.clients-page .dd-wrap .dd-option:hover {
    background: var(--c-menu-hover);
}

.clients-page .dd-wrap .dd-option.selected {
    background: var(--c-chip-on);
    color: var(--c-chip-ink);
}

/* ---------- count line + bulk bar ---------- */

/* ---------- table card (shared by both screens) ---------- */

.clients-page .tablecard {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: 13px;
    animation: clientFadeUp 0.28s ease both;
}

/* No overflow clipping at desktop width: the row "⋮" menu is a child of the
   last rows and would be cut off. Corners are rounded on the edge rows instead. */
.clients-page .tablescroll > :first-child {
    border-radius: 12px 12px 0 0;
}

.clients-page .tablescroll > :last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.clients-page .trow {
    min-width: 1100px;
    display: grid;
    grid-template-columns: 34px minmax(240px, 2.1fr) 150px minmax(160px, 1.2fr) 120px 128px 110px 40px;
    gap: 12px;
    align-items: center;
}

.clients-page .thead {
    padding: 11px 16px;
    background: var(--c-panel-2);
    border-bottom: 1px solid var(--c-line);
    font: 600 10px "IBM Plex Mono", monospace;
    letter-spacing: 0.11em;
    color: var(--c-g14);
}

.clients-page .trow.tbody {
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-line-soft);
    position: relative;
}

.clients-page .trow.tbody.picked {
    background: var(--c-sel-row);
}

.clients-page .cell-client {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    cursor: pointer;
}

.clients-page .avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 11px "IBM Plex Mono", monospace;
}

.clients-page .avatar-lg {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 12px;
}

.clients-page .avatar-xl {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 15px;
}

.clients-page .client-text {
    min-width: 0;
}

.clients-page .client-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-g0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clients-page .client-email {
    font-size: 12px;
    color: var(--c-g12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clients-page .type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 11px "IBM Plex Mono", monospace;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.clients-page .ccard .type-chip,
.clients-page .detail-titlerow .type-chip {
    font-size: 10.5px;
    letter-spacing: 0.07em;
}

.clients-page .detail-titlerow .type-chip {
    padding: 4px 9px;
}

.clients-page .type-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: none;
}

.clients-page .cell-group {
    font-size: 12.5px;
    color: var(--c-g6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clients-page .cell-group.none {
    color: var(--c-g16);
}

.clients-page .cell-requests {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
}

.clients-page .req-open {
    font: 600 14px "Outfit", sans-serif;
}

.clients-page .req-note {
    font-size: 11.5px;
    color: var(--c-g13);
    overflow: hidden;
    text-overflow: ellipsis;
}

.clients-page .req-note.late {
    color: var(--c-red);
}

.clients-page .cell-due {
    font-size: 12.5px;
}

.clients-page .cell-activity {
    font-size: 12px;
    color: var(--c-g13);
}

.clients-page .cell-menu {
    display: flex;
    justify-content: flex-end;
}

.clients-page .empty-row {
    padding: 48px 20px;
    text-align: center;
    color: var(--c-g13);
    font-size: 13px;
}

.clients-page .empty-block {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: 13px;
    padding: 48px 20px;
    text-align: center;
    color: var(--c-g13);
    font-size: 13px;
}

.clients-page .reset-link {
    border: none;
    background: none;
    color: var(--c-link);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

.clients-page .reset-link:hover {
    color: var(--c-link-hi);
}

/* ---------- row menu ---------- */

.clients-page .rowmenu {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.clients-page .dots {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--c-g13);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.clients-page .dots:hover,
.clients-page .dots.on {
    background: var(--c-menu-btn);
    color: var(--c-g2);
}

.clients-page .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.clients-page .menu {
    position: absolute;
    right: 0;
    z-index: 40;
    min-width: 186px;
    background: var(--c-menu);
    border: 1px solid var(--c-line-menu);
    border-radius: 10px;
    padding: 5px;
    box-shadow: var(--c-shadow-menu);
    animation: clientFadeIn 0.14s ease both;
}

.clients-page .menu > button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    color: var(--c-g2);
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}

.clients-page .menu > button:hover {
    background: var(--c-menu-hover);
}

.clients-page .menu > .danger {
    color: var(--c-red-ink);
}

.clients-page .menu > .good {
    color: var(--c-green);
}

/* ---------- card view ---------- */

.clients-page .cardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 12px;
    animation: clientFadeUp 0.28s ease both;
}

.clients-page .ccard {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 13px;
    padding: 14px 15px 13px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clients-page .ccard.picked {
    border-color: var(--c-sel-bd);
}

.clients-page .ccard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.clients-page .ccard-head .dots {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.clients-page .ccard-id {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.clients-page .ccard-name {
    font: 600 13.5px/1.3 "Outfit", sans-serif;
    letter-spacing: -0.01em;
    color: var(--c-g0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clients-page .ccard-id .client-email {
    margin-top: 2px;
}

.clients-page .ccard-phone {
    font: 500 12px "IBM Plex Mono", monospace;
    color: var(--c-g8);
}

.clients-page .ccard-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.clients-page .tile {
    background: var(--c-field);
    border-radius: 9px;
    padding: 8px 10px;
}

.clients-page .micro {
    font: 600 9.5px "IBM Plex Mono", monospace;
    letter-spacing: 0.11em;
    color: var(--c-g14);
}

.clients-page .tile-value {
    font: 600 17px "Outfit", sans-serif;
    margin-top: 3px;
    color: var(--c-g0);
}

.clients-page .ccard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 11px;
    border-top: 1px solid var(--c-line-faint);
}

.clients-page .ccard-foot .cell-group {
    font-size: 11.5px;
}

.clients-page .ccard-meta {
    font-size: 11.5px;
    flex: none;
}

/* ---------- client page: header ---------- */

.clients-page .detail-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.clients-page .detail-id {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 20px 0 0;
}

.clients-page .detail-idtext {
    min-width: 0;
}

.clients-page .detail-titlerow {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.clients-page .detail-h1 {
    font: 600 25px/1.2 "Outfit", sans-serif;
    letter-spacing: -0.022em;
    margin: 0;
    color: var(--c-g0);
}

.clients-page .detail-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 7px;
    font-size: 13px;
    color: var(--c-g9);
    flex-wrap: wrap;
}

.clients-page .detail-meta .mono {
    font-family: "IBM Plex Mono", monospace;
}

.clients-page .detail-stats {
    margin: 22px 0 4px;
}

.clients-page .detail-stat-value {
    font-size: 22px;
    margin-top: 8px;
}

.clients-page .detail-stat-note {
    margin-top: 3px;
}

/* ---------- client page: requests tab ---------- */

.clients-page .reqcard {
    margin-top: 18px;
    animation: clientFadeUp 0.24s ease both;
}

.clients-page .req-title {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-g0);
}

.clients-page .req-meta {
    font-size: 11.5px;
    color: var(--c-g13);
    margin-top: 2px;
}







    .clients-page .req-due {
        font-size: 12.5px;
        height: auto;
        width: auto;
    }

.clients-page .req-assigned {
    font-size: 12.5px;
    color: var(--c-g6);
}

    .clients-page .req-updated {
        font-size: 12px;
        color: var(--c-g13);
        height: auto;
        width: auto;
    }

/* ---------- client page: details tab ---------- */

.clients-page .detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
    animation: clientFadeUp 0.24s ease both;
}

.clients-page .detail-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clients-page .panel {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: 13px;
    padding: 18px 20px 20px;
}

.clients-page .panel.side {
    padding: 16px 18px 18px;
}

.clients-page .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.clients-page .panel-title {
    font: 600 11px "IBM Plex Mono", monospace;
    letter-spacing: 0.12em;
    color: var(--c-g10);
}

.clients-page .save-btn {
    border: none;
    border-radius: 8px;
    background: var(--c-idle);
    color: var(--c-g13);
    height: 30px;
    padding: 0 13px;
    font: 600 12px "IBM Plex Sans", sans-serif;
    cursor: default;
}

.clients-page .save-btn.dirty {
    background: var(--c-accent);
    color: var(--c-on-accent);
    cursor: pointer;
}

.clients-page .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 16px;
}

.clients-page .field-grid.wide-gap {
    gap: 14px;
    margin-top: 0;
}

.clients-page .field {
    display: block;
    min-width: 0;
}

.clients-page .field.wide {
    grid-column: span 2;
}

.clients-page .field-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--c-g10);
    margin-bottom: 6px;
}

.clients-page .field-hint {
    color: var(--c-amber);
    font-size: 11px;
}

.clients-page .field input {
    width: 100%;
    background: var(--c-field);
    border: 1px solid var(--c-line-2);
    border-radius: 9px;
    height: 38px;
    padding: 0 11px;
    color: var(--c-g-input);
    font-size: 13px;
    font-family: inherit;
}

.clients-page .field input:focus {
    outline: none;
    border-color: var(--c-accent);
}

.clients-page .field input::placeholder {
    color: var(--c-g14);
}

.clients-page .field .dd-trigger,
.clients-page .assign-row .dd-trigger {
    width: 100%;
    background: var(--c-field);
    border: 1px solid var(--c-line-2);
    border-radius: 9px;
    height: 40px;
    padding: 0 11px;
    color: var(--c-g-input);
    font: 400 13px "IBM Plex Sans", sans-serif;
}

.clients-page .assign-row .dd-trigger {
    height: 38px;
}

.clients-page .side-value {
    font-size: 13.5px;
    margin-top: 11px;
    color: var(--c-g1);
}

.clients-page .side-note {
    font-size: 12px;
    color: var(--c-g13);
    margin-top: 5px;
}

.clients-page .side-btn {
    margin-top: 13px;
    border: 1px solid var(--c-line-14);
    background: var(--c-field);
    color: var(--c-g2);
    border-radius: 8px;
    height: 32px;
    padding: 0 12px;
    font: 500 12px "IBM Plex Sans", sans-serif;
    cursor: pointer;
}

.clients-page .side-btn:hover {
    background: var(--c-field-hover);
}

.clients-page .toggle-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
}

.clients-page .toggle {
    width: 34px;
    height: 20px;
    flex: none;
    border-radius: 11px;
    background: var(--c-toggle-off);
    padding: 2px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
}

.clients-page .toggle.on {
    background: var(--c-accent);
    justify-content: flex-end;
}

.clients-page .knob {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-g13);
}

.clients-page .toggle.on .knob {
    background: #fff;
}

.clients-page .toggle-label {
    font-size: 13px;
    color: var(--c-g1);
}

.clients-page .toggle-note {
    font-size: 11.5px;
    color: var(--c-g13);
    margin-top: 2px;
}

.clients-page .assign-row {
    margin-top: 12px;
}

.clients-page .assign-label {
    display: block;
    font-size: 11.5px;
    color: var(--c-g10);
    margin-bottom: 6px;
}

/* ---------- new-client screen ---------- */

    .clients-page .newscreen {
        justify-content: center;
        display: flex;
        width:auto;
    }

.clients-page .new-h1 {
    font: 600 22px "Outfit", sans-serif;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--c-g0);
}

.clients-page .formcard {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 22px 24px 24px;
    margin-top: 20px;
}

.clients-page .typegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.clients-page .typepick {
    border: 1px solid var(--c-line-faint);
    background: var(--c-field);
    border-radius: 11px;
    padding: 12px 13px;
    cursor: pointer;
}

.clients-page .typepick.on {
    border-color: var(--c-pick-bd);
    background: var(--c-pick-bg);
}

.clients-page .typepick-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clients-page .typepick-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.clients-page .typepick-label {
    font: 600 12.5px "IBM Plex Sans", sans-serif;
    color: var(--c-g4);
}

.clients-page .typepick.on .typepick-label {
    color: var(--c-tab-on);
}

.clients-page .typepick-note {
    font-size: 11.5px;
    color: var(--c-g13);
    margin-top: 6px;
}

.clients-page .divider {
    height: 1px;
    background: var(--c-line);
    margin: 22px 0;
}

.clients-page .newscreen .field input {
    height: 40px;
    padding: 0 12px;
}

.clients-page .notebox {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--c-note);
    border: 1px solid var(--c-note-bd);
    border-radius: 11px;
    padding: 13px 15px;
    margin-top: 20px;
}

.clients-page .note-icon {
    color: var(--c-violet);
    font-size: 13px;
}

.clients-page .note-text {
    font-size: 12.5px;
    color: var(--c-g7);
    line-height: 1.5;
}

.clients-page .formactions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
}

/* ---------- narrow screens ---------- */

@media (max-width: 1180px) {
    .clients-page .tablescroll {
        overflow-x: auto;
        border-radius: 13px;
    }
}

@media (max-width: 1100px) {
    .clients-page .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .clients-page .searchbox {
        min-width: 0;
        flex: 1;
    }

    .clients-page .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .clients-page .field.wide {
        grid-column: span 1;
    }
}