/* ==========================================================================
   LMS design tokens + component skin — consolidated from lms-posh.css v2-v9.

   That file grew as nine dated layers, each overriding parts of the last
   (accent indigo -> teal, sidebar indigo -> navy -> petrol -> white, table
   headers light -> dark -> light again). This file keeps only the FINAL
   resolved rule for every selector — same palette, same computed styles,
   one declaration per property instead of a five-layer override chain.

   Wired into every real screen via components/layouts/styles.html (the
   "not yet wired in" note that used to be here is stale — that step
   happened during Phase 3, this file is the live production stylesheet).

   Redesign (2026-08-17): full visual pass — warm amber-orange accent,
   Inter self-hosted (see fonts/inter/), bordered tables, tighter type
   scale. See the design-tokens block below for the rationale.
   ========================================================================== */

/* ---------- design tokens ------------------------------------------------ */
/* Redesign (2026-08-17): warm amber-orange accent lifted from the
   LEADSYNTH comet logomark, replacing the flat teal that had no
   connection to the brand mark. The old teal is kept, not discarded —
   it becomes --lms-accent-2, a secondary color for charts/badges so
   status colors never get confused with the one true CTA/brand color.
   Semantic good/warn/bad are new, separate tokens — previously
   success/warning/danger pointed at generic Bootstrap defaults with no
   relationship to the rest of the palette. */
:root {
    --default-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Accent: warm amber-orange (brand mark), teal demoted to secondary */
    --lms-accent-rgb: 232, 98, 44;          /* #E8622C */
    --lms-accent-strong-rgb: 191, 74, 27;   /* #BF4A1B — hover/active */
    --lms-accent-soft-rgb: 244, 153, 95;    /* #F4995F — gradients, tints */
    --lms-accent: rgb(var(--lms-accent-rgb));
    --lms-accent-strong: rgb(var(--lms-accent-strong-rgb));
    --lms-accent-soft: rgb(var(--lms-accent-soft-rgb));

    --lms-accent-2-rgb: 15, 118, 110;       /* teal-700 — was the primary accent */
    --lms-accent-2: rgb(var(--lms-accent-2-rgb));

    /* Theme (Ynex) hooks — kept pointed at the accent so third-party
       components (DataTables chrome, stock Bootstrap utilities) match */
    --primary-rgb: var(--lms-accent-rgb);
    --primary: rgb(var(--primary-rgb));
    --primary-color: rgb(var(--primary-rgb));
    --primary-border: rgb(var(--primary-rgb));

    --secondary-rgb: var(--lms-accent-2-rgb);

    /* Semantic — separate from the brand accent so a status pill is
       never mistaken for a call-to-action */
    --lms-good-rgb: 30, 142, 90;    /* #1E8E5A */
    --lms-warn-rgb: 184, 122, 18;   /* #B87A12 */
    --lms-bad-rgb: 196, 67, 46;     /* #C4432E */
    --lms-good: rgb(var(--lms-good-rgb));
    --lms-warn: rgb(var(--lms-warn-rgb));
    --lms-bad: rgb(var(--lms-bad-rgb));
    --success-rgb: var(--lms-good-rgb);
    --warning-rgb: var(--lms-warn-rgb);
    --danger-rgb: var(--lms-bad-rgb);
    --info-rgb: var(--lms-accent-2-rgb);

    /* Shape + elevation */
    --lms-radius: 0.75rem;
    --lms-radius-sm: 0.5rem;
    --lms-shadow: 0 1px 2px rgba(22, 33, 58, .06), 0 6px 20px rgba(22, 33, 58, .08);
    --lms-shadow-lg: 0 6px 12px rgba(22, 33, 58, .07), 0 16px 40px rgba(22, 33, 58, .13);

    /* Ink — kept navy-based, line/background warmed toward the new
       accent instead of the old cool slate-blue */
    --lms-ink: #16213a;
    --lms-muted: #6b6252;
    --lms-line: #e8e1d3;
    --lms-table-line: #d9d0bc;
}

