/*
 * Leesbaarheid en responsive bediening
 * Deze laag wordt als laatste geladen en geldt zowel voor de simulator als de website.
 */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 16px;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font-size: 15px;
}

button,
[role="button"],
input,
select {
  min-height: 40px;
}

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

/* Simulator: tekst die voor de centralist betekenis draagt. */
.topbar .brand strong,
.network-brand strong { font-size: 15px; }
.topbar .brand span,
.network-brand span,
.shift-stats span,
.shift-stats .connection { font-size: 12px; }
.shift-stats strong { font-size: 16px; }
.eyebrow,
.question-label,
.desk-section-title,
.incident-section-label,
.resource-heading-tools label,
.intake-classification label,
.notepad-heading,
.network-admin-layout > nav > span { font-size: 11px; }
.panel-heading h2,
.desk-section-heading strong { font-size: 18px; }
.panel-heading,
.panel-heading.compact { min-height: 72px; }
.call-card .call-number,
.call-card .waiting,
.call-card p,
.incoming-hint,
.caller-strip strong,
.dialogue-line,
.question-card h3,
.ask-button strong,
.comm-line div strong,
.comm-line div span,
.prompt-grid button,
.talkgroup-card strong,
.talkgroup-card small { font-size: 13px; }
.caller-strip span,
.dialogue-line b,
.question-progress,
.ask-button span,
.intake-note-log time,
.handover-line,
.desk-form-column label,
.desk-incident-linker small,
.desk-unit small,
.desk-unit span,
.desk-events,
.desk-event p,
.desk-note-composer label,
.desk-note-composer small,
.desk-official-heading span,
.desk-official-note div,
.desk-note-empty { font-size: 11px; }
.intake-classification select,
.intake-note-log span,
.intake-notepad textarea,
.comm-question-groups button,
.desk-form-column input,
.desk-form-column select,
.desk-form-column textarea,
.desk-note-composer textarea,
.desk-documentation textarea,
.desk-official-note p { font-size: 14px; }
.ask-button,
.comm-question-groups button,
.prompt-grid button { min-height: 44px; }
.map-filter,
.map-status,
.bridge-map-tooltip span,
.map-popup small,
.network-map-legend span,
.network-tooltip,
.network-facility-detail > small,
.network-care-list span,
.network-care-list em { font-size: 11px !important; }
.map-popup p,
.post-tooltip-content > span,
.post-tooltip-unit small,
.post-tooltip-empty { font-size: 11px; }
.map-popup strong,
.post-tooltip-content > b,
.post-tooltip-unit strong { font-size: 13px; }
.incident-section-label { min-height: 32px; }
.incident-card strong { font-size: 14px; }
.incident-card p,
.incident-card .incident-state,
.resource-summary { font-size: 12px; }
.incident-assigned-units > span,
.incident-assigned-units b,
.incident-assigned-units.empty em,
.incident-assistance-badge,
.incident-escalation-badge { font-size: 10px; }
.speech-dock > header span,
.intake-handover-dock > header span,
.incident-escalation-dock > header span,
.speech-message > span,
.speech-code span { font-size: 10px; }
.speech-dock > header strong,
.intake-handover-dock > header strong,
.incident-escalation-dock > header strong,
.speech-message > strong { font-size: 12px; }
.speech-empty,
.escalation-empty { font-size: 12px; }
.speech-open,
.speech-ack,
.speech-address input,
.speech-address button { font-size: 11px; }
.resource-table { font-size: 13px; }
.resource-table th,
.resource-table td small { font-size: 10px; }
.resource-heading-tools select,
.resource-heading-tools input,
.status-select,
.radio-status-display,
.resource-table .duty-cell strong,
.resource-incident-link strong,
.cancel-unit-button { font-size: 12px; }
.cancel-unit-button span { font-size: 10px; }
.dispatch-choice-note,
.room-code-status,
.lobby-choice p,
.room-status span,
.network-hint { font-size: 12px; }
.screen-menu-title span,
.screen-menu > button span small,
.operator-menu-button small,
.operator-menu > button small { font-size: 11px; }
.screen-menu-title strong,
.screen-menu > button span strong,
.operator-menu-button strong,
.operator-menu > button strong { font-size: 13px; }
.login-content > section > p,
.login-name-label,
.login-role-choice span,
.login-dispatch-settings label,
.login-multiplayer-choice small,
.login-session-list p,
.login-person span { font-size: 12px; }
.login-role-choice strong,
.login-multiplayer-choice strong,
.login-person strong,
.desk-choice span { font-size: 14px; }
.desk-choice strong { font-size: 17px; }
.control-room-list strong { font-size: 13px; }
.control-room-list small,
.network-room-sidebar > p,
.selected-room-heading p,
.selected-room-regions span,
.selected-room-stats span,
.selected-room-coverage strong,
.selected-room-coverage small { font-size: 11px; }
.control-room-list button { min-height: 54px; }

