/* ═══════════════════════════════════════════════════════════════════════════════
   TRUNKED — Premium Design Enhancement Layer v6.0 (Metoxi-inspired)
   Fonts: Agrandir (body) + Clash Display (titles) — UNCHANGED
   Features: Deep dark theme, glass morphism, premium UI, elegant transitions
   Designed by Bigman Empire
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Font Imports ──────────────────────────────────────────────────────────── */
/* Self-hosted Clash Display (was an external @import that could stall every page load
   when the font CDN was slow or unreachable). Body text uses the system UI font. */
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ─── CSS Custom Properties (Design Tokens) ─────────────────────────────────── */
:root {
  /* -- Dark mode (default) — deep Metoxi-inspired palette -- */
  --tk-bg-primary: #0a0d14;
  --tk-bg-secondary: #0f1219;
  --tk-bg-card: #131722;
  --tk-bg-card-hover: #181d2d;
  --tk-bg-input: #0e1118;
  --tk-bg-sidebar: #0c0f18;
  --tk-border: rgba(255, 255, 255, 0.06);
  --tk-border-focus: rgba(111, 204, 222, 0.3);
  --tk-text-primary: #e8eaf0;
  --tk-text-secondary: #8b90a8;
  --tk-text-muted: #555a72;
  --tk-accent: #6fccde;
  --tk-accent-glow: rgba(111, 204, 222, 0.12);
  --tk-accent-deep: #2a3a86;
  --tk-accent-deep-glow: rgba(42, 58, 134, 0.2);
  --tk-surface-glass: rgba(255, 255, 255, 0.03);
  --tk-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --tk-shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.4);
  --tk-shadow-lg: 0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.45);
  --tk-shadow-glow: 0 0 30px rgba(111, 204, 222, 0.06);
  --tk-radius-sm: 8px;
  --tk-radius-md: 12px;
  --tk-radius-lg: 16px;
  --tk-radius-xl: 20px;
  --tk-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --tk-font-body: 'Agrandir', system-ui, -apple-system, sans-serif;
  --tk-font-title: 'Clash Display', 'Agrandir', system-ui, sans-serif;

  /* Login panel */
  --tk-login-bg: #07080f;
  --tk-login-panel: #0d0f1a;
  --tk-login-hero-overlay: linear-gradient(135deg, rgba(42,58,134,0.85) 0%, rgba(7,8,15,0.92) 100%);

  /* Toggle */
  --tk-toggle-bg: rgba(255,255,255,0.06);
  --tk-toggle-knob: #6fccde;

  /* Premium accents */
  --tk-gradient-primary: linear-gradient(135deg, #2a3a86 0%, #3a4fa0 100%);
  --tk-gradient-accent: linear-gradient(135deg, #6fccde 0%, #2a3a86 100%);
  --tk-card-shine: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
}

/* ─── Light Mode ─────────────────────────────────────────────────────────────── */
html.light,
[data-theme="light"] {
  --tk-bg-primary: #f5f6fa;
  --tk-bg-secondary: #ffffff;
  --tk-bg-card: #ffffff;
  --tk-bg-card-hover: #f8f9fd;
  --tk-bg-input: #eeeff6;
  --tk-bg-sidebar: #ffffff;
  --tk-border: rgba(42, 58, 134, 0.12);
  --tk-border-focus: rgba(42, 58, 134, 0.35);
  --tk-text-primary: #1a1d2e;
  --tk-text-secondary: #4a4e68;
  --tk-text-muted: #7a7e98;
  --tk-accent: #2a3a86;
  --tk-accent-glow: rgba(42, 58, 134, 0.1);
  --tk-accent-deep: #2a3a86;
  --tk-accent-deep-glow: rgba(42, 58, 134, 0.08);
  --tk-surface-glass: rgba(42, 58, 134, 0.04);
  --tk-shadow-sm: 0 1px 3px rgba(42,58,134,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --tk-shadow-md: 0 4px 16px rgba(42,58,134,0.09), 0 2px 6px rgba(0,0,0,0.04);
  --tk-shadow-lg: 0 12px 40px rgba(42,58,134,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --tk-shadow-glow: 0 0 30px rgba(42, 58, 134, 0.05);
  --tk-login-bg: #eef0f8;
  --tk-login-panel: #ffffff;
  --tk-login-hero-overlay: linear-gradient(135deg, rgba(42,58,134,0.78) 0%, rgba(26,29,46,0.88) 100%);
  --tk-toggle-bg: rgba(42,58,134,0.09);
  --tk-toggle-knob: #2a3a86;
  --tk-card-shine: linear-gradient(135deg, rgba(42,58,134,0.02) 0%, transparent 60%);
}

/* ─── Global Resets & Base ───────────────────────────────────────────────────── */
* {
  font-family: var(--tk-font-body) !important;
}

html {
  background: var(--tk-bg-primary);
  transition: background var(--tk-transition), color var(--tk-transition);
}

body {
  font-family: var(--tk-font-body) !important;
  background: var(--tk-bg-primary);
  color: var(--tk-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--tk-transition), color var(--tk-transition);
  margin: 0;
}

/* Title elements get Clash Display */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tk-font-title) !important;
}

/* ─── Form inputs ────────────────────────────────────────────────────────────── */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  font-family: var(--tk-font-body) !important;
  background: var(--tk-bg-input) !important;
  border-color: var(--tk-border) !important;
  color: var(--tk-text-primary) !important;
  border-radius: var(--tk-radius-md) !important;
  transition: all var(--tk-transition);
  letter-spacing: 0.01em;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--tk-border-focus) !important;
  box-shadow: 0 0 0 3px var(--tk-accent-glow), var(--tk-shadow-sm) !important;
  outline: none !important;
}

