/* ─── Reset & Base ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);background:var(--color-background);
  color:var(--color-text);line-height:1.5;min-height:100vh;}
/* Display face carries headings platform-wide (DS v2, token-first) */
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--tracking-tight);}
a{color:var(--color-primary);text-decoration:none;}
a:hover{text-decoration:underline;}
button{cursor:pointer;font-family:inherit;}
input,select,textarea{font-family:inherit;}

/* ─── App Shell ─────────────────────────────────────────────────────────────── */
#app{display:flex;flex-direction:column;min-height:100vh;}

/* ─── Desktop sidebar (≥1024px) — UI Harmonisation Sprint 1, extended by the
   ORIX Shell & Theme Foundation (D1) with a real collapsed state ─────────────
   Fixed-position, so it is taken out of #app's normal flex flow entirely; the
   `padding-left` below is what actually reserves its space for every other
   child (header, main). This means .app-header-inner/.app-main need no change
   at all — their own existing max-width:1200px/margin:0 auto centering simply
   now computes against the narrower box #app's padding leaves them, exactly as
   it already did against the full viewport. Below 1024px this rule set does
   nothing: mobile/tablet keep today's header-nav + bottom-nav unchanged.
   `html.sidebar-collapsed` (not `#app.sidebar-collapsed`): the class is set by
   the pre-paint bootstrap script in index.html's <head>, before #app exists in
   the DOM, and by ui.toggleSidebarCollapsed() afterwards — one class, one
   place, so there is never a frame where #app and <html> disagree. */
.app-sidebar{display:none;}
@media(min-width:1024px){
  #app{padding-left:var(--sidebar-width);transition:padding-left .15s;}
  html.sidebar-collapsed #app{padding-left:var(--sidebar-width-collapsed);}
  .app-sidebar{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);
    background:var(--color-nav-bg);border-right:1px solid var(--color-nav-divider);
    z-index:110;overflow-x:hidden;overflow-y:auto;
    transition:width .15s;
  }
  html.sidebar-collapsed .app-sidebar{width:var(--sidebar-width-collapsed);}
  /* Primary nav now lives in the sidebar; the header keeps only org + account. */
  .app-header .wm-wordmark,.app-header .app-nav{display:none;}
}
@media(prefers-reduced-motion:reduce){
  #app,.app-sidebar{transition:none;}
}

.app-sidebar-brand{
  display:flex;align-items:center;height:52px;padding:0 20px;flex-shrink:0;
  border-bottom:1px solid var(--color-nav-divider);
}
html.sidebar-collapsed .app-sidebar-brand{padding:0;justify-content:center;}
.app-sidebar-wordmark{display:inline-flex;align-items:center;text-decoration:none;}
.app-sidebar-wordmark:hover{text-decoration:none;}
/* Two logo instances, one shown at a time via CSS — no JS re-render needed on
   theme/collapse toggle. Full horizontal logo: day + expanded only (the
   design handoff's own rule: a light wordmark for the dark sidebar does not
   exist yet, so night mode — expanded or collapsed — always shows the mark
   only). Neither instance ever sets both a fixed width AND height: one fixed
   dimension (height) + width:auto + the source aspect-ratio, exactly like the
   PR #13 auth screens. */
.app-sidebar-logo--full{height:26px;width:auto;object-fit:contain;aspect-ratio:720/183;display:block;flex-shrink:0;}
.app-sidebar-logo--mark{height:28px;width:auto;object-fit:contain;aspect-ratio:440/394;display:none;flex-shrink:0;}
:root[data-theme="dark"] .app-sidebar-logo--full{display:none;}
:root[data-theme="dark"] .app-sidebar-logo--mark{display:block;}
html.sidebar-collapsed .app-sidebar-logo--full{display:none;}
html.sidebar-collapsed .app-sidebar-logo--mark{display:block;}

