/* Shadcn UI CSS Variables
 * Provides the design token foundation for shadcn-style components.
 * Per architecture.md Section 3: Component library
 */

:root {
  --font-sans: "Inter var", ui-sans-serif, system-ui, sans-serif;

  /* Light mode colors - copied from original app's index.css */
  /* Core theme colors */
  --background: 20 33.33% 98.24%;
  --foreground: 24.71 68% 9.8%;
  --border: 26.67 22.5% 84.31%;

  /* Button elevate effects */
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);
  --button-outline: rgba(0,0,0, .10);
  --opaque-button-border-intensity: -8;

  /* Computed border colors for buttons */
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)));

  /* Card - elevated surfaces */
  --card: 0 0% 100%;
  --card-foreground: 26.67 77.14% 6.86%;
  --card-border: 0 0% 95%;

  /* Popover */
  --popover: 0 0% 100%;
  --popover-foreground: 26.67 77.14% 6.86%;

  /* Button/Action colors */
  --primary: 26.67 77.14% 6.86%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 100%;
  --secondary-foreground: 26.67 77.14% 6.86%;

  --muted: 24 33.33% 91.18%;
  --muted-foreground: 23.48 10.41% 43.33%;

  --accent: 334.19 56.58% 29.8%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 72.16% 61.96%;
  --destructive-foreground: 0 0% 100%;
  --destructive-text: 0 74% 42%; /* Darker red for text on light backgrounds - WCAG AA compliant */

  /* Form input colors */
  --input: 0 0% 71%;
  --input-background: 0 0% 100%;
  --ring: var(--primary); /* Brand consistency: focus ring = primary */
  --radius: 1rem;

  /* Hover state for cards and list items */
  --hover: 28 31% 88%;

  /* Semantic status colors */
  --success: 142 71% 35%;
  --success-foreground: 0 0% 100%;
  --info: 217 91% 60%;
  --info-foreground: 0 0% 100%;
  --warning: 48 96% 89%;
  --warning-foreground: 32 95% 30%;

  /* RAG semantic palette for percentage/risk bars */
  --rag-red: 0 72.16% 61.96%;
  --rag-red-foreground: 0 0% 100%;
  --rag-red-text: 0 74% 42%;
  --rag-amber: 38 92% 50%;
  --rag-amber-foreground: 0 0% 100%;
  --rag-amber-text: 32 95% 30%;
  --rag-green: 142 71% 35%;
  --rag-green-foreground: 0 0% 100%;
  --rag-green-text: 142 72% 28%;

  /* Sidebar colors - matches original Replit design (warm beige/cream) */
  --sidebar: 30 33% 95%;
  --sidebar-foreground: 20 14% 17%;
  --sidebar-border: 45 15% 80%;
  --sidebar-primary: 9 82% 50%; /* #E23C1E - red logo background */
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 30 30% 88%;
  --sidebar-accent-foreground: 20 14% 17%;
  --sidebar-ring: 9 82% 50%;
  --sidebar-brand: 342 56% 30%; /* #77223c - dark maroon for brand text */

  /* Marketing Ember palette — used by pillar page layouts only */
  --marketing-primary: 9 80% 40%;
  --marketing-accent: 20 90% 38%;
  --marketing-brand: 9 70% 32%;
  --marketing-bg: 20 15% 97%;
  --marketing-muted: 20 12% 93%;
  --marketing-muted-fg: 0 0% 42%;
  --marketing-border: 20 10% 87%;
}

/* Dark mode - copied from original app's index.css */
.dark {
  --background: 20 14% 4%;
  --foreground: 45 25% 91%;
  --border: 20 14% 15%;

  /* Button elevate effects (dark mode) */
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);
  --button-outline: rgba(255,255,255, .10);
  --opaque-button-border-intensity: 9;

  /* Computed border colors for buttons (dark mode) */
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)));

  --card: 20 14% 8%;
  --card-foreground: 45 25% 85%;
  --card-border: 20 14% 12%;

  --popover: 20 14% 4%;
  --popover-foreground: 45 25% 91%;

  --primary: 9 75% 61%;
  --primary-foreground: 0 0% 100%;

  --secondary: 30 15% 52%;
  --secondary-foreground: 0 0% 100%;

  --muted: 20 14% 15%;
  --muted-foreground: 45 15% 46%;

  --accent: 25 45% 20%;
  --accent-foreground: 45 25% 85%;

  --destructive: 356 91% 54%;
  --destructive-foreground: 0 0% 100%;
  --destructive-text: 0 70% 55%; /* Lighter for dark backgrounds - WCAG AA compliant */

  --input: 20 14% 18%;
  --ring: 9 75% 61%;

  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;
  --info: 217 91% 65%;
  --info-foreground: 0 0% 100%;
  --warning: 45 93% 47%;
  --warning-foreground: 0 0% 0%;

  /* RAG semantic palette for percentage/risk bars */
  --rag-red: 356 91% 54%;
  --rag-red-foreground: 0 0% 100%;
  --rag-red-text: 0 70% 55%;
  --rag-amber: 45 93% 47%;
  --rag-amber-foreground: 0 0% 0%;
  --rag-amber-text: 45 100% 65%;
  --rag-green: 142 71% 45%;
  --rag-green-foreground: 0 0% 100%;
  --rag-green-text: 142 65% 58%;

  /* Sidebar colors (dark mode) */
  --sidebar: 20 14% 8%;
  --sidebar-foreground: 45 25% 85%;
  --sidebar-border: 20 14% 15%;
  --sidebar-primary: 9 75% 61%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 25 45% 20%;
  --sidebar-accent-foreground: 45 25% 85%;
  --sidebar-ring: 9 75% 61%;
  --sidebar-brand: 9 75% 61%;
}

