/* ===========================
   DESIGN TOKENS
   =========================== */

:root {
  /* Surfaces */
  --bg: #f5f7fa;
  --bg-elevated: #ffffff;
  --bg-subtle: #f9fafb;

  /* Text */
  --text: #111827;
  --text-muted: #6b7280;

  /* Borders */
  --border: #e5e7eb;

  /* Brand */
  --primary: #4f46e5;
  --primary-soft: rgba(79,70,229,0.12);

  /* Effects */
  --shadow-card: 0 4px 14px rgba(0,0,0,0.06);

  /* Radius */
  --radius: 12px;

  --sidebar-width: 260px;

  /* =========================
       Z-INDEX SCALE (GLOBAL)
    ========================= */
    --z-base: 0;

    --z-shell: 10;          /* main shell container */
    --z-sidebar: 20;        /* sidebar */
    --z-topbar: 30;         /* top header */

    --z-shell-overlay: 40;  /* mobile overlay / backdrop */
    --z-fab: 60; 
    --z-modal: 100;         /* dialogs */
    --z-toast: 110;         /* toasts / alerts */
    --z-tooltip: 120;       /* tooltips */

  /* =========================
     EXTENDED SURFACES
     ========================= */

  --card: var(--bg-elevated);
  --bg-soft: var(--bg-subtle);

  /* =========================
     STATUS / SEMANTIC COLORS
     ========================= */

  --accent: var(--primary);

  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;
   --info: #60a5fa;

  /* =========================
     SHADOW SCALE
     ========================= */

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: var(--shadow-card);

  /* Inputs */
  --input-bg: var(--bg);
  --input-border: var(--border);

  /* Cards / subtle */
  --card-bg: var(--bg-elevated);
  --card-subtle: var(--bg-subtle);

  /* FAB */
  --fab-bg: linear-gradient(135deg, #38bdf8, #0ea5e9);
  --fab-text: #020617;
  --calendar-icon-filter: invert(0);
}

/* ===========================
   DARK THEME
   =========================== */

[data-theme="dark"] {
  --bg: #020617;
  --bg-elevated: #0f172a;
  --bg-subtle: #020617;

  --text: #e5e7eb;
  --text-muted: #94a3b8;

  --border: #1e293b;

  --primary: #6366f1;
  --primary-soft: rgba(99,102,241,0.18);

  --shadow-card: 0 6px 24px rgba(0,0,0,0.6);

  /* =========================
     EXTENDED SURFACES
     ========================= */

  --card: var(--bg-elevated);
  --bg-soft: #020617;

  /* =========================
     STATUS / SEMANTIC COLORS
     ========================= */

  --accent: var(--primary);

  --success: #22c55e;
  --danger: #ef4444;
  --warning: #fbbf24;

  /* =========================
     SHADOW SCALE
     ========================= */

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-md: var(--shadow-card);
   --input-bg: var(--bg);
  --card-subtle: rgba(255,255,255,0.04);
  --calendar-icon-filter: invert(0.8); /* Makes the black icon light gray/white */
}


/* ===========================
   BASE ELEMENTS
   =========================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ===========================
   TIME CARDS / UI EXTENSIONS
   (keeps existing tokens intact)
   =========================== */

:root {
  /* Extra surfaces used by Timecards */
  --surface-1: var(--bg-elevated);     /* cards */
  --surface-2: var(--bg-subtle);       /* subtle panels */
  --surface-3: var(--bg);              /* page surface */

  /* Elevated dark-ish panel (works for both themes) */
  --panel-bg: var(--bg-elevated);
  --panel-border: var(--border);

  /* Neutral chip/pill */
  --chip-bg: var(--bg-subtle);
  --chip-border: var(--border);

  /* Hover surface */
  --hover: rgba(0, 0, 0, 0.04);

  /* Divider (softer than border sometimes) */
  --divider: var(--border);

  /* Link-ish accent */
  --accent-soft: var(--primary-soft);

  /* Focus ring */
  --focus-ring: 0 0 0 2px rgba(79, 70, 229, 0.25);

  /* Timecards-specific */
  --timecard-entry-accent: var(--info);

  /* Inputs */
  --input-text: var(--text);

  /* Stats card gradient (light theme friendly) */
  --stats-grad-1: rgba(79, 70, 229, 0.08);
  --stats-grad-2: rgba(79, 70, 229, 0.03);
}

[data-theme="dark"] {
  --hover: rgba(255, 255, 255, 0.05);

  /* Focus ring in dark */
  --focus-ring: 0 0 0 2px rgba(99, 102, 241, 0.30);

  /* Stats card gradient (dark theme) */
  --stats-grad-1: rgba(255, 255, 255, 0.05);
  --stats-grad-2: rgba(255, 255, 255, 0.02);
}

.hidden {
  display: none !important;
}


/* ===========================
   DATE INPUT – CALENDAR ICON
   =========================== */

input[type="date"],
input[type="time"] {
  background-color: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus state using your focus-ring token */
input[type="date"]:focus,
input[type="time"]:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* Fix for the calendar/clock icons in some browsers */
input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  /* Filters the icon color to match your text token in dark mode */
  filter: var(--calendar-icon-filter); 
}