/*
 * Selskaber og abonnement — /konto/selskaber.
 *
 * The screen is an invoice with an explanation beside it, so the motif is the
 * ledger: a mono column head, dashed rules between the lines, a heavier rule
 * above the total, and the amounts set in the display face with tabular
 * figures so a column of kroner lines up. Nothing here invents a colour —
 * every value is a --nt-* semantic token, so both themes and any future
 * palette re-tune come for free.
 *
 * ── Cascade note (load-bearing) ──────────────────────────────────────────
 * `stylesheet_link_tag :app` emits every sheet under app/assets/stylesheets
 * ALPHABETICALLY, so this file loads BEFORE notarium.css and would LOSE any
 * tie with it (both are unlayered, so a tie is broken by source order). It
 * therefore never restyles a bare .nt-* class: where it reaches into the
 * design system at all it does so through a descendant selector
 * (`.abo-company .nt-card-body`), which wins on specificity regardless of
 * order. No !important anywhere.
 *
 * Also unlayered, which means these rules beat Tailwind utilities on the same
 * property — components below carry their own sizing rather than expecting a
 * utility to override it.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. SUMMARY — the invoice preview and the state beside it
   ══════════════════════════════════════════════════════════════════════ */

.abo-summary {
  display: grid;
  gap: var(--nt-space-6);
  align-items: start;
}

/* Two panes as soon as there is room for both to keep a readable measure.
   Below that they stack, money first: what you pay is the headline, what
   happens next is the follow-up. */
@media (min-width: 46rem) {
  .abo-summary {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--nt-space-6);
  }

  .abo-state {
    padding-left: var(--nt-space-6);
    border-left: 1px solid var(--nt-border-subtle);
  }
}

/* ── The ledger ──────────────────────────────────────────────────────── */

.abo-ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nt-space-4);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--nt-border-subtle);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-text-tertiary);
}

.abo-ledger-rows { margin: 0; }

.abo-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--nt-space-4);
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--nt-border-subtle);
}

.abo-ledger-row:last-child { border-bottom: 0; }

/* A selskabsnavn can be long and unbroken ("Havnehuset Studio ApS" is polite;
   an imported CVR name is not always), and it shares its row with a number
   that must not be pushed off the card. */
.abo-ledger-row dt {
  min-width: 0;
  font-size: var(--nt-text-sm);
  font-weight: 600;
  color: var(--nt-text);
  overflow-wrap: anywhere;
}

.abo-ledger-note {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--nt-text-xs);
  font-weight: 400;
  color: var(--nt-text-tertiary);
}

.abo-ledger-row dd {
  margin: 0;
  font-family: var(--nt-font-display);
  font-size: var(--nt-text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--nt-text);
}

/* A selskab with no plan is not a zero — it is a line that is not on the
   invoice yet, so it is set as text rather than as a figure. */
.abo-ledger-row dd.is-empty {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  font-weight: 400;
  color: var(--nt-text-tertiary);
}

.abo-ledger-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nt-space-4);
  margin: 0;
  padding-top: 0.75rem;
  border-top: 2px solid var(--nt-border);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

.abo-ledger-total strong {
  font-family: var(--nt-font-display);
  font-size: var(--nt-text-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--nt-text);
}

/* ── The state pane ──────────────────────────────────────────────────── */

.abo-state {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-3);
  min-height: 100%;
}

/* Icon AND colour: the access state is the one line on this screen someone
   reads in a hurry, and colour alone is not a status signal. */
.abo-access {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--nt-font-display);
  font-size: var(--nt-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.abo-access svg { flex: none; }

.abo-access-ok { color: var(--nt-ok-text); }
.abo-access-warn { color: var(--nt-warn-text); }
.abo-access-danger { color: var(--nt-danger-text); }
.abo-access-info { color: var(--nt-info-text); }

.abo-access-body {
  margin: 0;
  font-size: var(--nt-text-sm);
  line-height: 1.55;
  color: var(--nt-text-secondary);
}

.abo-callout {
  display: flex;
  gap: 0.6rem;
  padding: var(--nt-space-4);
  border-radius: var(--nt-radius);
  border: 1px solid var(--nt-neutral-border);
  background: var(--nt-neutral-soft);
  color: var(--nt-neutral-text);
}

/* Amber, not red: a selskab without a plan is unfinished business, not an
   overdue frist. */
.abo-callout-warn {
  border-color: var(--nt-warn-border);
  background: var(--nt-warn-soft);
  color: var(--nt-warn-text);
}

.abo-callout svg { flex: none; margin-top: 0.15rem; }

.abo-callout-title {
  margin: 0;
  font-size: var(--nt-text-sm);
  font-weight: 650;
}

.abo-callout-body {
  margin: 0.25rem 0 0;
  font-size: var(--nt-text-sm);
  line-height: 1.5;
}

.abo-callout-cta { margin-top: var(--nt-space-3); }

/* Konto and kontoejer, pushed to the foot of the pane so it lines up with the
   ledger's total rather than floating in the middle of the card. */
.abo-meta {
  display: grid;
  gap: var(--nt-space-2);
  margin: 0;
  margin-top: auto;
  padding-top: var(--nt-space-2);
}

.abo-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.abo-meta dt {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nt-text-tertiary);
}

