@import "tailwindcss";
@import "tw-animate-css";

@theme {
  --font-sans:
    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    var(--font-azeret-mono), ui-monospace, SFMono-Regular, "SF Mono", Consolas,
    "Liberation Mono", Menlo, monospace;
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: oklch(0.99 0.003 164.25);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.995 0.002 164.25);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(0.995 0.002 164.25);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Brand colors */
  --brand-primary: oklch(0.646 0.222 164.25);
  --brand-primary-hover: oklch(0.576 0.222 164.25);
  --brand-secondary: oklch(0.6 0.118 184.704);
  --brand-secondary-hover: oklch(0.53 0.118 184.704);

  /* Status colors */
  --status-success: oklch(0.646 0.222 164.25);
  --status-success-foreground: oklch(0.985 0 0);
  --status-success-muted: oklch(0.97 0.02 164.25);
  --status-warning: oklch(0.828 0.189 84.429);
  --status-warning-foreground: oklch(0.145 0 0);
  --status-warning-muted: oklch(0.985 0.02 84.429);
  --status-error: oklch(0.577 0.245 27.325);
  --status-error-foreground: oklch(0.985 0 0);
  --status-error-muted: oklch(0.985 0.02 27.325);
  --status-info: oklch(0.6 0.118 184.704);
  --status-info-foreground: oklch(0.985 0 0);
  --status-info-muted: oklch(0.97 0.02 184.704);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.25 0.08 170);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.25 0.08 170);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.30 0.05 170);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.30 0.05 170);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.30 0.05 170);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0.02 160);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.696 0.17 162.48);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0.015 160);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);

    /* Brand colors - dark mode */
    --brand-primary: oklch(0.696 0.17 162.48);
    --brand-primary-hover: oklch(0.766 0.17 162.48);
    --brand-secondary: oklch(0.696 0.17 162.48);
    --brand-secondary-hover: oklch(0.766 0.17 162.48);

    /* Status colors - dark mode */
    --status-success: oklch(0.696 0.17 162.48);
    --status-success-foreground: oklch(0.145 0 0);
    --status-success-muted: oklch(0.269 0.05 162.48);
    --status-warning: oklch(0.828 0.189 84.429);
    --status-warning-foreground: oklch(0.145 0 0);
    --status-warning-muted: oklch(0.269 0.05 84.429);
    --status-error: oklch(0.704 0.191 22.216);
    --status-error-foreground: oklch(0.985 0 0);
    --status-error-muted: oklch(0.269 0.05 22.216);
    --status-info: oklch(0.769 0.188 70.08);
    --status-info-foreground: oklch(0.145 0 0);
    --status-info-muted: oklch(0.269 0.05 70.08);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  /* Comprehensive form elements styling - consistent across all inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    @apply bg-background text-foreground border-input h-10 rounded-md px-3 py-2 text-sm shadow-xs transition-colors;
  }

  /* Textarea specific height override */
  textarea {
    @apply h-auto min-h-20 resize-y;
  }

  /* Placeholder styling */
  input::placeholder,
  textarea::placeholder {
    @apply text-muted-foreground;
  }

  /* Better focus states with consistent ring */
  input:focus,
  textarea:focus,
  select:focus {
    @apply ring-ring/50 border-ring ring-[3px] outline-none;
  }

  /* Disabled state styling */
  input:disabled,
  textarea:disabled,
  select:disabled {
    @apply cursor-not-allowed opacity-50;
  }

  /* Form input icons - consistent positioning for left icons */
  .form-input-icon-left {
    @apply pl-10;
  }

  .form-input-icon-left + .form-icon {
    @apply text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2;
  }

  /* Form section styling */
  .form-section {
    @apply space-y-6;
  }

  .form-section-header {
    @apply flex items-center space-x-2;
  }

  .form-section-icon {
    @apply text-primary h-5 w-5;
  }

  .form-section-title {
    @apply text-foreground text-lg font-semibold;
  }

  /* Form field groups */
  .form-field-group {
    @apply space-y-2;
  }

  .form-field-label {
    @apply text-foreground text-sm font-medium;
  }

  .form-field-help {
    @apply text-muted-foreground text-xs;
  }

  /* Form grid layouts */
  .form-grid-1 {
    @apply grid grid-cols-1 gap-6;
  }

  .form-grid-2 {
    @apply grid grid-cols-1 gap-6 md:grid-cols-2;
  }

  .form-grid-3 {
    @apply grid grid-cols-1 gap-6 md:grid-cols-3;
  }

  /* Form buttons */
  .form-actions {
    @apply mt-8 flex justify-end gap-4;
  }

  /* Select elements specific styling to match inputs */
  select {
    @apply bg-background appearance-none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  /* Dark mode select arrow */
  @media (prefers-color-scheme: dark) {
    select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    }
  }

  /* Selection styling */
  ::selection {
    @apply bg-primary/20 text-foreground;
  }

  /* Scrollbar styling for dark mode */
  ::-webkit-scrollbar {
    @apply h-2 w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted/20;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/30 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
  }

  /* Firefox scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--muted) / 0.2);
  }

  /* Better link styling */
  a {
    @apply text-primary hover:text-primary/80 transition-colors;
  }

  /* Code elements */
  code {
    @apply bg-muted/50 text-foreground rounded px-1 py-0.5 font-mono text-sm;
  }

  pre {
    @apply bg-muted/50 text-foreground overflow-auto rounded-lg p-4;
  }

  /* Better table styling */
  table {
    @apply w-full border-collapse;
  }

  th {
    @apply bg-muted/50 text-muted-foreground border-border border-b p-2 text-left font-medium;
  }

  td {
    @apply border-border border-b p-2;
  }

  /* Modal and dialog backdrops */
  .backdrop {
    @apply bg-background/80 backdrop-blur-sm;
  }

  /* Better disabled state styling */
  :disabled {
    @apply cursor-not-allowed opacity-50;
  }

  /* Focus visible for keyboard navigation */
  :focus-visible {
    @apply ring-ring ring-offset-background ring-2 ring-offset-2 outline-none;
  }

  /* Better checkbox and radio styling */
  input[type="checkbox"],
  input[type="radio"] {
    @apply border-input bg-background;
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    @apply bg-primary border-primary;
  }

  /* Background gradient utilities that adapt to dark mode */
  .bg-gradient-auth {
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
  }

  @media (prefers-color-scheme: dark) {
    .bg-gradient-auth {
      background: linear-gradient(
        135deg,
        oklch(0.12 0.05 280) 0%,
        oklch(0.16 0.03 260) 100%
      );
    }
  }

  .bg-gradient-dashboard {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 40%, #f0fdfa 100%);
  }

  @media (prefers-color-scheme: dark) {
    .bg-gradient-dashboard {
      background: linear-gradient(
        135deg,
        oklch(0.15 0.06 175) 0%,
        oklch(0.18 0.08 180) 25%,
        oklch(0.22 0.10 185) 50%,
        oklch(0.26 0.12 190) 75%,
        oklch(0.30 0.14 195) 100%
      );
    }
  }

  /* Radial overlay that adapts to dark mode */
  .bg-radial-overlay::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse at 80% 0%,
      oklch(0.646 0.222 164.25 / 0.1) 0%,
      transparent 60%
    );
  }

  /* New colorful background patterns for dark mode */
  .bg-cosmic-gradient {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%);
  }

  @media (prefers-color-scheme: dark) {
    .bg-cosmic-gradient {
      background: linear-gradient(
        135deg,
        oklch(0.18 0.07 170) 0%,
        oklch(0.22 0.09 175) 20%,
        oklch(0.26 0.11 180) 40%,
        oklch(0.30 0.13 185) 60%,
        oklch(0.34 0.15 190) 80%,
        oklch(0.38 0.17 195) 100%
      );
    }
  }

  .bg-aurora-gradient {
    background: linear-gradient(45deg, #f0fdf4 0%, #ecfdf5 100%);
  }

  @media (prefers-color-scheme: dark) {
    .bg-aurora-gradient {
      background: linear-gradient(
        45deg,
        oklch(0.12 0.06 300) 0%,
        oklch(0.14 0.05 270) 25%,
        oklch(0.16 0.04 240) 50%,
        oklch(0.15 0.03 210) 75%,
        oklch(0.13 0.04 280) 100%
      );
    }
  }

  .bg-nebula-overlay::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: transparent;
  }

  @media (prefers-color-scheme: dark) {
    .bg-nebula-overlay::before {
      background:
        radial-gradient(
          circle at 20% 20%,
          oklch(0.25 0.08 300 / 0.15) 0%,
          transparent 50%
        ),
        radial-gradient(
          circle at 80% 80%,
          oklch(0.22 0.06 240 / 0.12) 0%,
          transparent 50%
        ),
        radial-gradient(
          circle at 60% 10%,
          oklch(0.18 0.04 270 / 0.08) 0%,
          transparent 40%
        );
    }
  }

  @media (prefers-color-scheme: dark) {
    .bg-radial-overlay::before {
      background: radial-gradient(
        ellipse at 80% 0%,
        oklch(0.5 0.12 185 / 0.12) 0%,
        oklch(0.4 0.10 190 / 0.08) 30%,
        oklch(0.3 0.08 195 / 0.04) 60%,
        transparent 80%
      );
    }
  }

  /* Brand utility classes */
  .bg-brand-primary {
    background-color: var(--brand-primary);
    color: var(--status-success-foreground);
  }

  .bg-brand-gradient {
    background: linear-gradient(
      135deg,
      var(--brand-primary),
      var(--brand-secondary)
    );
    color: white;
  }

  .hover\:bg-brand-gradient:hover {
    background: linear-gradient(
      135deg,
      var(--brand-primary-hover),
      var(--brand-secondary-hover)
    );
  }

  .text-brand-primary {
    color: var(--brand-primary);
  }

  .border-brand-primary {
    border-color: var(--brand-primary);
  }

  /* Status utility classes */
  .bg-status-success-muted {
    background-color: var(--status-success-muted);
  }

  .bg-status-warning-muted {
    background-color: var(--status-warning-muted);
  }

  .bg-status-error-muted {
    background-color: var(--status-error-muted);
  }

  .bg-status-info-muted {
    background-color: var(--status-info-muted);
  }

  .text-status-success {
    color: var(--status-success);
  }

  .text-status-warning {
    color: var(--status-warning);
  }

  .text-status-error {
    color: var(--status-error);
  }

  .text-status-info {
    color: var(--status-info);
  }

  .text-status-success-foreground {
    color: var(--status-success-foreground);
  }

  .text-status-warning-foreground {
    color: var(--status-warning-foreground);
  }

  .text-status-error-foreground {
    color: var(--status-error-foreground);
  }

  .text-status-info-foreground {
    color: var(--status-info-foreground);
  }
}
