/* ================================================================
   Aakhyan Design System
   Apple-inspired aesthetic: Inter font, generous whitespace,
   frosted glass, subtle depth, smooth micro-animations.
   ================================================================ */

/* ── Tokens ───────────────────────────────────────────────────── */

:root {
  /* Colors — brand palette (from bloom icon gradient) */
  --ds-blue:      #0284C7;
  --ds-blue-hover:#0369A1;
  --ds-green:     #34C759;
  --ds-green-soft:#E8F9EE;
  --ds-amber:     #FF9500;
  --ds-amber-soft:#FFF4E5;
  --ds-red:       #FF3B30;
  --ds-red-soft:  #FFE5E3;

  /* Decorative accents — from brand icon palette */
  --ds-teal:      #0D9488;
  --ds-teal-soft: #CCFBF1;
  --ds-gold:      #FBBF24;
  --ds-gold-soft: #FEF9C3;

  --ds-gray-50:   #F9FAFB;
  --ds-gray-100:  #F2F2F7;
  --ds-gray-200:  #E5E5EA;
  --ds-gray-300:  #D1D1D6;
  --ds-gray-400:  #AEAEB2;
  --ds-gray-500:  #8E8E93;
  --ds-gray-600:  #636366;
  --ds-gray-900:  #1C1C1E;
  --ds-white:     #FFFFFF;

  /* Surfaces */
  --ds-bg:        var(--ds-gray-50);
  --ds-surface:   var(--ds-white);
  --ds-surface-2: var(--ds-gray-100);
  --ds-border:    var(--ds-gray-200);
  --ds-text:      var(--ds-gray-900);
  --ds-text-secondary: #5E5E63;  /* WCAG AA contrast — was var(--ds-gray-500) #8E8E93 */
  --ds-text-tertiary:  var(--ds-gray-400);

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

  /* Radius */
  --ds-radius-sm:  8px;
  --ds-radius-md:  12px;
  --ds-radius-lg:  16px;
  --ds-radius-xl:  20px;
  --ds-radius-full:9999px;

  /* Shadows */
  --ds-shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-md:  0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-lg:  0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --ds-shadow-xl:  0 8px 32px rgba(0,0,0,0.12);

  /* Typography — Source Sans 3 for better Indic script support, DM Sans for headings */
  --ds-font:       'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-heading: 'DM Sans', 'Source Sans 3', -apple-system, sans-serif;
  --ds-font-mono:  'SF Mono', 'Fira Code', 'Consolas', monospace;
  --ds-text-xs:    0.75rem;
  --ds-text-sm:    0.8125rem;
  --ds-text-base:  0.9375rem;
  --ds-text-lg:    1.125rem;
  --ds-text-xl:    1.375rem;
  --ds-text-2xl:   1.75rem;
  --ds-text-3xl:   2.25rem;
  --ds-leading-tight:  1.2;
  --ds-leading-normal: 1.5;

  /* Transitions */
  --ds-ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-duration: 200ms;

  /* Layout */
  --ds-sidebar-w: 220px;
  --ds-header-h:  56px;
  --ds-bottom-h:  60px;
  --ds-container:  960px;
}

/* ── Dark mode ────────────────────────────────────────────────── */

[data-theme="dark"] {
  --ds-bg:        #000000;
  --ds-surface:   #1C1C1E;
  --ds-surface-2: #2C2C2E;
  --ds-border:    #38383A;
  --ds-text:      #F5F5F7;
  --ds-text-secondary: #98989D;
  --ds-text-tertiary:  #8E8E93;

  --ds-green-soft:#1A3A24;
  --ds-amber-soft:#3A2A0F;
  --ds-red-soft:  #3A1A18;
  --ds-teal-soft: #0F2D2A;
  --ds-gold-soft: #2D2305;

  --ds-shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --ds-shadow-md:  0 2px 8px rgba(0,0,0,0.4);
  --ds-shadow-lg:  0 4px 16px rgba(0,0,0,0.5);
  --ds-shadow-xl:  0 8px 32px rgba(0,0,0,0.6);
}

/* ── Reset ────────────────────────────────────────────────────── */

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

html {
  font-family: var(--ds-font);
  font-size: 16px;
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100dvh; }

