/* LAYER 0 FALLBACK — uncomment this ONE line and delete the @font-face block below if you want the typeface live before sourcing the woff2 files. @import must stay the first statement in the file (comments are fine above). @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */ /* ============================================================================ LAYER 0 — PLATFORM TYPEFACE ---------------------------------------------------------------------------- Every authenticated page already links prod_core.css, and no shared partial exists (navbar.php renders body markup only). Loading the typeface here is therefore the ONLY change needed to make the whole platform render in one font — no page edits at all. Before this, exactly two pages loaded a webfont: /Jobs/alljobs.php and /Expenses/approval_rules.php. Every other page declared 'Inter' in --font-sans and then silently fell through to the system face, which is why Jobs, Documents and Expenses rendered in different typefaces. Self-hosted, matching the existing /assets/fonts/ convention already used for bootstrap-icons. Drop these four files into /assets/fonts/: Inter-Regular.woff2 (400) Inter-Medium.woff2 (500) Inter-SemiBold.woff2 (600) Inter-Bold.woff2 (700) Get them from https://github.com/rsms/inter/releases (the "Inter Web" archive, /web subfolder). Four weights only — 650 is NOT loaded, see the note on --weight-semibold below. font-display:swap means text paints immediately in the fallback and swaps when the font arrives; no invisible-text flash, no render-blocking request. NOT using the Google Fonts CDN, deliberately: it is a render-blocking third-party request on every page, it needs a CSP allowance, and you are already self-hosting icons. If you would rather ship today without sourcing the files, delete this whole @font-face block and uncomment the @import at the very top of the file instead — it works immediately and can be swapped for self-hosting later with no other change. ============================================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Inter-Bold.woff2') format('woff2'); } /* ============================================================================ PUBLICIP — PROD CORE CSS Unified design system. Replaces style.css + app-core.css. Hook this on every page: ============================================================================ */ /* ============================================================================ GLOBAL SEARCH RESULT UI ============================================================================ */ .global-search-wrap { position: relative; } .global-search-shortcut { font-family: var(--font-mono); font-size: 10px; background: var(--surface); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; color: var(--text-tertiary); line-height: 1.4; } .global-search-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(540px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .16); z-index: 9999; padding: 8px; display: none; } .global-search-panel.open { display: block; animation: globalSearchIn .14s ease-out; } @keyframes globalSearchIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .global-search-status { padding: 14px; font-size: 13px; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; } .global-search-section { padding: 4px 0; } .global-search-section + .global-search-section { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 8px; } .global-search-section-title { padding: 6px 10px 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; } .global-search-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; color: var(--text-primary); text-decoration: none; cursor: pointer; } .global-search-item:hover, .global-search-item.active { background: var(--brand-50); } .global-search-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-alt); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .global-search-main { min-width: 0; } .global-search-title { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .global-search-subtitle { margin-top: 2px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .global-search-meta { font-size: 11px; font-weight: 700; color: var(--text-tertiary); white-space: nowrap; margin-left: 8px; } .global-search-footer { border-top: 1px solid var(--border-soft); margin-top: 6px; padding: 8px 10px 4px; font-size: 11px; color: var(--text-tertiary); display: flex; justify-content: space-between; gap: 8px; } @media (max-width: 768px) { .global-search-shortcut { display: none; } .global-search-panel { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; max-height: 70vh; } } html.is-native .global-search-panel { position: fixed; top: calc(64px + var(--safe-top, 0px)); left: 12px; right: 12px; width: auto; max-height: calc(80vh - var(--safe-top, 0px)); } /* ============================================================================ 1. DESIGN TOKENS ============================================================================ */ :root { /* Brand */ --brand: #534AB7; --brand-50: #F5F4FE; --brand-100: #EEEDFE; --brand-200: #D9D5F8; --brand-600: #534AB7; --brand-700: #3C3489; --brand-900: #26215C; /* Ink (slate scale) */ --ink-50: #F8FAFC; --ink-100: #F1F5F9; --ink-200: #E2E8F0; --ink-300: #CBD5E1; --ink-400: #94A3B8; --ink-500: #64748B; --ink-600: #475569; --ink-700: #334155; --ink-900: #0F172A; /* Surfaces */ --bg: #F8FAFC; --surface: #FFFFFF; --surface-alt: #F1F5F9; --hover: #F8FAFC; /* Borders */ --border: #E2E8F0; --border-soft: #F1F5F9; --border-strong: #CBD5E1; /* Text */ --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #94A3B8; --text-on-brand: #FFFFFF; /* Semantic */ --success: #059669; --success-bg: #ECFDF5; --success-fg: #065F46; --success-border: #A7F3D0; --warning: #D97706; --warning-bg: #FFFBEB; --warning-fg: #92400E; --warning-border: #FDE68A; --danger: #DC2626; --danger-bg: #FEF2F2; --danger-fg: #991B1B; --danger-border: #FECACA; --info: #2563EB; --info-bg: #EFF6FF; --info-fg: #1E40AF; --info-border: #BFDBFE; --neutral-bg: #F1F5F9; --neutral-fg: #475569; --neutral-border:#E2E8F0; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* -------------------------------------------------------------------- TYPE SCALE — Layer 0 -------------------------------------------------------------------- This is the piece that was missing. prod_core.css had 74 tokens for colour, spacing, radius, shadow and motion, and NOT ONE for font size. With nothing to reference, every module invented its own scale: allexpenses.php uses 16 distinct pixel sizes, alldocuments.php 14, and prod_core.css itself carries roughly 400 hardcoded font-size rules. The values below are not new. They are the sizes already dominant in the codebase, kept so existing pages barely shift when they migrate. DELIBERATELY ABSENT: 9px and 10px. Both are in use today (20 rules at 10px in this file alone) and both are below comfortable reading size — 10px badge text is already borderline. When you migrate a 9px or 10px rule, move it UP to --text-2xs, do not add a smaller token. iOS ZOOM RULE: any ,

under 16px makes
     iOS Safari zoom the page on focus. Use --text-base or larger on form
     controls. --text-input exists to make that explicit and hard to forget.
     -------------------------------------------------------------------- */
  --text-2xs:   11px;   /* labels, table meta, badge text */
  --text-xs:    12px;   /* secondary body, dense table cells */
  --text-sm:    13px;   /* default small — the most used size on the platform */
  --text-base:  14px;   /* body. matches the existing `body` rule below */
  --text-input: 16px;   /* form controls ONLY. never go under this — iOS zoom */
  --text-md:    16px;   /* lead paragraphs, sheet body copy */
  --text-lg:    18px;   /* card titles, sheet titles */
  --text-xl:    22px;   /* page titles */
  --text-2xl:   28px;   /* page hero, empty-state headings */
  --text-3xl:   34px;   /* the largest size in use. nothing should exceed it */

/* Line heights. Unitless, so they scale with the font size they sit on. */
  --leading-tight:   1.25;  /* headings 18px and up */
  --leading-snug:    1.4;   /* badges, labels, dense UI */
  --leading-normal:  1.5;   /* body — matches the existing `body` rule */
  --leading-relaxed: 1.65;  /* long-form prose, help text */

/* Weights. Only these four exist as loaded font files.
     650 IS NOT ONE OF THEM. auth_access.css currently uses font-weight:650
     in six places; with no matching face the browser rounds or synthesises
     it, and the result differs between Chrome, Safari and Firefox. Use
     --weight-semibold. */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

/* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

/* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

/* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 8px -2px rgba(15,23,42,.06), 0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 24px -8px rgba(15,23,42,.10), 0 4px 8px -4px rgba(15,23,42,.04);

/* Layout */
  --sidebar-width: 240px;
  --topbar-height: 56px;

/* Unified anchor-module contract (Jobs / Expenses / Documents) */
  --ui-workspace-max: 1220px;
  --ui-record-radius: 16px;
  --ui-action-height: 40px;
  --ui-touch-target: 44px;
  --ui-control-radius: 10px;
  --ui-sheet-width: 1110px;
  --ui-sheet-max-height: 900px;
  --ui-sheet-radius: 24px;
  --ui-sheet-radius-mobile: 20px;
  --ui-z-sheet: 9200;
  --ui-z-sheet-native: 12000;
  --ui-z-viewer: 12100;
  --ui-z-dialog: 12200;
  --ui-z-toast: 12500;

/* Motion */
  --duration: .15s;
  --duration-md: .25s;
  --ease: cubic-bezier(.4, 0, .2, 1);

/* Safe areas (Capacitor) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}
/* ============================================================================
   2. RESET & BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Global failsafe to prevent horizontal scrolling */
  max-width: 100vw;
  overflow-x: clip;
}
/* ?? RESTORED RESETS ?? */
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
img { max-width: 100%; }
ul, ol { list-style: none; margin: 0; padding: 0; } /* Re-kills Bootstrap's 32px padding injection */
table { border-collapse: separate; border-spacing: 0; }/* ============================================================================
   3. APP SHELL — Sidebar + Top bar + Content
   --------------------------------------------------------------------------
   THE FIX FOR DRAWER CLIPPING:
   grid-template-rows uses `auto 1fr` so the topbar row grows with content.
   When a push-down drawer opens inside .app-topbar, the row expands and
   the .app-content row shifts DOWN to follow. With the previous fixed
   value of `var(--topbar-height) 1fr`, the topbar row was locked at 56px
   and any drawer overflow rendered behind .app-content (only the bottom
   border peeked out — the "thin orange/purple line" under the navbar).
   ============================================================================ */
/* prod_core.css */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
  /* Use clip to prevent horizontal scroll without breaking sticky children */
  overflow-x: clip; 
}
.app-sidebar  { grid-area: sidebar;  background: var(--surface);  border-right: 1px solid var(--border);  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 50; }
.app-topbar   { grid-area: topbar;   background: var(--surface);  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; }
.app-content  { grid-area: content;  min-width: 0; }

/* Mobile: hide sidebar, slide in via .open */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
  .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform var(--duration-md) var(--ease); box-shadow: var(--shadow-lg); }
  .app-sidebar.open { transform: translateX(0); }
  .app-sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 49; opacity: 0; pointer-events: none; transition: opacity var(--duration-md); }
  .app-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ============================================================================
   4. SIDEBAR
   ============================================================================ */
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  height: var(--topbar-height);
}
.sidebar-brand .logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  letter-spacing: -.02em;
}
.sidebar-brand .name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }

.sidebar-nav { padding: 8px 8px 16px; }

.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 14px 12px 6px;
}

.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin-bottom: 1px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
  width: 100%;
  text-align: left;
  position: relative;
}
.sidebar-item i.bi-icon-leading { font-size: 16px; flex-shrink: 0; color: var(--text-tertiary); }
.sidebar-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item .badge {
  font-size: 10px; font-weight: 600;
  background: var(--brand-100); color: var(--brand-700);
  padding: 1px 7px; border-radius: var(--radius-full);
  margin-left: auto;
}
.sidebar-item .chevron {
  font-size: 11px;
  color: var(--text-tertiary);
  transition: transform var(--duration) var(--ease);
}
.sidebar-item:hover { background: var(--surface-alt); color: var(--text-primary); }
.sidebar-item:hover i.bi-icon-leading { color: var(--text-secondary); }
.sidebar-item.active { background: var(--brand-100); color: var(--brand-700); }
.sidebar-item.active i.bi-icon-leading { color: var(--brand); }
.sidebar-item.has-children.expanded .chevron { transform: rotate(90deg); }

.sidebar-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-md) var(--ease);
}
.sidebar-item.has-children.expanded + .sidebar-children { max-height: 600px; }

.sidebar-subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 38px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 1px;
  position: relative;
}
.sidebar-subitem::before {
  content: '';
  position: absolute;
  left: 23px; top: 50%;
  width: 6px; height: 1px;
  background: var(--border-strong);
}
.sidebar-subitem:hover { background: var(--surface-alt); color: var(--text-primary); }
.sidebar-subitem.active { background: var(--brand-50); color: var(--brand-700); font-weight: 500; }
.sidebar-subitem.active::before { background: var(--brand); width: 8px; }

/* ============================================================================
   5. TOP BAR
   ============================================================================ */
.topbar {
  display: flex; align-items: center;
  height: var(--topbar-height);
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
}

.topbar-mobile-toggle {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.topbar-mobile-toggle:hover { background: var(--surface-alt); color: var(--text-primary); }
@media (max-width: 900px) { .topbar-mobile-toggle { display: flex; } }

.topbar-page-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.005em;
}

.topbar-spacer { flex: 1; }

.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 12px;
  height: 34px;
  width: 280px;
  transition: all var(--duration) var(--ease);
}
.topbar-search:focus-within {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.topbar-search i { color: var(--text-tertiary); font-size: 14px; }
.topbar-search input { flex: 1; border: none; outline: none; background: none; font-size: 13px; color: var(--text-primary); }
.topbar-search input::placeholder { color: var(--text-tertiary); }
.topbar-search kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text-tertiary);
}
@media (max-width: 700px) {
  .topbar-search { width: auto; flex: 1; }
  .topbar-search kbd { display: none; }
}

.topbar-actions { display: flex; align-items: center; gap: 8px; }

/* ============================================================================
   6. BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  height: 34px;
  transition: all var(--duration) var(--ease);
  text-decoration: none;
}
.btn i { font-size: 14px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: var(--text-on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-700); }

.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-alt); color: var(--text-primary); }

.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }

.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover:not(:disabled) { background: #B45309; }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-sm i { font-size: 12px; }
.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; }

.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 42px; }

.btn-block { width: 100%; }

/* ============================================================================
   7. DROPDOWNS
   ============================================================================ */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 6px;
  z-index: 100;
  display: none;
}
.dropdown-menu.left { right: auto; left: 0; }
.dropdown.open > .dropdown-menu { display: block; animation: dropdown-in var(--duration) var(--ease); }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.dropdown-item:hover { background: var(--surface-alt); }
.dropdown-item i { font-size: 15px; color: var(--text-secondary); width: 18px; text-align: center; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger i { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
.dropdown-header {
  padding: 8px 10px 4px;
  font-size: 11px; font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dropdown-shortcut {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}

/* ============================================================================
   8. AVATAR
   ============================================================================ */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--duration);
  flex-shrink: 0;
}
.avatar:hover { border-color: var(--brand-200); }
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }

.has-dot { position: relative; }
.has-dot::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
}

/* ============================================================================
   9. PAGE HEADER
   ============================================================================ */
.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.page-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-title h1 {
  font-size: 18px; font-weight: 600; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.page-title .crumb {
  font-size: 12px; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.page-title .crumb a:hover { color: var(--text-secondary); }
.page-title .crumb i { font-size: 10px; }
.page-actions { display: flex; align-items: center; gap: 8px; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 28px;
}
.container-narrow { max-width: 880px; }
.container-wide { max-width: 1400px; }
@media (max-width: 600px) { .container { padding: 16px; } }

/* ============================================================================
   10. TOOLBAR
   ============================================================================ */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all var(--duration) var(--ease);
}
.chip:hover { background: var(--hover); color: var(--text-primary); }
.chip.active { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-200); }
.chip .count { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.chip.active .count { color: var(--brand); }
.toolbar-summary {
  margin-left: auto; font-size: 12px; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 12px;
}
.toolbar-summary strong { color: var(--text-primary); font-weight: 600; }

/* ============================================================================
   11. STATUS / TAGS / IDs
   ============================================================================ */
.status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: 11px; font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1.4;
  white-space: nowrap;
}
.status i { font-size: 10px; }
.status-success { background: var(--success-bg); color: var(--success-fg); }
.status-warning { background: var(--warning-bg); color: var(--warning-fg); }
.status-danger  { background: var(--danger-bg);  color: var(--danger-fg);  }
.status-info    { background: var(--info-bg);    color: var(--info-fg);    }
.status-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 500;
  border-radius: var(--radius-sm);
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag i { font-size: 10px; }

.tag-category { background: var(--brand-100); color: var(--brand-700); }
.tag-job      { background: #FEF3C7; color: #B45309; border: none; }
.tag-merchant { background: #CCFBF1; color: #0F766E; border: none; }
.tag-neutral  { background: #F1F5F9; color: #475569; border: none; }
.id-badge {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-alt);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
  transition: all var(--duration);
}
.id-badge:hover { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-200); }

/* ============================================================================
   12. STAT CARDS
   ============================================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  transition: border-color var(--duration);
}
.stat:hover { border-color: var(--border-strong); }
.stat-label {
  font-size: 11px; color: var(--text-tertiary);
  font-weight: 500; letter-spacing: .02em;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.stat-label i { font-size: 12px; }
.stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.stat-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.stat-meta .delta-up   { color: var(--success); font-weight: 500; }
.stat-meta .delta-down { color: var(--danger);  font-weight: 500; }

/* ============================================================================
   13. CARDS
   ============================================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.card-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-title {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  margin: 0;
}
.card-title i { font-size: 13px; }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }

/* ============================================================================
   14. LIST CARDS
   ============================================================================ */
.list-stack { display: flex; flex-direction: column; gap: 6px; }
.list-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px; align-items: center;
  transition: border-color var(--duration), box-shadow var(--duration);
  cursor: pointer;
}
.list-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.list-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center;
  font-size: 16px; flex-shrink: 0;
}
.list-card-body { min-width: 0; }
.list-card-row1 {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.list-card-title { font-weight: 500; font-size: 14px; color: var(--text-primary); }
.list-card-row2 {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; font-size: 12px; color: var(--text-tertiary);
}
.list-card-row2 .dot { color: var(--text-tertiary); font-size: 8px; }
.list-card-row2 i { font-size: 11px; }
.list-card-amount { text-align: right; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.list-card-amount-meta { font-size: 11px; color: var(--text-tertiary); font-weight: 400; margin-top: 1px; }
.list-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--duration); }
.list-card:hover .list-card-actions { opacity: 1; }

@media (max-width: 600px) {
  .list-card { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 12px; }
}

/* ============================================================================
   15. KV LISTS
   ============================================================================ */
.kv-list { display: flex; flex-direction: column; }
.kv {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; font-size: 13px; gap: 12px;
}
.kv + .kv { border-top: 1px solid var(--border-soft); }
.kv-label { color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.kv-label i { font-size: 14px; color: var(--text-tertiary); }
.kv-value { color: var(--text-primary); font-weight: 500; text-align: right; }
.kv-value a { color: var(--brand); }
.kv-value a:hover { text-decoration: underline; }

/* ============================================================================
   16. TOTALS STRIP
   ============================================================================ */
.totals-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.totals-cell { padding: 14px 12px; text-align: center; }
.totals-cell + .totals-cell { border-left: 1px solid var(--border-soft); }
.totals-label { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-tertiary); margin-bottom: 4px; text-transform: uppercase; }
.totals-value { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.totals-value.accent { color: var(--brand); font-size: 18px; }

/* ============================================================================
   17. HERO
   ============================================================================ */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 16px;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute; top: 0; left: 24px; right: 24px;
  height: 2px;
  background: var(--brand);
  border-radius: 0 0 2px 2px;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero-amount {
  font-size: 34px; font-weight: 600; letter-spacing: -.025em;
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.hero-amount .currency { font-size: 16px; color: var(--text-tertiary); font-weight: 500; }
.hero-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.hero-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================================================
   18. FORMS
   ============================================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.single { grid-template-columns: 1fr; }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .form-grid, .form-grid.three { grid-template-columns: 1fr; } }

.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .form-cols { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--text-tertiary); text-transform: uppercase;
}
.field-label .req { color: var(--danger); }

.input, .select, .textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 11px;
  font-size: 14px;
  color: var(--text-primary);
  transition: all var(--duration);
  outline: none;
  width: 100%;
  height: 36px;
}
.textarea { height: auto; min-height: 80px; resize: vertical; line-height: 1.5; padding: 10px 11px; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-alt);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.field-help { font-size: 12px; color: var(--text-tertiary); }
.field-error { font-size: 12px; color: var(--danger); }

.switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0;
  background: var(--ink-300);
  border-radius: var(--radius-full);
  transition: background var(--duration);
  cursor: pointer;
}
.switch span::before {
  content: ''; position: absolute;
  height: 16px; width: 16px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--duration);
  box-shadow: var(--shadow-xs);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::before { transform: translateX(16px); }

.toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.toggle-row label { font-size: 13px; color: var(--text-secondary); cursor: pointer; }

/* --- SLEEK CHOICE CARDS --- */
.radio-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 16px; 
}

.radio-card {
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl); /* Increased to 16px for a softer look */
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Hover State: Soft lift and shadow */
.radio-card:hover { 
    border-color: var(--border-strong); 
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
    transform: translateY(-2px);
}

/* Active State: Brand tint + crisp focus ring */
.radio-card.selected { 
    border-color: var(--brand); 
    background: var(--brand-50); 
    box-shadow: 0 0 0 1px var(--brand), 0 4px 12px rgba(83, 74, 183, 0.08); 
}

/* (Optional) Hide the actual radio input if you are using one inside */
.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

/* --- Sleek Inner Elements --- */
/* Apply these classes to the HTML inside your cards for the best effect */
.radio-card .rc-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--surface-alt);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; 
    margin-bottom: 12px;
    transition: all 0.25s ease;
}

/* Make the icon pop when the card is selected */
.radio-card.selected .rc-icon {
    background: var(--brand);
    color: var(--surface);
    box-shadow: 0 4px 10px rgba(83, 74, 183, 0.3);
}

.radio-card .rc-title { 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--text-primary); 
    margin-bottom: 2px; 
}

.radio-card .rc-desc { 
    font-size: 12px; 
    color: var(--text-tertiary); 
    line-height: 1.4; 
}

.upload-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  text-align: center;
  background: var(--surface-alt);
  transition: all var(--duration);
  cursor: pointer;
  position: relative;
}
.upload-zone:hover { border-color: var(--brand); background: var(--brand-50); }
.upload-zone.dragover { border-color: var(--brand); background: var(--brand-100); }
.upload-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-100);
  color: var(--brand);
  display: grid; place-items: center;
  margin: 0 auto 8px;
  font-size: 18px;
}
.upload-text { font-size: 13px; font-weight: 500; }
.upload-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* — Credit / Expense segmented toggle — */
.credit-toggle-wrap { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-alt); }
.credit-toggle-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--duration); color: var(--text-secondary); border: none; background: transparent; font-family: inherit; }
.credit-toggle-opt i { font-size: 15px; }
.credit-toggle-opt + .credit-toggle-opt { border-left: 1px solid var(--border); }
.credit-toggle-opt[data-value="expense"].active { background: var(--brand-100); color: var(--brand-700); font-weight: 600; }
.credit-toggle-opt[data-value="credit"].active  { background: var(--success-bg); color: var(--success-fg); font-weight: 600; }

.credit-mode-active .exp-input#amount { color: var(--success) !important; }
.credit-mode-active .gst-cell-val.total { color: var(--success) !important; }
.credit-mode-active .gst-strip { border-color: var(--success-border); }

.credit-hint { display: none; font-size: 11px; color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-border); border-radius: var(--radius-sm); padding: 5px 10px; margin-top: 8px; text-align: center; }
.credit-mode-active .credit-hint { display: block; }

/* ============================================================================
   19. TABS
   ============================================================================ */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--duration);
  background: none;
  border-top: none; border-left: none; border-right: none;
  cursor: pointer;
}
.tab i { font-size: 14px; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab .count {
  font-size: 11px;
  background: var(--ink-100);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-weight: 500;
}
.tab.active .count { background: var(--brand-100); color: var(--brand-700); }

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fade-in var(--duration-md) var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
   20. TIMELINE
   ============================================================================ */
.timeline { padding: 6px 16px 14px; }
.timeline-item { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute; left: 11px; top: 26px; bottom: 0;
  width: 1px; background: var(--border);
}
.timeline-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0; font-size: 10px; color: #fff;
}
.dot-success { background: var(--success); }
.dot-warning { background: var(--warning); }
.dot-danger  { background: var(--danger);  }
.dot-info    { background: var(--info);    }
.dot-neutral { background: var(--ink-400); }
.timeline-body { padding-top: 2px; min-width: 0; flex: 1; }
.timeline-action { font-size: 13px; font-weight: 500; }
.timeline-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }
.timeline-note {
  font-size: 12px; color: var(--text-secondary);
  background: var(--surface-alt);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  margin-top: 6px;
  border-left: 2px solid var(--border-strong);
}

/* ============================================================================
   21. FILE ROWS
   ============================================================================ */
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.file-row + .file-row { border-top: 1px solid var(--border-soft); }
.file-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0;
}
.file-icon.pdf { background: var(--danger-bg); color: var(--danger-fg); }
.file-icon.img { background: var(--info-bg); color: var(--info-fg); }
.file-icon.doc { background: var(--brand-100); color: var(--brand-700); }
.file-body { flex: 1; min-width: 0; }
.file-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: 11px; color: var(--text-tertiary); }

/* ============================================================================
   22. ALERTS
   ============================================================================ */
.alert {
  border-radius: var(--radius-lg);
  padding: 11px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 16px;
  font-size: 13px;
  border: 1px solid transparent;
}
.alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-fg);  }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-fg);    }

/* ============================================================================
   23. PROGRESS
   ============================================================================ */
.progress-track {
  background: var(--ink-100);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: var(--radius-full);
  transition: width .4s var(--ease);
}
.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }
.progress-fill.danger  { background: var(--danger);  }

/* ============================================================================
   24. EMPTY STATE
   ============================================================================ */
.empty {
  text-align: center;
  padding: 56px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.empty-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  color: var(--text-tertiary);
  display: grid; place-items: center;
  font-size: 22px;
  margin: 0 auto 14px;
}
.empty-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.empty-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }

/* ============================================================================
   25. DATA TABLE
   ============================================================================ */
.data-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 13px;
}
.data-table thead th {
  background: var(--surface-alt);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-alt); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .actions { width: 1%; white-space: nowrap; }

/* ============================================================================
   26. CAPACITOR / NATIVE PASS-THROUGH
   --------------------------------------------------------------------------
   Uses min-height (not fixed height) so drawers can still expand if a native
   page mounts the topbar in a visible tree. Today .web-ui is teleported off-
   screen on native, so this is mostly defensive.
   ============================================================================ */
/* --- Force single-column on native (webview may exceed 900px) --- */
html.is-native .app-shell {
    display: block;
}

html.is-native .app-sidebar {
    display: none;
}

html.is-native .app-topbar {
  padding-top: var(--safe-top);
  min-height: calc(var(--topbar-height) + var(--safe-top));
}

html.is-native .topbar {
  position: relative;
  display: flex !important;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}

html.is-native .topbar-mobile-toggle,
html.is-native .topbar-spacer,
html.is-native .topbar-search,
html.is-native .topbar > div[style*="width:1px"],
html.is-native .topbar .avatar,
html.is-native .topbar .dropdown {
  display: none !important;
}

html.is-native .topbar-page-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.is-native .topbar-actions.me-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  margin-right: 0;
  position: static;
}

html.is-native .topbar-actions:not(.me-2) {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  position: static;
}
/* ============================================================================
   Native App Header / Content Layout
   ============================================================================ */

html.is-native .native-ui {
  min-height: 100vh;
  background: var(--bg);
}

html.is-native .n-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-top: var(--safe-top);
}

html.is-native .n-nav-inner {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

html.is-native .n-nav-title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

html.is-native .n-content {
  padding-top: calc(56px + var(--safe-top));
  padding-bottom: calc(88px + var(--safe-bottom));
  background: var(--bg);
}

/* ============================================================================
   27. UTILITIES
   ============================================================================ */
.muted { color: var(--text-tertiary); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flex { display: flex; }
.flex-1 { flex: 1; min-width: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.hidden { display: none !important; }

/* ============================================================================
   28. SCROLLBAR
   ============================================================================ */
@media (min-width: 901px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 5px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
}

/* ============================================================================
   29. STATEFUL BUTTONS
   ============================================================================ */
.stateful-btn {
    position: relative;
    transition: all var(--duration-md) var(--ease);
}
.stateful-btn .icon-processing,
.stateful-btn .icon-success,
.stateful-btn .icon-error { display: none; }

.stateful-btn.is-processing {
    background-color: var(--warning-bg) !important;
    border-color: var(--warning-border) !important;
    color: var(--warning-fg) !important;
    pointer-events: none;
}
.stateful-btn.is-processing .icon-idle,
.stateful-btn.is-processing .btn-text { display: none !important; }
.stateful-btn.is-processing .icon-processing { display: inline-block; animation: spin 1s linear infinite; }

.stateful-btn.is-success {
    background-color: var(--success-bg) !important;
    border-color: var(--success-border) !important;
    color: var(--success-fg) !important;
    pointer-events: none;
}
.stateful-btn.is-success .icon-idle,
.stateful-btn.is-success .icon-processing,
.stateful-btn.is-success .icon-error,
.stateful-btn.is-success .btn-text { display: none !important; }
.stateful-btn.is-success .icon-success { display: inline-block; transform: scale(1.2); }

.stateful-btn.is-error {
    background-color: var(--danger-bg) !important;
    border-color: var(--danger-border) !important;
    color: var(--danger-fg) !important;
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
.stateful-btn.is-error .icon-idle,
.stateful-btn.is-error .icon-processing,
.stateful-btn.is-error .icon-success,
.stateful-btn.is-error .btn-text { display: none !important; }
.stateful-btn.is-error .icon-error { display: inline-block; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ============================================================================
   30. NATIVE TOAST
   ============================================================================ */
.native-modal-backdrop {
    position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,0.6);
    display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.native-modal-backdrop.show { display: flex; animation: fade-in 0.2s var(--ease); }
.native-modal-content {
    background: var(--surface); width: 100%; max-width: 500px; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(10px);
    animation: slide-up 0.3s var(--ease) forwards; margin: 16px;
}
@keyframes slide-up { to { transform: translateY(0); } }

@media (max-width: 600px) {
    .native-modal-backdrop { align-items: flex-end; }
    .native-modal-content { border-radius: var(--ui-sheet-radius, 24px) var(--ui-sheet-radius, 24px) 0 0; margin: 0; max-width: 100%; }
}

.native-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
    z-index: 10000; padding: 12px 20px; border-radius: var(--radius-lg); font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg);
    opacity: 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.native-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ============================================================================
   31. RESPONSIVE TOP BAR
   ============================================================================ */
@media (max-width: 768px) {
    .topbar-search,
    .topbar .avatar { display: none !important; }
    .topbar-page-title {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
}

/* ============================================================================
   32. PUSH-DOWN DRAWERS
   --------------------------------------------------------------------------
   Drawers are siblings of .topbar inside .app-topbar. Because section 3
   sets grid-template-rows to `auto 1fr`, the topbar row grows when a
   drawer opens — pushing .app-content down naturally.

Borders apply ONLY when .show is active. Without this, a collapsed
   drawer keeps a `border-bottom: Npx solid transparent` that leaves a
   residual line below the topbar.
   ============================================================================ */

/* --- BASE DRAWER ------------------------------------------------------- */
.push-down-drawer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--surface);
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.25s ease,
                background 0.25s ease;
}

.push-down-drawer.show {
    max-height: 240px;
    opacity: 1;
}

.push-down-drawer > .drawer-inner {
    overflow: hidden;
}

/* --- GLOBAL DRAWER (Flash + Confirmation) ------------------------------ */
.global-drawer { background: var(--surface); }

.global-drawer.show.state-success {
    background: var(--success-bg);
    border-bottom: 3px solid var(--success);
}
.global-drawer.show.state-error {
    background: var(--danger-bg);
    border-bottom: 3px solid var(--danger);
}
.global-drawer.show.state-warning {
    background: var(--warning-bg);
    border-bottom: 3px solid var(--warning);
}
.global-drawer.show.state-info {
    background: var(--info-bg);
    border-bottom: 3px solid var(--info);
}

.global-drawer .drawer-inner { padding: 14px 20px; }

.global-drawer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 1.45;
}

.global-drawer-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.global-drawer.state-success .global-drawer-icon,
.global-drawer.state-success .global-drawer-content { color: var(--success-fg); }
.global-drawer.state-error   .global-drawer-icon,
.global-drawer.state-error   .global-drawer-content { color: var(--danger-fg); }
.global-drawer.state-warning .global-drawer-icon,
.global-drawer.state-warning .global-drawer-content { color: var(--warning-fg); }
.global-drawer.state-info    .global-drawer-icon,
.global-drawer.state-info    .global-drawer-content { color: var(--info-fg); }

.global-drawer-actions {
    margin-top: 12px;
    display: none;
    gap: 10px;
    justify-content: center;
}

.global-drawer.is-confirm .global-drawer-actions {
    display: flex;
}

/* --- SELECTION DRAWER (Purple Bulk-Action Bar) ------------------------- */
.selection-drawer { background: var(--brand); }
.selection-drawer.show { border-bottom: 1px solid var(--brand-700); }

.selection-drawer .drawer-inner { padding: 12px 20px; }

.selection-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.selection-count {
    color: white;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}

.selection-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.selection-actions .btn {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 13px;
}

.selection-actions .btn-light {
    background: white;
    color: var(--brand);
    border: none;
}
.selection-actions .btn-light:hover { background: rgba(255, 255, 255, 0.92); }

.selection-actions .btn-danger {
    background: var(--danger);
    color: white;
    border: none;
}
.selection-actions .btn-danger:hover:not(:disabled) { background: #B91C1C; }
.selection-actions .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- MOBILE SEARCH DRAWER ---------------------------------------------- */
.topbar-mobile-search-btn {
    display: none;
    color: var(--text-secondary);
    font-size: 18px;
}

.mobile-search-drawer { background: var(--surface); }
.mobile-search-drawer.show { border-bottom: 1px solid var(--border); }
.mobile-search-drawer .drawer-inner { padding: 12px 20px; }

.mobile-search-drawer input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 15px;
    outline: none;
    transition: border-color var(--duration), box-shadow var(--duration);
}

.mobile-search-drawer input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}

/* --- MOBILE RESPONSIVE ------------------------------------------------- */
@media (max-width: 768px) {
    .topbar-mobile-search-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.global-drawer .drawer-inner { padding: 12px 16px; }
    .global-drawer-content { font-size: 13px; }

.global-drawer-actions {
        width: 100%;
        flex-direction: row;
        gap: 8px;
    }
    .global-drawer-actions .btn {
        flex: 1;
        justify-content: center;
    }

.selection-drawer .drawer-inner { padding: 12px 16px; }
    .selection-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .selection-count { text-align: center; }
    .selection-actions {
        width: 100%;
        gap: 8px;
    }
    .selection-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* Native (Capacitor) safe-area padding */
html.is-native .push-down-drawer .drawer-inner {
    padding-left: calc(20px + var(--safe-left, 0px));
    padding-right: calc(20px + var(--safe-right, 0px));
}

.app-content {
    position: relative;
}

/* ============================================================================
   34. RECONCILIATION REVIEW
   --------------------------------------------------------------------------
   Covers: reconciliation_review.php — two-panel exception-resolution UI,
   metrics ribbon, Smart Prepare card, candidate matching, AI decision blocks,
   allocation builder, fee resolver, receipt proof, bottom action bar.

Replaces ALL inline <style> from reconciliation_review.php.
   Delete the entire <style>…</style> block and the :root override.
   ============================================================================ */

/* -- 34.1  Page Layout --------------------------------------------------- */
.bfr-page {
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 18px 126px;
}
.bfr-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.bfr-title h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--text-primary);
}
.bfr-title p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}
.bfr-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* -- 34.2  Buttons (reconciliation-specific variants) -------------------- */
/*    Uses prod_core .btn base (§6). These add recon-specific colors.       */
.bfr-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 9px 13px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    font-family: var(--font-sans);
}
.bfr-btn:hover { border-color: var(--border-strong); }
.bfr-btn:disabled, .bfr-btn.disabled { opacity: .55; cursor: not-allowed; }
.bfr-btn i { font-size: 15px; }

.bfr-btn-primary {
    background: var(--brand);
    color: var(--text-on-brand);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(83, 74, 183, .15);
}
.bfr-btn-primary:hover { background: var(--brand-700); }

.bfr-btn-green {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.bfr-btn-green:hover { background: #047857; }

.bfr-btn-amber {
    background: var(--surface);
    color: var(--warning-fg);
    border-color: var(--warning-border);
}
.bfr-btn-amber:hover { background: var(--warning-bg); }

.bfr-btn-danger {
    background: var(--surface);
    color: var(--danger-fg);
    border-color: var(--danger-border);
}
.bfr-btn-danger:hover { background: var(--danger-bg); }

/* -- 34.3  Summary Card (file strip) ------------------------------------ */
.bfr-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}
.bfr-file-strip {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr .8fr;
    gap: 12px;
}
.bfr-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-right: 1px solid var(--border-soft);
}
.bfr-file-item:last-child { border-right: 0; }
.bfr-file-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    background: var(--brand-100);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.bfr-file-icon.green { background: var(--success-bg); color: var(--success); }
.bfr-file-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: .06em;
}
.bfr-file-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* -- 34.4  Metrics Ribbon ------------------------------------------------ */
.bfr-metrics {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.bfr-metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 14px;
    box-shadow: var(--shadow-xs);
    display: flex;
    gap: 12px;
    align-items: center;
}
.bfr-metric-ico {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
.bfr-metric-ico.purple { background: var(--brand-100); color: var(--brand); }
.bfr-metric-ico.green  { background: var(--success-bg); color: var(--success); }
.bfr-metric-ico.blue   { background: var(--info-bg); color: var(--info); }
.bfr-metric-ico.amber  { background: var(--warning-bg); color: var(--warning); }
.bfr-metric-ico.gray   { background: var(--neutral-bg); color: var(--neutral-fg); }
.bfr-metric-num {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
}
.bfr-metric-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* -- 34.5  Two-Panel Grid ------------------------------------------------ */
.bfr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr);
    gap: 18px;
}
.bfr-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* -- 34.6  Tabs (filter bar inside left panel) --------------------------- */
.bfr-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.bfr-tabs::-webkit-scrollbar { display: none; }
.bfr-tab {
    padding: 12px 16px;
    border: 0;
    background: transparent;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color var(--duration);
    font-family: var(--font-sans);
}
.bfr-tab:hover { color: var(--text-primary); }
.bfr-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}
.bfr-tab .pill {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--brand-100);
    color: var(--brand-700);
    margin-left: 6px;
    font-weight: 500;
}

/* -- 34.7  Transaction List ---------------------------------------------- */
.bfr-list {
    padding: 12px;
    max-height: 680px;
    overflow-y: auto;
}
.bfr-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: 44px 1fr auto 118px 32px;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    background: var(--surface);
    transition: border-color var(--duration), box-shadow var(--duration);
}
.bfr-row:hover,
.bfr-row.selected {
    border-color: var(--brand);
    box-shadow: 0 4px 12px rgba(83, 74, 183, .06);
}
.bfr-row-ico {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-size: 18px;
}
.bfr-row-ico.purple { background: var(--brand-100); color: var(--brand); }
.bfr-row-ico.green  { background: var(--success-bg); color: var(--success); }
.bfr-row-ico.blue   { background: var(--info-bg); color: var(--info); }
.bfr-row-ico.amber  { background: var(--warning-bg); color: var(--warning); }
.bfr-row-ico.gray   { background: var(--neutral-bg); color: var(--neutral-fg); }

.bfr-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}
.bfr-row-sub {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.35;
}

/* -- 34.8  Amount Display ------------------------------------------------ */
.bfr-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.bfr-amount.credit { color: var(--success); }

/* -- 34.9  Badge (status pills) ------------------------------------------ */
.bfr-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-full);
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
}
.bfr-badge.auto      { background: var(--success-bg); color: var(--success-fg); }
.bfr-badge.review    { background: var(--warning-bg); color: var(--warning-fg); }
.bfr-badge.transfer  { background: var(--info-bg); color: var(--info-fg); }
.bfr-badge.duplicate { background: #FFF7ED; color: #C2410C; }
.bfr-badge.submitted { background: var(--brand-100); color: var(--brand-700); }
.bfr-badge.gray      { background: var(--neutral-bg); color: var(--neutral-fg); }

/* -- 34.10  Detail Panel (right side) ------------------------------------ */
.bfr-detail {
    padding: 20px;
    max-height: 760px;
    overflow-y: auto;
}
.bfr-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.bfr-detail-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.2;
}
.bfr-detail-amount {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}
.bfr-detail-amount.credit { color: var(--success); }
.bfr-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

/* -- 34.11  Content Boxes ------------------------------------------------ */
.bfr-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--surface);
}
.bfr-box.soft { background: var(--surface-alt); }
.bfr-box h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}
.bfr-box h3 i { font-size: 15px; color: var(--text-tertiary); }

/* -- 34.12  Key/Value Display -------------------------------------------- */
.bfr-kv {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 6px 12px;
    font-size: 13px;
}
.bfr-kv div:nth-child(odd) {
    color: var(--text-secondary);
    font-weight: 500;
}
.bfr-kv div:nth-child(even) {
    color: var(--text-primary);
    font-weight: 600;
}

/* -- 34.13  Mini Cards (candidates, linked sources) ---------------------- */
.bfr-card-mini {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    margin-bottom: 10px;
    background: var(--surface);
}
.bfr-card-mini.good {
    border-color: var(--success-border);
    background: var(--surface);
}
.bfr-card-mini.blocked {
    background: var(--surface-alt);
    opacity: .82;
}
.bfr-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}
.bfr-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.bfr-card-title-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.bfr-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 3px;
}

/* -- 34.14  Score Badge -------------------------------------------------- */
.bfr-score {
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 4px 9px;
    white-space: nowrap;
    background: var(--brand-100);
    color: var(--brand-700);
}
.bfr-score.high { background: var(--success-bg); color: var(--success-fg); }
.bfr-score.low  { background: var(--warning-bg); color: var(--warning-fg); }

/* -- 34.15  Note / Help Text --------------------------------------------- */
.bfr-note {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.bfr-help-text {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 4px;
}

/* -- 34.16  Chips & Flags ------------------------------------------------ */
.bfr-chipline {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.bfr-chip {
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 4px 8px;
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.bfr-chip.good {
    background: var(--success-bg);
    color: var(--success-fg);
    border-color: var(--success-border);
}
.bfr-flags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.bfr-flag {
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 3px 7px;
    background: var(--neutral-bg);
    color: var(--neutral-fg);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bfr-flag::before {
    content: '\2713';
    color: var(--success);
    font-weight: 700;
}

/* -- 34.17  Type Pill (EXPENSE / INVOICE label) -------------------------- */
.bfr-type-pill {
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 3px 7px;
    background: var(--brand-100);
    color: var(--brand-700);
}
.bfr-type-pill.invoice { background: var(--info-bg); color: var(--info-fg); }
.bfr-type-pill.expense { background: var(--success-bg); color: var(--success-fg); }

/* -- 34.18  Record Link -------------------------------------------------- */
.bfr-record-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.bfr-record-link:hover {
    text-decoration: underline;
    color: var(--brand-700);
}

/* -- 34.19  Form Elements ------------------------------------------------ */
.bfr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.bfr-field label {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 5px;
}
.bfr-field input,
.bfr-field select,
.bfr-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px 11px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface);
    font-family: var(--font-sans);
    transition: border-color var(--duration), box-shadow var(--duration);
    outline: none;
}
.bfr-field input:focus,
.bfr-field select:focus,
.bfr-field textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.bfr-field textarea {
    min-height: 78px;
    resize: vertical;
}
.bfr-field select option { font-weight: 500; }

/* -- 34.20  Bottom Action Bar -------------------------------------------- */
.bfr-bottom {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + var(--safe-bottom));
    background: var(--surface);
    border: 2px solid var(--brand-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
    z-index: 50;
}
.bfr-bottom-main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bfr-bottom-ico {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background: var(--brand-100);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
.bfr-bottom-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.bfr-bottom-sub {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
}

/* -- 34.21  Empty State -------------------------------------------------- */
.bfr-empty {
    padding: 36px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
}

/* -- 34.22  Toast -------------------------------------------------------- */
.bfr-toast {
    position: fixed;
    top: 18px;
    right: 18px;
    background: var(--ink-900);
    color: #fff;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 13px;
    z-index: 9999;
    display: none;
    box-shadow: var(--shadow-lg);
}

/* -- 34.23  Modal -------------------------------------------------------- */
.bfr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}
.bfr-modal {
    width: min(560px, calc(100vw - 32px));
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 22px;
}
.bfr-modal h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--text-primary);
}
.bfr-modal p {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}
.bfr-modal.wide {
    width: min(980px, calc(100vw - 32px));
}
.bfr-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 12px;
}

/* -- 34.24  Smart Prepare Card ------------------------------------------- */
.bfr-smart-card {
    background: var(--surface);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-xl);
    padding: 15px 16px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.bfr-smart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-900);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bfr-smart-sub {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 4px;
}
.bfr-smart-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bfr-smart-pill {
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 4px 9px;
    background: var(--brand-100);
    color: var(--brand-700);
    border: 1px solid var(--brand-200);
}
.bfr-smart-pill.good {
    background: var(--success-bg);
    color: var(--success-fg);
    border-color: var(--success-border);
}
.bfr-smart-pill.warn {
    background: var(--warning-bg);
    color: var(--warning-fg);
    border-color: var(--warning-border);
}

/* -- 34.25  AI Decision Block -------------------------------------------- */
.bfr-ai-decision {
    border-color: var(--brand-200);
    background: var(--brand-50);
}
.bfr-ai-why {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5px;
}
.bfr-ai-why li {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    gap: 7px;
    align-items: flex-start;
}
.bfr-ai-why i {
    color: var(--success);
    margin-top: 1px;
    font-size: 13px;
}

/* Smart prepare row indicator (in transaction list) */
.bfr-row-smart {
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 3px 7px;
    background: var(--brand-50);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
}

/* -- 34.26  Receipt Proof ------------------------------------------------ */
.bfr-receipt-thumb {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-lg);
}
.bfr-receipt-thumb-ico {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background: var(--success-bg);
    color: var(--success);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}
.bfr-receipt-proof-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px;
    font-size: 13px;
}
.bfr-preview-frame {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

/* -- 34.27  Responsive --------------------------------------------------- */
@media (max-width: 1180px) {
    .bfr-metrics { grid-template-columns: repeat(4, 1fr); }
    .bfr-grid { grid-template-columns: 1fr; }
    .bfr-detail { max-height: none; }
    .bfr-file-strip { grid-template-columns: 1fr 1fr; }
    .bfr-file-item { border-right: 0; }
    .bfr-bottom { grid-template-columns: 1fr; }
    .bfr-bottom .bfr-btn { width: 100%; }
    .bfr-smart-card { display: block; }
    .bfr-smart-pills { justify-content: flex-start; margin-top: 10px; }
}

@media (max-width: 680px) {
    .bfr-page { padding: 14px 12px 190px; }
    .bfr-top { flex-direction: column; align-items: stretch; }
    .bfr-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .bfr-metrics { grid-template-columns: 1fr 1fr; }
    .bfr-file-strip { grid-template-columns: 1fr; }
    .bfr-row { grid-template-columns: 40px 1fr auto; }
    .bfr-row .bfr-badge { grid-column: 2 / -1; width: max-content; }
    .bfr-row .bi-chevron-right { display: none; }
    .bfr-bottom { left: 10px; right: 10px; }
    .bfr-form-grid,
    .bfr-detail-actions { grid-template-columns: 1fr; }
    .bfr-title h1 { font-size: 19px; }
    .bfr-metric-num { font-size: 18px; }
    .bfr-detail-title { font-size: 17px; }
    .bfr-detail-amount { font-size: 19px; }
}
/* ==========================================================================
   35. NATIVE CAPACITOR APP BARS (TOP & BOTTOM)
   Isolated styles for perfect native UI using safe-area-insets
   ========================================================================== */

/* 1. HIDE ON DESKTOP BROWSER BY DEFAULT */
.native-only {
    display: none !important;
}

/* 2. SHOW ONLY IN CAPACITOR APP */
html.is-native .native-only,
body.is-native .native-only {
    display: block !important;
}

/* 3. NATIVE UI FONTS */
.n-top-bar-wrapper,
.n-bottom-bar-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
html.platform-android .n-top-bar-wrapper,
html.platform-android .n-bottom-bar-wrapper { 
    font-family: 'Roboto', sans-serif; 
}

/* --- Top Navigation Bar --- */
.n-top-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 990;
    height: calc(44px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 0.5px solid rgba(60,60,67,0.15);
    display: flex; align-items: center; justify-content: space-between;
    padding-left: 16px; padding-right: 16px;
}
html.platform-android .n-top-bar { 
    background: #fff; backdrop-filter: none; box-shadow: 0 2px 10px rgba(0,0,0,0.06); border-bottom: none; 
    height: calc(56px + env(safe-area-inset-top, 0px));
}
.n-top-title {
    font-size: 17px; font-weight: 600; color: #1C1C1E;
    flex: 1; text-align: center;
}
html.platform-android .n-top-title { 
    font-size: 20px; font-weight: 500; text-align: left; padding-left: 16px; 
}
.n-top-btn {
    color: var(--brand, #534AB7); font-size: 20px; text-decoration: none; 
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
}
.n-top-spacer { width: 32px; }

/* --- Bottom Tab Bar --- */
.n-tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 990;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 0.5px solid rgba(60,60,67,0.15);
    display: flex; align-items: stretch;
}
html.platform-android .n-tab-bar { 
    background: #fff; backdrop-filter: none; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); border-top: none; 
}

.n-tab-item {
    touch-action: manipulation;
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none !important; border: none; background: transparent; cursor: pointer; padding: 0;
    color: #8E8E93; transition: color 0.15s; -webkit-tap-highlight-color: transparent; position: relative;
}
.n-tab-item i { font-size: 22px; transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.n-tab-item span { font-size: 10px; font-weight: 500; }
.n-tab-item.active { color: var(--brand, #534AB7); }
.n-tab-item.active i { transform: translateY(-2px); }
.n-tab-item::after {
    content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 2px; background: var(--brand, #534AB7);
    transform: scale(0); opacity: 0; transition: transform 0.25s, opacity 0.2s;
}
.n-tab-item.active::after { transform: scale(1); opacity: 1; }
html.platform-android .n-tab-item::after { display: none; }
html.platform-android .n-tab-item.active i { 
    background: var(--brand-100, #EEEDFE); color: var(--brand, #534AB7); border-radius: 14px; padding: 4px 16px; transform: translateY(0); 
}
.n-tab-item:active i { opacity: 0.7; transform: scale(0.9); }

/* --- Bottom Sheets --- */
.n-sheet-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 995;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.n-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.n-sheet {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 996;
    background: #F2F2F7;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    max-height: 85vh;
}
.n-sheet.open { transform: translateY(0); }
.n-sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: rgba(60,60,67,0.3); margin: 12px auto; flex-shrink: 0; }
.n-sheet-content { overflow-y: auto; padding: 10px 16px 20px; -webkit-overflow-scrolling: touch; }
.n-menu-list { background: #FFFFFF; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.n-menu-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none !important; color: #1C1C1E !important; border-bottom: 0.5px solid rgba(60,60,67,0.12); transition: background 0.15s; }
.n-menu-item:last-child { border-bottom: none; }
.n-menu-item:active { background: #F2F2F7; }
.n-menu-item.active-menu { background: #F8F9FA; }
.n-menu-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--brand-100, #EEEDFE); color: var(--brand, #534AB7); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.n-menu-text { flex: 1; font-size: 16px; font-weight: 500; }
.n-menu-arrow { color: #C7C7CC; font-size: 16px; }
.n-menu-danger .n-menu-icon { background: #FCEBEB; color: #FF3B30; }
.n-menu-danger .n-menu-text { color: #FF3B30 !important; }

/* 4. RECONCILIATION REVIEW UI OVERRIDES FOR NATIVE MODE */
/* Apply safe-area margins and push the submit bar up ONLY when viewed natively */
html.is-native .bfr-page {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
}
html.platform-android .bfr-page {
    padding-top: calc(68px + env(safe-area-inset-top, 0px)) !important;
}
html.is-native .bfr-bottom {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ============================================================================
   END
   ============================================================================ */
/* ============================================================================
   PHASE 6 — APPROVALS & SPENDING CONTROLS UI
   Add this after prod_core.css, or append it to /assets/css/prod_core.css.
   ============================================================================ */
.approval6-page{--approval6-gap:18px;}
.approval6-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.approval6-kicker{font-size:12px;font-weight:800;color:var(--brand);display:flex;gap:8px;align-items:center;margin-bottom:6px}
.approval6-title{font-size:28px;line-height:1.15;font-weight:900;color:var(--text-primary);margin:0 0 6px}
.approval6-subtitle{color:var(--text-secondary);font-size:14px;max-width:820px}
.approval6-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-xs);padding:18px}
.approval6-card.soft{background:linear-gradient(135deg,#fff,#fbfaff)}
.approval6-mode-wrap{margin-bottom:18px}.approval6-mode-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-bottom:12px}.approval6-mode-head h2{font-size:16px;font-weight:900;margin:0}.approval6-mode-head p{font-size:12px;color:var(--text-secondary);margin:3px 0 0}
.approval6-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.approval6-mode{position:relative;border:1px solid var(--border);background:#fff;border-radius:16px;padding:15px;display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;cursor:pointer;transition:all var(--duration) var(--ease);min-height:88px}.approval6-mode:hover{border-color:var(--brand-200);box-shadow:var(--shadow-sm)}.approval6-mode.active{border-color:var(--brand);background:linear-gradient(135deg,var(--brand-50),#fff);box-shadow:0 0 0 3px rgba(83,74,183,.10)}.approval6-mode-icon{width:46px;height:46px;border-radius:16px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px}.approval6-mode.active .approval6-mode-icon{background:var(--brand-100)}.approval6-mode-title{font-weight:900;color:var(--text-primary);font-size:14px}.approval6-mode-copy{font-size:12px;color:var(--text-secondary);line-height:1.35;margin-top:2px}.approval6-radio{width:18px;height:18px;border:2px solid var(--ink-300);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.approval6-mode.active .approval6-radio{border-color:var(--brand)}.approval6-mode.active .approval6-radio:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}.approval6-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;line-height:1}.approval6-pill.brand{background:var(--brand-100);color:var(--brand)}.approval6-pill.success{background:var(--success-bg);color:var(--success-fg);border:1px solid var(--success-border)}.approval6-pill.warning{background:var(--warning-bg);color:var(--warning-fg);border:1px solid var(--warning-border)}.approval6-pill.danger{background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger-border)}.approval6-pill.info{background:var(--info-bg);color:var(--info-fg);border:1px solid var(--info-border)}
.approval6-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.approval6-stat{background:#fff;border:1px solid var(--border);border-radius:17px;padding:17px;display:flex;gap:13px;align-items:flex-start;min-height:116px}.approval6-stat-icon{width:42px;height:42px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.approval6-stat-icon.purple{background:var(--brand-50);color:var(--brand)}.approval6-stat-icon.green{background:var(--success-bg);color:var(--success)}.approval6-stat-icon.blue{background:var(--info-bg);color:var(--info)}.approval6-stat-icon.amber{background:var(--warning-bg);color:var(--warning)}.approval6-stat-label{font-size:12px;color:var(--text-secondary);font-weight:800;margin-bottom:3px}.approval6-stat-value{font-size:18px;font-weight:900;color:var(--text-primary)}.approval6-stat-sub{font-size:12px;color:var(--text-secondary);margin-top:4px}.approval6-dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:6px}.approval6-dot.green{background:var(--success)}.approval6-dot.red{background:var(--danger)}.approval6-dot.purple{background:var(--brand)}
.approval6-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.approval6-section-title{font-size:16px;font-weight:900;margin:0}.approval6-section-copy{font-size:12px;color:var(--text-secondary);margin-top:2px}.approval6-settings-list{margin-top:14px;border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;background:#fff}.approval6-setting-row{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--border-soft)}.approval6-setting-row:last-child{border-bottom:0}.approval6-setting-icon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:16px}.approval6-setting-icon.green{background:var(--success-bg);color:var(--success)}.approval6-setting-icon.amber{background:var(--warning-bg);color:var(--warning)}.approval6-setting-icon.red{background:var(--danger-bg);color:var(--danger)}.approval6-setting-icon.blue{background:var(--info-bg);color:var(--info)}.approval6-setting-title{font-size:13px;font-weight:900;color:var(--text-primary)}.approval6-setting-copy{font-size:12px;color:var(--text-secondary);margin-top:1px}.approval6-control{display:flex;align-items:center;gap:8px}.approval6-value{min-width:130px;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;font-weight:800;color:var(--text-primary);display:flex;justify-content:space-between;align-items:center}.approval6-icon-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;transition:.15s}.approval6-icon-btn:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand)}.approval6-note{margin-top:12px;padding:11px 13px;border:1px solid var(--border-soft);border-radius:14px;background:var(--ink-50);font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:9px}.approval6-note a{color:var(--brand);font-weight:800;text-decoration:none}.approval6-side-list{display:grid;gap:9px;margin-top:13px}.approval6-rec{border:1px solid var(--border-soft);border-radius:14px;padding:12px;display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;background:#fff}.approval6-rec:hover{border-color:var(--brand-200);background:#fff}.approval6-rec-icon{width:36px;height:36px;border-radius:13px;display:flex;align-items:center;justify-content:center}.approval6-rec-title{font-weight:900;font-size:13px}.approval6-rec-copy{font-size:12px;color:var(--text-secondary);line-height:1.35}.approval6-rec-chevron{color:var(--text-tertiary)}.approval6-link{color:var(--brand);font-weight:900;font-size:13px;text-decoration:none}.approval6-roles{margin-top:13px;border:1px solid var(--border-soft);border-radius:16px;overflow:hidden}.approval6-role-head,.approval6-role-row{display:grid;grid-template-columns:1.3fr .7fr .9fr 1fr auto;gap:12px;align-items:center}.approval6-role-head{background:var(--ink-50);color:var(--text-secondary);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:10px 13px}.approval6-role-row{padding:12px 13px;border-top:1px solid var(--border-soft);font-size:13px}.approval6-role-name{display:flex;gap:10px;align-items:center;font-weight:900}.approval6-avatar-icon{width:34px;height:34px;border-radius:12px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center}.approval6-role-sub{font-size:11px;color:var(--text-secondary);font-weight:600;margin-top:1px}.approval6-toggle-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;border:1px solid var(--border-soft);border-radius:15px;padding:12px;background:#fff}.approval6-switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--ink-300);transition:.15s}.approval6-switch:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:.15s}.approval6-switch.on{background:var(--brand)}.approval6-switch.on:after{transform:translateX(18px)}.approval6-advanced{margin-top:18px}.approval6-advanced-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.approval6-advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.approval6-power{border:1px solid var(--border);border-radius:16px;background:#fff;padding:15px;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;color:inherit;text-decoration:none}.approval6-power:hover{background:var(--brand-50);border-color:var(--brand-200)}.approval6-power h3{font-size:13px;font-weight:900;margin:0 0 2px}.approval6-power p{font-size:12px;color:var(--text-secondary);line-height:1.35;margin:0}.approval6-accordion-closed{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:16px;background:#fff;padding:16px 18px}.approval6-pro{display:inline-flex;gap:6px;align-items:center;background:var(--brand-50);color:var(--brand);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}.approval6-wizard{max-width:1120px;margin:0 auto}.approval6-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 24px}.approval6-step{display:flex;gap:12px;align-items:flex-start;position:relative}.approval6-step:not(:last-child):after{content:"";height:1px;background:var(--border);position:absolute;left:46px;right:-12px;top:19px}.approval6-step-num{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-strong);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--text-secondary)}.approval6-step.active .approval6-step-num{background:var(--brand);color:#fff;border-color:var(--brand)}.approval6-step-title{font-weight:900}.approval6-step-copy{font-size:12px;color:var(--text-secondary)}.approval6-wizard-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.approval6-choice{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:14px;background:#fff;cursor:pointer}.approval6-choice.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(83,74,183,.10);background:linear-gradient(135deg,var(--brand-50),#fff)}.approval6-choice-icon{width:58px;height:58px;border-radius:20px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:24px}.approval6-choice-title{font-size:16px;font-weight:900;margin-bottom:3px}.approval6-choice-copy{font-size:13px;color:var(--text-secondary)}.approval6-evidence-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:18px;align-items:start}.approval6-timeline{position:relative;margin-top:10px}.approval6-timeline:before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--border)}.approval6-tl-row{position:relative;display:grid;grid-template-columns:48px 1fr;gap:14px;margin-bottom:12px}.approval6-tl-dot{position:relative;z-index:1;width:42px;height:42px;border-radius:16px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;border:1px solid var(--brand-100)}.approval6-tl-card{border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px}.approval6-tl-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.approval6-tl-title{font-weight:900}.approval6-tl-time{font-size:11px;color:var(--text-secondary);white-space:nowrap}.approval6-tl-copy{font-size:12px;color:var(--text-secondary);margin-top:4px}.approval6-details{margin-top:10px;border:1px solid var(--border-soft);border-radius:13px;padding:11px;background:var(--ink-50);font-size:12px}.approval6-mini-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}.approval6-mini-kv b{display:block;font-size:11px;text-transform:uppercase;color:var(--text-tertiary);letter-spacing:.04em}.approval6-empty{border:1px dashed var(--border-strong);border-radius:16px;padding:24px;text-align:center;color:var(--text-secondary);background:var(--ink-50)}.approval6-toast{position:fixed;right:24px;top:calc(var(--topbar-height) + 16px);z-index:9999;border-radius:14px;background:var(--ink-900);color:white;padding:12px 15px;box-shadow:var(--shadow-lg);display:none;max-width:360px}.approval6-toast.show{display:block;animation:approval6Toast .18s ease-out}.approval6-toast.error{background:var(--danger-fg)}.approval6-toast.success{background:var(--success-fg)}@keyframes approval6Toast{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1200px){.approval6-main-grid,.approval6-wizard-grid,.approval6-evidence-layout{grid-template-columns:1fr}.approval6-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.approval6-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.approval6-hero{flex-direction:column}.approval6-roles{overflow:auto}.approval6-role-head,.approval6-role-row{min-width:760px}}
@media(max-width:760px){.approval6-title{font-size:24px}.approval6-modes,.approval6-summary,.approval6-advanced-grid,.approval6-steps{grid-template-columns:1fr}.approval6-mode,.approval6-choice{grid-template-columns:44px 1fr}.approval6-radio{grid-column:2;justify-self:end}.approval6-setting-row{grid-template-columns:38px 1fr}.approval6-control{grid-column:1 / -1}.approval6-value{width:100%}.approval6-step:not(:last-child):after{display:none}}

/* ============================================================================
   PHASE 6 — APPROVALS & SPENDING CONTROLS UI
   Add this after prod_core.css, or append it to /assets/css/prod_core.css.
   ============================================================================ */
.approval6-page{--approval6-gap:18px;}
.approval6-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.approval6-kicker{font-size:12px;font-weight:800;color:var(--brand);display:flex;gap:8px;align-items:center;margin-bottom:6px}
.approval6-title{font-size:28px;line-height:1.15;font-weight:900;color:var(--text-primary);margin:0 0 6px}
.approval6-subtitle{color:var(--text-secondary);font-size:14px;max-width:820px}
.approval6-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-xs);padding:18px}
.approval6-card.soft{background:linear-gradient(135deg,#fff,#fbfaff)}
.approval6-mode-wrap{margin-bottom:18px}.approval6-mode-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-bottom:12px}.approval6-mode-head h2{font-size:16px;font-weight:900;margin:0}.approval6-mode-head p{font-size:12px;color:var(--text-secondary);margin:3px 0 0}
.approval6-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.approval6-mode{position:relative;border:1px solid var(--border);background:#fff;border-radius:16px;padding:15px;display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;cursor:pointer;transition:all var(--duration) var(--ease);min-height:88px}.approval6-mode:hover{border-color:var(--brand-200);box-shadow:var(--shadow-sm)}.approval6-mode.active{border-color:var(--brand);background:linear-gradient(135deg,var(--brand-50),#fff);box-shadow:0 0 0 3px rgba(83,74,183,.10)}.approval6-mode-icon{width:46px;height:46px;border-radius:16px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px}.approval6-mode.active .approval6-mode-icon{background:var(--brand-100)}.approval6-mode-title{font-weight:900;color:var(--text-primary);font-size:14px}.approval6-mode-copy{font-size:12px;color:var(--text-secondary);line-height:1.35;margin-top:2px}.approval6-radio{width:18px;height:18px;border:2px solid var(--ink-300);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.approval6-mode.active .approval6-radio{border-color:var(--brand)}.approval6-mode.active .approval6-radio:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}.approval6-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;line-height:1}.approval6-pill.brand{background:var(--brand-100);color:var(--brand)}.approval6-pill.success{background:var(--success-bg);color:var(--success-fg);border:1px solid var(--success-border)}.approval6-pill.warning{background:var(--warning-bg);color:var(--warning-fg);border:1px solid var(--warning-border)}.approval6-pill.danger{background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger-border)}.approval6-pill.info{background:var(--info-bg);color:var(--info-fg);border:1px solid var(--info-border)}
.approval6-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.approval6-stat{background:#fff;border:1px solid var(--border);border-radius:17px;padding:17px;display:flex;gap:13px;align-items:flex-start;min-height:116px}.approval6-stat-icon{width:42px;height:42px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.approval6-stat-icon.purple{background:var(--brand-50);color:var(--brand)}.approval6-stat-icon.green{background:var(--success-bg);color:var(--success)}.approval6-stat-icon.blue{background:var(--info-bg);color:var(--info)}.approval6-stat-icon.amber{background:var(--warning-bg);color:var(--warning)}.approval6-stat-label{font-size:12px;color:var(--text-secondary);font-weight:800;margin-bottom:3px}.approval6-stat-value{font-size:18px;font-weight:900;color:var(--text-primary)}.approval6-stat-sub{font-size:12px;color:var(--text-secondary);margin-top:4px}.approval6-dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:6px}.approval6-dot.green{background:var(--success)}.approval6-dot.red{background:var(--danger)}.approval6-dot.purple{background:var(--brand)}
.approval6-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.approval6-section-title{font-size:16px;font-weight:900;margin:0}.approval6-section-copy{font-size:12px;color:var(--text-secondary);margin-top:2px}.approval6-settings-list{margin-top:14px;border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;background:#fff}.approval6-setting-row{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--border-soft)}.approval6-setting-row:last-child{border-bottom:0}.approval6-setting-icon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:16px}.approval6-setting-icon.green{background:var(--success-bg);color:var(--success)}.approval6-setting-icon.amber{background:var(--warning-bg);color:var(--warning)}.approval6-setting-icon.red{background:var(--danger-bg);color:var(--danger)}.approval6-setting-icon.blue{background:var(--info-bg);color:var(--info)}.approval6-setting-title{font-size:13px;font-weight:900;color:var(--text-primary)}.approval6-setting-copy{font-size:12px;color:var(--text-secondary);margin-top:1px}.approval6-control{display:flex;align-items:center;gap:8px}.approval6-value{min-width:130px;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;font-weight:800;color:var(--text-primary);display:flex;justify-content:space-between;align-items:center}.approval6-icon-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;transition:.15s}.approval6-icon-btn:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand)}.approval6-note{margin-top:12px;padding:11px 13px;border:1px solid var(--border-soft);border-radius:14px;background:var(--ink-50);font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:9px}.approval6-note a{color:var(--brand);font-weight:800;text-decoration:none}.approval6-side-list{display:grid;gap:9px;margin-top:13px}.approval6-rec{border:1px solid var(--border-soft);border-radius:14px;padding:12px;display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;background:#fff}.approval6-rec:hover{border-color:var(--brand-200);background:#fff}.approval6-rec-icon{width:36px;height:36px;border-radius:13px;display:flex;align-items:center;justify-content:center}.approval6-rec-title{font-weight:900;font-size:13px}.approval6-rec-copy{font-size:12px;color:var(--text-secondary);line-height:1.35}.approval6-rec-chevron{color:var(--text-tertiary)}.approval6-link{color:var(--brand);font-weight:900;font-size:13px;text-decoration:none}.approval6-roles{margin-top:13px;border:1px solid var(--border-soft);border-radius:16px;overflow:hidden}.approval6-role-head,.approval6-role-row{display:grid;grid-template-columns:1.3fr .7fr .9fr 1fr auto;gap:12px;align-items:center}.approval6-role-head{background:var(--ink-50);color:var(--text-secondary);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:10px 13px}.approval6-role-row{padding:12px 13px;border-top:1px solid var(--border-soft);font-size:13px}.approval6-role-name{display:flex;gap:10px;align-items:center;font-weight:900}.approval6-avatar-icon{width:34px;height:34px;border-radius:12px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center}.approval6-role-sub{font-size:11px;color:var(--text-secondary);font-weight:600;margin-top:1px}.approval6-toggle-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;border:1px solid var(--border-soft);border-radius:15px;padding:12px;background:#fff}.approval6-switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--ink-300);transition:.15s}.approval6-switch:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:.15s}.approval6-switch.on{background:var(--brand)}.approval6-switch.on:after{transform:translateX(18px)}.approval6-advanced{margin-top:18px}.approval6-advanced-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.approval6-advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.approval6-power{border:1px solid var(--border);border-radius:16px;background:#fff;padding:15px;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;color:inherit;text-decoration:none}.approval6-power:hover{background:var(--brand-50);border-color:var(--brand-200)}.approval6-power h3{font-size:13px;font-weight:900;margin:0 0 2px}.approval6-power p{font-size:12px;color:var(--text-secondary);line-height:1.35;margin:0}.approval6-accordion-closed{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:16px;background:#fff;padding:16px 18px}.approval6-pro{display:inline-flex;gap:6px;align-items:center;background:var(--brand-50);color:var(--brand);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}.approval6-wizard{max-width:1120px;margin:0 auto}.approval6-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 24px}.approval6-step{display:flex;gap:12px;align-items:flex-start;position:relative}.approval6-step:not(:last-child):after{content:"";height:1px;background:var(--border);position:absolute;left:46px;right:-12px;top:19px}.approval6-step-num{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-strong);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--text-secondary)}.approval6-step.active .approval6-step-num{background:var(--brand);color:#fff;border-color:var(--brand)}.approval6-step-title{font-weight:900}.approval6-step-copy{font-size:12px;color:var(--text-secondary)}.approval6-wizard-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.approval6-choice{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:14px;background:#fff;cursor:pointer}.approval6-choice.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(83,74,183,.10);background:linear-gradient(135deg,var(--brand-50),#fff)}.approval6-choice-icon{width:58px;height:58px;border-radius:20px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:24px}.approval6-choice-title{font-size:16px;font-weight:900;margin-bottom:3px}.approval6-choice-copy{font-size:13px;color:var(--text-secondary)}.approval6-evidence-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:18px;align-items:start}.approval6-timeline{position:relative;margin-top:10px}.approval6-timeline:before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--border)}.approval6-tl-row{position:relative;display:grid;grid-template-columns:48px 1fr;gap:14px;margin-bottom:12px}.approval6-tl-dot{position:relative;z-index:1;width:42px;height:42px;border-radius:16px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;border:1px solid var(--brand-100)}.approval6-tl-card{border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px}.approval6-tl-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.approval6-tl-title{font-weight:900}.approval6-tl-time{font-size:11px;color:var(--text-secondary);white-space:nowrap}.approval6-tl-copy{font-size:12px;color:var(--text-secondary);margin-top:4px}.approval6-details{margin-top:10px;border:1px solid var(--border-soft);border-radius:13px;padding:11px;background:var(--ink-50);font-size:12px}.approval6-mini-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}.approval6-mini-kv b{display:block;font-size:11px;text-transform:uppercase;color:var(--text-tertiary);letter-spacing:.04em}.approval6-empty{border:1px dashed var(--border-strong);border-radius:16px;padding:24px;text-align:center;color:var(--text-secondary);background:var(--ink-50)}.approval6-toast{position:fixed;right:24px;top:calc(var(--topbar-height) + 16px);z-index:9999;border-radius:14px;background:var(--ink-900);color:white;padding:12px 15px;box-shadow:var(--shadow-lg);display:none;max-width:360px}.approval6-toast.show{display:block;animation:approval6Toast .18s ease-out}.approval6-toast.error{background:var(--danger-fg)}.approval6-toast.success{background:var(--success-fg)}@keyframes approval6Toast{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1200px){.approval6-main-grid,.approval6-wizard-grid,.approval6-evidence-layout{grid-template-columns:1fr}.approval6-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.approval6-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.approval6-hero{flex-direction:column}.approval6-roles{overflow:auto}.approval6-role-head,.approval6-role-row{min-width:760px}}
@media(max-width:760px){.approval6-title{font-size:24px}.approval6-modes,.approval6-summary,.approval6-advanced-grid,.approval6-steps{grid-template-columns:1fr}.approval6-mode,.approval6-choice{grid-template-columns:44px 1fr}.approval6-radio{grid-column:2;justify-self:end}.approval6-setting-row{grid-template-columns:38px 1fr}.approval6-control{grid-column:1 / -1}.approval6-value{width:100%}.approval6-step:not(:last-child):after{display:none}}

/* Phase 6.1 — mode-based contextual menu */
.approval6-mode-menu{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-xs);
  padding:14px;
  margin:-4px 0 18px;
}
.approval6-mode-menu-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.approval6-mode-menu-head strong{
  display:block;
  font-size:13px;
  font-weight:900;
  color:var(--text-primary);
}
.approval6-mode-menu-head span{
  display:block;
  font-size:12px;
  color:var(--text-secondary);
  margin-top:2px;
}
.approval6-mode-menu-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  border:1px solid var(--brand-200);
  background:var(--brand-50);
  color:var(--brand);
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}
.approval6-mode-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.approval6-mode-tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-secondary);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  transition:all var(--duration) var(--ease);
}
.approval6-mode-tab:hover{
  background:var(--brand-50);
  border-color:var(--brand-200);
  color:var(--brand);
}
.approval6-mode-tab.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 8px 18px rgba(83,74,183,.18);
}
@media(max-width:760px){
  .approval6-mode-menu-head{align-items:flex-start;flex-direction:column}
  .approval6-mode-tab{width:100%;justify-content:flex-start}
  .approval6-mode-menu-more{width:100%;justify-content:center}
}

/* ============================================================================
   APPROVAL PROFILE ONBOARDING + CONTROL CENTRE
   Single shared stylesheet for company profile and approval administration UI.
   ============================================================================ */
.company-profile-page,
.approval-profile-page { background: var(--bg); min-height: 100%; }
.company-profile-heading,
.approval-profile-hero {
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  margin-bottom:24px;
}
.company-profile-heading h1,
.approval-profile-hero h1 { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.025em; }
.company-profile-heading p,
.approval-profile-hero p { margin:8px 0 0; max-width:760px; color:var(--text-secondary); }
.company-profile-kicker,
.approval-profile-kicker { color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; }
.company-profile-form { display:flex; flex-direction:column; gap:18px; }
.profile-panel,
.approval-panel-card,
.approval-summary-card,
.approval-control-group,
.approval-readiness-card,
.approval-activity-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-xs);
}
.profile-panel { padding:22px; }
.profile-panel-muted { background:linear-gradient(135deg,var(--brand-50),#fff 58%); }
.profile-panel-head,
.profile-panel-head-main { display:flex; align-items:flex-start; gap:13px; }
.profile-panel-head-between { justify-content:space-between; gap:20px; }
.profile-panel-head h2 { margin:0; font-size:17px; }
.profile-panel-head p { margin:4px 0 0; color:var(--text-secondary); font-size:13px; }
.profile-step-number {
  width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-100); color:var(--brand-700); font-size:13px; font-weight:800;
}
.profile-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.profile-span-2 { grid-column:1 / -1; }
.form-group { min-width:0; }
.form-label { display:block; margin-bottom:6px; color:var(--text-primary); font-size:12px; font-weight:700; }
.form-control,
.form-select {
  width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text-primary); outline:none; transition:border-color var(--duration),box-shadow var(--duration);
}
.form-control:focus,
.form-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-100); }
.form-control.is-invalid,
.form-select.is-invalid { border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }
.form-help { margin-top:5px; color:var(--text-tertiary); font-size:11px; line-height:1.45; }
.form-help.error { color:var(--danger); }
.profile-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.profile-choice {
  position:relative; display:flex; align-items:flex-start; gap:12px; min-height:132px; padding:16px; cursor:pointer;
  border:1px solid var(--border); border-radius:14px; background:var(--surface); transition:all var(--duration-md) var(--ease);
}
.profile-choice:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.profile-choice.selected { border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px rgba(83,74,183,.08); }
.profile-choice input { position:absolute; opacity:0; pointer-events:none; }
.profile-choice-icon,
.approval-wizard-profile-icon {
  width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-100); color:var(--brand); font-size:18px;
}
.profile-choice-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.profile-choice-copy strong { font-size:14px; }
.profile-choice-copy small { color:var(--text-secondary); line-height:1.45; }
.profile-choice-check { position:absolute; right:12px; top:12px; width:20px; height:20px; border:1px solid var(--border-strong); border-radius:50%; display:grid; place-items:center; color:transparent; background:#fff; }
.profile-choice.selected .profile-choice-check { border-color:var(--brand); background:var(--brand); color:#fff; }
.profile-recommendation { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--brand-50); border:1px solid var(--brand-200); color:var(--brand-700); font-size:11px; font-weight:700; white-space:nowrap; }
.profile-info-note { display:flex; align-items:flex-start; gap:9px; margin-top:16px; padding:11px 12px; border:1px solid var(--info-border); border-radius:10px; background:var(--info-bg); color:var(--info-fg); font-size:12px; line-height:1.5; }
.profile-form-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0 24px; }
.profile-alert { display:flex; align-items:flex-start; gap:11px; margin-bottom:16px; padding:13px 14px; border-radius:12px; border:1px solid; font-size:13px; }
.profile-alert > i { font-size:17px; margin-top:1px; }
.profile-alert > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.profile-alert strong { color:inherit; }
.profile-alert span { opacity:.9; }
.profile-alert.info { background:var(--info-bg); border-color:var(--info-border); color:var(--info-fg); }
.profile-alert.warning { background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning-fg); }
.profile-alert.danger { background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-fg); }
.profile-alert .btn { margin-left:auto; }
.profile-current-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; padding:14px; border:1px solid var(--brand-200); border-radius:12px; background:#fff; }
.profile-current-row > div { display:flex; flex-direction:column; gap:3px; }
.profile-current-row span { color:var(--text-secondary); font-size:12px; }

/* Shared profile-aware approval navigation */
.approval-profile-nav { margin:0 0 18px; }
.approval-profile-nav-primary,
.approval-profile-nav-secondary { display:flex; align-items:stretch; gap:8px; overflow-x:auto; scrollbar-width:none; }
.approval-profile-nav-primary::-webkit-scrollbar,
.approval-profile-nav-secondary::-webkit-scrollbar { display:none; }
.approval-profile-nav-primary { padding:5px; background:var(--surface-alt); border:1px solid var(--border); border-radius:13px; }
.approval-profile-nav-secondary { margin-top:8px; padding:0 3px; }
.approval-profile-group { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 14px; border-radius:9px; color:var(--text-secondary); font-size:13px; font-weight:700; white-space:nowrap; }
.approval-profile-group:hover { background:#fff; color:var(--text-primary); }
.approval-profile-group.active { background:#fff; color:var(--brand-700); box-shadow:var(--shadow-sm); }
.approval-profile-feature { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; border:1px solid var(--border); color:var(--text-secondary); background:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
.approval-profile-feature.active { border-color:var(--brand); color:var(--brand-700); background:var(--brand-50); }
.approval-profile-feature small { color:var(--warning-fg); font-size:9px; padding:2px 5px; border-radius:999px; background:var(--warning-bg); }

/* Control Centre */
.approval-profile-page .container { padding-top:26px; padding-bottom:80px; }
.approval-profile-hero { padding:0 0 4px; }
.approval-profile-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.approval-profile-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; border:1px solid var(--brand-200); background:var(--brand-50); color:var(--brand-700); font-size:11px; font-weight:800; }
.approval-profile-hero-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.approval-profile-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.approval-profile-stat { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.approval-profile-stat-icon { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--brand-100); color:var(--brand); font-size:17px; }
.approval-profile-stat > div { display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:8px; min-width:0; }
.approval-profile-stat small { grid-column:1; color:var(--text-tertiary); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.approval-profile-stat strong { grid-column:2; grid-row:1 / span 2; justify-self:end; font-size:24px; letter-spacing:-.03em; }
.approval-profile-stat span:last-child { grid-column:1 / -1; color:var(--text-secondary); font-size:11px; margin-top:2px; }
.approval-profile-local-nav { display:flex; gap:6px; margin-bottom:16px; padding:5px; border:1px solid var(--border); border-radius:13px; background:var(--surface); overflow-x:auto; }
.approval-profile-local-nav a { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:9px; white-space:nowrap; color:var(--text-secondary); font-size:12px; font-weight:700; }
.approval-profile-local-nav a:hover { background:var(--surface-alt); color:var(--text-primary); }
.approval-profile-local-nav a.active { background:var(--brand-100); color:var(--brand-700); }
.approval-profile-layout { display:grid; gap:16px; align-items:start; }
.approval-profile-layout-side { grid-template-columns:minmax(0,1fr) 330px; }
.approval-setting-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.approval-setting-card { min-height:194px; display:flex; flex-direction:column; padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--surface); transition:border-color var(--duration),box-shadow var(--duration); }
.approval-setting-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.approval-setting-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.approval-setting-icon { width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:grid; place-items:center; background:var(--brand-100); color:var(--brand); font-size:16px; }
.approval-setting-card h3 { margin:14px 0 5px; font-size:14px; }
.approval-setting-card p { margin:0 0 14px; color:var(--text-secondary); font-size:12px; line-height:1.5; flex:1; }
.approval-state { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:999px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.approval-state > span { width:6px; height:6px; border-radius:50%; background:currentColor; }
.approval-state.success { color:var(--success-fg); background:var(--success-bg); }
.approval-state.warning { color:var(--warning-fg); background:var(--warning-bg); }
.approval-state.info { color:var(--info-fg); background:var(--info-bg); }
.approval-state.neutral { color:var(--neutral-fg); background:var(--neutral-bg); }
.approval-card-action { display:inline-flex; align-items:center; gap:6px; color:var(--brand-700); font-size:12px; font-weight:800; }
.approval-card-action:hover { color:var(--brand); }
.approval-summary-card,
.approval-panel-card { padding:18px; }
.approval-summary-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.approval-summary-card-head h2,
.approval-section-heading h2,
.approval-control-group h2,
.approval-readiness-card h2 { margin:0; font-size:16px; }
.approval-summary-card-head p,
.approval-section-heading p,
.approval-control-group p,
.approval-readiness-card p { margin:4px 0 0; color:var(--text-secondary); font-size:12px; }
.approval-summary-list { display:flex; flex-direction:column; margin:0 0 15px; }
.approval-summary-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.approval-summary-list dt { color:var(--text-secondary); font-size:12px; font-weight:500; }
.approval-summary-list dd { margin:0; color:var(--text-primary); font-size:12px; font-weight:800; text-align:right; }
.approval-empty-compact { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:150px; padding:20px; border:1px dashed var(--border-strong); border-radius:12px; color:var(--text-secondary); }
.approval-empty-compact > i { font-size:28px; color:var(--text-tertiary); margin-bottom:8px; }
.approval-empty-compact strong { color:var(--text-primary); }
.approval-empty-compact span { margin-top:4px; max-width:500px; font-size:12px; }
.approval-empty-compact .approval-card-action { margin-top:12px; }
.approval-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.approval-approver-list { display:flex; flex-direction:column; }
.approval-approver-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.approval-approver-row:last-child { border-bottom:0; }
.approval-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--brand-100); color:var(--brand); }
.approval-approver-row > div { display:flex; flex-direction:column; min-width:0; }
.approval-approver-row strong { font-size:13px; }
.approval-approver-row span { color:var(--text-secondary); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.approval-approver-row > a { color:var(--text-tertiary); }
.approval-threshold-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-top:14px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--surface-alt); }
.approval-threshold-row > div { display:flex; flex-direction:column; }
.approval-threshold-row strong { font-size:12px; }
.approval-threshold-row span { color:var(--text-secondary); font-size:11px; }
.approval-advanced-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--border-soft); }
.approval-advanced-toggle > div { display:flex; flex-direction:column; gap:3px; }
.approval-advanced-toggle strong { font-size:12px; }
.approval-advanced-toggle span { color:var(--text-secondary); font-size:11px; line-height:1.4; }
.profile-switch { width:42px; height:24px; flex:0 0 42px; padding:3px; border-radius:999px; background:var(--border-strong); transition:background var(--duration); }
.profile-switch > span { display:block; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-xs); transition:transform var(--duration); }
.profile-switch.on { background:var(--brand); }
.profile-switch.on > span { transform:translateX(18px); }
.profile-switch:disabled { opacity:.55; }
.approval-controlled-grid { display:grid; gap:14px; }
.approval-control-group { padding:18px; scroll-margin-top:80px; }
.approval-control-group-head { margin-bottom:13px; }
.approval-control-group-head span { color:var(--brand); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.approval-control-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.approval-control-card { display:flex; flex-direction:column; min-height:150px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.approval-control-card-head { display:flex; justify-content:space-between; gap:10px; }
.approval-control-card-head > div { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.approval-control-card h3 { margin:0; font-size:13px; }
.approval-control-card-head > i { color:var(--text-tertiary); }
.approval-control-card p { flex:1; margin:10px 0 12px; color:var(--text-secondary); font-size:11px; line-height:1.5; }
.approval-control-card-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.approval-readiness-card { margin-top:14px; padding:18px; }
.approval-readiness-head { display:flex; align-items:flex-start; gap:12px; }
.approval-readiness-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:15px; }
.approval-readiness-item { display:flex; align-items:flex-start; gap:9px; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-alt); }
.approval-readiness-item > i { margin-top:1px; }
.approval-readiness-item.ok > i { color:var(--success); }
.approval-readiness-item.pending > i { color:var(--warning); }
.approval-readiness-item > div { display:flex; flex-direction:column; gap:2px; }
.approval-readiness-item strong { font-size:11px; }
.approval-readiness-item span { color:var(--text-secondary); font-size:10px; }
.approval-activity-card { margin-top:14px; padding:18px; }
.approval-activity-list { display:flex; flex-direction:column; }
.approval-activity-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.approval-activity-row:last-child { border-bottom:0; }
.approval-activity-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--surface-alt); color:var(--brand); }
.approval-activity-row > div { display:flex; flex-direction:column; min-width:0; }
.approval-activity-row strong { font-size:12px; }
.approval-activity-row span,
.approval-activity-row time { color:var(--text-secondary); font-size:10px; }
.approval-profile-loading { grid-column:1 / -1; min-height:120px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-secondary); border:1px dashed var(--border-strong); border-radius:14px; background:var(--surface); }
.spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--brand); border-radius:50%; animation:approvalSpin .7s linear infinite; }
@keyframes approvalSpin { to { transform:rotate(360deg); } }
.approval-profile-toast { position:fixed; right:22px; bottom:22px; z-index:12000; max-width:420px; padding:12px 15px; border-radius:11px; background:var(--ink-900); color:#fff; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px); pointer-events:none; transition:all var(--duration-md); }
.approval-profile-toast.show { opacity:1; transform:none; }
.approval-profile-toast.error { background:var(--danger-fg); }

/* Wizard and impact review */
body.modal-open { overflow:hidden; }
.approval-wizard-overlay,
.approval-impact-overlay { position:fixed; inset:0; z-index:11000; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.58); backdrop-filter:blur(3px); }
.approval-wizard-overlay.open,
.approval-impact-overlay.open { display:flex; }
.approval-wizard-dialog { display:flex; flex-direction:column; width:min(980px,100%); max-height:calc(100vh - 40px); border-radius:20px; background:var(--surface); box-shadow:0 24px 70px rgba(15,23,42,.28); overflow:hidden; }
.approval-wizard-header { display:flex; justify-content:space-between; gap:16px; padding:20px 22px 14px; border-bottom:1px solid var(--border-soft); }
.approval-wizard-header h2 { margin:0; font-size:20px; }
.approval-wizard-close { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--text-secondary); }
.approval-wizard-close:hover { background:var(--surface-alt); color:var(--text-primary); }
.approval-wizard-progress { display:flex; align-items:center; justify-content:center; padding:14px 20px; border-bottom:1px solid var(--border-soft); background:var(--surface-alt); }
.approval-wizard-progress-item { display:flex; align-items:center; gap:6px; color:var(--text-tertiary); font-size:11px; font-weight:700; }
.approval-wizard-progress-item > span { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border-strong); background:#fff; }
.approval-wizard-progress-item.active { color:var(--brand-700); }
.approval-wizard-progress-item.active > span { border-color:var(--brand); background:var(--brand); color:#fff; }
.approval-wizard-progress-item.complete > span { border-color:var(--success); background:var(--success); color:#fff; }
.approval-wizard-progress-line { width:70px; height:1px; background:var(--border-strong); margin:0 10px; }
.approval-wizard-body { flex:1; overflow:auto; padding:22px; }
.approval-wizard-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-top:1px solid var(--border); background:#fff; }
.approval-wizard-footer-right { display:flex; align-items:center; gap:8px; }
.approval-wizard-intro { margin-bottom:17px; }
.approval-wizard-intro h3 { margin:0; font-size:17px; }
.approval-wizard-intro p { margin:5px 0 0; color:var(--text-secondary); font-size:12px; }
.approval-wizard-profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.approval-wizard-profile { position:relative; display:flex; align-items:flex-start; gap:12px; min-height:165px; padding:16px; border:1px solid var(--border); border-radius:14px; cursor:pointer; }
.approval-wizard-profile:hover { border-color:var(--border-strong); }
.approval-wizard-profile.selected { border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px rgba(83,74,183,.08); }
.approval-wizard-profile input { position:absolute; opacity:0; }
.approval-wizard-profile > span:nth-of-type(2) { display:flex; flex-direction:column; gap:5px; min-width:0; }
.approval-wizard-profile strong { font-size:14px; }
.approval-wizard-profile small { color:var(--text-secondary); line-height:1.45; }
.approval-wizard-profile em { display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--brand-700); font-size:10px; font-style:normal; font-weight:800; }
.approval-wizard-profile-check { position:absolute; right:12px; top:12px; color:var(--brand); opacity:0; }
.approval-wizard-profile.selected .approval-wizard-profile-check { opacity:1; }
.approval-wizard-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.approval-money-input { display:grid; grid-template-columns:38px 1fr; }
.approval-money-input > span { display:grid; place-items:center; border:1px solid var(--border); border-right:0; border-radius:var(--radius-md) 0 0 var(--radius-md); background:var(--surface-alt); color:var(--text-secondary); font-weight:800; }
.approval-money-input .form-control { border-radius:0 var(--radius-md) var(--radius-md) 0; }
.approval-segmented { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:3px; border:1px solid var(--border); border-radius:10px; background:var(--surface-alt); }
.approval-segmented label { cursor:pointer; }
.approval-segmented input { position:absolute; opacity:0; }
.approval-segmented span { display:grid; place-items:center; min-height:34px; border-radius:7px; color:var(--text-secondary); font-size:11px; font-weight:700; }
.approval-segmented label.selected span { background:#fff; color:var(--brand-700); box-shadow:var(--shadow-xs); }
.approval-option-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.approval-radio-card { cursor:pointer; }
.approval-radio-card input { position:absolute; opacity:0; }
.approval-radio-card > span { display:flex; align-items:center; gap:7px; min-height:44px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; color:var(--text-secondary); font-size:11px; font-weight:700; }
.approval-radio-card.selected > span { border-color:var(--brand); background:var(--brand-50); color:var(--brand-700); }
.approval-check-row { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--border); border-radius:11px; background:#fff; cursor:pointer; }
.approval-check-row input { width:17px; height:17px; flex:0 0 17px; accent-color:var(--brand); margin-top:1px; }
.approval-check-row > span { display:flex; flex-direction:column; gap:3px; }
.approval-check-row strong { font-size:12px; }
.approval-check-row small { color:var(--text-secondary); line-height:1.45; }
.approval-wizard-controlled-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.approval-wizard-control-group { padding:13px; border:1px solid var(--border); border-radius:12px; }
.approval-wizard-control-group > strong { display:block; margin-bottom:9px; font-size:12px; }
.approval-wizard-control-group > span { display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border-soft); color:var(--text-secondary); font-size:10px; }
.approval-wizard-control-group > span:last-child { border-bottom:0; }
.approval-wizard-control-group i { color:var(--success); }
.approval-wizard-control-group small { color:var(--brand-700); font-weight:700; }
.approval-wizard-review-profile { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--brand-200); border-radius:12px; background:var(--brand-50); }
.approval-wizard-review-profile > div { display:flex; flex-direction:column; gap:3px; }
.approval-wizard-review-profile span { color:var(--text-secondary); font-size:11px; }
.approval-wizard-review-list { margin:14px 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.approval-wizard-review-list > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 13px; border-bottom:1px solid var(--border-soft); }
.approval-wizard-review-list > div:last-child { border-bottom:0; }
.approval-wizard-review-list dt { color:var(--text-secondary); font-size:11px; font-weight:600; }
.approval-wizard-review-list dd { margin:0; text-align:right; font-size:11px; font-weight:800; }
.approval-impact-dialog { width:min(520px,100%); padding:24px; border-radius:18px; background:var(--surface); box-shadow:0 24px 70px rgba(15,23,42,.28); text-align:center; }
.approval-impact-icon { width:48px; height:48px; margin:0 auto 12px; border-radius:14px; display:grid; place-items:center; background:var(--warning-bg); color:var(--warning); font-size:22px; }
.approval-impact-dialog h2 { margin:0; font-size:19px; }
.approval-impact-dialog > p { margin:8px 0 16px; color:var(--text-secondary); font-size:12px; }
.approval-impact-list { display:flex; flex-direction:column; margin-bottom:18px; border:1px solid var(--border); border-radius:11px; }
.approval-impact-list > div { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--border-soft); font-size:11px; text-align:left; }
.approval-impact-list > div:last-child { border-bottom:0; }
.approval-impact-actions { display:flex; justify-content:flex-end; gap:8px; }

@media (max-width:1100px) {
  .approval-profile-layout-side { grid-template-columns:1fr; }
  .approval-setting-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .approval-control-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .approval-readiness-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .approval-wizard-controlled-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .company-profile-heading,
  .approval-profile-hero { flex-direction:column; }
  .profile-choice-grid,
  .approval-wizard-profile-grid { grid-template-columns:1fr; }
  .profile-choice,
  .approval-wizard-profile { min-height:auto; }
  .approval-profile-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .approval-profile-hero-actions { width:100%; }
  .approval-profile-hero-actions .btn { flex:1; }
  .approval-wizard-overlay { padding:0; align-items:flex-end; }
  .approval-wizard-dialog { width:100%; max-height:94vh; border-radius:20px 20px 0 0; }
}
@media (max-width:600px) {
  .profile-form-grid,
  .approval-wizard-form-grid,
  .approval-setting-grid,
  .approval-control-card-grid,
  .approval-readiness-grid,
  .approval-wizard-controlled-grid,
  .approval-option-row { grid-template-columns:1fr; }
  .profile-span-2 { grid-column:auto; }
  .profile-panel-head-between { flex-direction:column; }
  .profile-recommendation { white-space:normal; }
  .profile-form-actions { position:sticky; bottom:0; z-index:5; margin:0 -16px; padding:12px 16px calc(12px + var(--safe-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--border); }
  .profile-form-actions .btn { flex:1; }
  .approval-profile-stats { grid-template-columns:1fr; }
  .approval-threshold-row { grid-template-columns:auto 1fr; }
  .approval-threshold-row .approval-card-action { grid-column:1 / -1; }
  .approval-activity-row { grid-template-columns:auto minmax(0,1fr); }
  .approval-activity-row time { grid-column:2; }
  .approval-wizard-progress-line { width:24px; margin:0 5px; }
  .approval-wizard-progress-item small { display:none; }
  .approval-wizard-footer { padding:12px; }
  .approval-wizard-footer-right { flex:1; justify-content:flex-end; }
  .approval-wizard-footer .btn { padding-left:10px; padding-right:10px; }
  .approval-impact-actions { flex-direction:column-reverse; }
  .approval-impact-actions .btn { width:100%; }
}

/* PUBLICIP CONSOLIDATED PAGE STYLES — approval profile release */

/* ==========================================================================
   LOGIN PAGE — consolidated from signinandsignout/login.php
   ========================================================================== */
.auth-login-page{
            min-height: 100vh;
            margin: 0;
            background:
                radial-gradient(circle at top left, rgba(91, 75, 196, 0.12), transparent 34%),
                radial-gradient(circle at bottom right, rgba(91, 75, 196, 0.08), transparent 34%),
                var(--surface-alt);
            display: grid;
            place-items: center;
            padding: 24px;
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
.auth-login-page .login-shell{ width: 100%; max-width: 440px; }
.auth-login-page .brand-row{ display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px; }
.auth-login-page .brand-mark{ width:38px;height:38px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:var(--shadow-sm); }
.auth-login-page .brand-name{ font-size:18px;font-weight:800;color:var(--text-primary); }
.auth-login-page .auth-card{ background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden; }
.auth-login-page .auth-head{ padding:26px 26px 18px;text-align:center;border-bottom:1px solid var(--border-soft); }
.auth-login-page .auth-icon{ width:50px;height:50px;border-radius:16px;background:var(--brand-100);color:var(--brand);display:grid;place-items:center;font-size:23px;margin:0 auto 14px; }
.auth-login-page .auth-title{ margin:0;font-size:22px;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em; }
.auth-login-page .auth-subtitle{ margin-top:6px;font-size:13px;color:var(--text-secondary); }
.auth-login-page .auth-body{ padding:24px 26px 26px; }
.auth-login-page .auth-card .form-control{ width:100%;height:44px;border-radius:10px; }
.auth-login-page .auth-field{ margin-bottom:16px; }
.auth-login-page .forgot-row{ display:flex;justify-content:flex-end;margin-top:8px; }
.auth-login-page .auth-link{ color:var(--brand);font-weight:700;text-decoration:none;font-size:13px; }
.auth-login-page .auth-link:hover{ text-decoration:underline; }
.auth-login-page .auth-footer{ text-align:center;margin-top:18px;font-size:12px;color:var(--text-tertiary); }

/* ==========================================================================
   APPROVAL POLICY PAGE — consolidated from Expenses/admin_approval_policy.php
   ========================================================================== */
/* Tab strip shared with admin_approval_advanced.php for visual continuity */
.approval-policy-page .tabsx{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.approval-policy-page .tabx{border:1px solid var(--separator,#e5e7eb);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--text-secondary,#64748b);cursor:pointer;text-decoration:none}
.approval-policy-page .tabx.active{background:var(--brand-50,#f5f3ff);color:var(--brand,#6d5dfc);border-color:var(--brand,#6d5dfc)}
/* Cards / chips shared with admin_approval_advanced.php */
.approval-policy-page .cardx{background:#fff;border:1px solid var(--separator,#e5e7eb);border-radius:16px;padding:18px;margin-bottom:18px}
.approval-policy-page .chipx{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700}
.approval-policy-page .chip-purple{background:#ede9fe;color:#5b21b6}
.approval-policy-page .chip-grey{background:#e5e7eb;color:#475569}
.approval-policy-page .mutedx{color:#64748b;font-size:12px}
.approval-policy-page .toolbarx{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:12px}
/* B1 engine toggle inside policy modal */
.approval-policy-page .engine-toggle{display:flex;align-items:flex-start;gap:10px;border:1px solid #eef2f7;border-radius:10px;padding:10px 12px;background:#f8fafc;margin-top:8px}
.approval-policy-page .engine-toggle input{margin-top:3px}
.approval-policy-page .engine-toggle .bi{color:var(--brand,#6d5dfc)}
/* B2 role-policy section */
.approval-policy-page .role-policy-row{display:grid;grid-template-columns:1.4fr .8fr 1.4fr auto;gap:10px;align-items:center;border:1px solid #eef2f7;border-radius:10px;padding:10px;background:#fff;margin-bottom:8px}
.approval-policy-page .role-policy-row .name{font-weight:600;font-size:14px}
@media (max-width:720px){
.approval-policy-page .role-policy-row{grid-template-columns:1fr;gap:6px}
}
/* -- POLICY CARDS ---------------------------- */
.approval-policy-page .policy-card{ background: #fff; border: 1px solid var(--separator); border-radius: 12px; padding: 20px; margin-bottom: 16px; position: relative; transition: box-shadow 0.15s, border-color 0.15s; }
.approval-policy-page .policy-card:hover{ box-shadow: 0 4px 12px rgba(0,0,0,0.02); border-color: var(--border-strong); }
.approval-policy-page .policy-card.is-default{ border-color: var(--brand); border-width: 2px; }
.approval-policy-page .policy-name{ font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.approval-policy-page .policy-badge{ display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; margin-left: 8px; vertical-align: middle; }
.approval-policy-page .badge-default{ background: var(--brand-50, #F5F4FE); color: var(--brand); border: 1px solid var(--brand-200, #D9D5F8); }
.approval-policy-page .badge-users{ background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.approval-policy-page .policy-meta{ color: var(--text-secondary); font-size: 12px; margin-bottom: 16px; }
.approval-policy-page .policy-rules{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.approval-policy-page .rule-item{ background: #f8f9fa; padding: 12px; border-radius: 8px; font-size: 13px; border: 1px solid var(--separator); }
.approval-policy-page .rule-label{ color: var(--text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 700; display:flex; align-items:center; gap:4px; }
.approval-policy-page .rule-value{ font-weight: 700; font-size: 18px; color: var(--text-primary); letter-spacing: -0.5px; }
.approval-policy-page .policy-actions{ display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--separator); }
/* Phase 1.8 — live vs draft clarity */
.approval-policy-page .policy-live-note{font-size:11px;color:#64748b;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.approval-policy-page .draft-summary{border:1px solid #fde68a;background:#fffbeb;border-radius:12px;padding:12px 14px;margin:12px 0 16px;color:#78350f;font-size:12px}
.approval-policy-page .draft-summary .head{display:flex;align-items:center;gap:6px;font-weight:800;margin-bottom:8px;color:#92400e;text-transform:uppercase;letter-spacing:.35px;font-size:11px}
.approval-policy-page .draft-summary ul{margin:0;padding-left:18px}
.approval-policy-page .draft-summary li{margin:3px 0}
.approval-policy-page .draft-summary .more{margin-top:6px;color:#92400e;font-size:11px}
.approval-policy-page .modal-draft-banner{border:1px solid #fde68a;background:#fffbeb;color:#78350f;border-radius:12px;padding:10px 12px;margin:-8px 0 16px;font-size:12px;line-height:1.45}
.approval-policy-page .modal-draft-banner b{color:#92400e}
.approval-policy-page .draft-changed-input{background:#fffbeb!important;border-color:#f59e0b!important;box-shadow:0 0 0 3px rgba(245,158,11,.10)!important}
.approval-policy-page .draft-diff-note{font-size:11px;margin-top:5px;color:#92400e;font-weight:600;display:flex;gap:6px;align-items:flex-start}
.approval-policy-page .draft-chip-diff{border:1px solid #fde68a;background:#fffbeb;color:#78350f;border-radius:10px;padding:9px 11px;font-size:12px;margin:0 0 12px}
.approval-policy-page .draft-chip-diff .add{color:#047857;font-weight:700}
.approval-policy-page .draft-chip-diff .remove{color:#b91c1c;font-weight:700}
/* -- CHECKBOX GROUP / CHIPS ------------------ */
.approval-policy-page .checkbox-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.approval-policy-page .chip{
            display: inline-flex; align-items: center; gap: 4px;
            padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500;
            cursor: pointer; border: 1px solid var(--separator);
            background: #fff; color: var(--text-secondary); transition: all 0.15s; user-select: none;
        }
.approval-policy-page .chip.selected{ background: var(--brand-50, #F5F4FE); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.approval-policy-page .chip input{ display: none; }
/* -- THRESHOLD PREVIEW ----------------------- */
.approval-policy-page .threshold-preview{ background: #f8f9fa; border: 1px solid var(--separator); border-radius: 12px; padding: 16px; margin-top: 16px; font-size: 13px; color: var(--text-primary); }
.approval-policy-page .threshold-preview .tier{ display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.approval-policy-page .tier-dot{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.approval-policy-page .tier-dot.green{ background: #198754; }
.approval-policy-page .tier-dot.yellow{ background: #ffc107; }
.approval-policy-page .tier-dot.red{ background: #dc3545; }
/* -- CUSTOM TOGGLE --------------------------- */
.approval-policy-page .toggle-row{ display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.approval-policy-page .toggle{
            width: 48px; height: 28px; border-radius: 14px;
            background: var(--separator); position: relative; cursor: pointer;
            transition: background 0.2s;
        }
.approval-policy-page .toggle.active{ background: var(--brand); }
.approval-policy-page .toggle::after{
            content: ""; position: absolute; top: 3px; left: 3px;
            width: 22px; height: 22px; border-radius: 50%;
            background: white; transition: transform 0.2s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        }
.approval-policy-page .toggle.active::after{ transform: translateX(20px); }
/* ============================================================== */
/* RESPONSIVE MODAL SYSTEM (WITH SWIPE-TO-DISMISS SUPPORT) */
/* ============================================================== */
.approval-policy-page .modal-overlay{ display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.6); z-index: 9999; justify-content: center; backdrop-filter: blur(2px); }
.approval-policy-page .modal-overlay.active{ display: flex; }
.approval-policy-page .modal-sheet{ background: #fff; width: 100%; max-width: 600px; overflow-y: auto; }
.approval-policy-page .modal-handle{ width: 40px; height: 4px; background: var(--border-strong); border-radius: 2px; margin: 0 auto 20px; }
html:not(.is-native) .approval-policy-page .modal-overlay{ align-items: center; padding: 20px; }
html:not(.is-native) .approval-policy-page .modal-sheet{ border-radius: 16px; max-height: calc(100vh - 80px); padding: 30px; animation: modalFadeIn 0.2s ease-out; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
html:not(.is-native) .approval-policy-page .modal-handle{ display: none; }
@keyframes modalFadeIn{ from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
html.is-native .approval-policy-page .modal-overlay{ align-items: flex-end; }
html.is-native .approval-policy-page .modal-sheet{ border-radius: 20px 20px 0 0; max-height: 92vh; padding: 24px 20px 40px; animation: slideUp 0.25s ease-out; touch-action: pan-y; will-change: transform; }
@keyframes slideUp{ from { transform: translateY(100%); } to { transform: translateY(0); } }
.approval-policy-page .modal-title{ font-size: 18px; font-weight: 700; margin-bottom: 24px; color: var(--text-primary); display:flex; align-items:center; gap:8px;}
/* -- LOADING / EMPTY ------------------ */
.approval-policy-page .loading{ text-align: center; padding: 60px 20px; color: var(--text-tertiary); font-size: 14px; }
.approval-policy-page .empty-state{ text-align: center; padding: 60px 20px; background: #fff; border: 1px solid var(--separator); border-radius: 12px; }
.approval-policy-page .empty-state .icon{ font-size: 40px; margin-bottom: 12px; color: #dee2e6; }
.approval-policy-page .empty-state h3{ color: var(--text-primary); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.approval-policy-page .empty-state p{ font-size: 13px; color: var(--text-tertiary); margin: 0; }

/* ==========================================================================
   ADVANCED APPROVAL PAGE — consolidated from Expenses/admin_approval_advanced.php
   ========================================================================== */
.approval-advanced-page .adv-grid{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:18px}
.approval-advanced-page .cardx{background:#fff;border:1px solid var(--separator,#e5e7eb);border-radius:16px;padding:18px}
.approval-advanced-page .tabsx{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.approval-advanced-page .tabx{border:1px solid var(--separator,#e5e7eb);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--text-secondary,#64748b);cursor:pointer;text-decoration:none}
.approval-advanced-page .tabx.active{background:var(--brand-50,#f5f3ff);color:var(--brand,#6d5dfc);border-color:var(--brand,#6d5dfc)}
.approval-advanced-page .rule-row,
.approval-advanced-page .wf-row{border:1px solid #eef2f7;border-radius:12px;padding:12px;margin-bottom:10px;display:grid;grid-template-columns:1.2fr .9fr .7fr .8fr .9fr auto;gap:10px;align-items:center}
.approval-advanced-page .wf-row{grid-template-columns:1fr auto}
.approval-advanced-page .wf-row.active{border-color:var(--brand,#6d5dfc);background:#faf9ff}
.approval-advanced-page .chipx{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700}
.approval-advanced-page .chip-green{background:#dcfce7;color:#166534}
.approval-advanced-page .chip-yellow{background:#fef3c7;color:#92400e}
.approval-advanced-page .chip-red{background:#fee2e2;color:#991b1b}
.approval-advanced-page .chip-purple{background:#ede9fe;color:#5b21b6}
.approval-advanced-page .chip-blue{background:#dbeafe;color:#1d4ed8}
.approval-advanced-page .mutedx{color:#64748b;font-size:12px}
.approval-advanced-page .flow{display:flex;align-items:stretch;gap:10px;overflow-x:auto;padding:8px 2px 14px;min-height:110px}
.approval-advanced-page .flow-step{min-width:170px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:12px;cursor:pointer}
.approval-advanced-page .flow-step.active{border-color:var(--brand,#6d5dfc);box-shadow:0 0 0 3px rgba(109,93,252,.10)}
.approval-advanced-page .flow-arrow{align-self:center;color:#94a3b8}
.approval-advanced-page .toolbarx{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:12px}
.approval-advanced-page .modalx{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9999;align-items:center;justify-content:center;padding:18px}
.approval-advanced-page .modalx.active{display:flex}
.approval-advanced-page .sheetx{background:#fff;border-radius:18px;max-width:840px;width:100%;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.18);max-height:90vh;overflow:auto}
.approval-advanced-page .step-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.approval-advanced-page .emptyx{border:1px dashed #cbd5e1;border-radius:14px;padding:22px;text-align:center;color:#64748b}
.approval-advanced-page .mini-kv{display:grid;grid-template-columns:120px 1fr;gap:8px;font-size:13px}
.approval-advanced-page .btn-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
.approval-advanced-page .toastx{position:fixed;right:22px;bottom:22px;z-index:10000;background:#0f172a;color:white;border-radius:12px;padding:12px 16px;box-shadow:0 12px 30px rgba(0,0,0,.22);display:none}
.approval-advanced-page .toastx.error{background:#991b1b}
.approval-advanced-page .trigger-panel{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.approval-advanced-page .rule-pick{display:flex;align-items:flex-start;gap:8px;padding:8px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;margin-bottom:8px}
.approval-advanced-page .hiddenx{display:none!important}
@media (max-width:1100px){
.approval-advanced-page .adv-grid{grid-template-columns:1fr}
.approval-advanced-page .rule-row{grid-template-columns:1fr}
.approval-advanced-page .cardx.side{order:3}
.approval-advanced-page .step-form-grid{grid-template-columns:1fr}
}
.approval-advanced-page .sens-card{display:flex;align-items:flex-start;gap:12px;border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin-bottom:12px;cursor:pointer;background:#fff}
.approval-advanced-page .sens-card.active{border-color:var(--brand,#6d5dfc);box-shadow:0 0 0 3px rgba(109,93,252,.10);background:#faf9ff}
.approval-advanced-page .sens-card input{margin-top:4px}
.approval-advanced-page .ai-table td,
.approval-advanced-page .ai-table th{border-color:#eef2f7}
/* B2 quorum picker — reuses .cardx-family tokens for visual continuity */
.approval-advanced-page .quorum-panel{border:1px solid var(--brand,#6d5dfc);border-radius:12px;padding:14px;background:#faf9ff;margin-top:8px}
.approval-advanced-page .quorum-panel.hiddenx{display:none!important}
.approval-advanced-page .quorum-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.approval-advanced-page .quorum-head .ti,
.approval-advanced-page .quorum-head i.bi{font-size:18px;color:var(--brand,#6d5dfc);margin-top:2px}
.approval-advanced-page .quorum-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:1px solid #eef2f7;border-radius:10px;margin-bottom:6px;font-size:13px}
.approval-advanced-page .quorum-row .avx{width:28px;height:28px;border-radius:50%;background:#ede9fe;color:#5b21b6;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.approval-advanced-page .quorum-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.approval-advanced-page .quorum-row .rm{cursor:pointer;color:#94a3b8;background:none;border:0;padding:2px 4px;font-size:14px;line-height:1}
.approval-advanced-page .quorum-row .rm:hover{color:#dc2626}
.approval-advanced-page .quorum-add{display:flex;gap:8px;margin-top:10px}
.approval-advanced-page .quorum-note{font-size:11px;color:#5b4dd4;line-height:1.5;margin-top:10px}
.approval-advanced-page .quorum-note .bi{font-size:12px}
.approval-advanced-page .engine-toggle{display:flex;align-items:flex-start;gap:10px;border:1px solid #eef2f7;border-radius:10px;padding:10px 12px;background:#f8fafc;margin-top:8px}
.approval-advanced-page .engine-toggle input{margin-top:3px}
.approval-advanced-page .engine-toggle .bi{color:var(--brand,#6d5dfc)}
.approval-advanced-page .role-policy-row{display:grid;grid-template-columns:1.4fr .8fr 1.4fr auto;gap:10px;align-items:center;border:1px solid #eef2f7;border-radius:10px;padding:10px;background:#fff;margin-bottom:8px}
@media (max-width:720px){
.approval-advanced-page .role-policy-row{grid-template-columns:1fr;gap:6px}
}
.approval-advanced-page .sim-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.approval-advanced-page .sim-stat{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#f8fafc}
.approval-advanced-page .sim-stat b{display:block;font-size:18px;color:#0f172a}
.approval-advanced-page .sim-list{margin:0;padding-left:18px}
.approval-advanced-page .sim-risk-high{border-left:4px solid #dc2626}
.approval-advanced-page .sim-risk-medium{border-left:4px solid #f59e0b}
.approval-advanced-page .sim-risk-low{border-left:4px solid #64748b}
@media (max-width:720px){
.approval-advanced-page .sim-grid{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   APPROVAL CHAINS PAGE — consolidated from Expenses/admin_approval_chains.php
   ========================================================================== */
/* -- STATS BAR ---------------------------- */
.approval-chains-page .stats-bar{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 768px){
.approval-chains-page .stats-bar{ display: flex; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.approval-chains-page .stats-bar::-webkit-scrollbar{ display: none; }
.approval-chains-page .stat-card{ flex: 0 0 120px; }
}
.approval-chains-page .stat-card{ background: #fff; border: 1px solid var(--separator); border-radius: 12px; padding: 16px; text-align: center; }
.approval-chains-page .stat-value{ font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.approval-chains-page .stat-label{ font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; font-weight: 600; }
.approval-chains-page .stat-warn{ color: #dc3545; }
/* -- SECTION HEADER ----------------------- */
.approval-chains-page .section-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; margin-top: 24px; }
.approval-chains-page .section-title{ font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.approval-chains-page .count-badge{ background: #f8f9fa; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--separator); color: var(--text-secondary); }
.approval-chains-page .count-badge.warn{ background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
/* -- CHAIN CARDS -------------------------- */
.approval-chains-page .chain-card{ background: #fff; border: 1px solid var(--separator); border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; transition: box-shadow 0.15s, border-color 0.15s; }
.approval-chains-page .chain-card:hover{ border-color: var(--border-strong); box-shadow: 0 4px 12px rgba(0,0,0,0.02); }
.approval-chains-page .chain-flow{ flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.approval-chains-page .chain-person{ display: flex; align-items: center; gap: 8px; }
.approval-chains-page .avatar{ width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: white; flex-shrink: 0; }
.approval-chains-page .avatar-user{ background: var(--brand); }
.approval-chains-page .avatar-approver{ background: #198754; }
.approval-chains-page .avatar-backup{ background: #ffc107; color: #713f12; }
.approval-chains-page .person-info{ line-height: 1.3; }
.approval-chains-page .person-name{ font-weight: 600; font-size: 14px; color: var(--text-primary); }
.approval-chains-page .person-role{ font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; font-weight: 600; }
.approval-chains-page .chain-arrow{ color: var(--text-tertiary); font-size: 18px; flex-shrink: 0; display: flex; align-items: center; }
.approval-chains-page .chain-policy{ font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #E0E7FF; color: #3730A3; border: 1px solid #C7D2FE; white-space: nowrap; }
.approval-chains-page .chain-policy.default{ background: #f8f9fa; color: var(--text-secondary); border-color: var(--separator); }
.approval-chains-page .chain-actions{ display: flex; gap: 6px; flex-shrink: 0; }
/* -- UNASSIGNED --------------------------- */
.approval-chains-page .unassigned-card{ background: #fff; border: 1px solid var(--separator); border-left: 3px solid #dc3545; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.approval-chains-page .unassigned-user{ display: flex; align-items: center; gap: 10px; }
.approval-chains-page .avatar-none{ background: #f8f9fa; color: var(--text-secondary); border: 1px solid var(--separator); }
/* -- ORG CHART VISUAL --------------------- */
.approval-chains-page .org-chart{ background: #fff; border: 1px solid var(--separator); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.approval-chains-page .org-chart-title{ font-size: 14px; font-weight: 700; margin-bottom: 16px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.approval-chains-page .org-tree{ padding-left: 0; margin-bottom:0; }
.approval-chains-page .org-node{ list-style: none; padding: 4px 0 4px 24px; position: relative; }
.approval-chains-page .org-node::before{ content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.approval-chains-page .org-node::after{ content: ""; position: absolute; left: 8px; top: 16px; width: 12px; height: 1px; background: var(--border-strong); }
.approval-chains-page .org-node:last-child::before{ height: 16px; }
.approval-chains-page .org-root{ padding-left: 0; }
.approval-chains-page .org-root::before,
.approval-chains-page .org-root::after{ display: none; }
.approval-chains-page .org-name{ font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.approval-chains-page .org-detail{ font-size: 12px; color: var(--text-tertiary); font-weight: 500; }
/* -- CHAIN PREVIEW ------------------------ */
.approval-chains-page .chain-preview{ background: #f8f9fa; border-radius: 8px; border: 1px solid var(--separator); padding: 16px; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 60px; }
.approval-chains-page .preview-step{ text-align: center; font-size: 13px; }
.approval-chains-page .preview-step .label{ font-size: 10px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.approval-chains-page .preview-step .name{ font-weight: 700; display: flex; align-items: center; gap: 4px; justify-content: center; color: var(--text-primary); margin-top: 4px;}
/* -- BULK ASSIGN -------------------------- */
.approval-chains-page .bulk-row{ display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--separator); }
.approval-chains-page .bulk-row:last-child{ border-bottom: none; }
.approval-chains-page .bulk-checkbox{ width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand); margin: 0; }
/* ============================================================== */
/* RESPONSIVE MODAL SYSTEM (WITH SWIPE-TO-DISMISS SUPPORT) */
/* ============================================================== */
.approval-chains-page .modal-overlay{ display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.6); z-index: 9999; justify-content: center; backdrop-filter: blur(2px); }
.approval-chains-page .modal-overlay.active{ display: flex; }
.approval-chains-page .modal-sheet{ background: #fff; width: 100%; max-width: 600px; overflow-y: auto; }
.approval-chains-page .modal-handle{ width: 40px; height: 4px; background: var(--border-strong); border-radius: 2px; margin: 0 auto 20px; }
html:not(.is-native) .approval-chains-page .modal-overlay{ align-items: center; padding: 20px; }
html:not(.is-native) .approval-chains-page .modal-sheet{ border-radius: 16px; max-height: calc(100vh - 80px); padding: 30px; animation: modalFadeIn 0.2s ease-out; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
html:not(.is-native) .approval-chains-page .modal-handle{ display: none; }
@keyframes modalFadeIn{ from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
html.is-native .approval-chains-page .modal-overlay{ align-items: flex-end; }
html.is-native .approval-chains-page .modal-sheet{ border-radius: 20px 20px 0 0; max-height: 92vh; padding: 24px 20px 40px; animation: slideUp 0.25s ease-out; touch-action: pan-y; will-change: transform; }
@keyframes slideUp{ from { transform: translateY(100%); } to { transform: translateY(0); } }
.approval-chains-page .modal-title{ font-size: 18px; font-weight: 700; margin-bottom: 24px; color: var(--text-primary); display:flex; align-items:center; gap:8px; }
.approval-chains-page .modal-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); margin-bottom: 6px; display: block; }
.approval-chains-page .modal-hint{ font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
/* -- LOADING / EMPTY ------------------ */
.approval-chains-page .loading{ text-align: center; padding: 60px 20px; color: var(--text-tertiary); font-size: 14px; font-weight:500; }
.approval-chains-page .empty-state{ text-align: center; padding: 60px 20px; background: #fff; border: 1px solid var(--separator); border-radius: 12px; }
.approval-chains-page .empty-state .icon{ font-size: 40px; margin-bottom: 12px; color: #dee2e6; }
.approval-chains-page .empty-state h3{ color: var(--text-primary); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.approval-chains-page .empty-state p{ font-size: 13px; color: var(--text-tertiary); margin: 0; }

/* ==========================================================================
   APPROVAL AUTHORITY PAGE — consolidated from Expenses/admin_approval_authority.php
   ========================================================================== */
.approval-authority-page .tabsx{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.approval-authority-page .tabx{border:1px solid var(--separator,#e5e7eb);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--text-secondary,#64748b);cursor:pointer;text-decoration:none}
.approval-authority-page .tabx.active{background:var(--brand-50,#f5f3ff);color:var(--brand,#6d5dfc);border-color:var(--brand,#6d5dfc)}
.approval-authority-page .cardx{background:#fff;border:1px solid var(--separator,#e5e7eb);border-radius:16px;padding:18px;margin-bottom:18px}
.approval-authority-page .mutedx{color:#64748b;font-size:12px}
.approval-authority-page .toolbarx{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.approval-authority-page .chipx{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800}
.approval-authority-page .chip-role{background:#ede9fe;color:#5b21b6}
.approval-authority-page .chip-user{background:#dbeafe;color:#1d4ed8}
.approval-authority-page .chip-exp{background:#dcfce7;color:#166534}
.approval-authority-page .chip-bill{background:#fef3c7;color:#92400e}
.approval-authority-page .chip-all{background:#e5e7eb;color:#334155}
.approval-authority-page .chip-off{background:#fee2e2;color:#991b1b}
.approval-authority-page .auth-row{display:grid;grid-template-columns:1.2fr .8fr .9fr 1fr .7fr auto;gap:12px;align-items:center;border:1px solid #eef2f7;border-radius:14px;padding:14px;margin-bottom:10px;background:#fff}
.approval-authority-page .auth-row:hover{background:#fafafa;border-color:#e2e8f0}
.approval-authority-page .auth-title{font-weight:800;color:#0f172a}
.approval-authority-page .auth-sub{font-size:12px;color:#64748b;margin-top:2px}
.approval-authority-page .limit{font-size:18px;font-weight:900;color:#0f172a}
.approval-authority-page .scope-pill{display:block;font-size:11px;color:#475569;margin-top:3px}
.approval-authority-page .emptyx{border:1px dashed #cbd5e1;border-radius:14px;padding:24px;text-align:center;color:#64748b;background:#fff}
.approval-authority-page .modalx{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9999;align-items:center;justify-content:center;padding:18px}
.approval-authority-page .modalx.active{display:flex}
.approval-authority-page .sheetx{background:#fff;border-radius:18px;max-width:880px;width:100%;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.18);max-height:90vh;overflow:auto}
.approval-authority-page .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.approval-authority-page .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.approval-authority-page .hiddenx{display:none!important}
@media (max-width:900px){
.approval-authority-page .auth-row{grid-template-columns:1fr}
.approval-authority-page .grid2,
.approval-authority-page .grid3{grid-template-columns:1fr}
}

/* ==========================================================================
   APPROVAL CHANGE REQUESTS PAGE — consolidated from Expenses/admin_approval_change_requests.php
   ========================================================================== */
.approval-change-page .tabsx{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.approval-change-page .tabx{border:1px solid var(--separator,#e5e7eb);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--text-secondary,#64748b);cursor:pointer;text-decoration:none}
.approval-change-page .tabx.active{background:var(--brand-50,#f5f3ff);color:var(--brand,#6d5dfc);border-color:var(--brand,#6d5dfc)}
.approval-change-page .cardx{background:#fff;border:1px solid var(--separator,#e5e7eb);border-radius:16px;padding:18px;margin-bottom:18px}
.approval-change-page .mutedx{color:#64748b;font-size:12px}
.approval-change-page .chipx{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800}
.approval-change-page .chip-pending{background:#fef3c7;color:#92400e}
.approval-change-page .chip-approved{background:#dcfce7;color:#166534}
.approval-change-page .chip-rejected{background:#fee2e2;color:#991b1b}
.approval-change-page .chip-returned{background:#e0f2fe;color:#075985}
.approval-change-page .chip-cancelled{background:#e5e7eb;color:#475569}
.approval-change-page .chip-high,
.approval-change-page .chip-critical{background:#fee2e2;color:#991b1b}
.approval-change-page .chip-medium{background:#fef3c7;color:#92400e}
.approval-change-page .chip-low{background:#dcfce7;color:#166534}
.approval-change-page .cr-row{display:grid;grid-template-columns:150px minmax(0,1fr) 120px 170px 110px;gap:12px;align-items:center;border:1px solid #eef2f7;border-radius:14px;padding:12px;margin-bottom:10px}
.approval-change-page .cr-title{font-weight:800;color:#0f172a}
.approval-change-page .cr-sub{font-size:12px;color:#64748b}
.approval-change-page .emptyx{border:1px dashed #cbd5e1;border-radius:14px;padding:28px;text-align:center;color:#64748b}
.approval-change-page .drawerx{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:9999;padding:18px}
.approval-change-page .drawerx.active{display:flex}
.approval-change-page .sheetx{background:#fff;border-radius:18px;max-width:980px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.22)}
.approval-change-page .sheet-head{padding:18px 22px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;gap:12px}
.approval-change-page .sheet-body{padding:22px}
.approval-change-page .jsonbox{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:14px;font-size:12px;white-space:pre-wrap;max-height:260px;overflow:auto}
.approval-change-page .diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.approval-change-page .toolbarx{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.approval-change-page .filterx{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:900px){
.approval-change-page .cr-row{grid-template-columns:1fr}
.approval-change-page .diff-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   APPROVAL AUDIT PAGE — consolidated from Expenses/admin_approval_audit.php
   ========================================================================== */
.approval-audit-page .tabsx{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.approval-audit-page .tabx{border:1px solid var(--separator,#e5e7eb);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--text-secondary,#64748b);cursor:pointer;text-decoration:none}
.approval-audit-page .tabx.active{background:var(--brand-50,#f5f3ff);color:var(--brand,#6d5dfc);border-color:var(--brand,#6d5dfc)}
.approval-audit-page .audit-nav{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.approval-audit-page .audit-nav button{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:800;color:#475569}
.approval-audit-page .audit-nav button.active{border-color:var(--brand,#6d5dfc);background:#f5f3ff;color:var(--brand,#6d5dfc)}
.approval-audit-page .cardx{background:#fff;border:1px solid var(--separator,#e5e7eb);border-radius:16px;padding:18px;margin-bottom:18px}
.approval-audit-page .mutedx{color:#64748b;font-size:12px}
.approval-audit-page .chipx{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;line-height:1.2}
.approval-audit-page .chip-policy{background:#ede9fe;color:#5b21b6}
.approval-audit-page .chip-rule{background:#dbeafe;color:#1d4ed8}
.approval-audit-page .chip-ai{background:#ecfeff;color:#155e75}
.approval-audit-page .chip-wf{background:#f0fdf4;color:#166534}
.approval-audit-page .chip-sim{background:#e0f2fe;color:#075985}
.approval-audit-page .chip-impact{background:#fef3c7;color:#92400e}
.approval-audit-page .chip-conflict{background:#fee2e2;color:#991b1b}
.approval-audit-page .chip-pub{background:#dcfce7;color:#166534}
.approval-audit-page .chip-draft{background:#fef3c7;color:#92400e}
.approval-audit-page .chip-base{background:#f1f5f9;color:#475569}
.approval-audit-page .chip-arch{background:#fee2e2;color:#991b1b}
.approval-audit-page .chip-high{background:#fee2e2;color:#991b1b}
.approval-audit-page .chip-medium{background:#fef3c7;color:#92400e}
.approval-audit-page .chip-low{background:#e0f2fe;color:#075985}
.approval-audit-page .audit-row{display:grid;grid-template-columns:155px 135px minmax(0,1fr) 150px 125px auto;gap:12px;align-items:center;border:1px solid #eef2f7;border-radius:14px;padding:14px;margin-bottom:10px;background:#fff;transition:.15s}
.approval-audit-page .audit-row:hover{background:#fafafa;border-color:#e2e8f0}
.approval-audit-page .audit-main-title{font-size:14px;font-weight:800;color:#0f172a}
.approval-audit-page .audit-sub{font-size:12px;color:#64748b;margin-top:2px}
.approval-audit-page .audit-reason{font-size:12px;color:#334155;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.approval-audit-page .statline{display:flex;gap:10px;flex-wrap:wrap;margin-top:7px}
.approval-audit-page .statpill{border:1px solid #e5e7eb;border-radius:999px;padding:3px 8px;font-size:11px;color:#475569;background:#f8fafc}
.approval-audit-page .drawerx{position:fixed;right:0;top:0;bottom:0;width:min(880px,100%);background:#fff;box-shadow:-20px 0 50px rgba(15,23,42,.18);z-index:10000;transform:translateX(105%);transition:.22s;overflow:auto}
.approval-audit-page .drawerx.active{transform:translateX(0)}
.approval-audit-page .drawer-head{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;z-index:1}
.approval-audit-page .drawer-body{padding:18px}
.approval-audit-page .meta-grid{display:grid;grid-template-columns:155px 1fr;gap:8px;font-size:13px;border:1px solid #eef2f7;border-radius:14px;padding:14px;background:#f8fafc}
.approval-audit-page .meta-grid .k{color:#64748b;font-weight:700}
.approval-audit-page .change-list{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff}
.approval-audit-page .change-item{display:grid;grid-template-columns:190px 1fr 1fr;gap:12px;padding:11px 12px;border-bottom:1px solid #eef2f7;align-items:start;font-size:13px}
.approval-audit-page .change-item:last-child{border-bottom:0}
.approval-audit-page .change-item .field{font-weight:800;color:#0f172a}
.approval-audit-page .change-item .old{color:#991b1b;background:#fff7f7;border-radius:8px;padding:7px;white-space:pre-wrap}
.approval-audit-page .change-item .new{color:#166534;background:#f0fdf4;border-radius:8px;padding:7px;white-space:pre-wrap}
.approval-audit-page .emptybox{border:1px dashed #cbd5e1;border-radius:14px;padding:14px;background:#f8fafc;color:#64748b;font-size:13px}
.approval-audit-page .jsonbox{background:#0f172a;color:#e5e7eb;border-radius:12px;padding:12px;white-space:pre-wrap;font-size:12px;max-height:360px;overflow:auto}
.approval-audit-page .diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.approval-audit-page .detailsx{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff}
.approval-audit-page .detailsx summary{cursor:pointer;font-weight:800;color:#334155}
.approval-audit-page .summary-callout{border-left:4px solid var(--brand,#6d5dfc);background:#faf9ff;border-radius:12px;padding:12px 14px;font-size:13px;color:#334155}
.approval-audit-page .result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.approval-audit-page .metric-card{border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc;padding:12px}
.approval-audit-page .metric-card .label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;font-weight:800}
.approval-audit-page .metric-card .value{font-size:22px;font-weight:900;color:#0f172a;margin-top:4px}
.approval-audit-page .sample-table{width:100%;font-size:13px;border-collapse:separate;border-spacing:0 6px}
.approval-audit-page .sample-table td,
.approval-audit-page .sample-table th{padding:8px;border-bottom:1px solid #eef2f7}
.approval-audit-page .sample-table th{color:#64748b;font-size:11px;text-transform:uppercase}
.approval-audit-page .panelx{display:none}
.approval-audit-page .panelx.active{display:block}
@media (max-width:900px){
.approval-audit-page .audit-row{grid-template-columns:1fr}
.approval-audit-page .change-item{grid-template-columns:1fr}
.approval-audit-page .diff-grid,
.approval-audit-page .result-grid{grid-template-columns:1fr}
.approval-audit-page .meta-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   APPROVAL EVIDENCE PAGE — consolidated from Expenses/admin_approval_evidence.php
   ========================================================================== */
.approval-evidence-page .tabsx{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.approval-evidence-page .tabx{border:1px solid var(--separator,#e5e7eb);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--text-secondary,#64748b);text-decoration:none}
.approval-evidence-page .tabx.active{background:var(--brand-50,#f5f3ff);color:var(--brand,#6d5dfc);border-color:var(--brand,#6d5dfc)}
.approval-evidence-page .evidence-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px}
.approval-evidence-page .cardx{background:#fff;border:1px solid var(--separator,#e5e7eb);border-radius:16px;padding:18px}
.approval-evidence-page .mutedx{color:#64748b;font-size:12px}
.approval-evidence-page .itemx{border:1px solid #eef2f7;border-radius:13px;padding:12px;margin-bottom:10px;cursor:pointer;background:#fff}
.approval-evidence-page .itemx:hover,
.approval-evidence-page .itemx.active{border-color:var(--brand,#6d5dfc);background:#faf9ff}
.approval-evidence-page .chipx{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800}
.approval-evidence-page .chip-success{background:#dcfce7;color:#166534}
.approval-evidence-page .chip-warn{background:#fef3c7;color:#92400e}
.approval-evidence-page .chip-danger{background:#fee2e2;color:#991b1b}
.approval-evidence-page .chip-info{background:#dbeafe;color:#1d4ed8}
.approval-evidence-page .chip-purple{background:#ede9fe;color:#5b21b6}
.approval-evidence-page .timeline{position:relative;margin-left:10px}
.approval-evidence-page .tl{position:relative;border-left:2px solid #e5e7eb;padding:0 0 18px 22px}
.approval-evidence-page .tl:last-child{padding-bottom:0}
.approval-evidence-page .tl:before{content:"";position:absolute;left:-8px;top:0;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #94a3b8}
.approval-evidence-page .tl.success:before{border-color:#16a34a}
.approval-evidence-page .tl.warning:before{border-color:#f59e0b}
.approval-evidence-page .tl.danger:before{border-color:#ef4444}
.approval-evidence-page .tl.info:before{border-color:#3b82f6}
.approval-evidence-page .detail-json{background:#0f172a;color:#e5e7eb;border-radius:12px;padding:12px;font-size:12px;white-space:pre-wrap;max-height:260px;overflow:auto}
.approval-evidence-page .summary-hero{background:linear-gradient(135deg,#faf9ff,#fff);border:1px solid #ddd6fe;border-radius:18px;padding:18px}
.approval-evidence-page .kv{display:grid;grid-template-columns:160px 1fr;gap:8px;font-size:13px}
.approval-evidence-page .emptyx{border:1px dashed #cbd5e1;border-radius:16px;padding:32px;text-align:center;color:#64748b}
@media (max-width:1100px){
.approval-evidence-page .evidence-grid{grid-template-columns:1fr}
.approval-evidence-page .kv{grid-template-columns:1fr}
}

/* Access denied page rendered by auth.php */
.access-denied-page { min-height: 100vh; }
.access-denied-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.access-denied-card { width: 100%; max-width: 520px; padding: 32px; text-align: center; }
.access-denied-icon { font-size: 48px; color: var(--danger); }
.access-denied-card h1 { margin-top: 16px; }
.access-denied-card p { margin: 10px 0 20px; color: var(--text-secondary); }

/* ============================================================================
   APPROVAL EVIDENCE PAGE REFINEMENTS
   ============================================================================ */
/* Approval Evidence page refinements. Scoped to this page only. */
.approval-evidence-page .container-wide { max-width: 1500px; }
.approval-evidence-page .evidence-grid {
    display: grid;
    grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.approval-evidence-page #itemList {
    max-height: calc(100vh - 315px);
    overflow-y: auto;
    padding-right: 4px;
}
.approval-evidence-page .itemx {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--duration), box-shadow var(--duration), background var(--duration);
}
.approval-evidence-page .itemx:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.approval-evidence-page .itemx.active {
    border-color: var(--brand);
    background: var(--brand-50);
    box-shadow: 0 0 0 2px var(--brand-100);
}
.approval-evidence-page .evidence-item-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.approval-evidence-page .evidence-item-description {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.approval-evidence-page .evidence-item-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.approval-evidence-page .evidence-item-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.approval-evidence-page .evidence-meta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px 10px;
    color: var(--text-tertiary);
    font-size: 12px;
    text-align: right;
}
.approval-evidence-page .evidence-meta-group span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.approval-evidence-page .evidence-meta-group i { color: var(--text-tertiary); }
.approval-evidence-page .evidence-summary-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.approval-evidence-page .evidence-summary-number {
    font-size: 18px;
    font-weight: 700;
}
.approval-evidence-page .evidence-summary-amount {
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 600;
}
.approval-evidence-page .evidence-detail-list {
    display: grid;
    grid-template-columns: minmax(95px, 130px) minmax(0, 1fr);
    gap: 12px 18px;
    margin: 18px 0 0;
}
.approval-evidence-page .evidence-detail-list dt {
    color: var(--text-tertiary);
    font-weight: 500;
    margin: 0;
}
.approval-evidence-page .evidence-detail-list dd {
    color: var(--text-primary);
    font-weight: 500;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.approval-evidence-page .evidence-receipt-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.approval-evidence-page .evidence-receipt-link {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 100%;
    padding: 0;
    color: var(--brand);
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
}
.approval-evidence-page .evidence-receipt-link:hover {
    color: var(--brand-700);
    text-decoration: underline;
}
.approval-evidence-page .evidence-receipt-link span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.approval-evidence-page .evidence-change-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
}
.approval-evidence-page .evidence-change-title {
    display: block;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.approval-evidence-page .evidence-change-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 12px;
}
.approval-evidence-page .evidence-change-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.approval-evidence-page .evidence-change-meta i { color: var(--text-tertiary); }
.approval-evidence-page .summary-hero ul { padding-left: 20px; }
.approval-evidence-page .summary-hero li + li { margin-top: 4px; }
.approval-evidence-page .detail-json {
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.approval-evidence-page #receiptPreviewBody canvas { max-width: 100%; }
@media (max-width: 1100px) {
    .approval-evidence-page .evidence-grid { grid-template-columns: 1fr; }
    .approval-evidence-page #itemList { max-height: 420px; }
}
@media (max-width: 620px) {
    .approval-evidence-page .evidence-item-footer { align-items: flex-start; flex-direction: column; }
    .approval-evidence-page .evidence-meta-group { justify-content: flex-start; text-align: left; }
    .approval-evidence-page .evidence-detail-list { grid-template-columns: 1fr; gap: 4px; }
    .approval-evidence-page .evidence-detail-list dd { margin-bottom: 8px; }
}

/* ============================================================================
   APPROVAL QUEUE — RESPONSIVE WEB + CAPACITOR
   Scoped to view_approvals.php so the shared stylesheet remains safe.
   ============================================================================ */
.approval-queue-page {
    min-width: 0;
    overflow-x: clip;
    overscroll-behavior-x: none;
}
.approval-queue-page .approval-queue-shell {
    width: min(100%, 1180px);
    max-width: 1180px !important;
    min-width: 0;
    padding-inline: clamp(12px, 2.2vw, 28px);
}
.approval-queue-page .card,
.approval-queue-page .approvals-content,
.approval-queue-page .swipe-container,
.approval-queue-page .swipe-card,
.approval-queue-page .expense-top > *,
.approval-queue-page .approval-card-copy {
    min-width: 0;
}
.approval-queue-page .approvals-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.approval-queue-page .approvals-tabs::-webkit-scrollbar,
.approval-queue-page .approval-route-filter::-webkit-scrollbar,
.approval-queue-page .stats-row::-webkit-scrollbar {
    display: none;
}
.approval-queue-page .a-tab,
.approval-queue-page .sort-btn,
.approval-queue-page .approval-route-filter-btn,
.approval-queue-page .action-btn,
.approval-queue-page .modal-close-btn {
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.approval-queue-page .approval-filter-block {
    border-bottom: 1px solid var(--border-soft, var(--border));
}
.approval-queue-page .approval-route-filter {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
}
.approval-queue-page .approval-filter-label {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-right: 2px;
}
.approval-queue-page .approval-route-filter-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: color var(--duration), background var(--duration), border-color var(--duration), box-shadow var(--duration);
}
.approval-queue-page .approval-route-filter-btn:hover {
    color: var(--brand);
    border-color: var(--brand-300, var(--brand));
}
.approval-queue-page .approval-route-filter-btn.active,
.approval-queue-page .approval-route-filter-btn[aria-pressed="true"] {
    color: var(--brand-700, var(--brand));
    background: var(--brand-50);
    border-color: var(--brand);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
}
.approval-queue-page .approval-document-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -2px 18px 10px;
    color: var(--text-tertiary);
    font-size: 11px;
    line-height: 1.4;
}
.approval-queue-page .approval-document-note i {
    color: var(--brand);
    margin-top: 1px;
}
.approval-queue-page .sort-bar {
    min-width: 0;
    gap: 12px;
}
.approval-queue-page .sort-options {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.approval-queue-page .sort-btn {
    min-height: 38px;
    white-space: nowrap;
}
.approval-queue-page .stats-row {
    padding-inline: 1px;
    scroll-snap-type: x proximity;
}
.approval-queue-page .stat-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    scroll-snap-align: start;
}
.approval-queue-page .approval-select-all {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 2px 12px;
    color: var(--text-tertiary);
    font-size: 13px;
}
.approval-queue-page .approval-load-more {
    display: flex;
    justify-content: center;
    padding: 12px 0 6px;
}
.approval-queue-page .approval-load-more .action-btn {
    flex: 0 1 280px;
    border: 1px solid var(--border);
}
.approval-queue-page .approval-load-more .spinner {
    width: 16px;
    height: 16px;
    margin: 0;
    border-width: 2px;
}
.approval-queue-page .expense-check,
.approval-queue-page #selectAll {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    accent-color: var(--brand);
}
.approval-queue-page .approval-card-identity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.approval-queue-page .approval-card-copy {
    overflow-wrap: anywhere;
}
.approval-queue-page .approval-card-subtitle {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.approval-queue-page .approval-card-amount {
    flex: 0 0 auto;
    text-align: right;
    padding-left: 12px;
}
.approval-queue-page .swipe-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
    outline-offset: 2px;
}
.approval-queue-page .approval-review-block {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid var(--info-border, #bfdbfe);
    border-radius: var(--radius-md);
    color: var(--info-fg, #1e40af);
    background: var(--info-bg, #eff6ff);
    font-size: 12px;
    line-height: 1.45;
}
.approval-queue-page .approval-review-block i {
    flex: 0 0 auto;
    margin-top: 1px;
}
.approval-queue-page .card-actions,
.approval-queue-page .modal-actions {
    flex-wrap: wrap;
}
.approval-queue-page .card-actions .action-btn {
    min-width: 116px;
}
.approval-queue-page .action-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.25);
}
.approval-queue-page .detail-value,
.approval-queue-page .receipt-file-row span,
.approval-queue-page .modal-title,
.approval-queue-page .modal-subtitle {
    overflow-wrap: anywhere;
}
.approval-queue-page .modal-overlay {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
}
.approval-queue-page .modal-sheet {
    width: min(100%, 680px);
    max-height: min(88dvh, 860px) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.approval-queue-page .receipt-file-row {
    width: 100%;
    gap: 10px;
    text-align: left;
}
.approval-queue-page .receipt-file-row > div {
    min-width: 0;
}
.approval-queue-page .batch-bar {
    left: var(--sidebar-width);
    bottom: var(--safe-bottom);
    padding:
        10px max(16px, var(--safe-right))
        calc(10px + var(--safe-bottom))
        max(16px, var(--safe-left));
}
.approval-queue-page .toast {
    display: block;
    width: max-content;
    max-width: min(520px, calc(100vw - 24px - var(--safe-left) - var(--safe-right)));
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-lg);
}
.approval-queue-page .toast-success { background: var(--success-fg, #166534); }
.approval-queue-page .toast-warning { background: var(--warning-fg, #92400e); }
.approval-queue-page .toast-error { background: var(--danger-fg, #991b1b); }
.approval-queue-page .toast-info { background: var(--text-primary); }

html.is-native .approval-queue-page .native-ui {
    min-height: 100dvh;
}
html.is-native .approval-queue-page .n-content {
    min-height: 100dvh;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}
html.is-native .approval-queue-page .approval-route-filter {
    padding-inline: 14px;
}
html.is-native .approval-queue-page .approval-document-note-native {
    margin: -2px 16px 8px;
}
html.is-native .approval-queue-page .approvals-content {
    padding-inline: 12px !important;
    padding-bottom: 24px !important;
}
html.is-native .approval-queue-page .batch-bar {
    left: 0;
    bottom: calc(60px + var(--safe-bottom));
    padding-bottom: 10px;
    z-index: 989;
}
html.is-native .approval-queue-page .toast {
    bottom: calc(76px + var(--safe-bottom));
}
html.is-native .approval-queue-page .modal-overlay {
    padding: 0;
}
html.is-native .approval-queue-page .modal-sheet {
    width: 100%;
    max-width: none;
    max-height: calc(94dvh - var(--safe-top)) !important;
    padding-left: max(18px, var(--safe-left));
    padding-right: max(18px, var(--safe-right));
    padding-bottom: calc(24px + var(--safe-bottom));
}

@media (max-width: 900px) {
    .approval-queue-page .batch-bar { left: 0; }
    .approval-queue-page .approval-queue-shell {
        max-width: none !important;
        margin-top: 12px !important;
    }
}
@media (max-width: 680px) {
    .approval-queue-page .approval-queue-shell {
        padding-inline: 10px;
        margin-bottom: 80px !important;
    }
    .approval-queue-page .approvals-tabs {
        padding-inline: 8px;
    }
    .approval-queue-page .a-tab {
        flex: 1 0 auto;
        text-align: center;
    }
    .approval-queue-page .approval-route-filter {
        padding-inline: 12px;
    }
    .approval-queue-page .approval-filter-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .approval-queue-page .approval-document-note {
        margin-inline: 13px;
    }
    .approval-queue-page .sort-bar {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 12px;
    }
    .approval-queue-page .sort-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .approval-queue-page .sort-btn {
        justify-content: center;
    }
    .approval-queue-page .approvals-content {
        padding: 10px !important;
    }
    .approval-queue-page .swipe-card {
        padding: 13px;
    }
    .approval-queue-page .expense-top {
        gap: 10px;
    }
    .approval-queue-page .expense-amount {
        font-size: 16px;
    }
    .approval-queue-page .card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .approval-queue-page .card-actions .action-btn {
        min-width: 0;
        width: 100%;
    }
    .approval-queue-page .batch-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .approval-queue-page .batch-bar > div:first-child {
        flex: 1 1 100%;
    }
    .approval-queue-page .batch-bar .action-btn {
        flex: 1 1 calc(50% - 4px) !important;
    }
    .approval-queue-page .modal-overlay {
        align-items: flex-end !important;
        padding: 0;
    }
    .approval-queue-page .modal-sheet {
        width: 100%;
        max-width: none;
        max-height: calc(94dvh - var(--safe-top)) !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 24px max(16px, var(--safe-right)) calc(22px + var(--safe-bottom)) max(16px, var(--safe-left)) !important;
    }
    .approval-queue-page .modal-handle {
        display: block !important;
    }
}
@media (max-width: 470px) {
    .approval-queue-page .expense-top {
        flex-wrap: wrap;
    }
    .approval-queue-page .approval-card-identity {
        flex: 1 1 calc(100% - 104px);
    }
    .approval-queue-page .approval-card-amount {
        margin-left: auto;
    }
    .approval-queue-page .detail-grid {
        grid-template-columns: 1fr;
    }
    .approval-queue-page .modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .approval-queue-page .modal-actions .action-btn {
        width: 100%;
    }
    .approval-queue-page .receipt-file-row {
        align-items: flex-start;
    }
    .approval-queue-page .approval-detail-label {
        display: inline;
    }
}
@media (orientation: landscape) and (max-height: 520px) {
    html.is-native .approval-queue-page .modal-sheet {
        max-height: calc(100dvh - var(--safe-top)) !important;
        border-radius: 14px 14px 0 0;
    }
    html.is-native .approval-queue-page .n-content {
        padding-bottom: calc(70px + var(--safe-bottom));
    }
}
@media (prefers-reduced-motion: reduce) {
    .approval-queue-page *,
    .approval-queue-page *::before,
    .approval-queue-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ========================================================================== 
   Global notification bell, responsive inbox, and Capacitor notification sheet
   ========================================================================== */
.notification-bell-mount,
.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.notification-bell-button {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--surface, #fff);
    border-radius: 999px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.notification-panel[hidden],
.notification-badge[hidden] {
    display: none !important;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10060;
    width: min(380px, calc(100vw - 24px));
    max-height: min(610px, calc(100dvh - 90px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    background: var(--surface, #fff);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}

.notification-panel-header,
.notification-panel-toolbar,
.notification-panel-footer {
    flex: 0 0 auto;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px 12px;
    border-bottom: 1px solid var(--border-soft, #eef2f7);
}

.notification-panel-header > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.notification-panel-header strong {
    color: var(--text-primary, #111827);
    font-size: 15px;
}

.notification-panel-header span,
.notification-panel-toolbar {
    color: var(--text-tertiary, #8492a6);
    font-size: 11px;
}

.notification-panel-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #536173);
    cursor: pointer;
}

.notification-panel-close:hover,
.notification-panel-close:focus-visible {
    background: var(--surface-alt, #f5f7fb);
    color: var(--text-primary, #111827);
}

.notification-panel-toolbar {
    min-height: 38px;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface-alt, #f8fafc);
}

.notification-panel-toolbar button {
    border: 0;
    background: transparent;
    color: var(--brand, #534ab7);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.notification-panel-toolbar button:disabled {
    opacity: .45;
    cursor: default;
}

.notification-panel-list {
    min-height: 130px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.notification-preview-item {
    width: 100%;
    min-height: 76px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 8px;
    align-items: start;
    gap: 11px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--border-soft, #eef2f7);
    background: var(--surface, #fff);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.notification-preview-item:hover,
.notification-preview-item:focus-visible,
.notification-preview-item.is-unread {
    background: #faf9ff;
}

.notification-preview-icon,
.notification-row-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eeedfe;
    color: #534ab7;
}

.notification-preview-icon.is-blue,
.notification-row-icon.is-blue { background: #e6f1fb; color: #0b6bcb; }
.notification-preview-icon.is-green,
.notification-row-icon.is-green { background: #e9f7ef; color: #047857; }
.notification-preview-icon.is-amber,
.notification-row-icon.is-amber { background: #fff5dc; color: #b45309; }
.notification-preview-icon.is-red,
.notification-row-icon.is-red { background: #fce8e8; color: #b42318; }

.notification-preview-copy,
.notification-row-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.notification-preview-copy strong,
.notification-preview-copy > span,
.notification-row-copy strong,
.notification-row-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-preview-copy strong {
    color: var(--text-primary, #111827);
    font-size: 12.5px;
    font-weight: 650;
}

.notification-preview-copy > span {
    color: var(--text-secondary, #64748b);
    font-size: 11.5px;
}

.notification-preview-copy small,
.notification-row-copy small {
    color: var(--text-tertiary, #94a3b8);
    font-size: 10px;
}

.notification-preview-dot {
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: transparent;
}

.notification-preview-item.is-unread .notification-preview-dot {
    background: var(--brand, #534ab7);
}

.notification-panel-state {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 12px;
    text-align: center;
}

.notification-panel-state i { font-size: 24px; }
.notification-panel-state.is-error { color: var(--danger, #b42318); }

.notification-panel-footer {
    padding: 11px 16px;
    border-top: 1px solid var(--border-soft, #eef2f7);
    text-align: center;
}

.notification-panel-footer a {
    color: var(--brand, #534ab7);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.notification-backdrop { display: none; }

/* Full notifications inbox. */
body.notifications-page {
    overflow-x: hidden;
    background: var(--app-bg, #f5f7fb);
}

.notifications-shell {
    width: min(100%, 1040px);
    margin-inline: auto;
    padding: clamp(16px, 3vw, 32px);
}

.notifications-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.notifications-hero h1 {
    margin: 0 0 4px;
    color: var(--text-primary, #111827);
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.15;
}

.notifications-hero p {
    margin: 0;
    color: var(--text-secondary, #64748b);
}

.notifications-filters {
    position: relative;
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.notifications-filters::-webkit-scrollbar { display: none; }

.notifications-filters button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--border, #dfe4ea);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text-secondary, #536173);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.notifications-filters button.is-active {
    border-color: var(--brand, #534ab7);
    background: var(--brand-50, #f4f2ff);
    color: var(--brand, #534ab7);
    box-shadow: inset 0 0 0 1px var(--brand, #534ab7);
}

.notifications-filters button span {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger, #b42318);
    color: #fff;
    font-size: 9px;
    line-height: 18px;
}

.notifications-card {
    overflow: hidden;
    border: 1px solid var(--border, #dfe4ea);
    border-radius: 18px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 24px rgba(15, 23, 42, .04);
}

.notification-row {
    width: 100%;
    min-height: 92px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 0;
    border-bottom: 1px solid var(--border-soft, #eef2f7);
    background: var(--surface, #fff);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.notification-row:hover,
.notification-row:focus-visible,
.notification-row.is-unread { background: #faf9ff; }
.notification-row.is-unread { box-shadow: inset 3px 0 var(--brand, #534ab7); }
.notification-row-icon { width: 42px; height: 42px; }
.notification-row-copy { gap: 5px; }
.notification-row-copy strong { color: var(--text-primary, #111827); font-size: 14px; }
.notification-row-copy > span { color: var(--text-secondary, #64748b); font-size: 13px; white-space: normal; }
.notification-row-arrow { color: var(--text-tertiary, #94a3b8); }

.notifications-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    color: var(--text-tertiary, #94a3b8);
    text-align: center;
}

.notifications-state i { font-size: 30px; }
.notifications-state strong { color: var(--text-secondary, #64748b); }
.notifications-state.is-error { color: var(--danger, #b42318); }

.notifications-load-more {
    display: block;
    margin: 16px auto;
}

@media (max-width: 680px) {
    .notifications-shell { padding: 14px 10px 28px; }
    .notifications-hero { align-items: stretch; flex-direction: column; }
    .notifications-hero .btn { align-self: flex-start; }
    .notifications-card { border-radius: 14px; }
    .notification-row { grid-template-columns: 38px minmax(0, 1fr) 14px; gap: 10px; padding: 14px 12px; }
    .notification-row-icon { width: 38px; height: 38px; }
}

/* On Capacitor the panel is a bottom sheet. It has no drag handle and cannot
   close through backdrop taps or a downward gesture; the top X is explicit. */
html.is-native body.notification-panel-open { overflow: hidden; }

html.is-native .app-topbar:has(#notifBellMount) {
    z-index: 10050;
    overflow: visible;
}

html.is-native .notification-backdrop.is-visible {
    position: fixed;
    top: calc(var(--topbar-height) + var(--safe-top));
    right: 0;
    bottom: calc(60px + var(--safe-bottom));
    left: 0;
    z-index: 10030;
    display: block;
    background: rgba(15, 23, 42, .28);
    touch-action: none;
}

html.is-native .notification-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: calc(60px + var(--safe-bottom));
    left: 0;
    z-index: 10040;
    width: 100%;
    max-height: calc(100dvh - var(--topbar-height) - 60px - var(--safe-top) - var(--safe-bottom));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 36px rgba(15, 23, 42, .2);
    animation: notificationSheetUp .24s cubic-bezier(.25,.46,.45,.94);
    touch-action: pan-y;
}

html.is-native .notification-panel-header {
    padding-top: 14px;
    padding-right: max(14px, var(--safe-right));
    padding-left: max(14px, var(--safe-left));
}

html.is-native body.notifications-page .app-content {
    padding-bottom: calc(60px + var(--safe-bottom));
}

@keyframes notificationSheetUp {
    from { transform: translateY(100%); opacity: .75; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html.is-native .notification-panel { animation: none; }
}

/* ============================================================================
   38. RESPONSIVE APPROVAL SURFACES
   --------------------------------------------------------------------------
   Final, page-scoped layout hardening for:
     - Expenses/approval_rules.php
     - Expenses/admin_approval_evidence.php
     - Expenses/view_approvals.php

These rules are presentation-only. They deliberately target the page body
   namespaces so approval behaviour elsewhere in the application is unchanged.
   ============================================================================ */

body.sidebar-mobile-open {
    overflow: hidden;
}

body.arules,
body.approval-evidence-page,
body.approval-queue-page {
    min-width: 0;
    overflow-x: clip;
}

body.arules img,
body.approval-evidence-page img,
body.approval-queue-page img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 520px) {
    html:not(.is-native) body.arules .topbar,
    html:not(.is-native) body.approval-evidence-page .topbar,
    html:not(.is-native) body.approval-queue-page .topbar {
        gap: 8px;
        padding-inline: 10px;
    }

html:not(.is-native) body.arules .topbar-page-title,
    html:not(.is-native) body.approval-evidence-page .topbar-page-title,
    html:not(.is-native) body.approval-queue-page .topbar-page-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

html:not(.is-native) body.arules .topbar-actions,
    html:not(.is-native) body.approval-evidence-page .topbar-actions,
    html:not(.is-native) body.approval-queue-page .topbar-actions {
        flex: 0 0 auto;
        min-width: 0;
    }
}

/* --- Approval rules: fluid cards, controls and modal content ------------- */
body.arules .approval-rules-shell {
    width: min(100%, 900px);
    max-width: 900px;
    padding-inline: clamp(12px, 2.5vw, 24px);
    padding-bottom: 64px !important;
}

body.arules .pcard,
body.arules .pcard-head,
body.arules .pcard-foot,
body.arules .rrow,
body.arules .rrow .txt,
body.arules .head-meta,
body.arules .foot-tools,
body.arules .tune-row .tl,
body.arules .advl > div,
body.arules .lrow .lmain,
body.arules .md,
body.arules .modal-scroll {
    min-width: 0;
}

body.arules .field2,
body.arules .txtarea,
body.arules .tune-row input,
body.arules .tune-row select,
body.arules .advl input,
body.arules .advl select {
    max-width: 100%;
}

body.arules .md h3 .x {
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px auto;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 50%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.arules .md h3 .x:hover {
    color: var(--text-primary);
    background: var(--surface-alt);
}

body.arules .pf-cmp,
body.arules .auth-results {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

body.arules .pf-cmp-row {
    min-width: 520px;
}

body.arules .toastx {
    max-width: min(520px, calc(100vw - 24px));
    overflow-wrap: anywhere;
}

@keyframes arulesResponsiveSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (max-width: 680px) {
    body.arules .approval-rules-shell {
        padding-inline: 10px;
        padding-top: 14px !important;
    }

body.arules .subtitle {
        margin-bottom: 14px;
        padding-inline: 2px;
    }

body.arules .pcard-head,
    body.arules .rrow,
    body.arules .pcard-foot,
    body.arules .auth-row {
        padding-left: 13px;
        padding-right: 13px;
    }

body.arules .foot-tools {
        width: 100%;
        gap: 4px 10px;
    }

body.arules .foot-tools > span,
    body.arules .tunelink,
    body.arules .auth-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

body.arules .ov {
        padding: 0;
        align-items: flex-end;
        justify-content: stretch;
    }

body.arules .md {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        padding: 14px max(14px, var(--safe-right)) calc(16px + var(--safe-bottom)) max(14px, var(--safe-left));
        display: flex;
        flex-direction: column;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        animation: arulesResponsiveSheetUp .26s cubic-bezier(.25,.46,.45,.94);
    }

body.arules .md > h3 {
        position: sticky;
        top: -14px;
        z-index: 4;
        flex: 0 0 auto;
        padding: 12px 0 10px;
        margin: 0 0 6px;
        background: var(--surface);
        border-bottom: 1px solid var(--border-soft);
    }

body.arules .md .modal-scroll {
        max-height: none;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

body.arules .mfoot {
        z-index: 3;
        flex-wrap: wrap;
        padding-bottom: 2px;
    }

body.arules .mfoot .tunelink {
        flex: 1 1 100%;
        margin-right: 0 !important;
    }

body.arules .au-filters,
    body.arules .auth-grid,
    body.arules .axis-grid,
    body.arules .advb-grid,
    body.arules .simtop-grid {
        min-width: 0;
    }

body.arules table.difft,
    body.arules table.au-samp {
        min-width: 520px;
    }
}

@media (max-width: 480px) {
    body.arules .tune-row,
    body.arules .advl {
        align-items: stretch;
        flex-wrap: wrap;
    }

body.arules .tune-row .tl,
    body.arules .advl > div {
        flex: 1 1 calc(100% - 30px);
    }

body.arules .tune-row input:not([type="checkbox"]),
    body.arules .tune-row select,
    body.arules .tune-row input[type="time"],
    body.arules .advl input,
    body.arules .advl select {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: none !important;
        min-height: 44px;
        text-align: left;
    }

body.arules .tgrid,
    body.arules .au-filters {
        grid-template-columns: 1fr;
    }

body.arules .au-filters .au-acts {
        grid-column: auto;
        flex-wrap: wrap;
    }

body.arules .au-filters .au-acts > *,
    body.arules .mfoot .btn {
        flex: 1 1 auto;
    }

body.arules .seg,
    body.arules .seg-sm,
    body.arules .mode-sw {
        max-width: 100%;
        overflow-x: auto;
    }

body.arules .auth-decision {
        grid-template-columns: 1fr;
    }
}

/* --- Evidence: responsive toolbar, cards and attachment sheet ------------ */
body.approval-evidence-page .evidence-page-shell {
    width: min(100%, 1500px);
    max-width: 1500px;
    padding-inline: clamp(12px, 2.2vw, 28px);
}

body.approval-evidence-page .evidence-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: start;
    gap: 16px 22px;
}

body.approval-evidence-page .evidence-heading,
body.approval-evidence-page .evidence-filters,
body.approval-evidence-page .evidence-grid,
body.approval-evidence-page .cardx,
body.approval-evidence-page #detailPanel {
    min-width: 0;
}

body.approval-evidence-page .evidence-filters {
    display: grid;
    grid-template-columns: 150px 170px minmax(200px, 240px) auto;
    align-items: center;
    gap: 8px;
}

body.approval-evidence-page .evidence-filter,
body.approval-evidence-page .evidence-search {
    width: 100%;
    min-width: 0;
    min-height: 40px;
}

body.approval-evidence-page .evidence-filters .btn,
body.approval-evidence-page .evidence-receipt-link,
body.approval-evidence-page .tabx {
    min-height: 44px;
    touch-action: manipulation;
}

body.approval-evidence-page .evidence-filters .btn {
    white-space: nowrap;
}

body.approval-evidence-page .evidence-preview-body {
    min-height: min(50dvh, 560px);
    max-height: 76dvh;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.approval-evidence-page #receiptPreviewBody canvas,
body.approval-evidence-page #receiptPreviewBody iframe,
body.approval-evidence-page #receiptPreviewBody img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

body.approval-evidence-page #receiptPreviewBody iframe {
    width: 100%;
    height: min(68dvh, 760px);
    border: 0;
}

@keyframes evidenceResponsiveSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (max-width: 1280px) {
    body.approval-evidence-page .evidence-toolbar {
        grid-template-columns: 1fr;
    }

body.approval-evidence-page .evidence-filters {
        grid-template-columns: minmax(130px, .8fr) minmax(150px, 1fr) minmax(220px, 1.5fr) auto;
    }
}

@media (max-width: 820px) {
    body.approval-evidence-page .evidence-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

body.approval-evidence-page .evidence-search {
        grid-column: 1 / -1;
    }

body.approval-evidence-page .evidence-filters .btn {
        grid-column: 1 / -1;
    }

body.approval-evidence-page .tabsx {
        flex-wrap: nowrap;
        max-width: 100%;
        padding-bottom: 4px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

body.approval-evidence-page .tabsx::-webkit-scrollbar {
        display: none;
    }

body.approval-evidence-page .tabx {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 680px) {
    body.approval-evidence-page .evidence-page-shell {
        padding: 12px 10px 28px !important;
    }

body.approval-evidence-page .cardx {
        padding: 14px;
        border-radius: 14px;
    }

body.approval-evidence-page .evidence-toolbar-card {
        margin-bottom: 10px !important;
    }

body.approval-evidence-page .evidence-filters {
        grid-template-columns: 1fr;
    }

body.approval-evidence-page .evidence-search,
    body.approval-evidence-page .evidence-filters .btn {
        grid-column: auto;
    }

body.approval-evidence-page #itemList {
        max-height: none;
        padding-right: 0;
    }

body.approval-evidence-page .emptyx {
        padding: 24px 14px;
    }

body.approval-evidence-page .timeline {
        margin-left: 5px;
    }

body.approval-evidence-page .tl {
        padding-left: 17px;
    }

body.approval-evidence-page .modal {
        padding: 0 !important;
    }

body.approval-evidence-page .modal-dialog.modal-xl {
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
        display: flex;
        align-items: flex-end;
    }

body.approval-evidence-page .modal-content {
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        animation: evidenceResponsiveSheetUp .26s cubic-bezier(.25,.46,.45,.94);
    }

body.approval-evidence-page .modal-header {
        position: sticky;
        top: 0;
        z-index: 3;
        gap: 8px;
        padding: 12px 14px;
        background: var(--surface);
    }

body.approval-evidence-page .modal-title {
        min-width: 0;
        overflow-wrap: anywhere;
    }

body.approval-evidence-page .evidence-preview-body {
        min-height: 46dvh;
        max-height: calc(94dvh - 70px);
        padding: 12px;
    }
}

/* --- Queue: non-dismissible native sheets and compact viewer controls ----- */
body.approval-queue-page:has(.modal-overlay.active),
body.arules:has(.ov.open),
body.approval-evidence-page:has(.modal.show) {
    overflow: hidden;
}

body.approval-queue-page .receipt-viewer-controls {
    flex-wrap: wrap;
}

body.approval-queue-page .receipt-viewer-controls > * {
    flex: 0 0 auto;
}

body.approval-queue-page .receipt-viewer-body,
body.approval-queue-page #receiptPdfContainer {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 680px) {
    body.approval-queue-page .modal-handle {
        display: none !important;
    }

body.approval-queue-page .modal-close-btn {
        position: sticky;
        top: 0;
        margin: -8px 0 -24px auto;
        z-index: 12;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

body.approval-queue-page .receipt-viewer-controls {
        gap: 8px !important;
    }

body.approval-queue-page #receiptDownloadBtn {
        margin-left: 0 !important;
    }

body.approval-queue-page .receipt-pdf-fallback iframe {
        min-height: 260px;
        height: 52dvh;
    }
}

@media (max-width: 380px) {
    body.approval-queue-page .card-actions,
    body.approval-queue-page .modal-actions {
        grid-template-columns: 1fr;
    }

body.approval-queue-page .approval-card-identity {
        flex-basis: 100%;
    }

body.approval-queue-page .approval-card-amount {
        width: 100%;
        padding-left: 30px;
        text-align: left;
    }
}

/* --- Capacitor viewport: reserve both bars for content and every sheet ---- */
html.is-native body.arules .app-topbar,
html.is-native body.approval-evidence-page .app-topbar,
html.is-native body.approval-queue-page .n-nav,
html.is-native body.arules .n-tab-bar,
html.is-native body.approval-evidence-page .n-tab-bar,
html.is-native body.approval-queue-page .n-tab-bar {
    z-index: 10050;
}

html.is-native body.arules .app-content,
html.is-native body.approval-evidence-page .app-content {
    padding-bottom: calc(76px + var(--safe-bottom));
}

html.is-native body.arules .approval-rules-shell,
html.is-native body.approval-evidence-page .evidence-page-shell {
    padding-bottom: 24px !important;
}

html.is-native body.arules .n-sheet-overlay,
html.is-native body.approval-evidence-page .n-sheet-overlay,
html.is-native body.approval-queue-page .n-sheet-overlay {
    top: calc(var(--topbar-height) + var(--safe-top));
    bottom: calc(60px + var(--safe-bottom));
    height: auto;
    z-index: 10010;
}

html.is-native body.arules .n-sheet,
html.is-native body.approval-evidence-page .n-sheet,
html.is-native body.approval-queue-page .n-sheet {
    bottom: calc(60px + var(--safe-bottom));
    max-height: calc(100dvh - var(--topbar-height) - 60px - var(--safe-top) - var(--safe-bottom));
    padding-bottom: 0;
    z-index: 10020;
}

html.is-native body.arules .ov {
    top: calc(var(--topbar-height) + var(--safe-top));
    right: 0;
    bottom: calc(60px + var(--safe-bottom));
    left: 0;
    height: auto;
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
}

html.is-native body.arules .md {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 100%;
    border-radius: 20px 20px 0 0;
    padding: 14px max(14px, var(--safe-right)) 16px max(14px, var(--safe-left));
    display: flex;
    flex-direction: column;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: arulesResponsiveSheetUp .26s cubic-bezier(.25,.46,.45,.94);
}

html.is-native body.arules .toastx {
    right: max(12px, var(--safe-right));
    bottom: calc(72px + var(--safe-bottom));
    left: max(12px, var(--safe-left));
    max-width: none;
    text-align: center;
}

html.is-native body.approval-evidence-page .modal,
html.is-native body.approval-queue-page .modal-overlay {
    top: calc(var(--topbar-height) + var(--safe-top));
    right: 0;
    bottom: calc(60px + var(--safe-bottom));
    left: 0;
    height: auto;
}

html.is-native body.approval-evidence-page > .modal-backdrop {
    top: calc(var(--topbar-height) + var(--safe-top));
    bottom: calc(60px + var(--safe-bottom));
    height: auto;
}

html.is-native body.approval-evidence-page .modal-dialog.modal-xl {
    width: 100%;
    max-width: none;
    min-height: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: flex-end;
}

html.is-native body.approval-evidence-page .modal-content {
    width: 100%;
    max-height: 100%;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    animation: evidenceResponsiveSheetUp .26s cubic-bezier(.25,.46,.45,.94);
}

html.is-native body.approval-evidence-page .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface);
}

html.is-native body.approval-evidence-page .evidence-preview-body {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow: auto;
    padding-bottom: 16px;
}

html.is-native body.approval-queue-page .modal-overlay {
    padding: 0;
    align-items: flex-end;
}

html.is-native body.approval-queue-page .modal-sheet {
    width: 100%;
    max-width: none !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0;
    padding: 16px max(16px, var(--safe-right)) 20px max(16px, var(--safe-left)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html.is-native body.approval-queue-page .modal-handle {
    display: none !important;
}

html.is-native body.approval-queue-page .modal-close-btn {
    position: sticky;
    top: 0;
    right: auto;
    margin: -4px 0 -32px auto;
    z-index: 12;
    width: 44px;
    height: 44px;
}

html.is-native body.approval-queue-page:has(.batch-bar.active) .n-content {
    padding-bottom: calc(178px + var(--safe-bottom));
}

html:not(.is-native) body.approval-queue-page:has(.batch-bar.active) .approval-queue-shell {
    padding-bottom: 116px;
}

@media (orientation: landscape) and (max-height: 540px) {
    html.is-native body.arules .md,
    html.is-native body.approval-evidence-page .modal-content,
    html.is-native body.approval-queue-page .modal-sheet {
        border-radius: 14px 14px 0 0;
    }
}

/* ============================================================================
   39. APPROVAL MOBILE FLUIDITY REPAIRS
   --------------------------------------------------------------------------
   Page-scoped presentation fixes only. Existing controls, handlers, routes,
   permissions, APIs and approval behaviour are intentionally untouched.
   ============================================================================ */

body.arules .app-shell,
body.arules .app-content,
body.approval-evidence-page .app-shell,
body.approval-evidence-page .app-content,
body.approval-evidence-page .evidence-page-shell,
body.approval-evidence-page .evidence-grid,
body.approval-evidence-page .evidence-list-card,
body.approval-evidence-page #itemList,
body.approval-evidence-page .itemx {
    min-width: 0;
    max-width: 100%;
}

/* Shared approval navigation: retain horizontal access and show that it moves. */
body.approval-evidence-page .approval-profile-nav {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

body.approval-evidence-page .approval-profile-nav-primary,
body.approval-evidence-page .approval-profile-nav-secondary {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
}

body.approval-evidence-page .approval-profile-group,
body.approval-evidence-page .approval-profile-feature {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

body.approval-evidence-page .approval-profile-nav.approval-nav-overflow .approval-profile-nav-primary {
    padding-right: 74px;
}

body.approval-evidence-page .approval-profile-nav.approval-nav-can-right::after {
    content: "Swipe  ›";
    position: absolute;
    z-index: 3;
    top: 1px;
    right: 1px;
    width: 86px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 9px;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, transparent, var(--surface-alt) 38%);
    color: var(--brand-700);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    pointer-events: none;
}

body.approval-evidence-page .approval-profile-nav.approval-nav-can-left::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 48px;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(90deg, var(--surface-alt), transparent);
    pointer-events: none;
}

/* Approval Rules action rail: readable, touchable and visibly scrollable. */
body.arules .pcard-foot {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    min-width: 0;
    overflow: visible;
}

body.arules .foot-tools {
    width: 100%;
    flex: 1 1 auto;
    max-width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
}

body.arules .foot-tools::-webkit-scrollbar {
    display: none;
}

body.arules .foot-tools > span {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
}

body.arules .pcard-foot.action-rail-can-right::after {
    content: "Swipe  ›";
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    width: 82px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    background: linear-gradient(90deg, transparent, var(--surface) 38%);
    color: var(--brand-700);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    pointer-events: none;
}

body.arules .pcard-foot.action-rail-can-left::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    width: 20px;
    height: 44px;
    display: none;
    background: linear-gradient(90deg, var(--surface), transparent);
    pointer-events: none;
}

body.arules .pcard-foot > div:not(.foot-tools) {
    min-width: 0;
    justify-self: end;
}

/* Approval Limits must remain inside the card at every viewport width. */
body.arules #approval-limits,
body.arules #authorityCard,
body.arules .auth-card,
body.arules .auth-card .pcard-head,
body.arules .auth-card .auth-toolbar,
body.arules .auth-card .auth-state,
body.arules .auth-card .auth-row,
body.arules .auth-card .sentence,
body.arules .auth-card .scope {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.arules .auth-card {
    overflow: hidden;
}

body.arules .auth-card .pcard-head > *,
body.arules .auth-card .auth-state > *,
body.arules .auth-card .auth-row > * {
    min-width: 0;
}

body.arules .auth-card .conote,
body.arules .auth-card .sentence,
body.arules .auth-card .scope {
    white-space: normal;
    overflow-wrap: anywhere;
}

body.arules .auth-card .pcard-foot {
    display: block;
}

body.arules .auth-card .pcard-foot .conote {
    width: 100%;
    padding: 0;
}

/* Evidence list cards use a real fluid layout instead of clipping flex rows. */
body.approval-evidence-page .evidence-heading h4 {
    max-width: 100%;
    font-size: clamp(1.25rem, 3.4vw, 1.75rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body.approval-evidence-page .evidence-heading .mutedx {
    max-width: 72ch;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body.approval-evidence-page .evidence-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

body.approval-evidence-page .evidence-item-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

body.approval-evidence-page .evidence-item-head > .chipx {
    flex: 0 0 auto;
}

body.approval-evidence-page .itemx[aria-busy="true"] {
    border-color: var(--brand);
    background: var(--brand-50);
    box-shadow: 0 0 0 2px var(--brand-100);
}

body.approval-evidence-page .itemx[aria-busy="true"]::after {
    content: "Opening evidence…";
    display: block;
    margin-top: 9px;
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 700;
}

body.approval-evidence-page .evidence-item-description,
body.approval-evidence-page .itemx .mutedx,
body.approval-evidence-page #detailPanel,
body.approval-evidence-page #detailPanel .cardx,
body.approval-evidence-page #detailPanel .d-flex,
body.approval-evidence-page #detailPanel [class*="col-"] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.approval-evidence-page #detailPanel pre {
    max-width: 100%;
}

/* Below the two-column breakpoint, the existing panel becomes an X-only sheet. */
@media (max-width: 1100px) {
    body.approval-evidence-page .evidence-grid > #detailPanel {
        display: none;
    }

body.approval-evidence-page .evidence-detail-modal {
        padding: 0 !important;
    }

body.approval-evidence-page .evidence-detail-modal .modal-dialog {
        width: 100%;
        max-width: none;
        min-height: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        align-items: flex-end;
    }

body.approval-evidence-page .evidence-detail-modal .modal-content {
        width: 100%;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        animation: evidenceResponsiveSheetUp .26s cubic-bezier(.25,.46,.45,.94);
    }

body.approval-evidence-page .evidence-detail-modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 3;
        flex: 0 0 auto;
        background: var(--surface);
    }

body.approval-evidence-page .evidence-detail-sheet-body {
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 14px max(14px, var(--safe-right)) max(16px, var(--safe-bottom)) max(14px, var(--safe-left));
    }

body.approval-evidence-page .evidence-detail-modal #detailPanel {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
}

@media (max-width: 820px) {
    body.arules .pcard-head {
        align-items: flex-start;
    }

body.arules .pcard-name {
        flex: 1 1 180px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

body.arules .head-meta {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
    }

body.arules .pcard-foot {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
    }

body.arules .foot-tools {
        width: 100%;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0 72px 6px 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

body.arules .foot-tools > span {
        min-height: 44px;
        padding: 7px 10px;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: var(--surface-alt);
    }

body.arules .pcard-foot > div:not(.foot-tools) {
        width: 100%;
        min-width: 0;
        justify-self: auto;
        flex-wrap: wrap;
    }

body.arules .pcard-foot > div:not(.foot-tools) .btn {
        min-height: 44px;
        max-width: 100%;
    }

body.arules .pcard-foot.action-rail-can-right::after {
        display: flex;
    }

body.arules .pcard-foot.action-rail-can-left::before {
        display: block;
    }

body.arules .auth-card .pcard-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
    }

body.arules .auth-card .pcard-head > .bi {
        grid-column: 1;
        grid-row: 1;
    }

body.arules .auth-card .pcard-name {
        grid-column: 2;
        grid-row: 1;
        width: auto;
    }

body.arules .auth-card .badge2 {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        white-space: nowrap;
    }

body.arules .auth-card .head-meta.auth-toolbar {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 2px 0 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

body.arules .auth-card .auth-toolbar .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-inline: 8px;
        white-space: normal !important;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

body.arules .auth-card .auth-state {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 8px 10px;
    }

body.arules .auth-card .auth-state > .bi {
        grid-column: 1;
        grid-row: 1;
        margin-top: 2px;
    }

body.arules .auth-card .auth-state > .txt {
        grid-column: 2;
        grid-row: 1;
        overflow-wrap: anywhere;
    }

body.arules .auth-card .auth-state > .btn {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        max-width: 220px;
        min-height: 44px;
        justify-self: start;
    }

body.arules .auth-card .auth-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px 10px;
    }

body.arules .auth-card .auth-row .sentence {
        grid-column: 1 / -1;
        grid-row: 1;
        line-height: 1.5;
    }

body.arules .auth-card .auth-row .auth-status {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: center;
    }

body.arules .auth-card .auth-row .auth-actions {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        justify-self: end;
        justify-content: flex-end;
        gap: 4px;
    }

body.arules .auth-card .auth-row .auth-link {
        min-height: 40px;
        padding: 7px 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    body.arules .auth-card .pcard-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

body.arules .auth-card .badge2 {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
    }

body.arules .auth-card .head-meta.auth-toolbar {
        grid-row: 3;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

body.arules .auth-card .auth-toolbar > .btn-primary:last-child {
        grid-column: 1 / -1;
    }

body.arules .auth-card .auth-state > .btn {
        grid-column: 1 / -1;
        max-width: none;
    }

body.arules .auth-card .auth-row {
        grid-template-columns: minmax(0, 1fr);
    }

body.arules .auth-card .auth-row .sentence,
    body.arules .auth-card .auth-row .auth-status,
    body.arules .auth-card .auth-row .auth-actions {
        grid-column: 1;
    }

body.arules .auth-card .auth-row .auth-status {
        grid-row: 2;
    }

body.arules .auth-card .auth-row .auth-actions {
        grid-row: 3;
        width: 100%;
        justify-self: start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    body.arules .auth-card .head-meta.auth-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

body.arules .auth-card .auth-toolbar > .btn-primary:last-child {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    body.arules .rrow {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px 10px;
    }

body.arules .rrow .lico {
        flex: 0 0 20px;
        margin-top: 2px;
    }

body.arules .rrow .txt {
        flex: 1 1 calc(100% - 42px);
        min-width: 0;
        line-height: 1.5;
        overflow-wrap: anywhere;
        word-break: normal;
    }

body.arules .rrow .pill {
        margin-left: 30px;
    }

body.arules .rrow .ract {
        margin-left: auto;
        gap: 2px;
    }

body.arules .rrow .ract i {
        width: 40px;
        height: 40px;
        display: inline-grid;
        place-items: center;
        border-radius: 10px;
    }

body.arules .rrow .ract i:active {
        background: var(--surface-alt);
    }

body.arules .rrow > .btn {
        max-width: calc(100% - 30px);
        margin-left: 30px;
        white-space: normal;
    }

body.approval-evidence-page .evidence-item-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

body.approval-evidence-page .evidence-meta-group {
        justify-content: flex-start;
        text-align: left;
    }

body.approval-evidence-page .evidence-meta-group span {
        white-space: normal;
    }

body.approval-evidence-page .summary-hero {
        padding: 14px;
    }
}

/* The browser topbar must reflow instead of making the page wider. */
@media (max-width: 520px) {
    html:not(.is-native) body.arules .topbar,
    html:not(.is-native) body.approval-evidence-page .topbar,
    html:not(.is-native) body.approval-queue-page .topbar {
        width: 100%;
        min-width: 0;
        gap: 6px;
        padding-inline: 10px;
    }

html:not(.is-native) body.arules .topbar-spacer,
    html:not(.is-native) body.approval-evidence-page .topbar-spacer,
    html:not(.is-native) body.approval-queue-page .topbar-spacer {
        display: none;
    }

html:not(.is-native) body.arules .topbar-page-title > .bi,
    html:not(.is-native) body.approval-evidence-page .topbar-page-title > .bi,
    html:not(.is-native) body.approval-queue-page .topbar-page-title > .bi,
    html:not(.is-native) body.arules .topbar-mobile-toggle,
    html:not(.is-native) body.approval-evidence-page .topbar-mobile-toggle,
    html:not(.is-native) body.approval-queue-page .topbar-mobile-toggle {
        flex: 0 0 auto;
    }

html:not(.is-native) body.arules .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle],
    html:not(.is-native) body.approval-evidence-page .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle],
    html:not(.is-native) body.approval-queue-page .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle] {
        width: 36px;
        min-width: 36px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

html:not(.is-native) body.arules .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle] .bi-plus-lg,
    html:not(.is-native) body.approval-evidence-page .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle] .bi-plus-lg,
    html:not(.is-native) body.approval-queue-page .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle] .bi-plus-lg {
        font-size: 14px;
    }

html:not(.is-native) body.arules .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle] .bi-chevron-down,
    html:not(.is-native) body.approval-evidence-page .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle] .bi-chevron-down,
    html:not(.is-native) body.approval-queue-page .topbar-actions:not(.me-2) .dropdown [data-dropdown-toggle] .bi-chevron-down {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.arules .md,
    body.approval-evidence-page .evidence-detail-modal .modal-content,
    body.approval-evidence-page .evidence-preview-modal .modal-content {
        animation: none !important;
    }
}
/* ============================================================================
   40. TOP BAR + SIDEBAR - SMALL VIEWPORT OVERFLOW REPAIR  (2026-08-13)
   ----------------------------------------------------------------------------
   PASTE THIS AT THE VERY END OF /assets/css/prod_core.css.

Why: .topbar is a flex row with gap:16px, padding:0 20px, a fixed 200px
   page title and a flex:1 spacer. Below ~420px the toggle + title + mobile
   search button + "New" dropdown + notification bell measure wider than the
   viewport. body{max-width:100vw;overflow-x:clip} then silently CLIPS the
   right-hand end, which is why the bell disappears off the screen edge
   instead of the row reflowing.

These rules are global on purpose - the same overflow exists on every
   authenticated page, and section 38 already solved it, but only for the
   three body.arules / body.approval-* namespaces. This generalises it.
   Nothing here changes desktop (>=901px).
   ============================================================================ */

@media (max-width: 900px) {
    /* The row must be allowed to shrink instead of overflowing. */
    .topbar {
        width: 100%;
        min-width: 0;
        gap: 8px;
        padding-left: max(12px, var(--safe-left));
        padding-right: max(12px, var(--safe-right));
    }

/* The title is the only thing that should absorb the leftover space. */
    .topbar-page-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* The spacer's whole job was pushing actions right. The title now does
       that, and keeping the spacer only steals width. */
    .topbar-spacer { display: none; }

.topbar-mobile-toggle,
    .topbar-page-title > .bi,
    .topbar-actions {
        flex: 0 0 auto;
    }

.topbar-actions {
        min-width: 0;
        gap: 4px;
    }

.topbar-actions.me-2 {
        margin-right: 0 !important;
    }

/* The vertical hairline separator between page actions and global actions
       costs 17px of a 390px row for no information. */
    .topbar > div[style*="width:1px"] { display: none; }
}

/* Below ~560px the word "New" is the last thing worth 60px. Collapse the
   dropdown trigger to its + icon; the menu itself is unchanged. font-size:0
   on the button is what hides the bare text node - it is not wrapped in an
   element, so it cannot be targeted directly. Same technique already used in
   section 38 for body.arules. */
@media (max-width: 560px) {
    .topbar-actions .dropdown > [data-dropdown-toggle].btn-primary {
        width: 36px;
        min-width: 36px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

.topbar-actions .dropdown > [data-dropdown-toggle].btn-primary .bi-plus-lg {
        font-size: 15px;
    }

.topbar-actions .dropdown > [data-dropdown-toggle].btn-primary .bi-chevron-down {
        display: none;
    }
}

/* ----------------------------------------------------------------------------
   Mobile sidebar drawer width.
   Below 901px .app-sidebar switches to position:fixed, which takes it out of
   the grid - so `grid-template-columns: var(--sidebar-width)` stops applying
   and the drawer falls back to shrink-to-fit content width. Give it a real
   width, a viewport ceiling and safe-area padding.
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .app-sidebar {
        width: var(--sidebar-width);
        max-width: 86vw;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
        padding-left: var(--safe-left);
    }
}

/* Match the sidebar's own scroll lock to the one navbar.php's toggle sets. */
body.sidebar-mobile-open {
    overflow: hidden;
}

/* N6 notification inbox controls. */
.notifications-hero-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:680px) { .notifications-hero-actions { align-self:flex-start; } }

/* Unified anchor workspace. Opt-in so legacy pages keep their current widths. */
.ui-workspace {
  width: min(var(--ui-workspace-max, 1220px), calc(100% - 48px));
  max-width: var(--ui-workspace-max, 1220px);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .ui-workspace {
    width: auto;
    max-width: none;
    margin-inline: max(12px, var(--safe-left)) max(12px, var(--safe-right));
  }
}

/* ============================================================================
   LAYER 1 — SHARED UI PRIMITIVES
   ============================================================================
   Badge, filter bar and sheet. One definition each, used by every module.

WHY THE `ui-` PREFIX, AND NOT JUST `.badge`
   -------------------------------------------------------------------------
   `.badge` is used 202 times and `.chip` 161 times across pages outside the
   three modules being migrated (reports.php, view_document.php, admin_rates
   .php, the approval screens and more). Redefining either would change those
   pages silently, with no way to test them all. So Layer 1 takes a clean
   namespace, and the legacy `.badge` / `.chip` rules further up this file are
   FROZEN — do not edit them, do not extend them. They get retired in a later
   layer, once the `ui-` set is proven on Jobs, Expenses and Documents.

HOW TO MIGRATE A MODULE
   -------------------------------------------------------------------------
   You do not have to touch markup on day one. The alias block at the bottom
   maps every existing `aj-` / `ae-` / `ad-` class onto these primitives, so a
   module adopts Layer 1 by DELETING its own rules, not by editing HTML. Then
   rename the markup at your own pace, and delete that module's alias block
   when it is done. The aliases are scaffolding, not the destination.

TONE NAMING — semantic, not colour
   -------------------------------------------------------------------------
   The three modules each invented a vocabulary for the same six tones:
     Jobs        data-tone="green|blue|purple|orange|red|gray"
     Expenses    .success .info .brand .warning .danger .neutral
     Documents   .local .failed  + facet kinds .category .merchant .job
   Canonical here is SEMANTIC (success/info/brand/warning/danger/neutral),
   because colour names lock the palette in — the day "green" needs to become
   teal, every template that says green is wrong. Jobs' colour names are
   aliased so existing markup keeps working.

Jobs' `data-tone` ATTRIBUTE is kept as the mechanism, rather than a class.
   Tone is a single-value axis: an element has exactly one. An attribute makes
   that impossible to get wrong; classes let you write `.success .danger` and
   get whichever the cascade prefers.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BADGE
   ----------------------------------------------------------------------------
   Merged from .aj-badge (10px/700/3px 8px/capitalize/min-height 24px),
   .ad-status (11px/600/5px 8px) and .badge (10px/600/1px 7px).

Settled on 11px/600. 10px was the majority but sits below comfortable
   reading size, and Layer 0 deliberately has no token under --text-2xs.
   Dropped `text-transform: capitalize` from the Jobs version — it mangles
   acronyms ("Gst" for GST) and the label should be correct at source.
   ---------------------------------------------------------------------------- */
.ui-badge,
.aj-badge,
.ad-status,
.ae-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-full, 999px);
  background: #F2F4F7;
  color: #475467;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Soft tones — the default. Tinted ground, readable ink, hairline border. */
.ui-badge[data-tone="success"],
.aj-badge[data-tone="success"],
.ad-status[data-tone="success"],
.ae-pill[data-tone="success"] { background: #ECFDF3; color: #027A48; border-color: #ABEFC6; }.ui-badge[data-tone="info"],
.aj-badge[data-tone="info"],
.ad-status[data-tone="info"],
.ae-pill[data-tone="info"] { background: #EFF8FF; color: #175CD3; border-color: #B2DDFF; }.ui-badge[data-tone="brand"],
.aj-badge[data-tone="brand"],
.ad-status[data-tone="brand"],
.ae-pill[data-tone="brand"] { background: #F4F3FF; color: #5925DC; border-color: #D9D6FE; }.ui-badge[data-tone="warning"],
.aj-badge[data-tone="warning"],
.ad-status[data-tone="warning"],
.ae-pill[data-tone="warning"] { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }.ui-badge[data-tone="danger"],
.aj-badge[data-tone="danger"],
.ad-status[data-tone="danger"],
.ae-pill[data-tone="danger"] { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }.ui-badge[data-tone="neutral"],
.aj-badge[data-tone="neutral"],
.ad-status[data-tone="neutral"],
.ae-pill[data-tone="neutral"] { background: #F2F4F7; color: #475467; border-color: #E4E7EC; }

/* Colour-name aliases for existing Jobs markup. Do not use in new templates. */
.ui-badge[data-tone="green"],
.aj-badge[data-tone="green"],
.ad-status[data-tone="green"],
.ae-pill[data-tone="green"] { background: #ECFDF3; color: #027A48; border-color: #ABEFC6; }.ui-badge[data-tone="blue"],
.aj-badge[data-tone="blue"],
.ad-status[data-tone="blue"],
.ae-pill[data-tone="blue"] { background: #EFF8FF; color: #175CD3; border-color: #B2DDFF; }.ui-badge[data-tone="purple"],
.aj-badge[data-tone="purple"],
.ad-status[data-tone="purple"],
.ae-pill[data-tone="purple"] { background: #F4F3FF; color: #5925DC; border-color: #D9D6FE; }.ui-badge[data-tone="orange"],
.aj-badge[data-tone="orange"],
.ad-status[data-tone="orange"],
.ae-pill[data-tone="orange"] { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }.ui-badge[data-tone="red"],
.aj-badge[data-tone="red"],
.ad-status[data-tone="red"],
.ae-pill[data-tone="red"] { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }.ui-badge[data-tone="gray"],
.aj-badge[data-tone="gray"],
.ad-status[data-tone="gray"],
.ae-pill[data-tone="gray"] { background: #F2F4F7; color: #475467; border-color: #E4E7EC; }

/* Solid variant — for a selected filter, or a badge that must dominate.
   Every solid below clears 4.5:1 against white text. If you re-tint one,
   re-measure it: unreadable white-on-mid-tone is the classic failure here. */
.ui-badge--solid[data-tone] { color: #FFFFFF; border-color: transparent; }
.ui-badge--solid[data-tone="success"], .ui-badge--solid[data-tone="green"]  { background: #039855; }
.ui-badge--solid[data-tone="info"],    .ui-badge--solid[data-tone="blue"]   { background: #1570EF; }
.ui-badge--solid[data-tone="brand"],   .ui-badge--solid[data-tone="purple"] { background: #6938EF; }
.ui-badge--solid[data-tone="warning"], .ui-badge--solid[data-tone="orange"] { background: #B54708; }
.ui-badge--solid[data-tone="danger"],  .ui-badge--solid[data-tone="red"]    { background: #D92D20; }
.ui-badge--solid[data-tone="neutral"], .ui-badge--solid[data-tone="gray"]   { background: #667085; }.ui-badge > i,
.aj-badge > i,
.ad-status > i,
.ae-pill > i { font-size: var(--text-2xs); line-height: 1; }

/* Dot indicator, for a status that needs no words. */
.ui-badge__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Removable badge — the X on an active filter. 24px hit area is below the
   44px touch minimum on purpose: it sits inside a badge that is itself the
   primary target, and the whole badge is clickable in the filter context. */
.ui-badge__remove {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
}
.ui-badge__remove:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.ui-badge--solid .ui-badge__remove:hover { background: rgba(255, 255, 255, .22); }

/* ----------------------------------------------------------------------------
   2. FILTER BAR
   ----------------------------------------------------------------------------
   Jobs' shape, which was the only complete one of the three. Expenses had a
   flex rail with no pill shape and no active state; Documents had pills but
   no scroll rail and no active state in CSS at all.

Heights found in the wild: 26px, 36px, 38px, 42px — four values for one
   concept. Settled on 36px for pills and 42px for the search field, which is
   what Jobs and Expenses respectively already use.

Structure:
     .ui-filter-shell        wrapper, owns bottom margin
       .ui-filter-row        search + pills on one line, wraps on narrow
         .ui-filter-search   the text input
         .ui-filter-scroll   horizontal scroll rail
           .ui-filter-pill   a filter button
       .ui-filter-active     row of selected filters as removable badges
   ---------------------------------------------------------------------------- */
.ui-filter-shell,
.aj-filter-shell {
  position: relative;
  margin-bottom: var(--space-3, 12px);
}

.ui-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 0;
  flex-wrap: wrap;
}

/* Horizontal rail. scroll-snap keeps a pill from being half-cut at rest;
   the hidden scrollbar is intentional — the rail is swipeable on touch and
   the fade below signals more content on pointer devices. */
.ui-filter-scroll,
.aj-filter-scroll,
.ae-filter-rail,
.ae-filter,
.ad-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 1px 2px 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}.ui-filter-scroll::-webkit-scrollbar,
.aj-filter-scroll::-webkit-scrollbar,
.ae-filter-rail::-webkit-scrollbar,
.ae-filter::-webkit-scrollbar,
.ad-filters::-webkit-scrollbar { display: none; }.ui-filter-scroll > *,
.aj-filter-scroll > *,
.ae-filter-rail > *,
.ae-filter > *,
.ad-filters > * { scroll-snap-align: start; }.ui-filter-pill,
.aj-filter-pill,
.ad-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius-full, 999px);
  background: var(--surface, #FFFFFF);
  color: var(--text-secondary, #475569);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}.ui-filter-pill:hover,
.aj-filter-pill:hover,
.ad-filter:hover { border-color: var(--border-strong, #CBD5E1); color: var(--text-primary, #0F172A); }.ui-filter-pill[aria-pressed="true"],
.aj-filter-pill[aria-pressed="true"],
.ad-filter[aria-pressed="true"],
.ui-filter-pill.is-active,
.aj-filter-pill.is-active,
.ad-filter.is-active,
.ad-filter.active {
  border-color: var(--brand, #5B4BC4);
  background: var(--brand-100, #F4F3FF);
  color: var(--brand-700, #5925DC);
  font-weight: var(--weight-semibold);
}

/* Count bubble inside a pill — "Status 3". */
.ui-filter-pill__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full, 999px);
  background: var(--brand, #5B4BC4);
  color: #FFFFFF;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}.ui-filter-search,
.ae-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 250px;
  min-width: 220px;
  max-width: 330px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--ui-control-radius, 10px);
  background: var(--surface, #FFFFFF);
}.ui-filter-search:focus-within,
.ae-search:focus-within { border-color: var(--brand, #5B4BC4); }.ui-filter-search > i,
.ae-search > i { color: var(--text-tertiary, #94A3B8); font-size: var(--text-base); }

/* 16px is not a style choice. Anything smaller makes iOS Safari zoom the page
   on focus, and a zoomed page with a filter rail behind it is unrecoverable
   without a manual pinch. See --text-input in Layer 0. */
.ui-filter-search input,
.ae-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--text-primary, #0F172A);
  font-family: var(--font-sans);
  font-size: var(--text-input);
  line-height: 1.4;
}

.ui-filter-clear {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary, #94A3B8);
  cursor: pointer;
}
.ui-filter-clear:hover { background: var(--surface-alt, #F1F5F9); color: var(--text-secondary, #475569); }

/* Active filters, shown as removable badges under the row. Hidden when empty
   so the gap collapses — no reserved blank strip. */
.ui-filter-active,
.aj-filter-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: var(--space-2, 8px);
}.ui-filter-active:empty,
.aj-filter-summary:empty { display: none; margin-top: 0; }

.ui-filter-summary {
  color: var(--text-tertiary, #94A3B8);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* ----------------------------------------------------------------------------
   3. SHEET
   ----------------------------------------------------------------------------
   The three modules had ALREADY converged on the same desktop geometry -
   width min(1110px, 100% - 30px), height min(86vh, 900px), radius 24px top.
   So this is mostly a rename, plus three real fixes:

1. vh -> dvh. Jobs and Documents used vh; only Expenses used dvh. On
        mobile, vh is the tallest possible viewport, so a vh-sized sheet is
        taller than the visible area whenever browser chrome is showing and
        the footer sits below the fold. dvh tracks the real height.
     2. Footer min-height unified to 70px. Was 58px (Jobs) / ~58px (Documents)
        / unset (Expenses). 70px is what Jobs' own newer desktop rules already
        use, and it fits a 44px touch target plus padding.
     3. Form controls inside a sheet forced to --text-input. Same iOS zoom
        rule as the filter search.

--ui-vvh is set by JS from visualViewport (see LAYER1.md). The fallback
   chain means the sheet is still correct with JS disabled.
   ---------------------------------------------------------------------------- */
.ui-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: var(--ui-z-sheet, 9200);
  display: none;
}.ui-sheet-layer.is-open,
.ui-sheet-layer.open { display: block; }.ui-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(15, 23, 42, .52);
  opacity: 0;
  transition: opacity .22s ease;
}.ui-sheet-layer.is-open .ui-sheet-backdrop,
.ui-sheet-layer.open .ui-sheet-backdrop { opacity: 1; }.ui-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(var(--ui-sheet-width, 1110px), calc(100% - 30px));
  height: min(86dvh, var(--ui-sheet-max-height, 900px));
  max-height: calc(var(--ui-vvh, 100dvh) - 14px);
  border-radius: 24px 24px 0 0;
  background: var(--surface, #FFFFFF);
  box-shadow: 0 -18px 52px rgba(15, 23, 42, .18);
  transform: translateX(-50%) translateY(24px);
  opacity: 0;
  transition: transform .24s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
  overflow: hidden;
}.ui-sheet-layer.is-open .ui-sheet,
.ui-sheet-layer.open .ui-sheet { transform: translateX(-50%) translateY(0); opacity: 1; }

/* dvh is unsupported on older Safari and some Android webviews. */
@supports not (height: 1dvh) {.ui-sheet { height: min(86vh, var(--ui-sheet-max-height, 900px)); max-height: calc(var(--ui-vvh, 100vh) - 14px); }
}.ui-sheet__head,
.aj-sheet-header,
.ae-sheet-head,
.ad-sheet-head {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  padding: 27px 22px 16px;
  border-bottom: 1px solid var(--border-soft, #F1F5F9);
  background: var(--surface, #FFFFFF);
}.ui-sheet__kicker,
.aj-sheet-kicker,
.ae-sheet-eyebrow,
.ad-sheet-kicker {
  color: var(--text-tertiary, #94A3B8);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ui-sheet__title,
.ad-sheet-head h2 {
  margin: 3px 58px 0 0;
  color: var(--text-primary, #0F172A);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}.ui-sheet__subtitle,
.aj-sheet-subtitle,
.ae-sheet-subtitle,
.ad-sheet-sub {
  margin-top: 3px;
  color: var(--text-secondary, #475569);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
}

.ui-sheet__drag,
.ad-drag {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 54px;
  height: 5px;
  border-radius: var(--radius-full, 9999px);
  background: var(--border-strong, #CBD5E1);
  transform: translateX(-50%);
}

/* 40px, not 44px: this sits in the head where there is no adjacent target to
   mis-hit. The 44px minimum is enforced on footer actions and pointer:coarse
   below, where crowding is real. */
.ui-sheet__close,
.ad-close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
  background: var(--surface, #FFFFFF);
  color: var(--text-secondary, #475569);
  cursor: pointer;
}.ui-sheet__close:hover,
.aj-sheet-x:hover,
.ae-sheet-close:hover,
.ad-sheet-x:hover,
.ad-close:hover { background: var(--surface-alt, #F1F5F9); }.ui-sheet__tabs,
.aj-sheet-tabs,
.ad-sheet-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 25px;
  min-height: 46px;
  min-width: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--border-soft, #F1F5F9);
  overflow-x: auto;
  scrollbar-width: none;
}.ui-sheet__tabs::-webkit-scrollbar,
.aj-sheet-tabs::-webkit-scrollbar,
.ad-sheet-tabs::-webkit-scrollbar { display: none; }.ui-sheet__tab,
.aj-sheet-tab,
.ad-sheet-tab {
  flex: 0 0 auto;
  height: 46px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-tertiary, #94A3B8);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
}.ui-sheet__tab[aria-selected="true"],
.aj-sheet-tab[aria-selected="true"],
.ad-sheet-tab[aria-selected="true"],
.ui-sheet__tab.is-active,
.aj-sheet-tab.is-active,
.ad-sheet-tab.is-active,
.ad-sheet-tab.active {
  border-bottom-color: var(--brand, #5B4BC4);
  color: var(--brand-700, #5925DC);
  font-weight: var(--weight-semibold);
}.ui-sheet__body,
.aj-sheet-body,
.ae-sheet-body,
.ad-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 18px 20px 28px;
  background: var(--bg, #F8FAFC);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 32px;
}

/* Inline status strip between head and body. Collapses when empty. */
.ui-sheet__feedback,
.aj-sheet-feedback,
.ad-sheet-feedback {
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border-soft, #F1F5F9);
  background: var(--surface, #FFFFFF);
  font-size: var(--text-sm);
}.ui-sheet__feedback:empty,
.aj-sheet-feedback:empty,
.ad-sheet-feedback:empty { display: none; padding: 0; border-bottom: 0; }.ui-sheet__foot,
.aj-sheet-footer,
.ae-sheet-footer,
.ad-sheet-foot {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  min-height: 70px;
  min-width: 0;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft, #F1F5F9);
  background: var(--surface, #FFFFFF);
}

.ui-sheet__foot-danger,
.ad-foot-danger { min-width: 0; flex: 0 0 auto; }
.ui-sheet__foot-actions,
.ad-foot-actions {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}.ui-sheet__note,
.ae-sheet-note {
  margin-right: auto;
  max-width: 520px;
  color: var(--text-tertiary, #94A3B8);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

/* Form controls inside a sheet. Same iOS zoom rule as the filter search. */
.ui-sheet input:not([type="checkbox"]):not([type="radio"]),
.aj-sheet input:not([type="checkbox"]):not([type="radio"]),
.ae-sheet input:not([type="checkbox"]):not([type="radio"]),
.ad-sheet input:not([type="checkbox"]):not([type="radio"]),
.ui-sheet select,
.aj-sheet select,
.ae-sheet select,
.ad-sheet select,
.ui-sheet textarea,
.aj-sheet textarea,
.ae-sheet textarea,
.ad-sheet textarea {
  font-size: var(--text-input);
}

/* Keyboard open — JS sets --ui-vv-top / --ui-vv-height from visualViewport
   and adds .is-keyboard-open. Without this the footer is pushed under the
   keyboard and the primary action becomes unreachable. */
.ui-sheet-layer.is-keyboard-open .ui-sheet {
  top: var(--ui-vv-top, 0px);
  bottom: auto;
  height: var(--ui-vv-height, 100dvh);
  max-height: var(--ui-vv-height, 100dvh);
}.ui-sheet-layer.is-keyboard-open .ui-sheet__foot { padding-bottom: 10px; }

/* Mobile: full width, no side gap, slightly taller. */
@media (max-width: 720px) {.ui-sheet {
    left: 0;
    width: 100%;
    max-width: 100%;
    height: min(94dvh, calc(var(--ui-vvh, 100dvh) - max(8px, env(safe-area-inset-top, 0px))));
    max-height: min(94dvh, calc(var(--ui-vvh, 100dvh) - max(8px, env(safe-area-inset-top, 0px))));
    border-radius: var(--ui-sheet-radius-mobile, 20px) var(--ui-sheet-radius-mobile, 20px) 0 0;
    transform: translateX(0) translateY(24px);
  }.ui-sheet-layer.is-open .ui-sheet,
.ui-sheet-layer.open .ui-sheet { transform: translateX(0) translateY(0); }
  @supports not (height: 1dvh) {.ui-sheet { height: 94vh; max-height: 94vh; }
  }.ui-sheet__head,
.aj-sheet-header,
.ae-sheet-head,
.ad-sheet-head { padding: 20px max(14px, env(safe-area-inset-right, 0px)) 14px max(14px, env(safe-area-inset-left, 0px)); }.ui-sheet__close,
  .ad-close { top: 16px; right: max(14px, env(safe-area-inset-right, 0px)); }
  .ui-sheet__title,
  .ad-sheet-head h2 { font-size: var(--text-lg); margin-right: 52px; }.ui-sheet__tabs,
.aj-sheet-tabs,
.ad-sheet-tabs { min-height: 43px; gap: 21px; padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); }.ui-sheet__tab,
.aj-sheet-tab,
.ad-sheet-tab { height: 43px; }.ui-sheet__body,
.aj-sheet-body,
.ae-sheet-body,
.ad-sheet-body { padding: 13px max(12px, env(safe-area-inset-right, 0px)) 24px max(12px, env(safe-area-inset-left, 0px)); }.ui-sheet__feedback,
.aj-sheet-feedback,
.ad-sheet-feedback { padding: 9px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); }.ui-sheet__foot,
.aj-sheet-footer,
.ae-sheet-footer,
.ad-sheet-foot { min-height: 66px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .ui-sheet__foot, .ad-sheet-foot { flex-wrap: wrap; align-items: stretch; }
  .ui-sheet__foot-danger, .ad-foot-danger { flex: 1 1 100%; min-height: 38px; }
  .ui-sheet__foot-actions, .ad-foot-actions { flex: 1 1 100%; width: 100%; margin-left: 0; }
  .ui-sheet__foot-actions .ui-action, .ad-foot-actions .ad-btn { flex: 1 1 0; min-width: 0; }
  .ui-sheet__note,
.ae-sheet-note { width: 100%; max-width: none; margin: 0 0 2px; }.ui-filter-search,
.ae-search { max-width: none; min-width: 0; flex: 1 1 100%; }
}

/* Capacitor: the sheet is the whole screen, and the layer must clear the
   native tab bar. Migrated Documents still uses `.ad-layer`, so it must share
   the same native stacking level until the markup is canonicalised. */
html.is-native .ui-sheet-layer,
html.is-native .ad-layer { z-index: var(--ui-z-sheet-native, 12000); }
html.is-native .ui-sheet {
  top: env(safe-area-inset-top, 0px);
  bottom: 0;
  height: auto;
  max-height: none;
  border-radius: var(--ui-sheet-radius-mobile, 20px) var(--ui-sheet-radius-mobile, 20px) 0 0;
}html.is-native .ui-sheet__head,
html.is-native .aj-sheet-header,
html.is-native .ae-sheet-head,
html.is-native .ad-sheet-head { padding-top: 14px; }html.is-native .ui-sheet__foot,
html.is-native .aj-sheet-footer,
html.is-native .ae-sheet-footer,
html.is-native .ad-sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

/* Touch devices: real 44px targets. */
@media (pointer: coarse) {.ui-sheet button,
.aj-sheet button,
.ae-sheet button,
.ad-sheet button,
.ui-sheet summary,
.aj-sheet summary,
.ae-sheet summary,
.ad-sheet summary,
.ui-sheet__foot .btn,
.aj-sheet-footer .btn,
.ae-sheet-footer .btn,
.ad-sheet-foot .btn { min-height: 44px; touch-action: manipulation; }.ui-sheet__close,
.ad-close { width: 44px; height: 44px; }.ui-filter-pill,
.aj-filter-pill,
.ad-filter { height: 40px; }
}

/* Documents legacy sheet bridge.
   This intentionally mirrors the existing `.open` -> `.shown` lifecycle
   instead of pretending it is the canonical `.is-open` lifecycle. The bridge
   is safe to leave in place while alldocuments.php still carries its local
   declarations; once those duplicate declarations are removed, the legacy
   markup continues to render correctly without an opacity/display regression. */
.ad-layer {
  position: fixed;
  inset: 0;
  z-index: var(--ui-z-sheet, 9200);
  display: none;
}
.ad-layer.open { display: block; }
.ad-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 23, 42, .52);
  opacity: 0;
  transition: opacity .22s ease;
}
.ad-layer.shown .ad-backdrop { opacity: 1; }
.ad-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(var(--ui-sheet-width, 1110px), calc(100% - 30px));
  height: min(86dvh, var(--ui-sheet-max-height, 900px));
  max-height: calc(var(--ui-vvh, var(--ad-vh, 100dvh)) - 14px);
  min-height: 0;
  border: 1px solid var(--border, #E2E8F0);
  border-bottom: 0;
  border-radius: var(--ui-sheet-radius, 24px) var(--ui-sheet-radius, 24px) 0 0;
  background: var(--bg, #F8FAFC);
  box-shadow: 0 -20px 60px rgba(15, 23, 42, .25);
  transform: translate(-50%, 105%);
  transition: transform .24s cubic-bezier(.32, .72, 0, 1);
  overflow: hidden;
}
.ad-layer.shown .ad-sheet { transform: translate(-50%, 0); }
.ad-layer.ad-keyboard-open .ad-sheet,
.ad-layer.is-keyboard-open .ad-sheet {
  top: var(--ui-vv-top, var(--ad-vv-top, 0px));
  bottom: auto;
  height: var(--ui-vv-height, var(--ad-vv-height, 100dvh));
  max-height: var(--ui-vv-height, var(--ad-vv-height, 100dvh));
}
.ad-layer.ad-keyboard-open .ad-sheet-body,
.ad-layer.is-keyboard-open .ad-sheet-body { scroll-padding-bottom: 38px; }
.ad-layer.ad-keyboard-open .ad-sheet-foot,
.ad-layer.is-keyboard-open .ad-sheet-foot { padding-bottom: 10px; }

@supports not (height: 1dvh) {
  .ad-sheet {
    height: min(86vh, var(--ui-sheet-max-height, 900px));
    max-height: calc(var(--ui-vvh, var(--ad-vh, 100vh)) - 14px);
  }
}

@media (max-width: 720px) {
  .ad-sheet {
    left: 0;
    width: 100%;
    max-width: 100%;
    height: min(94dvh, calc(var(--ui-vvh, 100dvh) - max(8px, env(safe-area-inset-top, 0px))));
    max-height: min(94dvh, calc(var(--ui-vvh, 100dvh) - max(8px, env(safe-area-inset-top, 0px))));
    border-radius: var(--ui-sheet-radius-mobile, 20px) var(--ui-sheet-radius-mobile, 20px) 0 0;
    transform: translate(0, 105%);
  }
  .ad-layer.shown .ad-sheet { transform: translate(0, 0); }
}

html.is-native .ad-sheet {
  top: env(safe-area-inset-top, 0px);
  bottom: 0;
  height: auto;
  max-height: none;
  border-radius: var(--ui-sheet-radius-mobile, 20px) var(--ui-sheet-radius-mobile, 20px) 0 0;
}

/* U2-D: native keyboard must win after the full-height native rule. */
html.is-native .ui-sheet-layer.is-keyboard-open .ui-sheet,
html.is-native .ad-layer.is-keyboard-open .ad-sheet,
html.is-native .ad-layer.ad-keyboard-open .ad-sheet {
  top: calc(var(--ui-vv-top, 0px) + env(safe-area-inset-top, 0px));
  bottom: auto;
  height: calc(var(--ui-vv-height, 100dvh) - env(safe-area-inset-top, 0px));
  max-height: calc(var(--ui-vv-height, 100dvh) - env(safe-area-inset-top, 0px));
}

@media (prefers-reduced-motion: reduce) {.ui-sheet,
.aj-sheet,
.ae-sheet,
.ad-sheet,
.ui-sheet-backdrop,
.ui-filter-pill,
.aj-filter-pill,
.ad-filter { transition: none; }
}

/* ============================================================================
   ALIAS SELECTORS — HOW TO RETIRE THEM
   ============================================================================
   Every rule above lists its canonical `ui-` selector FIRST, followed by the
   legacy `aj-` / `ae-` / `ad-` names it also matches. That is what lets a
   module adopt Layer 1 by DELETING its own CSS rather than editing markup.

Per module:
     1. Delete that module's own rules for the component (its .aj-badge block,
        its .ae-sheet block, and so on). Until they are gone they still win,
        because they load after prod_core.css.
     2. Reload and check. The component now renders from Layer 1.
     3. Rename the markup to the `ui-` classes at your own pace.
     4. Once a module's templates use no legacy names, delete that module's
        selectors from the grouped lists above.

Mapping, for reference:
     .ui-badge            <- .aj-badge  .ad-status  .ae-pill
     .ui-filter-scroll    <- .aj-filter-scroll  .ae-filter-rail  .ae-filter  .ad-filters
     .ui-filter-pill      <- .aj-filter-pill  .ad-filter
     .ui-filter-search    <- .ae-search
     .ui-sheet-layer      <- canonical lifecycle; Documents uses the legacy bridge below
     .ui-sheet            <- canonical geometry; Documents uses the legacy bridge below
     .ui-sheet__head      <- .aj-sheet-header  .ae-sheet-head  .ad-sheet-head
     .ui-sheet__tabs/tab  <- .aj-sheet-tabs/tab  .ad-sheet-tabs/tab
     .ui-sheet__body      <- .aj-sheet-body  .ae-sheet-body  .ad-sheet-body
     .ui-sheet__foot      <- .aj-sheet-footer  .ae-sheet-footer  .ad-sheet-foot
     .ui-sheet__close     <- .aj-sheet-x  .ae-sheet-close  .ad-sheet-x  .ad-close
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TONE CLASS BRIDGES — TEMPORARY
   ----------------------------------------------------------------------------
   Jobs already uses data-tone and needs no bridge. Expenses and Documents used
   classes; these map them onto the canonical tones so their markup keeps
   working. Delete alongside the module's other aliases.
   ---------------------------------------------------------------------------- */

.ae-pill.success  { background: #ECFDF3; color: #027A48; border-color: #ABEFC6; }
.ae-pill.info,
.ae-pill.job      { background: #EFF8FF; color: #175CD3; border-color: #B2DDFF; }
.ae-pill.brand    { background: #F4F3FF; color: #5925DC; border-color: #D9D6FE; }
.ae-pill.warning  { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }
.ae-pill.danger   { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }
.ae-pill.neutral  { background: #F2F4F7; color: #475467; border-color: #E4E7EC; }

.ad-status.local  { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }
.ad-status.failed { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }

/* Documents' facet chips (.ad-chip.category / .merchant / .job) are domain
   colour-coding, not status. Left module-owned on purpose — recolouring a
   facet legend is a Documents decision, not a platform one. */

/* ============================================================================
   LAYER 2 — BUTTONS, CARDS, FORM CONTROLS, TABLES, EMPTY STATES
   ============================================================================
   A DIFFERENT STRATEGY FROM LAYER 1, DELIBERATELY.

Layer 1 created a new `ui-` namespace because prod_core's `.badge` was a
   DIFFERENT design from what the modules needed, and 202 pages depended on the
   old one. Changing it would have broken them.

U2-C found that the anchor modules have intentionally evolved beyond the
   legacy 34px `.btn` / 12px `.card` geometry. Forcing them backward would be a
   visible regression, while changing the global selectors would silently touch
   hundreds of older pages. Therefore anchor workflows now use opt-in
   `.ui-action` and `.ui-record-card` primitives. Legacy `.btn` / `.card` stay
   frozen until a later platform-wide migration. Form controls can still share
   the existing central geometry because their dimensions already align.

Two components DO get a `ui-` name, because nothing central exists:
     - `.ui-empty`  — prod_core has only scoped variants (approval6-empty,
                      bfr-empty); bare `.empty` is used 271 times for unrelated
                      things and is not safe to claim.
     - `.ui-table`  — prod_core defines NO `.table` base at all. 111 usages
                      currently inherit straight from Bootstrap. Adding a
                      `.table` base would silently restyle all of them, so the
                      shared table takes its own name.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. WORKFLOW ACTIONS
   ----------------------------------------------------------------------------
   The unified anchor modules use a dedicated action primitive instead of
   inheriting the legacy 34px `.btn`. This preserves the established product
   UI without silently resizing the rest of Logfile.

Canonical: 40px desktop, 44px on coarse pointers, pill radius.
   Documents' `.ad-btn` is bridged here so U2-D can retire its duplicate local
   declaration without touching business logic. Jobs remains on its existing
   aliases until its own migration stage. Attachment-viewer controls are NOT
   workflow actions and are deliberately excluded.
   ---------------------------------------------------------------------------- */

.ui-action,
.ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--ui-action-height, 40px);
  padding: 0 16px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius-full, 9999px);
  background: var(--surface, #FFFFFF);
  color: var(--text-secondary, #475569);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration, .15s) var(--ease, ease),
              border-color var(--duration, .15s) var(--ease, ease),
              color var(--duration, .15s) var(--ease, ease),
              opacity var(--duration, .15s) var(--ease, ease);
}
.ui-action:hover:not(:disabled),
.ad-btn:hover:not(:disabled) { background: var(--surface-alt, #F1F5F9); }
.ui-action.primary, .ui-action[data-variant="primary"],
.ad-btn.primary { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.ui-action.primary:hover:not(:disabled), .ui-action[data-variant="primary"]:hover:not(:disabled),
.ad-btn.primary:hover:not(:disabled) { background: var(--brand-700); border-color: var(--brand-700); }
.ui-action.danger, .ui-action[data-variant="danger"],
.ad-btn.danger { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.ui-action.danger-quiet, .ui-action[data-variant="danger-quiet"],
.ad-btn.danger-quiet { background: var(--surface); border-color: var(--danger-border); color: var(--danger-fg); }
.ui-action.danger-quiet:hover:not(:disabled), .ui-action[data-variant="danger-quiet"]:hover:not(:disabled),
.ad-btn.danger-quiet:hover:not(:disabled) { background: var(--danger-bg); border-color: #FDA29B; }
.ui-action:disabled,
.ad-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Jobs legacy action bridge remains intentionally separate until its migration. */
.aj-action-btn,
.aj-create-btn,
.aj-sheet-close-btn,
.aj-next-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration, .15s) var(--ease, ease);
}
.aj-action-btn:hover,
.aj-create-btn:hover,
.aj-sheet-close-btn:hover { background: var(--surface-alt); }

/* Icon-only application controls. Viewer controls are domain-specific and
   explicitly excluded: `.ad-viewer-btn` remains owned by Documents. */
.ad-icon-btn,
.mobile-icon-btn,
.approval6-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.ad-icon-btn:hover,
.mobile-icon-btn:hover,
.approval6-icon-btn:hover { background: var(--surface-alt); color: var(--text-primary); }

@media (pointer: coarse) {
  .ui-action,
  .ad-btn { min-height: var(--ui-touch-target, 44px); touch-action: manipulation; }

.btn-icon,
  .ad-icon-btn,
  .mobile-icon-btn,
  .approval6-icon-btn { width: var(--ui-touch-target, 44px); height: var(--ui-touch-target, 44px); }
}

/* ----------------------------------------------------------------------------
   2. RECORD CARDS
   ----------------------------------------------------------------------------
   Anchor-module records use a 16px card shell. The legacy global `.card` stays
   unchanged at 12px, so older Logfile pages are not silently restyled.

Documents' `.ad-tile` is bridged to this shell. Its accent line, selection,
   file rows and other domain content remain Documents-owned. No artificial
   margin is applied: grids own their gap.
   ---------------------------------------------------------------------------- */

.ui-record-card,
.ad-tile {
  position: relative;
  min-width: 0;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--ui-record-radius, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.ui-record-card {
  transition: transform var(--duration, .15s) var(--ease, ease),
              box-shadow var(--duration, .15s) var(--ease, ease),
              border-color var(--duration, .15s) var(--ease, ease);
}
.ui-record-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ui-record-card:focus-visible { outline: 3px solid rgba(83, 74, 183, .12); outline-offset: 2px; }
.ui-record-card.is-selected,
.ui-record-card[aria-selected="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(83, 74, 183, .14); }

/* Existing non-record module cards stay on the legacy shared card geometry
   until their own migration stages. */
.aj-card,
.ae-panel,
.ae-tile,
.ae-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}

.ae-panel-title,
.ae-tile-head,
.ad-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.ae-tile-foot,
.ad-tile-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 11px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

/* ----------------------------------------------------------------------------
   3. FORM CONTROLS
   ----------------------------------------------------------------------------
   prod_core `.form-control, .form-select`: width 100%, min-height 42px,
   padding 9px 11px, 1px var(--border), radius var(--radius-md), plus :focus
   and .is-invalid states that the module versions never had.

Module versions:
     .ad-input   43px, radius 10px, 14px font
     .exp-input  radius 8px, 13px font, border 0.5px      <- see below
     .aj-input   43px (sheet scope), radius var(--aj-ui-radius-small)

`border: 0.5px` in Expenses is a real bug, not a style. Sub-pixel borders
   round differently per device pixel ratio: on a 1x display it renders at 0 or
   1px depending on the browser, so the same field has a border on one monitor
   and not another. Normalised to 1px.

THE IOS FIX BELOW IS THE MAIN POINT OF THIS SECTION.
   ---------------------------------------------------------------------------- */

.aj-input,
.aj-textarea,
.aj-select,
.exp-input,
.exp-select,
.ad-input,
.inline-edit-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--ui-control-radius, 10px);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  outline: none;
  transition: border-color var(--duration, .15s), box-shadow var(--duration, .15s);
}

.aj-input:focus,
.aj-textarea:focus,
.aj-select:focus,
.exp-input:focus,
.exp-select:focus,
.ad-input:focus,
.inline-edit-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.aj-input.is-invalid,
.exp-input.is-invalid,
.ad-input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.aj-textarea { min-height: 96px; }

/* Anything under 16px makes iOS Safari zoom the page on focus, and a zoomed
   page with a filter rail or a sheet behind it cannot be recovered without a
   manual pinch. This applies to the SHARED classes as well, which is the one
   other place Layer 2 reaches into prod_core's own selectors. It is scoped to
   coarse pointers, so no desktop layout can be affected.

The alternative fix — 16px everywhere — was rejected: it visibly enlarges
   every form on desktop where the problem does not exist. */
@media (pointer: coarse) {
  .form-control,
  .form-select,
  .aj-input,
  .aj-textarea,
  .aj-select,
  .exp-input,
  .exp-select,
  .ad-input,
  .inline-edit-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: var(--text-input); }

.form-control,
  .form-select,
  .aj-input,
  .aj-select,
  .exp-input,
  .exp-select,
  .ad-input { min-height: 46px; }
}

/* Labels and help text — the modules each had their own. */
.aj-form-field > label,
.exp-field-group > label,
.ad-field > label,
.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.aj-form-help,
.ad-field small,
.form-text {
  display: block;
  margin-top: 5px;
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

/* ----------------------------------------------------------------------------
   4. TABLE
   ----------------------------------------------------------------------------
   prod_core defines no `.table` base — 111 usages inherit from Bootstrap. So
   the shared table takes its own name rather than silently restyling them.

Jobs has THREE near-identical line tables (.aj-line-table,
   .aj-quote-line-table, .aj-invoice-line-table) that differ only in border
   colour. All three are aliased here; the colour difference stays in Jobs as a
   context override.

Jobs' header cells were 8.5px and body 10.5px — both below the Layer 0
   floor. Raised to --text-2xs (11px) and --text-sm (13px).

Always wrap a table in .ui-table-wrap. Without the scroll container a wide
   table makes the whole page scroll sideways on mobile, which is the single
   most common responsive failure in an app like this.
   ---------------------------------------------------------------------------- */

.ui-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.ui-table-wrap > .ui-table,
.ui-table-wrap > table { border: 0; border-radius: 0; margin: 0; }

.ui-table,
.aj-line-table,
.aj-quote-line-table,
.aj-invoice-line-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.ui-table th,
.aj-line-table th,
.aj-quote-line-table th,
.aj-invoice-line-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.ui-table td,
.aj-line-table td,
.aj-quote-line-table td,
.aj-invoice-line-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  vertical-align: middle;
}

.ui-table tbody tr:last-child td,
.aj-line-table tbody tr:last-child td { border-bottom: 0; }

.ui-table tbody tr:hover td { background: var(--hover); }

.ui-table__num,
.ui-table td.num,
.ui-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   5. EMPTY STATE
   ----------------------------------------------------------------------------
   Expenses and Documents had already converged EXACTLY — 1px dashed #CBD5E1,
   16px radius, 54px 20px padding, white ground. Jobs differed (13px radius,
   44px padding, #d0d5dd). Adopting the two that already agreed.

Bare `.empty` is used 271 times across the platform for unrelated purposes,
   so the shared one takes the `ui-` name.
   ---------------------------------------------------------------------------- */

.ui-empty,
.aj-empty,
.ae-empty,
.ad-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 54px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: center;
}

.ui-empty__icon,
.aj-empty > i,
.ae-empty > i,
.ad-empty > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  color: var(--text-tertiary);
  font-size: var(--text-lg);
}

.ui-empty__title,
.aj-empty-title {
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.ui-empty__sub,
.aj-empty-sub {
  max-width: 420px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ui-empty .btn,
.ui-empty .ui-filter-pill { margin-top: 10px; }

@media (max-width: 720px) {
  .ui-empty,
  .aj-empty,
  .ae-empty,
  .ad-empty { padding: 38px 16px; }
}

/* ============================================================================
   LAYER 2 — RETIRING THE ALIASES
   ============================================================================
   U2-C splits anchor-module migration from the legacy global components.
   Workflow actions and record cards migrate to dedicated anchor primitives;
   generic forms/tables/empty states can still converge on their shared bases.

.ad-btn                                                   -> .ui-action
     .ad-tile                                                  -> .ui-record-card
     .ad-icon-btn .mobile-icon-btn                             -> .btn .btn-icon (later)
     .aj-input .exp-input .ad-input .aj-textarea              -> .form-control
     .aj-select .exp-select                                    -> .form-select
     .aj-empty .ae-empty .ad-empty                            -> .ui-empty
     .aj-line-table .aj-quote-line-table .aj-invoice-line-table -> .ui-table

`.ad-viewer-btn` is deliberately NOT in this map. Attachment-viewer buttons
   are a Documents domain control and must never inherit normal workflow-button
   geometry. Jobs/Expenses record-card and action mappings are deferred until
   their own migration passes prove the correct identity/layout boundaries.

Order remains Documents, then Jobs, then Expenses.
   ============================================================================ */

/* ============================================================================
   LAYER 2 HOTFIX — ALIASES MUST NEVER CARRY STATE
   ============================================================================
   Two bugs shipped in the first Layer 1/2 cut, both from the same mistake:
   the sheet aliases carried STATEFUL and LAYOUT-ROLE declarations, not just
   cosmetic ones.

1. allexpenses.php modal stopped opening.
      `.ae-sheet-layer` was aliased onto `.ui-sheet-layer`, which sets
      `display: none` and relies on `.is-open` to reveal it. Expenses never
      sets `display` at all - its layer shows and hides via pointer-events and
      opacity - so the layer became permanently hidden. Jobs and Documents
      survived only because their own `.open` rules still exist and load after
      prod_core.css; they would have broken the moment those were deleted.

2. Jobs sheet close button overlapped the status badge.
      `.aj-sheet-x` was aliased onto `.ui-sheet__close`, which is
      `position: absolute; top: 22px; right: 22px`. Jobs' X is an in-flow flex
      item inside `.aj-sheet-headrow`, so absolute positioning lifted it out of
      the row and dropped it on top of the Pending badge.

THE RULE THIS ESTABLISHES
   ---------------------------------------------------------------------------
   A GENERIC alias may only carry declarations that are safe for an element
   whose JavaScript this file does not control. In practice:

SAFE generic alias  colour, font, padding, border, radius, background,
                         gap, text-align, overflow
     NEVER generic alias display, position, inset/top/right/bottom/left,
                         transform, opacity, visibility, z-index, pointer-events

U2-C adds one explicit exception: a named legacy compatibility bridge may
   carry state/layout declarations when it mirrors that module's existing
   lifecycle exactly. The `.ad-layer` / `.ad-sheet` bridge above does this for
   Documents' proven `open` -> `shown` contract. It is not a generic alias and
   it does not make ui-core.js take ownership until Documents registers the
   adapter during U2-D.

Legacy selectors have been removed from these rules accordingly:
     .ui-sheet-layer            (display, position, z-index)
     .ui-sheet-backdrop         (position, opacity)
     .ui-sheet                  (position, transform, opacity)
     .ui-sheet__close           (position, inset)
     .ui-sheet-layer.is-open *  (state)
     .ui-sheet-layer.is-keyboard-open *  (state)

The cosmetic sheet aliases are UNCHANGED and still work - head padding,
   title, subtitle, kicker, tabs, body, feedback, foot, note. A module still
   gets most of the shared look by deleting its own rules; it just keeps
   ownership of how its sheet opens.

`.open` is now accepted alongside `.is-open` on the canonical
   `.ui-sheet-layer`, since Jobs and Documents already use that name and
   ui-core.js should not fight them. Expenses uses `ae-workspace-open` on a
   different element and keeps its own mechanism entirely.
   ============================================================================ */