/* ==========================================================================
   S6 COMMAND — OVERHAUL THEME
   --------------------------------------------------------------------------
   Single theme layer for the whole platform. Loads AFTER main.css (Tailwind)
   and REPLACES the old style.css + theme-light.css.

   main.css (Tailwind utilities) stays — it is the layout engine.
   This file owns: design tokens, base elements, and every custom component
   class the HTML uses (.btn-*, .card, .form-input, .modal-*, .data-table,
   .badge-*, .status-*, tabs, dropdowns, sidebar/psa-panel, etc.).

   The HTML was originally authored for a DARK theme (text-white, bg-gray-800,
   border-gray-700, inline graphite backgrounds). The "DARK-CLASS OVERRIDES"
   section near the bottom flips those to the light palette — do not remove it.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Brand (provided palette) --- */
  --primary-blue: #2563eb;       /* The main CTA and branding color */
  --dark-bg: #1e40af;            /* The deep blue background on the left */
  --text-dark: #0f172a;          /* For main headings */
  --text-muted: #475569;         /* For labels and secondary text */
  --border-color: #cbd5e1;       /* Subtle gray borders for inputs */
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* --- Primary blue scale (derived from --primary-blue) --- */
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;        /* = --primary-blue */
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;        /* = --dark-bg */
  --primary-900: #1e3a8a;

  /* --- Neutral slate scale --- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* --- Semantic --- */
  --success:       #059669;
  --success-bg:    #ecfdf5;
  --success-border:#a7f3d0;
  --warning:       #d97706;
  --warning-bg:    #fffbeb;
  --warning-border:#fde68a;
  --danger:        #dc2626;
  --danger-bg:     #fef2f2;
  --danger-border: #fecaca;
  --info:          var(--primary-600);

  /* --- Surfaces --- */
  --page-bg:    var(--slate-100);   /* app background behind cards */
  --surface:    #ffffff;            /* cards, panels, modals */
  --surface-2:  var(--slate-50);    /* table headers, subtle fills */

  /* --- Sidebar (deep blue left panel) --- */
  --sidebar-bg:        var(--dark-bg);
  --sidebar-bg-2:      #1b3a9e;      /* slightly lighter for hover/sections */
  --sidebar-text:      #dbeafe;      /* primary-100 */
  --sidebar-text-dim:  #93c5fd;      /* primary-300 */
  --sidebar-border:    rgba(255, 255, 255, 0.12);

  /* --- Effects --- */
  --radius-sm: 0.375rem;
  --radius:    0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --ring:      0 0 0 3px rgba(37, 99, 235, 0.15);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    var(--card-shadow);
  --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  --transition: all 0.2s ease;

  /* Modal surface: slightly darker than --surface so modals read against the
     near-white page, with a clearly-visible (darker) border. */
  --modal-bg:      #f2f2f2;   /* ~5% darker than #ffffff */
  --border-strong: #b8bec9;

  /* --- Legacy aliases ---
     Older markup/JS (e.g. PSA modals) references these names. Map them to the
     current tokens. Because they point at the theme-aware tokens, they resolve
     correctly in BOTH light and dark (the dark block overrides --surface etc.). */
  --bg-primary:       var(--page-bg);
  --bg-secondary:     var(--modal-bg);
  --bg-tertiary:      var(--surface-2);
  --border-primary:   var(--border-strong);
  --border-secondary: var(--border-color);
  --text-primary:     var(--text-dark);
  --text-secondary:   var(--text-muted);
  --accent:           var(--primary-600);
  --accent-blue:      var(--primary-600);
}

/* ==========================================================================
   1b. DARK THEME — token overrides only.
   The brand blue (banner, buttons = --primary-*) is intentionally NOT changed;
   only surfaces, text and borders flip. Applied via <html data-theme="dark">,
   set before paint by the inline script in Layout.astro (default follows the
   OS prefers-color-scheme, then the user's saved choice).
   ========================================================================== */
:root[data-theme="dark"] {
  --page-bg:     #1f2329;   /* soft gray-black (not pure black) */
  --surface:     #2a2f37;   /* cards / panels / modals sit above the bg */
  --surface-2:   #313742;   /* table headers, subtle fills, hovers */
  --text-dark:   #eef1f5;   /* primary text — bright, sticks out against gray */
  --text-muted:  #aeb6c2;   /* secondary text / labels */
  --border-color:#3a414b;   /* borders against the gray-black */
  --modal-bg:    #2f343c;   /* raised from the page so modals stand out */
  --border-strong: #4b515c; /* clearly-visible modal border on dark */
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:      var(--card-shadow);
  --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--page-bg) !important;
  background-image: none !important;
  color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
}

