/* ═══════════════════════════════════════════════════════════════
   N360Navigation.css — V3 Navigation Design Tokens & Dark Mode
   Nalam360 Enterprise Platform – Medway Hospitals build
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens (light theme defaults) ──────────────────── */
:root {
    /* Brand blue */
    --n360-brand-50:  #eff6ff;
    --n360-brand-100: #dbeafe;
    --n360-brand-200: #bfdbfe;
    --n360-brand-300: #93c5fd;
    --n360-brand-400: #60a5fa;
    --n360-brand-500: #3b82f6;
    --n360-brand-600: #1B6FE4;   /* primary */
    --n360-brand-700: #1d4ed8;
    --n360-brand-800: #1e40af;
    --n360-brand-900: #1e3a8a;

    /* Surface */
    --n360-surface-bg:         #ffffff;
    --n360-surface-raised:     #f8faff;
    --n360-surface-overlay:    #f0f4ff;
    --n360-surface-border:     #e2eaf5;
    --n360-surface-border-mid: #c7ddf7;

    /* Text */
    --n360-text-primary:   #0d2d5e;
    --n360-text-secondary: #475569;
    --n360-text-muted:     #94a3b8;
    --n360-text-on-brand:  #ffffff;

    /* Activity Bar */
    --n360-ab-bg:              #0f1e35;
    --n360-ab-width:           56px;
    --n360-ab-icon-color:      #7a9ab8;
    --n360-ab-icon-hover:      #93c5fd;
    --n360-ab-icon-active:     #60a5fa;
    --n360-ab-active-bg:       rgba(96, 165, 250, 0.15);
    --n360-ab-badge-bg:        #dc2626;
    --n360-ab-badge-color:     #ffffff;
    --n360-ab-emergency-bg:    #dc2626;
    --n360-ab-emergency-color: #ffffff;

    /* Sidebar */
    --n360-sb-bg:             #f8faff;
    --n360-sb-border:         #e2eaf5;
    --n360-sb-width:          240px;
    --n360-sb-collapsed-w:    56px;
    --n360-sb-header-bg:      #ffffff;
    --n360-sb-item-color:     #334155;
    --n360-sb-item-hover-bg:  #eff6ff;
    --n360-sb-item-hover-color:#1B6FE4;
    --n360-sb-item-active-bg: #dbeafe;
    --n360-sb-item-active-color: #1B6FE4;
    --n360-sb-item-active-border: #1B6FE4;
    --n360-sb-sub-color:      #64748b;
    --n360-sb-sub-active-color: #1B6FE4;

    /* Header */
    --n360-header-height:      60px;
    --n360-header-bg:          #ffffff;
    --n360-header-border:      #e2eaf5;
    --n360-header-shadow:      0 1px 6px rgba(0, 0, 0, 0.06);

    /* Patient context bar */
    --n360-ctx-height:         44px;

    /* Patient tab strip */
    --n360-pt-height:          40px;

    /* Z-index layers */
    --n360-z-sidebar:    300;
    --n360-z-header:     400;
    --n360-z-ctx-bar:    400;
    --n360-z-pt-tabs:    390;
    --n360-z-dropdown:   600;
    --n360-z-modal:     1000;
    --n360-z-overlay:    999;

    /* Status colours */
    --n360-success:  #16a34a;
    --n360-warning:  #d97706;
    --n360-danger:   #dc2626;
    --n360-info:     #1B6FE4;

    /* Motion */
    --n360-ease-ui:      0.18s ease;
    --n360-ease-spring:  0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Border radii */
    --n360-radius-sm:  4px;
    --n360-radius-md:  8px;
    --n360-radius-lg:  12px;
    --n360-radius-xl:  16px;
    --n360-radius-pill: 999px;
}

