/* shadcn CSS variables --- black & white theme */
:root {
  --background:           hsl(0 0% 100%);
  --foreground:           hsl(0 0% 3.9%);
  --card:                 hsl(0 0% 100%);
  --card-foreground:      hsl(0 0% 3.9%);
  --popover:              hsl(0 0% 100%);
  --popover-foreground:   hsl(0 0% 3.9%);
  --primary:              hsl(0 0% 9%);
  --primary-foreground:   hsl(0 0% 98%);
  --secondary:            hsl(0 0% 96%);
  --secondary-foreground: hsl(0 0% 9%);
  --muted:                hsl(0 0% 96%);
  --muted-foreground:     hsl(0 0% 45%);
  --accent:               hsl(0 0% 96%);
  --accent-foreground:    hsl(0 0% 9%);
  --destructive:          hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border:               hsl(0 0% 89.8%);
  --input:                hsl(0 0% 89.8%);
  --ring:                 hsl(0 0% 3.9%);
  --radius:               0.5rem;
}

* { border-color: var(--border); }
body { background: var(--background); color: var(--foreground); }

/* Layout containers */
.page-container-lg {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Search bar --- dark hero variant */
.search-form-dark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: calc(var(--radius) + 2px);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  transition: border-color 0.15s;
}
.search-form-dark:focus-within { border-color: rgba(255,255,255,0.35); }
.search-form-dark input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 15px; color: #fff; min-width: 0; font-family: inherit;
}
.search-form-dark input::placeholder { color: rgba(255,255,255,0.4); }
.search-form-dark svg { color: rgba(255,255,255,0.45); flex-shrink: 0; }

/* ------ Shim: component classes used in existing pages ---------------------------------------------------------------------------
   These replicate BasecoatCSS components so login/register/dashboard pages
   don't need to be rewritten. New pages use Tailwind utilities directly.     */

.page-center {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.page-container { width: 100%; max-width: 480px; }
.page-container-md { width: 100%; max-width: 720px; }

.card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.card > header { margin-bottom: 1.25rem; }
.card > header h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.25rem; }
.card > header p  { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; }
.card > footer { display: flex; align-items: center; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--border); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; line-height: 1;
  padding: 0 1rem; height: 2.25rem;
  border: 1px solid transparent;
  cursor: pointer; transition: opacity 0.15s, background 0.15s;
  text-decoration: none;
  background: var(--secondary); color: var(--secondary-foreground);
}
.btn:hover { opacity: 0.9; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.btn-outline  { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost    { background: transparent; border-color: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }
.btn-destructive-outline { background: transparent; border-color: hsl(0 84.2% 60.2% / 0.4); color: var(--destructive); }
.btn-destructive-outline:hover { background: hsl(0 84.2% 60.2% / 0.08); border-color: var(--destructive); opacity: 1; }
.btn-sm  { height: 1.875rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.btn-lg  { height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; }

.field { display: flex; flex-direction: column; gap: 0.375rem; }
.label { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }

.input {
  display: flex; width: 100%; height: 2.25rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.75rem;
  font-size: 0.875rem; font-family: inherit;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.input:focus { border-color: var(--ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent); }
.input::placeholder { color: var(--muted-foreground); }

/* HTMX loading indicator */
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }