/* ==========================================================================
   ADS Staff App — Armamento black & gold theme
   Applies the same palette as portal.html / booking-gold.css to the staff shell
   and all modules that use Tailwind slate + medical/sky utility classes.
   Load after theme.css and custom.css. Presentation only.
   ========================================================================== */

/* --- Map staff CSS variables to shared design tokens --- */
:root {
  --primary: var(--ds-brand-gold, #C9A84B);
  --primary-dark: var(--ds-brand-gold-dark, #A88B2E);
  --primary-light: var(--ds-brand-gold-light, #E8D48B);
  --secondary: #D4AF37;
  --info: var(--ds-brand-gold, #C9A84B);
  --shadow-primary: 0 8px 24px rgba(201, 168, 75, 0.28);

  /* Surfaces (dark-first, matches portal) */
  --bg: var(--ds-bg, #0B1426);
  --bg-subtle: var(--ds-card2, #1A2A45);
  --card: var(--ds-card, #121E33);
  --card-hover: var(--ds-brand-navy-card, #152238);
  --border: var(--ds-line, rgba(201, 168, 75, 0.24));
  --border-strong: rgba(201, 168, 75, 0.4);
  --text: var(--ds-text, #F5F0E6);
  --text-secondary: #D8D2C4;
  --muted: var(--ds-muted, #A8B0C0);
  --muted-light: #8B93A5;
}

html.light {
  --bg: var(--ds-bg, #F7F4EC);
  --bg-subtle: var(--ds-card2, #F3EEDF);
  --card: var(--ds-card, #FFFFFF);
  --card-hover: #FBF8F0;
  --border: var(--ds-line, rgba(140, 112, 30, 0.32));
  --border-strong: rgba(140, 112, 30, 0.45);
  --text: var(--ds-text, #1b1710);
  --text-secondary: #3d3628;
  --muted: var(--ds-muted, #5f5849);
  --muted-light: #7a7160;
  --primary: var(--ds-gold, #A88B2E);
  --primary-dark: #6f5a14;
  --primary-light: #C9A84B;
  --shadow-primary: 0 8px 24px rgba(168, 139, 46, 0.22);
}

/* --- Base staff surfaces (dark default) --- */
html.dark body,
body.bg-slate-950 {
  background:
    radial-gradient(900px 420px at 12% -80px, rgba(201, 168, 75, 0.07), transparent 65%),
    var(--ds-bg, #0B1426) !important;
  color: var(--ds-text, #F5F0E6) !important;
}

html.dark #app-sidebar,
html body #app-sidebar {
  background: linear-gradient(180deg, #0E1829 0%, #0B1426 100%) !important;
  border-color: var(--ds-line, rgba(201, 168, 75, 0.22)) !important;
}

html.dark #app-container > .flex-1 > header,
html.dark header.h-14,
html.dark header.h-16 {
  background: rgba(11, 20, 38, 0.92) !important;
  border-color: var(--ds-line, rgba(201, 168, 75, 0.22)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html.dark #main-content-area {
  background: transparent !important;
}

/* Sidebar brand */
.sidebar-brand {
  border-bottom: 1px solid var(--ds-line, rgba(201, 168, 75, 0.18));
}
.sidebar-logo {
  background: rgba(201, 168, 75, 0.12) !important;
  border: 1px solid var(--ds-line, rgba(201, 168, 75, 0.3));
  border-radius: 12px;
}
#sidebar-clinic-name {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.04em;
  color: var(--ds-gold-hi, #E8D48B) !important;
}

/* Nav */
.nav-section-label {
  color: var(--ds-brand-gold, #C9A84B) !important;
  opacity: 0.85;
  font-size: 10px !important;
  letter-spacing: 0.12em;
}
html.dark .nav-link,
#app-sidebar .nav-link {
  color: var(--ds-muted, #A8B0C0) !important;
}
html.dark .nav-link:hover,
#app-sidebar .nav-link:hover {
  background: rgba(201, 168, 75, 0.1) !important;
  color: var(--ds-gold-hi, #E8D48B) !important;
}
html.dark .nav-link.bg-slate-800,
html.dark .nav-link.text-white,
#app-sidebar .nav-link.bg-slate-800,
#app-sidebar .nav-link[aria-current="page"] {
  background: linear-gradient(135deg, rgba(201, 168, 75, 0.22) 0%, rgba(168, 139, 46, 0.18) 100%) !important;
  color: var(--ds-gold-hi, #E8D48B) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 75, 0.35) !important;
}
html.dark .nav-link i {
  color: inherit;
  opacity: 0.85;
}

/* Light mode nav — gold instead of sky blue */
html.light .nav-link:hover {
  background-color: rgba(201, 168, 75, 0.12) !important;
  color: var(--ds-gold-hi, #6f5a14) !important;
}
html.light .nav-link.bg-slate-800,
html.light .nav-link.text-white,
html.light .nav-link[aria-current="page"] {
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%) !important;
  color: #1a1405 !important;
  box-shadow: 0 4px 14px rgba(168, 139, 46, 0.28) !important;
}

/* --- Remap Tailwind medical / sky accents → gold --- */
.text-medical-300,
.text-medical-400,
.text-sky-300,
.text-sky-400,
.text-sky-500,
.text-sky-600 {
  color: var(--ds-gold-hi, #E8D48B) !important;
}
.text-medical-500,
.text-medical-600,
.text-medical-700 {
  color: var(--ds-gold, #C9A84B) !important;
}
html.light .text-medical-300,
html.light .text-medical-400,
html.light .text-sky-300,
html.light .text-sky-400,
html.light .text-sky-500,
html.light .text-sky-600 {
  color: var(--ds-gold, #A88B2E) !important;
}
html.light .text-medical-500,
html.light .text-medical-600,
html.light .text-medical-700 {
  color: #6f5a14 !important;
}

.bg-medical-500,
.bg-medical-600,
.bg-sky-500,
.bg-sky-600,
.bg-sky-700 {
  background-color: var(--ds-gold, #C9A84B) !important;
  color: #1a1405 !important;
}
.bg-medical-600:hover,
.bg-medical-700:hover,
.hover\:bg-medical-700:hover,
.bg-sky-600:hover,
.bg-sky-700:hover {
  background-color: var(--ds-brand-gold-mid, #D4AF37) !important;
  color: #1a1405 !important;
}
html.light .bg-medical-500,
html.light .bg-medical-600,
html.light .bg-sky-500,
html.light .bg-sky-600 {
  background-color: #A88B2E !important;
  color: #fff !important;
}

.border-medical-500,
.border-medical-400,
.border-sky-500,
.focus\:border-medical-500:focus,
.focus\:border-sky-500:focus {
  border-color: var(--ds-gold, #C9A84B) !important;
}
.focus\:ring-medical-500\/20:focus,
.focus\:ring-sky-500\/20:focus {
  --tw-ring-color: rgba(201, 168, 75, 0.25) !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 75, 0.25) !important;
}

.bg-medical-500\/10,
.bg-medical-500\/15,
.bg-medical-500\/20,
.bg-sky-500\/10,
.bg-sky-500\/15 {
  background-color: rgba(201, 168, 75, 0.12) !important;
}
.bg-medical-900\/30,
.bg-sky-900\/30 {
  background-color: rgba(201, 168, 75, 0.08) !important;
}

/* Dark slate surfaces → navy cards with gold hairlines */
html.dark .bg-slate-950 { background-color: var(--ds-bg, #0B1426) !important; }
html.dark .bg-slate-900 { background-color: var(--ds-card, #121E33) !important; }
html.dark .bg-slate-800 { background-color: var(--ds-card2, #1A2A45) !important; }
html.dark .bg-slate-900\/50,
html.dark .bg-slate-900\/80,
html.dark .bg-slate-950\/40,
html.dark .bg-slate-950\/80 {
  background-color: rgba(18, 30, 51, 0.85) !important;
}

html.dark .border-slate-800,
html.dark .border-slate-700,
html.dark .border-slate-800\/50,
html.dark .border-slate-700\/50 {
  border-color: var(--ds-line, rgba(201, 168, 75, 0.22)) !important;
}
html.dark .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--ds-line, rgba(201, 168, 75, 0.16)) !important;
}

html.dark .text-white { color: var(--ds-text, #F5F0E6) !important; }
html.dark .text-slate-100 { color: var(--ds-text, #F5F0E6) !important; }
html.dark .text-slate-200 { color: #E6E0D4 !important; }
html.dark .text-slate-300 { color: #C8C2B4 !important; }
html.dark .text-slate-400 { color: var(--ds-muted, #A8B0C0) !important; }

/* Cards with border + rounded often used as panels */
html.dark .bg-slate-900.border,
html.dark [class*="bg-slate-900"][class*="border"][class*="rounded"] {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%) !important;
  color: #1a1405 !important;
  box-shadow: 0 8px 22px rgba(201, 168, 75, 0.28) !important;
}
.btn-primary:hover {
  box-shadow: 0 12px 28px rgba(201, 168, 75, 0.38) !important;
  filter: brightness(1.06);
}

/* Patient workspace tabs */
.pw-tab.active {
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%) !important;
  color: #1a1405 !important;
  box-shadow: 0 2px 10px rgba(201, 168, 75, 0.3) !important;
}
html.dark .pw-tab:hover {
  background: rgba(201, 168, 75, 0.1) !important;
  color: var(--ds-gold-hi, #E8D48B) !important;
}

/* Filter chips */
html.dark .filter-chip {
  background: var(--ds-card, #121E33);
  border-color: var(--ds-line, rgba(201, 168, 75, 0.22));
  color: var(--ds-muted, #A8B0C0);
}
html.dark .filter-chip:hover,
html.dark .filter-chip.active {
  border-color: var(--ds-gold, #C9A84B);
  background: rgba(201, 168, 75, 0.14);
  color: var(--ds-gold-hi, #E8D48B);
}
html.light .filter-chip:hover,
html.light .filter-chip.active {
  border-color: var(--ds-gold, #A88B2E);
  background: rgba(201, 168, 75, 0.12);
  color: #6f5a14;
}

/* Form focus */
.form-input:focus,
html.dark input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--ds-gold, #C9A84B) !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 75, 0.22) !important;
}

/* Status badges keep semantic colors; gold only for “info / primary” accents */
.badge-primary,
.status-confirmed,
.bg-sky-500\/20 {
  background: rgba(201, 168, 75, 0.15) !important;
  color: var(--ds-gold-hi, #E8D48B) !important;
}

/* Tables */
html.dark thead {
  background: rgba(18, 30, 51, 0.95) !important;
}
html.dark thead th {
  color: var(--ds-gold-hi, #E8D48B) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html.dark tbody tr:hover {
  background-color: rgba(201, 168, 75, 0.06) !important;
}
html.light tbody tr:hover {
  background-color: rgba(201, 168, 75, 0.08) !important;
}
html.light thead {
  background: #F3EEDF !important;
}

/* Light mode card polish */
html.light .stat-card:hover,
html.light [class*="bg-slate-900"][class*="border"][class*="rounded"]:hover {
  border-color: rgba(168, 139, 46, 0.4) !important;
}

/* Scrollbars */
html.dark ::-webkit-scrollbar-track { background: #0B1426; }
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 75, 0.28);
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 75, 0.45);
}

/* Login card — gold accents */
#auth-overlay .auth-card {
  border: 1px solid rgba(201, 168, 75, 0.28) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 168, 75, 0.08) !important;
}
#auth-overlay #login-title {
  font-family: 'Cinzel', Georgia, serif !important;
  color: #E8D48B !important;
  letter-spacing: 0.06em;
}
#auth-overlay button[type="submit"] {
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%) !important;
  color: #1a1405 !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(201, 168, 75, 0.35) !important;
}
#auth-overlay button[type="submit"]:hover {
  filter: brightness(1.06);
}
#auth-overlay a.text-sky-600,
#auth-overlay a[href="book.html"] {
  color: #E8D48B !important;
}
#auth-overlay a.text-sky-600:hover,
#auth-overlay a[href="book.html"]:hover {
  color: #C9A84B !important;
}
#auth-overlay #forgot-password-link:hover {
  color: #E8D48B !important;
}
#auth-overlay input:focus {
  border-color: #C9A84B !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 75, 0.25) !important;
}

/* Avatar / role chip */
#user-avatar {
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%) !important;
  color: #1a1405 !important;
  font-weight: 700;
}

/* Global search gold focus already partially set; reinforce results header */
#global-search-results .text-\[10px\] {
  color: var(--ds-gold, #C9A84B) !important;
}

/* Module page titles often use text-white + bold */
html.dark h1, html.dark h2, html.dark h3 {
  color: var(--ds-text, #F5F0E6);
}
html.dark .text-medical-400.hover\:text-medical-300:hover {
  color: #E8D48B !important;
}

/* Mobile patient row accent was medical blue */
#main-content-area .patients-table tr.patient-row > td.patient-col-id {
  color: var(--ds-gold, #C9A84B) !important;
}

/* Toasts / floating UI — keep readable on navy */
.dcos-toast-success { border-left-color: #4ade80; }
.dcos-toast-error { border-left-color: #f87171; }
.dcos-toast-warning { border-left-color: #fbbf24; }
.dcos-toast-info { border-left-color: #C9A84B; }

/* Active tab underlines / pills commonly using medical */
html.dark .border-b-2.border-medical-500,
html.dark .border-medical-500 {
  border-color: var(--ds-gold, #C9A84B) !important;
}

/* Ring utilities used on selected cards */
.ring-medical-500\/40,
.ring-medical-500 {
  --tw-ring-color: rgba(201, 168, 75, 0.4) !important;
}