/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN FAKTURERING (A5) — Cross-tenant billing-oversigt
   prefix: .afk-*
   Aesthetic: Editorial Mission Control (matches A1-A4 family)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --afk-editorial:  'Fraunces', Georgia, 'Times New Roman', serif;
  --afk-grid-tone:  rgba(14, 14, 12, 0.04);
  --afk-donut-trial:    var(--ink-faint);
  --afk-donut-basis:    #C8C6BA;
  --afk-donut-standard: #8FB287;
  --afk-donut-premium:  var(--orange);
  --afk-donut-elite:    var(--ink);
}
:root[data-theme="dark"] {
  --afk-grid-tone:      rgba(250, 250, 247, 0.04);
  --afk-donut-trial:    #5A5A56;
  --afk-donut-basis:    #4A4A48;
  --afk-donut-standard: #6BB342;
  --afk-donut-premium:  var(--orange);
  --afk-donut-elite:    #FAFAF7;
}

/* ─── Page scaffold ─────────────────────────────────────────────────────── */
.afk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.afk-content {
  padding: var(--sp-6) var(--sp-8) var(--sp-16);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  background-image:
    linear-gradient(var(--afk-grid-tone) 1px, transparent 1px),
    linear-gradient(90deg, var(--afk-grid-tone) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* ─── Topbar (matches A1-A4) ───────────────────────────────────────────── */
.afk-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-8);
  background: var(--surface);
  border-bottom: var(--rule-w) solid var(--rule);
  min-height: var(--topbar-h);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.afk-breadcrumb {
  font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-soft);
}
.afk-breadcrumb-sep    { color: var(--ink-ghost); }
.afk-breadcrumb-current{ color: var(--ink); }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.afk-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: var(--rule-w) solid var(--rule-faint);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6);
  align-items: end;
}
.afk-hero-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--orange);
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.afk-hero-eyebrow::before {
  content: ""; display: inline-block;
  width: 32px; height: 1px; background: var(--orange);
}
.afk-hero-h1 {
  font-family: var(--afk-editorial);
  font-style: italic; font-weight: 500;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.afk-hero-h1 em { color: var(--orange); font-style: italic; }

/* Disabled period-pills (Phase 1 — historik kommer Phase 2) */
.afk-period-pills {
  display: inline-flex; align-items: stretch;
  border: var(--rule-w) solid var(--rule-mid);
  border-radius: var(--r-full); overflow: hidden;
  opacity: 0.55;
  position: relative;
  cursor: not-allowed;
}
.afk-period-pills::after {
  content: "Phase 2 · historik kommer juli 2026";
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  white-space: nowrap;
}
.afk-period-pill {
  padding: 7px 14px;
  font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-faint);
  border-right: var(--rule-w) solid var(--rule-mid);
  background: var(--surface);
  pointer-events: none;
}
.afk-period-pill:last-child { border-right: 0; }
.afk-period-pill.is-active {
  background: var(--surface-alt);
  color: var(--ink-soft);
}

