/* ============================================================================
 * Leja — premium theme layer (application-owned).
 * Extends Inspinia; never edit vendor files. Implements the official Leja brand
 * (Leja Indigo #4F46E5 primary, Tapa Gold #E0A33C accent, Space Grotesk +
 * Hanken Grotesk). Money/positive stays semantic green. Tabular figures.
 * ========================================================================== */

/* ---- Brand fonts (self-hosted, no CDN) ----------------------------------- */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hanken-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/hanken-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/hanken-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-grotesk-700.woff2') format('woff2'); }

/* ---- Leja brand palette -------------------------------------------------- */
:root {
    --leja-accent: #4F46E5;         /* Leja Indigo (primary) */
    --leja-accent-rgb: 79, 70, 229;
    --leja-iris: #6E62F0;           /* gradient top */
    --leja-deep: #3A33C9;           /* gradient base */
    --leja-gold: #E0A33C;           /* Tapa Gold (accent · value) */
    --leja-money: #0aa884;          /* positive / cash-in (semantic green) */
    --leja-ink: #15172B;            /* headings / dark surface */
    --leja-muted: #7b8794;
    --leja-surface: #ffffff;
    --leja-bg: #f4f6fb;
    --leja-cloud: #F7F8FC;          /* brand "Cloud" neutral */
    --leja-border: #e9edf3;
    --leja-radius: 14px;
    --leja-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --leja-shadow-md: 0 4px 12px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .04);
    --leja-shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, .22);
}

/* Rebrand Inspinia + Bootstrap primary to Leja Indigo */
:root, [data-bs-theme="light"] {
    --ins-primary: #4F46E5;
    --ins-link-color: #4F46E5;
    --ins-link-hover-color: #3A33C9;
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #3A33C9;
}

body {
    background: var(--leja-bg);
    color: #3a4658;
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6, .brand-font, .navbar-brand {
    font-family: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---- Typography & figures ------------------------------------------------ */
h1, h2, h3, h4, h5, h6, .fw-bold { color: var(--leja-ink); letter-spacing: -.01em; }
.text-money, .stat-value { font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Cards: soft elevation + hover lift ---------------------------------- */
/* Tighter rhythm than Inspinia's stock 1.25rem — dense, ultra-premium fintech. */
.card {
    --ins-card-spacer-y: 1.05rem;
    --ins-card-spacer-x: 1.2rem;
    --ins-card-cap-padding-y: .8rem;
    --ins-card-cap-padding-x: 1.2rem;
    border: 1px solid var(--leja-border);
    border-radius: var(--leja-radius);
    box-shadow: var(--leja-shadow-sm);
    margin-bottom: 1rem;
    transition: box-shadow .2s ease, transform .2s ease;
}
.card .card-header { border-bottom: 1px solid var(--leja-border); font-weight: 600; }
/* Equal-height cards in a grid get spacing from the row, not their own margin. */
.row > [class*="col"] > .card.h-100 { margin-bottom: 0; }
/* Vertical gap between cards when a dashboard row wraps (tablet/mobile). */
.dash-row { row-gap: 1rem; }
.card.card-hover:hover { box-shadow: var(--leja-shadow-md); transform: translateY(-2px); }

/* ---- Breadcrumb ---------------------------------------------------------- */
.leja-breadcrumb { padding: .85rem 0 .15rem; }
.leja-breadcrumb .breadcrumb {
    display: inline-flex; align-items: center;
    margin: 0; padding: .34rem .8rem;
    font-size: .82rem; --bs-breadcrumb-divider: '›';
    background: var(--leja-cloud);
    border: 1px solid var(--leja-border);
    border-radius: 999px;
}
.leja-breadcrumb .breadcrumb-item a { color: var(--leja-muted); text-decoration: none; }
.leja-breadcrumb .breadcrumb-item a:hover { color: var(--leja-accent); }
.leja-breadcrumb .breadcrumb-item.active { color: var(--leja-ink); font-weight: 600; }
.leja-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #c2c9d4; }

/* ---- Page header --------------------------------------------------------- */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-header .page-title { margin: 0; font-size: 1.35rem; font-weight: 700; }
.page-header .page-sub { margin: .15rem 0 0; color: var(--leja-muted); font-size: .9rem; }

/* ---- KPI / stat cards ---------------------------------------------------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.stat-card .stat-label { color: var(--leja-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-value { font-size: 1.55rem; font-weight: 700; color: var(--leja-ink); margin: .2rem 0 .1rem; line-height: 1.15; }
.stat-card .stat-meta { font-size: .78rem; color: var(--leja-muted); }
.stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex: 0 0 auto;
}
.stat-icon.is-primary { background: rgba(79,70,229,.12); color: var(--leja-accent); }
.stat-icon.is-emerald { background: rgba(10,207,151,.14); color: #0aa884; }
.stat-icon.is-amber   { background: rgba(248,172,89,.16); color: #e9930f; }
.stat-icon.is-rose    { background: rgba(237,85,101,.14); color: #ed5565; }
.stat-icon.is-indigo  { background: rgba(107,94,174,.14); color: #6b5eae; }
/* thin accent rule along the top of a stat card */
.stat-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--leja-accent), rgba(79,70,229,.25));
    opacity: .9;
}

