/*
 * ═══════════════════════════════════════════════════════
 *  STARINS — Component Styles
 *  Consumes tokens from theme.css — do not hard-code
 *  colours or radii here; use CSS custom properties.
 * ═══════════════════════════════════════════════════════
 *
 *  Order:
 *    1.  Reset & base
 *    2.  Typography helpers
 *    3.  Layout (app-shell, sidebar, topbar, content)
 *    4.  Navigation
 *    5.  Surfaces & cards
 *    6.  Buttons & controls
 *    7.  Form elements
 *    8.  Badges & chips
 *    9.  Tables
 *   10.  Dashboard / metrics
 *   11.  Timeline
 *   12.  Messages
 *   13.  Claim workspace
 *   14.  Client-facing shell
 *   15.  Auth
 *   16.  Utility classes
 *   17.  Attachments & uploads
 *   18.  DSR
 *   19.  Language toggle
 *   20.  Responsive breakpoints
 *   21.  Accessibility & reduced-motion
 * ═══════════════════════════════════════════════════════
 */

/* ══ 1. Reset & base ══════════════════════════════════ */

/* Preserve native [hidden] attribute semantics even when a CSS class
   (e.g. .form-field { display: grid }) would otherwise override it. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  background: var(--page-bg);
  color: var(--neutral-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--primary-800); }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
textarea { resize: vertical; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.25; font-weight: 650; }
p { margin: 0; }

/* ══ 2. Typography helpers ════════════════════════════ */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-md   { font-size: var(--text-md); }
.text-muted { color: var(--neutral-600); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.font-medium { font-weight: 550; }
.font-bold   { font-weight: 700; }
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary-600);
}

/* ══ 3. App shell layout ══════════════════════════════ */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--nav-width);
  background: var(--nav-bg);
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Subtle top highlight gives sidebar depth */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: radial-gradient(ellipse at 60% 0%, rgba(96,165,250,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  flex-shrink: 0;
}
.brand-stack { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand-logo {
  width: 32px; height: 32px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  padding: 3px;
  flex-shrink: 0;
}
.brand-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-size: var(--text-xs);
  color: var(--nav-text);
  white-space: nowrap;
}

.app-main { flex: 1; margin-left: var(--nav-width); min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-6);
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 20;
  gap: var(--space-4);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--space-3); }
.topbar-left { min-width: 0; flex: 1; }

.page-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--neutral-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-area {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  min-height: 0;
}

/* Sidebar backdrop (mobile) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,23,40,0.55);
  z-index: 39;
  backdrop-filter: blur(1px);
}
.sidebar-backdrop.is-visible { display: block; }

/* ══ 4. Navigation ════════════════════════════════════ */

.sidebar-nav {
  flex: 1;
  padding: 0 var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--space-3); }

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nav-label);
  padding: var(--space-3) var(--space-3) var(--space-1);
  display: block;
  user-select: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.45rem var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--nav-text);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  line-height: 1.4;
  min-height: 34px;
  position: relative;
}
.nav-link:hover {
  background: var(--nav-bg-hover);
  color: var(--nav-text-hover);
  text-decoration: none;
}
.nav-link.is-active {
  background: var(--nav-bg-active);
  color: var(--nav-text-active);
  box-shadow: inset 3px 0 0 var(--nav-accent);
}

/* SVG icon inside nav links */
.nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.nav-link.is-active .nav-icon { opacity: 1; }

.nav-badge {
  margin-left: auto;
  background: var(--nav-accent);
  color: var(--nav-bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 99px;
}

.sidebar-separator {
  height: 1px;
  background: var(--nav-border);
  margin: var(--space-2) var(--space-3);
}

.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--nav-border);
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--nav-label);
}
.sidebar-footer-legal {
  margin-top: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sidebar-footer-links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}
.sidebar-footer-links a {
  color: var(--nav-label);
  text-decoration: none;
}
.sidebar-footer-links a:hover {
  color: var(--nav-text-hover);
  text-decoration: underline;
}
.sidebar-footer-links span {
  color: var(--nav-label);
  opacity: 0.6;
}
.sidebar-footer-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.sidebar-footer-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(96,165,250,0.2);
  color: var(--nav-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Mobile sidebar toggle button */
.sidebar-toggle {
  background: transparent;
  border: 0;
  color: var(--neutral-700);
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.sidebar-toggle:hover { background: var(--neutral-100); }
.mobile-only, .desktop-hidden { display: none; }
.desktop-only-text { display: inline; }

/* ══ 5. Surfaces & cards ══════════════════════════════ */

.surface-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
}
.surface-subtle {
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.section-header h2 { font-size: var(--text-md); font-weight: 650; color: var(--neutral-900); }
.section-header h3 { font-size: var(--text-base); font-weight: 650; }

.grid-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4); }
.detail-layout { align-items: start; }
.flex { display: flex; align-items: center; }
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-4); }

.stack-sm, .stack-md, .stack-lg, .flash-stack { display: grid; }
.flash-stack { gap: var(--space-3); }
.stack-sm { gap: var(--space-2); }
.stack-md { gap: var(--space-4); }
.stack-lg { gap: var(--space-6); }

/* ══ 6. Buttons ═══════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 550;
  line-height: 1.4;
  min-height: 36px;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.45; pointer-events: none; cursor: default; }

.btn-primary {
  background: var(--primary-700);
  color: #fff;
  border-color: var(--primary-800);
  box-shadow: 0 1px 2px rgba(16,42,67,0.15);
}
.btn-primary:hover { background: var(--primary-800); }

.btn-secondary {
  background: var(--primary-50);
  color: var(--primary-800);
  border-color: var(--primary-100);
}
.btn-secondary:hover { background: var(--primary-100); }

.btn-ghost {
  background: transparent;
  color: var(--neutral-700);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--neutral-100); color: var(--neutral-950); }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover { filter: brightness(0.92); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: var(--text-xs); min-height: 30px; }
.btn-xs { padding: 0.15rem 0.45rem; font-size: var(--text-xs); min-height: 24px; }

/* Icon inside button */
.btn > svg {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ══ 7. Form elements ═════════════════════════════════ */

.form-grid { display: grid; gap: var(--space-3); }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.two-col .full-width { grid-column: 1 / -1; }
.form-field { display: grid; gap: 0.3rem; }
.form-field span, .form-field label {
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--neutral-800);
}
.form-field .field-hint { font-size: var(--text-xs); color: var(--neutral-600); font-weight: 400; }
.compact-field { min-width: 160px; }
.flex-grow { flex: 1; min-width: 0; }
.checkbox-field { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2); }
.checkbox-field input { width: auto; }
.required-star { color: var(--danger); }

input, textarea, select {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  color: var(--neutral-950);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.4;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(47,118,173,0.14);
}
input::placeholder, textarea::placeholder { color: var(--neutral-400); }

/* ══ 8. Badges & status chips ═════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: 650;
  background: var(--neutral-100);
  color: var(--neutral-700);
  white-space: nowrap;
  text-transform: capitalize;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger  { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info    { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--neutral-150); color: var(--neutral-700); }
.badge-primary { background: var(--primary-50); color: var(--primary-800); }

/* Data-status badge variants */
.badge[data-status="open"]             { background: var(--neutral-100); color: var(--neutral-700); }
.badge[data-status="in_progress"],
.badge[data-status="active"]           { background: var(--info-bg); color: var(--info); }
.badge[data-status="resolved"],
.badge[data-status="completed"]        { background: var(--success-bg); color: var(--success); }
.badge[data-status="stalled"]          { background: var(--warning-bg); color: var(--warning); }
/* Per-party waiting colors match the "Currently Waiting On" dashboard card */
.badge[data-status="waiting_client"]   { background: #fffbeb; color: #b45309; }
.badge[data-status="waiting_insurer"]  { background: var(--primary-50); color: var(--primary-700); }
.badge[data-status="waiting_expert"]   { background: #f5f3ff; color: #6d28d9; }
.badge[data-status="waiting_other"]    { background: var(--neutral-100); color: var(--neutral-600); }
.badge[data-status="closed"],
.badge[data-status="skipped"]          { background: var(--neutral-100); color: var(--neutral-500); }
.badge[data-status="admin"],
.badge[data-status="developer"],
.badge[data-status="broker"]           { background: var(--primary-50); color: var(--primary-800); }
.badge[data-status="readonly"]         { background: var(--neutral-100); color: var(--neutral-600); }
.badge[data-status="pending"]          { background: var(--neutral-100); color: var(--neutral-600); }

/* Timeline step marker variants */
.timeline-step-marker[data-status="active"]          { background: var(--info); }
.timeline-step-marker[data-status="completed"]       { background: var(--success); }
.timeline-step-marker[data-status="stalled"]         { background: var(--warning); }
.timeline-step-marker[data-status="skipped"]         { background: var(--neutral-400); }
.timeline-step-marker[data-status="pending"]         { background: var(--neutral-300); }
.timeline-step-marker[data-status="waiting_client"]  { background: #d97706; }
.timeline-step-marker[data-status="waiting_insurer"] { background: #2563eb; }
.timeline-step-marker[data-status="waiting_expert"]  { background: #7c3aed; }
.timeline-step-marker[data-status="waiting_other"]   { background: #9ca3af; }

.responsible-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
  background: var(--primary-50);
  color: var(--primary-800);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ══ 9. Tables ════════════════════════════════════════ */

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 660px;
  font-size: var(--text-sm);
}
.data-table th {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--neutral-50);
  white-space: nowrap;
}
.data-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--neutral-150);
  vertical-align: middle;
  color: var(--neutral-900);
}
.data-table tbody tr:hover td { background: var(--neutral-50); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ══ 10. Dashboard & metrics ══════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Enhanced metric card */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stat-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg {
  width: 17px; height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-icon-blue   { background: var(--info-bg);    color: var(--info); }
.stat-icon-green  { background: var(--success-bg); color: var(--success); }
.stat-icon-amber  { background: var(--warning-bg); color: var(--warning); }
.stat-icon-red    { background: var(--danger-bg);  color: var(--danger); }
.stat-icon-purple { background: #f3f0ff; color: #7c3aed; }

.stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-value {
  font-size: 1.75rem;
  font-weight: 750;
  line-height: 1;
  color: var(--neutral-950);
  letter-spacing: -0.03em;
}
.stat-change {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── Operational KPI grid ──────────────────────────────
 *  6 cards in a single row on desktop, wraps on small screens.
 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow var(--transition-fast);
}
.kpi-card:hover { box-shadow: var(--shadow-sm); }

.kpi-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 2px;
}

.kpi-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Size modifiers — use with kpi-icon + kpi-icon-{color} */
.kpi-icon.kpi-icon-sm { width: 28px; height: 28px; border-radius: var(--radius-sm); }
.kpi-icon.kpi-icon-sm svg { width: 14px; height: 14px; }
.kpi-icon.kpi-icon-xs { width: 22px; height: 22px; border-radius: var(--radius-xs); }
.kpi-icon.kpi-icon-xs svg { width: 12px; height: 12px; }
/* Colour variants */
.kpi-icon-blue   { background: var(--info-bg);    color: var(--info); }
.kpi-icon-green  { background: var(--success-bg); color: var(--success); }
.kpi-icon-purple { background: #f3f0ff;           color: #7c3aed; }
.kpi-icon-amber  { background: var(--warning-bg); color: var(--warning); }
.kpi-icon-teal   { background: #e6faf5;           color: #0d9488; }
.kpi-icon-indigo { background: #eef2ff;           color: #4f46e5; }
.kpi-icon-red    { background: var(--danger-bg);  color: var(--danger); }
.kpi-icon-gray   { background: var(--neutral-100); color: var(--neutral-600); }
/* ── Fire/Water/Storm composed icon badge ──────────────────────────────────── */
/* Dedicated badge with absolute-positioned flame + droplet icons that overlap. */
/* Replaces the old .kpi-icon-fire-water / .kpi-icon-fire-water-3p approach.   */
.fire-water-icon-badge {
  position: relative;
  width: var(--dashboard-icon-badge-size, 2.25rem);
  height: var(--dashboard-icon-badge-size, 2.25rem);
  min-width: var(--dashboard-icon-badge-size, 2.25rem);
  border-radius: var(--dashboard-icon-radius, 0.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
  vertical-align: middle;
}

.fire-water-part {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Flame: dominant shape — larger, left/center, on top */
.fire-water-part--flame {
  width: 1.25rem;
  height: 1.25rem;
  left: 0.44rem;
  top: 0.64rem;
  transform: scale(1.08);
  z-index: 2;
}

/* Droplet: secondary accent — smaller, upper-right, behind the flame */
.fire-water-part--drop {
  width: 0.9rem;
  height: 0.9rem;
  right: 0.48rem;
  top: 0.48rem;
  transform: scale(0.82);
  z-index: 1;
}

/* No-third-party variant: pale yellow bg, amber flame + blue droplet */
.fire-water-icon-badge--no-third-party {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
}

.fire-water-icon-badge--no-third-party .fire-water-part--flame { color: #D97706; }
.fire-water-icon-badge--no-third-party .fire-water-part--drop  { color: #2563EB; }

/* Third-party variant: pale orange bg, burnt-orange flame + teal droplet */
.fire-water-icon-badge--third-party {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
}

.fire-water-icon-badge--third-party .fire-water-part--flame { color: #EA580C; }
.fire-water-icon-badge--third-party .fire-water-part--drop  { color: #14B8A6; }

.kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--neutral-600);
  line-height: 1.3;
}

.kpi-value {
  font-size: 1.85rem;
  font-weight: 750;
  line-height: 1;
  color: var(--neutral-950);
  letter-spacing: -0.03em;
}

.kpi-delta { min-height: 1.5em; }
.kpi-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 99px;
}
.kpi-delta-up-good    { background: #dcfce7; color: #15803d; }
.kpi-delta-up-bad     { background: #fee2e2; color: #b91c1c; }
.kpi-delta-neutral    { background: var(--neutral-100); color: var(--neutral-600); font-size: var(--text-xs); }

/* ── Opened vs. Resolved layout ────────────────────────
 *  Main chart row: wide chart + right sidebar stacked
 */
/* ── Dashboard main shared grid ────────────────────────────────────────
 * Single parent grid so all rows share the same track sizing:
 *   Columns:  3 equal lower-card columns + 1 wider right column
 *   Row 1:    [Opened vs Resolved  ← col 1-3 →] [Backlog Health col 4]
 *   Row 2:    [Age col 1] [Waiting On col 2] [Top Types col 3] [Recent Activity col 4]
 * This guarantees Recent Activity aligns exactly with the three lower cards.
 */
.dash-main-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 1.5fr);
  grid-template-rows: auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

/* Chart spans the first three columns, row 1 */
.dash-chart-card {
  grid-column: 1 / 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Backlog Health: right column, row 1 */
.dash-backlog-card {
  grid-column: 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}
.dash-backlog-card .progress-rows { flex: 1; }
.dash-backlog-card .dash-panel-footer { margin-top: auto; padding-top: var(--space-3); }

/* Recent Activity: right column, row 2 — fills remaining height */
.dash-recent-activity-card {
  grid-column: 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Feed scrolls internally — height is determined by the card, not the content. */
.dash-recent-activity-card .activity-feed {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.dash-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dash-chart-header h2 { font-size: var(--text-md); font-weight: 650; color: var(--neutral-900); }

.dash-range-group { display: flex; gap: 3px; }
.dash-range-btn { border-radius: var(--radius-xs) !important; }
.dash-range-btn.is-active {
  background: var(--primary-700) !important;
  color: #fff !important;
  border-color: var(--primary-800) !important;
}

.dash-ovr-body {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  min-height: 260px;
}
.dash-chart-area {
  flex: 1;
  min-width: 0;
  min-height: 240px;
}
.dash-ovr-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
  border-left: 1px solid var(--border);
  flex-shrink: 0;
  width: 130px;
}
.ovr-stat { display: flex; flex-direction: column; gap: 2px; }
.ovr-stat-label { font-size: var(--text-xs); color: var(--neutral-500); }
.ovr-stat-value { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; }
.ovr-opened { color: #16a34a; }
.ovr-resolved { color: #7c3aed; }
.ovr-net-positive { color: var(--danger); }
.ovr-net-negative { color: var(--success); }
.ovr-net-neutral  { color: var(--neutral-700); }

/* ── Bottom three lower cards: placed directly in .dash-main-row (row 2, cols 1-3).
   .grid-three is kept as a reusable utility for other 3-column layouts. */
.grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

/* Cards in the lower three-column grid stretch to equal height */
.dash-lower-card {
  display: flex;
  flex-direction: column;
}
.dash-lower-card .progress-rows { flex: 1; }
.dash-lower-card .top-types-list { flex: 1; }
.dash-lower-card .dash-panel-footer { margin-top: auto; padding-top: var(--space-3); }

/* ── Progress rows (Backlog Health, Age, Waiting On) ───── */
/* align-items: start prevents individual row items from stretching vertically.
   align-content: start groups rows near the top — prevents gap distribution when
   the card is taller than the content (do NOT use justify-content: space-*). */
.progress-rows { display: grid; gap: 0.75rem; align-items: start; align-content: start; }
.progress-row { display: flex; flex-direction: column; gap: 4px; }
.progress-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.progress-row-label { flex: 1; color: var(--neutral-800); font-weight: 500; white-space: nowrap; }
.progress-row-count { font-weight: 700; color: var(--neutral-900); white-space: nowrap; }
.progress-row-pct { color: var(--neutral-500); font-size: var(--text-xs); min-width: 2.8em; text-align: right; white-space: nowrap; }
.progress-bar-track {
  width: 100%;
  height: 7px;
  background: var(--neutral-150);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar-track .progress-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.45s ease;
  background: var(--primary-700);
}

/* ── Inline single-line progress rows (Age & Waiting On) ─────────────
 *
 * Uses a fixed CSS grid so the bar has a bounded width and label / count /
 * percentage stay visually connected instead of spreading across the card.
 *
 *  Without icon  (Aging):       label  | bar   | count | pct
 *  With icon (Waiting On):      icon   | label | bar   | count | pct
 *
 * The .progress-row-has-icon modifier is added by the Waiting On renderer.
 */
.progress-row-inline {
  display: grid;
  grid-template-columns: auto 1fr 2.5em 2.8em;
  align-items: center;
  gap: 0.5rem;
  flex-direction: unset; /* cancel flex column from .progress-row */
  flex-wrap: unset;
}
.progress-row-inline.progress-row-has-icon {
  grid-template-columns: 36px auto 1fr 2.5em 2.8em;
}
/* Bar track inside an inline row no longer needs flex-grow */
.progress-row-inline .progress-bar-track {
  width: 100%;
  min-width: 0;
  flex: unset;
}

/* ── Panel footer link ─────────────────────────────────── */
.dash-panel-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--neutral-150);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--neutral-600);
}
.btn-link-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary-600);
  text-decoration: none;
}
.btn-link-sm:hover { color: var(--primary-800); text-decoration: underline; }

/* ── Top claim types list ──────────────────────────────── */
.top-types-list { display: flex; flex-direction: column; gap: 0; }
.top-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-size: var(--text-sm);
  transition: background 0.12s;
}
.top-type-row:hover { background: var(--neutral-50); }

.type-chip-stats { display: flex; gap: var(--space-2); align-items: center; }
.top-type-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ── Claim-type chips ──────────────────────────────────── */
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
}
.type-chip-icon { font-size: 0.85em; line-height: 1; }
.type-chip-label { }

/* Claim-type chip colour variants */
.chip-red    { background: #fef2f2; color: #b91c1c; }
.chip-blue   { background: #eff6ff; color: #1d4ed8; }
.chip-orange { background: #fff7ed; color: #c2410c; }
.chip-cyan   { background: #ecfeff; color: #0e7490; }
.chip-green  { background: #f0fdf4; color: #15803d; }
.chip-amber  { background: #fffbeb; color: #b45309; }
.chip-purple { background: #f5f3ff; color: #6d28d9; }
.chip-indigo { background: #eef2ff; color: #4338ca; }
.chip-gray   { background: var(--neutral-100); color: var(--neutral-600); }

/* ── Open Claims by Type chip cards (bottom section) ───── */
.type-chips-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.type-chips-heading { font-size: var(--text-md); font-weight: 650; }
.type-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.type-chip-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--neutral-50);
  border: 1px solid var(--border);
  min-width: 160px;
  flex: 1 1 160px;
  gap: var(--space-3);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  text-decoration: none;
}
.type-chip-card:hover { box-shadow: var(--shadow-sm); border-color: var(--primary-300); }
.type-chip-card-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.type-chip-card-label { font-size: var(--text-xs); color: var(--neutral-600); }
.type-chip-card-count { font-size: var(--text-lg); font-weight: 750; letter-spacing: -0.02em; color: var(--neutral-950); }
.type-chip-card-pct { font-size: var(--text-xs); font-weight: 600; color: var(--neutral-500); }

/* ── Activity feed (new style) ─────────────────────────── */
.activity-icon-wrap {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.activity-icon-0 { background: var(--info-bg);    color: var(--info); }
.activity-icon-1 { background: var(--success-bg); color: var(--success); }
.activity-icon-2 { background: var(--warning-bg); color: var(--warning); }
.activity-icon-3 { background: var(--danger-bg);  color: var(--danger); }
.activity-icon-4 { background: #f5f3ff;           color: #6d28d9; }

.type-list { display: grid; gap: var(--space-2); }
.type-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--neutral-150);
  font-size: var(--text-sm);
}
.type-list-item:last-child { border-bottom: none; }

.activity-feed { display: grid; gap: 0; }
.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--neutral-150);
  font-size: var(--text-sm);
}
.activity-item:last-child { border-bottom: none; }
.activity-item strong { color: var(--neutral-900); font-weight: 550; }
.compact-feed .activity-item { padding: 0.45rem 0; }

/* Activity feed within the dashboard card scrolls internally (height set by the flex card) */
#recentActivityFeed { overflow-y: auto; }

/* ── Waiting On: clickable rows ──────────────────────── */
.progress-row-clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.35rem;
  margin: 0 -0.35rem;
  transition: background 0.15s;
}
.progress-row-clickable:hover { background: var(--neutral-100); }

/* ── Waiting On row icons now use the standard kpi-icon component ────── */
/* .progress-row-icon is kept for any legacy/third-party uses only */
.progress-row-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Small select for section headers ────────────────── */
.select-sm {
  appearance: none;
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 1.4rem 0.2rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 8px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}
.select-sm:focus { outline: 2px solid var(--primary-400); outline-offset: 1px; }

/* ── SVG icon chip wrapper for type chips ────────────── */
.type-chip-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
}

/* ── Type glyph: icon-only colored badge ─────────────── */
/* Used in top-types list and claims table (glyph only, text beside) */
.type-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
}
/* Dual-glyph pair for combined types (e.g. Fire / Water / Storm) */
.type-glyph-pair {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}
.type-glyph-pair .type-glyph {
  width: 22px; height: 22px;
}

/* Plain neutral text for type names when glyph is split off */
.type-chip-text-plain {
  color: var(--neutral-800);
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Container: icon-glyph + plain text side by side */
.type-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.status-overview { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Open Claims by Type chip cards (bottom section) ───── */

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--neutral-200);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar-lg { height: 9px; }
.progress-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-700), var(--primary-500));
  border-radius: inherit;
  transition: width 0.5s ease;
}
.progress-block { min-width: 180px; }
.progress-block-wide { min-width: min(100%, 320px); }

/* ══ 12. Timeline ══════════════════════════════════════ */

.timeline-list { display: grid; gap: var(--space-4); position: relative; }
.timeline-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  position: relative;
}
.timeline-step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: -20px;
  width: 2px;
  background: var(--neutral-200);
}
.timeline-step:last-child::before { display: none; }
.timeline-step-completed::before { background: var(--success-bdr); }

.timeline-step-marker {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  background: var(--neutral-400);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 1;
  position: relative;
}
.timeline-step-card { display: grid; gap: var(--space-3); }
.timeline-step-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.timeline-step-head h3 { font-size: var(--text-md); font-weight: 650; }
.timeline-step-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: var(--text-xs); }
.timeline-step-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Step-linked notes (sub-view within each step card) */
.step-notes-list { border-top: 1px solid var(--border); margin-top: var(--space-3); padding-top: var(--space-3); display: grid; gap: var(--space-2); }
.step-note-item { background: var(--surface-page); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.step-note-item.note-hidden-from-client { background: #f0fdf4; border-color: #86efac; }
.step-note-item.note-visible-to-client  { background: #f5f3ff; border-color: #c4b5fd; }
.step-note-title { display: block; font-weight: 600; color: var(--neutral-900); margin-bottom: 2px; }
.step-note-body { margin: 2px 0 4px; color: var(--neutral-700); }

.timeline-step-active   .timeline-step-card { border-color: rgba(47,118,173,0.3); }
.timeline-step-completed .timeline-step-card { opacity: 0.85; }
.timeline-readonly .timeline-step-completed .timeline-step-card { background: rgba(22,130,93,0.04); }

.timeline-step.is-pulsing .timeline-step-marker {
  animation: pulseMarker 2.2s infinite;
}
@keyframes pulseMarker {
  0%   { box-shadow: 0 0 0 0 rgba(47,118,173,0.3); }
  70%  { box-shadow: 0 0 0 12px rgba(47,118,173,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,118,173,0); }
}

.stall-indicator {
  border-left: 3px solid var(--warning);
  background: var(--warning-bg);
  color: #7a4a08;
  padding: 0.7rem var(--space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
}

/* ══ 13. Messages ═════════════════════════════════════ */

.message-thread { display: grid; gap: 0.7rem; }
.message-bubble {
  max-width: 82%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.message-bubble.is-broker {
  justify-self: end;
  background: var(--primary-50);
  border-color: var(--primary-100);
}
.message-bubble.is-client { justify-self: start; }
.message-author { font-weight: 650; font-size: var(--text-sm); }
/* Subtle step-context label inside each message bubble (Step 71) */
.msg-step-context { font-size: 0.68em; color: var(--neutral-400); font-style: italic; margin-top: 0.1rem; }
.contact-list { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ── Step conversation banner (WhatsApp-style collapsible chat) ── */
.step-conv-banner {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.conv-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--surface-subtle);
  border: none;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  color: inherit;
}
.conv-header:hover { background: var(--primary-50); }
.conv-chevron { margin-left: auto; transition: transform 0.18s; opacity: 0.55; font-style: normal; }
.step-conv-banner.is-open .conv-chevron { transform: rotate(180deg); }
.conv-body { border-top: 1px solid var(--border); }
.conv-thread {
  max-height: 380px;
  overflow-y: auto;
  padding: 0.75rem;
  display: grid;
  gap: 0.55rem;
}
.conv-thread .message-bubble { max-width: 88%; }
.conv-compose {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.conv-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: var(--text-sm);
  background: var(--surface);
  line-height: 1.45;
  min-height: 2.1rem;
  max-height: 6rem;
  overflow-y: auto;
}
.conv-input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.conv-older-wrap { padding: 0.35rem 0.75rem 0; text-align: center; }

/* ══ 14. Claim workspace ══════════════════════════════ */

.claim-header-card, .client-claim-card { display: grid; gap: var(--space-4); }
.claim-header-main {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  flex-wrap: wrap;
}
.claim-header-meta { display: grid; gap: var(--space-2); justify-items: end; }
.claim-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Active step banner — fills the white space between claim header and broker message */
/* Active step pinned card at the top of the claim (exact clone of a timeline step card) */
#activeStepBanner {
  margin-top: var(--space-4);
}
.active-step-pin-label {
  margin-bottom: var(--space-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.active-step-pin-card {
  border: 2px solid var(--primary-300, #93c5fd);
  border-radius: var(--radius-md);
}
/* Legacy banner style kept for graceful degradation */
.active-step-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-50, #f8f9fa);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.active-step-banner-label { white-space: nowrap; flex-shrink: 0; }
.active-step-banner-body { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; flex: 1; }

/* Unanswered question indicator on claims table rows */
.has-unanswered-question { background: var(--warning-bg, #fffbeb); }
.unanswered-indicator { font-size: 0.75rem; margin-left: var(--space-1); vertical-align: middle; }
.badge-warn { background: var(--warning-bg, #fffbeb); color: var(--warning, #92400e); border: 1px solid var(--warning, #92400e); }

/* Pending GDPR request indicator on claims table rows */
.badge-dsr-pending { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; font-size: 0.7em; }

/* GDPR-erased claims table row and badges */
.gdpr-erased-row { opacity: 0.55; }
.badge-gdpr-erased { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; font-size: 0.7em; }

/* GDPR-erased timeline steps */
.timeline-erased .timeline-step { opacity: 0.5; pointer-events: none; }
.gdpr-erased-banner {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  color: #374151;
}
.gdpr-erased-banner strong { display: block; margin-bottom: var(--space-1); }

/* Erased claim — gray out entire editable sections (timeline, claim info, attachments etc.) */
.section-erased {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  position: relative;
}
.section-erased::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 8px,
    rgba(0,0,0,0.03) 8px,
    rgba(0,0,0,0.03) 16px
  );
  pointer-events: none;
}


/* Older messages toggle container */
.older-msgs-container { border-left: 2px solid var(--border); padding-left: var(--space-3); margin-bottom: var(--space-2); }

.broker-message-callout {
  border: 1px solid var(--primary-100);
  background: var(--primary-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* ══ 15. Client-facing shell ══════════════════════════ */

.client-shell {
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(29,77,118,0.07) 0%, transparent 140px), var(--page-bg);
}
.client-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 52px;
}
.client-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: var(--text-md); }
.client-content { max-width: 920px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); display: grid; gap: var(--space-4); }

/* ══ 16. Auth page ════════════════════════════════════ */

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--page-bg); }
.auth-card { max-width: 380px; width: 100%; }
.auth-card-header { margin-bottom: var(--space-5); }
.auth-card-header h1 { font-size: var(--text-xl); font-weight: 750; }
.auth-card-header p { margin-top: var(--space-1); color: var(--neutral-600); font-size: var(--text-sm); }

/* ══ 17. Flash & form messages ════════════════════════ */

.flash-message, .form-message {
  padding: 0.65rem var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-sm);
}
.flash-success, .form-message.success { background: var(--success-bg); border-color: var(--success-bdr); color: var(--success); }
.flash-error,   .form-message.error   { background: var(--danger-bg);  border-color: var(--danger-bdr);  color: var(--danger); }
.form-message.info    { background: var(--info-bg);    border-color: var(--info-bdr);    color: var(--info); }
.form-message.warning { background: var(--warning-bg); border-color: var(--warning-bdr); color: var(--warning); }

/* ══ 18. User menu ════════════════════════════════════ */

.user-menu { position: relative; }
.user-menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 99px;
  padding: 0.3rem 0.65rem 0.3rem 0.3rem;
  font-size: var(--text-sm);
  font-weight: 550;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.user-menu-toggle:hover { background: var(--neutral-50); border-color: var(--border-strong); }
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  color: var(--primary-800);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.user-menu-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: 210px;
  padding: var(--space-3);
  display: none;
  z-index: 50;
}
.user-menu-panel.is-open { display: block; }
.user-menu-info {
  display: grid;
  gap: 0.15rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.user-menu-info strong { font-size: var(--text-sm); }

/* ══ 19. Utility classes ══════════════════════════════ */

.margin-top-md { margin-top: var(--space-4); }
.margin-top-lg { margin-top: var(--space-6); }
.centered-empty-state { text-align: center; padding: var(--space-12) var(--space-5); }
.centered-empty-state svg { margin: 0 auto var(--space-4); opacity: 0.35; }
.filter-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.filter-group { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; flex: 1; }

/* ══ 20. Attachments ══════════════════════════════════ */

.attachment-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: var(--space-3); }
.attachment-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.65rem;
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.attachment-icon { font-size: 1rem; flex-shrink: 0; }
.attachment-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary-700); }
.attachment-name:hover { text-decoration: underline; }

/* ══ 21. DSR ══════════════════════════════════════════ */

.dsr-item { padding: 0.65rem var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-2); border: 1px solid var(--border); }
.dsr-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: 0.2rem; }
.dsr-status-pending  { background: #f39c12; color: #fff; }
.dsr-status-executed { background: #27ae60; color: #fff; }
.dsr-status-rejected { background: var(--danger); color: #fff; }
.dsr-status-approved { background: var(--primary-700); color: #fff; }
.dsr-export-pre {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
  overflow: auto;
  max-height: 280px;
  margin-top: var(--space-2);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ══ 22. Language toggle ══════════════════════════════ */

.lang-toggle { display: flex; align-items: center; gap: 2px; }
.lang-toggle-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: 1rem;
  line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.lang-toggle-btn:hover { opacity: 0.8; }
.lang-toggle-btn.is-active { opacity: 1; border-color: var(--primary-500); }
.timeline-footer-lang { display: flex; justify-content: center; padding: var(--space-4) 0; }

/* ══ 23. Toggle switch ════════════════════════════════ */

.toggle-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.toggle-switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  display: block;
  width: 2.5rem; height: 1.375rem;
  background: var(--neutral-300);
  border-radius: 99px;
  transition: background var(--transition-fast);
  position: relative;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 0.175rem; left: 0.175rem;
  width: 1rem; height: 1rem;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-track { background: var(--primary-600); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(1.125rem); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* ══ 24. Responsive breakpoints ═══════════════════════ */

@media (max-width: 1400px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-two { grid-template-columns: 1fr; }
  /* Dashboard: collapse to 2-column (chart+backlog full width, lower cards 2-per-row) */
  .dash-main-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .dash-chart-card { grid-column: 1 / 3; grid-row: auto; }
  .dash-backlog-card { grid-column: 1 / 3; grid-row: auto; }
  .dash-recent-activity-card { grid-column: 1 / 3; grid-row: auto; }
  .dash-ovr-totals { flex-direction: row; width: 100%; border-left: none; border-top: 1px solid var(--border); padding: var(--space-3) 0 0; }
  .dash-ovr-body { flex-direction: column; }
  .grid-three { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
  }
  .sidebar.is-open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .mobile-only, .desktop-hidden { display: inline-flex; }
  .desktop-only-text { display: none; }
  .topbar { padding: 0 var(--space-4); }
  .content-area { padding: var(--space-4); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.two-col { grid-template-columns: 1fr; }
  .message-bubble { max-width: 100%; }
  .grid-three { grid-template-columns: 1fr; }
  .dash-main-row { grid-template-columns: 1fr; }
  .dash-chart-card { grid-column: 1; }
  .dash-backlog-card { grid-column: 1; }
  .dash-recent-activity-card { grid-column: 1; grid-row: auto; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-chips-row { flex-direction: column; }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-step { grid-template-columns: 36px minmax(0, 1fr); }
  .timeline-step-marker { width: 36px; height: 36px; }
  .timeline-step::before { left: 17px; }
  .claim-header-main, .filter-bar, .section-header, .client-topbar { flex-direction: column; align-items: stretch; }
  .data-table { min-width: 560px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ 25. Safe-area / notch support ════════════════════ */

@supports (padding: env(safe-area-inset-bottom)) {
  .sidebar { padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
  .topbar { padding-left: max(var(--space-6), env(safe-area-inset-left)); padding-right: max(var(--space-6), env(safe-area-inset-right)); }
}

@media (display-mode: standalone) {
  .topbar { padding-top: max(0px, env(safe-area-inset-top)); height: calc(52px + env(safe-area-inset-top, 0px)); }
  .client-topbar { padding-top: max(0px, env(safe-area-inset-top)); }
}

/* ══ 26. Touch targets ════════════════════════════════ */

@media (pointer: coarse) {
  .btn { min-height: 42px; padding: 0.6rem 0.875rem; }
  .btn-sm { min-height: 36px; }
  .nav-link { min-height: 42px; }
  input, textarea, select { min-height: 42px; font-size: 16px; }
  .user-menu-toggle { min-height: 42px; }
  .sidebar-toggle { min-height: 42px; min-width: 42px; }
  .btn:hover { filter: none; }
}

/* ══ 28. Settings tabs ════════════════════════════════ */

.settings-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}

.settings-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--neutral-600);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.settings-tab-btn:hover {
  color: var(--primary-700);
  background: var(--primary-50);
  border-bottom-color: var(--primary-300);
}

.settings-tab-btn.active {
  color: var(--primary-700);
  border-bottom-color: var(--primary-600);
  background: var(--primary-50);
}

.settings-tab-btn .tab-icon {
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.settings-tab-panel {
  display: none;
}

.settings-tab-panel.active {
  display: block;
}

/* Status dot */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-ok      { background: var(--success); }
.status-dot-warn    { background: var(--warning); }
.status-dot-error   { background: var(--danger); }
.status-dot-neutral { background: var(--neutral-400); }

/* GDPR info panel */
.gdpr-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.gdpr-info-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.gdpr-info-card .gdpr-card-title {
  font-weight: 650;
  font-size: var(--text-sm);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gdpr-info-card .gdpr-card-body {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: 1.5;
}

/* ══ 27. Document Request Wizard ══════════════════════ */

.doc-wizard-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.doc-wizard-row {
  display: grid;
  grid-template-columns: 1.25rem 8rem 1fr;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
  transition: background 0.12s;
}
.doc-wizard-row:hover {
  background: var(--color-subtle, #f8fafc);
}
.doc-wizard-row input[type="checkbox"] {
  margin: 0;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
}
.doc-wizard-row .doc-wizard-priority {
  display: flex;
  justify-content: flex-start;
}
.doc-wizard-priority-badge {
  border: none;
  font: inherit;
  cursor: pointer;
  font-size: 0.75em;
}
.doc-wizard-priority-badge:hover {
  opacity: 0.75;
}
.doc-wizard-row .doc-wizard-label {
  text-align: left;
  line-height: 1.4;
  color: var(--text-primary, #111827);
}
.doc-wizard-select-all-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.4rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.doc-wizard-select-all-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}
.doc-wizard-select-all-row label {
  cursor: pointer;
  user-select: none;
}

/* ══ 29. Settings Dashboard ═══════════════════════════ */

/* Page shell */
.settings-page { padding: 1.25rem; }

/* ─── Page header row ─────────────────────────────────── */
.settings-header-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.settings-header-icon { flex-shrink: 0; margin-top: 0.1rem; }
.settings-header-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  letter-spacing: -0.01em;
}
.settings-header-sub {
  margin: 0.3rem 0 0;
  color: var(--neutral-500);
  font-size: var(--text-sm);
  max-width: 56rem;
}

/* ─── KPI row (6 cards) ───────────────────────────────── */
.settings-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.settings-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.85rem 0.7rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.settings-kpi-card:hover { box-shadow: var(--shadow-md); }
.settings-kpi-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.settings-kpi-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.settings-kpi-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-kpi-sub {
  font-size: 0.7rem;
  color: var(--neutral-500);
}
.settings-kpi-status-icon { flex-shrink: 0; margin-top: 0.1rem; }

/* Progress bar inside KPI card */
.settings-kpi-progress-wrap {
  height: 4px;
  border-radius: 2px;
  background: var(--neutral-150);
  overflow: hidden;
  margin-top: 0.3rem;
}
.settings-kpi-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--primary-500, #2563eb);
  transition: width 0.4s ease;
}

/* ─── Main dashboard grid ─────────────────────────────── */
.settings-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
/* Full-width card (Document Wizard) */
.settings-panel-card--full {
  grid-column: 1 / -1;
}

/* ─── Panel card (replaces old settings-overview-card) ─── */
.settings-panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.settings-panel-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-300);
}

/* Keep old class working for existing elements */
.settings-overview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.settings-overview-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-300);
}

/* ─── Card header ──────────────────────────────────────── */
.settings-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: start;
}
.settings-icon-badge { flex-shrink: 0; }
.settings-card-title {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--neutral-900);
  margin-bottom: 0.15rem;
}
.settings-card-desc {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: 1.4;
}

/* ─── Metadata rows ────────────────────────────────────── */
.settings-meta-list {
  margin: 0.8rem 0 0;
  display: grid;
  gap: 0.4rem;
  flex: 1;
}
.settings-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
}
.settings-meta-row dt {
  color: var(--neutral-500);
  font-weight: 400;
  white-space: nowrap;
}
.settings-meta-row dd {
  margin: 0;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: right;
  word-break: break-word;
  min-width: 0;
}
.settings-meta-mono {
  font-family: monospace;
  font-size: 0.78rem !important;
}

/* ─── Card footer ──────────────────────────────────────── */
.settings-card-footer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ─── Application card ─────────────────────────────────── */
.settings-app-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  margin-top: 0.85rem;
  flex: 1;
}
.settings-app-meta { margin-top: 0; }

/* Brand preview */
.settings-brand-preview {
  flex-shrink: 0;
  width: 140px;
}
.settings-brand-preview-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.settings-brand-preview-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.settings-brand-preview-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem 0.4rem;
}
.settings-brand-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}
.settings-brand-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--neutral-800);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-brand-tagline {
  font-size: 0.6rem;
  color: var(--neutral-400);
  white-space: nowrap;
}
.settings-brand-colorbar {
  height: 4px;
  width: 100%;
}
.settings-brand-preview-lines {
  padding: 0.5rem 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.settings-brand-line {
  height: 5px;
  border-radius: 3px;
  background: var(--neutral-150);
}

/* ─── Modules card ─────────────────────────────────────── */
.settings-modules-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
  flex: 1;
}
.settings-module-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--border);
}
.settings-module-info { flex: 1; min-width: 0; }
.settings-module-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-800);
}
.settings-module-desc {
  font-size: 0.7rem;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-module-pill {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15em 0.6em;
  flex-shrink: 0;
}
.settings-module-pill--on  { background: var(--success-bg); color: var(--success); }
.settings-module-pill--off { background: var(--neutral-150); color: var(--neutral-500); }

/* ─── GDPR card ────────────────────────────────────────── */
.settings-gdpr-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.85rem;
  flex: 1;
}
.settings-compliance-grid { min-width: 0; }
.settings-compliance-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.settings-compliance-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.settings-compliance-item {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}
.settings-compliance-item-name {
  font-size: 0.67rem;
  color: var(--neutral-600);
  line-height: 1.3;
}
.settings-compliance-item-status {
  display: inline-block;
  margin-top: 0.1rem;
}

