/* ════════════════════════════════════════════════════════════
   360 AUTO EYE — APP CHROME
   Shared shell for Dashboard / Reports / Settings / Login.
   Layers on top of styles.css. Carries light+dark theme tokens,
   nav, footer overrides, and reusable product components.
   ════════════════════════════════════════════════════════════ */

/* ───── THEME TOKENS ───── */
html[data-theme="light"]{
  --bg-primary:#FFFFFF; --bg-secondary:#EAEDF2; --bg-tertiary:#DEE2EA;
  --ink-primary:#0B1220; --ink-secondary:#485063; --ink-tertiary:#8993A4;
  --border:#D6DBE3;
  --grid-a:#f4f5f8; --grid-b:#ebedf1;
  --scan-line:rgba(67,97,255,.18);
}
html[data-theme="light"] body{background:#E3E7ED}
html[data-theme="dark"]{
  --bg-primary:#1B2236; --bg-secondary:#141A2B; --bg-tertiary:#222B42;
  --ink-primary:#FFFFFF; --ink-secondary:#B4BCCC; --ink-tertiary:#7A8499;
  --border:#2C3650;
  --grid-a:#1A2238; --grid-b:#161D31;
  --scan-line:rgba(0,184,255,.22);
}
html[data-theme="dark"] body{background:#10172A}

/* nav + button dark overrides (mirrors Reports Page) */
html[data-theme="dark"] .nav{background:var(--bg-primary)}
html[data-theme="dark"] .nav .cta{background:var(--bg-primary)}
html[data-theme="dark"] .nav .pill.active{background:#fff;color:#0B1220}
html[data-theme="dark"] .nav .menu{background:#fff;color:#0B1220}
html[data-theme="dark"] .nav .cta .dot{background:#fff;color:#0B1220}
html[data-theme="dark"] .btn{background:#fff;color:#0B1220}
html[data-theme="dark"] .btn .a{background:#0B1220;color:#fff}
html[data-theme="dark"] .btn.ghost{background:transparent;color:#fff;border:1px solid var(--border)}
html[data-theme="dark"] .btn.ghost .a{background:#fff;color:#0B1220}
html[data-theme="dark"] .form input,
html[data-theme="dark"] .form textarea{background:var(--bg-secondary);color:var(--ink-primary)}

/* ───── APP PAGE SCAFFOLD ───── */
.app-page{max-width:1440px;margin:0 auto;padding:24px 24px 64px}

/* theme toggle in nav */
.theme-tog{display:inline-flex;align-items:center;gap:0;padding:4px;border-radius:var(--r-pill);background:var(--bg-secondary);border:1px solid var(--border)}
.theme-tog button{width:30px;height:30px;border-radius:999px;border:0;background:transparent;color:var(--ink-tertiary);display:grid;place-items:center;cursor:pointer}
.theme-tog button.active{background:var(--bg-primary);color:var(--ink-primary);box-shadow:0 1px 2px rgba(0,0,0,.06)}
html[data-theme="dark"] .theme-tog button.active{background:var(--bg-tertiary);color:#fff}

/* nav user avatar */
.nav .avatar{width:38px;height:38px;border-radius:var(--r-pill);background:var(--ink-primary);color:#fff;display:grid;place-items:center;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:13px;cursor:pointer;border:0;flex-shrink:0}
html[data-theme="dark"] .nav .avatar{background:#fff;color:#0B1220}

/* ───── REUSABLE PRODUCT COMPONENTS ───── */

/* generic icon button */
.icon-btn{width:42px;height:42px;border-radius:var(--r-pill);background:var(--bg-secondary);border:1px solid var(--border);display:grid;place-items:center;color:var(--ink-primary);cursor:pointer;transition:background .15s;flex-shrink:0}
.icon-btn:hover{background:var(--bg-tertiary)}

/* card primitive */
.card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px}

/* eyebrow override to follow tokens */
.eyebrow{color:var(--ink-tertiary)}

/* section header used across pages */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.sec-head .l h2{font-family:'Inter Tight',sans-serif;font-weight:800;letter-spacing:-0.02em;font-size:30px;line-height:1.05;margin:8px 0 0;color:var(--ink-primary)}
.sec-head .l p{margin:8px 0 0;color:var(--ink-secondary);font-size:14.5px;max-width:54ch}

/* status badges + pills */
.status-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;font-family:'Inter',sans-serif}
.status-badge .d{width:7px;height:7px;border-radius:999px;background:currentColor}
.status-badge.clear{background:rgba(15,174,110,.12);color:var(--status-clear);border:1px solid rgba(15,174,110,.3)}
.status-badge.warn{background:rgba(232,155,14,.12);color:var(--status-warn);border:1px solid rgba(232,155,14,.3)}
.status-badge.flag{background:rgba(229,72,77,.12);color:var(--status-flag);border:1px solid rgba(229,72,77,.3)}

.sev-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;font-family:'Inter',sans-serif;white-space:nowrap}
.sev-pill .d{width:6px;height:6px;border-radius:999px;background:currentColor}
.sev-pill.clear{background:rgba(15,174,110,.1);color:var(--status-clear)}
.sev-pill.warn{background:rgba(232,155,14,.12);color:var(--status-warn)}
.sev-pill.flag{background:rgba(229,72,77,.1);color:var(--status-flag)}
.sev-pill.neutral{background:var(--bg-secondary);color:var(--ink-secondary)}

/* mono label */
.mlabel{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-tertiary)}

/* dark hero/callout block (mirrors marketing .final / report actions) */
.callout{margin-top:18px;background:var(--ink-primary);color:#fff;border-radius:var(--r-xl);padding:32px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;position:relative;overflow:hidden}
html[data-theme="dark"] .callout{background:var(--bg-primary);border:1px solid var(--border)}
.callout::after{content:"";position:absolute;right:-100px;top:-100px;width:280px;height:280px;border-radius:50%;background:var(--gradient-brand);opacity:.16;filter:blur(40px);pointer-events:none}
.callout h3{font-family:'Inter Tight',sans-serif;font-weight:800;letter-spacing:-0.02em;font-size:26px;margin:0;color:#fff;line-height:1.1}
.callout p{margin:8px 0 0;color:rgba(255,255,255,.7);font-size:14px;max-width:60ch}
.callout .btn-group{display:flex;gap:10px;position:relative;z-index:2;flex-shrink:0}
.callout .btn{background:#fff;color:var(--ink-primary)}
.callout .btn .a{background:var(--ink-primary);color:#fff}
.callout .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.callout .btn.ghost .a{background:#fff;color:var(--ink-primary)}

/* footer dark text */
html[data-theme="dark"] .footer{color:var(--ink-tertiary)}

/* scan-line keyframe (in case styles.css not loaded order) */
@keyframes scan{0%{background-position:-100% 0}100%{background-position:200% 0}}

/* small util */
.spacer{flex:1}