/* ============================================================
   themes.css — Light Theme: Miami Vice Edition
   Palette: warm off-white, coral/salmon, electric teal, 
            hot pink, golden yellow, deep navy text
   ============================================================ */

/* ── BASE ────────────────────────────────────────────────────────────────── */
[data-theme="light"] body { 
  color: var(--text);
  background-color: var(--bg);
}
[data-theme="light"] h2,
[data-theme="light"] h3 { color: var(--text); }

/* ── CARDS ───────────────────────────────────────────────────────────────── */
[data-theme="light"] .card {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0,80,120,0.08), 0 1px 4px rgba(0,80,120,0.05);
  border: 1px solid rgba(0,180,200,0.15);
}
[data-theme="light"] .card:hover { 
  border-color: rgba(0,210,210,0.35); 
  box-shadow: 0 4px 24px rgba(0,160,200,0.14); 
}
[data-theme="light"] .card h3,
[data-theme="light"] .card h4 { color: var(--text) !important; }

/* ── NAVIGATION ──────────────────────────────────────────────────────────── */
[data-theme="light"] .top-nav,
[data-theme="light"] .navbar { 
  background: rgba(255,250,248,0.97) !important;
  border-bottom: 1px solid rgba(255,100,100,0.15);
  box-shadow: 0 1px 0 rgba(255,100,80,0.08), 0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="light"] .top-nav .nav-logo  { color: var(--primary) !important; }
[data-theme="light"] .navbar .nav-brand  { color: var(--primary) !important; }
[data-theme="light"] .navbar .nav-back,
[data-theme="light"] .navbar .nav-link   { color: #2d4a6e !important; }
[data-theme="light"] .nav-tru            { color: var(--accent) !important; }

/* ── FORMS ───────────────────────────────────────────────────────────────── */
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-select {
  background: #ffffff;
  color: #0d1b2e;
  border-color: rgba(0,180,200,0.3);
  box-shadow: inset 0 1px 3px rgba(0,80,120,0.06);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-textarea:focus,
[data-theme="light"] .form-select:focus {
  border-color: rgba(0,210,210,0.6);
  box-shadow: 0 0 0 3px rgba(0,210,210,0.12);
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder { color: rgba(45,74,110,0.4); }
[data-theme="light"] .form-select option { background: #fff8f6; color: #0d1b2e; }

/* ── AUTH & MODALS ───────────────────────────────────────────────────────── */
[data-theme="light"] .auth-box  { 
  background: #ffffff; 
  box-shadow: 0 8px 40px rgba(255,80,80,0.1), 0 2px 12px rgba(0,0,0,0.08); 
}
[data-theme="light"] .modal-box { 
  background: #fff8f6; 
  box-shadow: 0 12px 50px rgba(0,0,0,0.18); 
  border: 1px solid rgba(255,100,80,0.12);
}
[data-theme="light"] .modal-overlay { background: rgba(13,27,46,0.6); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #00c8d4, #00a8b8) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,200,212,0.3);
}
[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #00d4e0, #00bcd0) !important;
  box-shadow: 0 4px 18px rgba(0,200,212,0.4);
}
[data-theme="light"] .btn-ghost {
  border-color: rgba(0,180,200,0.3) !important;
  color: #0d7090 !important;
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(0,200,212,0.08) !important;
  border-color: rgba(0,200,212,0.5) !important;
}
[data-theme="light"] .btn-accent {
  background: linear-gradient(135deg, #ff6b8a, #ff4060) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── TABS ────────────────────────────────────────────────────────────────── */
[data-theme="light"] .tab-btn { color: #5a7a9a; }
[data-theme="light"] .tab-btn.active { 
  color: #0098a8 !important; 
  border-bottom-color: #00c8d4 !important; 
}
[data-theme="light"] .case-tab        { color: #5a7a9a; }
[data-theme="light"] .case-tab.active { 
  color: #0098a8 !important; 
  border-bottom-color: #00c8d4 !important; 
}

/* ── PHASE BADGES ────────────────────────────────────────────────────────── */
[data-theme="light"] .phase-badge { 
  border: 1px solid rgba(0,160,180,0.25); 
  background: rgba(0,200,212,0.08); 
  color: #006a80 !important;
}
[data-theme="light"] .phase-badge.phase-active   { 
  background: rgba(0,200,212,0.12); 
  color: #005a70 !important; 
  border-color: rgba(0,200,212,0.35) !important;
}
[data-theme="light"] .phase-badge.phase-draft    { color: #5a7a9a !important; }
[data-theme="light"] .phase-declined             { color: #c41a1a; }

/* ── TAGS ────────────────────────────────────────────────────────────────── */
[data-theme="light"] .tag { 
  background: rgba(0,200,212,0.1); 
  color: #006a80; 
  border: 1px solid rgba(0,200,212,0.25); 
}

/* ── STATUS BAR ──────────────────────────────────────────────────────────── */
[data-theme="light"] .status-bar { 
  background: rgba(255,248,246,0.97); 
  color: #5a7a9a; 
  border-top-color: rgba(255,100,80,0.12); 
}

/* ── SECTION TITLES ──────────────────────────────────────────────────────── */
[data-theme="light"] .section-title { color: #2d4a6e; }
[data-theme="light"] .field-label   { color: #2d4a6e; }
[data-theme="light"] .muted         { color: #5a7a9a !important; }
[data-theme="light"] .tru-positive  { color: #00a050 !important; }

/* ── PIPELINE BOARD ──────────────────────────────────────────────────────── */
[data-theme="light"] .pipeline-header  { border-color: rgba(0,160,180,0.2); }
[data-theme="light"] .col-draft        { background: rgba(0,160,200,0.04); color: #4a6a8a; }
[data-theme="light"] .col-review       { background: rgba(255,160,0,0.06); }
[data-theme="light"] .col-active       { background: rgba(0,200,212,0.06); }
[data-theme="light"] .col-concluded    { background: rgba(130,60,200,0.05); }
[data-theme="light"] .col-declined     { background: rgba(255,80,80,0.05); }

/* ── PROP CARDS ──────────────────────────────────────────────────────────── */
[data-theme="light"] .prop-card {
  background: #ffffff;
  border-color: rgba(0,160,200,0.15);
  box-shadow: 0 2px 10px rgba(0,80,120,0.07);
}
[data-theme="light"] .prop-card:hover { 
  border-color: rgba(0,200,212,0.4); 
  box-shadow: 0 4px 20px rgba(0,160,200,0.12); 
}
[data-theme="light"] .prop-card-title { color: #0d1b2e; }
[data-theme="light"] .prop-card-bg,
[data-theme="light"] .prop-card-rq    { color: #3a5a7a; }

/* ── CASE CARDS ──────────────────────────────────────────────────────────── */
[data-theme="light"] .case-card-v2 {
  background: #ffffff;
  border: 1px solid rgba(0,160,200,0.18);
  box-shadow: 0 2px 12px rgba(0,80,120,0.07);
}
[data-theme="light"] .case-card-v2:hover { border-color: rgba(0,200,212,0.4); }
[data-theme="light"] .case-card-title { color: #0d1b2e !important; }
[data-theme="light"] .case-card-desc  { color: #3a5a7a !important; }
[data-theme="light"] .case-card-meta  { color: #5a7a9a !important; }
[data-theme="light"] .case-card-btn-open {
  background: linear-gradient(135deg, #00c8d4, #00a8b8) !important;
  color: #fff !important;
  border: none !important;
}

/* ── SITE / SIDE PANEL ───────────────────────────────────────────────────── */
[data-theme="light"] .site-panel {
  background: linear-gradient(180deg, #fff0ee 0%, #ffeae8 100%);
  border-left: 1px solid rgba(255,100,80,0.15);
}
[data-theme="light"] .sp-identity {
  background: linear-gradient(180deg, rgba(255,100,80,0.06) 0%, transparent 100%);
  border-bottom-color: rgba(255,100,80,0.1);
}
[data-theme="light"] .sp-nick     { color: #0d1b2e !important; }
[data-theme="light"] .sp-rank     { color: #0098a8 !important; }
[data-theme="light"] .sp-tru      { color: #0d1b2e !important; }
[data-theme="light"] .sp-tab      { color: #8a9ab0 !important; }
[data-theme="light"] .sp-tab.active { color: #0098a8 !important; border-bottom-color: #00c8d4 !important; }
[data-theme="light"] .sp-btn      { color: rgba(45,74,110,0.6); border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .sp-btn:hover { 
  background: linear-gradient(90deg, rgba(0,200,212,0.08) 0%, transparent 100%); 
  color: #006a80; 
}
[data-theme="light"] .sp-notes    { 
  background: rgba(255,255,255,0.8); 
  color: #0d1b2e !important; 
  border-color: rgba(0,160,200,0.2); 
}
[data-theme="light"] .sp-action-btn { 
  background: #ffffff; 
  color: #2d4a6e; 
  border-color: rgba(0,160,200,0.2); 
}
[data-theme="light"] .sp-action-btn:hover { 
  background: rgba(0,200,212,0.08); 
  color: #006a80; 
}

/* ── WELCOME BAR ─────────────────────────────────────────────────────────── */
[data-theme="light"] .welcome-bar {
  background: linear-gradient(135deg, rgba(0,200,212,0.08), rgba(255,100,80,0.05));
  border-bottom: 1px solid rgba(0,160,200,0.12);
}
[data-theme="light"] .welcome-bar h2 { color: #0d1b2e !important; }

/* ── MISC ────────────────────────────────────────────────────────────────── */
[data-theme="light"] a               { color: #0098a8; }
[data-theme="light"] a:hover         { color: #00c8d4; }
[data-theme="light"] hr, 
[data-theme="light"] .divider        { border-color: rgba(0,160,200,0.15); }
[data-theme="light"] code,
[data-theme="light"] pre             { background: rgba(0,200,212,0.06); color: #005a70; }

/* ── SCROLLBAR ───────────────────────────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-track { background: #fff0ee; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,180,200,0.3); border-radius: 4px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,180,200,0.5); }

/* ── READABILITY FIXES ────────────────────────────────────────────────────── */
/* Higher layer card labels — ensure they're readable */
[data-theme="light"] .case-card-title { 
  color: #071520 !important; 
  font-weight: 700;
}
[data-theme="light"] .case-card-desc  { color: #1a3a55 !important; }
[data-theme="light"] .case-card-meta  { color: #4a6a80 !important; }
[data-theme="light"] .case-card-btn-open { 
  background: linear-gradient(135deg, #00c8b8, #00a8a0) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700;
}

/* Layer card labels readable */
[data-theme="light"] [style*="Theme Collection"],
[data-theme="light"] [style*="THEME COLLECTION"] { 
  color: rgba(0, 120, 140, 0.85) !important; 
}

/* ── PERSONAL PANEL — lighter, teal-tinted instead of heavy salmon ─────── */
[data-theme="light"] .site-panel {
  background: linear-gradient(180deg, #f0fffe 0%, #e8fdfb 100%) !important;
  border-left: 1px solid rgba(0, 200, 184, 0.20) !important;
}
[data-theme="light"] .sp-identity {
  background: linear-gradient(180deg, rgba(0, 200, 184, 0.08) 0%, transparent 100%) !important;
  border-bottom-color: rgba(0, 200, 184, 0.15) !important;
}
[data-theme="light"] .sp-btn:hover {
  background: linear-gradient(90deg, rgba(0,200,184,0.08) 0%, transparent 100%) !important;
  color: #007a8a !important;
}
[data-theme="light"] .sp-tab.active { 
  color: #007a8a !important; 
  border-bottom-color: #00c8b8 !important; 
}
[data-theme="light"] .sp-action-btn { 
  background: #ffffff !important;
  color: #1a3a55 !important;
  border-color: rgba(0, 180, 200, 0.22) !important;
}
[data-theme="light"] .sp-action-btn:hover { 
  background: rgba(0, 200, 184, 0.08) !important; 
  color: #007a8a !important; 
}

/* ── BUTTONS with Miami Vice green ──────────────────────────────────────── */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #00c8b8, #00a8a0) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,200,184,0.3) !important;
  font-weight: 700;
}
[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #00d8c8, #00b8b0) !important;
  box-shadow: 0 4px 20px rgba(0,200,184,0.4) !important;
}
[data-theme="light"] .btn-accent {
  background: linear-gradient(135deg, #ff6b8a, #e0305a) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Nav bar with subtle miami gradient */
[data-theme="light"] .top-nav,
[data-theme="light"] .navbar { 
  background: linear-gradient(90deg, rgba(247,255,254,0.98) 0%, rgba(240,255,253,0.98) 100%) !important;
  border-bottom: 1px solid rgba(0,200,184,0.15) !important;
}

/* Welcome bar */
[data-theme="light"] .welcome-bar {
  background: linear-gradient(135deg, rgba(0,200,184,0.08), rgba(255,107,138,0.04)) !important;
}

/* ── DARK THEME: Miami Vice Neon accents ─────────────────────────────────── */
/* The dark theme already has good contrast — just add miami warmth */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #00c8b8, #00a090) !important;
  box-shadow: 0 2px 16px rgba(0,200,184,0.3) !important;
}
[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #00f5d4, #00c8b8) !important;
  box-shadow: 0 4px 24px rgba(0,245,212,0.35) !important;
}
[data-theme="dark"] .btn-accent {
  background: linear-gradient(135deg, #ff6b8a, #ff4060) !important;
}
[data-theme="dark"] .nav-tru { color: #00f5d4 !important; }

/* ── EXCLUSIVE NAVBAR (light mode) ─────────────────────────────────────── */
[data-theme="light"] .top-nav,
[data-theme="light"] .navbar {
  background: linear-gradient(90deg, #081c30 0%, #0a2840 100%) !important;
  border-bottom: 1px solid rgba(0, 200, 180, 0.25) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important;
}
/* Nav text on dark background */
[data-theme="light"] .top-nav .nav-logo,
[data-theme="light"] .navbar .nav-brand  { color: #00f5d4 !important; }
[data-theme="light"] .navbar .nav-back,
[data-theme="light"] .navbar .nav-link,
[data-theme="light"] .nav-user-name,
[data-theme="light"] #navTru            { color: rgba(255,255,255,0.75) !important; }
[data-theme="light"] .nav-tru           { color: #00f5d4 !important; }
[data-theme="light"] .nav-avatar        { border-color: rgba(0,245,212,0.4) !important; }

/* ── NOTIFICATIONS / MESSAGES badge — orange-yellow ────────────────────── */
[data-theme="light"] .notif-badge,
[data-theme="light"] .msg-badge,
[data-theme="light"] .badge,
[data-theme="light"] [class*="badge"] {
  background: #ff9a00 !important;
  color: #fff !important;
  box-shadow: 0 1px 6px rgba(255,154,0,0.4) !important;
}
/* Message / alert warning colors */
[data-theme="light"] .alert-warn,
[data-theme="light"] .warn-text { color: #e07000 !important; }
[data-theme="light"] .warn-bg   { background: rgba(255,154,0,0.1) !important; }

/* Nav notification dots */
[data-theme="light"] .nav-dot,
[data-theme="light"] .unread-dot { 
  background: #ff9a00 !important; 
  box-shadow: 0 0 6px rgba(255,154,0,0.5) !important;
}

/* ── PERSONAL PANEL — neutral, less green ──────────────────────────────── */
[data-theme="light"] .site-panel {
  background: linear-gradient(180deg, #f5f7f8 0%, #f0f3f5 100%) !important;
  border-left: 1px solid rgba(0, 160, 150, 0.15) !important;
}
[data-theme="light"] .sp-identity {
  background: linear-gradient(180deg, rgba(0, 180, 160, 0.06) 0%, transparent 100%) !important;
  border-bottom-color: rgba(0, 160, 150, 0.12) !important;
}
[data-theme="light"] .sp-btn:hover {
  background: linear-gradient(90deg, rgba(0, 170, 155, 0.07) 0%, transparent 100%) !important;
  color: #005a50 !important;
}
[data-theme="light"] .sp-tab.active {
  color: #006a60 !important;
  border-bottom-color: #00c8b0 !important;
}

/* ── ACTION BUTTONS in panel — use the teal green ──────────────────────── */
[data-theme="light"] .sp-action-btn {
  background: #ffffff !important;
  color: #1a3a55 !important;
  border: 1px solid rgba(0, 160, 150, 0.22) !important;
}
[data-theme="light"] .sp-action-btn:hover {
  background: rgba(0, 180, 160, 0.08) !important;
  border-color: rgba(0, 200, 180, 0.35) !important;
  color: #005a50 !important;
}

/* Reliability bar — teal green */
[data-theme="light"] .rel-bar-fill,
[data-theme="light"] [id*="relFill"],
[data-theme="light"] [id*="cspRelFill"] {
  background: linear-gradient(90deg, #00c8b0, #00a898) !important;
}

/* TRU value — accent teal */
[data-theme="light"] [id*="cspTru"],
[data-theme="light"] .tru-val { color: #007a8a !important; font-weight: 800; }

/* ── MIAMI VICE CARD THUMBNAILS ─────────────────────────────────────────── */
/* Ensure emoji/flags always render at full color */
.case-card-thumb,
.case-card-thumb * {
  font-variant-emoji: emoji;
  -webkit-font-smoothing: antialiased;
}

/* Dark mode: card has visible depth */
[data-theme="dark"] .case-card-v2 {
  background: #0e1120;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* Light mode: clean white card, teal borders */
[data-theme="light"] .case-card-v2 {
  background: #ffffff !important;
  border-color: rgba(0,180,200,0.15) !important;
  box-shadow: 0 2px 12px rgba(0,100,120,0.07) !important;
}
[data-theme="light"] .case-card-v2:hover {
  border-color: rgba(0,137,123,0.45) !important;
  box-shadow: 0 6px 24px rgba(0,100,120,0.14) !important;
  transform: translateY(-3px);
}

/* Category label in thumb — readable on both themes */
[data-theme="light"] .case-card-thumb .cat-label {
  color: rgba(0,20,40,0.45) !important;
}

/* Open investigation button — bright teal */
.case-card-btn-open {
  background: rgba(0,245,212,0.1) !important;
  border: 1px solid rgba(0,245,212,0.3) !important;
  color: #00f5d4 !important;
}
.case-card-btn-open:hover {
  background: rgba(0,245,212,0.2) !important;
  border-color: rgba(0,245,212,0.5) !important;
}
[data-theme="light"] .case-card-btn-open {
  background: rgba(0,137,123,0.08) !important;
  border-color: rgba(0,137,123,0.3) !important;
  color: #00897b !important;
}

/* Evidence count chip */
.ev-count-chip {
  background: rgba(0,245,212,0.1);
  border: 1px solid rgba(0,245,212,0.2);
  color: var(--primary);
  padding: 1px 7px; border-radius: 8px;
  font-size: 10px; font-weight: 700;
}
[data-theme="light"] .ev-count-chip {
  background: rgba(0,137,123,0.08);
  border-color: rgba(0,137,123,0.2);
  color: #00897b;
}

/* ── COLLECTION CARD (LAYER 1) ──────────────────────────────────────────── */
[data-theme="light"] .l1-card-thumb {
  background: #f5f2ff !important;
}
[data-theme="light"] .l1-expand-panel {
  background: #f0fffe !important;
  border-color: rgba(0,180,200,0.2) !important;
}