/* =====================================================
   SOFIA P2P - Custom Styles (Tailwind Supplement)
   ===================================================== */

/* Full-height root so the proportional UI-scale layer
   (partials/_ui_scale.html) can size <html> to fill the viewport exactly
   under CSS zoom — the app shell uses h-full (100%) off this. */
html, body { height: 100%; }

/* =====================================================
   THEME PALETTES  — the brand color is var-backed (see tailwind.config.js).
   Switching <html data-theme="..."> re-colors every sky and primary utility
   plus the brand hex below instantly. Values are Tailwind palette RGB triples.
   Semantic colors (emerald/rose/amber) are intentionally NOT themed.
   ===================================================== */
/* =====================================================
   TEXT CONTRAST TOKENS (N3 Z-UI, contract §19) — neutral, outside the
   [data-theme] palettes. tailwind.config.js maps text-gray-300/400/500 and
   text-slate-400/500 to these (text utilities only; backgrounds and borders
   keep Tailwind's palette), and the grey text colours below use them, so
   faint list / card sub-lines stay readable on low-resolution monitors.
   gray-400 / 500 and slate-400 / 500 are >= 4.5:1 on white, gray-50,
   gray-100 and every theme's sky-50 / sky-100; gray-300 is for
   decorative / disabled text only. Every page that loads tailwind.css
   must load this file too (the utilities read these tokens).
   ===================================================== */
:root {
  --tx-gray-300:139 146 158; --tx-gray-400:99 106 119; --tx-gray-500:86 93 106;
  --tx-slate-400:90 104 125; --tx-slate-500:78 93 113;
}

:root, [data-theme="sky"] {
  --sky-50:240 249 255; --sky-100:224 242 254; --sky-200:186 230 253; --sky-300:125 211 252; --sky-400:56 189 248; --sky-500:14 165 233; --sky-600:2 132 199; --sky-700:3 105 161; --sky-800:7 89 133; --sky-900:12 74 110; --sky-950:8 47 73;
}
[data-theme="orange"] {
  --sky-50:255 247 237; --sky-100:255 237 213; --sky-200:254 215 170; --sky-300:253 186 116; --sky-400:251 146 60; --sky-500:249 115 22; --sky-600:234 88 12; --sky-700:194 65 12; --sky-800:154 52 18; --sky-900:124 45 18; --sky-950:67 20 7;
}
[data-theme="emerald"] {
  --sky-50:236 253 245; --sky-100:209 250 229; --sky-200:167 243 208; --sky-300:110 231 183; --sky-400:52 211 153; --sky-500:16 185 129; --sky-600:5 150 105; --sky-700:4 120 87; --sky-800:6 95 70; --sky-900:6 78 59; --sky-950:2 44 34;
}
[data-theme="rose"] {
  --sky-50:255 241 242; --sky-100:255 228 230; --sky-200:254 205 211; --sky-300:253 164 175; --sky-400:251 113 133; --sky-500:244 63 94; --sky-600:225 29 72; --sky-700:190 18 60; --sky-800:159 18 57; --sky-900:136 19 55; --sky-950:76 5 25;
}
[data-theme="violet"] {
  --sky-50:245 243 255; --sky-100:237 233 254; --sky-200:221 214 254; --sky-300:196 181 253; --sky-400:167 139 250; --sky-500:139 92 246; --sky-600:124 58 237; --sky-700:109 40 217; --sky-800:91 33 182; --sky-900:76 29 149; --sky-950:46 16 101;
}
[data-theme="amber"] {
  --sky-50:255 251 235; --sky-100:254 243 199; --sky-200:253 230 138; --sky-300:252 211 77; --sky-400:251 191 36; --sky-500:245 158 11; --sky-600:217 119 6; --sky-700:180 83 9; --sky-800:146 64 14; --sky-900:120 53 15; --sky-950:69 26 3;
}
[data-theme="teal"] {
  --sky-50:240 253 250; --sky-100:204 251 241; --sky-200:153 246 228; --sky-300:94 234 212; --sky-400:45 212 191; --sky-500:20 184 166; --sky-600:13 148 136; --sky-700:15 118 110; --sky-800:17 94 89; --sky-900:19 78 74; --sky-950:4 47 46;
}
[data-theme="slate"] {
  --sky-50:248 250 252; --sky-100:241 245 249; --sky-200:226 232 240; --sky-300:203 213 225; --sky-400:148 163 184; --sky-500:100 116 139; --sky-600:71 85 105; --sky-700:51 65 85; --sky-800:30 41 59; --sky-900:15 23 42; --sky-950:2 6 23;
}

/* Workspace / Split View */
.workspace { flex: 1 1 0%; min-height: 0; display: flex; gap: 0.5rem; }
.workspace-left { width: 360px; min-width: 260px; display: flex; flex-direction: column; min-height: 0; }
.workspace-right { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.workspace > .pane { height: 100%; display: flex; flex-direction: column; min-height: 0; }
@media (max-width: 1024px) {
  .workspace { flex-direction: column; }
  .workspace-left { width: 100%; height: auto; max-height: 45vh; }
  .workspace-right { width: 100%; height: auto; max-height: 50vh; }
  .workspace > .pane { height: auto; max-height: 55vh; }
}
/* Phones: the page scrolls and the detail grows with its content (long review screens such as
   the vendor Questionnaire / hub Questions tabs no longer sit in a ~250 px inner box over an
   empty band). The list keeps its own 45vh scroll area above the detail. #content is the page's
   scroll container (the buyer shell clips it otherwise). Scoped pages with their own phone
   layout (email admin .ea-root) keep theirs. */
@media (max-width: 767px) {
  #content { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* the page root (h-full flex column) grows with the workspace, so the header / banner above it
     keeps its height instead of being squeezed to 0 */
  #content :has(> .workspace):not(.ea-root) { height: auto; min-height: 100%; }
  #content .workspace { flex: none; min-height: 0; }
  #content .workspace > .workspace-left { flex: none; }
  #content .workspace > .workspace-left > * { max-height: 45vh; }
  #content .workspace > .workspace-right { flex: none; height: auto; max-height: none; }
  #content .workspace > .workspace-right > * { height: auto; max-height: none; overflow: visible; }
  #content .ea-root > .workspace > .workspace-left > * { max-height: none; }
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #D1D5DB; border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #9CA3AF; }
* { scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background-color: #D1D5DB; border-radius: 20px; border: 0; background-clip: padding-box; }

/* Toast — top-center, solid colored fill for high-contrast scannability.
   Earlier the toast was a white card with a thin colored left border in the
   top-right corner; users reported it was easy to miss. The redesign:
   • Anchored at top-center (centre of attention, away from CRUD controls).
   • Solid colored background + white text + drop-shadow + light pulse on entry.
   • Larger icon chip with semi-transparent white tint to stay legible. */
.toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast-container > * { pointer-events: auto; }
.toast {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 340px;
  max-width: 560px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: #475569;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35),
              0 0 0 1px rgba(255,255,255,0.06) inset;
  animation: toastDrop 0.4s cubic-bezier(0.22, 1, 0.36, 1),
             toastPulse 0.9s ease 0.4s 1;
}
.toast .toast-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 21px;
  background: rgba(255,255,255,0.22);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.25);
}
.toast .toast-msg {
  flex: 1;
  line-height: 1.4;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.toast.success { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
.toast.error   { background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%); }
.toast.info    { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); }
.toast.warning { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
.toast ion-icon { font-size: 21px; flex-shrink: 0; }
@keyframes toastDrop {
  from { transform: translateY(-40px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)     scale(1);     opacity: 1; }
}
@keyframes toastPulse {
  0%   { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35), 0 0 0 0 rgba(255,255,255,0.55); }
  60%  { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35), 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35), 0 0 0 0 rgba(255,255,255,0); }
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.loading-overlay.show { display: flex; }
.loading-box {
  background: #fff;
  border-radius: 16px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  animation: loadingPop 0.25s ease;
}
@keyframes loadingPop {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: rgb(var(--sky-600));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-text {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

/* Search Dropdown */
.search-dropdown { position: relative; }
.search-dropdown-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); max-height: 240px; overflow-y: auto; z-index: 100; margin-top: 4px; display: none; }
.search-dropdown-results.show { display: block; }
.search-dropdown-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #F3F4F6; font-size: 13px; }
.search-dropdown-item:hover { background: #F9FAFB; }
.search-dropdown-item:last-child { border-bottom: none; }

/* Spinner */
.spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }

/* Login blobs */
@keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-25px, 25px) scale(0.94); } }
.blob { animation: blob 18s ease-in-out infinite; }
.blob.delay-2 { animation-delay: -6s; }
.blob.delay-3 { animation-delay: -12s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }
.floaty { animation: floaty 6s ease-in-out infinite; }
.bg-grid { background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 36px 36px; }

/* App section visibility */
.app-section.hidden { display: none !important; }

/* Alpine — hide x-cloak elements until Alpine initialises */
[x-cloak] { display: none !important; }
#login-screen.hidden { display: none !important; }
#app-shell.hidden { display: none !important; }

/* Form focus ring override for consistency */
input:focus, select:focus, textarea:focus { outline: none; }

/* =====================================================
   NAVIGATION GROUPS
   ===================================================== */
.nav-group-toggle { position: relative; }
.nav-group-toggle.active { background: rgb(var(--sky-50)); color: rgb(var(--sky-700)); }

