/* ==========================================================================
   LendSwift — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, spacing, radius, shadow, type and depth.

   This file must be loaded FIRST, before every other stylesheet. The other
   stylesheets each carry their own legacy :root block; because they load
   afterwards they would normally win, so the light-theme values below are
   duplicated into an explicit [data-theme="light"] block that has higher
   specificity than a bare :root. Nothing in the legacy files needs editing,
   and no existing page can break.

   Dark mode: driven by the data-theme attribute on <html>, which is set by
   includes/components/theme-toggle.php before first paint. When the user has
   expressed no preference, the OS preference is followed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Box model
   --------------------------------------------------------------------------
   The codebase had no global border-box reset, so most elements defaulted to
   content-box: `width` sized the CONTENT and padding was added on top. Any
   control written as `width: 100%` with horizontal padding therefore came out
   wider than the box holding it.

   Measured on the homepage before this rule: `.button-primary` resolved to
   width 311px (100% of its parent) plus 40px of padding each side — 391px in a
   311px parent, overhanging by 80px. Thirteen buttons overflowed on that page
   alone, which is why calls to action looked sliced off at the right edge on
   both phones and desktops.

   Declared here because tokens.css loads first, so every later stylesheet
   inherits the correct model. Anything that genuinely needs the old behaviour
   can still opt out with `box-sizing: content-box`.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Theme-paired logo
   --------------------------------------------------------------------------
   The stock lockup is dark ink, so its wordmark disappears on a dark bar. The
   chromes render both the dark-ink and light-ink files and let CSS pick; these
   two rules are what make that a swap rather than two logos side by side.

   Declared here because tokens.css is the one stylesheet the public site, the
   user dashboard AND the admin console all load. It previously lived in
   dashboard-dark.css, which admin does not load — so the admin app bar showed
   the mark twice.
   -------------------------------------------------------------------------- */

.logo-for-dark { display: none; }

:root[data-theme="dark"] .logo-for-light { display: none; }
:root[data-theme="dark"] .logo-for-dark  { display: block; }

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --ls-brand-50:  #eef2ff;
    --ls-brand-100: #e0e7ff;
    --ls-brand-200: #c7d2fe;
    --ls-brand-300: #a5b4fc;
    --ls-brand-400: #818cf8;
    --ls-brand-500: #6366f1;
    --ls-brand-600: #4f46e5;   /* primary */
    --ls-brand-700: #4338ca;
    --ls-brand-800: #3730a3;
    --ls-brand-900: #312e81;

    /* Brand as a FILL, for anywhere white text sits on the brand colour.
       Kept separate from --ls-brand-600 because that token lifts a step in
       dark mode so brand-coloured TEXT stays legible on a dark ground — and
       the lighter shade drops white text to 2.98:1, below the 4.5 minimum.
       One token cannot serve both jobs, so it does not try to. */
    --ls-brand-fill: #4f46e5;      /* white on this is ~5.6:1 */
    --ls-brand-fill-hover: #4338ca;

    /* ---- Semantic accents ----------------------------------------------- */
    --ls-success: #10b981;
    --ls-warning: #f59e0b;
    --ls-danger:  #ef4444;
    --ls-info:    #3b82f6;
    --ls-purple:  #8b5cf6;
    --ls-pink:    #ec4899;
    --ls-teal:    #14b8a6;
    --ls-sky:     #0ea5e9;

    /* ---- Spacing scale (4px base) --------------------------------------- */
    --ls-space-1: 0.25rem;
    --ls-space-2: 0.5rem;
    --ls-space-3: 0.75rem;
    --ls-space-4: 1rem;
    --ls-space-5: 1.25rem;
    --ls-space-6: 1.5rem;
    --ls-space-8: 2rem;
    --ls-space-10: 2.5rem;
    --ls-space-12: 3rem;
    --ls-space-16: 4rem;

    /* ---- Radius --------------------------------------------------------- */
    --ls-radius-sm: 0.375rem;
    --ls-radius-md: 0.5rem;
    --ls-radius-lg: 0.75rem;
    --ls-radius-xl: 1rem;
    --ls-radius-2xl: 1.5rem;
    --ls-radius-full: 9999px;

    /* ---- Type ----------------------------------------------------------- */
    --ls-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ls-text-xs:   0.75rem;
    --ls-text-sm:   0.875rem;
    --ls-text-base: 1rem;
    --ls-text-lg:   1.125rem;
    --ls-text-xl:   1.25rem;
    --ls-text-2xl:  1.5rem;
    --ls-text-3xl:  1.875rem;
    --ls-text-4xl:  2.25rem;

    /* ---- Depth ---------------------------------------------------------- */
    --ls-z-base: 1;
    --ls-z-dropdown: 1000;
    --ls-z-sticky: 1020;
    --ls-z-sidebar: 1030;
    --ls-z-overlay: 1040;
    --ls-z-modal: 1050;
    --ls-z-widget: 2147483000;   /* the help widget sits above everything */
    --ls-z-toast: 2147483100;

    /* ---- Motion --------------------------------------------------------- */
    --ls-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ls-duration-fast: 120ms;
    --ls-duration: 200ms;
    --ls-duration-slow: 320ms;

    color-scheme: light;
}