/* Inter was already the first name in --default-font-family above, but
   with no @font-face for it every page was silently falling through to
   the system-UI fallbacks (Segoe UI on Windows) — this is what actually
   makes the name resolve. SIL OFL-licensed, see fonts/inter/OFL.txt. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/Inter-Regular.otf") format("opentype");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/Inter-SemiBold.otf") format("opentype");
}

[data-theme-mode="light"] {
    --default-body-bg-color: #faf7f1;
    --default-text-color: var(--lms-ink);
    --default-border: var(--lms-line);
}

/* ---------- base + type --------------------------------------------------- */
html, body {
    font-family: var(--default-font-family) !important;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[data-theme-mode="light"] body {
    background: #faf7f1;
    color: var(--lms-ink);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.015em;
    font-weight: 600;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3c9d8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9aa3b8; }

.main-content { animation: lmsFadeIn .28s ease both; }

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

@media (prefers-reduced-motion: reduce) {
    .main-content { animation: none; }
    .btn, .card.custom-card, .side-menu__item { transition: none; }
}

/* ---------- header --------------------------------------------------------- */
.app-header {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 0 !important;
    box-shadow: none;
}

/* ---------- navigation ------------------------------------------------------
   Final skin: white top bar merging with the header (v7). Earlier layers
   (indigo gradient v2, navy-slate v5, petrol-navy v6) are superseded. */
.app-sidebar {
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lms-line) !important;
    box-shadow: 0 1px 10px rgba(22, 33, 58, .05);
}

.app-sidebar .main-menu > .slide > .side-menu__item,
.app-sidebar .side-menu__item {
    border-radius: 999px;
    margin: 3px 4px;
    transition: background .18s ease, color .18s ease;
}

.app-sidebar .main-menu > .slide > .side-menu__item .side-menu__label,
.app-sidebar .main-menu > .slide > .side-menu__item .side-menu__icon,
.app-sidebar .main-menu > .slide > .side-menu__item .side-menu__angle,
.app-sidebar .main-menu > .slide > .side-menu__item {
    color: #574f42 !important;
}

/* hover: light accent tint. Active: solid ink pill — was the same
   faint tint as hover, so the current page never stood out in the
   nav (matching the "menu looks the same as before" feedback). */
.app-sidebar .main-menu > .slide > .side-menu__item:hover {
    background: rgba(var(--lms-accent-rgb), .09) !important;
}
.app-sidebar .main-menu > .slide > .side-menu__item.active {
    background: var(--lms-ink) !important;
}

.app-sidebar .main-menu > .slide > .side-menu__item:hover .side-menu__label,
.app-sidebar .main-menu > .slide > .side-menu__item:hover .side-menu__icon,
.app-sidebar .main-menu > .slide > .side-menu__item:hover .side-menu__angle {
    color: var(--lms-accent-strong) !important;
}
.app-sidebar .main-menu > .slide > .side-menu__item.active .side-menu__label,
.app-sidebar .main-menu > .slide > .side-menu__item.active .side-menu__icon,
.app-sidebar .main-menu > .slide > .side-menu__item.active .side-menu__angle {
    color: #faf7f1 !important;
}

/* dropdown submenus: white panel, dark text, accent tint on hover */
.slide-menu {
    background: #ffffff !important;
    border-radius: 0.85rem;
    box-shadow: var(--lms-shadow-lg);
    border: 1px solid var(--lms-line);
    overflow: hidden;
    padding: 8px !important;
    min-width: 13rem;
}

/* Not actually a <li> bullet (the theme's own `.nav ul li { list-style-
   type: none; }` reset already handles that correctly) — the dots are a
   deliberate `::before` circle styles.css draws on every dropdown item
   (`.slide-menu.child1/2/3 .side-menu__item:before { content: "";
   width/height: 0.3rem; border-radius: 50%; ... }`), presumably meant
   as a "leaf" indicator for the theme's default (denser, icon-free)
   vertical-nav submenus. Doesn't fit the visual language here, so drop
   it — `content: none` is what actually stops a ::before from
   generating at all (an empty string still renders an empty box). Kept
   the harmless list-style reset above too, in case some other item
   variant ever does render as a bare marker. */
.slide-menu .side-menu__item::before {
    content: none !important;
}
.slide-menu li,
.slide-menu .slide {
    list-style: none !important;
}

.slide-menu .side-menu__item,
.slide-menu .side-menu__item .side-menu__label {
    color: #4a4133 !important;
    border-radius: 0.55rem;
}