/* ─── Security card activity section ──────────────────── */
.settings-security-activity {
  margin-top: 0.85rem;
  padding: 0.6rem 0.7rem;
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.settings-security-activity-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.settings-security-activity-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.settings-sec-metric { text-align: center; }
.settings-sec-metric-label {
  font-size: 0.65rem;
  color: var(--neutral-500);
  margin-bottom: 0.2rem;
}
.settings-sec-metric-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.settings-sec-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 24px;
}
.settings-sec-bar {
  width: 6px;
  border-radius: 2px 2px 0 0;
  background: var(--danger, #dc2626);
  opacity: 0.7;
}
.settings-sec-bar--warn  { background: var(--warning, #d97706); }
.settings-sec-bar--blue  { background: var(--primary-500, #2563eb); }

/* ─── Database card body ───────────────────────────────── */
.settings-db-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  margin-top: 0.85rem;
  flex: 1;
}

/* Migration status panel */
.settings-migration-panel {
  flex-shrink: 0;
  width: 130px;
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
}
.settings-migration-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.settings-migration-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--neutral-700);
  margin-bottom: 0.45rem;
}
.settings-migration-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success, #16a34a);
  flex-shrink: 0;
}
.settings-migration-bar-wrap {
  height: 4px;
  border-radius: 2px;
  background: var(--neutral-150);
  overflow: hidden;
  margin-bottom: 0.2rem;
}
.settings-migration-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--primary-500, #2563eb);
}
.settings-migration-pct {
  font-size: 0.68rem;
  color: var(--neutral-500);
  text-align: right;
}

/* ─── Storage card body & donut ────────────────────────── */
.settings-storage-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  margin-top: 0.85rem;
  flex: 1;
}
.settings-donut-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.settings-donut-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-donut-chart-container {
  position: relative;
  width: 80px;
  height: 80px;
}
.settings-donut-chart-container--doc {
  width: 88px;
  height: 88px;
}
.settings-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.settings-donut-track {
  fill: none;
  stroke: var(--neutral-150);
  stroke-width: 10;
}
.settings-donut-fill {
  fill: none;
  stroke: var(--primary-500, #2563eb);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}
.settings-donut-center-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--neutral-800);
  pointer-events: none;
}
.settings-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.68rem;
}
.settings-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--neutral-700);
}
.settings-donut-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}
.settings-donut-swatch--used { background: var(--primary-500, #2563eb); }
.settings-donut-swatch--free { background: var(--neutral-200, #e5e7eb); }
.settings-donut-legend-value { font-weight: 700; color: var(--neutral-800); margin-left: auto; }

/* ─── Document Wizard card body ────────────────────────── */
.settings-docwizard-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: start;
  margin-top: 0.85rem;
  flex: 1;
}
.settings-docwizard-stats {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 120px;
}
.settings-docwizard-stat-label {
  font-size: 0.68rem;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}
.settings-docwizard-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.1;
}
.settings-docwizard-types { min-width: 0; }
.settings-docwizard-types-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.settings-docwizard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.settings-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2em 0.55em 0.2em 0.35em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.72rem;
  color: var(--neutral-700);
  white-space: nowrap;
}
.settings-type-chip-label { font-weight: 500; }
.settings-docwizard-overview {
  flex-shrink: 0;
  min-width: 180px;
}
.settings-docwizard-overview-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.settings-docwizard-overview-body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.settings-docwizard-legend {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.7rem;
}

/* ─── Back button in detail view ───────────────────────── */
.settings-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-600);
  margin-bottom: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.25rem 0;
}
.settings-detail-back:hover { color: var(--primary-700); }
.settings-detail-back svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1);
  flex-shrink: 0;
}

/* ─── Responsive breakpoints ───────────────────────────── */
@media (max-width: 1400px) {
  .settings-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .settings-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-panel-card--full { grid-column: 1 / -1; }
  .settings-app-body { grid-template-columns: 1fr; }
  .settings-brand-preview { width: auto; }
  .settings-db-body { grid-template-columns: 1fr; }
  .settings-storage-body { grid-template-columns: 1fr; }
  .settings-docwizard-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .settings-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-dashboard-grid { grid-template-columns: 1fr; }
  .settings-gdpr-body { grid-template-columns: 1fr; }
  .settings-compliance-items { grid-template-columns: 1fr; }
  .settings-security-activity-row { grid-template-columns: repeat(3, 1fr); }
}

/* ══ 28. Accessibility & reduced-motion ═══════════════ */

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
/* Remove default outline for mouse users */
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}