/* ══════════════════════════════════════════════════════════════════════════════
   SHARED THEME — Dark (default) + Light
   Include in every page: <link rel="stylesheet" href="/theme.css">
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ── */
:root {
  --bg:      #0b0c10;
  --card:    #12131a;
  --card2:   #181a22;
  --border:  #1e2030;
  --border2: #2d3350;
  --accent:  #4a7cff;
  --accent-hover: #3d6de0;
  --text:    #cdd0d8;
  --text-h:  #e0e2e8;
  --dim:     #6b7084;
  --dim2:    #4e5166;
  --success: #22c55e;
  --success-bg: #14532d;
  --danger:  #ef4444;
  --danger-bg: #3b0000;
  --warn:    #fbbf24;
  --warn-bg: #422006;
  --blue:    #60a5fa;
  --blue-bg: #1e3a5f;
  --pink:    #f472b6;
  --pink-bg: #500724;
  --green:   #4ade80;
  --green-bg:#14532d;
  --font:    'DM Sans','Segoe UI',system-ui,sans-serif;
  --mono:    'JetBrains Mono',monospace;

  --overlay: rgba(0,0,0,.6);
  --modal-bg: #181a22;
  --input-bg: #12131a;

  --badge-work-bg:  #1e3a5f;
  --badge-work-c:   #60a5fa;
  --badge-mat-bg:   #14532d;
  --badge-mat-c:    #4ade80;
  --badge-del-bg:   #422006;
  --badge-del-c:    #fbbf24;

  --section-divider: #2d3350;
  --section-bg:  #0e0f16;
  --section-lbl: #8890a8;

  --spinner-track: #333;
  --spinner-c:     #4a7cff;

  --shadow-card: 0 8px 32px rgba(74,124,255,.1);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:      #f0f2f5;
  --card:    #ffffff;
  --card2:   #f4f5f8;
  --border:  #dde0e6;
  --border2: #c5c9d4;
  --accent:  #2563eb;
  --accent-hover: #1d4ed8;
  --text:    #1a1d26;
  --text-h:  #0f1117;
  --dim:     #6b7084;
  --dim2:    #9ca0b0;
  --success: #16a34a;
  --success-bg: #dcfce7;
  --danger:  #dc2626;
  --danger-bg: #fef2f2;
  --warn:    #d97706;
  --warn-bg: #fefce8;
  --blue:    #2563eb;
  --blue-bg: #dbeafe;
  --pink:    #db2777;
  --pink-bg: #fce7f3;
  --green:   #15803d;
  --green-bg:#dcfce7;
  --font:    'DM Sans','Segoe UI',system-ui,sans-serif;
  --mono:    'JetBrains Mono',monospace;

  --overlay: rgba(0,0,0,.3);
  --modal-bg: #ffffff;
  --input-bg: #ffffff;

  --badge-work-bg:  #dbeafe;
  --badge-work-c:   #1d4ed8;
  --badge-mat-bg:   #dcfce7;
  --badge-mat-c:    #15803d;
  --badge-del-bg:   #fefce8;
  --badge-del-c:    #d97706;

  --section-divider: #c5c9d4;
  --section-bg:  #f4f5f8;
  --section-lbl: #4b5563;

  --spinner-track: #ddd;
  --spinner-c:     #2563eb;

  --shadow-card: 0 4px 16px rgba(0,0,0,.06);
}

/* ── Transition on theme switch ── */
body,
.card, .table-wrap, .tbl-wrap, .section-card, .modal,
input, select, textarea,
th, td {
  transition: background .25s, color .25s, border-color .25s;
}

/* ══════════════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON  (injected by theme.js)
   ══════════════════════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: all .2s;
}
.theme-toggle-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 4px 24px rgba(74,124,255,.2);
}
.theme-toggle-btn .t-icon { font-size: 16px; }