@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Cinzel:wght@500;600;700&display=swap');

@layer base {
  :root {
    --color-primary: #2C3E50;
    --color-secondary: #cfe7ff;
    --color-accent: #3498DB;
    --color-info: #51B5E5;
    --color-warn: #FFB333;
    --color-error: #FF4757;
    --color-background: #F7F7F7;
  }

  /* Cores para o tema escuro */
  :root[class="dark"] {
    --color-primary: #1C2D3F;
    --color-secondary: #5D7D7A;
    --color-accent: #2980B9;
    --color-info: #3498DB;
    --color-warn: #FFCC00;
    --color-error: #E74C3C;
    --color-background: #2C3E50;
  }

  body {
    @apply font-sans antialiased text-ink bg-app;
  }
}

/* ============================================================
   Design system · padrões que não cabem bem em utility puro
   ============================================================ */
@layer components {
  /* Header band escuro da tela de Leads (gradiente steel + radial teal) */
  .leads-header-band {
    background:
      radial-gradient(700px 300px at 85% -40%, rgba(36, 219, 198, .18), transparent 60%),
      linear-gradient(180deg, theme('colors.steel.900'), theme('colors.steel.800'));
  }

  /* Rail lateral: gradiente steel vertical (mesma família do band). Sem glow
     atrás do emblema (o dono preferiu o logo cyan "limpo"). */
  .app-rail {
    background: linear-gradient(180deg, theme('colors.steel.900'), theme('colors.steel.950'));
  }

  /* KPI translúcido sobre o band escuro */
  .kpi-glass {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
  }

  /* Abas do show de lead (underline) — alternadas via Stimulus tabs_controller */
  .lead-tab {
    @apply -mb-px inline-flex cursor-pointer items-center gap-1.5 whitespace-nowrap border-b-2 border-transparent px-2.5 py-3.5 text-[12px] font-semibold text-ink-muted transition-colors;
  }
  .lead-tab:hover { @apply text-ink; }
  .lead-tab.is-active { @apply border-primary text-primary; }
  .lead-tab svg { @apply h-[14px] w-[14px] opacity-80; }
  .lead-tab.is-active svg { @apply text-primary opacity-100; }
  .lead-tab .tab-count { @apply rounded-full bg-surface-3 px-1.5 py-px text-[10.5px] font-semibold text-ink-muted; }
  .lead-tab.is-active .tab-count { @apply bg-primary-soft text-primary-softtx; }

  /* Scrollbar fina (cosmética) p/ áreas roláveis densas */
  .thin-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .thin-scroll::-webkit-scrollbar-thumb {
    background: theme('colors.iron.300'); border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box;
  }
  .thin-scroll::-webkit-scrollbar-thumb:hover { background: theme('colors.iron.400'); background-clip: content-box; }
  .thin-scroll::-webkit-scrollbar-track { background: transparent; }

  /* Faixa de abas: permite rolagem horizontal quando não cabem, mas sem
     mostrar a barra (senão fica um scroll feio colado embaixo dos tabs) */
  .tab-scroll { scrollbar-width: none; }
  .tab-scroll::-webkit-scrollbar { height: 0; width: 0; }
}

/* Loading sutil durante navegações/atualizações Turbo */
.turbo-progress-bar {
  height: 2px;
  background-color: theme('colors.primary.DEFAULT');
}

turbo-frame[busy] {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

/* ============================================================
   Anexos de Anotações · dropzone, chips e accordion
   ============================================================ */
@layer components {
  .ds-dropzone {
    @apply flex cursor-pointer items-center justify-center gap-2 rounded-md border-[1.5px] border-dashed border-line-strong bg-surface px-3 py-3 text-[12.5px] font-medium text-ink-subtle transition-colors;
  }
  .ds-dropzone:hover { @apply border-primary bg-primary-soft text-primary; }
  .ds-dropzone.is-dragover { @apply border-solid border-primary bg-primary-soft text-primary-softtx; }
  .ds-dropzone svg { @apply h-[17px] w-[17px] shrink-0; }

  /* Chip de documento — compartilhado pelo compositor (JS) e pela nota salva (DocChip) */
  .ds-doc-chip { @apply flex items-center gap-2.5 rounded-md border border-line bg-surface px-2 py-[7px] shadow-ds-sm; }
  .ds-doc-chip__name { @apply truncate font-mono text-[12px] font-medium text-ink; }
  .ds-doc-chip__size { @apply text-[10.5px] text-ink-faint; }
  .ds-doc-spinner { @apply h-[15px] w-[15px] shrink-0 animate-spin rounded-full border-2 border-line-strong border-t-primary; }

  /* Accordion de anexos (≥4) — chevron gira ao abrir */
  .ds-acc > summary { @apply list-none; }
  .ds-acc > summary::-webkit-details-marker { display: none; }
  .ds-acc__chev { @apply transition-transform; }
  .ds-acc[open] > summary .ds-acc__chev { @apply rotate-90; }
}