@layer theme, base, components, utilities;

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

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Core Obsidian Semantic Colors */
  --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-border-strong: var(--border-strong);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-surface: var(--surface);

  /* Sidebar */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-hover: var(--sidebar-hover);
  --color-sidebar-active: var(--sidebar-active);
  --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);

  /* Border Radius */
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --radius-xs: 2px;

  /* Status Colors */
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);

  /* Font Family */
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;

  /* Component Heights - Consistent */
  --height-sm: 32px;
  --height-md: 36px;
  --height-lg: 40px;
}

@layer base {
  :root {
    --background: #f5f7fb;
    --foreground: #111827;

    --card: #ffffff;
    --card-foreground: #111827;
    --popover: #ffffff;
    --popover-foreground: #111827;
    --surface: #ffffff;
    --surface-variant: #eef2f7;

    --primary: #2563eb;
    --primary-foreground: #ffffff;
    --primary-hover: #1d4ed8;

    --secondary: #eef2f7;
    --secondary-foreground: #1f2937;
    --muted: #eef2f7;
    --muted-foreground: #64748b;
    --accent: #e6f6f2;
    --accent-foreground: #0f5132;

    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --success: #16a34a;
    --success-foreground: #ffffff;
    --warning: #d97706;
    --warning-foreground: #111827;
    --info: #0284c7;
    --info-foreground: #ffffff;

    --status-success: #16a34a;
    --status-error: #dc2626;
    --status-running: #0284c7;
    --status-neutral: #64748b;
    --status-warning: #d97706;
    --status-aborted: #9333ea;

    --border: #d7dde6;
    --border-strong: #aeb8c6;
    --input: #cbd5e1;
    --ring: #2563eb;

    --text-primary: #111827;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-disabled: #94a3b8;

    --sidebar: #20242c;
    --sidebar-foreground: #d1d5db;
    --sidebar-border: #343a46;
    --sidebar-hover: #2a303a;
    --sidebar-active: #303846;
    --sidebar-primary: #60a5fa;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #2a303a;
    --sidebar-accent-foreground: #f3f4f6;
    --sidebar-ring: #60a5fa;

    --shadow-sm: 0 1px 2px 0 rgba(17, 24, 39, 0.06);
    --shadow-md:
      0 1px 3px 0 rgba(17, 24, 39, 0.1), 0 1px 2px 0 rgba(17, 24, 39, 0.06);
    --shadow-lg:
      0 10px 15px -3px rgba(17, 24, 39, 0.12),
      0 4px 6px -4px rgba(17, 24, 39, 0.1);

    --bg: 245 247 251;
    --text: 17 24 39;
    --sidebar-bg: 32 36 44;
    --sidebar-text: 209 213 219;
    --primary-rgb: 37 99 235;
  }

  .dark {
    --background: #111318;
    --foreground: #e5e7eb;

    --card: #181b22;
    --card-foreground: #e5e7eb;
    --popover: #1f232d;
    --popover-foreground: #e5e7eb;
    --surface: #181b22;
    --surface-variant: #242936;

    --primary: #60a5fa;
    --primary-foreground: #0b1220;
    --primary-hover: #93c5fd;

    --secondary: #242936;
    --secondary-foreground: #e5e7eb;
    --muted: #242936;
    --muted-foreground: #9ca3af;
    --accent: #12352f;
    --accent-foreground: #a7f3d0;

    --destructive: #f87171;
    --destructive-foreground: #1f0909;
    --success: #4ade80;
    --success-foreground: #052e16;
    --warning: #fbbf24;
    --warning-foreground: #261a00;
    --info: #38bdf8;
    --info-foreground: #082f49;

    --status-success: #4ade80;
    --status-error: #f87171;
    --status-running: #38bdf8;
    --status-neutral: #9ca3af;
    --status-warning: #fbbf24;
    --status-aborted: #c084fc;

    --border: #303746;
    --border-strong: #4b5563;
    --input: #4b5563;
    --ring: #60a5fa;

    --text-primary: #f3f4f6;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-disabled: #64748b;

    --sidebar: #181b22;
    --sidebar-foreground: #cbd5e1;
    --sidebar-border: #303746;
    --sidebar-hover: #242936;
    --sidebar-active: #2f3747;
    --sidebar-primary: #60a5fa;
    --sidebar-primary-foreground: #0b1220;
    --sidebar-accent: #242936;
    --sidebar-accent-foreground: #e5e7eb;
    --sidebar-ring: #60a5fa;

    /* Elevation (More Subtle in Dark Mode) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-lg:
      0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);

    /* RGB fallbacks */
    --bg: 17 19 24;
    --text: 229 231 235;
    --sidebar-bg: 24 27 34;
    --sidebar-text: 203 213 225;
    --primary-rgb: 96 165 250;
  }

  * {
    @apply border-border;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: normal;
  }

  /* Clean dark mode - no gradients */
  .dark body {
    background-color: var(--background);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
  }

  h1 {
    font-size: var(--text-3xl);
  }
  h2 {
    font-size: var(--text-2xl);
  }
  h3 {
    font-size: var(--text-xl);
  }
  h4 {
    font-size: var(--text-lg);
  }
  h5 {
    font-size: var(--text-base);
    font-weight: 600;
  }
  h6 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
  }
}

