/*
 * KENJI AI — TIER THEME SYSTEM
 * =============================
 * 
 * Usage: Add <link rel="stylesheet" href="/css/tier-{tier}.css"> to any page.
 * The tier CSS overrides --accent, --accent-glow, --badge-bg, --badge-text,
 * and tier-specific visual treatments.
 *
 * The base design language (fonts, layout, core colors) lives in each page's
 * own CSS. These tier files ONLY override accent colors and tier-specific elements.
 *
 * Tiers:
 *   tier-glock.css     — Steel/Silver, utilitarian, clean
 *   tier-ruger.css     — Cyan/Electric Blue, power user, precision
 *   tier-de.css        — Gold/Amber, premium, commanding
 *   tier-barrett.css   — Gold+Red, elite, white-glove
 *
 * File: /var/www/kenji/css/tier-themes.css (combined for deployment)
 * Individual files also available at /var/www/kenji/css/tier-{name}.css
 */


/* ============================================================
   BASE TIER VARIABLES (inherited by all tiers)
   ============================================================ */

:root {
  /* Core Kenji palette — never changes */
  --gunmetal: #2B2D31;
  --gunmetal-light: #383A40;
  --gunmetal-dark: #1E2023;
  --chassis: #141517;
  --white: #E8EAED;
  --white-dim: #9DA2AB;
  --white-muted: #6B7280;
  --border: rgba(74,111,165,0.2);
  --border-hover: rgba(74,111,165,0.4);
  
  /* American palette — design system */
  --navy: #1B2A4A;
  --deep-navy: #0F1B33;
  --steel-blue: #2D4A7A;
  --command-red: #C5283D;
  --silver: #B0B8C4;
  --victory-gold: #D4A843;
  --success: #2EA043;
  --warning: #E3A507;
  
  /* Tier-overridable variables — defaults to Glock */
  --accent: #4A6FA5;
  --accent-bright: #5B8ED4;
  --accent-glow: rgba(74,111,165,0.3);
  --accent-subtle: rgba(74,111,165,0.1);
  --badge-bg: rgba(176,184,196,0.15);
  --badge-text: #B0B8C4;
  --badge-border: transparent;
  --tier-name: "GLOCK";
  
  /* Sidebar width — varies by tier */
  --sidebar-width: 240px;
}


/* ============================================================
   GLOCK ($25) — Steel/Silver, Utilitarian
   "The reliable everyday carry"
   ============================================================ */

[data-tier="glock"],
.tier-glock-theme {
  --accent: #4A6FA5;
  --accent-bright: #5B8ED4;
  --accent-glow: rgba(74,111,165,0.3);
  --accent-subtle: rgba(74,111,165,0.08);
  --badge-bg: rgba(176,184,196,0.15);
  --badge-text: #B0B8C4;
  --badge-border: transparent;
  --sidebar-width: 240px;
}

[data-tier="glock"] .tier-badge,
.tier-glock-theme .tier-badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Glock: No persona switcher, no model selector */
[data-tier="glock"] .persona-switcher,
[data-tier="glock"] .model-selector,
[data-tier="glock"] .roundtable-panel {
  display: none;
}

/* Glock: Upgrade nudge bar */
[data-tier="glock"] .upgrade-nudge {
  display: block;
  padding: 8px 16px;
  background: rgba(74,111,165,0.06);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--white-muted);
  text-align: center;
}
[data-tier="glock"] .upgrade-nudge a {
  color: var(--accent-bright);
  text-decoration: none;
  font-weight: 600;
}


/* ============================================================
   RUGER ($100) — Cyan/Electric Blue, Power User
   "The precision instrument"
   ============================================================ */

[data-tier="ruger"],
.tier-ruger-theme {
  --accent: #22D3EE;
  --accent-bright: #67E8F9;
  --accent-glow: rgba(34,211,238,0.25);
  --accent-subtle: rgba(34,211,238,0.06);
  --badge-bg: rgba(34,211,238,0.12);
  --badge-text: #22D3EE;
  --badge-border: transparent;
  --sidebar-width: 260px;
}

[data-tier="ruger"] .tier-badge,
.tier-ruger-theme .tier-badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid rgba(34,211,238,0.25);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Ruger: Persona switcher visible */
[data-tier="ruger"] .persona-switcher {
  display: block;
}
[data-tier="ruger"] .persona-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--chassis);
}

/* Ruger: Active elements use cyan accent */
[data-tier="ruger"] .conv-item.active {
  border-left: 2px solid var(--accent);
  background: var(--accent-subtle);
}

/* Ruger: Skill badge accent */
[data-tier="ruger"] .skill-tag {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(34,211,238,0.2);
}


/* ============================================================
   DESERT EAGLE ($250) — Gold/Amber, Premium
   "The showpiece"
   ============================================================ */

[data-tier="desert_eagle"],
.tier-de-theme {
  --accent: #D4A843;
  --accent-bright: #E8C36A;
  --accent-glow: rgba(212,168,67,0.25);
  --accent-subtle: rgba(212,168,67,0.06);
  --badge-bg: rgba(212,168,67,0.12);
  --badge-text: #D4A843;
  --badge-border: #D4A843;
  --sidebar-width: 280px;
}

[data-tier="desert_eagle"] .tier-badge,
.tier-de-theme .tier-badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid rgba(212,168,67,0.4);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Desert Eagle: Gold accents on active elements */
[data-tier="desert_eagle"] .persona-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--chassis);
}

[data-tier="desert_eagle"] .conv-item.active {
  border-left: 2px solid var(--accent);
  background: var(--accent-subtle);
}

/* Desert Eagle: Premium soul file editor border */
[data-tier="desert_eagle"] .soul-editor {
  border: 1px solid rgba(212,168,67,0.3);
}

