/* ═════════════════════════════════════════════════════════════
   THEME SYSTEM - Dark and Light Modes
   ═════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────
   DARK THEME (Default)
   ───────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg: #0a0e17;
  --side: #111827;
  --panel: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.1);
  --text: #e5e7eb;
  --text-dim: #b2bccb;
  --blue: #0066ff;
  --cyan: #00f2ff;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  
  /* Additional dark theme refinements */
  --card-bg: rgba(17, 24, 39, 0.5);
  --input-bg: rgba(30, 41, 59, 0.6);
  --input-border: rgba(148, 163, 184, 0.2);
  --input-bg-focus: rgba(10, 18, 34, 0.9);
  --hover-bg: rgba(0, 102, 255, 0.16);
  --active-bg: rgba(0, 102, 255, 0.24);
  --heading: #f4f8ff;
  --subheading: #b8d4ff;
  --label: #9ab8d8;
  --soft-bg: rgba(0, 0, 0, 0.22);
  --table-head-bg: rgba(0, 102, 255, 0.1);
  --table-head-text: #b0ccff;
  --row-line: rgba(255, 255, 255, 0.06);
  --btn-soft-text: #cce0ff;
  --main-grad-a: #1e293b;
  --main-grad-b: #0a0e17;
  --menu-active-text: #e8f2ff;
  --role-badge-text: #c4d9ff;
  --role-badge-bg: rgba(53, 94, 154, 0.22);
  --user-btn-text: #dcecff;
  --user-btn-bg: rgba(0, 102, 255, 0.13);
  --user-menu-bg: #111c31;
  --user-menu-text: #cfe3ff;
  --user-menu-hover-text: #f0f7ff;
  --toast-border: rgba(123, 173, 240, 0.38);
  --toast-bg: rgba(12, 24, 46, 0.94);
  --toast-text: #dff0ff;

  /* Sidebar-specific (dark sidebar keeps existing palette) */
  --sidebar-text: #9ca3af;
  --sidebar-active-text: #e8f2ff;
  --sidebar-hover-bg: rgba(0, 102, 255, 0.16);
  --sidebar-logo-color: #0066ff;
  --sidebar-section-text: #9ca3af;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-shadow: none;
  --sidebar-badge-text: #c4d9ff;
  --sidebar-badge-bg: rgba(53, 94, 154, 0.22);
  --sidebar-badge-border: rgba(128, 173, 235, 0.3);
}

/* ─────────────────────────────────
   LIGHT THEME
   ───────────────────────────────── */
[data-theme="light"] {
  /* ── Layout ── */
  --bg: #f4f7f2;
  --side: #0f5132;
  --panel: #ffffff;
  --line: #d7e2d8;
  --text: #1f2a22;
  --text-dim: #5b6a5f;
  --blue: #1f7a45;
  --cyan: #2f9c73;
  --success: #218455;
  --danger: #dc2626;
  --warning: #b7791f;

  /* ── Cards / Inputs ── */
  --card-bg: #ffffff;
  --input-bg: #fcfefb;
  --input-border: #c1d2c2;
  --input-bg-focus: #ffffff;

  /* ── Interactive states (content area) ── */
  --hover-bg: rgba(31, 122, 69, 0.08);
  --active-bg: rgba(31, 122, 69, 0.14);

  /* ── Typography / accents ── */
  --heading: #132419;
  --subheading: #1a5f39;
  --label: #1e6a40;
  --soft-bg: rgba(15, 81, 50, 0.05);

  /* ── Table ── */
  --table-head-bg: #edf3ec;
  --table-head-text: #1a5f39;
  --row-line: #e9f0e8;
  --btn-soft-text: #1e6a40;

  /* ── Main area background ── */
  --main-grad-a: #ebf2e9;
  --main-grad-b: #f7faf5;

  /* ── User menu / topbar ── */
  --menu-active-text: #132419;
  --role-badge-text: #1b613a;
  --role-badge-bg: rgba(31, 122, 69, 0.1);
  --user-btn-text: #1b613a;
  --user-btn-bg: rgba(31, 122, 69, 0.1);
  --user-menu-bg: #ffffff;
  --user-menu-text: #2d3a31;
  --user-menu-hover-text: #132419;

  /* ── Toast ── */
  --toast-border: rgba(31, 122, 69, 0.22);
  --toast-bg: rgba(255, 255, 255, 0.97);
  --toast-text: #132419;

  /* ── Sidebar-specific (CAU-inspired green sidebar) ── */
  --sidebar-text: rgba(244, 251, 246, 0.76);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.16);
  --sidebar-logo-color: #f5fbe7;
  --sidebar-section-text: rgba(232, 246, 236, 0.56);
  --sidebar-border: rgba(11, 54, 33, 0.25);
  --sidebar-shadow: 2px 0 18px rgba(9, 37, 23, 0.22);
  --sidebar-badge-text: rgba(246, 253, 247, 0.95);
  --sidebar-badge-bg: rgba(255, 255, 255, 0.15);
  --sidebar-badge-border: rgba(255, 255, 255, 0.3);
}