img, svg { display: block; max-width: 100%; }

a { color: var(--ds-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Typography ───────────────────────────────────────────────── */

h1, h2, h3, h4 { font-family: var(--ds-font-heading); }
h1 { font-size: var(--ds-text-3xl); font-weight: 700; line-height: var(--ds-leading-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--ds-text-2xl); font-weight: 700; line-height: var(--ds-leading-tight); letter-spacing: -0.015em; }
h3 { font-size: var(--ds-text-xl); font-weight: 600; line-height: var(--ds-leading-tight); }
h4 { font-size: var(--ds-text-lg); font-weight: 600; line-height: var(--ds-leading-tight); }

p { font-size: var(--ds-text-base); line-height: var(--ds-leading-normal); color: var(--ds-text-secondary); }

small, .text-sm { font-size: var(--ds-text-sm); }
.text-xs { font-size: var(--ds-text-xs); }
.text-lg { font-size: var(--ds-text-lg); }
.text-muted { color: var(--ds-text-secondary); }
.text-center { text-align: center; }

/* ── Skip link ────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--ds-space-4);
  z-index: 9999;
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--ds-blue);
  color: #fff;
  border-radius: var(--ds-radius-sm);
  font-weight: 600;
  font-size: var(--ds-text-sm);
}
.skip-link:focus { top: var(--ds-space-4); }

/* ── Layout ───────────────────────────────────────────────────── */

.app-layout {
  display: flex;
  min-height: 100dvh;
}

.main-content {
  flex: 1;
  padding: var(--ds-space-6);
  padding-top: calc(var(--ds-header-h) + var(--ds-space-6));
  max-width: var(--ds-container);
  margin: 0 auto;
  width: 100%;
}

/* ── Header ───────────────────────────────────────────────────── */

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--ds-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ds-space-6);
  background: rgba(249,250,251,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ds-border);
}

[data-theme="dark"] .app-header {
  background: rgba(0,0,0,0.72);
}

.app-logo {
  font-size: var(--ds-text-lg);
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}
.app-logo span {
  background: linear-gradient(135deg, #2563EB, #06B6D4, #0D9488, #FBBF24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}

/* Theme toggle */
.theme-toggle {
  background: none;
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ds-text-secondary);
  transition: background var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease);
  font-size: var(--ds-text-lg);
  line-height: 1;
}
.theme-toggle:hover {
  background: var(--ds-surface-2);
  color: var(--ds-text);
}

/* ── Sidebar ──────────────────────────────────────────────────── */

.nav-sidebar {
  position: fixed;
  top: var(--ds-header-h);
  left: 0;
  bottom: 0;
  width: var(--ds-sidebar-w);
  background: var(--ds-surface);
  border-right: 1px solid var(--ds-border);
  padding: var(--ds-space-6) var(--ds-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  z-index: 90;
}

.nav-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  transition: background var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease);
  text-decoration: none;
}

.nav-sidebar .nav-link:hover {
  background: var(--ds-surface-2);
  color: var(--ds-text);
  text-decoration: none;
}

.nav-sidebar .nav-link.active {
  background: var(--ds-blue);
  color: #fff;
}

.nav-sidebar .nav-link .nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
}

/* sidebar offset for desktop */
@media (min-width: 768px) {
  .main-content {
    margin-left: var(--ds-sidebar-w);
  }
}

/* ── Bottom nav (mobile) ──────────────────────────────────────── */

.nav-bottom {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--ds-bottom-h);
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  z-index: 100;
  padding: 0 var(--ds-space-2);
}

.nav-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.nav-bottom .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  text-decoration: none;
  padding: var(--ds-space-2) var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  transition: color var(--ds-duration) var(--ds-ease);
  min-width: 48px;
  min-height: 44px;
}

.nav-bottom .nav-link:hover { text-decoration: none; }

.nav-bottom .nav-link .nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; }
.nav-bottom .nav-link.active { color: var(--ds-blue); }

.nav-bottom .nav-link-cta {
  background: var(--ds-blue);
  color: #fff !important;
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-2) var(--ds-space-3);
  box-shadow: var(--ds-shadow-md);
}
.nav-bottom .nav-link-cta:hover,
.nav-bottom .nav-link-cta.active {
  background: var(--ds-blue-hover);
  color: #fff !important;
}
.nav-bottom .nav-link-cta .nav-icon {
  color: #fff;
}

