@import url('./tokens.css?v=8');
@import url('./design-v2-polish.css?v=2');

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  /* Vanlig knapp = samme som dashboard «Opprett ny» (trinn A) */
  height: var(--page-header-control-height);
  min-height: var(--page-header-control-height);
  max-height: var(--page-header-control-height);
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.25;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium);
}

.btn i {
  color: currentColor;
  font-size: 0.95em;
}

i.fa-chevron-down,
i.fa-chevron-up,
i[data-bv-icon="chevron-down"],
i[data-bv-icon="chevron-up"],
button i.fa-chevron-down,
button i.fa-chevron-up,
.header-create__caret {
  font-size: var(--icon-size-chevron);
}

.btn:hover {
  background: var(--color-primary-soft);
}

.btn:active {
  /* V2: ingen lift/scale */
  transform: none;
}

/* .btn { display: inline-flex } overstyrer UA [hidden] */
.btn[hidden] {
  display: none !important;
}

/* .setting-row { display: flex } overstyrer UA [hidden] */
.setting-row[hidden] {
  display: none !important;
}

/* Mindre knapp — dialog/picker/toolbar (under dashboard-størrelse) */
.btn.btn-sm {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* Quiet text action — picker footer (fasit: Fjern dato / Fjern tid, I dag / Nå) */
.btn.btn-text {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--color-primary-text);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.btn.btn-text:hover,
.btn.btn-text:focus-visible {
  background: var(--color-primary-muted);
  color: var(--color-primary-text);
  border: none;
}

/* Hidden until the row or field is hovered or focused. Handbook §8. */
.hover-reveal-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

@media (hover: none) {
  .hover-reveal-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

/* V2 trinn B — inline i kort/liste-rad (samme tetthet som .client-detail-action-btn) */
.btn.btn-inline {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 5px 9px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

/* V2 trinn B — primary inline action in card section headers (fasit: client-detail «Rediger») */
.client-detail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 5px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-transform: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.client-detail-action-btn:hover {
  background: var(--color-primary-soft);
}

.client-detail-action-btn i {
  font-size: 0.7rem;
  color: inherit;
}

.section-header-actions .client-detail-action-btn,
.section-header-row .header-actions .client-detail-action-btn {
  margin-left: 0;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * Disabled hosts that contain .hint: parent opacity compounds onto the tooltip.
 * Keep the control faded via children, leave .hint at full strength.
 */
.btn:disabled.hint-wrap,
.icon-btn:disabled.hint-wrap {
  opacity: 1;
}

.btn:disabled.hint-wrap > *:not(.hint),
.icon-btn:disabled.hint-wrap > *:not(.hint) {
  opacity: 0.5;
}

/* Unified focus ring for all .btn variants (override default browser orange/yellow rings) */
.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Explicit primary (Designhåndbok: .btn + .btn-primary) - matcher standard .btn */
.btn.btn-primary {
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.btn.btn-primary:hover {
  background: var(--color-primary-soft);
}

/* Secondary: fill follows parent surface via --btn-secondary-bg (handbook §8).
   On-page default is --color-surface (white), same plate as .segmented-control--on-page.
   1px --color-border matches that track (token may be transparent). */
.btn.btn-secondary {
  color: var(--color-text);
  background: var(--btn-secondary-bg);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.btn.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
}

.btn.btn-secondary:active {
  transform: none;
}

.btn.btn-secondary:focus-visible {
  outline-offset: 3px;
}

a.btn {
  text-decoration: none;
  box-sizing: border-box;
}

a.btn.btn-secondary:visited {
  color: var(--color-text);
}

/* Filter/list toggle (Arkivert, Mine, …) — kompakt xs, samme pressed-mønster som segmented */
.btn.btn-toggle {
  height: 32px;
  min-height: 32px;
  padding: 6px 14px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-grouped-nested);
  color: var(--color-text-secondary);
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn.btn-toggle i {
  font-size: var(--font-size-xs);
  color: currentColor;
}

.btn.btn-toggle:hover {
  background: color-mix(in srgb, var(--color-surface-muted) 92%, transparent);
  color: var(--color-text);
}

.btn.btn-toggle:active {
  transform: none;
}

.btn.btn-toggle[aria-pressed="true"],
.btn.btn-toggle.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn.btn-toggle[aria-pressed="true"]:hover,
.btn.btn-toggle.active:hover {
  background: var(--color-primary-soft);
  color: var(--color-text-inverse);
}

@media (max-width: 480px) {
  .btn.btn-toggle .btn-toggle-label {
    display: none;
  }

  .btn.btn-toggle {
    padding: 8px 10px;
  }
}

.btn-dark {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-dark:hover {
  background: var(--color-primary-soft);
}

.btn-light {
  background: var(--color-primary-soft);
  color: var(--color-text-inverse);
}

.btn-light:hover {
  background: var(--color-primary);
}

.btn-success {
  background: var(--color-positive);
  color: var(--color-text-inverse);
}

.btn-success:hover {
  background: color-mix(in srgb, var(--color-text) 12%, var(--color-positive));
}

/* Explicit compound (Designhåndbok §8) — vinner over base .btn primary-fill */
.btn.btn-success {
  background: var(--color-positive);
  color: var(--color-text-inverse);
}

.btn.btn-success:hover {
  background: color-mix(in srgb, var(--color-text) 12%, var(--color-positive));
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.btn-danger:hover {
  background: #D32F2F; /* Darker shade of red */
}

/* Explicit compound (Designhåndbok §8) — vinner over base .btn primary-fill */
.btn.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
}

.btn.btn-danger:hover {
  background: #D32F2F;
}

.btn.btn-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
}

.btn.btn-warning:hover {
  filter: brightness(1.05);
}

.btn-danger-outline,
.btn.btn-danger-outline {
  background: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.btn-danger-outline:hover,
.btn.btn-danger-outline:hover {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

/* Large full-width CTA — same anatomy as quote-preview «Send tilbud» (customer-actions).
   Default: brand purple. Use .btn-cta--success for send-quote (green). */
.btn.btn-cta,
a.btn.btn-cta {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  max-height: none;
  min-height: var(--btn-cta-min-height);
  padding: 14px var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: normal;
  white-space: normal;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn.btn-cta:hover,
a.btn.btn-cta:hover {
  background: var(--color-primary-soft);
  color: var(--color-text-inverse);
}

.btn.btn-cta--success {
  background: var(--color-positive);
}

.btn.btn-cta--success:hover {
  background: #2da94f;
}

.btn.btn-cta:disabled,
a.btn.btn-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ─── Icon Button (unified style for all icon-only action buttons) ─── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.icon-btn i,
.icon-btn svg,
.icon-btn .lucide {
  width: 14px;
  height: 14px;
  font-size: var(--font-size-sm);
  line-height: 1;
}

.icon-btn:hover {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

.icon-btn:active {
  transform: none;
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.icon-btn:disabled:hover {
  background: transparent;
  color: var(--color-text-secondary);
  transform: none;
}

.icon-btn--danger:not(:disabled):hover {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

/* Outlined icon button — explicit list controls (complete next contact, remove recent, …) */
.icon-btn.icon-btn--outlined {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.icon-btn.icon-btn--outlined:hover {
  background: var(--color-primary-muted);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.icon-btn.icon-btn--outlined.is-positive:hover,
.icon-btn.icon-btn--outlined.is-positive:focus-visible {
  color: var(--color-positive);
  background: color-mix(in srgb, var(--color-positive) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-positive) 35%, var(--color-border));
  outline: none;
}

.icon-btn.icon-btn--outlined.is-danger:hover,
.icon-btn.icon-btn--outlined.is-danger:focus-visible {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  outline: none;
}

.icon-btn.icon-btn--outlined:disabled:hover {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

/* ─── Hover hint (replaces native title= for icon actions) ─── */
.hint-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.form-label.hint-wrap,
.micro-label.hint-wrap,
h3.hint-wrap {
  cursor: help;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}

/*
 * In-flow raise still helps *before* hint-layer.js binds, and for sibling
 * flags in the same context if the layer is unavailable.
 * Once html.hint-layer-ready, bubbles paint in #hint-layer (Handbook §7).
 */
.hint-wrap:hover,
.hint-wrap:focus-visible,
.hint-wrap:has(:focus-visible) {
  z-index: 40;
}

/* Icon buttons can host the hint as a child (no extra wrapper span) */
.icon-btn.hint-wrap {
  display: inline-flex;
}

/* Filter / multi-select triggers — keep flex layout, host .hint */
.calendar-multi__trigger.hint-wrap,
.filter-multi__trigger.hint-wrap,
.controls-panel .filter-multi__trigger.hint-wrap {
  position: relative;
  display: flex;
}

/* Native filter/sort selects — host .hint without breaking full-width layout */
.filter-dropdown-wrapper.hint-wrap {
  display: block;
  position: relative;
}

/* List toggles (Arkivert, Mine, …) hosting .hint */
.btn.btn-toggle.hint-wrap {
  position: relative;
}

/* Segmented tabs hosting .hint (e.g. employee edit) — keep segment chrome */
.segmented-control button.hint-wrap {
  position: relative;
  justify-content: center;
}

/* Hide hint while a dropdown/menu is open — not disclosure toggles (e.g. task expand) */
.hint-wrap[aria-expanded="true"]:not(.project-task-expand):hover .hint,
.hint-wrap[aria-expanded="true"]:not(.project-task-expand):focus-visible .hint,
.hint-wrap[aria-expanded="true"]:not(.project-task-expand):has(:focus-visible) .hint {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}

/* Native <select>: hide hint while focused/open (no aria-expanded) */
.filter-dropdown-wrapper.hint-wrap:focus-within .hint {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}

.filter-dropdown-wrapper.hint-wrap:hover:not(:focus-within) .hint {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition-delay: 0.35s, 0.35s, 0s;
  transform: translateX(-50%) translateY(0);
}

.hint {
  position: absolute;
  z-index: 200;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  min-width: 0;
  max-width: min(280px, calc(100vw - 32px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s linear 0.35s;
  transition-delay: 0s, 0s, 0s;
  text-align: left;
  white-space: normal;
  /* Sentence case — never inherit micro-label uppercase (§4 / §8) */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.hint__title {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}

.hint__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

.hint__desc + .hint__desc {
  margin-top: 0;
}

.hint__desc:empty {
  display: none;
}

/* Default placement = top; modifiers */
.hint--top {
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(4px);
}

.hint--bottom {
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-4px);
}

.hint--start {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
}

.hint--end {
  top: 50%;
  bottom: auto;
  left: calc(100% + 8px);
  right: auto;
  transform: translateY(-50%) translateX(-4px);
}

/*
 * Edge alignment for top/bottom hints near overflow:hidden / scroll edges.
 * Default centers on the host (translateX -50%); align pins one side so the
 * bubble grows inward instead of being clipped by a parent clip/scrollport.
 */
.hint--top.hint--align-start,
.hint--bottom.hint--align-start {
  left: 0;
  right: auto;
  transform: translateX(0) translateY(4px);
}

.hint--bottom.hint--align-start {
  transform: translateX(0) translateY(-4px);
}

.hint--top.hint--align-end,
.hint--bottom.hint--align-end {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}

.hint--bottom.hint--align-end {
  transform: translateX(0) translateY(-4px);
}

/*
 * Show on hover, or keyboard focus (:focus-visible).
 * Mouse click leaves :focus / :focus-within without :focus-visible — do not keep
 * the hint stuck after click (same idea as settings/filter: hide while interacting).
 */
.hint-wrap:hover .hint,
.hint-wrap:focus-visible .hint,
.hint-wrap:has(:focus-visible) .hint {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition-delay: 0.35s, 0.35s, 0s;
  transform: translateX(-50%) translateY(0);
}

.hint-wrap:hover .hint--bottom,
.hint-wrap:focus-visible .hint--bottom,
.hint-wrap:has(:focus-visible) .hint--bottom {
  transform: translateX(-50%) translateY(0);
}

.hint-wrap:hover .hint--start,
.hint-wrap:focus-visible .hint--start,
.hint-wrap:has(:focus-visible) .hint--start {
  transform: translateY(-50%) translateX(0);
}

.hint-wrap:hover .hint--end,
.hint-wrap:focus-visible .hint--end,
.hint-wrap:has(:focus-visible) .hint--end {
  transform: translateY(-50%) translateX(0);
}

.hint-wrap:hover .hint--top.hint--align-start,
.hint-wrap:hover .hint--top.hint--align-end,
.hint-wrap:hover .hint--bottom.hint--align-start,
.hint-wrap:hover .hint--bottom.hint--align-end,
.hint-wrap:focus-visible .hint--top.hint--align-start,
.hint-wrap:focus-visible .hint--top.hint--align-end,
.hint-wrap:focus-visible .hint--bottom.hint--align-start,
.hint-wrap:focus-visible .hint--bottom.hint--align-end,
.hint-wrap:has(:focus-visible) .hint--top.hint--align-start,
.hint-wrap:has(:focus-visible) .hint--top.hint--align-end,
.hint-wrap:has(:focus-visible) .hint--bottom.hint--align-start,
.hint-wrap:has(:focus-visible) .hint--bottom.hint--align-end {
  transform: translateX(0) translateY(0);
}

@media (hover: none) {
  /* Touch: only show while focused (tap), no hover delay flash */
  .hint-wrap:hover .hint {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, 0s, 0s;
  }

  .controls-panel .filter-dropdown-wrapper.hint-wrap:hover:not(:focus-within) .hint,
  .filter-dropdown-wrapper.hint-wrap:hover:not(:focus-within) .hint {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, 0s, 0s;
  }

  .hint-wrap:focus-within .hint {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }

  /* Native select: still hide while open/focused on touch */
  .controls-panel .filter-dropdown-wrapper.hint-wrap:focus-within .hint,
  .filter-dropdown-wrapper.hint-wrap:focus-within .hint {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s;
  }
}

/* Global hint portal — paints above hub/calendar/cards/modals (Handbook §7) */
#hint-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-hint-layer);
  pointer-events: none;
  overflow: visible;
}

#hint-layer .hint {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: none;
}

html.hint-layer-ready .hint-wrap > .hint {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--page-header-gap);
  row-gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-header .subtitle {
  margin: 0;
  max-width: 100%;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Detail-page back — Handbook §13 / §22 WebV2BackButton on web.
   White on-page plate to the left of .subtitle. */
.page-header__subtitle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.page-header__subtitle-row .subtitle {
  flex: 1 1 auto;
  min-width: 0;
}

.icon-btn.page-header__back {
  background: var(--color-btn-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.icon-btn.page-header__back i,
.icon-btn.page-header__back svg,
.icon-btn.page-header__back .lucide {
  width: var(--native-icon-size-control);
  height: var(--native-icon-size-control);
}

.icon-btn.page-header__back:hover,
.icon-btn.page-header__back:focus-visible {
  background: var(--color-btn-secondary-hover);
  color: var(--color-text);
  border-color: var(--color-border);
}

.icon-btn.page-header__back:disabled:hover {
  background: var(--color-btn-secondary);
  color: var(--color-text);
}

.page-header .header-actions {
  display: flex;
  gap: var(--page-header-gap);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  /* Idle: don't cover page hints that open toward the header.
     Open Opprett-meny: above idle .smart-search (z-index: 40). */
  z-index: auto;
}

/* Hug content — never stretch Opprett ny / Flere valg / Importer to 100%
   (Handbook §8 trinn A, §13 secondary → primary). */
.page-header .header-actions > .btn,
.page-header .header-actions > .header-create,
.page-header .header-actions > .btn-split,
.project-hub-actions > .btn,
.project-hub-actions > .header-create,
.project-hub-actions > .btn-split,
.quote-hub-actions > .btn,
.quote-hub-actions > .header-create,
.quote-hub-actions > .btn-split,
.quote-hub-actions__group > .btn,
.quote-hub-actions__group > .header-create {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.page-header .header-actions .header-create__trigger,
.project-hub-actions .header-create__trigger,
.quote-hub-actions .header-create__trigger {
  width: auto;
  max-width: 100%;
}

.page-header .header-actions:has(.header-create.is-open) {
  z-index: 50;
}

/* Open title-row select OR visible header hint: above .smart-search (40) and
   later stacking contexts (hub-toolbar). .hint-wrap z-index is trapped inside
   .page-header__title-block (z-index: 1). */
.page-header:has(.calendar-multi__trigger[aria-expanded="true"]) .page-header__title-block,
.page-header__title-block:has(.hint-wrap:hover),
.page-header__title-block:has(.hint-wrap:focus-visible),
.page-header__title-block:has(.hint-wrap:has(:focus-visible)) {
  position: relative;
  z-index: 80;
}

/* Kontekst-overrides — trinn A (dashboard «Opprett ny»).
   Lås høyde her så .btn-sm / page-CSS ikke kan krympe page-header-knapper. */
.page-header .header-actions .btn,
.attention-row__actions .btn,
.getting-started-checklist .attention-row__actions .btn,
.settings-page .settings-section .btn,
.calendar-event-modal__footer .btn,
.client-modal-footer .btn,
.project-form__actions .btn,
.project-modal__footer .btn,
.plan-work-popover__actions .btn,
.confirm-modal-actions .btn,
.invite-user-modal-footer .btn,
.import-modal__footer .btn,
.site-visit-detail-modal__footer .btn,
.password-modal-footer .btn,
.data-deletion-modal-footer .btn,
.task-template-editor__footer .btn,
.block-user-modal-footer .btn,
.gdpr-modal-footer .btn,
.page-onboarding__actions .btn,
.email-change-modal-actions .btn {
  box-sizing: border-box;
  min-width: 0;
  height: var(--page-header-control-height);
  min-height: var(--page-header-control-height);
  max-height: var(--page-header-control-height);
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-sm);
  justify-content: center;
  text-decoration: none;
  box-shadow: none;
}

/* Phone page-header create: hide plus glyph; label is «Ny kunde» / «Ny hendelse». */
.btn-create-label--compact {
  display: none;
}

.app-shell[data-sidebar-mode="mobile"] .btn-create-label--full {
  display: none;
}

.app-shell[data-sidebar-mode="mobile"] .btn-create-label--compact {
  display: inline;
}

.app-shell[data-sidebar-mode="mobile"] .btn:has(> .btn-create-label--compact) > i:not(.header-create__caret) {
  display: none;
}

@media (max-width: 640px) {
  .btn-create-label--full {
    display: none;
  }

  .btn-create-label--compact {
    display: inline;
  }

  .btn:has(> .btn-create-label--compact) > i:not(.header-create__caret) {
    display: none;
  }
}

.page-header .header-actions .btn:hover,
.page-header .header-actions .btn:active,
.attention-row__actions .btn:hover,
.attention-row__actions .btn:active,
.getting-started-checklist .attention-row__actions .btn:hover,
.getting-started-checklist .attention-row__actions .btn:active,
.settings-page .settings-section .btn:hover,
.settings-page .settings-section .btn:active,
.confirm-modal-actions .btn:hover,
.confirm-modal-actions .btn:active,
.page-onboarding__actions .btn:hover,
.page-onboarding__actions .btn:active {
  transform: none;
}

/* Header «Opprett ny» action menu */
.header-create {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  z-index: 1;
}

.header-create.is-open {
  z-index: 2;
}

.header-create__trigger .header-create__caret {
  opacity: 0.85;
  transition: transform var(--transition-fast);
}

.header-create.is-open .header-create__caret {
  transform: rotate(180deg);
}

.header-create__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: max-content;
  min-width: 0;
  max-width: min(100vw - 24px, 360px);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: var(--color-grouped-card);
  box-shadow: var(--shadow-card);
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-8px);
  transform-origin: top right;
}

.header-create.is-open .header-create__menu {
  display: flex;
  animation: menu-reveal var(--transition-medium) forwards;
}

@keyframes menu-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-create.is-open .header-create__menu {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.header-create__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text);
  /* Same type stack as .btn / header «Opprett ny» (trinn A: xs / 500) */
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

a.header-create__item:visited {
  color: var(--color-text);
}

.header-create__item i {
  width: 1.1em;
  color: var(--color-text-tertiary);
  text-align: center;
}

/* Project-colored flags (jump-to-project menus, etc.) — use ByggProjectColors.projectFlagIconHtml */
.project-flag-icon {
  color: var(--project-flag-color, var(--color-text-tertiary));
}

.header-create__item .project-flag-icon,
.header-create__item:hover .project-flag-icon,
.header-create__item:focus-visible .project-flag-icon,
.btn-split__caret .project-flag-icon,
.btn-split__caret:hover .project-flag-icon,
.btn-split__caret:focus-visible .project-flag-icon {
  color: var(--project-flag-color, var(--color-text-tertiary));
}

.header-create__item:hover,
.header-create__item:focus-visible {
  background: var(--color-grouped-nested);
  color: var(--color-text);
  outline: none;
}

.header-create__item:hover i:not(.project-flag-icon),
.header-create__item:focus-visible i:not(.project-flag-icon) {
  color: var(--color-primary);
}

/* Destruktiv menyhandling — samme hover-signal som §8 `.icon-btn--danger` / outlined danger */
.header-create__item--danger {
  color: var(--color-text);
}

.header-create__item--danger i {
  color: var(--color-text-tertiary);
}

.header-create__item--danger:hover,
.header-create__item--danger:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
  outline: none;
}

.header-create__item--danger:hover i,
.header-create__item--danger:focus-visible i {
  color: var(--color-danger);
}

html[data-theme="dark"] .header-create__item--danger:hover,
html[data-theme="dark"] .header-create__item--danger:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
}

/* Split action button: [ Main | ▾ ] — one control, caret opens menu */
.btn-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  z-index: 1;
}

/* display:inline-flex / flex overrides UA [hidden] — same pattern as file-preview floating actions */
.btn-split[hidden],
.header-create[hidden],
.header-create__item[hidden] {
  display: none !important;
}

/* List-row Handlinger menu — portal host (not clipped by .list-scroll) */
.list-row-menu.header-create,
.library-row-menu.header-create,
.company-selector-menu.header-create {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 120;
  overflow: visible;
}

.list-row-menu.header-create.is-open,
.library-row-menu.header-create.is-open {
  /* Above .project-modal (1200) so Mer inside a form is visible. */
  z-index: 1300;
}

/* Above collapsed sidebar flyout (z-index 950) — left-edge host */
.company-selector-menu.header-create,
.company-selector-menu.header-create.is-open {
  z-index: 1100;
}

.list-row-menu--up .header-create__menu,
.library-row-menu--up .header-create__menu {
  top: auto;
  bottom: calc(100% + var(--space-2));
  transform-origin: bottom right;
}

.company-selector-menu.list-row-menu--up .header-create__menu {
  transform-origin: bottom left;
}

.company-selector-menu .header-create__menu {
  min-width: 240px;
}

.company-selector-menu__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-1);
  flex-shrink: 0;
}

.company-selector-menu__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
}

.company-selector-menu__search i {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.company-selector-menu__search-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: 500;
  outline: none;
}

.company-selector-menu__search-input::placeholder {
  color: var(--color-text-tertiary);
}

.company-selector-menu__filter {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Staff picker: Byråkunder | Betalende | Prøveperiode */
.company-selector-menu__views {
  display: flex;
  width: 100%;
  min-height: 0;
}

.company-selector-menu__views > button {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.company-selector-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  max-height: min(50vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.company-selector-menu .header-create__item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-selector-menu .header-create__item[aria-selected="true"] {
  background: var(--color-grouped-nested);
}

.company-selector-menu .header-create__item[aria-selected="true"] i:last-child {
  color: var(--color-primary);
  margin-left: auto;
}

.company-selector-menu__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-align: center;
}

.company-selector-menu__status--error {
  flex-direction: column;
  gap: var(--space-3);
}

.company-selector-menu__footer {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border-top: none;
}

.list-row-menu__trigger {
  flex-shrink: 0;
  justify-self: end;
}

.btn-split.is-open {
  z-index: 2;
}

.btn-split:has(.hint-wrap:hover),
.btn-split:has(.hint-wrap:focus-visible),
.btn-split:has(.hint-wrap:has(:focus-visible)),
.header-create:has(.hint-wrap:hover),
.header-create:has(.hint-wrap:focus-visible),
.header-create:has(.hint-wrap:has(:focus-visible)) {
  z-index: 40;
}

.btn-split.is-open > .header-create__menu {
  display: flex;
  animation: menu-reveal var(--transition-medium) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .btn-split.is-open > .header-create__menu {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.btn-split__main,
.btn-split__caret {
  margin: 0;
}

/*
 * Join spacing — continuous surface (no divider between main and caret).
 * Outer sides 14px, seam 7px (tighter than default .btn-sm 12px).
 */
.btn.btn-split__main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 14px;
  padding-right: 7px;
}

.btn.btn-sm.btn-split__main {
  padding-left: 14px;
  padding-right: 7px;
}

.btn.btn-split__caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  box-shadow: none;
  padding-left: 7px;
  padding-right: 14px;
  min-width: 28px;
}

.btn.btn-sm.btn-split__caret {
  padding-left: 7px;
  padding-right: 14px;
}

.btn-split__caret .header-create__caret,
.btn-split__caret i:not(.project-flag-icon) {
  opacity: 0.85;
  transition: transform var(--transition-fast);
}

.btn-split.is-open .btn-split__caret .header-create__caret,
.btn-split.is-open .btn-split__caret i:not(.fa-flag):not(.project-flag-icon) {
  transform: rotate(180deg);
}

.btn-split.is-open .btn-split__caret i.fa-flag,
.btn-split.is-open .btn-split__caret .project-flag-icon {
  transform: none;
}

/* Default: grow left (host usually on the right — Opprett, Publiser). */
.btn-split > .header-create__menu {
  right: 0;
  left: auto;
  transform-origin: top right;
}

/*
 * Edge align — pick before shipping. Left-toolbar hosts (Kalender «I dag»,
 * Arbeidsplan hopp) must grow right or the panel slides under the sidebar.
 */
.header-create__menu--align-start,
.btn-split > .header-create__menu--align-start {
  left: 0;
  right: auto;
  transform-origin: top left;
}

.header-create__menu--align-end,
.btn-split > .header-create__menu--align-end {
  right: 0;
  left: auto;
  transform-origin: top right;
}

/* Accent color picker (project / employee / event). Host is `.header-create`. */
.project-color-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1;
}

.project-color-picker.is-open {
  z-index: 5;
}

.project-color-picker__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
  cursor: pointer;
  transition: background var(--transition-fast);
  overflow: visible;
}

.project-color-picker__btn:hover,
.project-color-picker__btn:focus-visible {
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-grouped-nested));
  outline: none;
}

.project-color-picker__swatch,
.project-color-picker__item-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-xs);
  background: var(--project-color-swatch, var(--color-primary));
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  flex-shrink: 0;
}

.project-color-picker .header-create__menu,
.project-color-picker__menu {
  min-width: 10rem;
  right: 0;
  left: auto;
}

.project-color-picker__item.is-selected {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}


/* —— Forms (§10) — nested wells + invalid state —— */
/* Captions name the field. Only the control is the hit target. */
:is(
  .form-label,
  .client-modal-label,
  .invite-user-modal-label,
  .form-group > label,
  .form-field > label,
  .client-form-field > label
):not(.btn):not(.hint-wrap):not(:has(input, select, textarea, button, a)),
.setting-row:not(.setting-row--switch) > .setting-label > label:not(.btn):not(:has(input, select, textarea, button, a)) {
  pointer-events: none;
  cursor: default;
}

:is(.form-group, .form-field, .client-form-field):has(> :is(input[type="checkbox"], input[type="radio"], input[type="file"])) > label:not(.hint-wrap),
.setting-row--switch > .setting-label > label:not(.hint-wrap) {
  pointer-events: auto;
  cursor: pointer;
}

.form-input,
.form-select,
.form-textarea,
textarea.form-input {
  --form-input-fill: var(--color-grouped-nested);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--form-input-fill);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  caret-color: var(--color-primary);
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

/* Hide native number spinners (Chrome/Safari/Firefox) */
input.form-input[type="number"],
input[type="number"].form-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

input.form-input[type="number"]::-webkit-outer-spin-button,
input.form-input[type="number"]::-webkit-inner-spin-button,
input[type="number"].form-input::-webkit-outer-spin-button,
input[type="number"].form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
textarea.form-input:focus {
  border: none;
  box-shadow: none;
  background-color: var(--form-input-fill);
  outline: none;
}

/* Chrome/Safari autofill paints a yellow/blue well (often white text).
   Keep Handbook §10 nested fill via --form-input-fill. */
.form-input:autofill,
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active,
.form-select:autofill,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus,
.form-select:-webkit-autofill:active,
.form-textarea:autofill,
.form-textarea:-webkit-autofill,
textarea.form-input:autofill,
textarea.form-input:-webkit-autofill,
textarea.form-input:-webkit-autofill:hover,
textarea.form-input:-webkit-autofill:focus,
textarea.form-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-primary);
  border: none;
  box-shadow: 0 0 0 1000px var(--form-input-fill) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--form-input-fill) inset !important;
  transition: background-color 99999s ease-out 0s;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
textarea.form-input.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border: 1px solid var(--color-danger);
  box-shadow: none;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
textarea.form-input:disabled,
.form-input.locked-input,
.form-select.locked-input,
textarea.locked-input {
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.7;
  border: none;
  box-shadow: none;
}

.form-input::placeholder,
.form-textarea::placeholder,
textarea.form-input::placeholder {
  color: var(--color-text-tertiary);
  font-weight: 400;
}

/* Live password field hints (Handbook §10) — focus-reveal min + match */
.password-requirements {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.password-requirements[hidden] {
  display: none !important;
  margin: 0;
}

.password-requirements__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}

.password-requirements__item i,
.password-requirements__item .bv-icon,
.password-requirements__item svg {
  width: var(--native-icon-size-control);
  height: var(--native-icon-size-control);
  flex-shrink: 0;
  color: inherit;
}

.password-requirements__item.is-met {
  color: var(--color-positive);
}

.password-requirements.is-submitted .password-requirements__item:not(.is-met) {
  color: var(--color-danger);
}

.password-requirements__item.is-met.is-check-in i,
.password-requirements__item.is-met.is-check-in .bv-icon,
.password-requirements__item.is-met.is-check-in svg {
  animation: password-req-check-in 200ms ease;
}

@keyframes password-req-check-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.password-requirements__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Password visibility toggle inside .form-input (Handbook §10 — not 32px .icon-btn) */
.form-input-password {
  position: relative;
}

.form-input-password .form-input {
  padding-right: calc(var(--space-2) + 22px + var(--space-2));
}

.form-input-password__toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.form-input-password__toggle:focus {
  outline: none;
}

.form-input-password__toggle:focus-visible {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

@media (hover: hover) {
  .form-input-password__toggle:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
  }
}

textarea.form-input,
.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-select {
  padding-right: 40px;
  cursor: pointer;
  /* Shorthand so color overrides cannot drop the chevron */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8E93' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
    no-repeat right var(--space-3) center / var(--icon-size-chevron),
    var(--color-grouped-nested);
}

.form-select:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8E93' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
    no-repeat right var(--space-3) center / var(--icon-size-chevron),
    var(--color-grouped-nested);
}

/* Checkbox — kanonisk V2 (§10): nested fill, ingen kantlinje */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"],
.calendar-multi__option input[type="checkbox"],
.filter-multi__option input[type="checkbox"],
.plan-task-multi__option input[type="checkbox"],
.controls-panel .filter-multi__option input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: var(--radius-xs);
  background: var(--color-grouped-nested);
  cursor: pointer;
  display: grid;
  place-content: center;
  accent-color: unset;
  transition: background var(--transition-fast);
}