/* Desert Eagle: Roundtable panel visible with gold header */
[data-tier="desert_eagle"] .roundtable-panel {
  display: block;
  border: 1px solid rgba(212,168,67,0.2);
}
[data-tier="desert_eagle"] .roundtable-header {
  border-bottom: 1px solid rgba(212,168,67,0.15);
}

/* Desert Eagle: Send button gold */
[data-tier="desert_eagle"] .btn-send {
  background: var(--accent);
  color: var(--chassis);
}
[data-tier="desert_eagle"] .btn-send:hover {
  background: var(--accent-bright);
}


/* ============================================================
   BARRETT (Custom) — Gold + Red, Elite
   "The custom build"
   ============================================================ */

[data-tier="barrett"],
.tier-barrett-theme {
  --accent: #D4A843;
  --accent-bright: #E8C36A;
  --accent-glow: rgba(212,168,67,0.3);
  --accent-subtle: rgba(212,168,67,0.06);
  --badge-bg: rgba(212,168,67,0.08);
  --badge-text: #D4A843;
  --badge-border: #D4A843;
  --sidebar-width: 280px;
}

[data-tier="barrett"] .tier-badge,
.tier-barrett-theme .tier-badge {
  background: rgba(26,20,12,0.6);
  color: var(--victory-gold);
  border: 1px solid var(--victory-gold);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(212,168,67,0.2);
}

/* Barrett: Gold + red accent system */
[data-tier="barrett"] .persona-pill.active {
  background: var(--command-red);
  border-color: var(--command-red);
}

[data-tier="barrett"] .conv-item.active {
  border-left: 2px solid var(--victory-gold);
  background: rgba(212,168,67,0.04);
}

/* Barrett: Custom gold border on persona cards */
[data-tier="barrett"] .persona-card {
  border: 1px solid rgba(212,168,67,0.2);
}
[data-tier="barrett"] .persona-card.active {
  border-color: var(--victory-gold);
  box-shadow: 0 0 12px rgba(212,168,67,0.15);
}

/* Barrett: Roundtable with premium treatment */
[data-tier="barrett"] .roundtable-panel {
  display: block;
  border: 1px solid rgba(212,168,67,0.25);
  background: linear-gradient(135deg, var(--gunmetal-dark) 0%, rgba(212,168,67,0.03) 100%);
}

/* Barrett: White-glove indicator */
[data-tier="barrett"] .sidebar-logo::after {
  content: '★';
  color: var(--victory-gold);
  font-size: 12px;
  margin-left: 6px;
}

/* Barrett: Send button with command red */
[data-tier="barrett"] .btn-send {
  background: var(--command-red);
  color: var(--white);
}

/* Barrett: Model tag shows all tiers accessible */
[data-tier="barrett"] .model-selector {
  display: block;
}

/* Barrett: Premium scrollbar */
[data-tier="barrett"] ::-webkit-scrollbar-thumb {
  background: rgba(212,168,67,0.3);
}
[data-tier="barrett"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(212,168,67,0.5);
}


/* ============================================================
   SHARED TIER UTILITIES
   ============================================================ */

/* Tier badge — universal structure, colors from tier CSS */
.tier-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1.4;
}

/* Upgrade nudge — hidden by default, shown for Glock */
.upgrade-nudge { display: none; }

/* Roundtable — hidden by default, shown for DE+ */
.roundtable-panel { display: none; }

/* Model selector — hidden for Glock, visible for Ruger+ */
[data-tier="glock"] .model-selector { display: none; }
[data-tier="ruger"] .model-selector { display: block; }
[data-tier="desert_eagle"] .model-selector { display: block; }
[data-tier="barrett"] .model-selector { display: block; }

/* Accent-colored elements that respond to tier */
.accent-border { border-color: var(--accent); }
.accent-bg { background: var(--accent); }
.accent-text { color: var(--accent); }
.accent-glow { box-shadow: 0 0 12px var(--accent-glow); }
.accent-subtle-bg { background: var(--accent-subtle); }

/* Active states using tier accent */
.btn-primary {
  background: var(--accent);
  color: var(--chassis);
  border: none;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-bright);
}

/* Selected/active items */
.item-active {
  border-left: 2px solid var(--accent);
  background: var(--accent-subtle);
}

/* Progress bars */
.progress-fill {
  background: var(--accent);
}

/* Focus rings */
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  outline: none;
}


/* ============================================================
   TIER-BASED FEATURE VISIBILITY
   ============================================================ */

/* Features hidden at lower tiers */
.feature-ruger { display: none; }
.feature-de { display: none; }
.feature-barrett { display: none; }

[data-tier="ruger"] .feature-ruger,
[data-tier="desert_eagle"] .feature-ruger,
[data-tier="barrett"] .feature-ruger { display: block; }

[data-tier="desert_eagle"] .feature-de,
[data-tier="barrett"] .feature-de { display: block; }

[data-tier="barrett"] .feature-barrett { display: block; }

/* Locked feature overlay — shown when tier doesn't have access */
.feature-locked {
  position: relative;
  opacity: 0.35;
  pointer-events: none;
}
.feature-locked::after {
  content: '🔒 Upgrade to unlock';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--warning);
  white-space: nowrap;
  pointer-events: none;
}


/* ============================================================
   JAVASCRIPT HELPER
   ============================================================
   
   Apply tier theme to any page:
   
   <script>
   (function() {
     var tier = 'glock';
     try {
       var token = localStorage.getItem('access_token');
       if (token) {
         var payload = JSON.parse(atob(token.split('.')[1]));
         tier = payload.tier || 'glock';
       }
     } catch(e) {}
     document.documentElement.setAttribute('data-tier', tier);
   })();
   </script>
   
   ============================================================ */