@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 {
  /* ── 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;
  }

  /* ── 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; }

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

  /* ── 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; }

  /* ── 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;
  }
}