.glass-panel {
  background: rgba(var(--bg), 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Status Indicators - Minimal Text-Only Style */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid;
  white-space: nowrap;
}

.status-success {
  color: var(--status-success);
  background-color: color-mix(in srgb, var(--status-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-success) 20%, transparent);
  border-radius: 4px;
}
.dark .status-success {
  color: var(--status-success);
  background-color: color-mix(in srgb, var(--status-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-success) 24%, transparent);
}

.status-failed,
.status-error {
  color: var(--status-error);
  background-color: color-mix(in srgb, var(--status-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-error) 20%, transparent);
  border-radius: 4px;
}
.dark .status-failed,
.dark .status-error {
  color: var(--status-error);
  background-color: color-mix(in srgb, var(--status-error) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-error) 24%, transparent);
}

.status-running {
  color: var(--status-running);
  background-color: color-mix(in srgb, var(--status-running) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-running) 20%, transparent);
  border-radius: 4px;
}
.dark .status-running {
  color: var(--status-running);
  background-color: color-mix(in srgb, var(--status-running) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-running) 24%, transparent);
}

.status-warning {
  color: var(--status-warning);
  background-color: color-mix(in srgb, var(--status-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warning) 20%, transparent);
  border-radius: 4px;
}
.dark .status-warning {
  color: var(--status-warning);
  background-color: color-mix(in srgb, var(--status-warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-warning) 24%, transparent);
}

.status-aborted {
  color: var(--status-aborted);
  background-color: color-mix(in srgb, var(--status-aborted) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-aborted) 20%, transparent);
  border-radius: 4px;
}
.dark .status-aborted {
  color: var(--status-aborted);
  background-color: color-mix(in srgb, var(--status-aborted) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-aborted) 24%, transparent);
}

.status-neutral {
  color: var(--status-neutral);
  background-color: color-mix(in srgb, var(--status-neutral) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-neutral) 20%, transparent);
  border-radius: 4px;
}
.dark .status-neutral {
  color: var(--status-neutral);
  background-color: color-mix(in srgb, var(--status-neutral) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-neutral) 24%, transparent);
}

.status-info {
  color: var(--info);
  background-color: color-mix(in srgb, var(--info) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 20%, transparent);
  border-radius: 4px;
}
.dark .status-info {
  color: var(--info);
  background-color: color-mix(in srgb, var(--info) 14%, transparent);
  border-color: color-mix(in srgb, var(--info) 24%, transparent);
}

.status-muted,
.status-cancelled {
  color: var(--status-neutral);
  background-color: color-mix(in srgb, var(--status-neutral) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-neutral) 20%, transparent);
  border-radius: 4px;
}
.dark .status-muted,
.dark .status-cancelled {
  color: var(--status-neutral);
  background-color: color-mix(in srgb, var(--status-neutral) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-neutral) 24%, transparent);
}