/* P2000 en statusoverzichten. */
.p2000-brand small,
.p2000-live,
.p2000-toolbar label,
.p2000-toolbar > span,
.p2000-message > header,
.p2000-message-body p,
.p2000-recipients span,
.p2000-recipients small,
.p2000-empty span,
.status-tabs span,
.station-block h3 small,
.station-unit-row strong,
.station-unit-row span:last-child { font-size: 11px; }
.p2000-message-body strong,
.p2000-recipients strong,
.station-block h3 { font-size: 13px; }

/* Publieke site: geen microtekst meer in navigatie, kaarten en formulieren. */
.portal-home,
.info-page,
.events-page,
.suggestions-page,
.account-page { font-size: 16px; }
.site-header nav a,
.quiet-button,
.cyan-button,
.primary-cta,
.secondary-cta { font-size: 14px; }
.site-brand strong { font-size: 14px; }
.site-brand small,
.profile-button small { font-size: 11px; }
.profile-button strong { font-size: 13px; }
.portal-home .eyebrow,
.info-page .eyebrow,
.events-page .eyebrow,
.suggestions-page .eyebrow,
.account-page .eyebrow { font-size: 12px; }
.portal-home p,
.info-page p,
.events-page p,
.suggestions-page p,
.account-page p,
.portal-home li,
.info-page li { font-size: 16px; line-height: 1.7; }
.portal-home small,
.info-page small,
.events-page small,
.suggestions-page small,
.account-page small { font-size: 12px; }
.portal-modal label,
.settings-card label { font-size: 13px; }
.portal-modal input,
.portal-modal select,
.portal-modal textarea,
.settings-card input,
.settings-card select,
.settings-card textarea { min-height: 46px; font-size: 16px; }

