/* ==========================================================================
   K&C NetFox – Kundenportal
   Basis: Theme von www.kc-netfox.de (css/custom.css)
   Markenfarben: Navy #16417D, Orange #F59811, Taupe #7A5E5D
   ========================================================================== */

:root {
  --kc-navy: #16417d;
  --kc-navy-dark: #0f2e5c;
  --kc-navy-light: #2a5aa0;
  --kc-orange: #f59811;
  --kc-orange-dark: #d97e06;
  --kc-taupe: #7a5e5d;
  --kc-bg-soft: #f4f6fa;
  --kc-text: #1c2530;
  --kc-border: #e9edf5;
  /* Flächen/Text, die im Darkmode wechseln */
  --kc-surface: #fff;
  --kc-ink: var(--kc-navy);          /* Navy als Textfarbe (Überschriften, Links) */
  --kc-muted: #6c757d;
  --kc-nav-bg: rgba(255,255,255,.97);
  --kc-track: #e8ecf4;
  --kc-stopped-bg: #eef0f4;
  --kc-stopped-fg: #5c6670;
  --kc-running-fg: #146c43;
  --kc-danger-fg: #b02a37;
  --kc-shadow: rgba(22,65,125,.08);

  --bs-primary: var(--kc-navy);
  --bs-primary-rgb: 22, 65, 125;
  --bs-body-color: var(--kc-text);
  --bs-link-color: var(--kc-navy);
  --bs-link-color-rgb: 22, 65, 125;
  --bs-link-hover-color: var(--kc-orange);
  --bs-link-hover-color-rgb: 245, 152, 17;
  --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

img { max-width: 100%; }
html { overflow-x: hidden; }
body {
  overflow-x: hidden;
  font-family: var(--bs-body-font-family);
  color: var(--kc-text);
  background: var(--kc-bg-soft);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, .fw-brand { font-weight: 800; letter-spacing: -0.01em; }
a { transition: color .15s ease; }

/* Buttons --------------------------------------------------------------- */
.btn-primary { background-color: var(--kc-navy); border-color: var(--kc-navy); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--kc-navy-dark); border-color: var(--kc-navy-dark); }
.btn-orange { background-color: var(--kc-orange); border-color: var(--kc-orange); color: #fff; }
.btn-orange:hover, .btn-orange:focus { background-color: var(--kc-orange-dark); border-color: var(--kc-orange-dark); color: #fff; }
.btn-outline-primary { color: var(--kc-ink); border-color: var(--kc-ink); }
.btn-outline-primary:hover { background-color: var(--kc-navy); border-color: var(--kc-navy); }
.btn-outline-navy { color: var(--kc-ink); border-color: var(--kc-ink); background: transparent; }
.btn-outline-navy:hover, .btn-outline-navy:focus { background: var(--kc-navy); border-color: var(--kc-navy); color: #fff; }

.text-orange { color: var(--kc-orange) !important; }
.text-navy { color: var(--kc-ink) !important; }
.text-taupe { color: var(--kc-taupe) !important; }
.bg-navy { background-color: var(--kc-navy) !important; }
.bg-soft { background-color: var(--kc-bg-soft) !important; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--kc-navy-light);
  box-shadow: 0 0 0 .2rem rgba(22,65,125,.15);
}
.form-check-input:checked { background-color: var(--kc-navy); border-color: var(--kc-navy); }

/* Navbar (identisch zur Hauptseite) -------------------------------------- */
.navbar-brand img { height: 42px; width: auto; }
.navbar-kc { background-color: var(--kc-nav-bg); box-shadow: 0 2px 16px var(--kc-shadow); }
.navbar-kc .nav-link { font-weight: 600; color: var(--kc-text); margin: 0 .35rem; }
.navbar-kc .nav-link:hover, .navbar-kc .nav-link.active { color: var(--kc-orange); }
.navbar-kc .portal-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kc-orange); border: 1px solid rgba(245,152,17,.45); background: rgba(245,152,17,.08);
  border-radius: 2rem; padding: .2rem .6rem;
}
.navbar-kc .dropdown-menu { border: 1px solid var(--kc-border); border-radius: .75rem; box-shadow: 0 1rem 2rem rgba(22,65,125,.12); }
.navbar-kc .dropdown-item:active { background: var(--kc-navy); }
.nav-sep { width: 1px; height: 24px; background: var(--kc-border); margin: 0 .5rem; }

/* Page-Hero (wie Unterseiten der Hauptseite) ----------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, var(--kc-navy-dark) 20%, var(--kc-navy) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 20%, rgba(245,152,17,.18), transparent 45%);
}
.hero .container { position: relative; z-index: 2; }
.page-hero { padding: 7.5rem 0 2.5rem; }
.page-hero h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.page-hero .lead { color: #cfd8ea; font-size: 1.05rem; }
.hero .badge-eyebrow {
  background: rgba(245,152,17,.15); color: var(--kc-orange);
  border: 1px solid rgba(245,152,17,.4); font-weight: 600; letter-spacing: .04em;
}
.hero .breadcrumb { margin-bottom: .75rem; font-size: .9rem; }
.hero .breadcrumb a { color: #cfd8ea; text-decoration: none; }
.hero .breadcrumb a:hover { color: var(--kc-orange); }
.hero .breadcrumb-item.active { color: #fff; }
.hero .breadcrumb-item + .breadcrumb-item::before { color: #7a8db0; }

.section-title-eyebrow {
  color: var(--kc-orange); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8rem;
}

/* Cards ------------------------------------------------------------------ */
.card-kc {
  border: 1px solid var(--kc-border); border-radius: 1rem; background: var(--kc-surface);
  box-shadow: 0 .25rem 1rem rgba(22,65,125,.04);
}
.card-kc .card-header {
  background: var(--kc-surface); border-bottom: 1px solid var(--kc-border);
  border-radius: 1rem 1rem 0 0; padding: 1rem 1.25rem; font-weight: 700; color: var(--kc-ink);
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(22,65,125,.12); }
.overlap { margin-top: -1.5rem; position: relative; z-index: 3; }

/* Auth-Seiten ------------------------------------------------------------ */
.auth-wrap { max-width: 480px; margin: 0 auto; }
.auth-wrap.wide { max-width: 720px; }
.auth-card { padding: 2rem; }
@media (min-width: 576px) { .auth-card { padding: 2.5rem; } }
.auth-icon {
  width: 56px; height: 56px; border-radius: 1rem; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(245,152,17,.12); color: var(--kc-orange); font-size: 1.6rem;
}
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* VM-Karten -------------------------------------------------------------- */
.vm-card .vm-icon {
  width: 48px; height: 48px; border-radius: .85rem; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.4rem; background: var(--kc-bg-soft); color: var(--kc-ink); flex-shrink: 0;
}
.vm-card .vm-title { font-weight: 800; color: var(--kc-ink); text-decoration: none; }
.vm-card .vm-title:hover { color: var(--kc-orange); }
.vm-meta { color: var(--kc-taupe); font-size: .85rem; }
.metric-label { font-size: .75rem; color: var(--kc-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.metric-value { font-weight: 700; font-size: .95rem; }
.progress { height: .45rem; background: var(--kc-track); border-radius: 1rem; }
.progress-bar { background: var(--kc-navy-light); transition: width .5s ease; }
.progress-bar.warn { background: var(--kc-orange); }
.progress-bar.crit { background: #dc3545; }

.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; }
.status-pill {
  display: inline-flex; align-items: center; font-weight: 700; font-size: .78rem;
  border-radius: 2rem; padding: .3rem .75rem; letter-spacing: .02em;
}
.status-running { background: rgba(25,135,84,.12); color: var(--kc-running-fg); }
.status-running .status-dot { background: #198754; box-shadow: 0 0 0 0 rgba(25,135,84,.6); animation: pulse 2s infinite; }
.status-stopped { background: var(--kc-stopped-bg); color: var(--kc-stopped-fg); }
.status-stopped .status-dot { background: #8a94a0; }
.status-paused, .status-suspended, .status-unknown { background: rgba(245,152,17,.12); color: var(--kc-orange-dark); }
.status-paused .status-dot, .status-suspended .status-dot, .status-unknown .status-dot { background: var(--kc-orange); }
.status-unavailable { background: rgba(220,53,69,.12); color: var(--kc-danger-fg); }
.status-unavailable .status-dot { background: #dc3545; }
.status-busy { background: rgba(42,90,160,.14); color: var(--kc-ink); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(25,135,84,.5); }
  70% { box-shadow: 0 0 0 .4rem rgba(25,135,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(25,135,84,0); }
}

.action-bar .btn { font-weight: 600; }
.btn-action-start { color: var(--kc-running-fg); border-color: rgba(25,135,84,.35); background: var(--kc-surface); }
.btn-action-start:hover { background: #198754; border-color: #198754; color: #fff; }
.btn-action-danger { color: var(--kc-danger-fg); border-color: rgba(220,53,69,.35); background: var(--kc-surface); }
.btn-action-danger:hover { background: #dc3545; border-color: #dc3545; color: #fff; }

/* Stat-Kacheln */
.stat-tile { padding: 1.25rem; }
.stat-tile .stat-number { font-size: 1.9rem; font-weight: 800; color: var(--kc-ink); line-height: 1.1; }
.stat-tile .stat-label { color: var(--kc-muted); font-size: .85rem; }

/* Info-Tabellen */
.table-kv th { width: 40%; color: var(--kc-muted); font-weight: 600; font-size: .9rem; }
.table-kv td { font-weight: 600; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kc-muted); border-bottom-width: 1px; }

code.kc-code, pre.kc-code {
  background: var(--kc-navy-dark); color: #e8edf5; border-radius: .5rem;
  padding: .75rem 1rem; display: block; font-size: .85rem; white-space: pre-wrap; word-break: break-all;
  border-left: 4px solid var(--kc-orange);
}
.qr-box svg { width: 220px; height: 220px; background: #fff; border-radius: .5rem; } /* QR immer auf Weiß – sonst nicht scannbar */
.secret-box { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; word-break: break-all; }

/* Empty / Pending */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state .bi { font-size: 2.6rem; color: var(--kc-orange); }

/* Toasts */
.toast-container { z-index: 1090; }
.toast { border: 0; border-radius: .75rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.15); }

/* Admin */
.admin-nav .nav-link { font-weight: 600; color: var(--kc-ink); background: var(--kc-surface); border: 1px solid var(--kc-border); border-radius: .6rem; box-shadow: 0 .25rem .75rem var(--kc-shadow); }
.admin-nav .nav-link:hover:not(.active) { border-color: var(--kc-ink); }
.admin-nav .nav-link.active { background: var(--kc-navy); border-color: var(--kc-navy); color: #fff; }
.badge-soft { background: var(--kc-bg-soft); color: var(--kc-ink); font-weight: 600; }
.small-mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: .8rem; }

/* Footer (identisch zur Hauptseite) -------------------------------------- */
footer.site-footer { background: var(--kc-navy-dark); color: #cfd8ea; flex-shrink: 0; }
footer.site-footer a { color: #fff; text-decoration: none; }
footer.site-footer a:hover { color: var(--kc-orange); }
footer.site-footer h5 { color: #fff; }
footer.site-footer .fox-badge { height: 32px; width: auto; filter: brightness(0) invert(1); }

@media (max-width: 991.98px) {
  .nav-sep { display: none; }
  .page-hero { padding-top: 6.5rem; }
}
@media (max-width: 575.98px) {
  .action-bar .btn .btn-text { display: none; }
}

/* Status-Pill auf dunklem Hero lesbar machen */
.hero .status-pill { background: var(--kc-surface); }
.hero .status-pill.status-busy { color: var(--kc-ink); }
.audit-detail { min-width: 220px; overflow-wrap: anywhere; }

/* Admin sieht das Portal als Kunde */
.acting-bar { background: var(--kc-orange); color: #1c1c1c; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; font-size: .9rem; box-shadow: 0 -.5rem 1.5rem rgba(22,65,125,.18); }
body:has(.acting-bar) { padding-bottom: 4.5rem; }
/* Dropdowns in scrollbaren Tabellen nicht abschneiden */
.table-responsive .dropdown-menu { z-index: 1060; }

/* Proxmox-Server: CA-Feld nur bei „Proxmox-Standardzertifikat“ */
.server-form .cert-ca-field { display: none; }
.server-form:has(input[name="cert_mode"][value="ca"]:checked) .cert-ca-field { display: block; }

/* ==========================================================================
   Darkmode (data-bs-theme="dark" wird von /static/js/theme.js gesetzt)
   ========================================================================== */
[data-bs-theme="dark"] {
  --kc-bg-soft: #0d1520;
  --kc-surface: #142030;
  --kc-text: #dbe3ee;
  --kc-border: #24344a;
  --kc-ink: #9cc0f5;
  --kc-muted: #94a3b8;
  --kc-nav-bg: rgba(16,25,38,.96);
  --kc-track: #24344a;
  --kc-stopped-bg: #233142;
  --kc-stopped-fg: #a8b4c4;
  --kc-running-fg: #6fd3a0;
  --kc-danger-fg: #f28b95;
  --kc-shadow: rgba(0,0,0,.35);

  --bs-body-bg: var(--kc-bg-soft);
  --bs-body-color: var(--kc-text);
  --bs-emphasis-color: #f1f5fb;
  --bs-secondary-color: var(--kc-muted);
  --bs-border-color: var(--kc-border);
  --bs-link-color: #9cc0f5;
  --bs-link-color-rgb: 156, 192, 245;
  --bs-tertiary-bg: #1a2738;
}
[data-bs-theme="dark"] .navbar-brand img { filter: brightness(0) invert(1); }
[data-bs-theme="dark"] .btn-primary { background-color: var(--kc-navy-light); border-color: var(--kc-navy-light); }
[data-bs-theme="dark"] .btn-primary:hover, [data-bs-theme="dark"] .btn-primary:focus { background-color: #3569b5; border-color: #3569b5; }
[data-bs-theme="dark"] .hero { background: linear-gradient(120deg, #091628 20%, #12305c 100%); }
[data-bs-theme="dark"] footer.site-footer { background: #091220; border-top: 1px solid var(--kc-border); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0f1a28; border-color: var(--kc-border); }
[data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu { background-color: var(--kc-surface); border-color: var(--kc-border); }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--kc-text); }
[data-bs-theme="dark"] .text-bg-light { background-color: #2a3a50 !important; color: #dbe3ee !important; }
[data-bs-theme="dark"] .vm-card .vm-icon { background: #1b2a3d; }
[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

/* Theme-Umschalter: Symbol zeigt die aktuelle Wahl */
.theme-icon { display: none; }
html:not([data-theme-choice]) .theme-icon-auto,
html[data-theme-choice="auto"] .theme-icon-auto,
html[data-theme-choice="light"] .theme-icon-light,
html[data-theme-choice="dark"] .theme-icon-dark { display: inline-block; }
.theme-check { visibility: hidden; }
html[data-theme-choice="auto"] [data-theme-value="auto"] .theme-check,
html:not([data-theme-choice]) [data-theme-value="auto"] .theme-check,
html[data-theme-choice="light"] [data-theme-value="light"] .theme-check,
html[data-theme-choice="dark"] [data-theme-value="dark"] .theme-check { visibility: visible; }

/* „Powered by Proxmox“ (Login) */
.powered-by {
  display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: .7rem 1rem; border-radius: .9rem;
  border: 1px solid var(--kc-border); background: var(--kc-surface); color: var(--kc-muted);
  font-size: .85rem; box-shadow: 0 .25rem 1rem var(--kc-shadow);
}
.powered-by img { width: 22px; height: 22px; }
.powered-by .pve-name { color: var(--kc-text); font-weight: 700; letter-spacing: .01em; }
.powered-by .pve-name span { color: #e57000; }
[data-bs-theme="dark"] .vm-meta, [data-bs-theme="dark"] .text-taupe { color: var(--kc-muted) !important; }