/* ============================================================================
   PSIGUARD FLAVOR BRIDGE v2.0
   psiguard-flavors.css
   ============================================================================
   Load this file on EVERY PsiGuard page, AFTER dashboard.css (if present).

   What this file does:
     1. Declares the canonical :root defaults (Grape Soda — PsiGuard's home base)
     2. Maps the modern semantic variables to ALL legacy variable names so
        dashboard.css, app-hub styles, and account styles all respond correctly
        to a single psiApplyFlavor() call — with zero CSS rewrites needed.
     3. Adds transition rules so color changes animate smoothly everywhere.
     4. Fixes the dark-theme text problem: light text on dark backgrounds,
        dark text on light backgrounds — always correct regardless of flavor.
     5. Removes hardcoded color values that were bypassing the variable system.

   Usage:
     <link rel="stylesheet" href="css/psiguard-flavors.css">
     <script src="js/psiguard-flavors.js"></script>

   The JS file sets the CSS variables; this file declares their defaults and
   applies them everywhere the old hardcoded values used to live.
   ============================================================================ */


/* ── 1. CANONICAL ROOT DEFAULTS ─────────────────────────────────────────────
   These are the Grape Soda values — PsiGuard's original purple identity.
   The JS engine overwrites these at runtime. They serve as:
     a) The initial paint before JS runs
     b) A fallback if JS fails
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Modern semantic variables (set by psiguard-flavors.js) ── */
  --accent:        #8b5cf6;
  --accent-deep:   #7c3aed;
  --accent-light:  #ddd6fe;
  --accent-glow:   #ede9fe;
  --bg:            #faf8ff;
  --bg-card:       #f5f3ff;
  --bg-sidebar:    #1a0a2e;
  --dark:          #1a0a2e;
  --text:          #1a0a2e;
  --text-soft:     #4c3575;
  --text-muted:    #8b6fb5;
  --text-on-dark:  #f5f3ff;

  /* ── Legacy dashboard.css variable names ── */
  /* The JS also sets these, but we declare defaults here as a safety net */
  --purple:            var(--accent);
  --purple-light:      var(--accent-light);
  --pink:              var(--accent-deep);
  --bg-secondary:      var(--bg-card);
  --bg-metrics:        var(--bg-card);
  --bg-chat:           var(--bg-card);
  --bg-state:          #ffffff;
  --bg-white:          var(--bg-card);
  --text-primary:      var(--text);
  --text-secondary:    var(--text-soft);
  --gradient-primary:  linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
  --border:            var(--accent-light);
  --border-accent:     var(--accent-glow);

  /* ── Transition speed (reused everywhere below) ── */
  --T: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Semantic shadow using accent color ── */
  --shadow-accent-sm: 0 2px 8px  color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-accent-md: 0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
  --shadow-accent-lg: 0 20px 60px color-mix(in srgb, var(--accent) 28%, transparent);
}


/* ── 2. SMOOTH TRANSITIONS ───────────────────────────────────────────────────
   Apply color transitions to every element that displays a flavor-driven
   color. This is what makes the live preview feel instantaneous + silky.
   ──────────────────────────────────────────────────────────────────────── */

html {
  transition:
    background-color var(--T),
    color            var(--T);
}

body,
.navbar,
.sidebar,
.sift-sidebar,
.psi-sidebar,
.hub-sidebar,
.account-sidebar,
.card,
.metric-card,
.chat-window,
.state-panel,
.hub-card,
.tab-panel,
.tab,
.btn,
button,
input,
select,
textarea {
  transition:
    background       var(--T),
    background-color var(--T),
    border-color     var(--T),
    color            var(--T),
    box-shadow       var(--T);
}

/* Gradients need their own rule — can't be in the shorthand above */
.navbar-brand,
.sidebar-logo,
.hub-app-icon,
.gradient-text,
[class*="gradient"] {
  transition: background var(--T), color var(--T);
}


/* ── 3. ROOT-LEVEL COLOR APPLICATION ─────────────────────────────────────────
   Route body and structural elements through the semantic variables.
   This ensures pages that had hardcoded bg colors now flex with the theme.
   ──────────────────────────────────────────────────────────────────────── */

body {
  background-color: var(--bg) !important;
  color:            var(--text) !important;
}

/* The old dashboard.css hardcoded this: background: #f0eeff */
/* This override ensures the body always uses the flavor variable */


/* ── 4. SIDEBAR — ALWAYS DARK, ALWAYS READABLE ───────────────────────────────
   The sidebar uses --bg-sidebar (the flavor's dark value).
   Text in the sidebar must always use --text-on-dark.
   This is the main source of the "dark theme, invisible text" bug.
   ──────────────────────────────────────────────────────────────────────── */

.sidebar,
.sift-sidebar,
.psi-sidebar,
.hub-sidebar,
[class*="sidebar"] {
  background: var(--bg-sidebar) !important;
}

