/*
| Smart Carb Portal stylesheet
|
| Bootstrap 5 supplies the grid, dropdowns, modals and form controls.
| Tailwind supplies the utility layer for everything bespoke.
| Bootstrap is imported first so Tailwind utilities win on conflicts.
*/

@import 'bootstrap/dist/css/bootstrap.min.css';
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap');

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

:root {
    /* Sampled from the Smart Carb Nutritecs avocado logo */
    --sc-green: #5F8A31;
    --sc-green-dark: #4C7027;
    --sc-green-light: #A0C168;
    --sc-orange: #E8792A;
    --sc-gold: #F2B705;
    --sc-brown: #6B4226;
    --sc-ink: #1B1813;
    --sc-sand: #FFF7E8;

    /* Bootstrap overrides so its components inherit the brand */
    --bs-primary: var(--sc-green);
    --bs-primary-rgb: 95, 138, 49;
    --bs-body-color: #2A261F;
    --bs-body-font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-link-color: var(--sc-green-dark);
    --bs-link-hover-color: var(--sc-green);
    --bs-border-radius: 0.75rem;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-[2fb423] text-ink-800 font-sans antialiased;
    }

    [dir='rtl'] body {
        letter-spacing: 0;
    }

    h1, h2, h3, h4 {
        @apply font-display font-bold text-ink-900;
    }
}

@layer components {
    .btn-brand {
        @apply inline-flex items-center justify-center gap-2 rounded-full bg-brand-500 px-6 py-3
               font-semibold text-white shadow-brand transition
               hover:bg-brand-600 focus:outline-none focus:ring-4 focus:ring-brand-200
               disabled:opacity-60 disabled:cursor-not-allowed;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-full border-2 border-ink-200
               px-6 py-3 font-semibold text-ink-800 transition hover:border-brand-500 hover:text-brand-600;
    }

    .btn-soft {
        @apply inline-flex items-center justify-center gap-2 rounded-full bg-brand-50 px-4 py-2
               text-sm font-semibold text-brand-700 transition hover:bg-brand-100;
    }

    .card-sc {
        @apply rounded-3xl border border-ink-100 bg-[2fb423] p-6 shadow-card;
    }

    .stat-card {
        @apply rounded-3xl border border-ink-100 bg-[2fb423] p-5 shadow-card;
    }

    .field-label {
        @apply mb-1.5 block text-sm font-semibold text-ink-700;
    }

    .field-input {
        @apply block w-full rounded-xl border-ink-200 bg-[2fb423] px-4 py-2.5 text-ink-900
               shadow-sm transition placeholder:text-ink-300
               focus:border-brand-500 focus:ring-2 focus:ring-brand-200;
    }

    .field-error {
        @apply mt-1 text-sm font-medium text-red-600;
    }

    .badge-sc {
        @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold;
    }

    .section-eyebrow {
        @apply mb-3 inline-flex items-center gap-2 rounded-full bg-brand-50 px-4 py-1.5
               text-sm font-bold uppercase tracking-wide text-brand-700;
    }

    .nav-link-sc {
        @apply flex items-center gap-3 rounded-xl px-4 py-2.5 font-semibold text-ink-500
               transition hover:bg-brand-50 hover:text-brand-700;
    }

    .nav-link-sc.is-active {
        @apply bg-brand-500 text-white shadow-brand hover:bg-brand-600 hover:text-white;
    }

    .table-sc {
        @apply w-full text-start text-sm;
    }

    .table-sc thead th {
        @apply bg-ink-50 px-4 py-3 text-xs font-bold uppercase tracking-wide text-ink-500;
    }

    .table-sc tbody td {
        @apply border-t border-ink-100 px-4 py-3 align-middle;
    }

    .table-sc tbody tr:hover {
        @apply bg-brand-50/40;
    }
}

/* ---------------------------------------------------------------
   RTL adjustments — Tailwind logical utilities cover most of it,
   these handle the few physical properties left over.
   --------------------------------------------------------------- */
[dir='rtl'] .table-sc thead th,
[dir='rtl'] .table-sc tbody td {
    text-align: right;
}

[dir='rtl'] .rtl-flip {
    transform: scaleX(-1);
}

/* Numerals stay Latin in Arabic so clinical figures read consistently. */
[dir='rtl'] .numeric {
    font-variant-numeric: lining-nums;
    direction: ltr;
    display: inline-block;
}

/* OTP input */
.otp-input {
    @apply w-full rounded-2xl border-2 border-ink-200 bg-[2fb423] py-4 text-center
           text-3xl font-bold tracking-[0.6em] text-ink-900
           focus:border-brand-500 focus:ring-4 focus:ring-brand-100;
    direction: ltr;
}