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

:root {
  --font-sans: 'Inter', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  /* Fallback only — the live value is set on <html> from Settings → Appearance. */
  --brand: #006a4e;
  --header-h: 64px;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  @apply bg-white text-ink-900 antialiased;
  font-family: var(--font-sans);
  font-size: 0.9375rem; /* 15.9px base — up from the browser's ~15px effective */
  line-height: 1.6;
  overflow-x: hidden;
}

/* Bangla text needs extra leading to stay legible */
.bn {
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', var(--font-sans);
  line-height: 1.8;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f3f7;
}
::-webkit-scrollbar-thumb {
  background: #c3cad8;
  border-radius: 8px;
  border: 2px solid #f1f3f7;
}
::-webkit-scrollbar-thumb:hover {
  background: #9aa5b8;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ─── Focus ─── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Components ─── */
@layer components {
  .container-x {
    @apply mx-auto w-full max-w-[1320px] px-4 sm:px-6 lg:px-8;
  }

  .btn {
    @apply inline-flex select-none items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-[15px] font-semibold
           transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50 active:scale-[.97];
  }
  .btn-primary {
    @apply btn bg-brand-600 text-white shadow-sm hover:bg-brand-700 hover:shadow-md;
  }
  .btn-dark {
    @apply btn bg-ink-900 text-white hover:bg-ink-800;
  }
  .btn-outline {
    @apply btn border border-ink-200 bg-white text-ink-800 hover:border-ink-900 hover:bg-ink-50;
  }
  .btn-ghost {
    @apply btn text-ink-700 hover:bg-ink-100;
  }
  .btn-danger {
    @apply btn bg-rose-600 text-white hover:bg-rose-700;
  }
  .btn-bd {
    @apply btn bg-brand-600 text-white hover:bg-brand-700;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-[13px] rounded-lg;
  }
  .btn-lg {
    @apply px-6 py-3.5 text-[17px] rounded-2xl;
  }

  .input {
    @apply w-full rounded-xl border border-ink-200 bg-white px-3.5 py-2.5 text-[15px] text-ink-900
           placeholder:text-ink-400 transition
           focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20
           disabled:bg-ink-50 disabled:text-ink-400;
  }
  .input-lg {
    @apply px-4 py-3 text-base;
  }
  .label {
    @apply mb-1.5 block text-[13px] font-semibold uppercase tracking-wide text-ink-600;
  }  .textarea {
    @apply input min-h-[110px] resize-y leading-relaxed;
  }
  .select {
    @apply input appearance-none bg-no-repeat pr-10;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2365748f' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: right 12px center;
  }

  .card {
    @apply rounded-2xl border border-ink-200/70 bg-white shadow-soft;
  }
  .card-hover {
    @apply card transition-all duration-300 hover:-translate-y-1 hover:border-ink-300 hover:shadow-card;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[12px] font-semibold;
  }

  .chip {
    @apply inline-flex items-center gap-1.5 rounded-full border border-ink-200 bg-white px-3 py-1.5
           text-[13px] font-medium text-ink-700 transition hover:border-brand-500 hover:text-brand-700
           cursor-pointer;
  }
  .chip-active {
    @apply border-brand-600 bg-brand-600 text-white hover:border-brand-600 hover:text-white;
  }

  /* Admin shell */
  .admin-side-link {
    @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium text-ink-600
           transition-all hover:bg-white hover:text-brand-700 hover:shadow-sm;
  }
  .admin-side-link-active {
    @apply bg-white text-brand-700 shadow-sm ring-1 ring-brand-100;
  }
  .stat-card {
    @apply rounded-2xl border border-ink-200/70 bg-white p-5 shadow-soft;
  }
  .table-wrap {
    @apply overflow-x-auto rounded-2xl border border-ink-200/70 bg-white shadow-soft;
  }
  .th {
    @apply whitespace-nowrap px-4 py-3 text-left text-[12px] font-bold uppercase tracking-wider text-ink-500;
  }
  .td {
    @apply px-4 py-3 text-[14px] text-ink-700 align-middle;
  }

  .section-title {
    @apply font-display text-2xl font-bold tracking-tight text-ink-900 sm:text-3xl;
  }
  .eyebrow {
    @apply text-[12px] font-bold uppercase tracking-[.18em] text-brand-700;
  }

  .link-underline {
    @apply relative after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0
           after:bg-current after:transition-all hover:after:w-full;
  }

  .skeleton {
    @apply relative overflow-hidden rounded-lg bg-ink-100;
  }  .skeleton::after {
    content: '';
    @apply absolute inset-0 -translate-x-full animate-[shimmer_1.6s_infinite]
           bg-gradient-to-r from-transparent via-white/60 to-transparent;
  }

  /* ─── Colour picker ─── */
  /* Strip the native chrome so the swatch input reads as a design element
     rather than a form control, then widen the thumb for touch/pointer use. */
  .color-swatch {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
  }
  .color-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  .color-swatch::-webkit-color-swatch {
    border: none;
    border-radius: 12px;
  }
  .color-swatch::-moz-color-swatch {
    border: none;
    border-radius: 12px;
  }

  .color-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
  }
  .color-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;
    width: 22px;
    border-radius: 9999px;
    background: #fff;
    border: 2px solid rgb(31 37 51 / 0.18);
    box-shadow: 0 1px 4px rgb(16 24 40 / 0.28);
    cursor: pointer;
  }
  .color-slider::-moz-range-thumb {
    height: 22px;
    width: 22px;
    border-radius: 9999px;
    background: #fff;
    border: 2px solid rgb(31 37 51 / 0.18);
    box-shadow: 0 1px 4px rgb(16 24 40 / 0.28);
    cursor: pointer;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .scroll-x {
    @apply flex gap-3 overflow-x-auto pb-1 no-scrollbar snap-x snap-mandatory;
  }
  /* Minimum legible sizes — the design leaned on text-[9px]/[10px]/[11px] for
     labels, which is below comfortable reading size on a phone. */
  .text-2xs {
    font-size: 0.75rem; /* 12px */
    line-height: 1.45;
  }
  .text-3xs {
    font-size: 0.6875rem; /* 11px */
    line-height: 1.4;
  }
}

/* ─── Print ─── */
@media print {
  .no-print {
    display: none !important;
  }
  body {
    background: white;
  }
}

/* ─── Reduce motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}