@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800&display=swap');

html body * {
    font-family: 'Roboto', -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}

body { font-size: 13px !important; letter-spacing: -0.01em !important; }

/* ── Sidebar ── */
html body .fi-sidebar,
html body nav.fi-sidebar,
html body aside.fi-sidebar {
    background-color: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #e0e0e0 !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.05) !important;
}

html body .fi-logo {
    background: linear-gradient(135deg, #097a74, #35928d) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.03em !important;
}

/* Resting nav items stay transparent — anything else makes every
   item look selected and hides which one actually is. */
html body .fi-sidebar .fi-sidebar-item-button {
    background: transparent !important;
    color: #000000 !important;
    border-radius: 10px !important;
    margin: 1px 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease !important;
}

html body .fi-sidebar .fi-sidebar-item-button:hover {
    background: #f0f7f7 !important;
    color: #097a74 !important;
    padding-left: 14px !important;
}

html body .fi-sidebar .fi-sidebar-item-button svg {
    transition: transform .2s ease, color .2s ease !important;
}

html body .fi-sidebar .fi-sidebar-item-button:hover svg {
    transform: scale(1.08) !important;
    color: #097a74 !important;
}

html body .fi-sidebar .fi-active .fi-sidebar-item-button,
html body .fi-sidebar .fi-sidebar-item-button.fi-active {
    background: #d3e7e6 !important;
    color: #064f4b !important;
    font-weight: 600 !important;
    transition: background-color .25s ease, color .25s ease !important;
}

html body .fi-sidebar-group-label {
    color: #086e68 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html body .fi-sidebar-group-button svg,
html body .fi-sidebar-group [aria-expanded] svg {
    transition: transform .25s ease !important;
}

/* ── Topbar ── */
html body .fi-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* ── Main Background ── */
html body .fi-main {
    background: #F4F4F5 !important;
}

/* ── Headings ── */
html body h1, html body h2, html body h3,
html body .fi-header-heading,
html body .fi-section-header-heading {
    color: #0B0B0D !important;
    font-weight: 700 !important;
}

/* ── Text ──
   গুরুত্বপূর্ণ ফিক্স: এখানে আগে "span"-ও টার্গেট করা হতো, কিন্তু Filament-এর
   বাটন লেবেল আর badge-এর টেক্সটও প্রায়ই span-এর ভেতরে থাকে — ফলে বাটনের
   ইচ্ছাকৃত সাদা টেক্সট (.fi-btn-primary { color:#fff }) আর badge-এর রঙিন
   টেক্সট এই rule দিয়ে ওভাররাইড হয়ে গাঢ় দেখাচ্ছিল (direct element match
   সবসময় ancestor থেকে আসা inheritance-কে হারিয়ে দেয়)। তাই "span" বাদ
   দেওয়া হলো — শুধু plain paragraph আর টেবিল cell-এর টেক্সট রঙ নিয়ন্ত্রণ হবে। */
html body .fi-ta tbody td,
html body p {
    color: #0B0B0D !important;
    font-weight: 500 !important;
}

/* ── Cards ── */
html body .fi-section,
html body .fi-card,
html body .fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
    transition: box-shadow .25s ease, transform .25s ease !important;
}

html body .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════
   বাটন — সব জায়গায় জীবন্ত/প্রাণবন্ত hover + click effect
   ══════════════════════════════════════════════════════════════ */
html body .fi-btn {
    transition: transform .18s cubic-bezier(.34,1.56,.64,1),
                box-shadow .2s ease,
                background-color .2s ease,
                border-color .2s ease !important;
}

html body .fi-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.14) !important;
}

html body .fi-btn:active {
    transform: translateY(0) scale(.96) !important;
    transition-duration: .08s !important;
}

/* ── Primary Buttons ── */
html body .fi-btn-primary,
html body .fi-btn[class*="primary"] {
    background: linear-gradient(135deg, #097a74, #35928d) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}

html body .fi-btn-primary:hover,
html body .fi-btn[class*="primary"]:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
    filter: brightness(1.06) !important;
}

/* বাটনের ভেতরের span/label-ও যাতে নিশ্চিতভাবে সাদা থাকে (defensive, উপরের
   fix-ই যথেষ্ট হওয়ার কথা, কিন্তু ভবিষ্যতে অন্য কোনো rule আবার span টার্গেট
   করলেও যেন বাটনের টেক্সট নিরাপদ থাকে) */
html body .fi-btn-primary *,
html body .fi-btn[class*="primary"] * {
    color: inherit !important;
}

/* ── Icon-only Action buttons (table row actions) — subtle pop + rotate on hover ── */
html body .fi-icon-btn {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, color .2s ease !important;
}
html body .fi-icon-btn:hover {
    transform: scale(1.18) !important;
}
html body .fi-icon-btn:active {
    transform: scale(.9) !important;
}

/* ── Danger buttons — একটু জোরালো shake-এর মতো feel দিতে scale বেশি ── */
html body .fi-btn[class*="danger"]:hover {
    box-shadow: 0 8px 20px rgba(239,68,68,0.25) !important;
}

/* ── Links styled as buttons (Print/PDF, Send, Edit, Delete inline row actions) ── */
html body a.fi-link,
html body button.fi-link {
    transition: color .18s ease, transform .18s ease !important;
    display: inline-block !important;
}
html body a.fi-link:hover,
html body button.fi-link:hover {
    transform: translateY(-1px) !important;
}

/* ── Table Header ── */
html body .fi-ta thead th {
    color: #097a74 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: #F4F4F5 !important;
}

/* ── Focus/Active Color ── */
html body .fi-input:focus,
html body input:focus {
    border-color: #097a74 !important;
    box-shadow: 0 0 0 3px #097a7422 !important;
}

/* ── Labels ── */
html body label,
html body .fi-fo-field-wrp-label {
    color: #0B0B0D !important;
    font-weight: 600 !important;
}

/* ── Pagination active ── */
html body .fi-pagination [aria-current="page"] {
    background: linear-gradient(135deg, #097a74, #35928d) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
html body .fi-pagination [aria-current="page"]:hover {
    transform: scale(1.1) !important;
}

/* ── Tabs active ── */
html body .fi-tabs-tab[aria-selected="true"] {
    color: #097a74 !important;
    font-weight: 600 !important;
    border-color: #097a74 !important;
}

/* ── Badge ──
   11px খুব ছোট ছিল — টেবিলের status ব্যাজ পড়া কষ্টকর হচ্ছিল।
   Filament-এর নিজের size() badge-এ কাজ করে না, তাই মাপটা এখানেই বসে। */
html body .fi-badge {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    min-height: 24px !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    transition: transform .18s ease !important;
}
html body .fi-badge:hover {
    transform: scale(1.06) !important;
}

/* সাইডবারের counter ব্যাজ আগের মতোই ছোট থাকবে — navigation-এর
   ঘনত্ব বদলানোর দরকার নেই, শুধু কনটেন্ট এলাকার ব্যাজ বড় হচ্ছে। */
html body .fi-sidebar .fi-badge {
    font-size: 10.5px !important;
    min-height: 18px !important;
    padding: 0 7px !important;
}

/* ══════════════════════════════════════════════════════════════
   Mobile — sidebar আরও compact + touch animation + পুরো পেজ ভালোভাবে fit
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    /* ── Sidebar ── */
    html body .fi-sidebar {
        transition: transform .32s cubic-bezier(.32,.72,0,1) !important;
        box-shadow: 8px 0 32px rgba(0,0,0,0.18) !important;
        max-width: 270px !important;
        width: 82vw !important;
    }

    /* Collapsed group-এর ভেতরের content যাতে কোনো অবস্থাতেই খালি জায়গা
       রিজার্ভ করে না রাখে — bug fix: বন্ধ থাকা group-এও বড় ফাঁকা gap দেখাচ্ছিল */
    html body .fi-sidebar-group-items,
    html body .fi-sidebar-group > div:not(.fi-sidebar-group-button) {
        overflow: hidden !important;
    }

    html body .fi-sidebar .fi-sidebar-item-button {
        padding: 7px 11px !important;
        font-size: 12.5px !important;
        min-height: 36px !important;
        margin: 1px 8px !important;
        border-radius: 8px !important;
        transition: background-color .15s ease, transform .12s ease !important;
    }

    /* ট্যাপ করলে সংক্ষিপ্ত press feedback — app-এর মতো tactile অনুভূতি */
    html body .fi-sidebar .fi-sidebar-item-button:active {
        transform: scale(.96) !important;
        transition-duration: .06s !important;
    }

    html body .fi-sidebar .fi-sidebar-item-button svg {
        width: 16px !important;
        height: 16px !important;
    }

    html body .fi-sidebar-group {
        margin-bottom: 4px !important;
    }

    html body .fi-sidebar-group-label {
        font-size: 9.5px !important;
        padding: 13px 12px 4px !important;
        letter-spacing: 0.09em !important;
    }

    html body .fi-sidebar .fi-badge {
        font-size: 9px !important;
        min-height: 16px !important;
        padding: 0 6px !important;
    }

    html body .fi-topbar-open-sidebar-btn {
        min-width: 40px !important;
        min-height: 40px !important;
        transition: transform .15s ease !important;
    }
    html body .fi-topbar-open-sidebar-btn:active {
        transform: scale(.88) !important;
    }

    html body .fi-sidebar-header {
        padding: 12px 14px !important;
    }
    html body .fi-logo {
        font-size: 0.95rem !important;
    }

    /* ── Topbar ── */
    html body .fi-topbar nav {
        padding: 8px 12px !important;
    }
    html body .fi-topbar .fi-input {
        font-size: 13px !important;
    }

    /* ── Page heading ── */
    html body .fi-header-heading {
        font-size: 19px !important;
    }
    html body .fi-header {
        padding: 14px 12px !important;
    }
    html body .fi-header-subheading {
        font-size: 12px !important;
    }

    /* ── Content area — পাশের বাড়তি padding কমিয়ে স্ক্রিনের পুরোটা ব্যবহার ── */
    html body .fi-main-ctn,
    html body .fi-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ── Stat/Section কার্ড ── */
    html body .fi-wi-stats-overview-stat {
        padding: 12px 14px !important;
    }
    html body .fi-wi-stats-overview-stat-value {
        font-size: 20px !important;
    }
    html body .fi-section {
        border-radius: 10px !important;
    }
    html body .fi-section-content-ctn {
        padding: 12px !important;
    }
    html body .fi-section-header-ctn {
        padding: 12px 12px 0 !important;
    }
    html body .fi-section-header-heading {
        font-size: 13px !important;
    }

    /* ── ফর্ম ফিল্ড — ছোট স্ক্রিনে compact ── */
    html body .fi-fo-field-wrp-label {
        font-size: 12px !important;
    }
    html body .fi-input,
    html body input,
    html body select,
    html body textarea {
        font-size: 13px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* ── টেবিল — horizontal scroll smooth + ছোট ফন্ট ── */
    html body .fi-ta-content {
        -webkit-overflow-scrolling: touch !important;
    }
    html body .fi-ta table {
        font-size: 12px !important;
    }
    html body .fi-ta thead th {
        font-size: 9.5px !important;
        padding: 8px 10px !important;
    }
    html body .fi-ta tbody td {
        padding: 8px 10px !important;
    }

    /* ── বাটন — ছোট স্ক্রিনে compact ── */
    html body .fi-btn {
        font-size: 12.5px !important;
        padding: 7px 12px !important;
    }

    /* ── Modal — ছোট স্ক্রিনে প্রায় full-width, বেশি breathing room ── */
    html body .fi-modal-window {
        margin: 8px !important;
        border-radius: 18px !important;
        animation: solmakModalIn .28s cubic-bezier(.34,1.56,.64,1) !important;
    }
    @keyframes solmakModalIn {
        from { opacity: 0; transform: scale(.92) translateY(10px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* Confirmation modal-এর icon (Delete-এ লাল warning icon ইত্যাদি) — বড়, স্পষ্ট */
    html body .fi-modal-icon {
        width: 52px !important;
        height: 52px !important;
    }
    html body .fi-modal-icon svg {
        width: 26px !important;
        height: 26px !important;
    }
    html body .fi-modal-heading {
        font-size: 16px !important;
        font-weight: 800 !important;
    }
    html body .fi-modal-description {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* Confirm/Cancel বাটন — মোবাইলে পাশাপাশির বদলে stack করে full-width,
       ভুলে অন্য বাটনে চাপ পড়া এড়াতে (বিশেষ করে Delete-এর মতো destructive action-এ) */
    html body .fi-modal-footer-actions {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    html body .fi-modal-footer-actions .fi-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px !important;
    }

    /* ── পেজ বদলানোর সময় হালকা fade — app navigation-এর মতো ── */
    html body .fi-main {
        animation: fadeInMobile .25s ease !important;
    }
    @keyframes fadeInMobile {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

@media (max-width: 480px) {
    html body .fi-header-heading { font-size: 17px !important; }
    html body .fi-wi-stats-overview-stat-value { font-size: 18px !important; }
    html body .fi-sidebar .fi-sidebar-item-button { font-size: 12px !important; }
}

/* ══════════════════════════════════════════════════════════════
   Toast / Notification — মোবাইলে জীবন্ত entrance + পরিষ্কার look
   (নিশ্চিত real class .fi-no থেকে — direct child-কেই notification card ধরে নেওয়া হচ্ছে)
   ══════════════════════════════════════════════════════════════ */
@keyframes solmakToastIn {
    from { opacity: 0; transform: translateY(-14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1023px) {
    html body .fi-no > div {
        border-radius: 14px !important;
        box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
        animation: solmakToastIn .32s cubic-bezier(.34,1.56,.64,1) !important;
    }
    html body .fi-no p,
    html body .fi-no span {
        font-size: 13px !important;
    }
    /* বন্ধ করার (X) বাটন — বড় ট্যাপ target */
    html body .fi-no button {
        min-width: 32px !important;
        min-height: 32px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Sticky Save বাটন — ফর্মের নিচে না গিয়েই সবসময় দেখা যাবে
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    html body .invoice-form-actions {
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        margin-top: 0 !important;
        padding: 12px 0 !important;
        box-shadow: 0 -6px 16px rgba(0,0,0,0.08) !important;
        z-index: 40 !important;
    }
    html body .fi-form-actions {
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        padding: 10px 12px !important;
        margin: 0 -12px !important;
        box-shadow: 0 -6px 16px rgba(0,0,0,0.08) !important;
        z-index: 40 !important;
    }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #097a7444; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #097a7488; }

::selection { background: #097a7433 !important; color: #0B0B0D !important; }