/*
 * The logged-in chrome: top navbar, dropdown menus, the mobile panel, and the
 * page column underneath.
 *
 * Kept out of notarium.css (workstream A's design system) the same way
 * koncern.css is — Propshaft's `stylesheet_link_tag :app` picks up every file
 * under app/assets/stylesheets. Every value here is an existing --nt-* token,
 * so both themes and any future palette re-tune come for free.
 *
 * Note the cascade rule this repo lives by: these files are unlayered, so a
 * rule here beats a Tailwind utility on the same property. Components carry
 * their own sizing rather than expecting a utility to override it.
 *
 * `.nt-navbar` reuses the `.nt-menu` / `.nt-menu-item` primitives from
 * notarium.css for its dropdowns rather than inventing a second menu — the
 * dropdown Stimulus controller already speaks that markup, including the
 * roving focus and Escape handling.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. APP SHELL
   ══════════════════════════════════════════════════════════════════════ */

.nt-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--nt-bg);
}

.nt-app-main {
  flex: 1;
  padding: var(--nt-space-8) var(--nt-space-6) var(--nt-space-16);
  /* Page content never scrolls the page sideways. A wide table scrolls inside
     its own container; anything that escapes one is a bug, and the reader
     should not be the one who discovers it by dragging the whole layout 30px
     off screen. `clip`, not `hidden`, so this does not become a scroll
     container and kill `position: sticky` inside. */
  overflow-x: clip;
}

/* The whole reason the sidebar went away: the content is a centred column with
   a real measure, not a remainder beside a rail. */
.nt-app-column {
  max-width: var(--nt-page-max);
  margin: 0 auto;
}

/* A screen whose content IS a document (a wizard preview, a rendered referat)
   opts into a narrower measure by wrapping its own content — the column above
   never forces one, because a table of frister wants every pixel. */
.nt-app-column-narrow { max-width: 52rem; }

@media (max-width: 48rem) {
  .nt-app-main { padding: var(--nt-space-5) var(--nt-space-4) var(--nt-space-12); }
}

/* ══════════════════════════════════════════════════════════════════════
   2. NAVBAR
   ══════════════════════════════════════════════════════════════════════ */

.nt-navbar {
  position: sticky;
  top: 0;
  z-index: var(--nt-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--nt-space-3);
  height: 3.5rem;
  padding-block: 0;
  /* Landscape on a notched phone puts the cutout straight over the selskab
     name on one side and the hamburger on the other. `max()` means the bar
     keeps its ordinary gutter everywhere else — the inset is 0px on every
     screen without a cutout. The 0px fallback is not decoration: an `env()`
     a browser does not know invalidates the whole declaration, and the bar
     would lose its padding entirely. */
  padding-inline:
    max(var(--nt-space-5), env(safe-area-inset-left, 0px))
    max(var(--nt-space-5), env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--nt-surface) 88%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--nt-border-subtle);
}

/* The seal hairline. Bordeaux is the identity colour, and one seam under the
   bar is where it belongs — it is never a status, so it can be decoration. */
.nt-navbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--nt-seal-border) 30%,
    var(--nt-seal) 50%, var(--nt-seal-border) 70%, transparent 96%);
  opacity: 0.5;
  pointer-events: none;
}

.nt-navbar-zone { display: flex; align-items: center; gap: var(--nt-space-2); min-width: 0; }
.nt-navbar-spacer { flex: 1; }

/* When the bar runs out of room, the BRAND zone is the only thing that gives.
   Everything on the right (⌘K, the bell, the person, the hamburger) is a hit
   target — shrink those and they stop being hittable — so the selskab's name
   is what truncates. Without this the flex default shares the squeeze out
   evenly and the hamburger ends up past the right edge on a phone. */
.nt-navbar > .nt-navbar-zone { flex: none; }
.nt-navbar > .nt-navbar-zone:first-child { flex: 0 1 auto; }

