/*
 * UI 2.0 app shell layout (REQ 300, CMD-0044, funderingspakket Command Center UI 2.0).
 *
 * Nieuwe, losstaande shell-laag (hoofdheader, hoofdnavigatie, tenantselector, actieve
 * contextweergave/breadcrumb, meldingengebied, gebruikersmenu, contentcontainer, mobiele
 * navigatie) bovenop tokens.css/skins/*.css. Bouwt NIET voort op shell.css (dat blijft de
 * bestaande, ongewijzigde chat-first-schil van index.html, zie REQ 103/CMD-0017); dit is een
 * nieuwe schil voor toekomstige "slices" (bijvoorbeeld het dashboard van CMD-0045), met een eigen
 * "ui2-" klassenaamruimte zodat beide schillen naast elkaar kunnen bestaan zonder CSS-botsing.
 * Zie docs/ui/core-ui-2-0-shell-contract.md voor het volledige contract.
 *
 * Breakpoint: 1024px, zelfde grens als de bestaande schil (shell.js: "boven 1024px staan ze naast
 * elkaar"), voor herkenbaar, consistent gedrag tussen beide schillen.
 */

.ui2-shell,
.ui2-shell * { box-sizing: border-box; }

/* D-251 (ai-command-center PR #543): de chatbalk onderaan "Gesprek met Amigero" moet op elk
   scherm en bij elke lengte van het rechterpaneel zichtbaar blijven, nooit meescrollen uit
   beeld. Vóór deze regel was .ui2-shell alleen min-height: 100vh, dus zonder een harde
   bovengrens: bij lange inhoud in #ui2-context-pane (bijv. Klanten met veel deployment keys,
   Microsoft-gebruikers met een lange lijst) groeide de hele schil, inclusief het chatpaneel en
   zijn invoerbalk, gewoon mee en scrolde de HELE pagina, in plaats van dat alleen het
   rechterpaneel zelf intern scrolde (.ui2-context-pane heeft overflow-y: auto al langer, maar
   dat werkt pas als er ergens in de keten een echte hoogtegrens staat). height: 100vh in plaats
   van min-height, plus overflow: hidden hier en min-height: 0 op elke tussenliggende
   flex-container hieronder (.ui2-shell-body, .ui2-main; .ui2-workspace had dat al), zet die
   grens neer: nu scrollt uitsluitend het paneel dat te lang is (.ui2-context-pane, .ui2-nav,
   .chat-messages), nooit de pagina als geheel, dus het chatpaneel (met zijn vaste #zone-chat
   .chat-input-row onderaan) blijft altijd op zijn plek staan.

   Vervolg (bijgevangen op een echt mobiel toestel, na de oorspronkelijke D-251-fix): "100vh" is
   op mobiele browsers (Safari/Chrome op iOS en Android) NIET de daadwerkelijk zichtbare hoogte.
   Die eenheid rekent met de viewport zoals die is wanneer de adres-/navigatiebalk van de browser
   is ingeklapt, ook wanneer die balk bij het laden nog gewoon in beeld staat. Het gevolg: .ui2-shell
   wordt gerenderd op een hoogte die groter is dan wat er op dat moment werkelijk zichtbaar is, en
   omdat html/body zelf geen eigen hoogtegrens hebben, wordt de PAGINA als geheel net zo hoog en
   dus scrollbaar — dat verschil laat zich alleen wegscrollen door de hele schil te verschuiven,
   header ÉN chatbalk incluis, precies het gedrag dat overflow: hidden op .ui2-shell had moeten
   voorkomen (die regel beperkt alleen wat er BINNEN de shell kan scrollen, niet of de pagina zelf
   hoger is dan de zichtbare viewport). Vandaar de tweede, latere height-declaratie hieronder op
   100dvh (dynamic viewport height): die eenheid volgt de daadwerkelijke, live zichtbare
   viewporthoogte wanneer de browser die balk toont of verbergt. Bewust ALS TWEEDE regel: een
   browser die "dvh" niet kent negeert die ongeldige waarde volledig en het bestaande vh-fallback
   op de regel erboven blijft dan gewoon gelden (progressive enhancement, geen @supports-blok
   nodig). Dit was met de synthetische breakpointtest (360/768/1280/1440px, vaste
   window.innerHeight) niet te vinden: die simuleert geen in-/uitklappende adresbalk, alleen een
   browserengine op een echt of emulerend toestel doet dat. */
