*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0; font-family:var(--font-body); background:var(--surface-0); color:var(--ink-950);
  -webkit-font-smoothing:antialiased; font-size:14.5px; line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:14px;}
.hidden{display:none !important;}
.muted{color:var(--ink-400); font-weight:400;}
code,.mono{font-family:var(--font-mono);}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--ink-200); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* Accessibility: a visible, consistent focus ring for keyboard navigation everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--indigo-600); outline-offset:2px; border-radius:4px;
}
.nav-item:focus-visible{outline-color:#fff;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ============ AUTH SCREEN ============ */
.auth-screen{
  height:100vh; height:100dvh; display:flex; overflow:hidden;
}
/* Registration/verification — no side-by-side marketing panel like login
   has, so a persistent brand header takes its place instead: stacked
   above the scrollable form (column, not the row direction .auth-screen
   uses by default for login's two side-by-side panels), and never
   scrolls away itself even though the registration form beneath it is
   long enough that its own top (the "Start your free trial" heading)
   does. */
.public-screen{flex-direction:column;}
.public-screen .auth-panel-wrap{
  /* Overridden from .auth-panel-wrap's align-items:center below —
     centering an overflowing flex container means the browser's default
     scroll position starts partway through the content, not at its
     actual top, since the overflow distributes above and below the
     centered point. Login's form is short enough to never overflow, so
     this never showed up there; registration's is long enough that the
     page loaded already scrolled past its own "Start your free trial"
     heading before anyone touched it.
     Fixed with the standard pattern for this exact conflict: margin:auto
     on the child (#public-content, via .public-content-center below)
     rather than align-items:center on the parent — short content (like
     the verify-email confirmation) still centers vertically when there's
     room to, but long content that overflows simply starts at its own
     top instead of the browser picking an arbitrary default scroll
     offset. align-items itself reverts to flex-start here only so it
     stops fighting that margin:auto centering. */
  align-items:flex-start;
  flex:1; /* the base rule's flex:0 0 35% governs HEIGHT here, not width, since
    .public-screen puts this in a column layout — capping the register page's
    content area to 35% of the viewport's height regardless of how long the
    form actually is, with the remaining 65% left blank below it. That's the
    exact cut-off-with-a-huge-blank-area symptom reported on this page
    specifically (never showed up on login, which never used this column
    layout). flex:1 lets it take the full height actually available instead. */
}
.public-content-center{margin:auto 0;}
.public-topbar{
  flex-shrink:0; display:flex; align-items:center; gap:10px; padding:14px 24px;
  border-bottom:1px solid var(--line); background:var(--surface-1);
}
.public-topbar-title{font-weight:700; font-size:15px; line-height:1.2;}
.public-topbar-sub{font-size:11.5px; color:var(--ink-400); line-height:1.2;}
.auth-marketing{
  flex:0 0 65%; position:relative; overflow:hidden;
  background:var(--panel-dark); /* always dark regardless of theme — shows briefly if the image is ever slow to load, instead of a flash of the wrong-theme color */
}
.auth-hero{position:absolute; inset:0; z-index:0;}
.auth-hero-image{width:100%; height:100%; object-fit:cover; display:block;}
.auth-panel-wrap{
  flex:0 0 35%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-1); padding:24px; overflow-y:auto; min-height:0;
}
.auth-panel{width:100%; max-width:372px; position:relative;}
.auth-brand-mobile{display:none; margin-bottom:22px;}
.auth-brand-mobile-logo{display:block; height:63px; width:auto;}
.lang-menu{position:absolute; top:20px; right:20px; z-index:5;}
.lang-menu-btn{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink-600);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:7px 10px;
  transition:background .15s ease, border-color .15s ease;
}
.lang-menu-btn:hover{border-color:var(--amber-500);}
.lang-menu-btn i.fa-globe{color:var(--amber-600); font-size:12px;}
.lang-menu-chevron{font-size:9px; color:var(--ink-400); transition:transform .15s ease;}
.lang-menu.open .lang-menu-chevron{transform:rotate(180deg);}
.lang-dropdown{
  position:absolute; top:38px; right:0; min-width:150px; background:var(--surface-1); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:6px; border:1px solid var(--line);
}
.lang-dropdown-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:none; border:none; padding:9px 10px; border-radius:7px; font-size:13px; font-weight:500; color:var(--ink-800);
}
.lang-dropdown-item:hover{background:var(--surface-2);}
.lang-dropdown-item.active{color:var(--amber-600); font-weight:700;}
.lang-dropdown-item i{font-size:11px; color:var(--amber-600);}
.auth-panel-footer{margin-top:20px; text-align:center; font-size:11px; color:var(--ink-400);}
.auth-panel-icon{
  width:50px; height:50px; border-radius:15px; background:var(--amber-100); color:var(--amber-600);
  font-size:20px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.auth-panel-title{font-family:var(--font-display); font-weight:700; font-size:23px; color:var(--ink-950); margin:0;}
.auth-panel-sub{font-size:13px; color:var(--ink-600); margin:4px 0 20px;}

.auth-input-wrap{position:relative; display:flex; align-items:center;}
.auth-input-ic{position:absolute; left:13px; color:var(--ink-400); font-size:13px; pointer-events:none;}
.auth-input-wrap input{padding-left:38px !important;}
.auth-input-toggle{
  position:absolute; right:4px; background:none; border:none; color:var(--ink-400); cursor:pointer;
  padding:8px 9px; font-size:13px; border-radius:6px;
}
.auth-input-toggle:hover{color:var(--ink-600); background:var(--surface-2);}
.auth-form-row{display:flex; align-items:center; justify-content:space-between; margin-top:-6px; font-size:12.5px; flex-wrap:wrap; gap:8px 12px;}
.auth-remember{display:flex; align-items:center; gap:6px; color:var(--ink-600); cursor:pointer; white-space:nowrap;}
.auth-remember input{width:auto;}
.auth-form-row a{color:var(--amber-600); font-weight:600; text-decoration:none; white-space:nowrap;}
.auth-form-row a:hover{text-decoration:underline;}
.auth-form .btn-primary{
  background:linear-gradient(100deg, var(--amber-500), var(--indigo-700));
  border:none; box-shadow:0 10px 22px -8px rgba(198,116,15,.55); transition:transform .15s ease, box-shadow .15s ease;
}
.auth-form .btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 26px -8px rgba(198,116,15,.62);}

@media (max-width:980px){
  .auth-marketing{display:none;}
  .auth-brand-mobile{display:flex;}
  .auth-panel-wrap{flex:1;} /* fills the space freed by the now-hidden marketing panel — without this it stays pinned at 35% width, leaving the other 65% of the screen blank */
}
@media (max-width:480px){
  .auth-panel-wrap{padding:18px 16px;}
}
@media (max-height:700px){
  .auth-panel-icon, .auth-brand-mobile{display:none;}
}

