/*
 * UI 2.0 basiscomponenten (REQ 300, CMD-0044, funderingspakket Command Center UI 2.0).
 *
 * Herbruikbare, tokengedreven bouwstenen (knoppen, velden, kaarten, tabellen, badges, banners,
 * modals, toasts, empty states, skeletons, foutpresentatie), los van elke schermspecifieke opmaak.
 * Alle klassen dragen bewust het voorvoegsel "ui2-" zodat ze nooit botsen met de bestaande
 * klassen in shell.css/console.css (bijvoorbeeld ".btn-primary", ".badge"): dit is een nieuwe,
 * ernaast bestaande laag, geen herschrijving van de bestaande schermen. Zie
 * docs/ui/core-ui-2-0-shell-contract.md voor het volledige contract richting toekomstige slices.
 *
 * Uitsluitend tokens uit tokens.css/skins/*.css, geen eigen kleur-, ruimte- of schaduwwaarden.
 */

/* --- Knoppen --------------------------------------------------------------------------------- */

.ui2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: 40px;
  padding: 0 var(--spacing-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ui2-btn:disabled { opacity: .55; cursor: default; }

.ui2-btn-sm { min-height: 32px; padding: 0 var(--spacing-3); font-size: var(--font-size-xs); }

.ui2-btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.ui2-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.ui2-btn-primary:active:not(:disabled) { background: var(--color-accent-pressed); }

.ui2-btn-secondary {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.ui2-btn-secondary:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }

.ui2-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.ui2-btn-ghost:hover:not(:disabled) { background: var(--color-bg-elevated); color: var(--color-text-primary); }

.ui2-btn-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.ui2-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--color-danger) 14%, transparent); }

.ui2-btn-icon {
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* --- Chatinvoer met ingebedde verstuurknop -------------------------------------------------------
   Gedeelde bouwsteen (zie docs/ui/core-ui-2-0-shell-contract.md): een tekstveld met een kleine,
   ronde verstuurknop rechts IN het veld zelf (Claude Code-stijl), in plaats van een losse
   "Verstuur"-tekstknop ernaast. Eén set klassen voor elke chatbalk in de app, vandaag gebruikt
   door shell.js' Chat.mount() (zie ui2-chat-composer.js voor de knopmarkup zelf) en bedoeld voor
   hergebruik door elke toekomstige chatbalk (bijv. een volgende kolom uit een vier-kolommenplan)
   zonder de HTML te kopieren. */

.ui2-chat-composer {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.ui2-chat-composer-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  /* Rechterpadding houdt het typvlak vrij van de knop (32px breed + 6px rand + wat lucht). */
  padding: .5rem 3rem .5rem .8rem;
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.ui2-chat-composer-input:disabled { opacity: .6; }

.ui2-chat-composer-send {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, opacity .15s ease;
}
.ui2-chat-composer-send:hover:not(:disabled) { filter: brightness(1.08); }
.ui2-chat-composer-send:active:not(:disabled) { background: var(--color-accent-pressed); }
.ui2-chat-composer-send:disabled { opacity: .6; cursor: default; }
.ui2-chat-composer-send-icon { pointer-events: none; }

/* --- Klikbare chatkeuzes (bevestigingsvragen) ----------------------------------------------------
   Gedeelde bouwsteen (zie docs/ui/core-ui-2-0-shell-contract.md, "Chatkeuzes"): vervangt de platte
   "Antwoord met 'ja' of 'nee'."-instructie door een verticale lijst klikbare keuzeknoppen, elk met
   een korte toelichting. Markup en gedrag komen uit ui2-chat-choices.js
   (ChatChoices.renderMessageHtml); dit blok bevat uitsluitend de stijl. Eén set klassen voor elke
   huidige of toekomstige bevestigingsvraag in de chat (device-actie, assistent-plan, en later
   andere modules), geen eigen stijl per aanroepplek. */

.ui2-chat-choices-prompt { margin-bottom: var(--spacing-2); }

.ui2-chat-choices-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ui2-chat-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ui2-chat-choice-btn:hover:not(:disabled) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-elevated)); }
.ui2-chat-choice-btn:disabled { opacity: .6; cursor: default; }
.ui2-chat-choice-btn.is-selected { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg-elevated)); }

.ui2-chat-choice-label { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.ui2-chat-choice-description { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* --- Formuliervelden -------------------------------------------------------------------------- */

.ui2-field { display: flex; flex-direction: column; gap: var(--spacing-1); }

.ui2-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.ui2-input,
.ui2-select,
.ui2-textarea {
  min-height: 40px;
  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);
  width: 100%;
  box-sizing: border-box;
}

.ui2-textarea { min-height: 96px; padding: var(--spacing-2) var(--spacing-3); resize: vertical; }

.ui2-input:disabled,
.ui2-select:disabled,
.ui2-textarea:disabled { opacity: .6; cursor: default; }

.ui2-input::placeholder,
.ui2-textarea::placeholder { color: var(--color-text-muted); }

.ui2-checkbox,
.ui2-radio { width: 18px; height: 18px; accent-color: var(--color-accent); }

.ui2-field-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.ui2-field-error { font-size: var(--font-size-xs); color: var(--color-danger); }

.ui2-field.has-error .ui2-input,
.ui2-field.has-error .ui2-select,
.ui2-field.has-error .ui2-textarea { border-color: var(--color-danger); }

/* --- Kaarten ----------------------------------------------------------------------------------- */

.ui2-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.ui2-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.ui2-card-body { padding: var(--spacing-4); }

.ui2-card-footer {
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--spacing-2);
  justify-content: flex-end;
}

/* --- Tabellen ------------------------------------------------------------------------------- */

.ui2-table-wrap { overflow-x: auto; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }

.ui2-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }

.ui2-table th,
.ui2-table td { padding: var(--spacing-2) var(--spacing-3); text-align: left; white-space: nowrap; }

.ui2-table thead th {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
}

.ui2-table tbody tr + tr { border-top: 1px solid var(--color-border-subtle); }
.ui2-table tbody tr:hover { background: var(--color-bg-tertiary); }

.ui2-table-empty td { text-align: center; color: var(--color-text-muted); padding: var(--spacing-8); white-space: normal; }

/* --- Badges -------------------------------------------------------------------------------- */

.ui2-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: .1rem var(--spacing-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ui2-badge-success { color: var(--color-success); border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); }
.ui2-badge-warning { color: var(--color-warning); border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.ui2-badge-danger  { color: var(--color-danger); border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.ui2-badge-info    { color: var(--color-info); border-color: var(--color-info); background: color-mix(in srgb, var(--color-info) 14%, transparent); }
.ui2-badge-neutral { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-bg-tertiary); }

/* --- Banners (paginabrede of sectiebrede meldingen) ------------------------------------------ */

.ui2-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.ui2-banner-icon { flex-shrink: 0; width: 20px; height: 20px; }
.ui2-banner-body { flex: 1; min-width: 0; }
.ui2-banner-title { font-weight: var(--font-weight-semibold); margin: 0 0 var(--spacing-1); }
.ui2-banner-close { flex-shrink: 0; }

.ui2-banner-success { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-elevated)); }
.ui2-banner-warning { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-elevated)); }
.ui2-banner-danger  { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-bg-elevated)); }
.ui2-banner-info    { border-color: var(--color-info); background: color-mix(in srgb, var(--color-info) 10%, var(--color-bg-elevated)); }

/* --- Modals -------------------------------------------------------------------------------- */

.ui2-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim-modal);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

.ui2-modal {
  z-index: var(--z-modal);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 32rem;
  width: 100%;
  max-height: calc(100vh - var(--spacing-8));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ui2-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ui2-modal-title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-md); }
.ui2-modal-body { padding: var(--spacing-4); overflow-y: auto; }
.ui2-modal-footer {
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
}

@media (prefers-reduced-motion: no-preference) {
  .ui2-modal-backdrop { animation: ui2-fade-in .15s ease; }
  .ui2-modal { animation: ui2-scale-in .15s ease; }
}

/* --- Toasts -------------------------------------------------------------------------------- */

.ui2-toast-region {
  position: fixed;
  right: var(--spacing-4);
  bottom: var(--spacing-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  max-width: min(24rem, calc(100vw - var(--spacing-8)));
}

.ui2-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
}

.ui2-toast-success { border-color: var(--color-success); }
.ui2-toast-warning { border-color: var(--color-warning); }
.ui2-toast-danger  { border-color: var(--color-danger); }
.ui2-toast-info    { border-color: var(--color-info); }

.ui2-toast-close { flex-shrink: 0; margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  .ui2-toast { animation: ui2-slide-in .18s ease; }
}

/* --- Empty states -------------------------------------------------------------------------- */

.ui2-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-4);
  color: var(--color-text-muted);
}

.ui2-empty-state-icon { width: 40px; height: 40px; opacity: .7; }
.ui2-empty-state-title { margin: 0; color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ui2-empty-state-description { margin: 0; font-size: var(--font-size-sm); max-width: 32rem; }

/* --- Skeletons (laadtoestanden) ------------------------------------------------------------- */

.ui2-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.ui2-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-text-primary) 8%, transparent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .ui2-skeleton::after { animation: ui2-shimmer 1.4s ease-in-out infinite; }
}

.ui2-skeleton-text { height: .875rem; margin: var(--spacing-1) 0; }
.ui2-skeleton-title { height: 1.25rem; width: 40%; margin: var(--spacing-2) 0; }
.ui2-skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); }
.ui2-skeleton-card { height: 6rem; border-radius: var(--radius-md); }

/* --- Foutpresentatie ------------------------------------------------------------------------ */

.ui2-error-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-elevated));
  color: var(--color-text-primary);
}

.ui2-error-state-title { margin: 0; font-weight: var(--font-weight-semibold); color: var(--color-danger); }
.ui2-error-state-description { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* --- Focus, gedeeld door alle ui2-componenten --------------------------------------------------- */

.ui2-btn:focus-visible,
.ui2-input:focus-visible,
.ui2-select:focus-visible,
.ui2-textarea:focus-visible,
.ui2-checkbox:focus-visible,
.ui2-radio:focus-visible,
.ui2-chat-composer-input:focus-visible,
.ui2-chat-composer-send:focus-visible,
.ui2-chat-choice-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Animaties (uitgeschakeld onder prefers-reduced-motion, zie hierboven per component) ------- */

@keyframes ui2-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui2-scale-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes ui2-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui2-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }