/* Skylog Gen4 — Themed dispatch console
   Dark theme (default) matches legacy G3 exactly.
   Light theme via body[data-theme="light"]. */

/* ================================================
   CSS Custom Properties — Dark theme defaults
   ================================================ */
body {
    /* Core */
    --bg-body: #000000;
    --text-body: #FFFFFF;
    --text-muted: #808080;
    --text-secondary: #D0D0D0;
    --border-color: #404040;

    /* Links */
    --link-color: #A0A0FF;
    --link-visited: #FF00FF;
    --link-hover: #FF0000;
    --link-active: #00FFFF;

    /* Navigation */
    --nav-bg: #101020;
    --nav-border: #0000FF;
    --nav-brand: #D000F0;
    --nav-link-bg: #404040;
    --nav-link-border: #707070;
    --nav-link-text: #D0D0D0;
    --nav-link-hover-bg: #505050;
    --nav-link-hover-text: #FFFFFF;
    --nav-link-active-border: #00FF00;
    --nav-link-active-text: #00FF00;
    --nav-user-text: #00FFFF;
    --nav-user-link: #D0D0D0;
    --nav-user-hover: #FF0000;
    --nav-dropdown-bg: #1a1a2e;
    --nav-dropdown-border: #333;
    --nav-dropdown-hover-bg: #252540;
    --nav-dropdown-hover-text: #00FFFF;

    /* Clock */
    --clock-color: #FC9003;

    /* Headings */
    --h1-color: #D000F0;
    --h1-border: #0000FF;

    /* Sections — color-coded */
    --section-yellow-bg: #202000;
    --section-yellow-border: #C0C000;
    --section-yellow-title-border: #FFFF50;
    --section-yellow-title: #FFFF70;

    --section-green-bg: #003000;
    --section-green-border: #00C000;
    --section-green-title-border: #50FF50;
    --section-green-title: #50FF50;

    --section-blue-bg: #000020;
    --section-blue-border: #0000C0;
    --section-blue-title-border: #5050FF;
    --section-blue-title: #7070FF;

    --section-teal-bg: #002020;
    --section-teal-border: #00C0C0;
    --section-teal-title-border: #50FFFF;
    --section-teal-title: #70FFFF;

    --section-red-bg: #200000;
    --section-red-border: #C00000;
    --section-red-title-border: #FF5050;
    --section-red-title: #FF5050;

    /* Cards */
    --card-bg: #101010;
    --card-border: #404040;
    --card-h2: #00FF00;

    /* Tables */
    --table-header-bg: #404040;
    --table-header-border: #F0880A;
    --table-header-text: #FFFF00;
    --table-header-hover-bg: #505050;
    --table-row-odd: #003030;
    --table-row-even: #303000;
    --table-row-hover: #404040;
    --table-link: #A0A0FF;
    --table-empty-bg: #101010;

    /* Status colors */
    --status-is: #00FF00;
    --status-au: #FF8000;
    --status-res: #FFFF00;
    --status-ats: #FF00FF;
    --status-atd: #00FFFF;
    --status-ret: #8080FF;
    --status-tr: #FF80FF;
    --status-oos: #FF0000;
    --status-co: #808080;
    --status-ci: #00FF00;
    --status-avl: #00FF00;

    /* Priority colors */
    --priority-high: #FF0000;
    --priority-medium: #FF8000;
    --priority-normal: #FFFF00;
    --priority-low: #00FFFF;
    --priority-info: #FFFFFF;

    /* Buttons */
    --btn-bg: #404040;
    --btn-border: #707070;
    --btn-text: #D0D0D0;
    --btn-hover-bg: #505050;
    --btn-hover-text: #FFFFFF;
    --btn-active-bg: #608060;
    --btn-primary-border: #00A000;
    --btn-primary-text: #00FF00;
    --btn-primary-hover-bg: #306030;
    --btn-danger-border: #993333;
    --btn-danger-text: #E05555;
    --btn-danger-hover-bg: #603030;

    /* Forms */
    --input-bg: #303030;
    --input-border: #707070;
    --input-text: #FFFFFF;
    --input-focus-border: #00FFFF;
    --input-disabled-bg: #202020;
    --input-disabled-border: #404040;
    --input-disabled-text: #808080;
    --form-label: #FFFF00;
    --form-help: #808080;

    /* Alerts */
    --alert-error-bg: #400000;
    --alert-error-border: #FF0000;
    --alert-error-text: #FF8080;
    --alert-warning-bg: #403000;
    --alert-warning-border: #FFA500;
    --alert-warning-text: #FFD080;
    --alert-success-bg: #004000;
    --alert-success-border: #00FF00;
    --alert-success-text: #80FF80;
    --alert-info-bg: #000040;
    --alert-info-border: #0000FF;
    --alert-info-text: #8080FF;

    /* Response toast */
    --response-ok-bg: #000000;
    --response-ok-border: #00FF00;
    --response-ok-text: #00FF00;
    --response-error-bg: #400000;
    --response-error-border: #FF0000;
    --response-error-text: #FF8080;

    /* Banners */
    --lock-bg: #402000;
    --lock-border: #FF8000;
    --lock-text: #FFB060;
    --connection-bg: #402000;
    --connection-border: #FF8000;
    --connection-text: #FFB060;

    /* Login */
    --login-title: #00FFFF;
    --login-form-bg: #101010;
    --login-form-border: #404040;

    /* Command */
    --cmd-bar-bg: #101020;
    --cmd-bar-border: #404040;
    --cmd-result-success-bg: #003000;
    --cmd-result-success-border: #00FF00;
    --cmd-result-success-text: #00FF00;
    --cmd-result-error-bg: #300000;
    --cmd-result-error-border: #FF0000;
    --cmd-result-error-text: #FF0000;
    --cmd-ref-key: #FFFF00;
    --cmd-group-label: #50FF50;
    --cmd-group-border: #006000;
    --cmd-detail-arrow: #808080;
    --cmd-detail-code: #FFFF00;
    --cmd-detail-body-border: #006000;
    --cmd-detail-td-label: #808080;

    /* Badges */
    --badge-bg: #404040;
    --badge-text: #FFFFFF;
    --badge-success-bg: #006000;
    --badge-success-text: #00FF00;
    --badge-warning-bg: #600000;
    --badge-warning-text: #FF0000;
    --badge-secondary-bg: #404040;
    --badge-secondary-text: #808080;
    --badge-beta-bg: #604000;
    --badge-beta-text: #FFA000;
    --badge-count-bg: #404040;
    --badge-count-text: #00FFFF;
    --version-badge-bg: rgba(40, 40, 40, 0.85);
    --version-badge-text: #808080;
    --version-badge-test-bg: rgba(96, 0, 0, 0.9);
    --version-badge-test-text: #FF4040;

    /* Messages */
    --unread-bg: #303000;
    --status-unread: #FFFF00;
    --status-read: #00FF00;
    --status-sent: #70FFFF;
    --status-sent-ack: #00FF00;
    --popup-bg: #002020;
    --popup-border: #00C0C0;
    --popup-text: #D0D0D0;
    --popup-sender: #70FFFF;
    --popup-time: #808080;
    --popup-reply-bg: #303030;
    --popup-reply-border: #707070;

    /* Detail / Edit */
    --detail-label: #808080;
    --detail-value: #FFFFFF;
    --edit-label: #808080;
    --view-field: #D0D0D0;
    --assigned-unit-bg: #003030;
    --assigned-unit-border: #006060;
    --assigned-unit-label: #00FFFF;

    /* Updated highlight */
    --updated-border: #00D0D0;
    --updated-text: #00D0D0;

    /* Validation */
    --spank-border: #FFFF00;

    /* Map */
    --map-legend-bg: rgba(0, 0, 0, 0.8);
    --map-legend-border: #404040;
    --map-legend-text: #FFFFFF;
    --map-legend-swatch-border: #000;

    /* Autocomplete */
    --autocomplete-bg: #303030;
    --autocomplete-border: #707070;
    --autocomplete-text: #FFFFFF;
    --autocomplete-hover-bg: #404060;
    --autocomplete-hover-text: #00FFFF;
    --autocomplete-location: #808080;

    /* Geocode picker */
    --geocode-btn-bg: #2a2a00;
    --geocode-btn-border: #808000;
    --geocode-btn-text: #FFFF80;
    --geocode-btn-hover-bg: #404000;
    --geocode-btn-hover-border: #C0C000;
    --geocode-btn-hover-text: #FFFFFF;

    /* Toolbar */
    --toolbar-label: #D0D0D0;
    --toolbar-stamp: #808080;
}

/* ================================================
   Light theme overrides
   ================================================ */
body[data-theme="light"] {
    /* Core */
    --bg-body: #d9d8d4;
    --text-body: #1b1b1b;
    --text-muted: #6b6b6b;
    --text-secondary: #3a3a3a;
    --border-color: #b8b8b4;

    /* Links */
    --link-color: #2850a8;
    --link-visited: #6e3187;
    --link-hover: #b82020;
    --link-active: #006890;

    /* Navigation */
    --nav-bg: #4a4e58;
    --nav-border: #3038a0;
    --nav-brand: #7a1898;
    --nav-link-bg: #5c6070;
    --nav-link-border: #70747e;
    --nav-link-text: #e0e0e0;
    --nav-link-hover-bg: #6a6e78;
    --nav-link-hover-text: #ffffff;
    --nav-link-active-border: #28a030;
    --nav-link-active-text: #40c848;
    --nav-user-text: #58d0d8;
    --nav-user-link: #d0d0d0;
    --nav-user-hover: #f04040;
    --nav-dropdown-bg: #50545e;
    --nav-dropdown-border: #686c76;
    --nav-dropdown-hover-bg: #5e6270;
    --nav-dropdown-hover-text: #50e0e8;

    /* Clock */
    --clock-color: #b85800;

    /* Headings */
    --h1-color: #6a1888;
    --h1-border: #3038a0;

    /* Sections — color-coded */
    --section-yellow-bg: #e6e2cc;
    --section-yellow-border: #c0a820;
    --section-yellow-title-border: #b89818;
    --section-yellow-title: #6e5800;

    --section-green-bg: #cce0cc;
    --section-green-border: #40a040;
    --section-green-title-border: #38903a;
    --section-green-title: #1a6420;

    --section-blue-bg: #ccd0e0;
    --section-blue-border: #4048c0;
    --section-blue-title-border: #3840b0;
    --section-blue-title: #2830a0;

    --section-teal-bg: #c8dede;
    --section-teal-border: #20a0a0;
    --section-teal-title-border: #189090;
    --section-teal-title: #006060;

    --section-red-bg: #e0cccc;
    --section-red-border: #c04040;
    --section-red-title-border: #b03838;
    --section-red-title: #982020;

    /* Cards */
    --card-bg: #e2e1dd;
    --card-border: #b8b8b4;
    --card-h2: #18681a;

    /* Tables */
    --table-header-bg: #5a5e68;
    --table-header-border: #d08810;
    --table-header-text: #f0f0f0;
    --table-header-hover-bg: #686c76;
    --table-row-odd: #c8dcd8;
    --table-row-even: #dcdac8;
    --table-row-hover: #c8c8c0;
    --table-link: #2850a8;
    --table-empty-bg: #d0d0cc;

    /* Status colors — adjusted for light backgrounds */
    --status-is: #18781a;
    --status-au: #c06000;
    --status-res: #888000;
    --status-ats: #981098;
    --status-atd: #007888;
    --status-ret: #4848c8;
    --status-tr: #a038a0;
    --status-oos: #cc1818;
    --status-co: #808080;
    --status-ci: #18781a;
    --status-avl: #18781a;

    /* Priority colors */
    --priority-high: #cc1818;
    --priority-medium: #c06000;
    --priority-normal: #888000;
    --priority-low: #007888;
    --priority-info: #3a3a3a;

    /* Buttons */
    --btn-bg: #c0bfba;
    --btn-border: #9a9a96;
    --btn-text: #2a2a2a;
    --btn-hover-bg: #b0afaa;
    --btn-hover-text: #000000;
    --btn-active-bg: #a8c8a8;
    --btn-primary-border: #18781a;
    --btn-primary-text: #106812;
    --btn-primary-hover-bg: #b8d8b8;
    --btn-danger-border: #cc3838;
    --btn-danger-text: #a82020;
    --btn-danger-hover-bg: #dcc0c0;

    /* Forms */
    --input-bg: #eae9e5;
    --input-border: #9a9a96;
    --input-text: #1b1b1b;
    --input-focus-border: #2870c0;
    --input-disabled-bg: #ccccc8;
    --input-disabled-border: #b0b0ac;
    --input-disabled-text: #909090;
    --form-label: #5a4800;
    --form-help: #6b6b6b;

    /* Alerts */
    --alert-error-bg: #f0d0d0;
    --alert-error-border: #cc1818;
    --alert-error-text: #901010;
    --alert-warning-bg: #f0e0c8;
    --alert-warning-border: #c08000;
    --alert-warning-text: #784800;
    --alert-success-bg: #c8e8c8;
    --alert-success-border: #18781a;
    --alert-success-text: #0a5010;
    --alert-info-bg: #d0d0f0;
    --alert-info-border: #4048c0;
    --alert-info-text: #2830a0;

    /* Response toast */
    --response-ok-bg: #c8e8c8;
    --response-ok-border: #18781a;
    --response-ok-text: #0a5010;
    --response-error-bg: #f0d0d0;
    --response-error-border: #cc1818;
    --response-error-text: #901010;

    /* Banners */
    --lock-bg: #f0e0c8;
    --lock-border: #c08000;
    --lock-text: #784800;
    --connection-bg: #f0e0c8;
    --connection-border: #c08000;
    --connection-text: #784800;

    /* Login */
    --login-title: #006068;
    --login-form-bg: #e2e1dd;
    --login-form-border: #b8b8b4;

    /* Command */
    --cmd-bar-bg: #ccccc8;
    --cmd-bar-border: #b8b8b4;
    --cmd-result-success-bg: #c8e8c8;
    --cmd-result-success-border: #18781a;
    --cmd-result-success-text: #0a5010;
    --cmd-result-error-bg: #f0d0d0;
    --cmd-result-error-border: #cc1818;
    --cmd-result-error-text: #901010;
    --cmd-ref-key: #5a4800;
    --cmd-group-label: #1a6420;
    --cmd-group-border: #40a040;
    --cmd-detail-arrow: #909090;
    --cmd-detail-code: #5a4800;
    --cmd-detail-body-border: #40a040;
    --cmd-detail-td-label: #6b6b6b;

    /* Badges */
    --badge-bg: #c0bfba;
    --badge-text: #2a2a2a;
    --badge-success-bg: #b0d8b0;
    --badge-success-text: #0a5010;
    --badge-warning-bg: #e0c0b0;
    --badge-warning-text: #901010;
    --badge-secondary-bg: #c8c8c4;
    --badge-secondary-text: #6b6b6b;
    --badge-beta-bg: #e0d0a8;
    --badge-beta-text: #685000;
    --badge-count-bg: #c0c8c8;
    --badge-count-text: #006068;
    --version-badge-bg: rgba(220, 220, 216, 0.85);
    --version-badge-text: #6b6b6b;
    --version-badge-test-bg: rgba(224, 192, 176, 0.9);
    --version-badge-test-text: #c02020;

    /* Messages */
    --unread-bg: #e6e2cc;
    --status-unread: #888000;
    --status-read: #18781a;
    --status-sent: #007888;
    --status-sent-ack: #18781a;
    --popup-bg: #c8dede;
    --popup-border: #20a0a0;
    --popup-text: #2a2a2a;
    --popup-sender: #006060;
    --popup-time: #6b6b6b;
    --popup-reply-bg: #e2e1dd;
    --popup-reply-border: #9a9a96;

    /* Detail / Edit */
    --detail-label: #6b6b6b;
    --detail-value: #1b1b1b;
    --edit-label: #6b6b6b;
    --view-field: #3a3a3a;
    --assigned-unit-bg: #c0e0e0;
    --assigned-unit-border: #60b0b0;
    --assigned-unit-label: #006068;

    /* Updated highlight */
    --updated-border: #0090a0;
    --updated-text: #006068;

    /* Validation */
    --spank-border: #c0a820;

    /* Map */
    --map-legend-bg: rgba(220, 219, 215, 0.94);
    --map-legend-border: #b8b8b4;
    --map-legend-text: #1b1b1b;
    --map-legend-swatch-border: #808080;

    /* Autocomplete */
    --autocomplete-bg: #eae9e5;
    --autocomplete-border: #9a9a96;
    --autocomplete-text: #1b1b1b;
    --autocomplete-hover-bg: #c8d8e0;
    --autocomplete-hover-text: #006068;
    --autocomplete-location: #6b6b6b;

    /* Geocode picker */
    --geocode-btn-bg: #e0dcc8;
    --geocode-btn-border: #b0a020;
    --geocode-btn-text: #6e5800;
    --geocode-btn-hover-bg: #d8d4b8;
    --geocode-btn-hover-border: #908000;
    --geocode-btn-hover-text: #4a3800;

    /* Toolbar */
    --toolbar-label: #3a3a3a;
    --toolbar-stamp: #6b6b6b;
}

/* ================================================
   Base reset and layout
   ================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    font-size: 16px; /* Master control — change this one value to scale entire UI */
}

body {
    background-color: var(--bg-body);
    color: var(--text-body);
    font-family: Arial, sans-serif;
    font-size: 1rem;
    height: 100%;
    line-height: 1.4;
}

/* Links */
a:link { color: var(--link-color); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); }
a:active { color: var(--link-active); }

/* Navigation */
.navbar {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    display: flex;
    align-items: center;
    padding: 3px 8px;
    gap: 8px;
    position: relative;
    z-index: 1001;
}

.nav-brand {
    color: var(--nav-brand);
    font-size: 1.125rem;
    font-weight: bold;
    margin-right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-brand-logo {
    height: 24px;
    width: 24px;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    gap: 2px;
}

.nav-links a {
    background: var(--nav-link-bg);
    border: 1px solid var(--nav-link-border);
    border-radius: 3px;
    color: var(--nav-link-text);
    font-size: 0.94rem;
    padding: 2px 6px;
    text-decoration: none;
}

.nav-links a:hover {
    background: var(--nav-link-hover-bg);
    color: var(--nav-link-hover-text);
}

.nav-links a.active {
    border-color: var(--nav-link-active-border);
    color: var(--nav-link-active-text);
}

.nav-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.94rem;
}

.nav-user span {
    color: var(--nav-user-text);
    font-style: italic;
}

.nav-user a {
    color: var(--nav-user-link);
    text-decoration: none;
}

.nav-user a:hover {
    color: var(--nav-user-hover);
}

/* Nav user dropdown */
.nav-user-dropdown {
    position: relative;
}

.nav-user-toggle {
    cursor: pointer;
}

.nav-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--nav-dropdown-bg);
    border: 1px solid var(--nav-dropdown-border);
    border-radius: 4px;
    min-width: 120px;
    z-index: 1000;
    padding: 8px 0 4px;
    margin-top: 0;
}

.nav-user-dropdown:hover .nav-user-menu {
    display: block;
}

.nav-user-menu a {
    display: block;
    padding: 6px 14px;
    color: var(--nav-link-text);
    text-decoration: none;
    white-space: nowrap;
}

.nav-user-menu a:hover {
    background: var(--nav-dropdown-hover-bg);
    color: var(--nav-dropdown-hover-text);
}

/* Clock */
.clock {
    color: var(--clock-color);
    font-family: monospace;
    font-size: 1rem;
    white-space: nowrap;
}

/* Container */
.container {
    padding: 5px;
}

/* Page title */
h1 {
    color: var(--h1-color);
    font-size: 1.25rem;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--h1-border);
    padding-bottom: 3px;
}

h2 {
    font-size: 1.125rem;
    margin-bottom: 3px;
}

/* Color-coded sections */
.section {
    border-radius: 5px;
    margin-top: 8px;
    padding: 5px;
}

.section-yellow, .card-yellow {
    background-color: var(--section-yellow-bg);
    border: 1px solid var(--section-yellow-border);
}

.section-yellow .section-title,
.card-yellow h2 {
    border-bottom: 1px solid var(--section-yellow-title-border);
    color: var(--section-yellow-title);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.section-green, .card-green {
    background-color: var(--section-green-bg);
    border: 1px solid var(--section-green-border);
}

.section-green .section-title,
.card-green h2 {
    border-bottom: 1px solid var(--section-green-title-border);
    color: var(--section-green-title);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.section-blue, .card-blue {
    background-color: var(--section-blue-bg);
    border: 1px solid var(--section-blue-border);
}

.section-blue .section-title,
.card-blue h2 {
    border-bottom: 1px solid var(--section-blue-title-border);
    color: var(--section-blue-title);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.section-teal, .card-teal {
    background-color: var(--section-teal-bg);
    border: 1px solid var(--section-teal-border);
}

.section-teal .section-title,
.card-teal h2 {
    border-bottom: 1px solid var(--section-teal-title-border);
    color: var(--section-teal-title);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.section-red, .card-red {
    background-color: var(--section-red-bg);
    border: 1px solid var(--section-red-border);
}

.section-red .section-title,
.card-red h2 {
    border-bottom: 1px solid var(--section-red-title-border);
    color: var(--section-red-title);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Legacy card class */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 8px;
}

.card h2 {
    color: var(--card-h2);
    border-bottom: 1px solid var(--card-h2);
    font-size: 1rem;
    padding-bottom: 3px;
    margin-bottom: 5px;
}

/* Dashboard layout - two column with sidebar */
.dashboard-layout {
    display: flex;
    gap: 8px;
}

.dashboard-main {
    flex: 1;
    min-width: 0;
}

.dashboard-sidebar {
    width: 280px;
    flex-shrink: 0;
}

/* Simple grid for equal columns */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px;
}

/* Tables - compact with alternating rows */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.data-table th {
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--table-header-border);
    color: var(--table-header-text);
    font-weight: bold;
    padding: 3px 5px;
    text-align: left;
}

.data-table td {
    padding: 2px 5px;
}

.data-table tbody tr:nth-child(odd) td {
    background: var(--table-row-odd);
}

.data-table tbody tr:nth-child(even) td {
    background: var(--table-row-even);
}

.data-table tbody tr:hover td {
    background: var(--table-row-hover);
}

.data-table a {
    color: var(--table-link);
}

.empty-message {
    text-align: center;
    color: var(--text-muted);
    padding: 10px !important;
    background: var(--table-empty-bg) !important;
}

/* Sortable table headers */
.data-table th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px;
}

.data-table th[data-sort]:hover {
    background: var(--table-header-hover-bg);
}

.data-table th[data-sort]::after {
    content: '\2195';
    position: absolute;
    right: 4px;
    opacity: 0.4;
}

.data-table th.sort-asc::after {
    content: '\25B2';
    opacity: 1;
}

.data-table th.sort-desc::after {
    content: '\25BC';
    opacity: 1;
}

/* Compact table variant */
.table-compact th,
.table-compact td {
    padding: 1px 4px;
    font-size: 0.875rem;
}

/* Status colors */
.status-is { color: var(--status-is); }
.status-au { color: var(--status-au); }
.status-res { color: var(--status-res); }
.status-ats { color: var(--status-ats); }
.status-atd { color: var(--status-atd); }
.status-ret { color: var(--status-ret); }
.status-tr { color: var(--status-tr); }
.status-oos { color: var(--status-oos); }
.status-co { color: var(--status-co); }
.status-ci { color: var(--status-ci); }
.status-avl { color: var(--status-avl); }

/* Priority colors */
.priority-1, .priority-2 { color: var(--priority-high); font-weight: bold; }
.priority-3, .priority-4 { color: var(--priority-medium); }
.priority-5 { color: var(--priority-normal); }
.priority-6, .priority-7 { color: var(--priority-low); }
.priority-8, .priority-9 { color: var(--priority-info); }

/* Buttons - gray with green active */
.btn,
a.btn:link,
a.btn:visited {
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--btn-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.94rem;
    line-height: normal;
    padding: 2px 8px;
    text-decoration: none;
    display: inline-block;
}

.btn:hover,
a.btn:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-text);
}

.btn:active,
a.btn:active {
    background: var(--btn-active-bg);
}

.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

.btn-primary:hover,
a.btn-primary:hover {
    background: var(--btn-primary-hover-bg);
}

.btn-danger,
a.btn-danger:link,
a.btn-danger:visited {
    border-color: var(--btn-danger-border);
    color: var(--btn-danger-text);
}

.btn-danger:hover,
a.btn-danger:hover {
    background: var(--btn-danger-hover-bg);
}

.btn.btn-sm,
a.btn-sm:link,
a.btn-sm:visited {
    font-size: 0.81rem;
    padding: 1px 4px;
    vertical-align: middle;
}

/* Forms - dark inputs */
.form {
    max-width: 500px;
}

.form-group {
    margin-bottom: 8px;
}

.form-group label {
    display: block;
    color: var(--form-label);
    font-size: 0.94rem;
    margin-bottom: 2px;
}

.form-group input,
.form-group textarea,
.form-group select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    color: var(--input-text);
    font-size: 0.94rem;
    padding: 3px 5px;
    width: 100%;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
    background: var(--input-disabled-bg);
    border-color: var(--input-disabled-border);
    color: var(--input-disabled-text);
}

.form-actions {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.form-inline {
    display: flex;
    gap: 5px;
    align-items: center;
}

.form-control {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    color: var(--input-text);
    font-size: 0.94rem;
    padding: 3px 5px;
}

.form-help {
    color: var(--form-help);
    font-size: 0.81rem;
    margin-top: 2px;
}

/* Alerts */
.alert {
    border-radius: 3px;
    margin-bottom: 8px;
    padding: 5px 8px;
    font-size: 0.94rem;
}

.alert-error {
    background: var(--alert-error-bg);
    border: 1px solid var(--alert-error-border);
    color: var(--alert-error-text);
}

.alert-warning {
    background: var(--alert-warning-bg);
    border: 1px solid var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.alert-success {
    background: var(--alert-success-bg);
    border: 1px solid var(--alert-success-border);
    color: var(--alert-success-text);
}

.alert-info {
    background: var(--alert-info-bg);
    border: 1px solid var(--alert-info-border);
    color: var(--alert-info-text);
}

/* Alert toast container - fixed position */
.alert-container {
    position: fixed;
    top: 35px;
    right: 10px;
    z-index: 99;
    width: 300px;
}

/* Response messages - fixed position */
.response-container {
    position: fixed;
    right: 10px;
    top: 35px;
    z-index: 100;
}

.response {
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 5px 10px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.response.show {
    opacity: 1;
}

.response.ok {
    background: var(--response-ok-bg);
    border: 2px solid var(--response-ok-border);
    color: var(--response-ok-text);
}

.response.error {
    background: var(--response-error-bg);
    border: 2px solid var(--response-error-border);
    color: var(--response-error-text);
}

/* Entity lock banner */
.lock-banner {
    background: var(--lock-bg);
    border: 1px solid var(--lock-border);
    color: var(--lock-text);
    padding: 5px 10px;
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

/* SSE connection lost banner */
.connection-banner {
    background: var(--connection-bg);
    border-bottom: 2px solid var(--connection-border);
    color: var(--connection-text);
    font-size: 0.875rem;
    font-weight: bold;
    padding: 4px 10px;
    text-align: center;
}

/* SSE connection lost viewport border */
body.connection-lost::after {
    content: '';
    position: fixed;
    inset: 0;
    border: 4px dashed var(--connection-border);
    pointer-events: none;
    z-index: 9999;
}

/* Login page */
.login-container {
    max-width: 350px;
    margin: 50px auto;
    text-align: center;
}

.login-container h1 {
    border: none;
    color: var(--login-title);
    font-size: 1.75rem;
    margin-bottom: 20px;
}

.login-form {
    background: var(--login-form-bg);
    border: 1px solid var(--login-form-border);
    border-radius: 5px;
    padding: 15px;
}

/* Command interface */
.command-form {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

.command-form input {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    color: var(--input-text);
    font-family: monospace;
    font-size: 1rem;
    padding: 4px 8px;
}

.command-form input:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

.command-result {
    font-family: monospace;
    font-size: 0.94rem;
    padding: 3px 5px;
    border-radius: 3px;
    margin-top: 5px;
}

.command-result.success {
    background: var(--cmd-result-success-bg);
    border: 1px solid var(--cmd-result-success-border);
    color: var(--cmd-result-success-text);
}

.command-result.error {
    background: var(--cmd-result-error-bg);
    border: 1px solid var(--cmd-result-error-border);
    color: var(--cmd-result-error-text);
}

/* Global command bar (below navbar) */
.global-command-bar {
    background: var(--cmd-bar-bg);
    border-bottom: 1px solid var(--cmd-bar-border);
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.global-command-bar .command-form {
    margin-bottom: 0;
    max-width: 400px;
}

.global-command-bar .command-result {
    margin-top: 0;
}

/* Command reference */
.command-ref {
    font-family: monospace;
    font-size: 0.875rem;
}

.command-ref dt {
    color: var(--cmd-ref-key);
    float: left;
    width: 120px;
}

.command-ref dd {
    color: var(--text-secondary);
    margin-left: 125px;
    margin-bottom: 2px;
}

/* Detail grid - for view pages */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.detail-item label {
    color: var(--detail-label);
    display: block;
    font-size: 0.81rem;
    text-transform: uppercase;
}

.detail-item span,
.detail-item p {
    color: var(--detail-value);
    font-family: monospace;
    font-size: 1rem;
}

.detail-actions {
    margin-top: 10px;
    display: flex;
    gap: 5px;
}

/* Badge */
.badge {
    background: var(--badge-bg);
    border-radius: 3px;
    color: var(--badge-text);
    display: inline-block;
    font-size: 0.81rem;
    padding: 1px 4px;
}

.badge-success {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
}

.badge-warning {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
}

.badge-secondary {
    background: var(--badge-secondary-bg);
    color: var(--badge-secondary-text);
}

.badge-hidden {
    display: none;
}

.badge-beta {
    background: var(--badge-beta-bg);
    color: var(--badge-beta-text);
    font-size: 0.69rem;
    vertical-align: super;
}

.badge-count {
    background: var(--badge-count-bg);
    border-radius: 3px;
    color: var(--badge-count-text);
    font-size: 0.75rem;
    font-weight: normal;
    margin-left: 6px;
    padding: 1px 5px;
}

.version-badge {
    position: fixed;
    bottom: 6px;
    right: 8px;
    background: var(--version-badge-bg);
    color: var(--version-badge-text);
    font-size: 0.69rem;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 900;
    pointer-events: none;
    user-select: none;
}

.version-badge-test {
    background: var(--version-badge-test-bg);
    color: var(--version-badge-test-text);
    font-weight: bold;
}

/* Messages */
.unread {
    background: var(--unread-bg) !important;
}

.status-unread {
    color: var(--status-unread);
    font-weight: bold;
}

.status-read {
    color: var(--status-read);
}

.status-sent {
    color: var(--status-sent);
}

.status-sent-ack {
    color: var(--status-sent-ack);
}

.msg-content {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Message popup notifications */
#message-popup-container {
    position: fixed;
    top: 35px;
    right: 320px;
    z-index: 98;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
}

.message-popup {
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
    border-radius: 4px;
    padding: 8px;
    color: var(--popup-text);
    font-size: 0.875rem;
}

.message-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.message-popup .popup-sender {
    color: var(--popup-sender);
    font-weight: bold;
}

.message-popup .popup-time {
    color: var(--popup-time);
    font-size: 0.75rem;
}

.message-popup .popup-content {
    margin-bottom: 6px;
    word-wrap: break-word;
}

.message-popup .popup-actions {
    display: flex;
    gap: 5px;
}

.message-popup .popup-reply-form {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}

.message-popup .popup-reply-input {
    flex: 1;
    background: var(--popup-reply-bg);
    border: 1px solid var(--popup-reply-border);
    border-radius: 3px;
    color: var(--input-text);
    font-size: 0.81rem;
    padding: 2px 4px;
}

.message-popup .popup-reply-input:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

/* Toolbar */
.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 5px;
}

.auto-refresh-label {
    color: var(--toolbar-label);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    gap: 3px;
}

.refresh-stamp {
    color: var(--toolbar-stamp);
    font-family: monospace;
    font-size: 0.81rem;
}

.checkbox-label {
    color: var(--toolbar-label);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    gap: 3px;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    padding: 0;
    background: transparent;
    border: none;
}

/* Command reference - expandable details */
.cmd-group-label {
    color: var(--cmd-group-label);
    font-size: 0.875rem;
    font-weight: bold;
    margin: 8px 0 4px;
    border-bottom: 1px solid var(--cmd-group-border);
    padding-bottom: 2px;
}

.cmd-group-label:first-of-type {
    margin-top: 0;
}

.cmd-detail {
    margin-bottom: 2px;
}

.cmd-detail summary {
    cursor: pointer;
    font-family: monospace;
    font-size: 0.875rem;
    padding: 3px 4px;
    list-style: none;
}

.cmd-detail summary::-webkit-details-marker {
    display: none;
}

.cmd-detail summary::before {
    content: "\25B6";
    display: inline-block;
    width: 14px;
    color: var(--cmd-detail-arrow);
    font-size: 0.69rem;
}

.cmd-detail[open] summary::before {
    content: "\25BC";
}

.cmd-detail summary code {
    color: var(--cmd-detail-code);
}

.cmd-detail summary span {
    color: var(--text-secondary);
    margin-left: 8px;
}

.cmd-detail-body {
    margin-left: 14px;
    padding: 4px 8px;
    border-left: 2px solid var(--cmd-detail-body-border);
    margin-bottom: 4px;
}

.cmd-detail-table {
    font-size: 0.81rem;
    border-collapse: collapse;
}

.cmd-detail-table td {
    padding: 1px 6px;
    vertical-align: top;
}

.cmd-detail-table td:first-child {
    color: var(--cmd-detail-td-label);
    white-space: nowrap;
    padding-right: 10px;
}

.cmd-detail-table td:last-child {
    color: var(--text-secondary);
}

.cmd-detail-table code {
    color: var(--cmd-detail-code);
}

/* Admin menu */
.admin-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

.admin-menu .card p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 5px;
}

/* Assigned units display */
.assigned-unit {
    background: var(--assigned-unit-bg);
    border: 1px solid var(--assigned-unit-border);
    border-radius: 3px;
    display: inline-block;
    font-size: 0.875rem;
    margin-right: 5px;
    padding: 1px 4px;
}

/* Monospace utility */
.mono {
    font-family: monospace;
}

/* Hidden utility */
.hidden {
    display: none;
}

/* Updated field highlight */
.updated {
    border-color: var(--updated-border) !important;
    color: var(--updated-text);
}

/* Map styles */
.map-container {
    height: calc(100vh - 50px);
    width: 100%;
}

.map-legend {
    background: var(--map-legend-bg);
    border: 1px solid var(--map-legend-border);
    border-radius: 5px;
    bottom: 20px;
    color: var(--map-legend-text);
    font-size: 0.81rem;
    left: 10px;
    padding: 8px;
    position: absolute;
    z-index: 1000;
}

.map-legend dt {
    float: left;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border: 1px solid var(--map-legend-swatch-border);
}

.map-legend dd {
    margin-left: 20px;
    margin-bottom: 3px;
}

/* Incident grid layout (shared by view and edit pages) */
.incident-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.incident-grid .full-width {
    grid-column: 1 / -1;
}

/* Edit fields table (label + input pairs) */
.edit-fields {
    border-collapse: collapse;
}

.edit-fields td {
    padding: 1px 4px;
    vertical-align: top;
    white-space: nowrap;
}

.edit-fields td:first-child {
    color: var(--edit-label);
    text-align: right;
    padding-right: 8px;
}

.edit-fields input[type="text"],
.edit-fields textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    color: var(--input-text);
    font-family: inherit;
    font-size: 0.94rem;
    padding: 2px 4px;
}

.edit-fields input[type="text"]:focus,
.edit-fields textarea:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

.edit-fields input[type="text"]:disabled {
    background: var(--input-disabled-bg);
    border-color: var(--input-disabled-border);
    color: var(--input-disabled-text);
}

.view-field {
    color: var(--view-field);
}

/* Assigned unit spans */
.assigned-unit-span {
    display: inline-block;
    margin: 2px 4px 2px 0;
    white-space: nowrap;
}

.assigned-unit-label {
    color: var(--assigned-unit-label);
    font-size: 0.875rem;
}

.assigned-unit-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
}

.assigned-unit-actions button {
    font-size: 0.75rem;
    padding: 0 4px;
}

/* Available unit buttons */
.available-unit-btn {
    margin: 2px;
}

/* Validation error highlight */
.spank {
    border-color: var(--spank-border) !important;
}

/* Destination input (hidden by default via .hidden) */
.dest-input {
    width: 120px;
    font-size: 0.81rem;
}

/* Log entry section */
.log-entry-section {
    margin-top: 8px;
    color: var(--text-muted);
}

.log-entry-section textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    color: var(--input-text);
    font-family: inherit;
    font-size: 0.94rem;
    padding: 2px 4px;
    display: block;
    margin-top: 2px;
}

.log-entry-section textarea:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

/* RP Autocomplete dropdown */
.rp-autocomplete-dropdown {
    position: absolute;
    z-index: 100;
    background: var(--autocomplete-bg);
    border: 1px solid var(--autocomplete-border);
    border-radius: 0 0 3px 3px;
    max-height: 200px;
    overflow-y: auto;
    min-width: 200px;
}

.rp-autocomplete-item {
    padding: 4px 8px;
    cursor: pointer;
    color: var(--autocomplete-text);
    font-size: 0.94rem;
}

.rp-autocomplete-item:hover,
.rp-autocomplete-item.selected {
    background: var(--autocomplete-hover-bg);
    color: var(--autocomplete-hover-text);
}

.rp-autocomplete-location {
    color: var(--autocomplete-location);
    font-size: 0.81rem;
}

/* Responsive adjustments */
@media (orientation: portrait) and (max-width: 600px) {
    .nav-brand-text {
        display: none;
    }
}

@media (max-width: 800px) {
    .dashboard-layout {
        flex-direction: column;
    }

    .dashboard-sidebar {
        width: 100%;
        order: -1;
    }

    .nav-links {
        flex-wrap: wrap;
    }
}

/* Geocode multi-result picker */
.geocode-results {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.geocode-result-btn {
    background: var(--geocode-btn-bg);
    border: 1px solid var(--geocode-btn-border);
    border-radius: 3px;
    color: var(--geocode-btn-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.81rem;
    padding: 2px 6px;
    text-align: left;
    white-space: nowrap;
}

.geocode-result-btn:hover {
    background: var(--geocode-btn-hover-bg);
    border-color: var(--geocode-btn-hover-border);
    color: var(--geocode-btn-hover-text);
}