/* ============================================================
   LMS Platform — Corporate theme for the admin panel

   Loaded AFTER panel.css and overrides it: navy sidebar, flat white
   (or deep-navy) surfaces, hairline borders, small radii, one blue
   accent, no gradients, glass, glow or lift-on-hover animation.

   To go back to the old look, remove the <link> to this file in
   templates/dashboard/base.html and login.html.
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:            #0a1322;
  --surface:       #101b2e;
  --surface-hover: #15233a;
  --surface-solid: #101b2e;
  --sidebar:       #060e1b;
  --sidebar-border:#142036;
  --sidebar-tx:    #a3b1c8;
  --sidebar-2:     rgba(255, 255, 255, 0.06);
  --primary:       #3b78f0;
  --primary-hover: #2f66d6;
  --primary-glow:  rgba(59, 120, 240, 0.28);
  --primary-gradient: #3b78f0;
  --accent:        #3b78f0;
  --text:          #e7edf7;
  --text-secondary:#9fb0c9;
  --muted:         #6c7f9c;
  --border:        #22314b;
  --border-focus:  #5b92f5;
  --radius:        8px;
  --radius-sm:     6px;
  --shadow:        0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 20px 50px rgba(0, 0, 0, 0.5);
  /* Colour changes are quick; the drawer/sidebar still slide (transform, width, margin). */
  --transition:    background-color .15s ease, border-color .15s ease, color .15s ease,
                   box-shadow .15s ease, opacity .15s ease, transform .25s ease,
                   width .25s ease, margin .25s ease, padding .25s ease;
  --glass-bg:      #101b2e;
  --glass-border:  #22314b;

  --corp-th-bg:    #0d1829;
  --corp-row-hover:rgba(255, 255, 255, 0.03);
  --corp-icon-bg:  rgba(59, 120, 240, 0.14);
  --corp-link:     #7fb0ff;
  --corp-topbar:   #0d1a2f;
}

[data-theme="light"] {
  --bg:            #f3f5f9;
  --surface:       #ffffff;
  --surface-hover: #f7f9fc;
  --surface-solid: #ffffff;
  --sidebar:       #0c1f3d;
  --sidebar-border:#173056;
  --sidebar-tx:    #b3c0d6;
  --sidebar-2:     rgba(255, 255, 255, 0.07);
  --primary:       #1d4ed8;
  --primary-hover: #1e40af;
  --primary-glow:  rgba(29, 78, 216, 0.18);
  --primary-gradient: #1d4ed8;
  --accent:        #1d4ed8;
  --text:          #0f1b2d;
  --text-secondary:#4a5a70;
  --muted:         #8392a8;
  --border:        #d9e0ea;
  --border-focus:  #1d4ed8;
  --shadow:        0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-lg:     0 20px 50px rgba(16, 24, 40, 0.18);
  --glass-bg:      #ffffff;
  --glass-border:  #d9e0ea;

  --corp-th-bg:    #f6f8fb;
  --corp-row-hover:#f7f9fc;
  --corp-icon-bg:  #e8eefc;
  --corp-link:     #1d4ed8;
  --corp-topbar:   #ffffff;
}

/* ── Page ───────────────────────────────────────────────────── */
html, body,
[data-theme="light"] body {
  background-image: none;
  background-color: var(--bg);
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Sidebar: navy in both themes ───────────────────────────── */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  padding: 20px 14px;
}
.brand { padding: 2px 8px 24px; }
.brand-mark,
.brand-mark.lg {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #2f6fed;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand-mark::after { display: none; }
.brand-text,
[data-theme="light"] .brand-text { color: #c9d4e6; font-size: 13px; font-weight: 500; }
.brand-text strong,
[data-theme="light"] .brand-text strong { color: #ffffff; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }

.nav { gap: 2px; }
.nav-section {
  margin: 22px 12px 6px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: #6f829f;
  font-weight: 600;
}
.nav-link {
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--sidebar-tx);
  font-weight: 500;
  font-size: 13.5px;
  gap: 11px;
}
.nav-link .ic { width: 18px; height: 18px; opacity: 0.75; }
.nav-link:hover,
[data-theme="light"] .nav-link:hover { background: var(--sidebar-2); color: #ffffff; }
.nav-link:hover .ic { transform: none; opacity: 1; }
.nav-link.active,
[data-theme="light"] .nav-link.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 600;
}
.nav-link.active .ic { color: #8db6ff; opacity: 1; }
.nav-link.active::before {
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #6ea2ff;
  box-shadow: none;
}
.sidebar-footer { border-top: 1px solid var(--sidebar-border); }
.nav-link.logout:hover { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }
.nav-link.logout:hover .ic { color: #fca5a5; transform: none; }
.sidebar-overlay { backdrop-filter: none; background: rgba(6, 14, 27, 0.55); }

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar,
[data-theme="light"] .topbar {
  min-height: 64px;
  padding: 10px 28px;
  background: var(--corp-topbar);
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}
.topbar-title,
[data-theme="light"] .topbar-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.topbar-sub { font-size: 12.5px; }
.search,
[data-theme="light"] .search {
  border-radius: 6px;
  background: var(--bg);
  border-color: var(--border);
  padding: 7px 12px;
}
.search:focus-within,
[data-theme="light"] .search:focus-within {
  background: var(--surface-solid);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.search input,
[data-theme="light"] .search input { color: var(--text); font-size: 13.5px; }
.icon-btn,
[data-theme="light"] .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.icon-btn:hover,
[data-theme="light"] .icon-btn:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
  transform: none;
}
.user-chip,
[data-theme="light"] .user-chip {
  border-radius: 6px;
  background: transparent;
  border-color: var(--border);
  padding: 3px 8px 3px 10px;
}
.user-chip:hover,
[data-theme="light"] .user-chip:hover { background: var(--bg); border-color: var(--border); }
.user-name,
[data-theme="light"] .user-name { color: var(--text); font-weight: 600; }
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--primary);
  box-shadow: none;
  font-size: 13px;
}

.content { padding: 28px; }

/* ── Cards: flat, bordered, small radius ────────────────────── */
.panel-card,
.stat-card,
.ds-overview,
.ds-kpi-card,
.ds-today-card,
.ds-cust,
.quick-stat,
.pf-card,
.chart-row .panel-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}
.panel-card:hover,
.stat-card:hover,
.pf-card:hover,
.ds-kpi-card:hover,
.ds-today-card:hover,
[data-theme="light"] .panel-card:hover,
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .pf-card:hover,
[data-theme="light"] .ds-kpi-card:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.panel-card-header,
.pf-card-head { padding: 16px 22px; border-bottom: 1px solid var(--border); }
.panel-card-header h2,
.pf-card-head h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.pf-card-body { padding: 22px; }

/* KPI / stat cards: no rainbow borders or glow, one neutral icon style */
.ds-kpi-card.ds-tone-blue,
.ds-kpi-card.ds-tone-violet,
.ds-kpi-card.ds-tone-teal,
.ds-kpi-card.ds-tone-amber,
.ds-kpi-card.ds-tone-rose,
.ds-kpi-card.ds-tone-green { border-top: 1px solid var(--border); }
.ds-kpi-card::after,
.ds-today-card::after { display: none; }
.ds-overview::before { display: none; }
.ds-overview { padding: 18px 24px; }
.ds-overview-title { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.ds-kpi-grid { gap: 16px; }
.ds-kpi-card, .stat-card { padding: 20px 22px; gap: 16px; }
.ds-kpi-icon,
.stat-icon,
.ds-today-icon,
.quick-stat-icon,
.pf-card-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--corp-icon-bg) !important;
  color: var(--primary) !important;
}
.pf-card-head-icon { width: 32px; height: 32px; }
.stat-icon::after,
.pf-card-head-icon::after { display: none; }
.ds-tone-blue .ds-kpi-icon, .ds-tone-violet .ds-kpi-icon, .ds-tone-teal .ds-kpi-icon,
.ds-tone-amber .ds-kpi-icon, .ds-tone-rose .ds-kpi-icon, .ds-tone-green .ds-kpi-icon {
  background: var(--corp-icon-bg) !important;
  color: var(--primary) !important;
}
.ds-kpi-icon .ic, .stat-icon .ic { width: 22px; height: 22px; }
.ds-kpi-value,
.stat-value,
[data-theme="light"] .stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ds-kpi-label, .stat-label { font-size: 12.5px; font-weight: 500; }

/* ── Buttons: flat, rectangular ─────────────────────────────── */
.btn-primary,
.btn-save,
.dt-add,
.btn-primary-mock {
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
  letter-spacing: 0;
}
.btn-primary::after { display: none; }
.btn-primary:hover,
.btn-save:hover,
.dt-add:hover,
.btn-primary-mock:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: none;
  box-shadow: none;
}
.btn-primary:active, .btn-save:active { transform: none; }
.btn-primary { padding: 10px 16px; }
.btn-save,
.btn-cancel {
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
}
.btn-cancel {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-cancel:hover { background: var(--bg); border-color: var(--muted); }
.link-more { color: var(--corp-link); font-weight: 500; }
.link-more:hover { color: var(--primary-hover); }

/* ── Tables ─────────────────────────────────────────────────── */
.data-table th,
.data-table td { padding: 12px 20px; }
.data-table th,
[data-theme="light"] .data-table th {
  background: var(--corp-th-bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:hover,
[data-theme="light"] .data-table tbody tr:hover { background: var(--corp-row-hover); }
.data-table .num,
[data-theme="light"] .data-table .num { color: var(--text); font-weight: 600; }

/* Status / category badges: small, squared tags */
.badge {
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--corp-th-bg);
  color: var(--text-secondary);
}
[data-theme="light"] .badge { background: var(--corp-th-bg); }
.badge::after { border-radius: 4px; opacity: 0.1; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-input,
.input-wrap input,
.input-wrap select,
.input-wrap textarea,
.dt-select,
[data-theme="light"] .form-input,
[data-theme="light"] .input-wrap input,
[data-theme="light"] .input-wrap select,
[data-theme="light"] .input-wrap textarea {
  border-radius: 6px;
  padding: 10px 12px;
  background-color: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13.5px;
}
.form-input:focus,
.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus,
[data-theme="light"] .form-input:focus,
[data-theme="light"] .input-wrap input:focus,
[data-theme="light"] .input-wrap select:focus,
[data-theme="light"] .input-wrap textarea:focus {
  background-color: var(--surface-solid);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.field label,
[data-theme="light"] .field label { color: var(--text); font-weight: 600; font-size: 13px; }
.pf-label { font-size: 11.5px; letter-spacing: 0.05em; font-weight: 600; }
.pf-choice { border-radius: 6px; }
.pf-choice:has(input:checked) { box-shadow: 0 0 0 3px var(--primary-glow); }
.pf-toggle-track { background: var(--muted); border-color: transparent; opacity: 0.55; }
.pf-toggle input:checked ~ .pf-toggle-track { opacity: 1; }

/* ── Toolbars, pagination, sub-tabs ─────────────────────────── */
.dt-select { padding-right: 36px; }
.dt-page-btn { border-radius: 6px; }
.sub-tab { border-radius: 6px; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert,
.panel-alert { border-radius: 6px; }

/* ── Modals ─────────────────────────────────────────────────── */
.mo-overlay { background: rgba(6, 14, 27, 0.55); backdrop-filter: none; }
.mo-card { border-radius: 10px; box-shadow: var(--shadow-lg); animation: none; }
.mo-close { border-radius: 6px; }

/* ── Sign-in page ───────────────────────────────────────────── */
.auth-body {
  background-color: var(--bg);
  background-image: none;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}
.auth-shell {
  border-radius: 12px;
  background: var(--surface-solid);
  box-shadow: 0 10px 40px rgba(16, 24, 40, 0.12), 0 0 0 1px var(--border);
  transform: none;
}
.auth-form-side { background: var(--surface-solid); }
.auth-card h1,
.brand-text-logo,
.auth-aside h2 { font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -0.01em; }
.auth-card h1 { color: var(--text); font-size: 26px; }
.brand-text-logo { color: var(--text); }
.brand-logo-svg { color: var(--primary); }
.auth-subtitle { color: var(--text-secondary); }
.auth-aside { background: var(--sidebar); }
.auth-aside::before,
.auth-aside::after { display: none; }
.mock-dashboard { border-radius: 8px; }