/* =============================================================================
   TrackPoint – Theme System (Light & Dark Mode)
   Loaded separately from the Tailwind build so purging never strips it.
   Beesolvix Consulting & Solutions
   ============================================================================= */

/* ---------------------------------------------------------------------------
   ANTI-FLASH: Hide content until data-theme is set on <html>.
   The inline <script> in <head> sets data-theme synchronously before
   any paint. Without this, browsers may flash unstyled content.
   --------------------------------------------------------------------------- */
html:not([data-theme]) {
  visibility: hidden;
}
html[data-theme] {
  visibility: visible;
}

/* ---------------------------------------------------------------------------
   LIGHT MODE (default) — all CSS custom properties
   --------------------------------------------------------------------------- */
:root {
  /* Brand */
  --color-primary:       #004980;
  --color-primary-dark:  #003660;
  --color-primary-light: #EFF6FF;
  --color-secondary:     #FD7211;
  --color-secondary-light: #FFF4ED;

  /* Surfaces */
  --bg-page:    #F4F6FA;
  --bg-card:    #FFFFFF;
  --bg-input:   #FFFFFF;
  --bg-hover:   #F9FAFB;
  --bg-subtle:  #F3F4F6;
  --bg-sidebar: #FFFFFF;

  /* Text */
  --text-primary:   #1A2535;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --text-inverse:   #FFFFFF;

  /* Borders */
  --border:        #E5E7EB;
  --border-light:  #F3F4F6;
  --border-focus:  rgba(0, 73, 128, 0.35);

  /* Semantic */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-danger:  #DC2626;
  --color-info:    #0284C7;

  /* Semantic backgrounds */
  --bg-success: #F0FDF4;
  --bg-warning: #FFFBEB;
  --bg-danger:  #FEF2F2;
  --bg-info:    #EFF6FF;

  /* Layout */
  --sidebar-width:  240px;
  --topbar-height:  58px;

  /* Typography */
  --font-size-base: 13.5px;
  --font-size-sm:   12.5px;
  --font-size-xs:   11.5px;
  --font-size-2xs:  10.5px;

  /* Shadows */
  --shadow-card:     0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-modal:    0 20px 60px rgba(0,0,0,0.14);
}

/* ---------------------------------------------------------------------------
   DARK MODE — overrides applied via data-theme="dark" on <html>
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Surfaces */
  --bg-page:    #0F1623;
  --bg-card:    #1A2332;
  --bg-input:   #1E2A3B;
  --bg-hover:   #1E2A3B;
  --bg-subtle:  #202C3E;
  --bg-sidebar: #141D2B;

  /* Text */
  --text-primary:   #E8EDF4;
  --text-secondary: #8B99B0;
  --text-muted:     #5E738A;

  /* Borders */
  --border:       #263346;
  --border-light: #1E2A3B;
  --border-focus: rgba(0, 120, 200, 0.5);

  /* Brand adjustments for dark */
  --color-primary-light: rgba(0, 73, 128, 0.25);
  --color-secondary-light: rgba(253, 114, 17, 0.15);

  /* Semantic backgrounds — muted in dark */
  --bg-success: rgba(5,  150, 105, 0.14);
  --bg-warning: rgba(217, 119, 6,  0.14);
  --bg-danger:  rgba(220, 38,  38, 0.14);
  --bg-info:    rgba(2,   132, 199, 0.14);

  /* Shadows — deeper in dark */
  --shadow-card:     0 2px 8px rgba(0,0,0,0.30);
  --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-modal:    0 20px 60px rgba(0,0,0,0.55);
}

/* ---------------------------------------------------------------------------
   Global theme transition — smooth switching between light and dark
   --------------------------------------------------------------------------- */
html {
  transition: background-color 0.2s ease;
}

