/* ============================================================
   HuGo Dashboard – Styles
   Theme  : Golden Ratio Minimal · Warm Sand
   φ      : 1.618 spacing rhythm
   Palette: warm sand / dusk / stone
   ============================================================ */

/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);

  /* Duration */
  --dur-xs: 120ms;
  --dur-sm: 200ms;
  --dur-md: 340ms;
  --dur-lg: 520ms;
  --dur-xl: 760ms;

  /* Golden ratio scale (base 1rem = 16px)
     φ⁻² ≈ .382   φ⁻¹ ≈ .618   φ⁰ = 1   φ¹ ≈ 1.618   φ² ≈ 2.618   φ³ ≈ 4.236 */
  --space-xxs: 0.236rem;
  /* 3.8px  */
  --space-xs: 0.382rem;
  /* 6.1px  */
  --space-sm: 0.618rem;
  /* 9.9px  */
  --space-md: 1rem;
  /* 16px   */
  --space-lg: 1.618rem;
  /* 25.9px */
  --space-xl: 2.618rem;
  /* 41.9px */
  --space-2xl: 4.236rem;
  /* 67.8px */

  /* Radius — more rounded for a gentle feel */
  --radius-sm: 0.75rem;
  /* 12px */
  --radius-md: 1.25rem;
  /* 20px */
  --radius-lg: 1.75rem;
  /* 28px */
  --radius-xl: 2.25rem;
  /* 36px */
  --radius-full: 999px;

  /* Palette — warm sand tones, easy on the eyes */
  --color-bg: #f7f4ef;
  --color-surface: #fdfbf7;
  --color-surface-2: #faf7f2;
  --color-surface-3: #f5f0ea;
  --color-border: #ece6dd;
  --color-border-2: #e0d9cf;
  --color-text-1: #2a2520;
  --color-text-2: #5a5349;
  --color-text-3: #8c8275;
  --color-text-4: #b3a99f;
  --color-accent: #3d3730;
  --color-accent-light: rgba(60, 55, 48, 0.07);

  /* Shadows — very subtle, warm tint */
  --shadow-xs: 0 1px 2px rgba(40, 34, 28, 0.05);
  --shadow-sm: 0 2px 8px -2px rgba(40, 34, 28, 0.07), 0 1px 2px rgba(40, 34, 28, 0.04);
  --shadow-md: 0 4px 20px -6px rgba(40, 34, 28, 0.10), 0 1px 4px rgba(40, 34, 28, 0.04);
  --shadow-lg: 0 12px 40px -12px rgba(40, 34, 28, 0.13), 0 2px 8px rgba(40, 34, 28, 0.05);
  --shadow-xl: 0 24px 60px -16px rgba(40, 34, 28, 0.17), 0 4px 12px rgba(40, 34, 28, 0.06);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-2);
  border-radius: var(--radius-full);
  transition: background var(--dur-sm) var(--ease-smooth);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-4);
}

/* ── Loading spinner ──────────────────────────────────────── */
.spinner {
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border-top-color: var(--color-accent);
  animation: spinBreath 1.1s var(--ease-in-out-sine) infinite;
  will-change: transform;
}

@keyframes spinBreath {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.04);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* ── Premium card ─────────────────────────────────────────── */
.premium-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-md) var(--ease-out-expo),
    border-color var(--dur-md) var(--ease-smooth),
    transform var(--dur-md) var(--ease-out-expo);
  will-change: transform, box-shadow;
}

.premium-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-2);
  transform: translateY(-2px);
}

/* ── Page-enter animation ─────────────────────────────────── */
.page-enter {
  animation: pageReveal var(--dur-md) var(--ease-out-expo) both;
}

@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Staggered children */
.page-enter>* {
  animation: pageReveal var(--dur-md) var(--ease-out-expo) both;
}

.page-enter>*:nth-child(1) {
  animation-delay: 0ms;
}

.page-enter>*:nth-child(2) {
  animation-delay: 40ms;
}

.page-enter>*:nth-child(3) {
  animation-delay: 80ms;
}

.page-enter>*:nth-child(4) {
  animation-delay: 120ms;
}

.page-enter>*:nth-child(5) {
  animation-delay: 160ms;
}