.checkbox-label input[type="checkbox"]::before,
.calendar-multi__option input[type="checkbox"]::before,
.filter-multi__option input[type="checkbox"]::before,
.plan-task-multi__option input[type="checkbox"]::before,
.controls-panel .filter-multi__option input::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--transition-fast);
  background-color: var(--color-text-inverse);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.checkbox-label input[type="checkbox"]:checked,
.calendar-multi__option input[type="checkbox"]:checked,
.filter-multi__option input[type="checkbox"]:checked,
.plan-task-multi__option input[type="checkbox"]:checked,
.controls-panel .filter-multi__option input:checked {
  background: var(--color-primary);
  border: none;
}

.checkbox-label input[type="checkbox"]:checked::before,
.calendar-multi__option input[type="checkbox"]:checked::before,
.filter-multi__option input[type="checkbox"]:checked::before,
.plan-task-multi__option input[type="checkbox"]:checked::before,
.controls-panel .filter-multi__option input:checked::before {
  transform: scale(1);
}

.checkbox-label input[type="checkbox"]:indeterminate,
.calendar-multi__option input[type="checkbox"]:indeterminate,
.filter-multi__option input[type="checkbox"]:indeterminate,
.plan-task-multi__option input[type="checkbox"]:indeterminate,
.controls-panel .filter-multi__option input:indeterminate {
  background: var(--color-primary);
  border: none;
}

.checkbox-label input[type="checkbox"]:indeterminate::before,
.calendar-multi__option input[type="checkbox"]:indeterminate::before,
.filter-multi__option input[type="checkbox"]:indeterminate::before,
.plan-task-multi__option input[type="checkbox"]:indeterminate::before,
.controls-panel .filter-multi__option input:indeterminate::before {
  transform: scale(1);
  clip-path: none;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-text-inverse);
}

.checkbox-label input[type="checkbox"]:focus-visible,
.calendar-multi__option input[type="checkbox"]:focus-visible,
.filter-multi__option input[type="checkbox"]:focus-visible,
.plan-task-multi__option input[type="checkbox"]:focus-visible,
.controls-panel .filter-multi__option input:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.input-wrapper,
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Select well lives on the wrapper so native <select> cannot paint a split arrow chrome */
.select-wrapper {
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
}

/* Reliable chevron (Safari often ignores background-image on <select>) */
.select-wrapper::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  width: var(--icon-size-chevron);
  height: var(--icon-size-chevron);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8E93' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
    no-repeat center / var(--icon-size-chevron);
}

.select-wrapper .form-select,
.select-wrapper .form-select:focus,
.select-wrapper select.form-input,
.select-wrapper select.form-input:focus,
.select-wrapper select.client-modal-input,
.select-wrapper select.client-modal-input:focus {
  width: 100%;
  min-height: 44px;
  padding-right: 40px;
  border: none;
  border-radius: var(--radius-sm);
  /* Transparent fill — color comes from .select-wrapper */
  background: transparent;
  background-image: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  outline: none;
}

/*
 * Native single-select chrome (§10) — same pattern for list filters.
 * Background + chevron on the wrapper; <select> stays transparent.
 */
.filter-dropdown-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-grouped-nested);
  transition: background-color var(--transition-fast);
}

.filter-dropdown-wrapper::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  width: var(--icon-size-chevron);
  height: var(--icon-size-chevron);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8E93' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
    no-repeat center / var(--icon-size-chevron);
}

/* Multi-select nested in the same wrapper class — keep trigger chrome, hide ::after */
.filter-dropdown-wrapper:has(.filter-multi) {
  border: none;
  background: transparent;
  padding: 0;
  height: auto;
  min-height: 0;
  max-height: none;
}

.filter-dropdown-wrapper:has(.filter-multi)::after {
  content: none;
}

.filter-dropdown-wrapper .filter-dropdown,
.filter-dropdown-wrapper select.filter-dropdown {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0 var(--space-3);
  padding-right: calc(var(--space-3) + 20px);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  background-image: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  line-height: 1;
  box-shadow: none;
  outline: none;
}

/* Field or form error. Same danger tone as §11 status banner: no border, no icon. */
.form-error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  box-shadow: none;
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-alt));
  color: var(--color-danger);
  border: none;
}

.form-error.is-visible {
  display: flex;
}

/* White surfaces: secondary uses nested-well fill (on-surface).
   Gray nested wells restore the on-page token (surface white on gray). */
.glass-card,
.kpi-card,
.project-modal__dialog,
.client-modal-content,
.confirm-modal,
.import-modal {
  --btn-secondary-bg: var(--color-btn-secondary-on-surface);
  --btn-secondary-bg-hover: var(--color-btn-secondary-on-surface-hover);
}

.setting-row,
.billing-well,
.surface-nested {
  --btn-secondary-bg: var(--color-btn-secondary);
  --btn-secondary-bg-hover: var(--color-btn-secondary-hover);
}

.glass-card {
  /* Standard card = white surface on gray page canvas */
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Nested list row inside a glass-card / white modal (§9). Contrast from fill, not hairline. */
.nested-item {
  background: var(--color-grouped-nested);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  box-shadow: none;
}

@media (hover: hover) {
  .nested-item.is-actionable:hover,
  a.nested-item:hover,
  button.nested-item:hover {
    background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
  }
}

html[data-theme="dark"] .nested-item {
  background: var(--color-surface-muted);
}

@media (hover: hover) {
  html[data-theme="dark"] .nested-item.is-actionable:hover,
  html[data-theme="dark"] a.nested-item:hover,
  html[data-theme="dark"] button.nested-item:hover {
    background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-muted));
  }
}

/* Stack — equal vertical gap between sibling cards/sections (Handbook §5) */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Hub toolbar — handbook §9 detalj-oversikt (fasit: project-detail).
   Shared by project, team (Ansatte) and quote hub. Do not copy to page-CSS. */
.project-hub-toolbar,
.quote-hub-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  position: relative;
  z-index: auto;
  flex-shrink: 0;
  width: 100%;
}

.project-hub-toolbar[hidden],
.quote-hub-toolbar[hidden] {
  display: none !important;
}

.project-hub-toolbar:has(.header-create.is-open),
.quote-hub-toolbar:has(.header-create.is-open),
.quote-hub-toolbar:has(.calendar-multi [aria-expanded="true"]) {
  z-index: 20;
}

.project-hub-toolbar > .segmented-control,
.quote-hub-toolbar > .segmented-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  row-gap: var(--segmented-gap);
  column-gap: var(--segmented-gap);
  box-sizing: border-box;
  padding: var(--segmented-track-padding);
  flex: 0 1 auto;
  min-width: 0;
  align-self: flex-start;
  min-height: var(--page-header-control-height);
}

.project-hub-toolbar > .segmented-control :is(button, a[role="tab"]),
.quote-hub-toolbar > .segmented-control button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--segmented-segment-min-height);
  padding: 0 var(--segmented-btn-padding-x);
}

.segmented-control button[hidden],
.segmented-control a[role="tab"][hidden] {
  display: none !important;
}

.project-hub-actions,
.quote-hub-actions {
  display: flex;
  gap: var(--page-header-gap);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex: 0 0 auto;
}

.project-hub-actions .header-create,
.quote-hub-actions .header-create {
  position: relative;
}

.project-hub-actions--start {
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}

.project-hub-actions .btn,
.quote-hub-actions .btn {
  box-sizing: border-box;
  min-width: 0;
  justify-content: center;
  height: var(--page-header-control-height);
  min-height: var(--page-header-control-height);
  max-height: var(--page-header-control-height);
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.project-hub-actions .btn:hover,
.project-hub-actions .btn:active,
.quote-hub-actions .btn:hover,
.quote-hub-actions .btn:active {
  transform: none;
}

@media (max-width: 720px) {
  .project-hub-actions,
  .quote-hub-actions {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* Search match highlight — primary at 80% opacity, inverse text (handbook §8) */
mark {
  background: var(--color-search-highlight);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xs);
  padding: 0 1px;
  font: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Listeside: søk/filter i egen hovedboks over listen (§9 / §12)
   Canonical row: [search flex] [filters / sort / toggles]
   Alle kontroller: samme høyde, nested gray well, muted hover (light 4% / dark 8%). */
.controls-panel.glass-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--controls-panel-gap);
  align-items: center;
  padding: var(--controls-panel-padding);
  margin-bottom: var(--space-3);
  overflow: visible;
  min-width: 0;
}

.controls-panel .search-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  padding: 0 var(--space-3);
  background: var(--color-grouped-nested);
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
  flex: 1 1 var(--controls-panel-search-flex-basis);
  min-width: 100px;
  max-width: min(100%, var(--controls-panel-search-max-width));
  box-sizing: border-box;
  transition: background-color var(--transition-fast);
}

.controls-panel .search-field i {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.controls-panel .search-field input {
  border: none;
  background: transparent;
  font: inherit;
  width: 100%;
  min-width: 0;
  outline: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  height: 100%;
  padding: 0;
  margin: 0;
  line-height: 1;
}

/* Skjul native clear — bruk .search-field__clear (alltid synlig ved tekst) */
.controls-panel .search-field input[type="search"]::-webkit-search-decoration,
.controls-panel .search-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.controls-panel .search-field__clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
}

