/* ============================================================
   shadcn/ui — Slate theme (exact tokens) reproduced in plain CSS.
   Tailwind CDN provides layout utilities; these classes give the
   shadcn component look (card/button/input/badge/table/sidebar).
   ============================================================ */
:root{
  --background:0 0% 100%;
  --foreground:222.2 84% 4.9%;
  --card:0 0% 100%;
  --card-foreground:222.2 84% 4.9%;
  --primary:222.2 47.4% 11.2%;
  --primary-foreground:210 40% 98%;
  --secondary:210 40% 96.1%;
  --secondary-foreground:222.2 47.4% 11.2%;
  --muted:210 40% 96.1%;
  --muted-foreground:215.4 16.3% 46.9%;
  --accent:210 40% 96.1%;
  --accent-foreground:222.2 47.4% 11.2%;
  --destructive:0 84.2% 60.2%;
  --destructive-foreground:210 40% 98%;
  --border:214.3 31.8% 91.4%;
  --input:214.3 31.8% 91.4%;
  --ring:222.2 84% 4.9%;
  --radius:0.5rem;
}

html,body{ height:100%; }
body{ background:hsl(210 40% 98%); color:hsl(var(--foreground)); }
[x-cloak]{ display:none !important; }

/* Card */
.card{ background:hsl(var(--card)); color:hsl(var(--card-foreground)); border:1px solid hsl(var(--border));
       border-radius:var(--radius); box-shadow:0 1px 2px 0 rgb(0 0 0 / .05); }

/* Label */
.label{ display:block; font-size:.875rem; font-weight:500; line-height:1.2; color:hsl(var(--foreground)); margin-bottom:.5rem; }

/* Input / select / textarea */
.input{ display:block; width:100%; height:2.25rem; border-radius:calc(var(--radius) - 2px);
        border:1px solid hsl(var(--input)); background:transparent; padding:0 .75rem; font-size:.875rem;
        color:hsl(var(--foreground)); box-shadow:0 1px 2px 0 rgb(0 0 0 / .05); transition:box-shadow .15s,border-color .15s; }
textarea.input{ height:auto; padding:.5rem .75rem; }
.input::placeholder{ color:hsl(var(--muted-foreground)); }
.input:focus,.input:focus-visible{ outline:none; border-color:hsl(var(--ring));
        box-shadow:0 0 0 2px hsl(var(--background)),0 0 0 4px hsl(var(--ring) / .55); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap;
      height:2.25rem; padding:0 1rem; border-radius:calc(var(--radius) - 2px); border:1px solid transparent;
      font-size:.875rem; font-weight:500; cursor:pointer; transition:background-color .15s,color .15s,box-shadow .15s,opacity .15s; }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px hsl(var(--background)),0 0 0 4px hsl(var(--ring) / .6); }
.btn:disabled{ opacity:.5; pointer-events:none; }
.btn-primary{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.btn-primary:hover{ background:hsl(var(--primary) / .9); }
.btn-soft,.btn-secondary{ background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); }
.btn-soft:hover,.btn-secondary:hover{ background:hsl(var(--secondary) / .8); }
.btn-outline{ border-color:hsl(var(--input)); background:hsl(var(--background)); color:hsl(var(--foreground)); }
.btn-outline:hover{ background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }
.btn-ghost{ background:transparent; color:hsl(var(--foreground)); }
.btn-ghost:hover{ background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }
.btn-destructive{ background:hsl(var(--destructive)); color:hsl(var(--destructive-foreground)); }
.btn-sm{ height:2rem; padding:0 .75rem; font-size:.8125rem; }

/* Badges (rounded-md, border, semibold — shadcn) */
.badge{ display:inline-flex; align-items:center; gap:.25rem; border:1px solid transparent;
        border-radius:calc(var(--radius) - 2px); padding:.125rem .5rem; font-size:.75rem; font-weight:600; line-height:1rem; }
.badge-default{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.badge-secondary,.badge-slate{ background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); }
.badge-green { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.badge-amber { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.badge-rose  { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
.badge-sky   { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
.badge-violet{ background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.badge-accent{ background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); }

/* Accent helpers remapped to shadcn neutral/primary (monochrome) */
.bg-accent{ background:hsl(var(--primary)); }
.bg-accent-soft{ background:hsl(var(--secondary)); }
.text-accent{ color:hsl(var(--primary)); }
.text-accent-dark{ color:hsl(var(--primary)); }

/* Tables */
.th{ text-align:left; height:2.75rem; padding:0 1rem; font-size:.875rem; font-weight:500;
     color:hsl(var(--muted-foreground)); white-space:nowrap; }
.td{ padding:.75rem 1rem; font-size:.875rem; color:hsl(var(--foreground)); vertical-align:middle; }
.row-hover tbody tr{ transition:background-color .12s ease; }
.row-hover tbody tr:hover{ background:hsl(var(--muted) / .5); }

/* Stats */
.stat-value{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color:hsl(var(--foreground)); font-variant-numeric:tabular-nums; line-height:1.1; }
.stat-label{ font-size:.75rem; color:hsl(var(--muted-foreground)); margin-top:.25rem; }

/* Sidebar (light, shadcn) */
.sidebar{ background:hsl(var(--background)); border-right:1px solid hsl(var(--border)); }
.sidebar-link{ display:flex; align-items:center; gap:.625rem; padding:.5rem .75rem; border-radius:calc(var(--radius) - 2px);
               font-size:.875rem; font-weight:500; color:hsl(var(--muted-foreground)); transition:background-color .15s,color .15s; }
.sidebar-link:hover{ background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }
.sidebar-link-active{ background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }
.icon{ width:16px; height:16px; flex-shrink:0; }

/* Misc */
audio::-webkit-media-controls-panel{ height:32px; } audio{ height:32px; }
.lift{ transition:box-shadow .15s ease, transform .15s ease; }
.lift:hover{ box-shadow:0 4px 16px -8px rgba(15,23,42,.18); }
.scroll-thin::-webkit-scrollbar{ width:7px; height:7px; }
.scroll-thin::-webkit-scrollbar-thumb{ background:hsl(var(--border)); border-radius:4px; }
.scroll-thin::-webkit-scrollbar-track{ background:transparent; }

/* HTMX states */
.htmx-indicator{ opacity:0; transition:opacity .2s; }
.htmx-request.htmx-indicator,.htmx-request .htmx-indicator{ opacity:1; }
.htmx-request{ opacity:.6; pointer-events:none; cursor:wait; }

/* Motion */
@keyframes spin{ to{ transform:rotate(360deg) } }
.spinner{ display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .6s linear infinite; vertical-align:-2px; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.fade-up{ animation:fadeUp .22s cubic-bezier(.22,1,.36,1) both; }
.typing{ display:inline-flex; gap:4px; align-items:center; }
.typing span{ width:6px; height:6px; border-radius:50%; background:hsl(var(--muted-foreground)); animation:blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,80%,100%{ opacity:.25; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-2px) } }
.copyable{ cursor:pointer; } .copyable:hover{ text-decoration:underline dotted; }