/* ==========================================================================
   LIGHT THEME (default)
   Applied to both :root and [data-theme="light"] so it out-specifies the
   legacy :root blocks in dashboard.css / admin.css / styles.css etc.
   ========================================================================== */
:root,
:root[data-theme="light"] {
    --ls-bg:            #f5f6fa;
    --ls-bg-subtle:     #eef0f6;
    --ls-surface:       #ffffff;
    --ls-surface-2:     #fafbfd;
    --ls-surface-3:     #f3f4f6;
    --ls-surface-hover: #f9fafb;
    --ls-border:        #e5e7eb;
    --ls-border-strong: #d1d5db;

    --ls-text:          #111827;
    --ls-text-secondary:#374151;
    --ls-text-muted:    #6b7280;
    --ls-text-inverse:  #ffffff;

    --ls-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ls-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
    --ls-shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.10), 0 2px 4px -1px rgba(16, 24, 40, 0.06);
    --ls-shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.10), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
    --ls-shadow-xl: 0 20px 25px -5px rgba(16, 24, 40, 0.10), 0 10px 10px -5px rgba(16, 24, 40, 0.04);

    --ls-success-bg: #d1fae5;  --ls-success-fg: #065f46;
    --ls-warning-bg: #fef3c7;  --ls-warning-fg: #92400e;
    --ls-danger-bg:  #fee2e2;  --ls-danger-fg:  #991b1b;
    --ls-info-bg:    #dbeafe;  --ls-info-fg:    #1e40af;
    --ls-brand-bg:   #e0e7ff;  --ls-brand-fg:   #3730a3;

    --ls-sidebar-bg:     #ffffff;
    --ls-sidebar-text:   #4b5563;
    /* Fill, not the accent step: the active item carries white text. */
    --ls-sidebar-active: var(--ls-brand-fill);
    --ls-overlay:        rgba(17, 24, 39, 0.45);

    /* Bridge: legacy variable names used across the existing stylesheets. */
    --primary-color: var(--ls-brand-600);
    --primary-hover: var(--ls-brand-700);
    --primary-light: var(--ls-brand-100);
    --text-color: var(--ls-text);
    --text-muted: var(--ls-text-muted);
    --border-color: var(--ls-border);
    --background-color: var(--ls-bg);
    --card-background: var(--ls-surface);
    --success-color: var(--ls-success);
    --error-color: var(--ls-danger);
    --warning-color: var(--ls-warning);
    --info-color: var(--ls-info);
    --font-family: var(--ls-font-sans);

    color-scheme: light;
}

/* ==========================================================================
   DARK THEME
   Only token values change — no component stylesheet is touched.
   ========================================================================== */
:root[data-theme="dark"] {
    --ls-bg:            #0f1117;
    --ls-bg-subtle:     #12141c;
    --ls-surface:       #181b24;
    --ls-surface-2:     #1e222d;
    --ls-surface-3:     #242936;
    --ls-surface-hover: #222633;
    --ls-border:        #2c3240;
    --ls-border-strong: #3a4152;

    --ls-text:          #f1f3f9;
    --ls-text-secondary:#cbd2e0;
    --ls-text-muted:    #8b93a7;
    --ls-text-inverse:  #0f1117;

    /* Brand lifts a step in dark so brand-coloured TEXT stays legible on dark
       surfaces. The FILL deliberately does not lift: white text sits on it,
       and lifting it was what left buttons and the active nav item at
       2.98:1. */
    --ls-brand-600: #818cf8;
    --ls-brand-700: #6366f1;
    --ls-brand-fill: #4f46e5;
    --ls-brand-fill-hover: #4338ca;

    --ls-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ls-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --ls-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --ls-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --ls-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

    --ls-success-bg: #06301f;  --ls-success-fg: #6ee7b7;
    --ls-warning-bg: #3a2a06;  --ls-warning-fg: #fcd34d;
    --ls-danger-bg:  #3b1114;  --ls-danger-fg:  #fca5a5;
    --ls-info-bg:    #10243f;  --ls-info-fg:    #93c5fd;
    --ls-brand-bg:   #1e1f45;  --ls-brand-fg:   #c7d2fe;

    --ls-sidebar-bg:     #141720;
    --ls-sidebar-text:   #a8b0c2;
    --ls-sidebar-active: #818cf8;
    --ls-overlay:        rgba(0, 0, 0, 0.65);

    /* Bridge — same names, dark values. */
    --primary-color: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-light: #1e1f45;
    --text-color: var(--ls-text);
    --text-muted: var(--ls-text-muted);
    --border-color: var(--ls-border);
    --background-color: var(--ls-bg);
    --card-background: var(--ls-surface);
    --success-color: #34d399;
    --error-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #60a5fa;

    color-scheme: dark;
}