/* Utility classes */
/* Note: .hidden is provided by Tailwind - don't override with !important
   as it breaks responsive variants like lg:block */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

/* Remove default focus ring for mouse clicks, keep for keyboard navigation (accessibility) */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-feature-settings: "rlig" 1, "calt" 1;
}

/* Focus ring utility */
.focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-ring:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Error states for form inputs */
input.error,
textarea.error,
select.error {
  border-color: hsl(var(--destructive));
}

input.error:focus-visible,
textarea.error:focus-visible,
select.error:focus-visible {
  outline-color: hsl(var(--destructive));
}

label.error {
  color: hsl(var(--destructive));
}

/* Accordion animations */
@keyframes accordion-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--accordion-content-height, auto);
    opacity: 1;
  }
}

@keyframes accordion-up {
  from {
    height: var(--accordion-content-height, auto);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out forwards;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out forwards;
}

/* Hover elevate effects for buttons and interactive elements */
.btn-primary,
.btn-secondary,
.btn-destructive,
.btn-outline,
.btn-ghost,
.hover-elevate,
.active-elevate,
.hover-elevate-2,
.active-elevate-2 {
  position: relative;
  z-index: 0;
}

.btn-primary::after,
.btn-secondary::after,
.btn-destructive::after,
.btn-outline::after,
.btn-ghost::after,
.hover-elevate::after,
.active-elevate::after,
.hover-elevate-2::after,
.active-elevate-2::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: 999;
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-destructive:hover::after,
.btn-outline:hover::after,
.btn-ghost:hover::after,
.hover-elevate:hover::after,
.active-elevate:active::after {
  background-color: var(--elevate-1);
}

.btn-primary:active::after,
.btn-secondary:active::after,
.btn-destructive:active::after,
.btn-outline:active::after,
.btn-ghost:active::after,
.hover-elevate-2:hover::after,
.active-elevate-2:active::after {
  background-color: var(--elevate-2);
}

/* Disabled button states - no hover effects */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-destructive:disabled,
.btn-outline:disabled,
.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary:disabled::after,
.btn-secondary:disabled::after,
.btn-destructive:disabled::after,
.btn-outline:disabled::after,
.btn-ghost:disabled::after {
  display: none;
}

/* ============================================================================
 * Modal / Dialog styles
 * Per ticket onboardinghub-xd4u: ShadCN-style modal dialogs
 * ============================================================================ */

dialog.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  overflow: visible;
}

dialog.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

dialog.modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  max-width: 32rem;
  width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  animation: modal-fade-in 0.15s ease-out;
  position: relative;
  z-index: 10;
}

/* Near-fullscreen modal for media preview */
.modal-box.modal-box-fullscreen {
  width: 90vw !important;
  max-width: 90vw !important;
  height: 90vh !important;
  max-height: 90vh !important;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  margin-bottom: 1rem;
}

.modal-footer {
  margin-top: 1.5rem;
  border-top: 1px solid hsl(var(--border));
  padding-top: 1rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  cursor: default;
  /* Per ticket onboardinghub-5p4h.27: z-index -1 to stay behind modal-box content */
  z-index: -1;
}

.modal-backdrop button {
  opacity: 0;
  position: absolute;
  inset: 0;
  cursor: default;
}

/* ============================================================================
 * Enrollment View success styles
 * Per ticket onboardinghub-atth: Green checkboxes and chevrons for completed
 * ============================================================================ */

.green-checkbox[data-state="checked"] {
  background-color: hsl(var(--success));
  border-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
}

.green-chevron > svg {
  color: hsl(var(--success));
}

/* Section accordion icon rotation
 * Per ticket onboardinghub-7e5: Section accordion UI
 * Uses data-state attribute instead of inline styles */
[data-section-accordion-target="icon"][data-state="open"] {
  transform: rotate(180deg);
}

/* ============================================================================
 * Settings modal responsive styles
 * Per ticket WLS-68: Mobile full-screen modal
 * ============================================================================ */

/* Mobile full-screen for settings modal */
@media (max-width: 639px) {
  dialog#settings-modal .modal-box {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
    margin: 0;
  }
}