/* Frands Trangbæk – Administration
   Bygger oven på ../assets/style.css (firmafarver: navy/blå/hvid).
   Desktop-først: brede tabeller og paneler. */

.admin-body { background: var(--bg); }

/* ---------- Topbjælke med faner ---------- */
.admin-top { gap: 18px; flex-wrap: wrap; }
.admin-faner { display: flex; gap: 4px; flex: 1; }
.fane {
  background: transparent;
  border: none;
  color: #8fa6d9;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
}
.fane:hover { color: #fff; }
.fane.aktiv { background: rgba(255, 255, 255, .14); color: #fff; }
.fane-badge {
  display: inline-block;
  background: var(--groen);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: 1px;
}
/* Scrollbaren bor i indholdsområdet UNDER topbjælken (app-mønster): så hopper
   intet sidelæns ved fane-skift, der er ingen tom skinne på korte sider, og
   ingen farvet rende ved siden af den mørke topbjælke */
body.admin-body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-body .login-side { flex: 1; min-height: 0; overflow-y: auto; }

.top-hoejre { display: flex; align-items: center; gap: 14px; }
.top-link {
  color: #8fa6d9;
  font-size: 14px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.top-link:hover { color: #fff; }
/* Ikon-knapper i topbjælken (tur-registrering + indstillingshjul) */
.top-ikon { display: inline-flex; align-items: center; }
.top-ikon svg { display: block; }

.admin-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--bg);
  /* Centrering via padding i stedet for max-width+margin, så scrolleren selv
     fylder hele bredden og scrollbaren står helt ude i kanten */
  padding: 20px max(16px, calc((100% - 1280px) / 2)) 60px;
}

/* ---------- Periodevælger ---------- */
.periode-bjaelke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.periode-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.periode-bjaelke .periode-pill { flex: 0 0 auto; padding: 9px 16px; }
.periode-datoer { display: flex; align-items: center; gap: 10px; }
.periode-datoer label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  color: var(--tekst-svag);
}
.periode-datoer input[type="date"] { width: 150px; min-height: 40px; padding: 8px 10px; }
.knap-lille { width: auto; display: inline-block; padding: 9px 14px; font-size: 14px; }
.knap:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Nuværende kørsler (realtime) ---------- */
.panel-aktive { border-left: 4px solid var(--groen); }
.panel-aktive .panel-top { margin-bottom: 10px; }
.panel-aktive h2 { display: flex; align-items: center; gap: 10px; }
.panel-aktive .puls { flex: 0 0 auto; }
.aktive-antal { font-size: 13px; font-weight: 700; color: var(--groen-moerk); }
.aktive-tom { font-size: 14px; color: var(--tekst-svag); margin: 2px 0 4px; }
.aktive-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.aktiv-kort {
  background: #fff;
  border: 1px solid var(--kant);
  border-left: 4px solid var(--groen);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(11, 19, 64, .07);
}
.aktiv-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.aktiv-navn { font-weight: 800; color: var(--navy); font-size: 17px; line-height: 1.25; }
.aktiv-start { font-size: 13px; color: var(--tekst-svag); margin-top: 2px; }
.aktiv-kort .badge-igang { flex: 0 0 auto; }
.aktiv-timer {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: #f0f7f3;
  border-radius: 10px;
  padding: 10px 14px;
}
.aktiv-timer-tal {
  font-size: 28px;
  font-weight: 800;
  color: var(--groen-moerk);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.aktiv-timer-label { font-size: 12px; color: var(--tekst-svag); font-weight: 600; }
.aktiv-ordrer-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tekst-svag);
  margin-bottom: 6px;
}
.aktiv-ordrer { display: flex; flex-wrap: wrap; gap: 6px; }
.aktiv-ordrer .svag { font-size: 13px; color: var(--tekst-svag); }
.ordre-chip {
  background: #e3eefa;
  color: var(--blaa-moerk);
  border: 1px solid var(--blaa);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
}
.aktiv-note {
  font-size: 13px;
  color: var(--tekst-svag);
  font-style: italic;
  border-top: 1px solid var(--kant);
  padding-top: 10px;
}