/* Sidebar text: always use the light text-on-dark color */
.sidebar *,
.sift-sidebar *,
.psi-sidebar *,
.hub-sidebar *,
[class*="sidebar"] * {
  /* Don't override everything — only elements that were using dark text */
  /* Individual rules below handle specific sidebar text elements */
}

/* Sidebar wordmarks / logos */
.sidebar .wordmark,
.sidebar-logo .wordmark,
.navbar-brand,
.sidebar .logo-text,
.sidebar .app-name {
  color: var(--accent) !important;
  transition: color var(--T);
}

/* Sidebar nav links — muted state */
.sidebar-link,
.sidebar .nav-link,
.hub-sidebar .sidebar-link,
.sidebar-nav a {
  color: var(--text-on-dark) !important;
  opacity: 0.65;
  transition: color var(--T), opacity 0.2s, background var(--T);
}

.sidebar-link:hover,
.sidebar .nav-link:hover,
.hub-sidebar .sidebar-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* Active sidebar link */
.sidebar-link.active,
.sidebar .nav-link.active,
.hub-sidebar .sidebar-link.active {
  color:            var(--accent) !important;
  border-left-color: var(--accent) !important;
  opacity: 1;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Sidebar section headers (the ALL-CAPS labels) */
.sidebar-section,
.sidebar .section-label {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* User chip in sidebar bottom */
.user-chip .user-name,
.sidebar-bottom .user-name,
.sidebar-bottom .user-email {
  color: var(--text-on-dark) !important;
}

.user-flavor,
.sidebar-bottom .user-flavor {
  color: rgba(255, 255, 255, 0.45) !important;
}


/* ── 5. NAVBAR ────────────────────────────────────────────────────────────────
   The navbar sits on --bg (light) or can optionally use --bg-card.
   Text should use --text (dark on light themes, light on dark themes).
   ──────────────────────────────────────────────────────────────────────── */

.navbar {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
}

.navbar .wordmark,
.navbar .brand,
.navbar .logo {
  color: var(--accent) !important;
}

.navbar .nav-user-email,
.navbar .nav-meta,
.navbar .user-email {
  color: var(--text-muted) !important;
}


/* ── 6. CARDS & PANELS ───────────────────────────────────────────────────────
   All card-like surfaces should use --bg-card.
   Text inside uses --text (automatic light/dark based on flavor).
   ──────────────────────────────────────────────────────────────────────── */

.card,
.metric-card,
.state-panel,
.hub-card,
.tab-panel,
.content-card,
.settings-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.card-title,
.metric-label,
.panel-title,
.section-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

.card-subtitle,
.metric-sublabel,
.text-secondary,
.muted-label,
p {
  color: var(--text-soft) !important;
}

.text-muted,
.caption,
.help-text,
small {
  color: var(--text-muted) !important;
}


/* ── 7. CHAT WINDOW ──────────────────────────────────────────────────────────
   The chat area uses --bg-chat. Messages must be readable.
   ──────────────────────────────────────────────────────────────────────── */

.chat-window,
.chat-area,
.messages-container {
  background: var(--bg-chat, var(--bg-card)) !important;
}

.message-bubble,
.chat-message {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.message-bubble.outgoing,
.chat-message.user {
  background: var(--accent-glow) !important;
  border-color: var(--accent-light) !important;
}

.chat-input-area input,
.chat-input-area textarea {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.chat-input-area input::placeholder,
.chat-input-area textarea::placeholder {
  color: var(--text-muted) !important;
}


/* ── 8. FORMS & INPUTS ───────────────────────────────────────────────────────
   All inputs, selects, and textareas should read flavor vars.
   ──────────────────────────────────────────────────────────────────────── */

input,
select,
textarea {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

label {
  color: var(--text) !important;
}


/* ── 9. BUTTONS ──────────────────────────────────────────────────────────────
   Primary buttons: always accent bg + white text (readable on any flavor)
   Ghost/outline: accent border + accent text
   Danger: red (static — not flavor-driven)
   ──────────────────────────────────────────────────────────────────────── */

.btn-primary,
button.btn-primary {
  background: var(--gradient-primary) !important;
  color:      #ffffff !important;
  border:     none !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-outline,
.btn-ghost,
button.btn-outline,
button.btn-ghost {
  background:    transparent !important;
  border:        1.5px solid var(--accent) !important;
  color:         var(--accent) !important;
}

.btn-outline:hover,
.btn-ghost:hover {
  background: var(--accent-glow) !important;
}

/* Don't re-color danger buttons — red always means danger */
.btn-danger { /* intentionally left to its own styles */ }


/* ── 10. TABS ─────────────────────────────────────────────────────────────────
   Tab bars used in account.html and similar pages.
   ──────────────────────────────────────────────────────────────────────── */

.tab-bar,
.tabs {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
}

.tab {
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent;
  transition: color var(--T), border-color var(--T);
}

.tab:hover {
  color: var(--text) !important;
}

.tab.active {
  color:        var(--accent) !important;
  border-color: var(--accent) !important;
}


/* ── 11. METRIC/SCORE DISPLAYS ───────────────────────────────────────────────
   PsiGuard's core metric values and score rings.
   ──────────────────────────────────────────────────────────────────────── */

.metric-value,
.score-value,
.metric-number {
  color: var(--accent) !important;
}

.metric-ring,
.score-ring {
  stroke: var(--accent) !important;
}

.metric-ring-bg,
.score-ring-bg {
  stroke: var(--accent-light) !important;
}


/* ── 12. ACCENT ELEMENTS ─────────────────────────────────────────────────────
   Any element that should always use the current accent color.
   ──────────────────────────────────────────────────────────────────────── */

.accent,
.accent-text,
.brand-text,
[class*="accent-color"] {
  color: var(--accent) !important;
}

.accent-bg,
[class*="accent-bg"] {
  background: var(--accent) !important;
  color: #ffffff !important;
}

.accent-border,
[class*="accent-border"] {
  border-color: var(--accent) !important;
}

/* Gradient text (logo treatments, hero text) */
.gradient-text,
.text-gradient {
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}


/* ── 13. SCROLLBAR THEMING ───────────────────────────────────────────────────
   Webkit scrollbars pick up the flavor accent.
   ──────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb {
  background: var(--accent-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }


/* ── 14. SELECTION ────────────────────────────────────────────────────────────
   Text selection uses the accent color.
   ──────────────────────────────────────────────────────────────────────── */

::selection {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--text);
}


/* ── 15. DASHBOARD-SPECIFIC OVERRIDES ────────────────────────────────────────
   dashboard.css has a few hardcoded values that bypass the variable system.
   These rules patch them without touching dashboard.css itself.
   ──────────────────────────────────────────────────────────────────────── */

/* body background was hardcoded to #f0eeff in dashboard.css body rule */
/* Handled by the body rule in section 3 above with !important */

/* The gradient bars / progress fills */
.progress-bar,
.score-bar-fill,
[class*="progress-fill"] {
  background: var(--gradient-primary) !important;
}

/* Conversation list sidebar (the flush left sidebar in the dashboard) */
.conversations-sidebar,
.conv-sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
}

.conv-item,
.conversation-item {
  color: var(--text-on-dark) !important;
  opacity: 0.7;
  transition: background var(--T), opacity 0.15s;
}

.conv-item:hover,
.conversation-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  opacity: 1;
}

.conv-item.active,
.conversation-item.active {
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1;
  border-left: 2px solid var(--accent) !important;
}

/* Session timestamp / metadata in dark sidebar */
.conv-time,
.conv-meta,
.conversation-time {
  color: rgba(255, 255, 255, 0.4) !important;
}


/* ── 16. HUB-SPECIFIC OVERRIDES ──────────────────────────────────────────────
   app-hub.html uses slightly different class names.
   ──────────────────────────────────────────────────────────────────────── */

.hub-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}

.hub-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-accent-sm) !important;
}

