/*
 * REQ 103/CMD-0017: schil met vier zones (menu, context, chat, detail), losstaand van de
 * bestaande wwwroot/index.html. Gebruikt de root-tokens uit tokens.css plus de dark/light-skins
 * (REQ 117, D-048), zelfde contract als de bestaande interface. Sinds CMD-0017 is de chat-zone
 * permanent (niet langer sectie-afhankelijk) en is er een aparte contextzone voor
 * sectie-specifieke lijsten/schermen (screens.js' getZone()), zie chat-first-ui.css voor de
 * nieuwe, sectiespecifieke stijl van die contextzone (Beheer-submenu, Gesprekken-contextpaneel).
 */
* { box-sizing: border-box; }

/* Ondoorzichtig canvas over de volle paginahoogte, zodat er nergens onbedoeld iets anders
   dan deze schil doorschemert. */
html {
  height: 100%;
  background: var(--color-bg-base);
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  overflow-x: hidden;
}

.muted { color: var(--color-text-muted); }
a.link { cursor: pointer; text-decoration: underline; color: var(--color-text-secondary); }
a.link:hover { color: var(--color-accent); }

.shell-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  min-height: 4rem;
  padding: .75rem 1.25rem;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.shell-header-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}
.shell-header-title {
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0;
  white-space: nowrap;
}
.shell-header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.brand-logo { display: block; width: 34px; height: 34px; filter: drop-shadow(0 0 5px var(--color-accent-glow)); flex-shrink: 0; }

.preview-pill {
  padding: .1rem .55rem;
  border-radius: var(--radius-md);
  font-size: .72rem;
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg-elevated));
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  white-space: nowrap;
}

/* Tabbladen voor de zones op smalle schermen, verborgen op tablet/desktop. */
.tabbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.tabbar button {
  flex: 1;
  padding: .7rem .5rem;
  min-height: 44px;
  font: inherit;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.tabbar button:hover { background: var(--color-bg-elevated); }
.tabbar button.active {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* CMD-0017: vier kolommen. Richtmaten uit de opdracht: nav ~190-220px, contextlijst ~280-340px,
   chat flexibel en altijd het grootste gebied, detailpaneel ~320-380px. */
.shell {
  display: grid;
  grid-template-columns: 210px 320px 1fr 350px;
  align-items: start;
}

.zone {
  padding: 1rem;
  border-right: 1px solid var(--color-border);
  min-height: calc(100vh - 5.5rem);
}

/* Voor een <iframe> (loadTickets, screens.js) die de volle hoogte van zijn .zone nodig heeft:
   height:100% lost niets op zolang .zone zelf geen gedefinieerde hoogte heeft (alleen
   min-height), dus deze klasse herhaalt dezelfde viewport-berekening expliciet. Zie de
   @media (max-width: 1023px)-override hieronder voor de aangepaste waarde die daar ook voor
   .zone zelf geldt; bewust vlak bij die regel gehouden zodat de twee niet uit elkaar kunnen lopen. */
.tickets-iframe {
  height: calc(100vh - 5.5rem);
}
.zone:last-child { border-right: none; }

#menu-nav { display: flex; flex-direction: column; gap: .2rem; }
#menu-nav button {
  display: flex;
  align-items: center;
  gap: .6rem;
  font: inherit;
  text-align: left;
  min-height: 44px;
  padding: .4rem .7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
#menu-nav button:hover { background: var(--color-bg-elevated); }
#menu-nav button.active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  font-weight: 600;
}
#menu-nav .nav-icon { flex-shrink: 0; }

.zone-placeholder {
  color: var(--color-text-muted);
  font-size: .85rem;
  max-width: 32rem;
}
.zone-placeholder p { margin: 0 0 .6rem; }

/* Chat-zone (REQ 103, permanent sinds CMD-0017): berichtenlijst die meegroeit, invoerrij vast
   onderaan. */
#zone-chat { padding: 0; }
@media (min-width: 1024px) {
  #zone-chat { display: flex; flex-direction: column; }
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.chat-empty { color: var(--color-text-muted); font-size: .85rem; margin: 0; }

.chat-msg { display: flex; align-items: flex-end; gap: .5rem; max-width: 85%; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.assistant { align-self: flex-start; }
.chat-msg.system { align-self: center; max-width: 95%; }
.chat-msg .avatar { flex-shrink: 0; filter: drop-shadow(0 0 4px var(--color-accent-glow)); }

.chat-bubble {
  padding: .55rem .75rem;
  border-radius: var(--radius-md);
  font-size: .85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg.user .chat-bubble {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-bottom-right-radius: 2px;
}
.chat-msg.assistant .chat-bubble {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 2px;
}
.chat-msg.system .chat-bubble {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: .8rem;
  text-align: center;
}

/* Apparaatkeuze in de chat (aa-WERKORDER-chat-interface): knoppenrij als meerdere apparaten
   matchen op naam/hostname in de chattekst. */
.chat-device-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-top: .4rem;
}
.chat-device-pick {
  min-height: 36px;
  padding: .3rem .7rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.chat-device-pick:hover:not(:disabled) { filter: brightness(1.08); }
.chat-device-pick:disabled { opacity: .5; cursor: default; }

/* Auditbewijs bij een commandoresultaat (F2-CORE-EVIDENCE-014, issue #257): "Bekijk
   auditbewijs"-knop onder het resultaatbericht, plus de gewhiteliste auditvelden zelf zodra ze
   opgehaald zijn. .kv voor de velden zelf komt uit console.css (globaal al geladen). */
.chat-audit { margin-top: .5rem; }
.chat-audit-view {
  min-height: 36px;
  padding: .25rem .65rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.chat-audit-view:hover:not(:disabled) { border-color: var(--color-accent); }
.chat-audit-view:disabled { opacity: .5; cursor: default; }
.chat-audit-status { margin: .4rem 0 0; font-size: .78rem; color: var(--color-text-muted); }
.chat-audit-error { color: var(--color-danger); }
.chat-audit-detail { margin-top: .4rem; }

/* Bugmelding Lars (live testomgeving, "vreemd vak" rond de chatbalk): deze rij had een eigen
   achtergrond (--color-bg-surface, net iets lichter dan de paginakleur --color-bg-base) plus een
   border-top-lijn. Zolang #zone-chat edge-to-edge liep viel dat kleurverschil niet op (de rij vulde
   toch de hele breedte van het scherm). Sinds PR #665 is #zone-chat (de enige ouder van deze rij)
   begrensd tot max-width: 840px en gecentreerd (ui2-workspace.css) op brede schermen: dezelfde,
   nu te korte kleurband/rand kreeg daardoor zichtbare linker- en rechterranden en oogde als een
   losstaand rechthoekig vak onderin het scherm, los van de berichtenlijst erboven (die zelf geen
   eigen achtergrond heeft en dus altijd al naadloos in de paginakleur --color-bg-base opgaat).
   Oplossing: de chatbalk krijgt hier geen eigen achtergrond/randlijn meer en gaat zo, ongeacht de
   breedte van #zone-chat, altijd naadloos op in dezelfde paginakleur als de berichtenlijst erboven.
   De bedoelde, losse pil-vormige rand blijft gewoon staan: die hoort bij het invoerveld zelf
   (.ui2-chat-composer-input, ui2-components.css) en wordt hier niet aangeraakt. */
.chat-input-row {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem;
  background: transparent;
}
/* Het tekstveld en de ronde, ingebedde verstuurknop (Claude Code-stijl) zijn een gedeelde
   basiscomponent (.ui2-chat-composer*, ui2-components.css, zie
   docs/ui/core-ui-2-0-shell-contract.md), zodat een tweede of derde chatbalk dezelfde opmaak
   automatisch hergebruikt. shell.css levert hier alleen nog de buitenste rijopmaak (padding/gap)
   die specifiek is voor deze chat-first-zone. */

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Versie-indicator (REQ 064): klein en gedempt, rechtsonder, negeert klikken. */
#amigero-version { position: fixed; right: .5rem; bottom: .35rem; font-size: .68rem; font-family: ui-monospace, monospace; color: var(--color-text-muted); opacity: .55; pointer-events: none; z-index: 3; }

/* CMD-0017, testmatrix 360/768: onder 1024px klappen de vier zones naar tabbladen, een zone
   tegelijk zichtbaar, met de chat als standaardtab (Shell.state.zone, shell.js), zodat 360px en
   768px allebei chat als primaire, direct zichtbare werkplek tonen ("chat blijft primair",
   contextlijst/detail bereikbaar via de tabbalk in plaats van als vaste kolom). Boven 1024px
   staan alle vier zones naast elkaar (zie .shell hierboven), passend bij het 1440px-doelscherm. */
@media (max-width: 1023px) {
  .shell-header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: .4rem;
  }
  .shell-header-title { grid-column: 1; }
  .shell-header-actions { grid-column: 1; justify-self: center; }

  .tabbar { display: flex; }
  .shell { display: block; }
  .zone {
    display: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    min-height: calc(100vh - 10rem);
  }
  .zone.zone-active { display: block; }
  #zone-chat.zone-active { display: flex; flex-direction: column; }
  /* Zelfde aangepaste waarde als .zone's eigen min-height hierboven: onder 1024px neemt de
     tabbar extra ruimte bovenaan in, dus de iframe moet hier evenveel korter zijn als .zone dat
     zelf al is. */
  .tickets-iframe { height: calc(100vh - 10rem); }
}

/* Schermen (Dashboard, Apparaten, Tickets, etc.) */
.dashboard, .tenants-view, .settings-view, .devices-view, .operators-view {
  padding: 1rem;
}

.dashboard h2, .tenants-view h2, .settings-view h2, .devices-view h2, .operators-view h2 {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
}

.stat-value.stat-ok { color: var(--color-success); }
.stat-value.stat-bad { color: var(--color-danger); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  padding: 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
}

.activity-section {
  margin-top: 2rem;
}

.activity-section h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.activity-type {
  font-weight: 600;
  color: var(--color-accent);
}

.activity-time {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.tenant-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tenant-item {
  padding: 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.tenant-item:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-tertiary);
}

.tenant-item.active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.tenant-name-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.3rem;
  font: inherit;
  font-weight: 600;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
}
.tenant-name-btn:hover { color: var(--color-accent); }

.tenant-stats {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* Deployment keys per klant (REQ 095). */
.tenant-keys {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--color-border);
}

.tenant-keys-title {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.key-empty {
  margin: 0 0 .5rem;
  font-size: .82rem;
}

.key-list {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.key-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
}

.key-purpose { font-weight: 600; }

.key-pill {
  padding: .05rem .5rem;
  border-radius: var(--radius-md);
  font-size: .68rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.key-pill-active { color: var(--color-success); border-color: var(--color-success); }
.key-pill-expired, .key-pill-revoked, .key-pill-exhausted { color: var(--color-text-muted); }

.key-meta {
  color: var(--color-text-secondary);
  font-size: .78rem;
}

.key-revoke-btn {
  margin-left: auto;
  min-height: 36px;
  padding: .15rem .55rem;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}
.key-revoke-btn:hover:not(:disabled) { border-color: var(--color-danger); color: var(--color-danger); }
.key-revoke-btn:disabled { opacity: .6; cursor: default; }

.device-detail-actions {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}

.key-create-row {
  display: flex;
  gap: .5rem;
}

.key-purpose-input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: .3rem .6rem;
  font: inherit;
  font-size: .82rem;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.key-create-row .btn-primary {
  min-height: 36px;
  padding: 0 .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.key-create-row .btn-primary:hover { filter: brightness(1.08); }

.key-secret-msg {
  margin: .4rem 0 0;
  font-size: .78rem;
  min-height: 1.1rem;
}
.key-secret-msg.key-secret {
  padding: .4rem .6rem;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  word-break: break-all;
}
.key-secret-msg.key-error { color: var(--color-danger); }

.settings-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

.settings-section h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.settings-section label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.settings-section input[type="checkbox"] {
  min-width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Pager (Klanten-scherm, schaalbaarheidsfix): Vorige/Volgende over gepagineerde lijsten. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.pager-btn {
  min-height: 40px;
  padding: .3rem .9rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pager-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.pager-btn:disabled { opacity: .5; cursor: default; }

.pager-info {
  font-size: .82rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Operators (pakket 4): operatoraccounts beheren. */
.operator-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.operator-name {
  font-weight: 600;
  font-size: 1rem;
}

.operator-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.operator-create-form input,
.operator-create-form select {
  flex: 1;
  min-width: 160px;
  min-height: 38px;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.operator-create-form .btn-primary {
  flex-basis: 100%;
  min-height: 38px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.operator-create-form .btn-primary:hover { filter: brightness(1.08); }

.operator-tenant-picker-wrap {
  flex-basis: 100%;
}

.operator-tenant-picker {
  flex-basis: 100%;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
}

.operator-tenant-picker legend {
  padding: 0 0.3rem;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.operator-tenant-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0.8rem 0.25rem 0;
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.operator-tenant-empty {
  flex-basis: 100%;
  font-size: 0.82rem;
}

.operator-create-msg {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  min-height: 1.1rem;
}
.operator-create-msg.key-error { color: var(--color-danger); }

.operator-role-picker {
  flex-basis: 100%;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
}

.operator-role-picker legend {
  padding: 0 0.3rem;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.operator-role-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0.8rem 0.25rem 0;
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.operator-edit-msg,
.operator-reset-msg,
.operator-delete-msg {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  min-height: 1.1rem;
}
.operator-edit-msg.key-error,
.operator-reset-msg.key-error,
.operator-delete-msg.key-error { color: var(--color-danger); }

.loading, .error {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-secondary);
}

.error {
  color: var(--color-danger);
}

/* Deployment keys en MSI & uitrol (REQ 104): klantkiezer boven een scherm dat zich richt op
   één klant tegelijk, in dezelfde stijl als de keys-widget in het Klanten-scherm hierboven. */
.keys-view, .msi-view {
  padding: 1rem;
}

.keys-view h2, .msi-view h2 {
  margin: 0 0 .3rem;
}

.tenant-picker-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 1.5rem;
}

.tenant-picker-label {
  font-size: .85rem;
  color: var(--color-text-secondary);
}

/* Positioneringscontext voor de eigen pijl (::after hieronder): een <select> zelf kan geen
   betrouwbare ::after tonen op elk platform, dus deze wrapper draagt de pijl in plaats daarvan.
   flex/max-width stonden voorheen op .tenant-picker zelf; die horen nu bij de wrapper, de select
   erin is altijd 100% breed. */
.tenant-picker-wrap {
  position: relative;
  flex: 1;
  max-width: 16rem;
}

/* Eigen, kleine pijl in de themakleur (--color-accent), via mask-image + background-color in
   plaats van een SVG met een vast ge-hardcodede hexkleur: een skin (skins/light.css, skins/dark.css)
   herdefinieert UITSLUITEND tokens (REQ 117/D-048), nooit selectors, dus de pijlkleur moet met
   --color-accent meelopen. light.css gebruikt bewust een andere, donkerdere waarde dan dark.css
   omdat platte amber op een licht oppervlak onvoldoende contrast geeft (zie het bestandscommentaar
   daar); een vast ingebakken hexkleur in shell.css zou dat altijd negeren. */
.tenant-picker-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: .7rem;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background-color: var(--color-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.tenant-picker {
  width: 100%;
  min-height: 36px;
  padding: .3rem 1.8rem .3rem .6rem;
  font-size: .85rem;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Verwijdert de OS-standaardweergave (in Chrome/Edge: een brede, vlakke witte balk die niet
     bij de rest van het brandsysteem past) zodat alleen onze eigen rand/achtergrond/radius
     overblijven; de pijl zelf komt van .tenant-picker-wrap::after hierboven. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.tenant-picker:hover {
  border-color: var(--color-accent);
}

.msi-step-title {
  margin: 1.5rem 0 .6rem;
  font-size: .95rem;
}

.msi-download-link {
  display: inline-block;
  min-height: 36px;
  padding: .4rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.msi-download-link:hover { filter: brightness(1.08); }

.release-block {
  margin-bottom: 1rem;
}

.release-block-title {
  margin: 0 0 .4rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
}

.release-sha256 {
  margin: .4rem 0 0;
  font-size: .78rem;
  word-break: break-all;
}

.msi-command-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: .5rem 0;
}

.msi-command {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  word-break: break-all;
}

.msi-command-row .btn-primary {
  min-height: 36px;
  padding: 0 .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.msi-command-row .btn-primary:hover { filter: brightness(1.08); }

.msi-steps {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .85rem;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* Audit-log en Versies (REQ 103): rijstijl gelijk aan de audit-/commandolijst van het
   apparaatdetail (console.css), los daarvan gedefinieerd zodat dat bestand niet hoeft te
   wijzigen voor deze twee schermen. */
.log-list, .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.log-row, .version-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
  font-size: .82rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
}
.log-row:last-child, .version-row:last-child { border-bottom: none; padding-bottom: 0; }

.log-type, .version-name { font-weight: 600; }
.log-summary { flex-basis: 100%; }
.log-time { margin-left: auto; }

/* Update-rollout per ring (REQ 281), op het scherm Versies. Zelfde rijopmaak als de versielijst
   hierboven, met een knop rechts en een waarschuwingsregel erboven wanneer een ring gepauzeerd staat
   of wanneer er nog met de tijdelijke ondertekensleutel wordt gewerkt. */
.rollout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.rollout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  font-size: .82rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
}
.rollout-row:last-child { border-bottom: none; padding-bottom: 0; }

.rollout-name { font-weight: 600; }

.rollout-toggle {
  margin-left: auto;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-sm, 6px);
  padding: .25rem .7rem;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.rollout-toggle:hover:not(:disabled) { border-color: var(--color-accent); }
.rollout-toggle:disabled { opacity: .6; cursor: default; }

.rollout-warning {
  margin: 0 0 .6rem;
  padding: .5rem .7rem;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  font-size: .82rem;
}

@media (max-width: 1023px) {
  .rollout-list { gap: .4rem; }
  .rollout-row { font-size: .75rem; align-items: flex-start; flex-direction: column; gap: .25rem; padding-bottom: .4rem; }
  .rollout-toggle { margin-left: 0; }
}

/* Zelfde drempel als de zone-inklap hierboven (1023px): onder die breedte is een zone al een
   volle-breedte tabblad, niet een kolom naast drie andere, dus de rijen moeten al vanaf daar
   stapelen. De eerdere 767px-drempel liet dit tussen 768 en 1023px nog als brede rij staan,
   terwijl de beschikbare ruimte dan al net zo smal is als op een telefoon. */
@media (max-width: 1023px) {
  .log-list, .version-list { gap: .4rem; }
  .log-row, .version-row { font-size: .75rem; flex-direction: column; gap: .2rem; padding-bottom: .4rem; }
  .log-type, .version-name { font-size: .8rem; }
  .log-time { margin-left: 0; font-size: .7rem; color: var(--color-text-muted); }
}