/* ---------- Nøgletal ---------- */
.nogletal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

/* ---------- Paneler & tabeller ---------- */
.panel {
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(11, 19, 64, .06);
}
.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-top h2 { font-size: 17px; color: var(--navy); }
.panel-knapper { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel-knapper select { width: auto; min-height: 40px; padding: 8px 32px 8px 12px; font-size: 14px; }
.panel-hjaelp { font-size: 13px; color: var(--tekst-svag); margin: -6px 0 14px; }

.tabel-rul { overflow-x: auto; }
.admin-tabel { border-collapse: collapse; width: 100%; font-size: 14px; }
.admin-tabel th, .admin-tabel td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--kant);
  white-space: nowrap;
}
.admin-tabel td.kan-ombrydes { white-space: normal; min-width: 160px; }
.admin-tabel th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--tekst-svag);
  border-bottom: 2px solid var(--kant);
}
.admin-tabel th.tal, .admin-tabel td.tal { text-align: right; font-variant-numeric: tabular-nums; }
.admin-tabel tbody tr:hover { background: #f2f6fc; }
.admin-tabel tbody tr.klikbar { cursor: pointer; }
.admin-tabel tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--navy);
  border-bottom: none;
  color: var(--navy);
}
.admin-tabel .svag { color: var(--tekst-svag); }
.admin-tabel .tom { text-align: center; color: var(--tekst-svag); padding: 26px; white-space: normal; }

