/* =====================================================================
   Datacenter Manager – App-Styles (Mobile-First)
   Baut auf Bootstrap 5.3 (data-bs-theme) auf und ergänzt Statusfarben,
   mobile Bottom-Navigation, Karten, Rackansicht und Druckansichten.
   ===================================================================== */

:root {
    --dc-radius: 0.75rem;
    --dc-status-ok: #16a34a;
    --dc-status-warning: #d97706;
    --dc-status-critical: #dc2626;
    --dc-status-offline: #b91c1c;
    --dc-status-unknown: #6b7280;
    --dc-status-maintenance: #2563eb;
    --dc-status-syncing: #0891b2;
    --dc-bottomnav-h: 60px;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0d1117;
    --bs-body-color: #e6edf3;
    --dc-card-bg: #161b22;
    --dc-border: #30363d;
}
[data-bs-theme="light"] {
    /* Body-Variablen explizit setzen, damit Theme immer konsistent ist. */
    --bs-body-bg: #f5f7fa;
    --bs-body-color: #1f2937;
    --dc-card-bg: #ffffff;
    --dc-border: #e2e8f0;
}
html, body { overflow-x: hidden; max-width: 100%; }

body {
    padding-bottom: calc(var(--dc-bottomnav-h) + env(safe-area-inset-bottom, 0));
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}
@media (min-width: 992px) {
    body { padding-bottom: 0; }
}

/* ---------- Navigation ---------- */
.navbar-brand { font-weight: 700; letter-spacing: .2px; }
.dc-brand-logo { height: 28px; width: auto; vertical-align: -6px; margin-right: .4rem; }

.dc-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
    height: calc(var(--dc-bottomnav-h) + env(safe-area-inset-bottom, 0));
    padding-bottom: env(safe-area-inset-bottom, 0);
    display: flex; justify-content: space-around; align-items: stretch;
    background: var(--dc-card-bg);
    border-top: 1px solid var(--dc-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.15);
}
.dc-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none; color: var(--bs-secondary-color);
    font-size: .68rem; padding: 6px 0; min-height: 44px;
}
.dc-bottom-nav a i { font-size: 1.3rem; }
.dc-bottom-nav a.active { color: var(--bs-primary); }
.dc-bottom-nav a.dc-scan {
    color: #fff;
}
.dc-bottom-nav .dc-scan-btn {
    background: var(--bs-primary); color:#fff; width: 52px; height: 52px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center; margin-top:-18px;
    box-shadow: 0 4px 14px rgba(13,110,253,.5); border: 3px solid var(--dc-card-bg);
}
.dc-bottom-nav .dc-scan-btn i { font-size: 1.5rem; }
@media (min-width: 992px) { .dc-bottom-nav { display: none; } }

/* ---------- Karten / Layout ---------- */
.card { border-radius: var(--dc-radius); border-color: var(--dc-border); }
.dc-card { background: var(--dc-card-bg); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); }

/* Diagramm-Container: feste Höhe + position:relative, damit responsive Chart.js-
   Canvas (maintainAspectRatio:false) NICHT unbegrenzt wächst. */
.dc-chart-box { position: relative; height: 220px; width: 100%; }
.dc-chart-box > canvas { max-height: 100%; }

.dc-stat {
    border-radius: var(--dc-radius); padding: .9rem 1rem; height: 100%;
    background: var(--dc-card-bg); border: 1px solid var(--dc-border);
    display: flex; flex-direction: column; gap: .15rem; position: relative; overflow: hidden;
}
.dc-stat .dc-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.dc-stat .dc-stat-label { font-size: .78rem; color: var(--bs-secondary-color); }
.dc-stat .dc-stat-icon { position: absolute; right: .6rem; top: .5rem; font-size: 1.5rem; opacity: .25; }
.dc-stat.dc-accent-ok { border-left: 4px solid var(--dc-status-ok); }
.dc-stat.dc-accent-warning { border-left: 4px solid var(--dc-status-warning); }
.dc-stat.dc-accent-critical { border-left: 4px solid var(--dc-status-critical); }
.dc-stat.dc-accent-info { border-left: 4px solid var(--dc-status-syncing); }
.dc-stat.dc-accent-primary { border-left: 4px solid var(--dc-status-maintenance); }

