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

/*
 * Yekan Bakh FaNum — the interface font, self-hosted, no CDN.
 *
 * Five static weights rather than one variable file. The family has no 600, so
 * `font-semibold` resolves to the nearest declared weight; use 500 or 700 when the
 * distinction matters. woff2 is listed first and is what every current browser takes;
 * woff is the fallback for older ones.
 *
 * PDF output does not use these: mPDF needs TTF and still renders with Vazirmatn from
 * resources/fonts/vazirmatn — see App\Jobs\GenerateQuotationPdfJob.
 */
@font-face {
    font-family: 'Yekan Bakh';
    src: url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-04-Regular.woff2') format('woff2'),
         url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-04-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-05-Medium.woff2') format('woff2'),
         url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-05-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-06-Bold.woff2') format('woff2'),
         url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-06-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-07-Heavy.woff2') format('woff2'),
         url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-07-Heavy.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-08-Fat.woff2') format('woff2'),
         url('/fonts/yekan-bakh/Yekan-Bakh-FaNum-08-Fat.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@layer base {
    :root {
        --limosi-cream: #FFFCF5;
        --limosi-surface: #FFFFFF;
        --limosi-border: #DDE4DD;
        --limosi-ink: #172720;
        --limosi-muted: #617068;
        --limosi-green: #064B2E;
        --limosi-green-soft: #3F7D3A;
        --limosi-lime: #BADF80;
        --limosi-yellow: #FBC313;
        --panel-bg: #FFFCF5;
        --panel-surface: #FFFFFF;
        --panel-surface-soft: #FBFFF2;
        --panel-surface-muted: #F3F9DF;
        --panel-input: #FFFCF5;
        --panel-border: #DDE4DD;
        --panel-border-strong: #AEDA74;
        --panel-text: #172720;
        --panel-muted: #617068;
        --panel-muted-soft: #8A978F;
        --panel-primary: #2F744A;
        --panel-primary-hover: #245C3B;
        --panel-primary-active: #18432C;
        --panel-primary-soft: #F4FAEA;
        --panel-accent: #FBC313;
        --panel-accent-text: #172720;
        --panel-action-bg: #2F744A;
        --panel-action-text: #FFFFFF;
        --panel-action-hover-bg: #245C3B;
        --panel-action-hover-text: #FFFFFF;
        --panel-overlay: rgb(23 39 32 / 0.5);
        --panel-card-shadow: 0 1px 2px rgb(23 39 32 / 0.04);
        --panel-nav-bg: rgb(255 255 255 / 0.95);
        --panel-header-bg: rgb(255 255 255 / 0.9);
        --panel-bottom-shadow: 0 -8px 24px rgb(23 39 32 / 0.06);
        color-scheme: light;
    }

    .dark {
        --panel-bg: #0E1511;
        --panel-surface: #15221C;
        --panel-surface-soft: #101D17;
        --panel-surface-muted: #1F3329;
        --panel-input: #101D17;
        --panel-border: #2D4237;
        --panel-border-strong: #6FA34E;
        --panel-text: #F6F8F2;
        --panel-muted: #AEBBAF;
        --panel-muted-soft: #7F9187;
        --panel-primary: #BADF80;
        --panel-primary-hover: #E3F0C0;
        --panel-primary-active: #F3F9DF;
        --panel-primary-soft: #1F3329;
        --panel-accent: #FBC313;
        --panel-accent-text: #172720;
        --panel-action-bg: #FBC313;
        --panel-action-text: #172720;
        --panel-action-hover-bg: #BADF80;
        --panel-action-hover-text: #172720;
        --panel-overlay: rgb(1 29 18 / 0.72);
        --panel-card-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
        --panel-nav-bg: rgb(21 34 28 / 0.94);
        --panel-header-bg: rgb(21 34 28 / 0.9);
        --panel-bottom-shadow: 0 -8px 24px rgb(0 0 0 / 0.25);
        color-scheme: dark;
    }

    html {
        direction: rtl;
    }

    body {
        background: var(--panel-bg);
        color: var(--panel-text);
    }

    ::selection {
        background: var(--limosi-yellow);
        color: var(--limosi-ink);
    }

    input[type='checkbox'],
    input[type='radio'] {
        color: var(--panel-primary);
        border-color: var(--panel-border);
    }

    input[type='checkbox']:focus,
    input[type='radio']:focus {
        --tw-ring-color: var(--panel-border-strong);
    }

    /* Latin numerals, phone numbers, and money figures stay LTR inside RTL text. */
    .ltr-numerals {
        direction: ltr;
        unicode-bidi: isolate;
    }

    /* Prevents a flash of the quick-create drawer before Alpine hydrates. */
    [x-cloak] {
        display: none !important;
    }
}

@layer utilities {
    .dark .bg-white {
        background-color: var(--panel-surface) !important;
    }

    .dark .bg-gray-50,
    .dark .bg-gray-100 {
        background-color: var(--panel-bg) !important;
    }

    .dark .hover\:bg-white:hover {
        background-color: var(--panel-surface) !important;
    }

    .dark .hover\:bg-gray-50:hover,
    .dark .hover\:bg-gray-100:hover,
    .dark .active\:bg-gray-100:active {
        background-color: var(--panel-primary-soft) !important;
    }

    .dark .border-gray-50,
    .dark .border-gray-100,
    .dark .border-gray-200,
    .dark .border-gray-300 {
        border-color: var(--panel-border) !important;
    }

    .dark .text-gray-900,
    .dark .text-gray-800,
    .dark .text-gray-700 {
        color: var(--panel-text) !important;
    }

    .dark .text-gray-600,
    .dark .text-gray-500,
    .dark .text-gray-400 {
        color: var(--panel-muted) !important;
    }

    .dark .hover\:text-gray-900:hover,
    .dark .hover\:text-gray-800:hover,
    .dark .hover\:text-gray-700:hover,
    .dark .focus\:text-gray-800:focus,
    .dark .focus\:text-gray-700:focus,
    .dark .active\:text-gray-800:active,
    .dark .active\:text-gray-700:active {
        color: var(--panel-text) !important;
    }

    .dark .hover\:text-gray-500:hover,
    .dark .hover\:text-gray-400:hover,
    .dark .focus\:text-gray-500:focus,
    .dark .active\:text-gray-500:active {
        color: var(--panel-muted) !important;
    }

    .dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
    .dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
    .dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        border-color: var(--panel-border) !important;
    }

    .dark .placeholder\:text-gray-400::placeholder {
        color: var(--panel-muted-soft) !important;
    }
}

/* driver.js guided-tour popover: force RTL layout and the app's Persian font. */
/*
 * driver.js ships its own .driver-popover rule with a Helvetica/Inter stack, and Vite
 * emits that stylesheet after app.css — equal specificity, so it wins on order alone and
 * the tour renders in a Latin font. Doubling the class raises specificity enough to take
 * the font back without resorting to !important. The buttons and title need it too,
 * since driver.css sets a family on those directly.
 */
.driver-popover.driver-popover {
    direction: rtl;
    text-align: right;
    font-family: 'Yekan Bakh', ui-sans-serif, system-ui, sans-serif;
    border-radius: 0.75rem;
}

.driver-popover.driver-popover .driver-popover-title,
.driver-popover.driver-popover .driver-popover-description,
.driver-popover.driver-popover .driver-popover-progress-text,
.driver-popover.driver-popover button {
    font-family: inherit;
}

.driver-popover .driver-popover-title {
    font-weight: 700;
}

.driver-popover-footer {
    flex-direction: row-reverse;
}

.driver-popover-progress-text {
    direction: ltr;
}