/* google font import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* import tailwind engine (v4) */
@import "tailwindcss";

/* explicitly include files Tailwind might miss (blade, vendor) */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* CSS-first theme: map Tailwind theme variables to runtime CSS variables.
   If you want font utilities like "font-sans" to map to Poppins, set it here. */
@theme {
  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", "Helvetica Neue", sans-serif;
  --breakpoint-xs: 25.5rem;
  --breakpoint-x: 30rem;
}

/* plugins */
@plugin "@tailwindcss/typography";

/* base layer (keep sensible defaults, but use theme variables) */
@layer base {
  html, body {
    /* prefer using var(--font-sans) so Tailwind utilities and base align */
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
  }

  input, textarea, select, button, optgroup, option, label {
    font-family: inherit;
    font-weight: inherit;
  }

  /* headings using utilities — okay but @apply is known to have edge cases */
  h1 { @apply text-4xl font-extrabold leading-tight; }
  h2 { @apply text-3xl font-bold leading-tight; }
  h3 { @apply text-2xl font-semibold; }
  p  { @apply text-base leading-relaxed; }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

/* custom runtime CSS variables used to drive @theme above */
:root {
  --brand-50: #fffeea;
  --brand-100: #fffac5;
  --brand-200: #fff685;
  --brand-300: #ffea46;
  --brand-400: #ffdb1b;
  --brand-500: #ffbb00;
  --brand-600: #e29000;
  --brand-700: #bb6502;
  --brand-800: #984e08;
  --brand-900: #7c400b;
  --brand-950: #482100;


  --background-50: #f6f7f9;
  --background-100: #eceff2;
  --background-200: #d5dbe2;
  --background-300: #b0bbc9;
  --background-400: #8597ab;
  --background-500: #667b91;
  --background-600: #516278;
  --background-700: #425062;
  --background-800: #3a4552;
  --background-900: #2d343e;
  --background-950: #22272f;

  /* semantic colors - success */
  --success-bg: #d1fae5;
  --success-text: #059669;
  --success-border: #a7f3d0;

  /* semantic colors - error */
  --error-bg: #fee2e2;
  --error-text: #b91c1c;
  --error-border: #fecaca;

  /* semantic colors - warning */
  --warning-bg: #fffbeb;
  --warning-text: #b45309;
  --warning-border: #fde68a;

  /* semantic colors - info */
  --info-bg: #eff6ff;
  --info-text: #1e40af;
  --info-border: #bfdbfe;

  /* semantic colors - pending */
  --pending-bg: #fffbeb;
  --pending-text: #b45309;
  --pending-border: #fde68a;

  /* action button colors */
  --messenger-action-button: #0084ff;
  --messenger-action-button-icon: #ffffff;
  --whatsapp-action-button: #25d366;
  --whatsapp-action-button-icon: #ffffff;
}

/* dark theme swap (runtime) */
.theme-lime {
  --brand-50: #fbffe4;
  --brand-100: #f5ffc4;
  --brand-200: #e9ff90;
  --brand-300: #d7ff50;
  --brand-400: #bbff00;
  --brand-500: #a3e600;
  --brand-600: #7eb800;
  --brand-700: #5f8b00;
  --brand-800: #4b6d07;
  --brand-900: #405c0b;
  --brand-950: #203400;
}

/* utilities / small helpers */
@layer utilities {
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* badge utilities */
  .badge-success {
    @apply bg-[var(--success-bg)] text-[var(--success-text)] border border-[var(--success-border)] px-3 py-1 rounded-md text-sm font-medium;
  }

  .badge-error {
    @apply bg-[var(--error-bg)] text-[var(--error-text)] border border-[var(--error-border)] px-3 py-1 rounded-md text-sm font-medium;
  }

  .badge-warning {
    @apply bg-[var(--warning-bg)] text-[var(--warning-text)] border border-[var(--warning-border)] px-3 py-1 rounded-md text-sm font-medium;
  }

  .badge-info {
    @apply bg-[var(--info-bg)] text-[var(--info-text)] border border-[var(--info-border)] px-3 py-1 rounded-md text-sm font-medium;
  }

  .badge-pending {
    @apply bg-[var(--pending-bg)] text-[var(--pending-text)] border border-[var(--pending-border)] px-3 py-1 rounded-md text-sm font-medium;
  }

  /* status utilities (larger, no padding/sizing) */
  .status-success {
    @apply bg-[var(--success-bg)] text-[var(--success-text)] border border-[var(--success-border)];
  }

  .status-error {
    @apply bg-[var(--error-bg)] text-[var(--error-text)] border border-[var(--error-border)];
  }

  .status-warning {
    @apply bg-[var(--warning-bg)] text-[var(--warning-text)] border border-[var(--warning-border)];
  }

  .status-info {
    @apply bg-[var(--info-bg)] text-[var(--info-text)] border border-[var(--info-border)];
  }

  .status-pending {
    @apply bg-[var(--pending-bg)] text-[var(--pending-text)] border border-[var(--pending-border)];
  }
}