/* ─── Status strip (6 cells · billing-specific variant af A1) ──────────── */
.afk-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: var(--rule-w-emph) solid var(--rule);
  border-bottom: var(--rule-w-emph) solid var(--rule);
  margin: var(--sp-6) 0 var(--sp-8);
  background: var(--surface);
}
.afk-strip-cell {
  padding: var(--sp-4) var(--sp-5);
  border-right: var(--rule-w) solid var(--rule-faint);
  display: flex; flex-direction: column; gap: 6px;
}
.afk-strip-cell:last-child { border-right: 0; }
.afk-strip-cell--accent { background: var(--orange-tint); }
.afk-strip-cell--alert  {
  background: rgba(208, 59, 26, 0.04);
  border-left: 3px solid var(--ar-health-bad, #D03B1A);
}
.afk-strip-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-faint);
}
.afk-strip-value {
  font-family: var(--afk-editorial);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.afk-strip-value .afk-unit {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
  font-weight: 400;
  margin-left: 4px; letter-spacing: 0;
}
.afk-strip-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
}
.afk-strip-sub .afk-pos { color: #4A8F2A; }
.afk-strip-sub .afk-neg { color: #D03B1A; }

/* ─── Donut chart ───────────────────────────────────────────────────────── */
.afk-donut-section {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-8);
}
.afk-donut {
  width: 220px; height: 220px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* Background donut via conic-gradient · default fallback gray */
  background: conic-gradient(
    var(--afk-donut-trial)    0% var(--share-trial,    0%),
    var(--afk-donut-basis)    var(--share-trial,    0%) var(--share-basis-end,    0%),
    var(--afk-donut-standard) var(--share-basis-end, 0%) var(--share-standard-end, 0%),
    var(--afk-donut-premium)  var(--share-standard-end, 0%) var(--share-premium-end,  0%),
    var(--afk-donut-elite)    var(--share-premium-end,  0%) 100%
  );
  border-radius: var(--r-full);
  margin: 0 auto;
}
.afk-donut::before {
  content: "";
  position: absolute;
  inset: 36px;
  background: var(--surface);
  border-radius: var(--r-full);
}
.afk-donut-center {
  position: relative;
  z-index: 1;
  text-align: center;
}
.afk-donut-center-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-faint);
}
.afk-donut-center-value {
  font-family: var(--afk-editorial); font-style: italic;
  font-weight: 500;
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.afk-donut-center-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.afk-donut-legend {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.afk-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 8px var(--sp-2);
  border-bottom: 1px solid var(--rule-faint);
  font-size: var(--t-small);
}
.afk-legend-row:last-child { border-bottom: 0; }
.afk-legend-swatch {
  width: 14px; height: 14px;
  border-radius: 3px;
}
.afk-legend-swatch--trial    { background: var(--afk-donut-trial); }
.afk-legend-swatch--basis    { background: var(--afk-donut-basis); }
.afk-legend-swatch--standard { background: var(--afk-donut-standard); }
.afk-legend-swatch--premium  { background: var(--afk-donut-premium); }
.afk-legend-swatch--elite    { background: var(--afk-donut-elite); }
.afk-legend-name {
  font-family: var(--font-sans); font-weight: 500;
  color: var(--ink);
}
.afk-legend-count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.afk-legend-mrr {
  font-family: var(--afk-editorial); font-style: italic;
  font-weight: 500;
  color: var(--ink);
  font-size: 16px;
}
.afk-legend-mrr .afk-mrr-currency {
  font-family: var(--font-mono); font-style: normal;
  font-size: 11px; color: var(--ink-faint);
}

/* ─── Section eyebrow ───────────────────────────────────────────────────── */
.afk-section-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 var(--sp-4);
}
.afk-section-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--orange);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.afk-section-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--orange);
}
.afk-section-title {
  font-family: var(--afk-editorial); font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}
.afk-section-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
}
.afk-section-meta strong { color: var(--ink); font-weight: 600; }

/* ─── Filter chips ──────────────────────────────────────────────────────── */
.afk-filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.afk-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 12px;
  border: var(--rule-w) solid var(--rule-mid);
  border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.afk-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.afk-chip.is-active {
  background: var(--ink); color: var(--surface);
  border-color: var(--ink);
}
.afk-chip-count {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--surface-alt);
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.afk-chip.is-active .afk-chip-count {
  background: var(--orange); color: var(--surface);
}

