/* ============================================================
   Nobeli Visit — Design Tokens
   Place at: Visit.Web.Shared/wwwroot/nobeli.css
   Reference in each web app's _Host.cshtml or App.razor:
     <link rel="stylesheet" href="_content/Visit.Web.Shared/nobeli.css" />

   Tenant branding overrides land in <style id="tenant-branding">
   injected by BrandingProvider.razor — see docs/branding-spec.md
   ============================================================ */

:root {
  /* ---------- Brand (tenant-overridable) ---------- */
  --primary:          #006b7e;   /* Nobeli teal */
  --primary-strong:   #00505e;
  --primary-soft:     #e0eef0;
  --accent:           #d98a3d;
  --bg-app:           #f4f6f3;   /* warm off-white */
  --bg-surface:       #ffffff;
  --bg-soft:          #f1f4f0;
  --bg-table-header:  #e3eae8;   /* OP-183 — distinct thead band vs --bg-surface */

  /* ---------- Text ---------- */
  --fg-strong:        #0e1a1f;
  --fg-default:       #2a3940;
  --fg-muted:         #5a6a70;
  --fg-on-primary:    #ffffff;

  /* ---------- Borders & dividers ---------- */
  --border:           #e1e7e8;
  --border-strong:    #c7d1d3;
  --divider:          #ecf0f0;

  /* ---------- Print (fixed values — must be absolute regardless of theme) ---------- */
  --fg-print:         #000;
  --bg-print:         #fff;

  /* ---------- Semantic status (NOT tenant-overridable — readability) ---------- */
  --success-600:      #2f7a5c;
  --success-100:      #def0e6;
  --danger-600:       #b3413a;
  --danger-100:       #fbe2df;
  --warning-500:      #d98a3d;
  --warning-100:      #fcecd6;
  --info-600:         #006b7e;
  --info-100:         #e0eef0;

  /* ---------- Typography ---------- */
  --font-sans:        "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-display:     "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    26px;
  --text-2xl:   34px;
  --text-3xl:   44px;
  --text-display: 72px;   /* kiosk hero */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii (tenant-overridable via corner style) ---------- */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-input: 14px;
  --radius-card:  20px;
  --radius-btn:   999px;     /* pill default — overridden to 8px in 'sharp' corner style */

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(2, 76, 90, .06);
  --shadow-sm: 0 2px 6px rgba(2, 76, 90, .07);
  --shadow-md: 0 4px 14px rgba(2, 76, 90, .08);
  --shadow-lg: 0 18px 40px rgba(2, 76, 90, .12);
  --shadow-focus: 0 0 0 3px var(--primary-soft);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- Z-index scale ---------- */
  --z-nav:      10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;

  /* ---------- Kiosk touch (ADR-0064) ---------- */
  /* --kiosk-pad-edge är kioskets 56px horisontella rytmkonstant —
     delas avsiktligt av topbar-sidpaddning, knappar och ramkant (DISC-029). */
  --kiosk-pad-edge:          56px;
  --kiosk-topbar-h:          96px;   /* KioskShell toppbar — screens-kiosk.jsx rad 24 */

  /* Numpad — screens-kiosk.jsx rad 153–164 */
  --kiosk-keypad-gap:        14px;
  --kiosk-keypad-width:     420px;
  --kiosk-key-height:        96px;
  --kiosk-key-radius:        18px;
  --kiosk-key-font:          38px;

  /* CodeCells — screens-kiosk.jsx rad 176–184 */
  --kiosk-cell-w:            88px;
  --kiosk-cell-h:           116px;
  --kiosk-cell-w-big:       104px;
  --kiosk-cell-h-big:       132px;
  --kiosk-cell-border:        3px;
  --kiosk-cell-font:         56px;
  --kiosk-cell-font-big:     64px;

  /* Touch-fält (KField) — screens-kiosk.jsx rad 257–259 */
  --kiosk-field-height:      72px;
  --kiosk-field-font:        22px;

  /* KioskTile — screens-kiosk.jsx rad 47, 55 */
  --kiosk-tile-padding:      52px;
  --kiosk-tile-icon-size:   116px;   /* samma värde som --kiosk-cell-h; separat token, annan semantik */
  --kiosk-tile-icon-radius:  32px;

  /* Kompositionslayout — screens-kiosk.jsx rad 196–197 */
  --kiosk-gap-group:         96px;
  --kiosk-gap-col:           44px;
}

