:root {
    color-scheme: light;
    --ink: #183738;
    --ink-soft: #587071;
    --paper: #f5f4ee;
    --surface: #fffdf7;
    --surface-subtle: #fbfaf5;
    --line: #d8ddd5;
    --teal: #176b68;
    --teal-dark: #0f4f4d;
    --mint: #dcece5;
    --amber: #d9822b;
    --amber-soft: #fff0da;
    --red: #bf3d39;
    --shadow: 0 18px 45px rgba(21, 50, 51, .08);
    --radius: 18px;
    --heading-ink: #173f40;
    --field-background: #fff;
    --field-line: #b8c7c2;
    --soft-surface: #f4f8f5;
    --soft-line: #b9ccc6;
    --chip-surface: #eff5f1;
    --chip-line: #c7d7d2;
    --neutral-surface: #eee;
    --muted-status: #7e8e8e;
    --off-status: #9aa5a2;
    --off-status-strong: #7f8b89;
    --warning-ink: #9c4c13;
    --warning-line: #e6bd87;
    --warning-action-surface: #fff5e9;
    --warning-action-line: #ddb08b;
    --danger-surface: #fff0ee;
    --danger-line: #e1aaa6;
    --danger-ink: #8e2f2b;
    --focus-ring: rgba(23, 107, 104, .14);
    --button-background: #176b68;
    --button-hover: #0f4f4d;
    --role-admin-surface: #e8e0f0;
    --role-admin-ink: #674978;
    --role-leader-surface: #e8e7cf;
    --role-leader-ink: #615d24;
    --state-control-surface: #f3f6f5;
    --state-control-line: #c4d2ce;
    --state-on-surface: #e6f3ee;
    --state-on-line: #8bbcb1;
    --inactive-surface: #f0f2f1;
    --inactive-line: #d5d9d7;
    --inactive-ink: #7d8784;
    --alert-state-surface: #f3e1d7;
    --alert-state-ink: #8a451b;
    --alert-acknowledged-surface: #e8e7cf;
    --alert-acknowledged-ink: #615d24;
    --warning-note-surface: #fff8e8;
    --warning-note-line: #e4c48e;
    --warning-note-ink: #765122;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e5efed;
    --ink-soft: #a3b9b5;
    --paper: #091617;
    --surface: #112425;
    --surface-subtle: #172b2c;
    --line: #2d4748;
    --teal: #68c9c0;
    --teal-dark: #9bddd7;
    --mint: #173b38;
    --amber: #efa354;
    --amber-soft: #3b2b1b;
    --red: #ff817a;
    --shadow: 0 18px 45px rgba(0, 0, 0, .28);
    --heading-ink: #eff7f5;
    --field-background: #0d1e1f;
    --field-line: #3b5657;
    --soft-surface: #17302f;
    --soft-line: #3a5d5a;
    --chip-surface: #173633;
    --chip-line: #37625e;
    --neutral-surface: #26393a;
    --muted-status: #a0b4b0;
    --off-status: #738784;
    --off-status-strong: #80918f;
    --warning-ink: #ffc27d;
    --warning-line: #765633;
    --warning-action-surface: #3c2d1f;
    --warning-action-line: #79583a;
    --danger-surface: #3d2222;
    --danger-line: #7b4643;
    --danger-ink: #ffaaa5;
    --focus-ring: rgba(104, 201, 192, .25);
    --button-background: #1c6b67;
    --button-hover: #25817a;
    --role-admin-surface: #332b3e;
    --role-admin-ink: #dec8eb;
    --role-leader-surface: #35331f;
    --role-leader-ink: #ded79a;
    --state-control-surface: #172829;
    --state-control-line: #3b5353;
    --state-on-surface: #163a37;
    --state-on-line: #3e756f;
    --inactive-surface: #202d2e;
    --inactive-line: #3a4949;
    --inactive-ink: #98a7a4;
    --alert-state-surface: #422d26;
    --alert-state-ink: #ffc08d;
    --alert-acknowledged-surface: #37351f;
    --alert-acknowledged-ink: #ddd598;
    --warning-note-surface: #372b1d;
    --warning-note-line: #6c5433;
    --warning-note-ink: #f1c88c;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); }
a { color: inherit; }
button, select { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .75rem 1rem; background: var(--surface); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.app-header { min-height: 72px; padding: 0 clamp(1rem, 4vw, 3.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #102a2b; color: #fff; border-bottom: 3px solid #dca657; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #f1c77f; font-family: Georgia, serif; font-size: 1.3rem; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .01em; }
.brand small { margin-top: .12rem; color: #b9ceca; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; }
.top-actions form { margin: 0; }
.user-name { color: #c5d6d3; font-size: .88rem; }
.quiet-button { display: inline-flex; align-items: center; min-height: 36px; padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: transparent; color: #fff; text-decoration: none; cursor: pointer; }
.quiet-button:hover, .quiet-button:focus-visible { background: rgba(255,255,255,.1); }
.language-button { min-width: 42px; justify-content: center; font-weight: 800; letter-spacing: .06em; }
.app-main { width: min(1500px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2.3rem); }
.mission-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 1.5rem; }
.mission-heading h1 { margin: .15rem 0 .35rem; max-width: 900px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 500; line-height: .98; color: var(--heading-ink); }
.eyebrow { margin: 0; color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.mission-summary { max-width: 720px; margin: 0; color: var(--ink-soft); }
.heading-controls { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.role-chip, .map-mode, .count-badge { display: inline-flex; align-items: center; min-height: 32px; padding: .35rem .7rem; border-radius: 999px; background: var(--mint); color: var(--teal-dark); font-size: .78rem; font-weight: 750; }
.role-administrator { background: var(--role-admin-surface); color: var(--role-admin-ink); }
.role-leader { background: var(--role-leader-surface); color: var(--role-leader-ink); }
.installation-picker label { display: block; margin-bottom: .28rem; color: var(--ink-soft); font-size: .72rem; }
.installation-picker select { min-height: 38px; padding: 0 2rem 0 .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.summary-card { min-height: 116px; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 8px 24px rgba(20, 55, 56, .04); }
.summary-card span, .summary-card small { display: block; color: var(--ink-soft); }
.summary-card span { font-size: .79rem; font-weight: 700; }
.summary-card strong { display: block; margin: .25rem 0; font-family: Georgia, serif; font-size: 2.15rem; font-weight: 500; color: var(--teal-dark); }
.summary-card small { font-size: .72rem; }
.summary-card-alert { border-color: var(--warning-line); background: var(--amber-soft); }
.summary-card-alert strong { color: var(--warning-ink); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(280px, .85fr); gap: 1rem; align-items: stretch; }
.map-panel, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.panel-heading.compact { padding: .9rem 1rem; }
.panel-heading h2 { margin: .15rem 0 0; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 500; }
.panel-heading-actions { display: flex; align-items: center; gap: .7rem; }
.mission-map { height: min(60vh, 610px); min-height: 430px; background-color: #e4e7dd; background-image: linear-gradient(rgba(42,94,91,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(42,94,91,.08) 1px, transparent 1px); background-size: 34px 34px; }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 12px 35px rgba(15, 50, 50, .18); }
.leaflet-popup-content { line-height: 1.45; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; padding: .75rem 1rem; color: var(--ink-soft); font-size: .76rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.dot-asset { background: var(--amber); }
.dot-alert { background: var(--red); box-shadow: 0 0 0 4px rgba(191,61,57,.15); }
.empty-map { margin: 0; padding: 1rem; color: var(--ink-soft); }
.side-column { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; }
.alerts-panel { min-height: 0; }
.alert-list { max-height: 470px; overflow: auto; padding: .35rem 1rem 1rem; }
.alert-row { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; padding: .85rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.alert-row:last-child { border-bottom: 0; }
.alert-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--neutral-surface); font-weight: 900; }
.alert-sos .alert-symbol { background: var(--danger-surface); color: var(--red); }
.alert-row strong { font-size: .88rem; }
.alert-row p { margin: .12rem 0; color: var(--ink-soft); font-size: .78rem; }
.alert-row time { color: var(--muted-status); font-size: .7rem; }
.alert-copy { min-width: 0; }
.alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.alert-action { padding: .32rem .55rem; border: 1px solid var(--soft-line); border-radius: 8px; background: var(--soft-surface); color: var(--teal-dark); font-size: .7rem; font-weight: 750; cursor: pointer; }
.alert-action:hover, .alert-action:focus-visible { border-color: var(--teal); background: var(--mint); }
.alert-action.resolve { border-color: var(--warning-action-line); background: var(--warning-action-surface); color: var(--alert-state-ink); }
.alert-action:disabled { cursor: wait; opacity: .55; }
.alert-acknowledged { color: var(--teal); font-size: .69rem; font-weight: 750; }
.empty-state { padding: 1.2rem .2rem; color: var(--ink-soft); }
.empty-state p { margin: .3rem 0 0; font-size: .8rem; }
.team-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem; }
.team-chips span { padding: .4rem .65rem; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--chip-surface); color: var(--teal-dark); font-size: .78rem; }
.tracker-panel { margin-top: 1rem; }
.tracker-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: 1rem; }
.tracker-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); color: inherit; text-decoration: none; cursor: pointer; }
.tracker-card:hover, .tracker-card:focus-visible { border-color: var(--teal); outline: none; }
.tracker-pin { width: 13px; height: 13px; border: 3px solid var(--surface); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.tracker-card.asset .tracker-pin { background: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.tracker-copy { min-width: 0; }
.tracker-copy strong, .tracker-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-copy strong { font-size: .86rem; }
.tracker-copy span { margin-top: .15rem; color: var(--ink-soft); font-size: .73rem; }
.tracker-copy .tracker-position-state { color: var(--warning-ink); }
.tracker-age { color: var(--ink-soft); font-size: .72rem; text-align: right; }
.tracker-age small, .tracker-age strong { display: block; white-space: nowrap; }
.tracker-age small { margin-bottom: .15rem; font-size: .64rem; font-weight: 500; }
.tracker-age strong { color: var(--ink); font-size: .76rem; }
.text-link { color: var(--teal); font-size: .8rem; font-weight: 750; }
.empty-shell { max-width: 650px; margin: 10vh auto; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.empty-shell h1 { font-family: Georgia, serif; font-weight: 500; }

.login-shell { display: grid; min-height: calc(100vh - 72px - 4.6rem); place-items: center; }
.login-card { width: min(440px, 100%); padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.login-card h1 { margin: .35rem 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 6vw, 3rem); font-weight: 500; }
.login-intro, .login-help { color: var(--ink-soft); }
.login-intro { margin: 0 0 1.5rem; }
.login-help { margin: 1rem 0 0; font-size: .78rem; line-height: 1.45; }
.login-field { margin-bottom: 1rem; }
.login-field label { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 750; }
.login-field input { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--field-line); border-radius: 9px; background: var(--field-background); color: var(--ink); font: inherit; }
.login-field input:focus { border-color: var(--teal); outline: 3px solid var(--focus-ring); }
.primary-button { width: 100%; min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: 9px; background: var(--button-background); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.primary-button:hover, .primary-button:focus-visible { background: var(--button-hover); }
.login-error { margin-bottom: 1rem; padding: .75rem .85rem; border: 1px solid var(--danger-line); border-radius: 9px; background: var(--danger-surface); color: var(--danger-ink); font-size: .82rem; }

.detail-back { display: inline-flex; margin-bottom: 1rem; color: var(--teal); font-size: .82rem; font-weight: 750; text-decoration: none; }
.detail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.detail-heading h1 { margin: .2rem 0 .35rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 500; line-height: 1; }
.tracker-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; }
.tracker-state-switch-form { display: inline-flex; align-items: center; gap: .55rem; margin: .2rem 0 .35rem; }
.tracker-state-switch { display: inline-flex; align-items: center; gap: .52rem; padding: .3rem .48rem .3rem .35rem; border: 1px solid var(--state-control-line); border-radius: 999px; background: var(--state-control-surface); color: var(--ink-soft); font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.tracker-state-switch:hover, .tracker-state-switch:focus-visible { border-color: var(--teal); outline: 3px solid var(--focus-ring); }
.tracker-state-switch:disabled { cursor: wait; opacity: .65; }
.tracker-switch-track { display: inline-flex; width: 2.2rem; height: 1.22rem; padding: .13rem; border-radius: 999px; background: var(--off-status); transition: background .16s ease; }
.tracker-switch-track > span { width: .96rem; height: .96rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 39, 36, .3); transition: transform .16s ease; }
.tracker-state-switch.is-on { border-color: var(--state-on-line); background: var(--state-on-surface); color: var(--teal-dark); }
.tracker-state-switch.is-on .tracker-switch-track { background: var(--button-background); }
.tracker-state-switch.is-on .tracker-switch-track > span { transform: translateX(.98rem); }
.tracker-state-indicator { display: inline-flex; align-items: center; gap: .4rem; margin: .2rem 0 .35rem; color: var(--ink-soft); font-size: .74rem; font-weight: 800; }
.tracker-state-indicator > span { width: .58rem; height: .58rem; border-radius: 50%; background: var(--off-status); }
.tracker-state-indicator.is-on { color: var(--teal-dark); }
.tracker-state-indicator.is-on > span { background: var(--teal); }
.tracker-state-feedback { max-width: 17rem; color: var(--ink-soft); font-size: .7rem; font-weight: 700; }
.tracker-state-feedback:empty { display: none; }
.tracker-state-feedback.is-error { color: var(--red); }
.tracker-heading-off h1, .tracker-heading-off .eyebrow, .tracker-heading-off .detail-subtitle { color: var(--inactive-ink); }
.tracker-heading-off .detail-badge { border-color: var(--inactive-line); background: var(--inactive-surface); color: var(--inactive-ink); }
.detail-subtitle { margin: 0; color: var(--ink-soft); }
.detail-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.detail-badge { display: inline-flex; padding: .38rem .68rem; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--chip-surface); color: var(--teal-dark); font-size: .74rem; font-weight: 750; }
.detail-summary { margin-bottom: 1rem; }
.detail-summary .summary-card strong { font-size: 1.35rem; overflow-wrap: anywhere; }
.detail-summary .summary-card strong.battery-low { color: var(--red); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.detail-panel { min-width: 0; padding: 1.15rem; }
.detail-panel h2 { margin: 0 0 1rem; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.detail-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.detail-list { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: .7rem 1rem; margin: 0; }
.detail-list dt { color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .86rem; }
.evidence-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.evidence-list li { padding: .45rem .65rem; border-radius: 9px; background: var(--mint); color: var(--teal-dark); font-size: .78rem; font-weight: 750; }
.detail-alert-list { display: grid; gap: .65rem; }
.detail-alert { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.detail-alert:last-child { border-bottom: 0; }
.detail-alert strong, .detail-alert span { display: block; }
.detail-alert span, .detail-muted { color: var(--ink-soft); font-size: .76rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.message-stack { display: grid; gap: .55rem; margin: 0 0 1rem; }
.app-message { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--soft-surface); color: var(--teal-dark); font-size: .82rem; font-weight: 700; }
.app-message-success { border-color: #a8cbb9; background: var(--mint); }
.app-message-error { border-color: var(--danger-line); background: var(--danger-surface); color: var(--danger-ink); }
.detail-map-button { width: auto; min-height: 40px; align-items: center; display: inline-flex; text-decoration: none; }
.detail-sensor-history { grid-column: 1 / -1; }
.sensor-reading-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; }
.sensor-reading { display: grid; gap: .2rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sensor-reading span, .sensor-reading small { color: var(--ink-soft); }
.sensor-reading strong { font-size: 1.15rem; }
.sensor-history-table-wrap { overflow-x: auto; }
.sensor-history-table { width: 100%; border-collapse: collapse; }
.sensor-history-table th, .sensor-history-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.sensor-history-table th { color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.alert-history-filters { margin-bottom: 1rem; padding: 1rem; overflow: visible; }
.history-filter-form { display: grid; grid-template-columns: repeat(5, minmax(135px, 1fr)) auto; gap: .75rem; align-items: end; }
.history-filter-form label { display: grid; gap: .32rem; color: var(--ink-soft); font-size: .74rem; font-weight: 750; }
.history-filter-form input, .history-filter-form select { width: 100%; min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--field-background); color: var(--ink); }
.history-filter-actions { display: flex; align-items: center; gap: .65rem; min-height: 40px; }
.history-filter-submit { width: auto; min-height: 40px; white-space: nowrap; }
.alert-history-layout { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr); gap: 1rem; align-items: start; }
.alert-history-map-panel { position: sticky; top: 1rem; }
.alert-history-map { height: min(68vh, 720px); min-height: 480px; background-color: #e4e7dd; }
.alert-history-list { padding: 0 1rem; }
.alert-history-entry { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.alert-history-entry:last-child { border-bottom: 0; }
.alert-history-title-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.alert-history-title-line strong { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 500; }
.alert-history-main > p { margin: .2rem 0 .8rem; color: var(--ink-soft); font-size: .8rem; }
.alert-state { padding: .28rem .55rem; border-radius: 999px; background: var(--alert-state-surface); color: var(--alert-state-ink); font-size: .68rem; font-weight: 800; }
.alert-state-acknowledged { background: var(--alert-acknowledged-surface); color: var(--alert-acknowledged-ink); }
.alert-state-resolved { background: var(--mint); color: var(--teal-dark); }
.alert-history-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .42rem .75rem; margin: 0; }
.alert-history-facts dt { color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.alert-history-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .78rem; }
.alert-history-facts dd a { color: var(--teal); font-weight: 750; }
.alert-history-facts small { color: var(--ink-soft); }
.alert-map-focus { margin-left: .45rem; padding: 0; border: 0; background: none; color: var(--teal); font: inherit; font-weight: 750; cursor: pointer; text-decoration: underline; }
.alert-history-empty { padding: 1.25rem 0; }
.history-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .78rem; }
.history-pagination a { color: var(--teal); font-weight: 750; }

.gateway-overview-link { text-decoration: none; }
.gateway-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.gateway-health-note { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--warning-note-line); border-radius: 12px; background: var(--warning-note-surface); color: var(--warning-note-ink); font-size: .78rem; line-height: 1.45; }
.gateway-health-note strong { flex: 0 0 auto; }
.gateway-overview-layout { display: grid; grid-template-columns: minmax(430px, 1.1fr) minmax(360px, .9fr); gap: 1rem; align-items: start; }
.gateway-map-panel { overflow: hidden; }
.gateway-map { height: min(60vh, 610px); min-height: 430px; background-color: #e4e7dd; }
.gateway-list { padding: .35rem 1rem 1rem; }
.gateway-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.gateway-card:last-child { border-bottom: 0; }
.gateway-card:hover strong, .gateway-card:focus-visible strong { color: var(--teal); }
.gateway-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.gateway-card-marker { width: 12px; height: 12px; border-radius: 50%; background: var(--off-status); box-shadow: 0 0 0 4px rgba(154, 165, 162, .16); }
.gateway-state-recent { background: var(--teal); box-shadow: 0 0 0 4px rgba(23, 107, 104, .15); }
.gateway-state-stale { background: var(--amber); box-shadow: 0 0 0 4px rgba(217, 130, 43, .16); }
.gateway-state-disabled, .gateway-state-replaced { background: var(--off-status-strong); }
.gateway-card-copy { min-width: 0; }
.gateway-card-copy strong, .gateway-card-copy small, .gateway-card-copy span { display: block; }
.gateway-card-copy strong, .gateway-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gateway-card-copy small, .gateway-card-facts small, .gateway-card-facts time { color: var(--ink-soft); font-size: .7rem; }
.gateway-radio-state { display: inline-flex; width: fit-content; margin-top: .35rem; padding: .26rem .5rem; border-radius: 999px; background: var(--neutral-surface); color: var(--ink-soft); font-size: .68rem; font-weight: 800; }
.gateway-radio-state-recent { background: var(--mint); color: var(--teal-dark); }
.gateway-radio-state-stale { background: var(--amber-soft); color: var(--alert-state-ink); }
.gateway-card-facts { display: grid; gap: .12rem; text-align: right; }
.gateway-card-facts time { color: var(--ink); font-weight: 700; white-space: nowrap; }
.gateway-empty-state { padding: 1.1rem 0; }
.observed-gateways-panel, .gateway-receptions-panel { margin-top: 1rem; }
.gateway-table-wrap { overflow-x: auto; }
.gateway-table { width: 100%; border-collapse: collapse; }
.gateway-table th, .gateway-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.gateway-table th { color: var(--ink-soft); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.gateway-table td { font-size: .78rem; }
.gateway-table tbody tr:last-child td { border-bottom: 0; }
.gateway-marker span { font-size: .56rem; }
.gateway-time-value { font-size: 1.15rem !important; }
.gateway-detail-grid { margin-bottom: 1rem; }

.map-marker { display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; background: var(--teal); color: #fff; box-shadow: 0 4px 12px rgba(22,65,64,.28); transform: rotate(-45deg); }
.map-marker span { transform: rotate(45deg); font-size: .68rem; font-weight: 800; }
.map-marker.asset { background: var(--amber); }
.map-marker.alert { background: var(--red); animation: marker-pulse 1.8s infinite; }
@keyframes marker-pulse { 50% { box-shadow: 0 0 0 10px rgba(191,61,57,.16); } }

@media (max-width: 1000px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .workspace-grid { grid-template-columns: 1fr; }
    .side-column { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .tracker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-filter-form { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
    .alert-history-layout { grid-template-columns: 1fr; }
    .alert-history-map-panel { position: static; }
    .gateway-overview-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .app-header { min-height: 64px; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap; }
    .brand small, .user-name { display: none; }
    .mission-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .mission-heading h1 { font-size: 2.35rem; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .summary-card { min-height: 102px; }
    .workspace-grid, .side-column { grid-template-columns: 1fr; }
    .mission-map { min-height: 55vh; }
    .tracker-list { grid-template-columns: 1fr; }
    .panel-heading { align-items: flex-start; }
    .detail-heading { align-items: flex-start; flex-direction: column; }
    .detail-badges { justify-content: flex-start; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-list { grid-template-columns: 1fr; gap: .2rem; }
    .detail-list dd { margin-bottom: .65rem; }
    .history-filter-form { grid-template-columns: 1fr; }
    .alert-history-map { min-height: 55vh; }
    .alert-history-facts { grid-template-columns: 1fr; gap: .15rem; }
    .alert-history-facts dd { margin-bottom: .5rem; }
    .gateway-summary { grid-template-columns: 1fr; }
    .gateway-health-note { display: block; }
    .gateway-health-note strong, .gateway-health-note span { display: block; }
    .gateway-health-note strong { margin-bottom: .25rem; }
    .gateway-map { min-height: 55vh; }
    .gateway-card { grid-template-columns: auto minmax(0, 1fr); }
    .gateway-card-facts { grid-column: 2; text-align: left; }
}