/* BuildingOS Theme — Overrides Chainlit's shadcn/ui CSS variables.
   IMPORTANT: Our CSS loads BEFORE Chainlit's bundle CSS, so we need
   !important on all variable overrides to win the cascade. */

/* ========== Font override ========== */
:root {
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* ========== SPARC Dark ========== */
.dark {
  --background: 180 4% 5% !important;
  --foreground: 0 0% 93% !important;
  --card: 180 3% 12% !important;
  --card-foreground: 0 0% 93% !important;
  --popover: 180 3% 12% !important;
  --popover-foreground: 0 0% 93% !important;
  --primary: 202 95% 46% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 180 3% 14% !important;
  --secondary-foreground: 0 0% 93% !important;
  --muted: 180 3% 18% !important;
  --muted-foreground: 0 0% 53% !important;
  --accent: 180 3% 18% !important;
  --accent-foreground: 0 0% 93% !important;
  --destructive: 0 84% 60% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 229 16% 20% !important;
  --input: 180 4% 11% !important;
  --ring: 202 95% 46% !important;
  --sidebar-background: 180 6% 7% !important;
  --sidebar-foreground: 0 0% 93% !important;
  --sidebar-primary: 202 95% 46% !important;
  --sidebar-primary-foreground: 0 0% 100% !important;
  --sidebar-accent: 180 4% 13% !important;
  --sidebar-accent-foreground: 0 0% 93% !important;
  --sidebar-border: 229 16% 20% !important;
  --sidebar-ring: 202 95% 46% !important;
}

/* ========== SPARC Light ========== */
:root:not(.dark) {
  --background: 0 0% 100% !important;
  --foreground: 0 0% 10% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 0 0% 10% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 0 0% 10% !important;
  --primary: 202 95% 46% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 210 20% 96% !important;
  --secondary-foreground: 0 0% 10% !important;
  --muted: 0 0% 93% !important;
  --muted-foreground: 0 0% 40% !important;
  --accent: 0 0% 95% !important;
  --accent-foreground: 0 0% 10% !important;
  --destructive: 0 84% 60% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 0 0% 88% !important;
  --input: 0 0% 92% !important;
  --ring: 202 95% 46% !important;
  --sidebar-background: 0 0% 98% !important;
  --sidebar-foreground: 0 0% 20% !important;
  --sidebar-primary: 202 95% 46% !important;
  --sidebar-primary-foreground: 0 0% 100% !important;
  --sidebar-accent: 0 0% 95% !important;
  --sidebar-accent-foreground: 0 0% 20% !important;
  --sidebar-border: 0 0% 90% !important;
  --sidebar-ring: 202 95% 46% !important;
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--card));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* ========== Logo sizing ========== */
img.logo {
  max-height: 32px !important;
  width: auto !important;
  object-fit: contain;
}

/* ========== Hide Chainlit's built-in dark/light toggle ========== */
#header-theme-toggle,
button[id*="theme"],
[data-testid="theme-toggle"] {
  display: none !important;
}

/* ========== Theme switcher dropdown ========== */
#bos-theme-switcher {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
}

#bos-theme-switcher label {
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#bos-theme-select {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

#bos-theme-select:hover,
#bos-theme-select:focus {
  border-color: hsl(var(--primary));
}

/* ========== PDF export button ========== */
#buildos-pdf-export {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 6px !important;
}