/* The mark plus the name of the selskab you are in — not the word "Notarium".
   A logged-in person knows which product they are in; what a koncern owner
   cannot tell at a glance is which of their eleven selskaber this page is
   about. min-width:0 all the way down so a long name ellipses instead of
   pushing the bell and the hamburger off a phone.

   Layout, padding and colour otherwise come from `.nt-navbar-trigger`, which
   this class is always paired with now that the lockup is a menu button —
   redeclaring them here would just lose the cascade tie to the later rule
   below and rot into dead CSS. */
.nt-navbar-brand { min-width: 0; }

/* Both marks: the workspace bar draws the wax seal (shared/marks/_seal_small),
   the same one the marketing and auth chrome use, so the identity does not
   change shape when you log in. .nt-seal-mark is kept for the monochrome cut
   in case a surface still uses it. */
.nt-navbar-brand .nt-seal,
.nt-navbar-brand .nt-seal-mark {
  flex: none;
  transition: transform var(--nt-duration-slow) var(--nt-ease-seal);
}

.nt-navbar-brand:hover .nt-seal,
.nt-navbar-brand:hover .nt-seal-mark { transform: rotate(-8deg); }

.nt-navbar-company {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* The lockup is now a `.nt-navbar-trigger`, whose default text colour is
   muted until hover/open — right for a plain menu button, wrong for the
   brand, which has to stay at full strength at rest: it is the anchor a
   reader checks first to answer "which selskab am I in". */
.nt-navbar-brand .nt-navbar-company { color: var(--nt-text); }

/* The dropdown wrapper, not `.nt-navbar-brand` itself, is the flex item of
   the zone now — needs its own min-width:0 or the truncation above cannot
   take effect. */
.nt-navbar-brand-switcher { min-width: 0; }

/* The pre-company chrome (shared/_minimal_topbar) draws the same wax seal, and
   .nt-wordmark's own rules only know about the monochrome cut. */
.nt-topbar .nt-wordmark .nt-seal {
  flex: none;
  transition: transform var(--nt-duration-slow) var(--nt-ease-seal);
}

.nt-topbar .nt-wordmark:hover .nt-seal { transform: rotate(-8deg); }

/* Below this the primary links move into the mobile panel — a bar that scrolls
   sideways is a bar nobody uses. Scoped to `.nt-navbar` so these beat
   `.nt-navbar-trigger`'s own `display`, which is declared later in the file. */
.nt-navbar .nt-navbar-primary { display: none; }
.nt-navbar .nt-navbar-burger { display: inline-flex; }

@media (min-width: 64rem) {
  .nt-navbar .nt-navbar-primary { display: flex; align-items: center; gap: 0.15rem; }
  .nt-navbar .nt-navbar-burger { display: none; }
}

/* Phone. The company name never goes away — it is the ONLY thing telling you
   which selskab the page under it belongs to — so everything around it gives
   way instead: tighter gutters, and the ⌘K hint drops, since a phone has no
   ⌘ to press. Measured at 390px with the longest seeded name; without this the
   hamburger sat 33px past the right edge. */
@media (max-width: 30rem) {
  .nt-navbar { gap: var(--nt-space-2); padding: 0 var(--nt-space-3); }
  .nt-navbar-company { font-size: var(--nt-text-base); max-width: 9.5rem; }
  .nt-navbar .koncern-cmdk .koncern-kbd { display: none; }
}

/* — Links and triggers — */

.nt-navlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  border: 0;
  border-radius: var(--nt-radius);
  background: transparent;
  color: var(--nt-text-secondary);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--nt-duration-fast) var(--nt-ease), background-color var(--nt-duration-fast) var(--nt-ease);
}

.nt-navlink:hover { color: var(--nt-text); background: var(--nt-surface-raised); }

/* Active is BOTH colour and an underline: colour alone is not a state signal,
   and the seal underline is the same mark the brand uses. */