.badge-igang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e7f6ee;
  color: var(--groen-moerk);
  border: 1px solid var(--groen);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.badge-admin {
  background: #e3eefa;
  color: var(--blaa-moerk);
  border: 1px solid var(--blaa);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.raekke-knap {
  background: transparent;
  border: 1px solid var(--kant);
  color: var(--blaa);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.raekke-knap:hover { border-color: var(--blaa); background: #e3eefa; }

.ny-bruger-form { max-width: 420px; }

/* ---------- Planlægning ---------- */
.badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff4e0;
  color: #7a4b00;
  border: 1px solid #e6b15a;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-udfoert {
  display: inline-flex;
  align-items: center;
  background: #e7f6ee;
  color: var(--groen-moerk);
  border: 1px solid var(--groen);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-planlagt {
  display: inline-flex;
  align-items: center;
  background: #e3eefa;
  color: var(--blaa-moerk);
  border: 1px solid var(--blaa);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-planlagt.forpasset { background: #f3f4f8; color: var(--tekst-svag); border-color: var(--kant); }

.admin-tabel tr.dag-raekke td {
  background: #f2f6fc;
  color: var(--navy);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--kant);
}
.admin-tabel tr.dag-raekke.idag td { background: #e3eefa; }
.admin-tabel tr.dag-raekke:hover td { background: #f2f6fc; }
.admin-tabel tr.dag-raekke.idag:hover td { background: #e3eefa; }
/* Forventede tider: én smal kolonne pr. kategori, så de står på stribe.
   Opgave-tabellen har mange kolonner → lidt strammere polstring og datoen
   står kun i dag-linjen. */
#opgave-tabel th, #opgave-tabel td { padding-left: 8px; padding-right: 8px; }
#opgave-tabel td.kan-ombrydes { min-width: 140px; }
.admin-tabel th.tid-kol, .admin-tabel td.tid-kol { padding-left: 6px; padding-right: 6px; }
.admin-tabel th.tid-kol { font-size: 11px; letter-spacing: .2px; }
.admin-tabel td.tid-kol { color: var(--navy); font-size: 13px; }
.admin-tabel th.tid-sum, .admin-tabel td.tid-sum { padding-right: 14px; border-left: 1px solid var(--kant); padding-left: 10px; }
.tid-chip {
  display: inline-block;
  background: #f3f4f8;
  border: 1px solid var(--kant);
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin: 2px 4px 2px 0;
  font-variant-numeric: tabular-nums;
}
.tid-chip span { font-weight: 500; color: var(--tekst-svag); }
/* Chips må ombrydes - skal slå .admin-tabel td's nowrap i specificitet */
.admin-tabel td.tider-celle { max-width: 360px; min-width: 280px; white-space: normal; }
.tid-net { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.tid-net .tid-chip { display: flex; justify-content: space-between; gap: 6px; margin: 0; }
.tid-net .tid-chip.tom { opacity: .4; }
.tid-net .tid-chip b { font-weight: 700; }
.tid-net-fod { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.tid-net-fod .tid-chip { display: inline-flex; gap: 6px; margin: 0; }
.punkt-raekke { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -2px 0 8px; }
/* Punkt-redigering i ⚙ Indstillinger */
.punkt-linje { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.punkt-linje .punkt-emoji { width: 3.4em; flex: none; text-align: center; }
.punkt-linje .punkt-navn { flex: 1; }
.punkt-fjern { border: none; background: none; color: var(--roed); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.punkt-linje input:disabled { background: #f3f4f8; color: var(--tekst); }
#knap-punkt-tilfoej, #knap-minilaesser-gendan { margin-top: 2px; }
/* Emoji-forslag under emoji-feltet */
.emoji-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: -2px 0 8px;
  padding: 6px;
  background: #f3f4f8;
  border: 1px solid var(--kant);
  border-radius: 10px;
}
.emoji-palette button {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.emoji-palette button:hover { background: #fff; }
.tid-chip-sum { font-weight: 700; }
.tid-chip-mini { background: #fff4e0; border-color: #e6b15a; color: #7a4b00; }

/* "+ Ny dag": kompakte linjer med start · ordrenr. · rute */
.dag-raekker { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.dag-raekke { display: grid; grid-template-columns: 108px 1fr 1.5fr auto; gap: 8px; }
.dag-linje { margin-bottom: 8px; }
.dag-mere {
  border: 1px solid var(--kant);
  background: #fff;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
  color: var(--tekst-svag);
}
.dag-mere.aktiv { background: var(--blaa); border-color: var(--blaa); color: #fff; }
/* Automatisk foreslået starttid - blå indtil chefen selv vælger */
.dag-start.foreslaaet { color: var(--blaa-moerk); border-color: var(--blaa); }
.dag-detaljer {
  margin: 6px 0 2px;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid var(--kant);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dag-detaljer .tider-grid { margin: 0; }
#knap-dag-flere { align-self: flex-start; }
.aktiv-rute { font-size: 13px; color: var(--navy); font-weight: 600; margin-top: 4px; }

/* Opgave-modal */
.modal-opgave { max-width: 640px; }
.felt-kryds { display: flex; align-items: flex-end; }
.felt-kryds .krydsfelt { margin: 0 0 13px; }
.krydsfelt-stor { font-weight: 600; margin: 2px 0 16px; }
.tider-blok {
  background: #fff;
  border: 1px solid var(--kant);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.tider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tider-top label { margin: 0; font-weight: 600; color: var(--navy); }
.tider-sum { font-size: 13px; color: var(--tekst-svag); }
.tider-sum strong { color: var(--navy); font-size: 15px; font-variant-numeric: tabular-nums; }
.tider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tid-felt { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.tid-felt span { font-size: 12px; color: var(--tekst-svag); }
.tid-felt input { padding: 10px 12px; min-height: 42px; }
@media (max-width: 560px) {
  .tider-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .admin-top { padding-bottom: 0; }
  .admin-faner { order: 3; width: 100%; flex: none; justify-content: space-around; padding: 4px 0 8px; }
  .periode-bjaelke { flex-direction: column; align-items: stretch; }
}