.app-sidebar-nav{display:flex;flex-direction:column;padding:12px;gap:2px;}
.app-sidebar-item{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 12px;
  border-radius:var(--radius-md);border-left:3px solid transparent;
  color:var(--color-nav-text);font-size:14px;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s;
}
.app-sidebar-item:hover{background:var(--color-nav-hover-bg);color:var(--color-nav-text-active);text-decoration:none;}
.app-sidebar-item.active{
  background:var(--color-nav-active-bg);color:var(--color-nav-text-active);font-weight:600;
  border-left-color:var(--item-accent,var(--color-primary));
}
.app-sidebar-item.active .app-sidebar-icon{color:var(--item-accent,var(--color-primary));}
.app-sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;}
.app-sidebar-item:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
html.sidebar-collapsed .app-sidebar-item{justify-content:center;gap:0;padding:9px;}
/* Label stays in the DOM (and in the accessibility tree) when collapsed — an
   icon-only nav item still needs its accessible name; only the visible text
   is removed from layout. `title` on the link (see ui.js) gives mouse users a
   native hover tooltip without a bespoke tooltip component. */
html.sidebar-collapsed .app-sidebar-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.app-sidebar-footer{margin-top:auto;padding:8px;border-top:1px solid var(--color-nav-divider);flex-shrink:0;}
.app-sidebar-collapse-toggle{
  display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:9px 12px;
  border:none;border-radius:var(--radius-md);background:none;cursor:pointer;
  color:var(--color-nav-text);font-size:13px;font-weight:500;white-space:nowrap;
  transition:background-color .15s,color .15s;
}
.app-sidebar-collapse-toggle:hover{background:var(--color-nav-hover-bg);color:var(--color-nav-text-active);}
.app-sidebar-collapse-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
html.sidebar-collapsed .app-sidebar-collapse-toggle{justify-content:center;gap:0;padding:9px;}
html.sidebar-collapsed .app-sidebar-collapse-toggle .app-sidebar-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ─── Header / Nav ──────────────────────────────────────────────────────────── */
.app-header{
  background:var(--color-nav-bg);
  border-bottom:2px solid var(--color-nav-divider);
  position:sticky;top:0;z-index:100;
}
.app-header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;
  padding:0 16px;height:52px;gap:16px;
}
/* Logo image in nav — fixed height, natural width, no distortion */

.app-nav{display:flex;align-items:stretch;margin-left:16px;gap:2px;height:52px;}
.app-nav-item{
  display:flex;align-items:center;padding:0 14px;
  font-size:13px;color:var(--color-nav-text);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  white-space:nowrap;background:none;border-left:none;border-right:none;border-top:none;
  text-decoration:none;transition:color 0.15s;
}
.app-nav-item:hover{color:var(--color-nav-text-active);}
.app-nav-item.active{color:var(--color-nav-text-active);border-bottom-color:var(--color-nav-border);font-weight:600;}
.app-nav-spacer{flex:1;}

/* ─── Global Search trigger (GS-1) ───────────────────────────────────────────
   Shell-level, next to the theme/account controls — never Dashboard-
   specific (design system §2.18 "Command Palette", previously specified
   only). Styled as a search-field affordance using the existing field
   tokens, not a copy of any third-party product's chrome.

   The base rule below is intentionally narrow (180px) — it is NOT the
   desktop presentation, it is the fallback used only while the viewport sits
   between this and the next breakpoint's min-width kicking in (guards
   against a flash of an oversized trigger before that media query applies).
   At genuine desktop widths (>=1024px, the same breakpoint the sidebar
   itself appears at — see "Desktop sidebar" above) the header has ample
   spare width even with a full field-shaped trigger, so the min-width:1024px
   rule below widens it to the approved 320-360px field. Below 1024px this
   app has a single mobile/tablet shell mode (header nav + bottom nav, no
   separate tablet layout), so the placeholder text and shortcut badge
   collapse to an icon-only button there (compact trigger, still
   --touch-target sized) so it never competes for space with the nav-links
   row still visible in that header. */
.app-search-trigger{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  height:var(--touch-target);padding:0 10px;
  border:1px solid var(--field-border);border-radius:var(--radius-md);
  background:var(--field-bg);color:var(--color-nav-text);
  cursor:pointer;transition:background-color .15s,border-color .15s;
  max-width:180px;
}
.app-search-trigger:hover{background:var(--color-nav-hover-bg);border-color:var(--color-border-strong);}
.app-search-trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.app-search-trigger-icon{display:flex;flex-shrink:0;}
.app-search-trigger-text{
  font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app-search-trigger-shortcut{
  flex-shrink:0;font-family:inherit;font-size:11px;font-weight:600;
  color:var(--color-text-muted);background:var(--color-surface-sunken);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);
  padding:1px 6px;line-height:1.6;
}
@media(min-width:1024px){
  .app-search-trigger{width:320px;max-width:360px;}
}
@media(max-width:1023px){
  .app-search-trigger{max-width:none;padding:0;justify-content:center;width:var(--touch-target);}
  .app-search-trigger-text,.app-search-trigger-shortcut{display:none;}
}

/* ─── Theme toggle (ORIX Shell & Theme Foundation, D1) ───────────────────────
   Sun/moon icon button in the header, next to the account menu. Shows the
   icon for the theme a click would SWITCH TO (sun while dark, moon while
   light) — the conventional reading for this control, and what the design
   handoff's own frames use ("Nachtmodus aan" shown while in day mode). */
.app-theme-toggle{
  width:var(--touch-target);height:var(--touch-target);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--radius-md);background:none;color:var(--color-nav-text);
  cursor:pointer;transition:background-color .15s,color .15s;
}
.app-theme-toggle:hover{background:var(--color-nav-hover-bg);color:var(--color-nav-text-active);}
.app-theme-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus);}

/* ─── Notifications bell + badge (N1-C) ──────────────────────────────────────
   Same icon-button footprint as .app-theme-toggle right beside it — a real
   <button>, never a decorative span, with its own accessible name (see
   notifications-ui.js updateBadge()) so the numeric badge is never the only
   way to know there is unread activity. */
.notif-menu{position:relative;}
.notif-bell{
  position:relative;width:var(--touch-target);height:var(--touch-target);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--radius-md);background:none;color:var(--color-nav-text);
  cursor:pointer;transition:background-color .15s,color .15s;
}
.notif-bell:hover{background:var(--color-nav-hover-bg);color:var(--color-nav-text-active);}
.notif-bell:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.notif-badge{
  position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;line-height:1;
  background:var(--color-error);color:#fff;border-radius:var(--radius-pill);
  border:2px solid var(--color-nav-bg);
}

/* ─── Main content ──────────────────────────────────────────────────────────── */
.app-main{flex:1;max-width:1200px;margin:0 auto;width:100%;padding:24px 16px;}
@media(min-width:768px){.app-main{padding:32px 24px;}}

/* ─── Page header ───────────────────────────────────────────────────────────── */

/* ─── Buttons ───────────────────────────────────────────────────────────────── */

/* ─── Cards ─────────────────────────────────────────────────────────────────── */

/* ─── Form fields ───────────────────────────────────────────────────────────
   Native controls only. Every typographic property here (size, weight, colour,
   spacing) is re-declared in components.css, which loads after this file, so
   what stays below is strictly the structural half: layout, borders, focus and
   the appearance reset. The hardcoded 11px/13px/600 values that used to sit
   here were overridden on every screen and have been dropped. */
label{display:block;}
label .req{color:var(--color-error);}

input[type=text],input[type=email],input[type=datetime-local],
input[type=date],input[type=time],select,textarea{
  width:100%;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:white;color:var(--color-text);
  transition:border-color 0.15s,box-shadow 0.15s;
  -webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-focus-ring);
}
input.error,select.error,textarea.error{
  border-color:var(--color-error);
  background:var(--color-error-bg);
}

textarea{resize:vertical;min-height:72px;}
select{background-image: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='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}

/* ─── Status badges ─────────────────────────────────────────────────────────── */

/* ─── Job list / table ──────────────────────────────────────────────────────── */

/* ─── Form sections ─────────────────────────────────────────────────────────── */

.form-section-body{padding:20px;}

.form-section-body.collapsed{display:none;}

/* ─── Parts repeater ────────────────────────────────────────────────────────── */
.part-block{
  border:1px solid var(--rl-grey-200);border-radius:var(--radius-md);
  padding:16px;margin-bottom:12px;position:relative;background:var(--color-surface-sunken);
}

.part-remove{
  position:absolute;top:12px;right:12px;background:none;
  border:none;color:var(--rl-grey-400);font-size:16px;
  cursor:pointer;line-height:1;padding:2px 4px;
}
.part-remove:hover{color:var(--rl-red);}

/* ─── Notes / ticket notes ──────────────────────────────────────────────────── */
.note-block{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--rl-grey-200);
}
.note-block:last-child{border-bottom:none;}
.note-time-field{flex-shrink:0;width:160px;}
.note-comment-field{flex:1;}
.note-remove{background:none;border:none;color:var(--rl-grey-400);cursor:pointer;padding:8px 4px;font-size:16px;}
.note-remove:hover{color:var(--rl-red);}
@media(max-width:600px){
  .note-block{flex-direction:column;}
  .note-time-field{width:100%;}
}