a {
  color: var(--primary-600);
  transition: var(--transition);
}
a:hover { color: var(--primary-700); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--slate-100); }
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-color); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--slate-500); }

/* main.css is a frozen, pre-purged Tailwind build — some utilities used in the
   HTML (.gap-2, .overflow-auto, .overflow-y-auto …) were purged out, so they do
   nothing. Restore the scroll-critical ones here so containers can actually
   scroll (e.g. the PSA ticket detail / card / list views). */
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ==========================================================================
   3. FORMS
   ========================================================================== */
.form-input,
.input-modern {
  margin-top: 0.25rem;
  display: block;
  width: 100%;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  color: var(--text-dark);
  font-size: 0.875rem;
  transition: var(--transition);
}
.input-modern { margin-top: 0; }

.form-input:focus,
.input-modern:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-600) !important;
  box-shadow: var(--ring) !important;
}

.form-input::placeholder,
.input-modern::placeholder { color: var(--slate-400); }

textarea.form-input,
input.form-input {
  background-color: var(--surface);
  color: var(--text-dark);
}

.form-input-sm {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}

.form-error {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--danger);
  background-color: var(--danger-bg);
  border: 1px solid var(--danger-border);
  padding: 0.75rem;
  border-radius: var(--radius);
  display: none;
}

/* Native select chevron */
select.input-modern,
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn,
.btn-primary,
.btn-modern,
.btn-primary-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  border: none;
  background-color: var(--primary-600) !important;
  background-image: none !important;
  text-shadow: none !important;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
}
.btn-modern,
.btn-primary-modern { padding: 0.5rem 1rem; min-height: 0; }

.btn:hover,
.btn-primary:hover,
.btn-modern:hover,
.btn-primary-modern:hover {
  background-color: var(--primary-700) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); background-color: var(--primary-800) !important; }

.btn-secondary,
.btn-secondary-modern {
  background-color: var(--slate-100) !important;
  color: var(--slate-600) !important;
  border: 1px solid var(--slate-200);
}
.btn-secondary:hover,
.btn-secondary-modern:hover { background-color: var(--slate-200) !important; }

.btn-danger {
  background-color: var(--danger) !important;
  color: #ffffff !important;
}
.btn-danger:hover { background-color: #b91c1c !important; }

.btn-success {
  background-color: var(--success) !important;
  color: #ffffff !important;
}
.btn-success:hover { background-color: #047857 !important; }

.btn-warning {
  background-color: var(--warning) !important;
  color: #ffffff !important;
}
.btn-warning:hover { background-color: #b45309 !important; }

.btn-press:active { transform: scale(0.97); }

/* ==========================================================================
   5. TABS
   ========================================================================== */
.tab-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 500;
  color: var(--slate-500);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  background: transparent;
}
.tab-btn:hover { color: var(--text-dark); background-color: var(--slate-100); }
.tab-btn:focus { outline: none; }

.active-tab {
  color: var(--primary-600);
  border-bottom-color: var(--primary-600);
  background-color: var(--primary-50);
}

/* Boxed tab container (Vendors / Inventory / etc.) */
#tab-container {
  background: var(--surface-2);
  border-bottom: 1px solid var(--slate-200);
  padding: 8px 8px 0 8px;
  display: flex;
  gap: 4px;
}
/* Space between the tab buttons themselves (they live in an inner <nav>).
   Done here, not via a Tailwind gap-* utility, since the precompiled main.css
   purged .gap-2. */
#tab-container nav { gap: 8px; }
#tab-container nav.flex { display: flex; }
#tab-container button,
#tab-container [data-tab] {
  background: transparent;
  color: var(--slate-500);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 16px;
  margin-bottom: -1px;
  font-weight: 500;
}
#tab-container button:hover,
#tab-container [data-tab]:hover {
  background: var(--slate-100);
  color: var(--slate-700);
}
#tab-container button.active,
#tab-container [data-tab].active,
#tab-container .active-tab {
  background: var(--surface);
  color: var(--primary-600);
  border: 1px solid var(--slate-200);
  border-bottom-color: var(--surface);
  font-weight: 600;
}

/* PSA board tabs (left/PSA panel) — pill buttons, spaced, with a blue active
   state so they read as real buttons matching the Command panel (not squished
   bare text). Scoped to #psa-board-tabs so the Command module tabs above are
   unaffected. */
#psa-board-tabs { gap: 6px; align-items: center; }
#psa-board-tabs .tab-modern {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
}
#psa-board-tabs .tab-modern:hover {
  background: var(--surface-2);
  border-color: var(--primary-400);
}
#psa-board-tabs .tab-modern.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
}

/* Password subtabs */
.password-subtab {
  color: var(--slate-500);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  padding: 0.5rem 1rem;
}
.password-subtab:hover { color: var(--text-dark); }
.password-subtab-active {
  color: var(--primary-600);
  border-bottom-color: var(--primary-600);
}

/* ==========================================================================
   6. CARDS & PANELS
   ========================================================================== */
.card,
.modern-card {
  background-color: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card:hover,
.modern-card:hover,
.hover-lift:hover { box-shadow: var(--shadow); }
.hover-lift:hover { transform: translateY(-2px); }

.command-panel,
.main-panel,
#main-panel,
.tab-content,
.split-panel-container {
  background: var(--page-bg);
}

/* ==========================================================================
   7. HEADER (.glass)
   ========================================================================== */
header,
header.glass,
.glass {
  background: var(--surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--slate-200) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
header h1,
header .text-xl,
header .text-lg,
#company-name-display { color: var(--text-dark) !important; text-shadow: none !important; }
header svg { stroke: var(--primary-600); }

header button,
header [id*="Dropdown"],
header [class*="dropdown"] {
  background: var(--slate-100) !important;
  background-image: none !important;
  color: var(--slate-600) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius) !important;
}
header button:hover { background: var(--slate-200) !important; color: var(--text-dark) !important; }

/* ==========================================================================
   8. PSA PANEL (light — NOT a blue sidebar)
   The panel uses its own light styling from app.html; only the divider is themed here.
   ========================================================================== */
/* The PSA panel keeps its OWN light styling from app.html's embedded <style>
   (white background, light borders); text colors are handled by the dark-class
   overrides in §14. It is intentionally NOT a deep-blue sidebar. */

/* Panel divider / resize handle */
.panel-divider { background: var(--slate-200) !important; }
.panel-divider:hover { background: var(--slate-300) !important; }
.panel-divider-arrow { background: var(--slate-300) !important; }
.panel-divider-arrow svg { fill: var(--slate-600) !important; }

/* ==========================================================================
   9. TABLES
   ========================================================================== */
.data-table { width: 100%; border-collapse: collapse; }
table { background: var(--surface) !important; }

.data-table th,
.table-header,
table th {
  background: var(--surface-2) !important;
  color: var(--slate-500) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--slate-200) !important;
}
.data-table td,
table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-100) !important;
  color: var(--text-dark) !important;
}
.data-table tr:hover,
table tr:hover td { background: var(--surface-2) !important; }

table a,
table [class*="text-blue"] { color: var(--primary-600) !important; }

/* ==========================================================================
   10. MODALS
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
  overflow-y: auto;
}
/* .modal-modern is the modal BOX — the JS wraps it in its own fixed-inset
   backdrop (.fixed.inset-0…). It must NOT be a full-screen fixed element itself
   (that collapsed it to a narrow strip). Style it as a surface card; width comes
   from the w-full + max-w-* utilities on the element. */
/* The backdrop (the element wrapping .modal-modern) scrolls; the box uses
   margin:auto so it centers when it fits and scrolls-to-top when it's taller
   than the viewport (avoids the flex-centering "can't scroll to top" trap). */
/* Top padding keeps modals clear of the sticky banner (and trial bar) so a tall
   modal like PSA Settings doesn't bleed into it. */
*:has(> .modal-modern) { overflow-y: auto; padding-top: 6rem; }
.modal-modern {
  background-color: var(--modal-bg);
  background-image: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  margin: auto;
}
.modal-content,
[class*="modal"] > div {
  background-color: var(--modal-bg) !important;
  background-image: none !important;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xl);
  width: 100%;
  margin: auto;
  padding: 1.5rem;
}
.modal-header-modern { border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1rem; }
.modal-footer-modern { border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1rem; display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ==========================================================================
   11. DROPDOWNS & POPUPS
   ========================================================================== */
.dropdown-menu,
[id*="Menu"],
[class*="dropdown-menu"] {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg) !important;
  padding: 0.5rem;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  color: var(--slate-600);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.dropdown-item:hover { background: var(--slate-100); color: var(--text-dark); }

.filter-popup {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background-color: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  z-index: 40;
  min-width: 250px;
  display: none;
}
.filter-popup.active { display: block; }
.filter-toggle.has-filter { color: var(--primary-600); }

/* RMM tool buttons */
.rmm-tool-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--surface);
  color: var(--slate-600);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
}
.rmm-tool-btn:hover { background-color: var(--slate-50); border-color: var(--primary-600); color: var(--primary-600); }
.rmm-tool-btn:active { background-color: var(--primary-50); }
.rmm-tool-btn svg { margin-right: 0.75rem; }

/* Password folder items */
.password-folder-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: var(--radius);
  color: var(--slate-600);
  cursor: pointer;
  transition: var(--transition);
}
.password-folder-item:hover { background-color: var(--slate-100); color: var(--text-dark); }
.password-folder-item.folder-active {
  background-color: var(--primary-50);
  color: var(--primary-600);
  border-left: 3px solid var(--primary-600);
}

/* ==========================================================================
   12. BADGES & STATUS
   ========================================================================== */
.status-badge,
[class*="badge"] { font-weight: 500; }

.badge-modern,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-success,
.badge-success,
.badge-green { background: var(--success-bg) !important; color: var(--success) !important; border: 1px solid var(--success-border) !important; }
.status-warning,
.badge-orange { background: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid var(--warning-border) !important; }
.status-error,
.badge-red { background: var(--danger-bg) !important; color: var(--danger) !important; border: 1px solid var(--danger-border) !important; }
.badge-blue { background: var(--primary-50) !important; color: var(--primary-700) !important; border: 1px solid var(--primary-200) !important; }
.badge-purple { background: #f5f3ff !important; color: #7c3aed !important; border: 1px solid #ddd6fe !important; }

.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; display: inline-block; }
.status-active { color: var(--success); }

/* ==========================================================================
   13. LOADING / ANIMATION
   ========================================================================== */
.skeleton {
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner-modern {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--slate-200);
  border-top-color: var(--primary-600);
  border-radius: 9999px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fadeIn { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#app-loader { background: var(--page-bg) !important; }
#app-loader p { color: var(--slate-500) !important; }

/* ==========================================================================
   14. DARK-CLASS OVERRIDES
   The HTML uses dark-theme Tailwind classes + inline graphite backgrounds.
   These rules flip them to the light palette. KEEP THIS SECTION.
   ========================================================================== */

/* Text colors authored for dark backgrounds → mapped to semantic tokens so the
   same rules serve BOTH themes (tokens flip; these selectors don't need to). */
.text-white { color: var(--text-dark) !important; }
.text-gray-100,
.text-gray-200,
.text-gray-300,
.text-gray-400,
.text-gray-500 { color: var(--text-muted) !important; }

/* ...but keep white text on solid colored buttons/badges */
.btn .text-white,
.btn-primary .text-white,
.btn-modern .text-white,
.btn-danger .text-white,
.btn-success .text-white,
.bg-primary-600 .text-white,
.bg-blue-600 .text-white,
[class*="bg-green"] .text-white,
[class*="bg-red"] .text-white,
.psa-panel .btn-modern .text-white { color: #ffffff !important; }

/* Sidebar keeps its own light-on-dark text */
.psa-panel .text-white,
#psa-panel .text-white { color: #ffffff !important; }

/* Dark surface backgrounds → the theme's surface token (white in light,
   gray-black elevated surface in dark) */
.bg-gray-700,
.bg-gray-800,
.bg-gray-900,
[class*="bg-gray-7"],
[class*="bg-gray-8"],
[class*="bg-gray-9"] { background-color: var(--surface) !important; }
.hover\:bg-gray-700:hover,
.hover\:bg-gray-600:hover { background-color: var(--surface-2) !important; }

/* Dark borders → the theme's border token */
.border-gray-600,
.border-gray-700,
.border-gray-800,
[class*="border-gray-6"],
[class*="border-gray-7"],
[class*="border-gray-8"] { border-color: var(--border-color) !important; }

/* Inline graphite / dark gradient backgrounds baked into HTML style="" */
[style*="background: url"],
[style*="background-image: url"],
[style*="graphite"],
[style*="graphitedialoguebackground"],
[style*="linear-gradient(135deg, rgba(10"],
[style*="linear-gradient(135deg, rgba(17"],
[style*="rgba(10, 14, 26"],
[style*="rgba(17, 24, 39"] {
  background: var(--surface) !important;
  background-image: none !important;
  background-color: var(--surface) !important;
}

/* The graphite panels live OUTSIDE the sidebar; the sidebar rule above wins
   for .psa-panel due to later source order + specificity. */

/* ==========================================================================
   14b. DARK THEME — flip LIGHT-authored Tailwind classes to dark surfaces/text.
   §14 above flips the DARK-authored classes; some panels (e.g. the password
   vault) were authored LIGHT (bg-white, bg-gray-50, text-gray-900). These only
   apply in dark, so light keeps bg-white white, etc.
   ========================================================================== */
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-200 { background-color: var(--surface-2) !important; }
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 { color: var(--text-dark) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--text-muted) !important; }
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 { border-color: var(--border-color) !important; }

/* ==========================================================================
   15. GLOBAL BANNER — blue grid header, appears on EVERY page
   --------------------------------------------------------------------------
   Reproduces the index.html blue gradient + white grid as a reusable bar.
   Left  = white logo chip + "S6 Command Center" title in BLACK text.
   Right = nav links / menu titles in WHITE text.
   Markup:
     <header class="s6-banner">
       <div class="s6-banner-brand"> ...logo svg... <span class="s6-banner-title">S6 Command Center</span></div>
       <nav class="s6-banner-nav"> <a>...</a> </nav>
     </header>
   ========================================================================== */
/* NOTE: the generic `header {...!important}` rule in section 7 forces a white
   background on ALL <header> elements. This banner is also a <header>, so its
   background/border rules MUST use !important to win (the .s6-banner class
   out-specifies the bare `header` selector). */
.s6-banner {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0.85rem 2rem;
  background-color: var(--primary-800) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(135deg, var(--primary-600), var(--primary-900)) !important;
  background-size: 22px 22px, 22px 22px, cover !important;
  background-position: center !important;
  border-bottom: 1px solid var(--primary-900) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
}

/* Left side — brand */
.s6-banner-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.s6-banner-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.s6-banner-logo svg { width: 26px; height: 26px; color: var(--primary-600); }
.s6-banner-logo-img { width: 32px; height: 32px; object-fit: contain; display: block; }
.s6-banner-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;            /* BLACK title text, per design */
  letter-spacing: -0.01em;
}

/* Right side — nav / menu titles in WHITE */
.s6-banner-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.s6-banner-nav a,
.s6-banner-nav button,
.s6-banner-nav span,
.s6-banner-nav .s6-banner-link {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.s6-banner-nav a:hover,
.s6-banner-nav button:hover { color: var(--primary-100) !important; }

/* ==========================================================================
   16. GLOBAL FOOTER — appears on EVERY page (paired with the banner)
   Markup:
     <footer class="s6-footer">
       <span>© S6 Command Center</span>
       <div class="s6-footer-links"><a>...</a></div>
     </footer>
   ========================================================================== */
.s6-footer {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  background: var(--surface);
  border-top: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--slate-500);
}
.s6-footer a {
  color: var(--slate-600);
  text-decoration: none;
  transition: var(--transition);
}
.s6-footer a:hover { color: var(--primary-600); }
.s6-footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   17. AUTH DROPDOWN ON THE BLUE BANNER
   The shared user menu (#authContainer) is built with dark-theme classes.
   On the blue banner we want the TOGGLE button clean white-on-blue; the
   floating menu below stays a normal light card (handled by §14 flips).
   ========================================================================== */
/* Banner chrome = the company switcher + user menu toggles rendered by
   auth-menu.js into #authContainer. These rules out-specify the generic
   `header button` / `header [id*="Dropdown"]` rules in §7 (which would paint
   them as light pills and leave white text unreadable on a light box).
   BOTH toggles get the same clean white-on-blue treatment. */
.s6-banner #authContainer [id$="DropdownContainer"] {
  background: transparent !important;
  border: none !important;
}
.s6-banner #authContainer .s6-chrome-toggle {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: var(--radius) !important;
}
.s6-banner #authContainer .s6-chrome-toggle:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
.s6-banner #authContainer .s6-chrome-toggle span { color: #ffffff !important; }
.s6-banner #authContainer .s6-chrome-toggle svg { color: #ffffff !important; stroke: #ffffff !important; }

/* Floating menu: clean white card with readable items */
.s6-banner #userDropdownMenu {
  background: var(--surface) !important;
  border: 1px solid var(--slate-200) !important;
  box-shadow: var(--shadow-lg) !important;
}
.s6-banner #userDropdownMenu button { color: var(--slate-700) !important; }
.s6-banner #userDropdownMenu button:hover { background: var(--slate-100) !important; color: var(--text-dark) !important; }
.s6-banner #userDropdownMenu #logoutBtn { color: var(--danger) !important; }
.s6-banner #userDropdownMenu #logoutBtn:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }