/* ══════════════════════════════════════════════════════════════════════════
 * OVERBLIK — the company's front door.
 *
 * Kept out of notarium.css the same way koncern.css and navbar.css are:
 * Propshaft's `stylesheet_link_tag :app` picks up every file in this
 * directory, so a surface gets its own file and the design system stays the
 * design system. Every value here is an existing `--nt-*` token, so both
 * themes and any future palette re-tune come for free — which is why there is
 * no dark block at the bottom of this file and must never need to be one.
 *
 * THE PAGE IS TWO COLUMNS, AND WHICH HALF IS WHICH IS THE WHOLE IDEA.
 *
 * Every workspace screen before this one was a single `.nt-stack` at every
 * width: one column, stacked forever, so a 1440px desktop showed the same
 * five slabs a phone did, just with half the screen empty and the same amount
 * of scrolling. Here the left column is everything the customer might have to
 * DO (the verdict, the næste frist, forløb i gang, the fristkalender) and the
 * right rail is everything the selskab IS (kapital, ejere, ledelse, stamdata,
 * the doors).
 *
 * That split is what lets the rail be sticky without being noisy: CVR and
 * regnskabsår do not change while you scroll, and a director who came to check
 * one of them should not have to hunt for where it went.
 * ══════════════════════════════════════════════════════════════════════════ */

.nt-dash {
  display: grid;
  gap: var(--nt-space-5);
}

.nt-dash-main,
.nt-dash-aside {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-5);
  /* Without this a card holding a wide row refuses to shrink and the PAGE
     scrolls sideways instead of the row. Same reason `.nt-stack > *` has it. */
  min-width: 0;
}

/* 65rem is the breakpoint registry's "desktop — sidebars, asides, split
   heroes" step (notarium.css § 0). Below it the grid collapses and source
   order decides: main, then aside, then the full-width band. Work first,
   facts after — which is the right priority on a phone, and it is also why
   the rail's shortcuts are duplicated in the mobile nav panel under
   "Selskabet" rather than being the only way to reach the ejerbog. */
@media (min-width: 65rem) {
  .nt-dash {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  .nt-dash-main { grid-column: 1; }
  .nt-dash-full { grid-column: 1 / -1; }

  /* THE ASIDE STRETCHES; THE RAIL INSIDE IT STICKS.

     Making the grid item itself `position: sticky` is the obvious way to write
     this and it is wrong. With `align-self: start` a sticky grid item is
     content-sized, and Chrome then resolves its sticky constraint rectangle
     against something taller than its own grid area — so the rail sailed past
     the bottom of row 1 and was painted over "Seneste dokumenter" in row 2.
     (Measured: row 1 ended at y=500, the rail's bottom sat at y=725.)

     Stretching the aside to the full row height and sticking an ordinary block
     inside it gives sticky an unambiguous containing block that ends exactly
     where the row does. `align-self: stretch` has to be stated here because
     the grid sets `align-items: start` for everyone else. */
  .nt-dash-aside {
    grid-column: 2;
    align-self: stretch;
    display: block;
  }

  /* 3.5rem is `.nt-navbar`'s height (navbar.css). Sticky works at all only
     because `.nt-app-main` clips with `overflow-x: clip` rather than `hidden` —
     `hidden` would make it a scroll container and kill every sticky element in
     the app. Do not "tidy" that into `hidden`.

     The rail can be taller than the viewport on a laptop once a selskab has
     long vedtægter dates in it, and a sticky box taller than the screen pins
     with its bottom permanently out of reach. Capping it to the visible height
     and letting it scroll internally keeps the last row reachable. */
  .nt-dash-rail {
    position: sticky;
    top: calc(3.5rem + var(--nt-space-5));
    max-height: calc(100dvh - 3.5rem - var(--nt-space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ── The verdict ─────────────────────────────────────────────────────────
   Same grammar as the koncern headline and the solo card, one scale down, so
   the two Overblik screens read as one product. The icon well and the
   attention list are koncern.css's (`.koncern-headline-icon`,
   `.koncern-card-attention`) — borrowed rather than re-cut, because a second
   definition of "what an amber warning looks like" is how they drift. */
.nt-dash-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-4);
  padding: var(--nt-space-5) var(--nt-space-6);
}

.nt-dash-verdict-title {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-lg);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ── Næste frist ─────────────────────────────────────────────────────────
   The one number on this page that is allowed to be big. A date alone does not
   feel like anything, so the days sit beside it at reading size and the rule's
   own name underneath. Tinted by `--koncern-frist-*`, which the caller sets
   from the FRIST's urgency and never from the page's. */
.nt-dash-frist {
  padding: var(--nt-space-5) var(--nt-space-6);
  border-left: 3px solid var(--koncern-frist, var(--nt-border));
  background: var(--koncern-frist-soft, var(--nt-surface));
}

.nt-dash-frist .nt-stat-label { margin-bottom: 0.4rem; }

.nt-dash-frist-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--koncern-frist-text, var(--nt-text));
}

.nt-dash-frist-date {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.nt-dash-frist-days {
  font-size: var(--nt-text-md);
  opacity: 0.85;
}

.nt-dash-frist-name {
  margin-top: 0.3rem;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

/* ── The rail ────────────────────────────────────────────────────────────
   One card, three bands: the figures, the facts, the doors. It is one card
   rather than three so the rail reads as a single object beside the column of
   work, and so a sticky rail does not stack three shadows on top of each
   other as it travels. */
.nt-dash-panel {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-5);
  padding: var(--nt-space-5);
}

.nt-dash-panel-title {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-md);
  letter-spacing: -0.01em;
}

/* Kapital across the top, the two counts side by side under it. Three equal
   columns was the first attempt and it broke on Danish: "SELSKABSKAPITAL" and
   "KAPITALEJERE" ran into each other at a third of the rail's width, and
   "20.000 kr." wrapped after the number. Money and counts are different
   shapes and stopped pretending otherwise. */
.nt-dash-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nt-space-4) var(--nt-space-3);
  padding-bottom: var(--nt-space-5);
  border-bottom: 1px solid var(--nt-border-subtle);
}

.nt-dash-figure-wide { grid-column: 1 / -1; }

.nt-dash-figures dt {
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nt-text-tertiary);
  line-height: 1.3;
}

.nt-dash-figures dd {
  margin-top: 0.25rem;
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* A count is useless without the list behind it, so two of the three are
   doors. The link has to look like the number it replaces — no underline, no
   seal red at rest — or the rail turns into three different treatments of the
   same thing. The affordance is the hover. */
.nt-dash-figure-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--nt-duration-fast) var(--nt-ease);
}

.nt-dash-figure-link:hover { color: var(--nt-seal-text); }

.nt-dash-figure-link:focus-visible {
  outline: none;
  border-radius: var(--nt-radius-xs);
  box-shadow: var(--nt-shadow-focus);
}

/* The facts. A two-column key/value list rather than `.nt-dl`'s full measure:
   in a 20rem rail the label and its value have to share a line or the block
   becomes twelve rows of alternating alignment. */
.nt-dash-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem var(--nt-space-3);
  align-items: baseline;
  padding-bottom: var(--nt-space-5);
  border-bottom: 1px solid var(--nt-border-subtle);
  font-size: var(--nt-text-sm);
}

.nt-dash-facts dt {
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nt-text-tertiary);
  white-space: nowrap;
}

/* Left-aligned, not right. Right-aligning looks tidy until a value wraps —
   "1. januar – 31. december" and "Overdragelse · 1. september 2023" both do at
   this width, and a wrapped value ragged-left against a ragged-right label is
   the hardest possible way to read six facts. */
.nt-dash-facts dd {
  min-width: 0;
  color: var(--nt-text);
  text-align: left;
}

/* The doors. Full-width rows at the foot of the same card, so the rail's
   border is not drawn twice and four links cannot wrap into a ragged block the
   way inline chips did. */
.nt-dash-links { display: flex; flex-direction: column; }

.nt-dash-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  margin-inline: -0.6rem;
  border-radius: var(--nt-radius-sm);
  font-size: var(--nt-text-sm);
  font-weight: 550;
  color: var(--nt-text);
  text-decoration: none;
  transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease);
}

.nt-dash-link svg { flex: none; color: var(--nt-text-tertiary); }
.nt-dash-link span { flex: 1; min-width: 0; }

.nt-dash-link:hover { background: var(--nt-surface-raised); color: var(--nt-seal-text); }
.nt-dash-link:hover svg { color: var(--nt-seal); }
.nt-dash-link:focus-visible { outline: none; box-shadow: var(--nt-shadow-focus); }

.nt-dash-link-go { color: var(--nt-text-disabled); }

/* On a narrow phone the facts stop sharing a line — at 20rem minus the card's
   padding, "Seneste ejerbogspostering" and its value cannot both fit, and
   right-aligning a wrapped value against a wrapped label is unreadable. */
@media (max-width: 30rem) {
  .nt-dash-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .nt-dash-facts dd { margin-bottom: 0.5rem; }

  .nt-dash-frist-date { font-size: var(--nt-text-xl); }
}