.controls-panel .search-field__clear i {
  color: currentColor;
  font-size: var(--font-size-xs);
}

.controls-panel .search-field__clear:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

/* Synlig så lenge feltet har tekst — ikke bare ved hover */
.controls-panel .search-field.is-filled .search-field__clear,
.controls-panel .search-field:has(input:not(:placeholder-shown)) .search-field__clear {
  display: inline-flex;
}

.controls-panel .controls-group {
  display: flex;
  align-items: center;
  gap: var(--controls-panel-gap);
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 0;
}

.controls-panel .filter-dropdown-wrapper {
  flex: 0 1 auto;
  min-width: var(--select-filter-min-width);
  max-width: min(100%, var(--select-filter-max-width));
}

.controls-panel .sort-dropdown-wrapper {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 200px;
}

/* List-page sort / single filter — custom dropdown (Handbook §10 / §12).
   Same 40px row as search / filter-multi / toggle; compact --filter chrome. */
.controls-panel .calendar-multi--filter {
  flex: 0 0 auto;
  min-width: var(--select-filter-min-width);
  max-width: min(100%, var(--select-filter-max-width));
}

.controls-panel .calendar-multi--filter .calendar-multi__trigger,
.controls-panel .calendar-multi--filter .calendar-select.form-input {
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
}

.controls-panel .date-picker-field {
  flex: 0 0 auto;
  width: 17.5rem;
  max-width: 100%;
}

.controls-panel .date-picker-trigger {
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
  box-sizing: border-box;
}

/* Shared nested-well hover for all controls-panel chrome (search / select / multi / toggle) */
.controls-panel .search-field:hover,
.controls-panel .search-field:focus-within,
.controls-panel .filter-dropdown-wrapper:hover,
.controls-panel .filter-dropdown-wrapper:focus-within,
.controls-panel .filter-multi__trigger:hover,
.controls-panel .filter-multi__trigger[aria-expanded="true"],
.controls-panel .filter-multi__trigger:focus,
.controls-panel .filter-multi__trigger:focus-visible,
.controls-panel .filter-multi__trigger:active,
.controls-panel .btn.btn-toggle:hover:not([aria-pressed="true"]):not(.active) {
  outline: none;
  border-color: var(--color-border);
  box-shadow: none;
  background-color: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
  color: var(--color-text);
}

.controls-panel .filter-dropdown-wrapper:has(.filter-multi):hover,
.controls-panel .filter-dropdown-wrapper:has(.filter-multi):focus-within {
  background-color: transparent;
}

html[data-theme="dark"] .controls-panel .search-field:hover,
html[data-theme="dark"] .controls-panel .search-field:focus-within,
html[data-theme="dark"] .controls-panel .filter-dropdown-wrapper:hover,
html[data-theme="dark"] .controls-panel .filter-dropdown-wrapper:focus-within,
html[data-theme="dark"] .controls-panel .filter-multi__trigger:hover,
html[data-theme="dark"] .controls-panel .filter-multi__trigger[aria-expanded="true"],
html[data-theme="dark"] .controls-panel .filter-multi__trigger:focus,
html[data-theme="dark"] .controls-panel .filter-multi__trigger:focus-visible,
html[data-theme="dark"] .controls-panel .filter-multi__trigger:active,
html[data-theme="dark"] .controls-panel .btn.btn-toggle:hover:not([aria-pressed="true"]):not(.active) {
  background-color: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
}

html[data-theme="dark"] .controls-panel .filter-dropdown-wrapper:has(.filter-multi):hover,
html[data-theme="dark"] .controls-panel .filter-dropdown-wrapper:has(.filter-multi):focus-within {
  background-color: transparent;
}

/* Multi-select filter — Handbook V2 overlay; same height as controls */
.controls-panel .filter-multi {
  position: relative;
  width: 100%;
  min-width: 0;
}

.controls-panel .filter-multi__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  transition: background-color var(--transition-fast);
}

.controls-panel .filter-multi__trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.controls-panel .filter-multi__trigger i {
  font-size: var(--icon-size-chevron);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.controls-panel .filter-multi__panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 18rem;
  overflow: auto;
  padding: var(--space-1);
  background: var(--color-grouped-card);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

/* Global dropdown / multi-panel — samme chrome som filter-multi + header-create (§6 / §8)
   Default = full feltbredde (skjema/modal). Toolbar/filter: .calendar-multi--filter. */
.calendar-multi {
  position: relative;
  width: 100%;
}

/* Open panel or visible hint lives in this stacking context — raise above
   header search (40) / toolbars. Still trapped if an ancestor (title-block) has
   a lower z-index; that ancestor must rise too (see .page-header__title-block). */
.calendar-multi:has(.calendar-multi__trigger[aria-expanded="true"]),
.calendar-multi:has(.hint-wrap:hover),
.calendar-multi:has(.hint-wrap:focus-visible),
.calendar-multi:has(.hint-wrap:has(:focus-visible)) {
  z-index: 80;
}

/* Compact filter / toolbar select — never stretch with flex:1 parents */
.calendar-multi--filter {
  width: auto;
  min-width: var(--select-filter-min-width);
  max-width: min(100%, var(--select-filter-max-width));
  flex: 0 1 auto;
}

.calendar-multi--filter.calendar-multi--type {
  min-width: var(--select-filter-type-min-width);
}

.calendar-multi--filter .calendar-multi__trigger,
.calendar-multi--filter .calendar-select.form-input {
  width: 100%;
  min-width: 0;
  height: var(--select-filter-control-height);
  min-height: var(--select-filter-control-height);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.2;
  box-sizing: border-box;
  box-shadow: none;
}

/* Hub / preview-header sit on grey page (§3 / §8): 34px + on-page secondary plate.
   Default --filter is nested well (correct in controls-panel). Nested-grey on page
   is invisible — same white plate as .btn-secondary / .segmented-control--on-page. */
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-multi__trigger,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-select.form-input {
  height: var(--page-header-control-height);
  min-height: var(--page-header-control-height);
  max-height: var(--page-header-control-height);
  background: var(--color-btn-secondary);
  border-color: var(--color-border);
}

:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-multi__trigger:hover,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-multi__trigger[aria-expanded="true"],
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-multi__trigger:focus,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-multi__trigger:focus-visible,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-multi__trigger:active,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-select.form-input:hover,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-select.form-input:focus,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-select.form-input:focus-visible,
:is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-select.form-input:active {
  background: var(--color-btn-secondary-hover);
  background-color: var(--color-btn-secondary-hover);
  border-color: var(--color-border);
}

html[data-theme="dark"] :is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-multi__trigger,
html[data-theme="dark"] :is(.project-hub-actions, .quote-hub-actions, .preview-header) .calendar-multi--filter .calendar-select.form-input {
  background: var(--color-btn-secondary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .calendar-multi--filter .calendar-select.form-input,
html[data-theme="dark"] .calendar-multi--filter .calendar-multi__trigger {
  border-color: rgba(255, 255, 255, 0.12);
}

.calendar-multi--filter .calendar-multi__trigger > span:not(.hint) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panel may be wider than compact trigger; pin to end (filters sit right) */
.calendar-multi--filter .calendar-multi__panel {
  left: auto;
  right: 0;
  width: max-content;
  min-width: max(100%, var(--select-filter-panel-min-width));
  max-width: min(100vw - 24px, 20rem);
}

.calendar-multi--filter .calendar-multi__panel--type {
  min-width: max(100%, 14.5rem);
}

/* Compact filter menus: same type as .header-create__item / .btn (xs / 500).
   `--filter` on the panel survives portal-to-body (host is no longer an ancestor). */
.calendar-multi--filter .calendar-multi__option,
.calendar-multi--filter .calendar-multi__empty,
.calendar-multi__panel--filter .calendar-multi__option,
.calendar-multi__panel--filter .calendar-multi__empty {
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
}

/* Quote status — semantic tokens (§11 banners / §3 surfaces). Draft = inset plate on nested row. */
.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="draft"],
.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="neutral"],
.sales-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="neutral"] {
  background: var(--color-grouped-card);
  color: var(--color-text-secondary);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="sent"],
.sales-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="sent"] {
  background: var(--color-secondary-muted);
  color: var(--color-secondary);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="viewed"],
.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="expired"],
.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="warning"],
.sales-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="warning"] {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-alt));
  color: var(--color-warning);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="accepted"],
.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="success"],
.project-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="ready"],
.sales-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="success"] {
  background: color-mix(in srgb, var(--color-positive) 12%, var(--color-bg-alt));
  color: var(--color-positive);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="completed"],
.project-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="completed"] {
  background: color-mix(in srgb, var(--status-job-completed) 16%, transparent);
  color: var(--status-job-completed);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="lost"],
.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="rejected"],
.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="withdrawn"],
.sales-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="danger"] {
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-alt));
  color: var(--color-danger);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="planned"],
.project-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="planned"],
.project-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="draft"] {
  background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
  color: var(--color-secondary);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="in_progress"],
.project-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="in_progress"],
.sales-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="in_progress"] {
  background: color-mix(in srgb, var(--color-positive) 16%, transparent);
  color: var(--color-positive);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="on_hold"],
.project-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="on_hold"] {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-alt));
  color: var(--color-warning);
}

.quote-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="cancelled"],
.project-status-select.calendar-multi--filter .calendar-multi__trigger[data-variant="cancelled"] {
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-alt));
  color: var(--color-danger);
}

.sales-status-select .calendar-multi__option[data-value="new"] .calendar-multi__option-label {
  color: var(--color-text-secondary);
}

.sales-status-select .calendar-multi__option[data-value="contacted"] .calendar-multi__option-label {
  color: var(--color-secondary);
}

.sales-status-select .calendar-multi__option[data-value="reached"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="qualified"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="demo_booked"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="booked_intro"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="booked_demo"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="won"] .calendar-multi__option-label {
  color: var(--color-positive);
}

.sales-status-select .calendar-multi__option[data-value="no_reply"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="no_answer"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="callback"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="wrong_number"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="waiting_list"] .calendar-multi__option-label {
  color: var(--color-warning);
}

.sales-status-select .calendar-multi__option[data-value="not_interested"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="unqualified"] .calendar-multi__option-label,
.sales-status-select .calendar-multi__option[data-value="lost"] .calendar-multi__option-label {
  color: var(--color-danger);
}

.project-status-select.calendar-multi--filter {
  min-width: 8rem;
  max-width: 10.5rem;
  flex: 0 0 auto;
}

#project-fdv-card .project-status-select.calendar-multi--filter {
  min-width: 10.5rem;
  max-width: 14rem;
}

#project-fdv-card .project-status-select .calendar-multi__trigger [data-single-select-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-select.calendar-multi--filter .calendar-multi__panel {
  width: max-content;
  min-width: 100%;
}

.quote-status-select.calendar-multi--filter .calendar-multi__panel {
  width: max-content;
  min-width: 100%;
  max-width: min(100vw - 24px, 16rem);
}

.calendar-multi__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.calendar-multi__trigger > .fa-chevron-down {
  font-size: var(--icon-size-chevron);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.calendar-multi__combobox {
  position: relative;
}

.calendar-multi__combobox .calendar-multi__trigger {
  display: block;
  cursor: text;
  padding-right: calc(var(--space-3) + 1rem);
}

.client-modal .calendar-multi__combobox .client-modal-input.calendar-multi__trigger {
  padding-right: calc(var(--space-4) + 1rem);
}

.calendar-multi__combobox > .fa-chevron-down {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--icon-size-chevron);
  color: var(--color-text-tertiary);
}

/* Address and company-name typeaheads are text fields. No select chevron and no "Lukk". */
.calendar-multi--address .calendar-multi__combobox > .fa-chevron-down,
.calendar-multi--typeahead .calendar-multi__combobox > .fa-chevron-down,
.calendar-multi--address .calendar-multi__combobox > [data-bv-icon="chevron-down"],
.calendar-multi--typeahead .calendar-multi__combobox > [data-bv-icon="chevron-down"],
.calendar-multi--address .calendar-multi__combobox > .select-trigger__close,
.calendar-multi--typeahead .calendar-multi__combobox > .select-trigger__close,
.calendar-multi--address .calendar-multi__combobox:has([aria-expanded="true"]) > .fa-chevron-down,
.calendar-multi--typeahead .calendar-multi__combobox:has([aria-expanded="true"]) > .fa-chevron-down,
.calendar-multi--address .calendar-multi__combobox:has([aria-expanded="true"]) > [data-bv-icon="chevron-down"],
.calendar-multi--typeahead .calendar-multi__combobox:has([aria-expanded="true"]) > [data-bv-icon="chevron-down"],
.calendar-multi--address .calendar-multi__combobox:has([aria-expanded="true"]) > .select-trigger__close,
.calendar-multi--typeahead .calendar-multi__combobox:has([aria-expanded="true"]) > .select-trigger__close {
  display: none;
}

.calendar-multi--address .calendar-multi__combobox .calendar-multi__trigger,
.calendar-multi--typeahead .calendar-multi__combobox .calendar-multi__trigger,
.calendar-multi--address .calendar-multi__combobox:has([aria-expanded="true"]) .calendar-multi__trigger,
.calendar-multi--typeahead .calendar-multi__combobox:has([aria-expanded="true"]) .calendar-multi__trigger,
.client-modal .calendar-multi--address .calendar-multi__combobox .client-modal-input.calendar-multi__trigger,
.client-modal .calendar-multi--typeahead .calendar-multi__combobox .client-modal-input.calendar-multi__trigger,
.client-modal .calendar-multi--address .calendar-multi__combobox:has([aria-expanded="true"]) .client-modal-input.calendar-multi__trigger,
.client-modal .calendar-multi--typeahead .calendar-multi__combobox:has([aria-expanded="true"]) .client-modal-input.calendar-multi__trigger {
  padding-right: var(--space-4);
}

.calendar-multi__option.is-highlighted {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

html[data-theme="dark"] .calendar-multi__option.is-highlighted {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
}

[data-single-select-label].is-placeholder {
  color: var(--color-text-tertiary);
}

/* Select panels portal to body (.is-portaled) — never overflow:visible on
   .client-modal-body / content (handbook §7 / §10); that recenters a tall dialog. */

.calendar-multi__panel,
.client-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 18rem;
  overflow: auto;
  padding: var(--space-1);
  background: var(--color-grouped-card);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-sm);
  font-weight: 400;
}

/* Handbook §7 / §10 — portal to body so modal-body overflow does not clip. */
.calendar-multi__panel.is-portaled {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: var(--z-select-panel, 2200);
  margin: 0;
}

/* Handbook §10 — open select: chevron becomes close text (dropdown-panel.js). */
.select-trigger__close {
  display: none;
  flex-shrink: 0;
  font-family: var(--font-family-base);
  font-size: inherit;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.calendar-multi__trigger[aria-expanded="true"] > .fa-chevron-down,
.calendar-multi__trigger[aria-expanded="true"] > [data-bv-icon="chevron-down"],
.filter-multi__trigger[aria-expanded="true"] > .fa-chevron-down,
.filter-multi__trigger[aria-expanded="true"] > [data-bv-icon="chevron-down"],
.calendar-multi__combobox:has([aria-expanded="true"]) > .fa-chevron-down,
.calendar-multi__combobox:has([aria-expanded="true"]) > [data-bv-icon="chevron-down"] {
  display: none;
}

.calendar-multi__trigger[aria-expanded="true"] > .select-trigger__close,
.filter-multi__trigger[aria-expanded="true"] > .select-trigger__close,
.calendar-multi__combobox:has([aria-expanded="true"]) > .select-trigger__close {
  display: block;
}

.calendar-multi__combobox > .select-trigger__close {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--font-size-sm);
}

.calendar-multi__combobox:has([aria-expanded="true"]) .calendar-multi__trigger {
  padding-right: calc(var(--space-3) + 3.25rem);
}

.client-modal .calendar-multi__combobox:has([aria-expanded="true"]) .client-modal-input.calendar-multi__trigger {
  padding-right: calc(var(--space-4) + 3.25rem);
}

