/* ============================================================
   License Manager – Theme System  v1.3.0
   dark  = schwarz/gold (ursprüngliches Innsiders-Design)
   blue  = dunkel indigo/slate
   light = hell
============================================================ */

/* ── DARK: Schwarz + Primary-Akzent (innsiders = legacy alias) ── */
[data-theme="dark"],
[data-theme="innsiders"] {
  --bg:         #0a0a0a;
  --bg-2:       #111111;
  --bg-card:    rgba(255,255,255,.04);
  --bg-hover:   rgba(255,255,255,.06);
  --border:     rgba(255,255,255,.08);
  --border-2:   rgba(255,255,255,.15);
  --text:       #e2e4e8;
  --text-muted: #71747d;
  --text-head:  #ffffff;
  --sidebar-bg: #080808;
  --card-bg:    rgba(255,255,255,.04);
}

/* ── BLUE: Indigo/Slate dunkel ────────────────────────────── */
[data-theme="blue"] {
  --bg:         #0f172a;
  --bg-2:       #1e293b;
  --bg-card:    rgba(30,41,59,.85);
  --bg-hover:   rgba(255,255,255,.05);
  --border:     rgba(255,255,255,.09);
  --border-2:   rgba(255,255,255,.17);
  --text:       #cbd5e1;
  --text-muted: #64748b;
  --text-head:  #f1f5f9;
  --sidebar-bg: #0c1526;
  --card-bg:    rgba(30,41,59,.7);
}

/* ── LIGHT ────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:         #eef0f3;
  --bg-2:       #e4e6ea;
  --bg-card:    #ffffff;
  --bg-hover:   rgba(0,0,0,.05);
  --border:     rgba(0,0,0,.12);
  --border-2:   rgba(0,0,0,.22);
  --text:       #111827;     /* near-black — strong contrast */
  --text-muted: #4b5563;     /* darker muted — still clearly readable */
  --text-head:  #030712;     /* deepest black for headings */
  --sidebar-bg: #f9fafb;
  --card-bg:    #ffffff;
}

/* ── GEMEINSAM ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; margin:0; }

/* Sidebar */
#sidebar {
  position:fixed; top:0; left:0; height:100%; width:240px;
  background:var(--sidebar-bg); border-right:1px solid var(--border);
  z-index:50; transform:translateX(-100%); transition:transform .25s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
#sidebar.open { transform:translateX(0); }
@media(min-width:1024px) {
  #sidebar { transform:translateX(0) !important; }
  .main-wrap { margin-left:240px; }
  .mobile-only { display:none !important; }
}
@media(max-width:1023px) { .desktop-only { display:none !important; } }

#overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:40; }

/* Nav */
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  font-size:.875rem; color:var(--text-muted);
  transition:all .15s; text-decoration:none;
}
.nav-link:hover  { color:var(--text-head); background:var(--bg-hover); }
.nav-link.active { color:var(--primary); background:var(--primary-dim); }

/* Cards */
.card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:20px; transition:border-color .15s; }
.card:hover { border-color:var(--border-2); }
.card.accent { border-color:color-mix(in srgb,var(--primary) 40%,transparent); background:color-mix(in srgb,var(--primary) 6%,transparent); }
[data-theme="light"] .card { box-shadow:0 1px 4px rgba(0,0,0,.07); }

/* Inputs */
.inp { width:100%; background:var(--bg-hover); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:.875rem; color:var(--text); transition:border-color .15s; font-family:inherit; }
.inp:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.inp:disabled { opacity:.35; cursor:not-allowed; }
.inp option { background:var(--bg-2); color:var(--text); }
[data-theme="light"] .inp { background:#fff; border-color:rgba(0,0,0,.16); color:#111827; }
[data-theme="light"] .inp::placeholder { color:#9ca3af; }

/* Buttons */
.btn { background:var(--primary); color:var(--primary-text,#000); font-weight:600; padding:10px 20px; border-radius:10px; font-size:.875rem; border:none; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; }
.btn:hover { filter:brightness(1.08); box-shadow:0 4px 20px var(--primary-glow); }

.btn-ghost { background:transparent; color:var(--text-muted); padding:10px 16px; border-radius:10px; font-size:.875rem; border:1px solid var(--border); cursor:pointer; transition:all .15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-ghost:hover { color:var(--text-head); border-color:var(--border-2); background:var(--bg-hover); }
[data-theme="light"] .btn-ghost { color:#374151; border-color:rgba(0,0,0,.18); }
[data-theme="light"] .btn-ghost:hover { color:#030712; }

.btn-danger { background:rgba(239,68,68,.1); color:#dc2626; border:1px solid rgba(239,68,68,.3); padding:8px 16px; border-radius:8px; font-size:.8rem; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:5px; }
.btn-danger:hover { background:rgba(239,68,68,.2); }
[data-theme="dark"] .btn-danger { color:#f87171; }
[data-theme="blue"] .btn-danger { color:#f87171; }

/* Icon buttons — größer als zuvor */
.ib { padding:8px; border-radius:8px; color:var(--text-muted); transition:color .15s; cursor:pointer; background:none; border:none; display:inline-flex; align-items:center; }
.ib:hover        { color:var(--primary); }
.ib.danger:hover { color:#f87171; }
.ib.edit:hover   { color:#60a5fa; }
[data-theme="light"] .ib              { color:#6b7280; }
[data-theme="light"] .ib:hover        { color:var(--primary); }
[data-theme="light"] .ib.danger:hover { color:#dc2626; }
[data-theme="light"] .ib.edit:hover   { color:#2563eb; }

/* Table */
table { border-collapse:collapse; width:100%; }
thead th {
  background:var(--bg-hover);
  font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted);
  padding:12px 16px; text-align:left;
  white-space:nowrap;
  user-select:none;
}
thead th.sortable {
  cursor:pointer;  /* ← Zeigt Hand-Cursor beim Hover */
}
thead th.sortable:hover { color:var(--text-head); }
thead th.sort-asc::after  { content:' ↑'; color:var(--primary); }
thead th.sort-desc::after { content:' ↓'; color:var(--primary); }
[data-theme="light"] thead th { color:#374151; background:#f3f4f6; }
[data-theme="light"] thead th.sortable:hover { color:#030712; }
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:hover { background:var(--bg-hover); }
tbody td { padding:13px 16px; font-size:.875rem; }
[data-theme="light"] tbody td { color:#111827; }

/* Status badges */
.badge { font-size:.7rem; padding:4px 10px; border-radius:20px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
/* Light: dunklere Farben für genug Kontrast auf weiß */
.badge-aktiv      { background:rgba(16,185,129,.12);  color:#065f46; border:1px solid rgba(16,185,129,.35); }
.badge-archiviert { background:rgba(107,114,128,.12); color:#374151; border:1px solid rgba(107,114,128,.35); }
.badge-beendet    { background:rgba(107,114,128,.12); color:#374151; border:1px solid rgba(107,114,128,.35); }
.badge-gekuendigt { background:rgba(239,68,68,.12);   color:#991b1b; border:1px solid rgba(239,68,68,.35); }
.badge-vorgemerkt { background:rgba(139,92,246,.12);  color:#5b21b6; border:1px solid rgba(139,92,246,.35); }
/* Dark/Blue: helle Farben sichtbar auf dunklem BG */
[data-theme="dark"] .badge-aktiv,
[data-theme="blue"] .badge-aktiv      { color:#34d399; }
[data-theme="dark"] .badge-archiviert,
[data-theme="blue"] .badge-archiviert { color:#9ca3af; }
[data-theme="dark"] .badge-beendet,
[data-theme="blue"] .badge-beendet    { color:#9ca3af; }
[data-theme="dark"] .badge-gekuendigt,
[data-theme="blue"] .badge-gekuendigt { color:#f87171; }
[data-theme="dark"] .badge-vorgemerkt,
[data-theme="blue"] .badge-vorgemerkt { color:#a78bfa; }

/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; z-index:60; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--bg-2); border:1px solid var(--border-2); border-radius:20px; padding:28px; width:100%; max-width:600px; max-height:90vh; overflow-y:auto; }
[data-theme="light"] .modal-box { background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.18); border-color:rgba(0,0,0,.14); }

/* Topbar */
.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:60px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
[data-theme="light"] .topbar { background:rgba(249,250,251,.96); border-bottom-color:rgba(0,0,0,.10); }

.page-header { padding:16px 0 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }

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

.pw-mask { letter-spacing:.2em; }

/* Flash */
.flash-bar { padding:12px 16px; border-radius:12px; font-size:.875rem; display:flex; align-items:center; gap:10px; }
.flash-success { background:rgba(16,185,129,.1);  border:1px solid rgba(16,185,129,.3); color:#065f46; }
.flash-error   { background:rgba(239,68,68,.1);   border:1px solid rgba(239,68,68,.3);  color:#991b1b; }
[data-theme="dark"] .flash-success,
[data-theme="blue"] .flash-success { color:#34d399; }
[data-theme="dark"] .flash-error,
[data-theme="blue"] .flash-error   { color:#f87171; }

/* Logo */
.sidebar-logo-img { width:36px; height:36px; object-fit:contain; border-radius:8px; }
.sidebar-logo-svg { width:36px; height:36px; flex-shrink:0; padding:5px; background:var(--bg); border:1px solid color-mix(in srgb,var(--primary) 40%,transparent); border-radius:10px; }

/* Settings */
.settings-section { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:24px; margin-bottom:20px; }
.settings-section h3 { font-size:1rem; font-weight:600; color:var(--text-head); margin:0 0 16px; }
[data-theme="light"] .settings-section { box-shadow:0 1px 4px rgba(0,0,0,.06); }