/* ─────────────────────────────────
   THEME-AWARE COMPONENTS
   ───────────────────────────────── */

/* Cards and panels */
.card,
.panel,
.task-card,
.dk-card,
.dk-panel {
  background: var(--card-bg) !important;
  border-color: var(--line) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .task-card,
[data-theme="light"] .dk-card,
[data-theme="light"] .dk-panel {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .task-card,
[data-theme="dark"] .dk-card,
[data-theme="dark"] .dk-panel {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Form inputs */
input,
textarea,
select,
.form-control {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 0.7;
}

/* Tables */
table,
.table {
  color: var(--text);
}

[data-theme="light"] table tbody tr:hover,
[data-theme="light"] .table tbody tr:hover {
  background-color: #eef6ef !important;
}

[data-theme="dark"] table tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover {
  background-color: rgba(0, 102, 255, 0.1) !important;
}

/* Status badges and colors */
.status-badge,
.badge {
  color: inherit;
}

[data-theme="light"] .status-badge.success,
[data-theme="light"] .badge.success {
  background: #def3e5 !important;
  color: #17603a !important;
}

[data-theme="dark"] .status-badge.success,
[data-theme="dark"] .badge.success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #86efac !important;
}

/* Buttons */
.btn {
  border-color: var(--line);
  color: var(--text);
}

.btn-primary {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: white !important;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* Links */
a {
  color: var(--blue);
}

[data-theme="light"] a:hover {
  color: #145e36;
  opacity: 0.8;
}

[data-theme="dark"] a:hover {
  color: #4d94ff;
}

/* Borders and separators */
hr,
.divider {
  border-color: var(--line) !important;
}

/* Form feedback */
.feedback-text,
.invalid-feedback {
  color: var(--danger);
}

.valid-feedback {
  color: var(--success);
}

/* ─────────────────────────────────
   THEME TOGGLE TRANSITION
   ───────────────────────────────── */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ─────────────────────────────────
   DARK PAGE SHARED CSS - Theme Support
   ───────────────────────────────── */

/* These classes are used by feature pages */
.dk-table,
.dk-grid,
.dk-form,
.dk-filter,
.dk-stats {
  background: var(--panel);
  border-color: var(--line);
}

.table-scroll-shell {
  position: relative;
}

.table-scrollbar-top {
  z-index: 7;
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(6px);
}

.table-scroll-shell.has-horizontal-overflow .table-scrollbar-top {
  display: block;
}

.table-scrollbar-top::-webkit-scrollbar {
  height: 10px;
}

.table-scrollbar-top::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 35%, var(--line));
  border-radius: 999px;
}

.table-scrollbar-top::-webkit-scrollbar-track {
  background: transparent;
}

.table-scrollbar-inner {
  height: 1px;
}

.table-scroll-shell .table-responsive {
  overflow-x: auto;
}

.table-scroll-shell .dk-table thead {
  position: relative;
}

.table-scroll-shell.thead-stuck .dk-table thead {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

[data-theme="dark"] .table-scroll-shell.thead-stuck .dk-table thead {
  background: rgba(10, 16, 30, 0.98) !important;
}

[data-theme="light"] .dk-table,
[data-theme="light"] .dk-grid,
[data-theme="light"] .dk-form,
[data-theme="light"] .dk-filter,
[data-theme="light"] .dk-stats {
  background: #ffffff;
}

/* Table headers in light mode */
[data-theme="light"] .dk-table thead {
  background: #edf3ec !important;
  color: #1a5f39 !important;
}

[data-theme="dark"] .dk-table thead {
  background: rgba(0, 0, 0, 0.4);
  color: #f0f7ff;
}

/* Statistics cards */
.dk-stat {
  background: var(--card-bg);
  color: var(--text);
  border-color: var(--line);
}

/* Status result colors */
.result-approved {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--success) !important;
}

.result-rejected {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--danger) !important;
}

