/*
 * SecurityView Client Web — App-specific overrides
 * Loaded after app.css and layout.css
 * ─────────────────────────────────────────────────────────────
 */

/* ── Section Show/Hide System ───────────────────────────── */
.section { display: none; }
.section.active { display: block; }

/* ── Loading overlay — shared/css/components.css sets display:flex always;
      restore app.css toggle pattern (.show to reveal) ───── */
.loading-overlay        { display: none !important; position: fixed !important; }
.loading-overlay.show   { display: flex !important; }

/* ── Map app.css vars to shared layout token names ──────── */
/* layout.css uses --bg-surface, --border, etc.              */
/* app.css uses --color-surface, --color-border, etc.        */
/* Bridge: re-alias in :root so both work                    */
:root {
    --bg-app: var(--color-bg);
    --bg-surface: var(--color-surface);
    --bg-elevated: var(--color-card);
    --border: var(--color-border);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-tertiary);
    --color-error: #FF3B30;
    --color-error-bg: rgba(255,59,48,0.10);
    --nav-active-bg: rgba(0,122,255,0.12);
    --nav-active-text: var(--color-primary);
    --nav-text: var(--color-text-secondary);
    --nav-icon-color: var(--color-text-secondary);
    --title-bar-bg: var(--color-surface);
    --title-bar-border: var(--color-border);
    --overlay: var(--color-overlay);
    --sidebar-bg: var(--color-surface);
    --sidebar-border: var(--color-border);
    --sidebar-text: var(--color-text);
    --sidebar-icon: var(--color-text-secondary);
    --sidebar-hover-bg: rgba(0,0,0,0.04);
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --weight-medium: 500;
    --weight-semibold: 600;
    --text-sm: 0.875rem;
}

[data-theme="dark"] {
    --bg-app: var(--color-bg);
    --bg-surface: var(--color-surface);
    --bg-elevated: var(--color-card);
    --border: var(--color-border);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-tertiary);
    --sidebar-hover-bg: rgba(255,255,255,0.06);
    --title-bar-bg: var(--color-surface);
    --title-bar-border: var(--color-border);
    --overlay: var(--color-overlay);
    --sidebar-bg: var(--color-surface);
    --sidebar-border: var(--color-border);
    --sidebar-text: var(--color-text);
    --sidebar-icon: var(--color-text-secondary);
}

/* ── Override body background for shell layout ──────────── */
body {
    background: var(--color-bg);
    overflow: hidden; /* app-shell handles scroll */
}

/* ── Ensure .main (existing pages) scrolls inside shell ─── */
.page-content {
    overflow-y: auto;
}
.page-content .main {
    padding-top: 0; /* remove double spacing */
}
.page-content > .section > .container,
.page-content > .main > .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Sidebar logout button ───────────────────────────────── */
.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-error, #FF3B30);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.sidebar-logout-btn:hover {
    background: var(--color-error-bg, rgba(255,59,48,0.10));
}
.app-shell.sidebar-collapsed .sidebar-logout-btn {
    justify-content: center;
    padding: var(--space-2);
}
.app-shell.sidebar-collapsed .sidebar-logout-btn .nav-label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
}

/* ── Nav active state ────────────────────────────────────── */
.nav-item.active {
    background: var(--nav-active-bg) !important;
    color: var(--nav-active-text) !important;
}

/* ── Responsive: hide profile name on narrow screens ────── */
@media (max-width: 900px) {
    .profile-btn-name { display: none; }
}

/* ── Page content padding for sections ──────────────────── */
.section > .container {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* ── Notification badge on bell button ──────────────────── */
.icon-btn { position: relative; }
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #FF3B30;
    color: #fff;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    line-height: 1.4;
    pointer-events: none;
}

/* ── Notification panel header ───────────────────────────── */
.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* ── Ensure notification panel uses correct bg ───────────── */
/* layout.css handles .notification-panel.open              */
.notification-panel {
    background: var(--color-surface);
    border-color: var(--color-border);
}