.calendar-multi__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.calendar-multi__option-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.calendar-multi__option-detail {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.calendar-multi__option.is-unavailable {
  cursor: default;
}

.calendar-multi__option.is-unavailable .calendar-multi__option-label,
.calendar-multi__option.is-unavailable .calendar-multi__option-detail {
  color: var(--color-text-tertiary);
}

.calendar-multi__option-body {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.calendar-multi__option-icon {
  flex-shrink: 0;
  width: 1.1em;
  color: var(--color-text-tertiary);
  text-align: center;
}

.calendar-multi__option-label,
.calendar-multi__summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-multi__option-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.calendar-multi__option-desc {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
  line-height: 1.35;
  white-space: normal;
}

.calendar-multi__option--stacked {
  align-items: flex-start;
}

.calendar-multi__option--stacked .calendar-multi__option-label {
  font-weight: 500;
  white-space: normal;
}

.calendar-multi__trigger .project-flag-icon {
  flex-shrink: 0;
  color: var(--project-flag-color, var(--color-text-tertiary));
}

.calendar-multi__option--project,
.calendar-multi__option--single {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
}

/* Option-hosted §8 hints: keep full-width row layout (hint-wrap is otherwise inline-flex). */
.calendar-multi__option.hint-wrap {
  display: flex;
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.calendar-multi__option--project.is-selected,
.calendar-multi__option--single.is-selected {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

html[data-theme="dark"] .calendar-multi__option--project.is-selected,
html[data-theme="dark"] .calendar-multi__option--single.is-selected {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
}

.calendar-multi__option:hover {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

html[data-theme="dark"] .calendar-multi__option:hover {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
}

.calendar-multi__empty {
  margin: 0;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  text-align: center;
}

.calendar-multi__divider {
  height: 1px;
  margin: var(--space-1) 0;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.calendar-multi__divider[hidden] {
  display: none;
}

/* Section micro-labels inside multi panels (Prosjekt / Salg / …) */
.calendar-multi__group-label {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
}

.calendar-multi__group-label[hidden] {
  display: none;
}

.calendar-multi__divider + .calendar-multi__group-label {
  padding-top: var(--space-1);
}

/* Dropdown triggers — samme muted hover/aktiv som liste-rader (§9 / §12); ingen primary-kant */
.calendar-multi__trigger:hover,
.calendar-multi__trigger[aria-expanded="true"],
.calendar-multi__trigger:focus,
.calendar-multi__trigger:focus-visible,
.calendar-multi__trigger:active,
.calendar-select.form-input:hover,
.calendar-select.form-input:focus,
.calendar-select.form-input:focus-visible,
.calendar-select.form-input:active,
.filter-dropdown-wrapper:hover,
.filter-dropdown-wrapper:focus-within {
  outline: none;
  border-color: var(--color-border);
  box-shadow: none;
  background-color: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

.filter-dropdown-wrapper:has(.filter-multi):hover,
.filter-dropdown-wrapper:has(.filter-multi):focus-within {
  background-color: transparent;
  border-color: transparent;
}

html[data-theme="dark"] .calendar-multi__trigger:hover,
html[data-theme="dark"] .calendar-multi__trigger[aria-expanded="true"],
html[data-theme="dark"] .calendar-multi__trigger:focus,
html[data-theme="dark"] .calendar-multi__trigger:focus-visible,
html[data-theme="dark"] .calendar-multi__trigger:active,
html[data-theme="dark"] .calendar-select.form-input:hover,
html[data-theme="dark"] .calendar-select.form-input:focus,
html[data-theme="dark"] .calendar-select.form-input:focus-visible,
html[data-theme="dark"] .calendar-select.form-input:active,
html[data-theme="dark"] .filter-dropdown-wrapper:hover,
html[data-theme="dark"] .filter-dropdown-wrapper:focus-within {
  background-color: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
}

html[data-theme="dark"] .filter-dropdown-wrapper:has(.filter-multi):hover,
html[data-theme="dark"] .filter-dropdown-wrapper:has(.filter-multi):focus-within {
  background-color: transparent;
}

/* Keep native select fill transparent so wrapper hover reads correctly */
select.filter-dropdown:hover,
select.filter-dropdown:focus,
select.filter-dropdown:focus-visible,
select.filter-dropdown:active {
  outline: none;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
}

select.form-select:focus,
select.form-select:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.controls-panel .filter-multi__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.controls-panel .filter-multi__option:hover {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

/* Checkbox chrome: shared §10 rules above (.filter-multi__option input) */

.controls-panel .filter-multi__divider {
  height: 1px;
  margin: var(--space-1) 0;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.controls-panel .controls-right {
  display: flex;
  align-items: center;
  gap: var(--controls-panel-gap);
  flex-wrap: wrap;
  margin-left: 0;
  flex-shrink: 0;
}

.controls-panel .segmented-control {
  flex-shrink: 0;
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
  box-sizing: border-box;
  align-items: stretch;
  padding: var(--segmented-track-padding);
}

.controls-panel .segmented-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  padding: 0 var(--segmented-btn-padding-x);
  box-sizing: border-box;
}

/* Any action button inside controls-panel must match the 40px row (§8) */
.controls-panel .btn:not(.btn-toggle) {
  box-sizing: border-box;
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
}

.controls-panel .btn.btn-toggle {
  height: var(--controls-panel-control-height);
  min-height: var(--controls-panel-control-height);
  max-height: var(--controls-panel-control-height);
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  background: var(--color-grouped-nested);
  color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.controls-panel .btn.btn-toggle[aria-pressed="true"],
.controls-panel .btn.btn-toggle.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.controls-panel .btn.btn-toggle[aria-pressed="true"]:hover,
.controls-panel .btn.btn-toggle.active:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  filter: brightness(1.05);
}

@media (max-width: 600px) {
  .controls-panel.glass-card {
    flex-direction: column;
    align-items: stretch;
  }

  .controls-panel .search-field {
    flex: 1 1 auto;
    min-width: 100%;
    max-width: none;
    width: 100%;
  }

  .controls-panel .controls-group {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    margin-left: 0;
  }

  .controls-panel .filter-dropdown-wrapper {
    flex: 1 1 auto;
    min-width: 100%;
  }

  .controls-panel .sort-dropdown-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .controls-panel .calendar-multi--filter {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .controls-panel .controls-right {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .controls-panel.glass-card {
    padding: var(--space-3);
  }
}

/* ========================================
   LIST PAGES — viewport lock (Handbook §9 / §12)
   Fasit: clients. Page does not scroll; only .list-scroll does.
   Mark <main class="app-main list-page …"> on entity list pages.
   Calendar week uses the same lock via html[data-calendar-view-pref="week"]
   (Handbook §13) so the week grid can fill remaining height.
   Critical: every ancestor needs a definite height + min-height: 0
   so flex children can shrink and .list-scroll overflows.
   ======================================== */

html:has(.list-page),
html[data-calendar-view-pref="week"] {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

body:has(.list-page),
html[data-calendar-view-pref="week"] body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  /* body is flex column — shell must fill, not grow with content */
}

.app-shell:has(.list-page),
html[data-calendar-view-pref="week"] .app-shell {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

/* Keep rail track (not auto) so collapsed flyout overlays instead of
   widening the grid column and pushing .app-main. */
.app-shell:has(.list-page)[data-sidebar-mode="collapsed"],
.app-shell:has(.list-page)[data-sidebar-collapsed="true"],
html[data-sidebar-collapsed-pref="true"] .app-shell:has(.list-page):not([data-sidebar-ready]),
html[data-calendar-view-pref="week"] .app-shell[data-sidebar-mode="collapsed"],
html[data-calendar-view-pref="week"] .app-shell[data-sidebar-collapsed="true"],
html[data-sidebar-collapsed-pref="true"][data-calendar-view-pref="week"] .app-shell:not([data-sidebar-ready]) {
  grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
}

/* Mobile drawer is position:fixed and out of flow. Without this, list-page
   keeps `sidebar-width 1fr` (loaded after base.css) so .app-main auto-places
   into the 240px first column and the rest of the screen stays empty. */
.app-shell:has(.list-page)[data-sidebar-mode="mobile"],
html[data-calendar-view-pref="week"] .app-shell[data-sidebar-mode="mobile"] {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
  .app-shell:has(.list-page),
  html[data-calendar-view-pref="week"] .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app-main.list-page {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  /* Grid stretch + min-height:0 — do NOT use height:auto/content */
  align-self: stretch;
  height: auto;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.app-main.list-page > .app-main__header,
.app-main.list-page > .controls-panel {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.app-main.list-page > .project-hub-toolbar {
  flex: 0 0 auto;
  margin-top: calc(var(--space-4) - var(--stack-gap));
  margin-bottom: calc(var(--space-5) - var(--stack-gap));
}

.app-main.list-page > * {
  min-width: 0;
  max-width: 100%;
}

/* List panel fills remaining viewport; internal .list-scroll scrolls.
   Only the main entity list panel (not optional sibling cards). */
.app-main.list-page > .clients-panel,
.app-main.list-page > .quotes-panel,
.app-main.list-page > .products-panel,
.app-main.list-page > .projects-panel,
.app-main.list-page > .project-templates-panel {
  display: flex;
  flex-direction: column;
  /* basis 0 so panel is bounded by main, not by card content height */
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface);
}

/* Large list + queue scrollports — Handbook §9/§12.
   Fasit scrollbar/kant: dashboard «Nylig aktivitet» (.attention-list) —
   equal L/R inset + thin token thumb (not a wide scrollbar gutter).
   flex-fill is ONLY for .list-page (viewport lock). Embedded detail lists
   (e.g. client-detail Tilbud/Prosjekter) must size to content. */
.list-scroll,
.clients-cards-container,
.quotes-cards-container,
.products-cards-container,
.projects-list,
.client-projects-list {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--list-box-padding-x) var(--list-box-padding-bottom);
  box-sizing: border-box;
  background: var(--color-surface);
}

.app-main.list-page .list-scroll,
.app-main.list-page .clients-cards-container,
.app-main.list-page .quotes-cards-container,
.app-main.list-page .products-cards-container,
.app-main.list-page .projects-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

/* §14 page empty — fasit native WebV2EmptyState. iOS = Android = web. */
.app-main.list-page .empty-state,
#team-load-error.empty-state {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  background: transparent;
  border: none;
  box-shadow: none;
}

.app-main.list-page .empty-state[hidden],
#team-load-error.empty-state[hidden] {
  display: none !important;
}

.app-main.list-page .empty-state > i,
#team-load-error.empty-state > i {
  margin: 0;
  font-size: var(--empty-state-icon-size);
  line-height: 1;
  color: var(--color-text-tertiary);
  opacity: 0.55;
}

.app-main.list-page .empty-state__title,
#team-load-error .empty-state__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.app-main.list-page .empty-state__message,
#team-load-error .empty-state__message {
  margin: 0;
  max-width: 40ch;
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.app-main.list-page .empty-state .btn,
#team-load-error.empty-state .btn {
  margin-top: var(--space-2);
}

@media (max-width: 480px) {
  .list-scroll,
  .clients-cards-container,
  .quotes-cards-container,
  .products-cards-container,
  .projects-list,
  .client-projects-list {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    padding-bottom: var(--space-4);
  }
}

/* Shared surface scrollbar chrome (lists + dashboard queues) */
.list-scroll,
.clients-cards-container,
.quotes-cards-container,
.products-cards-container,
.projects-list,
.client-projects-list,
.attention-list,
.todays-tasks-panel,
.comments-list {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.list-scroll::-webkit-scrollbar,
.clients-cards-container::-webkit-scrollbar,
.quotes-cards-container::-webkit-scrollbar,
.products-cards-container::-webkit-scrollbar,
.projects-list::-webkit-scrollbar,
.client-projects-list::-webkit-scrollbar,
.attention-list::-webkit-scrollbar,
.todays-tasks-panel::-webkit-scrollbar,
.comments-list::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.list-scroll::-webkit-scrollbar-track,
.clients-cards-container::-webkit-scrollbar-track,
.quotes-cards-container::-webkit-scrollbar-track,
.products-cards-container::-webkit-scrollbar-track,
.projects-list::-webkit-scrollbar-track,
.client-projects-list::-webkit-scrollbar-track,
.attention-list::-webkit-scrollbar-track,
.todays-tasks-panel::-webkit-scrollbar-track,
.comments-list::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.list-scroll::-webkit-scrollbar-thumb,
.clients-cards-container::-webkit-scrollbar-thumb,
.quotes-cards-container::-webkit-scrollbar-thumb,
.products-cards-container::-webkit-scrollbar-thumb,
.projects-list::-webkit-scrollbar-thumb,
.client-projects-list::-webkit-scrollbar-thumb,
.attention-list::-webkit-scrollbar-thumb,
.todays-tasks-panel::-webkit-scrollbar-thumb,
.comments-list::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: var(--scrollbar-thumb-inset) solid var(--color-surface);
  background-clip: padding-box;
}

.list-scroll::-webkit-scrollbar-thumb:hover,
.clients-cards-container::-webkit-scrollbar-thumb:hover,
.quotes-cards-container::-webkit-scrollbar-thumb:hover,
.products-cards-container::-webkit-scrollbar-thumb:hover,
.projects-list::-webkit-scrollbar-thumb:hover,
.client-projects-list::-webkit-scrollbar-thumb:hover,
.attention-list::-webkit-scrollbar-thumb:hover,
.todays-tasks-panel::-webkit-scrollbar-thumb:hover,
.comments-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/*
 * Nested list scrollports — Handbook §12
 * Default: chain wheel/trackpad to the page at top/bottom (or when not scrollable).
 * Overlays/modals/pickers must opt into .overscroll-contain.
 */
.app-main .attention-list,
.app-main .todays-tasks-panel,
.app-main .crew-today-list,
.app-main .comments-list,
.app-main .line-items-scroll,
.app-main .products-cards-container,
.app-main .clients-cards-container,
.app-main .quotes-cards-container,
.app-main .projects-list,
.app-main .client-projects-list,
.app-main #project-tasks-card > .project-hub-card__body,
.overscroll-chain {
  overscroll-behavior: auto;
}

/* Floating UI: trap scroll so the page behind does not move */
.overscroll-contain,
.assistant-panel,
.assistant-panel__messages,
.assistant-panel__transcript,
.smart-search__dropdown,
.filter-multi__panel,
.calendar-multi__panel,
.client-dropdown,
.header-create__menu,
.next-contact-picker-popup,
.client-modal-body,
.import-modal__body,
.change-log-modal-body,
.site-visits-modal-body,
.project-modal__body,
#template-modal-list,
#template-edit-editor .ql-editor {
  overscroll-behavior: contain;
}

/* Scrollbare list-bodies: bunn-innrykk i scroll-innholdet */
.comments-list,
.attention-list,
.todays-tasks-panel {
  padding-bottom: var(--list-box-padding-bottom);
  box-sizing: border-box;
}

/* Kapte paneler med intern scroll: permanent bunn-innrykk utenfor scrollporten */
.dashboard-today-tasks,
.dashboard-live-activity {
  padding-bottom: var(--list-box-padding-bottom);
  box-sizing: border-box;
}

.section-title {
  font-size: var(--font-size-md); /* V2: 16px — ikke lg */
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

/* Optional created/meta line under a card section title. Fasit: kunde-detalj #info-created */
.client-info-added {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}

/* Meta / caption — dato, teller, sekundær kontekst (Handbook §4) */
.text-caption {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

/* Glass-card / panel header row — title (+ optional actions) above content */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--section-header-gap);
  flex: 0 0 auto;
}

.section-header-row .section-title {
  margin: 0;
}

.section-header-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ========================================
   SETTINGS — global section / row pattern
   Title inside .glass-card (Handbook §18 surface card)
   ======================================== */

.settings-section {
  margin-bottom: var(--space-8);
  min-width: 0;
  max-width: 100%;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section > .glass-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  /* Inherit global .glass-card surface / border / shadow */
}

.settings-section > .glass-card > .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.settings-section > .glass-card > .section-title + .setting-info {
  margin-top: calc(var(--space-1) * -1);
}

.setting-info {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Nested rad inni settings glass-card (COLOR_SYSTEM §3 — ikke bg-alt/hvit-på-hvit) */
.setting-row {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-4);
  align-items: center;
  background: var(--color-grouped-nested);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.setting-row:has(.calendar-multi [aria-expanded="true"]) {
  z-index: 80;
}

.setting-row:last-child {
  margin-bottom: 0;
}

/*
  Elevated felt på grå nested flate (§10) — settings-rader, oppgave inline-edit,
  bulk/mal-editor. Hvit plate (grouped-card), dark: litt hevet mix.
*/
.setting-row .form-input,
.setting-row textarea.form-input,
input.form-input.project-task-inline-edit__name,
textarea.form-input.project-task-inline-edit__desc {
  --form-input-fill: var(--color-grouped-card);
  background: var(--form-input-fill);
  background-color: var(--form-input-fill);
  border: none;
  box-shadow: none;
  caret-color: var(--color-primary);
}

.setting-row .form-input:focus,
.setting-row textarea.form-input:focus,
input.form-input.project-task-inline-edit__name:focus,
textarea.form-input.project-task-inline-edit__desc:focus {
  background: var(--form-input-fill);
  background-color: var(--form-input-fill);
  border: none;
  box-shadow: none;
  outline: none;
}

html[data-theme="dark"] .setting-row .form-input,
html[data-theme="dark"] .setting-row textarea.form-input,
html[data-theme="dark"] input.form-input.project-task-inline-edit__name,
html[data-theme="dark"] textarea.form-input.project-task-inline-edit__desc,
html[data-theme="dark"] .setting-row .form-input:focus,
html[data-theme="dark"] .setting-row textarea.form-input:focus,
html[data-theme="dark"] input.form-input.project-task-inline-edit__name:focus,
html[data-theme="dark"] textarea.form-input.project-task-inline-edit__desc:focus {
  --form-input-fill: color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
  background: var(--form-input-fill);
  background-color: var(--form-input-fill);
}

/* Compact inline-edit sizing (oppgaveliste / bulk / mal) — ikke standard 44/80px */
input.form-input.project-task-inline-edit__name,
textarea.form-input.project-task-inline-edit__desc {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
}

input.form-input.project-task-inline-edit__name {
  flex: 1;
  min-width: 0;
  height: 32px;
  font-weight: 600;
  line-height: 1.3;
}

textarea.form-input.project-task-inline-edit__desc {
  display: block;
  height: auto;
  font-weight: 400;
  line-height: 1.35;
  resize: vertical;
  field-sizing: content;
}

input.form-input.project-task-inline-edit__name.is-invalid,
textarea.form-input.project-task-inline-edit__desc.is-invalid {
  border: 1px solid var(--color-danger);
}

/* Stacked name + description (liste-edit / bulk / mal) */
.task-edit-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Wrapped selects: elevated plate on the wrapper, transparent <select> (no split chrome) */
.setting-row .select-wrapper {
  background: var(--color-grouped-card);
}

html[data-theme="dark"] .setting-row .select-wrapper {
  background: color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
}

.setting-row .select-wrapper .form-select,
.setting-row .select-wrapper .form-select:focus {
  background: transparent;
  background-image: none;
}

/* Behold chevron når bakgrunn overstyres (uten wrapper) */
.setting-row > .setting-control > .form-select,
.setting-row > .setting-control > .form-select:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8E93' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
    no-repeat right var(--space-3) center / var(--icon-size-chevron),
    var(--color-grouped-card);
}

html[data-theme="dark"] .setting-row > .setting-control > .form-select,
html[data-theme="dark"] .setting-row > .setting-control > .form-select:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8E93' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
    no-repeat right var(--space-3) center / var(--icon-size-chevron),
    color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
}

.setting-label {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.setting-label label {
  display: block;
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
}

.setting-label p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  margin: 0;
  line-height: 1.5;
}

.setting-control {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.setting-control .form-input,
.setting-control .form-select,
.setting-control textarea.form-input {
  width: 100%;
  max-width: 100%;
}

/* Avatar / logo plate — Handbook §10. Shared by settings and Fullfør kontoen. */
.setting-row--image {
  align-items: flex-start;
}

.setting-row--image .setting-control {
  flex: 0 0 auto;
}

.image-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  width: 100%;
}

.image-preview {
  min-width: 120px;
  width: 100%;
  max-width: 180px;
  height: 100px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
  box-sizing: border-box;
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
}

.image-preview:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.image-preview.drag-over {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-grouped-nested));
}

.image-preview i {
  font-size: 1.5rem;
  color: var(--color-text-tertiary);
  margin-bottom: 0;
  flex-shrink: 0;
}

.image-preview span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  display: block;
}

.image-preview.has-image {
  padding: 0;
  background: transparent;
  border-color: var(--color-border);
}

.image-preview.has-image i,
.image-preview.has-image span {
  display: none;
}

.image-preview.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-preview--avatar,
#avatar-preview {
  width: 100px;
  height: 100px;
  min-width: 100px;
  max-width: 100px;
  border-radius: var(--radius-sm);
}

.image-preview--avatar.has-image img,
#avatar-preview.has-image img {
  object-fit: cover;
}

.image-upload-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Notification preference matrix: title left, Email/Push checkmarks right (§10). */
#notification-preferences-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.notif-pref-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.setting-row--channels .setting-control--channels {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 3.5rem 3.5rem;
  gap: var(--space-3);
  align-items: center;
  justify-items: center;
  min-width: 0;
}

.setting-row--channels-header {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 var(--space-4) 0;
  min-height: 0;
}

.setting-row--channels-header .setting-label {
  display: flex;
  align-items: center;
}

.notif-pref-group-title {
  margin: 0;
}

.setting-row--channels-header .setting-channel-label {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

.setting-channel-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.setting-channel-cell .checkbox-label {
  margin: 0;
  gap: 0;
}

.setting-channel-cell--empty {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 768px) {
  .setting-row {
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }

  .setting-label,
  .setting-control {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .setting-control {
    justify-content: flex-start;
  }

  /* Switches stay on the same row as the label (grouped-settings pattern). */
  .setting-row--switch {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  .setting-row--switch .setting-label {
    flex: 1 1 auto;
    width: auto;
  }

  .setting-row--switch .setting-control,
  .setting-row--switch .setting-control--switch {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    justify-content: flex-end;
  }

  /* Avatar / logo stay beside the copy — do not stack under the label (§10). */
  .setting-row--image {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .setting-row--image .setting-label {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .setting-row--image .setting-control {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    justify-content: flex-end;
  }

  .setting-row--image .image-upload-container {
    width: auto;
    align-items: flex-end;
  }

  .setting-row--image .image-preview {
    width: 120px;
    max-width: 100%;
    align-self: flex-start;
  }

  .setting-row--image .image-preview--avatar,
  .setting-row--image #avatar-preview {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }

  /* Plate is the picker on the phone. Hide Velg. Keep Fjern. */
  .image-upload-actions .btn-primary {
    display: none;
  }

  .image-upload-actions:not(:has(.btn-danger-outline:not(.hidden):not([hidden]))) {
    display: none;
  }

  .setting-row--channels {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  .setting-row--channels .setting-label {
    flex: 1 1 auto;
    width: auto;
  }

  .setting-row--channels .setting-control--channels {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    justify-content: flex-end;
  }

  .client-detail-action-btn {
    position: relative;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }

  .client-detail-action-btn::before {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kpi-grid-min, 220px), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.kpi-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  /* Raised white card — ikon-tints og border gir hierarki */
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.kpi-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kpi-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(116, 28, 71, 0.12);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

.kpi-card--leads .kpi-card__icon {
  background: rgba(116, 28, 71, 0.15);
  color: #741C47;
}

.kpi-card--inspections .kpi-card__icon {
  background: rgba(88, 86, 214, 0.15);
  color: #5856D6;
}

.kpi-card--quotes .kpi-card__icon {
  background: rgba(249, 115, 22, 0.18);
  color: #F97316;
}

.kpi-card--signed .kpi-card__icon {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
}

.kpi-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.kpi-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi-value {
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

.kpi-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.kpi-card__metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kpi-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.kpi-metric__value {
  font-weight: 600;
  color: var(--color-text);
}

.kpi-metric__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.kpi-metric--primary .kpi-metric__value {
  font-size: var(--font-size-xl);
}

.kpi-metric--conversion .kpi-metric__value {
  color: var(--color-primary);
}

.kpi-metric--trend .kpi-metric__value {
  color: var(--color-text-secondary);
}

.kpi-metric--detail .kpi-metric__value {
  color: var(--color-text);
  font-weight: 500;
}

.kpi-card.is-loading {
  pointer-events: none;
}

.kpi-card.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 1.6s infinite;
  pointer-events: none;
}

/* Segmented control / page tabs (§8 Faner-standard)
   Default = on white/card surface → muted (gray) track, surface hover
   --on-page = on gray page canvas → surface track, muted (gray) hover
   Tokens flip correctly in dark mode (same contrast rules). */
.segmented-control {
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  padding: var(--segmented-track-padding);
  display: inline-flex;
  gap: var(--segmented-gap);
  max-width: 100%;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  align-items: stretch;
  min-height: var(--page-header-control-height);
}

.segmented-control--on-page {
  background: var(--color-surface);
}

/* Many segments (§8): hug content, wrap — do not stretch a full-width track */
.segmented-control--wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  align-self: flex-start;
  box-sizing: border-box;
  height: auto;
  max-height: none;
}

.segmented-control--wrap button {
  flex: 0 0 auto;
}

.segmented-control button,
.segmented-control a[role="tab"] {
  padding: 0 var(--segmented-btn-padding-x);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
  font-family: inherit;
  color: var(--color-text-secondary);
  transition: background var(--transition-medium), color var(--transition-medium);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--segmented-segment-min-height);
  text-decoration: none;
}

/* On white/card: hover elevates toward surface (white in light / card in dark) */
.segmented-control button:hover:not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled),
.segmented-control a[role="tab"]:hover:not([aria-pressed="true"]):not([aria-selected="true"]) {
  background: var(--color-surface);
  color: var(--color-text);
}

/* On gray page: hover toward muted gray (inverse of card context) */
.segmented-control--on-page button:hover:not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled),
.segmented-control--on-page a[role="tab"]:hover:not([aria-pressed="true"]):not([aria-selected="true"]) {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.segmented-control button[aria-pressed="true"],
.segmented-control button[aria-selected="true"],
.segmented-control a[role="tab"][aria-pressed="true"],
.segmented-control a[role="tab"][aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.segmented-control button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.timeline {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.timeline-column {
  flex: 1;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  min-height: 220px;
}

.timeline-column h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-md);
}

.timeline-item {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  display: flex;
  justify-content: space-between;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-weight: 500;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px; /* V2 — ~26px høy */
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.status-pill[data-variant="success"] {
  background: rgba(52, 199, 89, 0.1);
  color: var(--color-positive);
}

.status-pill[data-variant="warning"] {
  background: rgba(255, 149, 0, 0.15);
  color: var(--color-warning);
}

.status-pill[data-variant="danger"] {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

.status-pill[data-variant="sent"],
.status-pill[data-variant="planned"] {
  background: var(--color-secondary-muted);
  color: var(--color-secondary);
}

.status-pill[data-variant="open"] {
  background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
  color: var(--color-secondary);
}

.status-pill[data-variant="in_progress"] {
  background: color-mix(in srgb, var(--color-positive) 16%, transparent);
  color: var(--color-positive);
}

.status-pill[data-variant="completed"] {
  background: color-mix(in srgb, var(--status-job-completed) 16%, transparent);
  color: var(--status-job-completed);
}

.status-pill[data-variant="on_hold"] {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  color: var(--color-warning);
}

.status-pill[data-variant="cancelled"] {
  background: color-mix(in srgb, var(--color-danger) 16%, transparent);
  color: var(--color-danger);
}

/* Pipeline (kunde + tilbud). Text = token; fill = 20%. Handbook §11. */
.status-pill[data-variant="new_lead"],
.client-card__status-badge.client-card__status-badge--new_lead {
  background: color-mix(in srgb, var(--status-new-lead) 20%, transparent);
  color: var(--status-new-lead);
}

.status-pill[data-variant="inspection_requested"],
.client-card__status-badge.client-card__status-badge--inspection_requested {
  background: color-mix(in srgb, var(--status-inspection-requested) 20%, transparent);
  color: var(--status-inspection-requested);
}

.status-pill[data-variant="inspection_booked"],
.client-card__status-badge.client-card__status-badge--inspection_booked {
  background: color-mix(in srgb, var(--status-inspection-booked) 20%, transparent);
  color: var(--status-inspection-booked);
}

.status-pill[data-variant="quote_sent"],
.client-card__status-badge.client-card__status-badge--quote_sent,
.quote-card__status-badge.quote-card__status-badge--sent {
  background: color-mix(in srgb, var(--status-quote-sent) 20%, transparent);
  color: var(--status-quote-sent);
}

.status-pill[data-variant="quote_accepted"],
.status-pill[data-variant="accepted"],
.client-card__status-badge.client-card__status-badge--quote_accepted,
.quote-card__status-badge.quote-card__status-badge--accepted {
  background: color-mix(in srgb, var(--status-quote-accepted) 20%, transparent);
  color: var(--status-quote-accepted);
}

.status-pill[data-variant="job_completed"],
.client-card__status-badge.client-card__status-badge--job_completed,
.quote-card__status-badge.quote-card__status-badge--completed {
  background: color-mix(in srgb, var(--status-job-completed) 20%, transparent);
  color: var(--status-job-completed);
}

.status-pill[data-variant="no_reply"],
.client-card__status-badge.client-card__status-badge--no_reply,
.quote-card__status-badge.quote-card__status-badge--draft {
  background: color-mix(in srgb, var(--status-no-reply) 20%, transparent);
  color: var(--status-no-reply);
}

.status-pill[data-variant="not_interested"],
.client-card__status-badge.client-card__status-badge--not_interested {
  background: color-mix(in srgb, var(--status-not-interested) 20%, transparent);
  color: var(--status-not-interested);
}

.status-pill[data-variant="lost"],
.client-card__status-badge.client-card__status-badge--lost {
  background: color-mix(in srgb, var(--status-lost) 20%, transparent);
  color: var(--status-lost);
}

.quote-card__status-badge.quote-card__status-badge--lost {
  background: color-mix(in srgb, var(--status-not-interested) 20%, transparent);
  color: var(--status-not-interested);
}

.quote-card__status-badge.quote-card__status-badge--viewed {
  background: color-mix(in srgb, var(--status-quote-viewed) 20%, transparent);
  color: var(--status-quote-viewed);
}

.quote-card__status-badge.quote-card__status-badge--expired {
  background: color-mix(in srgb, var(--status-inspection-requested) 20%, transparent);
  color: var(--status-inspection-requested);
}

.list-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/*
  ============================================================================
  LARGE ENTITY LISTS — Handbook §9 / §12
  Fasit: pages_v2/clients
  ============================================================================
  .…-panel.glass-card
    .list-header          ← column labels (same --list-columns as rows)
    .list-scroll          ← equal L/R inset + thin surface scrollbar; only scrollport on .list-page
      .list-grid
        .list-entity-card / .client-card / .quote-card …
          .list-entity-card__row   ← CSS grid
          optional __meta below
  Panel sets --list-columns (e.g. on .clients-panel).
  <main> must include .list-page (viewport lock).
  ============================================================================
*/

.list-header,
.clients-list-header,
.quotes-list-header,
.products-list-header,
.projects-list-header,
.templates-list-header,
.team-list-header,
.absence-list-header {
  display: grid;
  grid-template-columns: var(--list-columns);
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-3) calc(var(--list-box-padding-x) + var(--space-4)) 0;
  border-bottom: none;
  background: var(--color-surface);
}

.list-header__cell,
.clients-list-header__cell,
.quotes-list-header__cell,
.products-list-header__cell,
.projects-list-header__cell,
.templates-list-header__cell {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-header__cell--end,
.clients-list-header__cell--status,
.quotes-list-header__cell--status,
.products-list-header__cell--end,
.projects-list-header__cell--status,
.templates-list-header__cell--end {
  text-align: right;
  justify-self: end;
}

.list-grid,
.clients-grid,
.quotes-grid,
.products-grid,
.projects-grid,
.team-grid,
.absence-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: visible;
}

.list-entity-card,
.client-card,
.quote-card:not(.editing),
.product-card:not(.editing),
.project-card,
.team-member-card,
.absence-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-grouped-nested);
  box-shadow: none;
  cursor: pointer;
  position: relative;
  overflow: visible;
  text-decoration: none !important;
  color: inherit !important;
  transition: background var(--transition-fast);
}

/* Open status menu must beat the next row's status trigger (aside z-index: 2)
   and same-level hint-hover lift. */
.list-entity-card:has(.calendar-multi__trigger[aria-expanded="true"]),
.client-card:has(.calendar-multi__trigger[aria-expanded="true"]),
.quote-card:has(.calendar-multi__trigger[aria-expanded="true"]),
.product-card:has(.calendar-multi__trigger[aria-expanded="true"]),
.project-card:has(.calendar-multi__trigger[aria-expanded="true"]) {
  z-index: 20;
}

.list-entity-card:hover,
.client-card:hover,
.quote-card:not(.editing):hover,
.product-card:not(.editing):hover,
.project-card:hover,
.team-member-card:hover,
.absence-card:hover {
  border-color: var(--color-border);
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

html[data-theme="dark"] .list-entity-card:hover,
html[data-theme="dark"] .client-card:hover,
html[data-theme="dark"] .quote-card:not(.editing):hover,
html[data-theme="dark"] .product-card:not(.editing):hover,
html[data-theme="dark"] .project-card:hover,
html[data-theme="dark"] .team-member-card:hover,
html[data-theme="dark"] .absence-card:hover {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
}

.list-entity-card__row,
.client-card__row,
.quote-card__row,
.product-card__row,
.project-card__row,
.template-card__row,
.team-member-card__row,
.absence-card__row {
  display: grid;
  grid-template-columns: var(--list-columns);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.list-entity-card__name,
.client-card__name,
.quote-card__title,
.product-card__name,
.project-card__name,
.template-card__title,
.team-member-card__name,
.absence-card__name {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-entity-card__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.list-entity-card__file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.list-entity-card__thumb {
  display: block;
  width: var(--space-8);
  height: var(--space-8);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  pointer-events: none;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.list-entity-card__cell,
.client-card__cell,
.quote-card__cell,
.product-card__cell,
.project-card__cell,
.template-card__cell,
.team-member-card__cell,
.absence-card__cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.list-entity-card__cell > span,
.client-card__cell > span,
.quote-card__cell > span,
.product-card__cell > span,
.project-card__cell > span,
.template-card__cell > span,
.team-member-card__cell > span,
.absence-card__cell > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-entity-card__cell i,
.client-card__cell i,
.quote-card__cell i,
.product-card__cell i,
.project-card__cell i,
.template-card__cell i,
.team-member-card__cell i,
.absence-card__cell i {
  font-size: 11px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.list-entity-card__cell--empty,
.client-card__cell--empty,
.quote-card__cell--empty,
.product-card__cell--empty,
.project-card__cell--empty,
.team-member-card__cell--empty,
.absence-card__cell--empty {
  color: var(--color-text-tertiary);
}

.list-entity-card__cell--link,
.client-card__cell--link,
.quote-card__cell--link {
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text-secondary);
  background: transparent;
}

.list-entity-card__aside,
.client-card__status-wrapper,
.quote-card__status-wrapper,
.product-card__aside,
.project-card__aside,
.template-card__actions,
.team-member-card__aside,
.absence-card__aside {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  z-index: 2;
  justify-self: end;
}

.list-entity-card__meta,
.client-card__meta,
.quote-card__meta,
.product-card__meta,
.project-card__meta,
.template-card__meta,
.team-member-card__meta,
.absence-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--list-meta-gap);
  min-width: 0;
}

.list-entity-card__meta-item,
.client-card__meta-item,
.quote-card__meta-item,
.product-card__meta-item,
.project-card__meta-item,
.template-card__meta-item,
.team-member-card__meta-item,
.absence-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.list-entity-card__meta-item > span,
.client-card__meta-item > span,
.quote-card__meta-item > span,
.product-card__meta-item > span,
.project-card__meta-item > span,
.template-card__meta-item > span,
.team-member-card__meta-item > span,
.absence-card__meta-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-entity-card__meta-item i,
.client-card__meta-item i,
.quote-card__meta-item i,
.product-card__meta-item i,
.project-card__meta-item i,
.template-card__meta-item i,
.team-member-card__meta-item i,
.absence-card__meta-item i {
  font-size: 11px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* Inset last-comment plate on a nested list card. Contrast from fill, no hairline. */
.list-entity-card__comment {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-grouped-card);
  box-shadow: none;
}

.list-entity-card__comment-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.list-entity-card__comment time {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.list-entity-card__actions,
.quote-card__actions,
.team-member-card__actions,
.absence-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

/*
  Project color bar. 4px pill on the title line, same width as the calendar
  agenda stripe. `--mark` is the stacked-row size (Oversikt, phone lists):
  14px, centered on the title, not down into the meta line.
*/
.project-tone {
  flex: 0 0 4px;
  width: 4px;
  align-self: stretch;
  margin-block: 1px;
  border-radius: 2px;
  background: var(--project-flag-color, var(--color-text-tertiary));
}

.project-tone--mark {
  height: var(--font-size-sm);
  align-self: center;
  margin-block: 0;
}

/*
  NARROW LISTS — Handbook §9 / §12 / §15
  One layout for every entity list when it gets narrow: name first, its info
  after, status and actions trailing. Keyed off the panel's own inline size, so
  a list inside a narrow column (prosjekt-detalj faner, kunde-detalj) collapses
  the same way as the same list does on a phone. Not a viewport breakpoint.
  40rem keeps the column header while rows still read as a table (desktop with
  sidebar / preview ~750px). Compact wrap is for actually narrow panels.
*/
.glass-card:has(> .list-header),
.glass-card:has(> .list-scroll) {
  container: bv-list / inline-size;
}

@container bv-list (max-width: 40rem) {
  .list-header,
  .clients-list-header,
  .quotes-list-header,
  .products-list-header,
  .projects-list-header,
  .templates-list-header,
  .team-list-header,
  .absence-list-header {
    display: none;
  }

  .list-entity-card__row,
  .client-card__row,
  .quote-card__row,
  .product-card__row,
  .product-card__tree-row,
  .project-card__row,
  .template-card__row,
  .project-template-card__row,
  .team-member-card__row,
  .absence-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: var(--space-2) var(--list-meta-gap);
    min-width: 0;
  }

  /* Only direct row children. Nested __name inside __identity is a column
     item: flex-basis 10rem would become HEIGHT and inflate the card. */
  .list-entity-card__row > .list-entity-card__name,
  .list-entity-card__row > .list-entity-card__identity,
  .list-entity-card__row > .list-entity-card__file,
  .client-card__row > .client-card__name,
  .client-card__row > .client-card__identity,
  .quote-card__row > .quote-card__title,
  .product-card__row > .product-card__name,
  .product-card__row > .product-card__identity,
  .product-card__tree-row > .product-card__name,
  .product-card__tree-row > .product-card__identity,
  .project-card__row > .project-card__name,
  .template-card__row > .template-card__title,
  .project-template-card__row > .project-template-card__name,
  .team-member-card__row > .team-member-card__name,
  .absence-card__row > .absence-card__name {
    order: 1;
    flex: 1 1 10rem;
    min-width: 0;
  }

  .list-entity-card__identity > .list-entity-card__name,
  .list-entity-card__file > .list-entity-card__name,
  .client-card__identity > .client-card__name,
  .product-card__identity > .product-card__name {
    flex: none;
    order: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Descendant, not child: some rows wrap cells in a `display: contents` box
     (tilbud: kunde + adresse), and those cells are still row flex items. */
  .list-entity-card__row .list-entity-card__cell,
  .client-card__row .client-card__cell,
  .quote-card__row .quote-card__cell,
  .product-card__row .product-card__cell,
  .product-card__tree-row .product-card__cell,
  .project-card__row .project-card__cell,
  .template-card__row .template-card__cell,
  .project-template-card__row .project-template-card__cell,
  .team-member-card__row .team-member-card__cell,
  .absence-card__row .absence-card__cell {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Trailing, same as the last grid column on a wide list. */
  .list-entity-card__row .list-entity-card__aside,
  .client-card__row .client-card__status-wrapper,
  .quote-card__row .quote-card__status-wrapper,
  .product-card__row .product-card__aside,
  .project-card__row .project-card__aside,
  .template-card__row .template-card__actions,
  .project-template-card__row .project-template-card__actions,
  .team-member-card__row .team-member-card__aside,
  .absence-card__row .absence-card__aside {
    order: 3;
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* No columns left to align, so a lone placeholder dash is only noise. */
  .list-entity-card__cell--empty,
  .client-card__cell--empty,
  .quote-card__cell--empty,
  .product-card__cell--empty,
  .project-card__cell--empty,
  .team-member-card__cell--empty,
  .absence-card__cell--empty {
    display: none;
  }
}

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.list-row:last-child {
  border-bottom: none;
}

.list-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.list-row__title {
  font-weight: 600;
}

.list-row__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.list-row__value {
  font-weight: 600;
  color: var(--color-text);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  transition: background var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium);
}

.filter-chip[data-active="true"] {
  background: var(--color-primary-muted);
  color: var(--color-primary);
  border-color: rgba(116, 28, 71, 0.2);
}

.filter-chip button {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.data-table thead th {
  text-align: left;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  padding: var(--space-3) var(--space-4);
}

.data-table tbody td {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.data-table tbody tr:hover {
  background: rgba(116, 28, 71, 0.04);
}

.data-table__primary {
  font-weight: 600;
  color: var(--color-text);
}

.data-table__meta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

@media (max-width: 900px) {
  .timeline {
    flex-direction: column;
  }
}

/* ========================================
   FILE PREVIEW MODAL (UNIFIED)
   ======================================== */
.file-preview-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--space-5);
  box-sizing: border-box;
}

.file-preview-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  width: min(95vw, 100%);
  max-width: 100%;
  margin: auto;
  max-height: 95vh;
  height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.file-preview-modal.is-image-mode {
  background: #0f0f0f; /* Dark background for images */
}

.file-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: none;
  gap: var(--space-3);
  flex-shrink: 0;
}

.file-preview-modal.is-image-mode .file-preview-header {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: white;
}

.file-preview-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.file-preview-modal.is-image-mode .file-preview-title {
  color: rgba(255, 255, 255, 0.9);
}

.file-preview-close {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--space-1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-medium);
  flex-shrink: 0;
}

.file-preview-close:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.file-preview-modal.is-image-mode .file-preview-close {
  color: rgba(255, 255, 255, 0.7);
}

.file-preview-modal.is-image-mode .file-preview-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.file-preview-content-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-4);
}

.file-preview-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.file-preview-image {
  max-width: 100%;
  max-height: calc(90vh - 200px);
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Document Preview (PDF, Office) */
.file-preview-document {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
  align-self: stretch;
}

.file-preview-pdf-frame,
.file-preview-doc-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  background: white;
  flex: 1;
  display: block;
}

/* object/embed skal fylle hele dokumentområdet */
.file-preview-document object.file-preview-pdf-frame,
.file-preview-pdf-frame embed {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  flex: 1;
}

.file-preview-doc-fallback {
  padding: var(--space-3);
  text-align: center;
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.file-preview-doc-fallback a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Document mode styling */
.file-preview-modal.is-document-mode {
  background: var(--color-surface);
  max-height: 98vh;
  height: 98vh;
}

.file-preview-modal-overlay:has(.file-preview-modal.is-document-mode) {
  padding: var(--space-2);
  align-items: stretch;
}

.file-preview-modal.is-document-mode .file-preview-content-wrapper {
  padding: var(--space-2);
  background: var(--color-surface-muted);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.file-preview-modal.is-document-mode .file-preview-content {
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
}

.file-preview-modal.is-document-mode .file-preview-header,
.file-preview-modal.is-document-mode .file-preview-footer {
  display: none;
}

/* Kontroller for PDF/dokument-modus.
   Den innebygde PDF-/Office-viseren har sin egen verktøylinje på toppen, så vi
   legger våre kontroller (teller, last ned, lukk) i en egen topplinje OVER
   viseren i stedet for som overlegg – ellers overlapper de viserens egne knapper.
   Vises kun i dokument-modus. */
.file-preview-floating-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  /* Matcher den innebygde PDF-viserens mørke verktøylinje (fast farge i både lyst
     og mørkt tema), slik at topplinjen smelter sammen med viseren under. Samme
     prinsipp som bilde-modus i denne komponenten, som også bruker faste mørke verdier. */
  background: #3C3C3C;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  z-index: 1;
}

/* display:flex overstyrer UA [hidden]; tving bort topplinjen utenfor dokument-modus */
.file-preview-floating-actions[hidden] {
  display: none;
}

.file-preview-float-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.file-preview-float-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.file-preview-float-counter {
  margin-right: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.file-preview-modal.is-document-mode .file-preview-content-wrapper {
  padding: 0;
}

.file-preview-modal.is-document-mode .file-preview-document {
  border-radius: 0;
}

/* File Placeholder (Light Mode) */
.file-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  max-width: 500px;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.file-preview-icon {
  font-size: 5rem;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  filter: drop-shadow(0 10px 15px rgba(116, 28, 71, 0.2));
}

.file-preview-name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  word-break: break-word;
}

.file-preview-meta {
  display: flex;
  gap: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
}

.file-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.file-preview-download-btn {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--space-1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-medium);
  flex-shrink: 0;
  text-decoration: none;
}

.file-preview-download-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.file-preview-modal.is-image-mode .file-preview-download-btn {
  color: rgba(255, 255, 255, 0.7);
}

.file-preview-modal.is-image-mode .file-preview-download-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .file-preview-modal {
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
  
  .file-preview-nav {
    width: 36px;
    height: 36px;
  }
}

.file-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-medium);
  z-index: 10001;
  border: none;
  font-size: var(--font-size-lg);
}

.file-preview-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
  box-shadow: none;
}