/* ============================================================
   "Sharp corner" tenant variant — set via root attr
   <html data-corner="sharp"> from BrandingProvider
   ============================================================ */
:root[data-corner="sharp"] {
  --radius-btn:   6px;
  --radius-card:  6px;
  --radius-input: 6px;
  --radius-md:    6px;
  --radius-lg:    6px;
  --radius-xl:    8px;
}

/* ============================================================
   Dark mode (tenant-overridable via <html data-theme="dark">)
   ============================================================ */
:root[data-theme="dark"] {
  --bg-app:       #1a1a1a;
  --bg-surface:   #262626;
  --bg-soft:          #333333;   /* FK-6: #2a2a2a → #333333, bara 4 RGB-enheters skillnad mot --bg-surface */
  --bg-table-header:  #323a3c;   /* OP-183 — distinct thead band vs --bg-surface (dark) */
  --fg-strong:    #f4f4f4;
  --fg-default:   #d4d4d4;
  --fg-muted:     #a8a8a8;
  --border:       #3a3a3a;
  --border-strong: #505050;
  --divider:      #2e2e2e;
  --primary-soft: #1f3a3f;
  --shadow-md:    0 4px 14px rgba(0,0,0,.3);
  --shadow-lg:    0 18px 40px rgba(0,0,0,.4);
  /* FK-1: status-bakgrunder — mörka dämpade varianter */
  --success-100:  #1a2e24;
  --danger-100:   #2e1c1a;
  --warning-100:  #2e2518;
  --info-100:     #1a2a2e;
  /* FK-2: status-textfärger — ljusare för läsbarhet mot mörk bakgrund */
  --success-600:  #4eba8a;
  --danger-600:   #e5726b;
  --warning-500:  #e9a54e;
  --info-600:     #5ab4c8;
  /* FK-3: primary-strong — ljusare teal för aktiv nav-text */
  --primary-strong: #3daebf;
  /* FK-4: primary — ljusare teal för knappar, länkar, badges */
  --primary:      #2a9bb0;
  /* FK-5: fokusring — semi-transparent ljusare teal */
  --shadow-focus: 0 0 0 3px rgba(42, 155, 176, 0.5);
  /* WP-294 (OP-206): knapp-specifika tokens — håller 4,5:1 mot vit text
     när --primary (#2a9bb0) är för ljus för normal textstorlek */
  --btn-primary-bg:  #00788c;
  --btn-danger-bg:   #b3413a;
  --btn-inverted-fg: #00788c;
}

/* ============================================================
   Element resets — replaces Bootstrap's normalize/reboot layer.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-default);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Component classes — for use directly in .razor templates
   ============================================================ */

/* ----- Button ----- */
.nb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.nb-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nb-btn:active { transform: scale(0.98); }
.nb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.nb-btn--primary { background: var(--btn-primary-bg, var(--primary)); color: var(--fg-on-primary); }
.nb-btn--primary:hover:not(:disabled) { background: var(--primary-strong); }

.nb-btn--secondary { background: var(--bg-surface); color: var(--fg-strong); border-color: var(--border-strong); }
.nb-btn--secondary:hover:not(:disabled) { background: var(--bg-soft); }

.nb-btn--ghost { background: transparent; color: var(--fg-default); border-color: var(--border); }
.nb-btn--ghost:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--border-strong); }

.nb-btn--danger { background: var(--btn-danger-bg, var(--danger-600)); color: white; }

.nb-btn--danger-outline { background: var(--bg-surface); color: var(--danger-600); border-color: var(--danger-600); border-width: 1.5px; }
.nb-btn--danger-outline:hover:not(:disabled) { background: var(--danger-100); }

.nb-btn--inverted { background: var(--fg-on-primary); color: var(--btn-inverted-fg, var(--primary)); border-color: transparent; }
.nb-btn--inverted:hover:not(:disabled) { background: var(--primary-soft); }

.nb-btn--lg { padding: 16px 28px; font-size: var(--text-md); }
.nb-btn--xl { padding: 22px 36px; font-size: var(--text-lg); }
.nb-btn--sm { padding: 6px 12px; font-size: var(--text-xs); }
/* Touch-storlek: finger-kalibrerad för 11" kiosk (ADR-0064).
   align-self + width: auto är FULLBREDDS-DISCIPLINEN — knappen ger
   innehållsbredd i flex/grid-förälder utan att konsumenten behöver fånga det. */
.nb-btn--touch {
  padding: var(--space-5) var(--kiosk-pad-edge);   /* 20px 56px — screens-kiosk.jsx rad 199 */
  font-size: var(--text-xl);                        /* 26px — screens-kiosk.jsx rad 199 */
  align-self: flex-start;   /* flex-column: förhindrar cross-axis stretch */
  width: fit-content;       /* grid + extra säkerhet: explicit innehållsbredd */
}

/* ----- Card ----- */
.nb-card {
  background: var(--bg-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: var(--space-6);
}
.nb-card--raised   { box-shadow: var(--shadow-md); border: none; }
.nb-card--flat     { box-shadow: none; }
.nb-card--primary  { background: var(--primary); color: var(--fg-on-primary); border: none; box-shadow: var(--shadow-md); }
/* Fill-variant: root-diven blir flex-column och fyller förälderns höjd.
   height:100% täcker grid-item (align-items:stretch), flex:1 täcker flex-column-förälder.
   Föräldern måste ge definitivt utrymme — se ADR-0063. */
.nb-card--fill     { display: flex; flex-direction: column; height: 100%; flex: 1; }

/* ----- Input ----- */
.nb-input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit; font-size: var(--text-base);
  background: var(--bg-surface);
  color: var(--fg-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.nb-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.nb-input::placeholder { color: var(--fg-muted); }
.nb-input--invalid { border-color: var(--danger-600); }
.nb-input--invalid:focus { border-color: var(--danger-600); box-shadow: 0 0 0 3px var(--danger-100); }

/* Code-cell input for kiosk entry */
.nb-codecell {
  width: 64px; height: 80px;
  text-align: center;
  font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  caret-color: var(--primary);
}
.nb-codecell:focus { outline: none; border: 2px solid var(--primary); background: var(--bg-surface); }

/* ----- Badge ----- */
.nb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: var(--text-xs); font-weight: 600;
  border-radius: 999px;
  background: var(--bg-soft); color: var(--fg-default);
}
.nb-badge--success { background: var(--success-100); color: var(--success-600); }
.nb-badge--danger  { background: var(--danger-100);  color: var(--danger-600); }
.nb-badge--warning { background: var(--warning-100); color: var(--warning-500); }
.nb-badge--info    { background: var(--info-100);    color: var(--info-600); }

/* Status dot */
.nb-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nb-dot--success { background: var(--success-600); }
.nb-dot--danger  { background: var(--danger-600); }
.nb-dot--warning { background: var(--warning-500); }
.nb-dot--info    { background: var(--info-600); }

/* ----- Spinner ----- */
.nb-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: nb-spin 0.7s var(--ease-out) infinite;
  display: block;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }

/* ----- Table ----- */
.nb-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.nb-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--fg-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border);
}
.nb-table thead th { background: var(--bg-table-header); }
.nb-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.nb-table--hover tbody tr:hover { background: var(--bg-soft); }
.nb-row--clickable { cursor: pointer; }