/* Tablet: operationele panelen worden leesbare werkstroken onder elkaar. */
@media (max-width: 1180px) {
  body {
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell { height: auto; min-height: 100dvh; }
  .topbar {
    position: sticky;
    top: 0;
    height: auto;
    min-height: 72px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .brand { min-width: 0; margin-right: auto; }
  .brand span { max-width: 48vw; }
  .shift-stats {
    order: 10;
    width: 100%;
    margin: 0;
    padding-top: 8px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
  }
  .shift-stats > div { flex: 0 0 auto; }
  .screen-menu-wrap,
  .operator-menu-wrap { margin-left: 0; }
  .screen-menu,
  .operator-menu { position: fixed; top: 76px; right: 10px; width: min(360px, calc(100vw - 20px)); }

  .workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 2px;
  }
  .workspace > .panel { flex: 0 0 auto; width: 100%; }
  .map-panel { height: 66dvh; min-height: 480px; }
  .incidents-panel { height: 64dvh; min-height: 480px; }
  .resources-panel { height: 72dvh; min-height: 560px; }
  .auxiliary-panel { height: 82dvh; min-height: 620px; }
  .resource-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }

  .communications-layout { height: calc(100% - 86px); grid-template-columns: minmax(300px, .8fr) minmax(430px, 1.2fr); }
  .desk-layout,
  .desk-layout.layout-form,
  .desk-layout.layout-notes { grid-template-columns: 1fr 1fr; overflow-y: auto; }
  .desk-documentation { grid-column: 1 / -1; min-height: 480px; }
  .station-status-grid { grid-template-columns: repeat(2, minmax(260px,1fr)); }

  .desk-login { overflow-y: auto; }
  .login-content { height: auto; min-height: calc(100dvh - 78px); grid-template-columns: 1fr; }
  .login-content > section { max-width: none; }
  .desk-choices { grid-template-columns: repeat(2, minmax(220px, 1fr)); }

  .network-home { min-width: 0; overflow-y: auto; }
  .network-homebar { height: auto; min-height: 76px; flex-wrap: wrap; gap: 10px; padding: 12px; }
  .network-status { margin-left: auto; }
  .network-home-layout { height: auto; min-height: calc(100dvh - 76px); grid-template-columns: 300px minmax(0,1fr); }
  .network-map-area { min-height: 760px; }
  .selected-room-card { max-height: 55dvh; overflow-y: auto; }

  .network-admin { overflow-y: auto; }
  .network-admin > header { height: auto; min-height: 86px; flex-wrap: wrap; gap: 10px; padding-block: 12px; }
  .network-admin-layout { height: auto; min-height: calc(100dvh - 86px); grid-template-columns: 235px minmax(0,1fr); }
  .admin-table { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); }

  .site-header {
    height: auto;
    min-height: 74px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
  }
  .site-header nav {
    order: 10;
    display: flex;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    overflow-x: auto;
    gap: 22px;
    border-top: 1px solid var(--line);
    white-space: nowrap;
  }
  .site-header .account-actions,
  .site-header .page-header-actions { margin-left: auto; }
}

