/* ═══════════════════════════════════════════════════════════════
   Daniela Pelliccia CRM — Shared Theme System
   Professional & Corporate | Light + Dark (Charcoal) Mode
   ═══════════════════════════════════════════════════════════════ */

/* ─── LIGHT MODE (Default) ─── */
:root {
  /* Brand */
  --brand-navy: #001a3a;
  --brand-navy-light: #002b5c;
  --brand-blue: #003DA5;
  --brand-blue-hover: #0050d4;
  --brand-gold: #C5A55A;
  --brand-gold-light: #d4bb7a;
  --brand-gold-dim: rgba(197,165,90,.12);

  /* Surfaces */
  --bg-body: #f4f5f7;
  --bg-surface: #ffffff;
  --bg-surface-hover: #fafbfc;
  --bg-surface-raised: #ffffff;
  --bg-inset: #f0f1f4;

  /* Text */
  --text-primary: #1a1d23;
  --text-secondary: #5a6070;
  --text-tertiary: #8b90a0;
  --text-inverse: #ffffff;
  --text-link: #003DA5;

  /* Borders */
  --border-default: #e2e4ea;
  --border-subtle: #eceef2;
  --border-strong: #ccd0d8;

  /* Semantic */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  --color-purple: #8b5cf6;

  /* Semantic Badges */
  --badge-success-bg: #d1fae5; --badge-success-fg: #065f46;
  --badge-warning-bg: #fef3c7; --badge-warning-fg: #92400e;
  --badge-error-bg: #fef2f2;   --badge-error-fg: #991b1b;
  --badge-info-bg: #dbeafe;    --badge-info-fg: #1e40af;
  --badge-purple-bg: #ede9fe;  --badge-purple-fg: #5b21b6;
  --badge-muted-bg: #e8eaef;   --badge-muted-fg: #6b7280;
  --badge-gold-bg: rgba(197,165,90,.15); --badge-gold-fg: #8b6914;
  --badge-pink-bg: #fce7f3;    --badge-pink-fg: #9d174d;

  /* Stat Icon Backgrounds */
  --stat-blue-bg: #dbeafe;     --stat-blue-fg: #003DA5;
  --stat-green-bg: #d1fae5;    --stat-green-fg: #10b981;
  --stat-purple-bg: #ede9fe;   --stat-purple-fg: #8b5cf6;
  --stat-indigo-bg: #e0e7ff;   --stat-indigo-fg: #4f46e5;
  --stat-pink-bg: #fce7f3;     --stat-pink-fg: #be185d;
  --stat-amber-bg: #fef3c7;    --stat-amber-fg: #d97706;
  --stat-teal-bg: #ccfbf1;     --stat-teal-fg: #0d9488;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.06), 0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.1);

  /* Layout */
  --sidebar-bg: #001a3a;
  --sidebar-text: rgba(255,255,255,.65);
  --sidebar-text-dim: rgba(255,255,255,.35);
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: rgba(255,255,255,.1);
  --sidebar-accent: #C5A55A;
  --header-bg: #ffffff;
  --header-border: #e2e4ea;

  /* Overlay */
  --overlay-bg: rgba(0,0,0,.45);

  /* Inputs */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-focus-ring: rgba(0,61,165,.12);
  --input-placeholder: #9ca3af;

  /* Radius */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 6px;

  /* Chart Colors */
  --chart-1: #003DA5;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #8b5cf6;
  --chart-5: #ef4444;
  --chart-6: #0ea5e9;
  --chart-7: #ec4899;
  --chart-8: #C5A55A;

  /* Scrollbar */
  --scrollbar-thumb: rgba(0,0,0,.15);
  --scrollbar-track: transparent;
}

