/* Kleuren geïnspireerd op wagenborg.com (huisstijl): rood als merkkleur
   voor de toolbar + primaire knoppen. Per klant kan --accent anders zijn
   (Beheer ▾ → Instellingen, zie templates/components/huisstijl.html); alles
   wat de merkkleur gebruikt, leidt daarom af van --accent in plaats van zelf
   een rood te noemen. Logo's per klant in static/klanten/<slug>/. */
:root {
  --bg: #f4f4f4;
  --panel: #ffffff;
  --border: #d0dae0;
  --text: #111c21;
  --muted: #656e75;
  --accent: #df091e;
  /* Achtergrond van de tekenvlakken: de kaart en het planner-rooster delen
     dezelfde tint, zodat overspringen tussen de twee pagina's rustig oogt en
     tekst die buiten een schipblok uitsteekt op allebei leesbaar blijft. */
  --tekenvlak: #dde3ea;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, black);
  /* Signaalrood voor wat op de tekening moet opvallen: de nu-lijn, trossen,
     kranen en opmerkingsballonnen. Bewust los van --accent: dat verandert per
     klant, deze betekenis niet (en een blauwe klantkleur zou wegvallen tegen
     de blauwe schepen). */
  --signaal: #df091e;
  /* Donkere omlijning om tekst op een schipblok: die blokken zijn afhankelijk
     van de status donkerblauw, lichtblauw of grijs, en zonder rand valt een
     gekleurde tekst op de lichte varianten weg. Overgenomen van
     --ship-text-outline in ../ligplaatsplanning (8 verschoven kopieën i.p.v.
     -webkit-text-stroke, dat vreet bij kleine vette letters de vulling op). */
  --schip-tekst-rand:
    -1px -1px 0 rgba(0, 0, 0, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.75),
    1px -1px 0 rgba(0, 0, 0, 0.75), -1px 0 0 rgba(0, 0, 0, 0.75),
    1px 0 0 rgba(0, 0, 0, 0.75), -1px 1px 0 rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(0, 0, 0, 0.75), 1px 1px 0 rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* Geen web-fonts (geen externe CDN's, zie README) — Karla/Futura van de
   huisstijl zijn niet lokaal beschikbaar, dus systeemfonts met een
   vergelijkbaar karakter: geometrisch/rond voor koppen, neutraal voor tekst. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

h1, h2, h3, .toolbar .btn {
  font-family: "Century Gothic", "Futura", "Avenir Next", system-ui, sans-serif;
}

/* --------------------------------------------------------------- tooltip ---
   Zwevend kaartje bij een schip. Naar .tooltip in
   ../ligplaatsplanning/static/style.css. In de planner staat er de
   scheepsnaam met de exacte lengte in (de tijden staan daar al naast het
   blok); op de kaart komen ook de aankomst en het vertrek eronder — daar is geen tijdas om ze aan af te
   lezen. Gedeeld, want beide pagina's laden style.css. */
.tooltip {
  display: none;
  position: fixed;
  z-index: 60;
  /* Nooit de muis afvangen: aan de rand van het venster wordt hij geklemd en
     kan hij onder de cursor komen, en dan zou hij gaan knipperen. */
  pointer-events: none;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.tooltip.actief { display: block; }

/* Regels onder de naam: kleiner en rustiger, zodat de naam de kop blijft. */
.tooltip-regel {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}

/* Bijzonderheden van een schip (eigen kranen, iets dat uitsteekt): een ⚠ op
   het blok in de planner en op de kaart, en in de schepenlijst. Geel met een
   donkere rand, zodat hij op de blauwe blokken en op een lichte achtergrond
   allebei opvalt. In de tooltip staat de tekst erbij, in donkergeel. */
.bijzonder-teken {
  color: #f5b301;
  font-weight: 700;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.5);
}

.tooltip-regel.bijzonder {
  color: #8a5a00;
  white-space: normal;
  max-width: 320px;
}

/* ------------------------------------------------------------- toolbar ---
   Zelfde balk op elke pagina (zie templates/*.html): titel + navigatie
   altijd links, per pagina eigen knoppen/legenda rechts ervan. */

.toolbar {
  flex-shrink: 0;
  /* Sinds de kade-knoppen hier ook in staan past de rij bij een smal venster
     niet meer op één regel. Dan wordt het er één meer, in plaats van dat de
     laatste knop buiten beeld valt. Geen overflow op de balk: de uitklap-
     menu's van Beheer en het zoekveld staan er absoluut in en zouden dan
     afgeknipt worden. */
  min-height: 52px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 1rem;
  background: var(--accent);
  color: white;
}

.toolbar .logo {
  height: 22px;
  display: block;
}

.toolbar h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

.toolbar .separator {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.3);
}

.toolbar .spacer { flex: 1; }

.toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.toolbar .btn:hover { background: rgba(255, 255, 255, 0.22); }
.toolbar .btn.actief { background: white; color: var(--accent); border-color: white; }
/* Keuzelijst die eruitziet als een knop in de balk (dagenkeuze naast "PDF
   maken"). De uitgeklapte lijst tekent het systeem zelf, en die erft de witte
   tekst — op een witte lijst onleesbaar, dus de opties weer donker. */
.toolbar select.btn { font-family: inherit; }
.toolbar select.btn option { color: var(--text); background: var(--panel); }

/* Zoek-en-plaats-schip-veld in de toolbar — zelfde idee als
   ../ligplaatsplanning/static/kaart.js (initShipSearch): typen filtert
   bestaande schepen, "Plaats" zet de planner in plaatsmodus (zie
   static/js/app.js). Alleen op de Planner-pagina, want alleen daar is er
   een tijdlijn om op te klikken. */

.schip-zoek-wrap {
  position: relative;
  /* Mag meekrimpen als de balk vol staat, maar niet tot een gleuf waar niets
     meer in te lezen is — dan gaat de balk maar schuiven. */
  width: 260px;
  min-width: 160px;
}

.schip-zoek-wrap input {
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 0.85rem;
}

.schip-zoek-wrap input::placeholder { color: rgba(255, 255, 255, 0.75); }
.schip-zoek-wrap input:focus { outline: none; background: rgba(255, 255, 255, 0.9); color: var(--text); }

.schip-zoek-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  max-height: 420px;
  overflow-y: auto;
  z-index: 50;
}