.file-preview-modal.is-image-mode .file-preview-nav {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.file-preview-modal.is-image-mode .file-preview-nav:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.8);
}

.file-preview-modal.is-file-mode .file-preview-nav:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-primary);
}

.file-preview-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.file-preview-prev {
  left: var(--space-4);
}

.file-preview-next {
  right: var(--space-4);
}

.file-preview-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  z-index: 20;
  height: 70px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  border-top: none;
  transition: opacity 0.3s ease;
}

.file-preview-modal.is-image-mode .file-preview-footer {
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: white;
}

.file-preview-modal.is-file-mode .file-preview-footer {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--color-border);
}

.file-preview-counter {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.file-preview-modal.is-image-mode .file-preview-counter {
  color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   COMPOSER FILE CHIPS (comment attachments)
   Images = square tile, caption inside. Documents (pdf/docx/xlsx) = compact strip.
   Handbook §10. Do not stretch chips to image-row height.
   ======================================== */
.file-preview-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.file-preview-container:empty,
.file-preview-container[hidden] {
  display: none;
}

.file-preview-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-grouped-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.file-preview-item:hover {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-card));
  border-color: var(--color-border);
  transform: none;
  box-shadow: none;
}

html[data-theme="dark"] .file-preview-item:hover {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-card));
}

.file-preview-item > i[class*="fa-"] {
  flex-shrink: 0;
  width: 1em;
  text-align: center;
  font-size: var(--font-size-md);
}

.file-preview-item .fa-file-pdf {
  color: var(--color-danger);
}

.file-preview-item .fa-file-word {
  color: var(--color-info);
}

.file-preview-item .fa-file-excel {
  color: var(--color-positive);
}

.file-preview-item .file-preview-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.file-preview-item .file-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-text);
}

.file-preview-item a.file-name {
  color: inherit;
  text-decoration: none;
}

.file-preview-item a.file-name:hover {
  text-decoration: underline;
}

.file-preview-item .file-size {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.file-preview-remove {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: var(--space-1);
  width: var(--space-6);
  height: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-left: auto;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.file-preview-remove:hover {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.file-preview-item.file-preview-image-item {
  display: block;
  width: 7.5rem;
  max-width: 7.5rem;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.file-preview-item.file-preview-image-item > a {
  display: block;
}

.file-preview-thumbnail {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}

.file-preview-item.file-preview-image-item .file-preview-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  gap: 0;
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-photo-scrim) 72%, transparent),
    color-mix(in srgb, var(--color-photo-scrim) 18%, transparent) 70%,
    transparent
  );
}

.file-preview-item.file-preview-image-item .file-name,
.file-preview-item.file-preview-image-item .file-size {
  color: var(--color-text-inverse);
  max-width: 100%;
}

.file-preview-item.file-preview-image-item .file-size {
  color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);
}

.file-preview-item.file-preview-image-item .file-preview-remove {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  margin-left: 0;
  background: color-mix(in srgb, var(--color-photo-scrim) 56%, transparent);
  color: var(--color-text-inverse);
}

.file-preview-item.file-preview-image-item .file-preview-remove:hover {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.attachment-item .fa-file-pdf {
  color: var(--color-danger);
}

.attachment-item .fa-file-word {
  color: var(--color-info);
}

.attachment-item .fa-file-excel {
  color: var(--color-positive);
}

/* Published comment text: white inset plate on gray .comment-card well (§3 / §10). */
.comment-bubble {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-grouped-card);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  line-height: 1.5;
}

.add-comment-form .comment-editor-container {
  overflow: hidden;
  min-height: var(--comment-composer-closed-min-height);
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
  --btn-secondary-bg: var(--color-btn-secondary);
  --btn-secondary-bg-hover: var(--color-btn-secondary-hover);
}

html[data-theme="dark"] .add-comment-form .comment-editor-container {
  background: var(--color-surface-muted);
}

.add-comment-form:not(.expanded) .comment-editor-container:hover {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

html[data-theme="dark"] .add-comment-form:not(.expanded) .comment-editor-container:hover {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-muted));
}

.add-comment-form:not(.expanded) .ql-container,
.add-comment-form:not(.expanded) .ql-container.ql-snow {
  height: auto !important;
  min-height: 0 !important;
}

.add-comment-form:not(.expanded) .ql-editor {
  min-height: var(--comment-composer-closed-min-height) !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
}

.add-comment-form.expanded .ql-editor {
  min-height: var(--comment-composer-open-min-height) !important;
}

/* Open composer: text plate is inset. Toolbar and footer stay on the well. */
.add-comment-form.expanded [data-composer-band="editor"] .ql-container,
.add-comment-form.expanded [data-composer-band="editor"] .ql-container.ql-snow,
.add-comment-form.expanded [data-composer-band="editor"] .comment-editor {
  box-sizing: border-box;
  height: auto !important;
  padding: 0 var(--space-3);
  border: none !important;
  background: transparent !important;
}

.add-comment-form.expanded [data-composer-band="editor"] .ql-editor {
  background: var(--color-grouped-card);
  border: none;
  border-radius: var(--radius-sm);
  max-height: min(12.5rem, 28vh);
}

.add-comment-form.expanded .ql-toolbar,
.add-comment-form.expanded .ql-toolbar.ql-snow,
.add-comment-form.expanded .form-actions-inline,
.add-comment-form.expanded .comment-composer-footer {
  background: transparent;
  border: none;
}

.add-comment-form .form-actions-inline {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3);
}

.add-comment-form .form-actions-inline label.btn {
  margin-right: auto;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}

/* Close: plate and band go to 0 with toolbar/footer. Text must not floor the height. */
.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] {
  min-height: 0 !important;
  overflow: hidden !important;
}

.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] #new-comment-editor,
.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] .ql-container,
.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] .comment-composer-band {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.add-comment-form [data-composer-band="editor"] .ql-editor,
.add-comment-form [data-composer-band="editor"] .ql-container,
.add-comment-form [data-composer-band="editor"] .comment-composer-band {
  transition:
    height var(--comment-composer-duration) var(--comment-composer-ease),
    max-height var(--comment-composer-duration) var(--comment-composer-ease),
    flex-basis var(--comment-composer-duration) var(--comment-composer-ease),
    padding-top var(--comment-composer-duration) var(--comment-composer-ease),
    padding-bottom var(--comment-composer-duration) var(--comment-composer-ease),
    opacity var(--comment-composer-duration) var(--comment-composer-ease);
}

.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] .ql-editor,
.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] .ql-container,
.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] .comment-composer-band {
  transition-timing-function: var(--comment-composer-ease-close);
}

.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] .ql-editor {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0;
}

.add-comment-form.expanded.is-composer-closing [data-composer-band="editor"] .ql-editor > * {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.add-comment-form .comment-composer-reveal {
  display: grid;
  grid-template-rows: 0fr;
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    grid-template-rows var(--comment-composer-duration) var(--comment-composer-ease),
    height var(--comment-composer-duration) var(--comment-composer-ease),
    flex-basis var(--comment-composer-duration) var(--comment-composer-ease),
    max-height var(--comment-composer-duration) var(--comment-composer-ease);
}

.add-comment-form .comment-composer-reveal[data-composer-band="editor"] {
  grid-template-rows: var(--comment-composer-closed-min-height);
  pointer-events: auto;
}

.add-comment-form.expanded .comment-composer-reveal {
  grid-template-rows: 1fr;
}

.add-comment-form.expanded .comment-composer-reveal[data-composer-band="editor"] {
  grid-template-rows: minmax(var(--comment-composer-open-min-height), 1fr);
}

.add-comment-form.expanded.is-composer-closing .comment-composer-reveal {
  grid-template-rows: 0fr;
  transition-timing-function: var(--comment-composer-ease-close);
}

.add-comment-form.expanded:not(.is-composer-closing) .comment-composer-reveal {
  pointer-events: auto;
}

.add-comment-form .comment-composer-band {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.add-comment-form.expanded:not(.is-composer-closing) .comment-composer-band {
  min-height: min-content;
}

.add-comment-form.is-composer-closing .comment-composer-band {
  min-height: 0;
}

.add-comment-form [data-composer-band="toolbar"] .comment-composer-band {
  justify-content: flex-end;
}

.add-comment-form [data-composer-band="editor"] .comment-composer-band,
.add-comment-form [data-composer-band="footer"] .comment-composer-band {
  justify-content: flex-start;
}

.add-comment-form .comment-composer-footer {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.add-comment-form .comment-composer-reveal .ql-toolbar,
.add-comment-form .comment-composer-footer {
  opacity: 0;
  transition: opacity var(--comment-composer-fade) ease;
}

.add-comment-form.expanded:not(.is-composer-closing) .comment-composer-reveal .ql-toolbar,
.add-comment-form.expanded:not(.is-composer-closing) .comment-composer-footer {
  opacity: 1;
  transition-delay: var(--comment-composer-stagger);
}

.add-comment-form.is-composer-closing .comment-composer-reveal .ql-toolbar,
.add-comment-form.is-composer-closing .comment-composer-footer {
  opacity: 1;
  transition: none;
}

.add-comment-form:not(.expanded) .comment-composer-reveal .ql-toolbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
}

.add-comment-form.is-composer-snap .ql-editor,
.add-comment-form.is-composer-snap .ql-container,
.add-comment-form.is-composer-snap .comment-composer-band,
.add-comment-form.is-composer-snap .comment-composer-reveal,
.add-comment-form.is-composer-snap .comment-composer-reveal > * {
  transition: none !important;
}

.add-comment-form .comment-composer-reveal .file-preview-container {
  margin-top: 0;
}

/* Same inset as the text plate. Applies to new comment and inline edit. */
.add-comment-form .file-preview-container:has(.file-preview-item) {
  padding: var(--space-2) var(--space-3);
}

.add-comment-form .file-preview-container:not(:has(.file-preview-item)) {
  padding: 0;
  border: none;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .add-comment-form .ql-editor,
  .add-comment-form .comment-composer-reveal,
  .add-comment-form .comment-composer-reveal .ql-toolbar,
  .add-comment-form .comment-composer-footer {
    transition: none;
    transform: none;
  }
}

/* ========================================
   TOAST NOTIFICATIONS (Utils.showToast)
   ======================================== */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 380px;
  max-width: 90vw;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  font-family: var(--font-family-base);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  animation: slideIn 0.4s var(--transition-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  cursor: pointer;
  position: relative;
  overflow: visible;
  background: var(--color-surface-raised, rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(var(--blur-soft, 20px));
  -webkit-backdrop-filter: blur(var(--blur-soft, 20px));
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-text);
  min-width: min(300px, 100%);
  min-height: auto;
  transform: translateX(0);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

[data-theme="dark"] .toast {
  background: rgba(28, 28, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text);
}

@keyframes slideIn {
  from {
    transform: translateX(100%) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast.hide {
  opacity: 0;
  transform: translateX(100%) scale(0.95);
}

.toast-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.toast-message {
  color: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: var(--letter-spacing-tight);
}

.toast-close {
  opacity: 0.4;
  cursor: pointer;
  padding: 4px;
  margin-top: 1px;
  transition: opacity 0.2s;
  font-size: 1rem;
}

.toast-close:hover {
  opacity: 1;
}

.toast-action {
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.toast-action:hover {
  text-decoration: underline;
}

[data-theme="dark"] .toast-close {
  color: var(--color-text-secondary);
}

.toast.success .toast-icon { color: var(--color-positive); }
.toast.error .toast-icon { color: var(--color-danger); }
.toast.warning .toast-icon { color: var(--color-warning); }
.toast.info .toast-icon { color: var(--color-info); }

.toast.success,
.toast.error,
.toast.warning,
.toast.info {
  border-left: none;
}

[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .toast-title,
[data-theme="light"] .toast-message {
  color: var(--color-text);
}

html[data-theme="dark"] .toast {
  background: var(--color-surface-raised, rgba(28, 28, 30, 0.95));
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .toast-close {
  color: var(--color-text-secondary);
}

/* ========================================
   CONFIRM MODAL (Utils.showConfirm)
   Handbook §7 — samme chrome som .project-modal (radius-sm, tittel+lukk, veiledning, footer).
   Ikon-sirkel beholdes kun for auth/unntak som fortsatt bruker .confirm-modal-icon.
   ======================================== */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  transition: opacity var(--modal-duration) var(--modal-ease-backdrop);
  /* Opacity 0 still receives hits unless disabled — invisible overlay used to steal all clicks */
  pointer-events: none;
  box-sizing: border-box;
}

.confirm-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.confirm-modal {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  /* width:100% + max-width leaves Safari's flex item full-bleed and stuck to the start. */
  width: min(560px, 100%);
  max-width: 100%;
  margin: auto;
  min-width: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transform: translateY(var(--modal-dialog-offset-y)) scale(var(--modal-dialog-scale-from));
  opacity: 0;
  transition:
    transform var(--modal-duration-dialog) var(--modal-ease-dialog),
    opacity var(--modal-duration) var(--modal-ease-backdrop);
}

:root[data-theme="dark"] .confirm-modal {
  border-color: var(--color-border);
}

.confirm-modal-overlay.show .confirm-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.confirm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--modal-header-padding-top) var(--modal-header-padding-x) var(--modal-header-padding-bottom);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex: 0 0 auto;
  min-width: 0;
}

/* Mobil: ingen lukk-kryss. Kun footer-knappene. Desktop beholder .icon-btn. */
@media (max-width: 768px) {
  .confirm-modal-header .icon-btn {
    display: none;
  }
}

.confirm-modal-body {
  padding: var(--modal-body-padding-top) var(--modal-body-padding-x) var(--modal-body-padding-bottom);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
}

.confirm-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  background: rgba(255, 149, 0, 0.12);
}

.confirm-modal-icon i {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-warning);
}

.confirm-modal-icon.danger {
  background: rgba(255, 59, 48, 0.12);
}

.confirm-modal-icon.danger i {
  color: var(--color-danger);
}

.confirm-modal-icon.warning {
  background: rgba(255, 149, 0, 0.12);
}

.confirm-modal-icon.warning i {
  color: var(--color-warning);
}

.confirm-modal-icon.primary {
  background: var(--color-primary-muted);
  box-shadow: none;
}

.confirm-modal-icon.primary i {
  color: var(--color-primary);
}

.confirm-modal-icon.success {
  background: color-mix(in srgb, var(--color-positive) 14%, transparent);
  box-shadow: none;
}

.confirm-modal-icon.success i {
  color: var(--color-positive);
}

.confirm-modal-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
  text-align: left;
  min-width: 0;
  flex: 1;
}

.confirm-modal-message {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  white-space: pre-line;
  text-align: left;
}

.confirm-modal-extra {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
  text-align: left;
}

.confirm-modal-extra .checkbox-label {
  align-items: flex-start;
}

.confirm-modal-extra .setting-info {
  margin: var(--space-2) 0 0;
}

.confirm-modal-extra .micro-label {
  display: block;
  margin: 0 0 var(--space-2);
}

.confirm-modal-loss {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.confirm-modal-loss li {
  position: relative;
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
}

.confirm-modal-loss li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--color-primary);
}

.confirm-modal-message__intro,
.confirm-modal-message__notify {
  margin: 0;
  text-align: left;
  white-space: pre-line;
}

.confirm-modal-message__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  max-height: min(40vh, 280px);
  overflow-y: auto;
  text-align: left;
}

.confirm-modal-message__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--color-grouped-nested);
}

.confirm-modal-message__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.confirm-modal-message__dates {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.confirm-modal-message__notify {
  color: var(--color-text-tertiary);
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  flex: 0 0 auto;
  min-width: 0;
}

:root[data-theme="dark"] .confirm-modal-actions {
  border-top: 1px solid var(--color-border);
}

/* Sizing/variants: trinn A + .btn-secondary / .btn-primary / .btn-danger / … (§8) */
.confirm-modal-actions .btn {
  flex: 0 1 auto;
}

/* Search container standard — see DESIGN_HANDBOOK.md §10 */
.product-search-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  background: var(--color-grouped-nested);
  height: 40px;
}

.product-search-container:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(116, 28, 71, 0.1);
}

.product-search-container i {
  color: var(--color-text-tertiary);
}

.product-search-input {
  border: none;
  background: transparent;
  font: inherit;
  width: 100%;
  min-width: 100px;
  outline: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.product-search-input::placeholder {
  color: var(--color-text-tertiary);
}

/* ========================================
   TOGGLE SWITCH (handbook §10 — square chrome)
   ======================================== */

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.toggle-switch__track {
  position: relative;
  display: block;
  width: var(--toggle-track-width);
  height: var(--toggle-track-height);
  border-radius: var(--radius-xs);
  background: var(--color-toggle-track-idle);
  transition: background-color var(--transition-medium);
}

.toggle-switch__track::after {
  content: '';
  position: absolute;
  top: var(--toggle-thumb-inset);
  left: var(--toggle-thumb-inset);
  width: var(--toggle-thumb-size);
  height: var(--toggle-thumb-size);
  border-radius: var(--radius-xs);
  background: var(--color-text-inverse);
  box-shadow: 0 1px 2px rgba(28, 28, 30, 0.12);
  transition: transform var(--transition-medium);
}

.toggle-switch input:checked + .toggle-switch__track {
  background: var(--color-primary);
}

.toggle-switch input:checked + .toggle-switch__track::after {
  transform: translateX(var(--toggle-thumb-travel));
}

.toggle-switch input:focus-visible + .toggle-switch__track {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.toggle-switch input:disabled + .toggle-switch__track {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ========================================
   MODAL MOTION (canonical — DESIGN_HANDBOOK_V2 §7 / §16)
   Tokens: --modal-duration*, --modal-ease-*, --modal-dialog-*
   JS: ByggModalMotion.open / .close (shared_v2/js/modal-motion.js)
   ======================================== */

@keyframes bv-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bv-modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes bv-modal-dialog-in {
  from {
    opacity: 0;
    transform: translateY(var(--modal-dialog-offset-y)) scale(var(--modal-dialog-scale-from));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bv-modal-dialog-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(var(--modal-dialog-offset-y)) scale(var(--modal-dialog-scale-from));
  }
}

/* Client-modal centers with translate(-50%, -50%) — keep that in the motion */
@keyframes bv-modal-dialog-in-centered {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--modal-dialog-offset-y))) scale(var(--modal-dialog-scale-from));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes bv-modal-dialog-out-centered {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--modal-dialog-offset-y))) scale(var(--modal-dialog-scale-from));
  }
}

/* --- project-modal (shell + motion) — Handbook §7 --- */
.project-modal[hidden] {
  display: none !important;
}

.project-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow: hidden;
  overscroll-behavior: none;
  box-sizing: border-box;
}

/*
 * Safari ignores align-items/justify-content center on a flex overlay
 * (overflow not visible, or inset without a definite height) and parks the
 * dialog at the top or the start edge. Auto margins center on both axes
 * and collapse safely when the dialog is taller than the viewport.
 */
.project-modal > :not(.project-modal__backdrop) {
  margin: auto;
}

/*
 * Page-scroll lock behind full-screen popups (Handbook §7).
 * Keep :is() in sync with ByggModalMotion MODAL_SELECTOR (+ marketing .bv-lead-modal).
 * Locks html/body AND .app-main (dashboard / Hjem / prosjekt-detalj scroller there).
 * Use overflow: clip (not hidden) on the root so html/body do not become the
 * sticky containing block — otherwise the rail jumps to document top (Handbook §7).
 * !important beats marketing `html.bv-app-site { overflow-y: auto !important }`.
 */