/* trend chips */
.trend { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; }
.trend-up   { color: #0aa884; background: rgba(10,168,132,.1); }
.trend-down { color: #ed5565; background: rgba(237,85,101,.1); }
.trend-flat { color: var(--leja-muted); background: rgba(123,135,148,.1); }

/* ---- Buttons ------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 10px; }
.btn-primary {
    background: linear-gradient(135deg, var(--leja-accent), #3A33C9);
    border: none; box-shadow: 0 6px 16px -6px rgba(79,70,229,.55);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.04); box-shadow: 0 8px 20px -6px rgba(79,70,229,.6); }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
/* Soft/light quick-action button — premium, low-emphasis */
.btn-soft {
    background: #fff; color: var(--leja-ink);
    border: 1px solid var(--leja-border);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.btn-soft:hover, .btn-soft:focus {
    background: rgba(79,70,229,.06); color: var(--leja-accent);
    border-color: rgba(79,70,229,.35);
}
.btn-soft i { color: var(--leja-accent); }
/* Quick-action cluster sizing */
.quick-actions .btn-sm { font-size: .8rem; padding: .34rem .7rem; border-radius: 9px; }

/* Document action toolbar (quote/invoice detail) */
.action-bar .btn-group .btn-soft { box-shadow: none; }
.action-bar .btn-group .btn-soft + .btn-soft { border-left-color: transparent; }
.action-bar .dropdown-menu { min-width: 13rem; padding: .35rem; border-color: var(--leja-border); border-radius: 12px; }
.action-bar .dropdown-menu form { margin: 0; }
.action-bar .dropdown-item { border-radius: 8px; padding: .5rem .6rem; font-size: .86rem; display: flex; align-items: center; }
.action-bar .dropdown-item:hover { background: var(--leja-cloud); }
.action-bar .dropdown-item.text-danger:hover { background: rgba(237,85,101,.08); }
.action-bar .dropdown-item.text-success:hover { background: rgba(10,168,132,.08); }

/* ---- Rich text (Trix) ---------------------------------------------------- */
.rich-text trix-editor {
    border: 1px solid var(--leja-border); border-radius: 0 0 10px 10px;
    padding: .65rem .8rem; background: #fff; font-size: .9rem; line-height: 1.55;
    color: #3a4658;
}
.rich-text trix-editor:focus { border-color: rgba(79,70,229,.45); box-shadow: 0 0 0 .2rem rgba(79,70,229,.12); outline: none; }
.rich-text trix-toolbar { margin-bottom: 0; }
.rich-text trix-toolbar .trix-button-row { background: var(--leja-cloud); border: 1px solid var(--leja-border); border-bottom: 0; border-radius: 10px 10px 0 0; padding: .25rem .4rem; }
.rich-text trix-toolbar .trix-button-group { border-color: var(--leja-border); margin-bottom: 0; }
.rich-text trix-toolbar .trix-button { border-bottom: 0; }
.rich-text trix-toolbar .trix-button.trix-active { background: rgba(79,70,229,.12); color: var(--leja-accent); }
/* No file attachments — we hide the tool and block drops in JS */
.rich-text trix-toolbar .trix-button-group--file-tools { display: none; }
.rich-text trix-content { font-size: .9rem; }
.rich-text trix-content h1 { font-size: 1.15rem; }
.rich-text trix-content ul, .rich-text trix-content ol { padding-left: 1.4rem; }
/* Rendered rich text on documents (show / public) */
.rt-content { text-align: justify; }
.rt-content ol, .rt-content ul { padding-left: 1.3rem; margin-bottom: .5rem; }
.rt-content li { margin-bottom: .2rem; }
.rt-content h1 { font-size: 1.02rem; font-weight: 700; margin: .55rem 0 .25rem; color: var(--leja-ink); }
.rt-content p { margin-bottom: .5rem; }
.rt-content p:last-child { margin-bottom: 0; }

/* ---- Activity bar (quote views / decision) ------------------------------- */
.activity-bar .act-chip { display: flex; align-items: center; gap: .55rem; }
.activity-bar .act-ico { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(123,135,148,.12); color: var(--leja-muted); }
.activity-bar .act-ico.is-accent { background: rgba(79,70,229,.12); color: var(--leja-accent); }
.activity-bar .act-ico.is-on { background: rgba(10,168,132,.14); color: #0a8f6f; }
.activity-bar .act-ico.is-amber { background: rgba(224,163,60,.16); color: #c8862a; }
.activity-bar .act-ico.is-red { background: rgba(237,85,101,.14); color: #d83a4e; }
.activity-bar .act-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leja-muted); font-weight: 700; }
.activity-bar .act-v { font-size: .85rem; font-weight: 600; color: var(--leja-ink); }

/* ---- Premium document (quote/invoice) — "Refined Classic" ---------------- */
.quote-doc .doc-name { font-family: 'Space Grotesk','Hanken Grotesk',sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--leja-ink); letter-spacing: -.01em; line-height: 1.15; }
.quote-doc .doc-tag { color: var(--leja-gold); font-weight: 700; font-size: .9rem; }
.quote-doc .doc-word { font-family: 'Space Grotesk','Hanken Grotesk',sans-serif; font-weight: 700; font-size: 1.7rem; letter-spacing: .14em; color: #C3C7DA; }
.quote-doc .doc-diamond { width: 8px; height: 8px; display: inline-block; transform: rotate(45deg); }
.quote-doc .doc-rule { margin: 1.2rem 0 1.5rem; }
.quote-doc .doc-rule .gold { width: 64px; height: 3px; background: var(--leja-gold); border-radius: 2px; }
.quote-doc .doc-rule .line { height: 1px; background: var(--leja-border); margin-top: 1px; }
.quote-doc .doc-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #AAB0C4; font-weight: 700; }
.quote-doc .doc-items { border: 1px solid var(--leja-border); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.quote-doc .doc-items thead th { background: var(--doc-accent, var(--leja-accent)); color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; padding: .65rem .8rem; border: 0; }
.quote-doc .doc-items tbody td { padding: .7rem .8rem; border-top: 0; border-bottom: 1px solid #F0F2F7; font-size: .9rem; vertical-align: top; }
.quote-doc .doc-items tbody tr:last-child td { border-bottom: 0; }
.quote-doc .doc-items tbody td.amt { font-weight: 700; color: var(--leja-ink); }
.quote-doc .doc-totalbox { display: flex; justify-content: space-between; align-items: center; border-radius: 10px; padding: .7rem 1rem; margin-top: .65rem; }
.quote-doc .doc-totalbox .lbl { font-weight: 700; }
.quote-doc .doc-totalbox .amt { font-weight: 700; font-size: 1.4rem; }
.quote-doc .text-justify { text-align: justify; }

/* ---- Badges / statuses --------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .2px; border-radius: 8px; padding: .35em .6em; }
.badge-status { border-radius: 999px; }
.badge-draft     { background-color: #eef1f5; color: #5b6776; }
.badge-sent      { background-color: #e3efff; color: #1567d3; }
.badge-paid      { background-color: #def4ec; color: #0a8f6f; }
.badge-partial   { background-color: #fff3d6; color: #b9770a; }
.badge-overdue   { background-color: #fde3e6; color: #d83a4e; }
.badge-cancelled { background-color: #eceef1; color: #7b8794; }

/* ---- Tables -------------------------------------------------------------- */
.table > thead th {
    text-transform: uppercase; font-size: .72rem; letter-spacing: .05em;
    color: var(--leja-muted); font-weight: 700; border-bottom: 1px solid var(--leja-border);
}
.table > tbody td { vertical-align: middle; border-color: #f0f2f6; }
.table-hover > tbody > tr:hover > * { background-color: rgba(79,70,229,.035); }

/* ---- DataTables 2.x (Bootstrap 5) controls polish ------------------------ */
/* Length "per page" selector: give the chevron room so it never sits on the number. */
div.dt-length, div.dt-search { display: flex; align-items: center; gap: .5rem; color: var(--leja-muted); font-size: .82rem; }
div.dt-length label, div.dt-search label { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
div.dt-length select.form-select {
    width: auto; min-width: 4.9rem;
    padding: .3rem 2rem .3rem .7rem;
    font-size: .82rem; border-radius: 9px;
    border-color: var(--leja-border);
}
div.dt-search input.form-control {
    width: auto; min-width: 13rem;
    padding: .38rem .8rem; font-size: .85rem; border-radius: 9px;
    border-color: var(--leja-border);
}
div.dt-length select.form-select:focus,
div.dt-search input.form-control:focus {
    border-color: rgba(79,70,229,.45); box-shadow: 0 0 0 .2rem rgba(79,70,229,.12);
}
/* Info + pagination */
div.dt-info { color: var(--leja-muted); font-size: .82rem; }
div.dt-paging .pagination { margin: 0; }
div.dt-paging .page-link { border: none; border-radius: 8px; margin: 0 1px; color: var(--leja-ink); font-size: .85rem; padding: .35rem .7rem; }
div.dt-paging .page-link:hover { background: rgba(79,70,229,.08); color: var(--leja-accent); }
div.dt-paging .page-item.active .page-link { background: var(--leja-accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(79,70,229,.5); }
div.dt-paging .page-item.disabled .page-link { color: #c2c9d4; background: transparent; }

/* ---- Avatars ------------------------------------------------------------- */
.avatar-initial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--leja-accent), #3A33C9);
}

/* ---- Sidebar polish (works with data-menu-color=gradient) ----------------- */
.sidenav-menu .side-nav-link { border-radius: 10px; margin: 1px .6rem; font-weight: 500; }
.sidenav-menu .side-nav-link.active { font-weight: 600; }
.sidenav-menu .side-nav-link .menu-icon { font-size: 1.15rem; }
.sidenav-menu .side-nav-title { letter-spacing: .12em; font-size: .68rem; opacity: .75; }
.sidenav-menu .side-nav-link .badge { font-size: .6rem; padding: .2em .4em; }

/* ---- Onboarding checklist ------------------------------------------------ */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px dashed var(--leja-border); }
.checklist li:last-child { border-bottom: 0; }
.checklist .check {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: #eef1f5; color: #aeb6c2;
}
.checklist li.done .check { background: rgba(10,168,132,.14); color: #0aa884; }
.checklist li.done .ck-label { color: var(--leja-muted); text-decoration: line-through; }
.checklist .ck-label { font-weight: 500; }

/* ---- Empty states -------------------------------------------------------- */
.empty-state { text-align: center; padding: 1.6rem 1rem; color: var(--leja-muted); }
.empty-state .es-icon {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto .65rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 26px;
    background: rgba(79,70,229,.1); color: var(--leja-accent);
}

/* ---- Auth v2 — Pacific Platform Sign-in --------------------------------- */
/* Fully scoped under .auth2 so it never reaches the authenticated app. Palette */
/* tokens follow the design handoff (deep ocean / lagoon / warm sand).          */
.auth2 {
    --a2-ink: #0B2027;
    --a2-ocean: #0E4C5C;
    --a2-ocean-hover: #0B3D4A;
    --a2-ocean-active: #092F3A;
    --a2-lagoon: #2AA198;
    --a2-lagoon-light: #7FD3C8;
    --a2-glyph: #BFF0E7;
    --a2-sand: #FAF6EF;
    --a2-sand-2: #F3EEE4;
    --a2-sand-3: #F1EBE0;
    --a2-line: #E4DCD0;
    --a2-line-2: #E9E2D7;
    --a2-border-input: #DAD2C4;
    --a2-text-body: #3A3730;
    --a2-text-muted: #6B6558;
    --a2-text-faint: #938C7E;
    --a2-placeholder: #A79E8E;
    --a2-serif: ui-serif, Georgia, 'Times New Roman', Cambria, serif;

    min-height: 100vh;
    display: flex;
    flex-direction: row;
    background: var(--a2-sand);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--a2-ink);
}

/* ---- Brand panel -------------------------------------------------------- */
.auth2-brand {
    flex: 0 0 54%;
    position: relative;
    overflow: hidden;
    padding: 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    background: linear-gradient(160deg, #0E4C5C 0%, #08333F 62%, #0B2027 100%);
    color: var(--a2-sand);
}
.auth2-brand > *:not(.auth2-bg) { position: relative; z-index: 1; }

.auth2-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.auth2-glyph {
    position: absolute;
    bottom: -60px;
    color: var(--a2-glyph);
    opacity: .18;
    animation-name: auth2FloatUp;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}
@keyframes auth2FloatUp {
    0%   { transform: translate3d(0, 0, 0) rotate(-5deg); opacity: 0; }
    14%  { opacity: .18; }
    82%  { opacity: .18; }
    100% { transform: translate3d(-60px, -108vh, 0) rotate(7deg); opacity: 0; }
}

.auth2-logo { display: flex; align-items: center; gap: 12px; }
.auth2-logo-mark { display: inline-flex; }
.auth2-logo-mark img { height: 34px; width: auto; display: block; }
.auth2-logo-word { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--a2-sand); }

.auth2-hero-wrap { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }
.auth2-hero-head { display: flex; flex-direction: column; gap: 14px; }
.auth2-eyebrow {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--a2-lagoon-light);
}
.auth2-hero {
    margin: 0; font-family: var(--a2-serif); font-weight: 400;
    font-size: clamp(34px, 3.2vw, 54px); line-height: 1.05;
    color: var(--a2-sand); text-wrap: balance;
}

.auth2-highlights { display: flex; flex-direction: column; gap: 22px; }
.auth2-hl-rule { height: 1px; background: rgba(255, 255, 255, .14); }
.auth2-hl-body-wrap { min-height: 118px; }
.auth2-hl-item { display: flex; flex-direction: column; gap: 10px; }
.auth2-hl-item[hidden] { display: none; }
.auth2-hl-title { font-size: 19px; font-weight: 700; color: var(--a2-sand); }
.auth2-hl-text { font-size: 15px; line-height: 1.65; color: rgba(250, 246, 239, .72); text-wrap: pretty; }

.auth2-dots { display: flex; gap: 8px; }
.auth2-dot {
    width: 44px; height: 3px; border: 0; padding: 0; border-radius: 2px;
    background: rgba(250, 246, 239, .22); cursor: pointer;
    transition: background .2s ease;
}
.auth2-dot.is-active { background: var(--a2-lagoon); }
.auth2-dot:focus-visible { outline: 2px solid var(--a2-lagoon-light); outline-offset: 4px; }

.auth2-modules {
    display: flex; flex-wrap: wrap; gap: 26px 28px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    color: rgba(250, 246, 239, .55);
}
.auth2-module { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.auth2-module i { font-size: 19px; color: rgba(127, 211, 200, .85); }

/* ---- Form panel --------------------------------------------------------- */
.auth2-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px; }
.auth2-form-col { width: 100%; max-width: 440px; }
.auth2-form { display: flex; flex-direction: column; gap: 26px; }

.auth2-head { display: flex; flex-direction: column; gap: 6px; }
.auth2-heading { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--a2-ink); }
.auth2-sub { margin: 0; font-size: 15px; color: var(--a2-text-muted); }

.auth2-fields { display: flex; flex-direction: column; gap: 16px; }
.auth2-field { display: flex; flex-direction: column; gap: 7px; }
.auth2-label { font-size: 13px; font-weight: 600; color: var(--a2-text-body); }
.auth2-label-row { display: flex; justify-content: space-between; align-items: center; }
.auth2-forgot { font-size: 13px; font-weight: 600; color: var(--a2-ocean); text-decoration: none; }
.auth2-forgot:hover { text-decoration: underline; }

.auth2-input {
    height: 50px; width: 100%;
    border: 1px solid var(--a2-border-input); border-radius: 10px; background: #fff;
    padding: 0 15px; font-family: inherit; font-size: 15px; color: var(--a2-ink);
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.auth2-input::placeholder { color: var(--a2-placeholder); }
.auth2-input:focus { border-color: var(--a2-ocean); box-shadow: 0 0 0 3px rgba(14, 76, 92, .12); }

.auth2-pw-wrap { position: relative; display: flex; }
.auth2-pw-wrap .auth2-input { padding-right: 74px; }
.auth2-pw-toggle {
    position: absolute; right: 8px; top: 9px; height: 32px; padding: 0 10px;
    border: 0; border-radius: 7px; background: var(--a2-sand-3); color: #5C574D;
    font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.auth2-pw-toggle:hover { background: #E6DECF; }
.auth2-pw-toggle:focus-visible { outline: 2px solid var(--a2-ocean); outline-offset: 2px; }

.auth2-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.auth2-check-input { width: 17px; height: 17px; accent-color: var(--a2-ocean); }
.auth2-check span { font-size: 14px; color: var(--a2-text-body); }

.auth2-btn {
    height: 54px; width: 100%; border: 0; border-radius: 10px;
    background: var(--a2-ocean); color: var(--a2-sand);
    font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .01em;
    cursor: pointer; transition: background .15s ease;
}
.auth2-btn:hover { background: var(--a2-ocean-hover); }
.auth2-btn:active { background: var(--a2-ocean-active); }
.auth2-btn:focus-visible { outline: 2px solid var(--a2-ocean); outline-offset: 2px; }
.auth2-btn:disabled { opacity: .6; cursor: not-allowed; }

.auth2-secure {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 18px; border: 1px solid var(--a2-line); border-radius: 12px; background: var(--a2-sand-2);
}
.auth2-secure-row { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--a2-ink); }
.auth2-secure-mark { width: 16px; height: 16px; border-radius: 4px 4px 7px 7px; background: var(--a2-lagoon); }
.auth2-secure-text { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--a2-text-muted); text-wrap: pretty; }

.auth2-footer {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
    padding-top: 14px; border-top: 1px solid var(--a2-line-2);
    font-size: 13px; color: var(--a2-text-muted);
}
.auth2-footer-alt { white-space: nowrap; }
.auth2-footer-alt a { font-weight: 700; color: var(--a2-ocean); text-decoration: none; }
.auth2-footer-alt a:hover { text-decoration: underline; }
.auth2-footer-copy { font-size: 12px; color: var(--a2-text-faint); white-space: nowrap; }

/* Flash / auth error banner inherits app styles but sits above the form. */
.auth2-form-col .alert { border-radius: 10px; }

/* ---- Stacking below 1100px (README breakpoint) -------------------------- */
@media (max-width: 1100px) {
    .auth2 { flex-direction: column; }
    .auth2-brand { flex: 0 0 auto; padding: 36px 24px 40px; gap: 32px; }
    .auth2-hero { font-size: 32px; }
    .auth2-hl-body-wrap { min-height: 0; }
    .auth2-form-panel { padding: 36px 24px 48px; }
}
@media (max-width: 480px) {
    .auth2-modules { gap: 20px 22px; }
    .auth2-heading { font-size: 26px; }
}

/* ---- Reduced motion ----------------------------------------------------- */
/* The drifting glyph field is purely decorative and starts below the fold for  */
/* its rise; there is no honest "static" resting position, so we retire the     */
/* layer entirely and drop transitions. Highlight auto-rotation is already       */
/* disabled in auth.js under the same preference.                                */
@media (prefers-reduced-motion: reduce) {
    .auth2-glyph { animation: none; }
    .auth2-bg { display: none; }
    .auth2-dot, .auth2-input, .auth2-btn { transition: none; }
}


/* ====================================================================== */
/* Responsive hardening — keep every screen inside the viewport on mobile */
/* ====================================================================== */

/* Nothing may exceed its container width. */
img, svg, video, canvas, pre { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }
/* Let flex/grid children shrink instead of forcing the page wider. */
.content-page, .content-page > .container-fluid, .page-content { min-width: 0; max-width: 100%; }
/* Toolbars and button rows wrap rather than overflow. */
.action-bar, .page-header, .report-tabs { flex-wrap: wrap; }
.report-tabs { row-gap: .35rem; }

/* The wide wordmark ("TAX INVOICE") must never break out of the doc card. */
.quote-doc .doc-word { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .page-header .page-title { font-size: 1.18rem; }
    .stat-card .stat-value { font-size: 1.3rem; }
    .card > .card-body { padding: .9rem; }
    h1.page-title { word-break: break-word; }

    /* Stack the document header (logo/company  ↕  wordmark) so the non-shrinking
       right-hand block can't push the wordmark off-screen. */
    .quote-doc > .d-flex { flex-direction: column; align-items: stretch !important; }
    .quote-doc > .d-flex > .text-end { flex: none !important; }

    /* Document preview shrinks to fit a phone instead of scrolling the page. */
    .quote-doc .doc-word { font-size: 1.2rem; letter-spacing: .1em; }
    .quote-doc .doc-name { font-size: 1.25rem; }
    .quote-doc .doc-items thead th,
    .quote-doc .doc-items tbody td { padding: .5rem .55rem; font-size: .8rem; }
    .quote-doc .doc-totalbox .amt { font-size: 1.15rem; }
    .pub-doc { padding: 18px !important; }

    /* Tighter dropdowns/menus so they never exceed the screen. */
    .dropdown-menu { max-width: calc(100vw - 1.5rem); }
}

/* ---- Dashboard KPI delta badge -------------------------------------------- */
.dash-delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .76rem; font-weight: 600; }
.dash-delta i { font-size: .95rem; }
.stat-card.card-hover { transition: transform .12s ease, box-shadow .12s ease; }

/* ---- Premium KPI tiles (dashboard) --------------------------------------- */
.kpi-tile { position: relative; }
.kpi-tile::before { display: none; }                 /* drop the repetitive top rule */
.kpi-tile .stat-icon { color: #fff; box-shadow: 0 6px 14px -7px rgba(16,24,40,.4); }
.kpi-tile .stat-value { font-size: 1.7rem; }
.kpi-emerald { background: linear-gradient(160deg, #ecfdf6 0%, #ffffff 62%); }
.kpi-emerald .stat-icon { background: linear-gradient(135deg, #10cf97, #0aa884); }
.kpi-indigo  { background: linear-gradient(160deg, #eef0fe 0%, #ffffff 62%); }
.kpi-indigo  .stat-icon { background: linear-gradient(135deg, var(--leja-iris), var(--leja-accent)); }
.kpi-amber   { background: linear-gradient(160deg, #fff7ec 0%, #ffffff 62%); }
.kpi-amber   .stat-icon { background: linear-gradient(135deg, #f0b259, var(--leja-gold)); }
/* Hero card — Leja indigo gradient (brand 'Single · Indigo') */
.kpi-hero { background: linear-gradient(135deg, var(--leja-iris), var(--leja-deep)); border: none; color: #fff; box-shadow: 0 16px 34px -16px rgba(58,51,201,.6); }
.kpi-hero .stat-label, .kpi-hero .stat-value, .kpi-hero .stat-meta { color: #fff !important; }
.kpi-hero .stat-meta { opacity: .85; }
.kpi-hero .stat-icon { background: rgba(255,255,255,.18) !important; color: #fff; box-shadow: none; }
.kpi-hero .dash-delta, .kpi-hero .dash-delta.text-muted, .kpi-hero .dash-delta.text-success, .kpi-hero .dash-delta.text-danger { color: rgba(255,255,255,.9) !important; }
.kpi-hero .btn-light { background: rgba(255,255,255,.2); border: none; color: #fff; }

/* Secondary metrics strip — lighter weight than the primary tiles */
.kpi-strip .kpi-seg { padding: .35rem 1rem; border-right: 1px solid var(--leja-border); }
.kpi-strip .kpi-seg:last-child { border-right: 0; }
.kpi-strip .seg-label { color: var(--leja-muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-strip .seg-value { font-size: 1.25rem; font-weight: 700; color: var(--leja-ink); line-height: 1.1; }
@media (max-width: 767.98px) {
    .kpi-strip .kpi-seg { border-bottom: 1px solid var(--leja-border); }
    .kpi-strip .kpi-seg:nth-child(2n) { border-right: 0; }
    .kpi-strip .kpi-seg:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ===== Dashboard glossy polish =========================================== */
/* Scoped to .dash-row (dashboard only). Content cards get a soft sheen + a
   richer layered shadow; KPI/stat tiles keep their own brand gradients. */
.dash-row .card:not(.stat-card) {
    background:
        linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border-color: #eef1f7;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 30px -20px rgba(30,41,82,.30);
}
/* a hairline highlight along the top edge = "glass" sheen */
.dash-row .card:not(.stat-card) { position: relative; }
.dash-row .card:not(.stat-card)::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--leja-radius) var(--leja-radius) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 18%, rgba(255,255,255,.9) 82%, transparent);
    pointer-events: none;
}
.dash-row .card:not(.stat-card):hover {
    box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 22px 42px -22px rgba(58,51,201,.30);
}
.kpi-tile.card-hover:hover, .kpi-strip:hover {
    box-shadow: 0 18px 38px -18px rgba(58,51,201,.42);
}

/* Section titles: branded accent bar + tighter type for a "panelled" look */
.dash-row .card h5 {
    font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em;
    display: inline-flex; align-items: center; gap: .55rem; line-height: 1.2;
}
.dash-row .card h5::before {
    content: ""; width: 4px; height: 1.05em; border-radius: 3px; flex: 0 0 4px;
    background: linear-gradient(180deg, var(--leja-iris), var(--leja-deep));
}
.dash-row .card .card-body > .d-flex .text-muted.small,
.dash-row .card .card-body > .d-flex .small { letter-spacing: .01em; }

/* The "external link" / report buttons inside section headers — quieter, glassy */
.dash-row .card .btn-soft {
    background: rgba(79,70,229,.06); border-color: transparent; color: var(--leja-accent);
}
.dash-row .card .btn-soft:hover { background: rgba(79,70,229,.12); }

/* Page header gets a touch of polish too */
.page-header .page-title { letter-spacing: -.02em; }

/* ===== Dashboard hero banner — full-bleed, warm pastel ================== */
/* --bleed = content-page padding (.625rem) + container-fluid padding (.625rem),
   so negative inline margins reach edge-to-edge: sidebar → right of screen. */
.dash-hero {
    --bleed: 1.25rem;
    position: relative; overflow: hidden; border-radius: 0; color: #fff;
    margin: -.5rem calc(-1 * var(--bleed)) 0;
    padding: 1.5rem var(--bleed) 3.6rem;
    background: linear-gradient(125deg, #13B2A2 0%, #0E8C82 50%, #0B6E69 100%);
    border-bottom: 1px solid rgba(8,70,66,.4);
}
.dash-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='46'%3E%3Cpath%20d='M23%204L42%2023L23%2042L4%2023Z'%20fill='none'%20stroke='rgba(255,255,255,0.12)'%20stroke-width='1.4'/%3E%3C/svg%3E");
}
.dash-hero > * { position: relative; z-index: 1; }
.hero-eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.hero-greet { color: #fff; font-size: 1.5rem; font-weight: 700; margin: .15rem 0 0; letter-spacing: -.01em; }
.hero-metrics { gap: 0 1.8rem; margin-top: 1.35rem; }
.hero-stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.hero-net { font-size: 2.5rem; font-weight: 800; line-height: 1.04; margin-top: .12rem; letter-spacing: -.02em; color: #fff; display: inline-flex; align-items: flex-start; gap: .4rem; }
.hero-info { background: rgba(255,255,255,.18); border: none; color: #fff; border-radius: 8px; width: 1.5rem; height: 1.5rem; font-size: .85rem; line-height: 1; padding: 0; margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; }
.hero-info:hover { background: rgba(255,255,255,.3); }
.hero-margin { font-size: .8rem; font-weight: 700; color: #FFD98A; margin-top: .3rem; display: inline-flex; align-items: center; gap: .3rem; }
.hero-extra { border-left: 1px solid rgba(255,255,255,.22); padding-left: 1.8rem; gap: 1.8rem; align-self: center; }
.hero-seg-val { font-size: 1.45rem; font-weight: 700; margin-top: .12rem; color: #fff; }
.btn-hero-solid { background: #fff; color: #0B6E69; border: none; font-weight: 700; }
.btn-hero-solid:hover, .btn-hero-solid:focus { background: #fff; color: #0B6E69; filter: brightness(.97); }
.btn-hero-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.32); font-weight: 600; }
.btn-hero-ghost:hover, .btn-hero-ghost:focus { background: rgba(255,255,255,.26); color: #fff; }

/* Floating KPI cards overlap the hero's lower edge; tints come from .kpi-* */
.dash-cards-overlap { margin-top: -2.7rem; position: relative; z-index: 3; }
.dash-float-card { box-shadow: 0 16px 34px -18px rgba(30,41,82,.32); }
.dash-float-card:hover { box-shadow: 0 22px 42px -18px rgba(58,51,201,.34); transform: translateY(-2px); }
.dash-float-card .stat-value { font-size: 1.5rem; }
.dash-float-card .stat-icon { width: 40px; height: 40px; }

/* Rose tone for KPI tiles (Total expenses) */
.kpi-rose { background: linear-gradient(160deg, #ffeef1 0%, #ffffff 62%); }
.kpi-rose .stat-icon { background: linear-gradient(135deg, #f67e94, #e0566b); }

/* Recent payments feed — last row has no divider */
.pay-feed li:last-child { border-bottom: 0 !important; }

@media (max-width: 575.98px) {
    .dash-hero { padding: 1.2rem var(--bleed) 3.4rem; }
    .hero-net { font-size: 2rem; }
    .hero-extra { border-left: 0; padding-left: 0; margin-top: .7rem; width: 100%; gap: 1.2rem; }
}

/* ===== Profile header card (users & customers) ========================== */
.profile-head { overflow: hidden; }
.profile-cover {
    height: 104px; position: relative;
    background: linear-gradient(115deg, #f3f5f9 0%, #e9edf3 55%, #dfe4ec 100%);
    border-bottom: 1px solid var(--leja-border);
}
.profile-cover::after {
    content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='46'%3E%3Cpath%20d='M23%204L42%2023L23%2042L4%2023Z'%20fill='none'%20stroke='rgba(123,135,148,0.12)'%20stroke-width='1.4'/%3E%3C/svg%3E");
}
.profile-avatar { margin-top: -52px; flex: 0 0 auto; position: relative; z-index: 1; }
.profile-avatar img, .profile-avatar .avatar-initial {
    border: 4px solid #fff; box-shadow: 0 8px 20px -10px rgba(16,24,40,.45);
}
.profile-head .page-title { font-size: 1.3rem; }
.profile-head .profile-meta i { color: var(--leja-muted); }
@media (max-width: 575.98px) {
    .profile-cover { height: 88px; }
    .profile-avatar { margin-top: -46px; }
    .profile-head .profile-actions { width: 100%; }
    .profile-head .profile-actions > .btn,
    .profile-head .profile-actions > .dropdown { flex: 1 1 auto; }
    .profile-head .profile-actions > .dropdown > .btn { width: 100%; }
}

/* ============================================================================
   FINANCE-FIRST REDESIGN — appended override layer (visual pass only).
   Calm finance look: navy sidebar, light-grey workspace, white cards, one blue
   accent; de-gradients the loud greeting/KPI surfaces. No markup/logic changes.
   Wins by being last in the cascade + matched specificity.
   ============================================================================ */
:root {
  --leja-accent: #2563EB;          /* finance blue (was indigo) */
  --leja-accent-rgb: 37, 99, 235;
  --leja-iris: #3B82F6;            /* neutralise old purple gradient anchors */
  --leja-deep: #1D4ED8;
  --leja-bg: #F6F8FB;
  --leja-cloud: #F8FAFC;
  --leja-border: #E5E7EB;
  --leja-ink: #111827;
  --leja-muted: #64748B;
  --leja-money: #059669;
  --leja-radius: 12px;
}
:root { --fin-primary-soft: #EFF6FF; --fin-neutral-soft: #F1F5F9; }

/* --- Buttons: sharper, consistent, blue primary --- */
.btn { border-radius: 8px; }
.btn-primary { background: var(--leja-accent); border-color: var(--leja-accent); }
.btn-primary:hover, .btn-primary:focus { background: #1D4ED8; border-color: #1D4ED8; filter: none; box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.btn-soft { border-radius: 8px; }
.btn-soft i { color: var(--leja-accent); }

/* --- Inputs: blue focus --- */
.form-control:focus, .form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--leja-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15) !important;
}

/* --- Sidebar: deep navy, subtle blue active --- */
[data-menu-color="gradient"] .sidenav-menu,
.wrapper .sidenav-menu { background: #0F172A !important; border-right: 1px solid rgba(255,255,255,.06); }
.sidenav-menu .side-nav-link { color: #CBD5E1; font-size: 13px; }
.sidenav-menu .side-nav-link:hover { background: #1E293B; color: #fff; }
.sidenav-menu .side-nav-link.active { background: #1E293B !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--leja-accent); }
.sidenav-menu .side-nav-link.active .menu-icon, .sidenav-menu .side-nav-link.active .menu-icon i { color: #fff; }
.sidenav-menu .side-nav-title { color: #94A3B8; opacity: 1; }
.sidenav-footer { border-top: 1px solid rgba(255,255,255,.08); padding: .75rem; }
.sidenav-footer .ws-card { background: rgba(255,255,255,.05); }
.sidenav-footer .ws-avatar { background: var(--leja-accent) !important; }

/* ---- Workspace card: shared LAYOUT ----------------------------------------
   Only colour lived in the app stylesheets, and only in hrmis.css / payroll.css
   — which load exclusively on /hrmis and /payroll (layouts/app.php). Every other
   surface (Billing, Accounting, Compliance) therefore rendered this card with no
   layout at all: unstyled avatar, text escaping its padding, nothing truncated.
   Layout belongs here where every surface gets it; the themes keep their colours. */
.ws-card { display: flex; align-items: center; gap: 10px; padding: .55rem .6rem; border-radius: 12px; }
.ws-avatar {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em;
}
/* min-width:0 is what allows the children below to ellipsis inside a flex row. */
.ws-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ws-title, .ws-user, .ws-role {
    display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-title { font-size: 12.5px; font-weight: 600; }
.ws-user { font-size: 11px; opacity: .78; }
/* The role is its own line so a long user name can never push it out of view. */
.ws-role { font-size: 10.5px; opacity: .6; text-transform: capitalize; }

/* Condensed: avatar only, full card restored on hover-expand — same treatment as
   the menu items and the Apps strip, so the whole rail behaves as one. */
[data-sidenav-size="condensed"] .sidenav-menu .sidenav-footer { padding: .5rem; }
[data-sidenav-size="condensed"] .sidenav-menu .ws-card { justify-content: center; gap: 0; padding: .4rem; }
[data-sidenav-size="condensed"] .sidenav-menu .ws-text { display: none; }
[data-sidenav-size="condensed"] .sidenav-menu:hover .ws-card { justify-content: flex-start; gap: 10px; padding: .55rem .6rem; }
[data-sidenav-size="condensed"] .sidenav-menu:hover .ws-text { display: flex; }

/* --- Topbar: flat white + border, calm toggle --- */
.app-topbar { background: #fff; border-bottom: 1px solid var(--leja-border); box-shadow: none; }
.app-topbar .sidenav-toggle-button { background: #F1F5F9; color: #475569; border: 1px solid var(--leja-border); }
.app-topbar .sidenav-toggle-button:hover { background: #E2E8F0; color: var(--leja-ink); }

/* --- Dashboard greeting: white snapshot card, no gradient/pattern --- */
.dash-hero { --bleed: 0px; background: #fff !important; color: var(--leja-ink) !important;
  border: 1px solid var(--leja-border); border-radius: var(--leja-radius);
  margin: 0 0 20px !important; padding: 20px 24px !important; }
.dash-hero::before { display: none !important; }
.hero-eyebrow { color: var(--leja-muted) !important; }
.hero-greet { color: var(--leja-ink) !important; font-size: 1.25rem; }
.hero-stat-label { color: var(--leja-muted) !important; }
.hero-net { color: var(--leja-ink) !important; }
.dash-hero .hero-net.text-money { color: var(--leja-money) !important; }
.hero-info { background: #F1F5F9 !important; color: var(--leja-muted) !important; }
.hero-info:hover { background: #E2E8F0 !important; color: var(--leja-ink) !important; }
.hero-margin { color: var(--leja-money) !important; }
.hero-extra { border-left-color: var(--leja-border) !important; }
.hero-seg-val { color: var(--leja-ink) !important; }
.btn-hero-solid { background: var(--leja-accent) !important; color: #fff !important; border: 1px solid var(--leja-accent) !important; font-weight: 600 !important; }
.btn-hero-solid:hover, .btn-hero-solid:focus { background: #1D4ED8 !important; color: #fff !important; filter: none; }
.btn-hero-ghost { background: #fff !important; color: var(--leja-ink) !important; border: 1px solid #CBD5E1 !important; font-weight: 600 !important; }
.btn-hero-ghost:hover, .btn-hero-ghost:focus { background: #F1F5F9 !important; color: var(--leja-ink) !important; }
.dash-cards-overlap { margin-top: 0 !important; }

/* --- KPI tiles: white, subtle semantic icon chips (no gradient blocks) --- */
.kpi-emerald, .kpi-indigo, .kpi-amber, .kpi-rose { background: #fff !important; }
.kpi-tile .stat-icon { width: 34px !important; height: 34px !important; border-radius: 8px; box-shadow: none !important; }
.kpi-emerald .stat-icon { background: #ECFDF5 !important; color: #059669 !important; }
.kpi-indigo  .stat-icon { background: #EFF6FF !important; color: #2563EB !important; }
.kpi-amber   .stat-icon { background: #FFFBEB !important; color: #D97706 !important; }
.kpi-rose    .stat-icon { background: #FEF2F2 !important; color: #DC2626 !important; }

/* Net-profit hero KPI → white with a strong value (not a loud gradient) */
.kpi-hero { background: #fff !important; border: 1px solid var(--leja-border) !important; color: var(--leja-ink) !important; box-shadow: var(--leja-shadow-sm) !important; }
.kpi-hero .stat-label, .kpi-hero .stat-meta { color: var(--leja-muted) !important; opacity: 1; }
.kpi-hero .stat-value { color: var(--leja-ink) !important; }
.kpi-hero .stat-icon { background: #EFF6FF !important; color: var(--leja-accent) !important; box-shadow: none !important; }
.kpi-hero .dash-delta, .kpi-hero .dash-delta.text-muted, .kpi-hero .dash-delta.text-success, .kpi-hero .dash-delta.text-danger { color: inherit !important; }
.kpi-hero .btn-light { background: #F1F5F9 !important; color: var(--leja-ink) !important; }

/* --- Content cards: drop glossy sheen + heavy shadow; blue section bar --- */
.dash-row .card:not(.stat-card) { background: #fff !important; border-color: var(--leja-border) !important; box-shadow: var(--leja-shadow-sm) !important; }
.dash-row .card:not(.stat-card)::after { display: none !important; }
.dash-row .card:not(.stat-card):hover { box-shadow: var(--leja-shadow-md) !important; }
.dash-row .card h5::before { background: var(--leja-accent) !important; }
.dash-row .card .btn-soft { background: #EFF6FF !important; color: var(--leja-accent) !important; }
.kpi-tile.card-hover:hover, .kpi-strip:hover, .dash-float-card:hover { box-shadow: var(--leja-shadow-md) !important; transform: none !important; }

/* --- Generic stat icons + empty states --- */
.stat-icon { width: 36px; height: 36px; }
.stat-icon.is-primary { background: #EFF6FF; color: var(--leja-accent); }
.empty-state .es-icon { background: #F1F5F9 !important; color: var(--leja-muted) !important; }

/* --- Misc brand accents → blue --- */
.brand-mark { background: var(--leja-accent) !important; box-shadow: none !important; }
.leja-spinner { border-color: rgba(37,99,235,.18); border-top-color: var(--leja-accent); }
#leja-topbar-progress { background: var(--leja-accent); box-shadow: none; }

/* --- Header refinement: soft light gradient + blue accent line + legible dark text --- */
.app-topbar {
  color: var(--leja-ink) !important;
  background: linear-gradient(90deg, #FFFFFF 0%, #EEF3FB 60%, #F4F7FC 100%) !important;
  border-bottom: 1px solid #E5E7EB !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: relative;
}
.app-topbar::after {                 /* thin blue accent line under the header */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; top: auto;
  height: 2px; opacity: 1; pointer-events: none;
  background: linear-gradient(90deg, #2563EB 0%, #60A5FA 45%, rgba(147,197,253,0) 100%) !important;
}
.app-topbar h4 { color: var(--leja-ink) !important; }
.app-topbar h4 .text-muted, .app-topbar h4 .fw-normal { color: var(--leja-muted) !important; }
.app-topbar .text-muted { color: var(--leja-muted) !important; }
.app-topbar .nav-user .fw-semibold { color: var(--leja-ink) !important; }
.app-topbar .topbar-item i,
.app-topbar .topbar-link { color: #64748B !important; }
.app-topbar .topbar-link:hover .fw-semibold,
.app-topbar .topbar-link:hover { color: var(--leja-ink) !important; }
.app-topbar .sidenav-toggle-button { background: #EAF0FB !important; color: #334155 !important; border: 1px solid #DCE4F1 !important; }
.app-topbar .sidenav-toggle-button:hover { background: #DCE7F8 !important; color: var(--leja-ink) !important; }

/* ============================================================
   SECOND-PASS REFINEMENT — finance-snapshot header, quieter
   section markers, compact intentional empty states
   ============================================================ */

/* --- Top summary: a structured financial snapshot, not a greeting banner --- */
.dash-hero { padding: 15px 22px 17px !important; }
.hero-eyebrow { font-size: .67rem !important; letter-spacing: .09em !important; color: var(--leja-muted) !important; }
.hero-greet { font-size: 1.02rem !important; font-weight: 600 !important; color: var(--leja-ink) !important; margin-top: .05rem !important; }
.quick-actions .btn { border-radius: 8px !important; }

/* thin divider separates the greeting strip from the financial metrics */
.hero-metrics {
  margin-top: .85rem !important;
  padding-top: .9rem !important;
  border-top: 1px solid var(--leja-border) !important;
  gap: 0 !important; row-gap: .9rem !important;
}
.hero-primary { padding-right: 1.7rem; }
.hero-net { font-size: 2.05rem !important; font-weight: 800 !important; margin-top: .05rem !important; }
.hero-stat-label { font-size: .67rem !important; letter-spacing: .07em !important; }
.hero-margin { font-size: .77rem !important; margin-top: .25rem !important; }

/* evenly-separated metric grid with subtle vertical dividers */
.hero-extra { border-left: 1px solid var(--leja-border) !important; padding-left: 0 !important; gap: 0 !important; align-self: stretch; }
.hero-seg { padding: 0 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.hero-seg + .hero-seg { border-left: 1px solid var(--leja-border); }
.hero-seg-val { font-size: 1.18rem !important; font-weight: 700 !important; }

@media (max-width: 767.98px) {
  .hero-primary { padding-right: 0; }
  .hero-extra { border-left: 0 !important; width: 100%; flex-wrap: wrap; }
  .hero-seg { padding: .35rem 1.1rem .35rem 0; }
  .hero-seg + .hero-seg { border-left: 0; }
}

/* --- Section heading marker: intentional, only on flagship panels --- */
.dash-row .card h5::before { display: none !important; }          /* remove the repeated bar everywhere */
.dash-row .card h5.sec-marker::before {                            /* ...bring it back only where it earns its place */
  display: inline-block !important;
  width: 3px !important; height: .95em !important; flex: 0 0 3px !important;
  border-radius: 3px !important; background: var(--leja-accent) !important;
}

/* --- Empty states: compact, two-line finance-panel copy --- */
.dash-row .empty-state { padding: 1.1rem 1rem !important; }
.dash-row .empty-state .es-icon {
  width: 38px !important; height: 38px !important; border-radius: 10px !important;
  font-size: 19px !important; margin: 0 auto .5rem !important;
  background: #F1F5F9 !important; color: var(--leja-muted) !important;
}
.dash-row .empty-state .es-title { font-size: .82rem; font-weight: 600; color: var(--leja-ink); margin-bottom: .12rem; letter-spacing: -.005em; }
.dash-row .empty-state .es-hint { font-size: .74rem; line-height: 1.4; color: var(--leja-muted); max-width: 23rem; margin: 0 auto; }

/* ============================================================
   TENANT SETTINGS WORKSPACE — scoped to .settings-workspace /
   .settings-tabs so the platform console is unaffected. Quiet,
   compact, operational SaaS settings surfaces (radius <= 8px).
   ============================================================ */

/* --- Grouped settings sub-nav (replaces the 10 crowded tabs) --- */
.settings-tabs .settings-group-btn {
    background: #fff; border: 1px solid var(--leja-border); color: var(--leja-ink);
    border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center;
}
.settings-tabs .settings-group-btn:hover { background: #F1F5F9; }
.settings-tabs .settings-group-btn.active { background: #EFF6FF; border-color: #BFDBFE; color: var(--leja-accent); }
.settings-tabs .settings-group-current {
    margin-left: .4rem; padding-left: .5rem; border-left: 1px solid currentColor;
    opacity: .8; font-weight: 500;
}
.settings-tabs .dropdown-menu { border-radius: 8px; border-color: var(--leja-border); box-shadow: var(--leja-shadow-md); }
.settings-tabs .dropdown-item { display: flex; align-items: center; font-size: .9rem; }
.settings-tabs .dropdown-item.active { background: #EFF6FF; color: var(--leja-accent); font-weight: 600; }
.settings-tabs .dropdown-item .ti-check { color: var(--leja-accent); }

/* --- Workspace shell --- */
.settings-workspace { --sw-top: 88px; }
.settings-workspace .sw-context {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem;
    background: #fff; border: 1px solid var(--leja-border); border-radius: 8px;
    padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.settings-workspace .sw-context-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.settings-workspace .sw-context-desc { color: var(--leja-muted); font-size: .82rem; max-width: 46rem; margin-top: .15rem; }
.settings-workspace .sw-status {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 999px;
}
.settings-workspace .sw-status.is-active { background: #ECFDF5; color: #059669; }
.settings-workspace .sw-status.is-suspended { background: #FEF2F2; color: #DC2626; }
.settings-workspace .sw-status.is-archived { background: #F1F5F9; color: var(--leja-muted); }
.settings-workspace .sw-lejaid {
    display: inline-flex; align-items: center; gap: .4rem; background: #F8FAFC;
    border: 1px solid var(--leja-border); border-radius: 8px; padding: .3rem .5rem;
}
.settings-workspace .sw-lejaid code { background: transparent; color: var(--leja-ink); font-size: .82rem; }

/* --- Two-column layout: sticky section nav + editing panel --- */
.settings-workspace .sw-grid { display: flex; align-items: flex-start; gap: 1.25rem; }
.settings-workspace .sw-nav {
    position: sticky; top: var(--sw-top); flex: 0 0 232px; width: 232px;
    display: flex; flex-direction: column; gap: .15rem;
}
.settings-workspace .sw-nav-link {
    display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px;
    color: var(--leja-ink); text-decoration: none; font-weight: 500; font-size: .88rem;
    border: 1px solid transparent; transition: background .12s, color .12s;
}
.settings-workspace .sw-nav-link i { color: var(--leja-muted); font-size: 1.05rem; }
.settings-workspace .sw-nav-link:hover { background: #F1F5F9; }
.settings-workspace .sw-nav-link.active { background: #EFF6FF; color: var(--leja-accent); border-color: #DBEAFE; font-weight: 600; }
.settings-workspace .sw-nav-link.active i { color: var(--leja-accent); }
.settings-workspace .sw-nav-link:focus-visible { outline: 2px solid var(--leja-accent); outline-offset: 2px; }

.settings-workspace .sw-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 5rem; }
.settings-workspace .sw-section {
    background: #fff; border: 1px solid var(--leja-border); border-radius: 8px;
    padding: 1.15rem 1.25rem; scroll-margin-top: var(--sw-top);
}
.settings-workspace .sw-section-head { margin-bottom: .9rem; }
.settings-workspace .sw-section-head h5 { font-size: 1rem; font-weight: 700; margin: 0; }
.settings-workspace .sw-section-head p { color: var(--leja-muted); font-size: .8rem; margin: .2rem 0 0; }
.settings-workspace .sw-section-head .ti { color: var(--leja-accent); }

/* --- Branding preview (lightweight document mock, not a template engine) --- */
.settings-workspace .sw-preview {
    border: 1px solid var(--leja-border); border-radius: 8px; overflow: hidden; background: #fff;
}
.settings-workspace .sw-preview-bar { height: 6px; background: var(--sw-accent, #4F46E5); }
.settings-workspace .sw-preview-body { display: flex; align-items: center; gap: .75rem; padding: .85rem; }
.settings-workspace .sw-preview-logo { max-height: 40px; max-width: 120px; }
.settings-workspace .sw-preview-logo-ph {
    width: 44px; height: 44px; border-radius: 8px; background: #F1F5F9; color: var(--leja-muted);
    display: inline-grid; place-items: center; font-size: 20px; flex: 0 0 auto;
}
.settings-workspace .sw-preview-co { font-weight: 700; color: var(--leja-ink); font-size: .9rem; }
.settings-workspace .sw-preview-doc { margin-left: auto; text-align: right; }
.settings-workspace .sw-preview-doc .lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leja-muted); }
.settings-workspace .sw-preview-doc .amt { font-weight: 700; color: var(--sw-accent, #4F46E5); }
.settings-workspace .sw-preview-th {
    display: flex; gap: 1rem; padding: .35rem .85rem; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--sw-accent, #4F46E5);
}

/* --- Logo dropzone (reusable classes; no inline styling) --- */
.settings-workspace .sw-dropzone {
    cursor: pointer; border: 2px dashed #d4dae3; background: #fafbfc; border-radius: 8px;
    text-align: center; padding: 1.25rem; transition: border-color .15s, background .15s;
}
.settings-workspace .sw-dropzone.is-dragover { border-color: var(--leja-accent); background: rgba(37,99,235,.05); }
.settings-workspace .sw-uploads-note { font-size: .72rem; color: var(--leja-muted); }

/* --- Bank account rows --- */
.settings-workspace .bank-account { border: 1px solid var(--leja-border); border-radius: 8px; }
.settings-workspace .sw-readonly-note { font-size: .74rem; color: var(--leja-muted); }

/* --- Sticky action bar --- */
.settings-workspace .sw-actionbar {
    position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center;
    justify-content: flex-end; gap: .85rem; margin-top: 1rem;
    padding: .7rem 1rem; padding-right: 140px;   /* clear the fixed Help FAB at bottom-right */
    background: rgba(255,255,255,.96); backdrop-filter: blur(4px);
    border: 1px solid var(--leja-border); border-radius: 8px; box-shadow: 0 -2px 12px -6px rgba(15,23,42,.18);
}
.settings-workspace .sw-dirty {
    display: none; align-items: center; gap: .35rem; color: #B45309; font-size: .8rem; font-weight: 600; margin-right: auto;
}
.settings-workspace.is-dirty .sw-dirty { display: inline-flex; }
.settings-workspace .sw-saved { display: inline-flex; align-items: center; gap: .35rem; color: var(--leja-money); font-size: .8rem; font-weight: 600; margin-right: auto; }
.settings-workspace.is-dirty .sw-saved { display: none; }

/* --- Responsive: nav becomes a horizontal scroll strip, one-column fields --- */
@media (max-width: 991.98px) {
    .settings-workspace .sw-grid { display: block; }
    .settings-workspace .sw-nav {
        position: sticky; top: var(--sw-top); z-index: 15; flex: none; width: auto;
        flex-direction: row; overflow-x: auto; gap: .4rem; padding: .5rem;
        background: #fff; border: 1px solid var(--leja-border); border-radius: 8px; margin-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }
    .settings-workspace .sw-nav-link { white-space: nowrap; flex: 0 0 auto; }
    .settings-workspace .sw-panel { padding-bottom: 4rem; }
}
@media (max-width: 575.98px) {
    /* FAB collapses to an icon (~56px) under 576px, so less clearance is needed. */
    .settings-workspace .sw-actionbar { padding-right: 76px; }
}

/* --- toastr (quick notifications) — Leja palette + rounded, self-hosted --- */
#toast-container > div {
    border-radius: 8px; opacity: 1; font-family: inherit; padding: 13px 16px 13px 46px;
    box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .4);
}
#toast-container > div:hover { box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .5); }
#toast-container > .toast-success { background-color: #059669; }
#toast-container > .toast-error   { background-color: #DC2626; }
#toast-container > .toast-warning { background-color: #D97706; }
#toast-container > .toast-info    { background-color: #2563EB; }
.toast-title { font-weight: 700; }
.toast-message { font-size: .86rem; }

/* ============================================================
   DOCUMENT TEMPLATES workspace — extends .settings-workspace.
   Scoped under .doctpl-workspace so the platform console is
   unaffected. Config column (left) + sticky live preview (right).
   ============================================================ */
/* Field hints. These tell somebody what a control will do, so they sit on the 13px instruction
   floor rather than the .76rem (≈12.2px) they were written at — the design system reserves
   anything smaller for non-essential metadata. See docs/leja-ux-design-system.md. */
.doctpl-workspace .doctpl-hint { display: block; font-size: .8125rem; line-height: 1.45; color: var(--leja-muted); }
.doctpl-workspace .doctpl-hint a { color: var(--leja-accent); }

/* The switcher's lead-in. It replaced a context header that restated the page title, the company
   name and — since the workspace split in two — a description that was no longer true. This says
   the one thing that actually changes as you move around the page. */
.doctpl-workspace .doctpl-switch-label { font-size: .875rem; color: var(--leja-muted); margin: 0 0 .5rem; }
.doctpl-workspace .doctpl-switch-label strong { color: var(--leja-ink); }
.doctpl-workspace .doctpl-switch { display: inline-flex; gap: .25rem; background: #EEF2F7; border: 1px solid var(--leja-border); border-radius: 10px; padding: .25rem; }
.doctpl-workspace .doctpl-switch a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 8px; font-weight: 600; font-size: .86rem; color: var(--leja-muted); text-decoration: none; }
.doctpl-workspace .doctpl-switch a:hover { color: var(--leja-ink); }
.doctpl-workspace .doctpl-switch a.active { background: #fff; color: var(--leja-accent); box-shadow: var(--leja-shadow-sm); }
.doctpl-workspace .doctpl-switch a:focus-visible { outline: 2px solid var(--leja-accent); outline-offset: 2px; }

.doctpl-workspace .doctpl-lifecycle { display: flex; gap: .6rem; align-items: flex-start; background: #F8FAFC; border: 1px solid var(--leja-border); border-left: 3px solid var(--leja-accent); border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; }
.doctpl-workspace .doctpl-lifecycle > i { color: var(--leja-accent); margin-top: .1rem; }
/* ⚠️ THIS BLOCK IS INSTRUCTIONS, SO IT SITS ON THE INSTRUCTION FLOOR. It was .82rem over .78rem —
   about 13px over 12.5px — and the design system reserves anything under 13px for non-essential
   metadata, never for text that tells somebody what a control will do. This is the only place on
   the page that explains when a saved change reaches a customer. See docs/leja-ux-design-system.md. */
.doctpl-workspace .doctpl-lifecycle .t { font-size: .875rem; font-weight: 600; color: var(--leja-ink); }
.doctpl-workspace .doctpl-lifecycle ul { margin: .3rem 0 0; padding-left: 1rem; color: var(--leja-muted); font-size: .8125rem; line-height: 1.5; }
.doctpl-workspace .doctpl-lifecycle li { margin-bottom: .1rem; }

.doctpl-workspace .doctpl-grid { display: flex; align-items: flex-start; gap: 1.25rem; }
.doctpl-workspace .doctpl-config { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 5rem; }
.doctpl-workspace .doctpl-previewwrap { position: sticky; top: var(--sw-top); flex: 1 1 0; min-width: 0; width: auto; max-width: none; }

/* shared company branding summary (read-only) */
.doctpl-workspace .doctpl-brand { display: flex; align-items: center; gap: .8rem; background: #F8FAFC; border: 1px solid var(--leja-border); border-radius: 8px; padding: .7rem .85rem; }
.doctpl-workspace .doctpl-brand-logo { max-height: 40px; max-width: 96px; }
.doctpl-workspace .doctpl-brand-logo-ph { width: 40px; height: 40px; border-radius: 8px; background: #EEF2F7; color: var(--leja-muted); display: inline-grid; place-items: center; flex: 0 0 auto; }
.doctpl-workspace .doctpl-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); display: inline-block; vertical-align: middle; }

/* masked bank-accounts summary */
.doctpl-workspace .doctpl-bank { border: 1px solid var(--leja-border); border-radius: 8px; padding: .55rem .7rem; font-size: .78rem; }
.doctpl-workspace .doctpl-bank + .doctpl-bank { margin-top: .45rem; }
.doctpl-workspace .doctpl-bank .lbl { font-weight: 600; color: var(--leja-ink); }
.doctpl-workspace .doctpl-bank .num { font-variant-numeric: tabular-nums; color: var(--leja-muted); }

/* --- Genuine preview: an iframe of the REAL rendered document + compact toolbar --- */
.doctpl-mobile-preview { display: none; }
.doctpl-preview-toolbar { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border: 1px solid var(--leja-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: #F8FAFC; }
.doctpl-preview-title { font-size: .82rem; font-weight: 600; color: var(--leja-ink); display: inline-flex; align-items: center; }
.doctpl-sample-badge { margin-left: .4rem; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--leja-muted); background: #EEF2F7; border: 1px solid var(--leja-border); border-radius: 999px; padding: .05rem .4rem; }
.doctpl-update-badge { font-size: .68rem; font-weight: 600; color: #B45309; display: inline-flex; align-items: center; }
.doctpl-frame-wrap { position: relative; border: 1px solid var(--leja-border); border-radius: 0 0 8px 8px; overflow: hidden; background: #64748b; }
.doctpl-frame { display: block; width: 100%; height: 74vh; min-height: 680px; border: 0; background: #fff; }
.doctpl-frame-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.55); }
.doctpl-preview-foot { font-size: .72rem; color: var(--leja-muted); margin-top: .4rem; }

/* Expanded preview modal — fit to an A4 page (not a wide empty canvas), internal scroll */
.doctpl-modal-dialog { max-width: min(96vw, 920px); margin: 3vh auto; }
.doctpl-modal-dialog .modal-content { height: 92vh; border-radius: 10px; overflow: hidden; }
.doctpl-modal-body { padding: 0; background: #64748b; overflow: auto; }
.doctpl-modal-frame { display: block; width: 100%; height: 100%; border: 0; background: #64748b; }

@media (max-width: 991.98px) {
    .doctpl-workspace .doctpl-grid { display: block; }
    .doctpl-workspace .doctpl-previewwrap { display: none; }        /* mobile: preview opens in the modal */
    .doctpl-workspace .doctpl-mobile-preview { display: block; }
    .doctpl-workspace .doctpl-switch { width: 100%; overflow-x: auto; }
    .doctpl-modal-dialog { max-width: 96vw; margin: 2vh auto; }
    .doctpl-modal-dialog .modal-content { height: 94vh; }
}

/* ============================================================================
   CLIENT ACCOUNT WORKSPACE — /clients/{id} finance-first profile (visual only).
   Scoped .acct-* classes; reuses badge/stat tokens. Radius <=8px on new parts.
   ============================================================================ */
.acct-head .card-body { padding: 18px 20px; }
.acct-head-row { display: flex; gap: 18px 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.acct-head-main { min-width: 0; flex: 1 1 320px; }
.acct-title-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.acct-title { font-size: 1.4rem; font-weight: 700; color: var(--leja-ink); margin: 0; line-height: 1.2; }
.acct-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 7px; color: var(--leja-muted); font-size: .82rem; }
.acct-sub .text-capitalize { color: var(--leja-ink); }
.acct-code { font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace); background: var(--fin-neutral-soft); border: 1px solid var(--leja-border); border-radius: 6px; padding: 1px 7px; font-size: .76rem; color: #334155; }
.acct-dot { color: #cbd5e1; }
.acct-signals { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; }
.acct-signal { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--leja-ink); min-width: 0; }
.acct-signal i { color: var(--leja-muted); font-size: 1rem; flex: 0 0 auto; }
.acct-signal .lbl { color: var(--leja-muted); }
.acct-signal .val { font-weight: 600; }
.acct-signal .sub { color: var(--leja-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.acct-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-actions .dropdown-toggle::after { display: none; }

/* Finance band */
.acct-band { margin-bottom: 16px; overflow: hidden; }
.acct-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.acct-cell { padding: 15px 18px; border-left: 1px solid var(--leja-border); }
.acct-cell:first-child { border-left: 0; }
.acct-cell-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--leja-muted); }
.acct-cell-value { font-size: 1.4rem; font-weight: 700; color: var(--leja-ink); margin: .18rem 0 .12rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.acct-cell-sub { font-size: .75rem; color: var(--leja-muted); }
.acct-cell.is-overdue { background: #FEF2F2; }
.acct-cell.is-overdue .acct-cell-value { color: #DC2626; }

/* Next best action */
.acct-nba { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--leja-border); border-radius: 8px; background: var(--fin-neutral-soft); margin-bottom: 18px; }
.acct-nba.is-alert { background: #FEF2F2; border-color: #FECACA; }
.acct-nba.is-good { background: #ECFDF5; border-color: #A7F3D0; }
.acct-nba .nba-ico { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; background: #fff; border: 1px solid var(--leja-border); color: var(--leja-muted); }
.acct-nba.is-alert .nba-ico { color: #DC2626; }
.acct-nba.is-good .nba-ico { color: #059669; }
.acct-nba .nba-text { flex: 1 1 auto; min-width: 0; font-size: .85rem; color: var(--leja-ink); }
.acct-nba .nba-text .muted { color: var(--leja-muted); }
.acct-nba .btn { flex: 0 0 auto; }

/* Tabs — no overflow on mobile */
.acct-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs .nav-link { white-space: nowrap; }

/* Snapshot */
.acct-sec-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--leja-muted); margin: 0 0 12px; }
.acct-contact { border: 1px solid var(--leja-border); border-radius: 8px; padding: 12px 13px; background: var(--fin-primary-soft); }
.acct-contact-name { font-weight: 700; color: var(--leja-ink); font-size: .9rem; }
.acct-contact-line { font-size: .8rem; color: var(--leja-muted); margin-top: 3px; }
.acct-contact-line i { color: var(--leja-muted); }
.acct-contact-line a { color: var(--leja-ink); text-decoration: none; word-break: break-word; }
.acct-contact-line a:hover { text-decoration: underline; }
.acct-rx { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.acct-rx .rx { font-size: .62rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: #fff; border: 1px solid var(--leja-border); color: #475569; }
.acct-contactlist { margin-top: 6px; }
.acct-contact-item { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--leja-border); }
.acct-contact-item.is-inactive { opacity: .55; }

.acct-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; font-size: .82rem; }
.acct-dl dt { color: var(--leja-muted); font-weight: 500; }
.acct-dl dd { margin: 0; color: var(--leja-ink); text-align: right; font-weight: 500; word-break: break-word; }

.acct-addr { font-size: .82rem; }
.acct-addr + .acct-addr { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--leja-border); }
.acct-addr.is-inactive { opacity: .55; }
.acct-addr-type { font-weight: 600; color: var(--leja-ink); text-transform: capitalize; }
.acct-addr-body { color: var(--leja-muted); margin-top: 2px; }

/* Empty states */
.acct-empty { text-align: center; padding: 26px 16px; color: var(--leja-muted); }
.acct-empty i { font-size: 1.6rem; color: #cbd5e1; display: block; margin-bottom: 6px; }
.acct-empty .msg { font-size: .85rem; }
.acct-empty .btn { margin-top: 12px; }

/* Extra risk/status badge tones */
.badge-amber { background-color: #FEF3C7; color: #B45309; }
.badge-lowrisk { background-color: #DCFCE7; color: #15803D; }

/* Table polish (scoped) */
.acct-table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leja-muted); border-bottom: 1px solid var(--leja-border); font-weight: 600; }
.acct-table td { vertical-align: middle; }
.acct-table tbody tr:hover { background: var(--fin-neutral-soft); }

/* Responsive */
@media (max-width: 991.98px) {
  .acct-band-grid { grid-template-columns: repeat(2, 1fr); }
  .acct-cell:nth-child(-n+2) { border-bottom: 1px solid var(--leja-border); }
  .acct-cell:nth-child(3) { border-left: 0; }
}
@media (max-width: 575.98px) {
  .acct-band-grid { grid-template-columns: 1fr; }
  .acct-cell { border-left: 0; border-bottom: 1px solid var(--leja-border); }
  .acct-cell:last-child { border-bottom: 0; }
  .acct-head-row { flex-direction: column; }
  .acct-actions { width: 100%; }
  .acct-actions > .btn, .acct-actions > .dropdown { flex: 1 1 auto; }
  .acct-actions > .dropdown > .btn { width: 100%; }
  .acct-nba { flex-wrap: wrap; }
  .acct-nba .btn { width: 100%; }
}

/* Account workspace — pills polish */
.acct-tab-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; color: var(--leja-muted); background: var(--fin-neutral-soft); border: 1px solid var(--leja-border); border-radius: 999px; vertical-align: middle; }
.nav-link.active .acct-tab-count { color: var(--leja-accent); background: var(--fin-primary-soft); border-color: #BFDBFE; }
.acct-role { display: inline-block; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; background: var(--fin-neutral-soft); border: 1px solid var(--leja-border); color: #475569; vertical-align: middle; white-space: nowrap; }
.acct-contact-name .acct-role { margin-left: 4px; }
.acct-sec-title .badge { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Account header — key-details strip inside the header card */
.acct-head-details { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--leja-border); }
.acct-head-details .acct-sec-title { margin-bottom: 10px; }
.acct-empty-sm { padding: 14px 12px; }
.acct-empty-sm i { font-size: 1.3rem; }

/* Notification preferences — auto-saving panel (in the Notifications tab) */
.acct-prefs { max-width: 620px; }
.acct-prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-prefs-status { font-size: .75rem; font-weight: 600; color: var(--leja-muted); min-height: 1em; transition: opacity .2s; }
.acct-prefs-status.is-saving { color: var(--leja-muted); }
.acct-prefs-status.is-saved { color: var(--leja-money); }
.acct-prefs-status.is-saved::before { content: "\2713 "; }
.acct-prefs-form .acct-prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--leja-border); }
.acct-prefs-row:first-child { border-top: 1px solid var(--leja-border); }
.acct-prefs-copy { min-width: 0; }
.acct-prefs-label { font-size: .86rem; font-weight: 600; color: var(--leja-ink); }
.acct-prefs-desc { font-size: .76rem; color: var(--leja-muted); margin-top: 1px; }
.acct-prefs-form .form-switch { padding-left: 2.6em; flex: 0 0 auto; }
.acct-prefs-form .form-switch .form-check-input { width: 2.1em; height: 1.15em; margin-left: -2.6em; cursor: pointer; }
.acct-prefs-form .form-check-input:checked { background-color: var(--leja-accent); border-color: var(--leja-accent); }

/* ============================================================================
   CLIENT ACCOUNT WORKSPACE — ULTRA-PREMIUM PASS (appended, wins the cascade).
   Refined elevation, iconified finance tiles, underline tabs, ledger details,
   monogram + avatars, status dots, micro-transitions. Visual only.
   ============================================================================ */

/* Surfaces: refined elevation + hairline, consistent radius */
.acct-head, .acct-band, .acct-workspace {
  border: 1px solid #E7EBF1;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -14px rgba(16,24,40,.14);
}
.acct-head .card-body { padding: 22px 24px; }

/* Header identity + brand monogram */
.acct-identity { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 340px; }
.acct-monogram {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; color: #fff;
  background: linear-gradient(140deg, #5B76F7 0%, #2563EB 55%, #1E4FD8 100%);
  box-shadow: 0 6px 16px -4px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.acct-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; color: var(--leja-ink); line-height: 1.15; }
.acct-title-row { gap: 8px 9px; }
.acct-sub { margin-top: 8px; font-size: .82rem; gap: 7px; }
.acct-sub i { color: var(--leja-muted); font-size: .95rem; }
.acct-sub .text-capitalize, .acct-sub span { color: #475467; }
.acct-code {
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
  background: #F4F7FC; border: 1px solid #E2E8F2; border-radius: 6px;
  padding: 2px 8px; font-size: .74rem; font-weight: 600; color: #334155; letter-spacing: .02em;
}

/* Status badges — soft, dot-led */
.acct-title-row .badge-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: .72rem; font-weight: 600; border-radius: 999px; }
.acct-title-row .badge-status.has-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }

/* Buttons in header: subtle depth */
.acct-actions .btn-primary { box-shadow: 0 6px 14px -6px rgba(37,99,235,.55); }
.acct-actions .btn-soft { background: #fff; border: 1px solid #E2E8F2; color: #344054; box-shadow: 0 1px 1px rgba(16,24,40,.03); transition: background .15s, border-color .15s, box-shadow .15s; }
.acct-actions .btn-soft:hover { background: #F7F9FC; border-color: #D3DCEA; }

/* Key-details strip */
.acct-head-details { margin-top: 20px; padding-top: 20px; border-top: 1px solid #EDF1F6; }
.acct-sec-title { display: flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #94A3B8; margin-bottom: 14px; }
.acct-sec-title i { font-size: 1rem; color: var(--leja-accent); opacity: .9; }

/* Primary contact — refined panel + avatar */
.acct-contact { border: 1px solid #E4ECF7; border-radius: 12px; padding: 14px; background: linear-gradient(180deg, #F8FBFF 0%, #F1F6FD 100%); }
.acct-contact-main { display: flex; gap: 12px; align-items: flex-start; }
.acct-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: #fff; border: 1px solid #D9E4F5; color: var(--leja-accent); font-weight: 700; font-size: .86rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.acct-contact-name { font-weight: 700; color: var(--leja-ink); font-size: .9rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.acct-contact-line { font-size: .8rem; color: #64748B; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.acct-contact-line i { color: #94A3B8; }
.acct-contact-line a { color: #334155; text-decoration: none; word-break: break-word; }
.acct-contact-line a:hover { color: var(--leja-accent); text-decoration: underline; }
.acct-rx { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.acct-rx .rx { font-size: .64rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: #fff; border: 1px solid #DCE6F5; color: #3B5580; }
.acct-role { display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: #EEF3FF; border: 1px solid #DBE6FF; color: #2E5AAC; white-space: nowrap; }
.acct-contactlist { margin-top: 10px; }
.acct-contact-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid #EDF1F6; }

/* Billing & legal — ledger rows */
.acct-dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0; font-size: .82rem; }
.acct-dl dt { color: #64748B; font-weight: 500; padding: 8px 0; border-bottom: 1px dashed #EAEFF5; }
.acct-dl dd { color: var(--leja-ink); font-weight: 600; text-align: right; padding: 8px 0; border-bottom: 1px dashed #EAEFF5; margin: 0; word-break: break-word; font-variant-numeric: tabular-nums; }
.acct-dl dt:last-of-type, .acct-dl dd:last-of-type { border-bottom: 0; }

/* Addresses */
.acct-addr-type { font-weight: 600; color: var(--leja-ink); font-size: .82rem; }
.acct-addr-body { color: #64748B; margin-top: 3px; font-size: .8rem; line-height: 1.5; }
.acct-addr + .acct-addr { margin-top: 12px; padding-top: 12px; border-top: 1px solid #EDF1F6; }

/* Finance band — premium metric tiles */
.acct-band { overflow: hidden; }
.acct-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.acct-cell { padding: 18px 20px; border-left: 1px solid #EDF1F6; transition: background .15s ease; }
.acct-cell:first-child { border-left: 0; }
.acct-cell:hover { background: #FAFBFE; }
.acct-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acct-cell-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.acct-cell-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.acct-cell-ico.tone-primary { background: #EEF4FF; color: #2563EB; }
.acct-cell-ico.tone-emerald { background: #E7F8F0; color: #059669; }
.acct-cell-ico.tone-slate   { background: #F1F5F9; color: #475569; }
.acct-cell-ico.tone-rose    { background: #FEECEC; color: #E11D48; }
.acct-cell-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--leja-ink); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.acct-cell-sub { font-size: .76rem; color: #94A3B8; }
.acct-cell.is-overdue { background: #FEF4F4; }
.acct-cell.is-overdue:hover { background: #FDEEEE; }
.acct-cell.is-overdue .acct-cell-value { color: #DC2626; }

/* Workspace tabs — clean underline */
.acct-workspace .card-body { padding: 6px 20px 18px; }
.acct-tabs { border-bottom: 1px solid #EDF1F6; gap: 2px; margin: 0 -4px 18px; padding: 0 4px; }
.acct-tabs .nav-item .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #64748B; font-weight: 600; font-size: .86rem; padding: 12px 14px; transition: color .15s, border-color .15s; }
.acct-tabs .nav-item .nav-link:hover { color: var(--leja-ink); border-bottom-color: #D3DCEA; background: transparent; }
.acct-tabs .nav-item .nav-link.active { color: var(--leja-accent); border-bottom-color: var(--leja-accent); background: transparent; }
.acct-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 5px; font-size: .68rem; font-weight: 700; color: #64748B; background: #EEF2F7; border-radius: 999px; vertical-align: middle; }
.acct-tabs .nav-link.active .acct-tab-count { color: #fff; background: var(--leja-accent); }

/* Next best action */
.acct-nba { border-radius: 12px; }
.acct-nba .nba-ico { box-shadow: 0 1px 2px rgba(16,24,40,.05); }

/* Activity rows */
#t-ov .border-bottom, #t-act .border-bottom { border-color: #EFF2F6 !important; }
#t-ov li:last-child, #t-act li:last-child { border-bottom: 0 !important; }

/* Tables — premium ledger feel */
.acct-table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #94A3B8; font-weight: 700; border-bottom: 1px solid #E7EBF1; padding-bottom: 10px; }
.acct-table tbody td { padding-top: 11px; padding-bottom: 11px; border-color: #F0F3F7; }
.acct-table tbody tr { transition: background .12s; }
.acct-table tbody tr:hover { background: #F8FAFD; }

/* Empty states */
.acct-empty i { color: #CBD5E1; }

/* Responsive: band 4 -> 2 -> 1 */
@media (max-width: 991.98px) {
  .acct-band-grid { grid-template-columns: repeat(2, 1fr); }
  .acct-cell:nth-child(-n+2) { border-bottom: 1px solid #EDF1F6; }
  .acct-cell:nth-child(3) { border-left: 0; }
}
@media (max-width: 575.98px) {
  .acct-band-grid { grid-template-columns: 1fr; }
  .acct-cell { border-left: 0; border-bottom: 1px solid #EDF1F6; }
  .acct-cell:last-child { border-bottom: 0; }
  .acct-head .card-body { padding: 18px; }
  .acct-monogram { width: 46px; height: 46px; border-radius: 13px; font-size: 1rem; }
  .acct-title { font-size: 1.3rem; }
}

/* ============================================================================
   NOTIFICATIONS — RUN HEALTH (cron monitor) premium cards. Scoped .crn-*.
   ============================================================================ */
.crn-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--leja-border); margin-bottom: 16px; }
.crn-banner.is-ok { background: #ECFDF5; border-color: #A7F3D0; }
.crn-banner.is-warn { background: #FFFBEB; border-color: #FDE68A; }
.crn-banner-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: #fff; border: 1px solid var(--leja-border); }
.crn-banner.is-ok .crn-banner-ico { color: #059669; }
.crn-banner.is-warn .crn-banner-ico { color: #B45309; }
.crn-banner-title { font-weight: 700; color: var(--leja-ink); font-size: .95rem; }
.crn-banner-sub { font-size: .78rem; color: var(--leja-muted); margin-top: 2px; }

.crn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.crn-card { background: #fff; border: 1px solid #E7EBF1; border-radius: 12px; padding: 15px 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); position: relative; overflow: hidden; }
.crn-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.crn-card.is-emerald::before { background: #10B981; }
.crn-card.is-amber::before { background: #F59E0B; }
.crn-card.is-rose::before { background: #F43F5E; }
.crn-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crn-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.crn-ico.tone-emerald { background: #E7F8F0; color: #059669; }
.crn-ico.tone-amber { background: #FEF3C7; color: #B45309; }
.crn-ico.tone-rose { background: #FEECEC; color: #E11D48; }
.crn-titles { min-width: 0; }
.crn-name { font-weight: 700; color: var(--leja-ink); font-size: .86rem; line-height: 1.15; }
.crn-cad { font-size: .72rem; color: var(--leja-muted); margin-top: 1px; }
.crn-cad i { font-size: .8rem; }
.crn-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.crn-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.crn-pill .crn-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crn-pill.is-emerald { background: #DCFCE7; color: #15803D; }
.crn-pill.is-amber { background: #FEF3C7; color: #B45309; }
.crn-pill.is-rose { background: #FEE2E2; color: #B91C1C; }
.crn-when { font-size: .74rem; color: var(--leja-muted); }
.crn-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--leja-muted); }
.crn-dur { font-variant-numeric: tabular-nums; font-weight: 600; color: #475569; }
.crn-line { font-size: .74rem; margin-top: 8px; padding-top: 8px; border-top: 1px solid #F0F3F7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crn-sum { color: var(--leja-muted); font-variant-numeric: tabular-nums; }
.crn-err { color: #DC2626; font-weight: 500; }

.crn-runs-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--leja-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.crn-runs-head i { color: var(--leja-accent); font-size: .95rem; }

@media (max-width: 1199.98px) { .crn-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px)  { .crn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px)  { .crn-grid { grid-template-columns: 1fr; } }

/* Run log — on-demand range bar */
.crn-runs-bar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.crn-range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.crn-field { display: flex; flex-direction: column; gap: 3px; }
.crn-field label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--leja-muted); }
.crn-field .form-control { width: auto; }

/* ---- Top navigation progress bar (replaces the full-screen preloader) ------ */
#leja-topbar-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000;
    background: linear-gradient(90deg, var(--leja-accent), #7AA5FF);
    box-shadow: 0 0 10px rgba(37,99,235,.55), 0 1px 4px rgba(37,99,235,.4);
    opacity: 0; pointer-events: none;
    transition: width .2s ease, opacity .35s ease;
    border-bottom-right-radius: 2px;
}
#leja-topbar-progress.is-active { opacity: 1; }

/* ----------------------------------------------------------------------------
   Topbar Apps launcher (SaaS workspace switcher)
   Quiet 2-column tile grid; 1-column on mobile. Radius <= 8px on tiles.
---------------------------------------------------------------------------- */
.app-launcher-menu { width: 440px; max-width: min(94vw, 440px); padding: .6rem; border-radius: 8px; overflow: hidden; }
.app-launcher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.app-launcher-sub { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ins-secondary-color); padding: .15rem .5rem .3rem; }
/* min-width:0 lets grid/flex items shrink so the tile text can ellipsis instead
   of forcing the grid wider than the menu (which made the hover bleed outside).
   Each tile carries its app accent as --app-c (set inline in the markup). */
.app-topbar .app-launcher-menu .app-tile { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .6rem .65rem; border-radius: 8px; text-decoration: none; color: var(--ins-body-color); transition: background-color .12s ease; }
.app-topbar .app-launcher-menu .app-tile:hover { background: var(--ins-tertiary-bg, rgba(0,0,0,.05)); background: color-mix(in srgb, var(--app-c, #475569) 10%, transparent); color: var(--ins-body-color); }
.app-topbar .app-launcher-menu .app-tile.active { background: var(--bs-primary-bg-subtle, #e7effb); background: color-mix(in srgb, var(--app-c, #475569) 13%, transparent); }
.app-topbar .app-launcher-menu .app-tile.disabled { opacity: .55; pointer-events: none; cursor: default; }
.app-topbar .app-launcher-menu .app-tile-ico { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(0,0,0,.06); background: color-mix(in srgb, var(--app-c, #475569) 15%, transparent); }
.app-topbar .app-launcher-menu .app-tile-ico i { color: var(--app-c, var(--ins-secondary-color)); font-size: 20px; }
.app-topbar .app-launcher-menu .app-tile.active .app-tile-ico { background: var(--app-c, #2f6fed); }
.app-topbar .app-launcher-menu .app-tile.active .app-tile-ico i { color: #fff; }
.app-topbar .app-launcher-menu .app-tile.disabled .app-tile-ico { background: var(--ins-tertiary-bg, rgba(0,0,0,.06)); }
.app-topbar .app-launcher-menu .app-tile.disabled .app-tile-ico i { color: var(--ins-secondary-color); }
.app-launcher-menu .app-tile-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.app-launcher-menu .app-tile-name { font-weight: 600; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-launcher-menu .app-tile-desc { font-size: .73rem; color: var(--ins-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
    .app-launcher-menu { width: min(94vw, 360px); }
    .app-launcher-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   Accounting reports (E2): sticky filters, drill links, right slide-over drawer
---------------------------------------------------------------------------- */
.rpt-filters { position: sticky; top: 70px; z-index: 4; background: var(--ins-secondary-bg, #fff); padding-block: .35rem; border-bottom: 1px solid var(--ins-border-color, #e9ecef); }
.rpt-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ins-secondary-color); }
.rpt-drill { color: var(--ins-body-color); text-decoration: none; border-bottom: 1px dotted var(--ins-border-color, #ced4da); cursor: pointer; }
.rpt-drill:hover { color: var(--bs-primary, #2f6fed); border-bottom-color: currentColor; }

.rpt-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 1054; }
.rpt-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: 760px; max-width: 96vw;
    background: var(--ins-body-bg, #fff); box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
    transform: translateX(100%); transition: transform .18s ease; z-index: 1055;
    display: flex; flex-direction: column; border-left: 1px solid var(--ins-border-color, #e9ecef);
    /* Text sits on a crisp pixel grid when open (no transform-compositing blur). */
    -webkit-font-smoothing: antialiased; backface-visibility: hidden;
}
.rpt-drawer.open { transform: translateX(0); }
.rpt-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ins-border-color, #e9ecef); }
.rpt-drawer-body { flex: 1 1 auto; overflow-y: auto; font-size: 1rem; color: #1f2937; }
/* Secondary text stays de-emphasised but legible — the faint default muted grey on
   the drawer surface reads as blurry, so lift its contrast inside the drawer. */
.rpt-drawer-body .text-muted, .lx-drawer-body .text-muted { color: #566175 !important; }
/* Amounts stay on one line with aligned, tabular figures so large (6+ digit) values
   don't wrap or look ragged in the ledger. */
.rpt-drawer-body, .lx-drawer-body { font-variant-numeric: tabular-nums; }
.rpt-drawer-body td.text-end, .lx-drawer-body td.text-end { white-space: nowrap; }
body.rpt-drawer-lock { overflow: hidden; }
@media (max-width: 575.98px) { .rpt-drawer { width: 100%; max-width: 100%; } }

@media print {
    .app-topbar, .sidenav-menu, .rpt-drawer, .rpt-drawer-backdrop, .nav-pills, .d-print-none { display: none !important; }
    .content-page, .container-fluid { margin: 0 !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
}

/* Accounting dashboard charts (dependency-free inline SVG) */
.rpt-chart { width: 100%; height: auto; display: block; margin-top: .25rem; }
.rpt-chart-lbl { font-size: 11px; fill: var(--ins-secondary-color); }
.rpt-spark { width: 92px; height: 34px; }
.rpt-donut { width: 116px; height: 116px; flex: 0 0 auto; }
.rpt-donut-num { font-size: 26px; font-weight: 700; fill: var(--ins-body-color); }
.rpt-donut-sub { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; fill: var(--ins-secondary-color); }
.rpt-legend { display: flex; gap: 1rem; }
.rpt-legend span { display: inline-flex; align-items: center; gap: .35rem; color: var(--ins-secondary-color); }
.rpt-legend i, .rpt-heat-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.rpt-hstat { display: flex; justify-content: space-between; align-items: center; padding: .12rem 0; }
.rpt-heat-wrap { overflow-x: auto; }
/* Full-width year heatmap: viewBox-only SVG scales to the card via width:100%. */
.rpt-heat { display: block; width: 100%; height: auto; }
.rpt-heat-legend i { border-radius: 2px; }
.rpt-kpi-ic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(37,99,235,.12); background: color-mix(in srgb, var(--kc, #2563eb) 15%, transparent); color: var(--kc, #2563eb); }
.rpt-empty-ic { width: 64px; height: 64px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; background: var(--ins-tertiary-bg, #eef2f6); color: var(--ins-secondary-color); }

/* Phase M — management cockpit visuals (dependency-free) */
.mgmt-chart-wrap { width: 100%; }
.mgmt-chart { width: 100%; height: auto; display: block; }
.mgmt-chart-lbl { font-size: 11px; fill: var(--ins-secondary-color); }
.mgmt-legend { width: 22px; height: 3px; border-radius: 2px; display: inline-block; vertical-align: middle; margin-right: .3rem; }
.mgmt-legend--dash { background-image: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px) !important; }
.mgmt-varbars { display: flex; flex-direction: column; gap: .6rem; }
.mgmt-varbar { cursor: pointer; padding: .15rem .25rem; border-radius: 6px; transition: background .12s; }
.mgmt-varbar:hover, .mgmt-varbar:focus-visible { background: var(--ins-tertiary-bg, #eef2f6); outline: none; }
.mgmt-varbar-track { height: 7px; border-radius: 4px; background: var(--ins-tertiary-bg, #eef2f6); overflow: hidden; margin-top: .25rem; }
.mgmt-varbar-fill { height: 100%; border-radius: 4px; }
.mgmt-varbar-fill.is-fav { background: #0acf97; }
.mgmt-varbar-fill.is-unfav { background: #f8ac59; }
.mgmt-metric { border: 1px solid var(--ins-border-color, #e5e7eb); border-radius: 8px; padding: .85rem 1rem; height: 100%; background: var(--ins-secondary-bg, #fff); }
.mgmt-metric .mgmt-metric-lbl { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ins-secondary-color); }
.mgmt-metric .mgmt-metric-val { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.mgmt-grid-cell input { text-align: right; }
.mgmt-editor-scroll { overflow-x: auto; }
.mgmt-sticky-actions { position: sticky; bottom: 0; z-index: 5; background: var(--ins-secondary-bg, #fff); border-top: 1px solid var(--ins-border-color, #e5e7eb); padding: .6rem .25rem; display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

/* CFO cockpit: health strip, KPI widgets, attention, empty-state steps */
.rpt-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
.rpt-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: 8px; border: 1px solid var(--ins-border-color, #e5e7eb); background: var(--ins-secondary-bg, #fff); text-decoration: none; color: var(--ins-body-color); font-size: .8rem; transition: border-color .12s, box-shadow .12s; }
.rpt-pill:hover { border-color: var(--ins-secondary-color); color: var(--ins-body-color); box-shadow: 0 1px 6px rgba(15,23,42,.05); }
.rpt-pill i { font-size: 16px; color: var(--ins-secondary-color); }
.rpt-pill span { color: var(--ins-secondary-color); }
.rpt-pill strong { margin-left: .1rem; }
.rpt-pill.is-ok i, .rpt-pill.is-ok strong { color: #16a34a; }
.rpt-pill.is-bad { border-color: rgba(220,38,38,.35); } .rpt-pill.is-bad i, .rpt-pill.is-bad strong { color: #dc2626; }
.rpt-pill.is-warn { border-color: rgba(217,119,6,.35); } .rpt-pill.is-warn i, .rpt-pill.is-warn strong { color: #d97706; }

.rpt-kpi { border: 1px solid var(--ins-border-color, #e9ecef); transition: border-color .12s, box-shadow .12s; }
.rpt-kpi:hover { border-color: var(--bs-primary, #2563eb); box-shadow: 0 2px 12px rgba(15,23,42,.07); }

.rpt-step { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem .25rem; }
.rpt-step-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--bs-primary-bg-subtle, #e7effb); color: var(--bs-primary, #2563eb); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.rpt-allgood { display: flex; align-items: center; gap: .5rem; padding: .75rem; border-radius: 8px; background: var(--ins-success-bg-subtle, #e6f4ea); color: var(--ins-success-text-emphasis, #0f5132); font-size: .85rem; }
.rpt-allgood i { font-size: 18px; }
.rpt-attn .list-group-item, .card .list-group-flush .list-group-item { background: transparent; }

/* ============================================================================
   LEJA UX FOUNDATION (docs/leja-ux-design-system.md)
   Semantic tokens + shared primitives. Typography floors: functional >= 12px,
   helper >= 13px, table body >= 13.5px, table heading >= 12.5px, inputs 15-16px.
   No negative letter-spacing; money uses tabular numerals; radius <= 8px.
============================================================================ */
:root {
    /* Bridged to the Inspinia theme (--ins-*) so every lx-* primitive inherits the REAL
       palette, borders, surfaces, semantic colours and radius — and dark mode — instead
       of hardcoded greys. The accent stays Leja Indigo (the app overrides --ins-primary
       to #4F46E5), and the semantic tones use Inspinia's own soft text/bg-subtle pair so
       alerts/pills match the theme. */
    --lx-text: var(--ins-body-color, #4c4c5c);
    --lx-muted: var(--ins-secondary-color, #9ba6b7);
    /* Secondary text that must stay legible (labels, helper subtext): ~4.6:1 on white,
       vs --lx-muted which is deliberately soft for de-emphasised chrome. */
    --lx-muted-strong: #5c6675;
    --lx-border: var(--ins-border-color, #e7e9eb);
    --lx-surface: var(--ins-secondary-bg, #fff);
    --lx-surface-2: var(--ins-tertiary-bg, #f6f7fb);
    --lx-accent: var(--ins-primary, #4F46E5);
    --lx-accent-weak: rgba(var(--leja-accent-rgb, 79, 70, 229), .10);
    --lx-success: var(--ins-success-text-emphasis, #09b080); --lx-success-weak: var(--ins-success-bg-subtle, #daf8ef);
    --lx-warning: var(--ins-warning-text-emphasis, #d3924c); --lx-warning-weak: var(--ins-warning-bg-subtle, #fef3e6);
    --lx-danger:  var(--ins-danger-text-emphasis, #c94856);  --lx-danger-weak:  var(--ins-danger-bg-subtle, #fce6e8);
    --lx-radius: var(--ins-border-radius, .3rem);
    --lx-focus: 0 0 0 3px rgba(var(--leja-accent-rgb, 79, 70, 229), .35);
    --lx-space-2: .5rem; --lx-space-3: .75rem; --lx-space-4: 1rem;
}

/* Numerals + typography helpers */
.lx-num, .text-money, .lx-metric-value { font-variant-numeric: tabular-nums; letter-spacing: normal; }
.lx-help { font-size: .8125rem; line-height: 1.45; color: var(--lx-muted); letter-spacing: normal; }
.lx-title { letter-spacing: normal; }

/* Shared visible focus for interactive primitives */
.lx-pill:focus-visible, .lx-metric:focus-visible, .lx-chip button:focus-visible,
.lx-dropzone:focus-visible, .lx-step:focus-visible { outline: none; box-shadow: var(--lx-focus); }

/* Table floors (used by Banking + accounting operational tables) */
.rpt-table th, .lx-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: var(--lx-muted); }
.rpt-table td, .lx-table td { font-size: .875rem; }

/* --- Status pill (icon + text, never colour alone) --- */
.lx-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: var(--lx-radius); font-size: .8125rem; font-weight: 600; line-height: 1.3; border: 1px solid transparent; letter-spacing: normal; white-space: nowrap; }
.lx-pill i { font-size: 14px; }
.lx-pill--neutral { background: var(--lx-surface-2); color: var(--lx-muted); border-color: var(--lx-border); }
.lx-pill--accent  { background: var(--lx-accent-weak);  color: var(--lx-accent); }
.lx-pill--success { background: var(--lx-success-weak); color: var(--lx-success); }
.lx-pill--warning { background: var(--lx-warning-weak); color: var(--lx-warning); }
.lx-pill--danger  { background: var(--lx-danger-weak);  color: var(--lx-danger); }

/* --- Metric --- */
.lx-metric { display: block; padding: .85rem 1rem; border: 1px solid var(--lx-border); border-radius: var(--lx-radius); background: var(--lx-surface); color: inherit; text-decoration: none; height: 100%; }
a.lx-metric, .lx-metric--link { transition: border-color .14s, box-shadow .14s; }
a.lx-metric:hover, .lx-metric--link:hover { border-color: var(--lx-accent); box-shadow: 0 2px 12px rgba(15, 23, 42, .06); color: inherit; }
.lx-metric-label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 500; color: var(--lx-muted-strong); }
.lx-metric-ic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--lx-accent-weak); color: var(--lx-accent); }
.lx-metric-value { font-size: 1.4rem; font-weight: 700; margin-top: .3rem; }
.lx-metric-sub { font-size: .85rem; color: var(--lx-muted-strong); margin-top: .1rem; }

/* Phase G — manual-journal / opening-balance entry grid. Compact rows, no layout
   shift, detail sub-rows tinted so party/tax/bank metadata reads as secondary. */
.lx-je-table > :not(caption) > * > * { padding-top: .32rem; padding-bottom: .32rem; }
.lx-je-table .je-meta > td, .lx-je-table .ob-meta > td { background: var(--lx-surface-2); padding-top: .4rem; padding-bottom: .4rem; }
.lx-je-table tfoot td { border-top: 2px solid var(--lx-border); }
/* Readable functional text across the accounting workspace: the reused `.small`
   was too tight in dense detail panels — lift it to the body floor (15px). */
.bws .small, .bws small { font-size: .9375rem; }
.bws .lx-detail dt { font-size: .9375rem; color: var(--lx-muted); font-weight: 500; }
.bws .lx-detail dd { font-size: 1rem; }

/* --- Empty state --- */
.lx-empty { text-align: center; padding: 2.5rem 1rem; }
.lx-empty-ic { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--lx-surface-2); color: var(--lx-muted); font-size: 26px; margin-bottom: .75rem; }
.lx-empty-title { font-size: 1.05rem; font-weight: 600; margin-bottom: .25rem; letter-spacing: normal; }
.lx-empty-text { font-size: .9375rem; color: var(--lx-muted); max-width: 520px; margin: 0 auto .9rem; line-height: 1.5; }

/* --- Stepper --- */
.lx-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.lx-step { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: var(--lx-radius); background: var(--lx-surface-2); color: var(--lx-muted); font-size: .875rem; min-height: 40px; }
.lx-step.is-active { background: var(--lx-accent-weak); color: var(--lx-accent); font-weight: 600; }
.lx-step.is-done { color: var(--lx-success); }
.lx-step-n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; background: var(--lx-surface); border: 1px solid currentColor; }
.lx-step.is-active .lx-step-n { background: var(--lx-accent); color: #fff; border-color: transparent; }
.lx-step.is-done .lx-step-n { background: var(--lx-success); color: #fff; border-color: transparent; }

/* --- Filter bar + chips --- */
.lx-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.lx-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lx-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .35rem .2rem .6rem; border-radius: var(--lx-radius); background: var(--lx-surface-2); border: 1px solid var(--lx-border); font-size: .8125rem; color: var(--lx-text); }
.lx-chip b { font-weight: 600; }
.lx-chip .lx-chip-x { color: var(--lx-muted); line-height: 1; padding: .1rem; border-radius: 4px; display: inline-flex; }
.lx-chip .lx-chip-x:hover { color: var(--lx-danger); }
.lx-chip .lx-chip-x:focus-visible { outline: none; box-shadow: var(--lx-focus); }

/* Alert = the native Bootstrap/Inspinia .alert .alert-* (components/alert.php); no
   Leja-specific alert CSS — it inherits the theme. */

/* --- Timeline --- */
.lx-timeline { list-style: none; margin: 0; padding: 0; }
.lx-tl { display: flex; gap: .75rem; padding-bottom: .85rem; position: relative; }
.lx-tl:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--lx-border); }
.lx-tl-dot { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--lx-surface-2); color: var(--lx-muted); z-index: 1; }
.lx-tl-dot.is-success { background: var(--lx-success-weak); color: var(--lx-success); }
.lx-tl-dot.is-warning { background: var(--lx-warning-weak); color: var(--lx-warning); }
.lx-tl-dot.is-danger  { background: var(--lx-danger-weak);  color: var(--lx-danger); }
.lx-tl-dot.is-accent  { background: var(--lx-accent-weak);  color: var(--lx-accent); }
.lx-tl-label { font-weight: 600; font-size: .9375rem; }
.lx-tl-meta { font-size: .8125rem; color: var(--lx-muted); }

/* --- Sticky actions --- */
.lx-sticky-actions { position: sticky; bottom: 0; z-index: 5; background: var(--lx-surface); border-top: 1px solid var(--lx-border); padding: .75rem 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* --- File dropzone (enhances a native input; never replaces it) --- */
.lx-dropzone { border: 2px dashed var(--lx-border); border-radius: var(--lx-radius); padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: border-color .14s, background-color .14s; }
.lx-dropzone:hover, .lx-dropzone.is-over, .lx-dropzone:focus-visible { border-color: var(--lx-accent); background: var(--lx-accent-weak); outline: none; }
.lx-dropzone-ic { font-size: 32px; color: var(--lx-muted); display: block; margin-bottom: .25rem; }
.lx-dropzone-link { color: var(--lx-accent); text-decoration: underline; }
.lx-dropzone-note { font-size: .8125rem; color: var(--lx-muted); }

/* --- Drawer (shared right slide-over; also aliases the report drawer) --- */
.lx-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 1054; }
.lx-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 760px; max-width: 96vw; background: var(--lx-surface); box-shadow: -12px 0 32px rgba(15, 23, 42, .18); transform: translateX(100%); transition: transform .18s ease; z-index: 1055; display: flex; flex-direction: column; border-left: 1px solid var(--lx-border); -webkit-font-smoothing: antialiased; backface-visibility: hidden; }
.lx-drawer.open { transform: translateX(0); }
.lx-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--lx-border); }
.lx-drawer-title { font-size: 1rem; font-weight: 600; margin: 0; }
.lx-drawer-body { flex: 1 1 auto; overflow-y: auto; font-size: 1rem; color: #1f2937; }
body.lx-drawer-lock { overflow: hidden; }
.lx-skeleton { padding: 1rem; }
.lx-skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--lx-surface-2) 25%, #eef1f6 37%, var(--lx-surface-2) 63%); background-size: 400% 100%; animation: lx-shimmer 1.2s infinite; margin-bottom: .6rem; }
@keyframes lx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (max-width: 575.98px) { .lx-drawer { width: 100%; max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .lx-drawer { transition: none; } .lx-skel-line { animation: none; } }

/* Banking import wizard: step indicator + upload drop surface */
.bank-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.bank-step { display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 8px; background: var(--ins-tertiary-bg, #f1f3f5); color: var(--ins-secondary-color); font-size: .82rem; }
.bank-step.is-active { background: var(--bs-primary-bg-subtle, #e7effb); color: var(--bs-primary, #2563eb); font-weight: 600; }
.bank-step.is-done { color: #16a34a; }
.bank-step-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: var(--ins-body-bg, #fff); border: 1px solid currentColor; }
.bank-step.is-active .bank-step-n { background: var(--bs-primary, #2563eb); color: #fff; border-color: transparent; }
.bank-step.is-done .bank-step-n { background: #16a34a; color: #fff; border-color: transparent; }

.bank-drop { border: 2px dashed var(--ins-border-color, #ced4da); border-radius: 8px; padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s; }
.bank-drop:hover, .bank-drop.is-over, .bank-drop:focus-visible { border-color: var(--bs-primary, #2563eb); background: var(--bs-primary-bg-subtle, #f2f7ff); outline: none; }
.bank-drop-ic { font-size: 32px; color: var(--ins-secondary-color); display: block; margin-bottom: .25rem; }
.bank-drop-link { color: var(--bs-primary, #2563eb); text-decoration: underline; }
.rpt-note { background: var(--ins-tertiary-bg, #f8f9fa); border-radius: 8px; padding: .5rem .75rem; }

/* ---- Section navigation (module primary nav + sub-workspace local nav) --------
   Route-backed <nav> of links (components/section_nav). Horizontally scrollable on
   narrow screens WITHOUT shrinking the label text (typography floor). Active state
   never relies on colour alone — it carries aria-current + weight + an underline. */
.lx-subnav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-bottom: 1rem; }
.lx-subnav::-webkit-scrollbar { height: 7px; }
.lx-subnav::-webkit-scrollbar-thumb { background: var(--lx-border, #cbd5e1); border-radius: 4px; }
.lx-subnav::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* A fade at the right edge says "there is more" without hiding a destination. It
   is decorative only — the nav still scrolls by wheel, touch, and keyboard. */
.lx-subnav { position: relative; scroll-padding-inline: 1rem; }
/* ⚠️ SWITCHED ON BY Leja.subnavOverflow IN app.js, AND IT NEVER WAS BEFORE. .lx-subnav--scrollable
   sat here unused from the day the component was written — nothing in PHP or JS ever added it — so
   an overflowing nav gave you a 7px scrollbar and no hint that anything lay beyond it. Found while
   measuring whether "Document Templates" still fits the Settings nav at 1024px.

   Three states, in specificity order so the last one you read is the one that wins. The fade only
   ever covers an end that HAS content past it, so the cue cannot promise something that is not
   there. The JS strips --scrollable entirely when the nav fits, so no mask is the default. */
.lx-subnav--scrollable {                                   /* at the start: more to the right */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.lx-subnav--scrollable.lx-subnav--at-end {                 /* at the end: more to the left */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
            mask-image: linear-gradient(to right, transparent 0, #000 28px);
}
.lx-subnav--scrollable:not(.lx-subnav--at-start):not(.lx-subnav--at-end) {   /* mid-scroll: both */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.lx-subnav .nav { flex-wrap: nowrap; width: max-content; min-width: 100%; }
.lx-subnav .nav-link { white-space: nowrap; font-size: .875rem; }
.lx-subnav .nav-link:focus-visible { outline: 2px solid var(--lx-focus, #2563eb); outline-offset: 1px; }
/* Local (sub-workspace) pills */
.lx-subnav--local .nav-link { color: var(--lx-muted); border-radius: 8px; }
.lx-subnav--local .nav-link:hover { background: var(--lx-surface-2); color: var(--lx-text); }
.lx-subnav--local { border-bottom: 1px solid var(--lx-border); padding-bottom: .35rem; }
.lx-subnav--local .nav-link.active { background: transparent; color: var(--lx-accent); font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; }
/* Primary module nav = Inspinia native Default Tabs; active tab carries the brand accent */
.lx-subnav--primary .nav-link { color: var(--lx-muted); font-weight: 500; padding: .5rem .9rem; }
.lx-subnav--primary .nav-link:hover:not(.active) { color: var(--lx-text); border-color: transparent; isolation: isolate; }
.lx-subnav--primary .nav-link.active { color: var(--lx-accent); font-weight: 600; }
.lx-subnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; font-size: .72rem; font-weight: 700; line-height: 1; border-radius: 999px; background: var(--lx-warning, #d97706); color: #fff; vertical-align: middle; }
.lx-subnav .nav-link.active .lx-subnav-badge { background: var(--lx-accent, #2563eb); }

/* ---- Accounting dashboard: limited-history composition + attention rows -------- */
.rpt-compose { padding: .5rem 0 .25rem; }
.rpt-compose-track { height: 10px; border-radius: 999px; background: var(--lx-surface-2, #f1f3f5); overflow: hidden; }
.rpt-compose-bar { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.rpt-attn-list { display: flex; flex-direction: column; gap: .5rem; }
.rpt-attn-row { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .5rem .6rem; border: 1px solid var(--lx-border, #e5e7eb); border-radius: 8px; background: var(--lx-surface, #fff); }
.rpt-attn-row .btn { align-self: flex-start; }

/* Attention CTA — a red button that gently pulses to flag an incomplete setup.
   Shown only while setup is incomplete; static (no pulse) under reduced motion. */
.lx-cta-pulse { animation: lx-cta-pulse 1.5s ease-in-out infinite; }
@keyframes lx-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .lx-cta-pulse { animation: none; } }

/* ---- Clickable help hint chip + help slide-over content --------------------- */
.lx-hint { display: inline-flex; align-items: center; gap: .3rem; border: 0; cursor: pointer; padding: .15rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1; color: var(--lx-accent, #2563eb); background: var(--lx-accent-weak, #e7effb); transition: background .12s, color .12s, box-shadow .12s; vertical-align: middle; white-space: nowrap; }
.lx-hint:hover, .lx-hint:focus-visible { background: var(--lx-accent, #2563eb); color: #fff; outline: none; }
.lx-hint:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.lx-hint i { font-size: .95rem; }
.lx-help-body { padding: 1.15rem 1.25rem; font-size: .95rem; line-height: 1.55; color: var(--lx-text, #1f2430); }
.lx-help-body h3 { font-size: 1rem; font-weight: 700; margin: .25rem 0 .5rem; }
.lx-help-body p { margin: 0 0 .75rem; }
.lx-help-body ul, .lx-help-body ol { margin: 0 0 .85rem; padding-left: 1.15rem; }
.lx-help-body ol li { margin-bottom: .4rem; }
/* Guided step list (empty states) + completion checklist */
.lx-steplist { display: inline-block; text-align: left; margin: .25rem auto 1rem; padding-left: 1.25rem; color: var(--lx-muted, #667085); font-size: .9rem; }
.lx-steplist li { margin-bottom: .3rem; }
.lx-checklist { list-style: none; margin: 0; padding: 0; }
.lx-checklist li { display: flex; align-items: flex-start; gap: .5rem; padding: .3rem 0; font-size: .9rem; }
.lx-checklist .ti { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.lx-checklist li.is-done { color: var(--lx-text, #1f2430); }
.lx-checklist li.is-todo { color: var(--lx-muted, #667085); }
.lx-help-body li { margin-bottom: .4rem; }
.lx-help-body .lx-help-eg { background: var(--lx-surface-2, #f1f3f5); border: 1px solid var(--lx-border, #e5e7eb); border-radius: 10px; padding: .65rem .8rem; font-size: .9rem; margin: 0 0 .85rem; }
.lx-help-body strong { color: var(--lx-text, #1f2430); }

/* ---- Premium panels (scoped to pages that opt in with .lx-cards) ------------ */
/* Align to Inspinia's native card: theme radius + the theme's own subtle card shadow. */
.lx-cards .card { border: 1px solid var(--lx-border); border-radius: var(--ins-border-radius, .3rem); box-shadow: var(--ins-theme-card-box-shadow, 0 .5rem 1.5rem rgba(18, 38, 36, .03)); transition: box-shadow .15s ease, border-color .15s ease; }
.lx-cards .card:hover { box-shadow: 0 .5rem 1.5rem rgba(18, 38, 36, .07); }
.lx-cards .card-body { padding: 1.25rem 1.35rem; }
.lx-cards h2.h6 { letter-spacing: .04em; color: var(--lx-muted); display: flex; align-items: center; gap: .5rem; }
.lx-cards .lx-metric { border-radius: var(--ins-border-radius, .3rem); box-shadow: var(--ins-theme-card-box-shadow, 0 .5rem 1.5rem rgba(18, 38, 36, .03)); }
:root[data-bs-theme="dark"] .lx-cards .card { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35); }

/* Premium "Start Border" accent (Inspinia bordered-card): a 3px left edge on panel cards
   across Accounting (.lx-cards) and the Banking workspace (.bws-frame). The colour is
   MIXED from Inspinia's palette so a page of panels isn't monotone — a per-row cycle by
   default, or force one with .card-accent-{tone}. Opt a card out with .card-no-accent. */
.lx-cards .card:not(.card-no-accent),
.bws-frame .card:not(.card-no-accent) { border-left: 3px solid var(--ins-primary, #4F46E5); }
.lx-cards .row > [class*="col"]:nth-child(5n+2) > .card:not(.card-no-accent),
.bws-frame .row > [class*="col"]:nth-child(5n+2) > .card:not(.card-no-accent) { border-left-color: var(--ins-teal, #1ab394); }
.lx-cards .row > [class*="col"]:nth-child(5n+3) > .card:not(.card-no-accent),
.bws-frame .row > [class*="col"]:nth-child(5n+3) > .card:not(.card-no-accent) { border-left-color: var(--ins-info, #23c6c8); }
.lx-cards .row > [class*="col"]:nth-child(5n+4) > .card:not(.card-no-accent),
.bws-frame .row > [class*="col"]:nth-child(5n+4) > .card:not(.card-no-accent) { border-left-color: var(--ins-purple, #7b70ef); }
.lx-cards .row > [class*="col"]:nth-child(5n+5) > .card:not(.card-no-accent),
.bws-frame .row > [class*="col"]:nth-child(5n+5) > .card:not(.card-no-accent) { border-left-color: var(--ins-orange, #fd7e14); }
.card-accent-primary { border-left-color: var(--ins-primary, #4F46E5) !important; }
.card-accent-success { border-left-color: var(--ins-success, #0acf97) !important; }
.card-accent-info    { border-left-color: var(--ins-info, #23c6c8) !important; }
.card-accent-warning { border-left-color: var(--ins-warning, #f8ac59) !important; }
.card-accent-purple  { border-left-color: var(--ins-purple, #7b70ef) !important; }
.card-accent-teal    { border-left-color: var(--ins-teal, #1ab394) !important; }
.card-accent-secondary { border-left-color: var(--ins-secondary, #1c84c6) !important; }
.card-accent-pink    { border-left-color: var(--ins-pink, #ff679b) !important; }

/* ---- Banking workspace shell (a contained parent workspace with child frames) ---
   A distinct surface below the Accounting nav: a header (identity + description +
   contextual primary action) over a body split into a left navigation rail and the
   right child-frame content. Max 8px radius, no gradients, no hero. */
.bws { border: 1px solid var(--lx-border, #e6e8ec); border-radius: 8px; background: var(--lx-surface, #fff); overflow: hidden; margin-bottom: 1rem; }
.bws-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .85rem 1.15rem; border-bottom: 1px solid var(--lx-border, #e6e8ec); background: var(--lx-surface-2, #f7f8fa); }
.bws-title { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--lx-text, #1f2430); }
.bws-title i { color: var(--lx-accent, #2563eb); font-size: 1.1rem; }
.bws-sub { font-size: .875rem; color: var(--lx-muted, #667085); margin-top: .15rem; }
.bws-primary { flex-shrink: 0; }
.bws-body { display: flex; align-items: stretch; }
.bws-frame { flex: 1 1 auto; min-width: 0; padding: 1.15rem 1.25rem; }
.bws-frame-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bws-frame-title { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; font-weight: 700; margin: 0; color: var(--lx-text, #1f2430); }
.bws-frame-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Vertical rail variant of section_nav, sitting inside .bws-body */
.lx-subnav--rail { flex: 0 0 206px; overflow: visible; margin-bottom: 0; border-right: 1px solid var(--lx-border, #e6e8ec); background: var(--lx-surface, #fff); padding: .6rem; }
.lx-subnav--rail .nav { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: .1rem; }
.lx-subnav--rail .nav-link { position: relative; display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .65rem; border-radius: 6px; font-size: .9rem; font-weight: 500; color: var(--lx-muted, #667085); white-space: nowrap; box-shadow: none; }
.lx-subnav--rail .nav-link i { font-size: 1.05rem; }
.lx-subnav--rail .nav-link:hover { background: var(--lx-surface-2, #f1f3f5); color: var(--lx-text, #1f2430); }
.lx-subnav--rail .nav-link.active { background: var(--lx-accent-weak, #e7effb); color: var(--lx-accent, #2563eb); font-weight: 600; box-shadow: none; }
.lx-subnav--rail .nav-link.active::before { content: ""; position: absolute; left: 0; top: .38rem; bottom: .38rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--lx-accent, #2563eb); }
.lx-subnav--rail .nav-link:focus-visible { outline: 2px solid var(--lx-focus, #2563eb); outline-offset: 1px; }

/* Mobile/tablet: the rail becomes a horizontally scrollable strip; frame goes full width */
@media (max-width: 991.98px) {
    .bws-body { display: block; }
    .lx-subnav--rail { flex: none; width: auto; border-right: 0; border-bottom: 1px solid var(--lx-border, #e6e8ec); overflow-x: auto; padding: .5rem .6rem; }
    .lx-subnav--rail .nav { flex-direction: row; width: max-content; min-width: 100%; gap: .25rem; }
    .lx-subnav--rail .nav-link.active::before { left: .4rem; right: .4rem; top: auto; bottom: 0; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
    .bws-frame { padding: 1rem 1.05rem; }
}
@media (max-width: 575.98px) {
    .bws-head { padding: .75rem .9rem; }
    .bws-primary { width: 100%; }
    .bws-primary > .btn, .bws-primary > a, .bws-primary > button { width: 100%; }
}
:root[data-bs-theme="dark"] .bws-head { background: rgba(255, 255, 255, .03); }

/* ============================================================================
   Accounting suite rail (Phase UX-Q1) — grouped secondary navigation.
   Left column at ≥lg (sticky), an offcanvas drawer below lg. Replaces the old
   overflowing horizontal Accounting tab strip. Uses the bridged --lx-* tokens.
   ========================================================================== */
.acc-suite { display: flex; align-items: flex-start; gap: 1rem; }
.acc-suite-main { flex: 1 1 auto; min-width: 0; }

/* NOTE: HRMIS-only styles (.hr-*, .ws-*, .wz-*) live in app/css/hrmis.css, and
   employee-portal styles (.emp-*) live in app/css/employee.css. Keep them out of
   this global sheet so HRMIS/portal UI work can't affect Billing/Accounting. */

.acc-rail-toggle { display: none; width: 100%; align-items: center; margin-bottom: 1rem; padding: .55rem .8rem;
    border: 1px solid var(--lx-border, #e6e8ec); border-radius: 8px; background: var(--lx-surface, #fff);
    color: var(--lx-text, #1f2430); font-weight: 600; font-size: .9rem; }
.acc-rail-toggle-cur { color: var(--lx-muted, #667085); font-weight: 500; }
.acc-rail-toggle:focus-visible { outline: 2px solid var(--lx-focus, #2563eb); outline-offset: 1px; }

.acc-rail-group + .acc-rail-group { margin-top: .85rem; }
.acc-rail-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--lx-muted, #667085); padding: 0 .65rem .3rem; }
.acc-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.acc-rail-link { position: relative; display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem;
    border-radius: 6px; font-size: .9rem; font-weight: 500; color: var(--lx-muted, #667085); text-decoration: none; }
.acc-rail-link i { font-size: 1.05rem; flex: 0 0 auto; }
.acc-rail-link:hover { background: var(--lx-surface-2, #f1f3f5); color: var(--lx-text, #1f2430); }
.acc-rail-link.active { background: var(--lx-accent-weak, #e7effb); color: var(--lx-accent, #2563eb); font-weight: 600; }
.acc-rail-link.active::before { content: ""; position: absolute; left: 0; top: .38rem; bottom: .38rem; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--lx-accent, #2563eb); }
.acc-rail-link:focus-visible { outline: 2px solid var(--lx-focus, #2563eb); outline-offset: 1px; }

/* >= lg: the offcanvas becomes a static, sticky left column. */
@media (min-width: 992px) {
    .acc-rail.offcanvas { position: sticky; top: 84px; align-self: flex-start; visibility: visible; transform: none;
        width: 244px; flex: 0 0 244px; max-height: calc(100vh - 100px); overflow-y: auto; z-index: auto;
        border: 1px solid var(--lx-border, #e6e8ec); border-radius: 8px; background: var(--lx-surface, #fff); box-shadow: none; }
    .acc-rail .offcanvas-header { display: none; }
    .acc-rail .offcanvas-body { padding: .7rem .6rem; overflow: visible; }
    .acc-rail-toggle { display: none !important; }
}

/* < lg: offcanvas drawer + inline toggle above the content. */
@media (max-width: 991.98px) {
    .acc-suite { display: block; }
    .acc-rail-toggle { display: flex; }
    .acc-rail.offcanvas { width: 284px; }
}

:root[data-bs-theme="dark"] .acc-rail.offcanvas,
:root[data-bs-theme="dark"] .acc-rail-toggle { background: var(--lx-surface, #12161c); }

/* Accounting Command Centre — health strip + action-centre bits (reuses badge/card tokens). */
.acc-healthstrip { display: flex; flex-wrap: wrap; gap: .4rem .55rem; }
.acc-health-pill { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; padding: .1rem .1rem; border-radius: 6px; }
.acc-health-pill:hover { background: var(--lx-surface-2, #f1f3f5); }
.acc-health-pill:focus-visible { outline: 2px solid var(--lx-focus, #2563eb); outline-offset: 1px; }
.acc-health-state { font-size: .72rem; font-weight: 600; }
.acc-wq-ic { flex: 0 0 auto; width: 1.4rem; text-align: center; font-size: 1.05rem; line-height: 1.5; }
.acc-agebar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--bs-tertiary-bg, #eef2f6); }
.acc-agebar > span { display: block; height: 100%; }
/* Command-centre legibility: helper/subtext must be readable, not decorative grey. */
.acc-cc .text-muted { color: var(--lx-muted-strong) !important; }
.acc-cc .small, .acc-cc small { font-size: .82rem; line-height: 1.45; }
.acc-cc .acc-health-state { font-size: .78rem; }
.acc-cc .list-group-item .fw-semibold.small { font-size: .875rem; }
:root[data-bs-theme="dark"] { --lx-muted-strong: #aab4c4; }

/* ---- PC8: petty cash note & coin count ------------------------------------
   The quantity and line-total columns are fixed width and tabular, so typing
   never nudges the layout sideways while someone is counting a tin. */
.lx-denoms { table-layout: fixed; }
.lx-denoms th, .lx-denoms td { padding-top: .3rem; padding-bottom: .3rem; }
.lx-denoms thead + tbody + thead th { padding-top: .9rem; }
.lx-denoms input[type="number"] { -moz-appearance: textfield; }
.lx-denoms input[type="number"]::-webkit-outer-spin-button,
.lx-denoms input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lx-denoms .js-pcr-line { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 575.98px) {
  /* Comfortable thumb targets on a phone, without making the row taller than a line. */
  .lx-denoms input[type="number"] { min-height: 2.25rem; font-size: 1rem; }
  .lx-denoms th, .lx-denoms td { padding-left: .25rem; padding-right: .25rem; }
}

/* ---- Apps strip in the side-nav footer -------------------------------------
   Workspace apps surfaced where attention already is. The topbar Apps button is
   an unlabelled glyph among unlabelled glyphs and users were not finding it, so
   these carry LABELS — an icon-only strip would repeat that mistake.
   Sits above the workspace card, separated by a rule so it reads as "elsewhere"
   rather than "more of this app". */
.sidenav-apps { border-top: 1px solid rgba(255,255,255,.08); padding: 10px 0 6px; }
.sidenav-apps-title {
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: #94A3B8; font-weight: 700; padding: 0 18px 6px;
}
.sidenav-apps-list { list-style: none; margin: 0; padding: 0; }
.sidenav-app-link {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 7px 18px; color: #CBD5E1; font-size: 13px; font-weight: 500;
    background: none; border: 0; text-align: left; text-decoration: none;
    border-left: 3px solid transparent;
}
.sidenav-app-link:hover, .sidenav-app-link:focus-visible { background: rgba(255,255,255,.06); color: #fff; }
.sidenav-app-link:focus-visible { outline: 2px solid var(--leja-accent); outline-offset: -2px; }
/* Each app keeps its launcher colour, so the strip and the drawer agree. */
.sidenav-app-link .menu-icon i { color: var(--app-c, #94A3B8); font-size: 17px; }
.sidenav-app-link:hover .menu-icon i { color: #fff; }
.sidenav-app-all .menu-icon i { color: #94A3B8; }

/* Condensed: icons only, label restored on hover-expand — matching the HRMIS
   brand treatment so the whole rail behaves consistently. */
[data-sidenav-size="condensed"] .sidenav-menu .sidenav-apps-title { display: none; }
[data-sidenav-size="condensed"] .sidenav-menu .sidenav-app-link { justify-content: center; padding: 9px 0; gap: 0; }
[data-sidenav-size="condensed"] .sidenav-menu .sidenav-app-link .menu-text { display: none; }
[data-sidenav-size="condensed"] .sidenav-menu:hover .sidenav-apps-title { display: block; }
[data-sidenav-size="condensed"] .sidenav-menu:hover .sidenav-app-link { justify-content: flex-start; padding: 7px 18px; gap: 10px; }
[data-sidenav-size="condensed"] .sidenav-menu:hover .sidenav-app-link .menu-text { display: inline; }

/* Short viewports: the strip must never push the workspace card off-screen, so
   the MENU scrolls and the strip stays put. */
@media (max-height: 700px) {
    .sidenav-apps { padding: 6px 0 4px; }
    .sidenav-apps .sidenav-app-link { padding-top: 5px; padding-bottom: 5px; }
    .sidenav-footer { padding: .5rem; }
    .ws-card { padding: .45rem .5rem; }
    .ws-avatar { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------------------
   Template Gallery (Phase 2)
   Panels, not a table: these are compared by eye, and a table's job is lining up
   values you read across. Three per row on wide screens, two on tablet, one on
   phone — via Bootstrap's col-12 col-md-6 col-xl-4, so no custom breakpoints.
   --------------------------------------------------------------------------- */
.tplcard { transition: box-shadow .15s ease, border-color .15s ease; }
.tplcard:hover { box-shadow: 0 .35rem 1rem rgba(16, 24, 40, .08); }

/* Active state is carried by an icon and the word "Active" in the panel header.
   This border is reinforcement only — never the sole signal, so the panel stays
   readable in greyscale and for a colour-blind reader. */
.tplcard--active { border-color: var(--bs-success, #067647); border-width: 2px; }

.tplcard__thumb img { display: block; width: 100%; height: auto; background: #fff; }

/* Placeholder keeps the panel the same height when an image is missing, so a
   missing thumbnail cannot make one panel jump relative to its neighbours. */
.tplcard__thumb-missing { aspect-ratio: 595 / 420; background: var(--bs-tertiary-bg, #f6f7f9); }

/* Focus must stay visible on the panel controls — these are the primary actions
   on the page and keyboard users need to see where they are. */
.tplcard .btn:focus-visible,
.tplcard a:focus-visible { outline: 2px solid var(--bs-primary, #4F46E5); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Document Templates workspace — local view switcher (Gallery | Settings).
   Borrows the segmented look of .doctpl-switch so "switching within a
   workspace" looks the same wherever you do it. Distinct class because the two
   navs sit on the same page and select different things: this picks the VIEW,
   .doctpl-switch picks the document TYPE.
   --------------------------------------------------------------------------- */
.docws-nav { display: inline-flex; gap: .25rem; background: #EEF2F7;
             border: 1px solid var(--leja-border); border-radius: 10px; padding: .25rem; }
.docws-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem;
               border-radius: 8px; font-weight: 600; font-size: .86rem;
               color: var(--leja-muted); text-decoration: none; white-space: nowrap; }
.docws-nav a:hover { color: var(--leja-ink); }
.docws-nav a.active { background: #fff; color: var(--leja-accent); box-shadow: var(--leja-shadow-sm); }
.docws-nav a:focus-visible { outline: 2px solid var(--leja-accent); outline-offset: 2px; }

@media (max-width: 575.98px) {
    /* Scrolls rather than shrinking the text — same rule the type switcher follows. */
    .docws-nav { width: 100%; overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   Document Templates workspace — "how this works" frame.
   Full row, two columns, because the two views are only meaningful in relation
   to each other: "the design" means little until you can see that "the wording"
   is the other half. Stacks on mobile, where the divider does the same job.
   --------------------------------------------------------------------------- */
.docws-intro { border: 1px solid var(--leja-border); background: var(--bs-body-bg, #fff); }
.docws-intro__icon { font-size: 1.05rem; color: var(--leja-accent); }

/* The current view is tinted and rule-marked. The rule carries it in greyscale,
   so the tint is reinforcement rather than the signal. */
.docws-intro__col { padding-left: .85rem; border-left: 3px solid transparent; }
.docws-intro__col--here { border-left-color: var(--leja-accent);
                          background: linear-gradient(90deg, rgba(79,70,229,.05), transparent 60%); }

@media (min-width: 768px) {
    /* A hairline between the halves, so they read as two parts of one statement. */
    .docws-intro .row > div + div .docws-intro__col { border-left-color: var(--leja-border); }
    .docws-intro .row > div + div .docws-intro__col--here { border-left-color: var(--leja-accent); }
}

/* ---- Document Templates frame: typography ---------------------------------
   ⚠️ SIZED AGAINST THE APP'S ACTUAL BODY TEXT, NOT THE DOCUMENT'S TARGET. There is
   a real gap between the two: docs/leja-ux-design-system.md targets 15–16px body,
   while the deployed Inspinia theme sets --ins-body-font-size: 13px. Sizing this
   frame from the document made it ~23% larger than every sentence around it, which
   read as oversized because it WAS — relative to its neighbours.
   So these step off 13px rather than off 16px:
       title 15px  one step up, a panel title
       lead  14px  one step up, the sentence that explains the view
       note  13px  body size, and the floor for instructional text
   The floors still hold: nothing here is under 13px, and the scale forbids
   instructions below that. Bootstrap's .small (0.875em ≈ 11px here) is what this
   frame shipped with and is why it was unreadable.
   --------------------------------------------------------------------------- */
.docws-intro__title { font-size: .9375rem; font-weight: 650; line-height: 1.4; color: var(--leja-ink); }
.docws-intro__title:hover { color: var(--leja-accent); }

/* Full-strength ink: this is the sentence that explains the view, not a caption
   beside it, and the weight of the colour is what says so. */
.docws-intro__lead { font-size: .875rem; line-height: 1.5; color: var(--leja-ink); }

/* Body size, at the floor for instructional text. Muted, but the tone that clears
   AA rather than the faintest grey available. */
.docws-intro__note { font-size: .8125rem; line-height: 1.5; color: var(--leja-muted); }

.docws-intro__badge { font-size: .6875rem; font-weight: 700; }

/* ============================================================
   APP SWITCHER — the Apps drawer's trigger in the header.
   ⚠️ IT USED TO BE AN ICON-ONLY BUTTON and users did not know the drawer existed. Two things were
   wrong and both are fixed here rather than by teaching people: it said nothing (aria-label and
   title serve screen readers and hover, not somebody scanning the page), and it sat in the
   top-right, which every product on earth uses for account rather than navigation.

   It is now a real button — a surface, a border, a hover state — carrying the CURRENT app's name
   and colour. The tint comes from AppLauncher's own per-app colour via --app-switch-c, so the
   control belongs to wherever you are instead of being generic chrome. Kept deliberately quiet:
   a tinted surface and a coloured icon, not a saturated fill, because a header button that shouts
   competes with the page it sits above.
   ============================================================ */
.app-switcher {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .6rem .35rem .5rem;
    border: 1px solid var(--lx-border, #e6e8ec);
    border-radius: 9px;
    background: var(--lx-surface, #fff);
    color: var(--lx-text, #1b1b1f);
    font-size: .875rem; font-weight: 600; line-height: 1.2;
    box-shadow: var(--leja-shadow-sm, 0 1px 2px rgba(16, 24, 40, .05));
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.app-switcher__ico {
    font-size: 1.05rem;
    color: var(--app-switch-c, #4F46E5);
}
/* A 1.6em square of the app's own colour behind its glyph — the same device the drawer's tiles
   use, so the trigger and the thing it opens read as one system. */
.app-switcher__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6em; height: 1.6em; border-radius: 7px;
    background: color-mix(in srgb, var(--app-switch-c, #4F46E5) 12%, transparent);
}
.app-switcher__caret { font-size: .8rem; color: var(--lx-muted, #8b8f99); }
.app-switcher:hover,
.app-switcher[aria-expanded="true"] {
    background: var(--lx-surface-2, #f6f7f9);
    border-color: color-mix(in srgb, var(--app-switch-c, #4F46E5) 35%, var(--lx-border, #e6e8ec));
}
.app-switcher:focus-visible {
    outline: 2px solid var(--app-switch-c, #4F46E5); outline-offset: 2px;
}
/* Browsers without color-mix still get a legible button — the tint simply falls back to the
   neutral surface rather than disappearing. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .app-switcher__ico { background: var(--lx-surface-2, #f6f7f9); }
}