/* ===========================================================================
   Command Central — layout og komponenter.
   Implementeret 1:1 efter design-system/approved/00-command-central-LOCKED-MASTER.png
   =========================================================================== */

.app {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   Sidebar — låst, identisk på alle sider
   --------------------------------------------------------------------------- */

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  padding: 26px 20px 22px;
}
.logo-great {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand);
  line-height: 0.95;
}
.logo-goods {
  display: block;
  font-size: 27px;
  font-style: italic;
  font-weight: 500;
  color: #fdfaf3;
  line-height: 1;
  margin-top: -2px;
  margin-left: 3px;
  font-family: "Georgia", "Times New Roman", serif;
}

.nav {
  flex: 1;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  font-weight: 550;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nav-item.active {
  background: var(--brand);
  color: #23180e;
  font-weight: 650;
}
.nav-item .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.nav-badge {
  margin-left: auto;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
}
.nav-item.active .nav-badge {
  background: #23180e;
  color: var(--brand-light);
}

.sidebar-foot {
  padding: 14px 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 12px;
}
.profile .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #23180e;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  flex: 0 0 32px;
}
.profile .avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--sidebar-2);
}
.profile-name {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}
.profile-role {
  font-size: 11.5px;
  color: rgba(232, 221, 201, 0.6);
}

/* ---------------------------------------------------------------------------
   Workspace
   --------------------------------------------------------------------------- */

.main {
  flex: 1;
  min-width: 0;
  padding: 20px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  /* Statuslinjen er tredje barn og skal have sin egen linje under titel og
     handlinger — ikke klemmes ind ved siden af dem. */
  flex-wrap: wrap;
}
.page-title {
  margin: 0;
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.page-sub {
  margin-top: 5px;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 9px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  display: inline-block;
}
.status-dot.warn { background: var(--warn); }
.status-dot.bad  { background: var(--bad); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 4px;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  width: 268px;
  box-shadow: var(--shadow-sm);
}
.search input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}
.search input::placeholder { color: var(--faint); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand);
  color: #23180e;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.icon-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.topbar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sidebar);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Kort
   --------------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 13px 15px;
  min-width: 0;
}
.card-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .num {
  color: var(--brand-dark);
}
.card-link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.card-link:hover { text-decoration: underline; }

.card-foot {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.foot-link {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--brand-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.foot-link:hover { text-decoration: underline; }

/* Fælles mærkat for manglende grundlag. Aldrig et gæt, aldrig en nul-udfyldning. */
.pending {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--warn);
  background: var(--warn-tint);
  border: 1px solid rgba(217, 163, 39, 0.28);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Række 1
   --------------------------------------------------------------------------- */

.row-1 {
  display: grid;
  grid-template-columns: 1.06fr 1.02fr 1.16fr 0.92fr;
  gap: 11px;
  align-items: stretch;
}

/* Virksomhedsvejr */
.weather-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.weather-sun {
  flex: 0 0 46px;
  color: var(--brand);
}
.weather-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.weather-desc { font-size: 12.5px; color: var(--muted); }
.weather-headline {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--good);
  line-height: 1.1;
  margin-top: 7px;
}
.weather-headline.warn { color: var(--warn); }
.weather-headline.bad { color: var(--bad); }
.weather-sub { font-size: 12.5px; color: var(--muted); }

.weather-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 13px;
}
.wm {
  text-align: center;
  min-width: 0;
}
.wm-icon {
  width: 31px;
  height: 31px;
  margin: 0 auto 5px;
  border-radius: 50%;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}
.wm-label {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
}
.wm-verdict {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 3px;
}
.wm-value {
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
}
.t-good { color: var(--good); }
.t-warn { color: var(--warn); }
.t-bad { color: var(--bad); }
.t-muted { color: var(--muted); }

/* System overblik */
.system-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ring {
  flex: 0 0 108px;
  position: relative;
}
.ring svg { display: block; transform: rotate(-90deg); }
.ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.ring-pct {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--good);
  line-height: 1;
}
.ring-pct.warn { color: var(--warn); }
.ring-pct.bad { color: var(--bad); }
.ring-label {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 3px;
  max-width: 74px;
  line-height: 1.25;
}
.ring-sub {
  font-size: 7px;
  color: var(--muted);
  margin-top: 2px;
  max-width: 74px;
  line-height: 1.3;
}

.area-list {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.area {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.area-dot {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  margin-top: 2px;
  display: grid;
  place-items: center;
  color: #fff;
}
.area-dot.good { background: var(--good); }
.area-dot.warn { background: var(--warn); }
.area-dot.bad  { background: var(--bad); }
.area-dot.muted { background: var(--faint); }
.area-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}
.area-detail {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* KPI-felter */
.kpi-group {
  display: flex;
  padding: 0;
}
.kpi {
  flex: 1;
  padding: 13px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kpi + .kpi { border-left: 1px solid var(--line-soft); }
.kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
}
.kpi-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}
.kpi-value {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 8px;
}
.kpi-delta {
  font-size: 12px;
  font-weight: 650;
  margin-top: 4px;
}
.kpi-note {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
.kpi-art {
  margin-top: auto;
  padding-top: 8px;
  color: var(--brand);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 26px;
  opacity: 0.85;
}
.kpi-art.green { color: var(--good); }

/* ---------------------------------------------------------------------------
   Live feed
   --------------------------------------------------------------------------- */

.livefeed {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 8px 12px;
  overflow: hidden;
}
.livefeed-chip {
  flex: 0 0 auto;
  background: var(--brand);
  color: #23180e;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.07em;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}
.livefeed-track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.feed-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--ink-soft);
}
.feed-item .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--faint);
  margin: 0 3px;
}
.feed-item time { color: var(--muted); font-size: 11.5px; }
.feed-icon { color: var(--brand-dark); display: grid; place-items: center; }
.livefeed-pause {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Business Pulse
   --------------------------------------------------------------------------- */

.pulse-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 13px;
}
.pulse-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.pulse-head span { font-size: 12px; color: var(--muted); }

