/*
 * Design tokens ported verbatim from the React app's src/index.css, so the
 * server-rendered pages look pixel-identical to the current app. These are
 * plain CSS custom properties - Tailwind (loaded via CDN in
 * partials/header.inc.php) maps its color/radius/font utilities onto them,
 * exactly like tailwind.config.js did for the Vite build.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --background: 210 20% 98%;
  --foreground: 220 20% 15%;
  --card: 0 0% 100%;
  --card-foreground: 220 20% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 15%;
  --primary: 210 70% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 75%;
  --secondary-foreground: 220 20% 15%;
  --muted: 210 15% 95%;
  --muted-foreground: 220 10% 50%;
  --accent: 210 60% 92%;
  --accent-foreground: 210 70% 35%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --border: 210 15% 90%;
  --input: 210 15% 90%;
  --ring: 210 70% 45%;
  --chart-1: 210 70% 45%;
  --chart-2: 0 0% 60%;
  --chart-3: 220 20% 25%;
  --chart-4: 43 74% 66%;
  --chart-5: 210 50% 65%;
  --radius: 0.5rem;
  --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sidebar-background: 220 20% 18%;
  --sidebar-foreground: 210 15% 85%;
  --sidebar-primary: 210 70% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 18% 24%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 220 15% 25%;
  --sidebar-ring: 210 70% 50%;
}

.dark {
  --background: 220 20% 10%;
  --foreground: 0 0% 95%;
  --card: 220 20% 14%;
  --card-foreground: 0 0% 95%;
  --popover: 220 20% 14%;
  --popover-foreground: 0 0% 95%;
  --primary: 210 70% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 30%;
  --secondary-foreground: 0 0% 95%;
  --muted: 220 15% 18%;
  --muted-foreground: 210 10% 55%;
  --accent: 220 18% 24%;
  --accent-foreground: 0 0% 95%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 15% 22%;
  --input: 220 15% 22%;
  --ring: 210 70% 50%;
  --chart-1: 210 70% 50%;
  --chart-2: 0 0% 60%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 220 25% 10%;
  --sidebar-foreground: 210 15% 85%;
  --sidebar-primary: 210 70% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 18% 16%;
  --sidebar-accent-foreground: 0 0% 95%;
  --sidebar-border: 220 15% 18%;
  --sidebar-ring: 210 70% 50%;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
}

* {
  border-color: hsl(var(--border));
}

/*
 * Vanilla-JS modal/dropdown idiom, mirrors CTS Booking's
 * assets/js/custom_modals.js (.cc-overlay/.cc-active toggle+transition) -
 * see static/js/ui.js for the JS side.
 */
.ui-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 100;
}
.ui-overlay.ui-active {
  opacity: 1;
  pointer-events: auto;
}
.ui-dialog {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.15s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.ui-overlay.ui-active .ui-dialog {
  transform: scale(1) translateY(0);
}

.ui-dropdown-menu {
  position: absolute;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 90;
  min-width: 10rem;
  padding: 4px;
}
.ui-dropdown-menu.ui-open {
  display: block;
}
.ui-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
}
.ui-dropdown-item:hover {
  background: hsl(var(--muted));
}