:root {
    --background: #071a24;
    --surface: #ffffff;
    --surface-muted: #f2f6f8;
    --surface-dark: #0d2b3a;
    --border: #d9e3e8;
    --text: #172630;
    --text-muted: #667984;
    --primary: #0d607b;
    --primary-dark: #093f52;
    --accent: #1b8fb4;
    --success: #1d9b5f;
    --warning: #df9b19;
    --danger: #d94f4f;
    --shadow: 0 4px 16px rgb(2 21 31 / 16%);
}

/* Voorbereide loginweergave; authenticatie wordt later geactiveerd. */
.login-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 20% 15%, rgb(29 126 158 / 28%), transparent 38%),
        linear-gradient(145deg, #052633, #0b4558 58%, #08708a);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 20px;
}

.login-card {
    width: min(100%, 410px);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgb(0 15 22 / 38%);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 26px 19px;
    border-bottom: 1px solid var(--border);
}

.login-brand h1 { margin: 2px 0; color: var(--primary-dark); font-size: 1.45rem; }
.login-brand p { margin: 0; color: var(--text-muted); font-size: .8rem; }
.login-preview-note { margin: 18px 26px 0; padding: 9px 11px; border-radius: 7px; background: #fff3cd; color: #674d00; font-size: .76rem; }
.login-form { display: grid; gap: 15px; padding: 20px 26px 25px; }
.login-form label { display: grid; gap: 6px; color: var(--primary-dark); font-size: .78rem; font-weight: 750; }
.login-form input { min-width: 0; padding: 11px 12px; border: 1px solid #b8cbd3; border-radius: 7px; background: #f5f8fa; color: var(--text); font: inherit; }
.login-submit { padding: 11px 14px; border: 0; border-radius: 7px; background: var(--primary); color: #fff; font: inherit; font-weight: 800; }
.login-submit:disabled { cursor: not-allowed; opacity: .58; }
.login-footer { display: flex; justify-content: space-between; gap: 12px; padding: 13px 26px; border-top: 1px solid var(--border); background: #f4f8fa; color: var(--text-muted); font-size: .68rem; }
.login-footer a { color: var(--primary); font-weight: 750; text-decoration: none; }

@media (max-width: 480px) {
    .login-shell { padding: 12px; }
    .login-card { border-radius: 12px; }
    .login-brand, .login-form { padding-right: 19px; padding-left: 19px; }
    .login-preview-note { margin-right: 19px; margin-left: 19px; }
    .login-footer { align-items: flex-start; flex-direction: column; padding-right: 19px; padding-left: 19px; }
}

/* Voorbereide persoonlijke accountpagina. */
.account-body { min-height: 100vh; }
.account-shell { width: min(920px, calc(100% - 28px)); margin: 0 auto; padding: 22px 0 40px; }
.account-header { margin-bottom: 14px; border-radius: 12px; }
.account-preview-note { margin: 0 0 14px; padding: 10px 13px; border: 1px solid #e8c75d; border-radius: 8px; background: #fff3cd; color: #674d00; font-size: .78rem; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-panel { margin: 0; padding: 20px; }
.account-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.account-section-heading h2, .account-session-panel h2 { margin: 2px 0 0; color: var(--primary-dark); font-size: 1.05rem; }
.account-role-badge { padding: 5px 8px; border-radius: 999px; background: #e4f2f6; color: var(--primary-dark); font-size: .67rem; font-weight: 800; }
.account-details { display: grid; gap: 0; margin: 0; }
.account-details div { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.account-details dt { color: var(--text-muted); font-size: .73rem; }
.account-details dd { margin: 0; color: var(--primary-dark); font-size: .78rem; font-weight: 750; overflow-wrap: anywhere; }
.account-password-form { display: grid; gap: 12px; }
.account-password-form label { display: grid; gap: 5px; color: var(--primary-dark); font-size: .73rem; font-weight: 750; }
.account-password-form input { min-width: 0; padding: 9px 10px; border: 1px solid #b8cbd3; border-radius: 7px; background: #f5f8fa; }
.account-password-form button { justify-self: start; }
.account-session-panel { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.account-session-panel p { margin: 5px 0 0; color: var(--text-muted); font-size: .76rem; }

@media (max-width: 680px) {
    .account-shell { width: min(100% - 18px, 920px); padding-top: 10px; }
    .account-grid { grid-template-columns: 1fr; }
    .account-session-panel { grid-column: auto; align-items: flex-start; flex-direction: column; }
    .account-details div { grid-template-columns: 120px minmax(0,1fr); }
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    background: var(--background);
    color: var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

.panel-action-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-logbook-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.dashboard-logbook-form input,
.dashboard-logbook-form textarea {
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    resize: none;
}

.dashboard-logbook-actions {
    display: grid;
    align-items: center;
    gap: 3px;
}

.dashboard-logbook-actions button {
    min-height: 38px;
    padding: 7px;
    border: 0;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}

.dashboard-logbook-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

#dashboard-logbook-status {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.6rem;
    line-height: 1.1;
    text-align: center;
}

.dashboard-logbook-day-details {
    margin: -4px 0 6px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.dashboard-logbook-links { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 3px; }
.dashboard-logbook-links .panel-action-link { margin-top: 5px; font-size: .68rem; }
.panel-counter.is-open { background: var(--success); color: #fff; }
.logbook-header-links { display: flex; gap: 8px; }
.logbook-day-state { max-width: 700px; margin: 7vh auto; text-align: center; }
.logbook-open-form { display: grid; gap: 12px; max-width: 520px; margin: 20px auto 0; text-align: left; }
.logbook-open-form input, .logbook-open-form textarea { width: 100%; margin-top: 6px; padding: 9px; border: 1px solid var(--border); border-radius: 7px; }
.logbook-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 10px; background: #e7f5ec; box-shadow: var(--shadow); }
.logbook-statusbar > div { display: flex; align-items: center; gap: 10px; }
.logbook-statusbar strong { color: var(--success); }
.logbook-statusbar span { color: var(--text-muted); font-size: .8rem; }
.logbook-button--danger { background: var(--danger); }
.logbook-dialog { width: min(520px, calc(100% - 30px)); padding: 20px; border: 0; border-radius: 10px; box-shadow: var(--shadow); }
.logbook-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.logbook-dialog textarea { width: 100%; margin: 7px 0 14px; padding: 9px; border: 1px solid var(--border); border-radius: 7px; }
.logbook-day-list { display: grid; gap: 12px; }
.logbook-day-card { padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.logbook-day-card > div { display: flex; justify-content: space-between; }
.logbook-day-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .8rem; }
.logbook-day-card dt { color: var(--text-muted); }
.logbook-day-card dd { margin: 0; }
.logbook-day-badge { padding: 3px 7px; border-radius: 12px; background: var(--surface-dark); color: #fff; font-size: .72rem; }
.logbook-pagination, .logbook-archive-navigation { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; }
.logbook-archive-navigation a { color: #fff; }

.incident-create-tile { display: flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; margin: 7px auto 0; padding: 6px 10px; border-radius: 7px; background: var(--primary); color: #fff; font-size: .7rem; text-decoration: none; }
.incident-create-tile span { font-size: .95rem; line-height: 1; }
.patrol-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.patrol-column { min-width: 0; padding: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.patrol-column header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.patrol-column header > div { display: grid; min-width: 0; gap: 1px; }
.patrol-column header strong { min-width: 0; color: var(--primary-dark); font-size: .59rem; overflow-wrap: anywhere; }
.patrol-column-summary { color: var(--text-muted); font-size: .49rem; }
.patrol-add,.patrol-end { display: grid; flex: 0 0 auto; width: 18px; height: 18px; padding: 0; place-items: center; border: 0; border-radius: 50%; cursor: pointer; line-height: 1; }
.patrol-add { background: var(--primary); color: #fff; font-size: .85rem; }
.patrol-unit-list { display: grid; gap: 3px; padding-top: 4px; }
.patrol-unit-list > small { color: var(--text-muted); font-size: .54rem; }
.patrol-unit { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; padding: 4px; border-radius: 5px; background: #fff; }
.patrol-unit span { min-width: 0; color: var(--primary-dark); font-size: .65rem; font-weight: 800; overflow-wrap: anywhere; }
.patrol-duration { display: block; margin-top: 1px; color: var(--text-muted); font-size: .53rem; font-weight: 650; white-space: nowrap; }
.patrol-incident-reference{display:block;margin-top:2px;color:#8a3d00;font-size:.53rem;font-weight:800;overflow-wrap:normal;word-break:normal}
.patrol-end { background: rgb(127 29 29 / 10%); color: #7f1d1d; font-size: .85rem; }
.patrol-end:hover { background: #7f1d1d; color: #fff; }
.patrol-add:disabled,.patrol-end:disabled { cursor: wait; opacity: .45; }
.incident-content { max-width: 1100px; }
.incident-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.incident-form label { color: var(--text-muted); font-size: .8rem; }
.incident-form input,.incident-form select,.incident-form textarea { width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.incident-wide { grid-column: 1 / -1; }
.incident-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.incident-summary article { min-width: 0; padding: 12px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); }
.incident-summary span { display: block; color: var(--text-muted); font-size: .7rem; }
.incident-summary strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.incident-tabs { display: flex; gap: 5px; overflow-x: auto; }
.incident-tabs button { padding: 9px 14px; border: 0; border-radius: 8px 8px 0 0; background: rgb(255 255 255 / 70%); color: var(--primary-dark); cursor: pointer; font-weight: 700; white-space: nowrap; }
.incident-tabs button.is-active { background: #fff; }
.incident-missing { margin-top: 8px; padding-top: 14px; border-top: 2px solid var(--border); }
.incident-form-help { margin: -3px 0 12px; color: var(--text-muted); font-size: .78rem; }
.incident-missing-heading { margin: 8px 0 0; padding: 8px 0 4px; border-bottom: 1px solid var(--border); color: var(--primary-dark); font-size: 1rem; }
#missing-fields-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.incident-table tbody tr { cursor: pointer; }
.incident-priority { border-left: 5px solid var(--priority-color); font-weight: 700; }
@media(max-width:900px){.incident-summary{grid-template-columns:repeat(3,minmax(0,1fr));}.incident-form{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.incident-summary,.incident-form{grid-template-columns:1fr;}.incident-wide{grid-column:auto;}}

@media(max-width:900px){#missing-fields-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){#missing-fields-grid{grid-template-columns:1fr;}}

.incident-map-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.incident-map-actions span { color: var(--text-muted); font-size: .76rem; }
.incident-location-map { width: 100%; height: 380px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.incident-attachment-card { display: flex; max-width: 430px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); color: var(--primary-dark); text-decoration: none; }
.incident-attachment-card > span:first-child { font-size: 2rem; }
.incident-attachment-card strong,.incident-attachment-card small { display: block; }
.incident-attachment-card small { margin-top: 3px; color: var(--text-muted); }
.incident-photo-form{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;padding:1rem;border:1px dashed var(--primary);border-radius:10px;background:var(--surface-muted)}
.incident-mobile-photo-action{display:none}
.incident-photo-picker{display:flex;flex:1 1 280px;align-items:center;gap:.75rem;cursor:pointer}.incident-photo-picker>span:first-child{font-size:2rem}.incident-photo-picker strong,.incident-photo-picker small{display:block}.incident-photo-picker small{margin-top:.2rem;color:var(--text-muted)}.incident-photo-picker input{width:100%;margin-top:.5rem}
.incident-attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}.incident-photo-card{display:grid;overflow:hidden;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--primary-dark);text-decoration:none}.incident-photo-card img{width:100%;height:150px;object-fit:cover;background:var(--surface-muted)}.incident-photo-card>span{min-width:0;padding:.65rem}.incident-photo-card strong,.incident-photo-card small{display:block;overflow-wrap:anywhere}.incident-photo-card small{margin-top:.25rem;color:var(--text-muted);font-size:.68rem}
@media(max-width:600px){.incident-mobile-photo-action{display:flex;width:100%;align-items:center;gap:.7rem;padding:.8rem .9rem;border:0;border-radius:10px;background:linear-gradient(135deg,#087087,#0a94ae);box-shadow:0 4px 12px rgb(3 42 54 / 20%);color:#fff;text-align:left}.incident-mobile-photo-action>span:first-child{font-size:1.6rem}.incident-mobile-photo-action>span:nth-child(2){display:grid;flex:1;gap:.15rem}.incident-mobile-photo-action strong{font-size:.9rem}.incident-mobile-photo-action small{color:rgb(255 255 255 / 75%);font-size:.65rem}.incident-mobile-photo-action>span:last-child{font-size:1.5rem}.incident-photo-form{align-items:stretch;flex-direction:column}.incident-photo-form .logbook-button{width:100%;min-height:44px}.incident-photo-picker{width:100%;flex-basis:auto}.incident-attachment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.incident-photo-card img{height:120px}}
.missing-print-button { background: transparent; cursor: pointer; }
.missing-document { max-width: 1000px; margin: 22px auto; padding: 24px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.missing-document-header { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding-bottom: 18px; border-bottom: 2px solid var(--primary); }
.missing-document-header span { display: block; color: var(--text-muted); font-size: .75rem; }
.missing-document-content { display: grid; gap: 18px; margin-top: 18px; }
.missing-document-content section { break-inside: avoid; }
.missing-document-content h2 { margin: 0 0 10px; color: var(--primary-dark); }
.missing-document-content dl { display: grid; grid-template-columns: minmax(150px,1fr) 2fr; margin: 0; border-top: 1px solid var(--border); }
.missing-document-content dt,.missing-document-content dd { margin: 0; padding: 8px; border-bottom: 1px solid var(--border); }
.missing-document-content dt { color: var(--text-muted); }
@media(max-width:600px){.missing-document-header{grid-template-columns:1fr}.missing-document{margin:0;padding:16px;border-radius:0}.missing-document-content dl{grid-template-columns:1fr}.missing-document-content dd{padding-top:0}}
@media print{.missing-document-navigation{display:none}.missing-document-body{background:#fff}.missing-document{max-width:none;margin:0;padding:0;box-shadow:none}}

.logbook-content { max-width: 1200px; }
.logbook-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.logbook-form label, .logbook-filters label { color: var(--text-muted); font-size: 0.8rem; }
.logbook-form input, .logbook-form select, .logbook-form textarea,
.logbook-filters input, .logbook-filters select { width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.logbook-field-wide { grid-column: 1 / -1; }
.logbook-form-actions { display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; }
.logbook-button, .logbook-action { padding: 8px 12px; border: 0; border-radius: 7px; background: var(--primary); color: #fff; cursor: pointer; font-weight: 700; }
.logbook-button--secondary, .logbook-action { background: var(--surface-muted); color: var(--primary-dark); }
.logbook-filters { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.logbook-timeline { display: grid; gap: 10px; }
.logbook-entry { padding: 12px 14px; border-left: 5px solid var(--accent); border-radius: 8px; background: var(--surface-muted); }
.logbook-entry--warning { border-left-color: var(--warning); }
.logbook-entry--important { border-left-color: var(--success); }
.logbook-entry--critical { border-left-color: var(--danger); }
.logbook-entry-heading { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.logbook-entry-heading time, .logbook-entry-meta { color: var(--text-muted); font-size: 0.75rem; }
.logbook-entry p { margin: 8px 0; white-space: pre-wrap; }
.logbook-entry-icon { font-size: 1.1rem; text-align: center; }
.logbook-entry-actions { display: flex; gap: 7px; margin-top: 8px; }
.logbook-action { padding: 5px 8px; font-size: 0.72rem; }

@media (max-width: 850px) {
    .logbook-form, .logbook-filters { grid-template-columns: 1fr; }
    .logbook-field-wide, .logbook-form-actions { grid-column: auto; }
    .logbook-entry-heading { grid-template-columns: 28px minmax(0, 1fr); }
    .logbook-entry-heading time { grid-column: 2; }
}

.dashboard-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-link:hover {
    border-color: rgb(255 255 255 / 55%);
    background: rgb(255 255 255 / 16%);
    transform: translateY(-1px);
}

.dashboard-link--day-action {
    gap: 8px;
    min-width: 142px;
    padding: 5px 10px 5px 6px;
    border-color: rgb(252 165 165 / 72%);
    border-radius: 10px;
    background: linear-gradient(135deg, #9f2f2f, #c24141);
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}
.dashboard-link--day-action.is-open {
    border-color: rgb(110 231 183 / 62%);
    background: linear-gradient(135deg, #08745d, #0b9273);
}
.dashboard-link--day-action.is-reopen {
    border-color: rgb(252 165 165 / 72%);
    background: linear-gradient(135deg, #9f2f2f, #c24141);
}
.dashboard-link--day-action.is-loading { opacity: .75; }
.day-action-icon {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 8px;
    background: rgb(255 255 255 / 16%);
    font-size: 1rem;
    font-weight: 850;
}
.day-action-copy { display: grid; min-width: 0; line-height: 1.05; }
.day-action-copy small { color: rgb(255 255 255 / 72%); font-size: .52rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.day-action-copy strong { margin-top: 3px; color: #fff; font-size: .72rem; white-space: nowrap; }

.history-body { overflow: auto; background: var(--background); }
.history-shell { min-height: 100vh; }
.history-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--surface-dark); color: #fff; }
.history-header h1, .history-section-header h2, .history-content h2 { margin: 2px 0 12px; }
.history-content { display: grid; gap: 16px; max-width: 1500px; margin: 0 auto; padding: 20px; }
.history-statistics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.history-statistics--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.history-statistics article { padding: 16px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.history-statistics span { display: block; color: var(--text-muted); font-size: 0.8rem; }
.history-statistics strong { font-size: 1.8rem; }
.history-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 16px; }
.history-content label { display: block; color: var(--text-muted); font-size: 0.8rem; }
.history-content input { width: 100%; margin: 6px 0 12px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; }
.history-table-wrap { max-width: 100%; overflow-x: auto; }
.history-content table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.history-content th, .history-content td { padding: 9px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.history-content tbody tr { cursor: pointer; }
.history-content tbody tr:hover, .history-content tbody tr.is-active { background: #e7f5ec; }
.history-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; }
.history-section-header input { margin-bottom: 0; }
.history-details { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; }
.history-details dt { color: var(--text-muted); }
.history-details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.history-compact-list { margin: 6px 0 12px; padding-left: 18px; font-size: 0.8rem; }
.history-empty { color: var(--text-muted); }

@media (max-width: 850px) {
    .history-statistics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-grid { grid-template-columns: 1fr; }
    .history-section-header { align-items: stretch; flex-direction: column; }
}

@media (max-width: 1150px) {
    .history-statistics--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .history-statistics--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dashboard-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 31px;
    background:
        linear-gradient(
            135deg,
            rgb(8 35 48 / 96%),
            rgb(4 22 31 / 98%)
        );
}

.dashboard-header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 18px;
    border-bottom: 1px solid rgb(105 205 226 / 25%);
    background: linear-gradient(105deg, #051b26 0%, #0a3444 58%, #07556a 100%);
    box-shadow: 0 4px 18px rgb(0 0 0 / 20%);
    color: #ffffff;
}

.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-logo {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 2px solid rgb(255 255 255 / 78%);
    border-radius: 50%;
    background: linear-gradient(145deg, #25a3c2, #087087);
    box-shadow: 0 0 0 4px rgb(255 255 255 / 7%), 0 4px 12px rgb(0 0 0 / 28%);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.dashboard-logo--image {
    box-sizing: border-box;
    display: block;
    flex: 0 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #ffffff;
    object-fit: cover;
    object-position: center;
}

.dashboard-brand-kicker { display: block; margin-bottom: 2px; color: #77d2e5; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.dashboard-brand h1 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.2;
}

.dashboard-brand p {
    margin: 2px 0 0;
    color: rgb(255 255 255 / 68%);
    font-size: 0.78rem;
}

.header-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 0.86rem;
}

.mobile-dashboard-nav {
    display: none;
}

.header-divider {
    width: 1px;
    height: 24px;
    margin: 0 5px;
    background: rgb(255 255 255 / 20%);
}

.header-datetime { display: grid; min-width: 120px; padding: 5px 10px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 9px; background: rgb(0 0 0 / 14%); text-align: right; }
.header-operator-control { min-width: 0; }
.header-operator { display: flex; min-width: 0; height: 38px; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 9px; background: rgb(0 0 0 / 14%); }
.header-operator label { display: flex; align-items: center; gap: 4px; color: #a9dce7; font-size: .56rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.header-operator label span { color: #77d2e5; font-size: .72rem; }
.header-operator input { width: 104px; min-width: 0; padding: 4px 2px; border: 0; border-bottom: 1px solid rgb(255 255 255 / 24%); border-radius: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: .72rem; font-weight: 700; }
.header-operator input::placeholder { color: rgb(255 255 255 / 52%); }
.header-operator:focus-within { border-color: #8ed6e5; box-shadow: 0 0 0 2px rgb(142 214 229 / 16%); }
.header-operator input:focus { border-bottom-color: #8ed6e5; }
.header-operator > button { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #25a66a; color: #fff; cursor: pointer; font-size: .69rem; font-weight: 900; }
.header-operator-confirmed { display: grid; min-width: 155px; height: 38px; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 7px; padding: 4px 8px; border: 1px solid rgb(91 224 159 / 44%); border-radius: 9px; background: rgb(19 112 72 / 34%); color: #fff; cursor: pointer; text-align: left; }
.header-operator-confirmed[hidden], .header-operator[hidden] { display: none; }
.header-operator-confirmed span { grid-column: 1; color: #a9e8c9; font-size: .52rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.header-operator-confirmed strong { grid-column: 1; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.header-operator-confirmed em { grid-row: 1 / 3; grid-column: 2; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #25a66a; font-size: .66rem; font-style: normal; }
.header-flag { position: relative; display: flex; min-width: 150px; height: 38px; align-items: center; gap: 8px; padding: 4px 9px; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 9px; background: rgb(0 0 0 / 14%); cursor: pointer; }
.header-flag-symbol { position: relative; width: 27px; height: 25px; flex: 0 0 auto; border-left: 2px solid #c7d9df; }
.header-flag-symbol::after { position: absolute; top: 2px; left: 2px; width: 21px; height: 13px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 1px; background: transparent; content: ""; }
.header-flag[data-flag="guard"] .header-flag-symbol::after { background: linear-gradient(#dc2f39 0 50%, #ffd542 50%); }
.header-flag[data-flag="offshore"] .header-flag-symbol::after { background: #ef8b24; }
.header-flag[data-flag="dangerous_sea"] .header-flag-symbol::after { background: #f4d13f; }
.header-flag[data-flag="no_swimming"] .header-flag-symbol::after { background: #d72732; }
.header-flag[data-flag="marine_life"] .header-flag-symbol::after { background: #7b3e98; }
.header-flag[data-flag="none"] .header-flag-symbol::after { border-style: dashed; opacity: .38; }
.header-flag-copy { display: grid; min-width: 0; }
.header-flag-copy small { color: #a9dce7; font-size: .52rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.header-flag-copy strong { overflow: hidden; color: #fff; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.header-flag select { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.header-flag:focus-within { border-color: #8ed6e5; box-shadow: 0 0 0 2px rgb(142 214 229 / 16%); }
.dashboard-brand .header-flag { min-width: 42px; width: 42px; height: 44px; gap: 0; padding: 7px; border-color: rgb(255 255 255 / 22%); background: rgb(0 0 0 / 10%); }
.dashboard-brand .header-flag-symbol { width: 27px; height: 27px; }
.dashboard-brand .header-flag-copy { display: none; }
#dashboard-clock {
    font-size: 1.22rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}
#dashboard-date { color: #a9dce7; font-size: .61rem; font-weight: 650; text-transform: capitalize; }

.dashboard-grid {
    display: grid;
    min-height: 0;
    grid-template-columns:
        minmax(280px, 330px)
        minmax(380px, 1fr)
        minmax(290px, 350px);
    gap: 10px;
    padding: 10px;
}

.dashboard-sidebar {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.dashboard-panel {
    flex-shrink: 0;
    padding: 14px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dashboard-panel--scroll {
    min-height: 125px;
}

.dashboard-patrol-panel {
    box-sizing: border-box;
    overflow: hidden;
}

.dashboard-patrol-panel .patrol-columns {
    align-items: start;
}

.dashboard-patrol-panel .patrol-column {
    box-sizing: border-box;
    align-self: start;
    min-height: 0;
    overflow: hidden;
}

.dashboard-patrol-panel .patrol-unit-list {
    align-content: start;
    max-height: 245px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.knmi-warning-card {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow-wrap: anywhere;
}

.knmi-warning-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.knmi-warning-heading {
    min-width: 0;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.knmi-warning-badge {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgb(0 0 0 / 18%);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: normal;
    text-transform: uppercase;
}

.knmi-warning-title {
    margin: 0 0 5px;
    font-size: 0.95rem;
    font-weight: 800;
}

.knmi-warning-message {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

.knmi-warning-period {
    margin-top: 8px;
    font-size: 0.75rem;
    opacity: 0.9;
}

.knmi-warning-green {
    background: #237a3b;
    color: #fff;
}

.knmi-warning-yellow {
    border-color: #d4ad00;
    background: #ffd400;
    color: #151515;
}

.knmi-warning-orange {
    background: #e87500;
    color: #fff;
}

.knmi-warning-red {
    background: #bd2025;
    color: #fff;
}

.knmi-warning-gray {
    background: #555f69;
    color: #fff;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.panel-heading h2 {
    margin: 1px 0 0;
    color: var(--primary-dark);
    font-size: 1rem;
}

.wind-direction-arrow {
    display: inline-block;
    margin-right: 4px;
    color: var(--primary-dark);
    font-size: 1.35em;
    line-height: 1;
    transform: rotate(calc(var(--wind-direction, 0deg) + 180deg))
        scale(var(--wind-force-scale, 0.8));
    transform-origin: center;
    transition: transform 200ms ease;
}

.wind-direction-arrow[hidden] {
    display: none;
}

.panel-kicker {
    display: block;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.panel-icon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 8px;
    background: #e7f2f6;
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 800;
}

.panel-counter {
    display: grid;
    min-width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.metric-primary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.metric-value {
    color: var(--primary-dark);
    font-size: 2rem;
    font-weight: 750;
    line-height: 1;
}

.metric-unit {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.metric-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    border-radius: 7px;
    background: var(--surface-muted);
}

.metric-item strong {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.83rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-label {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.panel-note {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.weather-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.weather-summary strong {
    max-width: 120px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: right;
}

.weather-wind {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
    padding: 9px;
    border-radius: 8px;
    background: #e7f2f6;
}

.wind-arrow {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-size: 1.25rem;
    transition: transform 300ms ease;
}

.weather-wind strong {
    color: var(--primary-dark);
}

.tide-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tide-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px;
    border-radius: 8px;
    background: var(--surface-muted);
}

.tide-row > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tide-row strong {
    color: var(--primary-dark);
    font-size: 0.85rem;
}

.tide-type {
    font-size: 0.68rem;
    font-weight: 700;
}

.tide-type--high {
    color: var(--primary);
}

.tide-type--low {
    color: #82620e;
}

.tide-direction {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
}

.tide-direction strong {
    color: var(--primary-dark);
    font-size: 0.82rem;
}

.map-column {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.steenbank-journeys {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    border-top: 1px solid var(--border);
    background: #f4f8fa;
}

.steenbank-journeys-heading {
    display: flex;
    min-width: 155px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px;
    border-right: 1px solid var(--border);
    color: var(--primary-dark);
    font-size: .73rem;
}

.steenbank-journeys-heading > span { color: var(--primary); font-size: 1rem; }
.steenbank-journeys-heading small { color: var(--text-muted); font-size: .63rem; }
.steenbank-journeys-list { display: flex; min-width: 0; gap: 7px; padding: 7px; overflow-x: auto; scrollbar-width: thin; }
.steenbank-journey { display: grid; min-width: 185px; max-width: 230px; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; line-height: 1.2; }
.steenbank-journey--in-range { border-color: #4d9b72; background: #edf8f2; box-shadow: inset 3px 0 #238354; }
.steenbank-journey--test { border-color: #8295a3; background: #f2f5f7; box-shadow: inset 3px 0 #687986; }
.steenbank-journey time { color: var(--primary); font-size: .67rem; font-weight: 800; }
.steenbank-journey strong { grid-column: 1 / -1; overflow: hidden; color: var(--primary-dark); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.steenbank-journey span { overflow: hidden; color: var(--text-muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.steenbank-journey small { grid-row: 1; grid-column: 2; color: var(--text-muted); font-size: .62rem; }
.steenbank-journey-range { grid-column: 1 / -1; color: var(--text-muted); font-size: .61rem; font-style: normal; font-weight: 700; }
.steenbank-journey--in-range .steenbank-journey-range { color: #176a43; }
.steenbank-journey--test .steenbank-journey-range { color: #536672; }
.steenbank-journey .ges-advice-badge {
    grid-column: 1 / -1;
    padding: 4px 6px;
    border-radius: 5px;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
}
.steenbank-journey .ges-cat-iii { background: #238354; }
.steenbank-journey .ges-cat-ii { background: #f4cf44; color: #3e3300; }
.steenbank-journey .ges-cat-transition { background: #e98218; color: #2f1a00; }
.steenbank-journey .ges-cat-i { background: #bd2d34; }
.steenbank-journey .ges-no-data { background: #687986; }
.steenbank-journeys-empty { align-self: center; padding: 8px; color: var(--text-muted); font-size: .72rem; }

.map-toolbar {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.map-toolbar h2 {
    margin: 1px 0 0;
    color: var(--primary-dark);
    font-size: 1rem;
}

.map-ais-status-line {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.67rem;
}

.map-ais-status-line > span:not(.status-dot) {
    overflow-wrap: anywhere;
}

.map-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-stat {
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 0.76rem;
}

.map-stat strong {
    color: var(--primary-dark);
}

.toolbar-button {
    padding: 7px 10px;
    border: 1px solid #a9c1cc;
    border-radius: 7px;
    background: #ffffff;
    color: var(--primary-dark);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 650;
}

.toolbar-button:hover {
    border-color: var(--primary);
    background: #edf6f9;
}

.map-container {
    position: relative;
    min-height: 0;
}

#map {
    width: 100%;
    height: 100%;
    min-height: 380px;
    background: #bdd4dd;
}

.map-overlay {
    position: absolute;
    z-index: 700;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 7px;
    background: rgb(7 31 42 / 88%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
    color: #ffffff;
    font-size: 0.72rem;
    backdrop-filter: blur(5px);
}

.map-overlay--top-left {
    top: 10px;
    left: 52px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
}

.map-overlay--bottom-left {
    bottom: 20px;
    left: 10px;
    padding: 7px 9px;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.6;
}

.legend-vessel {
    display: inline-block;
    font-size: 0.9rem;
}

.legend-vessel--moving {
    color: #35c77c;
}

.legend-vessel--stopped {
    color: #f0b43c;
}

.legend-vessel--stale {
    color: #a9b4ba;
}

.activity-list {
    display: flex;
    max-height: 175px;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
}

.activity-item {
    min-width: 0;
    padding: 8px 9px;
    border-left: 3px solid var(--accent);
    border-radius: 5px;
    background: var(--surface-muted);
}

.activity-item--warning {
    border-left-color: var(--warning);
}

.activity-item--danger {
    border-left-color: var(--danger);
}

.activity-item--success {
    border-left-color: var(--success);
}

.activity-item--priority-low {
    border-left-color: #6b7280;
    background: #f3f4f6;
    --incident-priority-color: #6b7280;
}

.activity-item--priority-normal {
    border-left-color: #1687d9;
    background: #eef7fd;
    --incident-priority-color: #1687d9;
}

.activity-item--priority-high {
    border-left-color: #ea8a18;
    background: #fff7e8;
    --incident-priority-color: #b96300;
}

.activity-item--priority-urgent {
    border-left-color: #dc2626;
    background: #fff0f0;
    --incident-priority-color: #b91c1c;
}

.activity-item--priority-critical {
    border-left-color: #7f1d1d;
    background: #fbeaea;
    --incident-priority-color: #7f1d1d;
}

.activity-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.incident-priority-badge {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--incident-priority-color, var(--primary));
    font-size: 0.57rem;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.activity-item strong {
    min-width: 0;
    color: var(--primary-dark);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.activity-item-link {
    min-width: 0;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.activity-item-link:hover { text-decoration: underline; }

.activity-item time {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.62rem;
}

.activity-item p {
    max-width: 100%;
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.69rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
}

#notifications-list {
    gap: 4px;
}

#notifications-list .activity-item {
    padding: 5px 6px;
}

#notifications-list .activity-item-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 4px;
}

#notifications-list .activity-item-link,
#notifications-list .activity-item strong {
    font-size: 0.78rem;
    line-height: 1.2;
}

.incident-card-meta {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.incident-quick-close {
    display: grid;
    width: 18px;
    height: 18px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgb(127 29 29 / 10%);
    color: #7f1d1d;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
}

.incident-quick-close:hover { background: #7f1d1d; color: #fff; }
.incident-quick-close:disabled { cursor: wait; opacity: .45; }

#notifications-list .incident-priority-badge {
    padding: 1px 4px;
    font-size: 0.54rem;
}

#notifications-list .activity-item time {
    font-size: 0.55rem;
}

#notifications-list .activity-item p {
    margin-top: 2px;
    font-size: 0.62rem;
    line-height: 1.2;
}

.incident-card-details {
    display: grid;
    gap: 1px;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.67rem;
    line-height: 1.2;
}

.incident-card-details span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.incident-card-details b {
    display: inline-block;
    min-width: 42px;
    color: var(--primary-dark);
    font-weight: 750;
}

#logbook-list {
    display: grid;
    max-width: 100%;
    max-height: 215px;
    min-width: 0;
    gap: 5px;
    overflow-y: auto;
}

.dashboard-logbook-date {
    margin: 4px 0 0;
    color: var(--primary-dark);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-logbook-date:first-child { margin-top: 0; }

.dashboard-logbook-entry {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 5px 7px;
    border-left: 3px solid var(--accent);
    border-radius: 5px;
    background: var(--surface-muted);
}

.dashboard-logbook-entry--important { border-left-color: var(--success); }
.dashboard-logbook-entry--warning { border-left-color: var(--warning); }
.dashboard-logbook-entry--critical { border-left-color: var(--danger); }

.dashboard-logbook-icon {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    font-size: 0.65rem;
}

.dashboard-logbook-content { min-width: 0; }

.dashboard-logbook-content strong {
    display: block;
    color: var(--primary-dark);
    font-size: 0.73rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dashboard-logbook-entry time {
    color: var(--text-muted);
    font-size: 0.64rem;
    white-space: nowrap;
}

.empty-state {
    padding: 14px 8px;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: center;
}

.ais-status-panel {
    margin-bottom: 1px;
}

.status-details {
    display: grid;
    gap: 7px;
    margin: 0;
}

.status-details > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.status-details > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.status-details dt {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.status-details dd {
    margin: 0;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 8%);
}

.status-dot--online {
    background: var(--success);
}

.status-dot--warning {
    background: var(--warning);
}

.status-dot--offline {
    background: var(--danger);
}

.dashboard-footer {
    display: flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 11px;
    padding: 5px 12px;
    border-top: 1px solid rgb(255 255 255 / 12%);
    background: rgb(5 27 38 / 96%);
    color: rgb(255 255 255 / 70%);
    font-size: 0.7rem;
    position: fixed;
    z-index: 1200;
    right: 0;
    bottom: 0;
    left: 0;
}

.dashboard-footer strong { color: rgb(255 255 255 / 90%); }
.dashboard-footer > span:not(.status-dot)::before { content: "•"; margin-right: 11px; color: rgb(255 255 255 / 28%); }
.dashboard-footer .footer-divider { display: none; }

.footer-status {
    display: flex;
    align-items: center;
    gap: 7px;
}

#footer-date {
    text-align: right;
}

/* ==========================================================
   AIS-SCHEEPSMARKERS
   ========================================================== */

.ais-vessel-wrapper {
    position: relative;
    background: transparent;
    border: 0;
}

.ais-vessel-icon {
    --vessel-color: #526b78;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transition: width 300ms ease, height 300ms ease, transform 500ms linear;
}

.ais-vessel-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 55%));
}

.ais-vessel-icon--passenger { --vessel-color: #7b4bc6; }
.ais-vessel-icon--cargo { --vessel-color: #1687d9; }
.ais-vessel-icon--tanker { --vessel-color: #d86b23; }
.ais-vessel-icon--fishing { --vessel-color: #16866a; }
.ais-vessel-icon--tug { --vessel-color: #be3d54; }
.ais-vessel-icon--sailing { --vessel-color: #19a7a0; }
.ais-vessel-icon--pleasure { --vessel-color: #55a8e2; }
.ais-vessel-icon--highspeed { --vessel-color: #d13da2; }
.ais-vessel-icon--other { --vessel-color: #596f7b; }
.ais-vessel-icon--unknown { --vessel-color: #75858d; }
.ais-vessel-icon .vessel-body { fill: var(--vessel-color); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.ais-vessel-icon .vessel-detail { fill: none; stroke: rgb(255 255 255 / 85%); stroke-width: 1.4; }
.ais-vessel-icon .vessel-detail--fill { fill: rgb(255 255 255 / 28%); }
.ais-vessel-icon .vessel-direction-arrow { fill: #fff; stroke: #12313d; stroke-width: .7; }
.ais-vessel-icon--stopped .vessel-body { stroke-width: 2.5; }
.ais-vessel-icon--stale { opacity: .58; }
.ais-vessel-icon--unrecognized { opacity: .38; }
.legend-vessel--cargo { color: #1687d9; }
.legend-vessel--tanker { color: #d86b23; }
.legend-vessel--passenger { color: #7b4bc6; }
.legend-vessel--fishing { color: #16866a; }
.legend-vessel--stopped { color: #e7a620; }

/* ==========================================================
   AIS-POPUP
   ========================================================== */

.ais-popup {
    min-width: 280px;
    max-width: 350px;
}

.ais-popup-title {
    max-width: 320px;
    margin: 0 0 9px;
    padding: 0 0 8px;
    overflow: hidden;
    border-bottom: 1px solid #d8e1e6;
    color: var(--primary-dark);
    font-size: 1.03rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ais-popup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ais-popup-table th,
.ais-popup-table td {
    padding: 3px 0;
    border: 0;
    line-height: 1.35;
    vertical-align: top;
}

.ais-popup-table th {
    width: 44%;
    padding-right: 12px;
    color: #5d6e77;
    font-weight: 650;
    text-align: left;
}

.ais-popup-table td {
    max-width: 190px;
    overflow-wrap: anywhere;
    color: #17242b;
    text-align: right;
}

.leaflet-popup-content {
    margin: 12px 14px;
}

@media (max-width: 1050px) {
    body {
        overflow: auto;
    }

    .dashboard-shell {
        height: auto;
        min-height: 100vh;
        padding-bottom: 43px;
    }

    .dashboard-grid {
        grid-template-columns: 230px minmax(420px, 1fr);
    }

    .dashboard-sidebar--right {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-column {
        min-height: 650px;
    }
}

@media (max-width: 760px) {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 48px;
    }

    body {
        background: #e8f0f3;
    }

    .dashboard-shell {
        grid-template-rows: auto auto auto auto;
        height: auto;
        min-height: 100vh;
    }

    .dashboard-header {
        position: sticky;
        z-index: 1100;
        top: 0;
        min-height: 52px;
        align-items: center;
        flex-direction: row;
        gap: 8px;
        padding: 7px 10px;
    }

    .dashboard-logo { width: 34px; height: 34px; font-size: .72rem; }
    .dashboard-brand { gap: 8px; }
    .dashboard-brand h1 { font-size: .94rem; }
    .dashboard-brand-kicker { display: none; }
    .dashboard-brand p { display: none; }

    .header-status {
        width: auto;
        margin-left: auto;
        flex-wrap: nowrap;
        gap: 7px;
    }

    .header-status > .dashboard-link:not(.dashboard-link--day-action),
    .header-divider { display: none; }
    .header-operator { width: 105px; height: 32px; gap: 4px; padding: 3px 6px; }
    .header-operator label { font-size: 0; }
    .header-operator label span { display: inline; font-size: .68rem; }
    .header-operator input { width: 55px; padding: 3px 1px; font-size: .61rem; }
    .header-operator > button { width: 19px; height: 19px; font-size: .58rem; }
    .header-operator-confirmed { min-width: 105px; max-width: 125px; height: 32px; padding: 3px 6px; }
    .header-operator-confirmed span { font-size: .45rem; }
    .header-operator-confirmed strong { font-size: .59rem; }
    .header-flag { min-width: 42px; width: 42px; height: 32px; gap: 0; padding: 3px 7px; }
    .header-flag-symbol { width: 27px; height: 24px; }
    .header-flag-copy { display: none; }
    .dashboard-link--day-action { max-width: 105px; padding: 5px 7px; overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
    .header-datetime { min-width: 75px; padding: 3px 6px; border: 0; background: transparent; }
    #dashboard-clock { font-size: 1rem; }
    #dashboard-date { font-size: .5rem; white-space: nowrap; }

    .mobile-dashboard-nav {
        position: sticky;
        z-index: 1050;
        top: 48px;
        display: flex;
        gap: 6px;
        padding: 6px 8px;
        overflow-x: auto;
        border-bottom: 1px solid #bed0d8;
        background: rgb(244 248 250 / 96%);
        box-shadow: 0 2px 7px rgb(7 31 42 / 10%);
        scrollbar-width: none;
    }

    .mobile-dashboard-nav a {
        flex: 1 0 auto;
        padding: 7px 10px;
        border-radius: 999px;
        background: #fff;
        color: var(--primary-dark);
        font-size: .72rem;
        font-weight: 800;
        text-align: center;
        text-decoration: none;
    }

    .dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .dashboard-sidebar--left,
    .dashboard-sidebar--right {
        display: contents;
        overflow: visible;
    }

    .dashboard-sidebar--right > .dashboard-panel {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
    }
    .dashboard-patrol-panel {
        box-sizing: border-box;
        min-height: 0;
        overflow: hidden;
    }
    .dashboard-patrol-panel .patrol-columns {
        align-items: start;
        min-height: 0;
    }
    .dashboard-patrol-panel .patrol-column {
        box-sizing: border-box;
        align-self: start;
        min-height: 0;
        overflow: hidden;
    }
    .dashboard-patrol-panel .patrol-unit-list {
        align-content: start;
        max-height: 245px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .dashboard-panel { padding: 12px; border-radius: 9px; }

    .mobile-order-incidents { order: 1; }
    .mobile-order-weather { order: 2; }
    .mobile-order-knmi { order: 3; }
    .mobile-order-water { order: 4; }
    .mobile-order-tide { order: 5; }
    .mobile-order-patrols { order: 6; }
    #mobile-map { order: 7; }
    #mobile-logbook { order: 8; }
    #patrol-unit-dialog { order: 9; }

    .map-column {
        height: min(68vh, 610px);
        min-height: 500px;
        order: 7;
        scroll-margin-top: 96px;
    }

    .map-toolbar {
        min-height: auto;
        align-items: center;
        flex-direction: row;
        gap: 7px;
        padding: 8px 10px;
    }

    .map-toolbar h2 { font-size: .86rem; }
    .map-toolbar .panel-kicker, .map-ais-status-line { display: none; }

    .map-toolbar-actions {
        width: auto;
        margin-left: auto;
        flex-wrap: nowrap;
    }

    .map-stat { display: none; }
    .toolbar-button { padding: 6px 8px; font-size: .68rem; }
    #map { min-height: 310px; }
    .map-overlay--bottom-left {
        display: none;
    }
    .steenbank-journeys { min-height: 76px; grid-template-columns: 112px minmax(0,1fr); }
    .steenbank-journeys-heading { min-width: 0; padding: 7px 8px; font-size: .65rem; }
    .steenbank-journey { min-width: 172px; }
    #mobile-operations, #mobile-weather, #mobile-logbook { scroll-margin-top: 96px; }

    .dashboard-footer {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 4px 8px;
        padding: 6px 10px;
        overflow-x: auto;
        font-size: .62rem;
        text-align: left;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .dashboard-footer .footer-status { flex: 0 0 auto; }
    .dashboard-footer > span:not(.status-dot)::before { margin-right: 8px; }
}


/* HERSTELDE WEER-, WATER- EN GETIJGEGEVENS */

.weather-main-temperature {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.weather-main-temperature > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.temperature-range {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 92px;
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--surface-muted);
}

.temperature-range span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.69rem;
}

.temperature-range strong {
    color: var(--primary-dark);
}

.dashboard-data-group {
    margin-bottom: 11px;
    padding: 9px 10px;
    border-radius: 8px;
    background: var(--surface-muted);
}

.dashboard-data-group h3 {
    margin: 0 0 6px;
    color: var(--primary-dark);
    font-size: 0.77rem;
}

.dashboard-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
}

.dashboard-data-row:last-child {
    border-bottom: 0;
}

.dashboard-data-row span {
    color: var(--text-muted);
}

.dashboard-data-row strong {
    color: var(--primary-dark);
    text-align: right;
}

.weather-extra-grid {
    margin-top: 1px;
}

.water-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.water-data-item {
    padding: 11px 9px;
    border-radius: 8px;
    background: var(--surface-muted);
}

.water-data-item > div {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 5px;
}

.water-data-item strong {
    color: var(--primary-dark);
    font-size: 1.15rem;
}

.water-data-item > div span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.tide-level {
    color: var(--primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: right;
}

.tide-status {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 9px;
    padding: 8px 9px;
    border-radius: 7px;
    background: var(--surface-muted);
}

.tide-status strong {
    color: var(--primary-dark);
    font-size: 0.78rem;
}
.passage-nav{display:flex;align-items:center;gap:.65rem}.passage-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:1rem}.passage-toolbar label{display:grid;gap:.3rem;color:var(--text-muted);font-size:.75rem;font-weight:700}.passage-toolbar input{min-width:180px;padding:.55rem;border:1px solid var(--border);border-radius:7px}.passage-toolbar strong{margin-left:auto;color:var(--primary-dark)}.passage-export{text-decoration:none}.passage-table td{vertical-align:top}.passage-table td strong,.passage-table td small{display:block}.passage-table input,.passage-table select,.passage-table textarea{box-sizing:border-box;width:100%;min-width:110px;padding:.45rem;border:1px solid var(--border);border-radius:6px;background:#fff;font:inherit}.passage-table textarea{min-width:220px;resize:vertical}.passage-table .save-status{margin-top:.35rem;max-width:100px;color:var(--text-muted);font-size:.65rem}.passage-category-label{margin-top:.3rem;color:var(--primary);font-weight:800}.passage-table tr.is-category-required{background:repeating-linear-gradient(135deg,#fff4f4 0,#fff4f4 9px,#ffe5e5 9px,#ffe5e5 18px)}.passage-table tr.is-category-required select[data-field="category"]{border-color:var(--danger);box-shadow:0 0 0 2px rgb(185 48 48 / 12%)}.passage-table tr.is-category-required .save-status{display:block;color:var(--danger);font-weight:800}
.incident-contact-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0}
.incident-contact-action{--contact-color:#1687d9;display:flex;min-width:0;flex-direction:column;gap:.45rem;padding:.75rem;border:1px solid var(--border);border-top:4px solid var(--contact-color);border-radius:10px;background:linear-gradient(145deg,#fff,#f7fafc);box-shadow:0 2px 7px rgb(15 45 70 / 8%)}
.incident-contact-action--police{--contact-color:#174b86}.incident-contact-action--kwc{--contact-color:#087f8c}.incident-contact-action--dishoek{--contact-color:#b5651d}
.incident-contact-action--ambulance{--contact-color:#c62828}.incident-contact-action--huisarts{--contact-color:#247a52}
.incident-contact-action--scc{--contact-color:#6d28d9}.incident-contact-action--brandweer{--contact-color:#d84315}.accident-contact-actions{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.incident-contact-button{display:flex;width:100%;align-items:center;gap:.55rem;padding:.7rem .8rem;border:0;border-radius:8px;background:var(--contact-color);color:#fff;cursor:pointer;font:inherit;font-weight:800;text-align:left;box-shadow:0 2px 4px rgb(0 0 0 / 12%)}
.incident-contact-button:hover{filter:brightness(1.08)}.incident-contact-button:disabled{cursor:wait;opacity:.7}
.incident-contact-icon{display:grid;width:1.8rem;height:1.8rem;flex:0 0 1.8rem;place-items:center;border-radius:50%;background:rgb(255 255 255 / 18%);font-size:1rem}
.incident-contact-action small{padding:0 .2rem;line-height:1.3;color:var(--muted-color,#596579)}
.incident-contact-notice{margin:.75rem 0;padding:.65rem .8rem;border-left:4px solid #1687d9;border-radius:.4rem;background:#eaf5fc;color:#16364b}
.incident-contact-notice p{margin:0}
.incident-contact-notice p+p{margin-top:.3rem}
.missing-environment-choice{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;padding:.75rem;border:1px solid var(--border);border-radius:9px;background:var(--surface-muted)}
.incident-content [hidden]{display:none!important}
.missing-environment-choice legend{padding:0 .35rem;font-weight:700;color:var(--primary-dark)}
.missing-environment-choice label{display:flex;align-items:center;gap:.4rem;min-width:110px;padding:.65rem .9rem;border:1px solid var(--border);border-radius:7px;background:#fff;cursor:pointer;font-weight:700}
.missing-environment-choice input{width:auto;margin:0}
.ehbo-victim-count{display:block;max-width:220px;margin-bottom:1rem}.ehbo-victim-count input{display:block;width:100%;margin-top:.35rem}
.ehbo-patient-forms{display:grid;gap:1rem}.ehbo-patient-card{padding:1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-muted)}
.ehbo-patient-card legend{padding:0 .4rem;font-weight:800;color:var(--primary-dark)}.ehbo-form-toggle{display:flex;align-items:center;gap:.5rem;font-weight:700}.ehbo-form-toggle input{width:auto;margin:0}
.ehbo-patient-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem}.ehbo-patient-details input,.ehbo-patient-details textarea{width:100%;box-sizing:border-box}
.ehbo-method-menu{overflow:hidden;border:1px solid var(--border);border-radius:9px;background:#fff}.ehbo-method-menu summary{padding:.75rem 1rem;background:var(--surface-muted);color:var(--primary-dark);cursor:pointer;font-weight:800;user-select:none}.ehbo-method-menu[open] summary{border-bottom:2px solid var(--primary)}.ehbo-method-content{display:grid;gap:.65rem;padding:.8rem}.ehbo-method-row{display:grid;grid-template-columns:minmax(210px,1fr) 2fr;align-items:start;gap:.75rem}.ehbo-method-row textarea{margin:0}
.ehbo-handover{margin-top:.5rem;padding-top:.75rem;border-top:2px solid var(--border);font-weight:800}.ehbo-handover textarea{display:block;margin-top:.45rem;font-weight:400}
.incident-logbook-form{display:grid;gap:.6rem;max-width:100%;margin-bottom:1rem;padding:1rem;border:1px solid var(--border);border-radius:9px;background:var(--surface-muted)}
.patrol-unit-dialog{width:min(92vw,460px);padding:0;border:0;border-radius:12px;box-shadow:0 18px 55px rgb(0 0 0 / 35%)}.patrol-unit-dialog::backdrop{background:rgb(3 20 28 / 58%)}.patrol-unit-dialog form{display:grid;gap:1rem;padding:1.25rem}.patrol-unit-dialog h2,.patrol-unit-dialog p{margin:0}.patrol-unit-dialog label{display:grid;gap:.4rem;font-weight:700}.patrol-unit-dialog select{width:100%;padding:.7rem;border:1px solid var(--border);border-radius:7px;background:#fff}.patrol-unit-dialog form>div{display:flex;justify-content:flex-end;gap:.6rem}.patrol-post-heading{margin:.55rem 0 .25rem;padding-top:.35rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:.64rem;text-transform:uppercase}.patrol-unit span strong,.patrol-unit span small{display:block}.patrol-unit span small{color:var(--text-muted);font-size:.62rem}
.incident-patrol-form{display:flex;align-items:end;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.incident-patrol-form label{display:grid;min-width:280px;gap:.35rem;font-weight:700}.incident-patrol-form select{padding:.65rem;border:1px solid var(--border);border-radius:7px}.incident-patrol-list{display:grid;gap:.55rem}.incident-patrol-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:8px;background:var(--surface-muted)}.incident-patrol-item strong,.incident-patrol-item small{display:block}.incident-patrol-item small{margin-top:.2rem;color:var(--text-muted)}
.incident-logbook-form label{font-weight:700;color:var(--primary-dark)}
.incident-logbook-form textarea{box-sizing:border-box;width:100%;max-width:100%;padding:10px;border:1px solid var(--border);border-radius:7px;resize:vertical;background:#fff;color:var(--text);font:inherit}
.incident-logbook-form div{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}
#tab-logbook{min-width:0;overflow:hidden}
#incident-logbook-timeline{min-width:0}.incident-logbook-date{margin:1.25rem 0 .45rem;color:var(--primary-dark);font-size:.86rem;text-transform:capitalize}.incident-logbook-date:first-child{margin-top:0}
.incident-logbook-day{display:grid;gap:.45rem;border-left:2px solid var(--border);padding-left:.75rem}.incident-logbook-entry{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:.65rem;min-width:0;padding:.7rem .8rem;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;background:#fff;overflow-wrap:anywhere}.incident-logbook-entry--important{border-left-color:var(--success)}.incident-logbook-entry--warning{border-left-color:var(--warning)}.incident-logbook-entry--critical{border-left-color:var(--danger)}
.incident-logbook-icon{display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:var(--surface-muted);color:var(--primary)}.incident-logbook-entry strong,.incident-logbook-entry small{display:block}.incident-logbook-entry small{margin-top:.2rem;color:var(--text-muted);font-size:.7rem}.incident-logbook-entry time{color:var(--text-muted);font-size:.75rem;white-space:nowrap}
@media (max-width:760px){.incident-contact-actions{grid-template-columns:1fr}.missing-environment-choice{align-items:stretch;flex-direction:column}.ehbo-patient-details{grid-template-columns:1fr}.ehbo-method-row{grid-template-columns:1fr}.incident-logbook-form{padding:.75rem}.incident-logbook-entry{grid-template-columns:26px minmax(0,1fr)}.incident-logbook-entry time{grid-column:2;white-space:normal}}
.search-area-body{background:#e5eef2}.search-area-layout{display:grid;grid-template-columns:minmax(330px,440px) minmax(0,1fr);gap:12px;height:calc(100vh - 82px);padding:12px}.search-area-controls{overflow-y:auto}.search-area-warning{display:grid;gap:.25rem;margin-bottom:1rem;padding:.75rem;border-left:4px solid var(--warning);border-radius:7px;background:#fff4d8;color:#604816;font-size:.75rem}.search-area-mode{display:flex;gap:1rem;margin:0 0 1rem;padding:.7rem;border:1px solid var(--border);border-radius:8px}.search-area-mode label{display:flex;gap:.35rem}.search-area-mode input{width:auto}.search-area-controls section{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.search-area-controls h2,.search-area-map-header h2{color:var(--primary-dark);font-size:1rem}.search-area-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.search-area-fields label{display:grid;gap:.3rem;color:var(--text-muted);font-size:.7rem;font-weight:750}.search-area-fields input,.search-area-fields select{box-sizing:border-box;width:100%;padding:.55rem;border:1px solid var(--border);border-radius:7px;background:#fff}.search-area-actions{display:flex;gap:.65rem}.search-area-map-panel{display:grid;min-height:0;grid-template-rows:auto minmax(350px,1fr) auto;padding:0;overflow:hidden}.search-area-map-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}.search-area-map-header h2{margin:0}.search-area-map-header>span{font-size:.7rem}.search-area-map{min-height:400px}.search-area-result{display:flex;flex-wrap:wrap;gap:.5rem 1rem;min-height:42px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface-muted);font-size:.72rem}@media(max-width:850px){.search-area-layout{grid-template-columns:1fr;height:auto}.search-area-map-panel{min-height:560px}.search-area-controls{overflow:visible}}@media(max-width:520px){.search-area-layout{padding:7px}.search-area-fields{grid-template-columns:1fr}}
.search-area-controls [hidden]{display:none!important}.search-area-help{margin:.65rem 0 0;color:var(--text-muted);font-size:.68rem;line-height:1.45}.search-area-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.search-area-section-heading h2{margin-top:0}.search-area-section-heading span{padding:.25rem .45rem;border-radius:999px;background:#e8eef1;color:var(--text-muted);font-size:.61rem;font-weight:750}.search-area-section-heading span.is-loaded{background:#e0f2e8;color:#236342}.search-area-section-heading span.is-error{background:#fae8e5;color:#8e332a}

/* Houd dynamische gegevens binnen hun kaart op alle schermbreedtes. */
.dashboard-panel,
.dashboard-panel > *,
.history-content > *,
.incident-tab,
.logbook-entry,
.logbook-day-card,
.search-area-controls,
.search-area-map-panel {
    min-width: 0;
    max-width: 100%;
}

input,
select,
textarea {
    min-width: 0;
    max-width: 100%;
}

.dashboard-panel :where(p, dd, strong, span, small),
.history-content :where(p, dd, strong, span, small),
.logbook-statusbar,
.search-area-result {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.history-section-header,
.logbook-statusbar,
.logbook-statusbar > div,
.logbook-header-links,
.logbook-pagination,
.logbook-archive-navigation,
.search-area-actions,
.search-area-section-heading {
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .history-content {
        padding: 8px;
    }

    .history-content > .dashboard-panel {
        padding: 10px;
    }

    .logbook-day-card > div,
    .logbook-statusbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .logbook-day-card dl {
        grid-template-columns: 1fr;
    }

    .logbook-day-card dd {
        margin-bottom: 5px;
    }

    .incident-patrol-form label,
    .passage-toolbar label,
    .passage-toolbar input {
        width: 100%;
        min-width: 0;
    }

    .incident-patrol-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .search-area-actions > * {
        flex: 1 1 auto;
    }
}