/* ===========================
   THEME TOKENS
   =========================== */

/* LIGHT default */
:root {
  color-scheme: light;

  /* Bootstrap vars (important for .text-body, etc.) */
  --bs-body-color: rgba(10, 14, 24, 0.92);
  --bs-secondary-color: rgba(10, 14, 24, 0.58);
  --bs-tertiary-color: rgba(10, 14, 24, 0.45);
  --bs-body-bg: transparent;
  --bs-border-color: rgba(10, 14, 24, 0.10);
  --bs-link-color: rgba(34, 77, 255, 0.92);

  /* Page background (bright, clean) */
  --page-bg:
    radial-gradient(1200px 650px at 8% 0%, rgba(76, 110, 245, 0.14), transparent 58%),
    radial-gradient(1000px 600px at 92% 10%, rgba(99, 230, 190, 0.12), transparent 55%),
    linear-gradient(180deg, #f8fbff 0%, #f4fbff 45%, #f7fff9 100%);

  /* Topbar (light, separate from background) */
  --topbar-bg: rgba(255, 255, 255, 0.78);
  --topbar-border: rgba(10, 14, 24, 0.06);
  --topbar-shadow: 0 10px 24px rgba(16, 24, 40, 0.10);
  --topbar-text: rgba(10, 14, 24, 0.92);
  --topbar-muted: rgba(10, 14, 24, 0.55);

  /* Main shell */
  --panel-bg: rgba(255, 255, 255, 0.86);
  --panel-border: rgba(10, 14, 24, 0.06);
  --panel-shadow: 0 18px 50px rgba(16, 24, 40, 0.10);
  --panel-text: rgba(10, 14, 24, 0.92);
  --panel-muted: rgba(10, 14, 24, 0.58);

  /* Cards */
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: rgba(10, 14, 24, 0.06);
  --card-shadow: 0 14px 32px rgba(16, 24, 40, 0.08);

  /* Table */
  --table-bg: rgba(255, 255, 255, 0.98);
  --table-striped: rgba(10, 14, 24, 0.03);
  --table-hover: rgba(76, 110, 245, 0.06);
  --table-border: rgba(10, 14, 24, 0.06);
  --table-head: rgba(255, 255, 255, 0.98);

  /* Controls */
  --control-bg: rgba(255, 255, 255, 0.98);
  --control-border: rgba(10, 14, 24, 0.12);
}

/* DARK */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Bootstrap vars (critical fix) */
  --bs-body-color: rgba(255, 255, 255, 0.90);
  --bs-secondary-color: rgba(255, 255, 255, 0.62);
  --bs-tertiary-color: rgba(255, 255, 255, 0.48);
  --bs-body-bg: transparent;
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-link-color: rgba(170, 198, 255, 0.95);

  --page-bg:
    radial-gradient(1200px 650px at 10% 0%, rgba(76, 110, 245, 0.22), transparent 60%),
    radial-gradient(900px 550px at 90% 10%, rgba(99, 230, 190, 0.18), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 40%, #0e1730 100%);

  --topbar-bg: rgba(13, 19, 35, 0.62);
  --topbar-border: rgba(255, 255, 255, 0.08);
  --topbar-shadow: 0 12px 30px rgba(0, 0, 0, 0.40);
  --topbar-text: rgba(255, 255, 255, 0.92);
  --topbar-muted: rgba(255, 255, 255, 0.62);

  --panel-bg: rgba(12, 18, 34, 0.56);
  --panel-border: rgba(255, 255, 255, 0.10);
  --panel-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
  --panel-text: rgba(255, 255, 255, 0.90);
  --panel-muted: rgba(255, 255, 255, 0.62);

  --card-bg: rgba(18, 26, 48, 0.56);
  --card-border: rgba(255, 255, 255, 0.10);
  --card-shadow: 0 14px 35px rgba(0, 0, 0, 0.34);

  --table-bg: rgba(18, 26, 48, 0.46);
  --table-striped: rgba(255, 255, 255, 0.06);
  --table-hover: rgba(99, 230, 190, 0.10);
  --table-border: rgba(255, 255, 255, 0.10);
  --table-head: rgba(18, 26, 48, 0.62);

  --control-bg: rgba(18, 26, 48, 0.62);
  --control-border: rgba(255, 255, 255, 0.12);
}

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

* { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; }

.app-body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--bs-body-color);
}

/* ===========================
   STICKY TOPBAR
   =========================== */

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;

  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  color: var(--topbar-text);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.app-topbar.scrolled {
  box-shadow: var(--topbar-shadow);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  color: var(--topbar-text);
}

:root:not([data-theme="dark"]) .brand-mark {
  background: rgba(10, 14, 24, 0.06);
  color: rgba(10, 14, 24, 0.92);
}

.brand-title { font-weight: 700; letter-spacing: .2px; }
.brand-subtitle { font-size: 12px; color: var(--topbar-muted); }

.btn { border-radius: 12px; }

/* outline-light looks bad on light topbar */
:root:not([data-theme="dark"]) .app-topbar .btn-outline-light {
  border-color: rgba(10, 14, 24, 0.16) !important;
  color: rgba(10, 14, 24, 0.86) !important;
}
:root:not([data-theme="dark"]) .app-topbar .btn-outline-light:hover {
  background: rgba(10, 14, 24, 0.06) !important;
}

/* ===========================
   MAIN GLASS SHELL
   =========================== */

.app-shell {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 18px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: var(--panel-shadow);
  position: relative;
  overflow: hidden;

  color: var(--panel-text);
}