.schip-zoek-dropdown.zichtbaar { display: block; }

.schip-zoek-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.schip-zoek-item:last-child { border-bottom: none; }
.schip-zoek-item:hover { background: var(--bg); }
.schip-zoek-item .schip-zoek-naam { font-weight: 600; }
.schip-zoek-kop {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg);
}
.schip-zoek-item .schip-zoek-info { font-size: 0.78rem; color: var(--muted); }

.schip-zoek-plaats-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0.6rem;
  background: var(--accent);
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.schip-zoek-plaats-btn:hover { background: var(--accent-hover); }

/* Plaatsmodus: cursor over de tijdlijn geeft aan dat een klik het schip
   neerzet, en een banner boven de tijdlijn herinnert aan Esc-om-te-annuleren. */
.planner-v-scroll.plaatsmodus .planner-v-body { cursor: crosshair; }

.plaatsmodus-banner {
  display: none;
  flex-shrink: 0;
  padding: 0.4rem 1rem;
  background: #fdece9;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.plaatsmodus-banner.zichtbaar { display: block; }

/* Beheer-knop: dropdown met "Kades"/"Schepen", elk opent een modal (zie
   hieronder) — zelfde idee als de "Beheer ▾"-knop in
   ../ligplaatsplanning/templates/index.html. */

.beheer-wrap { position: relative; }

.beheer-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  z-index: 50;
  overflow: hidden;
  min-width: 140px;
}

.beheer-menu.zichtbaar { display: block; }

