/* ========= Theme Variables ========= */

:root {
  /* --- DARK (jetzt Standard) --- */
  --bg: #0b1220;
  --bg-card: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #1f2940;

  --primary: #3b82f6;
  --primary-2: #2563eb;
  --accent: #22d3ee;
  --danger: #ef4444;
  --success: #22c55e;

  --primary-contrast: #0b1220;

  /* Surfaces */
  --input-bg: #0b1327;
  --kcode-bg: #0b1327;
  --copybox-bg: #0a1322;

  /* Badges / Pills */
  --badge-bg: #19202b;
  --badge-text: #e5e7eb;

  /* Buttons */
  --btn-bg: var(--primary);
  --btn-text: var(--primary-contrast);

  /* Layout FX */
  --bg-glow: #0c1a3f22;
  --navbar-bg: rgba(10, 14, 26, 0.7);
  --nav-hover-start: #101936;
  --nav-hover-end: #0a1224;

  /* Cards / gradients */
  --card-grad-start: #0c1328;
  --card-grad-end: #0a1020;

  /* Code color */
  --code: #93c5fd;
}


/* ========= Global Reset & Base ========= */

* { box-sizing: border-box; }
* { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

html, body { height: 100%; }
html, body { background: var(--bg); color: var(--text); }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background:
    radial-gradient(1200px 800px at 10% -20%, var(--bg-glow), transparent),
    var(--bg);
  color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Screenreader only helper */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* Spacing helpers */
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 22px; }
hr { border: none; border-top:1px solid var(--border); margin: 16px 0; }

/* ========= Layout & Components ========= */

.container { max-width: 1100px; margin: 20px auto; padding: 0 16px; }

.card {
  background: linear-gradient(180deg, var(--card-grad-start), var(--card-grad-end));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px #0004;
}

.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Navbar */
.navbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--navbar-bg);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 60;
}

.brand { font-weight: 700; letter-spacing: .3px; font-size: 18px; }
.navbar .brand { display:flex; align-items:center; gap:10px; }
.brand .brand-ico { width: 20px; height: 20px; }

.nav-links { display: flex; gap: 12px; align-items: center; }
.nav-links a, .nav-links .sep {
  padding: 8px 10px; border-radius: 10px; color: var(--muted);
}
.nav-links a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
.nav-links a .nav-ico { width: 16px; height: 16px; opacity: .9; display:inline-block; }
.nav-links a:hover { border-color: var(--border); transform: translateY(-1px); }
.nav-links a.active {
  background: linear-gradient(180deg, var(--nav-hover-start), var(--nav-hover-end));
  border-color: var(--border);
}

/* Compact tweaks (keine Dopplungen) */
.navbar { padding: 10px 14px; }
.nav-links { gap: 8px; }
.nav-links a { padding: 6px 10px; gap: 6px; border-radius: 10px; }
.nav-links a .nav-ico { width: 14px; height: 14px; }
.brand .brand-ico { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .nav-links { gap: 4px; flex-wrap: wrap; }
  .nav-links a { padding: 6px 8px; }
}

/* Optional: primary pill stil */
.nav-links a.primary-pill {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--primary-2) 15%, transparent));
  border-color: color-mix(in srgb, var(--primary-2) 35%, var(--border));
  box-shadow: 0 4px 18px #0a10331a;
}
.nav-links a.primary-pill:hover { border-color: var(--primary-2); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--nav-hover-start), var(--nav-hover-end));
  color: var(--text);
  cursor:pointer;
}
.btn:hover { border-color: var(--primary); }
.btn.primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color: #fff;
  border-color: transparent;
}
.btn.danger {
  background: linear-gradient(180deg, #b91c1c, #7f1d1d);
  border-color: #7f1d1d;
  color: #fff;
}

/* Inputs */
.input, select, textarea {
  background: var(--input-bg);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px; width:100%;
}
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-2); }

/* Tables */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; }