.page-enter>*:nth-child(6) {
  animation-delay: 200ms;
}

.page-enter>*:nth-child(7) {
  animation-delay: 240ms;
}

.page-enter>*:nth-child(8) {
  animation-delay: 280ms;
}

.page-enter>*:nth-child(n+9) {
  animation-delay: 320ms;
}

/* ── Modal backdrop + panel ───────────────────────────────── */
.modal-backdrop {
  animation: backdropReveal var(--dur-sm) var(--ease-smooth) both;
  will-change: opacity;
}

.modal-panel {
  animation: panelReveal var(--dur-md) var(--ease-out-expo) both;
  will-change: opacity, transform;
}

@keyframes backdropReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes panelReveal {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ── Toast notification ───────────────────────────────────── */
.toast {
  animation: toastSlide var(--dur-md) var(--ease-spring) both;
  will-change: opacity, transform;
}

.toast-exit {
  animation: toastFade var(--dur-sm) var(--ease-smooth) both;
}

@keyframes toastSlide {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes toastFade {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}

/* ── Input field ──────────────────────────────────────────── */
.input-field {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--color-text-1);
  outline: none;
  background: var(--color-surface);
  transition:
    border-color var(--dur-xs) var(--ease-smooth),
    box-shadow var(--dur-xs) var(--ease-smooth),
    background var(--dur-xs) var(--ease-smooth);
}

.input-field:hover {
  border-color: var(--color-border-2);
}

.input-field:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.input-field::placeholder {
  color: var(--color-text-4);
}

/* ── Holdings toolbar ─────────────────────────────────────── */
.holdings-toolbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  width: 100%;
}

.holdings-toolbar-row-heading {
  min-width: max-content;
}

.holdings-toolbar-title {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: var(--space-xxs);
}

.holdings-toolbar-row::-webkit-scrollbar {
  display: none;
}

.holdings-toolbar-cluster {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  min-width: max-content;
}

.holdings-pill-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs);
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  flex-shrink: 0;
}

.holdings-pill {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  min-height: 2.1rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 600;
  transition:
    background var(--dur-xs) var(--ease-smooth),
    color var(--dur-xs) var(--ease-smooth),
    border-color var(--dur-xs) var(--ease-smooth),
    box-shadow var(--dur-sm) var(--ease-smooth),
    transform var(--dur-sm) var(--ease-spring);
}

.holdings-pill-compact {
  min-height: 2.1rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
}

.holdings-pill-active {
  background: var(--color-accent);
  color: var(--color-surface);
  box-shadow: 0 4px 12px -6px rgba(40, 34, 28, 0.45);
}

.holdings-pill-idle {
  color: var(--color-text-2);
}

.holdings-pill:hover {
  transform: translateY(-1px);
}

.holdings-pill-idle:hover {
  color: var(--color-text-1);
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--color-border);
}

.holdings-extra-menu {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--space-xxs);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  transition:
    box-shadow var(--dur-sm) var(--ease-smooth),
    border-color var(--dur-xs) var(--ease-smooth),
    background var(--dur-xs) var(--ease-smooth);
}

.holdings-extra-menu.is-expanded,
.holdings-extra-menu:hover {
  border-color: var(--color-border-2);
  box-shadow: var(--shadow-sm);
}

.holdings-extra-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-text-3);
  box-shadow: var(--shadow-xs);
  transition:
    background var(--dur-xs) var(--ease-smooth),
    color var(--dur-xs) var(--ease-smooth),
    box-shadow var(--dur-sm) var(--ease-smooth),
    transform var(--dur-sm) var(--ease-spring);
}

.holdings-extra-trigger:hover,
.holdings-extra-trigger.is-expanded {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-1);
  box-shadow: var(--shadow-md);
}

.holdings-extra-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.holdings-extra-options {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-width 400ms var(--ease-out-expo),
    opacity 200ms var(--ease-smooth),
    padding-left 400ms var(--ease-out-expo);
  padding-left: 0;
}

.holdings-extra-menu.is-expanded .holdings-extra-options,
.holdings-extra-menu:hover .holdings-extra-options {
  max-width: 32rem;
  opacity: 1;
  pointer-events: auto;
  padding-left: 0.3rem;
}

