/**
 * posh.css — Vakio POSH Module Design Extension
 * Extends design-system.css with POSH-specific tokens and components.
 * All variables here layer on top of existing Vakio design system.
 *
 * Brand palette (from Image 1 / approved mockup):
 *   --posh-bg-base:   #1B1840  deep navy-indigo
 *   --posh-cream:     #EDE8DB  primary text
 *   --posh-gold:      #C49A3C  emphasis / accent
 */

/* ── POSH Colour Tokens ───────────────────────────────────────────────── */
:root {
  --posh-bg-base:        #1B1840;
  --posh-bg-deep:        #15122E;
  --posh-bg-panel:       #201D4A;
  --posh-bg-surface:     #252258;
  --posh-bg-elevated:    #2A275E;
  --posh-bg-input:       #191637;

  --posh-cream:          #EDE8DB;
  --posh-cream-dim:      #B5AFA0;
  --posh-cream-ghost:    #6A6560;

  --posh-gold:           #C49A3C;
  --posh-gold-light:     #D9B05A;
  --posh-gold-dim:       #8A6B28;
  --posh-gold-bg:        rgba(196,154,60,0.10);
  --posh-gold-bg-soft:   rgba(196,154,60,0.05);

  --posh-teal:           #2DD4BF;
  --posh-red:            rgba(224,112,112,0.85);
  --posh-red-bg:         rgba(224,112,112,0.06);
  --posh-red-border:     rgba(224,112,112,0.18);

  --posh-border:         rgba(196,154,60,0.18);
  --posh-border-soft:    rgba(237,232,219,0.07);

  --posh-r:              10px;
  --posh-r-sm:           7px;
  --posh-r-lg:           16px;

  /* Admin Portal parity: DM Sans for all POSH headings.
     Playfair is kept only for the global `.topnav-brand` / `.sidebar-brand`
     wordmark in the shared shell. */
  --posh-serif:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --posh-devanagari:     'Noto Serif Devanagari', serif;
  --posh-sans:           'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Status colours */
  --status-draft:        rgba(196,154,60,0.8);
  --status-filed:        #60A5FA;
  --status-active:       #34D399;
  --status-investigation:#F59E0B;
  --status-resolved:     #9CA3AF;
  --status-escalated:    #F87171;
}

/* ── POSH Shell ───────────────────────────────────────────────────────── */
.posh-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--posh-bg-deep);
  color: var(--posh-cream);
  font-family: var(--posh-sans);
  position: relative;
  overflow-x: hidden;
}

/* Decorative background elements */
.posh-shell::before {
  content: '';
  position: fixed; top: -90px; right: -90px;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid var(--posh-gold);
  opacity: 0.08; pointer-events: none; z-index: 0;
  box-shadow: 0 0 0 60px rgba(196,154,60,0.03),
              0 0 0 120px rgba(196,154,60,0.02),
              0 0 0 180px rgba(196,154,60,0.015);
}

.posh-shell::after {
  content: '';
  position: fixed; top: 0; left: 32px;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent 4%, var(--posh-gold) 18%,
              var(--posh-gold) 82%, transparent 96%);
  opacity: 0.25; pointer-events: none; z-index: 0;
}

/* ── POSH Top Navigation ──────────────────────────────────────────────── */
.posh-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px 0 52px; height: 64px;
  background: var(--posh-bg-deep);
  border-bottom: 1px solid var(--posh-border);
  flex-shrink: 0; position: relative; z-index: 10;
}

.posh-nav-brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.posh-nav-brand-name {
  font-family: var(--posh-serif); font-size: 26px; font-weight: 700;
  color: var(--posh-cream); letter-spacing: 0.01em; line-height: 1;
  overflow-wrap: break-word;
}
.posh-nav-brand-hindi {
  font-family: var(--posh-devanagari); font-size: 10px; font-weight: 500;
  color: var(--posh-gold); letter-spacing: 0.04em; opacity: 0.9;
}

.posh-nav-divider { width: 1px; height: 30px; background: var(--posh-border); }

.posh-nav-module {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 14px;
  background: var(--posh-gold-bg-soft);
  border: 1px solid var(--posh-border);
  border-radius: 100px;
  font-size: 10.5px; font-weight: 500;
  color: var(--posh-gold); letter-spacing: 0.07em; text-transform: uppercase;
}

.posh-nav-center { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; overflow-wrap: break-word; }
.posh-nav-right  { display: flex; align-items: center; gap: 10px; }

/* Role badge */
.role-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.role-badge.employee { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); color: #34D399; }
.role-badge.icc      { background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.2); color: #60A5FA; }
.role-badge.chro     { background: var(--posh-gold-bg); border: 1px solid var(--posh-border); color: var(--posh-gold); }
.role-badge.admin    { background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.2); color: #A78BFA; }

.role-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Demo/Live badge */
.mode-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.mode-badge.live {
  background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); color: #34D399;
}
.mode-badge.demo {
  background: var(--posh-gold-bg-soft); border: 1px solid var(--posh-border); color: var(--posh-gold-light);
}
/* POSH-WIDGET-1: muted chip for empty-state ("Awaiting data") — neutral grey, no pulsing dot */
.mode-badge.muted {
  background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.22); color: #94A3B8;
}
.mode-badge.muted .mode-badge-dot { animation: none; opacity: 0.7; }
.mode-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: modePulse 2s ease-in-out infinite; }
@keyframes modePulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ── Chip ─────────────────────────────────────────────────────────────── */
.posh-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 6px;
  font-size: 10.5px; font-weight: 500;
}
.posh-chip-anon { background: rgba(45,212,191,.07); border: 1px solid rgba(45,212,191,.2); color: var(--posh-teal); }
.posh-chip-ref  { background: var(--posh-bg-elevated); border: 1px solid var(--posh-border-soft);
  color: var(--posh-cream-dim); font-size: 10px; letter-spacing: .1em; }

/* ── Workflow Snake ───────────────────────────────────────────────────── */
.workflow-snake-wrap {
  padding: 32px 40px;
  background: var(--posh-bg-base);
  position: relative; z-index: 1;
}

.workflow-snake-title {
  font-family: var(--posh-serif); font-size: 22px; font-weight: 700;
  color: var(--posh-cream); margin-bottom: 6px;
}
.workflow-snake-sub { font-size: 12px; color: var(--posh-cream-dim); margin-bottom: 28px; }

.snake-row {
  display: flex; align-items: center;
  gap: 0; position: relative;
}
.snake-row + .snake-row { margin-top: 16px; }
.snake-row.reverse { flex-direction: row-reverse; }

.snake-node {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; cursor: pointer;
  transition: transform 0.2s;
}
.snake-node:hover { transform: translateY(-2px); }