/* Code blocks */
.kcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: var(--kcode-bg);
  border:1px solid var(--border);
  padding:10px; border-radius:12px; white-space:pre-wrap;
}
.kcode .placeholder { color: #93c5fd; }
code { color: var(--code); }

/* Utility */
.toolbar { display:flex; gap:10px; flex-wrap: wrap; }
.flex { display:flex; gap:12px; align-items:center; }
.space-between { display:flex; justify-content: space-between; align-items:center; gap:10px; }

.copybox {
  border:1px dashed var(--border); border-radius: 12px; padding: 12px;
  background: var(--copybox-bg);
}

.small { font-size: 12px; color: var(--muted); }
.category { font-weight: 600; color: color-mix(in srgb, var(--text) 70%, var(--muted)); }

.toast {
  position: fixed; right: 16px; bottom: 16px;
  background: var(--copybox-bg);
  border:1px solid var(--border); border-radius:12px; padding:12px 16px;
  display:none;
}

/* Badges & Roles */
.badge { font-size: 12px; color: var(--muted); padding: 2px 8px; border:1px solid var(--border); border-radius:999px; }
.badge-role { padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.badge-role.admin  { color:#fca5a5; border-color:#7f1d1d; }
.badge-role.editor { color:#fde68a; border-color:#7c6f1d; }
.badge-role.lesend { color:#93c5fd; border-color:#1d4ed8; }
.badge-role.user   { color:#a7f3d0; border-color:#065f46; }

/* Status dots */
.dot { width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:8px; box-shadow:0 0 0 2px color-mix(in srgb, var(--bg) 85%, #000); }
.dot.online { background:#22c55e; }
.dot.offline { background:#ef4444; }

.search, .searchbar { display:flex; gap:10px; }
.searchbar { margin:8px 0 12px; }

/* Activity cards */
.activity-card .ip-col { display: table-cell; }
.activity-card.ip-hidden .ip-col { display: none; }
.activity-toolbar { display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.refresh-note { font-size:12px; color: var(--muted); }

/* Vorlagen-Page */
#catGrid { --tpl-font:16px; }
.cat summary.cat-head { display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.cat .badge {
  font-size:12px; padding:4px 8px; border-radius:999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--bg));
  border:1px solid color-mix(in srgb, var(--primary-2) 25%, var(--border));
}
.copybox.large { font-size: var(--tpl-font); line-height: 1.45; }
.tpl-title { cursor:pointer; font-weight:600; }

/* Stack categories vertically on Templates page */
#catGrid { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; }
#catGrid .card { width: 100%; max-width: 100%; }
#catGrid .tpl-title { font-size: 16px; }
#catGrid .copybox.large { font-size: var(--tpl-font, 16px); }

/* Footer */
footer { color: var(--muted); font-size: 12px; padding: 20px; text-align: center; }


.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  /* wichtig: nicht überdecken */
  pointer-events: none;
}

/* ensure link is always clickable next to status dot */
.table td { position: relative; }
.table td a {
  position: relative;
  z-index: 2;         /* über evtl. pseudo/overlay */
  display: inline-block;
}
.table td .dot {
  pointer-events: none; /* darf Klick nicht fressen */
}

/* Rollen */
.badge-role { padding:2px 8px; border-radius:999px; font-size:12px; display:inline-block }
.badge-role.admin { background:#1e293b; color:#fff; }
.badge-role.editor { background:#334155; color:#fff; }
.badge-role.user { background:#e2e8f0; color:#111827; }

/* === Knuddels-Status Badges (Override) === */
.badge-status{padding:2px 8px;border-radius:999px;font-size:12px;display:inline-block;font-weight:600}

/* Newbie = normale (neutrale) Farbe */
.badge-status.newbie{ background:#e5e7eb; color:#111827; } /* hellgrau */

/* Family = Blau */
.badge-status.familymitglied{ background:#3b82f6; color:#ffffff; } /* blau */

/* Stammi = Grün */
.badge-status.stammi{ background:#22c55e; color:#ffffff; } /* grün */

/* Ehrenmitglied = Dunkelgrün */
.badge-status.ehrenmitglied{ background:#14532d; color:#ffffff; } /* dunkelgrün */

/* Admin = Rot */
.badge-status.admin{ background:#ef4444; color:#ffffff; } /* rot */

/* inoffizieller Admin & Sysadmin = Dunkelrot */
.badge-status.inoffizieller-admin,
.badge-status.sysadmin{ background:#7f1d1d; color:#ffffff; } /* dunkelrot */

/* Code im IP-Block nicht kleiner darstellen */
.list code {
  font-size: inherit;        /* gleiche Größe wie Text */
  color: inherit;            /* gleiche Farbe */
  background: transparent;   /* kein grauer Hintergrund */
  padding: 0;
}

/* IP-Liste kompakt & einheitlich */
.ip-list { margin: 0; padding: 0; list-style: none; }
.ip-list li { display: flex; gap: 10px; align-items: center; line-height: 1.5; }

/* IP als Chip, gleiche Schriftgröße */
.ip-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: inherit;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(148,163,184,.12); /* dezentes Grau auf Dark */
}

/* Datum leicht abgetönt */
.ip-list .date { color: #94a3b8; }