/* ─── Invoice table ─────────────────────────────────────────────────────── */
.afk-table-wrap {
  background: var(--surface);
  border: var(--rule-w) solid var(--rule-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
.afk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.afk-table thead th {
  text-align: left;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-faint);
  padding: 12px var(--sp-4);
  border-bottom: var(--rule-w) solid var(--rule-mid);
  font-weight: 600;
  background: var(--surface-alt);
}
.afk-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink-soft);
  vertical-align: middle;
}
.afk-table tbody tr:hover td { background: var(--surface-alt); color: var(--ink); }
.afk-table tbody tr:last-child td { border-bottom: 0; }
.afk-col-num     { font-family: var(--font-mono); font-size: 11px; color: var(--ink); white-space: nowrap; }
.afk-col-tenant  { font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
.afk-col-tenant-id {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-faint);
  border: 1px solid var(--rule-faint);
  border-radius: var(--r-sm);
}
.afk-col-amount {
  font-family: var(--afk-editorial); font-style: italic;
  font-size: 16px; color: var(--ink); font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.afk-col-amount .afk-amount-currency {
  font-family: var(--font-mono); font-style: normal; font-size: 11px;
  color: var(--ink-faint);
}
.afk-col-date { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.afk-col-pdf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  color: var(--ink-faint);
  transition: all var(--dur-fast);
  text-decoration: none;
}
.afk-col-pdf:hover { background: var(--orange-tint); color: var(--orange); }

.afk-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 600;
  border-radius: var(--r-full);
  border: 1px solid var(--rule-mid);
}
.afk-status-pill--paid    { color: #4A8F2A; border-color: rgba(74,143,42,0.3); background: rgba(74,143,42,0.05); }
.afk-status-pill--sent    { color: var(--ink-soft); }
.afk-status-pill--overdue { color: #D03B1A; border-color: rgba(208,59,26,0.3); background: rgba(208,59,26,0.05); }
.afk-status-pill--draft   { color: var(--ink-faint); background: var(--surface-alt); }

/* Empty-state */
.afk-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  font-family: var(--afk-editorial); font-style: italic;
  font-size: 18px;
  color: var(--ink-faint);
}
.afk-empty-icon {
  font-size: 36px; margin-bottom: var(--sp-3); opacity: 0.4;
}

/* ─── Payment-failed alert section ─────────────────────────────────────── */
.afk-alerts {
  margin-bottom: var(--sp-8);
  background: var(--surface);
  border: var(--rule-w) solid var(--ar-health-bad, #D03B1A);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      rgba(208,59,26,0.04) 6px,
      rgba(208,59,26,0.04) 7px
    );
}
.afk-alert-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--rule-faint);
  border-radius: var(--r-md);
  margin-top: var(--sp-3);
}
.afk-alert-tenant {
  font-family: var(--font-sans); font-weight: 600;
  color: var(--ink);
}
.afk-alert-tenant-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-faint);
}
.afk-alert-amount {
  font-family: var(--afk-editorial); font-style: italic;
  font-size: 22px;
  color: #D03B1A;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.afk-alert-days {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 600;
}
.afk-alert-days--soon { color: var(--ink-soft); background: var(--surface-alt); }
.afk-alert-days--late { color: var(--orange); background: var(--orange-tint); }
.afk-alert-link {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--rule-faint);
  border-radius: var(--r-full);
}
.afk-alert-link:hover { color: var(--ink); border-color: var(--ink-soft); }

/* ─── Quick actions (3 cards) ───────────────────────────────────────────── */
.afk-quick-actions {
  margin: var(--sp-8) 0 var(--sp-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.afk-action-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--rule-w) solid var(--rule-mid);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: var(--ink);
}
.afk-action-card:hover { border-color: var(--orange); background: var(--orange-tint); }
.afk-action-card[aria-disabled="true"] {
  opacity: 0.55; cursor: default; pointer-events: none;
}
.afk-action-icon { font-size: 22px; margin-bottom: var(--sp-2); }
.afk-action-title {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  color: var(--ink);
}
.afk-action-desc {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.afk-action-soon-tag {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-ghost);
  font-style: italic;
}

/* ─── Krydshenvisninger (4 cards) ───────────────────────────────────────── */
.afk-cross {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--rule-w) solid var(--rule-faint);
}
.afk-cross-card {
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface);
  border: var(--rule-w) solid var(--rule-faint);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--ink);
  transition: all var(--dur-fast) var(--ease-out);
}
.afk-cross-card:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.afk-cross-arrow {
  font-family: var(--font-mono); color: var(--orange);
  align-self: flex-end;
  margin-top: var(--sp-2);
  transition: transform var(--dur-fast);
}
.afk-cross-card:hover .afk-cross-arrow { transform: translateX(3px); }
.afk-cross-title {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
}
.afk-cross-desc {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  line-height: 1.6;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .afk-strip { grid-template-columns: repeat(3, 1fr); }
  .afk-strip-cell:nth-child(3) { border-right: 0; }
  .afk-cross { grid-template-columns: repeat(2, 1fr); }
  .afk-donut-section { grid-template-columns: 1fr; }
  .afk-donut { margin: 0 auto var(--sp-4); }
}
@media (max-width: 900px) {
  .afk-hero { grid-template-columns: 1fr; }
  .afk-quick-actions { grid-template-columns: 1fr; }
  .afk-alert-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .afk-table { font-size: 12px; }
  .afk-table thead th, .afk-table tbody td { padding: 8px; }
}