/* ==========================================================================
   DARK-MODE SURFACE REMAP  (must stay ABOVE the component bridge below, which
   refines specific cases at equal specificity and therefore needs to win on
   source order)

   The legacy stylesheets hardcode `background: #fff` on dozens of card and
   section classes, spread across ~460 lines of inline <style> in header.php
   plus per-page inline blocks. Editing each one is neither safe nor durable —
   new pages would reintroduce the problem.

   Instead, remap structurally by class-name shape. Two properties make this
   safe: setting `background-color` under an element that paints a gradient
   `background-image` is invisible (the gradient wins), and setting `color` on
   a container lets its children inherit rather than forcing each one.

   Deliberately NOT matched: buttons, badges, chips, avatars and icons, which
   must keep their brand fills.
   ========================================================================== */
:root[data-theme="dark"] [class*="-card"],
:root[data-theme="dark"] [class*="card-"],
:root[data-theme="dark"] [class*="-section"],
:root[data-theme="dark"] [class*="-panel"],
:root[data-theme="dark"] [class*="-box"],
:root[data-theme="dark"] [class*="-preview"],
:root[data-theme="dark"] [class*="-highlight"],
:root[data-theme="dark"] [class*="-wrapper"],
:root[data-theme="dark"] [class*="-tile"],
:root[data-theme="dark"] [class*="-item"] {
    background-color: var(--ls-surface);
    border-color: var(--ls-border);
    color: var(--ls-text-secondary);
}

/* Page-level bands sit a step behind the cards they contain. */
:root[data-theme="dark"] section[class*="-section"],
:root[data-theme="dark"] div[class*="-section"] {
    background-color: var(--ls-bg);
}

/* Light chips/plates that are content, not controls. */
:root[data-theme="dark"] [class*="trust-badge"],
:root[data-theme="dark"] [class*="-plate"] {
    background-color: var(--ls-surface-2);
    border-color: var(--ls-border);
    color: var(--ls-text-secondary);
}

/* Secondary buttons hardcode a white fill in the legacy CSS. */
:root[data-theme="dark"] .button-secondary,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .button-outline,
:root[data-theme="dark"] .btn-outline-primary {
    background-color: var(--ls-surface-2);
    border-color: var(--ls-border-strong);
    color: var(--ls-text);
}

/* Anything explicitly painted white by an inline style or utility class. */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background-color:#fff"] {
    background-color: var(--ls-surface) !important;
    color: var(--ls-text-secondary);
}

/* Common muted/description text that hardcodes a near-black literal. */
:root[data-theme="dark"] [class*="-description"],
:root[data-theme="dark"] [class*="-subtitle"],
:root[data-theme="dark"] [class*="-label"],
:root[data-theme="dark"] [class*="-text"],
:root[data-theme="dark"] [class*="-meta"],
:root[data-theme="dark"] [class*="-excerpt"] {
    color: var(--ls-text-secondary);
}

/* ==========================================================================
   DARK-MODE COMPONENT BRIDGE
   Specific refinements. These share specificity with the block above, so they
   rely on coming later in the file.
   ========================================================================== */
:root[data-theme="dark"] body {
    background-color: var(--ls-bg);
    color: var(--ls-text);
}

:root[data-theme="dark"] .dashboard-sidebar,
:root[data-theme="dark"] .admin-sidebar,
:root[data-theme="dark"] #mobile-menu {
    background-color: var(--ls-sidebar-bg);
    border-color: var(--ls-border);
}