@media (max-width: 767px) {
  .nav-sidebar { display: none; }
  .nav-bottom  { display: block; }
  .main-content {
    margin-left: 0;
    padding-bottom: calc(var(--ds-bottom-h) + var(--ds-space-6));
  }
}

/* ── Container ────────────────────────────────────────────────── */

.container { max-width: var(--ds-container); margin: 0 auto; width: 100%; }

/* ── Page header ──────────────────────────────────────────────── */

.page-header {
  margin-bottom: var(--ds-space-8);
}
.page-header h2 { margin-bottom: var(--ds-space-1); }
.page-header p { margin: 0; }

/* ── Card ─────────────────────────────────────────────────────── */

.card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #2563EB, #06B6D4, #0D9488) 1;
  border-image-slice: 1 0 0 0;
  padding: var(--ds-space-6);
  box-shadow: var(--ds-shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-5);
}
.card-header h3 { font-size: var(--ds-text-base); font-weight: 600; }
.card-header h4 { font-size: var(--ds-text-sm); font-weight: 600; }

.card + .card { margin-top: var(--ds-space-5); }

/* ── Metric card ──────────────────────────────────────────────── */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-8);
}

.metric-card {
  padding: var(--ds-space-4) var(--ds-space-3);
  text-align: center;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
}

.metric-value {
  font-size: var(--ds-text-2xl);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--ds-space-1);
}

.metric-label {
  font-size: var(--ds-text-xs);
  font-weight: 500;
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-value.text-red   { color: var(--ds-red); }
.metric-value.text-green { color: var(--ds-green); }
.metric-value.text-amber { color: var(--ds-amber); }
.metric-value.text-blue  { color: var(--ds-blue); }

/* ── Badge / Pill ─────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-red   { background: var(--ds-red-soft);   color: var(--ds-red); }
.badge-amber { background: var(--ds-amber-soft); color: #B36B00; }
.badge-green { background: var(--ds-green-soft); color: #1B7A34; }
.badge-blue  { background: rgba(0,122,255,0.1);  color: var(--ds-blue); }
.badge-gray  { background: var(--ds-gray-100);   color: var(--ds-gray-600); }

[data-theme="dark"] .badge-amber { color: var(--ds-amber); }
[data-theme="dark"] .badge-green { color: var(--ds-green); }

/* ── Status dots ─────────────────────────────────────────────── */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-green { background: var(--ds-green); }
.status-dot-red   { background: var(--ds-red); animation: pulse-red 1.5s ease infinite; }
.status-dot-amber { background: var(--ds-amber); }
.status-dot-gray  { background: var(--ds-gray-400); }

@keyframes pulse-red {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,59,48,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 4px rgba(255,59,48,0); }
}

/* ── Buttons ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  font-family: var(--ds-font);
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease), transform 100ms var(--ds-ease);
  touch-action: manipulation;
  min-height: 44px;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px; }

.btn-primary {
  background: var(--ds-blue);
  color: #fff;
}
.btn-primary:hover { background: var(--ds-blue-hover); }

.btn-success {
  background: var(--ds-green);
  color: #fff;
}
.btn-success:hover { background: #2DA44E; }

.btn-danger {
  background: none;
  color: var(--ds-red);
  border: 1.5px solid var(--ds-red);
}
.btn-danger:hover { background: var(--ds-red-soft); }

.btn-ghost {
  background: none;
  color: var(--ds-blue);
  border: 1.5px solid var(--ds-border);
}
.btn-ghost:hover { background: var(--ds-surface-2); }

.btn-sm {
  padding: var(--ds-space-2) var(--ds-space-3);
  font-size: var(--ds-text-xs);
  min-height: 32px;
  border-radius: 6px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ── Forms ────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: var(--ds-space-5);
}

.form-label {
  display: block;
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-text);
  margin-bottom: var(--ds-space-2);
}

.form-hint {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-secondary);
  margin-top: var(--ds-space-1);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-base);
  font-family: var(--ds-font);
  color: var(--ds-text);
  background: var(--ds-surface);
  transition: border-color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);
  min-height: 44px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--ds-blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

.form-input::placeholder { color: var(--ds-text-tertiary); }

.form-textarea { min-height: 100px; resize: vertical; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-error {
  font-size: var(--ds-text-xs);
  color: var(--ds-red);
  margin-top: var(--ds-space-1);
}

/* Phone input group */
.phone-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.phone-prefix {
  display: flex;
  align-items: center;
  padding: var(--ds-space-3) var(--ds-space-3);
  background: var(--ds-surface-2);
  border: 1.5px solid var(--ds-border);
  border-right: none;
  border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-text-secondary);
  min-height: 44px;
}