/* ── 2. Dark Theme Token Overrides ───────────────────────────── */
[data-theme="dark"] {
    /* Surface */
    --n360-surface-bg:         #0d1b2e;
    --n360-surface-raised:     #0f2040;
    --n360-surface-overlay:    #0a1628;
    --n360-surface-border:     #1e3a5f;
    --n360-surface-border-mid: #1e3a5f;

    /* Text */
    --n360-text-primary:   #e2e8f0;
    --n360-text-secondary: #7a9ab8;
    --n360-text-muted:     #4a7098;
    --n360-text-on-brand:  #ffffff;

    /* Activity Bar (same dark navy in both modes) */
    --n360-ab-bg:              #060f1e;
    --n360-ab-icon-color:      #4a7098;
    --n360-ab-icon-hover:      #60a5fa;
    --n360-ab-icon-active:     #93c5fd;
    --n360-ab-active-bg:       rgba(96, 165, 250, 0.18);

    /* Sidebar */
    --n360-sb-bg:              #0a1628;
    --n360-sb-border:          #1e3a5f;
    --n360-sb-header-bg:       #0f1e35;
    --n360-sb-item-color:      #7a9ab8;
    --n360-sb-item-hover-bg:   #0f2040;
    --n360-sb-item-hover-color:#60a5fa;
    --n360-sb-item-active-bg:  rgba(59, 130, 246, 0.18);
    --n360-sb-item-active-color:#93c5fd;
    --n360-sb-item-active-border:#3b82f6;
    --n360-sb-sub-color:       #4a7098;
    --n360-sb-sub-active-color:#60a5fa;

    /* Header */
    --n360-header-bg:          #0f1e35;
    --n360-header-border:      #1e3a5f;
    --n360-header-shadow:      0 1px 8px rgba(0, 0, 0, 0.35);
}

/* ── 3. Activity Bar: 7 functional groups ─────────────────────── */
.n360-activity-bar {
    width: var(--n360-ab-width);
    background: var(--n360-ab-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.n360-activity-bar::-webkit-scrollbar { display: none; }

.ab-item {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--n360-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--n360-ab-icon-color);
    cursor: pointer;
    margin-bottom: 2px;
    transition: background var(--n360-ease-ui), color var(--n360-ease-ui);
    font-size: 1.1rem;
    text-decoration: none;
}

.ab-item:hover {
    background: var(--n360-ab-active-bg);
    color: var(--n360-ab-icon-hover);
}

.ab-item--active {
    background: var(--n360-ab-active-bg);
    color: var(--n360-ab-icon-active);
}

.ab-item--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--n360-ab-icon-active);
    border-radius: 0 2px 2px 0;
}

/* Activity bar badge */
.ab-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    background: var(--n360-ab-badge-bg);
    color: var(--n360-ab-badge-color);
    border-radius: var(--n360-radius-pill);
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 2px solid var(--n360-ab-bg);
}

/* Emergency / code-red button */
.ab-item--emergency {
    background: var(--n360-ab-emergency-bg);
    color: var(--n360-ab-emergency-color);
    animation: emergency-pulse 1.8s ease-in-out infinite;
}

@keyframes emergency-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* ── 4. Sidebar: with module title + favourites ────────────────── */
.n360-sidebar-v3 {
    width: var(--n360-sb-width);
    background: var(--n360-sb-bg);
    border-right: 1px solid var(--n360-sb-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width var(--n360-ease-ui);
}

.n360-sidebar-v3.collapsed {
    width: var(--n360-sb-collapsed-w);
}

/* Sidebar nav items */
.sb-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: var(--n360-radius-md);
    color: var(--n360-sb-item-color);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background var(--n360-ease-ui), color var(--n360-ease-ui);
    border-left: 3px solid transparent;
    margin: 1px 6px;
}

.sb-nav-link:hover {
    background: var(--n360-sb-item-hover-bg);
    color: var(--n360-sb-item-hover-color);
}

.sb-nav-link.active {
    background: var(--n360-sb-item-active-bg);
    color: var(--n360-sb-item-active-color);
    border-left-color: var(--n360-sb-item-active-border);
    font-weight: 600;
}

/* Separator labels */
.sb-group-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n360-text-muted);
    padding: 10px 14px 4px;
    user-select: none;
}

/* ── 5. Header height compensation ────────────────────────────── */
.with-fixed-header {
    padding-top: var(--n360-header-height);
}

/* ── 6. Focus rings (keyboard nav) ────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--n360-brand-600);
    outline-offset: 2px;
}

/* ── 7. Print resets ──────────────────────────────────────────── */
@media print {
    .n360-activity-bar,
    .n360-sidebar-v3,
    .n360-patient-ctx,
    .n360-patient-tabs,
    .n360-census-panel,
    .n360-alerts-panel,
    .header-shift-pill,
    ::deep .header-theme-toggle,
    ::deep .header-register-btn { display: none !important; }

    .layout-main { margin: 0 !important; padding: 0 !important; }
}

/* ── 8. Responsive breakpoints ────────────────────────────────── */
@media (max-width: 1280px) {
    :root { --n360-sb-width: 210px; }
}

@media (max-width: 1024px) {
    :root {
        --n360-sb-width: 200px;
        --n360-ab-width: 52px;
    }
}

@media (max-width: 768px) {
    :root {
        --n360-ab-width: 0px;
        --n360-sb-width: 0px;
    }
    .n360-activity-bar { display: none; }
    .n360-sidebar-v3   { display: none; }
}