/* ─── Form footer / actions ─────────────────────────────────────────────────── */

/* ─── Auth-mode shell isolation (ORIX Auth Visual Handoff pass) ───────────────
   Hides the persistent sidebar/header/bottom-nav chrome — and the layout
   space they reserve — while an auth screen (login, MFA, recovery, reset,
   magic-link) is showing, so none of their `border-*:var(--color-nav-border)`
   lines (the reported "felblauwe lijnen") are ever visible there.
   `#app.auth-mode` (ID + class) outranks the plain `.app-sidebar` /
   `.app-header` / `.app-bottom-nav` rules above regardless of source order,
   so this block does not need `!important`; it sits after them anyway, for
   readability and so it reads as the override it is. Toggled by
   ui.setAuthMode() — see ui.js. --color-nav-border itself is deliberately
   untouched: the dashboard shell (out of scope for this pass) still uses it
   unchanged, including its one legitimate use as the active-nav-item accent
   underline. */
#app.auth-mode .app-sidebar,
#app.auth-mode .app-header,
#app.auth-mode .app-bottom-nav{display:none;}
@media(min-width:1024px){
  #app.auth-mode{padding-left:0;}
}
/* The max-width:767px .app-main{padding-bottom:0} override lives further
   down, right after the "Mobile bottom navigation" section it corresponds
   to (see #app.auth-mode .app-main there) — keeping it here would give this
   file two mobile-breakpoint blocks whose bodies read almost identically
   apart from this one selector, which is easy to lose track of; next to the
   rule it overrides is where a future edit will actually look. */

/* ─── Auth / login page ─────────────────────────────────────────────────────── */
/* position:fixed;inset:0 deliberately, instead of min-height:100vh: .auth-page
   sits inside .app-main, itself flex:1 inside #app's min-height:100vh column.
   A height demand here — 100vh or a percentage — has to propagate correctly
   through that flex chain to center against the real viewport, and it did
   not: 100vh compounded with the ancestor's own 100vh and pushed the card up
   into the fold; a percentage depends on the ancestor chain resolving a
   definite height at all, which flex:1 under min-height does not reliably do.
   Pinning directly to the viewport sidesteps the whole chain — this page has
   no header/bottom-nav to coexist with, so nothing is lost by leaving normal
   flow. overflow-y:auto is the escape hatch for a viewport too short for the
   card, rather than clipping it. */
/* --color-background/--color-surface/--color-heading are the existing,
   already dark-aware semantic tokens (tokens.css `:root[data-theme="dark"]`)
   — this page reads day/night purely through them, via the `data-theme`
   attribute ui.setAuthMode() places on <html> for the duration of an auth
   screen (ORIX Auth Visual Handoff pass) and removes the moment a real,
   authenticated page is about to render (see guardAuth() in app.js) — no
   dashboard/shell screen is reachable while it is set, so this never
   auto-dark-themes anything this pass has not audited. */
.auth-page{
  position:fixed;inset:0;overflow-y:auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--color-background);padding:24px;
}
.auth-card{
  background:var(--color-surface);border-radius:var(--radius-lg);
  padding:32px;width:100%;max-width:380px;
  box-shadow:var(--shadow-lg);
}
.auth-logo{text-align:center;margin-bottom:24px;}
/* Login logo image — natural aspect ratio, max width constrained to card */

.auth-title{font-size:18px;font-weight:700;color:var(--color-heading);margin-bottom:6px;}
.auth-subtitle{font-size:13px;color:var(--color-text-muted);margin-bottom:24px;}

/* ─── AUTH_V2 — email+password / verification-code / recovery screens ────────
   Reuses .auth-page/.auth-card/.auth-title/.auth-subtitle/.ds-form/.ds-field
   above and the frozen Design System v2 tokens only — no new tokens, no v2.1
   migration. Only what those existing rules do not already cover. */
.av2-password-row{display:flex;align-items:stretch;gap:8px;}
.av2-password-row input{flex:1;min-width:0;}
/* Percentage-based grid, not a flex row of fixed-width boxes — the fixed
   width overflowed the card below ~380px. repeat(6,minmax(0,1fr)) plus
   min-width:0/box-sizing:border-box on each box is what actually fixes it:
   minmax(0,...) lets a grid track shrink past its content's intrinsic width,
   which a bare `1fr` track cannot do on its own. Verified at 320/360/375/
   390/430px — see test/auth-visual-handoff.test.js. */
.av2-otp-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
.ds-form input.av2-otp-box{
  width:100%;min-width:0;height:56px;padding:0;text-align:center;
  box-sizing:border-box;
  font-size:var(--font-size-h2);font-weight:var(--weight-bold);
  letter-spacing:0;
}
.av2-links{margin-top:16px;text-align:center;font-size:var(--font-size-small);color:var(--color-text-muted);}
.av2-links > * + *{margin-left:4px;}
.ds-btn-link{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font:inherit;font-size:var(--font-size-small);color:var(--color-primary);
  text-decoration:none;
}
.ds-btn-link:hover:not(:disabled){text-decoration:underline;}
.ds-btn-link:disabled{color:var(--color-text-muted);cursor:not-allowed;}
.ds-btn-link:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm);}

/* ─── Alerts ────────────────────────────────────────────────────────────────── */

/* ─── Empty state ───────────────────────────────────────────────────────────── */

/* ─── Spinner ───────────────────────────────────────────────────────────────── */
.spinner{
  width:20px;height:20px;border:2.5px solid var(--rl-grey-300);
  border-top-color:var(--color-primary);border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);
  z-index:200;display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.modal{
  background:white;border-radius:var(--radius-lg);
  padding:24px;width:100%;max-width:440px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.modal-title{font-size:16px;font-weight:700;margin-bottom:8px;}
.modal-body{font-size:13px;color:var(--color-text-muted);margin-bottom:20px;line-height:1.55;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}

/* ─── Site photographs (Phase 1.1 module) ───────────────────────────────────── */
/* Follows the .part-block inner-panel pattern; existing tokens only. */

/* NOTE: a ".photo-empty .btn / .photo-actions .btn { min-height:44px }" pair
   used to sit here, raising the photo buttons to a gloved-hand touch target.
   The photos module has since moved to ds-btn, so those selectors matched
   nothing and were removed with the rest of the dead layer. The INTENT is not
   restored here — retargeting them at .ds-btn would change how the module
   looks, which is a decision, not a cleanup. Raised as a Change Proposal. */
.photo-thumb{
  width:100%;max-height:260px;object-fit:contain;display:block;
  border-radius:var(--radius-sm);border:1px solid var(--rl-grey-200);
  background:white;
}
.photo-thumb-click{cursor:zoom-in;}
.photo-meta{font-size:11px;color:var(--color-text-muted);margin-top:8px;}
.photo-comment{font-size:12px;color:var(--rl-charcoal);margin-top:8px;}
.photo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.photo-uploading{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:32px 12px;font-size:13px;color:var(--color-text-muted);
}
.photo-lightbox-img{
  max-width:96vw;max-height:90vh;object-fit:contain;
  border-radius:var(--radius-sm);
}

/* ─── ORIX wordmark ────────────────────────────────────────────────────────
   The mark is the delivered multi-tone PNG (assets/branding/README.md) — no
   colour-tile wrapper needed, unlike the single-colour placeholder it
   replaces; the artwork itself already carries its own contrast and depth. */
.wm-wordmark{display:inline-flex;align-items:center;text-decoration:none;}
.wm-wordmark:hover{text-decoration:none;}
/* Mobile/tablet header mark — one fixed dimension (height) + width:auto +
   source aspect-ratio, same rule as the sidebar logos and PR #13's auth
   screens. Never a fixed width AND height together. */
.wm-wordmark-glyph{display:block;height:24px;width:auto;object-fit:contain;aspect-ratio:440/394;flex-shrink:0;}

/* Desktop size/aspect-ratio come from the width/height HTML attributes
   ui.authLogoMarkup() sets per theme (approved handoff mapping: stacked
   115×128 day, mark 98×88 night) — width:auto here keeps that ratio intact
   rather than forcing a fixed box. The mobile override below matches the
   handoff's separate mobile sizes (94×104 / 80×72) for the two variants. */
.auth-logo-lockup{display:block;margin:0 auto;width:auto;object-fit:contain;}
@media(max-width:479px){
  .auth-logo-lockup.auth-logo-lockup--stacked{height:104px;}
  .auth-logo-lockup.auth-logo-lockup--mark{height:72px;}
}

/* ─── Header org + account menu ──────────────────────────────────────────────── */
.app-nav-org{font-size:11px;color:var(--wm-grey-400);font-weight:600;
  padding:0 12px 0 0;white-space:nowrap;}
.account-menu{position:relative;}
.account-trigger{display:flex;align-items:center;gap:8px;background:none;
  border:none;color:var(--color-nav-text);font-size:12px;padding:4px;border-radius:var(--radius-sm);}
.account-trigger:hover{color:var(--color-nav-text-active);}
.account-dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:150;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:0 8px 28px var(--color-shadow);min-width:220px;padding:8px;}
.account-dropdown-head{padding:10px 12px;border-bottom:1px solid var(--color-border-subtle);
  margin-bottom:6px;}
.account-dropdown-name{font-size:13px;font-weight:700;color:var(--color-heading);}
.account-dropdown-meta{font-size:11px;color:var(--color-text-muted);margin-top:2px;
  word-break:break-all;}
.account-dropdown a,.account-dropdown button{display:block;width:100%;text-align:left;
  padding:9px 12px;font-size:13px;color:var(--color-text);background:none;border:none;
  border-radius:var(--radius-sm);text-decoration:none;}
.account-dropdown a:hover,.account-dropdown button:hover{background:var(--color-surface-hover);
  text-decoration:none;}

/* ─── Notifications compact preview panel (N1-C) ─────────────────────────────
   Same anchored-popover footprint as .account-dropdown right beside it —
   deliberately reusing that shape/positioning rather than inventing a new
   popover pattern, per the frozen N1 design. */
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:150;
  width:340px;max-width:calc(100vw - 32px);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:0 8px 28px var(--color-shadow);display:flex;flex-direction:column;}
.notif-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--color-border-subtle);}
.notif-panel-title{font-size:14px;font-weight:700;color:var(--color-heading);}
.notif-panel-count{font-size:12px;color:var(--color-text-muted);margin-top:2px;}
.notif-mark-all{flex-shrink:0;background:none;border:none;color:var(--color-primary);
  font-size:12px;font-weight:600;padding:4px 6px;border-radius:var(--radius-sm);cursor:pointer;}
.notif-mark-all:hover:not(:disabled){background:var(--color-surface-hover);}
.notif-mark-all:disabled{color:var(--color-text-muted);cursor:default;opacity:.6;}
.notif-mark-all:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.notif-panel-body{max-height:360px;overflow-y:auto;}
.notif-panel-foot{border-top:1px solid var(--color-border-subtle);padding:6px;}
.notif-view-all{width:100%;text-align:center;background:none;border:none;
  color:var(--color-primary);font-size:13px;font-weight:600;padding:9px 12px;
  border-radius:var(--radius-sm);cursor:pointer;}
.notif-view-all:hover:not(:disabled){background:var(--color-surface-hover);}
.notif-view-all:disabled{color:var(--color-text-muted);cursor:default;opacity:.6;}
.notif-view-all:focus-visible{outline:none;box-shadow:var(--shadow-focus);}

/* ─── Notification row ────────────────────────────────────────────────────── */
.notif-list{display:flex;flex-direction:column;}
.notif-row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--color-border-subtle);
  padding:10px 14px;cursor:pointer;position:relative;}
.notif-row:last-child{border-bottom:none;}
.notif-row:hover{background:var(--color-surface-hover);}
.notif-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus-ring);}
.notif-row-icon{flex-shrink:0;color:var(--color-text-muted);margin-top:1px;}
.notif-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.notif-row-title{font-size:13px;color:var(--color-text);}
/* Unread is never color-only: a bolder title weight + the dot below both
   carry the signal, plus an sr-only "(Unread)" cue in the title itself. */
