:root { --color-primary:#075985; --color-primary-deep:#082f49; --color-secondary:#0f766e; --color-success:#047857; --color-warning:#a85d05; --color-danger:#dc2626; --color-info:#2563eb; --color-ink:#123b52; --color-muted:#52677b; --color-border:#dce8ee; --color-surface:#fff; --color-canvas:#f4f8fa; --radius-sm:.65rem; --radius-md:.9rem; --radius-lg:1.15rem; --radius-xl:1.4rem; --shadow-sm:0 .25rem .8rem #082f490a; --shadow-md:0 .8rem 2rem #082f4912; --shadow-lg:0 1.4rem 3.5rem #082f4920; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --text-xs:.72rem; --text-sm:.82rem; --text-md:.95rem; --text-lg:1.12rem; --text-xl:1.4rem; --text-display:clamp(2rem,4vw,3.25rem); --navy:var(--color-primary-deep); --ink:var(--color-ink); --muted:var(--color-muted); --line:var(--color-border); --surface:var(--color-surface); --page:var(--color-canvas); --blue:var(--color-primary); --yellow:var(--color-warning); --green:var(--color-success); }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--page); }
h1,h2,p { margin:0; } h1 { font-size:clamp(1.75rem,3vw,2.45rem); letter-spacing:-.04em; } h2 { font-size:1.08rem; letter-spacing:-.02em; } .eyebrow { color:var(--blue); font-size:.74rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.login-page { display:grid; min-height:100vh; place-items:center; background:radial-gradient(circle at top right,#dcecff,transparent 40%),var(--navy); padding:1.5rem; }.login-card { width:min(100%,27rem); padding:2.5rem; background:#fff; border-radius:1.25rem; box-shadow:0 1.5rem 4rem #06132166; }.brand-mark,.wordmark-symbol { display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.75rem; background:var(--blue); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.02em; }.login-card h1 { margin:.55rem 0 .65rem; }.login-intro,.page-subtitle { color:var(--muted); line-height:1.55; }.login-form { display:grid; gap:1rem; margin-top:1.75rem; }.login-form label { display:grid; gap:.45rem; color:#3c5064; font-size:.86rem; font-weight:650; }.login-form input { width:100%; border:1px solid #cbd7e2; border-radius:.55rem; padding:.75rem .8rem; font:inherit; }.login-form input:focus { border-color:var(--blue); outline:3px solid #2d79d725; }.button { border:0; border-radius:.55rem; cursor:pointer; font:inherit; font-weight:750; padding:.8rem 1rem; }.button-primary { background:var(--blue); color:#fff; }
.topbar { align-items:center; background:var(--navy); display:flex; justify-content:space-between; min-height:4.5rem; padding:0 clamp(1rem,5vw,5rem); }.wordmark { align-items:center; color:#fff; display:flex; font-size:1.05rem; font-weight:750; gap:.65rem; text-decoration:none; }.wordmark-symbol { width:1.9rem; height:1.9rem; border-radius:.55rem; font-size:.6rem; }.main-nav { align-items:center; display:flex; gap:.25rem; }.main-nav a,.main-nav .logout-link { border-radius:.45rem; color:#bfcedc; font-family:inherit; font-size:.9rem; font-weight:650; padding:.58rem .75rem; text-decoration:none; }.main-nav a:hover,.main-nav a.active,.main-nav .logout-link:hover { background:#ffffff17; color:#fff; }.main-nav .logout-form { margin:0; }.main-nav .logout-link { background:transparent; border:1px solid #ffffff30; cursor:pointer; margin-left:.45rem; }
.app-content { margin:0 auto; max-width:1440px; padding:clamp(1.3rem,3vw,3rem) clamp(1rem,5vw,5rem) 3rem; }.page-heading { align-items:flex-end; display:flex; gap:1rem; justify-content:space-between; margin-bottom:1.7rem; }.page-heading h1 { margin:.35rem 0 .4rem; }.status-pill { align-items:center; background:#e8f8ef; border-radius:10rem; color:#1b8950; display:flex; font-size:.8rem; font-weight:750; gap:.4rem; padding:.48rem .68rem; white-space:nowrap; }.status-dot { background:var(--green); border-radius:50%; height:.48rem; width:.48rem; }
.data-status { color:var(--muted); font-size:.88rem; margin:-.7rem 0 1.2rem; }.data-status:empty { display:none; }.data-status.error { color:#b42318; }
.fleet-summary { display:grid; gap:.9rem; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:1.2rem; }.fleet-map-layout { display:grid; gap:1.2rem; grid-template-columns:minmax(0,2fr) minmax(17rem,.7fr); }.fleet-map-panel { padding:0; overflow:hidden; }.fleet-map-panel #fleet-map { height:34rem; }.fleet-map-legend { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; padding:1rem 1.2rem; color:var(--muted); font-size:.78rem; font-weight:650; }.fleet-map-legend>span { align-items:center; display:inline-flex; gap:.35rem; }.fleet-legend-symbol { background:#8996a8; border-radius:50%; display:inline-block; height:.72rem; width:.72rem; }.fleet-legend-symbol.active { background:#fff; border:.2rem solid var(--blue); height:.85rem; width:.85rem; }.fleet-legend-symbol.online { background:var(--green); }.fleet-legend-symbol.offline { background:#6d8093; }.fleet-legend-symbol.warning { background:var(--yellow); }.fleet-marker-list { display:grid; gap:.7rem; list-style:none; margin:1rem 0 0; padding:0; }.fleet-marker-item { border:1px solid var(--line); border-radius:.65rem; display:grid; gap:.35rem; padding:.75rem; }.fleet-marker-item[data-active="true"] { border-color:var(--blue); box-shadow:0 0 0 .15rem #2d79d71f; }.fleet-marker-title { font-weight:750; overflow-wrap:anywhere; }.fleet-marker-meta { color:var(--muted); font-size:.8rem; overflow-wrap:anywhere; }.fleet-marker-item .button { justify-self:start; padding:.5rem .7rem; }.fleet-map-message { background:#fff; border:1px solid var(--line); border-radius:.65rem; margin-bottom:1rem; padding:.8rem 1rem; }.fleet-map-message.error { align-items:center; color:#b42318; display:flex; gap:1rem; justify-content:space-between; }.fleet-map-message[hidden] { display:none; }.leaflet-marker-icon.fleet-marker-active { filter:drop-shadow(0 0 .35rem #2d79d7); outline:.2rem solid #2d79d7; outline-offset:.15rem; border-radius:50%; }
.metric-grid { display:grid; gap:.9rem; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:1.2rem; }.metric-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:.85rem; box-shadow:0 .2rem .7rem #17324d08; }.metric-card { display:grid; gap:.45rem; height:6.9rem; padding:1rem; }.metric-card span,.usage-totals span,.current-plan-summary span,.allowance-summary span { color:var(--muted); font-size:.78rem; font-weight:650; }.metric-card strong { font-size:1rem; overflow-wrap:anywhere; }.content-grid { display:grid; gap:1.2rem; grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr); }.panel { padding:1.25rem; }.panel-heading { align-items:start; display:flex; justify-content:space-between; margin-bottom:1.1rem; }.panel-heading h2 { margin-top:.28rem; }.panel-heading-wrap { gap:1rem; }.period-tabs { background:#f2f5f8; border-radius:.55rem; display:flex; padding:.2rem; }.period-tab { background:transparent; border:0; border-radius:.4rem; color:var(--muted); cursor:pointer; font:inherit; font-size:.77rem; font-weight:700; padding:.45rem .58rem; }.period-tab.active { background:#fff; box-shadow:0 .1rem .3rem #17324d1a; color:var(--ink); }.current-plan-summary { align-items:baseline; background:#f8fafb; border:1px solid var(--line); border-radius:.65rem; display:flex; gap:1rem; justify-content:space-between; margin-bottom:.8rem; padding:.65rem .8rem; }.current-plan-summary strong { color:var(--green); overflow-wrap:anywhere; text-align:right; }.allowance-summary { display:grid; gap:.6rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:.8rem; }.allowance-summary div { display:grid; gap:.15rem; }.allowance-summary div:last-child { text-align:right; }.allowance-summary strong { overflow-wrap:anywhere; }.usage-totals { border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:2.5rem; margin-bottom:1rem; padding-bottom:1rem; }.usage-totals div { display:grid; gap:.15rem; }.usage-totals strong { font-size:1.25rem; }.usage-total-priority span,.usage-total-priority strong { color:var(--green); }.usage-total-mobile { text-align:right; }.usage-total-mobile span,.usage-total-mobile strong { color:var(--yellow); }.chart-wrap { height:14rem; position:relative; }.chart-wrap-large { height:18rem; }.chart-key { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; color:var(--muted); font-size:.78rem; font-weight:650; }.legend-swatch { border-radius:.2rem; display:inline-block; height:.7rem; margin-right:.35rem; vertical-align:-.05rem; width:.7rem; }.mobile-data { background:var(--yellow); }.priority-data { background:var(--green); }#location-map { border-radius:.65rem; height:24rem; overflow:hidden; }.utc-footer { color:var(--muted); font-size:.8rem; margin-top:1.25rem; min-height:1.2rem; text-align:right; }.telemetry-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(2,minmax(0,1fr)); }.telemetry-panel h2 { margin-bottom:1rem; }
@media (max-width:900px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.content-grid { grid-template-columns:1fr; }.fleet-map-layout { grid-template-columns:1fr; }.map-panel { min-height:24rem; } }
@media (max-width:620px) { .topbar { align-items:flex-start; flex-direction:column; gap:.65rem; padding:1rem; }.main-nav { width:100%; flex-wrap:wrap; }.main-nav a { padding:.45rem .5rem; }.main-nav .logout-link { margin-left:auto; }.page-heading { align-items:flex-start; flex-direction:column; }.metric-grid,.telemetry-grid { grid-template-columns:1fr; }.fleet-summary { grid-template-columns:1fr; }.panel-heading-wrap { align-items:flex-start; flex-direction:column; }.period-tabs { width:100%; }.period-tab { flex:1; }.chart-wrap-large { height:15rem; }.fleet-map-panel #fleet-map { height:24rem; } }
.analytics-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem;margin-bottom:1.5rem; }.analytics-table-wrap { overflow-x:auto; }#analytics-table { width:100%;border-collapse:collapse; }#analytics-table th,#analytics-table td { padding:.75rem;border-bottom:1px solid #d9e0e7;text-align:left;white-space:nowrap; }#analytics-table th button { border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer; }#analytics-table tr[data-active="true"] { background:rgba(21,128,61,.08); }.analytics-plan-list { display:flex;flex-wrap:wrap;gap:.75rem;padding:0;list-style:none; }
.history-section { margin-top:2rem; }.history-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem; }.history-panel canvas { display:block;height:auto;max-width:100%;width:100%; }#history-range { min-width:8rem; }@media (max-width:900px) { .history-grid { grid-template-columns:1fr; } }
.operations-section { margin-bottom:1rem; }.operations-section form { display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin:1rem 0; }.operations-section label { display:grid;gap:.3rem; }.operations-section textarea { min-height:4rem;min-width:18rem; }.operations-table-wrap { overflow-x:auto; }.operations-table-wrap table { width:100%;border-collapse:collapse; }.operations-table-wrap th,.operations-table-wrap td { border-bottom:1px solid #d9e0e7;padding:.65rem;text-align:left; }.operations-section li { margin:.5rem 0; }.operations-section button { min-height:2.25rem; }

/* Ocean Pilot telemetry workspace */
.telemetry-workspace { --telemetry-ocean:#075985; --telemetry-deep:#082f49; --telemetry-teal:#0f8b8d; --telemetry-emerald:#059669; --telemetry-amber:#d97706; --telemetry-critical:#dc2626; display:grid; gap:1.5rem; }
.telemetry-hero { background:linear-gradient(125deg,#062f4b 0%,#075985 58%,#0f8b8d 130%); border-radius:1.4rem; box-shadow:0 1.35rem 3rem #07598521; color:#fff; min-height:13rem; overflow:hidden; padding:clamp(1.8rem,4vw,3.25rem); position:relative; }
.telemetry-hero-copy { max-width:42rem; position:relative; z-index:2; }.telemetry-brandline { align-items:center; color:#c9f5ef; display:flex; font-size:.78rem; font-weight:750; gap:.65rem; letter-spacing:.12em; margin-bottom:1.2rem; text-transform:uppercase; }.telemetry-compass { align-items:center; background:#ffffff17; border:1px solid #ffffff38; border-radius:.7rem; display:inline-flex; font-size:.58rem; height:2rem; justify-content:center; letter-spacing:.04em; width:2rem; }.telemetry-hero h1 { color:#fff; font-size:clamp(2.15rem,5vw,3.7rem); letter-spacing:-.055em; line-height:1; margin-bottom:.85rem; }.telemetry-hero .page-subtitle { color:#d9edf4; font-size:1rem; max-width:34rem; }.telemetry-wave { border:1px solid #ffffff22; border-radius:50%; height:20rem; position:absolute; right:-5rem; top:-8rem; width:20rem; }.telemetry-wave::before,.telemetry-wave::after { border:1px solid #ffffff1c; border-radius:50%; content:""; inset:2.25rem; position:absolute; }.telemetry-wave::after { inset:4.5rem; }
.telemetry-summary { display:grid; gap:1rem; grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr)); margin-top:-3.8rem; padding:0 clamp(1rem,3vw,2.25rem); position:relative; z-index:3; }.telemetry-kpi { align-content:start; background:#fff; border:1px solid #dce8ee; border-radius:1.05rem; box-shadow:0 .8rem 2rem #082f4912; display:grid; gap:.7rem; min-height:8.75rem; padding:1.25rem 1.4rem; }.telemetry-kpi-primary { border-top:.25rem solid var(--telemetry-ocean); }.telemetry-kpi-label { color:#52677b; font-size:.72rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }.telemetry-kpi strong { color:var(--telemetry-deep); font-size:clamp(1.05rem,2vw,1.42rem); line-height:1.25; overflow-wrap:anywhere; }.telemetry-kpi-primary strong { font-size:clamp(1.35rem,2.8vw,2rem); letter-spacing:-.035em; }.telemetry-kpi-detail { color:#52677b; font-size:.78rem; line-height:1.4; }.telemetry-update { font-size:.92rem!important; font-weight:700; }
.telemetry-workspace .status-pill { justify-self:start; min-height:2.15rem; padding:.55rem .78rem; }.telemetry-workspace .status-pill[data-status="live"] { background:#e7f8f1; color:#047857; }.telemetry-workspace .status-pill[data-status="snapshot"] { background:#fff7df; color:#a15c04; }.telemetry-workspace .status-pill[data-status="offline"] { background:#feecec; color:#b42318; }.telemetry-workspace .status-pill[data-status="snapshot"] .status-dot { background:var(--telemetry-amber); }.telemetry-workspace .status-pill[data-status="offline"] .status-dot { background:var(--telemetry-critical); }
.telemetry-notice { background:#eef7fa; border:1px solid #d5e9ef; border-radius:.8rem; color:#34576b; margin:-.25rem 0 0; padding:.8rem 1rem; }.telemetry-notice.error { background:#fff1f1; border-color:#fecaca; color:#b42318; }
.telemetry-workspace .telemetry-grid { gap:1.35rem; }.telemetry-workspace .telemetry-panel { border:1px solid #deeaef; border-radius:1.15rem; box-shadow:0 .65rem 1.8rem #082f490b; min-width:0; padding:1.45rem 1.45rem 1rem; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }.telemetry-workspace .telemetry-panel:hover { border-color:#bfd5df; box-shadow:0 1rem 2.4rem #082f4912; transform:translateY(-2px); }.telemetry-panel header { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:1rem; }.telemetry-panel h2 { color:#123b52; font-size:1.12rem; margin:.28rem 0 0; }.chart-kicker { color:#52677b; font-size:.68rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }.chart-swatch { background:var(--telemetry-ocean); border-radius:50%; box-shadow:0 0 0 .35rem #07598512; height:.65rem; margin:.55rem .3rem 0 1rem; width:.65rem; }.telemetry-panel[data-tone="teal"] .chart-swatch { background:var(--telemetry-teal); box-shadow:0 0 0 .35rem #0f8b8d14; }.telemetry-panel[data-tone="amber"] .chart-swatch { background:var(--telemetry-amber); box-shadow:0 0 0 .35rem #d9770614; }.telemetry-panel[data-tone="critical"] .chart-swatch { background:var(--telemetry-critical); box-shadow:0 0 0 .35rem #dc262614; }.telemetry-panel[data-tone="emerald"] .chart-swatch { background:var(--telemetry-emerald); box-shadow:0 0 0 .35rem #05966914; }.telemetry-panel[data-tone="slate"] .chart-swatch { background:#64748b; box-shadow:0 0 0 .35rem #64748b14; }.telemetry-workspace .chart-wrap { height:17rem; }
.leaflet-popup-content-wrapper { border:1px solid #dce8ee; border-radius:.85rem; box-shadow:0 .8rem 2rem #082f4924; color:#173f55; }.leaflet-popup-content { line-height:1.55; margin:1rem 1.1rem; }.leaflet-popup-tip { box-shadow:2px 2px 4px #082f4912; }.leaflet-marker-icon { filter:drop-shadow(0 .3rem .35rem #082f4940); }
@media (max-width:900px) { .telemetry-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.telemetry-kpi-primary { grid-column:1/-1; }.telemetry-workspace .chart-wrap { height:15rem; } }
@media (max-width:620px) { .telemetry-hero { border-radius:1rem; min-height:15rem; padding:1.65rem 1.3rem; }.telemetry-summary { grid-template-columns:1fr; margin-top:-4.5rem; padding:0 .75rem; }.telemetry-kpi-primary { grid-column:auto; }.telemetry-workspace .telemetry-grid { grid-template-columns:1fr; }.telemetry-workspace .telemetry-panel { padding:1.2rem 1rem .8rem; }.telemetry-workspace .chart-wrap { height:14rem; } }
@media (prefers-reduced-motion:reduce) { .telemetry-workspace .telemetry-panel { transition:none; } }

/* Ocean Pilot shared design system */
html { background:var(--color-canvas); color-scheme:light; }
body { background:radial-gradient(circle at 92% 4%,#dff4f233,transparent 26rem),var(--color-canvas); color:var(--color-ink); font-size:var(--text-md); line-height:1.5; min-height:100vh; -webkit-font-smoothing:antialiased; }
h1 { color:var(--color-primary-deep); font-size:var(--text-display); line-height:1.05; } h2 { color:var(--color-primary-deep); font-size:var(--text-lg); } h3 { color:var(--color-primary-deep); }
a,button,input,select,textarea { transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,transform .18s ease; }
:focus-visible { outline:3px solid #0f8b8d55; outline-offset:2px; }
.eyebrow { align-items:center; color:var(--color-secondary); display:flex; gap:var(--space-2); font-size:var(--text-xs); }.eyebrow::before { background:var(--color-secondary); border:3px solid #d8f1ef; border-radius:50%; content:""; height:.72rem; width:.72rem; }
.topbar { background:linear-gradient(105deg,#062b45,#082f49 62%,#0b3f52); box-shadow:0 .35rem 1.4rem #082f4924; min-height:5rem; position:relative; z-index:500; }.wordmark { font-size:1.08rem; letter-spacing:-.015em; }.wordmark-symbol,.brand-mark { background:linear-gradient(145deg,var(--color-primary),var(--color-secondary)); border:1px solid #ffffff2e; box-shadow:0 .35rem .9rem #041e3066; }.main-nav a,.main-nav .logout-link { border:1px solid transparent; border-radius:var(--radius-sm); min-height:2.45rem; }.main-nav a:hover,.main-nav a.active { background:#ffffff12; border-color:#ffffff17; }.main-nav a.active { box-shadow:inset 0 -2px 0 #6ee7d8; }.main-nav .logout-link:hover { background:#ffffff12; border-color:#ffffff4a; }
.app-content { min-height:calc(100vh - 11rem); padding-bottom:var(--space-10); }.page-heading { align-items:center; background:linear-gradient(120deg,#fff 0%,#f7fbfc 65%,#eaf7f5 135%); border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); margin-bottom:var(--space-6); overflow:hidden; padding:clamp(1.5rem,3vw,2.25rem); position:relative; }.page-heading::after { border:1px solid #0f8b8d17; border-radius:50%; content:""; height:10rem; position:absolute; right:-3rem; top:-5rem; width:10rem; }.page-heading>div,.page-heading>label,.page-heading>.status-pill { position:relative; z-index:1; }.page-heading h1 { margin:.45rem 0 .55rem; }.page-subtitle { color:var(--color-muted); max-width:48rem; }
.metric-grid,.fleet-summary,.analytics-cards { gap:var(--space-4); }.metric-card,.panel,.fleet-map-message { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }.metric-card { border-top:.22rem solid var(--color-secondary); height:auto; min-height:6.2rem; padding:.9rem var(--space-5); }.metric-card span { color:var(--color-muted); font-size:var(--text-xs); letter-spacing:.065em; text-transform:uppercase; }.metric-card strong { color:var(--color-primary-deep); font-size:clamp(1.05rem,2vw,1.42rem); letter-spacing:-.025em; }.panel { padding:clamp(1.15rem,2.5vw,1.6rem); }.panel-heading { gap:var(--space-4); margin-bottom:var(--space-5); }.panel-heading h2 { margin-top:var(--space-2); }
.status-pill { background:#e7f8f1; border:1px solid #bcebd8; color:#047857; min-height:2.15rem; padding:.55rem .78rem; }.status-pill[data-status="snapshot"] { background:#fff7df; border-color:#f4d89a; color:#9a5a04; }.status-pill[data-status="offline"],.status-pill[data-stale="true"] { background:#feecec; border-color:#fecaca; color:#b42318; }.status-dot { box-shadow:0 0 0 .28rem #05966916; }
.data-status[role="status"] { align-items:center; display:flex; gap:var(--space-2); min-height:1.35rem; }.data-status[role="status"]::before { animation:ocean-pulse 1.4s ease-in-out infinite; background:var(--color-secondary); border-radius:50%; box-shadow:0 0 0 .25rem #0f8b8d14; content:""; flex:0 0 auto; height:.48rem; width:.48rem; }.data-status[role="status"]:empty::before { display:none; }.data-status.error[role="status"]::before { background:var(--color-danger); }.fleet-map-message { color:#496579; line-height:1.55; padding:var(--space-4) var(--space-5); }.fleet-map-message:not(.error) { background:#f8fbfc; }.fleet-map-message.error { background:#fff1f1; border-color:#fecaca; color:#b42318; }.fleet-map-message[hidden] { display:none; }
.button,.button-primary,.operations-section button,.export-button,#idle-warning-dialog button { align-items:center; background:#e8f2f5; border:1px solid #c9dce4; border-radius:var(--radius-sm); color:var(--color-primary-deep); cursor:pointer; display:inline-flex; font:inherit; font-size:var(--text-sm); font-weight:750; justify-content:center; min-height:2.65rem; padding:.68rem 1rem; }.button-primary,.operations-section form button[type="submit"],#idle-stay-signed-in { background:linear-gradient(135deg,var(--color-primary),#0b7285); border-color:var(--color-primary); color:#fff; box-shadow:0 .4rem .9rem #07598525; }.button:hover,.operations-section button:hover,.export-button:hover,#idle-warning-dialog button:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); }.button-primary:hover,.operations-section form button[type="submit"]:hover,#idle-stay-signed-in:hover { background:linear-gradient(135deg,#064e75,#0f766e); }.button:active,.operations-section button:active,.export-button:active,#idle-warning-dialog button:active { transform:translateY(0); }
input:not([type="checkbox"]),select,textarea { background:#fff; border:1px solid #bfd1da; border-radius:var(--radius-sm); color:var(--color-ink); font:inherit; min-height:2.65rem; padding:.65rem .78rem; }.app-page input:not([type="checkbox"]):hover,.app-page select:hover,.app-page textarea:hover,.login-page input:hover { border-color:#8db1bf; } input:not([type="checkbox"]):focus,select:focus,textarea:focus { border-color:var(--color-secondary); box-shadow:0 0 0 .22rem #0f8b8d1b; outline:0; } textarea { line-height:1.5; resize:vertical; }
.period-tabs { background:#eaf2f5; border:1px solid #dce8ee; border-radius:var(--radius-sm); gap:.15rem; }.period-tab { border-radius:.48rem; color:#526b7d; min-height:2.3rem; }.period-tab:hover { color:var(--color-primary); }.period-tab.active { color:var(--color-primary-deep); box-shadow:var(--shadow-sm); }
.current-plan-summary,.allowance-summary { border-color:var(--color-border); border-radius:var(--radius-md); }.current-plan-summary { background:linear-gradient(110deg,#f8fbfc,#edf8f6); padding:.85rem 1rem; }.allowance-summary { background:#fbfdfe; border:1px solid var(--color-border); padding:.85rem 1rem; }.usage-totals { border-color:var(--color-border); padding:var(--space-4) 0; }.usage-total-priority span,.usage-total-priority strong { color:var(--color-success); }.usage-total-mobile span,.usage-total-mobile strong { color:#b56505; }.mobile-data { background:var(--color-warning); }.priority-data { background:var(--color-success); }
.analytics-table-wrap,.operations-table-wrap { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:auto; }#analytics-table,.operations-table-wrap table { border-collapse:separate; border-spacing:0; }#analytics-table th,.operations-table-wrap th { background:#edf5f7; color:#36576a; font-size:var(--text-xs); letter-spacing:.055em; position:sticky; text-transform:uppercase; top:0; }#analytics-table th,#analytics-table td,.operations-table-wrap th,.operations-table-wrap td { border-bottom:1px solid #e5eef2; padding:.85rem 1rem; }#analytics-table tbody tr:hover,.operations-table-wrap tbody tr:hover { background:#f3faf9; }#analytics-table tr[data-active="true"] { background:#e8f7f2; }
.analytics-cards+.analytics-cards,.history-section { margin-top:var(--space-8); }.analytics-plan-list>li,#notes-list>li,#rules-list>li,#alerts-list>li { background:#f8fbfc; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); }.operations-section { margin-bottom:var(--space-5); }.operations-section h2 { border-bottom:1px solid var(--color-border); margin-bottom:var(--space-4); padding-bottom:var(--space-3); }.operations-section form { background:#f8fbfc; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-4); }.operations-section label { color:#496579; font-size:var(--text-sm); font-weight:650; }
.fleet-map-panel { border-radius:var(--radius-lg); }.fleet-map-legend { background:#f8fbfc; border-top:1px solid var(--color-border); padding:var(--space-4) var(--space-5); }.fleet-marker-item { background:#fbfdfe; border-color:var(--color-border); border-radius:var(--radius-md); padding:var(--space-4); }.fleet-marker-item[data-active="true"] { border-color:var(--color-secondary); box-shadow:0 0 0 .16rem #0f8b8d1a; }#location-map,.fleet-map-panel #fleet-map { border-radius:var(--radius-md); }
.utc-footer,.app-footer { color:var(--color-muted); font-size:var(--text-xs); }.utc-footer { margin-top:var(--space-5); }.app-footer { align-items:center; border-top:1px solid var(--color-border); display:flex; justify-content:space-between; margin:0 clamp(1rem,5vw,5rem); padding:var(--space-5) 0 var(--space-6); }.app-footer strong { color:var(--color-primary-deep); }
.toast { align-items:flex-start; background:#fff; border:1px solid var(--color-border); border-left:.28rem solid var(--color-secondary); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); color:var(--color-ink); display:flex; gap:var(--space-3); max-width:28rem; padding:var(--space-4) var(--space-5); }.toast[data-tone="success"] { border-left-color:var(--color-success); }.toast[data-tone="warning"] { border-left-color:var(--color-warning); }.toast[data-tone="danger"] { border-left-color:var(--color-danger); }
#idle-warning-dialog { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); color:var(--color-ink); max-width:30rem; padding:0; width:calc(100% - 2rem); }#idle-warning-dialog::backdrop { background:#041e30a8; backdrop-filter:blur(4px); }#idle-warning-dialog form { display:grid; gap:var(--space-4); padding:var(--space-8); }#idle-warning-dialog h2 { font-size:var(--text-xl); }#idle-warning-dialog form>div { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:flex-end; }#idle-logout-now { background:#fff1f1; border-color:#fecaca; color:#b42318; }
.login-page { background:radial-gradient(circle at 82% 18%,#1ba6a34a,transparent 24rem),radial-gradient(circle at 12% 88%,#0d749044,transparent 28rem),linear-gradient(135deg,#041e30,#063b57 65%,#0a6f72); overflow:hidden; position:relative; }.login-page::before,.login-page::after { border:1px solid #ffffff13; border-radius:50%; content:""; height:32rem; position:fixed; right:-10rem; top:-14rem; width:32rem; }.login-page::after { height:24rem; left:-9rem; right:auto; top:auto; bottom:-12rem; width:24rem; }.login-card { border:1px solid #ffffff9e; border-radius:var(--radius-xl); box-shadow:0 2rem 5rem #02131f66; padding:clamp(1.8rem,5vw,2.8rem); position:relative; z-index:1; }.login-card .brand-mark { height:3rem; width:3rem; }.login-card h1 { color:var(--color-primary-deep); font-size:clamp(2.1rem,7vw,3rem); }.login-form { gap:var(--space-4); }.login-form label { color:#3c596b; font-size:var(--text-sm); }.login-form input { min-height:3rem; }.login-error { background:#fff1f1; border:1px solid #fecaca; border-radius:var(--radius-sm); color:#b42318; margin-top:var(--space-4); padding:var(--space-3) var(--space-4); }
@keyframes ocean-pulse { 0%,100% { opacity:.45; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
@media (max-width:900px) { .app-footer { margin-inline:clamp(1rem,3vw,2rem); }.analytics-table-wrap,.operations-table-wrap { border-radius:var(--radius-md); }.page-heading { align-items:flex-start; } }
@media (max-width:620px) { .topbar { gap:var(--space-3); }.main-nav { gap:var(--space-1); }.main-nav a,.main-nav .logout-link { min-height:2.25rem; padding:.48rem .58rem; }.app-content { padding-top:var(--space-5); }.page-heading { border-radius:var(--radius-lg); padding:var(--space-5); }.metric-card { min-height:5.5rem; }.app-footer { align-items:flex-start; flex-direction:column; gap:var(--space-1); }.operations-section form { align-items:stretch; flex-direction:column; }.operations-section textarea,.operations-section input:not([type="checkbox"]),.operations-section select { min-width:0; width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Final KIT and telemetry summary layout polish */
.kit-metric-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.kit-metric-card { min-width:0; }
.kit-metric-card--kit-number { grid-column:1/span 2; grid-row:1; }
.kit-metric-card--first-seen { grid-column:3/span 2; grid-row:1; }
.kit-metric-card--last-seen { grid-column:5/span 2; grid-row:1; }
.kit-metric-card--latitude { grid-column:1/span 2; grid-row:2; }
.kit-metric-card--longitude { grid-column:3/span 2; grid-row:2; }
.kit-metric-card--uptime { grid-column:5/span 2; grid-row:2; }
#kit-number { font-size:clamp(1.05rem,1.55vw,1.4rem); line-height:1.25; overflow-wrap:normal; white-space:nowrap; word-break:normal; }

.telemetry-notice { padding:.9rem 1rem; }

@media (max-width:1099px) {
    .kit-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .kit-metric-card--kit-number { grid-column:1/span 2; grid-row:1; }
    .kit-metric-card--first-seen { grid-column:3/span 2; grid-row:1; }
    .kit-metric-card--last-seen { grid-column:1/span 2; grid-row:2; }
    .kit-metric-card--latitude { grid-column:3/span 2; grid-row:2; }
    .kit-metric-card--longitude { grid-column:1/span 2; grid-row:3; }
    .kit-metric-card--uptime { grid-column:3/span 2; grid-row:3; }
}

@media (max-width:620px) {
    .kit-metric-grid { grid-template-columns:minmax(0,1fr); }
    .kit-metric-card--kit-number,.kit-metric-card--first-seen,.kit-metric-card--last-seen,.kit-metric-card--latitude,.kit-metric-card--longitude,.kit-metric-card--uptime { grid-column:1; grid-row:auto; }
    #kit-number { overflow-wrap:anywhere; white-space:normal; word-break:normal; }
}

/* Stable-first Daily Usage presentation hierarchy. */
.usage-panel { padding:1.15rem 1.2rem 1rem; }
.usage-panel .panel-heading { align-items:center; border-bottom:1px solid #e8f0f4; margin-bottom:.65rem; padding-bottom:.65rem; }
.usage-panel .panel-heading .eyebrow { font-size:.68rem; line-height:1.25; }
.usage-panel .panel-heading h2 { font-size:1.24rem; font-weight:800; line-height:1.2; margin-top:.16rem; }
.usage-panel .period-tabs { align-self:center; }
.usage-panel .period-tab { font-size:.74rem; padding:.42rem .55rem; }
.usage-panel .current-plan-summary { margin-bottom:.5rem; padding:.58rem .72rem; }
.usage-panel .current-plan-summary span,
.usage-panel .allowance-summary span,
.usage-panel .usage-totals span { font-size:.7rem; line-height:1.25; }
.usage-panel .current-plan-summary strong { font-size:1rem; line-height:1.25; }
.usage-panel .allowance-summary { align-items:end; background:#fbfdfe; border:1px solid #dce8ee; border-radius:.65rem; margin-bottom:.58rem; padding:.58rem .72rem; }
.usage-panel .allowance-summary strong { font-size:.9rem; line-height:1.3; }
.usage-panel .usage-totals { gap:1rem; margin-bottom:.58rem; padding-bottom:.62rem; }
.usage-panel .usage-totals strong { font-size:1.14rem; line-height:1.2; }
.usage-panel .usage-period-heading { align-items:baseline; border-top:1px solid #e8f0f4; display:flex; gap:.5rem; justify-content:flex-start; margin:.15rem 0 .25rem; min-height:1.5rem; padding-top:.58rem; width:100%; }
.usage-panel .usage-period-heading > #usage-period-label { color:#123b52; font-size:.98rem; font-weight:780; letter-spacing:-.01em; line-height:1.25; margin:0; }
.usage-panel .chart-wrap-large { height:17rem; }
.usage-panel .chart-key { margin-top:.55rem; }
.usage-panel #usage-fallback-notice,
.usage-panel #usage-no-data { margin:0 0 .6rem; }

@media (max-width:760px) {
    .usage-panel .chart-wrap-large { height:15.5rem; }
}

@media (max-width:520px) {
    .usage-panel { padding:1rem; }
    .usage-panel .allowance-summary { grid-template-columns:1fr; }
    .usage-panel .allowance-summary div:last-child,
    .usage-panel .usage-total-mobile { text-align:start; }
    .usage-panel .usage-totals { align-items:start; flex-direction:column; }
}