/* BoatDossier gedeelde basisstijlen
   Laad per pagina: <link rel="preconnect" href="https://fonts.googleapis.com">
                    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
*/

/*
 * BoatDossier — Goedgekeurd palet 2026-09-30
 * Leesbaarheid buiten nog in de praktijk te toetsen.
 */
:root {
  /* ── Goedgekeurd palet ── */
  --grey-mid:        #2d3a43;   /* pagina-achtergrond                      */
  --grey-light:      #24445c;   /* tegels en hoofdtekstvlakken             */
  --grey-inner:      #578394;   /* geopende detailvlakken                  */
  --text-dark:       #ffffff;   /* koppen, namen, veldlabels               */
  --text-mid:        #ffffff;   /* secundaire tekst                        */
  --teal-text:       #00b7ff;   /* selectie-accent                         */
  --detail-label:    #ffffff;   /* veldlabels in detailvlak                */
  --detail-value:    #101213;   /* ingevulde waarden in detailvlak         */
  --comp-name:       #ffffff;   /* onderdeelnaam in tegel                  */

  /* ── Banner ── */
  --banner-bg:              #000000;   /* naamvlak achtergrond             */
  --banner-name-color:      #ffffff;
  --banner-label-color:     #55b6dd;
  --banner-accent-color:    #55b6dd;
  --banner-overlay-color:   #000000;
  --banner-overlay-opacity: 0;

  /* ── Vaste functionele kleuren ── */
  --navy:            #0b263f;
  --white:           #ffffff;
  --hub:             #55b6dd;
  --emergency:       #b84a43;   /* MAYDAY / nood — bewaard               */
  --accent:          #00b7ff;
  --border:          #c0c8ce;
  --border-grey:     #c0c8ce;
  --banner-border:   #456479;
  --select-tint:     rgba(0,183,255,0.12);
  --panel-width:     460px;

  /* ── Rol-aliassen (legacy compat) ── */
  --background:      var(--grey-inner);   /* detailvlak-achtergrond        */
  --foreground:      var(--text-dark);    /* hoofdtekst = wit              */
  --card:            var(--grey-light);   /* tegel/vlak-achtergrond        */
  --card-foreground: var(--text-dark);
  --muted:           var(--text-mid);
  /* compat: boordgegevens.js injects CSS that references these */
  --horizon:         #00b7ff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  background: var(--grey-mid);
  color: var(--foreground);
  min-height: 100vh;
}

.page {
  max-width: 540px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

/* ── Banner ── */
.banner {
  border: 1.5px solid var(--banner-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.banner-photo {
  display: block;
  visibility: hidden;
  width: 100%;
  height: 232px;
  object-fit: cover;
  object-position: var(--banner-pos-x, center) var(--banner-pos-y, 40%);
  transform: scale(var(--banner-zoom, 1));
  transform-origin: var(--banner-pos-x, center) var(--banner-pos-y, 40%);
}

.banner-photo.bd-banner-ready {
  visibility: visible;
}

.banner-photo:not(.bd-banner-ready) ~ .bd-edit-btn {
  visibility: hidden;
}

.banner-accent-line {
  height: 4px;
  background: var(--banner-accent-color);
}

.banner-name-bar {
  background: var(--banner-bg);
  padding: 8px 20px 10px;
}

.banner-label {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--banner-label-color);
  margin-bottom: 5px;
}

.banner-boat-name {
  font-family: 'Times New Roman', Times, serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--banner-name-color);
  line-height: 1.1;
}

/* ── Content ── */
.content {
  width: min(100%, var(--panel-width));
  max-width: var(--panel-width);
  margin: 0 auto;
}

/* ── MAYDAY / NOOD ── */
.nood-btn {
  display: inline-block;
  background: var(--emergency);
  color: var(--white);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
}

/* ── Standard banner edit UI (bd-banner.js, owner only) ── */
.bd-banner-photo-wrap {
  position: relative;
  height: 232px;
  overflow: hidden;
  display: block;
  will-change: transform;
}

.bd-edit-btn {
  position: absolute;
  bottom: 6px;
  right: 8px;
  background: rgba(255, 255, 255, 0.82);
  border: none;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: var(--navy);
  cursor: pointer;
  line-height: 1.4;
  z-index: 1;
}
.bd-edit-btn:hover { background: rgba(255, 255, 255, 0.96); }

.bd-edit-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(11, 38, 63, 0.88);
  flex-wrap: wrap;
  min-height: 36px;
}

.bd-eb-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.bd-eb-btn:hover    { background: rgba(255, 255, 255, 0.22); }
.bd-eb-btn:disabled { opacity: 0.4; cursor: default; }

.bd-eb-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
  min-width: 70px;
}

.bd-eb-zoom-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.bd-eb-zoom-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.bd-eb-zoom-slider {
  width: 80px;
  accent-color: var(--accent);
  cursor: pointer;
}
.bd-eb-zoom-val {
  font-size: 12px;
  color: #fff;
  min-width: 34px;
}

.bd-eb-acties { display: flex; gap: 6px; flex-shrink: 0; }

.bd-eb-msg {
  font-size: 11px;
  color: var(--hub);
  flex-basis: 100%;
  line-height: 1.3;
  min-height: 0;
}
.bd-eb-msg.fout { color: var(--emergency); }

/* ── Desktop: brede banner, compacte inhoud ── */
@media (min-width: 1100px) {
  .page {
    max-width: 1000px;
  }
}

/* Eigenaarscode: dezelfde leesbare invoertekst op alle pagina's. */
input[type="password"],
.token-input,
.bd-code-input {
  color: #fff;
  background: var(--background, #2d3a43);
  caret-color: #fff;
}
input[type="password"]::placeholder,
.token-input::placeholder,
.bd-code-input::placeholder {
  color: #fff;
  opacity: 1;
}

/* Bannerbewerking via de bootnaam op alle pagina’s. */
.bd-banner-name-edit {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.bd-banner-name-edit:not(:disabled):hover,
.bd-banner-name-edit:focus-visible {
  color: var(--horizon);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bd-banner-name-edit:focus-visible {
  outline: 2px solid var(--horizon);
  outline-offset: 5px;
}
.bd-banner-name-edit:disabled { cursor: default; }