/* ==========================================================================
   Pioneer Vision Reports — Design System
   --------------------------------------------------------------------------
   A single source of truth for the UI. Brand-derived tokens (--pv-primary,
   --pv-accent, --pv-brand-ink, --pv-font-display) are injected at runtime by
   ThemeService from the `branding` table, so theming + white-label reflow the
   whole app with no code change. The static system (neutrals, radius, shadows,
   typography scale, components) lives here.

   NOTE ON EXACT BRAND COLORS: the --pv-primary / --pv-accent defaults below are
   an interpretation of Pioneer Vision's positioning. Replace them with the
   exact Elementor Global Colors to match the marketing site 1:1.
   ========================================================================== */

/* ---- Fonts (Google Fonts; swap to match the site's exact families) ------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Brand (runtime-overridable) — defaults; ThemeService overrides these */
    --pv-primary:      #2e5bff;   /* electric blue — trust / "vision" */
    --pv-primary-600:  #2443cc;
    --pv-primary-soft: #eaf0ff;
    --pv-accent:       #12b886;   /* emerald — growth / positive trend */
    --pv-accent-soft:  #e6f7f1;
    --pv-brand-ink:    #0e1a33;   /* deep navy — sidebar / display headings */
    --pv-font-display: 'Plus Jakarta Sans';
    --pv-font-sans:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Neutrals — cool slate ramp (premium SaaS feel) */
    --pv-slate-50:  #f8fafc;
    --pv-slate-100: #f1f5f9;
    --pv-slate-200: #e2e8f0;
    --pv-slate-300: #cbd5e1;
    --pv-slate-400: #94a3b8;
    --pv-slate-500: #64748b;
    --pv-slate-600: #475569;
    --pv-slate-700: #334155;
    --pv-slate-800: #1e293b;
    --pv-slate-900: #0f172a;

    /* Semantic */
    --pv-success: #16a34a;  --pv-success-soft: #dcfce7;
    --pv-warning: #f59e0b;  --pv-warning-soft: #fef3c7;
    --pv-danger:  #ef4444;  --pv-danger-soft:  #fee2e2;
    --pv-info:    #0ea5e9;  --pv-info-soft:    #e0f2fe;

    /* Surfaces (light mode) */
    --pv-bg:        var(--pv-slate-50);
    --pv-surface:   #ffffff;
    --pv-surface-2: var(--pv-slate-100);
    --pv-border:    var(--pv-slate-200);
    --pv-text:      var(--pv-slate-900);
    --pv-text-muted:var(--pv-slate-500);
    --pv-sidebar-bg:var(--pv-brand-ink);
    --pv-sidebar-fg:#c7d2e4;
    --pv-sidebar-active:rgba(255,255,255,.10);

    /* Radius */
    --pv-r-sm: 6px;  --pv-r-md: 10px;  --pv-r-lg: 14px;  --pv-r-xl: 20px;  --pv-r-full: 9999px;

    /* Shadows (layered, soft) */
    --pv-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
    --pv-shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --pv-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --pv-shadow-lg: 0 12px 28px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.05);
    --pv-ring: 0 0 0 3px color-mix(in srgb, var(--pv-primary) 25%, transparent);

    /* Gradients */
    --pv-grad-brand: linear-gradient(135deg, var(--pv-primary) 0%, var(--pv-accent) 100%);
    --pv-grad-ink:   linear-gradient(160deg, #16234a 0%, var(--pv-brand-ink) 100%);

    /* Type scale */
    --pv-text-xs: .75rem;  --pv-text-sm: .875rem;  --pv-text-base: 1rem;
    --pv-text-lg: 1.125rem; --pv-text-xl: 1.375rem; --pv-text-2xl: 1.75rem; --pv-text-3xl: 2.25rem;

    /* Spacing rhythm */
    --pv-space: 4px;
}

/* ---- Dark mode: override surfaces only; brand tokens stay ---------------- */
[data-theme="dark"] {
    --pv-bg:        #0b1120;
    --pv-surface:   #111827;
    --pv-surface-2: #0f1a2e;
    --pv-border:    #1e293b;
    --pv-text:      #e5edf7;
    --pv-text-muted:#8ea2bd;
    --pv-sidebar-bg:#0a0f1d;
    --pv-sidebar-fg:#aebdd4;
    --pv-primary-soft: rgba(46,91,255,.14);
    --pv-accent-soft:  rgba(18,184,134,.14);
    --pv-shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --pv-shadow-md: 0 4px 14px rgba(0,0,0,.45);
    --pv-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--pv-font-sans);
    font-size: var(--pv-text-base);
    line-height: 1.55;
    color: var(--pv-text);
    background: var(--pv-bg);
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease, color .2s ease;
}
h1,h2,h3,h4,h5 { font-family: var(--pv-font-display), var(--pv-font-sans); font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--pv-text); }
a { color: var(--pv-primary); text-decoration: none; }
::selection { background: color-mix(in srgb, var(--pv-primary) 22%, transparent); }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.pv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .625rem 1rem; font: 600 var(--pv-text-sm)/1 var(--pv-font-sans);
    border-radius: var(--pv-r-md); border: 1px solid transparent; cursor: pointer;
    transition: transform .04s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
    white-space: nowrap; user-select: none;
}
.pv-btn:active { transform: translateY(1px); }
.pv-btn:focus-visible { outline: none; box-shadow: var(--pv-ring); }
.pv-btn-primary   { background: var(--pv-primary); color: #fff; box-shadow: var(--pv-shadow-sm); }
.pv-btn-primary:hover { background: var(--pv-primary-600); }
.pv-btn-accent    { background: var(--pv-accent); color: #fff; }
.pv-btn-ghost     { background: transparent; color: var(--pv-text); border-color: var(--pv-border); }
.pv-btn-ghost:hover { background: var(--pv-surface-2); }
.pv-btn-subtle    { background: var(--pv-primary-soft); color: var(--pv-primary); }
.pv-btn-danger    { background: var(--pv-danger); color: #fff; }
.pv-btn-lg { padding: .8rem 1.25rem; font-size: var(--pv-text-base); }
.pv-btn-sm { padding: .4rem .7rem; font-size: var(--pv-text-xs); }
.pv-btn-block { width: 100%; }

/* ==========================================================================
   4. FORMS
   ========================================================================== */
.pv-label { display:block; font-size: var(--pv-text-sm); font-weight:600; color: var(--pv-text); margin-bottom:.4rem; }
.pv-input, .pv-select, .pv-textarea {
    width: 100%; padding: .65rem .85rem; font: 400 var(--pv-text-sm)/1.4 var(--pv-font-sans);
    color: var(--pv-text); background: var(--pv-surface); border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-md); transition: border-color .15s ease, box-shadow .15s ease;
}
.pv-input::placeholder { color: var(--pv-slate-400); }
.pv-input:focus, .pv-select:focus, .pv-textarea:focus {
    outline: none; border-color: var(--pv-primary); box-shadow: var(--pv-ring);
}
.pv-input-group { position: relative; }
.pv-input-group .pv-input { padding-left: 2.5rem; }
.pv-input-group > i { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color: var(--pv-slate-400); }
.pv-help { font-size: var(--pv-text-xs); color: var(--pv-text-muted); margin-top:.35rem; }
.pv-error-text { font-size: var(--pv-text-xs); color: var(--pv-danger); margin-top:.35rem; }

/* ==========================================================================
   5. CARDS / SURFACES
   ========================================================================== */
.pv-card {
    background: var(--pv-surface); border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-lg); box-shadow: var(--pv-shadow-sm);
}
.pv-card-pad { padding: 1.25rem 1.35rem; }
.pv-card-head { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.35rem; border-bottom: 1px solid var(--pv-border); }
.pv-card-title { font-family: var(--pv-font-display); font-size: var(--pv-text-base); font-weight:700; }

/* Stat / KPI card (dashboard component) */
.pv-stat { display:flex; flex-direction:column; gap:.5rem; }
.pv-stat-label { font-size: var(--pv-text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.04em; color: var(--pv-text-muted); }
.pv-stat-value { font-family: var(--pv-font-display); font-size: var(--pv-text-3xl); font-weight:800; line-height:1; }
.pv-stat-icon { width:40px; height:40px; display:grid; place-items:center; border-radius: var(--pv-r-md); background: var(--pv-primary-soft); color: var(--pv-primary); }

/* Trend pill */
.pv-trend { display:inline-flex; align-items:center; gap:.3rem; font-size: var(--pv-text-xs); font-weight:700; padding:.2rem .5rem; border-radius: var(--pv-r-full); }
.pv-trend-up   { color: var(--pv-success); background: var(--pv-success-soft); }
.pv-trend-down { color: var(--pv-danger);  background: var(--pv-danger-soft); }

/* Health grade chip */
.pv-grade { width:44px; height:44px; display:grid; place-items:center; border-radius: var(--pv-r-md); font-family: var(--pv-font-display); font-weight:800; color:#fff; }
.pv-grade-a { background: var(--pv-success); } .pv-grade-b { background: #22a06b; }
.pv-grade-c { background: var(--pv-warning); } .pv-grade-d { background: #f97316; } .pv-grade-f { background: var(--pv-danger); }

/* ==========================================================================
   6. BADGES / PILLS
   ========================================================================== */
.pv-badge { display:inline-flex; align-items:center; gap:.35rem; font-size: var(--pv-text-xs); font-weight:600; padding:.25rem .6rem; border-radius: var(--pv-r-full); }
.pv-badge-primary { background: var(--pv-primary-soft); color: var(--pv-primary); }
.pv-badge-success { background: var(--pv-success-soft); color: var(--pv-success); }
.pv-badge-warning { background: var(--pv-warning-soft); color: #b45309; }
.pv-badge-danger  { background: var(--pv-danger-soft);  color: #b91c1c; }
.pv-badge-muted   { background: var(--pv-surface-2);    color: var(--pv-text-muted); }

/* ==========================================================================
   7. TABLES
   ========================================================================== */
.pv-table { width:100%; border-collapse: collapse; font-size: var(--pv-text-sm); }
.pv-table thead th { text-align:left; font-size: var(--pv-text-xs); text-transform:uppercase; letter-spacing:.04em; color: var(--pv-text-muted); font-weight:600; padding:.75rem 1rem; border-bottom:1px solid var(--pv-border); }
.pv-table tbody td { padding:.85rem 1rem; border-bottom:1px solid var(--pv-border); }
.pv-table tbody tr:last-child td { border-bottom:none; }
.pv-table tbody tr:hover { background: var(--pv-surface-2); }

/* ==========================================================================
   8. LAYOUT — SIDEBAR + NAVBAR + SHELL
   ========================================================================== */
.pv-shell { display:flex; min-height:100vh; }
.pv-sidebar {
    width: 248px; flex-shrink:0; background: var(--pv-sidebar-bg); color: var(--pv-sidebar-fg);
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.pv-brand { display:flex; align-items:center; gap:.65rem; padding:1.15rem 1.25rem; color:#fff; font-family: var(--pv-font-display); font-weight:800; font-size: var(--pv-text-lg); }
.pv-brand-mark { width:34px; height:34px; border-radius: var(--pv-r-md); background: var(--pv-grad-brand); display:grid; place-items:center; color:#fff; font-size:1rem; box-shadow: var(--pv-shadow-md); }
.pv-nav { padding: .5rem .75rem; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.pv-nav-section { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color: color-mix(in srgb, var(--pv-sidebar-fg) 55%, transparent); padding:.9rem .75rem .35rem; }
.pv-nav-link { display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius: var(--pv-r-md); color: var(--pv-sidebar-fg); font-size: var(--pv-text-sm); font-weight:500; transition: background-color .12s ease, color .12s ease; }
.pv-nav-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.pv-nav-link.active { background: var(--pv-sidebar-active); color:#fff; box-shadow: inset 3px 0 0 var(--pv-accent); }
.pv-nav-link i { width:18px; text-align:center; opacity:.9; }

.pv-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.pv-topbar { height:62px; display:flex; align-items:center; gap:1rem; padding:0 1.5rem; background: var(--pv-surface); border-bottom:1px solid var(--pv-border); position:sticky; top:0; z-index:20; }
.pv-search { flex:1; max-width:460px; }
.pv-search .pv-input { background: var(--pv-surface-2); border-color:transparent; }
.pv-icon-btn { width:38px; height:38px; display:grid; place-items:center; border-radius: var(--pv-r-md); color: var(--pv-text-muted); border:1px solid transparent; background:transparent; cursor:pointer; }
.pv-icon-btn:hover { background: var(--pv-surface-2); color: var(--pv-text); }
.pv-avatar { width:34px; height:34px; border-radius: var(--pv-r-full); background: var(--pv-grad-brand); color:#fff; display:grid; place-items:center; font-weight:700; font-size: var(--pv-text-sm); }
.pv-content { padding: 1.5rem; }
.pv-page-title { font-family: var(--pv-font-display); font-size: var(--pv-text-2xl); font-weight:800; }
.pv-page-sub { color: var(--pv-text-muted); font-size: var(--pv-text-sm); margin-top:.15rem; }

/* Grid helpers for dashboards */
.pv-grid { display:grid; gap:1rem; }
.pv-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pv-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pv-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1024px){ .pv-grid-4{grid-template-columns:repeat(2,1fr)} .pv-grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 820px){ .pv-sidebar{display:none} .pv-grid-4,.pv-grid-3,.pv-grid-2{grid-template-columns:1fr} }

/* ==========================================================================
   9. AUTH SCREEN
   ========================================================================== */
.pv-auth { min-height:100vh; display:grid; grid-template-columns: 1.1fr 1fr; }
.pv-auth-brandside { background: var(--pv-grad-ink); color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.pv-auth-brandside::after { content:""; position:absolute; inset:auto -120px -160px auto; width:420px; height:420px; border-radius:50%; background: var(--pv-grad-brand); opacity:.22; filter: blur(10px); }
.pv-auth-formside { display:grid; place-items:center; padding:2rem; background: var(--pv-bg); }
.pv-auth-card { width:100%; max-width:400px; }
.pv-auth-quote { font-family: var(--pv-font-display); font-size: var(--pv-text-2xl); font-weight:700; line-height:1.3; position:relative; z-index:1; }
@media (max-width: 900px){ .pv-auth{grid-template-columns:1fr} .pv-auth-brandside{display:none} }

/* ==========================================================================
   10. REPORT COMPONENTS (print-oriented; used by DomPDF later)
   ========================================================================== */
.pv-report { max-width: 8.5in; margin:0 auto; background:#fff; color:#0f172a; }
.pv-report-cover { min-height: 60vh; background: var(--pv-grad-ink); color:#fff; padding: 3rem; display:flex; flex-direction:column; justify-content:flex-end; }
.pv-report-section { padding: 2rem 2.5rem; border-bottom:1px solid var(--pv-slate-200); page-break-inside: avoid; }
.pv-report-section h2 { font-family: var(--pv-font-display); font-size: var(--pv-text-xl); margin-bottom:.75rem; }
.pv-report-footer { padding:1rem 2.5rem; font-size: var(--pv-text-xs); color: var(--pv-slate-500); display:flex; justify-content:space-between; }
.pv-watermark { position:fixed; inset:0; display:grid; place-items:center; opacity:.05; font-size:6rem; font-weight:800; transform:rotate(-30deg); pointer-events:none; }

/* Utilities */
.pv-muted{color:var(--pv-text-muted)} .pv-flex{display:flex} .pv-items-center{align-items:center}
.pv-justify-between{justify-content:space-between} .pv-gap-2{gap:.5rem} .pv-gap-3{gap:.75rem} .pv-gap-4{gap:1rem}
.pv-mt-2{margin-top:.5rem}.pv-mt-4{margin-top:1rem}.pv-mb-4{margin-bottom:1rem}.pv-mb-6{margin-bottom:1.5rem}
.pv-w-full{width:100%} .pv-text-sm{font-size:var(--pv-text-sm)} .pv-text-xs{font-size:var(--pv-text-xs)}