@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
@import "tailwindcss";

@theme {
  --container-8xl: 88rem;
  --font-sans:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* CrawlerX brand gradient (MetatronCube blue → deep black), used on the
   sign-in surface and the sidebar header. */
:root {
  --brand-gradient: linear-gradient(
    135deg,
    #3779b9 0%,
    #0f1d34 70%,
    #00060c 100%
  );
}

.brand-gradient {
  background-image: var(--brand-gradient);
}

:root {
  --trend-grid-color: oklch(56% 0.01 255 / 0.28);
  --trend-axis-color: oklch(42% 0.01 255 / 0.85);
  --trend-fill-start-opacity: 0.32;
  --trend-fill-end-opacity: 0.05;
  --trend-tooltip-bg: oklch(99% 0.005 255 / 0.96);
  --trend-tooltip-border: oklch(84% 0.01 255 / 0.7);
  --trend-tooltip-shadow: oklch(0% 0 0 / 0.1);
}

@plugin "daisyui" {
  /* @property isn't supported by some browsers and gives a noisy warning https://github.com/saadeghi/daisyui/issues/3882 */
  exclude: properties;
}

/* Light theme — CrawlerX / MetatronCube brand (primary #3779b9) */
@plugin "daisyui/theme" {
  name: "crawlerx";
  default: true;
  prefersdark: false;
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f6f8fa;
  --color-base-300: #e6eaef;
  --color-base-content: #151515;
  --color-primary: #3779b9;
  --color-primary-content: #ffffff;
  --color-secondary: #0f1d34;
  --color-secondary-content: #ffffff;
  --color-accent: #4faede;
  --color-accent-content: #06263a;
  --color-neutral: #151515;
  --color-neutral-content: #ffffff;
  --color-info: #3779b9;
  --color-info-content: #ffffff;
  --color-success: oklch(65% 0.18 145);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(80% 0.15 80);
  --color-warning-content: oklch(100% 0 0);
  --color-error: oklch(65% 0.2 25);
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* Dark theme - auto-activates via prefers-color-scheme */
@plugin "daisyui/theme" {
  name: "crawlerx-dark";
  prefersdark: true;
  color-scheme: dark;
  --color-base-100: #141821;
  --color-base-200: #0e121b;
  --color-base-300: #232a37;
  --color-base-content: #e8ebf0;
  --color-primary: #3f8ad4;
  --color-primary-content: #ffffff;
  --color-secondary: #9fb3c8;
  --color-secondary-content: #0e121b;
  --color-accent: #4faede;
  --color-accent-content: #06263a;
  --color-neutral: #e8ebf0;
  --color-neutral-content: #141821;
  --color-info: #3f8ad4;
  --color-info-content: #ffffff;
  --color-success: oklch(65% 0.18 145);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(80% 0.15 80);
  --color-warning-content: oklch(100% 0 0);
  --color-error: oklch(65% 0.2 25);
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

html,
body {
  @apply m-0 bg-base-200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

/* Prevent Safari mobile from zooming on input focus (requires 16px minimum) */
input,
textarea,
select {
  @apply text-base;
}

/* Global input focus styling - use primary color instead of default ring */
.input:focus,
.input:focus-visible,
.textarea:focus,
.textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

/* Safe area utilities for mobile devices */
@layer utilities {
  .pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom, 0.5rem) + 0.5rem);
  }
  .pt-safe {
    padding-top: max(env(safe-area-inset-top, 0), 12px);
  }
}

/* Override DaisyUI dock's fixed positioning to use flex layout instead */
/* This allows the TabBar to work correctly with Safari's browser toolbar */
.dock {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  border-top: none;
  height: 4rem;
  padding-bottom: 0;
}

/* Touch device optimizations */
@media (pointer: coarse) {
  html {
    touch-action: none;
  }
  body {
    touch-action: pan-x pan-y;
  }
}

/* Dark mode: neutral interactive surfaces should lift above the panel, not
   sink below it. DaisyUI derives default buttons and the tabs-box well from
   base-200, which is darker than the base-100 content panel in dark mode,
   so they read as sunken/disabled. Colored variants (primary, error, ...)
   set their own --btn-color and are excluded. */
html[data-theme="crawlerx-dark"]
  .btn:not(
    .btn-primary,
    .btn-error,
    .btn-neutral,
    .btn-ghost,
    .btn-outline,
    .btn-soft
  ) {
  --btn-color: oklch(25% 0 0);
}

/* Light mode: the base-200 default button is nearly invisible on the
   base-100 content panel; use a white surface with a visible border,
   matching inputs/selects. */
html[data-theme="crawlerx"]
  .btn:not(
    .btn-primary,
    .btn-error,
    .btn-neutral,
    .btn-ghost,
    .btn-outline,
    .btn-soft
  ) {
  --btn-color: var(--color-base-100);
  --btn-border: var(--color-base-300);
}

/* Underline tabs: DaisyUI's tabs-border underlines the active tab with
   currentColor; use the primary accent instead (PostHog-style). */
.tabs-border > .tab.tab-active::before {
  --tab-border-color: var(--color-primary);
}

/* Custom alert styling with darker borders and transparent background */
.alert {
  @apply flex gap-3 rounded-lg border p-4 text-base-content/70;
}

.alert-warning {
  @apply border-warning/70 bg-warning/40 text-base-content/90;
}

.alert-info {
  @apply border-info/70 bg-info/40 text-base-content/90;
}

.alert-success {
  @apply border-success/70 bg-success/40 text-base-content/90;
}

.alert-error {
  @apply border-error/70 bg-error/40 text-base-content/90;
}

/* Tag chip colors — muted background + readable text in both themes.
   Text uses darker shades on light theme for contrast, lighter on dark. */
.tag-chip-slate {
  background-color: color-mix(in oklab, #64748b 14%, transparent);
  color: #334155;
  --tw-ring-color: color-mix(in oklab, #64748b 30%, transparent);
}
.tag-chip-rose {
  background-color: color-mix(in oklab, #f43f5e 14%, transparent);
  color: #9f1239;
  --tw-ring-color: color-mix(in oklab, #f43f5e 30%, transparent);
}
.tag-chip-amber {
  background-color: color-mix(in oklab, #f59e0b 16%, transparent);
  color: #92400e;
  --tw-ring-color: color-mix(in oklab, #f59e0b 32%, transparent);
}
.tag-chip-lime {
  background-color: color-mix(in oklab, #84cc16 16%, transparent);
  color: #3f6212;
  --tw-ring-color: color-mix(in oklab, #84cc16 32%, transparent);
}
.tag-chip-emerald {
  background-color: color-mix(in oklab, #10b981 14%, transparent);
  color: #065f46;
  --tw-ring-color: color-mix(in oklab, #10b981 30%, transparent);
}
.tag-chip-sky {
  background-color: color-mix(in oklab, #0ea5e9 14%, transparent);
  color: #075985;
  --tw-ring-color: color-mix(in oklab, #0ea5e9 30%, transparent);
}
.tag-chip-violet {
  background-color: color-mix(in oklab, #8b5cf6 16%, transparent);
  color: #5b21b6;
  --tw-ring-color: color-mix(in oklab, #8b5cf6 32%, transparent);
}
.tag-chip-fuchsia {
  background-color: color-mix(in oklab, #d946ef 14%, transparent);
  color: #86198f;
  --tw-ring-color: color-mix(in oklab, #d946ef 30%, transparent);
}

html[data-theme="crawlerx-dark"] .tag-chip-slate {
  color: #cbd5e1;
}
html[data-theme="crawlerx-dark"] .tag-chip-rose {
  color: #fda4af;
}
html[data-theme="crawlerx-dark"] .tag-chip-amber {
  color: #fcd34d;
}
html[data-theme="crawlerx-dark"] .tag-chip-lime {
  color: #d9f99d;
}
html[data-theme="crawlerx-dark"] .tag-chip-emerald {
  color: #6ee7b7;
}
html[data-theme="crawlerx-dark"] .tag-chip-sky {
  color: #7dd3fc;
}
html[data-theme="crawlerx-dark"] .tag-chip-violet {
  color: #c4b5fd;
}
html[data-theme="crawlerx-dark"] .tag-chip-fuchsia {
  color: #f5d0fe;
}

/* Keyword difficulty score badges — muted/transparent style to match tag chips */
.score-badge {
  @apply ring-1 ring-inset;
}

.score-tier-na {
  background-color: color-mix(in oklab, #94a3b8 12%, transparent);
  color: #475569;
  --tw-ring-color: color-mix(in oklab, #94a3b8 28%, transparent);
}

.score-tier-1 {
  background-color: color-mix(in oklab, #10b981 15%, transparent);
  color: #065f46;
  --tw-ring-color: color-mix(in oklab, #10b981 30%, transparent);
}

.score-tier-2 {
  background-color: color-mix(in oklab, #84cc16 15%, transparent);
  color: #3f6212;
  --tw-ring-color: color-mix(in oklab, #84cc16 30%, transparent);
}

.score-tier-3 {
  background-color: color-mix(in oklab, #eab308 16%, transparent);
  color: #854d0e;
  --tw-ring-color: color-mix(in oklab, #eab308 32%, transparent);
}

.score-tier-4 {
  background-color: color-mix(in oklab, #f97316 16%, transparent);
  color: #9a3412;
  --tw-ring-color: color-mix(in oklab, #f97316 32%, transparent);
}

.score-tier-5 {
  background-color: color-mix(in oklab, #ef4444 15%, transparent);
  color: #991b1b;
  --tw-ring-color: color-mix(in oklab, #ef4444 30%, transparent);
}

.score-tier-6 {
  background-color: color-mix(in oklab, #b91c1c 18%, transparent);
  color: #7f1d1d;
  --tw-ring-color: color-mix(in oklab, #b91c1c 32%, transparent);
}

html[data-theme="crawlerx-dark"] .score-tier-na {
  color: #cbd5e1;
}
html[data-theme="crawlerx-dark"] .score-tier-1 {
  color: #6ee7b7;
}
html[data-theme="crawlerx-dark"] .score-tier-2 {
  color: #bef264;
}
html[data-theme="crawlerx-dark"] .score-tier-3 {
  color: #fde047;
}
html[data-theme="crawlerx-dark"] .score-tier-4 {
  color: #fdba74;
}
html[data-theme="crawlerx-dark"] .score-tier-5 {
  color: #fca5a5;
}
html[data-theme="crawlerx-dark"] .score-tier-6 {
  color: #fda4af;
}

html[data-theme="crawlerx-dark"] {
  --trend-grid-color: oklch(78% 0.01 255 / 0.22);
  --trend-axis-color: oklch(84% 0.01 255 / 0.62);
  --trend-fill-start-opacity: 0.24;
  --trend-fill-end-opacity: 0.03;
  --trend-tooltip-bg: oklch(21% 0.01 255 / 0.95);
  --trend-tooltip-border: oklch(40% 0.01 255 / 0.65);
  --trend-tooltip-shadow: oklch(0% 0 0 / 0.35);
}

html[data-theme="crawlerx-dark"] .alert-warning {
  @apply border-warning/60 bg-warning/20;
}

html[data-theme="crawlerx-dark"] .alert-info {
  @apply border-info/60 bg-info/20;
}

html[data-theme="crawlerx-dark"] .alert-success {
  @apply border-success/60 bg-success/20;
}

html[data-theme="crawlerx-dark"] .alert-error {
  @apply border-error/60 bg-error/20;
}