/* Skylog Gen4 - Dark theme matching G3 */

* {
    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: #000000;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    height: 100%;
    line-height: 1.4;
}

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

/* Navigation */
.navbar {
    background: #101020;
    border-bottom: 1px solid #0000FF;
    display: flex;
    align-items: center;
    padding: 3px 8px;
    gap: 8px;
}

.nav-brand {
    color: #D000F0;
    font-size: 1.125rem;
    font-weight: bold;
    margin-right: 10px;
}

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

.nav-links a {
    background: #404040;
    border: 1px solid #707070;
    border-radius: 3px;
    color: #D0D0D0;
    font-size: 0.94rem;
    padding: 2px 6px;
    text-decoration: none;
}

.nav-links a:hover {
    background: #505050;
    color: #FFFFFF;
}

.nav-links a.active {
    border-color: #00FF00;
    color: #00FF00;
}

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

.nav-user span {
    color: #00FFFF;
    font-style: italic;
}

.nav-user a {
    color: #D0D0D0;
    text-decoration: none;
}

.nav-user a:hover {
    color: #FF0000;
}

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

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

/* Page title */
h1 {
    color: #D000F0;
    font-size: 1.25rem;
    margin-bottom: 5px;
    border-bottom: 1px solid #0000FF;
    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: #202000;
    border: 1px solid #C0C000;
}

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

.section-green, .card-green {
    background-color: #003000;
    border: 1px solid #00C000;
}

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

.section-blue, .card-blue {
    background-color: #000020;
    border: 1px solid #0000C0;
}

.section-blue .section-title,
.card-blue h2 {
    border-bottom: 1px solid #5050FF;
    color: #7070FF;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.section-teal, .card-teal {
    background-color: #002020;
    border: 1px solid #00C0C0;
}

.section-teal .section-title,
.card-teal h2 {
    border-bottom: 1px solid #50FFFF;
    color: #70FFFF;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.section-red, .card-red {
    background-color: #200000;
    border: 1px solid #C00000;
}

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

/* Legacy card class - now dark */
.card {
    background: #101010;
    border: 1px solid #404040;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 8px;
}

.card h2 {
    color: #00FF00;
    border-bottom: 1px solid #00FF00;
    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: #404040;
    border-bottom: 1px solid #F0880A;
    color: #FFFF00;
    font-weight: bold;
    padding: 3px 5px;
    text-align: left;
}

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

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

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

.data-table tbody tr:hover td {
    background: #404040;
}

.data-table a {
    color: #A0A0FF;
}

.empty-message {
    text-align: center;
    color: #808080;
    padding: 10px !important;
    background: #101010 !important;
}

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