.notif-row--unread .notif-row-title{font-weight:700;color:var(--color-heading);}
.notif-row-line{font-size:12px;color:var(--color-text-muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.notif-row-dot{flex-shrink:0;width:8px;height:8px;border-radius:var(--radius-pill);
  background:var(--color-primary);margin-top:6px;}

/* Full Notification Center page (N1-D): the exact same rows, just with the
   card-surface treatment the compact panel doesn't need (it already sits
   inside its own popover surface) — not a separate visual language, just
   this list's own edge, since .notif-row already carries its own padding
   and .ds-card's padding would double up against it. */
.notif-list--page{
  background:var(--card-bg);border:var(--border-width) solid var(--card-border);
  border-radius:var(--card-radius);box-shadow:var(--card-shadow);overflow:hidden;
}
.notif-list--page .notif-row-line{white-space:normal;}

/* ─── Mobile bottom navigation (thumb reach) ─────────────────────────────────── */
.app-bottom-nav{display:none;}
@media(max-width:767px){
  .app-nav{display:none;}
  .app-bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;
    background:var(--color-nav-bg);border-top:2px solid var(--color-nav-divider);
    padding:4px 0 max(4px,env(safe-area-inset-bottom));
  }
  .app-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:8px 0;font-size:10px;color:var(--color-nav-text);text-decoration:none;
    min-height:52px;justify-content:center;}
  .app-bottom-nav a.active{color:var(--color-nav-text-active);}
  .app-bottom-nav .bn-icon{font-size:18px;line-height:1;}
  .app-main{padding-bottom:76px;}
  /* "Meer" overflow menu (admin roles with hidden mobile-nav items) — same
     sizing as the plain <a> items beside it, plus an .account-dropdown-style
     popup anchored above instead of below (pre-freeze acceptance fix #2). */
  .bn-more{position:relative;flex:1;display:flex;}
  .bn-more-trigger{flex:1;display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:8px 0;font-size:10px;color:var(--color-nav-text);
    background:none;border:none;font-family:inherit;min-height:52px;justify-content:center;}
  .bn-more-trigger[aria-expanded="true"]{color:var(--color-nav-text-active);}
  .bn-more-menu{position:absolute;bottom:calc(100% + 8px);right:0;z-index:150;
    background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
    box-shadow:0 8px 28px var(--color-shadow);min-width:200px;padding:8px;}
  .bn-more-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;
    font-size:13px;color:var(--color-text);border-radius:var(--radius-sm);text-decoration:none;}
  .bn-more-menu a:hover{background:var(--color-surface-hover);}
  .bn-more-menu a.active{color:var(--color-nav-text-active);}
  .bn-more-menu .bn-icon{font-size:16px;line-height:1;display:flex;}
}
/* Auth-mode override (ORIX Auth Visual Handoff pass) — the bottom-nav is
   already `display:none` on the auth pages (see #app.auth-mode rules
   above), but .app-main's padding-bottom:76px reserved for it above is a
   separate declaration and would otherwise leave a blank gap under the
   auth card on mobile. #app.auth-mode (ID+class) outranks the plain
   .app-main rule above regardless of source order. */
@media(max-width:767px){
  #app.auth-mode .app-main{padding-bottom:0;}
}

/* Notifications (N1-C) mobile: the same central state, row renderer and
   mark-all action — but a near-full-height surface instead of forcing the
   desktop anchored popover into a narrow viewport (frozen N1 design). No
   separate mobile implementation: only presentation changes here. */
@media(max-width:767px){
  .notif-panel{
    position:fixed;top:56px;left:8px;right:8px;bottom:8px;
    width:auto;max-width:none;
  }
  .notif-panel-body{max-height:none;flex:1;}
}

/* ─── Dashboard ──────────────────────────────────────────────────────────────── */

/* ─── Profile ────────────────────────────────────────────────────────────────── */

/* ─── Status badge: changes_requested ────────────────────────────────────────── */

/* ─── Utilities ─────────────────────────────────────────────────────────────── */
.text-muted{color:var(--color-text-muted);}

.text-sm{font-size:12px;}

.hidden{display:none!important;}
@media(max-width:767px){.hidden-mobile{display:none!important;}}