.snake-node-circle {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--posh-serif); font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--posh-border);
  background: var(--posh-bg-surface);
  color: var(--posh-cream-dim);
  transition: all 0.2s; position: relative;
}
.snake-node.active .snake-node-circle {
  background: var(--posh-gold); border-color: var(--posh-gold);
  color: var(--posh-bg-deep);
  box-shadow: 0 0 16px rgba(196,154,60,0.4);
}
.snake-node.done .snake-node-circle {
  background: transparent; border-color: var(--posh-gold-dim);
  color: var(--posh-gold-dim);
}
.snake-node.phase-2 .snake-node-circle { border-color: rgba(96,165,250,0.3); color: #60A5FA; }
.snake-node.phase-3 .snake-node-circle { border-color: rgba(167,139,250,0.3); color: #A78BFA; }

.snake-node-label {
  font-size: 10px; font-weight: 500; color: var(--posh-cream-dim);
  margin-top: 6px; max-width: 80px; line-height: 1.35; letter-spacing: 0.02em;
}
.snake-node.active .snake-node-label { color: var(--posh-gold); font-weight: 600; }

.snake-connector {
  flex: 1; height: 1px; background: var(--posh-border-soft);
  margin: 0 4px; margin-bottom: 22px; /* optical align to circle center */
  position: relative;
}
.snake-connector.done { background: var(--posh-gold-dim); opacity: 0.5; }

/* Corner turn connector */
.snake-turn {
  width: 40px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 22px;
}

/* Phase label */
.phase-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 10px;
}
.phase-label.p1 { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.15); color: #34D399; }
.phase-label.p2 { background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.15); color: #60A5FA; }
.phase-label.p3 { background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.15); color: #A78BFA; }

/* ── Case Card ────────────────────────────────────────────────────────── */
.case-card {
  background: var(--posh-bg-panel);
  border: 1px solid var(--posh-border-soft);
  border-radius: var(--posh-r);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative; overflow: hidden;
}
.case-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--status-color, var(--posh-gold));
}
.case-card:hover { border-color: var(--posh-border); transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3); }

.case-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.case-card-ref { font-family: monospace; font-size: 10px; color: var(--posh-cream-ghost);
  letter-spacing: 0.1em; margin-bottom: 4px; }
.case-card-title { font-size: 13px; font-weight: 500; color: var(--posh-cream); line-height: 1.4; }
.case-card-meta { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.case-card-meta-item { font-size: 11px; color: var(--posh-cream-ghost); display: flex; gap: 4px; }
.case-card-meta-item span { color: var(--posh-cream-dim); }

.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 100px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  flex-shrink: 0;
}
.status-pill.filed       { background: rgba(96,165,250,0.1);  border:1px solid rgba(96,165,250,0.2);  color:#60A5FA; }
.status-pill.active      { background: rgba(245,158,11,0.1);  border:1px solid rgba(245,158,11,0.2);  color:#F59E0B; }
.status-pill.investigation{background: rgba(251,146,60,0.1);  border:1px solid rgba(251,146,60,0.2);  color:#FB923C; }
.status-pill.resolved    { background: rgba(156,163,175,0.1); border:1px solid rgba(156,163,175,0.2); color:#9CA3AF; }
.status-pill.escalated   { background: rgba(248,113,113,0.1); border:1px solid rgba(248,113,113,0.2); color:#F87171; }
.status-pill-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }

/* ── Case Timeline ────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 24px; }
.timeline::before {
  content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 1px; background: var(--posh-border-soft);
}

.timeline-event { display: flex; gap: 16px; position: relative; padding-bottom: 20px; }
.timeline-event:last-child { padding-bottom: 0; }

.timeline-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--posh-border); background: var(--posh-bg-surface);
  flex-shrink: 0; margin-left: -24px; margin-top: 2px; position: relative; z-index: 1;
}
.timeline-dot.gold  { border-color: var(--posh-gold); background: var(--posh-gold); }
.timeline-dot.blue  { border-color: #60A5FA; background: #60A5FA; }
.timeline-dot.green { border-color: #34D399; background: #34D399; }
.timeline-dot.amber { border-color: #F59E0B; background: #F59E0B; }
.timeline-dot.red   { border-color: #F87171; background: #F87171; }

.timeline-body { flex: 1; }
.timeline-date  { font-size: 10px; color: var(--posh-cream-ghost); margin-bottom: 2px; }
.timeline-actor { font-size: 10px; color: var(--posh-gold); font-weight: 500; }
.timeline-text  { font-size: 13px; color: var(--posh-cream); line-height: 1.5; }
.timeline-detail{ font-size: 12px; color: var(--posh-cream-dim); margin-top: 4px; line-height: 1.5; }

/* ── Compliance Timer ─────────────────────────────────────────────────── */
.compliance-timer {
  background: var(--posh-bg-surface);
  border: 1px solid var(--posh-border);
  border-radius: var(--posh-r);
  padding: 16px 20px;
}
.ct-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--posh-cream-ghost); margin-bottom: 8px; }
.ct-days  { font-family: var(--posh-serif); font-size: 40px; font-weight: 700; line-height: 1; }
.ct-days.urgent { color: #F87171; }
.ct-days.warning{ color: #F59E0B; }
.ct-days.safe   { color: #34D399; }
.ct-sub   { font-size: 11px; color: var(--posh-cream-dim); margin-top: 4px; }
.ct-bar   { height: 4px; background: var(--posh-bg-elevated); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.ct-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }

/* ── Section cards ────────────────────────────────────────────────────── */
.posh-section-card {
  background: var(--posh-bg-panel);
  border: 1px solid var(--posh-border-soft);
  border-radius: var(--posh-r);
  overflow: hidden;
  margin-bottom: 16px;
}
.posh-section-header {
  padding: 14px 18px;
  background: var(--posh-bg-surface);
  border-bottom: 1px solid var(--posh-border-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.posh-section-title {
  font-family: var(--posh-serif); font-size: 15px; font-weight: 600;
  color: var(--posh-cream); letter-spacing: 0.02em;
}
.posh-section-body { padding: 16px 18px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.posh-btn-primary {
  padding: 11px 22px;
  background: var(--posh-gold); border: none; border-radius: var(--posh-r-sm);
  color: var(--posh-bg-deep); font-family: var(--posh-sans); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em;
}
.posh-btn-primary:hover { background: var(--posh-gold-light); transform: translateY(-1px); }

.posh-btn-secondary {
  padding: 11px 18px;
  background: transparent; border: 1px solid var(--posh-border); border-radius: var(--posh-r-sm);
  color: var(--posh-cream-dim); font-family: var(--posh-sans); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.posh-btn-secondary:hover { border-color: var(--posh-gold-dim); color: var(--posh-cream); }

.posh-btn-ghost {
  padding: 11px 14px;
  background: transparent; border: 1px solid var(--posh-border-soft); border-radius: var(--posh-r-sm);
  color: var(--posh-cream-ghost); font-family: var(--posh-sans); font-size: 12px;
  cursor: pointer; transition: all 0.2s;
}
.posh-btn-ghost:hover { color: var(--posh-cream-dim); }

.posh-btn-danger {
  padding: 11px 18px;
  background: transparent; border: 1px solid var(--posh-red-border); border-radius: var(--posh-r-sm);
  color: var(--posh-red); font-family: var(--posh-sans); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.posh-btn-danger:hover { background: var(--posh-red-bg); }

/* ── Form elements ────────────────────────────────────────────────────── */
.posh-input {
  width: 100%;
  background: var(--posh-bg-input);
  border: 1px solid var(--posh-border-soft); border-radius: var(--posh-r-sm);
  padding: 10px 14px; color: var(--posh-cream);
  font-family: var(--posh-sans); font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.posh-input::placeholder { color: var(--posh-cream-ghost); }
.posh-input:focus { border-color: var(--posh-gold-dim); }

.posh-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--posh-cream-ghost); margin-bottom: 6px;
}

/* ── Info/alert boxes ─────────────────────────────────────────────────── */
.posh-alert {
  display: flex; gap: 10px; padding: 11px 14px;
  border-radius: var(--posh-r-sm); font-size: 12.5px; line-height: 1.55;
}
.posh-alert.gold  { background: var(--posh-gold-bg-soft); border: 1px solid var(--posh-border); border-left: 3px solid var(--posh-gold); color: var(--posh-gold-light); }
.posh-alert.red   { background: var(--posh-red-bg); border: 1px solid var(--posh-red-border); border-left: 3px solid rgba(224,112,112,.5); color: var(--posh-red); }
.posh-alert.teal  { background: rgba(45,212,191,.05); border: 1px solid rgba(45,212,191,.15); border-left: 3px solid rgba(45,212,191,.5); color: rgba(45,212,191,.85); }
.posh-alert.neutral { background: var(--posh-bg-surface); border: 1px solid var(--posh-border-soft); color: var(--posh-cream-dim); font-style: italic; }

/* ── POSH Page layouts ────────────────────────────────────────────────── */
.posh-page-wrap {
  flex: 1; position: relative; z-index: 1;
  padding: 28px 48px;
  max-width: 1400px; margin: 0 auto; width: 100%;
}

.posh-page-title {
  font-family: var(--posh-serif); font-size: 26px; font-weight: 700;
  color: var(--posh-cream); letter-spacing: 0.02em; margin-bottom: 4px;
}
.posh-page-sub { font-size: 13px; color: var(--posh-cream-dim); margin-bottom: 24px; }
.posh-page-sub span { color: var(--posh-gold); }

.posh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.posh-grid-2 > * { min-width: 0; }
.posh-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.posh-grid-3 > * { min-width: 0; }

/* PCD-7: KPI strip extension (widgets #3 ICC Readiness, #7 Locations Covered) */
.posh-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.posh-grid-5 > * { min-width: 0; }

/* PCD-7: Global Filter Bar (widget #1) — native <details>/<summary> disclosure,
   no custom JS toggle needed (keyboard-accessible by default). */
.posh-filter-dd { position: relative; }
.posh-filter-dd > summary { list-style: none; display: inline-block; }
.posh-filter-dd > summary::-webkit-details-marker { display: none; }
.posh-filter-dd-panel {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 20;
  min-width: 200px; max-height: 260px; overflow-y: auto;
  background: var(--posh-bg-panel); border: 1px solid var(--posh-border-soft);
  border-radius: var(--posh-r-sm); padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

/* PCD-7: dept label row under the Incidents-by-Department stacked bar
   (StackedBarTile.js itself renders no x-axis labels — see widgets.css). */
.posh-dept-stackedbar-labels { display: flex; gap: 8px; margin-top: 6px; }
.posh-dept-stackedbar-labels > span {
  flex: 1; text-align: center; font-size: 9px; color: var(--posh-cream-ghost);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.posh-split  { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; flex: 1; }
.posh-split-rule { background: var(--posh-border); }

/* ── POSH Footer ──────────────────────────────────────────────────────── */
.posh-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 36px;
  background: var(--posh-bg-deep);
  border-top: 1px solid var(--posh-border-soft);
  flex-shrink: 0; position: relative; z-index: 10;
}
.posh-footer-copy { font-size: 10px; color: var(--posh-cream-ghost); }
.posh-footer-links { display: flex; align-items: center; gap: 14px; }
.posh-footer-links a { font-size: 10px; color: var(--posh-cream-ghost); text-decoration: none; transition: color 0.2s; }
.posh-footer-links a:hover { color: var(--posh-gold); }
.posh-footer-sep { width: 1px; height: 10px; background: var(--posh-border-soft); }
.posh-footer-conf { font-size: 10px; color: var(--posh-gold-dim); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.stat-card {
  background: var(--posh-bg-panel); border: 1px solid var(--posh-border-soft);
  border-radius: var(--posh-r); padding: 20px;
  position: relative; overflow: hidden;
}
.stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--stat-color, var(--posh-gold)); }
.stat-value { font-family: var(--posh-serif); font-size: 36px; font-weight: 700; color: var(--posh-cream); line-height: 1; }
.stat-label { font-size: 11px; color: var(--posh-cream-dim); margin-top: 4px; }
.stat-sub   { font-size: 10px; color: var(--posh-cream-ghost); margin-top: 8px; }

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes poshFadeUp   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes poshSlideIn  { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
@keyframes poshPop      { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }

.anim-fade-up  { opacity:0; animation: poshFadeUp 0.35s ease forwards; }
.anim-slide-in { opacity:0; animation: poshSlideIn 0.35s ease forwards; }
.anim-pop      { opacity:0; animation: poshPop 0.3s ease forwards; }

/* ── Audit trail ──────────────────────────────────────────────────────── */
.audit-row {
  display: grid; grid-template-columns: 140px 100px 1fr;
  gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid var(--posh-border-soft);
  font-size: 11.5px; align-items: start;
}
.audit-row:last-child { border-bottom: none; }
.audit-ts   { color: var(--posh-cream-ghost); font-family: monospace; font-size: 10.5px; }
.audit-actor{ color: var(--posh-gold); font-weight: 500; }
.audit-event{ color: var(--posh-cream-dim); }

/* ── Chat interface ───────────────────────────────────────────────────── */
.chat-msgs {
  flex: 1; overflow-y: auto; padding: 18px 18px 10px;
  display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth;
}
.chat-msgs::-webkit-scrollbar { width: 3px; }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--posh-bg-elevated); border-radius: 3px; }

.chat-msg { display: flex; gap: 9px; opacity: 0; animation: poshFadeUp 0.35s ease forwards; }
.chat-msg.ai   { align-items: flex-start; }
.chat-msg.user { flex-direction: row-reverse; align-items: flex-start; }

.chat-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.chat-avatar.ai   { background: var(--posh-bg-surface); border: 1px solid var(--posh-border); color: var(--posh-gold); font-family: var(--posh-serif); font-size: 13px; }
.chat-avatar.user { background: var(--posh-bg-elevated); border: 1px solid var(--posh-border-soft); color: var(--posh-cream-dim); font-size: 11px; }

.chat-bubble-body { max-width: calc(100% - 44px); }
.chat-bubble {
  padding: 10px 14px; font-size: 13px; line-height: 1.65;
  border-radius: var(--posh-r);
}
.chat-bubble.ai   { background: var(--posh-bg-panel); border: 1px solid var(--posh-border-soft); color: var(--posh-cream-dim); border-radius: 3px var(--posh-r) var(--posh-r) var(--posh-r); }
.chat-bubble.user { background: var(--posh-bg-elevated); border: 1px solid rgba(196,154,60,.12); color: var(--posh-cream); border-radius: var(--posh-r) 3px var(--posh-r) var(--posh-r); }

.chat-time { font-size: 10px; color: var(--posh-cream-ghost); margin-top: 3px; padding: 0 2px; }
.chat-msg.user .chat-time { text-align: right; }

.typing-dots { display:flex; gap:4px; padding:10px 14px; background:var(--posh-bg-panel); border:1px solid var(--posh-border-soft); border-radius:3px var(--posh-r) var(--posh-r) var(--posh-r); }
.typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--posh-cream-ghost); animation:typingB 1.4s ease-in-out infinite; }
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes typingB{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .posh-page-wrap { padding: 20px 24px; }
  .posh-grid-3 { grid-template-columns: 1fr 1fr; }
  .posh-grid-5 { grid-template-columns: 1fr 1fr 1fr; }
  .posh-split  { grid-template-columns: 1fr; }
  .posh-split-rule { display: none; }
}
@media (max-width: 768px) {
  .posh-nav { padding: 0 16px; }
  .posh-page-wrap { padding: 16px; }
  .posh-grid-2 { grid-template-columns: 1fr; }
  .posh-grid-3 { grid-template-columns: 1fr; }
  .posh-grid-5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 375px) {
  .posh-grid-5 { grid-template-columns: 1fr; }
}

/* ── Revision Adoption Page (.rev-*) ─────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.rev-header {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.rev-header-title { flex: 1; margin: 0; }
.rev-counter { font-size: 13px; color: var(--text-muted); }
.rev-meta-card { margin-bottom: 16px; padding: 12px 16px; font-size: 13px; }
.rev-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px;
}
.rev-step-indicator { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.rev-step-badge {
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}
.rev-step-badge--done {
  background: var(--color-green-glow); color: var(--color-green);
  border: 1px solid var(--color-green);
}
.rev-step-badge--active {
  background: var(--color-teal-glow); color: var(--color-teal);
  border: 1px solid var(--color-teal);
}
.rev-step-badge--pending {
  background: var(--surface-elevated); color: var(--text-muted);
  border: 1px solid var(--surface-border);
}
.rev-step-card { margin-bottom: 12px; padding: 14px 16px; }
.rev-step-card--green  { border-left: 4px solid var(--color-green); }
.rev-step-card--teal   { border-left: 4px solid var(--color-teal); }
.rev-step-card--locked { opacity: 0.5; }
.rev-step-title { margin: 0 0 8px; font-size: 14px; }
.rev-step-title--done { color: var(--color-green); }
.rev-step-desc  { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.rev-step-muted { font-size: 13px; color: var(--text-muted); margin: 0; }
.rev-adopting-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-teal); }
.rev-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--color-teal-glow); border-top-color: var(--color-teal);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.rev-error { margin: 8px 0; }

/* ── Content Review Page (.crv-*) ─────────────────────────────────────── */
.crv-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.crv-header-title { flex: 1; margin: 0; color: var(--text-primary); }
.crv-counter { font-size: 13px; color: var(--text-secondary); }
.crv-summary-bar {
  margin-bottom: 16px; padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.crv-summary-text { font-size: 13px; color: var(--text-primary); }
.crv-summary-actions { display: flex; align-items: center; gap: 8px; }
.crv-video-block-banner {
  font-size: 12px; color: var(--color-amber);
  background: var(--color-amber-glow); padding: 3px 8px;
  border-radius: 4px; border: 1px solid var(--color-gold-border);
}
.crv-topic-card { margin-bottom: 12px; padding: 14px 16px; }
.crv-topic-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.crv-topic-title-wrap { flex: 1; }
.crv-topic-title { margin: 0 0 4px; font-size: 14px; color: var(--text-primary); }
.crv-topic-desc { font-size: 12px; color: var(--text-secondary); margin: 0; }
.crv-status-badge {
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.crv-status-badge--pending  { background: var(--color-amber-glow); color: var(--color-amber); }
.crv-status-badge--reviewed { background: var(--color-teal-glow);  color: var(--color-teal);  }
.crv-status-badge--approved { background: var(--color-green-glow); color: var(--color-green); }
.crv-tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--surface-border); margin-bottom: 12px;
}
.crv-tab-btn {
  padding: 6px 16px; font-size: 12px; font-weight: 600;
  border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.crv-tab-btn--active { border-bottom-color: var(--color-teal); color: var(--color-teal); }
.crv-edit-actions {
  display: flex; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--surface-border);
}
.crv-panel-wrap { margin-bottom: 2px; }
.crv-panel-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.crv-panel-label--edit  { font-size: 11px; font-weight: 600; color: var(--text-primary); margin-top: 8px; display: block; }
.crv-panel-label--teal  { font-size: 11px; font-weight: 600; color: var(--color-teal); }
.crv-panel-content {
  font-size: 12px; background: var(--surface-elevated); color: var(--text-primary);
  border: 1px solid var(--surface-border); border-radius: 4px;
  padding: 8px; overflow: auto; white-space: pre-wrap;
}
.crv-panel-content--lg  { max-height: 140px; }
.crv-panel-content--md  { max-height: 100px; }
.crv-panel-content--sm  { max-height: 80px; }
.crv-panel-content--teal { background: var(--color-teal-glow); border-color: var(--color-teal); }
.crv-textarea {
  width: 100%; box-sizing: border-box; font-size: 12px;
  background: var(--surface-elevated); color: var(--text-primary);
  border: 1px solid var(--surface-border-mid); border-radius: 4px;
  padding: 6px 8px; resize: vertical;
}
.crv-override-wrap { margin-top: 8px; }
.crv-video-section { margin-bottom: 2px; }
.crv-video-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.crv-video-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0;
}
.crv-video-badge {
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.crv-video-badge--na       { background: var(--surface-elevated);  color: var(--text-muted);  }
.crv-video-badge--queued   { background: var(--color-amber-glow);  color: var(--color-amber); }
.crv-video-badge--progress { background: var(--color-teal-glow);   color: var(--color-teal);  }
.crv-video-badge--complete { background: var(--color-green-glow);  color: var(--color-green); }
.crv-video-badge--failed   { background: var(--color-red-glow);    color: var(--color-red);   }
.crv-btn-retry {
  background: var(--color-red-glow); color: var(--color-red);
  border: 1px solid var(--color-red);
}
.crv-video-block-warn {
  font-size: 12px; color: var(--color-amber);
  background: var(--color-amber-glow); border: 1px solid var(--color-gold-border);
  border-radius: 4px; padding: 6px 8px; margin-top: 6px;
}
.crv-video-error-detail {
  font-size: 12px; color: var(--color-red);
  background: var(--color-red-glow); border: 1px solid var(--color-red);
  border-radius: 4px; padding: 6px 8px; margin-top: 4px;
}
.crv-video-player {
  width: 100%; max-height: 220px; border-radius: 6px;
  margin-top: 8px; background: #000; display: block;
}
.crv-video-no-content { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

/* ── Delta Allocation Page (.dal-*) ──────────────────────────────────── */
.dal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.dal-header-title { flex: 1; margin: 0; }
.dal-counter { font-size: 13px; color: var(--text-muted); }
.dal-info-bar {
  margin-bottom: 16px; padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dal-info-bar-text { font-size: 13px; }
.dal-topic-card { margin-bottom: 10px; padding: 14px 16px; }
.dal-topic-card--allocated { border-left: 4px solid var(--color-green); }
.dal-topic-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.dal-topic-info  { flex: 1; }
.dal-topic-title { margin: 0 0 4px; font-size: 13px; }
.dal-topic-desc  { font-size: 11px; color: var(--text-muted); margin: 0; }
.dal-allocated-badge { font-size: 11px; color: var(--color-green); font-weight: 600; white-space: nowrap; }
.dal-assignees-wrap  { margin-bottom: 8px; }
.dal-assignees-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; display: block; margin-bottom: 4px;
}
.dal-assignees-list  { display: flex; flex-wrap: wrap; gap: 4px; }
.dal-assignee-item   { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 0; cursor: pointer; }
.dal-assignee-role   {
  font-size: 10px; color: var(--text-muted);
  padding: 1px 6px; border-radius: 10px; background: var(--surface-elevated);
}
.dal-empty         { color: var(--text-muted); }
.dal-no-assignees  { font-size: 12px; color: var(--text-muted); }

/* ── Action Stamp Page (.asp-*) ──────────────────────────────────────── */
.asp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.asp-header-title { flex: 1; margin: 0; }
.asp-counter  { font-size: 13px; color: var(--text-muted); }
.asp-bulk-card {
  margin-bottom: 12px; padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
}
.asp-bulk-text { font-size: 13px; }
.asp-tab-bar {
  display: flex; border-bottom: 2px solid var(--surface-border); margin-bottom: 16px;
}
.asp-tab-btn {
  padding: 8px 16px; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.asp-tab-btn--active { color: var(--color-teal); border-bottom-color: var(--color-teal); }
.asp-topic-card { margin-bottom: 8px; }
.asp-topic-card--stamped { border-left: 4px solid var(--color-green); }
.asp-topic-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.asp-topic-info    { flex: 1; }
.asp-topic-title   { font-weight: 600; font-size: 13px; }
.asp-topic-stamped-tag { font-size: 11px; color: var(--color-green); margin-left: 6px; }
.asp-topic-pending-tag { font-size: 11px; color: var(--color-amber); margin-left: 6px; }
.asp-topic-chevron { font-size: 12px; color: var(--text-muted); }
.asp-assignees-panel { border-top: 1px solid var(--surface-border); padding: 10px 14px; }
.asp-bulk-stamp-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.asp-assignee-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--surface-border); font-size: 12px;
}
.asp-assignee-row:last-child { border-bottom: none; }
.asp-assignee-name   { flex: 1; }
.asp-progress-track  { width: 80px; background: var(--surface-elevated); border-radius: 8px; height: 6px; }
.asp-progress-fill   { background: var(--color-teal); border-radius: 8px; height: 6px; }
.asp-pct             { color: var(--text-muted); }
.asp-select {
  font-size: 11px; border: 1px solid var(--surface-border); border-radius: 4px;
  padding: 2px 4px; background: var(--surface-elevated); color: var(--text-primary);
}
.asp-select-bulk {
  font-size: 12px; border: 1px solid var(--surface-border); border-radius: 4px;
  padding: 3px 6px; background: var(--surface-elevated); color: var(--text-primary);
}
.asp-empty       { color: var(--text-muted); font-size: 13px; }
.asp-no-assignees { padding: 8px 14px; font-size: 12px; color: var(--text-muted); }

/* ── UX-GAP-8: POSH module design system utilities ──────────────────────── */
.stat-card--active  { --stat-color: var(--status-active);        }
.stat-card--filed   { --stat-color: var(--status-filed);         }
.stat-card--amber   { --stat-color: var(--status-investigation); }
.stat-card--orange  { --stat-color: #FB923C;                     }
.posh-text-success  { color: var(--status-active);    }
.posh-text-error    { color: var(--status-escalated); }
.posh-hidden        { display: none; }
.posh-field-error   { font-size: 12px; color: var(--status-escalated); margin-top: 8px; }
.posh-live-dot      { width: 6px; height: 6px; border-radius: 50%; background: var(--posh-gold); display: inline-block; }
.posh-icon-badge-teal { width: 40px; height: 40px; border-radius: 50%; background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.posh-icon-badge-gold { width: 40px; height: 40px; border-radius: 50%; background: var(--posh-gold-bg); border: 1px solid var(--posh-border); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.posh-draft-meta    { display: flex; gap: 18px; padding: 8px 18px; background: var(--posh-gold-bg-soft); border-bottom: 1px solid var(--posh-border-soft); font-size: 11px; }
.posh-draft-meta-item { display: flex; gap: 5px; }
.posh-row           { display: flex; align-items: center; gap: 8px; }
.posh-row-g10       { display: flex; align-items: center; gap: 10px; }
.posh-row-wrap      { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.posh-row-end       { display: flex; justify-content: flex-end; gap: 10px; }
.posh-row-end-wrap  { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.posh-row-center    { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.posh-row-between   { display: flex; align-items: center; justify-content: space-between; }
.posh-row-sb        { display: flex; justify-content: space-between; }
.posh-col-end       { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.posh-flex-end-bottom { display: flex; gap: 8px; align-items: flex-end; }
.posh-inline-flex   { display: inline-flex; align-items: center; gap: 4px; }
.posh-page-header   { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.posh-page-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.posh-case-top-row  { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.posh-member-row    { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--posh-border-soft); align-items: flex-start; }
.posh-list-row      { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--posh-border-soft); }
.posh-confirm-block { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--posh-bg-panel); border: 1px solid var(--posh-border-soft); border-radius: var(--posh-r); margin-bottom: 24px; }
.posh-bar-chart     { display: flex; align-items: flex-end; gap: 8px; height: 80px; padding: 0 4px; }
.posh-select        { width: 100%; background: var(--posh-bg-input); border: 1px solid var(--posh-border-soft); border-radius: var(--posh-r-sm); padding: 10px 14px; color: var(--posh-cream); font-family: var(--posh-sans); font-size: 13px; outline: none; cursor: pointer; transition: border-color 0.2s; }
.posh-select:focus  { border-color: var(--posh-gold-dim); }
.posh-clickable     { cursor: pointer; }
.posh-not-found     { padding: 40px; color: var(--posh-cream-ghost); }
.posh-empty-cell    { padding: 20px; text-align: center; color: var(--posh-cream-ghost); font-size: 12px; }
.posh-audit-header  { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.posh-audit-live    { font-size: 10px; color: var(--posh-gold); display: flex; align-items: center; gap: 5px; }
.posh-audit-wrap    { background: var(--posh-bg-panel); border: 1px solid var(--posh-border-soft); border-radius: var(--posh-r); overflow: hidden; }
.posh-audit-header-row { display: grid; grid-template-columns: 140px 100px 1fr; padding: 8px 14px; background: var(--posh-bg-surface); border-bottom: 1px solid var(--posh-border-soft); }
.posh-draft-panel-head { padding: 14px 22px 11px; border-bottom: 1px solid var(--posh-border-soft); }
.posh-draft-content { flex: 1; overflow-y: auto; padding: 18px 20px; }
.posh-draft-empty   { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; gap: 12px; color: var(--posh-cream-ghost); text-align: center; }
.posh-draft-card-inner { padding: 14px 18px; background: var(--posh-bg-panel); border: 1px solid var(--posh-border); border-radius: var(--posh-r-lg); overflow: hidden; }
.posh-draft-card-head  { padding: 14px 18px; background: var(--posh-bg-surface); border-bottom: 1px solid var(--posh-border-soft); display: flex; align-items: center; justify-content: space-between; }
.posh-draft-building   { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--posh-gold); letter-spacing: .08em; text-transform: uppercase; }
.posh-draft-building-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--posh-gold); box-shadow: 0 0 5px var(--posh-gold); }
.posh-draft-list    { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.posh-draft-section-label { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--posh-gold); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.posh-draft-section-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--posh-gold); }
.posh-nav-left-group { display: flex; align-items: center; gap: 18px; }
.posh-complaint-hero { text-align: center; padding: 32px 0 24px; }
.posh-entry-card-head { display: flex; align-items: center; gap: 10px; }
.posh-snake-bar     { background: var(--posh-bg-base); border-bottom: 1px solid var(--posh-border-soft); padding: 6px 48px; overflow-x: auto; }
.posh-split-layout  { display: grid; grid-template-columns: 1fr 1px 1fr; height: calc(100vh - 140px); }
.posh-split-left    { display: flex; flex-direction: column; overflow: hidden; background: var(--posh-bg-deep); }
.posh-split-head    { padding: 14px 22px 11px; border-bottom: 1px solid var(--posh-border-soft); flex-shrink: 0; }
.posh-split-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.posh-split-foot    { padding: 11px 18px 14px; border-top: 1px solid var(--posh-border-soft); flex-shrink: 0; background: var(--posh-bg-deep); }
.posh-split-right   { display: flex; flex-direction: column; overflow: hidden; background: var(--posh-bg-base); }
.posh-chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.posh-chat-meta-row { display: flex; justify-content: space-between; margin-top: 7px; padding: 0 1px; }
.posh-legal-tag     { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 3px 9px; }
.posh-review-meta-tags { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; }
.posh-review-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.posh-confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.posh-case-info-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.posh-anon-days-row { display: flex; align-items: center; gap: 8px; }
.posh-snake-compact { display: flex; align-items: center; gap: 4px; padding: 8px 0; overflow-x: auto; }
.posh-snake-compact-node { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.posh-dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.posh-dashboard-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.posh-training-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--posh-border-soft); }
.posh-timeline-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.posh-grid-tight    { gap: 10px; }

/* ── Sprint MR-1: MR-013 — POSH nav mobile fix ─────────────────────────── */
@media (max-width: 768px) {
  .posh-nav {
    padding: 0 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .posh-nav-center {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* MR-5: posh button tap targets — posh-btn-primary/secondary measure 42px, 2px short
   of WCAG 2.5.5 44px minimum; inline POSH links (27px) need min-height enforcement */
@media (max-width: 768px) {
  .posh-btn-primary,
  .posh-btn-secondary,
  .posh-btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* POSH dashboard "Manage LP →" and similar inline anchors */
  .posh-dashboard-actions a,
  .posh-section a:not(.posh-nav-brand) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* MR-5: P8 sub-12px metadata labels in POSH pages — timeline dates/actors (10px),
   case-card-ref monospace (10px), case-card-meta-item (11px), stat labels (11px/10px),
   ct-label section headers (10px), footer text (10px), review-meta-tags (11px) */
@media (max-width: 768px) {
  .timeline-date,
  .timeline-actor,
  .case-card-ref,
  .ct-label,
  .stat-sub,
  .posh-footer-copy,
  .posh-footer-links a,
  .posh-footer-conf,
  .posh-audit-live,
  .posh-draft-building {
    font-size: 11px;
  }
  .case-card-meta-item,
  .ct-sub,
  .stat-label,
  .posh-review-meta-tags,
  .chat-time {
    font-size: 12px;
  }
}

/* MR-172: workflow-snake-wrap — 40px horizontal padding is too large at 375px,
   leaving only 295px for the snake node row. Snake nodes (48px circles) plus
   connectors need at least 16px breathing room. Reduce padding at mobile and enable
   horizontal scroll so the multi-step snake can be scrolled on narrow viewports. */
@media (max-width: 768px) {
  .workflow-snake-wrap {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .snake-row {
    min-width: max-content;
  }
}

/* MR-170: asp-select / asp-select-bulk — ActionStampPage select elements at 11px / 12px
   trigger iOS auto-zoom on focus. Must be ≥16px at ≤768px (Standing Rule 6).
   Also fixes crv-textarea (ContentReviewPage, 12px) — MR-171. */
@media (max-width: 768px) {
  .asp-select,
  .asp-select-bulk {
    font-size: 16px;
    min-height: 44px;
  }
  .crv-textarea {
    font-size: 16px;
  }
}

/* MR-153: posh-input / posh-select — base font-size 13px triggers iOS auto-zoom.
   Standing Rule 6: all inputs/selects must be ≥16px at ≤768px.
   Applies to: POSH case filing form (multi-step wizard), filter selects, chat input. */
@media (max-width: 768px) {
  .posh-input,
  .posh-select {
    font-size: 16px;
  }
}

/* MR-154: posh-split-layout — rigid two-column grid with no mobile override.
   At 375px both columns are ~187px, making the chat/document split-panel
   unusable. Collapse to single column and remove fixed viewport height. */
@media (max-width: 768px) {
  .posh-split-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .posh-split-left,
  .posh-split-right {
    height: auto;
    min-height: 360px;
  }
  .posh-split-rule {
    display: none;
  }
}

/* MR-155: posh-audit-header-row — fixed 140px + 100px columns overflow on mobile.
   Wrap the row to allow horizontal scroll within the parent audit wrap. */
@media (max-width: 768px) {
  .posh-audit-header-row {
    grid-template-columns: 120px 80px 1fr;
    font-size: 11px;
  }
  .audit-row {
    grid-template-columns: 120px 80px 1fr;
    font-size: 11px;
  }
}

/* MR-156: posh-draft-meta — long case refs / party names can overflow without word-break. */
@media (max-width: 768px) {
  .posh-draft-meta {
    flex-wrap: wrap;
    gap: 8px;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .posh-draft-meta-item {
    flex-wrap: wrap;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* MR-157: phase-label — 9px font is sub-threshold on mobile. Bump to 11px. */
@media (max-width: 768px) {
  .phase-label {
    font-size: 11px;
  }
}

/* ── Light-theme comprehensive overrides — POSH module ──────────────────────
   POSH defaults to dark-navy tokens. This block makes every surface, text,
   border, and accent render correctly when [data-theme="light"] is set on
   the document root (or any ancestor element).
   ────────────────────────────────────────────────────────────────────────── */

/* ── Token overrides ────────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Background surfaces */
    --posh-bg-base:        #F0F2F5;
    --posh-bg-deep:        #E8ECF0;
    --posh-bg-panel:       #FFFFFF;
    --posh-bg-surface:     #F9FAFB;
    --posh-bg-elevated:    #F3F4F6;
    --posh-bg-input:       #FFFFFF;

    /* Text */
    --posh-cream:          #111827;
    --posh-cream-dim:      #374151;
    --posh-cream-ghost:    #6B7280;

    /* Borders */
    --posh-border:         rgba(0,0,0,0.10);
    --posh-border-soft:    rgba(0,0,0,0.07);

    /* Gold/amber accents — keep gold for brand, slightly warm it */
    --posh-gold:           #B7791F;
    --posh-gold-light:     #D97706;
    --posh-gold-dim:       #92400E;
    --posh-gold-bg:        rgba(183,121,31,0.08);
    --posh-gold-bg-soft:   rgba(183,121,31,0.04);

    /* Teal accent */
    --posh-teal:           #0D9488;

    /* Red */
    --posh-red:            rgba(185,28,28,0.85);
    --posh-red-bg:         rgba(185,28,28,0.05);
    --posh-red-border:     rgba(185,28,28,0.15);
}

/* ── Shell ──────────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-shell {
    background: #F0F2F5;
    color: #111827;
}
[data-theme="light"] .posh-shell::before,
[data-theme="light"] .posh-shell::after {
    opacity: 0.04;
}

/* ── Stat cards ─────────────────────────────────────────────────────────── */
[data-theme="light"] .stat-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .stat-value { color: #111827; }
[data-theme="light"] .stat-label { color: #374151; }
[data-theme="light"] .stat-sub   { color: #6B7280; }

/* ── Section cards ──────────────────────────────────────────────────────── */
[data-theme="light"] .posh-section-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
[data-theme="light"] .posh-section-header {
    background: #F9FAFB;
    border-bottom-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .posh-section-title { color: #111827; }

/* ── Page titles ────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-page-title   { color: #111827; }
[data-theme="light"] .posh-page-sub     { color: #374151; }
[data-theme="light"] .posh-page-sub span { color: #B7791F; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-nav {
    background: #FFFFFF;
    border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .posh-nav-brand-name { color: #111827; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-footer {
    background: #FFFFFF;
    border-top-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .posh-footer-copy    { color: #6B7280; }
[data-theme="light"] .posh-footer-links a { color: #6B7280; }
[data-theme="light"] .posh-footer-links a:hover { color: #B7791F; }
[data-theme="light"] .posh-footer-conf    { color: #92400E; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-input {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.15);
    color: #111827;
}
[data-theme="light"] .posh-input::placeholder { color: #9CA3AF; }
[data-theme="light"] .posh-input:focus { border-color: #0D9488; }
[data-theme="light"] .posh-label { color: #6B7280; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-alert.gold    { color: #92400E; background: rgba(183,121,31,0.06); border-color: rgba(183,121,31,0.20); border-left-color: #B7791F; }
[data-theme="light"] .posh-alert.red     { color: #B91C1C; background: rgba(185,28,28,0.04);  border-color: rgba(185,28,28,0.15); }
[data-theme="light"] .posh-alert.teal    { color: #0F766E; background: rgba(13,148,136,0.05); border-color: rgba(13,148,136,0.18); border-left-color: #0D9488; }
[data-theme="light"] .posh-alert.neutral { background: #F9FAFB; border-color: rgba(0,0,0,0.07); color: #374151; }

/* ── Chat bubbles ───────────────────────────────────────────────────────── */
[data-theme="light"] .chat-bubble.ai   { background: #F9FAFB; border-color: rgba(0,0,0,0.08); color: #374151; }
[data-theme="light"] .chat-bubble.user { background: #FFFFFF; border-color: rgba(0,0,0,0.10); color: #111827; }
[data-theme="light"] .chat-avatar.ai   { background: #F3F4F6; border-color: rgba(0,0,0,0.10); color: #B7791F; }
[data-theme="light"] .chat-avatar.user { background: #FFFFFF; border-color: rgba(0,0,0,0.12); color: #374151; }
[data-theme="light"] .chat-time        { color: #9CA3AF; }
[data-theme="light"] .typing-dots      { background: #F9FAFB; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .typing-dots span { background: #D1D5DB; }

/* ── Audit trail ────────────────────────────────────────────────────────── */
[data-theme="light"] .audit-row   { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .audit-ts    { color: #9CA3AF; }
[data-theme="light"] .audit-actor { color: #B7791F; }
[data-theme="light"] .audit-event { color: #374151; }

/* ── Chips ──────────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-chip-ref  { background: #F3F4F6; border-color: rgba(0,0,0,0.10); color: #6B7280; }
[data-theme="light"] .posh-chip-anon { background: rgba(13,148,136,0.08); border-color: rgba(13,148,136,0.25); color: #0D9488; }

/* ── Split rule ─────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-split-rule { background: rgba(0,0,0,0.08); }

/* ── Mode badges ────────────────────────────────────────────────────────── */
[data-theme="light"] .mode-badge.live  { background: rgba(13,148,136,0.08);   border-color: rgba(13,148,136,0.22);   color: #0D9488; }
[data-theme="light"] .mode-badge.muted { background: rgba(100,116,139,0.06);  border-color: rgba(100,116,139,0.15);  color: #6B7280; }

/* ── Role badges ────────────────────────────────────────────────────────── */
[data-theme="light"] .role-badge.employee { background: rgba(13,148,136,0.07);  border-color: rgba(13,148,136,0.20);  color: #0D9488; }
[data-theme="light"] .role-badge.icc      { background: rgba(37,99,235,0.07);   border-color: rgba(37,99,235,0.20);   color: #1D4ED8; }
[data-theme="light"] .role-badge.chro     { background: rgba(183,121,31,0.08);  border-color: rgba(183,121,31,0.22);  color: #B7791F; }
[data-theme="light"] .role-badge.admin    { background: rgba(109,40,217,0.07);  border-color: rgba(109,40,217,0.20);  color: #6D28D9; }

/* ── Light-theme button overrides — POSH module ─────────────────────────────
   POSH uses gold-on-navy in dark mode. In light mode the module still sits
   inside the light shell, so buttons must match the platform indigo palette.
   posh-btn-danger is semantic (red) and works in both themes — left as-is.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .posh-btn-primary {
  background: #0D9488;
  color: #EFF6FF;
  border: none;
  box-shadow: 0 2px 8px rgba(13,148,136,0.22);
}
[data-theme="light"] .posh-btn-primary:hover {
  background: #0F766E;
  box-shadow: 0 4px 16px rgba(13,148,136,0.28);
  transform: none;
}

[data-theme="light"] .posh-btn-secondary {
  background: #FFFFFF;
  color: #111827;
  border-color: rgba(0,0,0,0.20);
}
[data-theme="light"] .posh-btn-secondary:hover {
  background: #F7F8FA;
  border-color: #00897B;
  color: #00897B;
}

[data-theme="light"] .posh-btn-ghost {
  background: transparent;
  color: #374151;
  border-color: rgba(0,0,0,0.16);
}
[data-theme="light"] .posh-btn-ghost:hover {
  background: rgba(0,0,0,0.06);
  color: #111827;
}

/* ══════════════════════════════════════════════════════════════════════════════
   adm-modal-dialog primitives — ported for POSH module pages
   (admin.css is not loaded in the tenant portal; this block provides the
   single-hyphen naming variants used by the POSH CHRO analytics modal)
   ══════════════════════════════════════════════════════════════════════════════ */

.adm-modal-dialog {
  background: var(--surface-card, #161b2e);
  border: 1px solid var(--surface-border-mid, rgba(255,255,255,0.22));
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 20px 60px rgba(0,0,0,0.65);
  animation: adm-slide-up 0.2s ease;
}

@keyframes adm-slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.adm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--surface-border, rgba(255,255,255,0.07));
  flex-shrink: 0;
}

.adm-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.adm-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.adm-modal-body-col  { display: flex; flex-direction: column; gap: 14px; }
.adm-modal-body-col12 { display: flex; flex-direction: column; gap: 12px; }
.adm-modal-body-col16 { display: flex; flex-direction: column; gap: 16px; }

.adm-modal-close {
  background: transparent;
  border: 1px solid var(--surface-border-mid, rgba(255,255,255,0.18));
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.adm-modal-close:hover {
  color: var(--text-primary);
  border-color: var(--color-teal);
}

.adm-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--surface-border, rgba(255,255,255,0.07));
  flex-shrink: 0;
}

.adm-form-group { margin-bottom: 14px; }

/* ── Light theme overrides ── */
[data-theme="light"] .adm-modal-dialog {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

[data-theme="light"] .adm-modal-header {
  background: #F9FAFB;
  border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .adm-modal-title { color: #111827; }

[data-theme="light"] .adm-modal-close {
  color: #6B7280;
  border-color: rgba(0,0,0,0.14);
}

[data-theme="light"] .adm-modal-close:hover {
  color: #111827;
  border-color: #0D9488;
}

[data-theme="light"] .adm-modal-footer {
  background: #F9FAFB;
  border-top-color: rgba(0,0,0,0.08);
}

/* ─────────────────────────────────────────────────────────────────────────
   POSH — Dashboard filter bars (PoshDashboardPage.js, CHRO "Cases Overview"
   widget + ICC "Case Queue" widget: _renderCasesFilterBar() ~line 571,
   _renderIccFilterBar() ~line 643)

   Same root-cause `.adm-filter-bar-group` gap already fixed for
   auditor.css/rpt-landing-page.css/rpt-detail-page.css/glpd-dashboard.css
   (see those files' header comments for the full incident trail), but with
   an ADDITIONAL layer of breakage specific to this page: the outer wrapper
   here is `.adm-cjp-filter-bar` (#chro-cases-filter-bar ~line 215,
   #icc-queue-filter-bar ~line 324), NOT `.adm-filter-bar` — a different
   class, originally authored for ModuleContentJobsPage.js (admin console,
   where admin.css IS loaded — admin.html has its own <link>, confirmed —
   and defines `.adm-cjp-filter-bar { display:flex; gap:12px; flex-wrap:
   wrap; align-items:flex-end; padding:16px; margin-bottom:16px; }`,
   admin.css ~line 1992). admin.css is never loaded by this tenant-portal
   SPA (index.html), so `.adm-cjp-filter-bar` rendered as a plain unstyled
   block here — its `.adm-filter-bar-group` children stacked vertically as
   full-width rows instead of sitting side by side. Fixing only
   `.adm-filter-bar-group` itself (as in the other precedent files, whose
   outer `.adm-filter-bar` container already has a working unscoped rule in
   components.css) would leave this page's filter bar still broken — the
   container fix below is required too.

   Note: components.css's unscoped ".adm-filter-bar .adm-input { flex: 1 1
   200px }" / ".adm-filter-bar .adm-select { flex: 0 0 auto }" ballooning-
   height bug that affects the other precedent pages does NOT reproduce
   here — that selector requires an ancestor with class exactly
   "adm-filter-bar", which this page's ".adm-cjp-filter-bar" wrapper does
   not carry. The `.adm-select`/`.adm-input` neutralization below is added
   anyway as a defensive, zero-cost precaution (matches the established
   pattern and protects against a future refactor that nests these under
   `.adm-filter-bar`), not because the bug is currently reproducible.

   Verified (not assumed): two of these groups —
   `_renderCasesFilterBar()`'s Clear-button group and
   `_renderIccFilterBar()`'s Per-page group — carry an inline
   `style="justify-content:flex-end;margin-top:auto;"` with NO
   `flex-direction:row` override, unlike AuditEngagementsPage's equivalent
   actions group (auditor.css). This is NOT a bug: the Clear-button group
   has a single child (the button alone — column vs row is visually
   identical for one item), and the Per-page group is a normal label+select
   pair, for which flex-direction:column is the *correct* layout, same as
   every other filter group. No row-reassertion needed here.

   Scoped to `.posh-page-wrap`, the wrapper class this page's three view
   renderers (_renderCHRO/_renderICC/_renderEmployee) all carry. Grep-
   confirmed `.posh-page-wrap` is also used by case-management-pages.js and
   complaint-flow-pages.js — neither uses `.adm-filter-bar-group` or
   `.adm-cjp-filter-bar`, so this addition has no effect on them.
   ───────────────────────────────────────────────────────────────────────── */

.posh-page-wrap .adm-cjp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.posh-page-wrap .adm-filter-bar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Defensive ballooning-height neutralization — see header comment. */
.posh-page-wrap .adm-filter-bar-group > .adm-input,
.posh-page-wrap .adm-filter-bar-group > .adm-select {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Re-assert the intended small-caps filter-label look. This page's
   `.adm-filter-label` elements have NO rule at all outside `.adm-filter-
   bar` (components.css only styles ".adm-filter-bar .adm-filter-label",
   and this page's ancestor is ".adm-cjp-filter-bar", not ".adm-filter-
   bar" — so without this rule the label rendered with raw browser-default
   <label> styling, not even the inline-checkbox-label mis-style seen on
   the other precedent pages). */
.posh-page-wrap .adm-filter-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--adm-text-muted);
}

/* .adm-input-sm does not receive tenant-shell.css's own 44px mobile
   touch-target fix (that fix is scoped to .adm-select-sm only — see
   tenant-shell.css's MR-212 comment) — the Filed From/To date inputs here
   use "adm-input adm-input-sm" and need it explicitly. .adm-select-sm is
   already covered globally and does not need duplicating here. */
@media (max-width: 768px) {
  .posh-page-wrap .adm-filter-bar-group > .adm-input {
    min-height: 44px;
  }
}