.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:28px;}
.brand-icon-img{height:50px; width:auto; flex-shrink:0;}
.brand-icon-img-small{height:40px;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink-950);}
.brand-name.small{font-size:16px;}
.brand-sub{font-size:12.5px; color:var(--ink-400); margin-top:1px;}
.auth-form{display:flex; flex-direction:column; gap:16px;}
.field-label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-600);}

/* ============ BOOTSTRAP-STYLE FORM CONTROLS ============
   Matches Bootstrap 5.3's form-control / form-select / form-check visual
   spec (padding, radius, border color, focus ring, custom radio/checkbox
   glyphs) recolored to this app's palette — without importing all of
   Bootstrap (which would fight the custom layout/typography built up
   elsewhere in this file). */
.field-label input:not([type="checkbox"]):not([type="radio"]),
.field-label select,
.field-label textarea,
.form-control,
.form-select{
  display:block; width:100%; padding:.55rem .8rem; font-size:14.5px; font-weight:400; line-height:1.5;
  color:var(--ink-950); background-color:var(--surface-1); background-clip:padding-box;
  border:1.5px solid #ced4da; border-radius:.4rem; box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.field-label input:not([type="checkbox"]):not([type="radio"]):hover,
.field-label select:hover, .field-label textarea:hover, .form-control:hover, .form-select:hover{
  border-color:#adb5bd;
}
.field-label select,.form-select{
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:16px 12px; appearance:none;
}
.field-label input:focus:not([type="checkbox"]):not([type="radio"]),
.field-label select:focus,
.field-label textarea:focus,
.form-control:focus,
.form-select:focus{
  outline:none; border-color:var(--amber-500); box-shadow:0 0 0 .25rem rgba(242,163,61,.28);
}
.field-label input:disabled, .form-control:disabled, .field-label select:disabled{
  background-color:var(--surface-2) !important; opacity:.7 !important; cursor:not-allowed; box-shadow:none !important;
}

/* form-check: Bootstrap's custom radio/checkbox — replaces the raw,
   unstyled native browser circle/box (the tiny default radios were the
   visible issue in the audit-inspection "Result" field). */
.form-check-group{display:flex; flex-wrap:wrap; column-gap:26px; row-gap:6px; padding-top:2px;}
.form-check{display:flex; align-items:center; gap:.6em; min-height:1.6rem; padding-bottom:.3rem;}
.form-check-input{
  flex-shrink:0 !important; width:1.3em !important; height:1.3em !important; margin-top:0 !important;
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-color:var(--surface-1) !important; border:1.75px solid #9CA3AF !important;
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
  cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.05);
  background-repeat:no-repeat; background-position:center; background-size:70%; transition:all .12s;
  outline:none !important;
}
.form-check-input:hover{border-color:var(--amber-500) !important;}
.form-check-input[type="checkbox"]{border-radius:.3em !important;}
.form-check-input[type="radio"]{border-radius:50% !important;}
.form-check-input:checked{background-color:var(--amber-500) !important; border-color:var(--amber-500) !important;}
.form-check-input[type="checkbox"]:checked{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3e%3cpath d='M6 10l3 3 6-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
}
.form-check-input[type="radio"]:checked{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.form-check-input:focus{outline:none; box-shadow:0 0 0 .25rem rgba(242,163,61,.25); border-color:var(--amber-500) !important;}
.form-check-label{font-size:14px; font-weight:500; color:var(--ink-800); cursor:pointer;}

/* Sliding on/off switch — used for the 'checkbox' FIELD_TYPE (a genuine
   yes/no answer on a record, e.g. "PPE compliant?") rather than for
   every native checkbox in the app: table row-selection boxes and
   Module Builder's dense inline Req/RO/Hide toggles stay plain
   checkboxes, since a full switch is the wrong visual weight for a
   cramped settings row — this is scoped to .field-switch only. */
.field-switch{display:flex; align-items:center; gap:10px; min-height:1.6rem;}
.field-switch input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:42px; height:24px; border-radius:999px; flex-shrink:0; margin:0;
  background:var(--surface-2); border:1.5px solid #ced4da; position:relative; cursor:pointer;
  transition:background .15s ease, border-color .15s ease; outline:none;
}
.field-switch input[type="checkbox"]::before{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.25); transition:transform .15s ease;
}
.field-switch input[type="checkbox"]:checked{background:var(--amber-500); border-color:var(--amber-500);}
.field-switch input[type="checkbox"]:checked::before{transform:translateX(18px);}
.field-switch input[type="checkbox"]:hover{border-color:var(--amber-500);}
.field-switch input[type="checkbox"]:focus{box-shadow:0 0 0 .25rem rgba(242,163,61,.28);}
.field-switch input[type="checkbox"]:disabled{opacity:.55; cursor:not-allowed;}
.field-switch-label{font-size:14px; font-weight:500; color:var(--ink-800); cursor:pointer;}

/* Module Builder's icon picker — the trigger button matches
   .form-control's sizing so it sits flush with the other Module Details
   inputs, and the grid inside its modal shows the curated list from
   UI.MODULE_ICONS (see ui.js) at a glance rather than making someone
   guess/type a Font Awesome class name blind, which is what this field
   was before (and which nothing in the app actually rendered — module
   icons are now wired into the sidebar nav and Home module cards too). */
.icon-picker-btn{
  display:flex; align-items:center; gap:10px; width:100%; padding:.55rem .8rem; font-size:14.5px;
  background-color:var(--surface-1); border:1.5px solid #ced4da; border-radius:.4rem; cursor:pointer;
  color:var(--ink-950); text-align:left;
}
.icon-picker-btn:hover{border-color:#adb5bd;}
.icon-picker-btn i.fa-solid:first-child{width:20px; text-align:center; color:var(--amber-600);}
.icon-picker-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:8px; max-height:340px; overflow-y:auto;
}
.icon-picker-cell{
  display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:8px;
  border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink-600); font-size:17px; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.icon-picker-cell:hover{border-color:var(--amber-500); color:var(--amber-600);}
.icon-picker-cell.selected{background:var(--amber-100); border-color:var(--amber-500); color:var(--amber-600);}

/* Native date/datetime-local inputs already inherit .form-control's
   border/padding/focus-ring above — this just makes the browser's own
   picker UI (calendar icon, popover) follow the app's light/dark theme
   instead of always rendering the OS light-mode picker on a dark page,
   and enlarges the icon's hit target slightly for touch. Deliberately
   not replacing these with a custom-built calendar widget: the native
   picker is already fully accessible and mobile-native (a real iOS/
   Android date wheel beats any JS reimplementation there), matching
   this app's no-vendor-framework approach elsewhere. */
input[type="date"], input[type="datetime-local"], input[type="time"]{color-scheme:light;}
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="time"]{color-scheme:dark;}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  padding:4px; border-radius:5px; cursor:pointer; opacity:.65; transition:opacity .12s, background .12s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1; background:var(--surface-2);}

.form-error{background:var(--rose-100); color:var(--rose-600); padding:9px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:500;}
.form-hint{font-size:12px; color:var(--ink-400); font-weight:400;}