/* ─── DARK MODE (Charcoal) ─── */
[data-theme="dark"] {
  /* Surfaces */
  --bg-body: #12131a;
  --bg-surface: #1a1c25;
  --bg-surface-hover: #22242e;
  --bg-surface-raised: #1e2029;
  --bg-inset: #14151c;

  /* Text */
  --text-primary: #e2e5ec;
  --text-secondary: #9199a8;
  --text-tertiary: #636b7c;
  --text-link: #6ba1f2;

  /* Borders */
  --border-default: #2a2d38;
  --border-subtle: #22242e;
  --border-strong: #3a3e4a;

  /* Semantic Colors (slightly muted for dark bg) */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;
  --color-purple: #a78bfa;

  /* Semantic Badges (darker, muted) */
  --badge-success-bg: rgba(16,185,129,.15); --badge-success-fg: #6ee7b7;
  --badge-warning-bg: rgba(245,158,11,.15); --badge-warning-fg: #fcd34d;
  --badge-error-bg: rgba(239,68,68,.15);    --badge-error-fg: #fca5a5;
  --badge-info-bg: rgba(59,130,246,.15);     --badge-info-fg: #93c5fd;
  --badge-purple-bg: rgba(139,92,246,.15);   --badge-purple-fg: #c4b5fd;
  --badge-muted-bg: rgba(107,114,128,.2);    --badge-muted-fg: #9ca3af;
  --badge-gold-bg: rgba(197,165,90,.15);     --badge-gold-fg: #d4bb7a;
  --badge-pink-bg: rgba(236,72,153,.15);     --badge-pink-fg: #f9a8d4;

  /* Stat Icon Backgrounds */
  --stat-blue-bg: rgba(0,61,165,.2);     --stat-blue-fg: #6ba1f2;
  --stat-green-bg: rgba(16,185,129,.2);  --stat-green-fg: #34d399;
  --stat-purple-bg: rgba(139,92,246,.2); --stat-purple-fg: #a78bfa;
  --stat-indigo-bg: rgba(79,70,229,.2);  --stat-indigo-fg: #818cf8;
  --stat-pink-bg: rgba(190,24,93,.2);    --stat-pink-fg: #f9a8d4;
  --stat-amber-bg: rgba(245,158,11,.2);  --stat-amber-fg: #fbbf24;
  --stat-teal-bg: rgba(20,184,166,.2);   --stat-teal-fg: #5eead4;

  /* Shadows (deeper for dark) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -1px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.3), 0 4px 6px -2px rgba(0,0,0,.2);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.4);

  /* Layout */
  --sidebar-bg: #0e0f15;
  --sidebar-hover: rgba(255,255,255,.05);
  --sidebar-active: rgba(255,255,255,.08);
  --header-bg: #1a1c25;
  --header-border: #2a2d38;

  /* Overlay */
  --overlay-bg: rgba(0,0,0,.65);

  /* Inputs */
  --input-bg: #1e2029;
  --input-border: #3a3e4a;
  --input-focus-ring: rgba(107,161,242,.2);
  --input-placeholder: #636b7c;

  /* Chart Colors (brighter for dark bg) */
  --chart-1: #6ba1f2;
  --chart-2: #34d399;
  --chart-3: #fbbf24;
  --chart-4: #a78bfa;
  --chart-5: #f87171;
  --chart-6: #38bdf8;
  --chart-7: #f472b6;
  --chart-8: #d4bb7a;

  /* Scrollbar */
  --scrollbar-thumb: rgba(255,255,255,.12);
}

/* ─── BASE RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── THEME TRANSITION ─── */
html[data-theme] body,
html[data-theme] .sidebar,
html[data-theme] .header,
html[data-theme] .modal,
html[data-theme] .stat-card,
html[data-theme] .chart-card,
html[data-theme] .kpi-card,
html[data-theme] .leads-table,
html[data-theme] .recent-list,
html[data-theme] .settings-card,
html[data-theme] .match-card,
html[data-theme] .social-card,
html[data-theme] .blog-post-card,
html[data-theme] .login-card,
html[data-theme] .fin-profile,
html[data-theme] .content-editor,
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
  transition: background-color .3s ease, color .2s ease, border-color .3s ease, box-shadow .3s ease;
}

/* ─── TYPOGRAPHY ─── */
html { font-size: 14px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
input, textarea, select { font-family: inherit; outline: none; }

h1, h2, h3, h4 { letter-spacing: -.02em; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.35); }

/* ─── LUCIDE ICON DEFAULTS ─── */
.nav-icon { width: 18px; height: 18px; stroke-width: 1.75; flex-shrink: 0; }
.icon-inline { width: 16px; height: 16px; stroke-width: 2; vertical-align: -3px; margin-right: 4px; }
.icon-sm { width: 14px; height: 14px; stroke-width: 2; }
.icon-lg { width: 22px; height: 22px; stroke-width: 1.5; }

/* ─── BADGE UTILITY CLASSES ─── */
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.badge-error   { background: var(--badge-error-bg);   color: var(--badge-error-fg); }
.badge-danger  { background: var(--badge-error-bg);   color: var(--badge-error-fg); }
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge-purple  { background: var(--badge-purple-bg);  color: var(--badge-purple-fg); }
.badge-muted   { background: var(--badge-muted-bg);   color: var(--badge-muted-fg); }
.badge-gold    { background: var(--badge-gold-bg);    color: var(--badge-gold-fg); }
.badge-pink    { background: var(--badge-pink-bg);    color: var(--badge-pink-fg); }
.badge-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .55rem; border-radius: 50px;
  font-size: .68rem; font-weight: 600; text-transform: capitalize;
}

/* ─── TEXT COLOR UTILITIES ─── */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-error); }
.text-info    { color: var(--color-info); }
.text-muted   { color: var(--text-tertiary); }
.text-gold    { color: var(--brand-gold); }

/* ─── PROGRESS BAR ─── */
.progress-bar {
  height: 8px; border-radius: 4px;
  background: var(--bg-inset); overflow: hidden;
}
.progress-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width .5s ease;
}

/* ─── THEME TOGGLE BUTTON ─── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg-inset); border: 1px solid var(--border-default);
  color: var(--text-secondary); cursor: pointer;
  transition: all .2s ease;
}
.theme-toggle:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.theme-toggle svg { width: 18px; height: 18px; }

/* ─── FORM INPUT DARK MODE ─── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--input-placeholder);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* ─── PRINT: Force Light ─── */
@media print {
  :root { color-scheme: light; }
  [data-theme="dark"] {
    --bg-body: #fff;
    --bg-surface: #fff;
    --text-primary: #000;
    --text-secondary: #333;
    --border-default: #ccc;
  }
}