/* ════════════════════════════════════════════════════════════════════════
   WP Sentinel — custom styles
   Bootstrap + Bootstrap Icons are loaded from the CDN in base.html.twig;
   this file only holds Sentinel's overrides. Served directly by nginx,
   no build step. Bump the ?v= query in base.html.twig when you edit this.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --wps-bg:         #0f1018;  /* app background            */
    --wps-surface:    #1a1a2e;  /* cards / panels            */
    --wps-surface-2:  #21243a;  /* headers, hover, inputs    */
    --wps-sidebar:    #14162a;  /* sidebar background        */
    --wps-border:     #2b2e48;  /* hairline borders          */
    --wps-text:       #e4e6f0;  /* primary text              */
    --wps-muted:      #9aa0b5;  /* secondary text            */
    --wps-accent:     #f0a500;  /* amber accent              */
    --wps-accent-rgb: 240, 165, 0;
    --wps-sidebar-w:  248px;
}

/* Re-map Bootstrap's dark theme onto the Sentinel palette so every
   component (cards, tables, dropdowns, modals, inputs) is consistent
   without touching individual templates. */
[data-bs-theme="dark"] {
    --bs-body-bg:            var(--wps-bg);
    --bs-body-color:         var(--wps-text);
    --bs-emphasis-color:     #ffffff;
    --bs-border-color:       var(--wps-border);
    --bs-border-radius:      0.65rem;
    --bs-dark-rgb:           26, 26, 46;        /* bg-dark → surface     */
    --bs-secondary-color:    var(--wps-muted);
    --bs-tertiary-bg:        var(--wps-surface-2);
    --bs-card-bg:            var(--wps-surface);
    --bs-card-cap-bg:        var(--wps-surface);
    --bs-card-border-color:  var(--wps-border);
    --bs-link-color:         #ffce5c;
    --bs-link-hover-color:   #ffdc85;
    --bs-link-color-rgb:     255, 206, 92;
}

body {
    background-color: var(--wps-bg);
    color: var(--wps-text);
    -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════════════════════════════
   App shell — sidebar + content
   ════════════════════════════════════════════════════════════════════════ */
.wps-sidebar {
    width: var(--wps-sidebar-w);
    background: var(--wps-sidebar);
    border-right: 1px solid var(--wps-border);
}

@media (min-width: 992px) {
    .wps-sidebar.offcanvas-lg {
        position: sticky;
        top: 0;
        height: 100vh;
        flex: 0 0 var(--wps-sidebar-w);
    }
}

.wps-brand {
    color: var(--wps-accent);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.wps-brand:hover { color: var(--wps-accent); }

.wps-nav { padding: 0.5rem 0.75rem; }

.wps-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.15rem;
    border-radius: 0.5rem;
    color: var(--wps-muted);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.12s, color 0.12s;
}
.wps-nav-link:hover {
    background: var(--wps-surface-2);
    color: var(--wps-text);
}
.wps-nav-link.active {
    background: rgba(var(--wps-accent-rgb), 0.12);
    color: var(--wps-accent);
}
.wps-nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
}

.wps-nav-heading {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wps-muted);
    opacity: 0.7;
    padding: 0.75rem 0.85rem 0.35rem;
    margin-top: 0.5rem;
}

.wps-sidebar-footer {
    border-top: 1px solid var(--wps-border);
    padding: 0.85rem;
}

/* Mobile top bar (only shown < lg) */
.wps-topbar {
    background: var(--wps-sidebar);
    border-bottom: 1px solid var(--wps-border);
    padding: 0.65rem 1rem;
}

.wps-content {
    width: 100%;
    padding: 1.75rem 2.25rem 3rem;
}
@media (max-width: 575.98px) {
    .wps-content { padding: 1.25rem 1rem 2.5rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   Components
   ════════════════════════════════════════════════════════════════════════ */
.card {
    border-radius: 0.7rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.card-header {
    font-weight: 600;
    border-bottom: 1px solid var(--wps-border);
}

/* Stat tiles on the dashboard */
.stat-card {
    border: 1px solid var(--wps-border);
    background-color: var(--wps-surface);
    border-radius: 0.7rem;
    transition: transform 0.15s, border-color 0.15s;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--wps-accent-rgb), 0.5);
}

/* Tables — kill the glaring light-grey headers, calm the borders */
.table { --bs-table-color: var(--wps-text); }
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wps-border);
}
.table-secondary {
    --bs-table-bg: var(--wps-surface-2);
    --bs-table-color: var(--wps-muted);
    --bs-table-border-color: var(--wps-border);
}
.table > thead.table-secondary th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom: 1px solid var(--wps-border);
}
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--wps-surface-2);
}

/* Tabs (site detail) */
.nav-tabs {
    border-bottom: 1px solid var(--wps-border);
}
.nav-tabs .nav-link {
    color: var(--wps-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.6rem 0.95rem;
}
.nav-tabs .nav-link:hover {
    color: var(--wps-text);
    border-bottom-color: var(--wps-border);
}
.nav-tabs .nav-link.active {
    color: var(--wps-accent);
    background: transparent;
    border-bottom-color: var(--wps-accent);
}

/* Pills (security sub-nav) */
.nav-pills .nav-link { color: var(--wps-muted); }
.nav-pills .nav-link:hover { color: var(--wps-text); }
.nav-pills .nav-link.active {
    background: rgba(var(--wps-accent-rgb), 0.15);
    color: var(--wps-accent);
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--wps-accent-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--wps-accent-rgb), 0.15);
}

/* Borders used throughout templates */
.border-secondary { border-color: var(--wps-border) !important; }

/* Status helpers */
.status-online  { color: #28a745; }
.status-offline { color: #dc3545; }
.status-warning { color: #ffc107; }

.badge-role-super_admin { background-color: #6f42c1; }
.badge-role-admin       { background-color: #dc3545; }
.badge-role-viewer      { background-color: #17a2b8; }

/* Scan / code output */
pre.scan-output {
    background: #0d0d1a;
    color: #a0ffb0;
    font-size: 0.8rem;
    max-height: 300px;
    overflow-y: auto;
    border-radius: 0.25rem;
    padding: 0.75rem;
}