.ui2-shell {
  display: flex;
  flex-direction: column;
  height: 100vh; /* fallback voor browsers zonder dvh-ondersteuning */
  height: 100dvh;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  overflow: hidden;
}

/* Skiplink: eerste focusbare element, onzichtbaar tot het focus krijgt (toetsenbordgedrag j). */
.ui2-skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-2);
  z-index: var(--z-toast);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.ui2-skip-link:focus { top: var(--spacing-2); }

/* --- Header -------------------------------------------------------------------------------- */

.ui2-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: 56px;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ui2-header-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.ui2-header-brand .ui2-brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px var(--color-accent-glow));
}

.ui2-hamburger {
  display: none;
  flex-shrink: 0;
}

@media (max-width: 1023.98px) {
  .ui2-hamburger { display: inline-flex; }
}

/* Bugmelding PO (echt mobiel toestel, viewport ~412px, test.core.amigero.ai #/klanten): de
   klant-kiezer en de taalkeuze-knop liepen over de rand van het scherm/ogen overlappend, met
   onleesbare tekst. Oorzaak: alle header-kinderen (hamburger, merknaam, tenant-combobox,
   header-actions) staan op flex-shrink: 0 en de enige bestaande veiligheidsklep tegen
   header-overloop (".ui2-header { flex-wrap: wrap }" hieronder bij max-width: 359.98px) dekt geen
   enkel gangbaar telefoonformaat (~360-430px breed) — alleen toestellen smaller dan 360px. De
   opgetelde intrinsieke breedte van alle header-elementen (ruim 550px) past sowieso niet binnen
   zo'n scherm, en omdat .ui2-shell overflow: hidden heeft (D-251, hierboven), wordt dat overschot
   niet scrollbaar maar simpelweg afgesneden/onbereikbaar. Verberg daarom de volledige merknaam
   (blijft alleen het logo, de hamburger + het navigatiepaneel bevat de merknaam elders niet nodig
   op mobiel) op dezelfde 639.98px-grens als de andere header-labels hieronder (tenant-label,
   gebruikersnaam), zodat er weer genoeg ruimte overblijft voor de klant-kiezer en de taalknop. */
@media (max-width: 639.98px) {
  .ui2-header-brand-name { display: none; }
}

.ui2-header-spacer { flex: 1; min-width: var(--spacing-2); }

.ui2-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

/* --- Tenantselector: compacte combobox i.p.v. een kale browser-<select> (issue #405) ---------- */

.ui2-tenant-combobox {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
}

.ui2-tenant-combobox-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 639.98px) {
  .ui2-tenant-combobox-label { display: none; }
}

.ui2-tenant-combobox-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  min-height: 36px;
  min-width: 8rem;
  max-width: 14rem;
  padding: 0 var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ui2-tenant-combobox-trigger:hover:not(:disabled) { border-color: var(--color-accent); }
.ui2-tenant-combobox-trigger[aria-expanded="true"] { border-color: var(--color-accent); background: var(--color-bg-tertiary); }
.ui2-tenant-combobox-trigger:disabled { opacity: .6; cursor: default; }

.ui2-tenant-combobox-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui2-tenant-combobox-caret {
  flex-shrink: 0;
  transition: transform .15s ease;
}
.ui2-tenant-combobox-trigger[aria-expanded="true"] .ui2-tenant-combobox-caret { transform: rotate(180deg); }

.ui2-tenant-combobox-panel {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  left: 0;
  z-index: var(--z-dropdown);
  margin: 0;
  padding: var(--spacing-1);
  list-style: none;
  min-width: 100%;
  max-width: min(20rem, calc(100vw - var(--spacing-4)));
  max-height: 18rem;
  overflow-y: auto;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.ui2-tenant-combobox-panel[hidden] { display: none; }

.ui2-tenant-combobox-option {
  display: block;
  padding: var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.ui2-tenant-combobox-option:hover { background: var(--color-bg-tertiary); }
.ui2-tenant-combobox-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 639.98px) {
  /* min-width was hier ongewijzigd altijd 8rem (128px, basisregel hierboven) gebleven: op een
     smal telefoonscherm (~360-430px) is dat, samen met de rest van de header, precies wat de
     overloop uit de bugmelding hierboven (.ui2-header-brand-name) veroorzaakte. De klantnaam zelf
     heeft al text-overflow: ellipsis (.ui2-tenant-combobox-value hierboven), dus een kleinere
     minimumbreedte kost alleen leesbare tekens, geen functionaliteit. */
  .ui2-tenant-combobox-trigger { min-width: 6rem; max-width: 9rem; }
}

/* --- Meldingen en gebruikersmenu (dropdownpanelen) ------------------------------------------- */

.ui2-menu { position: relative; flex-shrink: 0; }

.ui2-menu-panel {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 16rem;
  max-width: min(20rem, calc(100vw - var(--spacing-4)));
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-2);
}

.ui2-menu-panel[hidden] { display: none; }

.ui2-menu-panel-title {
  margin: 0;
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.ui2-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}
.ui2-menu-item:hover { background: var(--color-bg-tertiary); }

.ui2-notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
}
.ui2-notification-badge[hidden] { display: none; }

.ui2-user-menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.ui2-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.ui2-user-menu-name {
  font-size: var(--font-size-sm);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 639.98px) {
  .ui2-user-menu-name { display: none; }
}

/* --- Shell-body: navigatie + inhoud ----------------------------------------------------------- */

.ui2-shell-body {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0; /* D-251, zie .ui2-shell hierboven: zonder dit propageert de hoogtegrens niet. */
  position: relative;
}

.ui2-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim-nav);
  z-index: var(--z-nav-backdrop);
}

.ui2-nav {
  flex-shrink: 0;
  width: 15rem;
  padding: var(--spacing-3);
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border-subtle);
  overflow-y: auto;
}

.ui2-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-1); }

.ui2-nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.ui2-nav-link:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
.ui2-nav-link.is-active {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
}

.ui2-nav-icon { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 1023.98px) {
  .ui2-nav-backdrop { z-index: var(--z-nav-backdrop); }
  .ui2-shell.nav-open .ui2-nav-backdrop { display: block; }

  .ui2-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-nav);
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
    width: min(80vw, 18rem);
  }

  .ui2-shell.nav-open .ui2-nav { transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1023.98px) {
    .ui2-nav { transition: transform .18s ease; }
  }
}

/* --- Contextbalk (breadcrumb + contexttitel) -------------------------------------------------- */

.ui2-context-bar {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-base);
}

.ui2-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0 0 var(--spacing-1);
  padding: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ui2-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: var(--spacing-1); opacity: .6; }

.ui2-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.ui2-breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.ui2-breadcrumb [aria-current="page"] { color: var(--color-text-secondary); }

.ui2-context-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/* --- Contentcontainer -------------------------------------------------------------------------- */

.ui2-main {
  flex: 1;
  min-width: 0;
  min-height: 0; /* D-251, zie .ui2-shell hierboven: zonder dit propageert de hoogtegrens niet. */
  display: flex;
  flex-direction: column;
}

.ui2-content {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-4);
}

.ui2-content:focus-visible { outline: none; box-shadow: none; }

/* --- Meldingenregio (toasts, zie ui2-components.css voor de kaartjes zelf) --------------------- */

#ui2-toast-region { pointer-events: none; }
#ui2-toast-region .ui2-toast { pointer-events: auto; }

/* --- Focus, consistent door de hele schil ------------------------------------------------------ */

.ui2-shell a:focus-visible,
.ui2-shell button:focus-visible,
.ui2-shell select:focus-visible,
.ui2-shell [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Geen horizontale overflow, ook niet op smalle telefoons -----------------------------------
 * Was hiervoor alleen @media (max-width: 359.98px): dat dekte enkel toestellen smaller dan 360px,
 * niet de veelvoorkomende telefoonbreedtes (~360-430px, incl. de ~412px waarop de PO de kapotte
 * header meldde) waar de header-krimpregels hierboven (.ui2-header-brand-name,
 * .ui2-tenant-combobox-trigger) meestal al genoeg ruimte vrijmaken, maar niet gegarandeerd op elke
 * taal/skin-combinatie (langere vertalingen, bredere systeemfonts). Deze wrap-fallback op
 * 639.98px (dezelfde grens als de andere mobiele header-aanpassingen hierboven) is het laatste
 * vangnet: als de rij ondanks alles nog te breed is, stapelt de header zich in twee regels in
 * plaats van dat .ui2-shell's overflow: hidden (D-251) de rechterkant stilzwijgend afsnijdt. */
@media (max-width: 639.98px) {
  .ui2-header { flex-wrap: wrap; row-gap: var(--spacing-2); }
}