.upload-field{display:flex; flex-direction:column; gap:8px;}
.upload-field input[type="file"]{
  border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:9px 12px; background:var(--surface-0);
  font-size:12.5px; color:var(--ink-600);
}
.upload-field input[type="file"]::file-selector-button,
.upload-field input[type="file"]::-webkit-file-upload-button{
  border:none; background:var(--amber-500); color:var(--ink-on-amber); font-weight:700; font-size:12px;
  padding:7px 14px; border-radius:6px; margin-right:12px; cursor:pointer; transition:background .12s;
}
.upload-field input[type="file"]::file-selector-button:hover,
.upload-field input[type="file"]::-webkit-file-upload-button:hover{background:var(--amber-600);}
.upload-preview{font-size:12.5px;}
.upload-preview-img{max-width:120px; max-height:80px; border-radius:8px; border:1px solid var(--line); object-fit:cover;}
.upload-preview-link{color:var(--indigo-700); font-weight:600; text-decoration:underline;}

.signature-pad-wrap{display:flex; flex-direction:column; gap:8px;}
.signature-canvas{
  width:100%; max-width:420px; height:140px; border:1.5px dashed var(--line); border-radius:var(--radius-sm);
  background:var(--surface-0); cursor:crosshair; touch-action:none;
}
.signature-pad-actions{display:flex; align-items:center; gap:10px;}

/* ============ CHOICES.JS THEME OVERRIDE ============
   Restyles the vendored Choices.js (frontend/vendor/choices/) to match this
   app's palette. This is what makes the *open* dropdown list themeable —
   a native <select> can never be styled past its closed-box appearance, in
   Bootstrap or any other CSS-only approach. */
.choices{margin-bottom:0; font-size:14.5px;}
.choices__inner{
  display:block; width:100%; min-height:0; padding:.5rem .8rem !important; background-color:var(--surface-1) !important;
  border:1.5px solid #ced4da !important; border-radius:.4rem !important; box-shadow:0 1px 2px rgba(16,24,40,.04);
  font-size:14.5px; color:var(--ink-950);
}
.choices.is-focused .choices__inner, .choices.is-open .choices__inner{
  border-color:var(--amber-500) !important; box-shadow:0 0 0 .25rem rgba(242,163,61,.28) !important;
}
.choices__list--single{padding:0;}
.choices__list--dropdown, .choices__list[aria-expanded]{
  border:1.5px solid var(--amber-500); border-radius:.4rem; box-shadow:var(--shadow-md); margin-top:4px;
}
.choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable{
  padding:8px 14px; font-size:13.5px; color:var(--ink-800);
  white-space:pre-wrap; /* preserves leading-space indentation for hierarchical
    master-data options (Department > Area) — Choices.js's allowHTML:false
    escaping means an HTML entity (&nbsp;) shows as literal text rather
    than rendering, so indentation uses plain spaces instead; those need
    this to not collapse under the default white-space:normal. */
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
  background-color:var(--amber-100); color:var(--indigo-700);
}
.choices__item--choice.is-selectable[data-value=""]{color:var(--ink-400);}
.choices__input{background-color:var(--surface-1) !important; font-size:13.5px; padding:6px 8px;}
.choices__placeholder{opacity:1; color:var(--ink-400);}
.choices[data-type*="select-one"] .choices__inner{padding-bottom:.5rem !important;}
.choices[data-type*="select-one"]::after{border-color:var(--ink-600) transparent transparent;}
.choices.is-open[data-type*="select-one"]::after{border-color:transparent transparent var(--ink-600);}
/* Multi-select chips (Select Team Member(s), etc.) — same amber/indigo
   palette as the rest of Choices above, replacing the library's default
   blue so a multiselect doesn't look like a different, unthemed widget
   next to every single-select field around it. */
.choices__list--multiple .choices__item{
  background-color:var(--amber-100); border:1px solid var(--amber-500); color:var(--indigo-700);
  border-radius:6px; padding:3px 6px 3px 9px; font-size:13px; font-weight:500;
}
.choices__list--multiple .choices__item.is-highlighted{background-color:var(--amber-500); color:var(--ink-on-amber);}
.choices__button{opacity:.6; border-left:1px solid rgba(67,56,202,.25) !important;}
.choices__button:hover, .choices__button:focus{opacity:1;}


/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:var(--radius-sm);
  padding:9px 16px; font-size:13.5px; font-weight:600; transition:transform .08s, box-shadow .15s, background .15s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--amber-500); color:var(--ink-on-amber); box-shadow:0 2px 6px -1px rgba(217,138,31,.35);}
.btn-primary:hover{background:var(--amber-600); box-shadow:0 4px 10px -1px rgba(217,138,31,.45); transform:translateY(-1px);}
.btn-secondary{background:var(--surface-1); color:var(--ink-800); border:1.5px solid var(--line);}
.btn-secondary:hover{border-color:var(--ink-200); background:var(--surface-0);}
.btn-danger{background:var(--rose-100); color:var(--rose-600);}
.btn-danger:hover{background:#fbccd5;}
.btn-ghost{background:transparent; color:var(--ink-600);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:6px 11px; font-size:12.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.icon-btn{
  width:36px; height:36px; border-radius:9px; border:none; background:transparent; color:var(--ink-600);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.icon-btn:hover{background:var(--surface-2);}

/* Topbar account-action buttons (theme, change password, 2FA, sign out) —
   a visible, always-on rounded chip rather than .icon-btn's bare/transparent
   default, matching a reference showing each as its own bordered square. */
.topbar-icon-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink-600); display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.topbar-icon-btn:hover{background:var(--surface-1); border-color:var(--ink-400); color:var(--ink-800);}
.topbar-icon-btn.danger:hover{color:var(--rose-600); border-color:var(--rose-600);}

/* ============ APP SHELL ============ */
.app-shell{display:flex; height:100vh; overflow:hidden;}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-text);
  display:flex; flex-direction:column; overflow:hidden; transition:transform .2s ease; border-right:1px solid var(--sidebar-line);
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:18px 18px 14px; flex-shrink:0;}
.sidebar-close{display:none; color:var(--sidebar-text); margin-left:auto;}
.sidebar-divider{margin:0 18px 16px; border-bottom:1px solid var(--sidebar-line); flex-shrink:0;}
.nav{padding:6px 12px 24px; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; min-height:0;}
.sidebar-footer{
  flex-shrink:0; padding:14px 18px; border-top:1px solid var(--sidebar-line);
  display:flex; align-items:center; gap:10px; min-height:56px;
}
.sidebar-footer-logo{
  max-height:32px; max-width:120px; object-fit:contain; display:block;
}
.sidebar-footer-fallback{
  display:flex; align-items:center; gap:8px; font-size:11px; color:var(--sidebar-text-muted); font-weight:600;
}
.nav-group-label{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--sidebar-text-muted);
  margin:16px 10px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:13.5px; font-weight:500;
  color:var(--sidebar-text); position:relative; transition:background .12s, color .12s, box-shadow .12s;
}
.nav-item:hover{background:var(--sidebar-hover);}
.nav-item.active{background:var(--amber-100); color:var(--indigo-700); font-weight:700; box-shadow:inset 0 0 0 1px rgba(217,138,31,.25);}
.nav-item.active .nav-ic{color:var(--amber-600); opacity:1;}
.nav-ic{width:18px; text-align:center; font-size:13px; opacity:.7; flex-shrink:0;}
.nav-item-child{padding-left:30px; font-size:12.5px;}
.nav-item-parent{cursor:pointer; user-select:none;}
.nav-collapse-chevron{margin-left:auto; font-size:10px; color:var(--ink-400); transition:transform .15s ease; flex-shrink:0;}
.nav-collapse-chevron.expanded{transform:rotate(90deg);}
.nav-children{overflow:hidden; max-height:600px; transition:max-height .18s ease;}
.nav-children.collapsed{max-height:0;}
.nav-item-child .nav-ic{font-size:11px; opacity:.55;}
.nav-item-code{margin-left:auto; font-family:var(--font-mono); font-size:10px; opacity:.55;}

.sidebar-scrim{position:fixed; inset:0; background:rgba(15,18,34,.5); z-index:40;}

/* Numbered section heading — matches the "1 · SECTION NAME" pattern used across builder screens */
.step-heading{display:flex; align-items:baseline; gap:8px; margin:26px 0 6px;}
.step-heading:first-of-type{margin-top:0;}
.step-heading-num{
  font-family:var(--font-display); font-weight:700; font-size:13px; color:#fff; background:var(--indigo-600);
  width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-heading-text{font-family:var(--font-display); font-weight:700; font-size:14.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--indigo-700);}
.step-heading-desc{font-size:12.5px; color:var(--ink-400); margin:0 0 16px; padding-left:30px;}

.back-link{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-600); margin-bottom:4px;}
.back-link:hover{color:var(--indigo-700);}

.checklist-item-card{margin-bottom:12px;}
.checklist-item-question{font-weight:700; font-size:14.5px; margin-bottom:12px;}
.result-pill-group{display:flex; gap:8px; flex-wrap:wrap;}
.result-pill{
  border:1.5px solid var(--line); border-radius:20px; padding:7px 15px; font-size:12.5px; font-weight:600;
  color:var(--ink-800); cursor:pointer; user-select:none; transition:all .12s;
}
.result-pill:hover{border-color:var(--amber-500);}
.result-pill.active{background:var(--amber-500); border-color:var(--amber-500); color:#fff;}
.result-pill.active[data-value="Non-Compliant"], .result-pill.active[data-value="Needs Attention"]{background:var(--rose-600); border-color:var(--rose-600);}
.result-pill.active[data-value="Compliant"]{background:var(--emerald-600); border-color:var(--emerald-600);}
.checklist-item-followup{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);}
.checklist-session-locked{opacity:.65; pointer-events:none;}

/* ============ AUDIT LIFECYCLE STEPPER ============ */
.audit-stepper{display:flex; align-items:flex-start; justify-content:center; gap:0; padding:20px 10px 10px; flex-wrap:wrap;}
.audit-stepper-step{display:flex; flex-direction:column; align-items:center; gap:8px; width:110px; text-align:center;}
.audit-stepper-ic{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; background:var(--surface-1); border:2px solid var(--line); color:var(--ink-400);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.audit-stepper-step.done .audit-stepper-ic{border-color:var(--emerald-600); color:var(--emerald-600); background:var(--emerald-100);}
.audit-stepper-step.current .audit-stepper-ic{
  border-color:var(--amber-500); color:var(--amber-600); background:var(--amber-100);
  box-shadow:0 0 0 4px var(--amber-100);
}
.audit-stepper-label{font-size:11.5px; font-weight:700; color:var(--ink-600); line-height:1.25;}
.audit-stepper-step.current .audit-stepper-label{color:var(--ink-950);}
.audit-stepper-line{width:36px; height:2px; background:var(--line); margin-top:23px; flex-shrink:0;}


/* ============ MASTER DATA ============ */
.md-set-card{transition:transform .15s ease, box-shadow .15s ease;}
.md-set-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.md-set-ic{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.md-set-ic-indigo{background:var(--indigo-100); color:var(--indigo-700);}
.md-set-ic-emerald{background:var(--emerald-100); color:var(--emerald-600);}

.md-values-list{
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; margin-bottom:22px;
  max-height:280px; overflow-y:auto;
}
.md-value-row{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  border-bottom:1px solid var(--line); transition:background .12s ease;
}
.md-value-row.editing{align-items:flex-end; gap:12px; padding:14px; background:var(--surface-2);}
.md-value-row.editing .form-grid{margin:0 !important; gap:10px 14px;}
.md-value-row:last-child{border-bottom:none;}
.md-value-row:hover{background:var(--surface-2);}
.md-value-row-main{display:flex; align-items:center; gap:10px;}
.md-value-depth-ic{color:var(--ink-400); font-size:11px;}

.md-section{
  border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; margin-bottom:16px; background:var(--surface-1);
}
.md-section-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;}
.md-section-ic{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0; background:var(--surface-2); color:var(--ink-600);
}
.md-section-title{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink-950);}
.md-section-desc{font-size:12px; color:var(--ink-600); margin-top:1px;}
.md-section-indigo{border-left-color:var(--indigo-600);}
.md-section-indigo .md-section-ic{background:var(--indigo-100); color:var(--indigo-700);}
.md-section-sky{border-left-color:var(--sky-600);}
.md-section-sky .md-section-ic{background:var(--sky-100); color:var(--sky-600);}
.md-section-amber{border-left-color:var(--amber-500);}
.md-section-amber .md-section-ic{background:var(--amber-100); color:var(--amber-600);}


.app-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{
  height:var(--topbar-h); flex-shrink:0; background:var(--surface-1); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 20px; gap:12px;
  position:sticky; top:0; z-index:10; /* explicit guarantee on top of the flex-shrink:0 containment above */
}
.sidebar-toggle{display:none;}
.topbar-title-block{min-width:0; overflow:hidden;}
.topbar-breadcrumb{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-400); margin-bottom:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar-title{font-family:var(--font-display); font-weight:700; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar-spacer{flex:1; min-width:0;}
.topbar-search-toggle{display:none;}
.topbar-search{position:relative; width:220px; flex-shrink:0;}
.topbar-search-ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-400); font-size:12.5px; pointer-events:none;}
.topbar-search input{
  width:100%; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  padding:0 12px 0 32px; font-size:13px; color:var(--ink-800); transition:border-color .12s, background .12s;
}
.topbar-search input:focus{outline:none; border-color:var(--amber-500); background:var(--surface-1);}
.topbar-search-results{
  position:absolute; top:calc(100% + 6px); left:0; width:280px; max-height:360px; overflow-y:auto;
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  z-index:40; padding:6px;
}
.topbar-search-result{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; font-weight:500;
  color:var(--ink-800);
}
.topbar-search-result i{width:16px; text-align:center; color:var(--ink-400); font-size:12px;}
.topbar-search-result:hover{background:var(--surface-2);}
.topbar-search-result.is-child{padding-left:24px; font-size:12.5px;}
.topbar-search-empty{padding:14px 10px; font-size:12.5px; color:var(--ink-400); text-align:center;}
.topbar-tenant{
  font-size:12px; font-weight:600; color:var(--indigo-700); background:var(--indigo-100);
  padding:5px 11px; border-radius:20px;
}
.topbar-tenant-select{
  font-size:12px; font-weight:600; color:var(--indigo-700); background:var(--indigo-100);
  padding:5px 28px 5px 11px; border-radius:20px; border:1.5px solid transparent; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234338CA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 9px center; background-size:11px 8px;
}
.topbar-tenant-select:hover{border-color:var(--indigo-700);}
.topbar-tenant-select:focus{outline:none; box-shadow:0 0 0 .2rem rgba(67,56,202,.25);}
.user-menu{position:relative;}
.user-avatar{
  width:36px; height:36px; border-radius:50%; background:linear-gradient(145deg,var(--violet-500),var(--indigo-600));
  /* --violet-500/--indigo-600 hold amber-family shades (see tokens.css —
     repurposed for the amber brand accent rather than renamed), so this
     gradient is really two close shades of orange, not the blue/purple
     the names suggest. White text on that was barely legible at 28px in
     the Users table (initials nearly invisible), especially with anti-
     aliasing thinning it further at that size. --ink-on-amber already
     exists in tokens.css for exactly this — dark text held constant
     across both themes for anything sitting on an amber-family
     background — it just wasn't applied here. */
  color:var(--ink-on-amber); border:none; font-family:var(--font-display); font-weight:800; font-size:14px;
}
.user-dropdown{
  position:absolute; right:0; top:44px; width:230px; background:var(--surface-1); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:14px; z-index:50; border:1px solid var(--line);
}
.user-dropdown-name{font-weight:700; font-size:14px;}
.user-dropdown-email{font-size:12px; color:var(--ink-400); margin-top:2px;}
.user-dropdown-roles{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px;}
.user-dropdown hr{border:none; border-top:1px solid var(--line); margin:12px 0;}
.dropdown-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none; padding:8px 6px; border-radius:7px;
  font-size:13px; font-weight:500; color:var(--ink-800);
}
.dropdown-item i{width:14px; text-align:center; color:var(--ink-400); font-size:12px;}
.dropdown-item:hover{background:var(--surface-2);}
.dropdown-item.danger{color:var(--rose-600);}
.dropdown-item.danger i{color:var(--rose-600);}

