/* ============================================================
   Aegis Smart Emergency Dispatch Platform
   Light Clinical Design System — Global Framework
   Strictly Light Theme • Medical Clean • High Accessibility
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* 1. Core Clinical Color Tokens */
    --clinical-primary: #0284C7;          /* Medical Blue (Buttons, links, focal points) */
    --clinical-primary-hover: #0369A1;
    --clinical-primary-subtle: #E0F2FE;
    --clinical-primary-border: #BAE6FD;

    --clinical-emergency: #DC2626;        /* Emergency Accent (Critical alerts, triage only) */
    --clinical-emergency-hover: #B91C1C;
    --clinical-emergency-subtle: #FEE2E2;
    --clinical-emergency-border: #FECACA;

    --clinical-success: #16A34A;          /* Success / Stabilized (Confirmation, open bays) */
    --clinical-success-hover: #15803D;
    --clinical-success-subtle: #DCFCE7;
    --clinical-success-border: #BBF7D0;

    --clinical-warning: #D97706;          /* Warning / Amber (Pending status, delay warnings) */
    --clinical-warning-hover: #B45309;
    --clinical-warning-subtle: #FEF3C7;
    --clinical-warning-border: #FDE68A;

    /* 2. Surfaces & Neutrals */
    --clinical-bg: #F8FAFC;               /* Neutral Page Background, soft & eye-friendly */
    --clinical-card: #FFFFFF;             /* Pure White Surface */
    --clinical-border: #E2E8F0;           /* Subtle Border */
    --clinical-border-subtle: #F1F5F9;
    --clinical-surface-alt: #F1F5F9;

    /* 3. Typography Hierarchy */
    --clinical-text-primary: #0F172A;     /* Primary Text (Deep Navy-Slate) */
    --clinical-text-secondary: #64748B;   /* Secondary Slate */
    --clinical-text-muted: #94A3B8;       /* Subtle / Placeholder */

    /* 4. Shadows & Elevation */
    --clinical-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    --clinical-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    --clinical-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.06);
    --clinical-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);

    /* 5. Typography */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================================
   UNIVERSAL INVISIBLE SCROLLBAR SYSTEM
   100% Functional Scrolling • Zero Visual Scrollbar Lines
   Eliminates all scrollbar lines, tracks, and thumbs across
   Chrome, Edge, Safari, Firefox, iOS, and Android
   ============================================================ */
html, body, * {
    scrollbar-width: none !important;     /* Firefox */
    -ms-overflow-style: none !important; /* IE and legacy Edge */
}

/* Chrome, Safari, modern Edge, Opera, Android, WebKit */
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    display: none !important;
    background: transparent !important;
    border: none !important;
}

/* Dedicated container scrollbar suppression */
.cad-body,
.hosp-body,
.hosp-content,
.app-viewport,
.app-viewport-body,
.cockpit-content,
.sim-phone-frame,
.table-responsive,
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto,
div[style*="overflow"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.cad-body::-webkit-scrollbar,
.hosp-body::-webkit-scrollbar,
.hosp-content::-webkit-scrollbar,
.app-viewport::-webkit-scrollbar,
.app-viewport-body::-webkit-scrollbar,
.cockpit-content::-webkit-scrollbar,
.sim-phone-frame::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
div[style*="overflow"]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

body {
    font-family: var(--font-sans);
    background-color: var(--clinical-bg);
    color: var(--clinical-text-primary);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Helpers */
.font-mono { font-family: var(--font-mono) !important; }
.text-clinical-primary { color: var(--clinical-primary) !important; }
.text-clinical-secondary { color: var(--clinical-text-secondary) !important; }
.text-clinical-emergency { color: var(--clinical-emergency) !important; }
.text-clinical-success { color: var(--clinical-success) !important; }
.text-clinical-warning { color: var(--clinical-warning) !important; }

/* Clinical Card */
.clinical-card {
    background: var(--clinical-card);
    border: 1px solid var(--clinical-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--clinical-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.clinical-card:hover {
    box-shadow: var(--clinical-shadow-md);
}

/* Clinical Header / Topbars */
.clinical-topbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--clinical-border);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

/* Clinical Badges */
.badge-clinical {
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.badge-clinical-blue {
    background: var(--clinical-primary-subtle);
    color: var(--clinical-primary);
    border: 1px solid var(--clinical-primary-border);
}
.badge-clinical-emergency {
    background: var(--clinical-emergency-subtle);
    color: var(--clinical-emergency);
    border: 1px solid var(--clinical-emergency-border);
}
.badge-clinical-success {
    background: var(--clinical-success-subtle);
    color: var(--clinical-success);
    border: 1px solid var(--clinical-success-border);
}
.badge-clinical-warning {
    background: var(--clinical-warning-subtle);
    color: var(--clinical-warning);
    border: 1px solid var(--clinical-warning-border);
}

/* Clinical Buttons */
.btn-clinical-primary {
    background: var(--clinical-primary);
    color: #FFFFFF;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    transition: all 0.15s ease-in-out;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
}
.btn-clinical-primary:hover {
    background: var(--clinical-primary-hover);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}
.btn-clinical-primary:active {
    transform: scale(0.98);
}

.btn-clinical-emergency {
    background: var(--clinical-emergency);
    color: #FFFFFF;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    transition: all 0.15s ease-in-out;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}
.btn-clinical-emergency:hover {
    background: var(--clinical-emergency-hover);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.btn-clinical-emergency:active {
    transform: scale(0.98);
}

/* Subtle Data Tables */
.table-clinical {
    width: 100%;
    margin-bottom: 0;
    color: var(--clinical-text-primary);
}
.table-clinical th {
    background: #F8FAFC;
    color: var(--clinical-text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--clinical-border);
}
.table-clinical td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--clinical-border-subtle);
    font-size: 13px;
}
.table-clinical tbody tr:hover {
    background-color: #F8FAFC;
}

/* Pulse Animation for Critical Items */
.pulse-emergency {
    animation: clinical-pulse 1.8s infinite;
}
@keyframes clinical-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   MAP CONTAINERS ARCHITECTURE — STRICT EXPLICIT DIMENSIONS
   ============================================================ */
.map-box,
#ambDeckMap,
#hospRadarMap,
#simMap,
#hospTrackerMap,
#interactiveMap,
.cad-map-container,
.hosp-map-container {
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    position: relative !important;
    border-radius: 14px;
    overflow: hidden;
    background-color: #E2E8F0;
}

/* ============================================================
   TABLET VIEW FIXED CONTAINER & STICKY BARS ARCHITECTURE (768px - 1100px)
   Strict App-Shell / Native Tablet Cockpit Layout
   ============================================================ */
@media (min-width: 768px) and (max-width: 1100px) {
    html, body {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fixed Viewport Containment */
    .cad-frame,
    .hosp-frame,
    .app-viewport,
    .tablet-cockpit {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Top Navbar: Permanently sticky/fixed at top */
    .cad-topbar,
    .hosp-navbar,
    .clinical-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
    }

    /* Bottom App Bar: Permanently locked at bottom */
    .cad-bottom-appbar,
    .hosp-bottom-appbar,
    .appbar-fixed {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 65px !important;
        z-index: 1000 !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    /* Independent Content Scrolling: The main inner view is the ONLY element that scrolls */
    .cad-body,
    .hosp-body,
    .hosp-content,
    .app-viewport-body,
    .cockpit-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 85px !important;
    }
}