.hub-app-name {
  color: var(--text) !important;
}

.hub-app-desc {
  color: var(--text-muted) !important;
}

.hub-section-title {
  color: var(--text) !important;
}


/* ── 17. ACCOUNT-SPECIFIC OVERRIDES ─────────────────────────────────────────
   account.html settings page — cards, profile info, etc.
   ──────────────────────────────────────────────────────────────────────── */

.settings-card,
.profile-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}

.profile-label,
.settings-label {
  color: var(--text-muted) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-value,
.settings-value {
  color: var(--text) !important;
}

/* Status / badge pills */
.badge,
.status-badge,
.plan-badge {
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-light) !important;
}

.badge.pro,
.plan-badge.pro {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  border: none !important;
}


/* ── 18. USAGE / PROGRESS BAR ────────────────────────────────────────────────
   The usage meter in account.html overview tab.
   ──────────────────────────────────────────────────────────────────────── */

.usage-bar-track {
  background: var(--accent-light) !important;
}

.usage-bar-fill {
  background: var(--gradient-primary) !important;
}

.usage-label {
  color: var(--text-muted) !important;
}

.usage-count {
  color: var(--accent) !important;
  font-weight: 600;
}


/* ── 19. NOTIFICATIONS / ALERTS ──────────────────────────────────────────────
   Keep status colors semantic (green/red/yellow stay fixed).
   Only info-type alerts pick up the accent.
   ──────────────────────────────────────────────────────────────────────── */

.alert-info,
.status.info {
  background: var(--accent-glow) !important;
  border-color: var(--accent-light) !important;
  color: var(--accent-deep) !important;
}


/* ── 20. MARKETING NAV (index.html / sift landing) ───────────────────────────
   The marketing nav uses the same variable names. This keeps it in sync.
   ──────────────────────────────────────────────────────────────────────── */

.marketing-nav {
  background: var(--bg) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

.marketing-nav .wordmark {
  color: var(--accent) !important;
}

.marketing-nav .nav-link {
  color: var(--text-soft) !important;
}

.marketing-nav .nav-link:hover {
  color: var(--text) !important;
}