/*
 * enterprise.css — Warm Enterprise Design System
 * Claude (Anthropic) + Volkswagen AG — "Warm Enterprise"
 * LÅST 2026-05-01 av Erik Svensson. Obrytbar.
 * Version: 2.0
 */

/* ═══════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── Bakgrund — Claude warmth ── */
  --bg-body:          #FAF9F6;
  --bg-section:       #F3F0EB;
  --bg-card:          #FFFFFF;
  --bg-input:         #FFFFFF;
  --bg-hover:         #F3F0EB;

  /* ── Navigation — VW Navy ── */
  --nav-bg:           #001E50;
  --nav-text:         #FFFFFF;
  --nav-text-muted:   rgba(255,255,255,0.55);
  --nav-hover:        rgba(200,118,58,0.18);
  --nav-active:       #C8763A;
  --nav-border:       rgba(255,255,255,0.10);

  /* ── Text ── */
  --text-primary:     #001E50;
  --text-secondary:   #3D4F6E;
  --text-muted:       #7A7570;
  --text-placeholder: #B0ABA5;

  /* ── Accent — Claude amber ── */
  --accent:           #C8763A;
  --accent-hover:     #A85F28;
  --accent-light:     #F5E8D8;
  --accent-border:    rgba(200,118,58,0.30);

  /* ── Borders ── */
  --border:           #E8E3DC;
  --border-strong:    #C8BFB5;
  --border-focus:     #001E50;

  /* ── Status ── */
  --green:            #1A7A4A;
  --green-bg:         #EDF7F2;
  --green-border:     rgba(26,122,74,0.25);
  --red:              #B83030;
  --red-bg:           #FDF0F0;
  --red-border:       rgba(184,48,48,0.25);
  --amber:            #C8763A;
  --amber-bg:         #FDF3E8;
  --amber-border:     rgba(200,118,58,0.25);
  --blue:             #0040C1;
  --blue-bg:          #EEF3FC;
  --blue-border:      rgba(0,64,193,0.20);

  /* ── Shadows ── */
  --shadow-xs:        0 1px 2px rgba(0,30,80,0.04);
  --shadow-sm:        0 1px 4px rgba(0,30,80,0.07);
  --shadow-md:        0 3px 12px rgba(0,30,80,0.10);
  --shadow-lg:        0 8px 32px rgba(0,30,80,0.13);
  --shadow-focus:     0 0 0 3px rgba(0,30,80,0.12);

  /* ── Typography ── */
  --font:             'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-size-xs:     0.70rem;
  --font-size-sm:     0.82rem;
  --font-size-base:   0.94rem;
  --font-size-md:     1.05rem;
  --font-size-lg:     1.20rem;
  --font-size-xl:     1.45rem;
  --font-size-2xl:    1.80rem;
  --font-size-3xl:    2.40rem;
  --line-height:      1.6;
  --line-height-tight:1.25;

  /* ── Spacing ── */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10:40px;  --space-12:48px;

  /* ── Shape ── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill:999px;

  /* ── Transitions ── */
  --transition:      0.18s cubic-bezier(0.4,0,0.2,1);
  --transition-fast: 0.10s cubic-bezier(0.4,0,0.2,1);

  /* ── Legacy remapping (dashboards + tv.html) ── */
  --bg:            #FAF9F6;
  --surface:       #F3F0EB;
  --surface2:      #FFFFFF;
  --surface3:      #FFFFFF;
  --panel:         #FFFFFF;
  --border2:       #C8BFB5;
  --text:          #001E50;
  --text2:         #3D4F6E;
  --text3:         #7A7570;
  --gold:          #C8763A;
  --gold-dim:      rgba(200,118,58,0.12);
  --gold-bd:       rgba(200,118,58,0.28);
  --green-dim:     rgba(26,122,74,0.12);
  --amber-dim:     rgba(200,118,58,0.12);
  --red-dim:       rgba(184,48,48,0.12);
  --dark:          #001E50;
  --accent2:       #A85F28;
  --yellow:        #C8763A;
  --yellow-dim:    rgba(200,118,58,0.12);
  --blue-dim:      rgba(0,64,193,0.12);
  --navy:          #001E50;
  --navy2:         #00296B;
  --navy3:         #003080;
  --navy-light:    #0040C1;
  --muted:         #7A7570;
  --white:         #FFFFFF;
  --highest:       #B83030;
  --high:          #C8763A;
  --medium:        #0040C1;
  --low:           #1A7A4A;

  /* aamos.css vars */
  --aamos-bg-primary:    #FAF9F6;
  --aamos-bg-secondary:  #F3F0EB;
  --aamos-bg-elevated:   #F3F0EB;
  --aamos-bg-card:       #FFFFFF;
  --aamos-border:        #E8E3DC;
  --aamos-text-primary:  #001E50;
  --aamos-text-secondary:#3D4F6E;
  --aamos-text-muted:    #7A7570;
  --aamos-gold:          #C8763A;
  --aamos-gold-bright:   #C8763A;
  --aamos-green:         #1A7A4A;
  --aamos-red:           #B83030;
}

/* ═══════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background:   var(--bg-body) !important;
  color:        var(--text-primary) !important;
  font-family:  var(--font) !important;
  font-size:    var(--font-size-base);
  line-height:  var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Block any residual dark backgrounds ── */
body[style*="background:#0a"],
body[style*="background: #0a"],
body[style*="background:#1a"],
body[style*="background: #1a"] {
  background: var(--bg-body) !important;
}

/* ═══════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font);
  color:        var(--text-primary);
  font-weight:  700;
  line-height:  var(--line-height-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl);  }
h4 { font-size: var(--font-size-lg);  }
h5 { font-size: var(--font-size-md);  font-weight: 600; }
h6 { font-size: var(--font-size-base);font-weight: 600; }

p  { color: var(--text-secondary); margin-bottom: var(--space-4); }
a  { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

.label, .caption {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
code, .mono { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════
   4. NAVIGATION — VW Navy sidebars & topbars
   ═══════════════════════════════════════════════════════ */

/* Dynasty dashboards (.dy-*) */
.dy-sidebar {
  background: var(--nav-bg) !important;
  border-right: 1px solid var(--nav-border) !important;
}
.dy-crown, .dy-head-section {
  border-bottom: 1px solid var(--nav-border) !important;
  color: var(--nav-text) !important;
}
.dy-foot {
  border-top: 1px solid var(--nav-border) !important;
}
.dy-sec {
  color: rgba(255,255,255,0.40) !important;
  font-size: var(--font-size-xs) !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
}
.dy-item {
  color: rgba(255,255,255,0.80) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
}
.dy-item:hover, .dy-item.on {
  background: var(--nav-hover) !important;
  color: #FFFFFF !important;
}
.dy-item.on {
  border-left: 3px solid var(--accent) !important;
}
.dy-topbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}
.dy-tb-sep { background: rgba(255,255,255,0.12) !important; }
.dy-tb-greet, .dy-tb-title { color: rgba(255,255,255,0.80) !important; }
.dy-tb-time, .dy-tb-meta  { color: rgba(255,255,255,0.45) !important; }