html:has(:is(
  .project-modal:not([hidden]),
  .client-modal.is-open,
  .client-modal.is-closing,
  .import-modal.is-open,
  .import-modal.is-closing,
  .confirm-modal-overlay.show,
  .confirm-modal-overlay.is-closing,
  .change-log-modal-overlay.is-open,
  .change-log-modal-overlay.is-closing,
  .file-preview-modal-overlay.is-open,
  .file-preview-modal-overlay.is-closing,
  .site-visits-modal-overlay.is-open,
  .site-visits-modal-overlay.is-closing,
  .password-modal.show,
  .data-deletion-modal.show,
  .ccp-modal-overlay.show,
  .invite-user-modal.is-open,
  .block-user-modal.is-open,
  .bv-lead-modal:not([hidden])
)),
html.bv-modal-scroll-lock,
html.client-modal-open,
html.billing-scroll-lock {
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none;
}

html:has(:is(
  .project-modal:not([hidden]),
  .client-modal.is-open,
  .client-modal.is-closing,
  .import-modal.is-open,
  .import-modal.is-closing,
  .confirm-modal-overlay.show,
  .confirm-modal-overlay.is-closing,
  .change-log-modal-overlay.is-open,
  .change-log-modal-overlay.is-closing,
  .file-preview-modal-overlay.is-open,
  .file-preview-modal-overlay.is-closing,
  .site-visits-modal-overlay.is-open,
  .site-visits-modal-overlay.is-closing,
  .password-modal.show,
  .data-deletion-modal.show,
  .ccp-modal-overlay.show,
  .invite-user-modal.is-open,
  .block-user-modal.is-open,
  .bv-lead-modal:not([hidden])
)) :is(body, .app-main),
html.bv-modal-scroll-lock :is(body, .app-main),
html.client-modal-open body,
html.billing-scroll-lock body {
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none;
}

html:has(:is(
  .project-modal:not([hidden]),
  .client-modal.is-open,
  .client-modal.is-closing,
  .import-modal.is-open,
  .import-modal.is-closing,
  .confirm-modal-overlay.show,
  .confirm-modal-overlay.is-closing,
  .change-log-modal-overlay.is-open,
  .change-log-modal-overlay.is-closing,
  .file-preview-modal-overlay.is-open,
  .file-preview-modal-overlay.is-closing,
  .site-visits-modal-overlay.is-open,
  .site-visits-modal-overlay.is-closing,
  .password-modal.show,
  .data-deletion-modal.show,
  .ccp-modal-overlay.show,
  .invite-user-modal.is-open,
  .block-user-modal.is-open,
  .bv-lead-modal:not([hidden])
)) .app-shell:has(.list-page),
html.bv-modal-scroll-lock .app-shell:has(.list-page),
html[data-calendar-view-pref="week"].bv-modal-scroll-lock .app-shell {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/*
 * Window-scrolling pages (project-detail, settings, dashboard, …): do not set
 * overflow:hidden on .app-shell. That creates a scrollport, so the sticky rail
 * (top: 0; height: 100vh) jumps to the document top (Handbook §7). List pages
 * already size the shell to the viewport — those stay locked above.
 * Keep idle overflow-x: clip from base.css (clip is not a scrollport).
 */
html.bv-modal-scroll-lock:not([data-calendar-view-pref="week"]) .app-shell:not(:has(.list-page)),
html:not([data-calendar-view-pref="week"]):has(.project-modal:not([hidden])) .app-shell:not(:has(.list-page)),
html:not([data-calendar-view-pref="week"]):has(.file-preview-modal-overlay.is-open) .app-shell:not(:has(.list-page)),
html:not([data-calendar-view-pref="week"]):has(.file-preview-modal-overlay.is-closing) .app-shell:not(:has(.list-page)) {
  /* Only clip X. `overflow: visible` + `overflow-x: clip` computes Y to auto
     and creates a page scrollbar (Handbook §7). */
  overflow-x: clip !important;
}

/* Full-screen dialogs cover the app (Handbook §7). Collapsed rail must not
   expand/collapse on hover underneath the overlay. */
html:has(.project-modal:not([hidden])) .app-sidebar,
html:has(.client-modal.is-open) .app-sidebar,
html:has(.import-modal.is-open:not([hidden])) .app-sidebar,
html:has(.confirm-modal-overlay.show) .app-sidebar,
html:has(.file-preview-modal-overlay.is-open) .app-sidebar,
html:has(.file-preview-modal-overlay.is-closing) .app-sidebar,
html.bv-modal-scroll-lock .app-sidebar {
  pointer-events: none;
}

.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  overscroll-behavior: none;
  touch-action: none;
}

/* Full-width mobile sheet shell (native + web bottom-sheet). In-page dialogs stay --radius-sm. Handbook §6 / §22. */
.bv-sheet {
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  max-height: calc(100dvh * var(--native-sheet-max-fraction));
}

.project-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-width: 100%;
  min-width: 0;
  max-height: 90vh;
  overflow: visible;
  padding: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  box-sizing: border-box;
}

.project-modal__dialog--wide {
  width: min(920px, 96vw);
  max-width: 100%;
}

.project-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--modal-header-padding-top) var(--modal-header-padding-x) var(--modal-header-padding-bottom);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: visible;
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.project-modal__header:has(.hint-wrap:hover),
.project-modal__header:has(.hint-wrap:focus-visible),
.project-modal__header:has(.hint-wrap:has(:focus-visible)) {
  z-index: 40;
}

.project-modal__header h2 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
}

.project-modal__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.project-modal__header:has(.project-modal__heading) {
  align-items: flex-start;
}

.project-modal__heading .project-modal__lead {
  margin: 0;
}

.project-modal__body {
  padding: var(--modal-body-padding-top) var(--modal-body-padding-x) var(--modal-body-padding-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  overflow-x: clip;
  overflow-y: auto;
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 0;
}

.project-modal__lead {
  margin: 0 0 var(--section-header-gap);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

/* Lead → veiledning / skjema inni samme steg (§5 section-header-gap, §7 hierarki) */
.project-modal__stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-header-gap);
}

.project-modal__stack > .project-modal__lead {
  margin-bottom: 0;
}

.project-modal .project-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.project-modal .project-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
}

.project-modal .project-form .form-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}

.project-modal .project-form .setting-info {
  margin: 0;
}

.add-company-invite-list {
  display: flex;
  flex-direction: column;
}

.add-company-invite-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.add-company-invite-row:first-child {
  padding-top: 0;
}

.add-company-invite-row:last-child {
  border-bottom: none;
}

.add-company-invite-row__fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.add-company-form-row,
.add-company-invite-row__pair,
.project-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.project-form__row--auto {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.project-form__row--auto > .form-group:last-child {
  width: max-content;
  max-width: 100%;
}

.project-form__row--auto .date-picker-field {
  width: auto;
}

.project-form__row--auto .date-picker-trigger {
  width: auto;
  min-width: 100%;
}

@media (max-width: 640px) {
  .project-form__row,
  .add-company-form-row,
  .add-company-invite-row__pair {
    grid-template-columns: 1fr;
  }

  .project-form__row--auto > .form-group:last-child {
    width: auto;
  }

  .project-form__row--auto .date-picker-field,
  .project-form__row--auto .date-picker-trigger {
    width: 100%;
  }
}

.add-company-invite-row > .icon-btn {
  flex-shrink: 0;
  margin-top: calc(1em + var(--space-2));
}

.project-modal .project-form [data-add-company="add-row"] {
  align-self: flex-start;
}

.add-company-invite-sent-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.add-company-invite-sent {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-grouped-nested);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.add-company-invite-sent li {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.add-company-invite-sent li:last-child {
  border-bottom: none;
}

#add-company-modal .project-modal__dialog {
  max-height: 90vh;
}

#add-company-modal:has([data-add-company-step="invite"]:not([hidden])) .project-modal__dialog {
  overflow: hidden;
}

#add-company-modal:has([data-add-company-step="invite"]:not([hidden])) .project-modal__body {
  overflow: auto;
  min-height: 0;
}

#add-company-modal:has([data-add-company-step="create"]:not([hidden])) .project-modal__dialog,
#add-company-modal:has([data-add-company-step="create"]:not([hidden])) .project-modal__body,
#add-company-modal:has(.add-company-suggestions:not([hidden])) .project-modal__dialog,
#add-company-modal:has(.add-company-suggestions:not([hidden])) .project-modal__body,
#add-company-modal:has([data-single-select-panel]:not([hidden])) .project-modal__dialog,
#add-company-modal:has([data-single-select-panel]:not([hidden])) .project-modal__body {
  overflow: visible;
}

#add-company-modal:has(.add-company-suggestions:not([hidden])) .project-modal__body,
#add-company-modal:has([data-single-select-panel]:not([hidden])) .project-modal__body {
  z-index: 3;
}

/* Six job roles fit without scroll; visible overflow lets option hints paint (§8). */
#add-company-modal .calendar-multi__panel {
  overflow: visible;
}

.add-company-combobox,
.add-company-combobox__field {
  position: relative;
}

.add-company-combobox.is-open,
.add-company-combobox:has(.add-company-suggestions:not([hidden])) {
  z-index: 40;
}

.add-company-suggestions .calendar-multi__option--single {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.add-company-suggestion__name {
  font-weight: 600;
  line-height: 1.3;
}

.add-company-suggestion__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  line-height: 1.3;
}

/* display:flex on body/footer overrides UA [hidden] */
.project-modal [hidden] {
  display: none !important;
}

.project-modal .project-form:has(> .project-modal__body) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  max-height: 90vh;
}

.project-modal .project-form__actions,
.project-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex: 0 0 auto;
  min-width: 0;
}

.project-modal .project-form__actions--split {
  justify-content: space-between;
}

.project-form__actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.project-form__actions-group--start {
  margin-left: 0;
}

.project-form__actions-group--start:not(:has(> :not([hidden]))) {
  display: none;
}

/* Nowrap-knapper skal brekke linje, ikke utvide dialogen forbi viewport.
   Page-header-regelen over låser max-height til én linje — løft den her. */
.project-modal .project-form__actions .btn,
.project-modal__footer .btn {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  height: auto;
  min-height: var(--page-header-control-height);
  max-height: none;
}

.project-modal:not([hidden]):not(.is-closing) .project-modal__backdrop {
  animation: bv-modal-backdrop-in var(--modal-duration) var(--modal-ease-backdrop) both;
}

