/* Sentinel — base stylesheet
   Dark, control-room feel; matches the static dashboard concept.
*/

:root {
    --bg:    #0A111E;
    --bg2:   #0E1726;
    --panel: #111C2F;
    --line:  rgba(146,166,200,.12);
    --line2: rgba(146,166,200,.22);
    --ink:   #E8EEF8;
    --mut:   #8A99B5;
    --dim:   #56657F;
    --op:    #34D399;
    --rdy:   #38BDF8;
    --warn:  #FBBF24;
    --alm:   #FB5E68;
    --off:   #5A6B88;
    --teal:  #2DD4BF;
    --teald: #0c3b39;
    --r:     12px;
}
* { box-sizing: border-box }
html, body { margin: 0 }
body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(45,212,191,.06), transparent 60%),
        radial-gradient(900px 500px at -5% 10%, rgba(56,189,248,.05), transparent 55%),
        var(--bg);
    color: var(--ink);
    font: 14px/1.5 Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace }
.muted { color: var(--dim) }

/* ---- top nav ---- */
.topnav {
    display: flex; align-items: center; gap: 24px;
    padding: 14px 26px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel), transparent);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink) }
.logo {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--teal), #1d8f86);
    display: grid; place-items: center;
    font-family: 'Space Grotesk'; font-weight: 700; color: #04201d;
    box-shadow: 0 0 0 1px rgba(45,212,191,.25), 0 8px 24px -8px rgba(45,212,191,.5);
}
.logo.lg { width: 52px; height: 52px; border-radius: 12px; font-size: 22px }
.brand-text { font-family: 'Space Grotesk'; font-weight: 600; font-size: 16px; letter-spacing: -.2px }
.brand-sub { font-size: 11.5px; color: var(--mut); letter-spacing: .04em; text-transform: uppercase; margin-left: 4px }
.nav-links { display: flex; gap: 4px; flex: 1; margin-left: 18px }
.nav-links a {
    padding: 8px 14px; border-radius: 8px;
    color: var(--mut); font-weight: 500; font-size: 13px;
}
.nav-links a.on { background: var(--panel); color: var(--ink) }
.nav-links a:hover { color: var(--ink) }
.nav-user { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--mut) }
.nav-user .who { color: var(--ink) }
.nav-user .role {
    text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px;
    padding: 2px 7px; border-radius: 4px;
    background: rgba(45,212,191,.12); color: var(--teal);
}
.nav-user .role.client { background: rgba(56,189,248,.13); color: var(--rdy) }
.logout { color: var(--mut) }
.logout:hover { color: var(--ink) }

.wrap { max-width: 1480px; margin: 0 auto; padding: 28px 26px 60px }
.foot {
    max-width: 1480px; margin: 0 auto; padding: 18px 26px 30px;
    border-top: 1px solid var(--line); color: var(--dim); font-size: 11.5px;
}

/* ---- page head ---- */
.page-head {
    display: flex; justify-content: space-between; align-items: end;
    gap: 20px; margin-bottom: 22px;
}
.eyebrow { font-size: 11.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px }
h1 { font-family: 'Space Grotesk'; font-weight: 600; font-size: 26px; margin: 0; letter-spacing: -.3px }
.page-head-right { text-align: right; font-size: 12px; color: var(--mut) }
.snap { line-height: 1.65 }
.status-pill {
    display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
    background: rgba(52,211,153,.13); color: var(--op);
}
.status-pill.partial { background: rgba(251,191,36,.13); color: var(--warn) }
.status-pill.failed  { background: rgba(251,94,104,.14); color: var(--alm) }
.status-pill.running { background: rgba(56,189,248,.13); color: var(--rdy) }

/* ---- KPI grid ---- */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px }
.kpi {
    background: linear-gradient(180deg, var(--panel), var(--bg2));
    border: 1px solid var(--line); border-radius: var(--r);
    padding: 15px 16px; position: relative; overflow: hidden;
}
.kpi .v { font-family: 'Space Grotesk'; font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1 }
.kpi .l { font-size: 11px; color: var(--mut); margin-top: 7px; text-transform: uppercase; letter-spacing: .06em }
.kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--teal);
}
.kpi.op .v  { color: var(--op)  } .kpi.op::before  { background: var(--op) }
.kpi.rdy .v { color: var(--rdy) } .kpi.rdy::before { background: var(--rdy) }
.kpi.wrn .v { color: var(--warn)} .kpi.wrn::before { background: var(--warn) }
.kpi.alm .v { color: var(--alm) } .kpi.alm::before { background: var(--alm) }
.kpi.off .v { color: var(--off) } .kpi.off::before { background: var(--off) }
.kpi.tot .v { color: var(--ink) }

/* ---- cards / tables ---- */
.card {
    background: linear-gradient(180deg, var(--panel), var(--bg2));
    border: 1px solid var(--line); border-radius: var(--r);
    margin-bottom: 18px; overflow: hidden;
}
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 17px; border-bottom: 1px solid var(--line);
}
.card-head h2 { font-family: 'Space Grotesk'; font-size: 14px; font-weight: 600; margin: 0; letter-spacing: .02em }
.table-wrap { overflow-x: auto }
table.data { width: 100%; border-collapse: collapse; font-size: 13px }
table.data thead th {
    text-align: left; padding: 10px 17px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--mut); font-weight: 600;
    border-bottom: 1px solid var(--line2);
}
table.data tbody td { padding: 11px 17px; border-bottom: 1px solid var(--line) }
table.data tbody tr:hover { background: rgba(45,212,191,.04) }
table.data td.num, table.data th.num { text-align: right }
table.data td.site { font-weight: 500 }
table.data td.empty { color: var(--dim); text-align: center; padding: 28px 17px }
.mix .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 4px; vertical-align: middle;
}
.mix { font-family: 'JetBrains Mono'; font-size: 12px; color: var(--mut) }
.dot.op  { background: var(--op);  box-shadow: 0 0 6px var(--op) }
.dot.rdy { background: var(--rdy); box-shadow: 0 0 6px var(--rdy) }
.dot.wrn { background: var(--warn);box-shadow: 0 0 6px var(--warn) }
.dot.off { background: var(--off) }
.dot.alm { background: var(--alm); box-shadow: 0 0 6px var(--alm) }
.mix .dot + .dot { margin-left: 12px }

.note {
    margin-top: 24px; padding: 13px 17px;
    background: rgba(56,189,248,.06); border: 1px solid rgba(56,189,248,.22);
    border-radius: var(--r); color: var(--mut); font-size: 13px;
}
.note strong { color: var(--rdy) }
code {
    background: rgba(146,166,200,.12); padding: 1px 6px;
    border-radius: 4px; font-family: 'JetBrains Mono'; font-size: 12px;
}

/* ---- login ---- */
.auth-body {
    min-height: 100vh; display: grid; place-items: center;
    padding: 30px;
}
.auth-shell { width: 100%; max-width: 420px }
.login-card {
    background: linear-gradient(180deg, var(--panel), var(--bg2));
    border: 1px solid var(--line); border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.6);
}
.login-head { text-align: center; margin-bottom: 22px }
.login-head h1 { font-size: 24px; margin: 14px 0 4px }
.login-head .logo.lg { margin: 0 auto }
.login-head p { color: var(--mut); margin: 0; font-size: 13px }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px }
.login-card label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 11.5px; color: var(--mut);
    text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.login-card input[type=email], .login-card input[type=password] {
    background: var(--bg); border: 1px solid var(--line2); color: var(--ink);
    padding: 10px 13px; border-radius: 8px;
    font: 14px Inter, system-ui;
}
.login-card input:focus { outline: none; border-color: var(--teal) }
.login-card button {
    background: var(--teal); color: #04201d; border: 0;
    padding: 11px 16px; border-radius: 8px;
    font: 600 14px Inter; cursor: pointer; margin-top: 6px;
}
.login-card button:hover { filter: brightness(1.08) }
.alert {
    padding: 11px 13px; border-radius: 8px; margin-bottom: 8px;
    font-size: 13px;
}
.alert.err { background: rgba(251,94,104,.13); color: var(--alm); border: 1px solid rgba(251,94,104,.3) }

@media (max-width: 1080px) {
    .kpis { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 640px) {
    .kpis { grid-template-columns: repeat(2, 1fr) }
    .topnav { flex-wrap: wrap; gap: 14px; padding: 12px 16px }
    .nav-links { width: 100%; order: 3; margin-left: 0 }
    .wrap { padding: 18px 16px 40px }
}

/* ============================================================================
 * Dashboard-specific styles
 * ========================================================================== */

.dash-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.dash-head-right {
    display: flex; align-items: center; gap: 18px;
}
.snap {
    text-align: right; font-size: 11.5px; color: var(--mut); line-height: 1.7;
}
.snap .t { color: var(--ink); font-weight: 500 }
.health {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 15px;
    border: 1px solid var(--line2); border-radius: 12px;
    background: linear-gradient(180deg, var(--panel), var(--bg2));
}
.health .ring { position: relative; width: 46px; height: 46px }
.health .pct { font-family: 'Space Grotesk'; font-weight: 700; font-size: 15px }
.health .lab { font-size: 10.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .08em }

/* KPI tiles — clickable filters */
.kpis .kpi {
    cursor: pointer; transition: transform .18s, border-color .18s;
}
.kpis .kpi:hover { transform: translateY(-2px); border-color: var(--line2) }
.kpis .kpi.active {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px var(--teal), 0 10px 30px -12px rgba(45,212,191,.5);
}
.kpi.k-tot::before  { background: var(--teal) }
.kpi.k-op::before   { background: var(--op) }
.kpi.k-rdy::before  { background: var(--rdy) }
.kpi.k-warn::before { background: var(--warn) }
.kpi.k-alm::before  { background: var(--alm) }
.kpi.k-noc::before  { background: var(--off) }
.kpi.k-tot .v  { color: var(--ink) }
.kpi.k-op .v   { color: var(--op) }
.kpi.k-rdy .v  { color: var(--rdy) }
.kpi.k-warn .v { color: var(--warn) }
.kpi.k-alm .v  { color: var(--alm) }
.kpi.k-noc .v  { color: var(--off) }

/* Card heading dot indicator */
.card h2 {
    font-family: 'Space Grotesk'; font-size: 13px; font-weight: 600;
    margin: 0; padding: 14px 17px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 9px; letter-spacing: .02em;
}
.card h2 .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--teal); box-shadow: 0 0 8px var(--teal);
}
.card h2 .dot.pulse { animation: tealpulse 2.2s infinite }
.card h2 .meta {
    margin-left: auto; font-family: 'JetBrains Mono';
    font-size: 11px; color: var(--mut); font-weight: 400;
}
.pad { padding: 16px 17px }
.echart { height: 230px }
.echart.tall { height: 300px }

/* Dashboard grid layouts */
.dash-grid { display: grid; gap: 18px; margin-bottom: 18px }
.dash-grid.main  { grid-template-columns: 1.62fr 1fr }
.dash-grid.three { grid-template-columns: repeat(3, 1fr) }
.dash-grid.two   { grid-template-columns: 1.1fr 1fr }

/* Map */
#map {
    height: 486px; width: 100%; background: #0a1422;
}
.leaflet-popup-content-wrapper {
    background: #0E1726; color: var(--ink);
    border: 1px solid var(--line2); border-radius: 10px;
}
.leaflet-popup-tip {
    background: #0E1726; border: 1px solid var(--line2);
}
.leaflet-popup-content { margin: 11px 13px; font-family: Inter }
.leaflet-container { font-family: Inter }
.mk b {
    font-family: 'Space Grotesk'; font-size: 13px; color: var(--ink);
}
.mk .row {
    display: flex; justify-content: space-between; gap: 18px;
    font-size: 11.5px; color: var(--mut); margin-top: 3px;
    font-family: 'JetBrains Mono';
}
.mk .row span:last-child { color: var(--ink) }