input::placeholder {
  color: var(--tk-text-muted) !important;
  font-family: var(--tk-font-body) !important;
}

/* ─── Sign-in button (only actual submits, NOT theme toggles) ────────────────── */
button[type="submit"] {
  background: linear-gradient(135deg, #2a3a86 0%, #3a4fa0 100%) !important;
  border: 1px solid rgba(111, 204, 222, 0.15) !important;
  border-radius: var(--tk-radius-md) !important;
  font-family: var(--tk-font-title) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  transition: all var(--tk-transition);
  box-shadow: 0 2px 12px rgba(42, 58, 134, 0.35);
  position: relative;
  overflow: hidden;
}

button[type="submit"]:hover {
  background: linear-gradient(135deg, #3a4fa0 0%, #4b60b2 100%) !important;
  box-shadow: 0 4px 20px rgba(42, 58, 134, 0.5), 0 0 30px rgba(111, 204, 222, 0.1) !important;
  transform: translateY(-1px);
}

button[type="submit"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  pointer-events: none;
}

/* ─── DASHBOARD LAYOUT ───────────────────────────────────────────────────────── */

/* Sidebar */
nav,
aside {
  background: var(--tk-bg-sidebar) !important;
  border-right-color: var(--tk-border) !important;
  transition: background var(--tk-transition), border-color var(--tk-transition);
}

/* Main content area */
main {
  background: var(--tk-bg-primary) !important;
  transition: background var(--tk-transition);
}

/* ─── TABLES ─────────────────────────────────────────────────────────────────── */
table {
  font-family: var(--tk-font-body) !important;
}

thead {
  background: var(--tk-surface-glass) !important;
}

th {
  font-family: var(--tk-font-title) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  color: var(--tk-text-muted) !important;
}

tr {
  border-color: var(--tk-border) !important;
  transition: background var(--tk-transition);
}

tr:hover {
  background: var(--tk-surface-glass) !important;
}

td {
  color: var(--tk-text-secondary) !important;
}

/* ─── SCROLLBAR STYLING ──────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--tk-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tk-text-muted);
}

/* ─── SELECTION ──────────────────────────────────────────────────────────────── */
::selection {
  background: rgba(111, 204, 222, 0.25);
  color: var(--tk-text-primary);
}

/* ─── BIGMAN EMPIRE TAG ──────────────────────────────────────────────────────── */
.tk-bigman-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tk-font-title) !important;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tk-text-muted);
  opacity: 0.6;
  transition: opacity var(--tk-transition);
  user-select: none;
}