/* Sidebar nav item — active highlight is synced by app.js syncActiveNav() */
.nav-item { border-left: 2px solid transparent; transition: background 0.12s ease, color 0.12s ease; }
.nav-item:hover { background: #F9FAFB; }
.nav-item.active { background: rgb(var(--sky-50)); color: rgb(var(--sky-700)); border-left-color: rgb(var(--sky-600)); font-weight: 600; }
.nav-item.active ion-icon { color: rgb(var(--sky-600)); }

/* =====================================================
   MASTER PAGES - 2026 Design System
   ===================================================== */

/* Master list card */
.master-card { transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid transparent; }
.master-card:hover { background: #F9FAFB; transform: translateX(3px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.master-card.active { background: rgb(var(--sky-50)); border-left-color: rgb(var(--sky-600)); box-shadow: 0 2px 8px rgb(var(--sky-600) / 0.10); }

/* Master avatar - gradient circle with initial (high contrast) */
.master-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.master-avatar-orange { background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600))); }
.master-avatar-blue { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.master-avatar-green { background: linear-gradient(135deg, #10B981, #059669); }
.master-avatar-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.master-avatar-pink { background: linear-gradient(135deg, #F472B6, #DB2777); }
.master-avatar-teal { background: linear-gradient(135deg, #14B8A6, #0D9488); }
.master-avatar-amber { background: linear-gradient(135deg, #F59E0B, #D97706); }
.master-avatar-rose { background: linear-gradient(135deg, #FB7185, #BE123C); }
.master-avatar-cyan { background: linear-gradient(135deg, #22D3EE, #0891B2); }
.master-avatar-gray { background: linear-gradient(135deg, #9CA3AF, #6B7280); }
.master-avatar-indigo { background: linear-gradient(135deg, #6366F1, #4338CA); }

/* Search input with icon */
.master-search-wrap { position: relative; }
.master-search-wrap ion-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--tx-gray-400)); width: 18px; height: 18px; pointer-events: none; }
.master-search-wrap input { padding-left: 38px; }

/* Backward compat */
.master-section { background: #F9FAFB; border-radius: 14px; padding: 22px; margin-bottom: 14px; border: 1px solid #F3F4F6; }
.master-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.master-section-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.badge-green { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.badge-amber { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.badge-red { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.badge-gray { background: #F3F4F6; color: #4B5563; border: 1px solid #E5E7EB; }
.badge-blue { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.master-child-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 14px 16px; transition: all 0.15s ease; }
.master-child-card:hover { border-color: rgb(var(--sky-600)); box-shadow: 0 2px 8px rgb(var(--sky-600) / 0.06); }

/* =====================================================
   2026 DETAIL CARD DESIGN SYSTEM
   ===================================================== */

/* Detail pane background */
.detail-pane {
  background: linear-gradient(180deg, #FAFAFA 0%, #F3F4F6 100%);
}

/* Hero Banner - Reference Design */
.d-hero {
  background: linear-gradient(135deg, rgb(var(--sky-500)) 0%, #EC4899 60%, #D946EF 100%);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.2);
}
.d-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.d-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.d-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.d-hero-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: rgb(var(--sky-600));
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.d-hero-name { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.2; }
.d-hero-code {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.d-hero-meta { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; }
.d-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.d-hero-stat { display: flex; align-items: baseline; gap: 6px; }
.d-hero-stat-value { font-size: 18px; font-weight: 800; color: #fff; }
.d-hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500; }

/* Glass Section Cards - Enhanced */
.d-glass-section {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.04),
    0 1px 3px rgba(0,0,0,0.02),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.d-glass-section:hover {
  box-shadow:
    0 12px 48px rgba(0,0,0,0.08),
    0 2px 4px rgba(0,0,0,0.02),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform: translateY(-3px);
}
.d-glass-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  border-radius: 20px 20px 0 0;
}
.d-section-orange::before { background: linear-gradient(90deg, rgb(var(--sky-600)), rgb(var(--sky-500))); }
.d-section-blue::before { background: linear-gradient(90deg, #2563EB, #3B82F6); }
.d-section-green::before { background: linear-gradient(90deg, #059669, #10B981); }
.d-section-purple::before { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.d-section-pink::before { background: linear-gradient(90deg, #DB2777, #EC4899); }
.d-section-teal::before { background: linear-gradient(90deg, #0D9488, #14B8A6); }
.d-section-amber::before { background: linear-gradient(90deg, #D97706, #F59E0B); }
.d-section-rose::before { background: linear-gradient(90deg, #BE123C, #FB7185); }
.d-section-gray::before { background: linear-gradient(90deg, #6B7280, #9CA3AF); }

/* Section color-tinted backgrounds */
.d-section-orange { background: linear-gradient(135deg, rgba(255,247,237,0.9), rgba(255,255,255,0.95)); }
.d-section-blue { background: linear-gradient(135deg, rgba(239,246,255,0.9), rgba(255,255,255,0.95)); }
.d-section-green { background: linear-gradient(135deg, rgba(236,253,245,0.9), rgba(255,255,255,0.95)); }
.d-section-purple { background: linear-gradient(135deg, rgba(245,243,255,0.9), rgba(255,255,255,0.95)); }
.d-section-pink { background: linear-gradient(135deg, rgba(253,242,248,0.9), rgba(255,255,255,0.95)); }
.d-section-teal { background: linear-gradient(135deg, rgba(240,253,250,0.9), rgba(255,255,255,0.95)); }
.d-section-amber { background: linear-gradient(135deg, rgba(255,251,235,0.9), rgba(255,255,255,0.95)); }
.d-section-rose { background: linear-gradient(135deg, rgba(255,241,242,0.9), rgba(255,255,255,0.95)); }
.d-section-gray { background: linear-gradient(135deg, rgba(249,250,251,0.95), rgba(255,255,255,0.98)); }

/* Section Header inside glass card */
.d-section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.d-section-icon {
  width: 38px; height: 38px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.d-section-icon-orange { background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600))); color: #fff; }
.d-section-icon-blue { background: linear-gradient(135deg, #3B82F6, #2563EB); color: #fff; }
.d-section-icon-green { background: linear-gradient(135deg, #10B981, #059669); color: #fff; }
.d-section-icon-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff; }
.d-section-icon-pink { background: linear-gradient(135deg, #F472B6, #DB2777); color: #fff; }
.d-section-icon-teal { background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; }
.d-section-icon-amber { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.d-section-icon-rose { background: linear-gradient(135deg, #FB7185, #BE123C); color: #fff; }
.d-section-icon-cyan { background: linear-gradient(135deg, #22D3EE, #0891B2); color: #fff; }
.d-section-icon-gray { background: linear-gradient(135deg, #9CA3AF, #6B7280); color: #fff; }

.d-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  letter-spacing: -0.01em;
}

/* Field display */
.d-field { position: relative; }
.d-field-label {
  font-size: 10px;
  font-weight: 700;
  color: rgb(var(--tx-gray-400));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.d-field-value {
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
  line-height: 1.4;
}
.d-field-value-muted { color: rgb(var(--tx-gray-400)); }
.d-field-box {
  background: linear-gradient(135deg, #fff, #FAFAFA);
  border: 1px solid rgba(229,231,235,0.7);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.d-field-box:hover {
  background: #fff;
  border-color: rgb(var(--sky-600) / 0.2);
  box-shadow: 0 4px 16px rgb(var(--sky-600) / 0.06);
  transform: translateY(-1px);
}

/* Modern Grid */
.d-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .d-grid { grid-template-columns: 1fr; } }

/* Status Badge with pulse */
.d-badge-pulse {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.d-badge-pulse::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}
.d-badge-pulse-green { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.d-badge-pulse-green::before { background: #10B981; animation-name: pulse-dot-green; }
@keyframes pulse-dot-green {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}
.d-badge-pulse-gray { background: #F3F4F6; color: #4B5563; border: 1px solid #E5E7EB; }
.d-badge-pulse-gray::before { background: #9CA3AF; animation-name: pulse-dot-gray; }
@keyframes pulse-dot-gray {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(156,163,175,0.4); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(156,163,175,0); }
}
.d-badge-pulse-amber { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.d-badge-pulse-amber::before { background: #F59E0B; animation-name: pulse-dot-amber; }
@keyframes pulse-dot-amber {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}
.d-badge-pulse-red { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.d-badge-pulse-red::before { background: #EF4444; animation-name: pulse-dot-red; }
@keyframes pulse-dot-red {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* Chip / Pill for linked items */
.d-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  border: 1px solid #E5E7EB;
  color: #374151;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.d-chip:hover {
  border-color: rgb(var(--sky-600));
  box-shadow: 0 4px 12px rgb(var(--sky-600) / 0.1);
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgb(var(--sky-50)), #FFF);
}
.d-chip-icon {
  width: 18px; height: 18px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}

/* Description / text block */
.d-text-block {
  background: linear-gradient(135deg, #FAFAFA, #F3F4F6);
  border: 1px solid rgba(229,231,235,0.6);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 14px; line-height: 1.7;
  color: #4B5563;
}

/* Stat mini cards */
.d-stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.d-stat-mini {
  flex: 1; min-width: 140px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: all 0.25s ease;
}
.d-stat-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}
.d-stat-mini-value {
  font-size: 18px; font-weight: 800;
  color: #111827; letter-spacing: -0.02em;
}
.d-stat-mini-label {
  font-size: 11px; font-weight: 600;
  color: rgb(var(--tx-gray-400)); text-transform: uppercase;
  letter-spacing: 0.06em; margin-top: 4px;
}

/* Description / text block */
.d-text-block {
  background: rgba(249,250,251,0.6);
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 14px; line-height: 1.7;
  color: #4B5563;
}

/* Icon-only edit button */
.d-edit-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: none;
  color: rgb(var(--sky-600));
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 18px;
  margin-left: auto;
}
.d-edit-btn:hover {
  background: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Detail wrapper */
.detail-wrapper {
  position: relative;
  padding: 20px;
  /*min-height: 100%;*/
}

/* Progress bar for budgets */
.d-progress-track {
  height: 10px;
  background: linear-gradient(90deg, #F3F4F6, #E5E7EB);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.d-progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, #10B981, #34D399);
  box-shadow: 0 0 12px rgba(16,185,129,0.3);
}
.d-progress-fill-warning {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  box-shadow: 0 0 12px rgba(245,158,11,0.3);
}
.d-progress-fill-danger {
  background: linear-gradient(90deg, #EF4444, #F87171);
  box-shadow: 0 0 12px rgba(239,68,68,0.3);
}

/* Empty state in detail pane */
.d-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100%;
  text-align: center; padding: 48px 24px;
}
.d-empty-icon {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: rgb(var(--tx-gray-400));
  margin-bottom: 20px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

/* Master Modal - 2026 */
.master-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 300;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.master-modal-overlay.show { display: flex; }
.master-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
  width: 100%; max-width: 560px;
  max-height: 88vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: modal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the modal's <form> must carry the flex chain so the body can scroll */
.master-modal > form {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow: hidden;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.master-modal-header {
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #F1F5F9;
  background: linear-gradient(180deg, #FFFFFF, #FAFAFB);
  flex-shrink: 0;
}
.master-modal-title {
  font-size: 16px; font-weight: 800;
  color: #0F172A; letter-spacing: -0.02em;
}
.master-modal-close {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #F3F4F6;
  border: none;
  color: rgb(var(--tx-gray-500));
  cursor: pointer;
  transition: all 0.2s ease;
}
.master-modal-close:hover {
  background: #FEE2E2; color: #DC2626;
}
.master-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.master-modal-footer {
  padding: 14px 24px;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid #F1F5F9;
  background: #FAFAFB;
  flex-shrink: 0;
}

/* Modal form sections */
.m-form-section { margin-bottom: 20px; }
.m-form-section:last-of-type { margin-bottom: 4px; }
.m-form-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgb(var(--tx-slate-400));
  padding-bottom: 7px; margin-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

/* Form field in modal */
.m-form-group { margin-bottom: 14px; }
.m-form-group:last-child { margin-bottom: 0; }
.m-form-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: #374151; margin-bottom: 6px;
}

.m-form-input, .m-form-select, .m-form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  font-size: 14px;
  color: #1F2937;
  background: #FAFAFA;
  transition: all 0.2s ease;
}
.m-form-input:focus, .m-form-select:focus, .m-form-textarea:focus {
  background: #fff;
  border-color: rgb(var(--sky-600));
  box-shadow: 0 0 0 3px rgb(var(--sky-600) / 0.08);
}
.m-form-textarea { resize: vertical; min-height: 80px; }
.m-form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* Toggle switch */
.m-toggle-wrap { display: flex; align-items: center; gap: 10px; }
.m-toggle { -webkit-appearance: none; appearance: none; width: 44px; height: 24px; background: #E5E7EB; border-radius: 12px; position: relative; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; }
.m-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: all 0.2s ease; }
.m-toggle:checked { background: rgb(var(--sky-600)); }
.m-toggle:checked::after { left: 22px; }
.m-toggle-label { font-size: 13px; font-weight: 600; color: #374151; }
/* Compact + tiny toggle sizes for inline use (table rows, row chips). */
.m-toggle.m-toggle-sm { width: 36px; height: 20px; border-radius: 10px; }
.m-toggle.m-toggle-sm::after { width: 16px; height: 16px; top: 2px; left: 2px; }
.m-toggle.m-toggle-sm:checked::after { left: 18px; }
.m-toggle.m-toggle-xs { width: 32px; height: 18px; border-radius: 9px; }
.m-toggle.m-toggle-xs::after { width: 14px; height: 14px; top: 2px; left: 2px; }
.m-toggle.m-toggle-xs:checked::after { left: 16px; }

/* Modal searchable dropdown */
.m-search-select { position: relative; }
.m-search-select-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08); max-height: 220px; overflow-y: auto;
  z-index: 50; display: none;
}
.m-search-select-results.show { display: block; }
.m-search-result-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #F3F4F6;
  transition: all 0.15s ease;
}
.m-search-result-item:hover { background: rgb(var(--sky-50)); }
.m-search-result-item:last-child { border-bottom: none; }
.m-selected-detail-card {
  background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
  border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 14px 16px; margin-top: 10px;
}

/* Checkbox list for multiselect */
.m-checkbox-list {
  max-height: 200px; overflow-y: auto;
  border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 8px; background: #FAFAFA;
}
.m-checkbox-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; transition: all 0.15s ease;
}
.m-checkbox-item:hover { background: #F3F4F6; }
.m-checkbox-item input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: rgb(var(--sky-600));
  cursor: pointer; flex-shrink: 0;
}
.m-checkbox-item label {
  font-size: 13px; color: #374151; cursor: pointer;
  flex: 1;
}

/* Curtain Modal (1/3 right panel) */
.curtain-overlay { position: fixed; inset: 0; z-index: 400; display: none; }
.curtain-overlay.show { display: block; }
.curtain-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.curtain-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 420px; max-width: 90vw; background: linear-gradient(180deg, #FAFAFA 0%, #fff 100%); box-shadow: -8px 0 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; animation: curtain-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes curtain-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.curtain-header { padding: 20px 24px 16px; border-bottom: 1px solid #F3F4F6; background: #fff; }
.curtain-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.curtain-title { font-size: 18px; font-weight: 800; color: #111827; }
.curtain-close { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #F3F4F6; border: none; color: rgb(var(--tx-gray-500)); cursor: pointer; font-size: 20px; transition: all 0.2s ease; }
.curtain-close:hover { background: #FEE2E2; color: #DC2626; }
.curtain-search { position: relative; }
.curtain-search input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid #E5E7EB; border-radius: 12px; font-size: 14px; background: #FAFAFA; transition: all 0.2s ease; }
.curtain-search input:focus { background: #fff; border-color: rgb(var(--sky-600)); box-shadow: 0 0 0 3px rgb(var(--sky-600) / 0.08); }
.curtain-search ion-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--tx-gray-400)); font-size: 18px; }
.curtain-actions { display: flex; gap: 8px; margin-top: 10px; }
.curtain-action-btn { padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border: 1px solid #E5E7EB; background: #fff; color: rgb(var(--tx-gray-500)); transition: all 0.15s ease; }
.curtain-action-btn:hover { background: #F3F4F6; border-color: #D1D5DB; }
.curtain-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.curtain-footer { padding: 16px 24px; border-top: 1px solid #F3F4F6; background: #fff; display: flex; justify-content: space-between; align-items: center; }
.curtain-count { font-size: 13px; color: rgb(var(--tx-gray-500)); font-weight: 500; }
.curtain-count span { font-weight: 700; color: #111827; }

/* Curtain Cards */
.curtain-card { background: #fff; border: 1.5px solid #E5E7EB; border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all 0.2s ease; }
.curtain-card:hover { border-color: rgb(var(--sky-300)); box-shadow: 0 4px 16px rgb(var(--sky-600) / 0.08); transform: translateX(4px); }
.curtain-card.selected { background: linear-gradient(135deg, rgb(var(--sky-50)), #FFF); border-color: rgb(var(--sky-600)); box-shadow: 0 4px 16px rgb(var(--sky-600) / 0.1); }
.curtain-card-avatar { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.curtain-card-info { flex: 1; min-width: 0; }
.curtain-card-title { font-size: 14px; font-weight: 700; color: #1F2937; letter-spacing: -0.01em; }
.curtain-card-subtitle { font-size: 12px; color: rgb(var(--tx-gray-400)); margin-top: 3px; font-weight: 500; }
.curtain-toggle { width: 48px; height: 26px; border-radius: 13px; background: #E5E7EB; position: relative; transition: all 0.25s ease; flex-shrink: 0; }
.curtain-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: all 0.25s ease; }
.curtain-card.selected .curtain-toggle { background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600))); }
.curtain-card.selected .curtain-toggle::after { left: 25px; }
.curtain-empty { text-align: center; padding: 48px 24px; color: rgb(var(--tx-gray-400)); }
.curtain-empty-icon { width: 64px; height: 64px; border-radius: 20px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; color: rgb(var(--tx-gray-400)); }

/* Search trigger button next to dropdown */
.m-search-trigger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #F3F4F6; border: 1px solid #E5E7EB; color: rgb(var(--tx-gray-500)); cursor: pointer; font-size: 18px; transition: all 0.2s ease; flex-shrink: 0; }
.m-search-trigger:hover { background: rgb(var(--sky-50)); border-color: rgb(var(--sky-600)); color: rgb(var(--sky-600)); }
.m-curtain-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #E5E7EB; color: #374151; cursor: pointer; font-size: 13px; transition: all 0.2s ease; }
.m-curtain-trigger:hover { border-color: rgb(var(--sky-600)); }
.m-curtain-trigger span { color: rgb(var(--tx-gray-400)); }
.m-curtain-trigger.has-value span { color: #374151; }
.m-input-group { display: flex; gap: 8px; align-items: stretch; }
.m-input-group .m-form-input { flex: 1; }

/* Role tags */
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, rgb(var(--sky-50)), #FEF2F2); border: 1px solid rgb(var(--sky-300)); color: rgb(var(--sky-700)); }
.role-tag-remove { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.06); border: none; color: rgb(var(--tx-gray-400)); cursor: pointer; font-size: 10px; }
.role-tag-remove:hover { background: #FEE2E2; color: #DC2626; }

/* Modal buttons */
.m-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600)));
  color: #fff; border: none; border-radius: 12px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgb(var(--sky-600) / 0.25);
}
.m-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgb(var(--sky-600) / 0.35);
}
.m-btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  background: #F3F4F6; color: #4B5563;
  border: 1px solid #E5E7EB; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.m-btn-secondary:hover { background: #E5E7EB; }

/* Tailwind's `.hidden` vs a component's own display (HF0211). This file loads AFTER tailwind.css, so a component
   class that sets `display` (.m-btn-primary / .m-btn-secondary / .pr-tab-count: inline-flex) beats `.hidden` at the
   same specificity — a button rendered `class="hidden m-btn-secondary"` or hidden by script stayed on screen (the
   Clients form showed "Refresh GST registrations" / "Create Clients … (0)" before any list existed). These scoped
   rules make `.hidden` win on exactly the component classes that are combined with it (static class, Alpine
   :class or a script's classList toggle) — never a global `!important`, which would break `hidden md:flex`.
   Guard: tests/ui_attr/test_hidden_vs_component_display.py (a new combination fails until a rule is added here). */
.m-btn-primary.hidden,
.m-btn-secondary.hidden,
.pr-tab-count.hidden { display: none; }

/* =====================================================
   USER MODULE - 2026 ENHANCEMENTS
   ===================================================== */

/* Selected item cards in modal — uniform grid (no uneven flex stretching) */
.m-selected-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.m-selected-card {
  background: linear-gradient(135deg, rgb(var(--sky-50)), #FFF);
  border: 1.5px solid rgb(var(--sky-300));
  border-radius: 14px;
  padding: 11px 13px;
  min-width: 0;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgb(var(--sky-600) / 0.06);
}
.m-selected-card-seq {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgb(var(--sky-600)); color: #fff; font-size: 9px; font-weight: 800;
  margin-right: 5px;
}
.m-selected-card-move {
  width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--sky-100)); border: none; color: rgb(var(--sky-700)); cursor: pointer;
  font-size: 12px; transition: background 0.15s ease;
}
.m-selected-card-move:hover { background: rgb(var(--sky-200)); }
.m-selected-card-more {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; min-width: 120px; min-height: 64px;
}
.m-selected-card-more span { font-size: 15px; font-weight: 800; color: rgb(var(--sky-600)); }
.m-selected-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(var(--sky-600) / 0.12);
  border-color: rgb(var(--sky-600));
}
.m-selected-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.m-selected-card-code {
  font-size: 10px;
  font-weight: 700;
  color: rgb(var(--tx-gray-400));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.m-selected-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.3;
}
.m-selected-card-meta {
  font-size: 11px;
  color: rgb(var(--tx-gray-500));
  line-height: 1.4;
  margin-top: 4px;
}
.m-selected-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: #F3E8FF;
  color: #7E22CE;
  margin-top: 6px;
}
.m-selected-card-remove {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border: none;
  color: rgb(var(--tx-gray-400));
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.m-selected-card-remove:hover {
  background: #FEE2E2;
  color: #DC2626;
}
.m-selected-card-info {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border: none;
  color: #3B82F6;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.m-selected-card-info:hover {
  background: #EFF6FF;
  color: #2563EB;
}
.m-selected-card-actions {
  display: flex;
  gap: 4px;
}

/* Info popup modal */
.info-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 500;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.info-modal-overlay.show { display: flex; }
.info-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.15);
  width: 100%; max-width: 480px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.info-modal-header {
  padding: 20px 24px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.info-modal-title {
  font-size: 16px; font-weight: 800; color: #111827;
}
.info-modal-close {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #F3F4F6; border: none; color: rgb(var(--tx-gray-500));
  cursor: pointer; transition: all 0.2s ease;
}
.info-modal-close:hover { background: #FEE2E2; color: #DC2626; }
.info-modal-body {
  padding: 16px 24px 20px;
  overflow-y: auto; flex: 1;
}
.info-modal-section {
  margin-bottom: 16px;
}
.info-modal-section-title {
  font-size: 11px; font-weight: 700; color: rgb(var(--tx-gray-400));
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.info-modal-item {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #374151;
}
.info-modal-item strong {
  color: #111827;
  font-weight: 600;
}

/* Single select curtain variant */
.curtain-card-single {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.curtain-card-single:hover { border-color: rgb(var(--sky-300)); box-shadow: 0 4px 16px rgb(var(--sky-600) / 0.08); transform: translateX(4px); }
.curtain-card-single.selected { background: linear-gradient(135deg, rgb(var(--sky-50)), #FFF); border-color: rgb(var(--sky-600)); box-shadow: 0 4px 16px rgb(var(--sky-600) / 0.1); }
.curtain-card-single .curtain-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #D1D5DB; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.curtain-card-single.selected .curtain-radio {
  border-color: rgb(var(--sky-600));
  background: rgb(var(--sky-600));
}
.curtain-card-single.selected .curtain-radio::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}

/* Search trigger input group */
.m-search-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.m-search-input-group .m-form-input {
  flex: 1;
}
.m-search-input-group .m-form-input[readonly] {
  background: #FAFAFA;
  cursor: pointer;
}

/* Filter dropdown */
.filter-dropdown {
  animation: filter-dropdown-in 0.2s ease;
}
@keyframes filter-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sticky detail header */
.detail-sticky-header {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.detail-sticky-header.is-stuck {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  border-color: #e2e8f0;
}

/* View section - Linked Access Cards (Master1.png style) */
.v-linked-section {
  margin-bottom: 20px;
}
.v-linked-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.v-linked-section-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.v-linked-section-title {
  font-size: 14px; font-weight: 700; color: #374151;
}
.v-linked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.v-linked-card {
  background: linear-gradient(135deg, rgb(var(--sky-50)), #FFF);
  border: 1.5px solid rgb(var(--sky-300));
  border-radius: 16px;
  padding: 14px 16px;
  position: relative;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgb(var(--sky-600) / 0.06);
}
.v-linked-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgb(var(--sky-600) / 0.12);
  border-color: rgb(var(--sky-600));
}
.v-linked-card-check {
  position: absolute;
  top: 12px; right: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600)));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 8px rgb(var(--sky-600) / 0.3);
}
.v-linked-card-code {
  font-size: 10px; font-weight: 700; color: rgb(var(--tx-gray-400));
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
  padding-right: 30px;
}
.v-linked-card-name {
  font-size: 14px; font-weight: 700; color: #1F2937;
  line-height: 1.3;
  margin-bottom: 6px;
  padding-right: 30px;
}
.v-linked-card-meta {
  font-size: 11px; color: rgb(var(--tx-gray-500));
  line-height: 1.5;
}
.v-linked-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: #F3E8FF;
  color: #7E22CE;
  margin-top: 6px;
}

/* =====================================================
   SAMPLE.HTML STYLE - Detail View System
   ===================================================== */

/* Dark Hero Header */
.s-hero {
    position: relative;
    overflow: hidden;
    background: #0f172a;
    border-radius: 24px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 16px;
    padding-top: 16px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    border: 1px solid #1e293b;
}
.s-hero-blur-1 {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 256px;
  height: 256px;
  background: rgba(14,165,233,0.2);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.s-hero-blur-2 {
  position: absolute;
  bottom: -20px;
  left: 80px;
  width: 160px;
  height: 160px;
  background: rgba(245,158,11,0.1);
  border-radius: 50%;
  filter: blur(32px);
  pointer-events: none;
}
.s-hero-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgb(var(--sky-200));
  font-size: 28px;
}
.s-hero-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}
.s-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--sky-100));
}
.s-hero-badge-green {
  background: rgba(16,185,129,0.2);
  border-color: rgba(16,185,129,0.3);
  color: #6ee7b7;
}

/* White Section Cards */
.s-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.02);
  border: 1px solid #f1f5f9;
}
.s-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.s-card-icon {
  padding: 8px;
  background: rgb(var(--sky-50));
  color: rgb(var(--sky-600));
  border-radius: 8px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

/* Field Grid & Styling */
.s-field-label {
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--tx-slate-400));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.s-field-value {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
}
.s-field-value ion-icon {
  margin-top: 2px;
  color: rgb(var(--tx-slate-400));
  font-size: 16px;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.s-field-value:hover ion-icon {
  opacity: 1;
}
.s-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 48px;
}
@media (max-width: 640px) {
  .s-grid { grid-template-columns: 1fr; }
  .s-hero { padding: 24px; }
  .s-card { padding: 24px; }
}

/* Access Matrix Role Cards */
.access-role-card {
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}
.access-role-card:hover {
  border-left-color: rgb(var(--sky-300));
  background: rgb(var(--sky-50));
}
.access-role-card.active {
  border-left-color: rgb(var(--sky-500));
  background: rgb(var(--sky-50));
  box-shadow: 0 2px 8px rgba(14,165,233, 0.08);
}

/* ============================================================
   SMART ASSIST — Chat-style duplicate suggestion panel
   ============================================================ */

.smart-assist-panel {
  position: fixed;
  /* small symmetric gap from the top-left so the panel doesn't hug the edge */
  top: 16px;
  left: 16px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 360px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 600;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  transform: translateY(-20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
}

.smart-assist-panel.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.smart-assist-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgb(var(--sky-600)) 0%, rgb(var(--sky-500)) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

.smart-assist-header ion-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.smart-assist-close {
  margin-left: auto;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s;
}

.smart-assist-close:hover {
  background: rgba(255,255,255,0.35);
}

.smart-assist-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  background: #fafafa;
}

.smart-assist-query {
  font-size: 12px;
  color: rgb(var(--tx-slate-500));
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.smart-assist-query strong {
  color: #334155;
  font-weight: 600;
}

.smart-assist-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smart-assist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.smart-assist-item:hover {
  border-color: rgb(var(--sky-300));
  background: rgb(var(--sky-50));
  transform: translateX(2px);
}

.smart-assist-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgb(var(--sky-200));
  color: rgb(var(--sky-700));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.smart-assist-item-info {
  flex: 1;
  min-width: 0;
}

.smart-assist-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smart-assist-item-meta {
  font-size: 11px;
  color: rgb(var(--tx-slate-500));
  margin-top: 1px;
}

.smart-assist-item-similarity {
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--sky-600));
  background: rgb(var(--sky-50));
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.smart-assist-empty {
  text-align: center;
  padding: 20px 12px;
  color: rgb(var(--tx-slate-400));
  font-size: 13px;
}

.smart-assist-typing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgb(var(--tx-slate-500));
}

.smart-assist-typing .dot {
  width: 5px;
  height: 5px;
  background: rgb(var(--sky-600));
  border-radius: 50%;
  animation: sa-dot-bounce 1.2s infinite ease-in-out;
}

/* Smart Assist content sections — alarms / PR recs / item-level recs */
.smart-assist-section {
  margin-bottom: 12px;
}
.smart-assist-section:last-child { margin-bottom: 0; }
.smart-assist-section-title {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: rgb(var(--tx-gray-500));
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.smart-assist-rec {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.smart-assist-rec:hover {
  border-color: rgb(var(--sky-300));
  background: rgb(var(--sky-50));
  transform: translateX(2px);
}
.smart-assist-level {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgb(var(--sky-100));
  color: rgb(var(--sky-700));
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.smart-assist-item-group {
  padding: 8px 0;
  border-top: 1px solid #f3f4f6;
}
.smart-assist-item-group:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Compact alarm row — one-line per alarm, used by the consolidated Smart Assist panel */
.smart-assist-alarm {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  margin-bottom: 4px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 11px;
  color: #374151;
  line-height: 1.35;
}

/* PR dimension cards — uniform height so Location & Account align.
   `height: 100%` makes each card fill its grid cell; combined with `flex-1`
   on the wrapper div it eliminates the trailing-whitespace mismatch when one
   address is taller than the other. */
.pr-dim-card {
  min-height: 130px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.smart-assist-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.smart-assist-typing .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes sa-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Confirm modal with similar records */
.confirm-similar-records {
  background: rgb(var(--sky-50));
  border: 1px solid rgb(var(--sky-300));
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  max-height: 180px;
  overflow-y: auto;
}

.confirm-similar-records-title {
  font-size: 12px;
  font-weight: 700;
  color: rgb(var(--sky-800));
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.confirm-similar-records-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.confirm-similar-records-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 8px;
  font-size: 12px;
}

.confirm-similar-records-item .name {
  font-weight: 600;
  color: #1e293b;
  flex: 1;
}

.confirm-similar-records-item .match {
  color: rgb(var(--sky-600));
  font-weight: 600;
  font-size: 11px;
}

/* Approval detail similar records section */
.approval-similar-section {
  background: rgb(var(--sky-50));
  border: 1px solid rgb(var(--sky-300));
  border-radius: 10px;
  padding: 14px;
  margin-top: 16px;
}

.approval-similar-section-title {
  font-size: 13px;
  font-weight: 700;
  color: rgb(var(--sky-800));
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.approval-similar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.approval-similar-item:last-child {
  margin-bottom: 0;
}

/* =====================================================
   PR Create — Smart Assist & Table Curtain Selects
   ===================================================== */

/* Compact curtain trigger for table cells */
.m-curtain-trigger.compact {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
}

/* Smart Assist budget calc cards */
.smart-calc-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.smart-calc-card .value {
  font-weight: 700;
  font-size: 13px;
  color: #1F2937;
}
.smart-calc-card .label {
  font-size: 10px;
  color: rgb(var(--tx-slate-400));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* Price alert inline */
.li-price-alert {
  line-height: 1.2;
}

/* =====================================================
   PR — Lifecycle flowchart + tabbed Detail
   ===================================================== */

.pr-lifecycle {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 2px;
  /* Hide the OS scrollbar — the lifecycle is a visual phase tracker,
     not a scrolling list. Excel-style chevron buttons (below) page the
     strip in either direction; touch + trackpad swipe still works. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.pr-lifecycle::-webkit-scrollbar { display: none; }
/* Wrapper that pairs left / right paging chevrons around .pr-lifecycle.
   Mirrors .pr-tab-nav-btn but smaller / lighter so it doesn't compete
   with the lifecycle steps visually. */
.pr-lifecycle-nav {
  display: flex; align-items: stretch; gap: 0;
}
.pr-lifecycle-nav .pr-lifecycle-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; flex-shrink: 0;
  background: #f8fafc; color: rgb(var(--tx-slate-400)); border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-size: 12px;
}
.pr-lifecycle-nav .pr-lifecycle-nav-btn:hover { background: rgb(var(--sky-50)); color: rgb(var(--sky-600)); }
.pr-lifecycle-nav > .pr-lifecycle { flex: 1; min-width: 0; }
.pr-lifecycle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  flex-shrink: 0;
}
.pr-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 2px solid;
  transition: transform 0.15s ease;
}
.pr-step-circle:hover { transform: scale(1.05); }
.pr-step-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.pr-lifecycle-line {
  flex: 1;
  height: 2px;
  background: #E5E7EB;
  min-width: 24px;
  margin-bottom: 24px;
  border-radius: 1px;
}
.pr-step-done .pr-step-circle {
  background: linear-gradient(135deg, #10B981, #059669);
  border-color: #059669;
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}
.pr-step-done .pr-step-label { color: #047857; }
.pr-step-current .pr-step-circle {
  background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600)));
  border-color: rgb(var(--sky-600));
  color: #fff;
  box-shadow: 0 4px 14px rgb(var(--sky-600) / 0.35);
  animation: prPulse 1.8s ease-in-out infinite;
}
.pr-step-current .pr-step-label { color: rgb(var(--sky-700)); font-weight: 700; }
.pr-step-future .pr-step-circle {
  background: #F3F4F6;
  border-color: #E5E7EB;
  color: rgb(var(--tx-gray-400));
}
.pr-step-future .pr-step-label { color: rgb(var(--tx-gray-400)); }
/* Skipped step — amber dashed circle + exclamation icon. Used when
   the buyer bypassed a stage (e.g. PR → PO direct without an RFX).
   Visually distinct from "done" so the reader doesn't mistake a
   skipped step for a completed one. */
.pr-step-skipped .pr-step-circle {
  background: #FFFBEB;
  border-color: #F59E0B;
  border-style: dashed;
  color: #B45309;
}
.pr-step-skipped .pr-step-label { color: #B45309; font-style: italic; }
.pr-line-done {
  background: linear-gradient(90deg, #10B981, #34D399);
}
.pr-line-skipped {
  background: repeating-linear-gradient(90deg, #F59E0B 0, #F59E0B 4px, transparent 4px, transparent 8px);
  opacity: 0.7;
}
@keyframes prPulse {
  0%, 100% { box-shadow: 0 4px 14px rgb(var(--sky-600) / 0.35); }
  50% { box-shadow: 0 4px 14px rgb(var(--sky-600) / 0.55), 0 0 0 6px rgb(var(--sky-600) / 0.08); }
}

/* Tab strip — Excel-sheet-tab pattern: left/right chevron buttons
   anchor the ends, and the strip in the middle scrolls horizontally
   with the OS scrollbar hidden. This replaces the previous thin
   styled scrollbar — too easy to miss, the user asked for explicit
   click-to-page buttons. */
.pr-tab-nav { /* outer wrapper: btn | strip | btn */ }
.pr-tab-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; flex-shrink: 0;
  background: #f8fafc;
  color: rgb(var(--tx-slate-500));
  border: 0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  font-size: 14px;
}
.pr-tab-nav-btn:first-child { border-right: 1px solid #e2e8f0; }
.pr-tab-nav-btn:last-child { border-left: 1px solid #e2e8f0; }
.pr-tab-nav-btn:hover { background: rgb(var(--sky-50)); color: rgb(var(--sky-600)); }
.pr-tab-nav-btn:active { background: rgb(var(--sky-100)); }

.pr-tab-strip {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/legacy Edge */
  /* CSS-driven smooth scroll — works for both JS scrollLeft and
     scrollBy() without depending on the `behavior:'smooth'` option,
     which gets dropped under headless / CDP automation. */
  scroll-behavior: smooth;
}
.pr-tab-strip::-webkit-scrollbar { display: none; }  /* WebKit */

.pr-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--tx-slate-500));
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.pr-tab-btn:hover { color: #334155; background: #F9FAFB; }
.pr-tab-btn.pr-tab-active {
  color: rgb(var(--sky-600));
  border-bottom-color: rgb(var(--sky-600));
  background: linear-gradient(180deg, rgba(255,247,237,0.4), transparent);
}
.pr-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #F3F4F6;
  color: rgb(var(--tx-gray-500));
  font-size: 10px;
  font-weight: 700;
}
.pr-tab-btn.pr-tab-active .pr-tab-count {
  background: rgb(var(--sky-100));
  color: rgb(var(--sky-700));
}

/* ── Toggle switch ──────────────────────────────────────────────────
   Drop-in replacement for shortlist / on-off checkboxes. Uses a hidden
   real <input type=checkbox> for form-submission compatibility — the
   visual track + thumb are styled siblings driven by :checked.
   Markup:
     <label class="rfq-toggle">
       <input type="checkbox" class="some-class" data-... />
       <span class="rfq-toggle-track"></span>
     </label>                                                            */
.rfq-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.rfq-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.rfq-toggle-track {
  position: absolute;
  inset: 0;
  background: #CBD5E1;
  border-radius: 999px;
  transition: background 0.18s ease;
}
.rfq-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 0.18s ease;
}
.rfq-toggle input:checked + .rfq-toggle-track { background: #7c3aed; }
.rfq-toggle input:checked + .rfq-toggle-track::after { transform: translateX(16px); }
.rfq-toggle input:focus-visible + .rfq-toggle-track {
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}
.rfq-toggle input:disabled + .rfq-toggle-track { opacity: 0.5; cursor: not-allowed; }

/* ── Glass morphism helpers ──────────────────────────────────────────
   Applied to large form sections (RFQ Create + Vendor Registration) so the
   cards lift off a soft tinted page background. .glass-card replaces s-card
   styling on opt-in pages; .glass-soft is a lighter variant. */
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow:
    0 6px 28px rgba(15, 23, 42, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  padding: 16px;
}
.glass-card-soft {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
}
.glass-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.glass-header-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--sky-200)), rgb(var(--sky-300)));
  color: rgb(var(--sky-700)); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.glass-header-icon ion-icon { font-size: 16px; }
.glass-header-title { font-weight: 600; font-size: 14px; color: #1f2937; }

/* Page background — neutral surface behind glass cards (no yellow tint) */
.page-glass-bg {
  background: transparent;
  min-height: 100%;
}

/* Themed attachment / file upload button (used in Vendor Reg + RFQ attachments) */
.attach-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--sky-50)), rgb(var(--sky-100)));
  border: 1px dashed rgb(var(--sky-300)); color: rgb(var(--sky-700));
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.attach-btn:hover { background: linear-gradient(135deg, rgb(var(--sky-100)), rgb(var(--sky-200))); border-style: solid; }
.attach-btn ion-icon { font-size: 14px; }
.attach-input { display: none; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: #ecfdf5; border: 1px solid #6ee7b7;
  color: #065f46; font-size: 11px;
}
.attach-chip .attach-chip-x { color: #047857; cursor: pointer; }
.attach-chip .attach-chip-x:hover { color: #be123c; }

/* PR Scope of Work — print-ready typography for Quill-rendered HTML */
.pr-sow-content { color: #1F2937; line-height: 1.6; font-size: 14px; }
.pr-sow-content h1 { font-size: 22px; font-weight: 700; margin: 12px 0 8px; color: #0F172A; }
.pr-sow-content h2 { font-size: 18px; font-weight: 700; margin: 10px 0 6px; color: #0F172A; }
.pr-sow-content h3 { font-size: 16px; font-weight: 600; margin: 8px 0 4px; color: #1E293B; }
.pr-sow-content p  { margin: 6px 0; }
.pr-sow-content strong, .pr-sow-content b { font-weight: 700; color: #0F172A; }
.pr-sow-content em, .pr-sow-content i { font-style: italic; }
.pr-sow-content u { text-decoration: underline; }
.pr-sow-content s, .pr-sow-content del { text-decoration: line-through; }
.pr-sow-content ul, .pr-sow-content ol { margin: 8px 0 8px 24px; padding-left: 16px; }
.pr-sow-content ul { list-style: disc; }
.pr-sow-content ol { list-style: decimal; }
.pr-sow-content li { margin: 2px 0; }
/* Quill 2 stores every list as <ol><li data-list="bullet|ordered"> with a .ql-ui marker span: bullets stay bullets
   outside the editor (B29 fix round 1; the policy editor itself now saves plain <ul> / <ol>). */
.pr-sow-content li[data-list="bullet"] { list-style-type: disc; }
.pr-sow-content li[data-list="ordered"] { list-style-type: decimal; }
.pr-sow-content .ql-ui { display: none; }
/* The same for the read-only .po-richtext views (PO detail, PO print, the supplier PO page, the hub PO print, contract
   detail), whose inline styles number every <ol> (B29 fix round 2). Never inside a live Quill editor: an editor host
   (.ql-container) or a .ql-editor pane keeps Quill's own markers. */
.po-richtext:not(.ql-container):not(.ql-editor) li[data-list="bullet"] { list-style-type: disc; }
.po-richtext:not(.ql-container):not(.ql-editor) li[data-list="ordered"] { list-style-type: decimal; }
.po-richtext:not(.ql-container):not(.ql-editor) .ql-ui { display: none; }
/* Indented (nested) list items and blocks — Quill's .ql-indent-1…8 (B29 polish). Quill's own CSS comes only with an
   editor, so outside one (policy pages, the Scope of Work on the PR / PO / supplier / hub pages and prints, contract
   detail) an indented item fell back to its parent's level. Each level indents 1.5em (an indented paragraph 3em, as
   in the editor). In a numbered list that has indented items, a numbered item counts within its level like the
   editor's markers (1. → a. → i. → 1. …: counters pa-l0…pa-l8, created by that <ol> and set back by each shallower
   item; the item's level comes in --pa-n / --pa-s); a list without indented items keeps the browser's own numbering
   (its `start` included) and bullets stay discs. Both list shapes: Quill 2's <ol><li data-list="…"> and the plain
   <ol> / <ul> runs the policy editor saves. Never inside a live editor (.ql-container / .ql-editor keep Quill's). */
.pr-sow-content li.ql-indent-1, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-1 { margin-left: 1.5em; }
.pr-sow-content li.ql-indent-2, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-2 { margin-left: 3em; }
.pr-sow-content li.ql-indent-3, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-3 { margin-left: 4.5em; }
.pr-sow-content li.ql-indent-4, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-4 { margin-left: 6em; }
.pr-sow-content li.ql-indent-5, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-5 { margin-left: 7.5em; }
.pr-sow-content li.ql-indent-6, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-6 { margin-left: 9em; }
.pr-sow-content li.ql-indent-7, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-7 { margin-left: 10.5em; }
.pr-sow-content li.ql-indent-8, .po-richtext:not(.ql-container):not(.ql-editor) li.ql-indent-8 { margin-left: 12em; }
.pr-sow-content .ql-indent-1:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-1:not(li) { padding-left: 3em; }
.pr-sow-content .ql-indent-2:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-2:not(li) { padding-left: 6em; }
.pr-sow-content .ql-indent-3:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-3:not(li) { padding-left: 9em; }
.pr-sow-content .ql-indent-4:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-4:not(li) { padding-left: 12em; }
.pr-sow-content .ql-indent-5:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-5:not(li) { padding-left: 15em; }
.pr-sow-content .ql-indent-6:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-6:not(li) { padding-left: 18em; }
.pr-sow-content .ql-indent-7:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-7:not(li) { padding-left: 21em; }
.pr-sow-content .ql-indent-8:not(li), .po-richtext:not(.ql-container):not(.ql-editor) .ql-indent-8:not(li) { padding-left: 24em; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]), .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) { counter-reset: list-item pa-l0 pa-l1 pa-l2 pa-l3 pa-l4 pa-l5 pa-l6 pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li { --pa-n: pa-l0; --pa-s: decimal; counter-set: pa-l1 pa-l2 pa-l3 pa-l4 pa-l5 pa-l6 pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-1, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-1 { --pa-n: pa-l1; --pa-s: lower-alpha; counter-set: pa-l2 pa-l3 pa-l4 pa-l5 pa-l6 pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-2, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-2 { --pa-n: pa-l2; --pa-s: lower-roman; counter-set: pa-l3 pa-l4 pa-l5 pa-l6 pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-3, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-3 { --pa-n: pa-l3; --pa-s: decimal; counter-set: pa-l4 pa-l5 pa-l6 pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-4, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-4 { --pa-n: pa-l4; --pa-s: lower-alpha; counter-set: pa-l5 pa-l6 pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-5, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-5 { --pa-n: pa-l5; --pa-s: lower-roman; counter-set: pa-l6 pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-6, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-6 { --pa-n: pa-l6; --pa-s: decimal; counter-set: pa-l7 pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-7, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-7 { --pa-n: pa-l7; --pa-s: lower-alpha; counter-set: pa-l8; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li.ql-indent-8, .po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li.ql-indent-8 { --pa-n: pa-l8; --pa-s: lower-roman; counter-set: none; }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li[data-list="ordered"],
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li:not([data-list]),
.po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li[data-list="ordered"],
.po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li:not([data-list]) { counter-increment: var(--pa-n); }
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li[data-list="ordered"]::marker,
.pr-sow-content ol:has(> li[class*="ql-indent-"]) > li:not([data-list])::marker,
.po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li[data-list="ordered"]::marker,
.po-richtext:not(.ql-container):not(.ql-editor) ol:has(> li[class*="ql-indent-"]) > li:not([data-list])::marker { content: counter(var(--pa-n), var(--pa-s)) ". "; }
.pr-sow-content blockquote {
  border-left: 3px solid rgb(var(--sky-500)); padding: 4px 12px; margin: 8px 0;
  background: rgb(var(--sky-50)); color: rgb(var(--sky-900)); font-style: italic;
}
.pr-sow-content pre, .pr-sow-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #F1F5F9; padding: 2px 6px; border-radius: 4px; font-size: 12px;
}
.pr-sow-content pre { padding: 10px; margin: 8px 0; }
.pr-sow-content a { color: rgb(var(--sky-600)); text-decoration: underline; }
.pr-sow-content .ql-align-center { text-align: center; }
.pr-sow-content .ql-align-right  { text-align: right; }
.pr-sow-content .ql-align-justify{ text-align: justify; }

/* Quill editor sizing inside Create-PR Scope of Work card */
#prScopeOfWorkEditor.ql-container { min-height: 200px; font-size: 14px; }
#prScopeOfWorkEditor + .ql-toolbar,
.ql-toolbar.ql-snow { border-color: #e5e7eb !important; border-radius: 8px 8px 0 0; }
.ql-container.ql-snow { border-color: #e5e7eb !important; border-radius: 0 0 8px 8px; }

/* Alarm modal severity cards */
.alarm-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.alarm-card.error {
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  color: #BE123C;
}
.alarm-card.warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
}

/* ── Sofia full-screen modal shell ─────────────────────────────────
   Used by PO Items expand, NFA modal, Catalog admin create/edit,
   Catalog bulk-upload, etc. Originally lived inline in po/create.html
   which meant the modal was invisible on any other page (catalog
   manage's "New Catalog" / "Bulk Upload" clicks would silently open
   an unstyled element). Lifted to the global stylesheet so any HTMX
   partial that mounts a `.po-fs-modal` works regardless of which
   route the buyer came from. */
.po-fs-modal { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); display: none; align-items: stretch; justify-content: center; padding: 24px; }
.po-fs-modal.show { display: flex; }
.po-fs-modal-panel { background: #ffffff; border-radius: 18px; width: 100%; max-width: 1280px; box-shadow: 0 30px 80px rgba(15,23,42,0.35); display: flex; flex-direction: column; overflow: hidden; }
.po-fs-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #e5e7eb; background: linear-gradient(180deg, rgb(var(--sky-50)) 0%, #ffffff 100%); }
.po-fs-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; background: #fafafa; }

/* =====================================================
   HIERARCHY — Business Line → Family → Category → Sub Category
   (2026-10). Curtain meta line, level chips, create-page info
   cards and the master path-mapping editor (app.js initPathEditor).
   Level colours: BL indigo · Family violet · Category teal ·
   Sub Category amber (matches the curtain avatar colours).
   ===================================================== */

/* Curtain card third line — Type · ERP · GL for hierarchy pickers */
.curtain-card-meta { font-size: 11px; color: rgb(var(--tx-gray-500)); margin-top: 2px; line-height: 1.35; }

/* Level chips — list rows, detail cards, path tables */
.hier-chip, .hpath-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  background: #F3F4F6; color: #374151; border: 1px solid #E5E7EB;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hier-chip ion-icon, .hpath-chip ion-icon { font-size: 12px; flex-shrink: 0; }
.hier-chip-bl,  .hpath-chip-l1 { background: #EEF2FF; color: #4338CA; border-color: #C7D2FE; }
.hier-chip-fam, .hpath-chip-l2 { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.hier-chip-cat, .hpath-chip-l3 { background: #F0FDFA; color: #0F766E; border-color: #99F6E4; }
.hier-chip-sub, .hpath-chip-l4 { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.hpath-chip-l0 { background: rgb(var(--sky-50)); color: rgb(var(--sky-700)); border-color: rgb(var(--sky-200)); }
.hier-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hier-sep { color: #D1D5DB; font-size: 12px; }

/* Create-page info card under a BL / Family pick: name + Type + ERP / GL
   (internal pages only — never rendered for vendors). */
.hier-info-card {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgb(var(--sky-50)), #FFF);
  border: 1px solid rgb(var(--sky-200));
}
.hier-info-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: #EEF2FF; color: #4338CA;
}
.hier-info-card.is-family .hier-info-icon { background: #F5F3FF; color: #6D28D9; }
.hier-info-name { font-size: 13px; font-weight: 700; color: #1F2937; line-height: 1.3; }
.hier-info-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 11px; color: rgb(var(--tx-gray-500)); }
.hier-info-meta b { color: #374151; font-weight: 600; }

/* ── Path-mapping editor (master forms) ───────────────────────────── */
.hpath-editor {
  border: 1px solid #E5E7EB; border-radius: 14px; background: #fff;
  overflow: hidden;
}
.hpath-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid #F3F4F6;
  background: linear-gradient(180deg, rgb(var(--sky-50)) 0%, #FFF 100%);
}
.hpath-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #374151; }
.hpath-title ion-icon { color: rgb(var(--sky-600)); font-size: 16px; }
.hpath-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
  background: rgb(var(--sky-100)); color: rgb(var(--sky-700));
}
.hpath-search {
  width: 100%; padding: 7px 12px; font-size: 12px; border-radius: 10px;
  border: 1px solid #E5E7EB; background: #FAFAFA; transition: all 0.2s ease;
}
.hpath-search:focus { outline: none; background: #fff; border-color: rgb(var(--sky-600)); box-shadow: 0 0 0 3px rgb(var(--sky-600) / 0.08); }
.hpath-table { max-height: 380px; overflow-y: auto; padding: 8px 10px; }
.hpath-group + .hpath-group { margin-top: 4px; }
.hpath-group-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; }
.hpath-rows { display: flex; flex-direction: column; gap: 4px; }
.hpath-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px 6px 10px; border-radius: 10px;
  border: 1px solid #F3F4F6; background: #FAFAFA; transition: all 0.15s ease;
}
.hpath-row:hover { border-color: rgb(var(--sky-300)); background: rgb(var(--sky-50)); }
.hpath-cell { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; color: #1F2937; }
.hpath-code { font-size: 10px; font-weight: 700; color: rgb(var(--tx-gray-400)); text-transform: uppercase; letter-spacing: 0.04em; }
.hpath-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpath-missing { color: #B91C1C; font-style: italic; }
.hpath-sep { color: #D1D5DB; font-size: 12px; }
.hpath-remove {
  margin-left: auto; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.04); border: none; color: rgb(var(--tx-gray-400)); cursor: pointer; font-size: 14px;
  transition: all 0.15s ease;
}
.hpath-remove:hover { background: #FEE2E2; color: #DC2626; }
.hpath-more {
  align-self: flex-start; margin-top: 2px; padding: 3px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 700; color: rgb(var(--sky-600));
  background: rgb(var(--sky-50)); border: 1px dashed rgb(var(--sky-300)); cursor: pointer;
}
.hpath-more:hover { background: rgb(var(--sky-100)); }
.hpath-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: rgb(var(--tx-gray-400)); }
.hpath-add-panel {
  border-top: 1px dashed #E5E7EB; padding: 12px 14px 14px; background: #FCFCFD;
}
.hpath-add-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--tx-gray-500));
}
.hpath-add-level + .hpath-add-level { margin-top: 10px; }
.hpath-add-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 8px 14px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600)));
  box-shadow: 0 2px 8px rgb(var(--sky-600) / 0.25); transition: all 0.2s ease;
}
.hpath-add-btn:hover { box-shadow: 0 6px 16px rgb(var(--sky-600) / 0.3); transform: translateY(-1px); }
.hpath-add-hint { margin-top: 6px; font-size: 11px; color: rgb(var(--tx-gray-400)); }
/* U22 U1: grouped path tree — mode toggle, summary strip, collapsible groups
   (form editor and the read-only detail card) */
.hpath-search-box { flex: 1 1 180px; max-width: 260px; }
.hpath-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hpath-tools:empty { display: none; }
.hpath-modes {
  display: inline-flex; padding: 2px; border-radius: 999px;
  background: #F3F4F6; border: 1px solid #E5E7EB;
}
.hpath-mode {
  padding: 3px 10px; border-radius: 999px; border: none; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 700; color: rgb(var(--tx-gray-500)); white-space: nowrap; transition: all 0.15s ease;
}
.hpath-mode:hover { color: #374151; }
.hpath-mode.is-active { background: #fff; color: rgb(var(--sky-700)); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.hpath-tool {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid #E5E7EB; background: #fff; font-size: 11px; font-weight: 700; color: #4B5563;
  white-space: nowrap; transition: all 0.15s ease;
}
.hpath-tool:hover { border-color: rgb(var(--sky-300)); color: rgb(var(--sky-700)); background: rgb(var(--sky-50)); }
.hpath-tool ion-icon { font-size: 13px; }
.hpath-summary {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 14px 10px; border-bottom: 1px solid #F3F4F6; background: #FCFCFD;
}
.hpath-summary[hidden] { display: none; }
.hpath-sum-line { font-size: 12px; font-weight: 600; color: #4B5563; }
.hpath-sum-line b { color: rgb(var(--sky-700)); }
.hpath-sum-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; max-height: 78px; overflow-y: auto; }
.hpath-sum-label {
  margin-right: 2px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgb(var(--tx-gray-400));
}
.hpath-sum-chip { cursor: pointer; font-family: inherit; max-width: 240px; }
.hpath-sum-chip:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
.hpath-sum-n { padding-left: 2px; font-size: 10px; font-weight: 800; opacity: 0.7; }
.hpath-sum-row .hpath-more { margin-top: 0; padding: 2px 8px; }
.hpath-ghead { display: flex; align-items: center; gap: 6px; border-radius: 10px; transition: background 0.15s ease; }
.hpath-ghead:hover { background: #F9FAFB; }
.hpath-gtoggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border: none; background: transparent; cursor: pointer; text-align: left; font-family: inherit;
}
.hpath-gtoggle .hpath-chip { flex-shrink: 1; min-width: 0; }
.hpath-chev { flex-shrink: 0; font-size: 13px; color: rgb(var(--tx-gray-400)); transition: transform 0.15s ease; }
.hpath-ghead.is-open .hpath-chev { transform: rotate(90deg); color: rgb(var(--sky-600)); }
.hpath-gcount { flex-shrink: 0; font-size: 11px; color: rgb(var(--tx-gray-500)); white-space: nowrap; }
.hpath-gcount b { color: rgb(var(--sky-700)); }
.hpath-gremove {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 8px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 700; color: rgb(var(--tx-gray-400)); transition: all 0.15s ease;
}
.hpath-gremove:hover { background: #FEF2F2; border-color: #FECACA; color: #DC2626; }
.hpath-gremove ion-icon { font-size: 13px; }
.hpath-gbody {
  display: flex; flex-direction: column; gap: 4px;
  margin: 2px 0 6px 13px; padding-left: 10px; border-left: 2px solid #F3F4F6;
}
.hpath-group.is-flash > .hpath-ghead { animation: hpath-flash 1.4s ease; }
@keyframes hpath-flash { 0%, 45% { background: rgb(var(--sky-100)); } 100% { background: transparent; } }
.hpath-row.is-inactive { opacity: 0.6; }
.hpath-tag {
  padding: 0 5px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #B45309; background: #FFFBEB; border: 1px solid #FDE68A;
}
.hpath-editor.is-readonly { margin: 0 20px 18px; }
.hpath-editor.is-readonly .hpath-table { max-height: 460px; }

/* U22 U2: conditional field badges — "+n new" on a group's navigator entry / section header while a question
   shown by an answer elsewhere is still unseen (pulses once when it appears), and the "Shows n more question(s)
   in “Group” →" hint under the answer that revealed them (vendor_portal/static/question_field.js pnFresh /
   PQ.elsewhere). */
.pq-new-badge {
  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  padding: 1px 6px; border-radius: 4px; border: 1px solid #D97706; background: #F59E0B; color: #FFFFFF;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4;
  animation: pq-new-pulse 1.4s ease-out 1;
}
@keyframes pq-new-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); transform: scale(1); }
}
.pq-elsewhere {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 4px; padding: 1px 0;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: 11px; font-weight: 600; color: #B45309;
}
.pq-elsewhere:hover, .pq-elsewhere:focus-visible { text-decoration: underline; }
.pq-elsewhere ion-icon { flex-shrink: 0; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .pq-new-badge { animation: none; } }

/* SKP: skip DC / GRN by category + extra invoice attachments (design docs/design/skip_dcgrn.md §4 / §8). Shared by
   both apps (copied byte-for-byte to vendor_portal/static/sofia.css). Frozen classes for the other SKP groups:
   .skp-chip-direct (invoice directly — no DC / GRN), .skp-chip-preview (live preview while a PO is unstamped),
   .skp-docs / .skp-doc-row (required-documents list), .skp-doc-ok / .skp-doc-missing (attached / missing badge),
   .skp-qty-cols (Ordered / Invoiced / Remaining numbers). The rest styles the master setup card
   (pages/master/_fulfilment_card.html / _fulfilment_form.html, static/fulfilment_rules.js). */
.skp-chip-direct, .skp-chip-preview {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: nowrap;
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6;
}
.skp-chip-direct { color: #0F766E; background: #F0FDFA; border: 1px solid #99F6E4; }
.skp-chip-preview { color: rgb(var(--tx-gray-500)); background: #F9FAFB; border: 1px dashed #D1D5DB; font-weight: 600; }
.skp-chip-direct ion-icon, .skp-chip-preview ion-icon { font-size: 12px; flex-shrink: 0; }
.skp-docs { display: flex; flex-direction: column; gap: 6px; }
.skp-doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border: 1px solid #E5E7EB; border-radius: 10px; background: #FFFFFF;
  font-size: 13px; color: #1F2937;
}
.skp-doc-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; word-break: break-word; }
.skp-doc-label ion-icon { color: rgb(var(--tx-slate-400)); font-size: 15px; flex-shrink: 0; }
.skp-doc-ok, .skp-doc-missing, .skp-tag-mandatory, .skp-tag-optional {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap;
  padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.6;
}
.skp-doc-ok { color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; }
.skp-doc-missing { color: #B91C1C; background: #FEF2F2; border: 1px solid #FECACA; }
.skp-tag-mandatory { color: #B45309; background: #FFFBEB; border: 1px solid #FDE68A; }
.skp-tag-optional { color: rgb(var(--tx-gray-500)); background: #F3F4F6; border: 1px solid #E5E7EB; }
.skp-qty-cols { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.skp-card-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: 8px; border: 1px solid #E5E7EB; background: #FFFFFF; color: #4B5563;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.skp-card-btn:hover { border-color: rgb(var(--sky-600)); color: rgb(var(--sky-700)); }
.skp-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.skp-rule-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #1E293B; }
.skp-rule-note { font-size: 12px; font-weight: 500; color: rgb(var(--tx-gray-500)); }
.skp-rule-empty { margin-top: 6px; font-style: italic; }
.skp-rule-docs { margin-top: 8px; }
.skp-rule-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: 11px; color: rgb(var(--tx-gray-500)); line-height: 1.5; }
.skp-rule-hint ion-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; color: rgb(var(--tx-slate-400)); }
.skp-form { display: flex; flex-direction: column; gap: 14px; }
.skp-rows-wrap { display: flex; flex-direction: column; gap: 8px; }
.skp-rows-wrap.is-hidden { display: none; }
.skp-att-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.skp-att-label {
  flex: 1 1 200px; min-width: 0; padding: 7px 10px; border: 1px solid #E5E7EB; border-radius: 10px;
  font-size: 13px; color: #1F2937; background: #FFFFFF;
}
.skp-att-label:focus { outline: none; border-color: rgb(var(--sky-500)); box-shadow: 0 0 0 3px rgb(var(--sky-500) / 0.15); }
.skp-att-kind.m-curtain-trigger { width: 140px; flex-shrink: 0; padding: 6px 10px; }
.skp-icon-btn {
  width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid #E5E7EB; background: #FFFFFF; color: rgb(var(--tx-gray-500)); cursor: pointer;
}
.skp-icon-btn:hover:not(:disabled) { border-color: rgb(var(--sky-600)); color: rgb(var(--sky-700)); }
.skp-icon-btn.is-danger:hover:not(:disabled) { border-color: #FECACA; color: #DC2626; background: #FEF2F2; }
.skp-icon-btn:disabled { opacity: 0.4; cursor: default; }
.skp-add-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px;
  border-radius: 8px; border: 1px dashed #CBD5E1; background: #F8FAFC; color: #475569;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.skp-add-btn:hover:not(:disabled) { border-color: rgb(var(--sky-600)); color: rgb(var(--sky-700)); }
.skp-add-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 640px) {
  .skp-rule-grid { grid-template-columns: 1fr; }
  .skp-att-kind.m-curtain-trigger { width: auto; flex: 1; }
}

/* T4 shared flow strip (design docs/design/vendor_compliance_2610.md §11; markup = templates/macros/flow_strip.html).
   The Sourcing Flow of the Payment / PO / DC / GRN / Invoice / Contract detail pages. Fits at every zoom step and on a
   phone: stages share the row (flex 1 1 0, 128-220px; 112px on a narrow layout) and the line is centred only while it
   fits — wider than the card it starts at the LEFT edge and the box scrolls horizontally (never clipped on both
   sides, no column fallback). Text never leaves its card: the number is one line with an ellipsis, the sub-line wraps
   (two lines at most); the card's title carries the full text. No fixed stage widths. */
.pa-flow-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 4px 6px; margin: -4px -4px -6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pa-flow-line { display: flex; align-items: stretch; justify-content: center; gap: 0; width: 100%; min-width: min-content; min-height: 54px; }
.pa-flow-stage { flex: 1 1 0; min-width: 128px; max-width: 220px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pa-flow-arrow { flex: 0 0 32px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.pa-flow-arrow.is-wide { flex-basis: 40px; }
.pa-flow-arrow svg { display: block; width: 100%; height: 100%; min-height: 40px; overflow: visible; }
.pa-flow-arrow[data-shape="straight"] svg { height: 40px; }
.pa-flow-card {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box;
  padding: 7px 10px; border-radius: 9px; border: 1px solid; background: transparent; color: inherit;
  font: inherit; text-align: left; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease;
  --pa-flow-ring: rgba(244, 63, 94, .25);
}
a.pa-flow-card, button.pa-flow-card { cursor: pointer; }
a.pa-flow-card:hover, button.pa-flow-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.pa-flow-card[data-ref-hidden], .pa-flow-card[data-scope-hidden] { cursor: default; }
.pa-flow-card.is-current { border-width: 1.5px; box-shadow: 0 0 0 2px var(--pa-flow-ring); }
.pa-flow-icon {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
/* width 0 + flex 1: the meta never widens its card (the stage may shrink to its min-width; the number ellipsises) */
.pa-flow-meta { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; }
.pa-flow-no {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 800; line-height: 1.15;
  letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pa-flow-sub {
  font-size: 9.5px; line-height: 1.2; margin-top: 2px; opacity: .78; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pa-flow-sub:empty { display: none; }
/* a stack of cards (several PRs / POs / DCs / children) stays compact */
.pa-flow-stage:has(> .pa-flow-card:nth-child(2)) .pa-flow-card { padding: 5px 8px; }
.pa-flow-stage:has(> .pa-flow-card:nth-child(2)) .pa-flow-icon { width: 22px; height: 22px; font-size: 12px; }
.pa-flow-card.is-pr     { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border-color: #FDE68A; color: #92400E; --pa-flow-ring: rgba(217, 119, 6, .30); }
.pa-flow-card.is-rfq,
.pa-flow-card.is-po     { background: linear-gradient(135deg, rgb(var(--sky-50)), rgb(var(--sky-100))); border-color: rgb(var(--sky-300)); color: rgb(var(--sky-800)); --pa-flow-ring: rgb(var(--sky-500) / .30); }
.pa-flow-card.is-nfa    { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-color: #FCD34D; color: #92400E; --pa-flow-ring: rgba(217, 119, 6, .30); }
.pa-flow-card.is-master,
.pa-flow-card.is-dc     { background: linear-gradient(135deg, #FFF1F2, #FFE4E6); border-color: #FDA4AF; color: #9F1239; --pa-flow-ring: rgba(244, 63, 94, .25); }
.pa-flow-card.is-child  { background: #FFFFFF; border-color: #FDA4AF; color: #9F1239; --pa-flow-ring: rgba(244, 63, 94, .25); }
.pa-flow-card.is-ct     { background: linear-gradient(135deg, #F0FDFA, #CCFBF1); border-color: #5EEAD4; color: #115E59; --pa-flow-ring: rgba(20, 184, 166, .30); }
.pa-flow-card.is-grn    { background: linear-gradient(135deg, #F0FDF4, #D1FAE5); border-color: #86EFAC; color: #166534; --pa-flow-ring: rgba(22, 163, 74, .25); }
.pa-flow-card.is-inv    { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-color: #FBBF24; color: #92400E; --pa-flow-ring: rgba(217, 119, 6, .30); }
.pa-flow-card.is-pay    { background: linear-gradient(135deg, #ECFDF5, #A7F3D0); border-color: #34D399; color: #065F46; --pa-flow-ring: rgba(5, 150, 105, .30); }
/* kinds is-gr (Goods Return: rose, the DC family) and is-cn (Credit Note: violet), D0411 contract §27 — the Credit Note pane */
.pa-flow-card.is-gr     { background: linear-gradient(135deg, #FFF1F2, #FECDD3); border-color: #FB7185; color: #9F1239; --pa-flow-ring: rgba(225, 29, 72, .25); }
.pa-flow-card.is-cn     { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); border-color: #C4B5FD; color: #5B21B6; --pa-flow-ring: rgba(124, 58, 237, .28); }
.pa-flow-card.is-pr .pa-flow-icon, .pa-flow-card.is-nfa .pa-flow-icon, .pa-flow-card.is-inv .pa-flow-icon { background: #D97706; }
.pa-flow-card.is-rfq .pa-flow-icon, .pa-flow-card.is-po .pa-flow-icon { background: rgb(var(--sky-500)); }
.pa-flow-card.is-master .pa-flow-icon, .pa-flow-card.is-dc .pa-flow-icon { background: #E11D48; }
.pa-flow-card.is-child .pa-flow-icon { background: #FB7185; }
.pa-flow-card.is-ct .pa-flow-icon { background: #14B8A6; }
.pa-flow-card.is-grn .pa-flow-icon { background: #16A34A; }
.pa-flow-card.is-pay .pa-flow-icon { background: #059669; }
.pa-flow-card.is-gr .pa-flow-icon { background: #BE123C; }
.pa-flow-card.is-cn .pa-flow-icon { background: #7C3AED; }
@media (max-width: 640px) {
  .pa-flow-stage { min-width: 112px; }
}

/* ── My To-do tables (B27 G-TODO; pages/todo/_macros.html rows_block) ───────────────────────────────────
   Fixed column widths (no cell grows into the next one), every cell clips its text (ellipsis + the title
   tooltip of the macro), the Actions column sticks to the right edge (always visible while the table
   scrolls sideways, at any zoom and at phone width). --todo-act-w = the widest row of buttons (macro). */
.pa-todo-table { table-layout: fixed; width: 100%;
  --todo-act-cw: var(--todo-act-w, 180px); min-width: calc(1004px + var(--todo-act-cw)); }
.pa-todo-table col.pa-todo-c-stripe { width: 8px; }
.pa-todo-table col.pa-todo-c-type   { width: 180px; }
.pa-todo-table col.pa-todo-c-doc    { width: 112px; }
.pa-todo-table col.pa-todo-c-title  { width: auto; }      /* Title + Context share the rest (min-width above: */
.pa-todo-table col.pa-todo-c-ctx    { width: auto; }      /* at least 170px + 130px), the other columns are fixed */
.pa-todo-table col.pa-todo-c-who    { width: 112px; }
.pa-todo-table col.pa-todo-c-amt    { width: 120px; }
.pa-todo-table col.pa-todo-c-age    { width: 52px; }
.pa-todo-table col.pa-todo-c-due    { width: 120px; }
.pa-todo-table col.pa-todo-c-act    { width: var(--todo-act-cw); }
.pa-todo-table th, .pa-todo-table td { overflow: hidden; text-overflow: ellipsis; }
.pa-todo-table th { white-space: nowrap; }
.pa-todo-table .pa-todo-act { position: sticky; right: 0; z-index: 2; overflow: visible; background: #FFFFFF;
  box-shadow: -10px 0 10px -10px rgba(15, 23, 42, .22); }
.pa-todo-table thead .pa-todo-act { background: #F9FAFB; }
.pa-todo-table tbody tr:hover > .pa-todo-act { background: #FFFDF7; }
.pa-todo-table .pa-todo-act.is-menu-open { z-index: 20; }
.pa-todo-chip { max-width: 100%; min-width: 0; }
.pa-todo-chip > span { min-width: 0; }
.pa-todo-table .hier-chips { flex-wrap: wrap; min-width: 0; }
.pa-todo-table .hier-chip { min-width: 0; }
.pa-todo-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.pa-todo-acts > a, .pa-todo-acts > button { max-width: 100%; min-width: 0; }
.pa-todo-acts > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .pa-todo-table { --todo-act-cw: min(var(--todo-act-w, 180px), 148px); }
}

/* ── B29 UI SHELL ── BEGIN (owner item 2, contract §24.1; HF0211 O4 rail) ────────────────────────────────────────
   Everything between this BEGIN and the matching END marker belongs to the menu shell (.pa-nav-*); other work on
   this file stays outside the markers (tests/b29_ui_shell/t01_nav_static.py reads exactly this block).
   The collapsible menu of both apps (buyer base.html, hub base_vendor.html / base_admin.html): the sidebar
   `<aside class="pa-nav" data-nav-root>` holds `.pa-nav-panel` = the logo row `.pa-nav-brand`, the list
   `<nav class="pa-nav-list">` and the footer `.pa-nav-foot`. <html data-nav="collapsed"> (UserMaster /
   PortalVendorUser / VendorAdminUser.UiNavCollapsed, POST /me/ui-nav, static/nav_shell.js) turns it into a 4 rem rail:
   equal 40 px tiles on one centre line (the brand initial tile on top), an even 4 px rhythm, short centred
   separators, no visible scrollbar (soft fades where there is more to scroll, the footer lifted by a soft shadow, never
   covering the last tile), muted slate icons, a soft slate hover tile, the current item (or the group holding it) as a
   brand-tinted tile with a rounded indicator bar on the rail's left edge, count pills (9+) / dots at the tile's
   top-right with a ring in the panel colour. nav_shell.js adds the tooltip (`.pa-nav-tip`, the tile's label) and a
   group's flyout (`.nav-group.pa-fly > .pa-nav-children`: the group's own links, title = the group's name).
   Every collapse rule sits inside @media (min-width: 640px): below 640 px the menu is the drawer and always shows
   names. Nothing here sets `position` or `display` on `.pa-nav` itself outside the collapsed rules — an unconditional
   one (this file loads after tailwind.css) would beat the drawer's `fixed` / `hidden` classes. Colours are tokens
   (--pa-*) so the dark panel of the hub admin console (`.pa-nav-dark`) only swaps values; grey text uses --tx-*. */
.pa-nav {
  --pa-nav-bg: #FFFFFF; --pa-rail-ic: rgb(var(--tx-slate-500)); --pa-rail-ic-hover: #1E293B; --pa-rail-hover: #F1F5F9;
  --pa-rail-cur-bg: rgb(var(--sky-50)); --pa-rail-cur-ic: rgb(var(--sky-600)); --pa-rail-bar: rgb(var(--sky-600));
  --pa-rail-sep: #E2E8F0; --pa-rail-ring: rgb(var(--sky-500)); --pa-rail-lift: rgb(15 23 42 / 0.22);
}
.pa-nav-dark {
  --pa-nav-bg: #0F172A; --pa-rail-ic: rgb(255 255 255 / 0.62); --pa-rail-ic-hover: #FFFFFF;
  --pa-rail-hover: rgb(255 255 255 / 0.08); --pa-rail-cur-bg: rgb(255 255 255 / 0.12); --pa-rail-cur-ic: rgb(var(--sky-300));
  --pa-rail-bar: rgb(var(--sky-400)); --pa-rail-sep: rgb(255 255 255 / 0.12); --pa-rail-ring: rgb(var(--sky-400));
  --pa-rail-lift: rgb(0 0 0 / 0.55);
}
.pa-nav-panel { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow-x: hidden; }
.pa-nav-brand-mini { display: none; }
.pa-nav-part + .pa-nav-part::before { content: ""; display: block; margin: 4px 20px; border-top: 1px solid #F3F4F6; }
.pa-nav .nav-item, .pa-nav .nav-group-toggle { position: relative; }
/* The dark panel of the Vendor Portal admin console (base_admin.html `.pa-nav-dark`; B29 polish): hover keeps the
   panel's translucent white (the light `.nav-item:hover` above would put white text on #F9FAFB), and the current
   item (`active`, set by static/nav_shell.js through data-nav-current) is a light pill with a sky edge in the
   expanded menu; the rail draws it with the tokens above. */
.pa-nav-dark .nav-item:hover { background: rgb(255 255 255 / 0.1); }
.pa-nav-dark .nav-item.active { background: rgb(255 255 255 / 0.14); color: #FFFFFF; border-left-color: rgb(var(--sky-400)); font-weight: 600; }
.pa-nav-dark .nav-item.active ion-icon { color: rgb(var(--sky-300)); }
/* The rail's tooltip: ONE per menu (nav_shell.js appends it to [data-nav-root], aria-hidden — the tile carries the
   name), position: fixed so the list's overflow never clips it; invisible until `.is-on`. */
.pa-nav-tip { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; visibility: hidden; opacity: 0;
  max-width: 18rem; padding: 6px 10px; border-radius: 8px; background: #0F172A; color: #FFFFFF; font-size: 12px;
  font-weight: 500; line-height: 16px; white-space: nowrap; overflow: visible;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 24px -8px rgb(15 23 42 / 0.45), 0 2px 6px rgb(15 23 42 / 0.12); }
.pa-nav-tip::before { content: ""; position: absolute; left: -3px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: inherit; border-radius: 2px; transform: rotate(45deg); }
.pa-nav-tip.is-on { visibility: visible; opacity: 1; animation: pa-nav-tip-in .12s ease-out; }
@keyframes pa-nav-tip-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes pa-nav-fly-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) {
  /* the rail */
  html[data-nav="collapsed"] .pa-nav { width: 4rem; transition: width .15s ease; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-brand-full { display: none; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-brand-mini { display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; font-size: 17px; font-weight: 700; color: #FFFFFF;
    background: linear-gradient(140deg, rgb(var(--sky-500)), rgb(var(--sky-700)));
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.22); }
  html[data-nav="collapsed"] .pa-nav .pa-nav-brand a { border-radius: 12px; }
  /* the list: one centred column, no visible scrollbar (wheel / touchpad / keyboard focus still scroll it) */
  html[data-nav="collapsed"] .pa-nav .pa-nav-list { display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 0 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > * { margin: 0; flex: none; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > div:empty { display: none; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group { width: 40px; }
  /* soft edges where there is more to scroll (nav_shell.js: pa-fade-top / pa-fade-bot) */
  html[data-nav="collapsed"] .pa-nav .pa-nav-list::before,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list::after { content: ""; position: sticky; z-index: 3; display: block;
    flex: none; align-self: stretch; height: 40px; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list::before { top: 0; margin-bottom: -40px;
    background: linear-gradient(to bottom, var(--pa-nav-bg) 20%, transparent); }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list::after { bottom: 0; margin-top: -40px;
    background: linear-gradient(to top, var(--pa-nav-bg) 25%, transparent); }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list.pa-fade-top::before,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list.pa-fade-bot::after { opacity: 1; }
  /* tiles: top-level links, group buttons, footer buttons */
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle,
  html[data-nav="collapsed"] .pa-nav .pa-nav-foot-btn { display: flex; align-items: center; justify-content: center;
    gap: 0; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--pa-rail-ic); font-weight: 500; box-shadow: none;
    transition: background-color .12s ease, color .12s ease; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item > span,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle > span { gap: 0; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item ion-icon,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle ion-icon,
  html[data-nav="collapsed"] .pa-nav .pa-nav-foot-btn ion-icon { font-size: 20px; margin: 0; color: inherit; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item .pa-nav-label,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle .pa-nav-label,
  html[data-nav="collapsed"] .pa-nav .pa-nav-foot-btn .pa-nav-label,
  html[data-nav="collapsed"] .pa-nav .pa-nav-chevron,
  html[data-nav="collapsed"] .pa-nav .nav-group:not(.pa-fly) > .pa-nav-children { display: none; }
  /* a tile's extras (badge, count, the hub's dot box) leave the flow: the icon stays centred */
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item > :not(:first-child),
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle > :not(:first-child) {
    position: absolute; top: -4px; right: -5px; margin: 0; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle > div { display: contents; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item:hover,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle:hover,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group.pa-fly > .nav-group-toggle,
  html[data-nav="collapsed"] .pa-nav .pa-nav-foot-btn:hover { background: var(--pa-rail-hover); color: var(--pa-rail-ic-hover); }
  /* the current item, or the group holding it */
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item.active,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle.has-active {
    background: var(--pa-rail-cur-bg); color: var(--pa-rail-cur-ic); }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item.active::before,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle.has-active::before { content: "";
    position: absolute; left: -11px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--pa-rail-bar); }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-item:focus-visible,
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .nav-group > .nav-group-toggle:focus-visible,
  html[data-nav="collapsed"] .pa-nav .pa-nav-foot-btn:focus-visible,
  html[data-nav="collapsed"] .pa-nav .pa-nav-brand a:focus-visible { outline: 2px solid var(--pa-rail-ring); outline-offset: 2px; }
  /* group separators: short centred lines, the same space above and below */
  html[data-nav="collapsed"] .pa-nav .pa-nav-list > .pa-nav-section { width: 24px; height: 1px; margin: 6px 0; padding: 0;
    border: 0; background: var(--pa-rail-sep); font-size: 0; line-height: 0; color: transparent; overflow: hidden; }
  /* count pills (nav_shell.js: pa-nav-pill + data-pa-rail "1".."9" / "9+") and dots, ringed in the panel colour */
  html[data-nav="collapsed"] .pa-nav .pa-nav-list .pa-nav-pill { min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9999px; font-size: 0; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--pa-nav-bg); }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list .pa-nav-pill::after { content: attr(data-pa-rail); font-size: 10px;
    font-weight: 700; line-height: 18px; letter-spacing: 0; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list [id$="-nav-badge"] > .pa-nav-pill { display: block; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list .pa-nav-pill[data-pa-rail=""] { display: none; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-list .pa-nav-dot { position: absolute; top: 6px; right: 6px; width: 8px;
    height: 8px; box-shadow: 0 0 0 2px var(--pa-nav-bg); }
  /* the footer: tiles, lifted by a soft shadow while the list has more below — no hard line */
  html[data-nav="collapsed"] .pa-nav .pa-nav-foot { position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; gap: 4px; padding: 8px 0 12px; border-top-color: transparent; transition: box-shadow .15s ease; }
  html[data-nav="collapsed"] .pa-nav .pa-nav-panel.pa-nav-more .pa-nav-foot { box-shadow: 0 -12px 16px -14px var(--pa-rail-lift); }
  /* a group's flyout: its own links (gating, current item and badges of the expanded menu), titled with its name */
  html[data-nav="collapsed"] .pa-nav .nav-group.pa-fly > .pa-nav-children { display: block !important; position: fixed;
    z-index: 70; width: 15rem; margin: 0; padding: 4px 6px 6px; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
    box-shadow: 0 20px 44px -14px rgb(15 23 42 / 0.30), 0 4px 12px -4px rgb(15 23 42 / 0.10);
    transform-origin: left top; animation: pa-nav-fly-in .14s ease-out; }
  html[data-nav="collapsed"] .pa-nav .nav-group.pa-fly > .pa-nav-children::before { content: attr(data-pa-fly-title);
    display: block; padding: 8px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: rgb(var(--tx-slate-500)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item { display: flex; align-items: center;
    justify-content: flex-start; gap: 10px; width: auto; height: auto; margin: 1px 0; padding: 7px 10px; border: 0;
    border-radius: 8px; background: transparent; color: #334155; font-size: 13px; font-weight: 500; line-height: 18px; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item > div { gap: 10px; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item > div + span { margin-left: auto; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item ion-icon { font-size: 16px; flex: none;
    color: rgb(var(--tx-slate-400)); }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item:hover { background: #F1F5F9; color: #0F172A; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item:hover ion-icon { color: #334155; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item.active { background: rgb(var(--sky-50));
    color: rgb(var(--sky-700)); font-weight: 600; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item.active ion-icon { color: rgb(var(--sky-600)); }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-children .nav-item:focus-visible { outline: 2px solid rgb(var(--sky-500));
    outline-offset: -2px; }
  html[data-nav="collapsed"] .pa-nav .nav-group.pa-fly > .pa-nav-children.pa-fly-wide { width: 30rem; column-count: 2;
    column-gap: 8px; }
  html[data-nav="collapsed"] .pa-nav .nav-group.pa-fly > .pa-nav-children.pa-fly-wide::before { column-span: all; }
  html[data-nav="collapsed"] .pa-nav .pa-fly-wide .pa-nav-part,
  html[data-nav="collapsed"] .pa-nav .pa-fly-wide .nav-item { break-inside: avoid; }
  html[data-nav="collapsed"] .pa-nav .pa-fly-wide .pa-nav-sub { break-after: avoid; }
  /* two columns: runs are set apart by space (a line could open a column) */
  html[data-nav="collapsed"] .pa-nav .pa-fly-wide .pa-nav-part + .pa-nav-part::before { display: none; }
  html[data-nav="collapsed"] .pa-nav .pa-fly-wide .pa-nav-part + .pa-nav-part { margin-top: 12px; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-sub { padding: 8px 10px 4px; }
  html[data-nav="collapsed"] .pa-nav .pa-fly .pa-nav-part + .pa-nav-part::before { margin: 5px 6px; border-top-color: #EEF2F6; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-nav, .pa-nav-panel, .pa-nav .nav-item, .pa-nav .nav-group-toggle, .pa-nav .pa-nav-foot,
  .pa-nav .pa-nav-list::before, .pa-nav .pa-nav-list::after { transition: none !important; }
  .pa-nav-tip, .pa-nav .pa-nav-children { animation: none !important; }
}
/* ── B29 UI SHELL ── END ─────────────────────────────────────────────────────────────────────────────────────── */

/* ── VR GST CARD ── BEGIN (vendor registration set, contract §25, VR V2) ─────────────────────────────────────────
   The GST taxpayer card of macros/gst_card.html (byte-identical in both apps; behaviour static/gst_card.js): the
   client's picture — a grey "Taxpayer Details" band with "Last updated", the GSTIN with a solid status chip, a
   label / value grid (one column on phones, two from 640 px) with copy buttons, the Principal Address with State /
   PIN Code, the expandable additional addresses and the fetch footer with Refresh. Grey text through the --tx-*
   tokens. .pa-gst-drawer-bar / .pa-gst-drawer-btn: the picture's Refresh / Close buttons (icon above the label) for
   the hub wizard's drawer. The additional-address list is shown / hidden with the [hidden] attribute (no display
   rule of its own). */
.pa-gst-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; min-width: 0; }
.pa-gst-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
  padding: 11px 18px; background: #F3F4F6; border-bottom: 1px solid #E5E7EB; }
.pa-gst-title { font-size: 15px; font-weight: 700; color: #111827; }
.pa-gst-updated { font-size: 13px; color: rgb(var(--tx-gray-500)); }
.pa-gst-body { padding: 14px 18px 12px; }
.pa-gst-idrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding-bottom: 14px; }
.pa-gst-gstin { font-size: 16px; font-weight: 700; color: #111827; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.pa-gst-chip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 7px; font-size: 12.5px;
  font-weight: 600; line-height: 1.45; white-space: nowrap; }
.pa-gst-chip.is-emerald { background: #047857; color: #fff; }
.pa-gst-chip.is-sky { background: rgb(var(--sky-700)); color: #fff; }
.pa-gst-chip.is-rose { background: #BE123C; color: #fff; }
.pa-gst-chip.is-slate { background: #F1F5F9; color: #334155; border: 1px solid #E2E8F0; }
.pa-gst-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px 28px; margin: 0; padding: 14px 0 4px;
  border-top: 1px solid #E5E7EB; }
.pa-gst-grid + .pa-gst-grid { margin-top: 10px; }
@media (min-width: 640px) { .pa-gst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-gst-f { min-width: 0; }
.pa-gst-f.is-wide { grid-column: 1 / -1; }
.pa-gst-l { margin: 0 0 2px; font-size: 12.5px; color: rgb(var(--tx-gray-500)); }
.pa-gst-v { margin: 0; font-size: 14px; line-height: 1.5; color: #111827; overflow-wrap: anywhere; }
.pa-gst-v.is-na { color: rgb(var(--tx-gray-500)); }
.pa-gst-copy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin-left: 4px; vertical-align: -6px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: rgb(var(--tx-gray-500)); cursor: pointer; }
.pa-gst-copy:hover { background: #F3F4F6; color: #111827; }
.pa-gst-copy:focus-visible, .pa-gst-more:focus-visible, .pa-gst-refresh:focus-visible, .pa-gst-drawer-btn:focus-visible {
  outline: 2px solid rgb(var(--sky-500)); outline-offset: 2px; }
.pa-gst-copy ion-icon { font-size: 15px; }
.pa-gst-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 2px 0; border: 0;
  background: none; color: rgb(var(--sky-700)); font-size: 13px; font-weight: 600; cursor: pointer; }
.pa-gst-more:hover { text-decoration: underline; }
.pa-gst-more ion-icon { font-size: 15px; transition: transform 0.15s ease; }
.pa-gst-more[aria-expanded="true"] ion-icon { transform: rotate(180deg); }
.pa-gst-addl { list-style: none; margin: 8px 0 2px; padding: 0; border: 1px solid #E5E7EB; border-radius: 10px; }
.pa-gst-addl > li { padding: 8px 12px; border-top: 1px solid #F3F4F6; }
.pa-gst-addl > li:first-child { border-top: 0; }
.pa-gst-addl-line { font-size: 13px; line-height: 1.45; color: #1F2937; overflow-wrap: anywhere; }
.pa-gst-addl-sub { margin-top: 1px; font-size: 11.5px; color: rgb(var(--tx-gray-500)); overflow-wrap: anywhere; }
.pa-gst-addl-rest { font-size: 12px; font-style: italic; color: rgb(var(--tx-gray-500)); }
.pa-gst-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
  padding: 8px 18px; border-top: 1px solid #F3F4F6; background: #FAFAFA; font-size: 11.5px; color: rgb(var(--tx-gray-500)); }
.pa-gst-fetched.is-partial { color: #92400E; }
.pa-gst-refresh { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 11px;
  border: 1px solid #E5E7EB; border-radius: 8px; background: #fff; color: #374151; font-size: 12px; font-weight: 600;
  cursor: pointer; }
.pa-gst-refresh:hover { border-color: rgb(var(--sky-300)); color: rgb(var(--sky-700)); }
.pa-gst-refresh ion-icon { font-size: 14px; }
.pa-gst-refresh.htmx-request { opacity: 0.65; pointer-events: none; }
.pa-gst-refresh.htmx-request ion-icon { animation: pa-gst-spin 0.8s linear infinite; }
@keyframes pa-gst-spin { to { transform: rotate(360deg); } }
.pa-gst-card.is-compact .pa-gst-body { padding-bottom: 8px; }
.pa-gst-drawer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 12px;
  border-bottom: 1px solid #E5E7EB; background: #fff; }
.pa-gst-drawer-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px;
  padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: #111827; font-size: 13px; cursor: pointer; }
.pa-gst-drawer-btn:hover { background: #F3F4F6; }
.pa-gst-drawer-btn ion-icon { font-size: 22px; }
.pa-gst-drawer-btn.htmx-request { opacity: 0.65; pointer-events: none; }
.pa-gst-drawer-btn.htmx-request ion-icon { animation: pa-gst-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .pa-gst-more ion-icon { transition: none; }
  .pa-gst-refresh.htmx-request ion-icon, .pa-gst-drawer-btn.htmx-request ion-icon { animation: none; }
}
/* ── VR GST CARD ── END ─────────────────────────────────────────────────────────────────────────────────────────── */

/* ── VENDOR TODO H0311 ── BEGIN (contract §26.2 / §26.3; vendor_portal/templates/pages/portal/todo/*) ──────────────────
   Vendor To-do rows: ONE markup per item (pages/portal/todo/_row.html) that is a card on a narrow list and a table
   row on a wide one. The layout follows the width of the LIST (container queries on .pa-vtodo-list), so opening the
   details drawer narrows the rows (Amount, then Client and Age drop out) and nothing scrolls sideways. Browsers
   without container queries keep the card layout. Grey text only through the --tx-* tokens (contract §19). */
.pa-vtodo-list { container-type: inline-size; }
.pa-vtodo-rows { list-style: none; margin: 0; padding: 0 0 4px; }
.pa-vtodo-head { display: none; }
.pa-vtodo-row { position: relative; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto;
  grid-template-areas: "stripe doc amt" "stripe what what" "stripe client client" "stripe due more" "stripe btn btn";
  column-gap: 10px; row-gap: 6px; padding: 10px 12px 12px 0; border-top: 1px solid #F3F4F6; background: #FFFFFF;
  transition: background-color .15s ease; }
.pa-vtodo-row:hover { background: #FFFDF7; }
.pa-vtodo-row.is-active { background: rgb(var(--sky-50)); }
.pa-vtodo-row.is-menu-open { z-index: 30; }
.pa-vtodo-c-stripe { grid-area: stripe; width: 6px; border-radius: 0 6px 6px 0; align-self: stretch; }
.pa-vtodo-c-doc { grid-area: doc; min-width: 0; }
.pa-vtodo-c-what { grid-area: what; min-width: 0; }
.pa-vtodo-c-client { grid-area: client; min-width: 0; }
.pa-vtodo-c-amt { grid-area: amt; min-width: 0; text-align: right; align-self: center; }
.pa-vtodo-c-age { display: none; }
.pa-vtodo-c-due { grid-area: due; min-width: 0; align-self: center; }
.pa-vtodo-c-act { display: contents; }
.pa-vtodo-c-act > .pa-vtodo-btn { grid-area: btn; width: 100%; min-height: 40px; }
.pa-vtodo-c-act > .pa-vtodo-more { grid-area: more; justify-self: end; align-self: center; }
.pa-vtodo-open { display: block; width: 100%; max-width: 100%; min-width: 0; text-align: left; padding: 2px 4px;
  margin: -2px -4px; border-radius: 8px; background: none; border: 0; cursor: pointer; }
.pa-vtodo-open:hover { background: rgb(var(--sky-50)); }
.pa-vtodo-open:focus-visible { outline: 2px solid rgb(var(--sky-500)); outline-offset: 1px; }
.pa-vtodo-due-age { display: inline-flex; }
@container (min-width: 640px) {
  .pa-vtodo-head, .pa-vtodo-row { grid-template-columns: 6px 150px minmax(0, 1fr) 116px 196px;
    grid-template-areas: "stripe doc what due act"; column-gap: 12px; align-items: start; }
  .pa-vtodo-head { display: grid; padding: 8px 12px 8px 0; background: #F9FAFB; border-top: 1px solid #F3F4F6;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--tx-gray-500)); }
  .pa-vtodo-head > .pa-vtodo-c-stripe { visibility: hidden; }
  .pa-vtodo-row { padding: 12px 12px 12px 0; row-gap: 0; }
  .pa-vtodo-c-client, .pa-vtodo-c-amt, .pa-vtodo-c-age { display: none; }
  .pa-vtodo-c-due { align-self: start; padding-top: 2px; }
  .pa-vtodo-c-act { grid-area: act; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
  .pa-vtodo-c-act > .pa-vtodo-btn { width: auto; max-width: calc(100% - 46px); min-height: 0; }
  .pa-vtodo-head > .pa-vtodo-c-act { display: block; }
}
@container (min-width: 940px) {
  .pa-vtodo-head, .pa-vtodo-row { grid-template-columns: 6px 156px minmax(0, 1fr) 160px 96px 116px 196px;
    grid-template-areas: "stripe doc what client age due act"; }
  .pa-vtodo-c-client, .pa-vtodo-c-age { display: flex; }
  .pa-vtodo-c-age { grid-area: age; padding-top: 2px; }
  .pa-vtodo-head > .pa-vtodo-c-client, .pa-vtodo-head > .pa-vtodo-c-age { display: block; }
  .pa-vtodo-due-age { display: none; }
}
@container (min-width: 1180px) {
  .pa-vtodo-head, .pa-vtodo-row { grid-template-columns: 6px 160px minmax(0, 1fr) 170px 126px 96px 116px 200px;
    grid-template-areas: "stripe doc what client amt age due act"; }
  .pa-vtodo-c-amt { display: block; grid-area: amt; align-self: start; padding-top: 2px; }
  .pa-vtodo-head > .pa-vtodo-c-amt { display: block; }
}

/* Vendor To-do drawer (<aside id="todo-detail">): hidden until an item is opened (static/vendor_todo.js adds
   .is-open, the layout gets .has-drawer). >= 1280 px a column beside the list; 1024-1279 px a sheet over it;
   < 1024 px the full-screen overlay (sticky "Back to To-do" bar). */
.pa-vtodo-layout { display: flex; align-items: flex-start; gap: 12px; }
.pa-vtodo-main { flex: 1 1 auto; min-width: 0; }
.pa-vtodo-drawer { display: none; flex-direction: column; background: #FFFFFF; border: 1px solid #E5E7EB;
  border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); overflow-y: auto; overscroll-behavior: contain; }
.pa-vtodo-drawer.is-open { display: flex; }
.pa-vtodo-drawer.hidden, .pa-vtodo-drawer.is-open.hidden { display: none; }
.pa-vtodo-drawer:focus { outline: none; }
.pa-vtodo-drawer-body { min-width: 0; }
.pa-vtodo-doc { min-height: 0; }
@media (min-width: 1280px) {
  .pa-vtodo-drawer.is-open { flex: 0 0 480px; width: 480px; position: sticky; top: 0;
    max-height: calc(100vh - 100px); }
}
@media (min-width: 1536px) {
  .pa-vtodo-drawer.is-open { flex-basis: 560px; width: 560px; }
}
/* a loaded document (the existing detail panes were drawn for a wide pane) widens the drawer (.has-doc) */
@media (min-width: 1280px) {
  .pa-vtodo-drawer.is-open.has-doc { flex-basis: 720px; width: 720px; }
}
@media (min-width: 1536px) {
  .pa-vtodo-drawer.is-open.has-doc { flex-basis: 820px; width: 820px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pa-vtodo-drawer.is-open { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; z-index: 30;
    border-radius: 0; border-width: 0 0 0 1px; box-shadow: -12px 0 32px rgba(15, 23, 42, .18); }
  .pa-vtodo-drawer.is-open.has-doc { width: 720px; max-width: calc(100vw - 48px); }
}
@media (max-width: 1023.98px) {
  .pa-vtodo-drawer.is-open { position: fixed; inset: 0; z-index: 40; border: 0; border-radius: 0; }
}
/* the in-drawer loading line (hx-indicator of every request into the drawer's document) */
.pa-vtodo-skel { display: none; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: #F9FAFB; border: 1px dashed #E5E7EB; font-size: 12px; color: rgb(var(--tx-gray-500)); }
.pa-vtodo-skel.htmx-request { display: flex; }
.pa-vtodo-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(var(--sky-200));
  border-top-color: rgb(var(--sky-600)); animation: pa-vtodo-spin .8s linear infinite; flex: none; }
@keyframes pa-vtodo-spin { to { transform: rotate(360deg); } }
/* dashboard card: full-width item buttons with a 40 px tap target on phones */
@media (max-width: 639.98px) {
  .pa-vtodo-dash-btn { width: 100%; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-vtodo-spin { animation: none; }
  .pa-vtodo-row { transition: none; }
}
/* ── VENDOR TODO H0311 ── END ───────────────────────────────────────────────────────────────────────────────────── */

/* ── HUB DOCUMENT LISTS H0311 RC ── BEGIN (vendor_portal/templates/pages/portal/txn_list.html; review finding 5) ─────
   Below 1024 px the workspace stacks list over detail (45vh / 50vh caps above). While the detail pane holds only its
   "Nothing selected" placeholder ([data-txn-empty]) that pane is hidden and the list column (search box on top, the
   cards scrolling under it) takes the screen; opening a card replaces the placeholder and the stacked layout is back.
   Scoped to the hub's .svp-txn-ws / .svp-txn-root: no buyer page carries them. */
@media (max-width: 1024px) {
  .svp-txn-ws:has(#txn-detail > [data-txn-empty]) > .workspace-right { display: none; }
  .svp-txn-ws:has(#txn-detail > [data-txn-empty]) > .workspace-left { max-height: none; flex: 1 1 auto; min-height: 0; }
}
@media (max-width: 767px) {
  #content .svp-txn-root:has(> .svp-txn-ws #txn-detail > [data-txn-empty]) { height: 100%; }
  #content .svp-txn-root > .svp-txn-ws:has(#txn-detail > [data-txn-empty]) { flex: 1 1 auto; min-height: 20rem; }
  #content .svp-txn-root > .svp-txn-ws:has(#txn-detail > [data-txn-empty]) > .workspace-left { flex: 1 1 auto; min-height: 0; }
  #content .svp-txn-root > .svp-txn-ws:has(#txn-detail > [data-txn-empty]) > .workspace-left > * { max-height: none; }
}
/* ── HUB DOCUMENT LISTS H0311 RC ── END ─────────────────────────────────────────────────────────────────────────── */

/* ── DASHBOARD + MY TO-DO BY DOCUMENT (R0311 item 6) ── BEGIN ─────────────────────────────────────────────────────
   Owner 02-11 items 6c / 6e / 6d (contract §26.8): buyer pages/dashboard.html, pages/helpdesk/_tile.html,
   pages/todo/_tile.html, pages/todo/_list.html. Plain CSS (no new Tailwind utility); colours through the existing
   tokens. */
/* Rows of cards that always fill the width: n cards in ONE row from 640 px (n = --pa-fill-n, written inline by the
   template from the number of cards it renders); 2 per row on phones, an odd last card spanning the row. Procurement
   Pipeline, the hero KPI strip, the Helpdesk tile counters, the To-do card stats. Gap from the template's gap-*. */
.pa-dash-fill { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-dash-fill > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .pa-dash-fill { grid-template-columns: repeat(var(--pa-fill-n, 1), minmax(0, 1fr)); }
  .pa-dash-fill > :last-child:nth-child(odd) { grid-column: auto; }
}
/* Recent Activity: a native <details>, closed on every load (6b) */
.pa-dash-details > summary { list-style: none; }
.pa-dash-details > summary::-webkit-details-marker { display: none; }
.pa-dash-details .pa-when-open { display: none; }
.pa-dash-details[open] .pa-when-open { display: inline; }
.pa-dash-details[open] .pa-when-closed { display: none; }
.pa-dash-chev { transition: transform .15s ease; }
.pa-dash-details[open] .pa-dash-chev { transform: rotate(180deg); }
/* My To-do · by document — dashboard card: one card per actionable document group, EVERY row filled edge to edge:
   the template splits the cards into row blocks of `cols` cards (rows = ceil(n / 5), cols = ceil(n / rows):
   7 = 4 + 3, 8 = 4 + 4, 11 = 4 + 4 + 3) and each row is a flex line whose cards share the width. One card per row on
   phones. The open card's panel is a separate full-width block under the rows. */
.pa-todo-docs { display: flex; flex-direction: column; gap: .75rem; }
.pa-todo-docs-row { display: flex; flex-direction: column; gap: .75rem; }
.pa-todo-docs-row > * { min-width: 0; }
@media (min-width: 640px) {
  .pa-todo-docs-row { flex-direction: row; align-items: stretch; }
  .pa-todo-docs-row > * { flex: 1 1 0; }
}
.pa-todo-doc[aria-current="true"] { box-shadow: 0 0 0 2px rgb(var(--sky-400)); border-color: rgb(var(--sky-300)); }
/* card stats: only the group's non-zero buckets, laid out with .pa-dash-fill + --pa-fill-n (1..5) */
.pa-todo-stat { display: block; min-width: 0; border-radius: .5rem; padding: .375rem .5rem; background: #F8FAFC;
  border: 1px solid #F1F5F9; }
.pa-todo-stat:hover { background: rgb(var(--sky-50)); border-color: rgb(var(--sky-200)); }
/* the open card's panel: one row per item — stacked on phones, a 6-column grid from 768 px (stripe · document ·
   title · client · due · action) */
.pa-todo-dash-row { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.pa-todo-dash-row > * { min-width: 0; }
.pa-todo-dash-row > .pa-todo-dash-stripe { display: none; }
@media (min-width: 768px) {
  .pa-todo-dash-row { display: grid; grid-template-columns: 6px 11rem minmax(0, 1fr) 11rem 7.5rem 9.5rem;
    align-items: center; gap: .75rem; }
  .pa-todo-dash-row > .pa-todo-dash-stripe { display: block; }
  .pa-todo-dash-row > .pa-todo-dash-act { justify-self: end; }
}
/* My To-do page — the bucket header row of a document section's table; one <tbody> per bucket. The header button
   sticks to the left edge while the 10-column table scrolls sideways (phones). */
.pa-todo-table tbody.pa-todo-bucket > tr.pa-todo-bucket-head > th { padding: 10px 12px 6px; text-align: left;
  background: #FFFFFF; border-bottom: 1px solid #F3F4F6; overflow: visible; }
.pa-todo-table tbody.pa-todo-bucket + tbody.pa-todo-bucket > tr.pa-todo-bucket-head > th { border-top: 1px solid #E5E7EB; }
.pa-todo-table tr.pa-todo-bucket-head > th > button { position: sticky; left: 12px; }
/* ── DASHBOARD + MY TO-DO BY DOCUMENT (R0311 item 6) ── END ─────────────────────────────────────────────────────── */

/* ── Clients page · Clients & Sites tab (H0311) ── BEGIN (owner item 5 / 5b; h0311_design/cs_sites_design.md §3.5;
   pages/client_setup/_tree.html, _node_*.html, static/client_setup_tree.js; the read-only structure viewer
   pages/master/_site_structure.html .sstr-ro). Plain CSS: theme colours only through rgb(var(--sky-*)), grey text only
   through the --tx-* tokens. --cst-head = the bottom of the pane's sticky header (.detail-sticky-header) inside
   #cs-detail, set by client_setup_tree.js on load / resize / zoom change; the paths header sticks right under it, the
   tree card 16 px lower. ─────────────────────────────────────────────────────────────────────────────────────────── */
.cst-tab { container: cstab / inline-size; scroll-margin-top: 140px; --cst-head: 78px; --cst-stick: calc(var(--cst-head) + 16px); }
/* the tab card of _detail.html: clip (not hidden) keeps the rounded corners without becoming a scroll container,
   so the tree column and the paths header can stick inside the pane's scroll (#cs-detail) */
.cst-host { overflow: clip; }
.cst-split { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
.cst-split.is-wide { grid-template-columns: minmax(0, 1fr); }             /* "Full width": the paths get the whole tab */
.cst-split.is-wide > .cst-tree-col { display: none; }
.cst-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0; }

/* left: the tree card (sticky) */
.cst-tree-col {
  position: sticky; top: var(--cst-stick); display: flex; flex-direction: column; min-height: 360px;
  max-height: calc(var(--pa-vh, 100vh) - var(--cst-stick) - 40px);
  background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02); overflow: hidden;
}
.cst-head { padding: 12px 12px 10px; border-bottom: 1px solid #F1F5F9; background: linear-gradient(180deg, rgb(var(--sky-50)) 0%, #FFF 100%); }
.cst-search { position: relative; display: block; min-width: 0; }
.cst-search ion-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; color: rgb(var(--tx-gray-400)); pointer-events: none; }
.cst-search input {
  width: 100%; padding: 7px 30px 7px 32px; font-size: 12.5px; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff;
  color: #1F2937; transition: all 0.2s ease; font-family: inherit;
}
.cst-search input:focus { outline: none; border-color: rgb(var(--sky-600)); box-shadow: 0 0 0 3px rgb(var(--sky-600) / 0.08); }
.cst-search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 0 5px; border-radius: 5px; font-size: 10px;
  font-family: inherit; font-weight: 700; color: rgb(var(--tx-gray-500)); background: #F3F4F6; border: 1px solid #E5E7EB;
}
.cst-search input:not(:placeholder-shown) + kbd { display: none; }
/* quick filters: status / gap chips with counts (aria-pressed toggles, one at a time; "All" resets) */
.cst-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.cst-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 3px 2px 8px; border-radius: 999px; border: 1px solid #E2E8F0;
  background: #fff; font: inherit; font-size: 11px; font-weight: 600; line-height: 17px; color: #475569; cursor: pointer; white-space: nowrap;
  transition: all 0.15s ease;
}
.cst-chip b { min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 800; text-align: center; color: #475569; background: #F1F5F9; }
.cst-chip:hover { border-color: rgb(var(--sky-300)); color: rgb(var(--sky-700)); }
.cst-chip.is-on { color: #fff; background: rgb(var(--sky-600)); border-color: rgb(var(--sky-600)); }
.cst-chip.is-on b { color: rgb(var(--sky-700)); background: #fff; }
.cst-chip:focus-visible { outline: 2px solid rgb(var(--sky-500)); outline-offset: 1px; }
.cst-chip .cst-dot { margin: 0; width: 7px; height: 7px; box-shadow: none; }
.cst-chip > ion-icon { font-size: 12px; color: #D97706; }
.cst-chip.is-on > ion-icon { color: #fff; }
.cst-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 11px;
  color: rgb(var(--tx-slate-500)); }
.cst-meta b { color: #334155; font-weight: 700; }
.cst-link { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; color: rgb(var(--sky-600)); cursor: pointer; white-space: nowrap; text-decoration: none; }
.cst-link:hover { color: rgb(var(--sky-700)); text-decoration: underline; }
.cst-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 8px 12px; }
.cst-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; border-top: 1px solid #F1F5F9; background: #FCFCFD;
  font-size: 10.5px; color: rgb(var(--tx-slate-500)); }
.cst-foot > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cst-leg { display: inline-block; width: 14px; border-top: 2px solid #CBD5E1; }
.cst-leg-P { border-top: 2px dashed #F59E0B; }
.cst-leg-I { border-top: 2px dotted #94A3B8; }
.cst-foot .cst-dot { margin: 0; }

/* tree + connector lines (the connector to a Site carries its status: solid / dashed amber = in a request / dotted = inactive) */
.cst-tree, .cst-group { list-style: none; margin: 0; padding: 0; }
.cst-group { position: relative; padding-left: 15px; }
.cst-tree > .cst-item > .cst-group { margin-left: 4px; }
.cst-group > .cst-item { position: relative; padding-left: 16px; }
.cst-group > .cst-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid #E2E8F0; }
.cst-group > .cst-item::after { content: ""; position: absolute; left: 0; top: 21px; width: 13px; border-top: 1.5px solid #E2E8F0; }
.cst-group > .cst-item:last-child::before { bottom: auto; height: 21px; width: 13px; border-bottom: 1.5px solid #E2E8F0; border-bottom-left-radius: 8px; }
.cst-group > .cst-item:last-child::after { display: none; }
.cst-group > .cst-item.is-path::before, .cst-group > .cst-item.is-path::after { border-color: rgb(var(--sky-300)); }
.cst-group > .cst-item.is-st-P::after { border-top: 2px dashed #F59E0B; }
.cst-group > .cst-item.is-st-P:last-child::before { border-bottom: 2px dashed #F59E0B; }
.cst-group > .cst-item.is-st-I::after { border-top: 2px dotted #94A3B8; }
.cst-group > .cst-item.is-st-I:last-child::before { border-bottom: 2px dotted #94A3B8; }
.cst-group > .cst-item.is-st-R::after { border-top: 2px dashed #FDA4AF; }
.cst-group > .cst-item.is-st-R:last-child::before { border-bottom: 2px dashed #FDA4AF; }
.cst-group > .cst-item.is-collapsed > .cst-group { display: none; }
.cst-item[hidden] { display: none; }
.cst-item:focus { outline: none; }
.cst-item:focus-visible > .cst-node { outline: 2px solid rgb(var(--sky-500)); outline-offset: 1px; }

.cst-node {
  position: relative; display: flex; align-items: flex-start; gap: 9px; min-width: 0; margin: 2px 0; padding: 7px 8px 7px 7px;
  border-radius: 11px; border: 1px solid transparent; cursor: pointer; color: inherit; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cst-node:hover { background: #F8FAFC; border-color: #F1F5F9; }
.cst-node.is-selected { background: rgb(var(--sky-50)); border-color: rgb(var(--sky-200)); box-shadow: inset 3px 0 0 rgb(var(--sky-600)); }
.cst-node.is-dim { opacity: 0.62; }
.cst-node.is-dim:hover, .cst-node.is-dim.is-selected { opacity: 1; }
.cst-twisty {
  position: absolute; left: -24px; top: 12px; width: 17px; height: 17px; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 6px; border: 1px solid #E2E8F0; background: #fff; color: rgb(var(--tx-gray-500)); font-size: 11px; cursor: pointer;
}
.cst-twisty:hover { border-color: rgb(var(--sky-300)); color: rgb(var(--sky-600)); }
.cst-twisty ion-icon { transition: transform 0.15s ease; }
.cst-twisty.is-open ion-icon { transform: rotate(90deg); }
.cst-main { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cst-name { min-width: 0; font-size: 13px; font-weight: 600; color: #1E293B; line-height: 1.3; overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.cst-sub { display: block; min-width: 0; font-size: 11px; color: rgb(var(--tx-slate-500)); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cst-sub .cst-mono, .cst-flags .cst-mono { font-size: 10.5px; }
.cst-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; margin-top: 2px; font-size: 11px; line-height: 16px;
  color: rgb(var(--tx-slate-500)); }
.cst-flags i { font-style: normal; color: #CBD5E1; }
.cst-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; }
.cst-count { flex-shrink: 0; align-self: center; min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  text-align: center; color: rgb(var(--tx-gray-500)); background: #F3F4F6; }
.cst-node.is-selected .cst-count { color: rgb(var(--sky-700)); background: rgb(var(--sky-100)); }

/* node tiles: Master Client ribbon, Client = state of its GSTIN, Site = status dot */
.cst-tile { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1; }
.cst-tile-mc { color: #fff; font-size: 15px; background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600)));
  box-shadow: 0 2px 6px rgb(var(--sky-600) / 0.25); }
.cst-tile-gst { color: rgb(var(--sky-700)); background: rgb(var(--sky-50)); border: 1px solid rgb(var(--sky-200)); }
.cst-tile-gst b { font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.cst-tile-gst i { margin-top: 2px; font-style: normal; font-size: 8.5px; font-weight: 700; opacity: 0.75; }
.cst-tile-gst > ion-icon { font-size: 14px; }
.cst-tile-sm { width: 26px; height: 26px; border-radius: 8px; }
.cst-tile-sm b { font-size: 10px; }
.cst-tile-sm i { font-size: 8px; margin-top: 1px; }
.cst-dot { flex-shrink: 0; width: 9px; height: 9px; margin: 5px 3px 0 2px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #E2E8F0; }
.cst-dot-A { background: #10B981; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #A7F3D0; }
.cst-dot-P { background: #F59E0B; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #FDE68A; }
.cst-dot-I { background: #CBD5E1; }
.cst-dot-R { background: #F43F5E; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #FECDD3; }
.cst-node.is-selected .cst-dot { box-shadow: 0 0 0 3px rgb(var(--sky-50)), 0 0 0 4px rgb(var(--sky-200)); }

/* small tags (the app's [10px] bold chip family) */
.cst-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 5px; font-size: 9.5px;
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 15px; border: 1px solid; white-space: nowrap; }
.cst-tag-new { color: #047857; background: #ECFDF5; border-color: #A7F3D0; }
.cst-tag-warn { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.cst-tag-pend { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.cst-tag-gl { color: #6D28D9; background: #F5F3FF; border-color: #DDD6FE; }
.cst-tag-off { color: #475569; background: #F1F5F9; border-color: #E2E8F0; }
.cst-tag-rej { color: #BE123C; background: #FFF1F2; border-color: #FECDD3; }
.cst-more { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 5px 10px; border-radius: 9px; font-size: 11px; font-weight: 700;
  color: rgb(var(--sky-600)); background: rgb(var(--sky-50)); border: 1px dashed rgb(var(--sky-300)); cursor: pointer; }
.cst-empty-leaf { display: flex; align-items: center; gap: 6px; margin: 4px 0; padding: 6px 10px; border-radius: 9px; font-size: 11.5px;
  color: rgb(var(--tx-gray-500)); background: #F8FAFC; border: 1px dashed #CBD5E1; }
.cst-empty-leaf[hidden] { display: none; }
mark.cst-hl { background: #FEF3C7; color: inherit; border-radius: 3px; padding: 0 1px; }

/* right: the detail of the selected node */
.csd-col { min-width: 0; scroll-margin-top: 140px; }
.csd-col[aria-busy="true"] > .csd-card { opacity: 0.7; transition: opacity 0.15s ease; }
.csd-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02); overflow: clip; }
.csd-back { display: none; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid #E2E8F0;
  background: #fff; font-size: 13px; font-weight: 700; color: rgb(var(--sky-700)); text-decoration: none; }
.csd-head { position: relative; padding: 16px 20px; border-bottom: 1px solid #F1F5F9; background: linear-gradient(180deg, #FCFDFE 0%, #FFF 100%); }
.csd-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11.5px; color: rgb(var(--tx-slate-500)); margin-bottom: 10px; }
.csd-crumb a { color: rgb(var(--tx-slate-500)); text-decoration: none; font-weight: 600; }
.csd-crumb a:hover { color: rgb(var(--sky-700)); text-decoration: underline; }
.csd-crumb ion-icon { font-size: 11px; color: #CBD5E1; }
.csd-crumb .is-here { color: #334155; font-weight: 700; }
.csd-title-row { display: flex; align-items: flex-start; gap: 12px; }
.csd-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 20px; color: rgb(var(--sky-600)); background: rgb(var(--sky-50)); border: 1px solid rgb(var(--sky-100)); line-height: 1; }
.csd-icon b { font-size: 14px; font-weight: 800; color: rgb(var(--sky-700)); }
.csd-icon i { font-style: normal; font-size: 10px; font-weight: 700; color: rgb(var(--sky-700)); opacity: .75; margin-top: 2px; }
.csd-icon-mc { color: #fff; border: 0; background: linear-gradient(135deg, rgb(var(--sky-500)), rgb(var(--sky-600))); }
.csd-title { margin: 0; font-size: 19px; font-weight: 700; color: #0F172A; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.csd-title:focus { outline: none; }
.csd-title:focus-visible { outline: 2px solid rgb(var(--sky-500)); outline-offset: 2px; border-radius: 4px; }
.csd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.csd-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 18px;
  border: 1px solid; white-space: nowrap; }
.csd-pill-code { color: #475569; background: #F8FAFC; border-color: #E2E8F0; }
.csd-pill-ok { color: #047857; background: #ECFDF5; border-color: #D1FAE5; }
.csd-pill-warn { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.csd-pill-off { color: #475569; background: #F1F5F9; border-color: #E2E8F0; }
.csd-pill-gl { color: #6D28D9; background: #F5F3FF; border-color: #DDD6FE; }
.csd-pill-sky { color: rgb(var(--sky-700)); background: rgb(var(--sky-50)); border-color: rgb(var(--sky-200)); }
.csd-pill-rej { color: #BE123C; background: #FFF1F2; border-color: #FECDD3; }
.csd-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.csd-iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #CBD5E1;
  background: #fff; color: #475569; font-size: 15px; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.csd-iconbtn:hover { border-color: rgb(var(--sky-300)); color: rgb(var(--sky-700)); background: rgb(var(--sky-50)); }
.csd-iconbtn[disabled] { opacity: .4; cursor: default; box-shadow: none; }
.csd-copy { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: rgb(var(--tx-slate-500)); font-size: 13px; cursor: pointer; vertical-align: middle; }
.csd-copy:hover { border-color: #E2E8F0; background: #F8FAFC; color: rgb(var(--sky-700)); }
.csd-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: rgb(var(--tx-slate-500)); }
.csd-summary > span { display: inline-flex; align-items: center; gap: 5px; }
.csd-summary b { color: #1E293B; font-weight: 600; }
.csd-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.csd-jump a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: #475569; background: #fff; border: 1px solid #E2E8F0; text-decoration: none; }
.csd-jump a:hover { border-color: rgb(var(--sky-300)); color: rgb(var(--sky-700)); background: rgb(var(--sky-50)); }
.csd-jump a b { padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; color: rgb(var(--sky-700)); background: rgb(var(--sky-100)); }

.csd-sec { padding: 18px 20px 20px; scroll-margin-top: calc(var(--cst-stick, 96px) + 8px); }
.csd-sec + .csd-sec { border-top: 1px solid #F1F5F9; }
.csd-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.csd-sec-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: rgb(var(--sky-600)); background: rgb(var(--sky-50)); }
.csd-sec-title { font-size: 14.5px; font-weight: 700; color: #0F172A; display: flex; align-items: center; gap: 6px; }
.csd-sec-note { font-size: 11.5px; color: rgb(var(--tx-slate-500)); }
.csd-sec-head .csd-sec-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.csd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.csd-f { min-width: 0; }
.csd-f .s-field-label { display: block; margin-bottom: 6px; letter-spacing: 0.08em; font-size: 10.5px; }
.csd-f .s-field-value { font-size: 14px; gap: 8px; }
.csd-f .s-field-value > span { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.csd-f .s-field-value ion-icon { font-size: 15px; margin-top: 2px; }
.csd-f.is-empty .s-field-value > span { color: rgb(var(--tx-gray-400)); font-weight: 400; }
.csd-f .csd-hint { margin-top: 5px; font-size: 11px; line-height: 1.4; color: rgb(var(--tx-gray-500)); }
.csd-span-2 { grid-column: span 2; }
.csd-span-all { grid-column: 1 / -1; }
.csd-text { font-size: 13.5px; line-height: 1.55; color: #1E293B; white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.csd-a { color: rgb(var(--sky-700)); font-weight: 600; text-decoration: none; }
.csd-a:hover { text-decoration: underline; }
.csd-note { display: flex; align-items: flex-start; gap: 8px; padding: 12px 20px; border-top: 1px solid #F1F5F9; background: #FCFCFD;
  font-size: 11.5px; color: rgb(var(--tx-slate-500)); }
.csd-note ion-icon { font-size: 14px; margin-top: 1px; color: rgb(var(--sky-600)); }
.csd-notice { display: flex; align-items: flex-start; gap: 8px; margin: 14px 20px 0; padding: 9px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45;
  color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; }
.csd-notice ion-icon { font-size: 15px; margin-top: 1px; color: #F59E0B; flex-shrink: 0; }
.csd-notice-off { color: #334155; background: #F8FAFC; border-color: #E2E8F0; }
.csd-notice-off ion-icon { color: rgb(var(--tx-slate-500)); }
.csd-notice-rej { color: #9F1239; background: #FFF1F2; border-color: #FECDD3; }
.csd-notice-rej ion-icon { color: #E11D48; }

/* sortable tables: the root's Clients and Client Sites, a Client's Client Sites (a row click selects that node) */
.csd-tbl-wrap { border: 1px solid #EEF2F6; border-radius: 12px; overflow: clip; }
.csd-tbl { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }   /* column widths on the <th> */
.csd-tbl th { padding: 8px 12px; text-align: left; background: #F8FAFC; border-bottom: 1px solid #EEF2F6; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--tx-slate-500)); white-space: nowrap; }
.csd-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; cursor: pointer; }
.csd-sort ion-icon { font-size: 12px; opacity: .4; }
.csd-sort:hover { color: rgb(var(--sky-700)); }
.csd-sort.is-on { color: rgb(var(--sky-700)); }
.csd-sort.is-on ion-icon { opacity: 1; }
.csd-tbl td { padding: 10px 12px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; color: #334155; overflow-wrap: anywhere; }
.csd-tbl tbody tr:last-child td { border-bottom: 0; }
.csd-tbl tbody tr { cursor: pointer; }
.csd-tbl tbody tr[hidden] { display: none; }
.csd-tbl tbody tr[data-cs-more-row] { cursor: default; }
.csd-tbl tbody tr td { transition: background 0.15s ease; }
.csd-tbl tbody tr:hover td { background: rgb(var(--sky-50)); }
.csd-tbl tbody tr.is-dim td { color: rgb(var(--tx-slate-500)); }
.csd-tbl tbody tr.is-dim .csd-tn-name { color: rgb(var(--tx-slate-500)); }
.csd-tbl .csd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.csd-tbl th.csd-num .csd-sort { flex-direction: row-reverse; }
.csd-tbl .csd-chev { width: 30px; padding-left: 0; text-align: right; color: rgb(var(--tx-gray-400)); font-size: 14px; }
.csd-tn { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.csd-tn > .cst-dot { margin: 5px 1px 0 2px; }
.csd-tn-name { font-size: 13px; font-weight: 600; color: #1E293B; text-decoration: none; }
.csd-tn-name:hover { color: rgb(var(--sky-700)); text-decoration: underline; }
.csd-tn-sub { font-size: 11px; color: rgb(var(--tx-slate-500)); margin-top: 1px; }
.csd-tn-m { display: none; }
.csd-tbl small { display: block; font-size: 11px; color: rgb(var(--tx-slate-500)); margin-top: 1px; }
.csd-cl { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.csd-cl > .cst-mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.cst-none { padding: 24px 12px; text-align: center; }
.cst-none[hidden] { display: none; }

/* request context of a node that is in a pending Client Setup request */
.csd-req { margin: 14px 20px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid #FDE68A; background: #FFFBEB; }
.csd-req-top { display: flex; align-items: flex-start; gap: 10px; }
.csd-req-top > ion-icon { font-size: 18px; color: #F59E0B; margin-top: 1px; flex-shrink: 0; }
.csd-req-title { font-size: 13px; font-weight: 700; color: #92400E; }
.csd-req-text { font-size: 12px; color: #B45309; margin-top: 2px; line-height: 1.45; }
.csd-req-text b { color: #92400E; font-weight: 600; }
.csd-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0 28px; }
.csd-step { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: #475569; background: #fff; border: 1px solid #E2E8F0; }
.csd-step i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal;
  font-size: 10px; font-weight: 800; color: #475569; background: #F1F5F9; }
.csd-step.is-now { color: #92400E; border-color: #FCD34D; background: #FEF3C7; }
.csd-step.is-now i { color: #fff; background: #F59E0B; }
.csd-step.is-gl i { color: #6D28D9; background: #EDE9FE; }
.csd-step-sep { color: #D6D3D1; font-size: 12px; }
.csd-req-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 28px; }

/* read-only accounting structure: the edit window's editor without its add / remove / copy tools; ONE scrollbar (the
   pane's): no inner max-height, the header (count, tools, search) + the summary stick under the pane header */
.hpath-editor.sstr.sstr-ro { overflow: clip; }
.hpath-editor.sstr.sstr-ro .sstr-tree { max-height: none; overflow: visible; }
.sstr-ro .sstr-stick { position: sticky; top: var(--cst-head, 0px); z-index: 5; background: #fff; border-radius: 14px 14px 0 0; }
.sstr-ro-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; color: rgb(var(--tx-slate-500)); }
.sstr-ro .hpath-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* chip text in ONE span: a <mark> adds no gap */
.sstr-row mark { background: #FEF3C7; color: inherit; border-radius: 3px; padding: 0 1px; }
.hpath-tool.is-on { color: rgb(var(--sky-700)); background: rgb(var(--sky-50)); border-color: rgb(var(--sky-300)); }
.hpath-tool.cst-wide-btn { display: none; }                                  /* "Full width": the Clients & Sites tab only */
.cst-split .hpath-tool.cst-wide-btn { display: inline-flex; }
.sstr-removed { padding: 0 5px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #BE123C; background: #FFF1F2; border: 1px solid #FECDD3; }
.sstr-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; padding: 7px 10px; border-radius: 9px; font-size: 11.5px;
  color: rgb(var(--tx-slate-500)); background: #F8FAFC; border: 1px dashed #E2E8F0; }

/* responsiveness — two containers:
   cstab = the tab body (tree | detail split). 100 % UI zoom: ~1,200 CSS px on every desktop (UI scale lays out at 1920);
           user zoom 125 % on 1440: ~790; phones (layout 650) and 150 %: ~600.
   csd   = the detail column (field grid and table columns follow the space the detail really has). */
.csd-col { container: csd / inline-size; }
@container cstab (max-width: 1100px) {
  .cst-split { grid-template-columns: 300px minmax(0, 1fr); }
}
@container cstab (max-width: 700px) {                  /* phones, user zoom 150 %: one panel at a time */
  .cst-split, .cst-split.is-wide { grid-template-columns: minmax(0, 1fr); }
  .cst-split[data-view="tree"] > .csd-col { display: none; }
  .cst-split[data-view="detail"] > .cst-tree-col { display: none; }
  .cst-split.is-wide[data-view="tree"] > .cst-tree-col { display: flex; }
  .cst-tree-col { position: static; max-height: none; min-height: 0; }
  .csd-back { display: inline-flex; }
  .cst-foot > .cst-keys, .cst-split .hpath-tool.cst-wide-btn { display: none; }
}
@container csd (max-width: 720px) {
  .csd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container csd (max-width: 600px) {                    /* header tools on their own row; tables: name + status, the rest in a sub-line */
  .csd-title-row { flex-wrap: wrap; }
  .csd-tools { order: 3; flex-basis: 100%; margin-left: 56px; }
  .csd-tbl { table-layout: auto; }
  .csd-tbl .csd-opt, .csd-tbl .csd-opt2 { display: none; }
  .csd-tn-m { display: block; margin-top: 2px; font-size: 11px; color: rgb(var(--tx-slate-500)); }
}
@container csd (max-width: 440px) {
  .csd-grid { grid-template-columns: minmax(0, 1fr); }
  .csd-span-2 { grid-column: auto; }
  .csd-tools .csd-edit-label { display: none; }
}
/* ── Clients page · Clients & Sites tab (H0311) ── END ───────────────────────────────────────────────────────────── */

/* ── R0411: invoice line items as stacked cards on phones (.pa-line-stack on the <table>) ─────────────────────────────
   Below 640 px the line table of Create / Edit Invoice (buyer pages/invoice/create.html, hub
   pages/portal/invoice_form.html) stacks: the product on its own row (td[data-stack="full"]), then two columns of
   labelled cells (td[data-stack-label]); the tax code cell (td[data-stack="tax"]) always starts a row so the Line Total
   sits beside it (the effect of the pick next to the pick); the totals rows read label · amount. From 640 px it is the
   plain table. Layout only — the DOM, ids and classes the scripts read are unchanged. */
@media (max-width: 639.98px) {
  .pa-line-stack, .pa-line-stack > tbody, .pa-line-stack > tfoot { display: block; width: 100%; }
  .pa-line-stack > thead { display: none; }
  .pa-line-stack > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 10px 12px; }
  .pa-line-stack > tbody > tr > td:not([hidden]) { display: block; min-width: 0; padding: 0; text-align: left; }
  .pa-line-stack > tbody > tr > td[data-stack="full"] { grid-column: 1 / -1; }
  .pa-line-stack > tbody > tr > td[data-stack="tax"] { grid-column: 1; }
  .pa-line-stack > tbody > tr > td.inv-line-total { text-align: right; align-self: start; }
  .pa-line-stack > tbody > tr > td[colspan] { text-align: center; }
  .pa-line-stack > tbody > tr > td[data-stack-label]::before {
    content: attr(data-stack-label); display: block; margin-bottom: 3px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 9px; font-weight: 700; line-height: 1.2;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: rgb(var(--tx-gray-500));
  }
  .pa-line-stack > tfoot > tr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pa-line-stack > tfoot > tr > td { display: block; }
  .pa-line-stack > tfoot > tr > td:first-child { text-align: left; }
}
/* ── R0411 invoice line stack ── END ────────────────────────────────────────────────────────────────────────────── */

/* ── V0711 (contract §29.1): Additional Fields grid — 4 columns; a field takes data-cols of them ─────────────────────
   question_rules.columns_of (stored ColumnSpan 1-4; NULL = automatic: 4 for a MULTI select / long-answer text, else 2;
   read-only views view_columns). Fields flow in Sequence order; a field that does not fit the rest of a row starts the
   next row and leaves the gap (grid-auto-flow: row, never dense: DOM order = visual order = Tab order). A field hidden
   by a condition, filter or search is display:none (x-show) and leaves the flow. The grid follows its CONTAINER
   (wizard beside the navigator, hub admin / buyer panes, a repeated-set card, the designer's preview frame): 4 columns
   from 800px, 2 from 420px (a field takes ceil(cols / 2)), 1 below. Without container-query support: 1 column.
   Renderers: vendor_portal/templates/partials/_question_field.html (== the buyer's twin), buyer
   pages/vendor/_questionnaire_view.html. */
.pa-qgrid-wrap { container-type: inline-size; container-name: paq; min-width: 0; }
.pa-qgrid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; column-gap: 1rem; row-gap: .75rem; }
.pa-qgrid > .pa-qcell { min-width: 0; grid-column: 1 / -1; }
.pa-qgrid.hidden, .pa-qcell.hidden { display: none; }        /* tests/ui_attr/test_hidden_vs_component_display.py */
.pa-qgrid.is-tight { column-gap: .75rem; row-gap: .5rem; }   /* a repeated-set card / a read-only view */
@container paq (min-width: 420px) {
  .pa-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-qgrid > .pa-qcell[data-cols="1"], .pa-qgrid > .pa-qcell[data-cols="2"] { grid-column: span 1; }
}
@container paq (min-width: 800px) {
  .pa-qgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pa-qgrid > .pa-qcell[data-cols="1"] { grid-column: span 1; }
  .pa-qgrid > .pa-qcell[data-cols="2"] { grid-column: span 2; }
  .pa-qgrid > .pa-qcell[data-cols="3"] { grid-column: span 3; }
}
/* Phones (the VIEWPORT, not the container): every field takes the full width, as the designer's caption promises —
   the shells may zoom <html> out on a phone (partials/_ui_scale.html), which widens the container in CSS px. */
@media (max-width: 639.98px) {
  .pa-qgrid { grid-template-columns: minmax(0, 1fr); }
  .pa-qgrid > .pa-qcell[data-cols] { grid-column: 1 / -1; }
}

/* V0711 designer (buyer Settings → Additional Fields, hub admin question form): "Width in the vendor form" — four
   buttons, each with a mini 4-cell bar (pages/master/_df_form.html, vendor_portal pages/admin/_question_form.html). */
.pa-colpick { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid #E5E7EB; background: #F9FAFB; }
.pa-colpick-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 46px; padding: 5px 8px;
  border-radius: 7px; border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 700; line-height: 1; color: rgb(var(--tx-gray-500)); transition: all .15s ease;
}
.pa-colpick-btn:hover { background: #FFFFFF; color: #0369A1; }
.pa-colpick-btn:focus-visible { outline: 2px solid #38BDF8; outline-offset: 1px; }
.pa-colpick-btn[aria-pressed="true"] { background: #FFFFFF; color: #0369A1; border-color: #BAE6FD; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.pa-colbar { display: grid; grid-template-columns: repeat(4, 7px); gap: 2px; }
.pa-colbar > i { display: block; height: 5px; border-radius: 1px; background: #E5E7EB; }
.pa-colbar > i.on { background: #0EA5E9; }
.pa-colpick-btn[aria-pressed="true"] .pa-colbar > i.on { background: #0284C7; }

/* V0711 Layout view (D3): each group as a 4-column board of compact tiles in Sequence order (never collapses; a
   horizontal scroller below 800px). One-click widths on hover / focus (settings.html, static/df_form.js dfLayout). */
.pa-dfl-scroll { overflow-x: auto; padding-bottom: 2px; }
.pa-dfl-board { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); grid-auto-flow: row; gap: 8px; min-width: 640px; }
.pa-dfl-board.hidden { display: none; }
.pa-dfl-tile { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 10px; border: 1px solid #E5E7EB; background: #FFFFFF; transition: border-color .15s ease, box-shadow .15s ease; }
.pa-dfl-tile[data-cols="1"] { grid-column: span 1; }
.pa-dfl-tile[data-cols="2"] { grid-column: span 2; }
.pa-dfl-tile[data-cols="3"] { grid-column: span 3; }
.pa-dfl-tile[data-cols="4"] { grid-column: span 4; }
.pa-dfl-tile:hover, .pa-dfl-tile:focus-within { border-color: #7DD3FC; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.pa-dfl-tile.is-auto { border-style: dashed; }
.pa-dfl-tile.is-dep { border-left: 3px solid #BAE6FD; }
.pa-dfl-tile.is-saving { opacity: .7; }
.pa-dfl-head { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.pa-dfl-head ion-icon { flex-shrink: 0; margin-top: 1px; font-size: 14px; color: #0EA5E9; }
.pa-dfl-label { min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: #1F2937; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.pa-dfl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 10px; color: rgb(var(--tx-gray-500)); }
.pa-dfl-auto { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; border-radius: 4px; background: #F3F4F6; color: rgb(var(--tx-gray-500)); border: 1px solid #E5E7EB; }
.pa-dfl-widths { display: flex; align-items: center; gap: 3px; opacity: 0; transition: opacity .12s ease; }
.pa-dfl-tile:hover .pa-dfl-widths, .pa-dfl-tile:focus-within .pa-dfl-widths { opacity: 1; }
@media (hover: none) { .pa-dfl-widths { opacity: 1; } }
.pa-dfl-wbtn { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; border: 1px solid #E5E7EB; background: #F9FAFB; cursor: pointer; font-size: 11px; font-weight: 700; color: rgb(var(--tx-gray-500)); }
.pa-dfl-wbtn:hover { border-color: #7DD3FC; color: #0369A1; background: #FFFFFF; }
.pa-dfl-wbtn:focus-visible { outline: 2px solid #38BDF8; outline-offset: 1px; }
.pa-dfl-wbtn[aria-pressed="true"] { background: #0EA5E9; border-color: #0EA5E9; color: #FFFFFF; }

/* V0711 preview (contract §29.2): the designer's "Vendor form preview" modal (pages/master/_df_preview.html). The frame
   width sets the field grid exactly through the .pa-qgrid-wrap container queries: Desktop 960 / Tablet 640 / Phone 380. */
.pa-dfp-modal { max-width: min(1100px, 96vw); width: 100%; max-height: 92vh; display: flex; flex-direction: column; }
.pa-dfp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #F8FAFC; }
.pa-dfp-frame { margin: 0 auto; width: 100%; transition: max-width .2s ease; }
.pa-dfp-frame[data-frame="desktop"] { max-width: 960px; }
.pa-dfp-frame[data-frame="tablet"] { max-width: 640px; }
.pa-dfp-frame[data-frame="phone"] { max-width: 380px; }
.pa-dfp-seg { display: inline-flex; padding: 2px; border-radius: 8px; border: 1px solid #E5E7EB; background: #F9FAFB; }
.pa-dfp-seg > button { padding: 4px 10px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: rgb(var(--tx-gray-500)); display: inline-flex; align-items: center; gap: 4px; }
.pa-dfp-seg > button[aria-pressed="true"] { background: #FFFFFF; color: #0369A1; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
/* ── V0711 Additional Fields grid ── END ────────────────────────────────────────────────────────────────────────── */

/* ── N0711 PO PRINT LINES ── BEGIN (items 5 / 6, contract §30.5; macros/po_print_lines.html in both apps) ──────────
   The short columns shrink to their content (.pa-pol-fit: width 1% + nowrap); Item & Description takes every
   remaining pixel and wraps anywhere, so a large amount never clips and a long description never squeezes. Totals are
   a block after the table (a <tfoot> would repeat on every printed page). Grey text only through the --tx-* tokens. ── */
.pa-pol { width: 100%; border-collapse: collapse; font-size: 11px; line-height: 1.35; color: #1e293b; }
.pa-pol th { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgb(var(--tx-slate-500)); text-align: left; vertical-align: bottom; padding: 4px 5px 5px;
  border-bottom: 1.5px solid #cbd5e1; }
.pa-pol td { padding: 5px 5px; vertical-align: top; border-bottom: 1px solid #e9eef5; }
.pa-pol .pa-pol-n { width: 1%; white-space: nowrap; text-align: right; color: rgb(var(--tx-slate-500)); padding-left: 0; }
.pa-pol .pa-pol-item { overflow-wrap: anywhere; }
.pa-pol .pa-pol-fit { width: 1%; white-space: nowrap; }
.pa-pol .pa-pol-wrap { white-space: normal; }
.pa-pol .pa-pol-r { text-align: right; }
.pa-pol .pa-pol-num { font-variant-numeric: tabular-nums; padding-left: 10px; }
.pa-pol td.pa-pol-amt { font-weight: 600; color: #0f172a; padding-right: 0; }
.pa-pol th:last-child { padding-right: 0; }
.pa-pol .pa-pol-hsn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: #334155; }
.pa-pol .pa-pol-name { font-weight: 600; color: #0f172a; }
.pa-pol .pa-pol-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; color: rgb(var(--tx-slate-500)); }
.pa-pol .pa-pol-desc { font-size: 10px; color: #475569; white-space: pre-wrap; margin-top: 1px; }
.pa-pol .pa-pol-sub { font-size: 8.5px; font-weight: 400; color: rgb(var(--tx-slate-500)); }
.pa-pol thead { display: table-header-group; }
.pa-pol tr { break-inside: avoid; }
.pa-pol tr[data-pol-long] { break-inside: auto; }
.pa-pol-totals { margin: 6px 0 0 auto; border-collapse: collapse; font-size: 11px; break-inside: avoid; }
.pa-pol-totals th { text-align: right; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgb(var(--tx-slate-500)); padding: 3px 12px 3px 0; }
.pa-pol-totals td { text-align: right; white-space: nowrap; font-weight: 700; color: #0f172a; padding: 3px 0;
  font-variant-numeric: tabular-nums; }
.pa-pol-totals td.pa-pol-tax { color: #b45309; }
.pa-pol-totals .pa-pol-sub { font-size: 8.5px; font-weight: 400; color: rgb(var(--tx-slate-500)); }
.pa-pol-totals tr.pa-pol-grand th, .pa-pol-totals tr.pa-pol-grand td { color: #0369a1; border-top: 1.5px solid #cbd5e1; padding-top: 5px; }
.pa-pol-totals tr.pa-pol-grand td { font-size: 12.5px; }
.pa-pol-totals tr.pa-pol-grand th { font-size: 9.5px; }
.pa-pol-caption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
/* the two print documents (buyer pages/po/print_doc.html + pages/invoice/po_print_doc.html, hub
   pages/portal/po_print.html: <body class="pa-po-doc">): the page margin is the margin on paper */
@media print {
  .pa-po-doc .po-print-card .po-print-section { padding: 8px 0; }
}
/* ── N0711 PO PRINT LINES ── END ─────────────────────────────────────────────────────────────────────────────────── */