.result-pending {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--warning) !important;
}

/* ─────────────────────────────────
   LIGHT THEME VISUAL REFINEMENTS
   ───────────────────────────────── */
[data-theme="light"] body {
  background:
    radial-gradient(1000px 500px at 100% -10%, rgba(50, 130, 85, 0.12), rgba(50, 130, 85, 0)),
    radial-gradient(700px 380px at 0% 0%, rgba(188, 146, 74, 0.1), rgba(188, 146, 74, 0)),
    var(--bg);
}

[data-theme="light"] .main {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.2) 100%),
    radial-gradient(circle at top right, var(--main-grad-a), var(--main-grad-b));
}

[data-theme="light"] .sidebar {
  background:
    linear-gradient(180deg, #0f5132 0%, #1d6b42 100%);
}

[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: saturate(140%) blur(8px);
}

[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .task-card,
[data-theme="light"] .dk-card,
[data-theme="light"] .dk-panel,
[data-theme="light"] .dk-filter,
[data-theme="light"] .dk-stat {
  border-color: #d5e1d5 !important;
  box-shadow: 0 8px 22px rgba(21, 63, 35, 0.06) !important;
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .dk-btn-primary {
  background: linear-gradient(180deg, #22814a 0%, #1b6c3d 100%) !important;
  border-color: #1a693b !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .dk-btn-primary:hover {
  background: linear-gradient(180deg, #1f7845 0%, #175f35 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .dk-btn {
  border-color: rgba(31, 122, 69, 0.32);
  background: rgba(31, 122, 69, 0.12);
  color: #1e6a40;
}

[data-theme="light"] .dk-btn:hover {
  background: rgba(31, 122, 69, 0.22);
  color: #134c2d;
}

[data-theme="light"] .dk-filter .form-control:focus,
[data-theme="light"] .dk-filter .form-select:focus,
[data-theme="light"] .dk-form .form-control:focus,
[data-theme="light"] .dk-form .form-select:focus,
[data-theme="light"] .dk-form input:focus,
[data-theme="light"] .dk-form textarea:focus,
[data-theme="light"] .dk-form select:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: rgba(31, 122, 69, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(31, 122, 69, 0.14) !important;
}

[data-theme="light"] .base-user-menu {
  box-shadow: 0 10px 24px rgba(22, 54, 32, 0.14);
}

[data-theme="light"] .base-message {
  background: #ffffff;
  border-color: #d7e2d8;
}

/* ─────────────────────────────────
   PRINT MEDIA (Always light)
   ───────────────────────────────── */
@media print {
  :root {
    --bg: #ffffff;
    --text: #000000;
    --text-dim: #333333;
    --line: #cccccc;
    --panel: #f5f5f5;
  }
}