/* =========================
   THEME TOKENS (Light/Dark)
   ========================= */
:root{
  --bg: #f8fafc;          /* slate-50 */
  --surface: #ffffff;     /* white */
  --surface-2: #f1f5f9;   /* slate-100 */
  --text: #0f172a;        /* slate-900 */
  --muted: #64748b;       /* slate-500 */
  --border: #e2e8f0;      /* slate-200 */
  --primary: #10b981;     /* emerald-500 */
  --primary-ink: #052e2b; /* deep */
  --ring: rgba(16,185,129,.35);
}

html.dark{
  --bg: #020617;          /* slate-950 */
  --surface: #0b1220;     /* custom deep surface */
  --surface-2: #0f172a;   /* slate-900 */
  --text: #e2e8f0;        /* slate-200 */
  --muted: #94a3b8;       /* slate-400 */
  --border: #1f2937;      /* gray-800-ish */
  --primary: #34d399;     /* emerald-400 */
  --primary-ink: #052e2b;
  --ring: rgba(52,211,153,.30);
}

/* =========================
   SEMANTIC CLASSES
   ========================= */
.app-bg{ background: var(--bg); color: var(--text); }
.app-surface{ background: var(--surface); color: var(--text); }
.app-surface-2{ background: var(--surface-2); color: var(--text); }
.app-muted{ color: var(--muted); }
.app-border{ border-color: var(--border); }
.app-card{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.app-topbar{
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.app-sidebar{
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.app-navitem{
  color: var(--text);
  border-radius: 14px;
}
.app-navitem:hover{
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}
.app-navitem.active{
  background: color-mix(in oklab, var(--text) 10%, transparent);
  outline: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}

.app-btn{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
}
.app-btn:hover{
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}

.app-btn-primary{
  border: 1px solid color-mix(in oklab, var(--primary) 60%, var(--border));
  background: color-mix(in oklab, var(--primary) 20%, var(--surface));
  color: var(--text);
}
.app-btn-primary:hover{
  background: color-mix(in oklab, var(--primary) 28%, var(--surface));
}

.app-input{
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
.app-input:focus{
  border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
  box-shadow: 0 0 0 4px var(--ring);
}

.app-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.app-table th{
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px;
}
.app-table td{
  border-top: 1px solid var(--border);
  padding: 10px;
}
.app-table tr:hover td{
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
}
/* Global dark-mode fixes for common elements */
.dark body { color: rgb(226 232 240); } /* slate-200 */

.dark .card,
.dark .panel,
.dark .box,
.dark .table-wrap {
  background: rgb(15 23 42); /* slate-900 */
  border-color: rgb(51 65 85); /* slate-700 */
  color: rgb(226 232 240);
}

/* Inputs */
.dark input,
.dark select,
.dark textarea {
  background: rgb(2 6 23) !important;     /* slate-950 */
  color: rgb(226 232 240) !important;     /* slate-200 */
  border-color: rgb(51 65 85) !important; /* slate-700 */
}
.dark input::placeholder,
.dark textarea::placeholder { color: rgb(148 163 184) !important; } /* slate-400 */

/* Tables */
.dark table { color: rgb(226 232 240); }
.dark thead th {
  background: rgb(15 23 42) !important;   /* slate-900 */
  color: rgb(203 213 225) !important;     /* slate-300 */
  border-color: rgb(51 65 85) !important; /* slate-700 */
}
.dark tbody td {
  border-color: rgb(51 65 85) !important;
}
.dark tbody tr:hover td {
  background: rgba(148,163,184,0.08) !important;
}
/* ==========================================================
   DARK MODE BRIDGE (no need to edit every page)
   Remaps common light Tailwind utility classes when .dark on html
   ========================================================== */

/* Base */
.dark body {
  background: rgb(2 6 23) !important;   /* slate-950 */
  color: rgb(226 232 240) !important;   /* slate-200 */
}

/* Common light backgrounds -> dark surfaces */
.dark .bg-white { background-color: rgb(15 23 42) !important; }      /* slate-900 */
.dark .bg-slate-50 { background-color: rgb(2 6 23) !important; }     /* slate-950 */
.dark .bg-slate-100 { background-color: rgb(15 23 42) !important; }  /* slate-900 */
.dark .bg-gray-50 { background-color: rgb(2 6 23) !important; }
.dark .bg-gray-100 { background-color: rgb(15 23 42) !important; }

/* Borders */
.dark .border-slate-100 { border-color: rgb(51 65 85) !important; }  /* slate-700 */
.dark .border-slate-200 { border-color: rgb(51 65 85) !important; }
.dark .border-slate-300 { border-color: rgb(71 85 105) !important; } /* slate-600 */
.dark .border-gray-200 { border-color: rgb(51 65 85) !important; }
.dark .border-gray-300 { border-color: rgb(71 85 105) !important; }

/* Text colors */
.dark .text-slate-900 { color: rgb(226 232 240) !important; }
.dark .text-slate-800 { color: rgb(226 232 240) !important; }
.dark .text-slate-700 { color: rgb(203 213 225) !important; } /* slate-300 */
.dark .text-slate-600 { color: rgb(148 163 184) !important; } /* slate-400 */
.dark .text-gray-900  { color: rgb(226 232 240) !important; }
.dark .text-gray-800  { color: rgb(226 232 240) !important; }
.dark .text-gray-700  { color: rgb(203 213 225) !important; }
.dark .text-gray-600  { color: rgb(148 163 184) !important; }

/* Hover backgrounds that get too bright */
.dark .hover\:bg-slate-50:hover { background-color: rgba(148,163,184,0.10) !important; }
.dark .hover\:bg-slate-100:hover { background-color: rgba(148,163,184,0.12) !important; }
.dark .hover\:bg-gray-50:hover { background-color: rgba(148,163,184,0.10) !important; }
.dark .hover\:bg-gray-100:hover { background-color: rgba(148,163,184,0.12) !important; }

/* Inputs (global) */
.dark input,
.dark select,
.dark textarea {
  background: rgb(2 6 23) !important;     /* slate-950 */
  color: rgb(226 232 240) !important;     /* slate-200 */
  border-color: rgb(71 85 105) !important;/* slate-600 */
}
.dark input::placeholder,
.dark textarea::placeholder { color: rgb(148 163 184) !important; }  /* slate-400 */

/* Tables */
.dark table { color: rgb(226 232 240) !important; }
.dark thead th {
  background: rgb(15 23 42) !important;
  color: rgb(203 213 225) !important;
  border-color: rgb(51 65 85) !important;
}
.dark tbody td { border-color: rgb(51 65 85) !important; }
.dark tbody tr:hover td { background: rgba(148,163,184,0.08) !important; }