/* Telefoon: elk actief onderdeel krijgt de volle breedte en grote aanraakvlakken. */
@media (max-width: 700px) {
  body { font-size: 16px; }
  button,
  [role="button"],
  input,
  select { min-height: 44px; }

  .topbar { align-items: flex-start; }
  .brand-mark { width: 38px; height: 38px; }
  .brand strong { font-size: 13px; }
  .brand span { display: none; }
  .screen-menu-button,
  .multiplayer-button,
  .pause-button { padding: 8px; }
  .screen-menu-button { font-size: 0; }
  .screen-menu-button span { font-size: 18px; }
  .operator-menu-button { min-width: 48px; width: 48px; padding: 5px; }
  .operator-menu-button > span,
  .operator-menu-button > i { display: none; }
  .shift-stats { gap: 18px; }
  .shift-stats > div:nth-child(4) { max-width: none; }

  .panel-heading,
  .panel-heading.compact { min-height: 68px; padding: 12px; }
  .panel-heading { align-items: flex-start; gap: 8px; }
  .map-panel { height: 62dvh; min-height: 430px; }
  .incidents-panel { height: 70dvh; min-height: 520px; }
  .resources-panel { height: 78dvh; min-height: 600px; }
  .auxiliary-panel { height: 88dvh; min-height: 650px; }
  .map-filters { max-width: 62vw; flex-wrap: wrap; justify-content: flex-end; }
  .map-filter { padding: 7px 8px; }
  .incidents-panel > .panel-heading { grid-template-columns: 1fr; }
  .incident-heading-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .resource-heading-tools { width: 100%; flex-wrap: wrap; }
  .resource-heading-tools label { flex: 1 1 130px; }
  .resource-heading-tools select,
  .resource-heading-tools input { width: 100%; min-width: 0; }

  .communications-layout { display: flex; flex-direction: column; height: calc(100% - 86px); overflow-y: auto; }
  .comm-sidebar { flex: 0 0 auto; max-height: 58%; border-right: 0; border-bottom: 2px solid #477087; }
  .talkgroup-grid { grid-template-columns: repeat(2,1fr); padding-top: 25px; }
  .comm-workarea { flex: 1 0 68vh; overflow: visible; }
  .prompt-grid { grid-template-columns: repeat(2,1fr); }
  .desk-toolbar { height: auto; min-height: 52px; flex-wrap: wrap; }
  .desk-toolbar span { width: 100%; }
  .desk-width-controls { display: none; }
  .desk-layout,
  .desk-layout.layout-form,
  .desk-layout.layout-notes { display: block; height: calc(100% - 104px); overflow-y: auto; }
  .desk-form-column,
  .desk-resources-column,
  .desk-documentation { min-height: 72vh; overflow: visible; border-right: 0; border-bottom: 2px solid #466b7f; }
  .desk-row,
  .desk-referral-choice { grid-template-columns: 1fr; }
  .desk-referral-choice { position: fixed; top: 10px; right: 10px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; }
  .station-status-grid { grid-template-columns: 1fr; }

  .login-topbar { height: auto; min-height: 70px; padding: 10px 14px; }
  .login-topbar b { display: none; }
  .login-content { padding: 18px 14px 40px; }
  .login-content h1 { font-size: 25px; }
  .login-role-choice,
  .login-dispatch-settings,
  .login-play-mode-options,
  .workspace-mode-buttons,
  .lobby-choice,
  .desk-choices { grid-template-columns: 1fr; }
  .login-multiplayer-choice { grid-template-columns: 36px 1fr; }
  .login-multiplayer-choice em { grid-column: 1 / -1; }
  .workspace-mode-choice { padding: 14px; }

  .network-homebar .network-status { order: 10; width: 100%; margin: 0; justify-content: center; }
  .network-settings-button { margin-left: auto; }
  .network-home-layout { display: flex; flex-direction: column; min-height: 0; }
  .network-room-sidebar { flex: none; max-height: 46dvh; border-right: 0; border-bottom: 1px solid #31556a; padding: 18px 14px; }
  .network-room-sidebar h1 { font-size: 24px; }
  .network-map-area { flex: none; height: 76dvh; min-height: 620px; }
  .network-map-legend { right: 8px; left: 8px; flex-wrap: wrap; }
  .selected-room-card { right: 8px; bottom: 8px; left: 8px; padding: 14px; }
  .selected-room-heading { display: block; }
  .selected-room-heading button { width: 100%; min-width: 0; margin-top: 12px; }
  .selected-room-stats { grid-template-columns: 1fr 1fr; }

  .network-admin > header { padding-inline: 14px; }
  .network-admin > header .network-brand span { display: none; }
  .admin-header-actions { width: 100%; overflow-x: auto; }
  .network-admin-layout { display: block; }
  .network-admin-layout > nav { display: flex; gap: 4px; padding: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #31566b; }
  .network-admin-layout > nav > span,
  .admin-security-note { display: none; }
  .network-admin-layout > nav > button { flex: 0 0 auto; width: auto; border-left: 0; border-bottom: 3px solid transparent; }
  .network-admin-layout > nav > button.active { border-bottom-color: #52d2f8; }
  .network-admin-layout > main { padding: 18px 14px; }
  .admin-titlebar { align-items: flex-start; flex-direction: column; }
  .admin-titlebar > button { width: 100%; margin: 0; }
  .admin-table { grid-template-columns: 1fr; }
  .admin-editor-form { width: calc(100vw - 20px); padding: 18px 14px; }
  .admin-editor-fields,
  .admin-editor-actions { grid-template-columns: 1fr; }

  .site-header { padding: 10px 14px; }
  .site-header .site-brand small { display: none; }
  .site-header .account-actions .quiet-button,
  .site-header .page-header-actions .quiet-button { display: none; }
  .site-header nav { gap: 18px; }
  .landing-hero,
  .info-hero,
  .systems-hero,
  .events-hero,
  .suggestions-hero { padding-inline: 18px; }
  .hero-actions { align-items: stretch; }
  .hero-actions > *,
  .primary-cta,
  .secondary-cta { text-align: center; }
  .account-layout,
  .two-fields,
  .suggestion-form-grid { grid-template-columns: 1fr; }
  .account-summary { position: static; }
  .portal-modal { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Publieke website: vaste verhoudingen, duidelijke hiërarchie en echte spelbeelden. */
.portal-home .landing-hero-content {
  width: min(720px, 55vw);
  padding-top: clamp(76px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 108px);
}

.portal-home .landing-hero-content > .availability-pill {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin: 0 0 18px;
  white-space: normal;
}

.portal-home .landing-hero-content > .eyebrow {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 18px;
  clear: both;
  line-height: 1.35;
}

.portal-home .landing-hero h1 {
  max-width: 700px;
  margin: 0 0 24px;
  font-size: clamp(50px, 5.25vw, 80px);
  line-height: 1.01;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.portal-home .hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: start;
  gap: clamp(24px, 3vw, 44px);
  margin-top: 44px;
}

.portal-home .hero-metrics span {
  display: grid;
  grid-template-columns: auto minmax(72px, 112px);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.portal-home .hero-metrics b {
  font-size: 27px;
  line-height: 1;
  white-space: nowrap;
}

.portal-home .hero-metrics small {
  max-width: none;
  padding: 0;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
}

.hero-game-screen {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 5vw, 86px);
  bottom: 46px;
  width: min(500px, 35vw);
  height: 286px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #427889;
  border-radius: 12px;
  background: #071a21;
  box-shadow: 0 28px 80px #000b, 0 0 0 5px rgba(5, 24, 31, .72);
}

.hero-incident-card[hidden] { display: none !important; }

.game-screen-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 11px;
  border-bottom: 1px solid #315968;
  background: #102c36;
}

.game-screen-chrome > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55747e;
}

.game-screen-chrome > span:first-child { background: #ff6245; }
.game-screen-chrome > span:nth-child(2) { background: #f1bd3d; }
.game-screen-chrome > span:nth-child(3) { background: #37c982; }
.game-screen-chrome b { margin-left: 7px; color: #b7ccd2; font-size: 9px; letter-spacing: .12em; }
.hero-game-screen > img { display: block; width: 100%; height: calc(100% - 31px); object-fit: cover; object-position: center top; }
.hero-game-screen figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid #366372;
  border-radius: 5px;
  background: rgba(4, 21, 27, .9);
  color: #d7e6e9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
}

.briefing-photo-wrap { isolation: isolate; overflow: visible; }
.briefing-photo-wrap::after {
  content: none;
}
.briefing-photo-wrap img { aspect-ratio: auto; object-position: center top; }
.briefing-photo-wrap .photo-caption { z-index: 4; }

.info-hero { position: relative; }
.info-hero::after {
  content: "Echte spelweergave · intake";
  position: absolute;
  z-index: 3;
  top: 16%;
  right: 5%;
  width: 49%;
  height: 56%;
  box-sizing: border-box;
  padding: 12px;
  border: 5px solid #0a1a20;
  border-radius: 5px;
  background: #06161d url('/assets/game-intake-werkplek.png') center top/cover no-repeat;
  box-shadow: 0 22px 50px #000b, 0 0 0 1px #4d7e8c;
  color: #d7e6e9;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  text-shadow: 0 2px 6px #000;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .portal-home .landing-hero-content { width: min(760px, 72vw); }
  .portal-home .landing-hero h1 { font-size: clamp(48px, 6.7vw, 70px); }
  .hero-game-screen { display: none; }
  .info-hero::after { top: auto; right: 6%; bottom: 5%; width: 58%; height: 38%; }
}

@media (max-width: 700px) {
  .portal-home .landing-hero-content {
    width: 100%;
    padding: 170px 18px 48px;
  }
  .portal-home .landing-hero-content > .availability-pill,
  .portal-home .landing-hero-content > .eyebrow { margin-bottom: 14px; }
  .portal-home .landing-hero h1 {
    max-width: 100%;
    font-size: clamp(39px, 11vw, 51px);
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: wrap;
  }
  .portal-home .hero-metrics {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 30px;
  }
  .portal-home .hero-metrics span { grid-template-columns: 62px minmax(0, 1fr); }
  .portal-home .hero-metrics b { font-size: 24px; }
  .portal-home .hero-metrics small { font-size: 11px; }
  .briefing-photo-wrap::after { top: 8%; right: 6%; width: 72%; height: 48%; }
  .info-hero::after { right: 18px; bottom: 28px; width: calc(100% - 36px); height: 260px; }
  .info-hero > img { min-height: 360px; }
}