/*
 * Command Center UI 2.0, ticketslice: layout-specifieke regels (Fase C, Tickets naar het
 * driepaneelpatroon van Apparaten/Klanten). Zelfde afspraak als ui2-devices.css: alle kleur-/
 * ruimte-/typografiewaarden komen uit tokens.css/skins/*.css, alle herbruikbare componenten
 * (badge, veld, skeleton, empty/error-state, knop) uit ui2-components.css; dit bestand bevat
 * uitsluitend de indeling die specifiek is voor deze slice.
 */

.ui2-tickets-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.ui2-tickets-search-field { flex: 1 1 14rem; min-width: 12rem; }
.ui2-tickets-filter-field { flex: 0 0 auto; min-width: 8rem; }
.ui2-tickets-sort-field { flex: 0 0 auto; min-width: 12rem; }

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

.ui2-tickets-row {
  cursor: pointer;
  padding: var(--spacing-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}
.ui2-tickets-row:hover { background: var(--color-bg-tertiary); }
.ui2-tickets-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.ui2-tickets-row-active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.ui2-tickets-row-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}
.ui2-tickets-title { font-weight: var(--font-weight-semibold); flex: 1 1 auto; min-width: 0; }
.ui2-tickets-number {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ui2-tickets-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}
.ui2-tickets-meta-item { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ui2-tickets-meta-updated { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: auto; }

.ui2-tickets-detail-pane {
  min-width: 0;
  padding: var(--spacing-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ui2-tickets-detail-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.ui2-tickets-badges {
  display: flex;
  gap: var(--spacing-2);
  margin: var(--spacing-2) 0 var(--spacing-3);
}

.ui2-tickets-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}
.ui2-tickets-inline-field { flex: 0 0 auto; min-width: 10rem; }

.ui2-tickets-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-3);
}
.ui2-tickets-field-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.ui2-tickets-detail-section {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border-subtle);
}
.ui2-tickets-detail-section-title {
  margin: 0 0 var(--spacing-2);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.ui2-tickets-activity-log {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}
.ui2-tickets-activity-item {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}
.ui2-tickets-activity-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--spacing-1); }

.ui2-tickets-add-note {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* REQ 512: aanmaakformulier en foutmeldingen in het detailpaneel. */
.ui2-tickets-create-bar { margin-bottom: var(--spacing-3); }

.ui2-tickets-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.ui2-tickets-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}