/* =====================================================================
   Den Lille Musikskole – CRM design-system (Fase 0)
   Husaestetik: Fraunces (overskrifter) + Spectral (broedtekst),
   messing-accent paa en lys, varm palet. Design-tokens foerst, derefter
   komponenter (knapper, kort, tabeller, badges/status-pills, nav, forms).
   ===================================================================== */

/* ---- Design-tokens ---- */
:root {
  /* Farver */
  --brass:        #b08d57;
  --brass-dark:   #8c6d3f;
  --brass-soft:   #e9dcc6;
  --ink:          #241f1a;
  --ink-soft:     #5b524a;
  --paper:        #faf6ef;
  --paper-2:      #f3ece0;
  --card:         #ffffff;
  --line:         #e4dac9;
  --line-strong:  #d2c4ab;

  /* Status */
  --ok:      #2a7d4f;
  --ok-bg:   #e2f1e8;
  --warn:    #9a6a12;
  --warn-bg: #f7ebd2;
  --danger:  #a3322a;
  --danger-bg:#f6e0dd;
  --info:    #2f5d86;
  --info-bg: #e1ebf4;
  --muted:   #6b6258;
  --muted-bg:#ece5d8;

  /* Typografi */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Spectral", Georgia, serif;

  /* Spacing-skala */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radius + skygge */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(36,31,26,.06), 0 6px 20px rgba(36,31,26,.06);
  --shadow-sm: 0 1px 2px rgba(36,31,26,.08);

  --maxw: 1180px;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; color: var(--ink); margin: 0 0 var(--sp-3); }
a { color: var(--brass-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
[x-cloak] { display: none !important; }

/* ---- Topbar / navigation ---- */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 20;
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-family: var(--font-head); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brass); color: #fff; font-size: 18px;
}
.brand__mark--lg { width: 56px; height: 56px; font-size: 30px; }
.brand__text { font-size: 18px; letter-spacing: .2px; }

.mainnav { display: flex; gap: var(--sp-1); flex: 1 1 auto; flex-wrap: wrap; }
.mainnav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: 15px;
}
.mainnav__link:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.mainnav__link.is-active { background: var(--brass-soft); color: var(--ink); font-weight: 600; }
.mainnav__icon { font-size: 15px; }

.topsearch__input {
  border: 1px solid var(--line-strong); background: var(--paper);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body); font-size: 15px; min-width: 160px;
}
.topsearch__input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* ---- Brugermenu ---- */
.usermenu { position: relative; }
.usermenu__button {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: none; border: 1px solid transparent; cursor: pointer;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.usermenu__button:hover { background: var(--paper-2); }
.usermenu__avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--brass-dark); color: #fff; font-size: 14px; font-weight: 600;
}
.usermenu__dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--sp-1); z-index: 30;
}
.usermenu__item {
  display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); color: var(--ink); font-size: 15px;
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
}
.usermenu__item:hover { background: var(--paper-2); text-decoration: none; }
.usermenu__item--button { color: var(--danger); }

/* ---- Indhold / layout ---- */
.content { flex: 1 1 auto; width: 100%; }
.content__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
.pagehead { margin-bottom: var(--sp-5); }
.pagehead__title { font-size: 30px; }
.pagehead__lead { color: var(--ink-soft); margin: 0; }

/* ---- Kort ---- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5);
}
.panel { margin-top: var(--sp-5); }
.panel__title { font-size: 20px; }
.panel__body { color: var(--ink-soft); margin: 0 0 var(--sp-4); }
.panel__meta { color: var(--muted); font-size: 14px; margin: 0; }
.panel__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.panel--placeholder { border-style: dashed; }

/* ---- KPI-kort ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.kpi { text-align: left; }
.kpi__value { font-family: var(--font-head); font-size: 34px; font-weight: 700; margin: 0 0 var(--sp-1); color: var(--brass-dark); }
.kpi__label { font-size: 15px; margin: 0; color: var(--ink); }
.kpi__hint { font-size: 13px; color: var(--muted); margin: var(--sp-1) 0 0; }

/* ---- Knapper ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--paper-2); text-decoration: none; }
.btn--primary { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--primary:hover { background: var(--brass-dark); border-color: var(--brass-dark); }
.btn--block { width: 100%; }

/* ---- Tabeller ---- */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.table thead th { font-family: var(--font-head); font-weight: 600; color: var(--ink-soft); background: var(--paper-2); }
.table tbody tr:hover { background: var(--paper); }

/* ---- Badges / status-pills ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.6;
}
.badge--ok     { background: var(--ok-bg);     color: var(--ok); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info   { background: var(--info-bg);   color: var(--info); }
.badge--muted  { background: var(--muted-bg);  color: var(--muted); }

/* ---- Flash-messages ---- */
.flash { max-width: var(--maxw); margin: var(--sp-4) auto 0; padding: 0 var(--sp-4); }
.flash__item { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); margin-bottom: var(--sp-2); border: 1px solid var(--line); background: var(--card); }
.flash__item--success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.flash__item--error   { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.flash__item--warning { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.flash__item--info    { background: var(--info-bg); border-color: var(--info); color: var(--info); }

/* ---- Forms ---- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.field__input {
  width: 100%; padding: var(--sp-3); font-family: var(--font-body); font-size: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper);
}
.field__input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* ---- Auth-side ---- */
.app--auth { background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%); }
.authwrap { min-height: calc(100vh - 120px); display: grid; place-items: center; padding: var(--sp-5); }
.authcard { width: 100%; max-width: 380px; }
.authcard__brand { text-align: center; margin-bottom: var(--sp-5); }
.authcard__brand .brand__mark--lg { margin: 0 auto var(--sp-3); }
.authcard__title { font-size: 22px; margin: 0; }
.authcard__sub { color: var(--ink-soft); margin: 4px 0 0; font-size: 14px; }
.authcard__error { background: var(--danger-bg); color: var(--danger); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: 14px; }

/* ---- Footer ---- */
.appfooter { border-top: 1px solid var(--line); background: var(--card); }
.appfooter__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-4); color: var(--muted); font-size: 14px; }

/* ---- Filter-bar ---- */
.filterbar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: var(--sp-4); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.filterbar__fields { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.filterfield { display: flex; flex-direction: column; gap: 4px; }
.filterfield__label { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.filterfield__input {
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body); font-size: 15px; min-width: 150px;
}
.filterfield__input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.filterfield--sm .filterfield__input { min-width: 110px; }
.filterfield--lg .filterfield__input { min-width: 240px; }
.filterbar__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.filterbar__count { color: var(--muted); font-size: 14px; margin-left: auto; }

/* ---- Pager ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin-top: var(--sp-4); }
.pager__info { color: var(--muted); font-size: 14px; }
.pager__links { display: flex; gap: var(--sp-2); }
.pager__btn { padding: var(--sp-1) var(--sp-3); font-size: 14px; }

/* ---- Faner (kind/tabs) ---- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tabs__link {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--ink-soft); font-size: 15px; border: 1px solid transparent; border-bottom: none;
}
.tabs__link:hover { background: var(--paper-2); text-decoration: none; }
.tabs__link.is-active { background: var(--card); border-color: var(--line); color: var(--ink); font-weight: 600; }
.tabs__count { color: var(--muted); font-size: 12px; }

/* ---- Detalje-layout (360°) ---- */
.pagehead--detail { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.detailgrid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 920px) { .detailgrid { grid-template-columns: 1fr; } }
.section { margin-bottom: var(--sp-5); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.section__title { font-size: 19px; margin: 0; }
.section__count { color: var(--muted); font-size: 14px; }
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-4); margin: 0; font-size: 15px; }
.deflist dt { color: var(--ink-soft); }
.deflist dd { margin: 0; }

/* ---- Tabel-tweaks ---- */
.table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); font-size: 14px; }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---- Mini-bjælke (fremmøde/økonomi) ---- */
.minibar { display: inline-flex; height: 10px; border-radius: 999px; overflow: hidden; min-width: 90px; background: var(--paper-2); vertical-align: middle; }
.minibar__seg { height: 100%; }
.minibar__seg--ok { background: var(--ok); }
.minibar__seg--warn { background: var(--warn); }
.minibar__seg--danger { background: var(--danger); }

/* ---- Lille tekst-knap (fjern-kryds i lister) ---- */
.linkbtn { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: 14px;
  padding: 0 2px; line-height: 1; }
.linkbtn:hover { text-decoration: underline; }

/* ---- Responsivt ---- */
@media (max-width: 860px) {
  .topbar__inner { gap: var(--sp-2); }
  .mainnav { order: 3; width: 100%; }
  .topsearch { order: 2; margin-left: auto; }
}