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

/*
 * ─────────────────────────────────────────────────────────────
 *  Agendou — shared component vocabulary
 *  Single source of truth for buttons, badges, surfaces and
 *  form controls used across every view. Prefer these classes
 *  over ad-hoc utility strings so the UI stays consistent and
 *  mobile-friendly. Blue is reserved for the *primary* action
 *  only; semantic colors (green/red/amber) carry meaning.
 * ─────────────────────────────────────────────────────────────
 */

@layer base {
  /* iOS Safari: inputs temporais são inline-flex com min-width intrínseco
     vindo do picker interno e ignoram width:100% (iOS 17+), estourando o
     container em telas estreitas. Deixa encolher e obedecer o CSS. */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Sem appearance nativo o iOS centraliza o valor e colapsa a altura
     do campo vazio; alinha à esquerda e garante a altura de uma linha. */
  input::-webkit-date-and-time-value {
    text-align: inherit;
    min-height: 1.5rem;
  }
}

@layer components {
  /* ── Recurso pago liberado no teste (TrialFeatureComponent) ─
     Moldura azul clara em volta dos campos do recurso; selos sobre a borda; tooltip no
     hover (desktop) ou ao tocar, via <details> (sem JS). */
  .new-feature-sparkle {
    @apply inline-flex h-4 w-4 shrink-0 align-middle text-blue-600 motion-safe:animate-[new-feature-twinkle_2.4s_ease-in-out_infinite];
  }
  .new-feature-badge {
    @apply inline-flex items-center gap-1 rounded-full bg-blue-600 px-2 py-0.5 text-[11px] font-semibold leading-4 text-white;
  }
  .new-feature-sparkle svg { @apply h-full w-full; }
  .new-feature-badge svg { @apply h-2.5 w-2.5; }
  @keyframes new-feature-twinkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.8); opacity: .6; }
  }

  .trial-feature {
    @apply relative rounded-xl border border-blue-200 bg-blue-50/30 px-4 pb-4 mt-3;
  }
  /* Selos em fluxo (não absolutos), subindo até a borda. No celular cabem numa linha porque
     viram só ícone + "X dias restantes"; se o nome for aberto e não couber, quebram linha
     empurrando o conteúdo. */
  .trial-feature-tags {
    @apply -mt-3.5 mb-4 flex flex-wrap items-center gap-2;
  }
  .trial-feature-body {
    @apply space-y-6;
  }
  .trial-feature-label {
    @apply inline-flex cursor-pointer list-none items-center gap-1.5 whitespace-nowrap rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white
           focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 [&::-webkit-details-marker]:hidden;
  }
  .trial-feature-until {
    @apply inline-flex cursor-pointer list-none items-center gap-1.5 whitespace-nowrap rounded-full border border-blue-200 bg-white px-3 py-1 text-xs font-medium text-blue-800
           hover:bg-blue-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 [&::-webkit-details-marker]:hidden;
  }
  /* Abre no hover (desktop) e quando o <details> está aberto (toque no celular). No celular
     ancora na moldura (o <details> não é relative) para não vazar pela direita da tela. */
  .trial-feature-tip {
    @apply invisible opacity-0 absolute left-0 top-6 z-20 w-72 max-w-[calc(100vw-2rem)] pt-2 transition-opacity
           sm:top-full sm:max-w-none
           sm:group-hover:visible sm:group-hover:opacity-100 group-open:visible group-open:opacity-100;
  }
  .trial-feature-tip-box {
    @apply flex flex-col gap-1.5 rounded-lg bg-gray-800 px-4 py-3 text-sm leading-snug text-white shadow-lg;
  }

  /* ── Buttons ──────────────────────────────────────────────
     Base sizing is mobile-first: comfortable 40px tap target.
     Compose: class="btn btn-approve" or "btn btn-sm btn-ghost". */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg
           px-4 py-2 text-sm font-medium leading-none text-center
           transition-colors cursor-pointer select-none
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn:focus-visible {
    @apply outline-none ring-2 ring-offset-2 ring-blue-300;
  }
  .btn-sm { @apply px-3 py-1.5 text-xs gap-1.5; min-height: 2rem; min-width: 2rem; }
  .btn-lg { @apply px-5 py-2.5 text-base; }
  .btn-block { @apply w-full; }

  /* Primary — reserved for the single most important action on a view */
  .btn-primary { @apply bg-blue-600 text-white hover:bg-blue-700; }
  /* Positive / confirm */
  .btn-approve { @apply bg-green-600 text-white hover:bg-green-700; }
  /* Destructive, secondary weight (outline) — reject / cancel */
  .btn-reject  { @apply bg-white text-red-600 border border-red-200 hover:bg-red-50; }
  /* Destructive, primary weight (solid) — delete confirmations */
  .btn-danger  { @apply bg-red-600 text-white hover:bg-red-700; }
  /* Neutral secondary — Cancel in dialogs, "Today", etc. */
  .btn-secondary { @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50; }
  /* Quietest — tertiary actions like Edit next to stronger ones */
  .btn-ghost   { @apply bg-transparent text-gray-600 border border-transparent hover:bg-gray-100 hover:text-gray-900; }
  /* WhatsApp reminder / charge */
  .btn-whatsapp { @apply bg-white text-green-700 border border-green-300 hover:bg-green-50; }

  /* Icon-only button — guarantees a 32px minimum tap target.
     Purely structural (size + centering) so it composes with any color classes. */
  .icon-btn {
    @apply inline-flex items-center justify-center;
    min-width: 2rem;
    min-height: 2rem;
  }

  /* Abas de título de modal — o título vira o seletor de modo (sublinhado = ativo) */
  .modal-tab {
    @apply pb-2.5 -mb-px text-sm font-semibold leading-none whitespace-nowrap
           border-b-2 border-transparent text-gray-400
           transition-colors cursor-pointer
           hover:text-gray-600;
  }
  .modal-tab-active {
    @apply border-blue-600 text-gray-900;
  }

  /* ── Badges / pills ──────────────────────────────────────── */
  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  .badge-pending   { @apply bg-yellow-100 text-yellow-800; }
  .badge-confirmed { @apply bg-green-100 text-green-800; }
  .badge-rejected  { @apply bg-red-100 text-red-800; }
  .badge-cancelled { @apply bg-gray-100 text-gray-700; }
  .badge-paid      { @apply bg-green-100 text-green-800; }
  .badge-unpaid    { @apply bg-orange-100 text-orange-800; }
  .badge-neutral   { @apply bg-gray-100 text-gray-700; }
  .badge-info      { @apply bg-blue-50 text-blue-700; }
  .badge-tip { @apply relative inline-block; }
  .badge-tip > summary { @apply cursor-pointer list-none [&::-webkit-details-marker]:hidden; }
  .badge-tip-box {
    @apply invisible opacity-0 absolute z-20 left-0 top-full mt-2 whitespace-nowrap rounded-lg bg-gray-800 px-3 py-2
           text-xs font-normal text-white shadow-lg transition-opacity
           sm:left-auto sm:right-full sm:top-1/2 sm:mt-0 sm:mr-2 sm:-translate-y-1/2
           sm:group-hover:visible sm:group-hover:opacity-100 group-open:visible group-open:opacity-100;
  }

  /* ── Surfaces ────────────────────────────────────────────── */
  .card { @apply bg-white rounded-xl border border-gray-200 shadow-sm; }
  .card-pad { @apply p-4 sm:p-6; }

  /* ── Dialog (<dialog> nativo, aberto via showModal) ─────── */
  .dialog {
    @apply w-[calc(100%-2rem)] max-w-md max-h-[90vh] m-auto p-0 rounded-2xl bg-white shadow-2xl overflow-y-auto;
  }
  .dialog::backdrop { @apply bg-gray-900/50; }
  .dialog[open] { animation: dialog-pop 180ms ease-out; }
  .dialog-icon {
    @apply mx-auto flex items-center justify-center w-16 h-16 rounded-full text-3xl;
  }

  /* ── Settings accordion sections ──
     Collapsible <details> panel used across the settings page.
     overflow-hidden clips the filled summary's square bottom corners so
     they don't bleed over the parent's rounded border when the section is
     closed (no custom per-state corner rounding needed). Safe here because
     these sections hold native date/time pickers, not absolute dropdowns. */
  .settings-section { @apply border border-gray-300 rounded-lg overflow-hidden; }
  .settings-section-summary {
    @apply cursor-pointer bg-gray-50 hover:bg-gray-100 px-4 py-3
           font-semibold text-gray-900 flex justify-between items-center;
  }

  /* ── Date chip (softened from solid blue → tinted) ───────── */
  .date-chip {
    @apply flex-shrink-0 bg-blue-50 border border-blue-100 rounded-xl text-center;
    padding: 0.5rem 0.625rem;
    min-width: 3.25rem;
  }
  .date-chip-day   { @apply text-xl sm:text-2xl font-bold leading-none text-blue-900; }
  .date-chip-month { @apply font-bold uppercase tracking-wide text-blue-500; font-size: 10px; margin-top: 2px; }

  /* ── Filter pills ────────────────────────────────────────── */
  .pill {
    @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium
           border transition-colors cursor-pointer;
  }
  .pill-off    { @apply bg-white text-gray-600 border-gray-200 hover:bg-gray-50; }
  .pill-active { @apply bg-gray-900 text-white border-gray-900; }

  /* ── Form controls ───────────────────────────────────────── */
  .input {
    /* text-base no mobile: fontes <16px fazem o iOS Safari dar zoom automático
       ao focar o campo, e a página fica "presa" com zoom após o submit */
    @apply w-full border border-gray-300 rounded-lg px-3 py-2 text-base sm:text-sm
           focus:ring-2 focus:ring-blue-200 focus:border-blue-500 focus:outline-none;
  }
  .label { @apply block text-sm font-medium text-gray-700 mb-1; }
  .label-hint { @apply block text-xs text-gray-500; }

  /* ── Step headers (multi-step forms, e.g. public booking) ──
     <div class="step-header"><span class="step-chip">1</span>
     <h3 class="step-title">…</h3></div> */
  .step-header { @apply flex items-center gap-2.5 mb-3; }
  .step-chip {
    @apply inline-flex items-center justify-center w-7 h-7 rounded-full
           bg-blue-600 text-white text-sm font-bold flex-shrink-0;
  }
  .step-title { @apply text-base sm:text-lg font-semibold text-gray-900; }

  /* ── Gated section (progressive disclosure) ──
     Sections start gated and are released by JS once the previous
     step is complete (see services_controller). */
  .gate { @apply transition-opacity duration-300; }
  .gated { @apply opacity-40 pointer-events-none select-none; }

  /* ── Booking calendar day cells ──
     Color alone carries availability; a legend names the colors once
     instead of repeating a label inside every cell. */
  .cal-day {
    @apply w-full h-11 sm:h-14 rounded-lg flex items-center justify-center
           text-sm sm:text-base font-semibold transition-colors relative;
  }
  .cal-day-available { @apply bg-green-100 text-green-900 hover:bg-green-200 active:bg-green-300 cursor-pointer; }
  .cal-day-full      { @apply bg-amber-100 text-amber-900 hover:bg-amber-200 cursor-pointer; }
  .cal-day-off       { @apply bg-gray-50 text-gray-300; }
  .cal-day-muted     { @apply text-gray-200; }
  .cal-day-selected,
  .cal-day-selected:hover { @apply bg-blue-600 text-white ring-2 ring-blue-300 ring-offset-1; }
  .cal-day-today::after {
    content: '';
    position: absolute;
    bottom: 0.3rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.7;
  }

  /* ── Calendar legend ── */
  .cal-legend { @apply flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-600 mt-3; }
  .cal-legend-dot { @apply inline-block w-3 h-3 rounded mr-1.5 align-[-1px]; }

  /* ── Time slot pills (grid of compact time buttons) ── */
  .slot-pill {
    @apply inline-flex items-center justify-center min-h-[40px] px-2 rounded-lg
           text-sm font-semibold border transition-colors cursor-pointer;
  }
  .slot-pill-open    { @apply bg-white border-gray-300 text-gray-800 hover:border-blue-400 hover:bg-blue-50; }
  .slot-pill-pending { @apply bg-amber-50 border-amber-300 text-amber-900 hover:bg-amber-100; }
  .slot-pill-selected,
  .slot-pill-selected:hover { @apply bg-blue-600 border-blue-600 text-white; }

  /* ── Tema do link de agendamento (paleta escolhida pelo profissional) ──
     O wrapper `.booking-theme` define --brand, --brand-hover e --brand-soft (BookingPalette).
     Só a cor de ação muda; verde de disponível e âmbar de pendente continuam semânticos. */
  .booking-theme .btn-primary { background-color: var(--brand); }
  .booking-theme .btn-primary:hover { background-color: var(--brand-hover); }
  .booking-theme .step-chip { background-color: var(--brand); }
  .booking-theme .cal-day-selected,
  .booking-theme .cal-day-selected:hover { background-color: var(--brand); --tw-ring-color: var(--brand-soft); }
  .booking-theme .slot-pill-selected,
  .booking-theme .slot-pill-selected:hover { background-color: var(--brand); border-color: var(--brand); }
  .booking-theme .slot-pill-open:hover { border-color: var(--brand); background-color: var(--brand-soft); }
  .booking-theme input[type="checkbox"] { accent-color: var(--brand); color: var(--brand); }
  .booking-theme .booking-accent { color: var(--brand); }
  .booking-theme .card { border-color: var(--brand-tint); }
  .booking-theme .booking-band { background: linear-gradient(135deg, var(--brand), var(--brand-hover)); }
  .booking-theme .booking-soft { background-color: var(--brand-soft); border-color: var(--brand-tint); }
  /* Card de endereço: tom da paleta no celular, branco no desktop */
  .booking-theme .booking-soft-mobile { background-color: #fff; }
  @media (max-width: 767px) {
    .booking-theme .booking-soft-mobile { background-color: var(--brand-soft); border-color: var(--brand-tint); }
  }
  .booking-theme .booking-service:hover { background-color: var(--brand-soft); }
  .booking-theme .booking-service:has(input:checked) { border-color: var(--brand); background-color: var(--brand-soft); }
  .booking-theme .booking-service:has(input:checked):hover { background-color: var(--brand-soft); }

  /* ── Página pública de agendamento ── */
  .service-option { @apply flex items-center gap-3 p-3 border border-gray-200 rounded-xl bg-white cursor-pointer transition-colors hover:bg-gray-50; }
  .service-option:has(input:checked) { @apply border-blue-600 bg-blue-50; }
  .slot-group-title { @apply text-xs font-semibold uppercase tracking-wide text-gray-500 mb-1.5; }
  /* Período sem nenhum horário que caiba no atendimento some junto com os botões */
  .slot-group:not(:has(button:not(.\!hidden))) { display: none; }
  /* Dica "escolha um dia" some quando os horários aparecem */
  .times-hint:has(~ .time-selector:not(.hidden)) { display: none; }
  /* Resumo + botão presos no rodapé do celular; no desktop voltam ao fluxo */
  .booking-submit-bar { @apply sticky bottom-0 z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 py-3 bg-white border-t border-gray-200 shadow-[0_-6px_20px_rgba(0,0,0,0.06)] lg:static lg:mx-0 lg:px-0 lg:py-0 lg:border-0 lg:shadow-none; }

  /* Amostra de cor no seletor de paleta */
  .palette-swatch { @apply block w-9 h-9 rounded-full cursor-pointer border border-gray-200; }
  .peer:checked + .palette-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827; }
  .peer:focus-visible + .palette-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9ca3af; }

  /* ── Empty states (render via shared/empty_state partial) ── */
  .empty-state { @apply p-8 sm:p-12 text-center; }
  .empty-state-icon { @apply text-3xl text-gray-300 mb-3; }
  .empty-state-title { @apply text-base font-semibold text-gray-900; }
  .empty-state-subtitle { @apply text-sm text-gray-500 mt-1; }

  /* ── Navbar links ── */
  .nav-link { @apply text-gray-600 hover:text-gray-900; }
  .nav-link-active { @apply text-blue-600 font-semibold; }

  /* ── Feature icon tile (landing/marketing) ── */
  .icon-tile {
    @apply w-11 h-11 rounded-lg bg-blue-50 text-blue-600
           flex items-center justify-center flex-shrink-0;
  }

  /* ── Artigos (blog / central de ajuda) ──
     .article-body estiliza o HTML escrito à mão nos arquivos de conteúdo;
     os blocos ricos vêm dos componentes Articles::*. */
  .article-body { @apply text-gray-700 text-base sm:text-lg leading-relaxed; }
  .article-body > * + * { @apply mt-6; }
  .article-body h2 { @apply mt-12 text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 scroll-mt-24; }
  .article-body h3 { @apply mt-8 text-xl font-semibold text-gray-900 scroll-mt-24; }
  .article-body a:not(.btn) { @apply font-medium text-blue-600 underline underline-offset-2 hover:text-blue-700; }
  .article-body strong { @apply font-semibold text-gray-900; }
  .article-body ul { @apply list-disc pl-6 space-y-2; }
  .article-body ol { @apply list-decimal pl-6 space-y-2; }
  .article-body blockquote { @apply border-l-4 border-blue-200 pl-4 italic text-gray-600; }
  .article-body code { @apply rounded bg-gray-100 px-1.5 py-0.5 text-[0.9em] text-gray-800; }
  .article-body hr { @apply my-10 border-gray-200; }

  .article-media { @apply overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm; }
  .article-caption { @apply mt-2 text-center text-sm text-gray-500; }

  .article-callout { @apply flex gap-3 rounded-xl border p-4 text-base; }
  .article-callout-tip     { @apply border-blue-100 bg-blue-50 text-blue-900; }
  .article-callout-warning { @apply border-amber-200 bg-amber-50 text-amber-900; }
  .article-callout-success { @apply border-green-200 bg-green-50 text-green-900; }

  .article-step { @apply flex gap-4; }
}

@keyframes dialog-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}