/* Design tokens matching shadcn/ui's default "zinc" theme, hand-applied to plain PHP markup
   (no React/build step — Tailwind is loaded via CDN, this file layers shadcn-style component classes on top). */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 45%;
  --radius: 0.625rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 6%;
    --card-foreground: 0 0% 98%;
    --border: 240 3.7% 18%;
    --input: 240 3.7% 18%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 71% 45%;
  }
}

* { box-sizing: border-box; }

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 4.5rem; /* room for mobile bottom nav */
}

a { color: inherit; }

.container-app {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
}

.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 0.125rem);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1.1rem;
  min-height: 2.75rem; /* comfortable mobile tap target */
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s ease;
  text-decoration: none;
}
.btn:active { opacity: 0.8; }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.btn-outline {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.btn-block { width: 100%; }
.btn-sm { min-height: 2.25rem; padding: 0.4rem 0.75rem; font-size: 0.8rem; }

.input, select.input, textarea.input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-radius: calc(var(--radius) - 0.125rem);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: 2px solid hsl(var(--primary) / 0.4);
  outline-offset: 1px;
}

.label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.35rem;
}

.field { margin-bottom: 1rem; }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.6rem;
}
.badge-success { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
.badge-destructive { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); }

.text-muted { color: hsl(var(--muted-foreground)); }
.text-success { color: hsl(var(--success)); }
.text-destructive { color: hsl(var(--destructive)); }

table.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: hsl(var(--muted-foreground));
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid hsl(var(--border));
}
table.table td {
  padding: 0.6rem;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}
.table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.table-wrap table.table { border: none; }
.table-wrap table.table th, .table-wrap table.table td { white-space: nowrap; }

/* Top bar (all screen sizes) */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: hsl(var(--background) / 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid hsl(var(--border));
}
.topbar-inner {
  max-width: 72rem; margin: 0 auto; padding: 0.75rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-weight: 700; font-size: 1.05rem; }

/* Desktop side nav, hidden on mobile */
.side-nav { display: none; }
.desktop-nav-links { display: none; }

/* Mobile bottom tab bar */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  display: flex;
}
.bottom-nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem 0.65rem;
  font-size: 0.68rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}
.bottom-nav a.active { color: hsl(var(--primary)); font-weight: 600; }
.bottom-nav svg { width: 22px; height: 22px; }

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .desktop-nav-links { display: flex; gap: 0.25rem; }
}

.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .grid-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.stat-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.stat-label { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

.page-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }

.flash {
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  border: 1px solid hsl(var(--border));
}
.flash-success { background: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.3); color: hsl(var(--success)); }
.flash-error { background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.3); color: hsl(var(--destructive)); }

.progress-bar {
  height: 0.5rem;
  background: hsl(var(--secondary));
  border-radius: 9999px;
  overflow: hidden;
}
.progress-bar > div {
  height: 100%;
  background: hsl(var(--primary));
}

.copy-link-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.copy-link-row .input { flex: 1; min-width: 12rem; font-size: 0.8rem; }