/* gentle highlights */
.app-shell::before {
  content: "";
  position: absolute;
  inset: -140px;
  pointer-events: none;
  background:
    radial-gradient(520px 260px at 18% 6%, rgba(255,255,255,.26), transparent 60%),
    radial-gradient(560px 280px at 90% 0%, rgba(255,255,255,.14), transparent 60%);
  opacity: 0.30;
}
:root[data-theme="dark"] .app-shell::before { opacity: 0.16; }

.app-shell > * { position: relative; z-index: 1; }

.glass-admin { color: var(--panel-text); }

.glass-admin .text-muted,
.glass-admin small.text-muted {
  color: var(--panel-muted) !important;
}

/* ===========================
   CARDS
   =========================== */

.glass-admin .card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--card-shadow);
}

/* ===========================
   TABLES
   =========================== */

.table > :not(caption) > * > * { padding-top: 12px; padding-bottom: 12px; }
.table thead th { white-space: nowrap; }

.glass-admin .table {
  --bs-table-bg: var(--table-bg);
  --bs-table-striped-bg: var(--table-striped);
  --bs-table-hover-bg: var(--table-hover);
  --bs-table-border-color: var(--table-border);

  border-radius: 14px;
  overflow: hidden;

  color: var(--panel-text) !important;
}

.glass-admin .table thead { background: var(--table-head); }

/* dark: prevent black text from bootstrap utilities */
:root[data-theme="dark"] .glass-admin .text-body,
:root[data-theme="dark"] .glass-admin .text-dark,
:root[data-theme="dark"] .glass-admin .text-body-emphasis,
:root[data-theme="dark"] .glass-admin code,
:root[data-theme="dark"] .glass-admin .text-body code {
  color: var(--panel-text) !important;
}

:root[data-theme="dark"] .glass-admin a:not(.btn) {
  color: var(--bs-link-color);
}

/* ===========================
   SIMPLE-DATATABLES
   =========================== */

.datatable-wrapper,
.datatable-wrapper * {
  color: var(--panel-text) !important;
}

.datatable-wrapper .datatable-top { padding: 0 0 12px 0; }
.datatable-wrapper .datatable-bottom { padding: 12px 0 0 0; }

.datatable-wrapper .datatable-search input {
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--panel-text) !important;
}

.datatable-wrapper .datatable-selector {
  border-radius: 10px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--panel-text) !important;
}

.datatable-pagination a {
  border-radius: 10px;
  color: var(--panel-text) !important;
}

:root[data-theme="dark"] .datatable-pagination a:hover {
  background: rgba(255,255,255,.08);
}

/* ===========================
   AUTH GLASS (login)
   =========================== */

.glass-card {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  border-radius: 18px;

  color: rgba(255,255,255,.92);
}

.glass-card .text-muted { color: rgba(255, 255, 255, 0.68) !important; }
.glass-card .form-label { color: rgba(255, 255, 255, 0.85); }

.glass-card .form-control {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
}
.glass-card .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }

.glass-card .form-control:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(99, 230, 190, 0.55);
  box-shadow: 0 0 0 .25rem rgba(99, 230, 190, 0.20);
}

.glass-card .alert {
  background: rgba(220, 53, 69, 0.18);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: rgba(255, 255, 255, 0.92);
}

.glass-card code { color: rgba(255, 255, 255, 0.85); }

/* ===========================
   LIGHT THEME FIXES: buttons + badges
   =========================== */

:root:not([data-theme="dark"]) .glass-admin .btn i {
  color: inherit;
}

/* Make outline buttons go white on hover (text + icons) */
:root:not([data-theme="dark"]) .glass-admin .btn-outline-primary:hover,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-primary:focus,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-primary:active,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-secondary:hover,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-secondary:focus,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-secondary:active,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-dark:hover,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-dark:focus,
:root:not([data-theme="dark"]) .glass-admin .btn-outline-dark:active {
  color: #fff !important;
}

/* Enforce hover backgrounds for better contrast */
:root:not([data-theme="dark"]) .glass-admin .btn-outline-primary:hover {
  background: rgba(76, 110, 245, 0.95) !important;
  border-color: rgba(76, 110, 245, 0.95) !important;
}

:root:not([data-theme="dark"]) .glass-admin .btn-outline-secondary:hover {
  background: rgba(10, 14, 24, 0.65) !important;
  border-color: rgba(10, 14, 24, 0.25) !important;
}

:root:not([data-theme="dark"]) .glass-admin .btn-outline-dark:hover {
  background: rgba(10, 14, 24, 0.88) !important;
  border-color: rgba(10, 14, 24, 0.88) !important;
}

/* Softer but readable badges (white text) */
:root:not([data-theme="dark"]) .glass-admin .badge.text-bg-primary {
  background: rgba(76, 110, 245, 0.82) !important;
  color: #fff !important;
}

:root:not([data-theme="dark"]) .glass-admin .badge.text-bg-success {
  background: rgba(34, 197, 94, 0.80) !important;
  color: #fff !important;
}

:root:not([data-theme="dark"]) .glass-admin .badge.text-bg-secondary {
  background: rgba(100, 116, 139, 0.80) !important;
  color: #fff !important;
}

:root:not([data-theme="dark"]) .glass-admin .badge {
  letter-spacing: 0.1px;
}

/* ===========================
   FullCalendar (optional, matches glass UI)
   =========================== */

#calendar .fc {
  color: var(--panel-text);
}

#calendar .fc .fc-toolbar-title {
  font-weight: 700;
}

#calendar .fc .fc-button {
  border-radius: 12px;
}

#calendar .fc .fc-scrollgrid,
#calendar .fc .fc-scrollgrid-section > * {
  border-color: var(--bs-border-color);
}

#calendar .fc .fc-event {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
}