/* ═══════════════════════════════════════════════════════
   Watchtower UI Redesign - Dark Sidebar & Theme Overrides
   ═══════════════════════════════════════════════════════ */

/* ── Dark Sidebar ── */
.dark-sidebar {
    background-color: #0f172a !important;
}

.dark-sidebar .mud-nav-link {
    color: #f1f5f9 !important;
}

.dark-sidebar .mud-nav-link .mud-nav-link-text {
    color: #f1f5f9 !important;
}

.dark-sidebar .mud-nav-link .mud-icon-root {
    color: #94a3b8 !important;
}

.dark-sidebar .mud-nav-link:hover {
    background-color: #283548 !important;
}

.dark-sidebar .mud-nav-link.active {
    background-color: rgba(255, 209, 0, 0.12) !important;
    border-left: 3px solid #FFD100;
}

.dark-sidebar .mud-nav-link.active .mud-nav-link-text,
.dark-sidebar .mud-nav-link.active .mud-icon-root {
    color: #FFD100 !important;
}

.dark-sidebar .mud-navmenu {
    color: #f1f5f9;
}

/* Nav group headers */
.dark-sidebar .mud-nav-group .mud-nav-link {
    color: #f1f5f9 !important;
}

.dark-sidebar .mud-nav-group .mud-nav-link .mud-icon-root {
    color: #94a3b8 !important;
}

.dark-sidebar .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 32px;
}

/* Subheaders inside groups */
.dark-sidebar .mud-list-subheader {
    color: #64748b !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* User card in sidebar */
.dark-sidebar .mud-card,
.dark-sidebar .mud-paper {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Drawer border */
.dark-sidebar {
    border-right: 1px solid #334155 !important;
}

/* Scrollbar in dark sidebar */
.dark-sidebar::-webkit-scrollbar {
    width: 6px;
}

.dark-sidebar::-webkit-scrollbar-track {
    background: #0f172a;
}

.dark-sidebar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

/* SOON badge in nav */
.dark-sidebar .mud-chip {
    font-size: 0.6rem !important;
}

/* ── Shift Overview Table Row Classes ── */
.shift-row-critical {
    border-left: 4px solid var(--mud-palette-error) !important;
}

.shift-row-warning {
    border-left: 4px solid var(--mud-palette-warning) !important;
}

/* ── Monitoring Dark Pages ── */
.monitoring-dark-page {
    background-color: #0f172a;
    min-height: 100vh;
    color: #f1f5f9;
}

.monitoring-dark-page .mud-paper {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* ── Shift Detail Timeline Bar ── */
.shift-timeline-bar {
    display: flex;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    background: #e2e8f0;
}

.shift-timeline-bar .segment-active {
    background: #22c55e;
}

.shift-timeline-bar .segment-inactive {
    background: #f97316;
}

.shift-timeline-bar .segment-breach {
    background: #ef4444;
}

.shift-timeline-bar .segment-unknown {
    background: #94a3b8;
}

/* ── Activity Score Stars ── */
.score-stars {
    display: inline-flex;
    gap: 2px;
}

/* ── Placeholder pages ── */
.placeholder-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    opacity: 0.7;
}

.placeholder-page .mud-icon-root {
    font-size: 4rem !important;
    margin-bottom: 16px;
}

/* ── Command Center Map Markers ── */
@keyframes cc-marker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 6px transparent; opacity: 0.8; }
}

.cc-site-marker, .cc-guard-marker, .cc-event-marker {
    background: transparent !important;
    border: none !important;
}

.cc-geofence-label {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}

.cc-geofence-label::before {
    border-top-color: rgba(255, 255, 255, 0.95) !important;
}

/* Site info popup — clean card style */
.cc-site-popup .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
}
.cc-site-popup .leaflet-popup-content {
    margin: 10px 12px !important;
    line-height: 1.4 !important;
}
.cc-site-popup .leaflet-popup-tip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}