.nt-navlink.is-active {
  color: var(--nt-seal-text);
  background: var(--nt-seal-soft);
  box-shadow: inset 0 -2px 0 var(--nt-seal);
}

.nt-navbar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: var(--nt-radius);
  background: transparent;
  color: var(--nt-text-secondary);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  cursor: pointer;
  transition: color var(--nt-duration-fast) var(--nt-ease), background-color var(--nt-duration-fast) var(--nt-ease);
}

.nt-navbar-trigger:hover,
.nt-navbar-trigger[aria-expanded="true"] { color: var(--nt-text); background: var(--nt-surface-raised); }

.nt-navbar-chevron { transition: transform var(--nt-duration) var(--nt-ease); flex: none; }
[aria-expanded="true"] > .nt-navbar-chevron { transform: rotate(180deg); }

/* Wide enough that the longest Danish label ("Vedtægter og ejeraftaler") stays
   on one line — a menu with one double-height row reads as a mistake. */
.nt-navbar-menu { min-width: 16.5rem; }

/* The brand dropdown carries the company switcher, whose rows are a name, a
   CVR number and a date. Wider, and never wider than the phone it is on. */
.nt-navbar-brand-switcher .nt-navbar-menu { width: min(21rem, calc(100vw - 1.5rem)); }

/* — The person — */

.nt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: var(--nt-radius-full);
  border: 2px solid var(--nt-seal-border);
  background: var(--nt-seal-soft);
  color: var(--nt-seal-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color var(--nt-duration) var(--nt-ease);
}

.nt-navbar-user-trigger:hover .nt-avatar { border-color: var(--nt-seal); }

.nt-navbar-user-name { font-weight: 550; color: var(--nt-text); white-space: nowrap; }

@media (max-width: 48rem) {
  .nt-navbar-user-name { display: none; }
}

.nt-navbar-identity { padding: 0.6rem var(--nt-space-4) 0.5rem; }
.nt-navbar-identity-name { font-size: var(--nt-text-base); font-weight: 600; }
.nt-navbar-identity-email { font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); }

/* — The company switcher, inside the brand dropdown —
   The switching control lives behind the brand lockup now, not the profile
   menu. Base styling is koncern.css's; these are the differences that come
   from being a section of somebody else's menu rather than a menu. */

/* Only the LIST scrolls. Log ud sits below it and has to stay reachable
   whether the koncern has three selskaber or thirty. */
.koncern-switcher-list {
  max-height: 14rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.koncern-switcher-section .koncern-switcher-search {
  margin: 0.1rem 0.3rem 0.35rem;
}

/* button_to wraps its button in a form; display:contents keeps the button a
   direct flex child of the menu so it lines up with the links above it. */
.nt-menu form.contents { display: contents; }

.nt-menu-item.nt-menu-item-danger { color: var(--nt-danger-text); }
.nt-menu-item.nt-menu-item-danger:hover { background: var(--nt-danger-soft); }

/* ══════════════════════════════════════════════════════════════════════
   3. MOBILE PANEL
   ══════════════════════════════════════════════════════════════════════ */

.nt-mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--nt-z-overlay);
  background: var(--nt-scrim);
  backdrop-filter: blur(3px);
}

.nt-mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--nt-z-overlay) + 1);
  width: min(19rem, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--nt-surface-overlay);
  border-left: 1px solid var(--nt-border-subtle);
  box-shadow: var(--nt-shadow-3);
  transform: translateX(100%);
  transition: transform var(--nt-duration-slow) var(--nt-ease),
              visibility var(--nt-duration-slow) step-end;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Closed, the panel must be neither reachable nor measurable. Without this
     it is a set of invisible tab stops parked off the right edge — Tab from
     the last real control walks into a menu nobody opened. */
  visibility: hidden;
}

.nt-mobile-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--nt-duration-slow) var(--nt-ease),
              visibility 0s;
}