/* TV header/footer */
.tv-hdr { background: var(--nav-bg) !important; border-bottom: 1px solid var(--nav-border) !important; }
.tv-ftr { background: var(--nav-bg) !important; border-top:    1px solid var(--nav-border) !important; }
.tv-brand-name { color: var(--accent) !important; }
.tv-brand-sub  { color: rgba(255,255,255,0.50) !important; }
.tv-clock-time { color: #FFFFFF !important; }
.tv-clock-date { color: rgba(255,255,255,0.55) !important; }
.tv-view-name  { color: rgba(255,255,255,0.70) !important; }
.tv-view-num   { color: rgba(255,255,255,0.40) !important; }
.tv-ftr-left, .tv-ftr-right { color: rgba(255,255,255,0.45) !important; }
.tv-btn        { border-color: rgba(255,255,255,0.20) !important; color: rgba(255,255,255,0.70) !important; }
.tv-btn:hover  { background: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; }
.tv-dot        { background: rgba(255,255,255,0.25) !important; }
.tv-dot.on     { background: var(--accent) !important; }
.tv-progress-bar { background: var(--accent) !important; }
.tv-progress-wrap { background: rgba(255,255,255,0.12) !important; }
.tv-live       { background: rgba(26,122,74,0.18) !important; border-color: rgba(26,122,74,0.40) !important; color: #4ABA7A !important; }
.tv-live-dot   { background: #4ABA7A !important; }

/* Generic topbars */
.topbar, .header-bar, nav.navbar, .sidebar {
  background: var(--nav-bg) !important;
  color:      var(--nav-text) !important;
}

/* ═══════════════════════════════════════════════════════
   5. CONTENT AREA
   ═══════════════════════════════════════════════════════ */
.dy-content, .dy-chat-view, .main-content, .content-area, .page-content {
  background: var(--bg-body) !important;
}
.dy-hero-h1, .page-title {
  color: var(--text-primary) !important;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dy-hero-lead, .page-lead { color: var(--text-secondary) !important; }
.dy-hero-eye, .accent-text { color: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════
   6. CARDS & PANELS
   ═══════════════════════════════════════════════════════ */
.card, .panel, .dy-kpi, .kpi-card, .stat-card, .info-card,
.hero-card, .team-card, .svc-card, .service-card, .metric-card {
  background:    var(--bg-card) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    var(--shadow-sm) !important;
  transition:    box-shadow var(--transition), border-color var(--transition);
}
.card:hover, .panel:hover, .dy-kpi:hover, .hero-card:hover {
  box-shadow:    var(--shadow-md) !important;
  border-color:  var(--border-strong) !important;
}

/* KPI values */
.dy-kpi-val, .kpi-value, .stat-value, .metric-value {
  color:       var(--text-primary) !important;
  font-weight: 800 !important;
}
.dy-kpi.warn .dy-kpi-val, .kpi-warn  { color: var(--amber) !important; }
.dy-kpi.crit .dy-kpi-val, .kpi-crit  { color: var(--red)   !important; }
.dy-kpi.live .dy-kpi-val, .kpi-live  { color: var(--green)  !important; }
.dy-kpi-label, .kpi-label, .stat-label { color: var(--text-muted) !important; font-size: var(--font-size-xs) !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; }
.dy-kpi-sub, .kpi-sub                  { color: var(--text-secondary) !important; }

/* Section headings */
.dy-sh, .section-heading, .view-label {
  color:          var(--text-muted) !important;
  font-size:      var(--font-size-xs) !important;
  font-weight:    800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════
   7. BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn, button.primary, .dy-send-btn, .action-btn {
  background:    var(--accent) !important;
  color:         #FFFFFF !important;
  border:        none !important;
  border-radius: var(--radius) !important;
  font-family:   var(--font) !important;
  font-size:     var(--font-size-sm) !important;
  font-weight:   600 !important;
  letter-spacing:0.02em !important;
  padding:       10px 20px !important;
  cursor:        pointer !important;
  transition:    background var(--transition), box-shadow var(--transition) !important;
  box-shadow:    var(--shadow-xs) !important;
}
.btn:hover, button.primary:hover, .dy-send-btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-secondary, button.secondary {
  background:   transparent !important;
  color:        var(--text-primary) !important;
  border:       1px solid var(--border-strong) !important;
  border-radius:var(--radius) !important;
  font-family:  var(--font) !important;
  font-weight:  600 !important;
  padding:      9px 19px !important;
  transition:   all var(--transition) !important;
}
.btn-secondary:hover { background: var(--bg-section) !important; border-color: var(--text-primary) !important; }

/* Quick-action buttons */
.dy-qa-btn {
  background:   var(--bg-card) !important;
  border:       1px solid var(--border) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:   var(--shadow-xs) !important;
  transition:   all var(--transition) !important;
}
.dy-qa-btn:hover {
  border-color: var(--accent) !important;
  background:   var(--accent-light) !important;
  box-shadow:   var(--shadow-sm) !important;
}
.dy-qa-lbl { color: var(--text-primary) !important; font-weight: 600 !important; }
.dy-qa-sub  { color: var(--text-muted)  !important; }

/* ═══════════════════════════════════════════════════════
   8. FORMS & INPUTS
   ═══════════════════════════════════════════════════════ */
input, textarea, select {
  background:   var(--bg-input) !important;
  color:        var(--text-primary) !important;
  border:       1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  font-family:  var(--font) !important;
  font-size:    var(--font-size-base) !important;
  padding:      10px 14px !important;
  transition:   border-color var(--transition), box-shadow var(--transition) !important;
  outline:      none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--border-focus) !important;
  box-shadow:   var(--shadow-focus) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-placeholder) !important;
}

.dy-input-box {
  background:    var(--bg-card) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    var(--shadow-sm) !important;
}
.dy-input-box textarea {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.dy-input-box textarea::placeholder { color: var(--text-placeholder) !important; }

/* ═══════════════════════════════════════════════════════
   9. TABLES
   ═══════════════════════════════════════════════════════ */
table {
  background:    var(--bg-card);
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        1px solid var(--border);
  width:         100%;
  border-collapse: collapse;
}
thead tr {
  background: var(--bg-section) !important;
}
thead th {
  color:          var(--text-muted) !important;
  font-size:      var(--font-size-xs) !important;
  font-weight:    700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding:        12px 16px !important;
  border-bottom:  1px solid var(--border) !important;
}
tbody td {
  color:         var(--text-primary) !important;
  font-size:     var(--font-size-sm) !important;
  padding:       12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
tbody tr:hover { background: var(--bg-hover) !important; }
tbody tr:last-child td { border-bottom: none !important; }

/* ═══════════════════════════════════════════════════════
   10. BADGES & STATUS
   ═══════════════════════════════════════════════════════ */
.badge, .status-badge, .tag {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 10px;
  border-radius: var(--radius-pill);
  font-size:     var(--font-size-xs);
  font-weight:   700;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.badge-green, .status-live, .status-ok  { background: var(--green-bg)  !important; color: var(--green)  !important; border: 1px solid var(--green-border)  !important; }
.badge-red,   .status-error, .status-off{ background: var(--red-bg)    !important; color: var(--red)    !important; border: 1px solid var(--red-border)    !important; }
.badge-amber, .status-warn              { background: var(--amber-bg)  !important; color: var(--amber)  !important; border: 1px solid var(--amber-border)  !important; }
.badge-blue,  .status-info              { background: var(--blue-bg)   !important; color: var(--blue)   !important; border: 1px solid var(--blue-border)   !important; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-on, .dot.green  { background: var(--green)  !important; box-shadow: 0 0 6px rgba(26,122,74,.45) !important; }
.dot.warn, .dot-warn { background: var(--amber)  !important; box-shadow: 0 0 6px rgba(200,118,58,.45) !important; }
.dot-off, .dot.red   { background: var(--red)    !important; box-shadow: 0 0 6px rgba(184,48,48,.45)  !important; }

/* Team badges */
.team-badge.active  { background: var(--green-bg)  !important; border-color: var(--green-border) !important; color: var(--green)  !important; }
.team-badge.inactive{ background: var(--bg-section)!important; border-color: var(--border)       !important; color: var(--text-muted)!important; }
.team-badge.ai      { background: var(--amber-bg)  !important; border-color: var(--accent-border)!important; color: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════
   11. CHAT INTERFACE
   ═══════════════════════════════════════════════════════ */
.amos .bubble, .msg-amos .bubble, .assistant .bubble {
  background:    var(--bg-section) !important;
  border:        1px solid var(--border) !important;
  color:         var(--text-primary) !important;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg) !important;
}
.user .bubble, .msg-user .bubble {
  background:    var(--nav-bg) !important;
  color:         #FFFFFF !important;
  border:        none !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg) !important;
}
.thinking-bub {
  background:  var(--bg-section) !important;
  border-color:var(--border) !important;
  color:       var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════
   12. ACTIVITY FEED
   ═══════════════════════════════════════════════════════ */
.dy-act-item, .activity-item {
  background:   var(--bg-card) !important;
  border:       1px solid var(--border) !important;
  border-radius:var(--radius-md) !important;
  transition:   box-shadow var(--transition) !important;
}
.dy-act-item:hover { box-shadow: var(--shadow-sm) !important; }
.dy-act-title, .activity-title { color: var(--text-primary)   !important; font-weight: 600 !important; }
.dy-act-time,  .activity-time  { color: var(--text-muted)     !important; }

/* ═══════════════════════════════════════════════════════
   13. SCROLLBARS — Clean enterprise style
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--bg-section); }
::-webkit-scrollbar-thumb        { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════
   14. PROGRESS & CHARTS
   ═══════════════════════════════════════════════════════ */
.progress-bar, .bar-fill, .team-bar-fill {
  background: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
}
.progress-track, .bar-track, .team-bar-wrap {
  background: var(--bg-section) !important;
  border-radius: var(--radius-pill) !important;
}
.progress-track.green .bar-fill { background: var(--green) !important; }
.progress-track.red   .bar-fill { background: var(--red)   !important; }

/* EKG / sparkline */
.ekg-line path, .sparkline path { stroke: var(--accent) !important; }
.ekg-grid line { stroke: var(--border) !important; }

/* ═══════════════════════════════════════════════════════
   15. DIVIDERS & SEPARATORS
   ═══════════════════════════════════════════════════════ */
hr, .divider, .separator {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: var(--space-6) 0 !important;
}

/* ═══════════════════════════════════════════════════════
   16. MODALS & OVERLAYS
   ═══════════════════════════════════════════════════════ */
.modal, .dialog, .overlay-content {
  background:    var(--bg-card) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow:    var(--shadow-lg) !important;
  color:         var(--text-primary) !important;
}
.modal-overlay, .dialog-overlay {
  background: rgba(0,30,80,0.40) !important;
  backdrop-filter: blur(4px) !important;
}
.modal-header { border-bottom: 1px solid var(--border) !important; }
.modal-footer { border-top:    1px solid var(--border) !important; }

/* ═══════════════════════════════════════════════════════
   17. TOOLTIPS
   ═══════════════════════════════════════════════════════ */
.tooltip, [data-tooltip]::after {
  background:    var(--nav-bg) !important;
  color:         #FFFFFF !important;
  border-radius: var(--radius-sm) !important;
  font-size:     var(--font-size-xs) !important;
  font-weight:   600 !important;
  padding:       5px 10px !important;
  box-shadow:    var(--shadow-md) !important;
}

/* ═══════════════════════════════════════════════════════
   18. SPECIFIC PAGES
   ═══════════════════════════════════════════════════════ */

/* Launch countdown (hero) */
.launch-num { color: var(--accent) !important; }
.launch-tag, .launch-unit, .launch-product { color: rgba(200,118,58,0.65) !important; }
.hero-launch {
  background: linear-gradient(160deg, var(--bg-section), var(--bg-body)) !important;
  border-color: var(--accent-border) !important;
}

/* Team cards */
.team-avatar  { background: var(--bg-section) !important; color: var(--text-primary) !important; }
.team-name    { color: var(--text-primary) !important; font-weight: 800 !important; }
.team-role    { color: var(--text-muted)   !important; }
.team-commits { color: var(--accent)       !important; }
.team-card.is-ai { background: var(--accent-light) !important; border-color: var(--accent-border) !important; }

/* Banking view */
.bank-card, .bank-total-main {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}
.bank-total-sec  { color: var(--text-muted) !important; }
.bank-footer     { color: var(--text-muted) !important; font-size: var(--font-size-xs) !important; }
.banking-outer .hero-card { background: var(--bg-card) !important; }

/* Services */
.svc-hero-name { color: var(--text-primary) !important; font-weight: 700 !important; }
.svc-dot       { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   19. PRINT
   ═══════════════════════════════════════════════════════ */
@media print {
  body { background: #FFFFFF !important; color: #000000 !important; }
  .dy-sidebar, .tv-hdr, .tv-ftr, nav { display: none !important; }
  .card, .panel { box-shadow: none !important; border: 1px solid #CCCCCC !important; }
}