body,
.card, .stat-card,
.sidebar, .topbar, .main-content,
.dropdown-menu, .modal, .toast,
.form-input, .form-select,
.btn-outline, .badge, .alert,
.data-table thead, .data-table tbody tr,
.sidebar-link, .restaurant-switcher,
.page-link, .card-footer {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* ---------------------------------------------------------------------------
   Sidebar active nav link accent bar (pseudo-element — not Tailwind)
   --------------------------------------------------------------------------- */
.sidebar-link {
  position: relative;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Dark mode — dark background fixes for elements that use hard-coded white
   --------------------------------------------------------------------------- */
[data-theme="dark"] body {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Auth pages dark background */
[data-theme="dark"] .min-h-screen {
  background-color: var(--bg-page) !important;
}

/* Force card backgrounds */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Tables */
[data-theme="dark"] .data-table thead tr {
  background-color: var(--bg-subtle) !important;
}
[data-theme="dark"] .data-table tbody tr:hover {
  background-color: var(--bg-hover) !important;
}
[data-theme="dark"] .data-table td,
[data-theme="dark"] .data-table th {
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

/* Sidebar */
[data-theme="dark"] .sidebar {
  background-color: var(--bg-sidebar) !important;
  border-right-color: var(--border) !important;
}
[data-theme="dark"] .sidebar-brand {
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .sidebar-section-label {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .sidebar-link {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .sidebar-link:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .sidebar-link.active {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}
[data-theme="dark"] .sidebar-icon {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .sidebar-link.active .sidebar-icon,
[data-theme="dark"] .sidebar-link:hover .sidebar-icon {
  color: inherit !important;
}

/* Topbar */
[data-theme="dark"] .topbar {
  background-color: var(--bg-card) !important;
  border-bottom-color: var(--border) !important;
}

/* Main content */
[data-theme="dark"] .main-content {
  background-color: var(--bg-page) !important;
}

/* Buttons */
[data-theme="dark"] .btn-outline {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-outline:hover {
  background-color: var(--bg-hover) !important;
}
[data-theme="dark"] .btn-ghost {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .btn-ghost:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Restaurant switcher */
[data-theme="dark"] .restaurant-switcher {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Page elements */
[data-theme="dark"] .page-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .modal-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .breadcrumb-active {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .form-help,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .stat-sub {
  color: var(--text-muted) !important;
}

/* Alerts in dark */
[data-theme="dark"] .alert-success { background: var(--bg-success) !important; border-color: rgba(5,150,105,0.25) !important; }
[data-theme="dark"] .alert-warning { background: var(--bg-warning) !important; border-color: rgba(217,119,6,0.25) !important; }
[data-theme="dark"] .alert-danger  { background: var(--bg-danger)  !important; border-color: rgba(220,38,38,0.25) !important; }
[data-theme="dark"] .alert-info    { background: var(--bg-info)    !important; border-color: rgba(2,132,199,0.25) !important; }

/* Pagination */
[data-theme="dark"] .page-link {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .page-link:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .page-link.active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
}

/* Toast */
[data-theme="dark"] .toast {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Dropdown */
[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bg-hover) !important;
}
[data-theme="dark"] .dropdown-divider {
  border-color: var(--border) !important;
}

/* Table wrapper border */
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .tp-table-wrap {
  border-color: var(--border) !important;
}

/* Card header/footer */
[data-theme="dark"] .card-header {
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .card-footer {
  background-color: var(--bg-subtle) !important;
  border-top-color: var(--border) !important;
}

/* Scrollbar for dark */
[data-theme="dark"] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-page); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ---------------------------------------------------------------------------
   Platform Admin dark-mode overrides
   Since .pa-* classes now reference CSS variables these are mostly redundant,
   but we add explicit overrides for the few hard-to-reach inline styles.
   --------------------------------------------------------------------------- */

/* Platform sidebar + topbar + content */
[data-theme="dark"] #platform-sidebar {
  background-color: var(--bg-sidebar) !important;
  border-right-color: var(--border) !important;
}
[data-theme="dark"] #platform-topbar {
  background-color: var(--bg-card) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] #platform-content {
  background-color: var(--bg-page) !important;
}

/* Platform nav links */
[data-theme="dark"] .pa-nav-link {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .pa-nav-link:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .pa-nav-link.active {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}
[data-theme="dark"] .pa-nav-icon {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .pa-nav-link.active .pa-nav-icon,
[data-theme="dark"] .pa-nav-link:hover .pa-nav-icon {
  color: inherit !important;
}

/* Platform cards, tables, badges, inputs, buttons */
[data-theme="dark"] .pa-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .pa-card-header {
  background-color: var(--bg-subtle) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .pa-card-title { color: var(--text-primary) !important; }

[data-theme="dark"] .pa-stat {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .pa-stat-value  { color: var(--text-primary)   !important; }
[data-theme="dark"] .pa-stat-label  { color: var(--text-secondary)  !important; }

[data-theme="dark"] .pa-table-wrap  { border-color: var(--border) !important; }
[data-theme="dark"] .pa-table thead tr {
  background-color: var(--bg-subtle) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .pa-table th    { color: var(--text-secondary) !important; }
[data-theme="dark"] .pa-table td    { color: var(--text-primary) !important; border-bottom-color: var(--border-light) !important; }
[data-theme="dark"] .pa-table tbody tr:hover { background-color: var(--bg-hover) !important; }

[data-theme="dark"] .pa-input {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .pa-btn-outline {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .pa-btn-outline:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .pa-page-title { color: var(--text-primary)    !important; }
[data-theme="dark"] .pa-page-sub   { color: var(--text-secondary)  !important; }

/* Platform theme toggle button */
[data-theme="dark"] .pa-theme-toggle {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .pa-theme-toggle:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}