:root[data-theme="dark"] .dashboard-header,
:root[data-theme="dark"] .admin-header,
:root[data-theme="dark"] .header,
:root[data-theme="dark"] .dashboard-footer,
:root[data-theme="dark"] .admin-footer,
:root[data-theme="dark"] .footer {
    background-color: var(--ls-surface);
    border-color: var(--ls-border);
    color: var(--ls-text);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .admin-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .chart-card,
:root[data-theme="dark"] .dashboard-card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .notification-dropdown {
    background-color: var(--ls-surface);
    border-color: var(--ls-border);
    color: var(--ls-text);
    box-shadow: var(--ls-shadow-md);
}

:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .admin-card-header,
:root[data-theme="dark"] .chart-card-header {
    border-color: var(--ls-border);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] .stat-value,
:root[data-theme="dark"] .header-title {
    color: var(--ls-text);
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] label,
:root[data-theme="dark"] .stat-title,
:root[data-theme="dark"] .text-muted {
    color: var(--ls-text-secondary);
}

:root[data-theme="dark"] table,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .admin-table,
:root[data-theme="dark"] .data-table {
    color: var(--ls-text);
}

:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .admin-table th,
:root[data-theme="dark"] .data-table th {
    background-color: var(--ls-surface-3);
    color: var(--ls-text-secondary);
    border-color: var(--ls-border);
}

:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .admin-table td,
:root[data-theme="dark"] .data-table td {
    border-color: var(--ls-border);
}

:root[data-theme="dark"] .table tbody tr:hover,
:root[data-theme="dark"] .admin-table tbody tr:hover,
:root[data-theme="dark"] .data-table tbody tr:hover {
    background-color: var(--ls-surface-hover);
}

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .form-control {
    background-color: var(--ls-surface-2);
    border-color: var(--ls-border-strong);
    color: var(--ls-text);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--ls-text-muted);
}

:root[data-theme="dark"] .sidebar-nav-link,
:root[data-theme="dark"] .admin-nav a {
    color: var(--ls-sidebar-text);
}

:root[data-theme="dark"] .sidebar-nav-link:hover,
:root[data-theme="dark"] .admin-nav a:hover {
    background-color: var(--ls-surface-3);
    color: var(--ls-text);
}

:root[data-theme="dark"] .sidebar-nav-title {
    color: var(--ls-text-muted);
}

:root[data-theme="dark"] .alert-success { background-color: var(--ls-success-bg); color: var(--ls-success-fg); }
:root[data-theme="dark"] .alert-danger,
:root[data-theme="dark"] .alert-error   { background-color: var(--ls-danger-bg);  color: var(--ls-danger-fg); }
:root[data-theme="dark"] .alert-warning { background-color: var(--ls-warning-bg); color: var(--ls-warning-fg); }
:root[data-theme="dark"] .alert-info    { background-color: var(--ls-info-bg);    color: var(--ls-info-fg); }

/* ==========================================================================
   THEME TOGGLE CONTROL
   ========================================================================== */
.ls-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-md);
    background: var(--ls-surface);
    color: var(--ls-text-muted);
    cursor: pointer;
    transition: background var(--ls-duration) var(--ls-ease),
                color var(--ls-duration) var(--ls-ease),
                border-color var(--ls-duration) var(--ls-ease);
}

.ls-theme-toggle:hover {
    background: var(--ls-surface-3);
    color: var(--ls-brand-600);
    border-color: var(--ls-brand-600);
}

.ls-theme-toggle:focus-visible {
    outline: 2px solid var(--ls-brand-600);
    outline-offset: 2px;
}

.ls-theme-toggle .ls-icon-sun  { display: none; }
.ls-theme-toggle .ls-icon-moon { display: block; }
:root[data-theme="dark"] .ls-theme-toggle .ls-icon-sun  { display: block; }
:root[data-theme="dark"] .ls-theme-toggle .ls-icon-moon { display: none; }

/* ==========================================================================
   SHARED UTILITIES used by the new dashboard / help / assistant surfaces
   ========================================================================== */
.ls-stack   { display: flex; flex-direction: column; gap: var(--ls-space-4); }
.ls-row     { display: flex; align-items: center; gap: var(--ls-space-3); }
.ls-grow    { flex: 1 1 auto; min-width: 0; }
.ls-muted   { color: var(--ls-text-muted); }
.ls-truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ls-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Brand assets
   --------------------------------------------------------------------------
   The generated logo is a real SVG file loaded through <img src>, which makes
   it an isolated document — it cannot inherit the page's text colour, so the
   wordmark ink is baked in. Two files are generated (dark ink and white ink)
   and swapped here by theme.

   `content: url()` is the only way to repoint an <img> from CSS. It is scoped
   to .is-default-logo so an admin-uploaded logo is never substituted.
   ========================================================================== */

[data-theme="dark"] img.is-default-logo {
    content: url("../images/logo-inverse.svg");
}