.pulse { animation: pulseHalo 2.2s infinite }
@keyframes pulseHalo {
    0%, 100% { opacity: 1 }
    50%      { opacity: .35 }
}
@keyframes tealpulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--teal) }
    50%      { opacity: .55; box-shadow: 0 0 4px var(--teal) }
}

/* Detail panel */
.detail .empty {
    color: var(--dim); font-size: 13px; padding: 40px 18px; text-align: center;
}
.dh { padding: 15px 17px; border-bottom: 1px solid var(--line) }
.dh .nm { font-family: 'Space Grotesk'; font-size: 17px; font-weight: 600 }
.dh .ty {
    font-size: 11px; color: var(--mut);
    text-transform: uppercase; letter-spacing: .07em; margin-top: 2px;
}
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line) }
.st { background: var(--bg2); padding: 13px 16px }
.st .k {
    font-size: 10.5px; color: var(--mut);
    text-transform: uppercase; letter-spacing: .06em;
}
.st .val {
    font-family: 'JetBrains Mono'; font-size: 19px; font-weight: 500; margin-top: 4px;
}
.st .val small { font-size: 11px; color: var(--mut); font-weight: 400 }
.fuelbar {
    height: 7px; border-radius: 4px; background: var(--line);
    overflow: hidden; margin-top: 9px;
}
.fuelbar i {
    display: block; height: 100%; border-radius: 4px;
}

/* Chips (state pills used in map popup, detail panel, table) */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.chip .led { width: 7px; height: 7px; border-radius: 50% }
.c-op   { background: rgba(52,211,153,.12);  color: var(--op) }
.c-op   .led { background: var(--op);   box-shadow: 0 0 7px var(--op) }
.c-rdy  { background: rgba(56,189,248,.12);  color: var(--rdy) }
.c-rdy  .led { background: var(--rdy);  box-shadow: 0 0 7px var(--rdy) }
.c-warn { background: rgba(251,191,36,.13);  color: var(--warn) }
.c-warn .led { background: var(--warn); box-shadow: 0 0 7px var(--warn) }
.c-alm  { background: rgba(251,94,104,.14);  color: var(--alm) }
.c-alm  .led { background: var(--alm);  box-shadow: 0 0 7px var(--alm) }
.c-noc  { background: rgba(90,107,136,.18);  color: #9fb0cc }
.c-noc  .led { background: var(--off) }

/* Asset register table toolbar */
.toolbar {
    display: flex; gap: 11px; align-items: center;
    padding: 13px 17px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.search {
    flex: 1; min-width: 200px;
    background: var(--bg); border: 1px solid var(--line2); border-radius: 10px;
    padding: 9px 13px; color: var(--ink); font: 13px Inter;
}
.search:focus { outline: none; border-color: var(--teal) }
.fbtn {
    background: var(--bg); border: 1px solid var(--line2); color: var(--mut);
    padding: 8px 13px; border-radius: 9px; font: 500 12px Inter;
    cursor: pointer; transition: .15s;
}
.fbtn:hover { color: var(--ink) }
.fbtn.on {
    background: var(--teald); color: var(--teal); border-color: var(--teal);
}

/* Mode pill in table */
.modepill {
    font-family: 'JetBrains Mono'; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line2);
    color: var(--mut);
}
.modepill.run, .modepill.auto, .modepill.aut { color: var(--op);  border-color: rgba(52,211,153,.4) }
.modepill.man                                  { color: var(--warn); border-color: rgba(251,191,36,.4) }
.modepill.off                                  { color: var(--dim) }

/* Mono inline value */
.mq { font-family: 'JetBrains Mono'; color: var(--ink) }

/* Selected table row */
tbody tr.sel {
    background: rgba(45,212,191,.09);
    box-shadow: inset 3px 0 0 var(--teal);
}

/* Responsive collapses */
@media (max-width: 1080px) {
    .dash-grid.main  { grid-template-columns: 1fr }
    .dash-grid.three { grid-template-columns: 1fr }
    .dash-grid.two   { grid-template-columns: 1fr }
}
@media (max-width: 680px) {
    .dash-head-right { width: 100%; justify-content: space-between }
}