.slide-menu .side-menu__item {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.82rem;
    transition: background .14s ease, color .14s ease;
}

.slide-menu .side-menu__item:hover { background: rgba(var(--lms-accent-rgb), .10) !important; }

.slide-menu .side-menu__item:hover,
.slide-menu .side-menu__item:hover .side-menu__label {
    color: var(--lms-accent-strong) !important;
}

.slide-menu .side-menu__label1 a { color: var(--lms-ink) !important; font-weight: 600; }

/* "Back" link strip above content */
.main-menu .slide.side-menu__label1 { border-bottom: 1px solid var(--lms-line); }

/* ---------- cards ------------------------------------------------------------ */
.card.custom-card {
    border: 1px solid var(--lms-line);
    border-radius: var(--lms-radius);
    box-shadow: var(--lms-shadow);
    transition: box-shadow .22s ease, transform .22s ease;
    overflow: hidden;
}

.card.custom-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--lms-line);
    font-weight: 600;
    padding: 0.65rem 1.1rem;
}

.card.custom-card .card-body { padding: 0.9rem 1.1rem; }

.main-content .card.custom-card { margin-block-end: 0.9rem; }

/* shadow-only hover: no transform, which would create a containing block
   and trap nested position:fixed modals (the v8 fix) */
.container-fluid .row > [class*="col-"] > .card.custom-card:hover,
.main-content .card.custom-card:hover,
.card.custom-card:hover {
    box-shadow: var(--lms-shadow-lg);
    transform: none !important;
}

.main-content .card.custom-card a { text-decoration: none; }

/* legacy stat-tile label/value type (superseded by the .lms-stat kit below
   for dashboards, but still the base .card h6/h4 rule where that kit isn't used) */
.main-content .card.custom-card h6 {
    font-size: 0.72rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--lms-muted);
    margin-bottom: 0.25rem;
}

.main-content .card.custom-card h4 {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ---------- tables ------------------------------------------------------------ */
.table {
    --bs-table-striped-bg: rgba(var(--lms-accent-rgb), .025);
    color: var(--lms-ink);
}

/* full grid: every cell draws its own border on every side (was
   bottom-hairline-only via `border-top: 0 !important`, which suppressed
   .table-bordered's own borders too) */
.apptable,
.apptable.table-bordered,
.table.table-bordered {
    border: 1px solid var(--lms-table-line) !important;
}
.apptable td, .apptable th,
.apptable.table-bordered td, .apptable.table-bordered th,
.table.table-bordered td, .table.table-bordered th {
    border: 1px solid var(--lms-table-line) !important;
    padding: 0.55rem 0.75rem !important;
    vertical-align: middle;
}

/* soft light header (final: v7 replaced v6's dark slate / v2's light gradient) */
.apptable thead th,
.table thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid rgba(var(--lms-accent-soft-rgb), .45) !important;
    position: sticky;
    top: 0;
    z-index: 5;
}

.apptable thead .sorting:before, .apptable thead .sorting:after,
table.dataTable thead th:before, table.dataTable thead th:after {
    color: #a4b1c2 !important;
}

.apptable tbody tr,
.table tbody tr { transition: background .12s ease; }

.apptable tbody tr:hover,
.table.table-hover tbody tr:hover,
.table tbody tr:hover {
    background: rgba(var(--lms-accent-rgb), .05) !important;
}

.apptable { border-radius: .6rem; overflow: hidden; }

.apptable tbody td {
    font-size: .82rem;
    color: #334155;
}

/* phone-number links: quiet, confident */
.apptable tbody td a {
    color: var(--lms-accent);
    font-weight: 500;
    text-decoration: none;
}
.apptable tbody td a:hover { text-decoration: underline; }

/* zebra */
.apptable tbody tr:nth-child(even) { background: #fafbfe; }

/* DataTables chrome: search box + info line */
.dataTables_filter input {
    border: 1px solid #d7ddeb !important;
    border-radius: .5rem !important;
    padding: .3rem .6rem !important;
    font-size: .8rem;
}
.dataTables_filter label { font-size: .78rem; color: var(--lms-muted); }
.dataTables_info { font-size: .75rem; color: var(--lms-muted); }

/* ---------- status badges (applied by lms-posh.js) --------------------------- */
.lms-badge {
    display: inline-block;
    padding: 0.24em 0.7em;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    line-height: 1.5;
    white-space: nowrap;
}

.lms-badge-fresh     { background: rgba(var(--lms-accent-2-rgb), .13); color: var(--lms-accent-2); }
.lms-badge-overdue   { background: rgba(var(--lms-bad-rgb), .13);      color: var(--lms-bad); }
.lms-badge-reopen    { background: rgba(var(--lms-accent-rgb), .13);   color: var(--lms-accent-strong); }
.lms-badge-followup  { background: rgba(var(--lms-warn-rgb), .15);     color: var(--lms-warn); }
.lms-badge-closed    { background: rgba(107, 98, 82, .15);             color: var(--lms-muted); }
.lms-badge-open      { background: rgba(var(--lms-accent-rgb), .13);   color: var(--lms-accent-strong); }
.lms-badge-booking   { background: rgba(168, 85, 247, .14); color: #7e22ce; }
.lms-badge-won       { background: rgba(var(--lms-good-rgb), .17); color: var(--lms-good); }
.lms-badge-lost      { background: rgba(var(--lms-bad-rgb), .15);  color: var(--lms-bad); }

/* ---------- buttons ------------------------------------------------------------ */
.btn {
    border-radius: var(--lms-radius-sm);
    font-weight: 500;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(135deg, var(--lms-accent-soft), var(--lms-accent));
    border-color: var(--lms-accent);
    box-shadow: 0 2px 10px rgba(var(--lms-accent-rgb), .30);
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--lms-accent), var(--lms-accent-strong));
    border-color: var(--lms-accent-strong);
    box-shadow: 0 4px 16px rgba(var(--lms-accent-rgb), .40);
}

.btn-outline-primary {
    color: var(--lms-accent);
    border-color: rgba(var(--lms-accent-rgb), .45);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: rgba(var(--lms-accent-rgb), .08);
    color: var(--lms-accent-strong);
    border-color: var(--lms-accent);
}

.btn-info { box-shadow: 0 2px 6px rgba(6, 182, 212, .22); }
.btn-sm { padding: 0.3rem 0.7rem; }

/* ---------- forms --------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--lms-radius-sm);
    border-color: #d7ddeb;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus, .form-select:focus {
    border-color: rgba(var(--lms-accent-rgb), .55);
    box-shadow: 0 0 0 0.2rem rgba(var(--lms-accent-rgb), .12);
}

.form-label { font-weight: 500; color: #334155; }

/* ---------- modals, dropdowns, toasts -------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--lms-radius);
    box-shadow: var(--lms-shadow-lg);
}

.modal-header, .modal-footer { padding: 0.7rem 1rem; }
.modal-header { border-bottom: 1px solid var(--lms-line); }
.modal-footer { border-top: 1px solid var(--lms-line); }
.modal-body { padding: 1rem; }

/* Flatpickr calendars now render at document.body level (scripts.html's
   global setDefaults, so they aren't subject to a modal's own layout —
   see that file's comment for the full story). That means a calendar
   opened from a modal's date field no longer sits nested inside the
   modal's stacking context; it competes with the modal directly at the
   body level instead. styles.css gives both `.modal` and `.flatpickr-
   calendar.open` the identical z-index 105, which only worked by
   accident before (DOM-order tie-break) — pin the calendar clearly
   above any modal so it isn't left to luck. */
.flatpickr-calendar.open { z-index: 1070 !important; }

.dropdown-menu {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 0.7rem;
    box-shadow: var(--lms-shadow-lg);
}

.dropdown-item { border-radius: 0.45rem; margin: 1px 4px; width: auto; }
.dropdown-item:hover { background: rgba(var(--lms-accent-rgb), .08); }

/* ---------- pagination / misc chrome --------------------------------------------- */
.page-link { border-radius: 0.45rem !important; margin: 0 2px; color: var(--lms-accent); }
.breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }
.spinner-border { --bs-spinner-border-width: 0.18em; }

.nav-tabs .nav-link.active, .nav .nav-link.active {
    color: var(--lms-accent-strong) !important;
    border-color: var(--lms-accent) !important;
}

/* ---------- login page ------------------------------------------------------------ */
body:has(.authentication.authentication-basic) {
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(99, 102, 241, .25), transparent 60%),
        radial-gradient(700px 420px at 5% 100%, rgba(14, 165, 233, .18), transparent 55%),
        linear-gradient(160deg, #eceffb 0%, #f6f7fd 60%, #ecf5fb 100%) !important;
}

.authentication .card.custom-card {
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 44px rgba(30, 27, 75, .16);
}

.authentication .btn-primary { width: 100%; padding: .65rem; font-weight: 600; }

/* ---------- chat (WhatsApp) --------------------------------------------------------- */
.main-chart-wrapper .chat-info,
.main-chart-wrapper .main-chat-area {
    border-radius: var(--lms-radius) !important;
    border-color: var(--lms-line) !important;
    box-shadow: var(--lms-shadow);
    overflow: hidden;
}

/* ---------- page head -------------------------------------------------------------- */
.main-content.app-content { padding-top: 0.65rem; padding-bottom: 0.5rem; }

.page-header-breadcrumb {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* was Bootstrap's bare .fs-18 utility (18px, whatever the theme's default
   weight was) — brought down to match .lms-page-head's scale so every
   screen's title reads at the same size regardless of which of the two
   header patterns it uses */
.page-header-breadcrumb .page-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--lms-ink);
}

.footer.py-3 {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    font-size: 0.8rem;
}

.lms-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0 1rem;
}

.lms-page-head h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lms-ink);
    letter-spacing: -0.01em;
}

.lms-page-head .lms-page-sub {
    font-size: 0.78rem;
    color: var(--lms-muted);
    margin-top: 2px;
}

.lms-page-head .lms-page-sub a { color: var(--lms-muted); text-decoration: none; }

.lms-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lms-page-head .spinner-border,
.lms-stat .spinner-border,
.lms-card-title .spinner-border {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.14em;
    color: #94a3b8;
    vertical-align: -1px;
    margin-inline-start: 0.35rem;
}

/* ---------- stat group card / grid (dashboard SaaS kit) ---------------------------- */
.main-content .card.custom-card.lms-stat-group {
    margin-block-end: 1rem;
    background: #ffffff;
}

/* groups are calm surfaces — no lift animation, shadow only */
.main-content .card.custom-card.lms-stat-group:hover {
    transform: none;
    box-shadow: var(--lms-shadow);
}

/* equal card heights per row */
.lms-equal > [class*="col-"] > .lms-stat-group { height: calc(100% - 1rem); }

/* Every cell draws a top + start hairline shifted -1px; the card's
   overflow:hidden clips the outer edges, leaving only internal separators. */
.lms-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    flex: 1 1 auto;
    overflow: hidden;
}

.lms-stat-grid.lms-cols-1 { grid-template-columns: minmax(0, 1fr); }
.lms-stat-grid.lms-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lms-stat-grid.lms-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
    .lms-stat-grid,
    .lms-stat-grid.lms-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lms-stat-grid > .lms-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .lms-stat-grid,
    .lms-stat-grid.lms-cols-2,
    .lms-stat-grid.lms-cols-5 { grid-template-columns: minmax(0, 1fr); }
}

.lms-stat {
    padding: 0.85rem 1.1rem;
    min-width: 0;
    border-inline-start: 1px solid var(--lms-line);
    border-block-start: 1px solid var(--lms-line);
    margin-inline-start: -1px;
    margin-block-start: -1px;
}

/* an odd trailing cell in a 2-across grid spans the full row */
.lms-stat-grid.lms-cols-2 > .lms-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

.lms-stat-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--lms-muted);
    margin-bottom: 0.3rem;
}