/* ----- Field label ----- */
.nb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-field__label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-strong); }
.nb-field__hint  { font-size: var(--text-xs); color: var(--fg-muted); }
.nb-field__error { font-size: var(--text-xs); color: var(--danger-600); }

/* ----- Toggle switch ----- */
.nb-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: var(--border-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
  padding: 0;
}
.nb-toggle[aria-checked="true"] { background: var(--primary); }
.nb-toggle:disabled             { cursor: not-allowed; }
.nb-toggle:focus-visible        { outline: none; box-shadow: var(--shadow-focus); }
.nb-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.15s ease;
}
.nb-toggle[aria-checked="true"] .nb-toggle__thumb { left: 18px; }
.nb-toggle[aria-checked="true"] .nb-toggle__thumb::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--primary);
  line-height: 1;
}

/* ----- Toggle field (switch + text) ----- */
.nb-toggle-field          { display: flex; align-items: flex-start; gap: var(--space-3); }
.nb-toggle-field .nb-toggle { margin-top: 1px; }
.nb-toggle__text          { display: flex; flex-direction: column; gap: 2px; }
.nb-toggle__label         { font-size: var(--text-sm); font-weight: 600; color: var(--fg-strong); }
.nb-toggle__hint          { font-size: var(--text-xs); color: var(--fg-muted); }
.nb-toggle-field--disabled { opacity: 0.5; }

/* ----- Alert ----- */
.nb-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.nb-alert--success { background: var(--success-100); color: var(--success-600); }
.nb-alert--danger  { background: var(--danger-100);  color: var(--danger-600); }
.nb-alert--warning { background: var(--warning-100); color: var(--warning-500); }
.nb-alert--info    { background: var(--info-100);    color: var(--info-600); }

.nb-alert__body { flex: 1; }
.nb-alert__close {
  background: none; border: none; cursor: pointer;
  padding: 0; line-height: 1; font-size: var(--text-md);
  color: currentColor; opacity: 0.7;
}
.nb-alert__close:hover { opacity: 1; }

/* ----- Surface utility ----- */
.nb-surface { background: var(--bg-surface); border-radius: var(--radius-card); }

/* ----- Section heading ----- */
.nb-eyebrow {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--primary); text-transform: uppercase; letter-spacing: 0.08em;
  /* Heading-parity (OP-161/DISC-030 F1): strip block heading-defaults så ett
     h2–h4 med klassen blir pixel-identiskt med <span>. */
  margin: 0; display: inline-block; line-height: inherit;
}

/* ----- NbTabs ----- */
.nb-tabs__list {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: 0;
}
.nb-tabs__tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nb-tabs__tab:hover { color: var(--fg-default); background: var(--bg-soft); }
.nb-tabs__tab--active { color: var(--fg-strong); border-bottom-color: var(--primary); }
.nb-tabs__tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nb-tabs__panel { padding-top: var(--space-3); }

/* ----- NbAutocomplete ----- */
.nb-autocomplete {
  position: relative;
  display: block;
}
.nb-autocomplete__listbox {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  z-index: var(--z-overlay);
}
.nb-autocomplete__option {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-default);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.nb-autocomplete__option:hover,
.nb-autocomplete__option--active {
  background: var(--primary-soft);
  color: var(--fg-strong);
}
.nb-autocomplete__hint {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  cursor: default;
  font-style: italic;
}
.nb-autocomplete__hint--error {
  color: var(--danger-600);
  font-style: normal;
}

