:root{
    --navy:#061a2f;
    --navy2:#0a2b4d;
    --navy3:#0e3d68;

    --blue:#1769d3;
    --blue2:#2b7de0;
    --cyan:#16aaa5;
    --teal:#18b7ad;

    --ink:#13243a;
    --ink2:#243b53;
    --muted:#718196;
    --muted2:#8998a8;

    --line:#e3eaf1;
    --line2:#edf2f6;

    --bg:#f4f7fb;
    --soft:#f7fafd;
    --white:#fff;

    --success:#15986a;
    --warning:#b77912;
    --danger:#d74646;

    --shadow:0 12px 35px rgba(10,39,69,.07);
    --shadow-lg:0 25px 70px rgba(8,35,63,.13);

    --radius:18px;
    --radius-sm:12px;

    --transition:.25s ease;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--ink);
    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

img{
    max-width:100%;
    display:block;
}

svg{
    flex:none;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell{
    min-height:100vh;
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:274px;
    background:
        radial-gradient(circle at 20% 10%,rgba(28,151,190,.14),transparent 28%),
        linear-gradient(180deg,#061a2f 0%,#082846 55%,#061c33 100%);
    color:#dce9f6;
    padding:18px 14px;
    overflow:auto;
    z-index:100;
    border-right:1px solid rgba(255,255,255,.05);
    scrollbar-width:thin;
}

.sidebar::-webkit-scrollbar{
    width:5px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:20px;
}

.side-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:4px 6px 18px;
}

.logo-mark{
    width:42px;
    height:42px;
    border-radius:13px;
    background:linear-gradient(135deg,#15aaa5,#286fda);
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    letter-spacing:-1px;
    box-shadow:0 10px 25px rgba(21,143,190,.24);
    flex:none;
}

.side-brand b,
.brand-lg b{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:16px;
    letter-spacing:-.3px;
}

.side-brand span,
.brand-lg small{
    display:block;
    color:#89a4c0;
    font-size:10px;
}

.mobile-only{
    display:none;
    margin-left:auto;
}

.facility-context{
    margin:5px 2px 16px;
    padding:13px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.035);
    border-radius:14px;
}

.facility-context span{
    display:block;
    color:#6686a8;
    font-size:8px;
    letter-spacing:1.5px;
    font-weight:800;
}

.facility-context b{
    display:block;
    color:#fff;
    margin:5px 0 2px;
    font-size:12px;
}

.facility-context small{
    font-size:9px;
    color:#7f9bb7;
}

.sidebar nav{
    display:grid;
    gap:4px;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 11px;
    border-radius:11px;
    color:#a9bdd3;
    font-size:11px;
    font-weight:600;
    transition:var(--transition);
}

.nav-link svg{
    width:16px;
    height:16px;
    stroke-width:1.8;
}

.nav-link:hover{
    background:rgba(255,255,255,.06);
    color:#fff;
    transform:translateX(2px);
}

.nav-link.active{
    background:linear-gradient(90deg,#1b63bd,#124b91);
    color:#fff;
    box-shadow:
        inset 3px 0 0 #2ac4c3,
        0 8px 20px rgba(0,0,0,.12);
}

.side-bottom{
    margin-top:16px;
    padding-top:13px;
    border-top:1px solid rgba(255,255,255,.08);
}

.env{
    font-size:8px;
    letter-spacing:1px;
    color:#7e9ab7;
    padding:7px 10px;
}

.env span{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#20c48a;
    margin-right:5px;
    box-shadow:0 0 0 4px rgba(32,196,138,.08);
}

.signout{
    display:flex;
    gap:10px;
    align-items:center;
    padding:10px;
    color:#a9bdd3;
    font-size:11px;
    transition:var(--transition);
}

.signout:hover{
    color:#fff;
}


/* =========================================================
   MAIN + TOPBAR
========================================================= */

.main{
    margin-left:274px;
    min-height:100vh;
}

.topbar{
    height:72px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:80;
}

.top-left,
.top-actions,
.profile,
.global-search{
    display:flex;
    align-items:center;
}

.top-left{
    gap:14px;
    min-width:0;
}

.top-actions{
    gap:9px;
}

.global-search{
    height:40px;
    width:min(520px,45vw);
    border:1px solid var(--line);
    background:#f8fafc;
    border-radius:12px;
    padding:0 11px;
    color:#8a9aad;
    gap:8px;
    transition:var(--transition);
}

.global-search:focus-within{
    border-color:#9bc0eb;
    box-shadow:0 0 0 4px rgba(23,105,211,.06);
    background:#fff;
}

.global-search svg{
    width:15px;
}

.global-search input{
    border:0;
    outline:0;
    background:transparent;
    width:100%;
    font-size:11px;
    color:var(--ink);
}

.global-search kbd{
    font-size:9px;
    border:1px solid #dfe6ee;
    background:#fff;
    border-radius:6px;
    padding:4px 6px;
    color:#91a0b0;
}

.icon-btn{
    border:1px solid var(--line);
    background:#fff;
    color:#607289;
    width:38px;
    height:38px;
    border-radius:11px;
    display:grid;
    place-items:center;
    transition:var(--transition);
}

.icon-btn:hover{
    border-color:#bcd2e9;
    color:var(--blue);
    transform:translateY(-1px);
}

.icon-btn svg{
    width:16px;
}

.notify{
    position:relative;
}

.notify em{
    position:absolute;
    right:-2px;
    top:-4px;
    min-width:15px;
    height:15px;
    border-radius:20px;
    background:#e54848;
    color:#fff;
    font-size:8px;
    font-style:normal;
    display:grid;
    place-items:center;
    border:2px solid #fff;
}

.lang{
    font-size:9px;
    font-weight:800;
}

.profile{
    gap:8px;
    padding-left:8px;
}

.profile b{
    display:block;
    font-size:11px;
}

.profile small{
    display:block;
    color:#8392a3;
    font-size:9px;
    margin-top:2px;
}

.avatar,
.table-avatar{
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#e6f1ff,#dff5f2);
    color:#1769d3;
    font-weight:800;
}

.avatar{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:12px;
}

.content{
    padding:25px 28px;
    max-width:1600px;
    margin:auto;
}

footer{
    text-align:center;
    color:#95a1af;
    font-size:9px;
    padding:26px;
}


/* =========================================================
   ALERTS
========================================================= */

.flash{
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:16px;
    font-size:11px;
    font-weight:600;
}

.flash.success{
    background:#e8f8f0;
    color:#14744b;
    border:1px solid #cdeedd;
}

.flash.danger{
    background:#fff0f0;
    color:#a52a2a;
    border:1px solid #f3d0d0;
}

.flash.warning{
    background:#fff7df;
    color:#8a6816;
    border:1px solid #f1e0ae;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:20px;
}

.page-head h1{
    font-family:Manrope,Inter,sans-serif;
    margin:5px 0 4px;
    font-size:28px;
    letter-spacing:-.7px;
}

.page-head p{
    margin:0;
    color:var(--muted);
    font-size:11px;
}

.eyebrow{
    font-size:8px;
    font-weight:900;
    letter-spacing:1.7px;
    color:#2672c9;
}

.eyebrow.light{
    color:#7ee0dc;
}

.head-actions{
    display:flex;
    gap:8px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
    border:0;
    border-radius:11px;
    padding:10px 14px;
    font-weight:800;
    font-size:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    transition:var(--transition);
    white-space:nowrap;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn.primary{
    background:linear-gradient(135deg,#1769d3,#1554a5);
    color:#fff;
    box-shadow:0 9px 20px rgba(23,105,211,.18);
}

.btn.primary:hover{
    box-shadow:0 13px 28px rgba(23,105,211,.25);
}

.btn.ghost{
    background:#edf4fc;
    color:#1769d3;
    border:1px solid #dfeaf7;
}

.btn.ghost:hover{
    background:#e3effc;
}

.btn.glass{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    backdrop-filter:blur(8px);
}

.btn.xl{
    padding:13px 18px;
    font-size:11px;
    border-radius:12px;
}

.btn.full{
    width:100%;
}

.danger-btn{
    background:#d84444;
    color:#fff;
}


/* =========================================================
   COMMAND STRIP
========================================================= */

.command-strip{
    border-radius:22px;
    background:
        radial-gradient(circle at 80% 20%,rgba(25,171,173,.25),transparent 28%),
        linear-gradient(135deg,#082441,#0e3e6c);
    color:#fff;
    padding:25px 26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    overflow:hidden;
    position:relative;
    box-shadow:var(--shadow);
    margin-bottom:17px;
}

.command-strip:after{
    content:"";
    position:absolute;
    inset:auto -10% -70% 45%;
    height:230px;
    background:radial-gradient(circle,rgba(40,111,217,.25),transparent 62%);
}

.command-strip h1{
    font-family:Manrope,Inter,sans-serif;
    font-size:25px;
    margin:5px 0;
}

.command-strip p{
    margin:0;
    color:#a8c2dc;
    font-size:10px;
}

.command-actions{
    display:flex;
    gap:8px;
    align-items:center;
    position:relative;
    z-index:1;
}

.live-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    padding:9px 11px;
    font-size:9px;
    color:#d9edf0;
}

.live-pill i{
    width:6px;
    height:6px;
    background:#28d196;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(40,209,150,.12);
}


/* =========================================================
   KPI
========================================================= */

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:16px;
}

.kpi-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:15px;
    box-shadow:var(--shadow);
    position:relative;
    transition:var(--transition);
    overflow:hidden;
}

.kpi-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    opacity:.8;
}

.kpi-card:hover,
.shortcut:hover,
.module-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 35px rgba(16,42,72,.1);
}

.kpi-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    background:#eef5ff;
    color:#1769d3;
    display:grid;
    place-items:center;
    margin-bottom:10px;
}

.kpi-icon svg{
    width:16px;
}

.kpi-card span{
    display:block;
    color:#738298;
    font-size:9px;
}

.kpi-card strong{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:23px;
    margin:4px 0;
}

.kpi-card small{
    font-size:9px;
    color:#7d8d9e;
}

.kpi-card small b{
    color:#22a579;
}


/* =========================================================
   GRIDS
========================================================= */

.grid-2-7-3{
    display:grid;
    grid-template-columns:1.35fr .95fr;
    gap:16px;
    margin-bottom:16px;
}

.grid-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:16px;
    margin-bottom:16px;
}


/* =========================================================
   PANELS
========================================================= */

.panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:17px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.panel-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.panel-title h2,
.panel h2{
    font-family:Manrope,Inter,sans-serif;
    font-size:14px;
    margin:4px 0 0;
}

.panel-title a{
    font-size:9px;
    color:#1769d3;
}

.panel-title select{
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 9px;
    font-size:9px;
    color:#63758b;
    background:#fff;
}

.chart-box{
    height:240px;
}

.map-panel #commandMap,
.map-panel #emergencyMap,
.panel #surveillanceMap{
    height:240px;
    border-radius:13px;
    overflow:hidden;
    background:#eaf0f4;
}

.map-legend{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    font-size:8px;
    color:#7c8c9d;
    margin-top:9px;
}


/* =========================================================
   METRICS
========================================================= */

.metric-row{
    padding:10px 0;
    border-bottom:1px solid #eef2f6;
}

.metric-row>div:first-child{
    display:flex;
    justify-content:space-between;
    font-size:10px;
    margin-bottom:7px;
}

.metric-row span{
    color:#8795a5;
}

.progress{
    height:6px;
    background:#edf2f6;
    border-radius:6px;
    overflow:hidden;
}

.progress i{
    display:block;
    height:100%;
    background:linear-gradient(90deg,#2d7fe2,#19a8a5);
    border-radius:6px;
}


/* =========================================================
   ALERTS
========================================================= */

.alert-item{
    display:grid;
    grid-template-columns:25px 1fr auto;
    gap:8px;
    padding:9px 0;
    border-bottom:1px solid #eef2f6;
    align-items:start;
}

.alert-symbol{
    width:22px;
    height:22px;
    border-radius:7px;
    display:grid;
    place-items:center;
    background:#fff3dc;
    color:#a26d0d;
    font-weight:900;
    font-size:10px;
}

.alert-symbol.critical,
.alert-symbol.high{
    background:#fff0f0;
    color:#cf3737;
}

.alert-item b{
    display:block;
    font-size:10px;
}

.alert-item small{
    display:block;
    color:#7e8d9e;
    font-size:8px;
    line-height:1.4;
    margin-top:2px;
}

.alert-item>span{
    font-size:8px;
    color:#a26d0d;
}


/* =========================================================
   JOURNEY
========================================================= */

.journey{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    margin:18px 0;
    color:#62758b;
    font-size:9px;
}

.journey span{
    background:#f3f7fb;
    border:1px solid #e5ebf2;
    padding:6px 7px;
    border-radius:7px;
}

.journey i{
    font-style:normal;
    color:#a2adba;
}


/* =========================================================
   SHORTCUTS
========================================================= */

.shortcut-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.shortcut{
    display:flex;
    align-items:center;
    gap:11px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:13px;
    transition:var(--transition);
}

.shortcut>svg{
    width:17px;
    color:#1769d3;
}

.shortcut div{
    flex:1;
}

.shortcut b{
    display:block;
    font-size:10px;
}

.shortcut small{
    display:block;
    font-size:8px;
    color:#8291a1;
    margin-top:3px;
}

.shortcut>span{
    color:#a1adba;
}


/* =========================================================
   STATS
========================================================= */

.section-title{
    margin:18px 0 9px;
}

.section-title h2{
    font-family:Manrope,Inter,sans-serif;
    font-size:15px;
    margin:4px 0;
}

.stat-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:15px;
}

.stat-strip>div{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:13px;
    box-shadow:var(--shadow);
}

.stat-strip small{
    display:block;
    color:#8493a4;
    font-size:8px;
}

.stat-strip b{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:18px;
    margin-top:4px;
}

.stat-strip .danger b{
    color:#d94747;
}

.stat-strip .warning b{
    color:#b57b11;
}


/* =========================================================
   TABLES
========================================================= */

.table-panel{
    padding:0;
}

.table-toolbar{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.toolbar-left{
    display:flex;
    gap:8px;
    align-items:center;
    font-size:10px;
}

.record-count{
    color:#95a2b0;
    font-size:8px;
}

.toolbar-right{
    display:flex;
    gap:7px;
}

.mini-search{
    width:210px;
    height:34px;
    border:1px solid var(--line);
    border-radius:9px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 8px;
}

.mini-search svg{
    width:13px;
    color:#8a99a8;
}

.mini-search input{
    border:0;
    outline:0;
    width:100%;
    font-size:9px;
}

.table-wrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

.panel table{
    width:100%;
    min-width:650px;
    border-collapse:collapse;
    font-size:9px;
}

.panel th{
    color:#7d8b9b;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.6px;
    text-align:left;
    padding:11px 12px;
    border-bottom:1px solid #e9eef3;
    white-space:nowrap;
}

.panel td{
    padding:12px;
    border-bottom:1px solid #eef2f6;
    white-space:nowrap;
    color:#33465b;
}

.panel tbody tr{
    transition:.15s;
}

.panel tbody tr:hover{
    background:#fbfcfe;
}

.person-cell{
    display:flex;
    align-items:center;
    gap:8px;
}

.person-cell b,
.person-cell small{
    display:block;
}

.person-cell small{
    font-size:8px;
    color:#8997a6;
    margin-top:2px;
}

.table-avatar{
    width:27px;
    height:27px;
    border-radius:8px;
    font-size:9px;
}

.status{
    display:inline-flex;
    align-items:center;
    border-radius:7px;
    padding:4px 7px;
    font-size:8px;
    font-weight:800;
}

.status.success{
    background:#e9f8f1;
    color:#16784d;
}

.status.warning{
    background:#fff6df;
    color:#9a6d13;
}

.status.danger{
    background:#fff0f0;
    color:#bf3333;
}

.status.info{
    background:#edf4ff;
    color:#1769d3;
}

.blood-chip{
    background:#f1f5fa;
    border-radius:6px;
    padding:4px 6px;
    font-weight:800;
}

.blood-big{
    font-family:Manrope,Inter,sans-serif;
    font-size:14px;
    color:#1769d3;
}


/* =========================================================
   QUEUE
========================================================= */

.queue-board{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:16px;
}

.queue-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:13px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:var(--shadow);
}

.token{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#eef5ff;
    color:#1769d3;
    display:grid;
    place-items:center;
    font-family:Manrope,Inter,sans-serif;
    font-size:11px;
}

.queue-card>div:nth-child(2){
    flex:1;
}

.queue-card b{
    display:block;
    font-size:10px;
}

.queue-card small{
    display:block;
    color:#8493a4;
    font-size:8px;
    margin-top:3px;
}


/* =========================================================
   BEDS
========================================================= */

.bed-overview{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:16px;
}

.bed-summary{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    box-shadow:var(--shadow);
}

.bed-summary small{
    color:#8290a0;
    font-size:8px;
}

.bed-summary b{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:25px;
    margin:3px 0;
}

.bed-summary span{
    font-size:8px;
    color:#93a0ad;
}

.bed-summary.success b{
    color:#159a68;
}

.bed-summary.danger b{
    color:#d64545;
}

.bed-summary.warning b{
    color:#b57b12;
}

.bed-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:11px;
}

.bed-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:14px;
    box-shadow:var(--shadow);
}

.bed-top{
    display:flex;
    justify-content:space-between;
    gap:7px;
    align-items:center;
}

.bed-top>span{
    font-size:8px;
    color:#7c8c9d;
    max-width:65%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.bed-card h3{
    font-size:11px;
    margin:14px 0 6px;
}

.bed-no{
    font-family:Manrope,Inter,sans-serif;
    font-size:20px;
}

.bed-card>small{
    color:#8b99a7;
    font-size:8px;
}


/* =========================================================
   WORKFLOW
========================================================= */

.workflow-ribbon,
.supply-chain{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    background:#0b2d50;
    color:#dceaf7;
    border-radius:14px;
    padding:13px;
    margin-top:15px;
    font-size:9px;
}

.workflow-ribbon i,
.supply-chain i{
    color:#56d1ca;
    font-style:normal;
}

.supply-chain span{
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:rgba(255,255,255,.04);
}


/* =========================================================
   SENSORS / COLD CHAIN
========================================================= */

.sensor-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:15px;
}

.sensor-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    padding:16px;
    box-shadow:var(--shadow);
}

.sensor-card.critical{
    border-color:#f0baba;
    background:linear-gradient(180deg,#fff,#fff7f7);
}

.sensor-top{
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.sensor-top span{
    font-size:9px;
    color:#687b90;
}

.sensor-card>b{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:30px;
    margin:17px 0 4px;
}

.sensor-card small{
    font-size:8px;
    color:#8795a4;
}

.sensor-card em{
    display:block;
    font-style:normal;
    color:#9aa6b3;
    font-size:8px;
    margin-top:9px;
}

.temp-line{
    height:6px;
    background:#edf1f5;
    border-radius:6px;
    margin-top:14px;
    overflow:hidden;
}

.temp-line i{
    display:block;
    height:100%;
    background:linear-gradient(90deg,#2d7fe2,#1fae9e);
}


/* =========================================================
   TELEMEDICINE
========================================================= */

.tele-room{
    display:grid;
    grid-template-columns:1.6fr .7fr;
    gap:14px;
    margin-bottom:16px;
}

.video-stage{
    min-height:360px;
    border-radius:18px;
    background:linear-gradient(135deg,#061b30,#123d61);
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.video-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    height:100%;
}

.video-grid>div{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    background:
        radial-gradient(circle at 50% 30%,rgba(51,111,173,.35),transparent 40%),
        linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25));
    color:#fff;
}

.video-grid span{
    font-size:8px;
    color:#93b3ce;
}

.video-grid b{
    font-size:12px;
    margin-top:4px;
}

.video-controls{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:7px;
}

.video-controls button{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.1);
    color:#fff;
    border-radius:10px;
    padding:9px 12px;
}

.video-controls .end{
    background:#d84747;
    border:0;
}

.tele-side{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:17px;
    box-shadow:var(--shadow);
}

.tele-step{
    padding:12px 0;
    border-bottom:1px solid #eef2f6;
    font-size:9px;
    color:#728297;
}

.tele-step.done{
    color:#15956a;
}


/* =========================================================
   EMERGENCY + SURVEILLANCE
========================================================= */

.emergency-layout,
.surveillance-layout{
    display:grid;
    grid-template-columns:1.6fr .7fr;
    gap:14px;
    margin-bottom:16px;
}

.emergency-kpis,
.heat-legend{
    display:grid;
    gap:10px;
    align-content:start;
}

.em-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:16px;
    box-shadow:var(--shadow);
}

.em-card small,
.surv-stat small{
    display:block;
    color:#8594a4;
    font-size:8px;
}

.em-card b,
.surv-stat b{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:27px;
    margin:4px 0;
}

.em-card span{
    font-size:8px;
    color:#93a0ad;
}

.em-card.critical{
    border-left:4px solid #d74747;
}

.heat-card{
    padding:12px 14px;
    border-radius:13px;
    color:#fff;
}

.heat-card b{
    display:block;
    font-size:11px;
}

.heat-card span{
    font-size:8px;
    opacity:.85;
}

.heat-card.high{
    background:#cc4545;
}

.heat-card.medium{
    background:#d69a2e;
}

.heat-card.normal{
    background:#2d9b73;
}

.surv-stat{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
}


/* =========================================================
   REPORTS
========================================================= */

.report-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    margin-bottom:16px;
}

.report-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:14px;
    box-shadow:var(--shadow);
}

.report-card span{
    display:block;
    font-size:8px;
    color:#1769d3;
    font-weight:800;
    text-transform:uppercase;
}

.report-card b{
    display:block;
    font-family:Manrope,Inter,sans-serif;
    font-size:23px;
    margin:8px 0;
}

.report-card small,
.report-card em{
    display:block;
    font-size:8px;
}

.report-card em{
    color:#8b99a7;
    font-style:normal;
    margin-top:3px;
}

.report-list>div{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #eef2f6;
    font-size:9px;
}

.report-list span{
    color:#7d8c9c;
}


/* =========================================================
   ADMIN
========================================================= */

.admin-grid{
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:14px;
    margin-bottom:14px;
}

.role-row{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 0;
    border-bottom:1px solid #eef2f6;
}

.role-dot{
    width:28px;
    height:28px;
    border-radius:9px;
    background:#edf5ff;
    color:#1769d3;
    display:grid;
    place-items:center;
    font-size:9px;
    font-weight:800;
}

.role-row div:nth-child(2){
    flex:1;
}

.role-row b,
.role-row small{
    display:block;
}

.role-row b{
    font-size:9px;
}

.role-row small{
    font-size:7px;
    color:#8998a8;
    margin-top:2px;
}

.role-row>span{
    font-size:8px;
    color:#8998a8;
}

.permission-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.permission-grid>div{
    padding:10px;
    border:1px solid #edf1f5;
    border-radius:10px;
}

.permission-grid svg{
    width:13px;
    color:#1769d3;
    margin-bottom:5px;
}

.permission-grid b,
.permission-grid small{
    display:block;
}

.permission-grid b{
    font-size:8px;
}

.permission-grid small{
    font-size:7px;
    color:#8998a8;
    margin-top:3px;
}

.audit-row{
    display:grid;
    grid-template-columns:110px 1fr 190px;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #eef2f6;
    font-size:8px;
}

.audit-row span{
    color:#1769d3;
    font-weight:800;
}

.audit-row small{
    color:#8998a8;
}


/* =========================================================
   MODAL
========================================================= */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(4,17,31,.62);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    z-index:1000;
    place-items:center;
    padding:20px;
}

.modal.open{
    display:grid;
}

.modal-card{
    width:min(760px,96vw);
    max-height:92vh;
    overflow:auto;
    background:#fff;
    border-radius:20px;
    padding:20px;
    box-shadow:0 30px 80px rgba(0,0,0,.25);
}

.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:start;
    margin-bottom:15px;
}

.modal-head h2{
    font-family:Manrope,Inter,sans-serif;
    font-size:17px;
    margin:4px 0;
}

.modal-head button{
    border:0;
    background:#f3f6f9;
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:20px;
    color:#6e7e91;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.field{
    font-size:8px;
    font-weight:800;
    color:#5e7085;
}

.field>span{
    display:block;
    margin-top:5px;
}

.field input,
.field select,
.field textarea{
    width:100%;
    border:1px solid #dfe6ee;
    border-radius:10px;
    padding:10px;
    outline:0;
    font-size:10px;
    background:#fff;
    color:#263b50;
    transition:var(--transition);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:#3b82d0;
    box-shadow:0 0 0 3px rgba(59,130,208,.08);
}

.field textarea{
    min-height:90px;
    resize:vertical;
}

.full-col{
    grid-column:1/-1;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:7px;
}


/* =========================================================
   EMPTY PAGE
========================================================= */

.center-page{
    min-height:100vh;
    display:grid;
    place-items:center;
}

.empty-state{
    text-align:center;
    padding:25px;
}

.empty-icon{
    font-family:Manrope,Inter,sans-serif;
    font-size:45px;
    color:#1769d3;
}

.empty-state h1{
    font-family:Manrope,Inter,sans-serif;
}

.empty-state p{
    color:#78899b;
    font-size:11px;
}


/* =========================================================
   ACCESS MANAGEMENT
========================================================= */

.access-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:14px;
}

.role-picker{
    padding:12px;
}

.role-pick{
    display:flex;
    gap:8px;
    align-items:center;
    padding:9px;
    border-radius:10px;
    margin:3px 0;
    transition:.2s;
}

.role-pick:hover,
.role-pick.active{
    background:#eef5ff;
}

.role-pick div:nth-child(2){
    flex:1;
}

.role-pick b,
.role-pick small{
    display:block;
}

.role-pick b{
    font-size:9px;
}

.role-pick small{
    font-size:7px;
    color:#8a99a8;
    margin-top:2px;
}

.access-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.access-toggle{
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid #e8edf2;
    border-radius:11px;
    padding:10px;
    cursor:pointer;
    transition:.2s;
}

.access-toggle:hover{
    border-color:#bdd3ea;
    background:#fafcff;
}

.access-toggle input{
    display:none;
}

.switch{
    width:30px;
    height:17px;
    background:#d9e2eb;
    border-radius:20px;
    position:relative;
    flex:none;
}

.switch:after{
    content:"";
    position:absolute;
    width:13px;
    height:13px;
    top:2px;
    left:2px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:.2s;
}

.access-toggle input:checked+.switch{
    background:#1b78d2;
}

.access-toggle input:checked+.switch:after{
    left:15px;
}

.access-toggle b,
.access-toggle small{
    display:block;
}

.access-toggle b{
    font-size:8px;
}

.access-toggle small{
    font-size:7px;
    color:#8a98a7;
    margin-top:2px;
}

.muted{
    color:#7b8b9b;
    font-size:10px;
    line-height:1.6;
}


/* =========================================================
   LANDING PAGE NAV
========================================================= */

.landing{
    background:#fff;
}

.landing-nav{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:76px;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6vw;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.brand-lg{
    display:flex;
    align-items:center;
    gap:9px;
}

.brand-lg b{
    font-size:16px;
}

.brand-lg small{
    color:#9fc1d9;
}

.landing-nav nav{
    display:flex;
    gap:26px;
    font-size:10px;
    color:#d7e6f2;
}

.landing-nav nav a{
    position:relative;
    transition:.2s;
}

.landing-nav nav a:after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-8px;
    height:2px;
    border-radius:10px;
    background:#62ddd7;
    transition:.25s;
}

.landing-nav nav a:hover{
    color:#fff;
}

.landing-nav nav a:hover:after{
    right:0;
}

.nav-cta{
    display:flex;
    gap:8px;
}

.menu-toggle{
    display:none;
    width:40px;
    height:40px;
    border-radius:11px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    font-size:20px;
    line-height:1;
}


/* =========================================================
   LANDING MOBILE MENU
========================================================= */

@media(max-width:1000px){

    .landing-nav{
        padding:0 5vw;
    }

    .landing-nav nav{
        display:none;
    }

    .menu-toggle{
        display:grid;
        place-items:center;
    }

    body.menu-open .landing-nav nav{
        display:flex;
        position:absolute;
        left:5vw;
        right:5vw;
        top:68px;
        flex-direction:column;
        gap:0;
        padding:8px;
        background:rgba(5,25,44,.97);
        border:1px solid rgba(255,255,255,.12);
        border-radius:16px;
        box-shadow:0 25px 60px rgba(0,0,0,.25);
        backdrop-filter:blur(20px);
    }

    body.menu-open .landing-nav nav a{
        padding:13px 12px;
        border-radius:10px;
    }

    body.menu-open .landing-nav nav a:hover{
        background:rgba(255,255,255,.06);
    }

    body.menu-open .landing-nav nav a:after{
        display:none;
    }
}


/* =========================================================
   HERO
========================================================= */

.hero{
    min-height:760px;
    position:relative;
    color:#fff;
    overflow:hidden;
    background:#082440;
}

.hero-slides,
.hero-slide,
.hero-overlay{
    position:absolute;
    inset:0;
}

.hero-slide{
    background-position:center;
    background-size:cover;
    opacity:0;
    transition:opacity .8s ease;
    transform:scale(1.02);
}

.hero-slide.active{
    opacity:1;
}

.hero-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(4,20,38,.93) 0%,
            rgba(7,35,62,.76) 48%,
            rgba(6,30,51,.38) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5,25,42,.7),
            transparent 50%
        );
}

.hero-content{
    position:relative;
    z-index:2;
    padding:190px 8vw 150px;
    max-width:800px;
}

.hero h1{
    font-family:Manrope,Inter,sans-serif;
    font-size:64px;
    line-height:1.03;
    letter-spacing:-2.5px;
    margin:12px 0 18px;
}

.hero h1 span{
    color:#69ddd7;
}

.hero p{
    font-size:14px;
    line-height:1.75;
    color:#c2d5e6;
    max-width:660px;
}

.hero-actions{
    display:flex;
    gap:10px;
    margin-top:24px;
}

.hero-proof{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:25px;
    color:#a7c0d5;
    font-size:9px;
}

.slider-dots{
    position:absolute;
    z-index:5;
    left:8vw;
    bottom:150px;
    display:flex;
    gap:6px;
}

.slider-dots button{
    width:30px;
    height:4px;
    border:0;
    border-radius:5px;
    background:rgba(255,255,255,.35);
    padding:0;
}

.slider-dots button.active{
    background:#5fd7d2;
}

.hero-statbar{
    position:absolute;
    z-index:4;
    bottom:0;
    left:0;
    right:0;
    height:92px;
    background:rgba(5,22,39,.65);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.1);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:0 8vw;
}

.hero-statbar div{
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.1);
    padding-left:25px;
}

.hero-statbar div:first-child{
    padding-left:0;
}

.hero-statbar div:last-child{
    border:0;
}

.hero-statbar b{
    font-family:Manrope,Inter,sans-serif;
    font-size:22px;
}

.hero-statbar span{
    font-size:8px;
    color:#9bb3c8;
    margin-top:3px;
}


/* =========================================================
   LANDING SECTIONS
========================================================= */

.section{
    padding:95px 8vw;
}

.section-soft{
    background:#f5f8fb;
}

.section-head{
    display:flex;
    justify-content:space-between;
    gap:40px;
    align-items:end;
    margin-bottom:42px;
}

.section-head.center{
    display:block;
    text-align:center;
    max-width:760px;
    margin:0 auto 42px;
}

.section-head h2{
    font-family:Manrope,Inter,sans-serif;
    font-size:38px;
    line-height:1.12;
    letter-spacing:-1.4px;
    margin:7px 0;
}

.section-head p{
    max-width:500px;
    color:#738397;
    font-size:12px;
    line-height:1.7;
}


/* =========================================================
   FEATURES
========================================================= */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.feature-grid article{
    padding:23px;
    background:#fff;
    border:1px solid #e6edf3;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(16,42,72,.04);
    transition:var(--transition);
}

.feature-grid article:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(16,42,72,.1);
}

.feature-icon{
    width:42px;
    height:42px;
    border-radius:13px;
    background:#eaf4ff;
    color:#1769d3;
    display:grid;
    place-items:center;
    font-size:19px;
    margin-bottom:18px;
}

.feature-grid h3,
.module-card h3{
    font-family:Manrope,Inter,sans-serif;
    font-size:14px;
    margin:0 0 7px;
}

.feature-grid p,
.module-card p{
    font-size:10px;
    line-height:1.65;
    color:#7b8a9b;
    margin:0;
}


/* =========================================================
   MODULES
========================================================= */

.module-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.module-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px;
    border:1px solid #e5ebf1;
    border-radius:14px;
    background:#fff;
    transition:var(--transition);
}

.module-card .mi{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#f0f6ff;
    color:#1769d3;
    flex:none;
}

.module-card .mi svg{
    width:16px;
}

.module-card div:nth-child(2){
    flex:1;
}

.module-card p{
    font-size:8px;
    line-height:1.4;
}

.module-card>span{
    color:#a2afbc;
}


/* =========================================================
   COMMAND PREVIEW
========================================================= */

.command-preview{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.command-copy h2{
    font-family:Manrope,Inter,sans-serif;
    font-size:40px;
    letter-spacing:-1.4px;
    line-height:1.12;
    margin:8px 0 14px;
}

.command-copy p{
    color:#748499;
    font-size:12px;
    line-height:1.8;
    max-width:520px;
}

.checks{
    display:grid;
    gap:9px;
    margin:20px 0;
    color:#486178;
    font-size:10px;
}

.mini-dashboard{
    background:#0a2848;
    border-radius:22px;
    padding:15px;
    box-shadow:0 30px 70px rgba(10,45,75,.2);
    transform:rotate(1deg);
}

.mini-top{
    display:flex;
    justify-content:space-between;
    color:#fff;
    font-size:10px;
    padding:5px;
}

.mini-top span{
    font-size:7px;
    color:#5ee0bc;
}

.mini-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin:10px 0;
}

.mini-kpis div{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    padding:9px;
}

.mini-kpis small{
    display:block;
    color:#88a4bc;
    font-size:7px;
}

.mini-kpis b{
    display:block;
    color:#fff;
    font-family:Manrope,Inter,sans-serif;
    margin-top:4px;
}

.mini-map{
    height:210px;
    border-radius:13px;
    background:
        radial-gradient(circle at 20% 30%,rgba(38,136,209,.35),transparent 24%),
        radial-gradient(circle at 70% 70%,rgba(26,164,164,.22),transparent 26%),
        linear-gradient(145deg,#0e4264,#0a2b49);
    position:relative;
    overflow:hidden;
}

.map-dot{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#54ded4;
    box-shadow:
        0 0 0 6px rgba(84,222,212,.1),
        0 0 25px rgba(84,222,212,.7);
}

.d1{left:25%;top:35%}
.d2{left:57%;top:25%}
.d3{left:70%;top:60%}
.d4{left:40%;top:72%}

.map-label{
    position:absolute;
    color:#9dbbd0;
    font-size:7px;
}

.l1{left:20%;top:43%}
.l2{left:61%;top:33%}

.mini-alert{
    display:flex;
    gap:9px;
    align-items:center;
    margin-top:9px;
    padding:10px;
    border-radius:10px;
    background:rgba(224,73,73,.12);
    border:1px solid rgba(224,73,73,.18);
    color:#fff;
}

.mini-alert>span{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:6px;
    background:#db4b4b;
    font-weight:800;
}

.mini-alert b,
.mini-alert small{
    display:block;
}

.mini-alert b{
    font-size:8px;
}

.mini-alert small{
    font-size:7px;
    color:#a9bdcf;
    margin-top:2px;
}


/* =========================================================
   ROLE GRID
========================================================= */

.role-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    max-width:1100px;
    margin:auto;
}

.role-card{
    display:flex;
    gap:9px;
    padding:12px;
    border:1px solid #e4ebf2;
    background:#fff;
    border-radius:13px;
    transition:.2s;
}

.role-card:hover{
    border-color:#bfd5eb;
    transform:translateY(-2px);
}

.role-avatar{
    width:32px;
    height:32px;
    border-radius:10px;
    background:#edf5ff;
    color:#1769d3;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:10px;
    flex:none;
}

.role-card b,
.role-card span,
.role-card small{
    display:block;
}

.role-card b{
    font-size:9px;
}

.role-card span{
    font-size:8px;
    color:#5f748b;
    margin-top:2px;
}

.role-card small{
    font-size:7px;
    color:#95a1ae;
    margin-top:2px;
}


/* =========================================================
   CTA + FOOTER
========================================================= */

.cta-section{
    padding:75px 8vw;
    background:
        radial-gradient(circle at 80% 20%,rgba(34,191,184,.18),transparent 25%),
        linear-gradient(135deg,#08233f,#0d4770);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.cta-section h2{
    font-family:Manrope,Inter,sans-serif;
    font-size:38px;
    max-width:650px;
    margin:8px 0;
}

.cta-section p{
    color:#a9c1d6;
    font-size:11px;
}

.landing-footer{
    display:flex;
    justify-content:space-between;
    padding:24px 8vw;
    font-size:8px;
    color:#8998a8;
}


/* =========================================================
   LOGIN
========================================================= */

.login-modern{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    background:#fff;
}

.login-art{
    position:relative;
    background:url('../images/login.svg') center/cover no-repeat;
    min-height:100vh;
    color:#fff;
}

.login-art-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 70% 30%,rgba(26,181,174,.18),transparent 30%),
        linear-gradient(135deg,rgba(4,24,42,.94),rgba(11,66,91,.58));
}

.login-art-content{
    position:relative;
    z-index:2;
    padding:36px 8vw 36px 7vw;
    height:100%;
    display:flex;
    flex-direction:column;
}

.login-message{
    margin:auto 0;
    max-width:520px;
}

.login-message h1{
    font-family:Manrope,Inter,sans-serif;
    font-size:52px;
    line-height:1.04;
    letter-spacing:-2px;
    margin:10px 0 16px;
}

.login-message h1 span{
    color:#70ddd7;
}

.login-message p{
    color:#b9cfe1;
    font-size:12px;
    line-height:1.7;
}

.login-chips{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:20px;
}

.login-chips span{
    font-size:8px;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.05);
    border-radius:8px;
}

.login-panel{
    display:grid;
    place-items:center;
    padding:35px;
}

.login-inner{
    width:min(470px,100%);
}

.mobile-brand{
    display:none;
    margin-bottom:35px;
}

.login-head{
    margin-bottom:20px;
}

.login-head h2{
    font-family:Manrope,Inter,sans-serif;
    font-size:28px;
    margin:6px 0;
}

.login-head p{
    font-size:10px;
    color:#8291a2;
}

.auth-form label{
    display:block;
    font-size:9px;
    font-weight:800;
    color:#52677c;
    margin-bottom:12px;
}

.auth-form input{
    width:100%;
    margin-top:6px;
    border:1px solid #dce5ed;
    border-radius:11px;
    padding:12px;
    outline:0;
    font-size:10px;
    transition:.2s;
}

.auth-form input:focus{
    border-color:#3b82d0;
    box-shadow:0 0 0 4px rgba(59,130,208,.07);
}

.password-wrap{
    position:relative;
}

.password-wrap input{
    padding-right:52px;
}

.password-wrap button{
    position:absolute;
    right:5px;
    top:5px;
    height:31px;
    border:0;
    background:#f2f5f8;
    border-radius:7px;
    font-size:8px;
    color:#557087;
}

.login-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:5px 0 10px;
    font-size:8px;
}

.login-options a{
    color:#1769d3;
}

.check{
    display:flex!important;
    align-items:center;
    gap:5px;
    margin:0!important;
}

.check input{
    width:auto!important;
    margin:0!important;
}

.login-extra{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:12px;
    margin:5px 0 10px;
}

.login-extra>label:first-child{
    font-size:8px;
    font-weight:800;
    color:#52677c;
}

.login-extra select{
    display:block;
    margin-top:5px;
    border:1px solid #dce5ed;
    border-radius:9px;
    padding:7px 9px;
    font-size:9px;
}

.login-extra .check{
    font-size:8px!important;
    color:#6d7e90!important;
}

.demo-login{
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid #edf1f4;
}

.demo-title{
    display:flex;
    justify-content:space-between;
    margin-bottom:9px;
}

.demo-title b{
    font-size:10px;
}

.demo-title span{
    font-size:8px;
    color:#9aa7b4;
}

.demo-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}

.demo-role{
    border:1px solid #e4ebf1;
    background:#fbfcfd;
    border-radius:9px;
    padding:8px;
    text-align:left;
    transition:.2s;
}

.demo-role:hover{
    border-color:#9dc0e9;
    background:#f4f8fd;
}

.demo-role b,
.demo-role small{
    display:block;
}

.demo-role b{
    font-size:8px;
    color:#334b63;
}

.demo-role small{
    font-size:7px;
    color:#94a0ad;
    margin-top:2px;
}

.security-note{
    font-size:7px;
    line-height:1.5;
    color:#9aa5b1;
    margin:14px 0;
}