.project-modal:not([hidden]):not(.is-closing) .project-modal__dialog {
  animation: bv-modal-dialog-in var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

.project-modal.is-closing .project-modal__backdrop {
  animation: bv-modal-backdrop-out var(--modal-duration) var(--modal-ease-backdrop) both;
}

.project-modal.is-closing .project-modal__dialog {
  animation: bv-modal-dialog-out var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

/* Full-width bottom sheet on mobile (Handbook §6 / §7 / §15). */
@media (max-width: 768px) {
  .project-modal:not(.billing-checkout-modal):not(.billing-paywall) {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .project-modal:not(.billing-checkout-modal):not(.billing-paywall) > :not(.project-modal__backdrop) {
    margin: 0;
    margin-top: auto;
  }

  .project-modal:not(.billing-checkout-modal):not(.billing-paywall) .project-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(calc(100dvh * var(--native-sheet-max-fraction)), 100%);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .project-modal:not(.billing-checkout-modal):not(.billing-paywall) .project-form__actions,
  .project-modal:not(.billing-checkout-modal):not(.billing-paywall) .project-modal__footer {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
  }

  .project-modal:not(.billing-checkout-modal):not(.billing-paywall) .project-form__actions .btn,
  .project-modal:not(.billing-checkout-modal):not(.billing-paywall) .project-modal__footer .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Phone popup footers: full-width stack. Same order as the row, top to bottom
   (destructive, secondary, primary last). Wide screens keep one right-aligned row. §7 */
@media (max-width: 768px) {
  .confirm-modal-actions,
  .client-modal-footer,
  .project-modal .project-form__actions,
  .project-modal__footer,
  .project-form__actions--split,
  .project-form__actions-group,
  .project-form__actions-group--start,
  .import-modal__footer,
  .invite-user-modal-footer,
  .site-visit-detail-modal__footer,
  .password-modal-footer,
  .data-deletion-modal-footer,
  .gdpr-modal-footer,
  .email-change-modal-actions,
  .calendar-event-modal__footer,
  .block-user-modal-footer,
  .task-template-editor__footer {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .project-form__actions-group,
  .project-form__actions-group--start {
    width: 100%;
    margin-left: 0;
  }

  .confirm-modal-actions .btn,
  .client-modal-footer .btn,
  .project-modal .project-form__actions .btn,
  .project-modal__footer .btn,
  .project-form__actions--split .btn,
  .project-form__actions-group .btn,
  .import-modal__footer .btn,
  .invite-user-modal-footer .btn,
  .site-visit-detail-modal__footer .btn,
  .password-modal-footer .btn,
  .data-deletion-modal-footer .btn,
  .gdpr-modal-footer .btn,
  .email-change-modal-actions .btn,
  .calendar-event-modal__footer .btn,
  .block-user-modal-footer .btn,
  .task-template-editor__footer .btn {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    justify-content: center;
  }

  .client-modal-footer__spacer,
  .project-form__actions .client-modal-footer__spacer {
    display: none;
  }

  .import-modal__footer [data-action="back-step"] {
    margin-right: 0;
  }
}

/* --- client-modal (.client-modal) --- */
.client-modal:not([hidden]):not(.is-closing) .client-modal-overlay,
.client-modal[style*="display: flex"]:not(.is-closing) .client-modal-overlay,
.client-modal[style*="display:flex"]:not(.is-closing) .client-modal-overlay {
  animation: bv-modal-backdrop-in var(--modal-duration) var(--modal-ease-backdrop) both;
}

/* Flex-centered (margin: auto). *-centered keyframes assume top/left 50% and
   shove the dialog toward the top-left in Safari. */
.client-modal:not([hidden]):not(.is-closing) .client-modal-content,
.client-modal[style*="display: flex"]:not(.is-closing) .client-modal-content,
.client-modal[style*="display:flex"]:not(.is-closing) .client-modal-content {
  animation: bv-modal-dialog-in var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

.client-modal.is-closing .client-modal-overlay {
  animation: bv-modal-backdrop-out var(--modal-duration) var(--modal-ease-backdrop) both;
}

.client-modal.is-closing .client-modal-content {
  animation: bv-modal-dialog-out var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

/* Absence request (hours + team). Same Safari-safe flex center as .client-modal.
   Team page adds form chrome on top; hours only loads this shell. */
.invite-user-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 2000;
}

.invite-user-modal-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
  pointer-events: none;
}

.invite-user-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 0;
}

.invite-user-modal-content {
  pointer-events: auto;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: none;
  width: min(600px, 90%);
  max-width: 600px;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
}

.invite-user-modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--modal-header-padding-top) var(--modal-header-padding-x) var(--modal-header-padding-bottom);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.invite-user-modal-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
}

.invite-user-modal-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.invite-user-modal-body {
  padding: var(--modal-body-padding-top) var(--modal-body-padding-x) var(--modal-body-padding-bottom);
  overflow-y: auto;
  flex: 1;
}

.invite-user-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* --- import-modal --- */
.import-modal.is-open:not(.is-closing) .import-modal__overlay {
  animation: bv-modal-backdrop-in var(--modal-duration) var(--modal-ease-backdrop) both;
}

.import-modal.is-open:not(.is-closing) .import-modal__content {
  animation: bv-modal-dialog-in var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

.import-modal.is-closing .import-modal__overlay {
  animation: bv-modal-backdrop-out var(--modal-duration) var(--modal-ease-backdrop) both;
}

.import-modal.is-closing .import-modal__content {
  animation: bv-modal-dialog-out var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

/* --- change-log / site-visits overlays (flex-centered dialog) --- */
.change-log-modal-overlay:not([hidden]):not(.is-closing)[style*="display: flex"] .change-log-modal-dialog,
.change-log-modal-overlay:not([hidden]):not(.is-closing)[style*="display:flex"] .change-log-modal-dialog,
.site-visits-modal-overlay:not([hidden]):not(.is-closing)[style*="display: flex"] .site-visits-modal-dialog,
.site-visits-modal-overlay:not([hidden]):not(.is-closing)[style*="display:flex"] .site-visits-modal-dialog {
  animation: bv-modal-dialog-in var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

.change-log-modal-overlay:not([hidden]):not(.is-closing)[style*="display: flex"],
.change-log-modal-overlay:not([hidden]):not(.is-closing)[style*="display:flex"],
.site-visits-modal-overlay:not([hidden]):not(.is-closing)[style*="display: flex"],
.site-visits-modal-overlay:not([hidden]):not(.is-closing)[style*="display:flex"] {
  animation: bv-modal-backdrop-in var(--modal-duration) var(--modal-ease-backdrop) both;
}

.change-log-modal-overlay.is-closing,
.site-visits-modal-overlay.is-closing {
  animation: bv-modal-backdrop-out var(--modal-duration) var(--modal-ease-backdrop) both;
}

.change-log-modal-overlay.is-closing .change-log-modal-dialog,
.site-visits-modal-overlay.is-closing .site-visits-modal-dialog {
  animation: bv-modal-dialog-out var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

/* --- file preview --- */
.file-preview-modal-overlay:not([hidden]):not(.is-closing) .file-preview-modal {
  animation: bv-modal-dialog-in var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

.file-preview-modal-overlay:not([hidden]):not(.is-closing) {
  animation: bv-modal-backdrop-in var(--modal-duration) var(--modal-ease-backdrop) both;
}

.file-preview-modal-overlay.is-closing {
  animation: bv-modal-backdrop-out var(--modal-duration) var(--modal-ease-backdrop) both;
}

.file-preview-modal-overlay.is-closing .file-preview-modal {
  animation: bv-modal-dialog-out var(--modal-duration-dialog) var(--modal-ease-dialog) both;
}

/* —— Loading skeleton / shimmer (§14) —— */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--color-grouped-nested);
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: shimmer 1.6s infinite;
  pointer-events: none;
}

html[data-theme="dark"] .shimmer::after {
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
}

/* Skeleton stacks — liste-/kortlasting (§14) */
.bv-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bv-skeleton-stack[hidden] {
  display: none !important;
}

.bv-skeleton-row {
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-grouped-nested);
  pointer-events: none;
}

.bv-skeleton-row--sm {
  height: 32px;
}

.bv-skeleton-row--lg {
  height: 72px;
}

/* Hub-toolbar chips — same outer height as idle tabs/actions (§9 / §14) */
.bv-skeleton-chip {
  display: block;
  flex: 0 0 auto;
  width: 5rem;
  height: var(--page-header-control-height);
  min-height: var(--page-header-control-height);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.project-hub-toolbar > .segmented-control > .bv-skeleton-chip {
  height: var(--segmented-segment-min-height);
  min-height: var(--segmented-segment-min-height);
  align-self: center;
}

/* Page-level skeleton wrapper (client-detail, project-detail, settings) */
.skeleton-screen {
  padding-bottom: var(--space-10);
}

.skeleton-screen .project-hub-toolbar,
.skeleton-screen .quote-hub-toolbar {
  pointer-events: none;
}

/* Keep actions on the same row as wrapping tab chips (idle uses JS hug). */
@media (min-width: 721px) {
  .skeleton-screen .project-hub-toolbar {
    flex-wrap: nowrap;
  }

  .skeleton-screen .project-hub-toolbar > .segmented-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

.skeleton-screen .quote-card,
.skeleton-screen .client-project-row {
  pointer-events: none;
  cursor: default;
}

/* —— Pulse chart / funnel (§16) ——
   Fasit: dashboard Oversikt. Horisontal bølge-funnel i nested well; 3D-trakt/pyramid brukes ikke. */
.pulse-chart-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.pulse-chart-compact .pulse-chart-legend {
  justify-content: flex-start;
  flex: 0 0 auto;
}

.pulse-chart-compact .pulse-chart {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-grouped-nested);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  position: relative;
}

html[data-theme="dark"] .pulse-chart-compact .pulse-chart {
  background: var(--color-grouped-nested);
}

.pulse-chart {
  padding: 0;
  min-height: 0;
}

.pulse-chart-compact .pulse-chart svg,
.pulse-chart__plot svg,
.pulse-chart svg {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  color: var(--color-text-tertiary);
}

.pulse-chart__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.pulse-chart__grid {
  stroke: currentColor;
  stroke-opacity: 0.12;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pulse-chart__baseline {
  stroke: currentColor;
  stroke-opacity: 0.18;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pulse-chart__axis-label {
  fill: currentColor;
  font-size: 10px;
  opacity: 0.7;
}

.pulse-chart__hover {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.pulse-chart__hover.is-active {
  opacity: 1;
}

.pulse-chart__hover-line {
  stroke: color-mix(in srgb, var(--color-text) 22%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.pulse-chart__hover-dots {
  pointer-events: none;
}

.pulse-chart__tooltip {
  position: absolute;
  z-index: 2;
  min-width: 132px;
  max-width: 220px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  pointer-events: none;
  font-size: var(--font-size-xs);
}

.pulse-chart__tooltip-date {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1);
}

.pulse-chart__tooltip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
}

.pulse-chart__tooltip-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.pulse-chart__tooltip-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pulse-chart__tooltip-value {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.pulse-chart__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
}

.pulse-line,
.pulse-bars,
.pulse-mix {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
}

.pulse-line__plot,
.pulse-bars__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 132px;
  width: 100%;
  overflow: visible;
}

.pulse-line__edge {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pulse-line__area {
  pointer-events: none;
}

.pulse-chart__hover-dot {
  stroke: var(--color-surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.pulse-bars__bar {
  transition: opacity var(--transition-fast);
}

.pulse-bars__bar.is-muted {
  opacity: 0.35;
}

.pulse-line__labels,
.pulse-bars__labels {
  display: grid;
  grid-template-columns: repeat(var(--pulse-cols, 1), minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-1);
}

.pulse-line__label,
.pulse-bars__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-align: center;
  line-height: 1.25;
  padding: 0 2px;
  overflow-wrap: anywhere;
}

.pulse-mix {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.pulse-mix__track {
  position: relative;
  display: flex;
  gap: 2px;
  height: 28px;
  overflow: visible;
  border-radius: var(--radius-xs);
  background: var(--color-border);
}

.pulse-mix__seg {
  min-width: 0;
  height: 100%;
  background: var(--mix-color, var(--color-primary));
  transition: opacity var(--transition-fast);
}

.pulse-mix__seg:first-child {
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.pulse-mix__seg:last-child {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.pulse-mix__seg:only-child {
  border-radius: var(--radius-xs);
}

.pulse-mix.is-hovering .pulse-mix__seg.is-muted,
.pulse-mix.is-hovering .pulse-mix__legend-item.is-muted {
  opacity: 0.35;
}

.pulse-mix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.pulse-mix__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.pulse-mix__legend-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.pulse-mix__legend-item strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.pulse-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
}

.pulse-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

button.pulse-chart-legend__item {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.pulse-chart-legend__item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-sizing: border-box;
}

button.pulse-chart-legend__item[aria-pressed="false"] {
  opacity: 0.42;
}

button.pulse-chart-legend__item[aria-pressed="false"]::before {
  background: transparent;
  border: 1.5px solid currentColor;
}

.pulse-chart-legend__item--leads { color: var(--color-primary); }
.pulse-chart-legend__item--sent { color: var(--color-secondary); }
.pulse-chart-legend__item--signed { color: var(--color-info); }
.pulse-chart-legend__item--projects { color: var(--color-warning); }
.pulse-chart-legend__item--completed { color: var(--color-positive); }

.pulse-funnel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 0;
  container: bv-funnel / inline-size;
}

.pulse-funnel--wave {
  gap: 0;
}

.pulse-funnel__slices,
.pulse-funnel__flows,
.pulse-funnel__cols {
  display: grid;
  grid-template-columns: repeat(var(--funnel-cols, 5), minmax(0, 1fr));
  gap: 0;
  min-width: 0;
}

.pulse-funnel__plot {
  position: relative;
  z-index: 1;
  height: 132px;
  min-height: 132px;
  isolation: isolate;
  overflow: visible;
  cursor: pointer;
}

.pulse-funnel__guides,
.pulse-funnel__wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pulse-funnel__wave {
  transition: opacity var(--transition-fast);
}

.pulse-funnel__guides svg,
.pulse-funnel__wave svg,
.pulse-funnel__joins svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pulse-funnel__joins {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.pulse-funnel__join {
  pointer-events: none;
}

.pulse-funnel__hover {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
}

.pulse-funnel__slices {
  position: relative;
  z-index: 1;
  height: 100%;
  align-items: stretch;
}

.pulse-funnel__slice {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.pulse-chart-compact .pulse-chart .pulse-funnel__slice svg,
.pulse-funnel__slice svg,
.pulse-funnel__accent {
  display: block;
  width: 100%;
  height: 100%;
  flex: none;
  min-height: 0;
  overflow: hidden;
}

.pulse-funnel__accent {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.pulse-funnel__accent .pulse-funnel__area {
  fill: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.pulse-funnel__edge {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pulse-funnel__grid {
  stroke: color-mix(in srgb, var(--color-text) 12%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.pulse-funnel__baseline {
  stroke: currentColor;
  stroke-opacity: 0.22;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pulse-funnel__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--color-text) 24%, transparent);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.pulse-funnel__point {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 2px solid var(--color-grouped-nested);
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pulse-funnel__tooltip {
  top: 0;
  left: 0;
  z-index: 7;
  pointer-events: none;
}

.pulse-funnel__tooltip .pulse-chart__tooltip-swatch {
  background: var(--color-primary);
}

/* Hover/filter: bølgen blir; aktiv kategori får 10 % primary-fyll oppå. */
.pulse-funnel--wave.is-filtered:not(.is-hovering) .pulse-funnel__slice.is-selected .pulse-funnel__accent,
.pulse-funnel--wave.is-hovering .pulse-funnel__slice.is-active .pulse-funnel__accent {
  opacity: 1;
}

.pulse-funnel__flows {
  margin-top: var(--space-1);
  pointer-events: none;
}

.pulse-funnel__flow {
  grid-row: 1;
  justify-self: end;
  transform: translateX(50%);
  font-size: var(--font-size-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.pulse-funnel__cols {
  margin-top: var(--space-2);
  gap: var(--space-1);
}

.pulse-funnel__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  text-align: center;
  width: 100%;
  min-width: 0;
  cursor: pointer;
  transition: background var(--transition-medium), color var(--transition-medium);
}

@media (hover: hover) {
  .pulse-funnel__col:hover:not([aria-pressed="true"]) {
    background: var(--color-surface);
    color: var(--color-text);
  }
}

.pulse-funnel__col[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: none;
}

.pulse-funnel__col:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.pulse-funnel__value {
  font-size: var(--font-size-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--color-text);
}

.pulse-funnel__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  line-height: 1.3;
  overflow-wrap: break-word;
  max-width: 100%;
}

.pulse-funnel__col[aria-pressed="true"] .pulse-funnel__value,
.pulse-funnel__col[aria-pressed="true"] .pulse-funnel__label {
  color: var(--color-text-inverse);
}

.pulse-funnel__meta {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@container bv-funnel (max-width: 40rem) {
  .pulse-funnel__plot,
  .pulse-funnel__flows {
    display: none;
  }

  .pulse-funnel__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    margin-top: 0;
  }

  .pulse-funnel__col {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(2rem, 1fr) 2.5rem 3.5rem;
    align-items: center;
    gap: var(--space-2);
    min-height: 34px;
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }

  .pulse-funnel__col::before {
    content: '';
    order: 2;
    height: 6px;
    border-radius: var(--radius-xs);
    background: linear-gradient(
      to right,
      var(--step-color, var(--color-primary)) 0 var(--step-fill, 0%),
      color-mix(in srgb, var(--color-text) 8%, transparent) var(--step-fill, 0%) 100%
    );
  }

  .pulse-funnel__col::after {
    content: attr(data-flow);
    order: 4;
    font-size: var(--font-size-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
    text-align: right;
  }

  .pulse-funnel__label {
    order: 1;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .pulse-funnel__value {
    order: 3;
    text-align: right;
  }
}

/* ========================================
   TASK COMPLETE MOTION (ByggTaskComplete, §12)
   Check draws, row exhales, queue rows collapse. No particles.
   ======================================== */
.attention-row-shell.is-completing,
.next-contact-item.is-completing {
  overflow: hidden;
  pointer-events: none;
  min-height: 0;
  transform: none;
  box-shadow: none;
  animation: task-complete-collapse var(--task-complete-collapse) var(--task-complete-collapse-delay) ease both;
}

.is-completing--stay {
  overflow: visible;
  pointer-events: none;
  animation: none;
}

.attention-row-shell.is-completing .attention-row-frame,
.next-contact-item.is-completing,
.project-checklist-item.is-completing {
  background: color-mix(in srgb, var(--color-positive) 20%, var(--color-grouped-nested));
  border-color: color-mix(in srgb, var(--color-positive) 26%, var(--color-border));
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.project-task-row.is-completing,
.project-task-row.is-completing .project-task-cell {
  background: color-mix(in srgb, var(--color-positive) 20%, var(--project-task-row-bg, var(--color-grouped-nested)));
  transition: background var(--transition-fast);
}

html[data-theme="dark"] .attention-row-shell.is-completing .attention-row-frame,
html[data-theme="dark"] .next-contact-item.is-completing,
html[data-theme="dark"] .project-checklist-item.is-completing {
  background: color-mix(in srgb, var(--color-positive) 24%, var(--color-surface-muted));
}

html[data-theme="dark"] .project-task-row.is-completing,
html[data-theme="dark"] .project-task-row.is-completing .project-task-cell {
  background: color-mix(in srgb, var(--color-positive) 24%, var(--project-task-row-bg, var(--color-surface-muted)));
}

.attention-row-shell.is-completing .attention-row__title,
.attention-row-shell.is-completing .attention-row__meta-text,
.next-contact-item.is-completing .next-contact-item__date,
.next-contact-item.is-completing .next-contact-item__meta,
.project-task-row.is-completing .project-task-title,
.project-checklist-item.is-completing .project-checklist-item__label {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-text-tertiary) 70%, transparent);
  transition: color var(--transition-fast);
}

.attention-row-shell.is-completing .attention-row__actions > :not(.task-complete-check) {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn.task-complete-check,
.btn.task-complete-check:hover,
.btn.task-complete-check:active {
  width: var(--page-header-control-height);
  min-width: var(--page-header-control-height);
  padding: 0;
  background: color-mix(in srgb, var(--color-positive) 16%, var(--color-grouped-nested));
  color: var(--color-positive);
  border: 1px solid color-mix(in srgb, var(--color-positive) 36%, var(--color-border));
}

.icon-btn.task-complete-check,
.icon-btn.task-complete-check:hover,
.icon-btn.task-complete-check:focus-visible {
  color: var(--color-text-inverse);
  background: var(--color-positive);
  border-color: var(--color-positive);
}

.attention-row__time.task-complete-check {
  color: var(--color-positive);
}

.task-complete-mark {
  display: block;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  overflow: visible;
}

.task-complete-mark__fill {
  fill: var(--color-positive);
  transform-origin: center;
  transform-box: fill-box;
  animation: task-complete-fill var(--task-complete-pop) var(--transition-spring) both;
}

.task-complete-mark__check {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: task-complete-draw 240ms 70ms ease-out forwards;
}

.task-complete-mark--badge .task-complete-mark__check {
  stroke: var(--color-text-inverse);
}

.icon-btn.task-complete-check .task-complete-mark__check {
  stroke: var(--color-text-inverse);
}

.project-entity-check.task-complete-check:checked {
  background: var(--color-positive);
  animation: task-complete-box-pop var(--task-complete-pop) var(--transition-spring) both;
}

.project-entity-check.task-complete-check:checked::before {
  background-color: var(--color-text-inverse);
  transition: transform var(--task-complete-pop) var(--transition-spring);
}

@keyframes task-complete-fill {
  0% { transform: scale(0.55); opacity: 0.4; }
  58% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes task-complete-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes task-complete-box-pop {
  0% { transform: scale(0.86); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes task-complete-collapse {
  from {
    height: var(--task-complete-from-height);
    opacity: 1;
    margin-bottom: 0;
  }
  to {
    height: 0;
    opacity: 0;
    margin-bottom: calc(-1 * var(--space-2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .attention-row-shell.is-completing,
  .next-contact-item.is-completing {
    animation: none;
  }

  .task-complete-mark__fill,
  .task-complete-mark__check,
  .project-entity-check.task-complete-check:checked {
    animation: none;
  }

  .task-complete-mark__check {
    stroke-dashoffset: 0;
  }
}

/* Spreadsheet chrome — CSV import (handbook §12). Lead uses .import-modal__lead on the modal surface. Nested well is the grid only. */
.bv-spreadsheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  gap: var(--space-3);
}

.bv-spreadsheet__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  border-bottom: none;
  flex-shrink: 0;
}

.bv-spreadsheet__toolbar-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}

.bv-spreadsheet .import-modal__lead {
  margin: 0;
}

.bv-spreadsheet__toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

.bv-spreadsheet__alerts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.bv-spreadsheet__alerts:empty {
  display: none;
}

.bv-spreadsheet__alert {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.bv-spreadsheet__alert--warn {
  color: var(--color-warning);
}

.bv-spreadsheet__scroll {
  overflow: auto;
  min-height: var(--spreadsheet-min-height);
  flex: 1 1 auto;
  background: var(--color-grouped-nested);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.bv-spreadsheet__scroll--fit {
  min-height: 0;
}

.bv-spreadsheet__table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  background: var(--color-grouped-nested);
}

.bv-spreadsheet__table th,
.bv-spreadsheet__table td {
  border-right: 1px solid var(--spreadsheet-hairline);
  border-bottom: 1px solid var(--spreadsheet-hairline);
  padding: 0 var(--space-2);
  text-align: left;
  white-space: nowrap;
  box-sizing: border-box;
  min-width: var(--spreadsheet-col-min-width);
  height: var(--spreadsheet-cell-height);
  background: var(--color-surface);
}

.bv-spreadsheet__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: auto;
  min-height: var(--spreadsheet-header-height);
  background: var(--color-grouped-nested);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: top;
}

.bv-spreadsheet__table th.num,
.bv-spreadsheet__table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: var(--spreadsheet-col-num-min-width);
}

.bv-spreadsheet__table th.bv-spreadsheet__sticky,
.bv-spreadsheet__table td.bv-spreadsheet__sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 12rem;
  font-weight: 600;
}

.bv-spreadsheet__table thead th.bv-spreadsheet__sticky {
  z-index: 3;
}

.bv-spreadsheet__table tfoot th,
.bv-spreadsheet__table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--color-grouped-nested);
  font-weight: 600;
}

.bv-spreadsheet__table tfoot .bv-spreadsheet__sticky {
  z-index: 4;
}

.bv-spreadsheet__table tbody tr.is-clickable {
  cursor: pointer;
}

.bv-spreadsheet__table tbody tr.is-clickable:hover td {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface));
}

html[data-theme="dark"] .bv-spreadsheet__table tbody tr.is-clickable:hover td {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
}

.bv-spreadsheet__hint {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--spreadsheet-cell-height);
  min-width: 0;
}

.bv-spreadsheet__table td.num .bv-spreadsheet__hint {
  justify-content: flex-end;
}

.bv-spreadsheet__col-label {
  display: block;
  padding: var(--space-1) 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-spreadsheet__map.calendar-multi {
  width: 100%;
  min-width: 0;
  margin: 0 0 var(--space-1);
  z-index: 1;
}

.bv-spreadsheet__map .calendar-multi__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--spreadsheet-header-height);
  height: auto;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.bv-spreadsheet__map .calendar-multi__trigger:hover {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
}

.bv-spreadsheet__map.is-unmapped .calendar-multi__trigger,
.bv-spreadsheet__map.is-unmapped [data-single-select-label] {
  color: var(--color-text-tertiary);
}

.bv-spreadsheet__cell {
  cursor: cell;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-spreadsheet__cell.is-selected {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
}

.bv-spreadsheet__cell.is-editing {
  padding: 0;
}

.bv-spreadsheet__editor {
  width: 100%;
  height: 100%;
  min-height: var(--spreadsheet-cell-height);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  padding: 0 var(--space-2);
  border-radius: 0;
  outline: none;
}

.bv-spreadsheet__index {
  min-width: 2.5rem;
  width: 2.5rem;
  text-align: center;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  background: var(--color-grouped-nested);
  position: sticky;
  left: 0;
  z-index: 3;
}

.bv-spreadsheet__table thead th.bv-spreadsheet__index {
  z-index: 4;
}

.bv-spreadsheet__row-remove {
  min-width: 2.75rem;
  width: 2.75rem;
  text-align: center;
}

html[data-theme="dark"] .bv-spreadsheet__map .calendar-multi__trigger:hover {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
}

/* In-page map marker — white Lucide map-pin in a primary circle. Handbook §9 media-frame. */
.project-map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--map-marker-width);
  height: var(--map-marker-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.project-map-marker:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

i.project-map-marker__pin.bv-icon,
i.project-map-marker__pin[data-lucide] {
  display: block;
  width: var(--native-icon-size);
  height: var(--native-icon-size);
  font-size: var(--native-icon-size);
  vertical-align: middle;
  pointer-events: none;
}

i.project-map-marker__pin.bv-icon svg,
i.project-map-marker__pin[data-lucide] svg {
  display: block;
  width: var(--native-icon-size);
  height: var(--native-icon-size);
}

/* Loading overlay and spinner. Handbook §14. Shared chrome, light and dark. */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-photo-scrim) 80%, transparent);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.show {
  opacity: 1;
  visibility: visible;
}

.loading-overlay__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: 22rem;
  text-align: center;
}

.spinner {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 3px solid color-mix(in srgb, var(--color-text-white) 28%, transparent);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

/* Handbook §14. 16px, inside buttons. currentColor stays visible on a primary button in light and dark. */
.mini-spinner {
  width: var(--native-icon-size-control);
  height: var(--native-icon-size-control);
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mini-spinner {
    animation: none;
  }
}

.loading-overlay.is-success .spinner {
  display: none;
}

.loading-overlay__check {
  display: none;
  width: 50px;
  height: 50px;
  color: var(--color-text-white);
  flex-shrink: 0;
}

.loading-overlay.is-success .loading-overlay__check {
  display: block;
}

.loading-overlay__caption {
  margin: 0;
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.4;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Signature card (§9). One card, one nested info well, one frame. No dashed border on the image. */
.signature-preview-box {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: none;
}

.signed-info {
  background: var(--color-grouped-nested);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.signed-info p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.signed-info p + p {
  margin-top: var(--space-1);
}

.signature-display {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-3);
}

.signature-display img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  background: transparent;
}

/* Label sits above the frame. The frame is the only plate. */
.signature-pad-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
}

.signature-pad-field > .micro-label {
  margin: 0;
}

/* One frame. Canvas fills it. No nested pad inside the border. */
.signature-pad-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-grouped-card);
  overflow: hidden;
}

html[data-theme="dark"] .signature-pad-frame {
  background: color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
}

.signature-pad {
  display: block;
  width: 100%;
  height: calc(var(--space-10) * 4);
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  touch-action: none;
  cursor: crosshair;
}

/* Elevated plate. The checklist row is nested, so the white fill reads as one frame. */
.form-field:has(+ .signature-pad-frame) .form-input,
.form-field:has(+ .signature-pad-frame) .form-input:focus {
  --form-input-fill: var(--color-grouped-card);
  background: var(--form-input-fill);
  background-color: var(--form-input-fill);
  border: none;
  box-shadow: none;
}

html[data-theme="dark"] .form-field:has(+ .signature-pad-frame) .form-input,
html[data-theme="dark"] .form-field:has(+ .signature-pad-frame) .form-input:focus {
  --form-input-fill: color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
  background: var(--form-input-fill);
  background-color: var(--form-input-fill);
}

.signature-pad-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.signature-pad-actions .btn.btn-text {
  height: var(--page-header-control-height);
  min-height: var(--page-header-control-height);
  max-height: var(--page-header-control-height);
  padding: 0 var(--space-3);
}


/* Fullfør kontoen: Brreg-treff under org.nr */
.ccp-org-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.ccp-org-hint[hidden] {
  display: none;
}

.ccp-org-hint__text strong {
  color: var(--color-text);
}