/*! =============================================
 *  Excribo Dashboard Palette v2.1
 *
 *  WHAT THIS FILE CHANGES
 *  ──────────────────────────────────────────
 *  Light-mode-only palette refresh. Every rule is scoped to
 *  `body:not(.is-auth-page):not(.theme-dark)` so dark mode is
 *  left untouched (the original theme's dark palette keeps
 *  its own borders, backgrounds, and input colors).
 *
 *  PALETTE HEX CODES  (same tokens as auth-palette.css)
 *  ──────────────────────────────────────────
 *  Primary:          #4F46E5  (Indigo 600)
 *  Primary hover:    #4338CA  (Indigo 700)
 *  Active tint BG:   rgba(79,70,229, 0.08)
 *  Hover tint BG:    rgba(79,70,229, 0.05)
 *  Muted text:       #64748B  (Slate 500)
 *  Input border:     #E2E8F0  (Slate 200)
 *  Sidebar border:   #EEF2FF  (Indigo 50)
 *
 *  TO ADJUST PALETTE LATER
 *  ──────────────────────────────────────────
 *  Edit the --ex-dash-* tokens in the :root
 *  block below. Every rule in this file reads
 *  from those tokens.
 *  File: public/themes/default/assets/css/dashboard-palette.css
 *  ============================================= */

/* ─── Design Tokens ──────────────────────── */

:root {
  --ex-dash-primary:         #4F46E5;
  --ex-dash-primary-hover:   #4338CA;
  --ex-dash-primary-rgb:     79, 70, 229;
  --ex-dash-active-bg:       rgba(79, 70, 229, 0.08);
  --ex-dash-hover-bg:        rgba(79, 70, 229, 0.05);
  --ex-dash-muted:           #64748B;
  --ex-dash-input-border:    #E2E8F0;
  --ex-dash-input-bg:        #F8FAFC;
  --ex-dash-sidebar-border:  #EEF2FF;
  --ex-dash-card-border:     #E2E8F0;
  --ex-dash-card-shadow:     0 2px 12px rgba(0, 0, 0, 0.06);
  --ex-dash-dark-accent:     #A5B4FC;
  --ex-dash-dark-control-bg: rgba(148, 163, 184, 0.08);
  --ex-dash-dark-control-bd: rgba(148, 163, 184, 0.24);
  --ex-dash-dark-control-tx: #CBD5E1;
}

/* ──────────────────────────────────────────
   SIDEBAR  (light mode only)
   ────────────────────────────────────────── */

/* Container border */
body:not(.is-auth-page):not(.theme-dark) .lqd-navbar {
  border-color: var(--ex-dash-sidebar-border);
}

/* ── Active nav link ── */

body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-link.active {
  background-color: var(--ex-dash-active-bg) !important;
  color:            var(--ex-dash-primary) !important;
}

/* Left-edge indicator bar (light mode only; dark mode has its own ::before) */
body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-link.active::before {
  content:                 '';
  display:                 block;
  position:                absolute;
  top:                     0;
  inset-inline-start:      0;
  width:                   3px;
  height:                  100%;
  background-color:        var(--ex-dash-primary);
  border-radius:           0 4px 4px 0;
  opacity:                 1;
}

/* Active icon */
body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-link.active .lqd-nav-link-icon {
  color: var(--ex-dash-primary) !important;
}

/* ── Hover nav link ── */

body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-link:hover {
  background-color: var(--ex-dash-primary) !important;
  color:            #ffffff !important;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-link:hover .lqd-nav-link-icon {
  color: #ffffff !important;
}

/* ── Section labels (USER, LINKS, CREDITS…)
   Slate 500 is readable on both light and dark, so leave it
   applied in both modes — only the spacing tweaks are cosmetic. */

body:not(.is-auth-page) .lqd-navbar-label {
  font-size:       0.625rem;
  letter-spacing:  0.1em;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-label {
  color: var(--ex-dash-muted);
}

/* Navbar expander button (collapse chevron) — hover indigo, light mode only */
body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-expander:hover {
  background-color: var(--ex-dash-active-bg) !important;
  color:            var(--ex-dash-primary) !important;
}

/* ──────────────────────────────────────────
   TOP BAR / HEADER  (light mode only)
   ────────────────────────────────────────── */

/* Subtle indigo-tinted bottom border */
body:not(.is-auth-page):not(.theme-dark) .lqd-header {
  border-bottom-color: var(--ex-dash-sidebar-border);
}

/* ── Header search field ── */

body:not(.is-auth-page):not(.theme-dark) .lqd-header .header-search-input.lqd-input {
  background-color: var(--ex-dash-input-bg) !important;
  border-color:     var(--ex-dash-input-border) !important;
  border-radius:    10px !important;
  transition:       border-color 0.15s ease, box-shadow 0.15s ease;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-header .header-search-input.lqd-input:focus {
  border-color:     var(--ex-dash-primary) !important;
  box-shadow:       0 0 0 3px rgba(var(--ex-dash-primary-rgb), 0.12) !important;
  --tw-ring-color:  transparent;
}

/* Keep the 10px radius on the dark-mode search input too (purely cosmetic) */
body:not(.is-auth-page).theme-dark .lqd-header .header-search-input.lqd-input {
  border-radius: 10px !important;
}

/* ── Header controls in dark mode (better contrast/readability) ── */

body:not(.is-auth-page).theme-dark .lqd-header .lqd-light-dark-switch {
  color:            var(--ex-dash-dark-control-tx) !important;
  background-color: var(--ex-dash-dark-control-bg) !important;
  border:           1px solid var(--ex-dash-dark-control-bd) !important;
  border-radius:    10px !important;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-header .lqd-light-dark-switch {
  color:            var(--ex-dash-muted) !important;
  border-color:     var(--ex-dash-input-border) !important;
  background-color: #ffffff !important;
}

body:not(.is-auth-page).theme-dark .lqd-header .lqd-light-dark-switch:hover,
body:not(.is-auth-page).theme-dark .lqd-header .lqd-light-dark-switch:focus-visible {
  color:            #EEF2FF !important;
  background-color: rgba(129, 140, 248, 0.16) !important;
  border-color:     rgba(165, 180, 252, 0.65) !important;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-header .lqd-light-dark-switch:hover,
body:not(.is-auth-page):not(.theme-dark) .lqd-header .lqd-light-dark-switch:focus-visible {
  color:            var(--ex-dash-primary) !important;
  border-color:     var(--ex-dash-primary) !important;
  background-color: var(--ex-dash-active-bg) !important;
}

/* Explicit icon toggle states (don't rely only on Tailwind dark variant) */
body:not(.is-auth-page):not(.theme-dark) .lqd-header .lqd-light-dark-switch .lqd-ls-icon-light {
  display: block;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-header .lqd-light-dark-switch .lqd-ls-icon-dark {
  display: none;
}

body:not(.is-auth-page).theme-dark .lqd-header .lqd-light-dark-switch .lqd-ls-icon-light {
  display: none;
}

body:not(.is-auth-page).theme-dark .lqd-header .lqd-light-dark-switch .lqd-ls-icon-dark {
  display: block;
}

body:not(.is-auth-page).theme-dark .lqd-header .lqd-btn-ghost-shadow {
  color:            var(--ex-dash-dark-control-tx) !important;
  border-color:     var(--ex-dash-dark-control-bd) !important;
  background-color: var(--ex-dash-dark-control-bg) !important;
}

body:not(.is-auth-page).theme-dark .lqd-header .lqd-btn-ghost-shadow:hover {
  color:            #EEF2FF !important;
  border-color:     rgba(165, 180, 252, 0.65) !important;
  background-color: rgba(129, 140, 248, 0.16) !important;
}

body:not(.is-auth-page).theme-dark .lqd-header .lqd-header-upgrade-btn {
  color:            var(--ex-dash-dark-control-tx) !important;
  border-color:     var(--ex-dash-dark-control-bd) !important;
  background-color: var(--ex-dash-dark-control-bg) !important;
}

body:not(.is-auth-page).theme-dark .lqd-header .lqd-header-upgrade-btn:hover {
  color:            #EEF2FF !important;
  border-color:     rgba(165, 180, 252, 0.65) !important;
  background-color: rgba(129, 140, 248, 0.16) !important;
}

/* Tailwind utility fallback: dark:bg-foreground/[3%] + text-foreground
   used by multiple ghost-shadow buttons in dashboard */
body:not(.is-auth-page).theme-dark .dark\:bg-foreground\/\[3\%\].lqd-btn,
body:not(.is-auth-page).theme-dark .dark\:bg-foreground\/\[3\%\].lqd-light-dark-switch {
  background-color: rgba(148, 163, 184, 0.12) !important;
  border-color:     rgba(148, 163, 184, 0.30) !important;
}

body:not(.is-auth-page).theme-dark .text-foreground.lqd-btn,
body:not(.is-auth-page).theme-dark .text-foreground.lqd-light-dark-switch {
  color: #E5E7EB !important;
}

body:not(.is-auth-page).theme-dark .dark\:hover\:bg-foreground:hover.lqd-btn,
body:not(.is-auth-page).theme-dark .dark\:focus-visible\:bg-foreground:focus-visible.lqd-btn {
  background-color: rgba(129, 140, 248, 0.18) !important;
  border-color:     rgba(165, 180, 252, 0.65) !important;
  color:            #F8FAFC !important;
}

/* ── Dark-mode contrast rescue (dashboard only) ───────────────────── */

body:not(.is-auth-page).theme-dark {
  --tblr-body-bg:              #111827;
  --tblr-bg-surface:           #1F2937;
  --tblr-bg-surface-secondary: #273449;
  --tblr-border-color:         #334155;
  --tblr-body-color:           #E5E7EB;
  --tblr-heading-color:        #F8FAFC;
  --tblr-muted:                #94A3B8;
  --tblr-link-color:           #A5B4FC;
  background:                  hsl(216deg 1.81% 1.55%) !important;
}

/* Override the broken .bg-background rule in the Vite build output
   (live built CSS has background: url("/public/images/bg/bg-login.jpg")
   which 404s → transparent body → white bg shows through in dark mode) */
body.theme-dark.bg-background {
  background: hsl(216deg 1.81% 1.55%) !important;
}

body:not(.is-auth-page).theme-dark .lqd-navbar {
  --tblr-navbar-bg:          #1F2937;
  --tblr-navbar-color:       #CBD5E1;
  --tblr-navbar-active-color:#F8FAFC;
}

body:not(.is-auth-page).theme-dark .lqd-navbar-link,
body:not(.is-auth-page).theme-dark .lqd-navbar-label,
body:not(.is-auth-page).theme-dark .lqd-header,
body:not(.is-auth-page).theme-dark .lqd-main {
  opacity: 1 !important;
}

/* If a backdrop gets stuck without an open modal, don't dim dashboard */
body:not(.is-auth-page):not(.modal-open) .modal-backdrop.show {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ──────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────── */

/* ── Primary button — light mode: solid Indigo 600, no gradient ── */

body:not(.is-auth-page):not(.theme-dark) .lqd-btn-primary {
  background:        var(--ex-dash-primary) !important;
  background-image:  none !important;
  color:             #ffffff !important;
  box-shadow:        0 4px 14px rgba(var(--ex-dash-primary-rgb), 0.25);
  transition:        background-color 0.15s ease,
                     box-shadow 0.15s ease,
                     transform 0.1s ease;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-btn-primary:hover,
body:not(.is-auth-page):not(.theme-dark) .lqd-btn-primary:focus-visible {
  background:       var(--ex-dash-primary-hover) !important;
  background-image: none !important;
  box-shadow:       0 6px 20px rgba(var(--ex-dash-primary-rgb), 0.35) !important;
}

/* ── Ghost-shadow buttons (Admin Panel, Subscription status) — light only ── */

body:not(.is-auth-page):not(.theme-dark) .lqd-btn-ghost-shadow {
  border:           1px solid var(--ex-dash-input-border) !important;
  border-radius:    8px !important;
  box-shadow:       none !important;
  transition:       border-color 0.15s ease,
                    background-color 0.15s ease,
                    color 0.15s ease;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-btn-ghost-shadow:hover {
  background-color: var(--ex-dash-active-bg) !important;
  border-color:     var(--ex-dash-primary) !important;
  color:            var(--ex-dash-primary) !important;
  box-shadow:       none !important;
}

/* ── Outline buttons — radius is cosmetic, safe in both modes ── */

body:not(.is-auth-page) .lqd-btn-outline {
  border-radius: 8px !important;
  transition:    outline-color 0.15s ease, background-color 0.15s ease;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-btn-outline:hover {
  outline-color:    var(--ex-dash-primary) !important;
  background-color: var(--ex-dash-hover-bg) !important;
}

/* ──────────────────────────────────────────
   CARDS  (light mode only — the light border/shadow
   looks wrong on a dark background)
   ────────────────────────────────────────── */

body:not(.is-auth-page):not(.theme-dark) .lqd-card-outline {
  border-color: var(--ex-dash-card-border) !important;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-card-shadow {
  box-shadow:   var(--ex-dash-card-shadow) !important;
  border:       1px solid var(--ex-dash-card-border) !important;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-card-outline-shadow {
  border-color: var(--ex-dash-card-border) !important;
  box-shadow:   var(--ex-dash-card-shadow) !important;
}

/* ──────────────────────────────────────────
   BADGES  (subtle indigo tint — works in both modes)
   ────────────────────────────────────────── */

body:not(.is-auth-page):not(.theme-dark) .lqd-badge-primary {
  background-color: rgba(var(--ex-dash-primary-rgb), 0.10) !important;
  color:            var(--ex-dash-primary) !important;
}

body:not(.is-auth-page):not(.theme-dark) .lqd-badge-secondary {
  background-color: rgba(var(--ex-dash-primary-rgb), 0.08) !important;
  color:            var(--ex-dash-primary) !important;
}

/* ──────────────────────────────────────────
   RESPONSIVE  (light mode only)
   ────────────────────────────────────────── */

@media (max-width: 1024px) {
  body:not(.is-auth-page):not(.theme-dark) .lqd-navbar {
    border-color: var(--ex-dash-input-border);
  }

  /* Left indicator shouldn't show on mobile overlay */
  body:not(.is-auth-page):not(.theme-dark) .lqd-navbar-link.active::before {
    display: none;
  }
}