/* ---------- Statusfarben ---------- */
.status-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.35rem; vertical-align: middle; }
.status-dot.ok { background: var(--dc-status-ok); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.status-dot.warning { background: var(--dc-status-warning); box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
.status-dot.critical, .status-dot.offline { background: var(--dc-status-critical); box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.status-dot.unknown { background: var(--dc-status-unknown); }
.status-dot.maintenance { background: var(--dc-status-maintenance); }
.status-dot.syncing { background: var(--dc-status-syncing); animation: dc-pulse 1.2s infinite; }
@keyframes dc-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.status-badge i { font-size: .8em; }

/* ---------- Serverkarten ---------- */
.dc-server-card { transition: transform .08s ease, box-shadow .08s ease; }
.dc-server-card:active { transform: scale(.99); }
.dc-server-card .dc-metric { font-variant-numeric: tabular-nums; }
.dc-mini-bar { height: 6px; border-radius: 3px; background: var(--bs-secondary-bg); overflow: hidden; }
.dc-mini-bar > span { display:block; height:100%; border-radius:3px; }

/* ---------- Tabellen (mobil scrollbar aber gekapselt) ---------- */
.dc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--dc-radius); }
table.dc-table { white-space: nowrap; }
table.dc-table td, table.dc-table th { vertical-align: middle; }

/* ---------- Detail-Tabs ---------- */
.dc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: thin; }
.dc-tabs .nav-link { white-space: nowrap; }
.dc-kv { display:grid; grid-template-columns: minmax(120px, 40%) 1fr; gap:.35rem .75rem; }
.dc-kv dt { color: var(--bs-secondary-color); font-weight: 500; font-size: .85rem; }
.dc-kv dd { margin:0; font-size: .9rem; word-break: break-word; }

/* ---------- Rackansicht ---------- */
.dc-rack { border: 2px solid var(--dc-border); border-radius: 8px; background: var(--dc-card-bg); padding: 6px; max-width: 340px; margin: 0 auto; }
.dc-rack-unit {
    display:flex; align-items:center; gap:6px; border:1px solid var(--dc-border); border-radius:4px;
    margin-bottom:3px; min-height: 26px; padding: 2px 6px; font-size:.75rem; position: relative;
}
.dc-rack-unit .dc-u { width: 30px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; flex: none; text-align:right; }
.dc-rack-unit.occupied { cursor: pointer; }
.dc-rack-unit.free { opacity:.55; background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(125,125,125,.06) 6px, rgba(125,125,125,.06) 12px); }
.dc-rack-unit.srv-ok { border-left: 4px solid var(--dc-status-ok); }
.dc-rack-unit.srv-warning { border-left: 4px solid var(--dc-status-warning); }
.dc-rack-unit.srv-critical, .dc-rack-unit.srv-offline { border-left: 4px solid var(--dc-status-critical); }
.dc-rack-unit.srv-unknown { border-left: 4px solid var(--dc-status-unknown); }

/* ---------- Kamera-Scanner ---------- */
.dc-scanner-wrap { position: relative; background:#000; border-radius: var(--dc-radius); overflow:hidden; }
#dc-reader { width: 100%; }
.dc-scan-overlay { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.dc-scan-frame { width:65%; max-width:280px; aspect-ratio:1; border:3px solid rgba(255,255,255,.8); border-radius:16px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
.dc-scan-controls { position:absolute; bottom: 12px; left:0; right:0; display:flex; justify-content:center; gap:10px; }
body.dc-scan-fullscreen { overflow:hidden; }
body.dc-scan-fullscreen .dc-scanner-wrap { position: fixed; inset: 0; z-index: 2000; border-radius:0; }

/* ---------- Formulare ---------- */
.form-help { font-size: .8rem; color: var(--bs-secondary-color); }
.dc-pw-toggle { cursor: pointer; }
.dc-sticky-actions {
    position: sticky; bottom: calc(var(--dc-bottomnav-h) + 8px); z-index: 1020;
    background: var(--dc-card-bg); border: 1px solid var(--dc-border); border-radius: var(--dc-radius);
    padding: .6rem; box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
@media (min-width: 992px){ .dc-sticky-actions { bottom: 8px; } }

/* ---------- Etiketten / Druck ---------- */
.dc-label {
    border: 1px dashed #999; border-radius: 6px; padding: 8px; display:flex; gap:10px; align-items:center;
    background:#fff; color:#000; break-inside: avoid; page-break-inside: avoid;
}
.dc-label .dc-label-qr { flex: none; }
.dc-label .dc-label-info { font-size: 11px; line-height: 1.35; }
.dc-label .dc-label-info .name { font-weight: 700; font-size: 13px; }

@media print {
    .dc-no-print, .navbar, .dc-bottom-nav, .dc-sticky-actions, footer { display: none !important; }
    body { padding: 0 !important; background:#fff !important; color:#000 !important; }
    .dc-label-sheet { display:flex; flex-wrap:wrap; gap:6px; }
    a[href]:after { content: none !important; }
}

/* ---------- Diverses ---------- */
.dc-empty { text-align:center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.dc-empty i { font-size: 2.5rem; opacity:.5; display:block; margin-bottom:.5rem; }
.cursor-pointer { cursor: pointer; }
.text-mono { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; }
.dc-spin { display:inline-block; animation: dc-rotate 1s linear infinite; }
@keyframes dc-rotate { to { transform: rotate(360deg); } }
.dc-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }