/*
 * 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);
}

/* 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: 0 var(--nt-space-5);
  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; }

.nt-navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: var(--nt-space-2);
  text-decoration: none;
  color: var(--nt-text);
}

.nt-navbar-brand .nt-seal-mark { transition: transform var(--nt-duration-slow) var(--nt-ease-seal); }
.nt-navbar-brand:hover .nt-seal-mark { transform: rotate(-8deg); }

.nt-navbar-wordmark {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* 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; }
}

@media (max-width: 30rem) {
  .nt-navbar-wordmark { 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 ("Selskaber og abonnement") stays
   on one line — a menu with one double-height row reads as a mistake. */
.nt-navbar-menu { min-width: 16.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); }

.nt-navbar-identity-company {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--nt-radius-full);
  background: var(--nt-seal-soft);
  color: var(--nt-seal-text);
  font-size: var(--nt-text-xs);
  font-weight: 600;
}

/* 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);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nt-mobile-panel.is-open { transform: translateX(0); }

/* 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); }

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