/* ser-shell.css — stijl van de gedeelde shell (ser-shell.jsx).
   BYTE-GELIJK in beide repos (ser-automation-platform/ser-shell.css en
   ser-analytics-platform/frontend/ser-shell.css); de tests vergelijken de kopie.

   Regel: ELKE selector hieronder begint met .ser-shell (eigen namespace), zodat
   dit bestand niets buiten de shell kan raken. Brede selectors (div, section,
   .main-col *) hebben eerder dashboards blank gemaakt; ser-shell.test.mjs
   weigert ze. Rail, topbar en .mod-switch zelf staan (gelijk) in de styles.css
   van elke app; hier alleen wat de shell daar bovenop nodig heeft. Kleuren en
   maten komen uit huisstijl.css. */

/* ── Rail ─────────────────────────────────────────────────────────────── */
.ser-shell-merk { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.ser-shell-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ser-shell-extern { flex-shrink: 0; opacity: 0.55; }
.ser-shell-sectie-plat { padding-top: 0; padding-bottom: 0; }
.ser-shell-sectie-plat.ser-shell-sectie-eerste { padding-top: 6px; }
.ser-shell-sectie-los { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--rail-lijn); }
.ser-shell-skelet { pointer-events: none; }
.ser-shell-skelet-blok { display: block; border-radius: 5px; background: rgba(255, 255, 255, 0.10); }
.ser-shell-leeg { padding: 10px 18px 2px; font-size: var(--fs-xs); line-height: 1.4; color: var(--rail-tekst-zacht); }
.ser-shell-klantkaart { flex-direction: column; align-items: flex-start; gap: 8px; }
.ser-shell-klantkaart-merk { display: flex; align-items: center; gap: 8px; }
.ser-shell-klantkaart-ser { height: 26px; width: auto; flex-shrink: 0; }
.ser-shell-klantkaart-x { color: rgba(255, 255, 255, 0.35); font-size: 13px; font-weight: 300; }

/* ── Klantlogo ────────────────────────────────────────────────────────── */
.ser-shell-logo { display: block; flex-shrink: 0; object-fit: contain; background: var(--paper); box-sizing: border-box; }
.ser-shell-logo-init {
  display: grid; place-items: center; padding: 0;
  background: linear-gradient(135deg, var(--ser-navy), var(--ser-paars));
  color: white; font-weight: 800; font-family: var(--font-sans);
}

/* ── Topbar ───────────────────────────────────────────────────────────── */
.ser-shell-kruimel {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink-500); cursor: pointer;
}
.ser-shell-kruimel:hover { color: var(--ser-navy); }
.ser-shell-kruimel-nu { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Platformwissel op mobiel: compact keuzemenu (de pill is daar te breed). */
.ser-shell-wissel-mobiel { display: none; position: relative; }
.ser-shell-wissel-knop {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px;
  background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.ser-shell-stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ser-shell-stip.tools { background: var(--platform-tools); }
.ser-shell-stip.analytics { background: var(--platform-analytics); }
.ser-shell-stip.planning { background: var(--platform-planning); }

/* Zwevende menu's (platform, klant): position fixed, z-index 49/50 zoals de
   bestaande kiezers; bestaan alleen in de DOM als ze open zijn. */
.ser-shell-zweef-overlay { position: fixed; inset: 0; z-index: 49; }
.ser-shell-zweef {
  position: fixed; z-index: 50; max-width: calc(100vw - 16px);
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.ser-shell-wissel-menu { min-width: 200px; padding: 4px; }
.ser-shell-wissel-menu a,
.ser-shell-wissel-menu .is-actief,
.ser-shell-wissel-menu .is-uit {
  display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 44px; border-radius: 7px;
  box-sizing: border-box; font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); text-decoration: none; cursor: pointer;
}
.ser-shell-wissel-menu a:hover { background: var(--ink-50); }
.ser-shell-wissel-menu .is-actief { color: var(--ser-navy); background: var(--ink-50); cursor: default; }
.ser-shell-wissel-menu .is-uit { color: var(--ink-400); cursor: not-allowed; }

/* Klant-/domeinkiezer */
.ser-shell-klant { position: relative; flex-shrink: 0; }
.ser-shell-klant-knop {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; max-width: 220px; min-height: 32px;
  background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 7px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); cursor: pointer; white-space: nowrap; font-family: inherit;
}
.ser-shell-klant-label { overflow: hidden; text-overflow: ellipsis; }
.ser-shell-klant-menu { min-width: 240px; max-height: 380px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ser-shell-klant-kop {
  padding: 8px 14px 4px; font-size: 10px; font-weight: 700; color: var(--ink-500); text-transform: uppercase;
  letter-spacing: 0.06em; background: var(--ink-25); border-bottom: 1px solid var(--ink-100);
}
.ser-shell-klant-optie {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; min-height: 44px;
  border: 0; border-left: 3px solid transparent; background: transparent; text-align: left; cursor: pointer; font-family: inherit;
}
.ser-shell-klant-optie:hover { background: var(--ink-25); }
.ser-shell-klant-optie.is-gekozen { background: var(--ink-25); border-left-color: var(--ser-teal); }
.ser-shell-klant-optie-tekst { display: flex; flex-direction: column; min-width: 0; }
.ser-shell-klant-optie-naam { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.ser-shell-klant-optie-sub { font-size: 10px; color: var(--ink-500); font-family: var(--font-mono); }
/* Werkplek SER (alleen Tools, alleen medewerkers): groep bovenaan met vrije domeinen. */
.ser-shell-klant-knop.is-ser { border-color: var(--ser-teal); background: var(--ser-teal-50); }
.ser-shell-klant-ser-merk {
  flex-shrink: 0; padding: 1px 5px; border-radius: 4px; background: var(--ser-navy); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
}
.ser-shell-klant-ser { border-bottom: 1px solid var(--ink-100); }
/* Het invoerveld mag het menu niet breder maken dan useZwevend rekent (260px). */
.ser-shell-klant-menu.ser-shell-zweef { max-width: calc(100vw - 16px); }
.ser-shell-klant-plus {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0;
  border: 1px dashed var(--ink-300); border-radius: 5px; color: var(--ink-500); font-weight: 700;
}
.ser-shell-klant-invul { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 12px; }
.ser-shell-klant-invul-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.ser-shell-klant-invul-rij { display: flex; gap: 6px; }
.ser-shell-klant-invoer {
  flex: 1; width: 0; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid var(--ink-200); border-radius: 7px; background: var(--paper); color: var(--ink-900);
  font-family: var(--font-mono); font-size: 16px;
}
.ser-shell-klant-invoer:focus { outline: 2px solid var(--ser-teal); outline-offset: 0; border-color: var(--ser-teal); }
.ser-shell-klant-invoer[aria-invalid="true"] { border-color: var(--err); }
.ser-shell-klant-gebruik {
  min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--ser-teal); color: #fff; font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
}
.ser-shell-klant-fout { font-size: var(--fs-sm); color: var(--err); }
.ser-shell-klant-invul-hint { font-size: 11px; color: var(--ink-500); }

/* ── Kruislinks ───────────────────────────────────────────────────────── */
.ser-shell-kruis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-sm); }
.ser-shell-kruis-titel { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-weight: 600; }
.ser-shell-kruis-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; min-height: 32px; box-sizing: border-box;
  border: 1px solid var(--ink-200); border-radius: var(--r-pill); background: var(--paper);
  color: var(--ser-navy); font-weight: 600; text-decoration: none;
}
.ser-shell-kruis-link:hover { border-color: var(--ser-teal); background: var(--ser-teal-50); }

/* Telefoon-grens: max-width 767px, consistent met styles.css (UX-audit
   2026-10, bevinding #3) — zo valt iPad staand (768 CSS-px) niet meer in de
   telefoonbehandeling. Nooit terug naar "max-width: 768px" zetten. */
@media (max-width: 767px) {
  /* De dichte lade laat geen schaduw op de linkerrand van de pagina vallen. */
  .ser-shell-rail:not(.open) { box-shadow: none; }
  .ser-shell-wissel { display: none; }
  .ser-shell-wissel-mobiel { display: flex; }
  .ser-shell-klant-label { display: none; }
  .ser-shell-klant-knop { min-height: 40px; }
  .ser-shell-kruis-link { min-height: 40px; }
}
/* Smalle telefoon (360–420): de wisselknop alleen met stip en pijltje; het
   menu zegt waar je heen gaat. */
@media (max-width: 420px) {
  .ser-shell-wissel-knop-label { display: none; }
  .ser-shell-wissel-knop { padding: 6px 9px; }
  .ser-shell-klant-knop { padding: 5px 8px; min-width: 44px; justify-content: center; }
  .ser-shell-klant-pijl { display: none; }
}

/* Het horizontale woordmerk is bewust breder dan hoog: schaal op breedte,
   niet op --rail-logo-hoogte, zodat het binnen de rail past. */
.ser-shell-rail .ser-shell-merk .ser-shell-merklogo { height: auto; width: 100%; max-width: 176px; }

/* ── Vraag Claude: knop in de topbar en veld bovenin de rail ─────────────
   Het paneel zelf staat in chat-paneel.css (alleen Analytics). Tikdoel 44 px;
   op een telefoon alleen het icoon. Kleuren en maten uit huisstijl.css. */
.ser-shell-vraag {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 14px; box-sizing: border-box;
  border: 0; border-radius: var(--r-md); background: var(--ser-navy); color: var(--paper);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.ser-shell-vraag:hover { background: var(--ser-navy-700); }
.ser-shell-vraag.is-open { background: var(--ser-navy-900); }
.ser-shell-vraag:focus-visible, .ser-shell-vraag-veld:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.ser-shell-vraag-kbd {
  display: none; padding: 0 5px; border-radius: 4px; font-size: var(--fs-sm); line-height: 18px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
.ser-shell-vraag-veld-wrap { padding: 8px 12px 4px; }
.ser-shell-vraag-veld {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px; box-sizing: border-box;
  background: var(--rail-hover-bg); border: 1px solid var(--rail-lijn); border-radius: var(--r-sm);
  color: var(--rail-tekst); font-family: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.ser-shell-vraag-veld:hover { color: var(--paper); }
.ser-shell-vraag-veld-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ser-shell-vraag-kbd-rail { display: inline; }
@media (min-width: 1280px) { .ser-shell-vraag-kbd { display: inline; } }
@media (max-width: 767px) {
  .ser-shell-vraag { padding: 0; }
  .ser-shell-vraag-tekst { display: none; }
}

/* Visueel verborgen tekst voor schermlezers. */
.ser-shell-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }