/*
  Creative ZOO — delt komponentlag til interne værktøjer.
  Kræver tokens.css importeret FØR denne fil.
  Se BRAND.md "Komponenter" for hvornår hver klasse bruges og markup-eksempler.

  Alle klasser er præfikset "czoo-" for at undgå kollision med et projekts
  egne klassenavne eller et importeret komponentbibliotek. Denne fil er
  bevidst adskilt fra tokens.css: tokens.css er rene farve-/font-primitiver,
  komponenter er mere opinionerede og ændrer sig hyppigere — et projekt der
  fx bruger shadcn/Tailwind kan importere kun tokens.css og springe denne fil over.
*/

/* ---------- Knap ---------- */

.czoo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--czoo-space-2xs);
  min-height: 2.5rem;
  padding: var(--czoo-space-2xs) var(--czoo-space-lg);
  border-radius: var(--czoo-radius-pill);
  border: 1px solid transparent;
  font-family: var(--czoo-font-sans);
  font-weight: 700;
  font-size: var(--czoo-fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--czoo-duration-base) var(--czoo-ease-standard),
              border-color var(--czoo-duration-base) var(--czoo-ease-standard);
}

.czoo-btn--primary {
  background: var(--czoo-vivid-blue);
  color: var(--czoo-hvid);
}

.czoo-btn--secondary {
  background: transparent;
  border-color: var(--czoo-text);
  color: var(--czoo-text);
}

.czoo-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--czoo-text);
}

.czoo-btn:focus-visible {
  outline: 2px solid var(--czoo-vivid-blue);
  outline-offset: 2px;
}

.czoo-btn[disabled] {
  background: var(--czoo-graa);
  border-color: var(--czoo-graa);
  color: var(--czoo-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Status/badge ---------- */
/* Generiske tilstandsnavne, delt kontrakt på tværs af alle interne værktøjer.
   VIGTIGT: --czoo-roed-vibrant bruges KUN som baggrund her, aldrig som
   tekst-/ikonfarve — målt kontrast som tekst er 2.67:1 på begge temaers
   baggrund, hvilket fejler WCAG AA. */

.czoo-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--czoo-space-3xs) var(--czoo-space-sm);
  border-radius: var(--czoo-radius-pill);
  font-family: var(--czoo-font-sans);
  font-weight: 900;
  font-size: var(--czoo-fs-xs);
  white-space: nowrap;
}

.czoo-status--active {
  background: var(--czoo-vivid-blue);
  color: var(--czoo-hvid);
}

.czoo-status--warning {
  background: var(--czoo-roed-vibrant);
  color: var(--czoo-off-black); /* aldrig hvid tekst her, se note ovenfor */
}

.czoo-status--neutral {
  background: transparent;
  border: 1px solid var(--czoo-border);
  color: var(--czoo-text);
}

/* ---------- Progress/meter ---------- */
/* --czoo-meter-value drives både den visuelle bredde og skal sættes til
   samme tal som aria-valuenow på wrapperen, så de aldrig kan drifte ud af
   sync med hinanden. */

.czoo-meter {
  height: 0.5rem;
  border-radius: var(--czoo-radius-pill);
  background: transparent;
  border: 1px solid var(--czoo-border);
  overflow: hidden;
}

.czoo-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: var(--czoo-meter-value, 0%);
  background: var(--czoo-vivid-blue);
  transition: width var(--czoo-duration-base) var(--czoo-ease-standard);
}

.czoo-meter__fill--warning {
  background: var(--czoo-roed-vibrant); /* over-kapacitet/risiko, genbruger status-vokabularet */
}

/* Markup:
   <div class="czoo-meter" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">
     <span class="czoo-meter__fill" style="--czoo-meter-value:62%"></span>
   </div>
*/

/* ---------- Tabel ---------- */
/* Ægte <table>-markup, ikke CSS-grid-div'er — native semantik virker med
   skærmlæsere uden manuel ARIA-patching. Zebra-striping er default TIL
   (matcher CZOO's egne Keynote-facit-dashboards, se BRAND.md
   "Zebra-striping vs. elevation" for hvorfor det IKKE er i konflikt med
   "ingen elevation"-reglen for kort/paneler). */

.czoo-table {
  width: 100%;
  border-collapse: collapse;
}

.czoo-table th,
.czoo-table td {
  padding: var(--czoo-space-sm) var(--czoo-space-md);
  border-top: 1px solid var(--czoo-border);
  text-align: left;
}

.czoo-table th {
  font-size: var(--czoo-fs-2xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--czoo-text);
}

.czoo-table td {
  font-weight: 700;
  color: var(--czoo-text);
}

.czoo-table tbody tr:nth-child(odd) {
  background: var(--czoo-surface-zebra);
}

/* Modifier hvis et projekt konkret IKKE skal have zebra-striping */
.czoo-table--flat tbody tr:nth-child(odd) {
  background: transparent;
}

/* Solid, farvet header-bjælke — alternativ til den almindelige th-stil,
   matcher CZOO's Keynote-facit ("solide farvede header-bjælker"). */
.czoo-table__head--solid th {
  background: var(--czoo-off-black);
  color: var(--czoo-hvid);
  border-top: none;
}

/* Mobil: stables som kort under 480px. Sæt data-label="Kolonnenavn" på hver
   <td> for at vise labelen foran værdien. */
@media (max-width: 480px) {
  .czoo-table--stack thead {
    display: none;
  }
  .czoo-table--stack,
  .czoo-table--stack tbody,
  .czoo-table--stack tr,
  .czoo-table--stack td {
    display: block;
    width: 100%;
  }
  .czoo-table--stack tr {
    border-top: 1px solid var(--czoo-border);
    padding: var(--czoo-space-sm) 0;
  }
  .czoo-table--stack td {
    border-top: none;
    padding: var(--czoo-space-3xs) 0;
  }
  .czoo-table--stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--czoo-fs-2xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--czoo-text-muted);
  }
}

/* ---------- Formular-felt ---------- */

.czoo-field {
  display: grid;
  gap: var(--czoo-space-3xs);
}

.czoo-field__label {
  font-weight: 700;
  font-size: var(--czoo-fs-sm);
  color: var(--czoo-text);
}

.czoo-input {
  min-height: 2.5rem;
  padding: var(--czoo-space-2xs) var(--czoo-space-sm);
  border: 1px solid var(--czoo-border);
  border-radius: var(--czoo-radius-control);
  background: var(--czoo-surface);
  color: var(--czoo-text);
  font-family: var(--czoo-font-sans);
  font-size: var(--czoo-fs-base);
}

.czoo-input::placeholder {
  color: var(--czoo-text-muted); /* dokumenteret 2. tilladte brug af muted, ud over brødtekst-sætninger */
}

.czoo-input:focus-visible {
  outline: 2px solid var(--czoo-vivid-blue);
  outline-offset: 2px;
}

.czoo-input[disabled] {
  background: var(--czoo-graa);
  color: var(--czoo-text-muted);
  cursor: not-allowed;
}

.czoo-field--error .czoo-input {
  border-color: var(--czoo-roed-vibrant);
}

.czoo-field__hint {
  font-size: var(--czoo-fs-xs);
  color: var(--czoo-text); /* IKKE --czoo-roed-vibrant som tekstfarve, se kontrast-note i status-sektionen */
}

/* ---------- KPI-grid ---------- */
/* Hairline-divider-mønster: uafhængigt genopfundet næsten identisk i to
   testprojekter (gap:1px + baggrund i --czoo-border simulerer en tynd
   skillelinje mellem felter uden faktiske border-deklarationer per felt). */

.czoo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--czoo-border);
  border: 1px solid var(--czoo-border);
}

.czoo-kpi-tile {
  background: var(--czoo-surface);
  padding: var(--czoo-space-lg);
}

.czoo-kpi-tile__label {
  margin: 0 0 var(--czoo-space-2xs);
  font-weight: 700;
  font-size: var(--czoo-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--czoo-text);
}

.czoo-kpi-tile__value {
  margin: 0;
  font-family: var(--czoo-font-sans);
  font-weight: 900;
  font-size: var(--czoo-fs-3xl);
  line-height: 1.1;
  color: var(--czoo-text);
}

.czoo-kpi-tile__meta {
  margin: var(--czoo-space-2xs) 0 0;
  font-size: var(--czoo-fs-sm);
  color: var(--czoo-text); /* ikke muted — det er en datapunkt-caption, ikke en sætning */
}

@media (max-width: 960px) {
  .czoo-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .czoo-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Ikon ---------- */
/* Ikoner ligger i Icons/ som individuelle SVG-filer, allerede normaliseret
   til currentColor. Inlin altid selve <svg>-markuppen i HTML/JSX — brug
   ALDRIG <img src="Icons/X.svg"> (arver ikke currentColor gennem <img>) og
   farvelæg aldrig med CSS filter. Se BRAND.md "Ikoner". */

.czoo-icon {
  width: var(--czoo-icon-size-md);
  height: var(--czoo-icon-size-md);
  flex-shrink: 0;
}

.czoo-icon--sm {
  width: var(--czoo-icon-size-sm);
  height: var(--czoo-icon-size-sm);
}

.czoo-icon--lg {
  width: var(--czoo-icon-size-lg);
  height: var(--czoo-icon-size-lg);
}

.czoo-icon--inverse {
  color: var(--czoo-hvid); /* til ikoner placeret fast på en farvet/mørk cirkel el. lign. */
}

/* Spinner — den ene undtagelse hvor et timing-token ikke er en transition. */
.czoo-spin {
  animation: czoo-spin var(--czoo-duration-spinner) linear infinite;
}

@keyframes czoo-spin {
  to {
    transform: rotate(360deg);
  }
}