/* ── Light Theme - Clean & Professional ──────────────────────────────────── */

:root {
  /* Light Mode Base - Helle Grautöne */
  --bg-base:        #f5f5f5;
  --bg-surface:     #ffffff;
  --bg-elevated:    #fafafa;
  --bg-hover:       #f0f0f0;
  --bg-glass:       rgba(255,255,255,.85);
  
  /* Accent - Rot (Light Mode) */
  --accent:         #ef4444;
  --accent-light:   #f87171;
  --accent-dim:     #dc2626;
  --accent-glow:    rgba(239,68,68,.2);
  
  /* Text Colors */
  --text-primary:   #171717;
  --text-secondary: #525252;
  --text-muted:     #a3a3a3;
  
  /* Borders */
  --border:         rgba(0,0,0,.1);
  --border-accent:  rgba(239,68,68,.3);
  --shadow:         0 30px 60px rgba(0,0,0,.1);
  --shadow-sm:      0 2px 20px rgba(0,0,0,.05);
  
  /* Code/Pre Text */
  --code-text:      #404040;
  --code-bg:        #f5f5f5;
  
  /* Component Colors */
  --primary:        #ef4444;
  --primary-hover:  #dc2626;
  --primary-bg:     rgba(239,68,68,.1);
  --primary-border: rgba(239,68,68,.3);
  
  --success:        #16a34a;
  --success-hover:  #15803d;
  --success-bg:     rgba(22,163,74,.1);
  --success-border: rgba(22,163,74,.3);
  
  --warning:        #ea580c;
  --warning-hover:  #c2410c;
  --warning-bg:     rgba(234,88,12,.1);
  --warning-border: rgba(234,88,12,.3);
  
  --danger:         #dc2626;
  --danger-hover:   #b91c1c;
  --danger-bg:      rgba(220,38,38,.1);
  --danger-border:  rgba(220,38,38,.3);
  
  --info:           #0ea5e9;
  --info-hover:     #0284c7;
  --info-bg:        rgba(14,165,233,.1);
  --info-border:    rgba(14,165,233,.3);
  
  --secondary:      #737373;
  --secondary-hover:#525252;
  --secondary-bg:   rgba(115,115,115,.1);
  --secondary-border: rgba(115,115,115,.2);
}

/* ── Button Overrides ────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  box-shadow: 0 2px 10px var(--accent-glow) !important;
}
.btn-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--success) !important;
  color: #fff !important;
  border: 1px solid var(--success) !important;
}
.btn-success:hover {
  background: var(--success-hover) !important;
  border-color: var(--success-hover) !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--warning) !important;
  color: #fff !important;
  border: 1px solid var(--warning) !important;
}
.btn-warning:hover {
  background: var(--warning-hover) !important;
  border-color: var(--warning-hover) !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--danger) !important;
  color: #fff !important;
  border: 1px solid var(--danger) !important;
}
.btn-danger:hover {
  background: var(--danger-hover) !important;
  border-color: var(--danger-hover) !important;
  color: #fff !important;
}

.btn-info {
  background: var(--info) !important;
  color: #fff !important;
  border: 1px solid var(--info) !important;
}
.btn-info:hover {
  background: var(--info-hover) !important;
  border-color: var(--info-hover) !important;
  color: #fff !important;
}

.btn-secondary {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover {
  background: var(--bg-hover) !important;
  border-color: var(--text-muted) !important;
  color: var(--text-primary) !important;
}

/* ── Card Headers ────────────────────────────────────────────────────────── */

.card-header.bg-primary  { 
  background: var(--primary-bg) !important; 
  border-bottom-color: var(--primary-border) !important; 
  color: var(--primary) !important; 
}

.card-header.bg-success  { 
  background: var(--success-bg) !important; 
  border-bottom-color: var(--success-border) !important; 
  color: var(--success) !important; 
}

.card-header.bg-warning  { 
  background: var(--warning-bg) !important; 
  border-bottom-color: var(--warning-border) !important; 
  color: var(--warning) !important; 
}

.card-header.bg-danger   { 
  background: var(--danger-bg) !important; 
  border-bottom-color: var(--danger-border) !important; 
  color: var(--danger) !important; 
}

.card-header.bg-info     { 
  background: var(--info-bg) !important; 
  border-bottom-color: var(--info-border) !important; 
  color: var(--info) !important; 
}

.card-header.bg-secondary,
.card-header.bg-dark { 
  background: var(--bg-elevated) !important; 
  color: var(--text-primary) !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge.bg-primary   { background: var(--primary-bg) !important; color: var(--primary) !important; }
.badge.bg-success   { background: var(--success-bg) !important; color: var(--success) !important; }
.badge.bg-warning   { background: var(--warning-bg) !important; color: var(--warning) !important; }
.badge.bg-danger    { background: var(--danger-bg) !important; color: var(--danger) !important; }
.badge.bg-info      { background: var(--info-bg) !important; color: var(--info) !important; }
.badge.bg-secondary { background: var(--secondary-bg) !important; color: var(--secondary) !important; }
.badge.bg-dark      { background: var(--secondary-bg) !important; color: var(--text-secondary) !important; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert-success  { background: var(--success-bg) !important; border-color: var(--success-border) !important; color: var(--success) !important; }
.alert-danger   { background: var(--danger-bg) !important; border-color: var(--danger-border) !important; color: var(--danger) !important; }
.alert-warning  { background: var(--warning-bg) !important; border-color: var(--warning-border) !important; color: var(--warning) !important; }
.alert-info     { background: var(--info-bg) !important; border-color: var(--info-border) !important; color: var(--info) !important; }

/* ── Active Nav Link ─────────────────────────────────────────────────────── */

.nav-link.active {
  color: var(--accent) !important;
  background: var(--primary-bg) !important;
}

/* ── Modal Close Button ──────────────────────────────────────────────────── */

.btn-close { 
  filter: invert(0) opacity(.5) !important; 
}
.btn-close:hover {
  filter: invert(0) opacity(.8) !important;
}

/* ── Table Styles (Light Theme) ─────────────────────────────────────────── */

.table {
  color: var(--text-primary);
  margin-bottom: 0;
}

.table th {
  border-top: none;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 1rem;
  background: transparent;
}

.table td {
  border-bottom: 1px solid var(--border);
  padding: 1rem;
  vertical-align: middle;
  color: var(--text-secondary);
  font-size: 14px;
  background: var(--bg-surface);
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td {
  background: var(--bg-elevated);
  color: var(--text-primary);
}