/*
 * Ozone Pack Check — Dark theme matching Ozone Overwatch
 * Bootstrap 5 dark mode augmented with custom properties
 */

:root {
    --accent:       #00d4ff;
    --accent-hover: #00b8e6;
    --accent-glow:  rgba(0, 212, 255, 0.15);
    --bg-body:      #0f1117;
    --bg-card:      #181b23;
    --bg-header:    #12141c;
    --border:       #2a2d38;
    --text-primary: #e8eaed;
    --text-muted:   #8b8f9a;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* ── Accent utilities ─────────────────────────── */
.text-accent  { color: var(--accent) !important; }
.bg-accent    { background-color: var(--accent) !important; color: #000 !important; }
.btn-accent   {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: 600;
}
.btn-accent:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #000;
}

/* ── Navbar ───────────────────────────────────── */
.navbar {
    background-color: var(--bg-header);
}
.navbar-brand {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

/* ── Cards ────────────────────────────────────── */
.card {
    background-color: var(--bg-card);
    border-color: var(--border);
}
.card-header {
    background-color: var(--bg-header);
}

.stat-card {
    transition: border-color 0.2s;
}
.stat-card:hover {
    border-color: var(--accent) !important;
}

.pack-card {
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.pack-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent) !important;
    box-shadow: 0 4px 20px var(--accent-glow);
}

/* ── Login ────────────────────────────────────── */
.login-card {
    background-color: var(--bg-card);
}

/* ── Tables ───────────────────────────────────── */
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}
.table thead th {
    background-color: var(--bg-header);
    border-bottom-color: var(--border);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── Sortable table headers ───────────────────── */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable-th:hover {
    color: var(--accent) !important;
}
.sort-icon {
    font-size: 0.65rem;
    margin-left: 3px;
    opacity: 0.5;
}
.sortable-th:hover .sort-icon,
.sort-icon.bi-sort-up,
.sort-icon.bi-sort-down {
    opacity: 1;
}

/* ── Progress bars ────────────────────────────── */
.progress {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
}

/* ── Vest Diagram ─────────────────────────────── */
.vest-diagram {
    width: 160px;
    height: 180px;
}
.vest-diagram-lg {
    width: 280px;
    height: 310px;
}
.vest-svg-container {
    width: 100%;
    height: 100%;
}
.vest-svg {
    width: 100%;
    height: 100%;
}

.vest-zone {
    stroke: var(--border);
    stroke-width: 1.5;
    transition: fill 0.2s, stroke 0.2s;
}
.zone-empty {
    fill: rgba(255, 255, 255, 0.04);
}
.zone-active {
    fill: var(--accent-glow);
    stroke: var(--accent);
    stroke-width: 2;
}
.zone-active:hover {
    fill: rgba(0, 212, 255, 0.3);
}

.vest-label {
    fill: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}
.vest-sublabel {
    fill: var(--text-muted);
    font-size: 8px;
    font-weight: 400;
    text-anchor: middle;
    dominant-baseline: central;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vest-label-sm {
    fill: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}
.vest-sublabel-sm {
    fill: var(--text-muted);
    font-size: 7px;
    font-weight: 400;
    text-anchor: middle;
    dominant-baseline: central;
    text-transform: uppercase;
}
.vest-connector {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

/* ── Badge ────────────────────────────────────── */
.badge.bg-accent {
    font-weight: 600;
    font-size: 0.7rem;
}

/* ── Form controls (dark overrides) ───────────── */
.form-control,
.form-select {
    background-color: var(--bg-header);
    border-color: var(--border);
    color: var(--text-primary);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-glow);
    background-color: var(--bg-header);
    color: var(--text-primary);
}

/* ── Breadcrumb ───────────────────────────────── */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-muted);
    --bs-breadcrumb-item-active-color: var(--text-primary);
}
.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--accent-hover);
}

/* ── Print styles ─────────────────────────────── */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .navbar, footer, .btn, form, .d-print-none { display: none !important; }
    .d-none.d-print-block { display: block !important; }
    .card { border: 1px solid #ccc !important; background: #fff !important; }
    .card-header { background: #f5f5f5 !important; color: #000 !important; }
    .table { color: #000 !important; }
    .table thead th { background: #eee !important; color: #333 !important; }
    .badge { border: 1px solid #999; color: #000 !important; background: #eee !important; }
    .text-accent { color: #0077aa !important; }
    .progress-bar { background: #333 !important; }
}

/* ── Scrollbar (Webkit) ───────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }