@import "tailwindcss";

/* Load JS config for theme extensions */
@config "../tailwind.config.js";

/* Source: scan our static HTML/JS for class usage */
@source "../../ui/static/**/*.{html,js}";

/* Safelist: dynamic classes constructed in JS that Tailwind can't detect */
@source inline("text-green-400 text-red-400 text-amber-400 text-blue-400 text-slate-400 text-cyan-400 bg-green-500/15 bg-red-500/15 bg-amber-500/15 bg-blue-500/15 bg-slate-500/15 bg-cyan-500/15 bg-green-500/10 bg-red-500/10 bg-amber-500/10 bg-blue-500/10 bg-emerald-500/15 bg-emerald-500/10 text-emerald-400 border-green-500/30 border-red-500/30 border-amber-500/30 border-blue-500/30 border-purple-500/50 text-purple-400 border-red-500/30 bg-green-500 bg-yellow-500 bg-orange-500 bg-red-500 text-yellow-400");

/* ── Brand color tokens (accessible from JS via getComputedStyle) ── */
:root {
  --color-bg-primary: #0B1220;
  --color-bg-secondary: #121A2B;
  --color-bg-elevated: #1A2438;
  --color-border: #1E293B;

  --color-accent: #22D3EE;
  --color-accent-hover: #67E8F9;
  --color-accent-active: #0891B2;

  --color-text-primary: #E6EDF3;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;

  --color-success: #14B8A6;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #38BDF8;
}

/* ── Base layer overrides ── */
@layer base {
  body {
    @apply bg-brand-bg text-[#E6EDF3] antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: #0B1220; }
  ::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #334155; }
}

/* ── Component classes ── */
@layer components {
  .btn-primary {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200
           bg-brand-accent text-brand-bg
           hover:bg-brand-accent-hover hover:shadow-glow-sm
           active:bg-brand-accent-active
           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none;
  }

  .btn-secondary {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200
           bg-brand-elevated text-[#E6EDF3] border border-brand-border
           hover:bg-brand-border hover:border-[#334155]
           active:bg-[#334155]
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200
           bg-red-500/10 text-red-400 border border-red-500/30
           hover:bg-red-500/20 hover:border-red-500/50
           active:bg-red-500/30
           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-500/10;
  }

  .btn-ghost {
    @apply px-3 py-1.5 rounded-lg font-medium transition-all duration-200
           text-[#94A3B8] hover:text-[#E6EDF3] hover:bg-brand-elevated;
  }

  .btn-success {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200
           bg-emerald-500/10 text-emerald-400 border border-emerald-500/30
           hover:bg-emerald-500/20 hover:border-emerald-500/50
           active:bg-emerald-500/30
           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-emerald-500/10;
  }

  .card {
    @apply bg-brand-surface border border-brand-border rounded-xl p-5;
  }

  .card-elevated {
    @apply bg-brand-elevated border border-brand-border rounded-xl p-5;
  }

  .input {
    @apply w-full px-4 py-2.5 rounded-lg
           bg-brand-elevated border border-brand-border
           text-[#E6EDF3] placeholder-[#64748B]
           focus:outline-none focus:border-brand-accent focus:ring-1 focus:ring-brand-accent/30
           transition-all duration-200;
  }

  .select {
    @apply px-3 py-2 rounded-lg appearance-none cursor-pointer
           bg-brand-elevated border border-brand-border
           text-[#E6EDF3]
           focus:outline-none focus:border-brand-accent focus:ring-1 focus:ring-brand-accent/30
           transition-all duration-200;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
  }

  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }

  /* Decision badges */
  .badge-approve { @apply bg-emerald-500/15 text-emerald-400; }
  .badge-deny { @apply bg-red-500/15 text-red-400; }
  .badge-escalate { @apply bg-amber-500/15 text-amber-400; }

  /* Risk badges */
  .badge-low { @apply bg-slate-500/15 text-slate-400; }
  .badge-medium { @apply bg-blue-500/15 text-blue-400; }
  .badge-high { @apply bg-amber-500/15 text-amber-400; }
  .badge-critical { @apply bg-red-500/15 text-red-400; }

  /* Path badges */
  .badge-fast { @apply bg-emerald-500/15 text-emerald-400; }
  .badge-llm { @apply bg-blue-500/15 text-blue-400; }

  /* Status badges */
  .badge-active { @apply bg-emerald-500/15 text-emerald-400; }
  .badge-idle { @apply bg-slate-500/15 text-slate-400; }
  .badge-completed { @apply bg-blue-500/15 text-blue-400; }
  .badge-suspended { @apply bg-amber-500/15 text-amber-400; }
  .badge-terminated { @apply bg-red-500/15 text-red-400; }

  /* Record type badges */
  .badge-reasoning { @apply bg-cyan-500/15 text-cyan-400; }
  .badge-checkpoint { @apply bg-purple-500/15 text-purple-400; }
  .badge-summary { @apply bg-emerald-500/15 text-emerald-400; }

  .stat-card {
    @apply bg-brand-surface border border-brand-border rounded-xl p-5 flex flex-col items-center justify-center text-center min-h-[100px];
  }

  .stat-value {
    @apply text-3xl font-bold text-[#E6EDF3];
  }

  .stat-label {
    @apply text-sm text-[#94A3B8] mt-1;
  }

  .tab-btn {
    @apply px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
           text-[#94A3B8] hover:text-[#E6EDF3] hover:bg-brand-elevated;
  }

  .tab-btn-active {
    @apply text-brand-accent bg-brand-accent/10 shadow-glow-sm;
  }

  .toast {
    @apply px-4 py-3 rounded-lg shadow-lg border text-sm font-medium
           backdrop-blur-sm transition-all duration-300;
  }
  .toast-success { @apply bg-teal-500/15 border-teal-500/30 text-teal-300; }
  .toast-error { @apply bg-red-500/15 border-red-500/30 text-red-300; }
  .toast-info { @apply bg-sky-500/15 border-sky-500/30 text-sky-300; }
  .toast-warning { @apply bg-amber-500/15 border-amber-500/30 text-amber-300; }

  .modal-overlay {
    @apply fixed inset-0 bg-black/60 backdrop-blur-sm z-50
           flex items-center justify-center p-4;
  }

  .modal-content {
    @apply bg-brand-surface border border-brand-border rounded-xl
           shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6;
  }

  /* Tooltip on hover — reusable via .has-tooltip + data-tooltip attribute */
  .has-tooltip {
    position: relative;
  }
  .has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: theme('colors.slate.800');
    color: theme('colors.slate.300');
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: normal;
    white-space: normal;
    max-width: 300px;
    width: max-content;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 50;
    border: 1px solid theme('colors.slate.600');
    line-height: 1.4;
  }
  .has-tooltip:hover::after {
    opacity: 1;
  }

  /* Tree display styles for parent/child sessions */
  .session-child {
    @apply ml-6 border-l-2 border-brand-border;
  }

  .tree-connector {
    @apply text-brand-border font-mono text-lg leading-none -ml-1;
  }

  /* Chart containers */
  .chart-card {
    @apply flex flex-col items-center;
  }

  .chart-title {
    @apply text-sm font-medium text-[#94A3B8] mb-3;
  }

  .chart-container-doughnut {
    @apply w-full max-w-[200px] mx-auto;
  }

  .chart-container-doughnut-wide {
    @apply w-full;
    height: 180px;
  }

  .chart-container-timeline {
    height: 180px;
  }

  .chart-container-bar {
    height: 220px;
  }

  /* ── Console player ── */
  .console-view {
    @apply text-sm leading-relaxed;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  }

  .console-user-msg {
    @apply border-l-2 border-blue-500/70 pl-3 my-4 py-1;
  }
  .console-role-label {
    @apply text-xs font-bold text-blue-400 mb-1 uppercase tracking-wide;
  }
  .console-user-text {
    @apply text-[#E6EDF3] whitespace-pre-wrap;
  }

  .console-assistant-text {
    @apply my-3 text-[#E6EDF3];
  }
  /* Markdown prose styling */
  .console-assistant-text h1 { @apply text-lg font-bold mt-4 mb-2 text-[#E6EDF3]; }
  .console-assistant-text h2 { @apply text-base font-bold mt-3 mb-2 text-[#E6EDF3]; }
  .console-assistant-text h3 { @apply text-sm font-bold mt-2 mb-1 text-[#E6EDF3]; }
  .console-assistant-text p { @apply my-1.5; }
  .console-assistant-text ul { @apply list-disc pl-5 my-1.5; }
  .console-assistant-text ol { @apply list-decimal pl-5 my-1.5; }
  .console-assistant-text li { @apply my-0.5; }
  .console-assistant-text code {
    @apply bg-brand-bg px-1.5 py-0.5 rounded text-xs text-brand-accent;
  }
  .console-assistant-text pre {
    @apply bg-brand-bg rounded-lg p-3 my-2 overflow-x-auto text-xs;
  }
  .console-assistant-text pre code {
    @apply bg-transparent p-0 text-[#E6EDF3];
  }
  .console-assistant-text blockquote {
    @apply border-l-2 border-brand-border pl-3 italic opacity-80 my-2;
  }
  .console-assistant-text table { @apply border-collapse my-2 text-xs w-full; }
  .console-assistant-text th {
    @apply border border-brand-border px-2 py-1 bg-brand-bg font-bold text-left;
  }
  .console-assistant-text td { @apply border border-brand-border px-2 py-1; }
  .console-assistant-text a { @apply text-brand-accent underline; }
  .console-assistant-text strong { @apply font-bold; }
  .console-assistant-text em { @apply italic; }
  .console-assistant-text hr { @apply border-brand-border my-3; }

  .console-reasoning {
    @apply my-2;
  }
  .console-reasoning-toggle {
    @apply text-xs text-muted hover:text-secondary cursor-pointer
           flex items-center gap-1.5 py-1;
  }
  .console-reasoning-text {
    @apply text-xs text-muted/80 italic mt-1 pl-4 whitespace-pre-wrap
           max-h-[30vh] overflow-y-auto;
  }

  .console-tool {
    @apply my-2 border border-brand-border/50 rounded-lg overflow-hidden;
  }
  .console-tool-error {
    @apply border-red-500/30;
  }
  .console-tool-header {
    @apply flex items-center gap-2 px-3 py-1.5 bg-brand-bg/60
           cursor-pointer text-xs hover:bg-brand-bg/80 transition-colors;
  }
  .console-chevron {
    @apply text-muted text-[10px] w-3 flex-shrink-0;
  }
  .console-tool-name {
    @apply font-bold text-brand-accent;
  }
  .console-tool-subtitle {
    @apply text-secondary truncate;
  }
  .console-tool-body {
    @apply border-t border-brand-border/30;
  }
  .console-tool-section {
    @apply px-3 py-2;
  }
  .console-tool-section + .console-tool-section {
    @apply border-t border-brand-border/20;
  }
  .console-tool-section-label {
    @apply text-[10px] text-muted uppercase tracking-wider mb-1;
  }
  .console-code {
    @apply text-xs overflow-x-auto whitespace-pre-wrap break-words
           max-h-[40vh] overflow-y-auto;
  }
  .console-code-error {
    @apply text-red-400;
  }

  .console-step-finish {
    @apply text-xs text-muted text-center my-3 py-1.5
           border-t border-b border-brand-border/20;
  }

  .console-subtask {
    @apply my-2 pl-4 border-l-2 border-purple-500/50 text-xs py-1;
  }
  .console-subtask-label {
    @apply font-bold text-purple-400 mr-1;
  }

  .console-lifecycle {
    @apply text-xs text-muted text-center my-2 opacity-60;
  }

  .console-ts {
    @apply text-[10px] text-muted/50 whitespace-nowrap flex-shrink-0 tabular-nums;
  }
}

/* ── Utility additions ── */
@layer utilities {
  .glow-accent {
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
  }
}