.phone-group .form-input {
  border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}

/* Radio card group */
.radio-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}

.radio-card {
  position: relative;
  flex: 1;
  min-width: 140px;
}

.radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-card-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-3);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--ds-duration) var(--ds-ease), background var(--ds-duration) var(--ds-ease);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-text);
  min-height: 44px;
}

.radio-card-label:hover { background: var(--ds-surface-2); }

.radio-card input[type="radio"]:checked + .radio-card-label {
  border-color: var(--ds-blue);
  background: rgba(0,122,255,0.06);
}
.radio-card input[type="radio"]:focus-visible + .radio-card-label {
  outline: 2px solid var(--ds-blue);
  outline-offset: 2px;
}

.radio-card-script {
  font-size: var(--ds-text-lg);
  line-height: 1.2;
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  cursor: pointer;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-text);
  min-height: 44px;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: relative;
  width: 44px;
  height: 26px;
  background: var(--ds-gray-300);
  border-radius: var(--ds-radius-full);
  transition: background var(--ds-duration) var(--ds-ease);
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--ds-duration) var(--ds-ease);
}

.toggle input:checked + .toggle-track {
  background: var(--ds-blue);
}
.toggle input:checked + .toggle-track::after {
  transform: translateX(18px);
}
.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--ds-blue);
  outline-offset: 2px;
}

/* Checkbox styled */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  cursor: pointer;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-text);
  min-height: 44px;
}

.checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--ds-blue);
  cursor: pointer;
}

/* File upload zone */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-10) var(--ds-space-6);
  border: 2px dashed var(--ds-gray-300);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-2);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--ds-duration) var(--ds-ease), background var(--ds-duration) var(--ds-ease);
}

.upload-zone:hover {
  border-color: var(--ds-blue);
  background: rgba(0,122,255,0.03);
}

.upload-zone .upload-icon {
  font-size: 2rem;
  color: var(--ds-text-secondary);
}

.upload-zone input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.upload-zone .upload-text {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  font-weight: 500;
}

.upload-zone .upload-filename {
  font-size: var(--ds-text-sm);
  color: var(--ds-blue);
  font-weight: 600;
}

/* ── Tables ───────────────────────────────────────────────────── */

.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
}

thead th {
  text-align: left;
  font-weight: 600;
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}

tbody td {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--ds-surface-2); }

/* Mobile: card-based table */
@media (max-width: 640px) {
  .table-responsive thead { display: none; }
  .table-responsive tbody tr {
    display: flex;
    flex-direction: column;
    padding: var(--ds-space-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    margin-bottom: var(--ds-space-3);
    background: var(--ds-surface);
  }
  .table-responsive tbody td {
    display: flex;
    justify-content: space-between;
    padding: var(--ds-space-2) 0;
    border-bottom: none;
  }
  .table-responsive tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* ── Tabs (segmented control) ─────────────────────────────────── */

.tab-bar {
  display: inline-flex;
  background: var(--ds-surface-2);
  border-radius: var(--ds-radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--ds-space-6);
}

.tab-btn {
  padding: var(--ds-space-2) var(--ds-space-5);
  border: none;
  border-radius: 6px;
  background: none;
  font-family: var(--ds-font);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-text-secondary);
  cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);
  min-height: 36px;
}

.tab-btn:hover { color: var(--ds-text); }

.tab-btn.active {
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
}

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

/* ── Alerts / Flash ───────────────────────────────────────────── */

.flash {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  margin-bottom: var(--ds-space-5);
}

