/* Spudolab — delt stylesheet.
   Implementerer SpudoCRM v3 designsystem. Se DESIGN.md.
   Eneste kilde til tokens. Kopiér aldrig disse værdier ind i en side.

   Stakken her er statisk HTML/CSS — MUI-mønstre fra handoff-dokumentet
   er oversat til klasser. Udtrykket skal være identisk. */

/* ── 1. Tokens ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --spudo-green:      #00A76F;
  --spudo-green-deep: #077368;
  --accent-mint:      #5BE49B;

  /* Status — bruges som rgba(...,.2) baggrund + solid forgrund */
  --status-green:     #5BE49B;
  --status-cyan:      #61F3F3;
  --status-amber:     #FFC44E;
  --status-blue:      #58A6FF;
  --status-red:       #FF5630;
  --status-purple:    #C684FF;
  --status-teal-mint: #7FE0D0;

  /* Tekst på mørk baggrund */
  --fg:          #ffffff;
  --fg-secondary: rgba(255, 255, 255, .75);
  --fg-tertiary:  rgba(255, 255, 255, .55);
  --fg-disabled:  rgba(255, 255, 255, .45);

  /* Kanter — gennemsigtige lag over sidegradienten */
  --border-subtle:  rgba(255, 255, 255, .06);
  --border-default: rgba(255, 255, 255, .1);
  --border-strong:  #FFFFFF29;   /* = rgba(255,255,255,.16) */

  /* Flader */
  --backdrop-subtle:  rgba(255, 255, 255, .03);
  --backdrop-default: rgba(255, 255, 255, .05);
  --backdrop-heavy:   rgba(255, 255, 255, .08);
  --backdrop-input:   rgba(255, 255, 255, .08);

  /* Menu-popover — dybere mættet end siden */
  --menu-bg: #004B50;

  /* Afstand */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;

  /* Radius */
  --radius-sm: 4px;   /* chips */
  --radius-md: 8px;   /* input, små wrappers */
  --radius-lg: 16px;  /* kort — 0 på mobil */

  --font: var(--font-public-sans, "Public Sans"), -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ── 2. Lærredet ─────────────────────────────────────────────────
   Sidegradienten spænder over hele viewporten og er ALTID baggrunden.
   Ingen flade ensfarvede flader. Kort svæver ovenpå med gennemsigtighed
   og blur. `fixed` gør, at gradienten dækker viewporten uanset hvor
   lang siden er, i stedet for at gentage sig. */
html { background-color: #0a131c; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg,
    #06181c 0%,
    #082025 12%,
    #1a5640 45%,
    #103930 70%,
    #091d22 88%,
    #0a131c 100%);
  background-attachment: fixed;
  color: var(--fg);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

:where(a) { color: var(--accent-mint); text-decoration: none; }
:where(a):hover { text-decoration: underline; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-mint);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* ── 3. Typografi ────────────────────────────────────────────────
   Hård regel: aldrig under 14px i primære flader. 12–13px er
   forbeholdt sekundære hints, badge-tal og undertekster. */
h1 { margin: 0; font-size: 20px; font-weight: 700; }
h2 { margin: 0 0 var(--gap-md); font-size: 18px; font-weight: 700; }
h3 { margin: 0; font-size: 16px; font-weight: 700; }

.lede { margin: var(--gap-xs) 0 0; color: var(--fg-secondary); font-size: 14px; }
.hint { color: var(--fg-tertiary); font-size: 13px; }

/* ── 4. Layout ───────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.content { flex: 1 1 auto; min-width: 0; }

.page {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--gap-lg);
}
.page--wide { max-width: 2200px; }

@media (max-width: 640px) {
  .page { padding: var(--gap-md) 0; }
}

/* ── 4b. Sidebar ─────────────────────────────────────────────────
   Gennemsigtig oven på sidegradienten — ingen streger. Ingen kant,
   ingen skillelinjer mellem punkter. Aktiv tilstand markeres med en
   blød flade og mint tekst, ikke med en ramme. */
.sidebar {
  flex: 0 0 240px;
  width: 240px;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  padding: var(--gap-lg) var(--gap-md);
  background: none;
  border: none;
}

.sidebar__brand {
  padding: 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
}
.sidebar__brand:hover { text-decoration: none; }

.nav { display: flex; flex-direction: column; gap: var(--gap-xs); }

.nav__label {
  padding: 0 12px;
  margin-bottom: var(--gap-xs);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--fg-disabled);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--fg-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}
.nav__item:hover {
  color: var(--accent-mint);
  background-color: var(--backdrop-default);
  text-decoration: none;
}
.nav__item.is-active {
  color: var(--accent-mint);
  background-color: var(--backdrop-heavy);
}

.sidebar__foot { margin-top: auto; }

/* Hamburger — kun på mobil */
.nav-toggle { display: none; }
.nav-open {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--fg);
  font-size: 20px;
  cursor: pointer;
}
.nav-scrim { display: none; }

@media (max-width: 900px) {
  .nav-open { display: inline-flex; }

  /* Drawer genbruger PRÆCIS samme gradient som siden, så den føles
     hæftet på i stedet for at være et fremmed panel. */
  .sidebar {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
    background: linear-gradient(180deg,
      #06181c 0%, #082025 12%, #1a5640 45%,
      #103930 70%, #091d22 88%, #0a131c 100%);
  }

  .nav-toggle:checked ~ .shell .sidebar { transform: translateX(0); }

  .nav-toggle:checked ~ .shell .nav-scrim {
    display: block;
    position: fixed;
    z-index: 10;
    inset: 0;
    background-color: rgb(0 0 0 / .5);
  }
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-wrap: wrap;
  margin-bottom: var(--gap-lg);
  padding: 0 var(--gap-md);
}
@media (min-width: 641px) { .page-head { padding: 0; } }

.stack > * + * { margin-top: var(--gap-md); }

.hstack { display: flex; align-items: center; gap: var(--gap-sm); }

/* ── 5. Kort ─────────────────────────────────────────────────────
   Den gennemgående panel-wrapper. Gennemsigtig over sidegradienten
   med et blødt grønt diagonalt skær. */
.card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background-color: transparent;
  background-image: linear-gradient(141.24deg,
    rgba(30, 67, 72, .4) 20.94%,
    rgba(91, 228, 155, .4) 57.45%,
    rgba(30, 67, 72, .4) 90.62%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: var(--gap-lg);
}

.card__body { padding: var(--gap-md); }

/* Lysere variant til header-kort */
.card--header {
  background-image: linear-gradient(141.24deg,
    rgba(30, 67, 72, .5) 0%,
    rgba(91, 228, 155, .45) 50%,
    rgba(30, 67, 72, .5) 100%);
}

/* Kant til kant på mobil */
@media (max-width: 640px) {
  .card { border-radius: 0; border-left: none; border-right: none; }
}

/* ── 6. Chips ────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--gap-sm);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.chip--green  { background-color: rgb(91 228 155 / .2);  color: var(--status-green); }
.chip--cyan   { background-color: rgb(97 243 243 / .2);  color: var(--status-cyan); }
.chip--amber  { background-color: rgb(255 196 78 / .2);  color: var(--status-amber); }
.chip--blue   { background-color: rgb(88 166 255 / .2);  color: var(--status-blue); }
.chip--red    { background-color: rgb(255 86 48 / .2);   color: var(--status-red); }
.chip--purple { background-color: rgb(198 132 255 / .2); color: var(--status-purple); }
.chip--teal   { background-color: rgb(127 224 208 / .2); color: var(--status-teal-mint); }
.chip--muted  { background-color: var(--backdrop-heavy);  color: var(--fg-secondary); }

/* ── 7. Tabeller ─────────────────────────────────────────────────
   Stiplede cellelinjer er bevidst — det er dem, der adskiller vores
   tabeller fra standardkomponenter. */
.table-wrap { overflow-x: auto; }

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

.table th {
  background-color: var(--backdrop-heavy);
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
  padding: 10px var(--gap-md);
  white-space: nowrap;
}

.table td {
  border-bottom: 1px dashed var(--border-strong);
  padding: 10px var(--gap-md);
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
}

.table tbody tr:hover { background-color: var(--backdrop-heavy); }
.table tbody tr:last-child td { border-bottom: none; }

.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }

/* ── 8. Knapper ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  height: 36px;
  padding: 0 var(--gap-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  font: 600 14px/1 var(--font);
  color: var(--fg);
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out,
              border-color 120ms ease-out;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--block { width: 100%; }

/* Gem-handlinger bærer Spudo-grøn. Maks én pr. skærm. */
.btn--primary {
  background: linear-gradient(135deg, var(--spudo-green) 0%, var(--spudo-green-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 167 111 / .35);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn--secondary {
  background-color: var(--backdrop-heavy);
  border-color: var(--border-strong);
}
.btn--secondary:hover:not(:disabled) { background-color: rgb(255 255 255 / .12); }

.btn--quiet { color: rgb(255 255 255 / .7); }
.btn--quiet:hover:not(:disabled) { color: var(--accent-mint); }

.btn--danger { background-color: rgb(255 86 48 / .2); color: var(--status-red); }
.btn--danger:hover:not(:disabled) { background-color: rgb(255 86 48 / .3); }

/* Ikonknapper: mint på positive handlinger, rød på destruktive.
   Destruktive ikonknapper SKAL have en tooltip (title-attribut). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: rgb(255 255 255 / .7);
  cursor: pointer;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}
.icon-btn:hover { color: var(--accent-mint); background-color: var(--backdrop-heavy); }
.icon-btn--danger:hover { color: var(--status-red); }

/* ── 9. Formularer ───────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--gap-xs); }

.label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--fg-secondary);
}

.input, .select {
  width: 100%;
  padding: var(--gap-sm) 12px;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--backdrop-input);
  color: var(--fg);
  font: 400 14px/1.5 var(--font);
}
.input::placeholder { color: var(--fg-disabled); }

/* Popover-menuer bruger den dybere teal, ikke sidegradienten. */
.menu {
  background-color: var(--menu-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--gap-xs) 0;
}
.menu__item {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding: var(--gap-sm) var(--gap-md);
  color: var(--fg);
  font-size: 14px;
  cursor: pointer;
}
.menu__item:hover { background-color: var(--border-default); }
.menu__item-label { font-weight: 700; }
.menu__item-hint { color: var(--fg-tertiary); font-size: 12px; }

/* ── 10. Beskeder ────────────────────────────────────────────────
   Systemets jubelstemme: Spudo-grøn gradientpille. */
.toast {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.toast--success {
  background: linear-gradient(135deg, var(--spudo-green) 0%, var(--spudo-green-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 167 111 / .35);
}
.toast--error {
  background-color: rgb(255 86 48 / .2);
  color: var(--status-red);
}

/* ── 11. Tilstande ───────────────────────────────────────────────
   Hver datahentende komponent skal dække alle fire:
   henter, tom, fejl, fyldt. */
.skeleton {
  background-color: var(--backdrop-heavy);
  border-radius: var(--radius-sm);
  height: 1em;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .5; } }

.empty, .error-state {
  padding: 40px var(--gap-md);
  text-align: center;
  color: var(--fg-tertiary);
  font-size: 14px;
}
.empty__title, .error-state__title {
  margin-bottom: var(--gap-xs);
  color: var(--fg);
  font-size: 16px;
  font-weight: 700;
}
.empty__action, .error-state__action { margin-top: var(--gap-md); }

.error-state__detail {
  margin-top: var(--gap-md);
  padding: var(--gap-sm) 12px;
  border-radius: var(--radius-md);
  background-color: rgb(255 86 48 / .2);
  color: var(--status-red);
  font-family: var(--mono);
  font-size: 13px;
  text-align: left;
  overflow-x: auto;
}

/* ── 12. Login ───────────────────────────────────────────────── */
.auth-body { display: grid; place-items: center; padding: var(--gap-md); }

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--gap-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background-image: linear-gradient(141.24deg,
    rgba(30, 67, 72, .5) 0%,
    rgba(91, 228, 155, .45) 50%,
    rgba(30, 67, 72, .5) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.auth-card .lede { margin-bottom: var(--gap-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}