/*
 * Hospital panel look (plain CSS on top of Filament's own theme; no build step). Registered in
 * AppServiceProvider and published by `php artisan filament:assets` to public/css/app/hospital.css
 * (run on every deploy). Only Filament's fi-* classes and CSS variables are used, so the primary colour
 * set in the panel provider flows through. Dark mode keeps Filament's own colours.
 */

/*
 * Bengali text: Hind Siliguri (SIL OFL 1.1, public/fonts/bengali/OFL.txt), served from our own host. Inter has
 * no Bengali letters, so the browser takes those (and only those, unicode-range) from HM Bengali; the font is
 * downloaded only when a page shows Bengali.
 */
@font-face {
    font-family: 'HM Bengali';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('/fonts/bengali/hind-siliguri-bengali-400-normal.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
    font-family: 'HM Bengali';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('/fonts/bengali/hind-siliguri-bengali-500-normal.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
    font-family: 'HM Bengali';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('/fonts/bengali/hind-siliguri-bengali-600-normal.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
    font-family: 'HM Bengali';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url('/fonts/bengali/hind-siliguri-bengali-700-normal.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

:root {
    --hm-bengali: 'HM Bengali', 'Noto Sans Bengali', 'Kohinoor Bangla', 'Nirmala UI', 'Vrinda';
}

body.fi-body,
.fi-body .fi-input,
.fi-body .fi-select-input,
.fi-body textarea {
    font-family: var(--font-family, 'Inter'), var(--hm-bengali), ui-sans-serif, system-ui, sans-serif;
}

html:lang(bn) body {
    line-height: 1.6;
}

/* Clean clinical background with a hint of teal, cards that lift a little. */
.fi-body:not(:where(.dark, .dark *)) {
    background-color: color-mix(in oklab, var(--primary-50) 35%, var(--gray-50));
}

.fi-ta-ctn,
.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat {
    border-radius: 0.875rem;
}

.fi-header-heading {
    letter-spacing: -0.01em;
}

/* The active menu item stands out in the hospital colour. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-500) 12%, transparent);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon {
    color: var(--primary-700);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) .fi-icon {
    color: var(--primary-400);
}

/* Sign-in and first-branch pages: a soft teal backdrop. */
.fi-simple-layout:not(:where(.dark, .dark *)) {
    background: radial-gradient(60rem 30rem at 50% -10%, var(--primary-100), transparent 70%),
        color-mix(in oklab, var(--primary-50) 30%, var(--gray-50));
}

/* Solid teal buttons with white text (Filament would pick a pale shade with dark text). */
.fi-btn.fi-color.fi-color-primary:not(.fi-outlined) {
    --bg: var(--primary-700);
    --hover-bg: var(--primary-800);
    --text: var(--color-white, #fff);
    --hover-text: var(--color-white, #fff);
}

/* Money and numbers in tables line up. */
.fi-ta-text-item,
.fi-in-text-item {
    font-variant-numeric: tabular-nums;
}

/* ---- Phones and small tablets ---- */
@media (max-width: 639px) {
    /* Inputs at 16px: phones do not zoom into the field when it gets focus. */
    .fi-input,
    .fi-select-input,
    .fi-fo-date-time-picker input,
    textarea.fi-input {
        font-size: 16px;
    }

    /* Finger-sized buttons and menu rows. */
    .fi-btn,
    .fi-sidebar-item-btn,
    .fi-dropdown-list-item {
        min-height: 2.75rem;
    }

    /* Page header: title first, the page's buttons below it in a tidy grid. */
    .fi-header {
        align-items: stretch;
    }

    .fi-header-actions-ctn,
    .fi-header .fi-ac {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: 0.5rem;
        width: 100%;
    }

    .fi-header .fi-ac .fi-btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .fi-main {
        padding-inline: 0.75rem;
    }

    /* Tables scroll sideways inside their card instead of stretching the page. */
    .fi-ta-content-ctn {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fi-ta-cell,
    .fi-ta-header-cell {
        white-space: nowrap;
    }

    .fi-modal-window-ctn {
        padding: 0.5rem;
    }

    .fi-modal-window {
        max-width: 100% !important;
        border-radius: 0.875rem;
    }

    .fi-modal-footer-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .fi-modal-footer-actions .fi-btn {
        width: 100%;
    }

    .fi-simple-main {
        margin-inline: 0.5rem;
        padding-inline: 1.25rem;
    }
}

/* Pages print with the browser: only the content, no menus, buttons or filters. */
@media print {
    .fi-sidebar, .fi-topbar, .fi-sidebar-close-overlay, .fi-header .fi-ac, .fi-ta-header-toolbar, .fi-ta-filters { display: none !important; }
    .fi-main, .fi-main-ctn, .fi-layout { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    body { background: #fff !important; }
}