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

/* BeebBeeb tokens, see documents/design-system.md.
   Identical across superadmin/, investor/, website/. Copy, don't diverge. */

/* Light, dashboards only. Depth is re-expressed with shadows here, the one place they're used. */
:root {
  --canvas: #f2f4f7;
  --background: #f6f7f9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --line: #e6e8ec;
  --line-strong: #cfd4dc;
  --foreground: #0d1014;
  --muted: #5b616b;
  --muted-dim: #868d99;
}

/* Dark, the primary theme. Five very close greys carry all the structure. */
:root.dark {
  --canvas: #0a0b0e;
  --background: #0d1014;
  --surface: #13151a;
  --surface-raised: #1a1d26;
  --surface-overlay: #1e2128;
  --line: #1f2126;
  --line-strong: #2e323b;
  --foreground: #f5f6f8;
  --muted: #8b919e;
  --muted-dim: #545a66;
}

body {
  color: var(--foreground);
  background: var(--background);
  /* Montserrat for Latin. Tajawal follows as the Arabic fallback so mixed text still renders. */
  font-family: var(--font-latin), var(--font-arabic), system-ui, sans-serif;
}

/* Arabic (RTL) leads with Tajawal. LocaleProvider stamps dir="rtl" on the root element. */
[dir="rtl"] body,
[dir="rtl"] {
  font-family: var(--font-arabic), var(--font-latin), system-ui, sans-serif;
}

/* Numerals and code use a monospace stack (no Geist Mono). */
.numeric,
.font-mono,
code,
pre {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
}

/* Financial figures and timers stay latin + LTR even in Arabic. */
.numeric {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  direction: ltr;
}

@layer components {
  /* --- surfaces ------------------------------------------------------- */
  .card {
    @apply rounded-card border border-line bg-surface shadow-card dark:shadow-none;
  }
  .card-raised {
    @apply rounded-card border border-line bg-surface-raised shadow-overlay dark:shadow-none;
  }

  /* --- buttons: always pill (design-system.md §3) ---------------------- */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold
           transition active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2
           focus-visible:ring-offset-background motion-reduce:active:scale-100;
  }
  /* The one primary action per screen. */
  .btn-primary {
    @apply btn bg-brand text-brand-ink hover:bg-brand-soft dark:shadow-glow;
  }
  .btn-secondary {
    @apply btn border border-line-strong bg-surface-raised text-foreground hover:border-brand;
  }
  .btn-ghost {
    @apply btn border border-line bg-surface text-foreground hover:bg-background;
  }
  .btn-danger {
    @apply btn border text-danger;
    background-color: color-mix(in srgb, #ef4444 14%, var(--surface));
    border-color: color-mix(in srgb, #ef4444 24%, transparent);
  }

  /* --- form ----------------------------------------------------------- */
  .field {
    @apply w-full rounded-field border border-line bg-surface px-3.5 py-2.5 text-sm text-foreground
           outline-none transition placeholder:text-muted-dim focus:border-brand;
  }
  .field-label {
    @apply mb-1.5 block text-[13px] font-medium text-muted;
  }

  /* --- the tint formula (design-system.md §2.5) ------------------------
     One construction for every chip / badge / tinted tile. Never hand-pick
     a tint hex; set `--tone` and let color-mix do the rest. The *label*
     stays --muted, color identifies the metric, not the text. */
  .tint {
    background-color: color-mix(in srgb, var(--tone) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--tone) 24%, transparent);
    color: var(--tone);
  }
  .tone-brand   { --tone: #fcd704; }
  .tone-success { --tone: #22c55e; }
  .tone-danger  { --tone: #ef4444; }
  .tone-info    { --tone: #3b82f6; }
  .tone-accent  { --tone: #a855f7; }
  .tone-warning { --tone: #f59e0b; }
  .tone-neutral { --tone: #8b919e; }

  .icon-chip {
    @apply tint inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-chip border;
  }
  .status-badge {
    @apply tint inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold;
  }
}

/* Motion floor: everything collapses to a short fade. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 100ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
  }
}

/* --- fleet map tooltip ---------------------------------------------------
   Mapbox ships a white popup with a white tip. On the dark map style that reads as a bug, so the
   surface and the little arrow are both repainted from our own tokens. The tip is a separate
   element with its own background, which is why it needs its own rule. */
.beeb-map-popup .mapboxgl-popup-content {
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}

.beeb-map-popup .mapboxgl-popup-tip {
  border-top-color: var(--surface);
  border-bottom-color: var(--surface);
}

.beeb-map-tip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* The QR code is the identifier an operator reads aloud, so it stays LTR whatever the page
     direction is, exactly like every other code in this dashboard. */
  direction: ltr;
  text-align: left;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.beeb-map-tip strong {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 13px;
}

.beeb-map-tip span {
  color: var(--muted);
  font-size: 11px;
}