.abo-meta dd {
  margin: 0;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

/* ── The non-owner's pane ────────────────────────────────────────────── */

.abo-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-2);
}

.abo-viewer-title {
  margin: 0;
  font-family: var(--nt-font-display);
  font-size: var(--nt-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.abo-viewer-body {
  margin: 0;
  font-size: var(--nt-text-sm);
  line-height: 1.6;
  color: var(--nt-text-secondary);
}

/* ── The actions, in the summary's footer ────────────────────────────── */

.abo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nt-space-3);
}

/* The mono caps label reads as the footer's heading, so it takes the whole
   first line and the buttons start clean underneath on a narrow card. */
.abo-actions-label { flex: 1 0 100%; }

/* button_to wraps its button in a <form>, which would otherwise be the flex
   child — the gap would apply to the form and the button would sit inside it
   at a different baseline than its neighbours. Same trick as .nt-menu
   form.contents in navbar.css. */
.abo-actions form,
.abo-upgrade form { display: contents; }

/* ══════════════════════════════════════════════════════════════════════
   2. THE LIST — one card per selskab
   ══════════════════════════════════════════════════════════════════════ */

.abo-list {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-4);
}

.abo-list-head { margin-bottom: calc(var(--nt-space-1) * -1); }

.abo-list-title {
  font-family: var(--nt-font-display);
  font-size: var(--nt-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.abo-list-sub {
  margin-top: 0.15rem;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

/* Specificity, not source order: .nt-card-body is defined in notarium.css,
   which loads after this file. A descendant selector wins either way. */
.abo-company .nt-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-4);
}

.abo-self-start { align-self: flex-start; }

.abo-unplanned {
  margin: 0;
  font-size: var(--nt-text-sm);
  line-height: 1.55;
  color: var(--nt-text-secondary);
}

/* ── Price ───────────────────────────────────────────────────────────── */

.abo-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--nt-space-4);
}

.abo-price-amount {
  margin: 0;
  font-family: var(--nt-font-display);
  font-size: var(--nt-text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--nt-text);
}

.abo-price-since {
  margin: 0;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-tertiary);
}

/* ── The stiftelse offer ─────────────────────────────────────────────── */

/* Seal bordeaux, deliberately: this is the identity/offer voice, not a status.
   Making it amber would say "something needs attention". */
.abo-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: var(--nt-radius-sm);
  border: 1px solid var(--nt-seal-border);
  background: var(--nt-seal-soft);
  color: var(--nt-seal-text);
  font-size: var(--nt-text-sm);
}

.abo-offer-label {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── "Selskabet bærer stiftelsesomkostningerne" ──────────────────────── */

.abo-borne {
  display: flex;
  gap: 0.55rem;
  margin: 0;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

.abo-borne svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--nt-seal);
}

.abo-borne strong {
  display: block;
  font-weight: 600;
  color: var(--nt-text);
}

.abo-borne-hint {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
}

/* ── Features ────────────────────────────────────────────────────────── */

/* The card body owns a 1rem gap; a mono caps label sitting a full rem above
   its own list reads as a separate block, so it is pulled back in. */
.abo-section-label { margin-bottom: -0.45rem; }

/* auto-fit rather than a media query: this list sits inside a card whose width
   the viewport does not describe (a wide phone in landscape still has a narrow
   card here), and a 16rem floor is the point below which a Danish feature
   sentence stops fitting on two lines. */
.abo-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.abo-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: var(--nt-text-sm);
  line-height: 1.45;
  color: var(--nt-text-secondary);
}

.abo-features svg {
  flex: none;
  margin-top: 0.22rem;
  color: var(--nt-ok);
}

/* ── The upgrade difference ──────────────────────────────────────────── */

.abo-upgrade {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-3);
  padding: var(--nt-space-4);
  border-radius: var(--nt-radius);
  /* Dashed: this is an offer, not a fact about the selskab. */
  border: 1px dashed var(--nt-border);
  background: var(--nt-surface-sunken);
}

.abo-upgrade-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin: 0;
}

.abo-upgrade-title {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-text-tertiary);
}

.abo-upgrade-delta {
  font-family: var(--nt-font-display);
  font-size: var(--nt-text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--nt-text);
}

/* The ticks in the upgrade block are not entitlements yet, so they are not
   compliance green — green here would claim the selskab already has them. */
.abo-features-quiet svg { color: var(--nt-text-tertiary); }

/* ── The card's footer ───────────────────────────────────────────────── */

.abo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nt-space-3) var(--nt-space-4);
}

.abo-foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--nt-space-5);
  margin: 0;
  min-width: 0;
}

/* Nothing to say (a shell with no kapital, a non-owner with no invoice line):
   an empty dl would still claim its half of the space-between. */
.abo-foot-meta:empty { display: none; }

.abo-foot-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.abo-foot-meta dt {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nt-text-tertiary);
}

.abo-foot-meta dd {
  margin: 0;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  overflow-wrap: anywhere;
  min-width: 0;
}

.abo-foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nt-space-3);
}

/* ══════════════════════════════════════════════════════════════════════
   THE UPSELL — a denial rendered as a sales surface
   ══════════════════════════════════════════════════════════════════════

   What a customer sees when they reach for something their plan does not
   carry (app/views/workspace/shared/_upsell.html.erb). It lives in the
   BILLING sheet and not in notarium.css on purpose: it is a price message,
   built from the same catalog and in the same voice as the ledger above.

   SEAL-TONED, NEVER RED AND NEVER AMBER. Nothing has gone wrong and nothing
   is due — the design system spends red on "overdue" and amber on "a frist is
   approaching", and borrowing either to say "that costs money" would make
   both of them mean less the next time they appear. Seal is identity: this is
   Notarium telling you what Notarium sells.

   Two shapes from one rule set: the full screen a refused action renders, and
   `.nt-upsell-compact`, an inline block explaining one locked column inside a
   page that is otherwise fine. */

.nt-upsell {
  display: flex;
  gap: var(--nt-space-4);
  align-items: flex-start;
  padding: var(--nt-space-6);
  border: 1px solid var(--nt-seal-border);
  border-radius: var(--nt-radius-lg);
  background: var(--nt-seal-soft);
}

/* Inline inside another card: the card already draws the border, so a second
   one around the same rectangle reads as a box in a box. */
.nt-upsell-compact {
  border: 0;
  border-radius: 0;
  padding: var(--nt-space-5);
}

/* The whole-screen shape. Centred and measured — a refusal is three
   sentences, and three sentences set across a 1280px page are unreadable. */
.nt-upsell-page {
  max-width: 42rem;
  margin: var(--nt-space-8) auto;
}

.nt-upsell-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--nt-radius-full);
  background: var(--nt-seal);
  color: var(--nt-on-seal);
}

.nt-upsell-body { min-width: 0; }

.nt-upsell-eyebrow {
  margin: 0;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-seal-text);
}

.nt-upsell-title {
  margin: 0.2rem 0 0;
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-xl);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--nt-text);
}

.nt-upsell-lede {
  margin: var(--nt-space-2) 0 0;
  font-size: var(--nt-text-base);
  color: var(--nt-text-secondary);
  max-width: var(--nt-prose-max);
}

/* What they already pay for. Quieter than the offer above it — it is context
   for the sentence, not a second offer. */
.nt-upsell-held {
  margin: var(--nt-space-1) 0 0;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-tertiary);
}

.nt-upsell-adds-label { margin: var(--nt-space-4) 0 var(--nt-space-2); }

.nt-upsell-adds {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nt-upsell-adds li {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-2);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

/* Compliance green would claim the selskab already HAS these — same rule the
   upgrade block above follows. Seal: "this is what the plan carries." */
.nt-upsell-adds svg {
  flex: none;
  margin-top: 0.25rem;
  color: var(--nt-seal-text);
}

.nt-upsell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-3);
  margin-top: var(--nt-space-5);
}

/* Under 34rem the icon column costs more than it says. */
@media (max-width: 34rem) {
  .nt-upsell { flex-direction: column; gap: var(--nt-space-3); padding: var(--nt-space-5); }
  .nt-upsell-icon { width: 2.1rem; height: 2.1rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   FAKTURAER
   ══════════════════════════════════════════════════════════════════════

   A table inside a card with `padding: :none`, so the rules run edge to edge
   the way the ledger's do. */

.abo-invoices { min-width: 0; }

/* Amounts right, tabular, display face — the same treatment the ledger total
   gets, because it is the same column of kroner read the same way. */
.abo-invoices-amount { text-align: right; }

.abo-invoices td.abo-invoices-amount {
  font-family: var(--nt-font-display);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text);
}

/* — Narrow viewports —

   Five columns do not fit a phone, and a horizontally scrolling invoice list
   is a list nobody scrolls. Same mechanic as the notification matrix
   (koncern_notifications.css): the table becomes one block per faktura and
   the `data-label` on every cell carries its column header down with it.
   Opt-in per table — `.nt-table` does NOT do this by itself — so the rules
   have to be written here, scoped to this table, or the attributes in the
   view are decoration. */
@media (max-width: 44rem) {
  .abo-invoices .nt-table,
  .abo-invoices .nt-table tbody,
  .abo-invoices .nt-table tr,
  .abo-invoices .nt-table td { display: block; }

  .abo-invoices .nt-table thead { display: none; }

  .abo-invoices .nt-table tbody tr {
    padding: var(--nt-space-3) 0;
    border-bottom: 1px solid var(--nt-border-subtle);
  }

  .abo-invoices .nt-table tbody tr:last-child { border-bottom: 0; }

  .abo-invoices .nt-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nt-space-3);
    border-bottom: 0;
    padding: 0.2rem var(--nt-space-5);
  }

  .abo-invoices .nt-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--nt-text-sm);
    color: var(--nt-text-secondary);
  }

  /* A right-aligned amount inside a left-labelled row reads as a mistake. */
  .abo-invoices td.abo-invoices-amount { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════
   FORLAD SELSKABET / ANDEN EJER
   ══════════════════════════════════════════════════════════════════════ */

/* Deliberately quiet, and deliberately NOT danger-toned. Leaving is a normal
   thing a bookkeeper does when a client relationship ends; dressing it in red
   would make an ordinary act look like a destructive one, and nothing is
   destroyed — the seat is deactivated and an admin can restore it. */
.abo-leave { color: var(--nt-text-tertiary); }
.abo-leave:hover,
.abo-leave:focus-visible { color: var(--nt-danger-text); }

.abo-owner-add {
  margin-top: var(--nt-space-5);
  padding-top: var(--nt-space-4);
  border-top: 1px dashed var(--nt-border-subtle);
}

.abo-owner-add-title {
  margin: 0;
  font-size: var(--nt-text-sm);
  font-weight: 600;
  color: var(--nt-text);
}

.abo-owner-add-body {
  margin: 0.2rem 0 var(--nt-space-3);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  max-width: var(--nt-prose-max);
}

.abo-owner-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nt-space-2);
}

/* Bounded, because the option labels are "Navn · lang@emailadresse.dk" and an
   unconstrained select stretches the card to the longest colleague. */
.abo-owner-select {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 26rem;
  font-size: var(--nt-text-sm);
}

/* ══════════════════════════════════════════════════════════════════════
   STRIPE-HÆNDELSER (sysadmin)
   ══════════════════════════════════════════════════════════════════════

   Staff-only, and in this file rather than a sheet of its own because it is
   the same domain as everything above: Stripe, money, one account. The full
   error message, in mono, on a tinted plate — an operator has to read this
   sentence exactly to know whether a re-run will work. */

.nt-stripe-error {
  padding: var(--nt-space-3) var(--nt-space-4);
  border: 1px solid var(--nt-danger-border);
  border-radius: var(--nt-radius);
  background: var(--nt-danger-soft);
  color: var(--nt-danger-text);
  overflow-wrap: anywhere;
}

/* The upsell inside the wizard's handoff block (workspace/wizards/_panel).
   That section is already seal-toned, so the compact plate's own seal wash
   would be a rectangle you can only see at an angle. Flush and transparent:
   the surrounding section IS the plate. Two classes, so nothing in wizard.css
   is in a cascade tie with it regardless of file order. */
.nt-handoff .nt-upsell-compact {
  padding: 0;
  margin-top: var(--nt-space-3);
  background: transparent;
}