.lms-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    min-height: 1.75rem;
    color: var(--lms-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.lms-stat-sub {
    font-size: 0.72rem;
    color: var(--lms-muted);
    margin-top: 0.2rem;
}

/* whole-cell links inherit ink; no theme link-grey, no bold-on-hover */
.main-content .lms-stat a,
.main-content .lms-stat a:hover {
    display: block;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.main-content .lms-stat a:hover .lms-stat-value { color: var(--lms-accent); }

/* icon medallion: single accent tone + semantic exceptions */
.lms-stat-icon {
    float: inline-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 0.6rem;
    background: rgba(var(--lms-accent-rgb), .10);
    color: var(--lms-accent);
    font-size: 1rem;
    line-height: 1;
    margin-inline-start: 0.5rem;
}

.lms-stat-icon.is-danger  { background: rgba(var(--lms-bad-rgb), .10);  color: var(--lms-bad); }
.lms-stat-icon.is-success { background: rgba(var(--lms-good-rgb), .10); color: var(--lms-good); }
.lms-stat-icon.is-warning { background: rgba(var(--lms-warn-rgb), .12); color: var(--lms-warn); }

/* hero stat (primary KPIs) */
.lms-hero-stat { padding: 1rem 1.1rem 0.95rem; }

.lms-hero-stat .lms-stat-value {
    font-size: 1.9rem;
    min-height: 2.25rem;
    line-height: 1.1;
}

.lms-hero-stat .lms-stat-label::after {
    content: "";
    display: block;
    width: 2rem;
    height: 3px;
    border-radius: 999px;
    background: rgba(var(--lms-accent-rgb), .35);
    margin-top: 0.35rem;
}

.lms-hero-stat.is-danger  .lms-stat-label::after { background: var(--lms-bad); }
.lms-hero-stat.is-success .lms-stat-label::after { background: var(--lms-good); }
.lms-hero-stat.is-warning .lms-stat-label::after { background: var(--lms-warn); }

/* card title row */
.lms-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--lms-line);
}

.main-content .card.custom-card .lms-card-title h6 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--lms-ink);
}

.lms-card-title .lms-card-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--lms-muted);
    margin-top: 1px;
}

.lms-card-title a.lms-card-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lms-accent);
    text-decoration: none;
    white-space: nowrap;
}

.lms-card-title a.lms-card-link:hover { color: var(--lms-accent-strong); font-weight: 500; }

/* ---------- sticky quick-date bar --------------------------------------------------- */
.lms-datebar {
    position: sticky;
    top: 0.25rem;
    z-index: 20;
    margin-block-end: 1rem;
}

.lms-datebar .card.custom-card {
    margin-block-end: 0;
    box-shadow: var(--lms-shadow);
}

.lms-datebar .card-body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.9rem;
}

/* higher specificity than .card-body above (three classes vs two) — the
   markup carries both .card-body and .d-flex.p-3, so this wins the padding */
.lms-datebar .d-flex.p-3 { padding: 0.55rem 0.8rem !important; }

.lms-toolbar-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lms-muted);
}

.lms-datebar .form-control {
    max-width: 160px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* ---------- single-line filter bar --------------------------------------------------- */
.lms-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    padding: .15rem .1rem;
}

.lms-filterbar > .btn { flex: 0 0 auto; white-space: nowrap; }

.lms-filterbar-sep {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--lms-line);
    margin: .15rem .25rem;
}

.lms-filterbar .lms-datein    { flex: 0 0 110px; width: 110px; }
.lms-filterbar .lms-filtersel { flex: 0 0 160px; width: 160px; }
.lms-filterbar .lms-searchin  { flex: 1 1 170px; min-width: 140px; max-width: 240px; }

.lms-filterbar .form-control, .lms-filterbar .form-select {
    height: calc(1.5em + .5rem + 2px);
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .8rem;
}

@media (max-width: 991.98px) {
    .lms-filterbar { flex-wrap: wrap; overflow-x: visible; }
}

/* ---------- list toolbar (count + pager) ---------------------------------------------- */
.lms-listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .1rem .6rem;
}

.lms-listbar-info { display: flex; align-items: baseline; gap: .45rem; }

/* pill chip (final: v6 replaced the plain large-number treatment) */
.lms-listbar-total {
    font-size: .9rem;
    font-weight: 650;
    color: var(--lms-accent-strong);
    background: rgba(var(--lms-accent-rgb), .10);
    border: 1px solid rgba(var(--lms-accent-rgb), .22);
    border-radius: 999px;
    padding: .2rem .7rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.lms-listbar-caption { font-size: .8rem; color: #526175; font-weight: 500; }

.lms-listbar-pager { display: flex; gap: .4rem; }
.lms-listbar-pager .btn { white-space: nowrap; }

/* ---------- background-export floating chip (lms-export.js) --------------------------- */
#lms-export-chip {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 10600; /* above modals/backdrops */
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--lms-line);
    border-radius: 0.75rem;
    box-shadow: var(--lms-shadow-lg);
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
    color: var(--lms-ink);
    max-width: 380px;
}

/* ---------- unified timeline (Lead Workspace, plan §6.1) ---------------------------- */
.lms-timeline { max-height: 520px; overflow-y: auto; }

.lms-timeline-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--lms-line);
}
.lms-timeline-item:last-child { border-bottom: 0; }

.lms-timeline-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--lms-accent-rgb), .10);
    color: var(--lms-accent);
    font-size: 1rem;
}
.lms-timeline-icon-whatsapp { background: rgba(16, 185, 129, .12); color: #059669; }

.lms-timeline-body { min-width: 0; flex: 1 1 auto; }

.lms-timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--lms-ink);
}

.lms-timeline-when { font-size: 0.72rem; color: var(--lms-muted); white-space: nowrap; }

.lms-timeline-detail { font-size: 0.82rem; color: #334155; margin-top: 0.15rem; }

.lms-timeline-meta { font-size: 0.72rem; color: var(--lms-muted); margin-top: 0.2rem; }
.lms-timeline-meta a { color: var(--lms-accent); text-decoration: none; }
.lms-timeline-meta a:hover { text-decoration: underline; }

/* ---------- pipeline board (Kanban across leadtype, plan §6.3) ---------------------- */
.lms-pipeline {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: flex-start;
}

.lms-pipeline-col {
    flex: 0 0 270px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: var(--lms-radius);
    box-shadow: var(--lms-shadow);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.lms-pipeline-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--lms-line);
    font-weight: 650;
    font-size: 0.85rem;
    color: var(--lms-ink);
}

.lms-pipeline-col-count {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--lms-accent-strong);
    background: rgba(var(--lms-accent-rgb), .10);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-variant-numeric: tabular-nums;
}

.lms-pipeline-col.is-not-droppable .lms-pipeline-col-head::after {
    content: "derived";
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lms-muted);
    background: #f1f5f9;
    border-radius: 999px;
    padding: .1rem .5rem;
}

.lms-pipeline-col-body {
    padding: 0.6rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 80px;
}

.lms-pipeline-card {
    background: #fafbfe;
    border: 1px solid var(--lms-line);
    border-radius: 0.6rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    cursor: grab;
    transition: box-shadow .15s ease;
}

.lms-pipeline-card:hover { box-shadow: var(--lms-shadow); }
.lms-pipeline-card:active { cursor: grabbing; }

.lms-pipeline-card-number {
    font-weight: 600;
    color: var(--lms-accent);
    display: block;
}

.lms-pipeline-card-name { color: var(--lms-ink); display: block; margin-top: 1px; }

.lms-pipeline-card-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: var(--lms-muted);
}

.lms-pipeline-col.is-not-droppable .lms-pipeline-card { cursor: pointer; }

.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: var(--lms-shadow-lg); }

.lms-pipeline-col-drophint {
    border: 2px dashed rgba(var(--lms-accent-rgb), .35);
    border-radius: 0.5rem;
    text-align: center;
    padding: 0.4rem;
    font-size: 0.68rem;
    color: var(--lms-accent-strong);
    margin-top: 0.3rem;
    display: none;
}

/* ---------- header + nav merge -------------------------------------------
   main-sidebar.html (the horizontal menu) is now included from within
   main-header.html, between the logo and the profile panel, instead of
   rendering as its own row below the header. Scoped to the theme's own
   horizontal-nav breakpoint so the mobile off-canvas sidebar is untouched. */