/* An off-canvas panel still contributes to the page's scrollable width even
   when it is translated out of view and hidden — which made EVERY workspace
   page scroll ~30px sideways on a phone, with nothing inside <main> to blame.
   `clip` rather than `hidden` on purpose: `hidden` would turn the root into a
   scroll container and break every `position: sticky` in the app. */
html { overflow-x: clip; }

/* Locked while the panel is open — otherwise scrolling past the end of the
   panel scrolls the page behind it, and closing lands you somewhere else. */
html.nt-mobile-open { overflow: hidden; }

@media (min-width: 64rem) {
  .nt-mobile-scrim, .nt-mobile-panel { display: none; }
}

.nt-mobile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nt-space-3);
  padding: var(--nt-space-4) var(--nt-space-4) var(--nt-space-3);
  border-bottom: 1px solid var(--nt-border-subtle);
}

.nt-mobile-company {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-md);
  line-height: 1.25;
}

.nt-mobile-body { flex: 1; padding: var(--nt-space-3) var(--nt-space-2); }

.nt-mobile-section {
  padding: var(--nt-space-4) var(--nt-space-3) var(--nt-space-1);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-text-tertiary);
}

.nt-mobile-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.62rem var(--nt-space-3);
  border: 0;
  border-radius: var(--nt-radius);
  background: transparent;
  color: var(--nt-text-secondary);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-base);
  font-weight: 550;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nt-mobile-link:hover { background: var(--nt-surface-raised); color: var(--nt-text); }
.nt-mobile-link-quiet { font-weight: 450; }

.nt-mobile-link.is-active {
  color: var(--nt-seal-text);
  background: var(--nt-seal-soft);
  box-shadow: inset 3px 0 0 var(--nt-seal);
}

.nt-mobile-link-danger { color: var(--nt-danger-text); }
.nt-mobile-link-danger:hover { background: var(--nt-danger-soft); color: var(--nt-danger-text); }

.nt-mobile-foot {
  padding: var(--nt-space-3) var(--nt-space-2) var(--nt-space-4);
  border-top: 1px solid var(--nt-border-subtle);
}

.nt-mobile-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: var(--nt-space-2) var(--nt-space-3) var(--nt-space-3);
}

.nt-mobile-identity-name { font-size: var(--nt-text-sm); font-weight: 600; }
.nt-mobile-identity-email {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════
   4. SETTINGS SUB-NAV (/konto)
   A horizontal strip, not a second rail. These pages are forms; a form beside
   a 220px rail is a form nobody wants to fill in.
   ══════════════════════════════════════════════════════════════════════ */

.nt-subnav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  padding: 0.25rem;
  border-radius: var(--nt-radius);
  border: 1px solid var(--nt-border-subtle);
  background: var(--nt-surface-raised);
}

.nt-subnav-link {
  padding: 0.35rem 0.8rem;
  border-radius: var(--nt-radius-sm);
  font-size: var(--nt-text-sm);
  font-weight: 550;
  color: var(--nt-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease);
}

.nt-subnav-link:hover { color: var(--nt-text); }

.nt-subnav-link[aria-current="page"] {
  background: var(--nt-surface);
  color: var(--nt-seal-text);
  box-shadow: var(--nt-shadow-1);
}

.nt-settings-page { display: flex; flex-direction: column; gap: var(--nt-space-6); }

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

/* Forms read badly at 72rem. The settings body keeps a prose measure while the
   page around it stays full width, so the sub-nav still spans the screen. */
.nt-settings-body { max-width: 52rem; display: flex; flex-direction: column; gap: var(--nt-space-6); }

/* 52rem is a PROSE measure, chosen so the forms on /konto stay readable. It is
   the wrong measure for a table: Selskaber og abonnement is a ledger whose
   columns wrap against it. Opt in with `width: :wide` on settings/shared/_shell
   — never by reaching into this rule from a single screen. */
.nt-settings-body-wide { max-width: 64rem; }

@media (prefers-reduced-motion: reduce) {
  .nt-mobile-panel { transition: none; }
}