/* Status colors - bright for dark bg */
.status-is { color: #00FF00; }
.status-au { color: #FF8000; }
.status-res { color: #FFFF00; }
.status-ats { color: #FF00FF; }
.status-atd { color: #00FFFF; }
.status-ret { color: #8080FF; }
.status-tr { color: #FF80FF; }
.status-oos { color: #FF0000; }
.status-co { color: #808080; }
.status-ci { color: #00FF00; }

/* Priority colors */
.priority-1, .priority-2 { color: #FF0000; font-weight: bold; }
.priority-3, .priority-4 { color: #FF8000; }
.priority-5 { color: #FFFF00; }
.priority-6, .priority-7 { color: #00FFFF; }
.priority-8, .priority-9 { color: #FFFFFF; }

/* Buttons - gray with green active */
.btn,
a.btn:link,
a.btn:visited {
    background: #404040;
    border: 1px solid #707070;
    border-radius: 3px;
    box-sizing: border-box;
    color: #D0D0D0;
    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: #505050;
    color: #FFFFFF;
}

.btn:active,
a.btn:active {
    background: #608060;
}

.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
    border-color: #00A000;
    color: #00FF00;
}

.btn-primary:hover,
a.btn-primary:hover {
    background: #306030;
}

.btn-danger,
a.btn-danger:link,
a.btn-danger:visited {
    border-color: #993333;
    color: #E05555;
}

.btn-danger:hover,
a.btn-danger:hover {
    background: #603030;
}

.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: #FFFF00;
    font-size: 0.94rem;
    margin-bottom: 2px;
}

.form-group input,
.form-group textarea,
.form-group select {
    background: #303030;
    border: 1px solid #707070;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 0.94rem;
    padding: 3px 5px;
    width: 100%;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #00FFFF;
    outline: none;
}

.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
    background: #202020;
    border-color: #404040;
    color: #808080;
}

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

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

.form-control {
    background: #303030;
    border: 1px solid #707070;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 0.94rem;
    padding: 3px 5px;
}

.form-help {
    color: #808080;
    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: #400000;
    border: 1px solid #FF0000;
    color: #FF8080;
}

.alert-warning {
    background: #403000;
    border: 1px solid #FFA500;
    color: #FFD080;
}

.alert-success {
    background: #004000;
    border: 1px solid #00FF00;
    color: #80FF80;
}

.alert-info {
    background: #000040;
    border: 1px solid #0000FF;
    color: #8080FF;
}

/* 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: #000000;
    border: 2px solid #00FF00;
    color: #00FF00;
}

.response.error {
    background: #400000;
    border: 2px solid #FF0000;
    color: #FF8080;
}

/* Entity lock banner */
.lock-banner {
    background: #402000;
    border: 1px solid #FF8000;
    color: #FFB060;
    padding: 5px 10px;
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

/* SSE connection lost banner */
.connection-banner {
    background: #402000;
    border-bottom: 2px solid #FF8000;
    color: #FFB060;
    font-size: 0.875rem;
    font-weight: bold;
    padding: 4px 10px;
    text-align: center;
}

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

.login-container h1 {
    border: none;
    color: #00FFFF;
    font-size: 1.75rem;
    margin-bottom: 20px;
}

.login-form {
    background: #101010;
    border: 1px solid #404040;
    border-radius: 5px;
    padding: 15px;
}

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

.command-form input {
    flex: 1;
    background: #303030;
    border: 1px solid #707070;
    border-radius: 3px;
    color: #FFFFFF;
    font-family: monospace;
    font-size: 1rem;
    padding: 4px 8px;
}

.command-form input:focus {
    border-color: #00FFFF;
    outline: none;
}

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

.command-result.success {
    background: #003000;
    border: 1px solid #00FF00;
    color: #00FF00;
}

.command-result.error {
    background: #300000;
    border: 1px solid #FF0000;
    color: #FF0000;
}

/* Global command bar (below navbar) */
.global-command-bar {
    background: #101020;
    border-bottom: 1px solid #404040;
    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: #FFFF00;
    float: left;
    width: 120px;
}

.command-ref dd {
    color: #D0D0D0;
    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: #808080;
    display: block;
    font-size: 0.81rem;
    text-transform: uppercase;
}

.detail-item span,
.detail-item p {
    color: #FFFFFF;
    font-family: monospace;
    font-size: 1rem;
}

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

/* Badge */
.badge {
    background: #404040;
    border-radius: 3px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 0.81rem;
    padding: 1px 4px;
}

.badge-success {
    background: #006000;
    color: #00FF00;
}

.badge-warning {
    background: #600000;
    color: #FF0000;
}

.badge-secondary {
    background: #404040;
    color: #808080;
}

.badge-hidden {
    display: none;
}

.badge-beta {
    background: #604000;
    color: #FFA000;
    font-size: 0.69rem;
    vertical-align: super;
}

/* Messages */
.unread {
    background: #303000 !important;
}

.status-unread {
    color: #FFFF00;
    font-weight: bold;
}

.status-read {
    color: #00FF00;
}

.status-sent {
    color: #70FFFF;
}

.status-sent-ack {
    color: #00FF00;
}

.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: #002020;
    border: 1px solid #00C0C0;
    border-radius: 4px;
    padding: 8px;
    color: #D0D0D0;
    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: #70FFFF;
    font-weight: bold;
}

.message-popup .popup-time {
    color: #808080;
    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: #303030;
    border: 1px solid #707070;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 0.81rem;
    padding: 2px 4px;
}

.message-popup .popup-reply-input:focus {
    border-color: #00FFFF;
    outline: none;
}

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

.checkbox-label {
    color: #D0D0D0;
    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: #50FF50;
    font-size: 0.875rem;
    font-weight: bold;
    margin: 8px 0 4px;
    border-bottom: 1px solid #006000;
    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: #808080;
    font-size: 0.69rem;
}

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

.cmd-detail summary code {
    color: #FFFF00;
}

.cmd-detail summary span {
    color: #D0D0D0;
    margin-left: 8px;
}

.cmd-detail-body {
    margin-left: 14px;
    padding: 4px 8px;
    border-left: 2px solid #006000;
    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: #808080;
    white-space: nowrap;
    padding-right: 10px;
}

.cmd-detail-table td:last-child {
    color: #D0D0D0;
}

.cmd-detail-table code {
    color: #FFFF00;
}

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

.admin-menu .card p {
    color: #808080;
    font-size: 0.875rem;
    margin-bottom: 5px;
}

/* Assigned units display */
.assigned-unit {
    background: #003030;
    border: 1px solid #006060;
    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: #00D0D0 !important;
    color: #00D0D0;
}

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

.map-legend {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #404040;
    border-radius: 5px;
    bottom: 20px;
    color: #FFFFFF;
    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 #000;
}

.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: #808080;
    text-align: right;
    padding-right: 8px;
}

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

.edit-fields input[type="text"]:focus,
.edit-fields textarea:focus {
    border-color: #00FFFF;
    outline: none;
}

.edit-fields input[type="text"]:disabled {
    background: #202020;
    border-color: #404040;
    color: #808080;
}

.view-field {
    color: #D0D0D0;
}

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

.assigned-unit-label {
    color: #00FFFF;
    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: #FFFF00 !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: #808080;
}

.log-entry-section textarea {
    background: #303030;
    border: 1px solid #707070;
    border-radius: 3px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.94rem;
    padding: 2px 4px;
    display: block;
    margin-top: 2px;
}

.log-entry-section textarea:focus {
    border-color: #00FFFF;
    outline: none;
}

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

.rp-autocomplete-item {
    padding: 4px 8px;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 0.94rem;
}

.rp-autocomplete-item:hover,
.rp-autocomplete-item.selected {
    background: #404060;
    color: #00FFFF;
}

.rp-autocomplete-location {
    color: #808080;
    font-size: 0.81rem;
}

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

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

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