/* Een link in het menu (Statistieken) ziet eruit als de knoppen. */
.beheer-menu button,
.beheer-menu a {
  display: block;
  text-decoration: none;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.beheer-menu button:hover,
.beheer-menu a:hover { background: var(--bg); }

/* Inloggen simuleren (templates/components/simulatie.html): een menu zoals
   Beheer ▾, met kopjes voor de klant en de rol; een vinkje bij wat er nu
   gekozen is. */
.simulatie-kop {
  padding: 0.45rem 0.8rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.simulatie-kop:not(:first-child) { border-top: 1px solid var(--border); margin-top: 0.25rem; }
.beheer-menu button.actief { font-weight: 600; }
.beheer-menu button.actief::after { content: " ✓"; color: var(--accent); }

/* Kijker: wat iets toevoegt of wijzigt, is er niet. De server weigert het
   toch al (zie gesimuleerde_login in app.py). */
body[data-rol="kijker"] #schip-zoek-wrap,
body[data-rol="kijker"] #schip-nieuw-knop,
body[data-rol="kijker"] .schip-item-knoppen,
body[data-rol="kijker"] .basis-overnemen { display: none; }
/* Alleen voor de beheerder: het menu-item Gebruikers en schepen verwijderen.
   Ook hier weigert de server het anderen (ALLEEN_BEHEERDER in app.py). */
body:not([data-leverancier="1"]) .alleen-leverancier,
body:not([data-rol="beheerder"]) .alleen-beheerder,
body:not([data-rol="beheerder"]) [data-verwijder-schip] { display: none; }
body[data-rol="kijker"] .ship-bar,
body[data-rol="kijker"] .kraan { cursor: default; }

/* ---------------------------------------------------------------- modal --- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 28, 33, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal-overlay.zichtbaar { display: flex; }

.modal {
  background: var(--panel);
  border-radius: 8px;
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}

.modal-kop h2 { margin: 0; }

.modal-breed { width: min(620px, 94vw); }

/* ------------------------------------------------------ schepenbeheer ---
   Zoekveld + scrollbare lijst, met een formulier dat de lijst tijdelijk
   vervangt. Zelfde indeling als het "Schepen Beheren"-scherm in
   ../ligplaatsplanning (static/style.css: .ship-list-item, .btn-icon). */

.schepen-zoek input {
  width: 100%;
  padding: 0.45rem 0.6rem;
}

.schepen-lijst-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.8rem 0 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.schepen-lijst-kop button {
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}

.schepen-lijst-wrap {
  max-height: 48vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem;
}

.schip-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.schip-item:hover {
  background: var(--bg);
  border-color: var(--border);
}

.schip-item-stip {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #4d8fdb; /* zelfde blauw als een schip-blok in de planner */
  flex-shrink: 0;
}

.schip-item-tekst { flex: 1; min-width: 0; }
.schip-item-naam { font-size: 0.9rem; font-weight: 600; }

.schip-item-details {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schip-item-knoppen { display: flex; gap: 0.3rem; }

.btn-icoon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}

.btn-icoon svg { width: 16px; height: 16px; display: block; }
.btn-icoon:hover { background: var(--panel); border-color: var(--accent); color: var(--accent); }
.btn-icoon.verwijder:hover { border-color: #c0392b; color: #c0392b; }

/* Treffers uit de gedeelde basislijst, onder de eigen schepen. Het stipje
   grijs: nog niet van jou. */
.basis-kop {
  margin: 0.5rem 0.5rem 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.schip-item.basis .schip-item-stip { background: var(--border); }
.basis-overnemen {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

/* Melding op de planner/kaart van een klant zonder kades.js. */
.geen-kades { max-width: 520px; margin: 4rem auto; padding: 0 1rem; text-align: center; color: var(--muted); }
.geen-kades h2 { color: var(--text); }

/* Instellingen van de klant. */
.instellingen h3 { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; }
.instellingen h3:first-child { margin-top: 0; }
.instelling-rij { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.instelling-rij input[type="color"] { width: 44px; height: 30px; padding: 0 2px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.instelling-rij + .instelling-uitleg { margin-left: 0; }
.instelling-schakelaar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}
.instelling-schakelaar input { width: 18px; height: 18px; accent-color: var(--accent); }
.instelling-uitleg { margin-left: calc(18px + 0.6rem); font-size: 0.85rem; color: var(--muted); }
.instelling-uitleg p { margin: 0.6rem 0 0; }
.instelling-uitleg strong { color: var(--text); font-weight: 600; }

/* Een voorstel: oude waarde doorgestreept, nieuwe erachter. */
.voorstel-oud { text-decoration: line-through; }
.voorstel-nieuw { color: var(--text); font-weight: 600; }

/* Rol achter de naam in het gebruikersbeheer. */
.rol-label {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg);
  color: var(--muted);
  vertical-align: 1px;
}
.rol-label.rol-beheerder { background: var(--accent); color: white; }
.gebruiker-form-uitleg { margin: 0; font-size: 0.8rem; color: var(--muted); }

.schepen-leeg { padding: 1rem; text-align: center; font-size: 0.85rem; color: var(--muted); }

/* Formulier: verborgen tot je op "+ Nieuw schip" of het potlood klikt. */
.schip-form { display: none; }

.schip-form.zichtbaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
  margin-top: 0.8rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.schip-form h3 { grid-column: 1 / -1; margin: 0; font-size: 0.9rem; color: var(--text); }
.schip-form label { grid-column: span 1; }
.schip-form input, .schip-form select { width: 100%; }
.schip-form .schip-form-vol { grid-column: 1 / -1; }
/* Zelfde rand en maat als de invoervelden hieronder (input, select). */
.schip-form textarea {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.schip-form .schip-form-checkbox {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.schip-form .schip-form-checkbox input { width: auto; }

.schip-form-knoppen {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.btn-secundair {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secundair:hover { background: var(--bg); }

/* Bevestigingsvraag (window.bevestig in modals_shared.js): boven een ander
   open venster, knoppen rechtsonder zoals in het schipformulier. */
.modal-bevestig { z-index: 110; }
.bevestig-tekst { margin: 0 0 1rem; line-height: 1.45; white-space: pre-line; }
/* Invoerveld alleen bij vraagTekst() (bv. een opmerking). */
.bevestig-invoer {
  display: none; width: 100%; margin: -0.4rem 0 1rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 0.9rem; resize: vertical;
}
.modal-bevestig.met-invoer .bevestig-invoer { display: block; }
.bevestig-knoppen { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ---------------------------------------------------------------- toast ---
   Korte bevestiging/foutmelding rechtsonder i.p.v. een alert() die de modal
   blokkeert — zelfde rol als .toast in ../ligplaatsplanning/static/style.css. */

.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
  display: none;
  max-width: min(420px, 90vw);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
}

.toast.zichtbaar { display: block; }
.toast.goed { border-left-color: #2e8b57; }
.toast.fout { border-left-color: var(--accent); }

.modal-sluit {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.modal-sluit:hover { color: var(--text); }

.modal section {
  border: none;
  border-radius: 0;
  padding: 0.5rem 1.25rem 1.25rem;
}

.toolbar .legenda {
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  opacity: 0.9;
  white-space: nowrap;
}

.stip {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* Zelfde kleuren als de schip-blokken op /kaart en in de planner-grid,
   zodat de legenda overal (rode toolbar én lichte planner-balk) klopt. */
.stip-nu { background: #4d8fdb; }
.stip-verwacht { background: #9db6cf; }
.stip-vertrokken { background: #b6bec5; }

/* --------------------------------------------------------------- main ---
   Scrollbare inhoud onder de vaste toolbar (op /kaart vervangen door een
   eigen .kaart-container die zelf pan/zoom regelt — zie kaart.css). */

main {
  flex: 1;
  overflow: auto;
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

h2 { margin-top: 0; font-size: 1.1rem; }
h3 { font-size: 0.95rem; color: var(--muted); }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }

ul { list-style: none; padding: 0; margin: 0 0 0.75rem; font-size: 0.9rem; }

form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-top: 0.5rem; }
form label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); gap: 0.2rem; }
input, select { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; }
button { padding: 0.4rem 0.9rem; border: none; border-radius: 4px; background: var(--accent); color: white; cursor: pointer; font-size: 0.9rem; }
button:hover { background: var(--accent-hover); }

/* ------------------------------------------------------------ overzicht ---
   De schepen van een haven (static/js/overzicht.js), onder de kaart en in de
   PDF: twee kolommen naast elkaar (aan de kade, verwacht) met lucht ertussen,
   en onder elkaar zodra ze niet meer naast elkaar passen. Op de kaart met
   invulvelden die er pas als veld uitzien als je eroverheen gaat, zodat het
   een rustige tabel blijft. */
.ov-kolommen { display: flex; flex-wrap: wrap; column-gap: 3rem; row-gap: 0.4rem; }
/* Vanaf zo'n 1800 px venster naast elkaar, anders onder elkaar. Past een
   tabel toch niet (lange opmerking met "met 2 fenders" ervoor), dan opzij
   scrollen in plaats van afknippen onder de andere kolom. */
.ov-kolom { flex: 1 1 860px; min-width: 0; overflow-x: auto; }
.ov-groep {
  margin: 0.6rem 0 0.2rem; padding-bottom: 0.25rem;
  color: var(--accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--accent);
}
.ov-geen, .ov-leeg { color: var(--muted); font-size: 0.85rem; margin: 0.4rem 0; }
.overzicht-tabel { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
/* Smalle kolommen zo smal als hun inhoud; de opmerking krijgt de rest. */
.overzicht-tabel th:not(:last-child), .overzicht-tabel td:not(:last-child) { width: 1%; white-space: nowrap; }
.overzicht-tabel th, .overzicht-tabel td { padding: 0.25rem 0.4rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.overzicht-tabel thead th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 600; font-size: 0.75rem; z-index: 1; }
.overzicht-tabel .ov-loa { color: var(--muted); font-size: 0.75rem; }
/* Onder de naam: de kade en bij een vervolgblok waar het schip vandaan komt
   of heen gaat. Mag afbreken (de rest van de kolom niet): anders maakt een
   lange kadenaam de schipkolom zo breed dat de opmerking uit beeld schuift. */
.overzicht-tabel .ov-kade,
.overzicht-tabel .ov-vervolg { display: block; color: var(--muted); font-size: 0.72rem; white-space: normal; max-width: 15rem; }
.overzicht-tabel.bewerkbaar input, .overzicht-tabel.bewerkbaar select, .overzicht-tabel.bewerkbaar textarea {
  font: inherit; padding: 0.15rem 0.25rem; border: 1px solid transparent; border-radius: 4px; background: transparent;
}
.overzicht-tabel.bewerkbaar input:hover, .overzicht-tabel.bewerkbaar select:hover, .overzicht-tabel.bewerkbaar textarea:hover,
.overzicht-tabel.bewerkbaar input:focus, .overzicht-tabel.bewerkbaar select:focus, .overzicht-tabel.bewerkbaar textarea:focus { border-color: var(--border); background: var(--panel); outline: none; }
.overzicht-tabel.bewerkbaar input:focus, .overzicht-tabel.bewerkbaar select:focus, .overzicht-tabel.bewerkbaar textarea:focus { border-color: var(--accent); }
/* De opmerking breekt af over meer regels (kaart.js maakt het vak zo hoog
   als de tekst), in plaats van afgekapt te worden zoals in een invulveld. */
.overzicht-tabel textarea[data-veld="opmerking"] {
  width: 100%; min-width: 6rem; resize: none; overflow: hidden;
  line-height: 1.3; display: block; box-sizing: border-box;
}
.overzicht-tabel td:last-child { min-width: 9rem; }
.overzicht-tabel .ov-bolder { width: 2.6em; text-align: center; }
.overzicht-tabel .ov-geen-plek { margin-left: 0.4rem; color: var(--muted); font-style: italic; }
/* "met 2 fenders ·" vóór de opmerking, in hetzelfde veld. */
.overzicht-tabel .ov-opmerking { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3rem; }
.overzicht-tabel .ov-fenders { white-space: nowrap; }
/* Past de opmerking niet achter "met 1 fender ·", dan eronder. */
.overzicht-tabel .ov-opmerking textarea { flex: 1 1 6rem; }

/* ------------------------------------------------------- contextmenu ---
   Rechtermuisknop-menu op een geplaatst schip. Staat hier en niet in
   planner.css, want de kaart gebruikt hetzelfde menu (zie modals_shared.js). */

.context-menu {
  position: fixed;
  z-index: 300;
  display: none;
  min-width: 160px;
  padding: 0.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.context-menu.zichtbaar { display: block; }

.context-menu button {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text);
  text-align: left;
  font-size: 0.85rem;
  cursor: pointer;
}

.context-menu button:hover { background: var(--bg); }
.context-menu button.gevaar { color: #c0392b; }
.context-menu button.gevaar:hover { background: #fdecea; }


/* Eén regel met keuzes, bv. de afmeerzijde: BB | SB | ?? naast elkaar. */
.context-menu-keuzes {
  display: flex;
  gap: 0.25rem;
  padding: 0.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.context-menu-keuzes button {
  flex: 1;
  text-align: center;
  padding: 0.3rem 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
}

.context-menu-keuzes button.actief {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Sleephoekje rechtsonder op een opmerkingsballonnetje (planner én kaart),
   een rood driehoekje — zelfde vorm als .tf-resize-handle in de LPP, in de
   kleur van de rand van het ballonnetje. */
.ballon-greep {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

.ballon-greep::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent rgba(223, 9, 30, 0.6) transparent;
}