/* URL-display i NbInput readonly — aktiveringslänkar, inbjudningar, etc. */
.nb-url-display {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ============================================================
   Utility classes — spacing
   ============================================================ */

/* Margin-bottom */
.nb-mb-0 { margin-bottom: 0; }
.nb-mb-1 { margin-bottom: var(--space-1); }   /* Bootstrap mb-1: 0.25rem/4px */
.nb-mb-2 { margin-bottom: var(--space-2); }   /* Bootstrap mb-2: 0.5rem/8px */
.nb-mb-3 { margin-bottom: var(--space-4); }   /* Bootstrap mb-3: 1rem/16px */
.nb-mb-4 { margin-bottom: var(--space-6); }   /* Bootstrap mb-4: 1.5rem/24px */

/* Margin-top */
.nb-mt-2 { margin-top: var(--space-2); }      /* Bootstrap mt-2: 0.5rem/8px */
.nb-mt-3 { margin-top: var(--space-4); }      /* Bootstrap mt-3: 1rem/16px */
.nb-mt-4 { margin-top: var(--space-6); }      /* Bootstrap mt-4: 1.5rem/24px */
.nb-mt-5 { margin-top: var(--space-12); }     /* Bootstrap mt-5: 3rem/48px */

/* Margin-inline-end (logical, replaces margin-right for LTR) */
.nb-me-1 { margin-inline-end: var(--space-1); }
.nb-me-2 { margin-inline-end: var(--space-2); }

/* Margin-inline-start (logical, replaces margin-left for LTR) */
.nb-ms-1 { margin-inline-start: var(--space-1); }   /* Bootstrap ms-1: 0.25rem/4px */
.nb-ms-2 { margin-inline-start: var(--space-2); }   /* Bootstrap ms-2: 0.5rem/8px */

/* Padding-inline */
.nb-px-3 { padding-inline: var(--space-4); }  /* Bootstrap px-3: 1rem/16px */
.nb-px-4 { padding-inline: var(--space-6); }  /* Bootstrap px-4: 1.5rem/24px */
.nb-ps-3 { padding-inline-start: var(--space-4); }

/* Padding-block */
.nb-py-1 { padding-block: var(--space-1); }
.nb-py-5 { padding-block: var(--space-12); }  /* Bootstrap py-5: 3rem/48px */

/* Gap (flex/grid gap) */
.nb-gap-1 { gap: var(--space-1); }
.nb-gap-2 { gap: var(--space-2); }

/* ============================================================
   Utility classes — flex
   ============================================================ */

/* Display — Bootstrap d-flex */
.nb-flex { display: flex; }

/* Direction — Bootstrap flex-column */
.nb-flex-col { flex-direction: column; }

/* Wrap — Bootstrap flex-wrap */
.nb-flex-wrap { flex-wrap: wrap; }

/* Justify-content */
.nb-justify-center  { justify-content: center; }       /* Bootstrap justify-content-center */
.nb-justify-between { justify-content: space-between; } /* Bootstrap justify-content-between */
.nb-justify-end     { justify-content: flex-end; }     /* Bootstrap justify-content-end */

/* Align-items */
.nb-align-center { align-items: center; }     /* Bootstrap align-items-center */
.nb-align-end    { align-items: flex-end; }   /* Bootstrap align-items-end */
.nb-align-start  { align-items: flex-start; } /* Bootstrap align-items-start */

/* ============================================================
   Utility classes — typography
   ============================================================ */

/* Page title — replaces Bootstrap .h3 class on <h1> elements */
.nb-page-title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin: 0;
}

/* Text-transform */
.nb-text-uppercase { text-transform: uppercase; }

/* Text-color (semantic) */
.nb-text-muted  { color: var(--fg-muted); }
.nb-text-danger { color: var(--danger-600); }

/* Font-weight */
.nb-fw-semibold { font-weight: 600; }

/* Text-decoration */
.nb-text-no-decoration { text-decoration: none; }

/* Text-alignment */
.nb-text-center { text-align: center; }
.nb-text-end    { text-align: end; }

/* White-space */
.nb-text-nowrap { white-space: nowrap; }

/* Font-size and family */
.nb-text-sm   { font-size: var(--text-sm); }     /* Bootstrap small: 0.875em → 13px */
.nb-font-mono { font-family: var(--font-mono); } /* Bootstrap font-monospace */

/* ============================================================
   Utility classes — sizing & misc
   ============================================================ */

/* Sizing */
.nb-w-full { width: 100%; }
.nb-h-full { height: 100%; }

/* Responsive table scroll — replaces Bootstrap 'table-responsive' */
.nb-table-scroll { overflow-x: auto; }

/* Selection */
.nb-select-all { user-select: all; }

/* Accessibility — visually hidden (screen-reader only) */
.nb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Page-shell-komponenter (LF-WP-2)
   NbAppShell, NbSideNav, NbSideNavItem, NbSideNavFooter, NbTopBar
   ============================================================ */

/* ----- NbAppShell ----- */
.nb-app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-app);
}
.nb-app-shell__sidenav {
  flex-shrink: 0;
}
.nb-app-shell__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ----- Page content area ----- */
.nb-page-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-7);
  background: var(--bg-app);
}

/* ----- NbSideNav ----- */
.nb-sidenav {
  width: 232px;
  height: 100%; /* Ensures footer (margin-top: auto) reaches viewport bottom — LF-WP-3-K1 */
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3);
}
.nb-sidenav__brand {
  padding: var(--space-1) var(--space-2) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nb-sidenav__brand-text {
  display: flex;
  flex-direction: column;
}
.nb-sidenav__brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  line-height: 1;
}
.nb-sidenav__brand-product {
  font-weight: 500;
  opacity: 0.65;
}
.nb-sidenav__brand-app {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: var(--space-1);
}
.nb-sidenav__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nb-sidenav__footer {
  margin-top: auto;
}

/* ----- NbSideNavItem ----- */
.nb-sidenav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);  /* 9px: design-spec; no exact token (--space-2=8px, --space-3=12px) */
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  color: var(--fg-strong);
  font-weight: 500;
  font-size: 14px;  /* design-spec: 14px; no exact token (--text-sm=13px, --text-base=15px) */
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nb-sidenav-item:hover {
  background: var(--bg-soft);
}
.nb-sidenav-item--active {
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 600;
}
.nb-sidenav-item__icon {
  display: flex;
}
.nb-sidenav-item__label {
  flex: 1;
}
.nb-sidenav-item__badge {
  background: var(--bg-soft);
  color: var(--fg-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
}
.nb-sidenav-item--active .nb-sidenav-item__badge {
  background: var(--primary);
  color: var(--fg-on-primary);
}

/* ----- NbSideNavFooter ----- */
.nb-sidenav-footer {
  padding: var(--space-3);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
}

/* ----- NbTopBar ----- */
.nb-topbar {
  height: var(--space-16);
  padding: 0 var(--space-7);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.nb-topbar__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nb-topbar__breadcrumb {
  font-size: 12px;  /* design-spec: 12px; no exact token (--text-xs=11px, --text-sm=13px) */
  color: var(--fg-muted);
}
.nb-topbar__backlink {
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: none;
}
.nb-topbar__backlink:hover {
  color: var(--fg-default);
}
.nb-topbar__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;  /* design-spec: 22px; no exact token (--text-lg=20px, --text-xl=26px) */
  letter-spacing: -0.01em;
}
.nb-topbar__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* ============================================================
   User-block i sidebar-footer (LF-WP-3)
   ============================================================ */
.nb-user-block {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nb-user-block__info {
  flex: 1;
  min-width: 0;
}
.nb-user-block__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-user-block__roles {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-user-block__logout {
  margin: 0;
}
.nb-user-block__logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nb-user-block__logout-btn:hover {
  background: var(--bg-soft);
  color: var(--fg-strong);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  /* NbTopBar: ingen scoped .razor.css-fil → !important behövs ej.
     NbTopBar renderas inuti .nb-app-shell__body (inte direkt under .nb-app-shell),
     varför child-selektorn .nb-app-shell > .nb-topbar inte träffar. */
  .nb-topbar { display: none; }

  /* Toasts: scoped CSS i NbToastHost.razor.css / NbToast.razor.css →
     !important krävs för att slå igenom scopad specificitet. */
  .nb-toast-host,
  .nb-toast { display: none !important; }
}