/* DMS Platform - Gemeinsames Stylesheet */
/* Wird in head.php eingebunden */

:root {
  --bg:      #0d1117;
  --panel:   #161b22;
  --card:    #1c2330;
  --hover:   #212d3d;
  --active:  #1a3a5c;
  --border:  #2d3748;
  --bact:    #60a5fa;
  --t1:      #e2e8f0;
  --t2:      #8b9ab0;
  --t3:      #8892a4;  /* WCAG AA: 5.0:1 auf card, 6.0:1 auf bg */
  --accent:  #60a5fa;  /* WCAG AAA: 7.4:1 auf bg, 6.2:1 auf card */
  --adim:    #1e3a5f;
  --green:   #22c55e;
  --amber:   #f59e0b;
  --red:     #ef4444;
  --mono:    'IBM Plex Mono', monospace;
  --sans:    'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Tiefe & Schatten */
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
}
[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
}
.modal-content {
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
[data-theme="light"] .modal-content {
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
nav[style*="border-right"] {
  box-shadow: 2px 0 8px rgba(0,0,0,.25);
}
[data-theme="light"] nav[style*="border-right"] {
  box-shadow: 2px 0 8px rgba(0,0,0,.06);
}

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* Typography */
.mono { font-family: var(--mono); }
.text-muted { color: var(--t2) !important; }
.text-dim   { color: var(--t3) !important; }

/* Status-Badges */
.badge-status {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.bs-active    { background: #14532d; color: var(--green); border: 1px solid #166534; }
.bs-trial     { background: #451a03; color: var(--amber); border: 1px solid #78350f; }
.bs-suspended { background: #450a0a; color: var(--red);   border: 1px solid #7f1d1d; }
.bs-cancelled { background: var(--card); color: var(--t3); border: 1px solid var(--border); }

/* Role-Badges */
.rb { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.rb-admin    { background: #1e1b4b; color: #a5b4fc; border: 1px solid #312e81; }
.rb-manager  { background: #1c2d1e; color: #86efac; border: 1px solid #166534; }
.rb-user     { background: var(--card); color: var(--t2); border: 1px solid var(--border); }
.rb-readonly { background: var(--hover); color: var(--t3); border: 1px solid var(--border); }

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.card-header { background: var(--panel); border-bottom: 1px solid var(--border); padding: 12px 16px; }

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--t1);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--hover);
}
.table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t3);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.table td { border-color: var(--border); vertical-align: middle; }

/* Forms */
.form-control, .form-select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 13px;
  border-radius: 5px;
}
.form-control:focus, .form-select:focus {
  background: var(--card);
  border-color: var(--accent);
  color: var(--t1);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
.form-select option { background: var(--panel); }
.form-label {
  font-size: 11px;
  color: var(--t2);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Buttons */
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: #2563eb; border-color: #2563eb; }

/* Modals */
.modal-content { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.modal-header  { border-bottom: 1px solid var(--border); padding: 14px 18px; }
.modal-footer  { border-top:  1px solid var(--border);   padding: 12px 18px; }

/* Toggle-Switch */
.tog { position: relative; width: 32px; height: 18px; display: inline-block; vertical-align: middle; }
.tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.ttr { position: absolute; inset: 0; background: var(--hover); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: background .2s, border-color .2s; }
.tog input:checked ~ .ttr { background: var(--accent); border-color: var(--accent); }
.tth { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--t2); border-radius: 50%; transition: transform .2s, background .2s; pointer-events: none; }
.tog input:checked ~ .ttr .tth { transform: translateX(14px); background: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Storage Bar */
.storage-bar-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.storage-bar-fill  { height: 100%; border-radius: 2px; transition: width .4s ease; }
.sbar-ok   { background: var(--green); }
.sbar-warn { background: var(--amber); }
.sbar-crit { background: var(--red); }
@keyframes sbar-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.sbar-over { background: var(--red); animation: sbar-pulse 1s infinite; }

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME
   Aktiviert durch <html data-theme="light">
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:      #f0f4f8;
  --panel:   #ffffff;
  --card:    #f8fafc;
  --hover:   #eef2f7;
  --active:  #dbeafe;
  --border:  #d1dce8;
  --t1:      #0f172a;
  --t2:      #475569;
  --t3:      #5a6a7e;  /* WCAG AA: 5.0:1 auf bg */
  --accent:  #2563eb;
  --adim:    #bfdbfe;
  --green:   #15803d;  /* WCAG AA: 4.54:1 auf bg */
  --amber:   #b45309;  /* WCAG AA: 4.54:1 auf bg */
  --red:     #b91c1c;  /* WCAG AA: 5.85:1 auf bg */
}

[data-theme="light"] .table {
  --bs-table-hover-bg: var(--hover);
  --bs-table-color: var(--t1);
  --bs-table-border-color: var(--border);
}

[data-theme="light"] .modal-content,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: var(--panel);
  color: var(--t1);
  border-color: var(--border);
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background: var(--panel);
  color: var(--t1);
}

[data-theme="light"] .form-select option {
  background: var(--panel);
  color: var(--t1);
}

[data-theme="light"] .btn-close-white {
  filter: invert(1);
}

[data-theme="light"] .bs-active    { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
[data-theme="light"] .bs-trial     { background: #fef3c7; color: #d97706; border-color: #fde68a; }
[data-theme="light"] .bs-suspended { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
[data-theme="light"] .rb-admin     { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
[data-theme="light"] .rb-manager   { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }

/* Theme-Toggle Button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--t2);
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  transition: color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.theme-toggle:hover { color: var(--t1); border-color: var(--accent); }