.tk-bigman-tag:hover {
  opacity: 1;
}

.tk-bigman-tag::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--tk-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--tk-accent);
}

/* ─── ANIMATIONS ─────────────────────────────────────────────────────────────── */
@keyframes tk-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tk-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes tk-pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes tk-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(111, 204, 222, 0.05); }
  50% { box-shadow: 0 0 30px rgba(111, 204, 222, 0.1); }
}

@keyframes tk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes tk-count-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Smooth page-load animation */
.tk-shell {
  animation: tk-fade-in 0.4s ease-out;
}

/* ─── SIDEBAR INDEPENDENT SCROLL ─────────────────────────────────────────────── */
aside {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 100vh !important;
  -webkit-overflow-scrolling: touch;
}

/* On desktop, sidebar is sticky; on mobile it's fixed (handled by layout CSS) */
@media (min-width: 1025px) {
  aside {
    position: sticky !important;
    top: 0 !important;
  }
}

main {
  overflow-y: auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — PHP LAYOUT SPECIFIC FIXES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Base body and background ── */
html.light,
[data-theme="light"] {
  background-color: #f5f6fa;
  color: #1a1d2e;
}

/* ── Headings ── */
html.light h1, html.light h2, html.light h3,
html.light h4, html.light h5, html.light h6,
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 {
  color: #1a1d2e !important;
}

/* ── LOGIN HERO TEXT: always white ── */
.tk-hero-text h2,
html.light .tk-hero-text h2,
[data-theme="light"] .tk-hero-text h2,
html.light .tk-login-hero .tk-hero-text h2,
[data-theme="light"] .tk-login-hero .tk-hero-text h2 {
  color: #ffffff !important;
  animation: none !important;
  transition: none !important;
}

.tk-hero-text p,
html.light .tk-hero-text p,
[data-theme="light"] .tk-hero-text p {
  color: rgba(255,255,255,0.7) !important;
  animation: none !important;
  transition: none !important;
}

/* ── Sidebar ── */
html.light aside,
html.light nav,
[data-theme="light"] aside,
[data-theme="light"] nav {
  background: #ffffff !important;
  border-color: rgba(42, 58, 134, 0.1) !important;
}

html.light aside *,
html.light nav *,
[data-theme="light"] aside *,
[data-theme="light"] nav * {
  color: #3a3e58;
}

html.light nav a,
html.light aside a,
[data-theme="light"] nav a,
[data-theme="light"] aside a {
  color: #3a3e58 !important;
}

html.light nav a:hover,
html.light aside a:hover,
[data-theme="light"] nav a:hover,
[data-theme="light"] aside a:hover {
  color: #1a1d2e !important;
  background: rgba(42, 58, 134, 0.06) !important;
}

/* ── Tables (light) ── */
html.light td,
[data-theme="light"] td {
  color: #3a3e58 !important;
}

html.light th,
[data-theme="light"] th {
  color: #7a7e98 !important;
}

html.light tr:hover,
[data-theme="light"] tr:hover {
  background: rgba(42, 58, 134, 0.03) !important;
}

/* ── Topbar (light) ── */
html.light .tk-topbar,
[data-theme="light"] .tk-topbar {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom-color: rgba(42, 58, 134, 0.08) !important;
}

html.light .tk-sidebar-toggle,
[data-theme="light"] .tk-sidebar-toggle {
  color: #3a3e58;
}

html.light .tk-topbar-icon-btn,
[data-theme="light"] .tk-topbar-icon-btn {
  color: #4a4e68;
}

/* ── Dashboard header text ── */
html.light header span,
html.light header div,
[data-theme="light"] header span,
[data-theme="light"] header div {
  color: #1a1d2e;
}

/* ── Buttons (light) — scoped to NOT affect theme toggle ── */
html.light button:not(.tk-sidebar-theme-btn):not(.tk-theme-toggle):not(.tk-theme-toggle-sm):not(.tk-sidebar-toggle):not(.tk-topbar-icon-btn):not(.tk-mobile-menu-btn),
[data-theme="light"] button:not(.tk-sidebar-theme-btn):not(.tk-theme-toggle):not(.tk-theme-toggle-sm):not(.tk-sidebar-toggle):not(.tk-topbar-icon-btn):not(.tk-mobile-menu-btn) {
  color: #3a3e58;
}

html.light button[type="submit"],
[data-theme="light"] button[type="submit"] {
  color: #ffffff !important;
}

/* ── Input placeholder (light) ── */
html.light input::placeholder,
[data-theme="light"] input::placeholder {
  color: #9a9eb8 !important;
}

/* ── PHP nav items in light mode ── */
html.light .tk-nav-item,
[data-theme="light"] .tk-nav-item {
  color: #3a3e58 !important;
}

html.light .tk-nav-item:hover,
[data-theme="light"] .tk-nav-item:hover {
  background: rgba(42, 58, 134, 0.06) !important;
  color: #1a1d2e !important;
}

html.light .tk-nav-section-label,
[data-theme="light"] .tk-nav-section-label {
  color: #9a9eb8 !important;
}

/* ── PHP cards in light mode ── */
html.light .tk-card,
[data-theme="light"] .tk-card {
  background: #ffffff !important;
  border-color: rgba(42, 58, 134, 0.1) !important;
}

/* ── Scrollbar (light) ── */
html.light ::-webkit-scrollbar-thumb,
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(42, 58, 134, 0.15);
}

