/*
  © 2024 Eric IJdo. Alle rechten voorbehouden.
  Refactored CSS - Fixed Selectors & Original Colors
*/

:root {
    --primary-color: #005f73;
    --text-color: #2b2d42;
    --white: #ffffff;
    --border-color: #aaa;
    
    /* Original Tab Colors */
    --color-dispatch: #5ce1e6;
    --color-ggb: #fee500;
    --color-methane: #80b9de; /* Was note */
    --color-ziekenhuizen: #FF3131; /* Was hospital */
    --color-stats: #ff914d;
    
    /* Status Colors */
    --status-green: #2ecc71;
    --status-orange: #f39c12;
    --status-red: #e74c3c;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f4f8;
    background-image: url('images/achtergrond ambulance dispatch system.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    padding-bottom: 50px;
}

/* --- Layout --- */

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid #ccc;
}

.top-bar {
    background-color: rgba(43, 45, 66, 0.95);
    color: var(--white);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.clock-box {
    background: rgba(255,255,255,0.2);
    padding: 5px 15px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 1.1rem;
    text-align: right;
    color: #fff;
}

/* --- Header & Nav --- */

header {
    background-color: #005eb8; /* Primary Blue */
    color: #ffffff;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: 60px;
}

.header-left { display: flex; align-items: center; gap: 15px; }
.header-left h1 { font-size: 1.4rem; font-weight: 600; margin: 0; }
.header-right { display: flex; align-items: center; gap: 10px; }

nav {
    display: flex;
    justify-content: center;
    padding: 15px 10px 0 10px;
    flex-wrap: wrap;
    gap: 5px;
    background: rgba(0,0,0,0.1);
}

.nav-btn {
    padding: 12px 25px;
    border: 1px solid rgba(0,0,0,0.2);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.2s;
    color: #000;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
    opacity: 0.8;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
    background-color: #ddd; /* Default fallback */
}

.nav-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.nav-btn.active {
    opacity: 1;
    transform: translateY(0);
    z-index: 10;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    border-bottom: 2px solid transparent;
}

.shortcut-hint {
    font-size: 0.7em;
    opacity: 0.5;
    margin-left: 5px;
    display: inline-block;
    vertical-align: text-top;
}

/* Specific Colors matching ID's */
.nav-btn[data-tab="dispatch"] { background-color: var(--color-dispatch); }
.nav-btn[data-tab="ggb"] { background-color: var(--color-ggb); }
.nav-btn[data-tab="methane"] { background-color: var(--color-methane); }
.nav-btn[data-tab="ziekenhuizen"] { background-color: var(--color-ziekenhuizen); color: white; text-shadow: none; }
.nav-btn[data-tab="stats"] { background-color: var(--color-stats); }
.nav-btn[data-tab="dashboard"] { background-color: #fff; } /* Dashboard white */
.nav-btn[data-tab="voertuigen"] { background-color: #ccc; }
.nav-btn[data-tab="scenarios"] { background-color: #ddd; }
.nav-btn[data-tab="logboek"] { background-color: #eee; }
.nav-btn[data-tab="instellingen"] { background-color: #ccc; }

/* Tab Content */
main { padding: 20px; padding-bottom: 60px; }

.tab-content {
    display: none;
    border-top: 5px solid #ccc;
    background: rgba(255,255,255,0.95);
    padding: 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

/* Dynamic Border Colors based on active tab */
body:has(.nav-btn[data-tab="dispatch"].active) .tab-content { border-top-color: var(--color-dispatch); }
body:has(.nav-btn[data-tab="ggb"].active) .tab-content { border-top-color: var(--color-ggb); }
body:has(.nav-btn[data-tab="methane"].active) .tab-content { border-top-color: var(--color-methane); }
body:has(.nav-btn[data-tab="ziekenhuizen"].active) .tab-content { border-top-color: var(--color-ziekenhuizen); }
body:has(.nav-btn[data-tab="stats"].active) .tab-content { border-top-color: var(--color-stats); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Tables --- */
.table-container { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: white;
    font-size: 0.95rem;
}

th, td {
    border: 1px solid var(--border-color);
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

th {
    background-color: #333;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Header colors matching sections */
#dispatch th { background-color: #008B8B; } /* Dark Cyan */
#ggb th { background-color: #B8860B; color: white; } /* Dark Goldenrod */
#ziekenhuizen th { background-color: #8B0000; } /* Dark Red */

tr:nth-child(even) { background-color: #f2f2f2; }
tr:hover { background-color: #e6f7ff; }

/* --- Inputs & Buttons --- */
input, select, textarea {
    padding: 6px 8px;
    border: 1px solid #999;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

td input[type="time"], td input[type="text"], td select, td input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid #eee;
}
td input:focus, td select:focus {
    outline: none;
    border-bottom: 2px solid var(--primary-color);
    background: #fff;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    text-decoration: none;
}

.btn-icon { padding: 4px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; }
.icon-btn { background: none; border: none; cursor: pointer; color: #777; font-size: 1.1rem; }
.icon-btn:hover { color: var(--primary-color); }
.icon-btn-light {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.icon-btn-light:hover { background: rgba(255,255,255,0.4); }

.btn-primary { background-color: var(--primary-color); color: white; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-success { background-color: var(--status-green); color: white; }
.btn-danger { background-color: var(--status-red); color: white; }
.btn-alert { background-color: var(--status-red); color: white; }

/* --- Status Indicators --- */
.status-badge, .status-cell {
    padding: 5px 10px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    display: block;
    width: 100%;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.status-beschikbaar, .st-beschikbaar { background-color: green; }
.status-onderweg, .st-onderweg { background-color: red; }
.status-ter-plaatse, .st-terplaatse { background-color: green; }
.st-ziekenhuis { background-color: #8e44ad; }

/* Active Time Field Animation */
@keyframes pulse-green {
    0% { background-color: rgba(46, 204, 113, 0.2); box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); }
    50% { background-color: rgba(46, 204, 113, 0.6); box-shadow: 0 0 15px rgba(46, 204, 113, 0.8); }
    100% { background-color: rgba(46, 204, 113, 0.2); box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); }
}

.time-active {
    border: 2px solid #1e8449 !important;
    animation: pulse-green 1.5s infinite ease-in-out;
    font-weight: bold;
    color: #145a32 !important;
    background-color: #a9dfbf !important;
}

/* --- Cards & Grid --- */
.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #ddd;
    margin-bottom: 20px;
}
.dashboard-grid, .stats-grid, .methane-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.alert-border { border-left: 5px solid var(--status-red); }
.big-number { font-size: 3rem; font-weight: bold; }

.form-row { display: flex; gap: 10px; align-items: center; }
.form-group { margin-bottom: 10px; }
.full-width { width: 100%; }

/* --- Stats Specific --- */
.benchmark-list { list-style: none; padding: 0; }
.benchmark-list li {
    padding: 10px 0; border-bottom: 1px solid #eee;
    display: flex; justify-content: space-between;
}
.benchmark-list li span { font-weight: bold; color: var(--primary-color); }

.capacity-row { margin-bottom: 10px; }
.capacity-label { font-size: 0.85rem; display: flex; justify-content: space-between; margin-bottom: 2px; }
.capacity-bar-bg { background: #eee; height: 10px; border-radius: 5px; overflow: hidden; }
.capacity-bar-fill { height: 100%; background: var(--primary-color); width: 0%; transition: width 0.5s ease; }
.cap-warning { background: var(--status-orange); }
.cap-danger { background: var(--status-red); }

/* --- Modals --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); display: none;
    justify-content: center; align-items: center; z-index: 1000;
}
.modal-content {
    background: white; width: 400px; max-height: 80vh;
    border-radius: 8px; display: flex; flex-direction: column;
    padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-header { display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.modal-body { overflow-y: auto; flex: 1; }
.vehicle-item { padding: 8px; border-bottom: 1px solid #eee; cursor: pointer; }
.vehicle-item:hover { background: #f0f8ff; }

/* --- Footer --- */
.app-footer {
    background-color: rgba(10, 14, 24, 0.97);
    border-top: 2px solid #c0392b;
    padding: 6px 20px 5px 20px;
    text-align: center;
    font-size: 0.75rem;
    color: #7f8c8d;
    position: fixed; bottom: 0; width: 100%;
    z-index: 1000;
}
.app-footer p { margin: 1px 0; }
.app-footer .legal-text { font-size: 0.68rem; color: #4a4a5a; }
.idepot-badge {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #c0392b;
    border-radius: 2px;
    background: #1a0400;
    color: #e74c3c;
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* --- Toast --- */
#toast-container { position: fixed; bottom: 60px; right: 20px; z-index: 2000; color: #f1c40f; font-weight: bold; text-shadow: 0 1px 2px black; }

/* Triage Badges */
.badge { padding: 4px 8px; border-radius: 4px; color: white; font-weight: bold; margin-right: 5px; }
.t1 { background-color: var(--status-red); }
.t2 { background-color: var(--status-orange); color: #333; }
.t3 { background-color: var(--status-green); }
.t4 { background-color: #1a1a1a; }

/* Kaart tab */
.nav-btn[data-tab="kaart"] { background-color: #a8d8ea; }
body:has(.nav-btn[data-tab="kaart"].active) .tab-content { border-top-color: #a8d8ea; }

/* Notificatie popup systeem */
#notification-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
}

.notification {
    padding: 12px 18px;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInRight 0.3s ease-out;
    cursor: pointer;
    position: relative;
}

.notification .notif-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    cursor: pointer;
}
.notification .notif-close:hover { color: #fff; }

.notification-danger { background-color: #c0392b; border-left: 5px solid #922b21; }
.notification-warning { background-color: #e67e22; border-left: 5px solid #d35400; }
.notification-info { background-color: #2980b9; border-left: 5px solid #1a5276; }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Ride Badge */
.ride-badge {
    background-color: #34495e;
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
}

/* Completed / Afgerond status */
.st-afgerond {
    background-color: #95a5a6;
}

/* PDF Screenshot Mode - force solid backgrounds, full opacity */
.pdf-screenshot-mode .tab-content {
    background: #ffffff !important;
    opacity: 1 !important;
}
.pdf-screenshot-mode .tab-content * {
    opacity: 1 !important;
}
.pdf-screenshot-mode .card {
    background: #ffffff !important;
    border: 1px solid #ccc !important;
}
.pdf-screenshot-mode table {
    background: #ffffff !important;
}
.pdf-screenshot-mode tr {
    opacity: 1 !important;
}
.pdf-screenshot-mode th {
    color: #ffffff !important;
}
.pdf-screenshot-mode input,
.pdf-screenshot-mode select,
.pdf-screenshot-mode textarea {
    background: #f8f8f8 !important;
    border: 1px solid #999 !important;
    color: #000 !important;
    opacity: 1 !important;
}
.pdf-screenshot-mode .modal-overlay {
    display: none !important;
}

/* --- TRIAGE BADGES --- */
.triage-badge-ets {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    color: white;
    min-width: 32px;
    text-align: center;
}
.triage-t1 { background: #e74c3c; }
.triage-t2 { background: #f1c40f; color: #333; }
.triage-t3 { background: #2ecc71; }
.triage-t0 { background: #1a1a1a; }

/* --- VICTIM LINK BUTTON --- */
.btn-victim-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px dashed #aaa;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    color: #666;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
}
.btn-victim-pick:hover { background: #f0f8ff; border-color: #3498db; color: #3498db; }
.btn-victim-pick.has-victim { border-style: solid; border-color: #27ae60; color: #1a7a45; background: #eafaf1; }
.btn-victim-pick.has-victim:hover { background: #d5f5e3; }
.victim-ets-nr { font-weight: bold; font-size: 11px; }
.victim-letsel-short { font-size: 10px; color: #555; }

/* --- VICTIM PICKER MODAL --- */
.victim-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #eee);
    cursor: default;
}
.victim-picker-item:hover { background: #f7f9fc; }
.victim-picker-item.victim-taken { opacity: 0.5; }
.victim-picker-left { display: flex; align-items: center; gap: 6px; min-width: 90px; }
.victim-picker-middle { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.victim-letsel-full { font-size: 13px; font-weight: 500; }
.victim-meta { font-size: 11px; color: #888; }
.victim-picker-right { min-width: 60px; text-align: right; }
.victim-bezet-badge { font-size: 11px; color: #e67e22; background: #fef9e7; border: 1px solid #f0d080; border-radius: 3px; padding: 2px 6px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* --- INCIDENT VICTIM PLACER --- */
.iv-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color, #eee);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
}
.iv-item:hover { background: #f7f9fc; }
.iv-item.iv-selected { background: #f0e8fa; border-left: 3px solid #8e44ad; }

/* --- VICTIM CARD --- */
.victim-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.victim-card-section h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    border-bottom: 1px solid var(--border-color, #eee);
    padding-bottom: 4px;
}
.victim-card-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.victim-card-table td { padding: 3px 4px; vertical-align: top; }
.victim-card-table td:first-child { color: #777; white-space: nowrap; width: 110px; }