@media (min-width: 992px) {
    .app-header .app-sidebar {
        position: relative !important;
        inset-block-start: auto !important;
        inset-inline-start: auto !important;
        width: auto !important;
        height: 2.75rem !important;
        flex: 1 1 auto;
        min-width: 0;
        /* was 46rem — an arbitrary-looking cap with nothing on the other
           side needing the room (the header row is just logo | nav |
           profile, no competing element), so it was forcing items into
           the scroll-arrow overflow sooner than the actual available
           space required. flex:1 1 auto with this raised ceiling still
           leaves the logo and profile their own fixed space first; it
           only changes how much MORE the nav is allowed to claim. */
        max-width: 64rem;
        display: flex;
        align-items: center;
        align-self: center;
        margin: 0 1rem;
        border: 0 !important;
        border-radius: 999px;
        box-shadow: none;
        /* `hidden` — restored (2026-08-21). Briefly set to `visible` to
           stop this box clipping the dropdown submenus, but that also
           stopped it clipping the horizontal nav-item row itself: on a
           real production viewport, items that don't fit now spilled
           visibly into the profile block instead of being contained and
           reachable via the scroll arrows (the `.slide-left`/`.slide-
           right` buttons exist precisely because this row needs to clip
           and scroll, not spill). The dropdown now escapes via its own
           `position: fixed` + JS-computed offset instead (see the
           dropdown rule and lms-nav-dropdown-position.js below) — a
           mechanism that doesn't depend on this ancestor's overflow at
           all, so this can safely go back to what it always needs to be
           for the row's own horizontal clipping to work. */
        overflow: hidden;
        z-index: auto;
    }
    .app-header .app-sidebar .main-sidebar,
    .app-header .app-sidebar .main-menu-container,
    .app-header .app-sidebar .main-menu {
        height: 100% !important;
        padding: 0 !important;
    }
    .app-header .app-sidebar .main-menu-container { align-items: center; }
    .app-header .app-sidebar .side-menu__item {
        height: 100%;
        display: flex !important;
        align-items: center;
        padding: 0 0.65rem !important;
    }
    .app-header .app-sidebar .side-menu__label {
        font-size: 0.8rem;
    }
    .app-header .app-sidebar .side-menu__icon {
        font-size: 0.95rem;
    }

    /* Overflow arrows (.slide-left/.slide-right, shown once the nav row
       has more items than fit): styled by the theme for a *dark*-colored
       bar — <html data-menu-styles="dark"> is still set from before this
       app's nav went white in an earlier phase, and nothing since has
       matched the arrows to the color they actually render on. White
       icon + 10%-white background on a white bar is close to invisible,
       which is why they read as barely-there even with more room freed
       up by the max-width change above (there will likely still be
       viewports/window widths where scrolling is needed). */
    .app-header .app-sidebar .slide-left,
    .app-header .app-sidebar .slide-right {
        background-color: #f3eee4 !important;
        border: 1px solid var(--lms-line) !important;
        box-shadow: var(--lms-shadow);
    }
    .app-header .app-sidebar .slide-left svg,
    .app-header .app-sidebar .slide-right svg {
        fill: var(--lms-ink) !important;
    }

    /* Dropdown submenus ("User Management", "Report"): went through two
       prior fixes (see git-free history in docs/MODERNIZATION_PLAN.md
       §7.21/§7.22) that both relied on `.app-sidebar` having `overflow:
       visible` so an absolutely-positioned panel could escape its
       height-constrained box. That created a *different* real bug (see
       the `overflow: hidden` restore above) — this row genuinely needs
       to clip and scroll horizontally, so "let everything overflow" was
       never going to be compatible with that.

       `position: fixed` sidesteps the conflict entirely: fixed elements
       escape ALL ancestor overflow clipping regardless of hidden/
       visible, so `.app-sidebar` can go back to clipping the way it
       needs to. The tradeoff is that `position: fixed` can't be placed
       with a CSS percentage like the old `inset-block-start: 100%`
       (that would resolve against the viewport, not the trigger) — so
       lms-nav-dropdown-position.js computes the trigger's actual
       on-screen position with getBoundingClientRect() and sets exact
       pixel top/left on open. This rule only supplies the parts that
       don't change per-instance: fixed positioning itself, and
       cancelling Popper's own inline transform (never part of the
       vendor's design, computed for a layout this app doesn't use —
       see §7.21 for the full story). `!important` because position/
       transform are otherwise set inline by Popper at runtime. */
    .app-header .app-sidebar .slide.has-sub .slide-menu.child1 {
        position: fixed !important;
        transform: none !important;
    }

    [data-nav-layout="horizontal"] .app-content {
        margin-block-start: 3.75rem;
        min-height: calc(100vh - 3.75rem);
    }
}
.lms-pipeline-col.drag-target-active .lms-pipeline-col-drophint { display: block; }