@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/*
|------------------------------------------------------------------------------
| BankIslami brand palette
|------------------------------------------------------------------------------
|
| Sampled from the BankIslami logo lockup:
|   brand  - the deep blue of the "BankIslami" wordmark
|   aqua   - the lighter blue of the Arabic calligraphy
|   leaf   - the green of the surrounding ring
|
| Blue carries the interface; green is held back for positive outcomes
| (active policies, applied rows) so it keeps its meaning.
|
*/

@theme {
    --font-sans: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue',
        Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    --color-brand-50: #eaf3fa;
    --color-brand-100: #d0e5f4;
    --color-brand-200: #a1cbe9;
    --color-brand-300: #6badda;
    --color-brand-400: #2f8bc7;
    --color-brand-500: #0d72b3;
    --color-brand-600: #0061a8;
    --color-brand-700: #004f8a;
    --color-brand-800: #003c69;
    --color-brand-900: #002a4a;
    --color-brand-950: #001b30;

    --color-aqua-50: #e6f7fd;
    --color-aqua-100: #c3ecfa;
    --color-aqua-300: #63cef0;
    --color-aqua-500: #00a9e0;
    --color-aqua-600: #0089b8;
    --color-aqua-700: #006d93;

    --color-leaf-50: #f2f9e8;
    --color-leaf-100: #e3f2ce;
    --color-leaf-200: #cbe6a5;
    --color-leaf-300: #b0d878;
    --color-leaf-500: #8dc63f;
    --color-leaf-600: #74a92f;
    --color-leaf-700: #5a8424;
    --color-leaf-800: #446318;

    /* Application canvas */
    --color-canvas: #f4f7fb;
}

/*
|------------------------------------------------------------------------------
| Base
|------------------------------------------------------------------------------
*/

@layer base {
    body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    ::selection {
        background-color: var(--color-brand-600);
        color: white;
    }
}

/*
|------------------------------------------------------------------------------
| Components
|------------------------------------------------------------------------------
|
| Defined once here rather than repeating long class lists on every input,
| button and table across twenty Blade files.
|
*/

@layer components {
    .field {
        @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900
               shadow-sm transition placeholder:text-slate-400
               focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25 focus:outline-none;
    }

    .field-label {
        @apply mb-1 block text-[11px] font-semibold tracking-wider text-slate-500 uppercase;
    }

    .check {
        @apply size-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500/40;
    }

    /*
     * Tailwind 4 cannot @apply a class defined in the same layer, so the shared
     * button base is a selector list rather than an @apply of `.btn`.
     */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger {
        @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg px-4 py-2
               text-sm font-semibold transition focus:outline-none focus-visible:ring-2
               focus-visible:ring-brand-500/40 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .btn-primary {
        @apply bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800
               disabled:bg-slate-300 disabled:hover:bg-slate-300;
    }

    .btn-secondary {
        @apply border border-slate-300 bg-white text-slate-700 hover:border-slate-400 hover:bg-slate-50;
    }

    .btn-success {
        @apply bg-leaf-600 text-white shadow-sm hover:bg-leaf-700;
    }

    .btn-danger {
        @apply bg-rose-600 text-white shadow-sm hover:bg-rose-700;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

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

    .data-table thead {
        @apply bg-slate-50/80 text-left text-[11px] font-semibold tracking-wider text-slate-500 uppercase;
    }

    .data-table th {
        @apply px-5 py-3 font-semibold whitespace-nowrap;
    }

    .data-table tbody {
        @apply divide-y divide-slate-100;
    }

    .data-table td {
        @apply px-5 py-3;
    }

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

    .empty-state {
        @apply px-5 py-12 text-center text-sm text-slate-500;
    }
}