.flash-success { background: var(--ds-green-soft); color: #1B7A34; }
.flash-error   { background: var(--ds-red-soft);   color: var(--ds-red); }
.flash-warning { background: var(--ds-amber-soft); color: #B36B00; }

[data-theme="dark"] .flash-success { color: var(--ds-green); }
[data-theme="dark"] .flash-error   { color: #FF6B6B; }
[data-theme="dark"] .flash-warning { color: var(--ds-amber); }

.flash ul { margin: var(--ds-space-2) 0 0 var(--ds-space-4); list-style: disc; }

/* Pause banner */
.pause-banner {
  background: var(--ds-red);
  color: #fff;
  padding: var(--ds-space-3) var(--ds-space-4);
  text-align: center;
  font-size: var(--ds-text-sm);
  font-weight: 700;
  position: fixed;
  top: var(--ds-header-h);
  left: 0;
  right: 0;
  z-index: 95;
  letter-spacing: 0.02em;
}

.has-banner .main-content {
  padding-top: calc(var(--ds-header-h) + 40px + var(--ds-space-6));
}

/* Status note */
.status-note {
  background: var(--ds-amber-soft);
  color: #B36B00;
  padding: var(--ds-space-3) var(--ds-space-4);
  text-align: center;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  position: fixed;
  top: var(--ds-header-h);
  left: 0;
  right: 0;
  z-index: 94;
}

/* ── Step indicator ───────────────────────────────────────────── */

.step-indicator {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-6);
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-xs);
  font-weight: 700;
  background: var(--ds-gray-200);
  color: var(--ds-text-secondary);
}

.step-dot.active {
  background: var(--ds-blue);
  color: #fff;
}

.step-dot.done {
  background: var(--ds-green);
  color: #fff;
}

.step-line {
  flex: 1;
  height: 2px;
  background: var(--ds-gray-200);
  max-width: 60px;
}

.step-line.done { background: var(--ds-green); }

/* ── Blueprint viewer ─────────────────────────────────────────── */

.blueprint {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ds-text);
  padding: var(--ds-space-5);
  background: var(--ds-surface-2);
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
}

/* ── Structured blueprint ────────────────────────────────────── */

/* Override .blueprint defaults when structured HTML is present */
.blueprint:has(.bp-structured) {
  white-space: normal;
  line-height: 1.4;
  font-family: var(--ds-font-sans);
  padding: var(--ds-space-3);
  background: transparent;
  border: none;
}
.bp-structured { font-size: var(--ds-text-sm); }
.bp-hint {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-secondary);
  text-align: center;
  margin: var(--ds-space-2) 0 0;
}
.bp-section {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-2) var(--ds-space-3);
  margin-bottom: var(--ds-space-2);
}
.bp-heading {
  font-size: var(--ds-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-space-1);
  padding-bottom: var(--ds-space-1);
  border-bottom: 1px solid var(--ds-border);
}
.bp-row {
  display: flex;
  gap: var(--ds-space-2);
  padding: var(--ds-space-1) 0;
  flex-wrap: wrap;
  align-items: baseline;
}
.bp-label {
  font-weight: 500;
  color: var(--ds-text-secondary);
  min-width: 80px;
  flex-shrink: 0;
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bp-value { color: var(--ds-text); word-break: break-word; }
.bp-pill {
  display: inline-block;
  font-size: var(--ds-text-xs);
  padding: 1px 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-2);
  color: var(--ds-text-secondary);
}
.bp-flag {
  font-size: var(--ds-text-xs);
  color: var(--ds-amber);
  padding: 0 0 0 var(--ds-space-3);
}

/* Medication cards */
.bp-med-card {
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  margin-bottom: var(--ds-space-2);
  background: var(--ds-bg);
}
.bp-med-header {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}
.bp-med-details {
  display: flex;
  gap: var(--ds-space-2);
  padding: 2px 0;
  align-items: baseline;
}

/* Inline editable fields */
.bp-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--ds-blue);
  padding: 1px 4px;
  background: color-mix(in srgb, var(--ds-blue) 6%, transparent);
  border-radius: 2px;
  transition: background var(--ds-duration) var(--ds-ease);
}
.bp-editable:hover { background: color-mix(in srgb, var(--ds-blue) 14%, transparent); }

.bp-edit-input {
  font-family: inherit;
  font-size: inherit;
  padding: 2px 4px;
  border: 1px solid var(--ds-blue);
  border-radius: 4px;
  background: var(--ds-surface);
  color: var(--ds-text);
  outline: none;
  min-width: 80px;
  max-width: 100%;
}
.bp-edit-saving { opacity: 0.5; pointer-events: none; }

/* ── Discharge image ──────────────────────────────────────────── */

.discharge-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  touch-action: pinch-zoom;
}

/* ── Success / Result page ────────────────────────────────────── */

.result-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.result-card {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.result-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto var(--ds-space-5);
}

.result-icon.success { background: var(--ds-green-soft); color: var(--ds-green); }
.result-icon.error   { background: var(--ds-red-soft);   color: var(--ds-red); }

.result-card h3 { margin-bottom: var(--ds-space-3); }
.result-card p  { margin-bottom: var(--ds-space-6); }

/* ── Approve page ─────────────────────────────────────────────── */

.approve-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-6);
}

.approve-header h2 { flex-shrink: 0; }

.vernacular-name {
  font-weight: 600;
  color: var(--ds-text);
}

.confidence-low {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px 8px;
  background: var(--ds-amber-soft);
  color: #B36B00;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: 600;
}

.risk-reasons {
  margin-bottom: var(--ds-space-5);
}

.risk-reasons summary {
  cursor: pointer;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-text-secondary);
}

.risk-reasons ul {
  margin: var(--ds-space-2) 0 0 var(--ds-space-5);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  list-style: disc;
}

.approve-actions {
  position: sticky;
  bottom: 0;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  padding: var(--ds-space-3) var(--ds-space-6);
  margin: var(--ds-space-4) calc(-1 * var(--ds-space-6)) 0;
  z-index: 50;
}

.approve-actions-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}

.approve-actions-row .form-input {
  height: 36px;
  font-size: var(--ds-text-sm);
}

.approve-actions-row .btn {
  height: 36px;
  white-space: nowrap;
  padding: 0 var(--ds-space-4);
}

.reject-section { position: relative; }
.reject-popover {
  position: absolute;
  bottom: calc(100% + var(--ds-space-2));
  right: 0;
  width: 280px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3);
  box-shadow: var(--ds-shadow-lg);
  z-index: 60;
}

/* Approval page: keep bottom nav visible, add padding so action bar doesn't overlap */
.page-approve .main-content { padding-bottom: 56px; }

@media (max-width: 767px) {
  .approve-actions {
    margin-left: calc(-1 * var(--ds-space-6));
    margin-right: calc(-1 * var(--ds-space-6));
    padding: var(--ds-space-3) var(--ds-space-4);
  }
  .approve-actions-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--ds-space-2);
  }
  .approve-actions-row .form-input {
    grid-column: 1 / -1;
    max-width: none;
  }
  .approve-actions-row .btn-success {
    width: 100%;
  }
  .approve-actions-row .checkbox {
    grid-column: 1 / -1;
    font-size: var(--ds-text-xs);
  }
  .approve-actions-row .reject-section {
    position: static;
  }
  .reject-popover {
    position: fixed;
    bottom: 60px;
    left: var(--ds-space-4);
    right: var(--ds-space-4);
    width: auto;
  }
  .page-approve .main-content { padding-bottom: 90px; }
}

.approve-form {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

/* ── Settings ─────────────────────────────────────────────────── */

.setting-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-3) 0;
  border-bottom: 1px solid var(--ds-border);
  flex-wrap: wrap;
}

.setting-row:last-child { border-bottom: none; }

.setting-label {
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-text);
  min-width: 180px;
  flex-shrink: 0;
}

.setting-input {
  max-width: 200px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-family: var(--ds-font);
  color: var(--ds-text);
  background: var(--ds-surface);
  transition: border-color var(--ds-duration) var(--ds-ease);
  min-height: 36px;
}

.setting-input:focus {
  outline: none;
  border-color: var(--ds-blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

.setting-saved {
  font-size: var(--ds-text-xs);
  color: var(--ds-green);
  font-weight: 600;
}

/* Pause toggle */
.pause-toggle {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-5);
}

.pause-toggle.paused {
  background: var(--ds-red-soft);
  border: 1.5px solid var(--ds-red);
}

.pause-toggle.active {
  background: var(--ds-green-soft);
  border: 1.5px solid var(--ds-green);
}

/* ── Pagination ───────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-6);
  font-size: var(--ds-text-sm);
}

.pagination span {
  color: var(--ds-text-secondary);
}

/* ── Filter bar ───────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-6);
  align-items: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  color: var(--ds-text-secondary);
  cursor: pointer;
  transition: all var(--ds-duration) var(--ds-ease);
  background: none;
  font-family: var(--ds-font);
  min-height: 32px;
  text-decoration: none;
}

.filter-chip:hover {
  border-color: var(--ds-blue);
  color: var(--ds-blue);
  text-decoration: none;
}

.filter-chip.active {
  background: var(--ds-blue);
  border-color: var(--ds-blue);
  color: #fff;
}

/* ── Toast / notification ─────────────────────────────────────── */

.toast-container {
  position: fixed;
  top: calc(var(--ds-header-h) + var(--ds-space-4));
  right: var(--ds-space-4);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  pointer-events: none;
}

.toast {
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  box-shadow: var(--ds-shadow-lg);
  pointer-events: auto;
  animation: toast-in 300ms var(--ds-ease);
  max-width: 360px;
}

.toast-error   { background: var(--ds-red);   color: #fff; }
.toast-success { background: var(--ds-green); color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ── HTMX indicator ───────────────────────────────────────────── */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ds-gray-300);
  border-top-color: var(--ds-blue);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

.spinner-white {
  border-color: rgba(255,255,255,0.3);
  border-top-color: #fff;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Upload progress overlay ─────────────────────────────────── */

.upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.upload-overlay-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-8) var(--ds-space-6);
  max-width: 380px;
  width: calc(100% - var(--ds-space-8));
  box-shadow: var(--ds-shadow-xl);
  text-align: center;
}

.upload-overlay-card h3 {
  margin-bottom: var(--ds-space-5);
  font-size: var(--ds-text-xl);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--ds-gray-200);
  border-radius: var(--ds-radius-full);
  overflow: hidden;
  margin-bottom: var(--ds-space-5);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--ds-blue);
  border-radius: var(--ds-radius-full);
  transition: width 800ms var(--ds-ease);
}

.progress-steps {
  list-style: none;
  text-align: left;
  margin-bottom: var(--ds-space-5);
}

.progress-steps li {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-1) 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-tertiary);
  font-weight: 500;
  transition: color var(--ds-duration) var(--ds-ease);
}

.progress-steps li.step-done {
  color: var(--ds-green);
}

.progress-steps li.step-active {
  color: var(--ds-text);
}

.progress-steps .step-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--ds-text-xs);
}

.progress-steps .step-active .spinner {
  width: 14px;
  height: 14px;
}

.upload-overlay .hint {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-secondary);
  line-height: var(--ds-leading-normal);
}

/* ── Collapsible ──────────────────────────────────────────────── */

details {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}

details summary {
  padding: var(--ds-space-4) var(--ds-space-5);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  background: var(--ds-surface);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

details summary::after {
  content: '›';
  font-size: 1.2em;
  transition: transform var(--ds-duration) var(--ds-ease);
  color: var(--ds-text-secondary);
}

details[open] summary::after {
  transform: rotate(90deg);
}

details > :not(summary) {
  padding: 0 var(--ds-space-5) var(--ds-space-4);
}

/* ── Utilities ────────────────────────────────────────────────── */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-2 { gap: var(--ds-space-2); }
.gap-3 { gap: var(--ds-space-3); }
.gap-4 { gap: var(--ds-space-4); }
.gap-5 { gap: var(--ds-space-5); }
.gap-6 { gap: var(--ds-space-6); }
.mb-4 { margin-bottom: var(--ds-space-4); }
.mb-6 { margin-bottom: var(--ds-space-6); }
.mb-8 { margin-bottom: var(--ds-space-8); }
.mt-4 { margin-top: var(--ds-space-4); }
.mt-6 { margin-top: var(--ds-space-6); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── View Transition API ──────────────────────────────────────── */

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(20px); opacity: 0; }
}

@keyframes slide-to-left {
  to { transform: translateX(-20px); opacity: 0; }
}

::view-transition-old(root) {
  animation: 150ms var(--ds-ease) both fade-out;
}

::view-transition-new(root) {
  animation: 200ms var(--ds-ease) both fade-in;
}

/* ── Footer ───────────────────────────────────────────────────── */

.app-footer {
  text-align: center;
  padding: var(--ds-space-8) var(--ds-space-4) var(--ds-space-4);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-tertiary);
}

/* ── Audio Player ────────────────────────────────────────────── */

.audio-player {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-surface-2);
  border-radius: var(--ds-radius-lg);
  min-width: 200px;
}

.audio-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--ds-duration) var(--ds-ease);
}
.audio-play:hover { background: var(--ds-blue-hover); }

.audio-track {
  flex: 1;
  height: 6px;
  background: var(--ds-gray-200);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .audio-track { background: var(--ds-gray-600); }

.audio-progress {
  height: 100%;
  background: var(--ds-blue);
  border-radius: 3px;
  width: 0%;
  transition: width 100ms linear;
}

.audio-time {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.audio-player.playing .audio-icon-play { display: none; }
.audio-player.playing .audio-icon-pause { display: block; }
.audio-player:not(.playing) .audio-icon-play { display: block; }
.audio-player:not(.playing) .audio-icon-pause { display: none; }

.audio-player.audio-error {
  opacity: 0.45;
  pointer-events: none;
}
.audio-player.audio-error .audio-time {
  color: var(--ds-red);
  font-weight: 600;
}

/* ── Inline Error ────────────────────────────────────────────── */

.inline-error {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-red-soft);
  color: var(--ds-red);
  border: 1px solid var(--ds-red);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  margin-bottom: var(--ds-space-3);
}

/* ── Page Progress Bar ───────────────────────────────────────── */

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--ds-blue);
  z-index: 9999;
  transition: width 200ms var(--ds-ease);
  pointer-events: none;
}
.page-progress.active {
  width: 70%;
  transition: width 8s cubic-bezier(0.1, 0.5, 0.3, 1);
}
.page-progress.done {
  width: 100%;
  transition: width 150ms var(--ds-ease);
}
.page-progress.hidden {
  opacity: 0;
  transition: opacity 300ms var(--ds-ease);
}

/* ── PWA: Offline banner ──────────────────────────────────────── */

.offline-banner {
  position: fixed;
  top: var(--ds-header-h);
  left: 0; right: 0;
  z-index: 900;
  background: var(--ds-amber);
  color: #fff;
  text-align: center;
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-sm);
  font-weight: 600;
}

/* ── PWA: Update banner ──────────────────────────────────────── */

.update-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--ds-blue);
  color: #fff;
  text-align: center;
  padding: var(--ds-space-3) var(--ds-space-4);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
}
.update-banner .btn { color: #fff; border-color: rgba(255,255,255,0.4); }

@media (max-width: 767px) {
  .update-banner { bottom: var(--ds-bottom-h); }
}

/* ── PWA: Install button ─────────────────────────────────────── */

.install-btn {
  background: none;
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ds-blue);
  transition: background var(--ds-duration) var(--ds-ease);
}
.install-btn:hover,
.install-btn:active { background: var(--ds-surface-2); }

/* ── PWA: iOS install banner ─────────────────────────────── */

.ios-install-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 910;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  padding: var(--ds-space-3) var(--ds-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  font-size: var(--ds-text-sm);
  box-shadow: var(--ds-shadow-lg);
  animation: slide-up 300ms var(--ds-ease);
}
.ios-install-banner svg { color: var(--ds-blue); }
.ios-install-dismiss {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--ds-text-secondary);
  cursor: pointer;
  padding: var(--ds-space-2);
  line-height: 1;
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ── Print ────────────────────────────────────────────────────── */

@media print {
  .app-header, .nav-sidebar, .nav-bottom, .theme-toggle, .approve-actions,
  .offline-banner, .update-banner, .install-btn { display: none !important; }
  .main-content { margin-left: 0; padding-top: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}