.content{flex:1; overflow-y:auto; padding:26px 30px 60px; animation:content-in .18s ease;}
@keyframes content-in{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.app-footer{
  flex-shrink:0; padding:10px 30px; text-align:center; font-size:11.5px; color:var(--ink-400);
  border-top:1px solid var(--line); background:var(--surface-1);
}
.view-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.view-header-main{display:flex; align-items:flex-start; gap:14px;}
.view-header-ic{
  width:42px; height:42px; border-radius:12px; background:var(--amber-100); color:var(--amber-600);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; margin-top:2px;
}
.view-eyebrow{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--amber-600); margin-bottom:2px;}
.view-title{font-size:23px;}
.view-subtitle{color:var(--ink-400); font-size:13.5px; margin-top:4px;}
.view-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ============ CARDS / GRIDS ============ */
.card{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; transition:box-shadow .15s, border-color .15s;}
.card-tight{padding:16px;}
.grid{display:grid; gap:18px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.task-list{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.task-list-scroll{max-height:520px; overflow-y:auto;}
.collapsible-section{overflow:hidden; max-height:600px; transition:max-height .2s ease, opacity .2s ease;}
.collapsible-section.collapsed{max-height:0; opacity:0; margin-bottom:0 !important;}
.task-row{
  display:flex; align-items:center; gap:14px; padding:14px 18px; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line); transition:background .12s ease;
}
.task-row:last-child{border-bottom:none;}
.task-row:hover{background:var(--surface-2);}
.task-row-icon{
  width:36px; height:36px; border-radius:9px; background:var(--amber-100); color:var(--amber-600);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px;
}
.task-row-body{flex:1; min-width:0;}
.task-row-title{font-weight:700; font-size:14px; color:var(--ink-950); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.task-row-sub{font-size:12.5px; color:var(--ink-600); margin-top:2px;}
.task-row-chevron{color:var(--ink-400); font-size:12px; flex-shrink:0;}

.module-card{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px;
  display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s, transform .1s;
}
.module-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.module-card-top{display:flex; align-items:center; gap:12px;}
.module-ic{
  width:40px; height:40px; border-radius:10px; background:var(--indigo-100); color:var(--indigo-700);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.module-card-name{font-weight:700; font-size:15px;}
.module-card-code{font-family:var(--font-mono); font-size:11px; color:var(--ink-400); text-transform:uppercase;}
.module-card-desc{font-size:12.5px; color:var(--ink-600); flex:1;}
.module-card-foot{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-400);}

.kpi-card{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; border-left:4px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.kpi-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.kpi-ic{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0; background:var(--surface-2); color:var(--ink-600);
}
.kpi-accent-indigo{border-left-color:var(--indigo-600);}
.kpi-accent-indigo .kpi-ic{background:var(--indigo-100); color:var(--indigo-700);}
.kpi-accent-emerald{border-left-color:var(--emerald-600);}
.kpi-accent-emerald .kpi-ic{background:var(--emerald-100); color:var(--emerald-600);}
.kpi-accent-amber{border-left-color:var(--amber-500);}
.kpi-accent-amber .kpi-ic{background:var(--amber-100); color:var(--amber-600);}
.kpi-accent-rose{border-left-color:var(--rose-600);}
.kpi-accent-rose .kpi-ic{background:var(--rose-100); color:var(--rose-600);}
.kpi-accent-sky{border-left-color:var(--sky-600);}
.kpi-accent-sky .kpi-ic{background:var(--sky-100); color:var(--sky-600);}
.kpi-value{font-family:var(--font-display); font-size:20px; font-weight:700; margin-top:0; line-height:1.15;}
.kpi-value[data-drill-kpi]{cursor:pointer; transition:color .12s;}
.kpi-value[data-drill-kpi]:hover{color:var(--amber-600);}
.kpi-label{font-size:12px; color:var(--ink-400); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}

/* ============ TABLES ============ */
.table-wrap{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
.drilldown-table{display:block; max-height:360px; overflow-y:auto;}
.drilldown-table thead, .drilldown-table tbody{display:table; width:100%; table-layout:fixed;}
.report-results-table tbody tr[data-drill-group], .report-results-table tbody tr[data-drill-record]{cursor:pointer;}
thead th{
  text-align:left; padding:11px 16px; background:var(--surface-2); color:var(--ink-600); font-weight:600;
  font-size:12px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
tbody td{padding:12px 16px; border-top:1px solid var(--line); vertical-align:middle;}
tbody tr:hover{background:var(--surface-0);}
tbody tr{transition:background .1s;}
.table-scroll{overflow-x:auto;}
.empty-state{padding:56px 24px; text-align:center; color:var(--ink-400); font-size:13.5px; max-width:360px; margin:0 auto;}
.empty-state-ic{
  width:52px; height:52px; margin:0 auto 14px; border-radius:14px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--indigo-600);
}

/* ============ BADGES / PILLS / CHIPS ============ */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;}
.badge-indigo{background:var(--indigo-100); color:var(--indigo-700);}
.badge-amber{background:var(--amber-100); color:#92640a;}
.badge-emerald{background:var(--emerald-100); color:var(--emerald-600);}
.badge-rose{background:var(--rose-100); color:var(--rose-600);}
.badge-sky{background:var(--sky-100); color:var(--sky-600);}
.badge-gray{background:var(--surface-2); color:var(--ink-600);}

.count-pill{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px;
  border-radius:20px; font-size:11.5px; font-weight:700; background:var(--emerald-100); color:var(--emerald-600);
}
.count-pill.zero{background:var(--rose-100); color:var(--rose-600);}

.chip{
  border:1.5px solid var(--line); background:var(--surface-1); border-radius:20px; padding:6px 13px;
  font-size:12.5px; font-weight:600; color:var(--ink-800);
}
.chip:hover{border-color:var(--indigo-600); color:var(--indigo-700);}
.chip.active{background:var(--indigo-600); border-color:var(--indigo-600); color:#fff;}
.chip-muted{background:var(--surface-2); color:var(--ink-400); font-size:11px; padding:3px 9px; border:none;}

/* ============ AUTOMATION RULES ============ */
.ar-module-group{margin-bottom:22px;}
.ar-module-heading{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-400); margin:0 0 8px;}
.ar-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--surface-1); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:8px;
}
.ar-card-inactive{opacity:.6;}
.ar-card-title{font-weight:700; font-size:14.5px; color:var(--ink-950); display:flex; align-items:center;}
.ar-card-rule{font-size:13px; color:var(--ink-600); margin-top:4px; line-height:1.5;}
.ar-trigger{font-weight:600; color:var(--ink-800);}
.ar-card-actions{display:flex; gap:4px; flex-shrink:0;}
.ar-action-row{border:1.5px solid var(--line); border-radius:var(--radius-md); padding:12px; margin-bottom:10px; background:var(--surface-2);}
.ar-action-row-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.ar-action-row-head .form-select{flex:1;}
.ar-action-row-body{display:grid; gap:10px;}
.ar-action-row-body textarea{border:1.5px solid #ced4da; border-radius:.4rem; padding:.55rem .8rem; font-size:14.5px; font-family:inherit; resize:vertical; background-color:var(--surface-1); color:var(--ink-950);}

/* ============ KANBAN BOARD ============ */
.kanban-board{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; align-items:flex-start;}
.kanban-col{
  flex:0 0 280px; background:var(--surface-2); border-radius:var(--radius-md); border:1px solid var(--line);
  display:flex; flex-direction:column; max-height:calc(100vh - 260px);
}
.kanban-col-head{
  display:flex; justify-content:space-between; align-items:center; padding:12px 14px; font-weight:700; font-size:13.5px;
  color:var(--ink-950); border-bottom:1px solid var(--line); flex-shrink:0;
}
.kanban-col-count{background:var(--surface-1); border-radius:12px; padding:2px 9px; font-size:12px; color:var(--ink-600); font-weight:600;}
.kanban-col-body{padding:10px; overflow-y:auto; flex:1; min-height:80px; transition:background .12s;}
.kanban-col-over .kanban-col-body{background:var(--amber-100);}
.kanban-card{
  background:var(--surface-1); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px;
  cursor:grab; box-shadow:var(--shadow-sm); transition:box-shadow .12s, transform .12s;
}
.kanban-card:hover{box-shadow:var(--shadow-md);}
.kanban-card-dragging{opacity:.4;}
.kanban-card-no{font-weight:700; font-size:13px; color:var(--amber-600); margin-bottom:4px;}
.kanban-card-field{font-size:12.5px; color:var(--ink-700); margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kanban-card-date{font-size:11px; color:var(--ink-400); margin-top:6px;}
@media (max-width:640px){
  .kanban-col{flex-basis:240px;}
}

/* ============ WORKFLOW PIPELINE (signature element) ============ */
.pipeline{display:flex; align-items:center; flex-wrap:wrap; gap:0; margin:4px 0;}
.pipeline-stage{
  display:flex; align-items:center; gap:7px; padding:6px 13px 6px 11px; border-radius:20px;
  font-size:12px; font-weight:700; background:var(--surface-2); color:var(--ink-400); white-space:nowrap;
  border:1.5px solid transparent;
}
.pipeline-stage.done{background:var(--emerald-100); color:var(--emerald-600);}
.pipeline-stage.current{background:var(--indigo-600); color:#fff; box-shadow:0 0 0 4px var(--indigo-100);}
.pipeline-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.pipeline-connector{width:22px; height:2px; background:var(--line); flex-shrink:0;}
.pipeline-connector.done{background:var(--emerald-600);}

/* ============ FORMS / MODULE BUILDER ============ */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px;}
.tab-btn{
  padding:10px 4px; margin-right:22px; font-size:13.5px; font-weight:600; color:var(--ink-400); border-bottom:2.5px solid transparent;
  background:none; border-top:none; border-left:none; border-right:none;
}
.tab-btn.active{color:var(--indigo-700); border-bottom-color:var(--indigo-600);}

.builder-layout{display:grid; grid-template-columns:230px 1fr; gap:20px;}
@media (max-width:860px){.builder-layout{grid-template-columns:1fr;}}
.field-type-list{display:flex; flex-direction:column; gap:4px;}
.field-type-item{
  padding:9px 12px; border-radius:8px; font-size:12.5px; font-weight:600; background:var(--surface-2); color:var(--ink-600);
  cursor:grab; border:1px dashed transparent;
}
.field-type-item:hover{border-color:var(--indigo-600); color:var(--indigo-700);}

.field-row{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
  background:var(--surface-1); flex-wrap:wrap;
}
.field-row-drag{color:var(--ink-200); font-size:16px; cursor:grab;}
.field-row-main{flex:1; min-width:160px; display:flex; flex-direction:column; gap:2px;}
.field-row-label{font-weight:600; font-size:13.5px;}
.field-row-meta{font-size:11.5px; color:var(--ink-400); font-family:var(--font-mono);}
.field-row-flags{display:flex; gap:6px; flex-wrap:wrap;}

/* ============ WIDGETS / DASHBOARD ============ */
.dash-grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px;}
.widget{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  grid-column:span 12; transition:opacity .12s, box-shadow .12s; display:flex; flex-direction:column;
}
.widget-head{
  background:transparent; padding:8px 14px 0; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.widget-head-text{min-width:0;}
.widget-drag-handle{cursor:grab; color:var(--ink-400); font-size:14px; user-select:none; flex-shrink:0;}
.widget-drag-handle:hover{color:var(--ink-600);}
.widget-dragging{opacity:.4; box-shadow:var(--shadow-lg);}
.widget[data-w="2"]{grid-column:span 2;} .widget[data-w="3"]{grid-column:span 3;} .widget[data-w="4"]{grid-column:span 4;}
.widget[data-w="5"]{grid-column:span 5;} .widget[data-w="6"]{grid-column:span 6;}
.widget[data-w="12"]{grid-column:span 12;}
@media (max-width:900px){.widget{grid-column:span 12 !important;}}
.widget-title{font-size:13px; font-weight:700; color:var(--ink-950);}
.widget-subtitle{font-size:10.5px; color:var(--ink-400); margin-top:0;}
.widget-remove{color:var(--ink-400) !important;}
.widget-remove:hover{color:var(--ink-800) !important; background:var(--surface-2) !important;}
.widget-body{padding:2px 14px 10px; flex:1;}
.widget-chart-wrap{position:relative; height:160px;}

.progress-list{display:flex; flex-direction:column; gap:14px;}
.progress-row-head{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:700; color:var(--ink-950); margin-bottom:6px;}
.progress-row[data-drill-row]{cursor:pointer; border-radius:6px; padding:4px 6px; margin:-4px -6px; transition:background .12s;}
.progress-row[data-drill-row]:hover{background:var(--surface-2);}
.progress-track{height:8px; background:var(--surface-2); border-radius:20px; overflow:hidden;}
.progress-fill{height:100%; background:var(--amber-500); border-radius:20px; transition:width .3s ease;}

/* ============ MODAL ============ */
.modal-backdrop{position:fixed; inset:0; background:rgba(15,18,34,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal{background:var(--surface-1); border-radius:var(--radius-lg); width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg);}
.modal.modal-wide{max-width:840px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line);}
.modal-title{font-size:17px;}
.modal-body{padding:22px; overflow-y:auto;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line);}

/* ============ TOASTS ============ */
.toast-root{position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px;}
.toast{
  background:var(--panel-dark); color:#fff; padding:12px 16px; border-radius:10px; font-size:13px; font-weight:500;
  box-shadow:var(--shadow-lg); max-width:340px; animation:toast-in .2s ease;
}
.toast.success{background:var(--emerald-600);}
.toast.error{background:var(--rose-600);}
@keyframes toast-in{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}

/* ============ MISC ============ */
.spinner{width:20px; height:20px; border:2.5px solid var(--line); border-top-color:var(--indigo-600); border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-row{display:flex; align-items:center; justify-content:center; padding:40px; gap:10px; color:var(--ink-400);}
.section-title{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--indigo-700); margin:22px 0 10px;}
.section-title:first-child{margin-top:0;}
.divider{border:none; border-top:1px solid var(--line); margin:18px 0;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-8{gap:8px;} .gap-12{gap:12px;}
@media (max-width:520px){
  .card-header-row{flex-direction:column; align-items:flex-start !important; gap:12px;}
  .card-header-row .flex{width:100%;}
  .card-header-row .btn{flex:1;}
  .stack-row{flex-direction:column; align-items:stretch !important;}
}
.wf-stage-editor{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.wf-stage-pill{
  display:flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:20px; padding:6px 6px 6px 14px; font-size:13px; font-weight:600;
}
.wf-transition-row{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:center;}
@media (max-width:700px){.wf-transition-row{grid-template-columns:1fr 1fr;}}
.wf-transition-card{border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--surface-0);}
.wf-condition-row{display:grid; grid-template-columns:auto 1fr auto 1fr; gap:8px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.wf-condition-row input, .wf-condition-row select{font-size:12.5px; padding:6px 8px;}
@media (max-width:700px){.wf-condition-row{grid-template-columns:1fr 1fr;}}

/* ============ RESPONSIVE SHELL ============ */

/* Tablet (roughly 641–1024px, both orientations): sidebar becomes an
   off-canvas drawer a little earlier than phone so content gets more
   breathing room on iPad-class devices, and touch targets grow slightly. */
@media (max-width:1024px){
  .sidebar{position:fixed; inset:0 auto 0 0; z-index:50; transform:translateX(-100%); box-shadow:var(--shadow-lg); width:min(280px, 85vw);}
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:flex;}
  .sidebar-toggle{display:flex;}
  .content{padding:20px 20px 50px;}
  .builder-layout{grid-template-columns:1fr;}
  .icon-btn{width:40px; height:40px;}
  .btn{padding:10px 16px;}
  .btn-sm{padding:8px 12px;}
}

/* Phone (≤640px): tighter spacing, single-column everywhere, no tenant badge. */
@media (max-width:640px){
  .content{padding:16px 14px 46px;}
  .topbar{padding:0 10px; gap:6px;}
  .topbar-tenant, .topbar-tenant-select{display:none;}
  .topbar-title{font-size:16px;}
  .topbar-icon-btn{width:34px; height:34px; font-size:14px;}
  .user-avatar{width:32px; height:32px; font-size:13px;}
  /* The inline search box was a fixed 220px that never shrank or hid,
     which is exactly what was pushing theme/password/MFA/logout off the
     right edge of the screen with no way to reach them (reported as
     "logout button not visible on mobile"). Collapse it behind a search
     icon instead — .topbar-search-toggle opens it as a full-width
     dropdown (see .mobile-search-open below) rather than an
     always-present 220px block competing with the action icons for
     space that doesn't exist on a phone screen. */
  .topbar-search{display:none;}
  .topbar-search-toggle{display:flex;}
  /* These three duplicate what's already in the avatar dropdown (Change
     password / Two-factor / Sign out — see #user-dropdown) — that's fine
     as quick-access shortcuts on desktop, but on a phone they're exactly
     what was crowding the avatar button itself off the right edge of the
     screen, which is what made "logout" specifically unreachable. Hiding
     them here doesn't remove the functionality, just its second entry
     point; the avatar button (now with room to actually show) still
     reaches all three. */
  .topbar-icon-btn#btn-change-password-top,
  .topbar-icon-btn#btn-mfa-settings-top,
  .topbar-icon-btn#btn-logout-top{display:none;}
  .topbar-search.mobile-search-open{
    display:block; position:absolute; left:10px; right:10px; top:calc(100% + 1px); width:auto;
    z-index:45; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg); padding:8px;
  }
  .topbar-search.mobile-search-open input{background:var(--surface-2);}
  .topbar-search.mobile-search-open .topbar-search-results{position:static; width:auto; box-shadow:none; border:none; margin-top:6px; padding:0;}
  .view-title{font-size:19px;}
  .view-header{margin-bottom:16px;}
  .view-actions{width:100%;}
  .view-actions .btn, .view-actions a.btn{flex:1; justify-content:center;}
  .modal-backdrop{padding:10px;}
  .modal{max-height:92vh;}
  .modal-head{padding:16px 18px;}
  .modal-body{padding:16px 18px;}
  .modal-foot{padding:12px 18px; flex-wrap:wrap;}
  .modal-foot .btn{flex:1;}
  table{font-size:12.5px;}
  thead th, tbody td{padding:9px 11px;}
}

@media (min-width:641px) and (max-width:1024px){
  .topbar-tenant, .topbar-tenant-select{display:none;}
}

/* ============ FLOATING DATA/HELP ASSISTANT ============ */
.assistant-fab{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--amber-500); color:var(--ink-on-amber); font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(198,116,15,.55); transition:transform .15s ease;
}
.assistant-fab:hover{transform:translateY(-2px) scale(1.04);}
.assistant-panel{
  position:fixed; right:24px; bottom:88px; z-index:60;
  width:min(360px, calc(100vw - 32px)); height:min(480px, calc(100vh - 140px));
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 24px 48px -16px rgba(24,24,24,.32);
  display:flex; flex-direction:column; overflow:hidden;
}
.assistant-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--ink-950); color:#fff; font-weight:700; font-size:14px; flex-shrink:0;
}
.assistant-panel-head .icon-btn{color:#fff;}
.assistant-panel-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;}
.assistant-msg{max-width:82%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.4; white-space:pre-wrap;}
.assistant-msg-bot{align-self:flex-start; background:var(--surface-2); color:var(--ink-800); border-bottom-left-radius:3px;}
.assistant-msg-user{align-self:flex-end; background:var(--amber-500); color:var(--ink-on-amber); border-bottom-right-radius:3px;}
.assistant-panel-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); flex-shrink:0;}
.assistant-panel-input input{
  flex:1; border:1.5px solid var(--line); border-radius:20px; padding:9px 14px; font-size:13px;
}
.assistant-panel-input input:focus{outline:none; border-color:var(--amber-500);}
.assistant-panel-input .icon-btn{background:var(--amber-500); color:var(--ink-on-amber); border-radius:50%; width:36px; height:36px; flex-shrink:0;}

/* Mic sits between the input and Send — neutral by default (it's not
   the primary action), switching to a pulsing red only while actually
   listening so it's unmistakable that the browser's microphone is live. */
#assistant-mic{background:var(--surface-2); color:var(--ink-600); border-radius:50%; width:36px; height:36px; flex-shrink:0;}
#assistant-mic:hover{background:var(--ink-200);}
#assistant-mic:disabled{opacity:.4; cursor:not-allowed;}
#assistant-mic.listening{background:var(--rose-600); color:#fff; animation:assistant-mic-pulse 1.4s ease-in-out infinite;}
@keyframes assistant-mic-pulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(225,29,72,.45);}
  50%{box-shadow:0 0 0 8px rgba(225,29,72,0);}
}

/* Dropdown/radio/checkbox quick-picks during the guided intake flow —
   tapping one is the reliable path (skips fuzzy-matching a spoken or
   typed guess against the field's option list entirely); typing or
   speaking the option text still works too, this is just the easier
   default when the options are already known and on screen. */
.assistant-quickpicks{display:flex; flex-wrap:wrap; gap:6px; align-self:flex-start; max-width:92%;}
.assistant-quickpick{
  background:var(--surface-1); border:1.5px solid var(--line); border-radius:16px; padding:6px 12px;
  font-size:12.5px; font-weight:600; color:var(--ink-800); cursor:pointer; transition:border-color .12s, background .12s;
}
.assistant-quickpick:hover{border-color:var(--amber-500);}
.assistant-quickpick.selected{background:var(--amber-100); border-color:var(--amber-500); color:var(--amber-600);}
.assistant-quickpick-done{background:var(--amber-500); border-color:var(--amber-500); color:var(--ink-on-amber);}

/* "Submit now" / "Review in form" at the end of a guided flow. */
.assistant-actions{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:92%;}
.assistant-actions .btn{padding:7px 14px; font-size:12.5px;}

@media (max-width:480px){
  .assistant-fab{right:16px; bottom:16px;}
  .assistant-panel{right:16px; bottom:76px; width:calc(100vw - 32px);}
}

/* ============ LINE ITEMS GRID (invoice / quotation items) ============ */
.li-wrap{width:100%;}
.li-scroll{overflow-x:auto; border:1.5px solid var(--line); border-radius:var(--radius-md); background:var(--surface-1);}
.li-grid{width:100%; border-collapse:collapse; font-size:13px; min-width:760px;}
.li-grid th{
  background:var(--surface-2); color:var(--ink-600); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:8px 6px; text-align:left; border-bottom:1.5px solid var(--line); white-space:nowrap;
}
.li-grid th.li-num, .li-grid td.li-num{text-align:right;}
.li-grid td{padding:4px 4px; border-bottom:1px solid var(--line); vertical-align:middle;}
.li-grid tr:last-child td{border-bottom:none;}
.li-grid td.li-sr{width:30px; text-align:center; color:var(--ink-400); font-size:12px;}
.li-grid td.li-act, .li-grid th.li-act{width:34px; text-align:center;}
/* The page's general form-control styling (.field-label input:not(...), specificity 0,3,1) would otherwise
   win and turn every cell into a full-size boxed field — so these are written to outrank it. */
.field-label .li-grid td input[data-li-col]{width:100%; min-width:0; display:block; padding:.34rem .45rem; font-size:13px; line-height:1.4; border:1.5px solid transparent; border-bottom-color:var(--line); border-radius:6px; background:transparent; box-shadow:none;}
.field-label .li-grid td input[data-li-col]:hover{border-color:var(--line); background:transparent;}
.field-label .li-grid td input[data-li-col]:focus{border-color:var(--amber-500); background:var(--surface-1); outline:none; box-shadow:0 0 0 .18rem rgba(242,163,61,.22);}
.field-label .li-grid td input[data-li-col]:disabled{background:transparent; border-color:transparent; color:var(--ink-600);}
.field-label .li-grid td.li-num input[data-li-col]{text-align:right;}
.li-grid td.li-calc{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-800); padding-right:10px; white-space:nowrap;}
.li-foot{display:flex; align-items:center; gap:12px; margin-top:8px;}
.li-note{color:var(--rose-600); font-weight:600;}
.li-del{opacity:.45;} .li-del:hover{opacity:1; color:var(--rose-600);}

/* Issued / finalised records: the locked fields are visibly inert, with the reason stated once at the top. */
.lock-banner{
  display:flex; gap:12px; align-items:flex-start; margin:12px 0 4px; padding:12px 16px; font-size:13.5px; line-height:1.5;
  background:var(--amber-100); border:1.5px solid var(--amber-500); border-radius:var(--radius-md); color:var(--ink-800);
}
.lock-banner i{margin-top:3px; color:var(--amber-600);}
.field-locked input:disabled, .field-locked select:disabled, .field-locked textarea:disabled{background:var(--surface-2); color:var(--ink-600); cursor:not-allowed;}
.field-locked .li-add, .field-locked .li-del{display:none;}
@media (max-width:640px){ .li-grid{min-width:680px;} }
.cp-sig-preview{border:1.5px dashed var(--line); border-radius:8px; padding:10px 14px; min-height:64px; display:flex; align-items:center; background:#fff;}