html.light ::-webkit-scrollbar-thumb:hover,
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 58, 134, 0.3);
}

/* ── Selection (light) ── */
html.light ::selection,
[data-theme="light"] ::selection {
  background: rgba(42, 58, 134, 0.2);
  color: #1a1d2e;
}

/* ── Light mode sidebar theme button ── */
html.light .tk-sidebar-theme-btn,
[data-theme="light"] .tk-sidebar-theme-btn {
  background: rgba(42,58,134,0.05) !important;
  border-color: rgba(42,58,134,0.1) !important;
  color: #3a3e58 !important;
}

/* ── Light mode breadcrumb ── */
html.light .tk-breadcrumb,
[data-theme="light"] .tk-breadcrumb {
  color: #7a7e98;
}
html.light .tk-breadcrumb a,
[data-theme="light"] .tk-breadcrumb a {
  color: #7a7e98;
}
html.light .tk-breadcrumb-active,
[data-theme="light"] .tk-breadcrumb-active {
  color: #1a1d2e;
}

/* ── Light mode dropdowns ── */
html.light .tk-notif-dropdown,
html.light .tk-apps-dropdown,
html.light .tk-search-results-inner,
[data-theme="light"] .tk-notif-dropdown,
[data-theme="light"] .tk-apps-dropdown,
[data-theme="light"] .tk-search-results-inner {
  background: #ffffff !important;
  border-color: rgba(42,58,134,0.12) !important;
}

/* ── Print styles ── */
/* ─── Quick Time-Slot Filter Buttons ────────────────────────────────────────── */
.tk-quick-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tk-quick-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--tk-border);
    background: var(--tk-bg-card);
    color: var(--tk-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--tk-font-title);
}
.tk-quick-btn:hover,
.tk-quick-btn.active {
    background: var(--tk-accent);
    color: #fff;
    border-color: var(--tk-accent);
}
@media (max-width: 768px) {
    .tk-quick-btns {
        width: 100%;
        justify-content: flex-start;
    }
    .tk-filter-bar {
        flex-wrap: wrap;
    }
}

@media print {
  .tk-theme-toggle,
  .tk-bigman-tag,
  .tk-topbar,
  .tk-sidebar,
  .tk-breadcrumb {
    display: none !important;
  }
}