@import "tailwindcss";
@import "intl-tel-input/dist/css/intlTelInput.min.css" layer(base);

.iti {
  --iti-path-flags-1x: url("/flags.webp");
  --iti-path-flags-2x: url("/flags@2x.webp");

  display: block;
}

@theme {
  /* Berry/magenta — main CTA buttons, links, active states */
  --color-primary: #A11454;
  /* Subtle primary tint — highlighted rows, light badges */
  --color-primary-light: #F4E0EA;
  /* Dark navy from wordmark — headings, emphasis */
  --color-secondary: #1A1A2E;
  /* Primary body text */
  --color-text: #1A1A2E;
  /* Secondary/muted text — captions, placeholders */
  --color-text-muted: #6B7280;
  /* Main screen background */
  --color-background: #FFFFFF;
  /* Cards, inputs, elevated surfaces */
  --color-surface: #F8F8FA;
  /* Dividers, input borders, separators */
  --color-border: #E5E7EB;
  /* Default icon color */
  --color-icon: #6B7280;
  /* Delivered, completed — positive status */
  --color-success: #16A34A;
  /* Pending, in-transit — caution status */
  --color-warning: #EA8B0F;
  /* Cancelled, errors — negative status */
  --color-error: #DC2626;
  /* Tab bar active tint, links */
  --color-tint: #A11454;
  /* Inactive tab bar icons */
  --color-tab-icon-default: #6B7280;
  /* Active tab bar icon */
  --color-tab-icon-selected: #A11454;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* ── Back-office components ──
   Shared building blocks for the admin, provider and organization areas. */
@layer components {
  .page-title {
    @apply text-2xl font-bold tracking-tight text-secondary;
  }

  .section-title {
    @apply text-base font-semibold text-secondary;
  }

  .card {
    @apply rounded-xl bg-background shadow-sm ring-1 ring-border;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-semibold whitespace-nowrap transition-colors cursor-pointer;
  }

  .btn:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
  }

  .btn:disabled {
    @apply cursor-not-allowed opacity-50;
  }

  .btn-primary {
    @apply bg-primary text-white shadow-sm hover:bg-primary/90;
  }

  .btn-secondary {
    @apply bg-background text-secondary shadow-sm ring-1 ring-inset ring-border hover:bg-surface;
  }

  .btn-danger {
    @apply bg-background text-error shadow-sm ring-1 ring-inset ring-error/30 hover:bg-error/5;
  }

  .btn-sm {
    @apply rounded-md px-2.5 py-1.5 text-xs;
  }

  .link {
    @apply font-medium text-primary hover:text-primary/80;
  }

  .field-label {
    @apply block text-sm font-medium text-secondary;
  }

  .field-hint {
    @apply mt-1.5 text-xs text-text-muted;
  }

  .field-input {
    @apply block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-text shadow-sm outline-none transition-colors placeholder:text-text-muted/70;
  }

  .field-input:focus {
    @apply border-primary ring-2 ring-primary/20;
  }

  .field-input:disabled {
    @apply cursor-not-allowed bg-surface text-text-muted;
  }

  select.field-input {
    @apply appearance-none bg-no-repeat pr-9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-size: 1rem;
  }

  .field-checkbox {
    @apply h-4 w-4 shrink-0 rounded border-border accent-primary;
  }

  /* intl-tel-input wraps the field; keep room for the flag selector */
  .iti .field-input {
    @apply pl-12;
  }

  .data-table {
    @apply min-w-full text-sm;
  }

  .data-table thead th {
    @apply bg-surface px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-muted whitespace-nowrap;
  }

  .data-table tbody tr {
    @apply border-t border-border;
  }

  .data-table tbody tr:hover {
    @apply bg-surface/60;
  }

  .data-table tbody td {
    @apply px-5 py-3.5 text-secondary whitespace-nowrap;
  }

  .data-table tfoot td {
    @apply border-t border-border bg-surface px-5 py-3 text-secondary;
  }

  .data-table .row-actions {
    @apply text-right;
  }

  .data-table .row-actions > * + * {
    @apply ml-4;
  }

  /* button_to renders a form; keep it on the same line as sibling links */
  .data-table .row-actions form {
    @apply inline;
  }

  .pill {
    @apply shrink-0 rounded-full bg-background px-3.5 py-1.5 text-sm font-medium text-secondary ring-1 ring-inset ring-border transition-colors hover:bg-surface;
  }

  .pill-active {
    @apply bg-secondary text-white ring-secondary hover:bg-secondary;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold whitespace-nowrap;
  }

  .badge-gray   { @apply bg-gray-100 text-gray-700; }
  .badge-green  { @apply bg-green-100 text-green-800; }
  .badge-yellow { @apply bg-amber-100 text-amber-800; }
  .badge-blue   { @apply bg-blue-100 text-blue-800; }
  .badge-purple { @apply bg-purple-100 text-purple-800; }
  .badge-red    { @apply bg-red-100 text-red-800; }

  .detail-list {
    @apply space-y-3 text-sm;
  }

  .detail-list dt {
    @apply text-xs font-medium uppercase tracking-wide text-text-muted;
  }

  .detail-list dd {
    @apply mt-0.5 text-secondary;
  }
}