/* ═══════════════════════════════════════════════
   Dashboard Hub — Design System (shadcn/ui tokens)
   ═══════════════════════════════════════════════ */

:root {
  /* Base radius */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
}

/* Dark mode (default) — exact values from shadcn-ui/ui globals.css */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  /* Lifted from 0.708 → 0.78 for WCAG AA contrast on var(--card) bg (was 3.4:1, now ~5:1).
     Affects all muted text (badges, labels, sub-headings) — small visual change, big a11y win. */
  --muted-foreground: oklch(0.78 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);

  /* Charts */
  --chart-1: oklch(0.646 0.222 41);
  --chart-2: oklch(0.6 0.118 184);
  --chart-3: oklch(0.398 0.07 227);
  --chart-4: oklch(0.828 0.189 84);
  --chart-5: oklch(0.769 0.188 70);

  /* Sidebar — shadcn monochrome */
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);

  /* Semantic (not in base shadcn — our additions) */
  --success: oklch(0.696 0.17 162);
  --success-foreground: oklch(0.145 0 0);
  --warning: oklch(0.828 0.189 84);
  --warning-foreground: oklch(0.145 0 0);
  --info: oklch(0.6 0.118 184);
  --info-foreground: oklch(0.985 0 0);
}

/* ── shadcn/ui Card — from card.tsx ── */

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 12px; /* rounded-xl */
  border: 1px solid var(--border);
  background: var(--card);
  padding: 24px 0; /* py-6, px handled by children */
  color: var(--card-foreground);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

.hub-card-gradient {
  background: linear-gradient(to top, var(--card), color-mix(in oklch, var(--card) 92%, oklch(0.985 0 0)));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03); /* shadow-xs */
}

.hub-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
  padding: 0 24px;
}

.hub-card-title {
  font-weight: 600;
  line-height: 1;
}

.hub-card-description {
  font-size: 14px;
  color: var(--muted-foreground);
}

.hub-card-content {
  padding: 0 24px;
}

.hub-card-footer {
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: 14px;
}

/* ── shadcn/ui Badge — from badge.tsx ── */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
}
.badge-default { background: var(--primary); color: var(--primary-foreground); }
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-destructive { background: var(--destructive); color: white; }
.badge-outline { border-color: var(--border); color: var(--foreground); background: transparent; }
.badge-success { background: var(--success); color: var(--success-foreground); }
.badge-warning { background: var(--warning); color: var(--warning-foreground); }
.badge-info { background: var(--info); color: var(--info-foreground); }

/* ── shadcn/ui Button — from button.tsx ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  height: 36px; /* h-9 */
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn-sm { height: 32px; padding: 6px 12px; } /* h-8 px-3 */

.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { border: 1px solid var(--border); background: var(--background); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { opacity: 0.85; }
.btn-destructive { background: var(--destructive); color: white; }
.btn-destructive:hover { opacity: 0.9; }

/* ── shadcn/ui Progress — from progress.tsx ── */

.progress-track {
  height: 8px;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--primary) 20%, transparent);
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.progress-fill.warning { background: var(--warning); }
.progress-fill.danger { background: var(--destructive); }

/* ── Thin progress (6px variant) ── */
.progress-track-sm {
  height: 6px;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--primary) 15%, transparent);
}
.progress-fill-sm {
  height: 100%;
  border-radius: 9999px;
  background: var(--primary);
  transition: width 0.3s ease;
}
.progress-fill-sm.warning { background: var(--warning); }
.progress-fill-sm.danger { background: var(--destructive); }

/* ── iOS Safari input zoom prevention ──
   Any input/textarea/select with font-size <16px triggers auto-zoom on focus on iOS,
   causing layout disruption. Keep design font-sizes on desktop, force 16px on mobile. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── iOS 300ms tap-delay killer ──
   Without `touch-action: manipulation`, iOS Safari reserves 300ms after every tap
   to detect double-tap-to-zoom. That makes nav buttons feel sluggish. The rule below
   removes that delay for all interactive elements without disabling page-level zoom. */
button, a, [role="button"], .tab, .chip, .nav-item, .bnav-item, label[for], input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

/* ── Horizontal-scroll containers ──
   Without `touch-action: pan-x`, an x-overflow strip on iOS Safari competes with the
   page's vertical scroll: a left-swipe at a slight angle leaks vertical motion and the
   page bounces up/down while the user is trying to scroll the strip sideways.
   `pan-x` tells the browser "this element handles X only" — vertical gestures here are
   ignored (the surrounding scroller stays still), and X gestures don't drift into Y.
   `overscroll-behavior-x: contain` stops X-scroll from chaining into the page when the
   strip hits its edge (no rubberband / bounce on the document). */
.fit .chips,
.fin .tabs,
.fin .months,
.job .kanban,
.tabs.scrollable {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

/* ── Data table (legacy) ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--card-foreground);
}
.data-table tr:hover td {
  background: var(--accent);
}