.back-link{
    font-size:8px;
    color:#1769d3;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media(max-width:1200px){

    .sidebar{
        width:235px;
    }

    .main{
        margin-left:235px;
    }

    .module-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .report-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .hero h1{
        font-size:58px;
    }

    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .role-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .access-layout{
        grid-template-columns:1fr;
    }

    .access-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .sidebar{
        width:72px;
    }

    .sidebar span,
    .side-brand div:not(.logo-mark),
    .facility-context,
    .nav-link span,
    .env{
        display:none;
    }

    .side-brand{
        justify-content:center;
    }

    .main{
        margin-left:72px;
    }

    .kpi-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .grid-3,
    .shortcut-grid,
    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .grid-2-7-3,
    .emergency-layout,
    .surveillance-layout,
    .tele-room,
    .command-preview,
    .admin-grid{
        grid-template-columns:1fr;
    }

    .bed-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .sensor-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .role-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .landing-nav nav{
        display:none;
    }

    .menu-toggle{
        display:grid;
    }

    .hero h1{
        font-size:52px;
    }

    .section{
        padding:75px 6vw;
    }

    .module-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .command-preview{
        gap:35px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    body{
        font-size:14px;
    }

    /* sidebar */

    .sidebar{
        display:none;
    }

    .main{
        margin-left:0;
    }

    /* topbar */

    .topbar{
        height:62px;
        padding:0 13px;
    }

    .top-left{
        gap:8px;
        flex:1;
    }

    .global-search{
        width:100%;
        max-width:100%;
        height:38px;
    }

    .global-search kbd{
        display:none;
    }

    .top-actions{
        gap:5px;
    }

    .top-actions .lang{
        display:none;
    }

    .top-actions .profile{
        padding-left:2px;
    }

    .profile div:last-child{
        display:none;
    }

    .avatar{
        width:34px;
        height:34px;
    }

    .content{
        padding:18px 13px;
    }

    /* headings */

    .page-head{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .page-head h1{
        font-size:23px;
    }

    .head-actions{
        width:100%;
        flex-wrap:wrap;
    }

    .head-actions .btn{
        flex:1;
    }

    /* command */

    .command-strip{
        align-items:flex-start;
        gap:15px;
        flex-direction:column;
        padding:19px;
        border-radius:17px;
    }

    .command-strip h1{
        font-size:21px;
    }

    .command-actions{
        width:100%;
        flex-wrap:wrap;
    }

    .command-actions .btn{
        flex:1;
    }

    /* cards */

    .kpi-grid,
    .stat-strip,
    .bed-overview,
    .bed-grid,
    .sensor-grid,
    .queue-board,
    .report-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .kpi-card{
        padding:13px;
    }

    .kpi-card strong{
        font-size:20px;
    }

    .grid-3,
    .shortcut-grid,
    .feature-grid,
    .role-grid,
    .permission-grid{
        grid-template-columns:1fr;
    }

    .grid-2-7-3,
    .emergency-layout,
    .surveillance-layout,
    .tele-room,
    .command-preview,
    .admin-grid{
        grid-template-columns:1fr;
    }

    /* panels */

    .panel{
        border-radius:15px;
        padding:14px;
    }

    .panel-title{
        align-items:flex-start;
    }

    .chart-box{
        height:200px;
    }

    .map-panel #commandMap,
    .map-panel #emergencyMap,
    .panel #surveillanceMap{
        height:210px;
    }

    /* tables */

    .table-toolbar{
        align-items:flex-start;
        gap:10px;
        flex-direction:column;
    }

    .toolbar-left,
    .toolbar-right{
        width:100%;
    }

    .toolbar-right{
        justify-content:flex-start;
    }

    .mini-search{
        width:100%;
    }

    /* beds */

    .bed-card{
        padding:12px;
    }

    .bed-summary{
        padding:13px;
    }

    .bed-summary b{
        font-size:21px;
    }

    /* telemedicine */

    .video-stage{
        min-height:280px;
    }

    .video-grid>div{
        padding:12px;
    }

    .video-controls{
        bottom:9px;
    }

    .video-controls button{
        padding:8px 10px;
    }

    /* forms */

    .form-grid{
        grid-template-columns:1fr;
    }

    .full-col{
        grid-column:auto;
    }

    .modal{
        padding:10px;
    }

    .modal-card{
        width:100%;
        max-height:94vh;
        border-radius:17px;
        padding:16px;
    }

    /* access */

    .access-grid{
        grid-template-columns:1fr;
    }

    .audit-row{
        grid-template-columns:80px 1fr;
    }

    .audit-row small{
        display:none;
    }

    /* landing */

    .landing-nav{
        height:66px;
        padding:0 5vw;
    }

    .brand-lg b{
        font-size:14px;
    }

    .brand-lg small{
        font-size:8px;
    }

    .brand-lg .logo-mark{
        width:36px;
        height:36px;
        border-radius:11px;
    }

    .nav-cta{
        display:none;
    }

    .hero{
        min-height:760px;
    }

    .hero-content{
        padding:135px 7vw 145px;
    }

    .hero h1{
        font-size:43px;
        line-height:1.04;
        letter-spacing:-1.6px;
    }

    .hero p{
        font-size:11px;
        line-height:1.7;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .hero-actions .btn{
        width:100%;
    }

    .hero-proof{
        font-size:8px;
        gap:9px 12px;
    }

    .slider-dots{
        left:7vw;
        bottom:137px;
    }

    .hero-statbar{
        padding:0 5vw;
        height:105px;
    }

    .hero-statbar div{
        padding-left:8px;
    }

    .hero-statbar b{
        font-size:15px;
    }

    .hero-statbar span{
        font-size:7px;
    }

    .section{
        padding:65px 6vw;
    }

    .section-head{
        display:block;
        margin-bottom:30px;
    }

    .section-head h2,
    .command-copy h2,
    .cta-section h2{
        font-size:30px;
        letter-spacing:-.9px;
    }

    .section-head p{
        font-size:11px;
    }

    .feature-grid{
        gap:10px;
    }

    .feature-grid article{
        padding:18px;
    }

    .module-grid{
        grid-template-columns:1fr;
    }

    .command-preview{
        gap:35px;
    }

    .mini-dashboard{
        transform:none;
        border-radius:17px;
    }

    .mini-map{
        height:190px;
    }

    .role-grid{
        max-width:none;
    }

    .cta-section{
        display:block;
        padding:60px 6vw;
    }

    .cta-section .btn{
        margin-top:20px;
        width:100%;
    }

    .landing-footer{
        display:block;
        text-align:center;
        line-height:1.8;
        padding:20px 6vw;
    }

    /* login */

    .login-modern{
        grid-template-columns:1fr;
        min-height:100vh;
    }

    .login-art{
        display:none;
    }

    .mobile-brand{
        display:block;
        margin-bottom:28px;
    }

    .login-panel{
        min-height:100vh;
        padding:25px 18px;
        align-items:start;
    }

    .login-inner{
        padding-top:10px;
    }

    .login-head h2{
        font-size:25px;
    }

    .demo-grid{
        grid-template-columns:1fr;
    }

    .login-extra{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .topbar{
        padding:0 9px;
    }

    .global-search{
        min-width:0;
    }

    .top-actions .notify,
    .top-actions .icon-btn:not(.notify){
        width:34px;
        height:34px;
    }

    .content{
        padding:15px 10px;
    }

    .kpi-grid,
    .stat-strip,
    .bed-overview,
    .bed-grid,
    .sensor-grid,
    .queue-board,
    .report-grid{
        grid-template-columns:1fr;
    }

    .kpi-card strong{
        font-size:22px;
    }

    .hero{
        min-height:800px;
    }

    .hero-content{
        padding:125px 7vw 155px;
    }

    .hero h1{
        font-size:37px;
    }

    .hero-statbar{
        height:125px;
        grid-template-columns:repeat(2,1fr);
        padding:8px 6vw;
    }

    .hero-statbar div{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
        padding-left:0;
    }

    .hero-statbar div:nth-child(odd){
        border-right:1px solid rgba(255,255,255,.08);
    }

    .hero-statbar div:nth-last-child(-n+2){
        border-bottom:0;
    }

    .hero-statbar b{
        font-size:14px;
    }

    .hero-statbar span{
        font-size:6.5px;
    }

    .section{
        padding:55px 5vw;
    }

    .section-head h2,
    .command-copy h2,
    .cta-section h2{
        font-size:27px;
    }

    .mini-kpis{
        grid-template-columns:1fr;
    }

    .mini-kpis div{
        padding:8px;
    }

    .command-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .command-actions .btn,
    .command-actions .live-pill{
        width:100%;
        justify-content:center;
    }

    .login-panel{
        padding:22px 14px;
    }
}


/* =========================================================
   ACCESSIBILITY / UX
========================================================= */

:focus-visible{
    outline:3px solid rgba(23,105,211,.22);
    outline-offset:2px;
}

::selection{
    background:rgba(23,105,211,.16);
    color:var(--ink);
}

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}