.pulse-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(7, 1fr);
  gap: 12px;
  align-items: start;
}
.pulse-col { min-width: 0; }
.pulse-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
  min-height: 24px;
}
.pulse-value {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 3px;
}
.pulse-value.is-pending { font-size: 12px; }
.pulse-dkk {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
.pulse-delta {
  font-size: 12.5px;
  font-weight: 650;
  margin-top: 7px;
}
.pulse-note {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
  line-height: 1.35;
}
.spark { margin-top: 8px; }

.pulse-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 13px;
  background: var(--brand-tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pulse-foot .card-link { font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Bundrække
   --------------------------------------------------------------------------- */

.row-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  align-items: stretch;
}
.row-bottom > .card {
  display: flex;
  flex-direction: column;
}
.row-bottom .card-foot { margin-top: auto; }

.list { display: grid; gap: 9px; }

.person {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.person .avatar {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.person-body { flex: 1; min-width: 0; }
.person-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-meta {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.35;
}
.person-meta strong { color: var(--ink-soft); font-weight: 650; }
.person-action {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--brand-dark);
  white-space: nowrap;
  padding-top: 1px;
}

.opp { min-width: 0; }
.opp + .opp {
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}
.opp-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opp-seg {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opp-cols {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 5px;
}
.opp-col { min-width: 0; }
.opp-col .k {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
}
.opp-col .v {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.opp-col .v small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.opp-arrow { margin-left: auto; color: var(--brand-dark); }

.task {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-width: 0;
}
.task-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 5px;
}
.task-body { flex: 1; min-width: 0; }
.task-title {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-step { font-size: 11px; color: var(--muted); }
.task-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.task-summary {
  font-size: 11.5px;
  color: var(--muted);
  margin: -4px 0 11px;
}
.count-pill {
  margin-left: auto;
  background: var(--bg-2);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}

.cal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.cal-date {
  flex: 0 0 34px;
  text-align: center;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 4px 0 5px;
}
.cal-day {
  font-size: 15px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cal-mon {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-body { flex: 1; min-width: 0; }
.cal-title {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-meta {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-icon { flex: 0 0 auto; color: var(--brand-dark); padding-top: 3px; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.footer {
  display: flex;
  justify-content: center;
  gap: 26px;
  padding: 8px 0 4px;
  font-size: 12px;
  color: var(--muted);
}
.footer span:not(:last-child)::after {
  content: "·";
  margin-left: 26px;
  color: var(--faint);
}

.empty {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0;
}

/* Skærme smallere end designets referencebredde: fald til to kolonner
   frem for at klemme otte pulse-tal sammen. */
@media (max-width: 1500px) {
  .row-1 { grid-template-columns: 1fr 1fr; }
  .pulse-grid { grid-template-columns: 1.55fr repeat(3, 1fr); row-gap: 18px; }
  .row-bottom { grid-template-columns: 1fr 1fr; }
}

.prio {
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--warn-tint);
  color: var(--warn);
}
.prio.critical { background: var(--bad-tint); color: var(--bad); }
.prio.high { background: var(--warn-tint); color: var(--warn); }
.prio.low { background: var(--bg-2); color: var(--muted); }

/* ---------------------------------------------------------------------------
   Sidehoved med tilbage-link (detaljesider)
   --------------------------------------------------------------------------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 650;
  color: var(--brand-dark);
  text-decoration: none;
  margin-bottom: 3px;
}
.back-link:hover { text-decoration: underline; }
.sub-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   Værktøjslinje: søgning og filtre
   --------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.search-inline { width: 260px; padding: 7px 11px; }
.filter {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
}
.filter > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter select {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink);
  cursor: pointer;
  max-width: 180px;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-2); }

/* ---------------------------------------------------------------------------
   Datatabel
   --------------------------------------------------------------------------- */

/* Tabellen scroller i sig selv, så siden aldrig bliver 20.000 px lang.
   Headeren er sticky, så kolonnenavnene altid er synlige. */
.table-card {
  padding: 0;
  overflow: auto;
  max-height: calc(100vh - 176px);
}
.main { min-height: 0; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.grid th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 10px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--brand-tint);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.grid th:hover { color: var(--brand-deep); }
table.grid th.num { text-align: right; }
.sort-arrow { font-size: 8px; color: var(--brand-dark); margin-left: 2px; }

table.grid td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tbody tr { cursor: pointer; transition: background var(--speed) var(--ease); }
table.grid tbody tr:hover { background: var(--brand-tint); }
table.grid tbody tr:last-child td { border-bottom: 0; }

.cell-name { font-weight: 650; color: var(--ink); }
.t-faint { color: var(--faint); }

.prio-tag {
  margin-left: 6px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--brand-light);
  color: var(--brand-deep);
}

.chip {
  display: inline-block;
  min-width: 20px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink-soft);
}
.chip-warn { background: var(--warn-tint); color: var(--warn); }
.chip-bad { background: var(--bad-tint); color: var(--bad); }

.nba {
  font-size: 11.5px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.nba-good { background: var(--good-tint); color: var(--good); }
.nba-warn { background: var(--warn-tint); color: var(--warn); }
.nba-bad { background: var(--bad-tint); color: var(--bad); }
.nba-muted { background: var(--bg-2); color: var(--muted); }

/* Kunderækker på forsiden linker til Customer 360 */
a.person { text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
a.person:hover .person-name { color: var(--brand-dark); }

/* ---------------------------------------------------------------------------
   Customer 360
   --------------------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
  margin-bottom: 11px;
}
.stat { padding: 12px 14px; }
.stat-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 3px;
}
.stat-note { font-size: 10.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }

.nba-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-light);
  border: 1px solid rgba(199, 154, 63, 0.32);
  border-radius: var(--radius);
  padding: 12px 15px;
  margin-bottom: 11px;
}
.nba-icon { color: var(--brand-deep); display: grid; place-items: center; }
.nba-kicker {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.nba-title { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.nba-why { font-size: 12px; color: var(--ink-soft); }
.nba-due {
  margin-left: auto;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nba-due strong { display: block; font-size: 14px; letter-spacing: -0.02em; color: var(--ink); }

.c360 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 11px;
  align-items: start;
}
.c360-main, .c360-side { display: grid; gap: 11px; min-width: 0; }

/* Nøgle/værdi-liste */
.kv {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 5px 12px;
  margin: 0;
  font-size: 12.5px;
}
.kv dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 1px;
}
.kv dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.kv a { color: var(--brand-dark); }

/* Buyer DNA */
.dna-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
}
.dna-warmth { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.dna-last {
  text-align: right;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dna-last strong { display: block; font-size: 13px; letter-spacing: -0.02em; color: var(--ink); }
.dna-block + .dna-block { margin-top: 12px; }
.dna-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.dna-row {
  display: grid;
  grid-template-columns: 116px 1fr 22px;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  padding: 2px 0;
}
.dna-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dna-bar { height: 6px; background: var(--bg-2); border-radius: var(--radius-pill); overflow: hidden; }
.dna-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); }
.dna-n { text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Tabel inde i et kort */
.table-wrap { margin: 0 -15px -13px; }
table.grid-inline th { position: static; background: var(--brand-tint); }
table.grid-inline th, table.grid-inline td { padding: 7px 15px; }
table.grid-inline tbody tr { cursor: default; }

/* Brands */
.brand-row { display: flex; align-items: center; gap: 10px; }
.brand-name { font-size: 13px; font-weight: 650; flex: 0 0 auto; }
.brand-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-num {
  margin-left: auto;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand-num small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }

/* Scores */
.score + .score { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.score-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.score-value { font-size: 24px; font-weight: 750; letter-spacing: -0.03em; }
.score-max { font-size: 13px; color: var(--muted); }

.chip-warm { background: var(--warn-tint); color: var(--warn); }
.chip-cold { background: var(--info-tint); color: var(--info); }

/* Kommunikation — kun reference, handling sker under Mail */
.comm-who { font-size: 14px; font-weight: 700; }
.comm-when { font-size: 12px; color: var(--ink-soft); }

.memo {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.memo:last-child { margin-bottom: 0; }

/* Tidslinje */
.timeline { display: grid; gap: 9px; }
.tl { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.tl-dot {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.tl-detail {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-time { flex: 0 0 auto; font-size: 11px; color: var(--muted); white-space: nowrap; padding-top: 1px; }

.doc { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }

@media (max-width: 1400px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .c360 { grid-template-columns: 1fr; }
}

.tl-count {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 750;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--muted);
}
.mailbox-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--muted);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Brands
   --------------------------------------------------------------------------- */

.market {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  margin-right: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink-soft);
}
.brand-status {
  margin-left: 7px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--muted);
}
.brand-status.s-aktiv { background: var(--good-tint); color: var(--good); }
.brand-status.s-ny { background: var(--brand-light); color: var(--brand-deep); }
.brand-status.s-prospekt { background: var(--info-tint); color: var(--info); }

/* Aftalt vs. faktisk provisionssats */
.rate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.rate-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rate-value {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 2px 0 1px;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--warn-tint);
  border: 1px solid rgba(217, 163, 39, 0.3);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.alert svg { color: var(--warn); flex: 0 0 auto; margin-top: 1px; }

/* Salgshistorik */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 168px;
}
.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.bar-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 3px;
  white-space: nowrap;
}
.bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, transparent, var(--bg-2));
  border-radius: 5px 5px 0 0;
}
.bar-track i {
  width: 100%;
  background: var(--brand);
  border-radius: 5px 5px 0 0;
  min-height: 2px;
  transition: height var(--speed) var(--ease);
}
.bar-year {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 5px;
}

/* Risici */
.risk { display: flex; gap: 9px; align-items: flex-start; }
.risk-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 5px;
}
.risk-dot.warn { background: var(--warn); }
.risk-dot.bad { background: var(--bad); }
.risk .task-step { white-space: normal; }

/* Materiale grupperet efter type */
.mat-group + .mat-group {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.mat-group .dna-label { display: flex; align-items: center; gap: 7px; }
.mat-count {
  background: var(--bg-2);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 0 6px;
  font-size: 10px;
}
.mat-group .doc + .doc { margin-top: 7px; }
.empty-sm { font-size: 11.5px; padding: 2px 0; }
.doc .task-title, .doc .task-step { white-space: normal; word-break: break-word; }

/* ---------------------------------------------------------------------------
   Orders — flowet PO → OC → SN → INVOICE → PAID → COMMISSION DUE
   --------------------------------------------------------------------------- */

/* Kompakt tilstandsprik i tabellen.
   Fyldt = dokumenteret · ring = udledt af status · streg = ikke nået. */
.fdot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  vertical-align: middle;
}
.fdot.documented { background: var(--good); }
.fdot.implied {
  background: transparent;
  border: 1.8px solid var(--warn);
}
.fdot.missing {
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: var(--faint);
}
.flow-th {
  text-align: center !important;
  font-size: 8.5px !important;
  letter-spacing: 0.04em !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
  cursor: default !important;
}
.flow-td { text-align: center; padding-left: 3px !important; padding-right: 3px !important; }

.flow-legend {
  margin-left: auto;
  display: flex;
  gap: 13px;
  font-size: 10.5px;
  color: var(--muted);
}
.flow-legend span { display: flex; align-items: center; gap: 5px; }

.list-note {
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}

/* Det store flow-spor på ordredetaljen */
.flow-card { margin-bottom: 11px; }
.flow-track { display: flex; }
.fstep {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.fline {
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.fline.on { background: var(--good); }
.fmark {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 750;
  background: var(--bg-2);
  color: var(--muted);
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--line);
}
.fstep.documented .fmark {
  background: var(--good);
  color: #fff;
  box-shadow: 0 0 0 1px var(--good);
}
.fstep.implied .fmark {
  background: var(--warn-tint);
  color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn);
}
.fbody { margin-top: 6px; min-width: 0; width: 100%; }
.flabel {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.fstate { font-size: 10.5px; color: var(--muted); }
.fstep.documented .fstate { color: var(--good); }
.fstep.implied .fstate { color: var(--warn); }
.fev {
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

/* En note er ikke et bevis. Kursiv og dæmpet, så et provisionsestimat ikke
   forveksles med et afregnet beløb — trinnet er stadig ikke grønt. */
.fnote {
  font-size: 9.5px;
  font-style: italic;
  color: var(--muted);
  margin-top: 1px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Provisionsberegning */
.calc { font-size: 12.5px; }
.calc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.calc-row b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 650; }
.calc-total {
  border-bottom: 0;
  border-top: 1.5px solid var(--line);
  margin-top: 3px;
  padding-top: 8px;
  font-weight: 700;
  color: var(--ink);
}
.calc-total b { font-size: 15px; }

.stat-value.stat-sm { font-size: 17px; }

.note-block {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
/* Lange opgavebeskrivelser må ikke sprænge kortet — klip til tre linjer. */
.task .task-step {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Flow
   --------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.tab:hover { color: var(--brand-deep); }
.tab.active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand);
  font-weight: 700;
}
.tab-count {
  background: var(--bg-2);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
}
.tab.active .tab-count { background: var(--brand-light); color: var(--brand-deep); }

.flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  align-items: start;
}
.card-bad { border-color: rgba(216, 87, 78, 0.3); }

/* Opgaverække */
.flist { display: grid; gap: 2px; }
.frow {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--speed) var(--ease);
}
a.frow:hover, .frow:hover { background: var(--brand-tint); }
.frow-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.frow-dot.good { background: var(--good); }
.frow-dot.warn { background: var(--warn); }
.frow-dot.bad { background: var(--bad); }
.frow-dot.muted { background: var(--faint); }
.frow-body { flex: 1; min-width: 0; }
.frow-title {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frow-why {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.frow-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted);
}
.frow-meta a { color: var(--brand-dark); text-decoration: none; }
.frow-meta a:hover { text-decoration: underline; }
.btn-sm { padding: 4px 10px; font-size: 11.5px; }
.frow .btn-sm { flex: 0 0 auto; align-self: center; opacity: 0; }
.frow:hover .btn-sm { opacity: 1; }

/* Henvisning til Mail — approvals håndterer ikke mailudkast */
.mail-ref {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  margin-bottom: 11px;
  border-radius: var(--radius);
  background: var(--info-tint);
  border: 1px solid rgba(43, 108, 176, 0.22);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.mail-ref svg { color: var(--info); flex: 0 0 auto; }
.mail-ref a { color: var(--info); font-weight: 650; }

/* Godkendelseskort */
.approval + .approval {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.approval-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.approval-title { font-size: 14px; font-weight: 700; }
.approval-kind { font-size: 11px; color: var(--muted); }
.conf {
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-align: right;
  line-height: 1.1;
}
.conf span { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.conf-low { color: var(--bad); }
.conf-mid { color: var(--warn); }
.conf-high { color: var(--good); }
.approval-why { margin: 7px 0 9px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }

/* Baggrunden for et mailudkast: hvad svares der på, og hvad er gået forud.
   Tonet ned mod udkastet — man skal kunne se forskel på sagen og på svaret
   uden at læse et ord. */
.baggrund {
  margin: 9px 0 11px;
  padding: 10px 12px;
  border-left: 2px solid var(--line);
  background: var(--tint, rgba(0, 0, 0, 0.02));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.bg-titel { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.bg-emne { font-size: 11px; color: var(--muted); margin-top: 2px; }
.bg-resume { font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
.chip-bilag { background: var(--ok-bg, #e8f2ec); color: var(--ok, #2f6b4f); }

.bg-traad { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.bg-traad-titel {
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.bg-indlaeg { margin-bottom: 7px; padding-left: 9px; border-left: 2px solid transparent; }
.bg-indlaeg:last-child { margin-bottom: 0; }
/* Vores egne indlæg markeres, så en tråd kan skimmes for hvem der har bolden. */
.bg-os { border-left-color: var(--accent, #4f8268); }
.bg-dem { border-left-color: var(--line); }
.bg-hvem { font-size: 11px; font-weight: 600; }
.bg-tid { font-size: 10.5px; color: var(--muted); margin-left: 6px; }
.bg-uddrag { font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
.kv-tight { grid-template-columns: 84px 1fr; gap: 3px 10px; font-size: 12px; }
.kv-tight dt { font-size: 9.5px; }
.approval-actions { display: flex; gap: 8px; margin-top: 11px; }
.approval-comment {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font: inherit;
  font-size: 12.5px;
  background: var(--card);
  color: var(--ink);
}
.approval-comment:focus { outline: none; box-shadow: var(--ring); }

/* Workflow-kort */
.wf-list { display: grid; gap: 13px; }
.wf + .wf { border-top: 1px solid var(--line-soft); padding-top: 13px; }
.wf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wf-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.wf-meta {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.wf-step {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 9px;
}
.wf-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.wf-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 4px;
}
.wf-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); }
.wf-blocker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--bad-tint);
  font-size: 11.5px;
  color: var(--bad);
}
.wf-blocker svg { flex: 0 0 auto; }
.wf-result {
  margin-top: 9px;
  font-size: 11.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1400px) {
  .flow-grid { grid-template-columns: 1fr; }
}

.frow-group { background: var(--brand-tint); }
.group-x {
  margin-left: 7px;
  font-size: 10px;
  font-weight: 750;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-light);
  color: var(--brand-deep);
}
.group-link { color: var(--brand-dark); font-weight: 650; margin-left: auto; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-light);
  border: 1px solid rgba(199, 154, 63, 0.3);
  border-radius: var(--radius-pill);
  padding: 4px 6px 4px 12px;
  font-size: 12px;
  color: var(--brand-deep);
}
.chip-x {
  border: 0;
  background: transparent;
  color: var(--brand-deep);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.chip-x:hover { color: var(--bad); }

/* Mærkaten skal kunne være i en tabelcelle uden at blive klippet */
table.grid .pending { font-size: 9.5px; padding: 3px 6px; letter-spacing: 0.03em; }
table.grid .nba { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Mail — grænseflade uden datakilde endnu
   --------------------------------------------------------------------------- */

.card-note {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.mail-flow { margin-bottom: 11px; }
.mail-flow .fmark { background: var(--bg-2); color: var(--muted); }
.mail-flow .fline { background: var(--line); }
.fev-wrap { white-space: normal; line-height: 1.35; }

.mail-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 11px;
  align-items: start;
}
.mail-list, .mail-read { min-width: 0; }

/* Tom tilstand der stadig viser hvad visningen kommer til at indeholde */
.await {
  text-align: center;
  padding: 26px 16px 20px;
}
.await-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 11px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--faint);
  display: grid;
  place-items: center;
}
.await-title { font-size: 14px; font-weight: 700; }
.await-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.await-fields {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  text-align: left;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.field-chip {
  font-size: 10.5px;
  font-weight: 550;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* Beskedliste i Indbakke og Udkast.
   Rækkerne er knapper: hele feltet skal kunne klikkes, ikke kun emnelinjen. */
.mail-rows {
  display: flex;
  flex-direction: column;
  max-height: 620px;
  overflow-y: auto;
}
.mail-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.mail-row:hover { background: var(--bg-2); }
.mail-row.active { background: var(--brand-tint); }
.mail-row-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.mail-from {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-time {
  font-size: 11px;
  color: var(--faint);
  flex: none;
}
.mail-subject {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-row-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
}

/* Den rå CRM-kontekst bag et udkast. Lang og teknisk med vilje —
   den er der for at kunne efterprøve hvad agenten byggede svaret på. */
.draft-context {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  max-height: 260px;
  overflow-y: auto;
}

/* Læserude / udkast-editor */
.read-skeleton { display: grid; gap: 1px; }
.read-sec {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.read-sec:last-child { border-bottom: 0; }
.read-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.read-hint { font-size: 12px; color: var(--faint); margin-top: 1px; }

.read-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.read-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.read-actions .btn-primary:disabled:hover { background: var(--brand); transform: none; }

.draft-body { margin-top: 13px; }
.draft-area {
  margin-top: 6px;
  min-height: 128px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--faint);
}
.draft-meta { margin-top: 13px; }

/* Tabel uden rækker: hovedet vises, så kolonnerne kan gennemgås */
.table-empty { overflow: hidden; max-height: none; }
.table-empty table.grid { border-bottom: 1px solid var(--line); }
.table-empty th { position: static; cursor: default; }

/* Postkasser */
.mailbox-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}
.mailbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  min-width: 0;
}
.mailbox-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--sidebar);
  color: var(--brand);
}
.mailbox-avatar.shared { background: var(--bg-2); color: var(--ink-soft); }
.mailbox-name { font-size: 13px; font-weight: 650; }
.mailbox-count { margin-left: auto; }

.toolbar-tight { margin-bottom: 0; }
.search-sm { width: auto; flex: 1; min-width: 0; padding: 6px 10px; }
.search input:disabled, .filter select:disabled { color: var(--faint); cursor: not-allowed; }

@media (max-width: 1400px) {
  .mail-split { grid-template-columns: 1fr; }
  .mailbox-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Udvikling — intern side ved profilen
   --------------------------------------------------------------------------- */

.nav-dev {
  margin-bottom: 8px;
  font-size: 12.5px;
  color: rgba(232, 221, 201, 0.72);
}
.nav-dev.active { color: #23180e; }

/* Datahuller */
.gap-summary { margin-bottom: 11px; }
.gap-tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-bottom: 11px;
}
.tally { text-align: center; }
.tally-n { font-size: 27px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.tally-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.gap-missing { color: var(--bad); }
.gap-partial { color: var(--warn); }
.gap-mostly { color: var(--brand-dark); }
.gap-ok { color: var(--good); }

.gap-list { display: grid; gap: 13px; }
.gap + .gap { border-top: 1px solid var(--line-soft); padding-top: 13px; }
.gap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gap-metric { font-size: 13.5px; font-weight: 700; }
.gap-cov { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gap-badge {
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.gap-badge.gap-missing { background: var(--bad-tint); }
.gap-badge.gap-partial { background: var(--warn-tint); }
.gap-badge.gap-mostly { background: var(--brand-light); }
.gap-badge.gap-ok { background: var(--good-tint); }
.gap-nums { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gap-bar {
  height: 5px;
  background: var(--bg-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: 6px 0 7px;
}
.gap-bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.gap-bar i.gap-missing { background: var(--bad); }
.gap-bar i.gap-partial { background: var(--warn); }
.gap-bar i.gap-mostly { background: var(--brand); }
.gap-bar i.gap-ok { background: var(--good); }
.gap-need { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 5px; }
.gap-need strong, .gap-meta strong { color: var(--ink); font-weight: 650; }
.gap-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
}

/* Passive opsamlingsflader */
.dev-note-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  margin-bottom: 11px;
  border-radius: var(--radius);
  background: var(--brand-tint);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.dev-note-banner svg { color: var(--brand-dark); flex: 0 0 auto; }
.dev-note-warn { background: var(--warn-tint); border-color: var(--warn); }
.dev-note-warn svg { color: var(--warn); }

/* Udviklingsopgaver — hver systemændring der er sat i kø (opgave #784) */
.dev-opg-list { display: flex; flex-direction: column; }
.dev-opg {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.dev-opg:first-child { border-top: 0; padding-top: 3px; }
.dev-opg-head { display: flex; align-items: center; gap: 9px; }
.dev-opg-nr {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.dev-opg-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  flex: 1 1 auto;
  min-width: 0;
}
.dev-opg-head .nba { flex: 0 0 auto; white-space: nowrap; }
.dev-opg-desc {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  white-space: pre-wrap;
}
.dev-opg-tom { color: var(--muted); font-style: italic; }
.dev-opg-trin { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.dev-opg-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-size: 11px;
  color: var(--muted);
}
.dev-opg-meta .nba { text-decoration: none; }

/* På mobil må nummer, titel og status ikke klemme hinanden flade. */
@media (max-width: 720px) {
  .dev-opg-head { flex-wrap: wrap; }
  .dev-opg-title { flex-basis: 100%; order: 3; }
  .dev-opg-head .nba { order: 2; }
}

/* Arkiv — skrivebeskyttet beslutningshistorik */
.arkiv-list { display: flex; flex-direction: column; gap: 7px; }
.arkiv-thread {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
}
.arkiv-thread > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}
.arkiv-thread > summary::-webkit-details-marker { display: none; }
.arkiv-thread-title { font-weight: 600; color: var(--ink); }
.arkiv-thread-sub { font-size: 11.5px; color: var(--ink-soft); }
.arkiv-thread > summary .count-pill { margin-left: auto; }
.arkiv-msgs {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.arkiv-msg {
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  border: 1px solid var(--line);
}
.arkiv-msg-agent { background: var(--card); }
.arkiv-msg-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.arkiv-role { font-weight: 600; font-size: 11.5px; color: var(--brand-dark); }
.arkiv-msg-date { font-size: 11px; color: var(--ink-soft); }
.arkiv-msg-text { margin: 0; font-size: 12.5px; color: var(--ink); white-space: pre-wrap; }

.arkiv-snapshot-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  margin-bottom: 11px;
  border-radius: var(--radius);
  background: var(--warn-tint);
  border: 1px solid var(--warn);
  font-size: 12.5px;
  color: var(--ink);
}
.arkiv-snapshot-banner svg { color: var(--warn); flex: 0 0 auto; }
.arkiv-snapshot-table { overflow-x: auto; margin-top: 8px; }
.arkiv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.arkiv-table th, .arkiv-table td {
  text-align: left;
  padding: 5px 9px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.arkiv-table th { color: var(--ink-soft); font-weight: 600; }

.add-row { display: flex; gap: 8px; margin-bottom: 13px; }
.add-row-tall { align-items: flex-end; }
.add-row input[type="text"], .add-row textarea {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}
.add-row input:focus, .add-row textarea:focus { outline: none; box-shadow: var(--ring); }
.add-row button { flex: 0 0 auto; }

.todo-list { display: grid; gap: 2px; }
.todo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
}
.todo:hover { background: var(--brand-tint); }
.todo-check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.6px solid var(--line);
  border-radius: 5px;
  background: var(--card);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  padding: 0;
}
.todo-check:hover { border-color: var(--brand); }
.todo.is-done .todo-check { background: var(--good); border-color: var(--good); }
.todo-body { flex: 1; min-width: 0; }
.todo-text { font-size: 13px; line-height: 1.4; }
.todo.is-done .todo-text { color: var(--muted); text-decoration: line-through; }
.todo-meta { font-size: 10.5px; color: var(--muted); margin-top: 1px; }

.icon-btn-sm {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0;
}
.todo:hover .icon-btn-sm, .note:hover .icon-btn-sm { opacity: 1; }
.icon-btn-sm:hover { color: var(--bad); background: var(--bad-tint); }

.note-list { display: grid; gap: 13px; }
.note + .note { border-top: 1px solid var(--line-soft); padding-top: 13px; }
.note-head { display: flex; align-items: center; gap: 9px; }
.note-author { font-size: 12.5px; font-weight: 700; }
.note-date { font-size: 11px; color: var(--muted); }
.note-head .icon-btn-sm { margin-left: auto; }
.note-text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* Kronjobs */
.row-dim td { opacity: 0.55; }
.cron-pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* System */
.rule-list { display: grid; gap: 12px; }
.rule + .rule { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.rule-title { font-size: 13px; font-weight: 700; }
.rule-detail { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 2px; }
/* Martins nummererede regler — nummeret er det han selv peger på i chatten. */
.rule-nr {
  margin-right: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-deep);
  letter-spacing: -0.01em;
}
.rule-points { margin: 5px 0 0; padding-left: 16px; display: grid; gap: 3px; }
.rule-points li { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

.cmd-list { display: grid; gap: 9px; }
.cmd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cmd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--ink);
  flex: 0 0 auto;
}
.cmd span { font-size: 12px; color: var(--muted); }
.kv dd.wrap { word-break: break-all; font-size: 11.5px; }

/* ---------------------------------------------------------------------------
   Manuel indtastning
   --------------------------------------------------------------------------- */

.ef {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  padding: 1px 5px;
  margin: -1px -5px;
  cursor: text;
  min-width: 0;
  max-width: 100%;
  transition: background var(--speed) var(--ease);
}
.ef:hover { background: var(--brand-light); }
.ef:focus-visible { box-shadow: var(--ring); outline: none; }
.ef-value { overflow: hidden; text-overflow: ellipsis; }
.ef-empty { color: var(--faint); font-style: italic; }
.ef-pencil { color: var(--faint); display: none; line-height: 0; flex: 0 0 auto; }
.ef:hover .ef-pencil { display: inline-flex; }

/* Guldprik = værdien er tastet ind i hånden, ikke hentet af systemet */
.ef-manual {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.ef.is-editing { background: transparent; padding: 0; margin: 0; width: 100%; }
.ef-editor { display: flex; gap: 5px; align-items: center; width: 100%; }
.ef-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font: inherit;
  font-size: 12.5px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--ring);
  resize: vertical;
}
.ef-input:focus { outline: none; }
.ef-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.ef-btn:hover { background: var(--bg-2); }
.ef-save { background: var(--good); border-color: var(--good); color: #fff; }
.ef-save:hover { background: #268245; }
.ef-save:disabled { opacity: 0.5; cursor: wait; }

/* Dialog */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(44, 38, 32, 0.42);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}
.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 24px 64px rgba(44, 38, 32, 0.28));
  width: min(680px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.modal-body {
  padding: 18px 20px 20px;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.ff { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ff-wide { grid-column: 1 / -1; }
.ff-check { grid-column: span 1; justify-content: flex-end; padding-bottom: 4px; }
.ff-check label { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.ff label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ff .req { color: var(--bad); font-style: normal; }
.ff input, .ff select, .ff textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  background: var(--card);
  color: var(--ink);
  width: 100%;
  resize: vertical;
}
.ff input:focus, .ff select:focus, .ff textarea:focus { outline: none; box-shadow: var(--ring); }
.modal-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.modal-error {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--bad);
  background: var(--bad-tint);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
}

/* Handlingsknapper i sidehovedet */
.page-actions { display: flex; gap: 8px; align-items: center; }
.btn-danger {
  background: transparent;
  border: 1px solid rgba(216, 87, 78, 0.4);
  color: var(--bad);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { background: var(--bad-tint); }

.manual-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.manual-legend i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}

/* Redigerbar tabelcelle — må ikke ændre rækkehøjden */
.ef-cell { padding: 0; margin: 0; gap: 4px; width: 100%; }
.ef-cell:hover { background: transparent; box-shadow: inset 0 -1px 0 var(--brand); }
.ef-cell .ef-pencil { display: none !important; }
.ef-cell.is-editing { position: relative; z-index: 2; }
table.grid td:has(.ef) { overflow: visible; }
table.grid .ef-input { font-size: 12px; padding: 3px 6px; }
table.grid .ef-btn { width: 20px; height: 20px; font-size: 13px; }

/* Betalingsvagtens skæringsdato */
.watch-setting { grid-column: span 1; }
.watch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.watch-row label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.watch-row input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--card);
  color: var(--ink);
}
.watch-row input:focus { outline: none; box-shadow: var(--ring); }

/* ---------------------------------------------------------------------------
   Notifikationer: klokkens panel og statuslinjen.

   Begge fodres af /api/notifications, så de aldrig kan vise forskellige tal.
   Statuslinjen sidder under topbaren på hver side og skjules helt når intet
   venter — en linje der altid står der, holder man op med at læse.
--------------------------------------------------------------------------- */

.notif-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: 380px;
  max-height: 460px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 60;
}
.notif-head {
  padding: 12px 14px;
  font-weight: 650;
  font-size: 13px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.notif-list { display: flex; flex-direction: column; }
.notif-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-areas: "kind title" "kind detail";
  gap: 1px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--brand-tint); }
.notif-bad { border-left-color: var(--bad); }
.notif-warn { border-left-color: var(--warn); }
.notif-info { border-left-color: var(--info); }
.notif-kind {
  grid-area: kind;
  align-self: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.notif-title {
  grid-area: title;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-detail {
  grid-area: detail;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  flex: 0 0 100%;
}
.status-part { color: var(--ink-soft); }
.status-part b { color: var(--ink); font-weight: 700; }
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.status-bad { background: var(--bad-tint); border-color: var(--bad); }
.status-bad .status-dot { background: var(--bad); }
.status-warn { background: var(--warn-tint); border-color: var(--warn); }
.status-warn .status-dot { background: var(--warn); }
.status-ok { background: var(--good-tint); border-color: var(--good); color: var(--ink-soft); }
.status-ok .status-dot { background: var(--good); }

/* ---------------------------------------------------------------------------
   Klikbar statuskæde på ordresiden.

   Trinnene er knapper, ikke pynt: status sættes ved klik, også baglæns.
   Kreditnota står adskilt fra kæden — den er en anden udgang, ikke et
   senere trin.
--------------------------------------------------------------------------- */

.schain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.schain-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.schain-step:hover:not(:disabled) { background: var(--brand-tint); color: var(--ink); }
.schain-step:disabled { opacity: 0.5; cursor: progress; }
.schain-mark {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.schain-done { color: var(--ink-soft); border-color: var(--good); }
.schain-done .schain-mark { background: var(--good); color: #fff; }
.schain-current {
  color: var(--ink);
  font-weight: 650;
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: var(--shadow-sm);
}
.schain-current .schain-mark { background: var(--brand); color: #fff; }
.schain-line { width: 14px; height: 1px; background: var(--line); flex: none; }
.schain-aside { margin-left: 14px; padding-left: 12px; border-style: dashed; }

/* Indstillingsfelter på Udvikling → System. */
.setting-input {
  width: 130px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.setting-input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }

/* `hidden` skal faktisk skjule.
 *
 * Attributten giver `display: none` fra browserens standardark, men enhver
 * klasseregel med `display` slår den — en klassevælger vejer tungere end
 * attributten alene. Både badgen (display:grid) og statuslinjen (display:flex)
 * blev derfor stående: klokken viste et rødt "0", og der lå en tom hvid
 * stribe på forsiden hvor linjen var slået fra.
 *
 * Vælgerne her er mere specifikke end dem de retter, så de vinder uden
 * !important. */
.icon-btn .badge[hidden],
.status-strip[hidden] {
  display: none;
}

/* Historisk ordre: flowet er gjort op, ikke dokumenteret.
 *
 * Samme grønne som `documented`, men trinnet siger selv "Afsluttet" og
 * noten over sporet forklarer hvorfor. Grøn betyder her "lukket", ikke
 * "vi har bilaget". */
/* Grøn som `documented`, men med en lys inderring, så de to kan skelnes når
 * de står ved siden af hinanden. Signaturforklaringen viser dem som to
 * punkter, og to punkter der ser helt ens ud, er en forklaring der lyver. */
.fstep.archived .fmark {
  background: var(--good);
  border-color: var(--good);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.fstep.archived .fstate { color: var(--good); }
.fdot.archived {
  background: var(--good);
  border-color: var(--good);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.flow-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 16px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: var(--good-tint);
  border: 1px solid var(--good);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.flow-note svg { flex: none; margin-top: 2px; color: var(--good); }

/* Godkendelseskort i Flow → Approvals.
 *
 * Teksten står i fuld længde ved siden af knapperne. Skal man klikke sig et
 * andet sted hen for at læse hvad man godkender, bliver "godkend" et tryk
 * man laver på tillid. */
.approval {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.approval:last-child { border-bottom: 0; padding-bottom: 2px; }
.approval-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.approval-title { font-weight: 650; font-size: 14px; }
/* Udkastets nummer foran emnet (Martin 2026-10-10): mail_drafts.id, så et
   udkast kan nævnes med ét tal i stedet for hele emnelinjen. Dæmpet og i
   monospace — det er en henvisning, ikke en overskrift. */
.udkast-nr {
  margin-right: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: -0.01em;
}
.approval-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.approval-actions { display: flex; gap: 8px; flex: none; }
.approval-why {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--brand-tint);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  margin-bottom: 8px;
  /* Notens linjeskift bliver stående: "Lavet / Antaget / Mangler" med
     punkter under skal kunne læses som en liste, ikke som ét afsnit. */
  white-space: pre-line;
}

/* Opfølgningsrække med handlinger.
 *
 * Knapperne står i rækken, ikke bag et klik ind på kontakten. En opfølgning
 * man skal navigere for at lukke, bliver ikke lukket. */
.frow-act { display: flex; align-items: center; gap: 12px; }
.frow-act .frow-body { flex: 1; min-width: 0; }
.frow-act .frow-title { display: block; text-decoration: none; color: inherit; }
.frow-act .frow-title:hover { text-decoration: underline; }
.frow-actions { display: flex; gap: 6px; flex: none; }
.frow-actions button { font-size: 12px; padding: 5px 10px; }
.frow-actions button:disabled { opacity: 0.5; cursor: progress; }

/* Bilag på ordresiden: klikbare når filen findes, dæmpede når den mangler. */
.doc-open {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin: 0 -8px;
}
.doc-open:hover { background: var(--brand-tint); }
.doc-open .task-title { text-decoration: underline; text-underline-offset: 2px; }
.doc-arrow { margin-left: auto; color: var(--muted); flex: none; }
.doc-missing { opacity: 0.55; }
.doc-missing .task-step { color: var(--muted); }

/* Redigerbart udkast i godkendelseskøen.
 *
 * Sendes svaret i Martins eget navn, skal han kunne rette et ord uden at
 * afvise hele udkastet og skrive mailen forfra i Mail.app. */
.draft-edit {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
}
.draft-edit:focus { outline: 2px solid var(--ring); outline-offset: 1px; background: var(--card); }
.draft-hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

/* Flerlinjede indstillinger — fx mailsignaturen. */
.setting-area {
  width: 100%;
  max-width: 620px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}
.setting-area:focus { outline: 2px solid var(--ring); outline-offset: 1px; }

/* Skriv mail — formularen under Flow. */
.compose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 18px;
  margin-bottom: 4px;
}
.recipient-count {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
.recipient-count b { font-size: 15px; color: var(--ink); }
/* Mange modtagere skal SES. En kampagne til 194 adresser kan ikke kaldes
   tilbage, og tallet må ikke kunne overses i en ellers rolig formular. */
.recipient-many { background: var(--warn-tint); border-color: var(--warn); }

/* De modtagere man har plukket ud. Står MELLEM søgefeltet og resultatlisten,
   så man kan se hvem der allerede er valgt mens man søger den næste. */
.valgte-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.valgt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 12px;
}
.valgt-chip button {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.valgt-chip button:hover { color: var(--bad); }

/* Handlinger på hver partner i listen. Dæmpede indtil man er over rækken —
   de skal kunne findes, men ikke konkurrere med tallene om opmærksomheden. */
.partner-handlinger { display: flex; gap: 4px; justify-content: flex-end; }
.mini-btn {
  font-size: 10.5px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  opacity: .45;
  transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}
tr:hover .mini-btn { opacity: 1; }
.mini-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.mini-btn:disabled { opacity: .3; cursor: default; }
.mini-ok:hover { border-color: var(--accent, #4f8268); color: var(--accent, #4f8268); }
/* Sletning ligner ikke de to andre. Den er ikke reversibel. */
.mini-fare:hover { border-color: var(--bad, #b4443a); color: var(--bad, #b4443a); }

.contact-list {
  max-height: 190px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  margin-top: 6px;
}
.contact-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 7px 11px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  cursor: pointer;
  font: inherit;
}
.contact-row:last-child { border-bottom: 0; }
.contact-row:hover { background: var(--brand-tint); }
.contact-row.active { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.contact-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.contact-meta { font-size: 11.5px; color: var(--muted); }

.compose-result {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Svar på en ventende opgave direkte under Workflows (Martin 2026-09-20). */
.wf-reply { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.wf-reply .draft-edit { margin-top: 6px; }
.wf-reply .approval-actions { align-items: center; }

/* ---------------------------------------------------------------------------
   Skriv mail — to spalter: valg til venstre, teksten til højre.
   (Martin 2026-09-20: gode tekstfelter, smooth og flot.)
   --------------------------------------------------------------------------- */
.compose {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .compose { grid-template-columns: 1fr; } }
.compose-side { display: flex; flex-direction: column; gap: 18px; }
.compose-main { display: flex; flex-direction: column; gap: 14px; }
.compose-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

/* Ét felt: label over, kontrol, hint under. */
.cf { display: flex; flex-direction: column; gap: 6px; }
.cf-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cf-hint { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Kontrollerne har samme højde, kant og fokusring, så formularen er rolig. */
.cf-select { position: relative; }
.cf-select select,
.cf-search input,
.compose-brief textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.cf-select select {
  height: 40px;
  padding: 0 36px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.cf-select::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.cf-search { position: relative; }
.cf-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.cf-search input { height: 40px; padding: 0 12px 0 34px; }
.cf-select select:hover, .cf-search input:hover, .compose-brief textarea:hover { border-color: var(--brand); }
.cf-select select:focus, .cf-search input:focus, .compose-brief textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.compose-brief textarea {
  min-height: 240px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}
.compose-brief textarea::placeholder { color: var(--faint); }

/* Typevalg: segmenterede knapper, ét klik, alle synlige. */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.seg-btn {
  height: 36px;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.seg-btn:hover { border-color: var(--brand); color: var(--ink); }
.seg-btn.active {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.compose-actions .btn-primary { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; }
.compose .contact-list { margin-top: 2px; max-height: 240px; }
.compose .recipient-count { margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Flow — lettere og tilpasset skærmen (Martin 2026-09-20).
   Reglerne her ligger sidst med vilje: de overstyrer de generelle ovenfor.
   --------------------------------------------------------------------------- */

/* Fanerne bliver hvor de er, når siden er lang, og de ombrydes aldrig —
   på en smal skærm ruller de vandret i stedet. */
.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 14px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; flex: 0 0 auto; }

/* Hed ".gap" — kolliderede med Udviklings datahul-rækker (2026-09-20). */
.flow-gap { height: 11px; }

/* To-kolonne-layouts falder til én under 1000 px. */
@media (max-width: 1000px) {
  .c360, .flow-grid { grid-template-columns: 1fr; }
  .approval-head { flex-wrap: wrap; }
  .approval-head .approval-actions { width: 100%; justify-content: flex-end; margin-top: 4px; }
}
/* Ingen tekst må skubbe siden bredere end skærmen — message-id'er og URL'er
   i fejlbeskeder gjorde det. */
.approval-why, .bg-uddrag, .bg-resume, .wf-question, .draft-preview, .frow-why, .wf-step-label,
.dev-opg-title, .dev-opg-desc, .dev-opg-trin {
  overflow-wrap: anywhere;
}

/* Tomme visninger: én rolig blok, ikke en plakat. */
.await { text-align: left; padding: 6px 0 2px; }
.await-title { font-size: 13px; font-weight: 650; }
.await-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.await-action { margin-top: 10px; }
.await-fields {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft);
}
.await-fields .dna-label { margin-right: 4px; }
.await-fields .field-chip { font-size: 10.5px; padding: 2px 7px; opacity: .8; }

/* Sammenfoldet baggrund og udkast under Approvals. */
.link-btn {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--brand-dark); cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.fold { margin: 6px 0 8px; }
.fold > summary {
  display: inline-flex; align-items: center; gap: 6px;
  list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card);
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { border-color: var(--brand); color: var(--ink); }
.fold[open] > summary { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep); }
.fold[open] > summary + * { margin-top: 8px; }
.fold-card { padding: 0; }
.fold-card > summary { list-style: none; cursor: pointer; padding: 14px 18px; margin: 0; }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > .wf-list, .fold-card > .empty { padding: 0 18px 16px; }

.draft-preview {
  position: relative;
  white-space: pre-wrap;
  font-size: 13px; line-height: 1.5; color: var(--ink);
  background: var(--brand-tint); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 11px 14px;
  max-height: 118px; overflow: hidden;
}
.draft-preview::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: linear-gradient(180deg, rgba(250,246,238,0), var(--brand-tint));
}
.draft-preview.open { max-height: none; }
.draft-preview.open::after { display: none; }
.approval .draft-edit { display: none; }
.approval.editing .draft-edit { display: block; }
.approval.editing .draft-preview, .approval.editing [data-toggle-preview] { display: none; }
.draft-tools { display: flex; align-items: center; gap: 14px; margin-top: 7px; }
.draft-tools .draft-hint { margin: 0 0 0 auto; }

/* Workflows: kortene er tættere, svaret er foldet sammen til man beder om det. */
.wf-list { gap: 0; }
.wf { padding: 12px 0; }
.wf + .wf { padding-top: 12px; }
.wf-reply { margin-top: 8px; padding-top: 8px; }
.wf-question {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wf-question.open { display: block; -webkit-line-clamp: unset; }
.wf-reply-tools { display: flex; align-items: center; gap: 14px; margin-top: 7px; }
.wf-reply-tools .btn-sm { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.wf-reply-form { display: none; }
.wf-reply.open .wf-reply-form { display: block; margin-top: 6px; }
.wf-reply.open .wf-reply-tools { display: none; }
.nba-warn { background: var(--warn-tint); color: #8a6414; }
.card-warn { border-color: rgba(217, 163, 39, 0.45); }
/* Tomme visninger uden plakat-ikon; felterne på én linje. */
.await-icon { display: none; }
.await-fields .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.await-fields > .dna-label { display: inline; }
.wf-head .nba { white-space: nowrap; flex: 0 0 auto; }
/* Tallene i Flows overskrift er links til fanerne (erstatter den gule stribe). */
.sub-link { color: inherit; text-decoration: none; }
.sub-link b { font-weight: 700; }
.sub-link:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------------------------
   Kalender (Martin 2026-09-20): måned til venstre, dagen og de næste 14
   dage til højre. Prikkerne i gitteret bruger samme farver som listerne.
   --------------------------------------------------------------------------- */
.kal-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .kal-layout { grid-template-columns: 1fr; } }
.kal-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kal-month-title { font-size: 15px; font-weight: 700; }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kal-wd { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 2px 0 4px; }
.kal-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 5px; min-height: 44px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; font: inherit; color: var(--ink); cursor: pointer;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.kal-cell:hover { background: var(--brand-tint); }
.kal-cell.other .kal-num { color: var(--faint); }
.kal-cell.today .kal-num { background: var(--ink); color: var(--card); border-radius: 999px; }
.kal-cell.selected { border-color: var(--brand); background: var(--brand-light); }
.kal-num { width: 24px; height: 24px; line-height: 24px; font-size: 12.5px; font-weight: 650; text-align: center; }
.kal-dots { display: flex; gap: 3px; min-height: 6px; }
.kal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.kal-dot.good { background: var(--good); } .kal-dot.bad { background: var(--bad); } .kal-dot.warn { background: var(--warn); } .kal-dot.muted { background: var(--faint); }
.kal-filters { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.kal-filter { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.kal-filter.off { opacity: .5; }
.kal-filter input { display: none; }
.kal-sync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.kal-sync .link-btn { margin-left: auto; }
.kal-row { align-items: flex-start; }
.kal-time { flex: 0 0 74px; font-size: 12px; font-weight: 650; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 1px; }
.kal-del { opacity: 0; }
.kal-row:hover .kal-del { opacity: 1; }
.kal-daygroup + .kal-daygroup { margin-top: 10px; }
.kal-dayhead { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 2px; }
.kal-form {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px;
  padding: 14px; margin: 4px 0 14px;
  background: var(--brand-tint); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.kal-form .cf-search input { padding-left: 12px; }
.kal-allday { display: flex; align-items: flex-end; gap: 6px; font-size: 12.5px; padding-bottom: 12px; }
.card-title .btn-sm { display: inline-flex; align-items: center; gap: 5px; }

/* ---------------------------------------------------------------------------
   Chat med assistenten — cirklen nederst til højre (Martin 2026-09-20).
   --------------------------------------------------------------------------- */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(199, 154, 63, 0.35), var(--shadow);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(199, 154, 63, 0.4), var(--shadow-md); }
.chat-fab.open { background: var(--ink); box-shadow: var(--shadow); }
.chat-panel {
  position: fixed; right: 22px; bottom: 88px; z-index: 40;
  width: min(420px, calc(100vw - 44px)); height: min(640px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line-soft); background: var(--brand-tint);
}
.chat-head > div:nth-child(2) { flex: 1; min-width: 0; }
.chat-head-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
}
.chat-head-title { font-size: 13.5px; font-weight: 700; }
.chat-head-sub { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { margin: auto 0; padding: 10px 6px; }
.chat-empty-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.chat-empty-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.chat-msg { display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
.chat-user { align-self: flex-end; align-items: flex-end; }
.chat-assistent { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-user .chat-bubble { background: var(--ink); color: var(--card); border-bottom-right-radius: 4px; }
.chat-assistent .chat-bubble { background: var(--bg-2); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.chat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--line);
}
.chat-chip.ok { background: var(--good-tint); color: var(--good); border-color: rgba(47, 158, 87, .3); }
.chat-chip.ok:hover { background: #d9f0e1; }
.chat-chip.fejl { background: var(--warn-tint); color: #8a6414; border-color: rgba(217, 163, 39, .4); }
.chat-typing { display: flex; gap: 4px; padding: 12px 14px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chat-blink 1.2s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .2s; } .chat-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes chat-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--line-soft); background: var(--card);
}
.chat-form textarea {
  flex: 1; resize: none; font: inherit; font-size: 13px; line-height: 1.45;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  max-height: 140px; color: var(--ink);
}
.chat-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); background: var(--card); }
.chat-send {
  width: 38px; height: 38px; border-radius: 50%; border: 0; flex: 0 0 auto;
  background: var(--brand); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chat-send:hover { background: var(--brand-dark); }
@media (max-width: 700px) { .chat-panel { right: 10px; bottom: 80px; width: calc(100vw - 20px); } .chat-fab { right: 14px; bottom: 14px; } }

/* ---------------------------------------------------------------------------
   Formularfelter i dialoger (.ef-field) havde ingen styling — labels og
   felter stod i browserens rå udseende (fundet 2026-09-20 under Skriv mail
   og igen i "Tilføj skabelon"). Ét sæt regler for alle dialoger.
   --------------------------------------------------------------------------- */
.modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.modal-body .ef-field, .ef-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modal-body .ef-wide { grid-column: 1 / -1; }
.ef-field > span:first-child {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.ef-field input:not([type=checkbox]):not([type=radio]), .ef-field select, .ef-field textarea {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; min-height: 40px;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.ef-field input[type=file] { padding: 8px 10px; font-size: 12.5px; background: var(--bg); }
.ef-field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.ef-field input:hover, .ef-field select:hover, .ef-field textarea:hover { border-color: var(--brand); }
.ef-field input:focus, .ef-field select:focus, .ef-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
@media (max-width: 700px) { .modal-body { grid-template-columns: 1fr; } }

/* Data og skabeloner: liste frem for tabel, grupperet pr. producent. */
.tpl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tpl-search { flex: 1; min-width: 0; }
.tpl-toolbar .btn-ghost, .tpl-toolbar .btn-primary { display: inline-flex; align-items: center; gap: 6px; height: 40px; white-space: nowrap; }
.tpl-section-title { margin: 4px 0 8px; }
.tpl-list { display: flex; flex-direction: column; }
.tpl-row {
  display: flex; align-items: center; gap: 14px; padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}
.tpl-row:first-child { border-top: 0; }
.tpl-main { flex: 1; min-width: 0; }
.tpl-name { font-size: 13px; font-weight: 650; color: var(--ink); }
.tpl-desc {
  font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; max-width: 55%; }
.tpl-file {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 12px; color: var(--brand-dark); text-decoration: none;
}
.tpl-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.tpl-file:hover span { text-decoration: underline; }
.tpl-size { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; width: 58px; text-align: right; }
.tpl-del { opacity: 0; }
.tpl-row:hover .tpl-del { opacity: 1; }
.tpl-group > .tpl-list { padding: 0 18px 12px; }
@media (max-width: 900px) {
  .tpl-row { flex-wrap: wrap; }
  .tpl-meta { max-width: 100%; width: 100%; justify-content: flex-start; }
  .tpl-del { opacity: 1; }
}
.fold-card > .gap-list { padding: 0 18px 14px; }
/* Minimeret chat: kun hovedet som en bjælke nederst til højre. */
.chat-panel.min {
  height: auto; bottom: 22px; width: 300px;
  border-radius: var(--radius-pill); cursor: pointer;
}
.chat-panel.min .chat-head { padding: 8px 10px 8px 12px; border-bottom: 0; }
.chat-panel.min .chat-head-sub { display: none; }
.chat-panel.min .chat-head-title { font-size: 13px; }
.chat-panel.min [data-chat-min] { display: none; }
.chat-panel.min .chat-log, .chat-panel.min .chat-form { display: none; }
.chat-panel.min:hover { box-shadow: var(--shadow-md); border-color: var(--brand); }
.chat-head .icon-btn-sm { flex: 0 0 auto; }
/* display:flex på cirklen og panelet slog [hidden] ihjel — de var aldrig helt væk. */
.chat-fab[hidden], .chat-panel[hidden] { display: none !important; }
/* Titel på kontakten i modtagerlisten (Martin 2026-09-21). */
.contact-title { font-weight: 500; color: var(--muted); font-size: 11.5px; margin-left: 4px; }

/* Bestillingscyklus (Martin 2026-09-21) — på Kunde 360 og som miniature i listen. */
.cyk-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.cyk-meta b { color: var(--ink); }
.cyk-grid { display: flex; flex-direction: column; gap: 4px; }
.cyk-row { display: grid; grid-template-columns: 44px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.cyk-head span { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; }
.cyk-year { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.cyk-cell {
  position: relative; height: 26px; border-radius: 6px; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--ink);
}
.cyk-cell.on { background: color-mix(in srgb, var(--brand) calc(var(--k) * 85%), var(--brand-light)); }
.cyk-cell.now { box-shadow: inset 0 0 0 2px var(--ink); }
.cyk-cell.next { outline: 2px dashed var(--brand-dark); outline-offset: -2px; }
.cyk-cell.typ::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-dark); }
.cyk { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.cyk i { display: block; width: 6px; border-radius: 1px; background: var(--line); }
.cyk i.on { background: var(--brand); }
.partner-handlinger { flex-wrap: nowrap; }
/* Udsæt under Godkendelser */
.udsaet-valg { display: flex; gap: 6px; margin-top: 6px; }
/* Postkassevalg øverst på Mail (Martin 2026-09-23). */
.konto-valg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.konto-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: var(--radius-pill);
             padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.konto-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
.konto-btn.active { background: var(--brand); border-color: var(--brand); color: #23180e; }
/* Vedhæftninger på et udkast i Godkendelser (Martin 2026-09-23). */
.draft-bilag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 10px;
               font-size: 12.5px; color: var(--ink-soft); }
.draft-bilag a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.draft-bilag a:hover { text-decoration: underline; }
.draft-bilag-size { font-size: 11px; color: var(--muted); margin: 0 6px 0 4px; font-variant-numeric: tabular-nums; }
.approval-actions .fold { margin: 0; }
/* Retail Partners: tabellen er bredere end skærmen. Den ruller vandret, og
   handlingskolonnen (Inaktivér/Slet) sidder fast i højre kant, så den altid
   kan nås (Martin 2026-09-21: "Deaktiver-knappen er klippet af"). */
.rp-grid th:last-child, .rp-grid td:last-child {
  position: sticky; right: 0; background: var(--card);
  box-shadow: -8px 0 12px -10px rgba(44, 38, 32, 0.25);
}
.rp-grid tbody tr:hover td:last-child { background: var(--brand-tint); }
.rp-grid thead th:last-child { background: var(--bg-2); }
.table-card { overflow-x: auto; }
/* Grid-cellerne klipper indholdet (max-width: 0). Handlingskolonnen skal
   have sin fulde bredde, ellers klippes "Inaktivér" væk igen. */
.rp-grid th:last-child, .rp-grid td:last-child { min-width: 172px; width: 172px; max-width: none; overflow: visible; }
/* Handlingskolonnen som ikoner: 66 px, fast i højre kant. */
.rp-grid th:last-child, .rp-grid td:last-child { min-width: 66px; width: 66px; }
.mini-ikon { display: inline-flex; align-items: center; justify-content: center; padding: 4px 5px; line-height: 0; }
.cyk i { width: 5px; }

/* Bestillingscyklus som graf (Martin 2026-09-21): én linje pr. år, måneder ud ad x-aksen. */
.cyk-chart { position: relative; }
.cyk-chart svg { display: block; width: 100%; height: 230px; overflow: visible; }
.cyk-grid-line { stroke: var(--line-soft); stroke-width: 1; }
.cyk-axis { font-size: 10px; fill: var(--muted); }
.cyk-band { fill: var(--bg-2); }
.cyk-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cyk-dot { stroke: var(--card); stroke-width: 2; }
.cyk-old { opacity: .55; }
.cyk-hair { stroke: var(--ink-soft); stroke-width: 1; opacity: 0; }
.cyk-hit { fill: transparent; cursor: crosshair; }
.cyk-endlabel { font-size: 11px; font-weight: 700; fill: var(--ink-soft); }
.cyk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.cyk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cyk-key { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.cyk-tip {
  position: absolute; pointer-events: none; z-index: 3; min-width: 140px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 8px 10px; font-size: 12px; color: var(--ink);
}
.cyk-tip[hidden] { display: none; }
.cyk-tip-title { font-weight: 700; margin-bottom: 4px; }
.cyk-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cyk-tip-row i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cyk-tip-row b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
/* Én graf pr. brand, to i bredden. */
.cyk-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 18px; }
.cyk-brand { min-width: 0; }
.cyk-brand-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cyk-brand-name { font-size: 13px; font-weight: 700; }
.cyk-brand-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cyk-brand .cyk-chart svg { height: auto; aspect-ratio: 320 / 150; }
.cyk-tip { transform: translateY(-100%); }
/* En enkelt brand-graf må ikke fylde hele kortets bredde — så skaleres
   akseteksten op til plakatstørrelse. Højst 360 px pr. graf. */
.cyk-brands { grid-template-columns: repeat(auto-fill, minmax(260px, 360px)); }
.cyk-brand .cyk-tip { transform: none; }
/* Graferne tegnes i pixels (drawChart) — SVG'en skaleres ikke. */
.cyk-brands { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 22px; }
.cyk-brands-one { grid-template-columns: 1fr; }
.cyk-brand .cyk-chart svg { width: 100%; height: auto; aspect-ratio: auto; display: block; }
.cyk-wash { opacity: .1; }
.cyk-brand-head { margin-bottom: 6px; }
.cyk-brand-name { font-size: 13.5px; }
/* Bedste år som benchmark under hvert nøgletal (Martin 2026-09-21). */
.pulse-bench { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.pulse-bench b { color: var(--ink); font-weight: 650; }
.pulse-bench svg { color: var(--brand-dark); }
/* Benchmark-linjen skal stå på én linje — renderValue giver blok-elementer. */
.pulse-bench { display: block; line-height: 1.5; }
.pulse-bench svg { vertical-align: -1px; margin-right: 3px; }
.pulse-bench b, .pulse-bench b > *, .pulse-bench b .pulse-value, .pulse-bench b .value { display: inline !important; font-size: inherit !important; }

/* ---------------------------------------------------------------------------
   Præsentation (Martin 2026-09-23): alle tal sløres, så systemet kan vises frem.
   Klassen sættes på <body> af js/praesentation.js; cifre pakkes i .tal-blur.
   --------------------------------------------------------------------------- */
body.praesentation .tal-blur { filter: blur(6px); user-select: none; }
body.praesentation .tal-blur-felt { filter: blur(5px); }
body.praesentation canvas, body.praesentation .cyk-chart svg, body.praesentation .cyk { filter: blur(6px); }
.praes-knap.on { background: var(--brand); color: #23180e; border-color: var(--brand); }

/* ---------------------------------------------------------------------------
   Mobil (Martin 2026-09-23): samme sider, én kolonne, sidebar som menu.
   --------------------------------------------------------------------------- */
/* Menuknappen er med på alle skærme: på telefon åbner den sidebaren, på
   brede skærme kører den sidebaren til side (Martin 2026-09-23). */
.menu-btn { display: grid; flex: 0 0 38px; }
.topbar-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
@media (min-width: 901px) {
  /* Animeres kun efter et tryk (html.sidebar-anim) — ikke ved sideindlæsning. */
  html.sidebar-anim .sidebar { transition: margin-left 0.2s var(--ease), transform 0.2s var(--ease); }
  html.sidebar-skjult .sidebar { margin-left: calc(-1 * var(--sidebar-w)); transform: translateX(-100%); }
}
/* Global søgning: liste under søgefeltet. */
.search { position: relative; }
.search-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px; z-index: 45;
                background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
                box-shadow: var(--shadow-md); max-height: 70vh; overflow-y: auto; padding: 6px; }
.search-panel[hidden] { display: none; }
.search-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.search-hit { display: block; padding: 7px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13px; }
.search-hit:hover { background: var(--brand-tint); }
.search-hit small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.topbar-titles { min-width: 0; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(35, 24, 14, 0.45); z-index: 55; }
.sidebar-backdrop[hidden] { display: none; }
@media (max-width: 900px) {
  .app { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; width: 252px;
    transform: translateX(-100%); transition: transform 0.2s var(--ease); z-index: 60;
  }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); }
  .main { padding: 12px 14px 96px; gap: 10px; }
  .topbar { gap: 10px; }
  .topbar-head { align-items: center; width: 100%; }
  .page-title { font-size: 22px; }
  .page-sub { flex-wrap: wrap; row-gap: 3px; }
  .topbar-actions { width: 100%; flex-wrap: wrap; gap: 8px; padding-top: 0; }
  .search { width: 100%; order: 10; }
  /* minmax(0, 1fr) og ikke 1fr: "1fr" er minmax(auto, 1fr), og så vokser
     kolonnen med det bredeste barn — kalenderkortet stak ud af skærmen. */
  .row-1, .row-bottom, .pulse-grid, .c360, .flow-grid, .mail-split, .compose, .compose-grid,
  .kal-layout, .rate-row, .seg, .gap-tally, .modal-body, .kal-form, .cyk-brands, .kv, .kv-tight {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .weather-metrics, .stat-row, .mailbox-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .main > *, .kal-layout > *, .card { min-width: 0; max-width: 100%; }
  .livefeed { display: none; }
  .card { padding: 12px; }
  .card:has(table), .table-card, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table { min-width: 560px; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; overflow-y: auto; }
  .btn-primary, .icon-btn { min-height: 40px; }
  .footer { flex-wrap: wrap; gap: 4px 12px; font-size: 11px; }
  .notif-panel { left: 0; right: 0; width: auto; }
  .chat-panel { width: calc(100vw - 20px); right: 10px; }
  /* Faneblade ruller vandret frem for at blive klippet (Flow, Mail). */
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }
  /* Kortoverskrifter med knap ("I dag · … + Ny aftale") må ombryde. */
  .card-title { flex-wrap: wrap; row-gap: 6px; }
  /* Listerne trækker sig 15 px ud over kortets kant med negative margener —
     på en telefon er kortets kant skærmens kant. Og knapper der først vises
     ved hover (slet, ryd) findes ikke på touch: de skal kunne ses. */
  .table-wrap { margin: 0 -12px -12px; }
  /* Rækkerne er grid-børn med min-width: auto, og titlens nowrap tvinger dem
     bredere end skærmen (flow 541 px, kalender 386 px målt 2026-09-23).
     min-width: 0 lader rækken følge kortet, så titlen forkortes med "…". */
  .frow, .flist > * { margin: 0; min-width: 0; }
  .frow .btn-sm, .kal-del, .tpl-del { opacity: 1; }
}

/* Retail partners ↔ leverandører: et lille segment i værktøjslinjen (Martin 2026-09-23). */
.seg-inline { display: inline-flex; gap: 4px; margin-right: 6px; }
.seg-inline .seg-btn { padding: 6px 12px; font-size: 12.5px; }
.seg-tal { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--bg-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.seg-btn.active .seg-tal { background: var(--brand-light); color: var(--brand-deep); }

/* Design-siden (Martin 2026-09-23): designopgaver med status, alle tilbud, præsentationer, regler. */
.design-kort { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.design-kort:last-child { border-bottom: 0; }
.design-kort-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.design-kort-titel { font-weight: 650; font-size: 14px; }
.design-kort-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); margin-top: 3px; align-items: center; }
.design-kort-rad { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-top: 8px; align-items: center; }
.design-kort-rad a { color: var(--brand-dark); text-decoration: none; }
.design-kort-rad a:hover { text-decoration: underline; }
.design-seneste { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.design-forloeb { font-size: 12px; line-height: 1.6; padding: 4px 0 2px 4px; }
.design-fil { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; color: var(--brand-dark); font-weight: 600; text-decoration: none; font-size: 12.5px; }
.design-fil:hover { text-decoration: underline; }
.design-bestil { display: flex; flex-direction: column; gap: 8px; }
.design-bestil input, .design-bestil textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font: inherit; font-size: 13px; color: var(--ink); resize: vertical; }
.design-bestil input:focus, .design-bestil textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.regler { font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-width: 820px; }
.regler-h1 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.regler-h2 { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 6px; }
.regler-liste { margin: 0; padding-left: 18px; }
.regler-liste li { margin-bottom: 4px; }
.regler p { margin: 0 0 8px; }
.design-filer { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.design-filer .design-fil { margin-right: 0; }

/* Design som galleri (Martin 2026-09-23: "skal ikke ligne excel links … må gerne se lækkert ud"). */
.galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.galleri-lille { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.galleri-titel { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 22px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.g-kort { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.g-kort:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(44, 38, 32, .45); }
.g-thumb { position: relative; display: block; aspect-ratio: 1 / 1.3; background: linear-gradient(180deg, #f4f1eb, #ebe6dd); border-bottom: 1px solid var(--line); overflow: hidden; }
.g-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.g-thumb-tom { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--faint); }
.g-thumb.tom .g-thumb-tom { display: flex; }
.g-lille .g-thumb { aspect-ratio: 1 / 1; }
.g-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.g-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g-nr { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep); }
.g-kunde { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.g-kunde a { color: inherit; text-decoration: none; }
.g-kunde a:hover { color: var(--brand-dark); }
.g-meta { font-size: 12px; color: var(--muted); line-height: 1.45; }
.g-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.g-actions .btn-sm { display: inline-flex; align-items: center; gap: 5px; }

/* Lav design */
.lav { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .lav { grid-template-columns: 1fr; } }
.lav-side { display: flex; flex-direction: column; gap: 18px; }
.lav-to { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lav-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font: inherit; font-size: 13.5px; color: var(--ink); }
.lav-input:hover { border-color: var(--brand); }
.lav-input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.chips-valg { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.chip-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
.chip-btn.active { background: var(--brand); border-color: var(--brand); color: #23180e; }
.chip-btn.active .seg-tal { background: rgba(255,255,255,.55); color: #23180e; }
.prod-liste { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.prod-gruppe-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-2); font-size: 12.5px; position: sticky; top: 0; z-index: 1; }
.prod-row { display: grid; grid-template-columns: 18px 1fr auto; grid-template-areas: "boks navn pris" "boks meta pris"; gap: 0 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); cursor: pointer; font-size: 12.5px; }
.prod-row:hover { background: var(--brand-tint); }
.prod-row.active { background: var(--brand-tint); }
.prod-row input { grid-area: boks; margin: 0; }
.prod-navn { grid-area: navn; color: var(--ink); }
.prod-meta { grid-area: meta; font-size: 11px; color: var(--muted); }
.prod-pris { grid-area: pris; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Statusringen */
.ring-kort { display: flex; gap: 28px; align-items: center; padding: 28px; }
.ring-wrap { position: relative; width: 150px; height: 150px; flex: none; }
.ring-svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--bg-2); stroke-width: 9; }
.ring-fg { fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring-good .ring-fg { stroke: var(--good); }
.ring-bad .ring-fg { stroke: var(--bad); }
.ring-muted .ring-fg { stroke: var(--line); }
.ring-tal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring-tal small { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.ring-good .ring-tal, .ring-tal svg { color: var(--good); }
.ring-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ring-titel { font-size: 17px; font-weight: 750; color: var(--ink); }
.ring-status { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); }
.ring-trin { font-size: 13.5px; color: var(--ink-soft); }
.ring-log { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
@media (max-width: 900px) { .ring-kort { flex-direction: column; text-align: center; } .ring-tekst { align-items: center; } .lav-to { grid-template-columns: 1fr; } }

/* Provision — én opgørelse pr. brand pr. måned (2026-09-23) */
.prov-grid td { vertical-align: top; }
.prov-grid tbody tr { cursor: default; }
.prov-grid tbody tr:hover { background: transparent; }
.prov-grid tr.prov-year td { background: var(--bg-2); font-weight: 700; color: var(--ink-soft); font-size: 12px; }
.prov-grid tr.prov-year .prov-note { font-weight: 500; }
.prov-maaned { font-weight: 600; white-space: nowrap; text-transform: capitalize; }
.prov-cell { min-width: 150px; }
.prov-cell a { font-weight: 700; color: var(--brand-deep); text-decoration: none; }
.prov-cell a:hover { text-decoration: underline; }
.prov-foer { color: var(--muted); }
.prov-note { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.prov-info { font-size: 13px; color: var(--ink-soft); }
.prov-info ul { margin: 6px 0 0; padding-left: 18px; }
.prov-info li { margin: 4px 0; line-height: 1.45; }
.prov-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
@media (max-width: 900px) { .prov-two { grid-template-columns: 1fr; } }
.prov-liste { list-style: none; margin: 0; padding: 0; }
.prov-liste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.prov-liste li:last-child { border-bottom: 0; }
.prov-liste .prov-note { grid-column: 1 / -1; }
.prov-liste-tal { font-weight: 700; white-space: nowrap; }
.prov-liste-tal a { color: var(--brand-deep); text-decoration: none; }
.prov-liste-tal a:hover { text-decoration: underline; }
.prov-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
/* På telefonen ruller tabelkortet vandret frem for at klemme månederne. */
.prov-grid { min-width: 560px; }
.prov-grid td.prov-maaned { overflow: visible; text-overflow: clip; }

/* Opgaver som selvstændige kort med Udfør/Afvis (Martin 2026-09-24) */
.section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.section-head:first-child { margin-top: 0; }
.section-head-warn { color: var(--warn); }
.task-list { display: grid; gap: 10px; margin-bottom: 6px; }
.task-list-done { padding: 0 18px 16px; }
.task-card { border-left: 4px solid var(--line); }
.task-card.task-warn { border-left-color: var(--warn); }
.task-card.task-bad { border-left-color: var(--bad); }
.task-card.task-good { border-left-color: var(--good); }
.task-list .wf + .wf { border-top: 0; padding-top: 0; }
.task-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft);
}
.task-actions .btn-primary.btn-sm { padding: 7px 14px; font-size: 12.5px; }
.task-hint { font-size: 11px; color: var(--muted); margin-left: auto; text-align: right; }
.task-actions button:disabled { opacity: .55; cursor: default; }
.frow-actions { display: flex; gap: 6px; align-self: center; flex: 0 0 auto; }
.frow .frow-actions .btn-sm { opacity: 1; }
.frow .btn-primary.btn-sm { padding: 6px 11px; font-size: 12px; }
@media (max-width: 900px) {
  .task-hint { margin-left: 0; width: 100%; text-align: left; }
  .frow-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
}

/* Mail: hver besked som sit eget afgrænsede kort (Martin 2026-09-24) */
.mail-rows { gap: 8px; padding: 10px 12px 12px; max-height: 680px; }
.mail-row {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card, #fff);
  padding: 11px 13px 10px;
  box-shadow: 0 1px 2px rgba(35, 24, 14, .04);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.mail-row + .mail-row { border-top: 1px solid var(--line); }
.mail-row:hover { background: var(--card, #fff); border-color: var(--brand); box-shadow: 0 3px 10px rgba(35, 24, 14, .08); transform: translateY(-1px); }
.mail-row.active { background: var(--brand-tint); border-color: var(--brand); border-left-color: var(--brand); box-shadow: none; transform: none; }
.mail-row-handling { border-left-color: var(--warn); }
.mail-row .mail-from { font-size: 13px; font-weight: 700; color: var(--ink); }
.mail-row .mail-subject { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 3px; white-space: normal; line-height: 1.35; }
.mail-preview {
  font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mail-row .mail-row-meta { margin-top: 8px; }
/* .wf nulstiller kortets vandrette padding (den lå før i en liste inde i et
   kort); som selvstændigt kort skal den have den tilbage. */
.task-card.wf { padding: 13px 15px 13px 14px; }
.lav-udvalg { font-size: 13px; color: var(--ink-soft); line-height: 1.5; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }

/* Forsiden: faner (Overblik · I dag · Opgaver · Opfølgninger) og "I dag i tal" */
#tabs { margin-bottom: 14px; }
#tabs:empty { display: none; }
#opgaver-view { display: block; }
#opgaver-view[hidden], #overblik[hidden] { display: none; }
.idag-tal { display: grid; gap: 2px; }
.idag-tal-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
  padding: 6px 6px; border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; font-size: 12.5px;
}
.idag-tal-row:hover { background: var(--bg-2); color: var(--ink); }
.idag-n { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.idag-n.t-bad { color: var(--bad); }
.idag-n.t-warn { color: var(--warn); }
.idag-tal-row svg { color: var(--faint); }

/* Provision på brand- og kundesiden (2026-09-24) */
.prov-aar-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.prov-aar { flex: 1 1 150px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-tint); }
.prov-aar-tal { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.prov-aar-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.prov-mini td, .prov-mini th { padding: 5px 10px; }
.prov-mini a { color: var(--brand-deep); font-weight: 700; text-decoration: none; }
.prov-mini a:hover { text-decoration: underline; }

/* Provisionsfakturaer til producenten (udvikling #866): beløb må aldrig
   klippes med "…" — tabellen ruller vandret i stedet, også på telefonen. */
.prov-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prov-scroll table.grid td { overflow: visible; text-overflow: clip; max-width: none; }
.prov-scroll table.grid { min-width: 100%; width: max-content; }
.prov-scroll-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 360-siderne: hero-hoved og to kolonner (Martin 2026-09-24: "visuelt flot at
   se på, samme funktioner") */
.hero360 {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(201, 162, 77, .22), transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, var(--card) 100%);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 14px; margin-bottom: 11px;
}
.hero360-top { display: flex; align-items: center; gap: 16px; }
.hero360-avatar {
  width: 68px; height: 68px; border-radius: 18px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep, #8a6a24) 100%);
  color: #23180e; font-weight: 800; font-size: 22px; letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(35, 24, 14, .16);
}
.hero360-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8px; }
.hero360-body { min-width: 0; flex: 1; }
.hero360-name { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.hero360-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.hchip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--ink-soft); border: 1px solid var(--line); }
.hchip-good { background: var(--good-tint); color: var(--good); border-color: transparent; }
.hchip-warm { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
.hero360-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.hero360-facts b { color: var(--ink); font-weight: 650; }
.hero360-facts a { color: var(--brand-deep); text-decoration: none; }
.hero360-stats {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.hstat { padding: 2px 14px 2px 0; border-right: 1px solid var(--line-soft); margin-right: 14px; min-width: 0; }
.hstat:last-child { border-right: 0; margin-right: 0; }
.hstat-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hstat-value { font-size: 20px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hstat-note { font-size: 11px; color: var(--muted); margin-top: 1px; }
@media (max-width: 1100px) { .hero360-stats { grid-template-columns: repeat(3, 1fr); row-gap: 12px; } .hstat:nth-child(3) { border-right: 0; } }
@media (max-width: 640px) { .hero360-stats { grid-template-columns: repeat(2, 1fr); } .hstat { border-right: 0; } .hero360-name { font-size: 20px; } .hero360-avatar { width: 54px; height: 54px; font-size: 18px; } }
/* To kolonner så langt ned som pladsen rækker — én kolonne først på små skærme. */
@media (min-width: 981px) { .c360 { grid-template-columns: 1.55fr 1fr; } }
.c360 .card-title { display: flex; align-items: center; gap: 8px; }
.c360 .card-title .ct-ikon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--brand-tint); color: var(--brand-deep); flex: 0 0 auto; }

/* Forsiden — Overblik uden faner (Martin 2026-09-24). Rolige sektioner som på
   Design-siden: lille overskrift, få kort, store tal. */
.ob-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 2px 8px; }
.ob-head:first-of-type { margin-top: 4px; }
.ob-status { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); padding: 0; overflow: hidden; }
.kpi-strip .kpi { border-right: 1px solid var(--line-soft); }
.kpi-strip .kpi:last-child { border-right: 0; }
.ob-idag { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.ob-kunder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob .livefeed { margin-top: 18px; }
.ob .card-title .num { display: none; }
.idag-nul { opacity: .55; }
a.opp { text-decoration: none; color: inherit; display: block; }
@media (max-width: 1200px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } .kpi-strip .kpi:nth-child(3) { border-right: 0; } .kpi-strip .kpi:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 1000px) { .ob-status, .ob-idag, .ob-kunder { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } .kpi-strip .kpi { border-right: 0; border-bottom: 1px solid var(--line-soft); } }
/* Afsender på godkendelseskortet (2026-09-25) */
.approval-afsender { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font-size: 12px; color: var(--muted); }
.approval-afsender select { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 3px 8px; }
.approval-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

/* Versioner af et tilbud på Design-siden (2026-09-25) */
.g-version-chip { margin-left: 4px; vertical-align: middle; }
.g-versioner { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.g-versioner > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--brand-deep); list-style: none; }
.g-versioner > summary::-webkit-details-marker { display: none; }
.g-versioner > summary::before { content: "▸ "; }
.g-versioner[open] > summary::before { content: "▾ "; }
.g-version { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.g-version:last-child { border-bottom: 0; }
.g-version-hoved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.g-version-note { color: var(--ink-soft); flex-basis: 100%; }
.g-version-knapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.g-diff { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); font-size: 12px; line-height: 1.5; display: grid; gap: 3px; }
.g-diff-hoved { font-weight: 700; color: var(--ink); }
/* Tilbuddets mangler — kun internt, står aldrig i kundens PDF (udvikling #928) */
.g-mangler > summary { color: var(--warn); }
.g-mangler-liste { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }
.g-mangler-liste small { display: block; color: var(--faint); }
.approval-tilbud { font-size: 12px; color: var(--ink-soft); margin: 6px 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Kontaktfoto fra firmaets hjemmeside (2026-09-25) — samme runde plads som initialerne */
.person .avatar-foto { object-fit: cover; padding: 0; border: 1px solid var(--line); background: var(--bg-2); }

/* Kategoriansvar pr. kontaktperson (udvikling #880) — tags under personen,
   multivalg som chips, filter over listen og oversigten på kundesiden. */
.kat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.kat-tag { display: inline-block; font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--good-tint); color: var(--good); line-height: 1.4; }
.kat-tag-ukendt { background: var(--bg-2); color: var(--muted); border: 1px dashed var(--line); font-weight: 600; }
.kat-tom { font-size: 10.5px; color: var(--muted); }
.kat-ret { border: 0; background: transparent; color: var(--brand-deep); font: inherit; font-size: 10.5px; font-weight: 650; cursor: pointer; padding: 2px 4px; display: inline-flex; align-items: center; gap: 3px; }
.kat-ret:hover { text-decoration: underline; }
.kat-row-forslag { margin-top: 3px; }
.kat-forslag-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.kat-forslag { display: inline-flex; align-items: center; border: 1px dashed var(--line); border-radius: var(--radius-pill); background: var(--card); }
.kat-forslag button { border: 0; background: transparent; font: inherit; font-size: 10.5px; cursor: pointer; padding: 2px 6px; color: var(--ink-soft); }
.kat-forslag .kat-forslag-ja:hover { color: var(--good); }
.kat-forslag .kat-forslag-nej { color: var(--muted); padding-left: 2px; }
.kat-forslag .kat-forslag-nej:hover { color: var(--bad); }
.kat-editor { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); display: grid; gap: 8px; }
.kat-valg { display: flex; flex-wrap: wrap; gap: 5px; }
.kat-valg-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: var(--radius-pill); padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 30px; }
.kat-valg-chip.on { background: var(--brand); border-color: var(--brand); color: #23180e; }
.kat-ny { display: flex; gap: 6px; }
.kat-ny .ef-input { flex: 1; min-width: 0; }
.kat-editor-fod { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.kat-editor-fod .modal-error { margin-right: auto; }
.kat-filter { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; scrollbar-width: thin; }
.kat-filter .chip-btn { flex: 0 0 auto; padding: 4px 10px; font-size: 11.5px; }
.kat-vis-alle { margin-top: 8px; }
.person[hidden] { display: none; }
.person-fremhaevet { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px; }
.kat-ansvar { display: grid; gap: 8px; }
.kat-ansvar-row { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 10px; align-items: start; font-size: 12.5px; }
.kat-ansvar-row .kat-tag { justify-self: start; }
.kat-ansvar-ejere a { color: var(--ink); font-weight: 650; text-decoration: none; }
.kat-ansvar-ejere a:hover { text-decoration: underline; }
.kat-ansvar-ejere small { color: var(--muted); font-size: 11px; }
.kat-ukendt { margin-top: 12px; }
.kat-ukendt-liste { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ff-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ff-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; }
@media (max-width: 640px) {
  .kat-ansvar-row { grid-template-columns: 1fr; gap: 4px; }
  .kat-forslag button, .kat-ret { padding: 5px 7px; font-size: 11.5px; }
  .kat-tag { font-size: 11px; }
}

/* Hovedkontor-kortet på Customer 360 (udvikling #901): adressen som et
   adressekort til venstre, felterne der kan rettes til højre. */
.hk { display: grid; grid-template-columns: minmax(180px, 1fr) 1.4fr; gap: 16px; margin-bottom: 12px; }
.hk-adresse { background: var(--brand-tint); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; line-height: 1.5; color: var(--ink); }
.hk-navn { font-weight: 800; }
.hk-kilde { margin-top: 6px; font-size: 11px; color: var(--muted); }
.hk-felter { margin: 0; }
.hk-liste { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); }
.hk-liste li { margin: 2px 0; }
@media (max-width: 640px) { .hk { grid-template-columns: 1fr; } }