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

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

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

:root {
  --radius: 0.75rem;
  --background: #f7f8fb;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #00e8ff;
  --primary-foreground: #020617;
  --secondary: #0f172a;
  --secondary-foreground: #f8fafc;
  --muted: #e2e8f0;
  --muted-foreground: #475569;
  --accent: #dff7fb;
  --accent-foreground: #0f172a;
  --destructive: #ef4444;
  --border: #d6d8de;
  --input: #e4e7ec;
  --ring: #00d6eb;
  --chart-1: #00d6eb;
  --chart-2: #0891b2;
  --chart-3: #0e7490;
  --chart-4: #155e75;
  --chart-5: #0f4c5c;
  --sidebar: #f2f5f7;
  --sidebar-foreground: #0f172a;
  --sidebar-primary: #00e8ff;
  --sidebar-primary-foreground: #020617;
  --sidebar-accent: #c4eef6;
  --sidebar-accent-foreground: #0f172a;
  --sidebar-border: #cbd5e1;
  --sidebar-ring: #00d6eb;
  --destructive-foreground: oklch(1 0 0);
}

.dark {
  --background: #020617;
  --foreground: #f8fafc;
  --card: #0b1120;
  --card-foreground: #f8fafc;
  --popover: #0b1120;
  --popover-foreground: #f8fafc;
  --primary: #00d6eb;
  --primary-foreground: #041019;
  --secondary: #1f2937;
  --secondary-foreground: #f9fafb;
  --muted: #1e293b;
  --muted-foreground: #cbd5f5;
  --accent: #083344;
  --accent-foreground: #f1f5f9;
  --destructive: #f87171;
  --border: #1f2933;
  --input: #1e2933;
  --ring: #00e6ff;
  --chart-1: #00e6ff;
  --chart-2: #0891b2;
  --chart-3: #0e7490;
  --chart-4: #155e75;
  --chart-5: #0f4c5c;
  --sidebar: #050c16;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #00d6eb;
  --sidebar-primary-foreground: #041019;
  --sidebar-accent: #083344;
  --sidebar-accent-foreground: #f8fafc;
  --sidebar-border: #0f1b2a;
  --sidebar-ring: #00e6ff;
  --destructive-foreground: oklch(1 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
}

@layer components {
  /* Tippy.js (menções do editor) */
  .tippy-box {
    @apply rounded-lg border border-slate-200 bg-white shadow-lg;
  }
  .tippy-content { @apply p-0; }
  /* Tipografia básica para conteúdos rich text (Tiptap) */
  .rich-text {
    @apply text-foreground;
  }
  .rich-text p { @apply my-2; }
  .rich-text a { @apply text-neutral-900 underline; }
  .rich-text [data-ticket-mention="true"],
  .rich-text .ProseMirror [data-ticket-mention="true"],
  .rich-text .ticket-mention,
  .rich-text .ProseMirror .ticket-mention {
    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 no-underline transition hover:bg-slate-200;
  }
  /* Fallback for legacy editing markup before the custom node view hydrates. */
  .rich-text .ProseMirror [data-type="ticketMention"]:not([data-ticket-mention="true"]) {
    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 align-middle;
    position: relative;
  }
  .rich-text .ProseMirror [data-type="ticketMention"]:not([data-ticket-mention="true"])::before {
    content: "";
    @apply inline-block size-2 rounded-full bg-slate-400;
    margin-right: 0.375rem; /* ~gap-1.5 */
  }
  .rich-text .ProseMirror [data-type="ticketMention"][data-ticket-status="PENDING"]:not([data-ticket-mention="true"])::before { @apply bg-amber-400; }
  .rich-text .ProseMirror [data-type="ticketMention"][data-ticket-status="AWAITING_ATTENDANCE"]:not([data-ticket-mention="true"])::before { @apply bg-sky-500; }
  .rich-text .ProseMirror [data-type="ticketMention"][data-ticket-status="PAUSED"]:not([data-ticket-mention="true"])::before { @apply bg-violet-500; }
  .rich-text .ProseMirror [data-type="ticketMention"][data-ticket-status="RESOLVED"]:not([data-ticket-mention="true"])::before { @apply bg-emerald-500; }
  .rich-text [data-ticket-mention="true"] .ticket-mention-dot,
  .rich-text .ticket-mention .ticket-mention-dot {
    @apply inline-flex size-2 rounded-full bg-slate-400;
  }
  .rich-text [data-ticket-mention="true"] .ticket-mention-ref,
  .rich-text .ticket-mention .ticket-mention-ref {
    @apply text-neutral-900;
  }
  .rich-text [data-ticket-mention="true"] .ticket-mention-sep,
  .rich-text .ticket-mention .ticket-mention-sep {
    @apply text-neutral-400;
  }
  .rich-text [data-ticket-mention="true"] .ticket-mention-subject,
  .rich-text .ticket-mention .ticket-mention-subject {
    @apply max-w-[220px] truncate text-neutral-700;
  }
  .rich-text [data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot,
  .rich-text .ticket-mention[data-ticket-status="PENDING"] .ticket-mention-dot {
    @apply bg-amber-400;
  }
  .rich-text [data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot,
  .rich-text .ticket-mention[data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot {
    @apply bg-sky-500;
  }
  .rich-text [data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot,
  .rich-text .ticket-mention[data-ticket-status="PAUSED"] .ticket-mention-dot {
    @apply bg-violet-500;
  }
  .rich-text [data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot,
  .rich-text .ticket-mention[data-ticket-status="RESOLVED"] .ticket-mention-dot {
    @apply bg-emerald-500;
  }
  .rich-text ul { @apply my-2 list-disc ps-5; }
  .rich-text ol { @apply my-2 list-decimal ps-5; }
  .rich-text li { @apply my-1; }
  .rich-text blockquote { @apply my-3 border-l-2 border-muted-foreground/30 ps-3 text-muted-foreground; }
  .rich-text h1 { @apply text-xl font-semibold my-3; }
  .rich-text h2 { @apply text-lg font-semibold my-3; }
  .rich-text h3 { @apply text-base font-semibold my-2; }
  .rich-text code { @apply rounded bg-muted px-1 py-0.5 text-xs; }
  .rich-text pre { @apply my-3 overflow-x-auto rounded bg-muted p-3 text-xs; }

  .rich-text .ProseMirror.is-editor-empty::before,
  .rich-text .ProseMirror p.is-editor-empty:first-child::before {
    color: #94a3b8;
    content: attr(data-placeholder);
    pointer-events: none;
    height: 0;
    float: left;
    font-weight: 400;
  }

  /* Calendar dropdowns */
  .rdp-caption_dropdowns select {
    @apply h-8 rounded-lg border border-slate-300 bg-white px-2 text-sm font-medium text-neutral-800 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00e8ff]/20;
  }

  .rdp-caption_dropdowns select:disabled {
    @apply opacity-60;
  }

  @keyframes recent-ticket-enter {
    0% {
      opacity: 0;
      transform: translateY(-12px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .recent-ticket-enter {
    animation: recent-ticket-enter 0.45s ease-out;
  }
}