.holdings-search-wrap {
  position: relative;
  min-width: 10.5rem;
  flex: 0 0 auto;
}

.holdings-search-wrap-right {
  margin-left: auto;
}

.holdings-search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  color: var(--color-text-1);
  background: var(--color-surface);
  transition:
    border-color var(--dur-xs) var(--ease-smooth),
    box-shadow var(--dur-xs) var(--ease-smooth),
    background var(--dur-xs) var(--ease-smooth);
}

.holdings-search-input:hover {
  border-color: var(--color-border-2);
}

.holdings-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* ── Sort icon ────────────────────────────────────────────── */
.sort-icon {
  max-width: 0;
  opacity: 0;
  transform: translateX(4px);
  transition:
    max-width var(--dur-sm) var(--ease-smooth),
    opacity var(--dur-sm) var(--ease-smooth),
    transform var(--dur-sm) var(--ease-smooth);
  overflow: hidden;
}

.sort-active .sort-icon,
.group:hover .sort-icon {
  max-width: 20px;
  opacity: 1;
  transform: translateX(0);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar-aside {
  transition: width var(--dur-md) var(--ease-out-expo);
  will-change: width;
}

.sidebar-icon-col {
  width: 3.5rem;
  min-width: 3.5rem;
  height: 2.5rem;
}

.sidebar-header .sidebar-icon-col {
  width: 5rem;
  min-width: 5rem;
  height: auto;
}

.sidebar-nav-btn {
  padding-left: 0;
  padding-right: 0;
}

.sidebar-label {
  font-weight: 500;
  transition: opacity var(--dur-sm) var(--ease-smooth);
}

.sidebar-item {
  transition:
    background var(--dur-xs) var(--ease-smooth),
    color var(--dur-xs) var(--ease-smooth),
    transform var(--dur-sm) var(--ease-out-expo);
}

.sidebar-item:hover {
  transform: translateX(3px);
}

.sidebar-item:active {
  transform: translateX(0) scale(0.98);
}

/* ── Metric tooltip ───────────────────────────────────────── */
.metric-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.metric-tooltip-trigger {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: rgba(253, 251, 247, 0.88);
  color: var(--color-text-3);
  box-shadow: var(--shadow-xs);
  transition:
    color var(--dur-xs) var(--ease-smooth),
    border-color var(--dur-xs) var(--ease-smooth),
    background var(--dur-xs) var(--ease-smooth),
    transform var(--dur-sm) var(--ease-spring),
    box-shadow var(--dur-sm) var(--ease-smooth);
  backdrop-filter: blur(6px);
}

.metric-tooltip-trigger:hover,
.metric-tooltip:focus-within .metric-tooltip-trigger {
  color: var(--color-text-1);
  border-color: var(--color-border-2);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-sm);
}

.metric-tooltip-trigger:active {
  transform: translateY(0) scale(0.95);
}

.metric-tooltip-dark .metric-tooltip-trigger {
  border-color: rgba(253, 251, 247, 0.14);
  background: rgba(253, 251, 247, 0.08);
  color: rgba(253, 251, 247, 0.82);
}

.metric-tooltip-dark .metric-tooltip-trigger:hover,
.metric-tooltip-dark:focus-within .metric-tooltip-trigger {
  border-color: rgba(253, 251, 247, 0.26);
  background: rgba(253, 251, 247, 0.14);
  color: #fdfbf7;
}

.metric-tooltip-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(21rem, calc(100vw - 2rem));
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(253, 251, 247, 0.08);
  background: linear-gradient(150deg, rgba(38, 34, 29, 0.98), rgba(56, 50, 44, 0.96));
  color: #f4f4f5;
  box-shadow:
    0 28px 72px -20px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(253, 251, 247, 0.05);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition:
    opacity var(--dur-sm) var(--ease-out-expo),
    transform var(--dur-md) var(--ease-out-expo),
    filter var(--dur-md) var(--ease-smooth);
  filter: blur(3px);
  z-index: 80;
  will-change: opacity, transform, filter;
}

.metric-tooltip-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 12px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(38, 34, 29, 0.98);
  border-left: 1px solid rgba(253, 251, 247, 0.08);
  border-top: 1px solid rgba(253, 251, 247, 0.08);
}