/* Status Dot Indicator (for running states) */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-dot-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Toast Shadow Utility */
.shadow-toast {
  box-shadow: var(--shadow-lg);
}
.dark .shadow-toast {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Card Container - Developer-tool Unified Containers */
.card-obsidian,
.card-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.dark .card-obsidian,
.dark .card-container {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}

.card-obsidian tr:last-child td,
.card-container tr:last-child td {
  border-bottom: none;
}

/* Dropdown & Popover Backgrounds */
[data-radix-popper-content-wrapper] [role='menu'],
[data-radix-popper-content-wrapper] [role='listbox'],
[data-radix-popper-content-wrapper] [data-slot='select-content'] {
  background-color: var(--popover) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.dark [data-radix-popper-content-wrapper] [role='menu'],
.dark [data-radix-popper-content-wrapper] [role='listbox'],
.dark [data-radix-popper-content-wrapper] [data-slot='select-content'] {
  background-color: var(--popover) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Custom sidebar color - inherit text color from parent */
.custom-sidebar-color,
.custom-sidebar-color * {
  --sidebar-foreground: currentColor;
}
.custom-sidebar-color .text-sidebar-foreground,
.custom-sidebar-color .text-muted-foreground,
.custom-sidebar-color .text-foreground,
.custom-sidebar-color .text-primary {
  color: inherit !important;
}
.custom-sidebar-color .text-muted-foreground\/50,
.custom-sidebar-color .text-muted-foreground\/70,
.custom-sidebar-color .text-sidebar-foreground\/50 {
  color: inherit !important;
  opacity: 0.6;
}
.custom-sidebar-color .opacity-70 {
  opacity: 0.7;
}
/* SVG icons should inherit color */
.custom-sidebar-color svg,
.custom-sidebar-color svg.lucide,
.custom-sidebar-color .lucide {
  color: inherit !important;
  stroke: currentColor !important;
}
.custom-sidebar-color svg.text-primary,
.custom-sidebar-color .text-primary.lucide,
.custom-sidebar-color svg.text-sidebar-foreground,
.custom-sidebar-color svg.text-muted-foreground {
  color: inherit !important;
}

/* Hide scrollbar utility */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Remove default focus outline, but preserve focus-visible for accessibility */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Input Focus States - subtle border change only */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--ring);
  outline: none;
}

/* Scrollbar Styling - Subtle */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--border);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* Agent modal — CRT power-on (subtle) */
@keyframes agent-modal-in {
  0% {
    opacity: 0;
    transform: scaleX(0.85) scaleY(0.01);
    filter: brightness(2);
  }
  30% {
    opacity: 1;
    transform: scaleX(0.95) scaleY(0.01);
    filter: brightness(1.8);
  }
  60% {
    transform: scaleX(1.01) scaleY(1.02);
    filter: brightness(1.1);
  }
  80% {
    transform: scale(0.995);
    filter: brightness(1);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Agent modal — CRT power-off */
@keyframes agent-modal-out {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    opacity: 0.4;
  }
  30% {
    opacity: 1;
    filter: brightness(1.6);
  }
  65% {
    transform: scaleX(0.8) scaleY(0.005);
    filter: brightness(5);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.4) scaleY(0.005);
    filter: brightness(8);
  }
}

/* Sub-agent panel animations */
@keyframes delegate-panel-in {
  0% {
    opacity: 0;
    transform: scale(0.9) translateX(20px);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}

/* Loading States */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--muted) 25%,
    var(--secondary) 50%,
    var(--muted) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Transitions */
.transition-default {
  transition: all 150ms ease-in-out;
}

/* Utility Classes */
.text-balance {
  text-wrap: balance;
}

.tracking-tight {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 0;
}

@layer components {
  .api-docs-shell {
    min-height: 100%;
  }

  .api-docs-viewer {
    height: 100%;
    min-height: 0;
    background:
      radial-gradient(
        circle at top left,
        color-mix(in srgb, var(--primary) 12%, transparent),
        transparent 32%
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--card) 94%, transparent),
        var(--background)
      );
    --scalar-background-1: var(--background);
    --scalar-background-2: var(--card);
    --scalar-background-3: var(--muted);
    --scalar-background-accent: var(--accent);
    --scalar-color-1: var(--foreground);
    --scalar-color-2: var(--muted-foreground);
    --scalar-color-3: var(--text-secondary);
    --scalar-border-color: var(--border);
    --scalar-sidebar-background-1: color-mix(
      in srgb,
      var(--card) 92%,
      var(--background)
    );
    --scalar-sidebar-item-hover-background: var(--sidebar-hover);
    --scalar-button-1: var(--primary);
    --scalar-button-1-color: var(--primary-foreground);
  }

  .api-docs-viewer > * {
    height: 100%;
    min-height: 0;
  }

  @media (min-width: 1001px) {
    .api-docs-viewer .references-layout {
      height: 100%;
      min-height: 0;
      overflow: hidden;
      grid-template-rows: var(--scalar-header-height, 0px) minmax(0, 1fr) auto;
      --full-height: 100%;
    }

    .api-docs-viewer .references-navigation,
    .api-docs-viewer .references-rendered {
      min-height: 0;
      max-height: 100%;
    }

    .api-docs-viewer .references-navigation {
      overflow: hidden;
    }

    .api-docs-viewer .references-navigation-list {
      position: static;
      top: auto;
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .api-docs-viewer .references-rendered {
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
}