.metric-tooltip:hover .metric-tooltip-panel,
.metric-tooltip:focus-within .metric-tooltip-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  filter: blur(0);
}

/* ── Metric tooltip internals ─────────────────────────────── */
.metric-tooltip-kicker {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-xs);
}

.metric-tooltip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fdfbf7;
  margin-bottom: var(--space-xs);
}

.metric-tooltip-text {
  font-size: 0.75rem;
  line-height: 1.55;
  color: #ddd8d1;
}

.metric-tooltip-section {
  margin-top: var(--space-md);
}

.metric-tooltip-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-xs);
}

.metric-tooltip-formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', monospace;
  font-size: 0.7rem;
  line-height: 1.55;
  color: #fafafa;
  background: rgba(253, 251, 247, 0.06);
  border: 1px solid rgba(253, 251, 247, 0.09);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.metric-tooltip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.metric-tooltip-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 600;
  color: #f4f4f5;
  background: rgba(253, 251, 247, 0.08);
  border: 1px solid rgba(253, 251, 247, 0.09);
  transition: background var(--dur-xs) var(--ease-smooth);
}

.metric-tooltip-chip:hover {
  background: rgba(253, 251, 247, 0.14);
}

.metric-tooltip-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: var(--space-xxs);
  font-size: 0.72rem;
  line-height: 1.55;
  color: #cfc9c2;
}

/* ── Stat number counter reveal ───────────────────────────── */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.stat-value {
  animation: countUp var(--dur-md) var(--ease-out-expo) both;
}

/* ── Chart area ───────────────────────────────────────────── */
@keyframes chartReveal {
  from {
    opacity: 0;
    transform: scaleY(0.94);
    transform-origin: bottom;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
    filter: blur(0);
  }
}

.chart-reveal {
  animation: chartReveal var(--dur-xl) var(--ease-out-expo) both;
}

/* ── Table row highlight ──────────────────────────────────── */
.table-row-hover {
  transition:
    background var(--dur-xs) var(--ease-smooth),
    transform var(--dur-xs) var(--ease-smooth);
}

.table-row-hover:hover {
  background: rgba(250, 247, 242, 0.92);
}

/* ── Filter / pill buttons ────────────────────────────────── */
.pill-btn {
  transition:
    background var(--dur-xs) var(--ease-smooth),
    color var(--dur-xs) var(--ease-smooth),
    border-color var(--dur-xs) var(--ease-smooth),
    transform var(--dur-sm) var(--ease-spring),
    box-shadow var(--dur-sm) var(--ease-smooth);
}

.pill-btn:hover {
  transform: translateY(-1px);
}

.pill-btn:active {
  transform: scale(0.97);
}

/* ── Sync button ──────────────────────────────────────────── */
@keyframes syncSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.syncing-icon {
  animation: syncSpin 0.85s var(--ease-in-out-sine) infinite;
  will-change: transform;
}

/* ── Skeleton loader ──────────────────────────────────────── */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-surface-3) 25%, var(--color-border) 50%, var(--color-surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s var(--ease-in-out-sine) infinite;
  border-radius: var(--radius-sm);
}

/* ── Fade-in ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
    filter: blur(1.5px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

.fade-in {
  animation: fadeIn var(--dur-sm) var(--ease-smooth) both;
}

/* ── Slide-up-fade ────────────────────────────────────────── */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.slide-up {
  animation: slideUpFade var(--dur-md) var(--ease-out-expo) both;
}

/* ── Responsive tooltip ───────────────────────────────────── */
@media (max-width: 768px) {
  .metric-tooltip-panel {
    right: auto;
    left: -1.5rem;
    width: min(20rem, calc(100vw - 2rem));
  }

  .metric-tooltip-panel::before {
    right: auto;
    left: 28px;
  }
}

/* ── Reduce motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RESPONSIVE – iPad & iPhone
   Strategy:
   • ≤ 1024px (iPad landscape/portrait): narrower sidebar, tighter spacing
   • ≤ 768px  (iPad mini / large phone): sidebar off-screen, bottom nav bar
   • ≤ 430px  (iPhone): single-column, reduced font sizes, safe-area insets
   ============================================================ */

/* ── Shared mobile tokens ─────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --space-page-x: 1.25rem;
    /* horizontal page padding on tablet */
    --space-page-y: 1.25rem;
    --header-h: 4.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --space-page-x: 1rem;
    --space-page-y: 1rem;
    --header-h: 4rem;
    --bottom-nav-h: 4rem;
    /* bottom navigation bar height */
  }
}

@media (max-width: 430px) {
  :root {
    --space-page-x: 0.75rem;
    --space-page-y: 0.75rem;
    --header-h: 3.5rem;
    --bottom-nav-h: 3.75rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   iPad Landscape / Narrow Desktop  (769px – 1024px)
   Sidebar stays but slimmer, content adjusts
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Slightly tighter main content */
  main>header {
    padding-left: var(--space-page-x);
    padding-right: var(--space-page-x);
  }

  /* Page content area */
  main>div[class*="p-8"] {
    padding: var(--space-page-y) var(--space-page-x) !important;
  }

  /* KPI grid: 2 col max on tablet */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Premium card hover lift — reduce on touch */
  @media (hover: none) {
    .premium-card:hover {
      transform: none;
      box-shadow: var(--shadow-sm);
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   iPad Portrait / Large Phone  (≤ 768px)
   Sidebar moves off-screen. Bottom navigation bar takes over.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Body: leave room for top header + bottom nav ─────────── */
  body {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ── Sidebar: slide completely off-screen ─────────────────── */
  .sidebar-aside {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
    border-right: none;
    pointer-events: none;
    /* Preserve transition for potential slide-in later */
    transition: width var(--dur-md) var(--ease-out-expo),
      opacity var(--dur-md) var(--ease-smooth);
    opacity: 0;
  }

  /* ── Main: no left margin when sidebar is gone ────────────── */
  main {
    margin-left: 0 !important;
  }

  /* ── Header: compact ──────────────────────────────────────── */
  main>header {
    height: var(--header-h);
    padding-left: var(--space-page-x);
    padding-right: var(--space-page-x);
  }

  /* Hide FX rate display in header on small screens */
  main>header .hidden.md\:flex {
    display: none !important;
  }

  /* Shrink header title */
  main>header h1 {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  main>header p {
    font-size: 0.72rem;
  }

  /* ── Action buttons in header: icon-only ──────────────────── */
  /* "Refresh" button: hide label text, keep icon (Handled by Tailwind text classes in JSX) */


  /* ── Page content ─────────────────────────────────────────── */
  main>div[class*="p-8"] {
    padding: var(--space-page-y) var(--space-page-x) !important;
    /* Add bottom padding for bottom nav bar */
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }

  /* ── Bottom navigation bar ────────────────────────────────── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(253, 251, 247, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--color-border);
    z-index: 50;
    align-items: stretch;
    justify-content: space-around;
    box-shadow: 0 -4px 20px -4px rgba(40, 34, 28, 0.08);
  }

  .mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex: 1;
    padding: 0.5rem 0.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-3);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--dur-xs) var(--ease-smooth),
      transform var(--dur-sm) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
    /* iOS minimum tap target */
  }

  .mobile-bottom-nav-item.active {
    color: var(--color-accent);
  }

  .mobile-bottom-nav-item:active {
    transform: scale(0.92);
  }

  .mobile-bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    transition:
      background var(--dur-xs) var(--ease-smooth),
      transform var(--dur-sm) var(--ease-spring);
  }

  .mobile-bottom-nav-item.active .mobile-bottom-nav-icon {
    background: var(--color-accent-light);
  }

  /* ── Cards & spacing ──────────────────────────────────────── */
  .premium-card {
    border-radius: var(--radius-md);
    /* slightly less round on small screen */
  }

  /* ── Tables: horizontal scroll ────────────────────────────── */
  table {
    min-width: 560px;
  }

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

  /* ── Metric tooltip: prevent overflow ─────────────────────── */
  .metric-tooltip-panel {
    right: auto;
    left: -1.5rem;
    width: min(20rem, calc(100vw - 2rem));
  }

  .metric-tooltip-panel::before {
    right: auto;
    left: 28px;
  }

  /* ── Holdings toolbar: allow wrapping ─────────────────────── */
  .holdings-toolbar-row {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    row-gap: 0.5rem;
  }

  /* ── Modal: full-screen on phone ──────────────────────────── */
  .modal-panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 90vh !important;
    margin-top: auto;
    margin-bottom: 0;
    width: 100% !important;
    max-width: 100% !important;
    /* snap to bottom */
    align-self: flex-end;
  }

  /* Center the modal backdrop at bottom */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Modal animation: slide up from bottom */
  @keyframes panelReveal {
    from {
      opacity: 0;
      transform: translateY(100%) scale(1);
      filter: blur(0);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* ── Chart height: shorter on small screens ───────────────── */
  .h-\[360px\] {
    height: 220px !important;
  }

  .h-\[400px\] {
    height: 220px !important;
  }

  .md\:h-\[400px\] {
    height: 220px !important;
  }

  /* ── Touch target minimums ────────────────────────────────── */
  button,
  a,
  select,
  input[type="date"],
  input[type="time"] {
    min-height: 44px;
  }

  /* Override for very small inline buttons like pill filters */
  .holdings-pill {
    min-height: 2.4rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   iPhone SE / Small phones  (≤ 430px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* ── Safe area insets (notch, home indicator) ─────────────── */
  main>header {
    padding-top: max(var(--space-sm), env(safe-area-inset-top, 0px));
    padding-left: max(var(--space-page-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-page-x), env(safe-area-inset-right, 0px));
  }

  main>div[class*="p-8"] {
    padding-left: max(var(--space-page-x), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--space-page-x), env(safe-area-inset-right, 0px)) !important;
  }

  /* ── Typography scale-down ────────────────────────────────── */
  main>header h1 {
    font-size: 1rem;
  }

  /* KPI numbers */
  .text-4xl {
    font-size: 1.75rem !important;
  }

  .text-3xl {
    font-size: 1.5rem !important;
  }

  /* ── Cards: less padding ──────────────────────────────────── */
  .premium-card {
    border-radius: var(--radius-sm) !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  .p-5 {
    padding: 0.875rem !important;
  }

  .p-4 {
    padding: 0.75rem !important;
  }

  /* ── Condensed gaps ───────────────────────────────────────── */
  .gap-6 {
    gap: 0.875rem !important;
  }

  .gap-5 {
    gap: 0.75rem !important;
  }

  .gap-4 {
    gap: 0.625rem !important;
  }

  /* ── Space-y ──────────────────────────────────────────────── */
  .space-y-8>*+* {
    margin-top: 1rem !important;
  }

  .space-y-6>*+* {
    margin-top: 0.875rem !important;
  }

  /* ── Bottom nav label: even smaller ──────────────────────────*/
  .mobile-bottom-nav-item {
    font-size: 0.55rem;
  }

  /* ── Chart even shorter ───────────────────────────────────── */
  .h-\[360px\] {
    height: 180px !important;
  }

  /* ── Modal height ─────────────────────────────────────────── */
  .modal-panel {
    max-height: 88vh !important;
  }

  /* ── Settings modal px ──────────────────────────────────────*/
  .modal-panel .px-7 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   iPad Pro landscape (1024px – 1366px) fine-tuning
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1366px) {
  main>div[class*="p-8"] {
    padding: 1.5rem 2rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   Touch-device global tweaks (no hover, large tap targets)
   ══════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* Disable hover transforms — not meaningful on touch */
  .premium-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .sidebar-item:hover {
    transform: none;
  }

  .holdings-pill:hover {
    transform: none;
  }

  .pill-btn:hover {
    transform: none;
  }

  .metric-tooltip-trigger:hover,
  .metric-tooltip:focus-within .metric-tooltip-trigger {
    transform: none;
  }

  /* Tooltip: show on tap via focus-within (works natively) */
  .metric-tooltip-panel {
    transition: none;
  }

  /* Larger tap areas for sort th */
  th.cursor-pointer {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Input fields: prevent iOS auto-zoom (font ≥ 16px) */
  input,
  select,
  textarea {
    font-size: max(1rem, 16px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   iOS Standalone (PWA / Add to Home Screen) mode
   ══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  main>header {
    padding-top: max(1rem, env(safe-area-inset-top, 1rem));
  }

  .mobile-bottom-nav {
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, var(--space-md)));
  }
}