/* =========================================================================
   Smart Arat ERP — application shell
   Desktop: fixed left sidebar + topbar. Mobile: off-canvas drawer + bottom nav.
   Theming via Bootstrap's [data-bs-theme].
   ========================================================================= */

:root {
    --brand:        #0f766e;
    --brand-dark:   #115e59;
    --brand-light:  #ccfbf1;
    --sidebar-w:    250px;
    --topbar-h:     58px;
    --bottomnav-h:  60px;
    --app-bg:       #f4f6f8;
    --card-bg:      #ffffff;
    --border:       #e5e7eb;
    --text-muted:   #6b7280;
}

[data-bs-theme="dark"] {
    --app-bg:     #0b1220;
    --card-bg:    #131c2e;
    --border:     #26324a;
    --text-muted: #93a1b5;
}

* { box-sizing: border-box; }

/* User text-size preference: scales every rem-based size (Bootstrap + app). */
:root { --app-font-scale: 1; }
html { font-size: calc(16px * var(--app-font-scale)); }

body {
    margin: 0;
    background: var(--app-bg);
    font-family: "Hind Siliguri", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- Appearance preferences (persisted per device) --- */

/* Hide the left sidebar on desktop so the page gets the full width.
   Uses display:none rather than a transform so it is instant and cannot be
   left half-applied if transitions don't run (background tab, reduced-motion). */
@media (min-width: 992px) {
    html.sidebar-hidden .app-sidebar { display: none; }
    html.sidebar-hidden .app-main    { margin-left: 0; }
}

/* Hide navigation icons (sidebar, bottom nav, home grid) — text only. */
html.icons-hidden .app-nav-link i,
html.icons-hidden .app-bottomnav a i,
html.icons-hidden .home-grid a i { display: none; }
html.icons-hidden .home-grid a { padding: 1.1rem .4rem; }

/* Text-size / colour picker in the topbar */
.fc-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border);
    padding: 0;
    cursor: pointer;
}
.fc-swatch.is-active { outline: 2px solid var(--brand); outline-offset: 2px; }
.fc-swatch--default {
    background: linear-gradient(135deg, #ffffff 0 50%, #212529 50% 100%);
}

.app-layout { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.app-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 1045;
    transition: transform .25s ease;
}

.app-sidebar__brand {
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-weight: 700;
    color: var(--brand);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
/* Shop name over the date — the name may wrap, the date sits under it. */
.app-sidebar__brand > span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.app-sidebar__date {
    font-size: .72rem;
    font-weight: 400;
    color: var(--muted, #6c757d);
    margin-top: .15rem;
}
.app-sidebar__brand i { font-size: 1.4rem; }

.app-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
    font-size: .93rem;
    margin-bottom: 2px;
}
.app-nav-link i { font-size: 1.1rem; width: 1.3rem; text-align: center; color: var(--text-muted); }
.app-nav-link:hover { background: rgba(15,118,110,.08); }
.app-nav-link.is-active { background: var(--brand); color: #fff; }
.app-nav-link.is-active i { color: #fff; }

.app-sidebar__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1044;
}

/* ---------- Main column ---------- */
.app-main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--topbar-h);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.app-topbar__title { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; }
.app-topbar__actions { display: flex; align-items: center; gap: .25rem; }

.btn-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: 50%;
    color: inherit; font-size: 1.15rem;
}
.btn-icon:hover { background: rgba(0,0,0,.06); }
[data-bs-theme="dark"] .btn-icon:hover { background: rgba(255,255,255,.08); }
.lang-pill { font-size: .8rem; font-weight: 700; }

.app-content {
    padding: 1.25rem;
    flex: 1;
}

/* ---------- Bottom nav (mobile) ---------- */
.app-bottomnav {
    position: fixed;
    inset: auto 0 0 0;
    height: var(--bottomnav-h);
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 1040;
    padding-bottom: env(safe-area-inset-bottom);
}
.app-bottomnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .68rem;
}
.app-bottomnav a i { font-size: 1.25rem; }
.app-bottomnav a.is-active { color: var(--brand); }

/* ---------- KPI / widget cards ----------
   Fixed layout: 4 per row on desktop, 3 per row on mobile — so each box is
   large and the rows line up predictably. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 per row — bigger boxes */
    gap: 1.1rem;
}
.kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: .9rem;
    padding: 1.5rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;                 /* let long amounts shrink instead of overflowing */
    transition: box-shadow .15s, border-color .15s;
}
/* Cards that link to a report: subtle hover cue. */
a.kpi-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
/* Icons removed by request — text only, so the numbers can be much larger. */
.kpi-card__icon { display: none !important; }
.kpi-card__label { font-size: 1.4rem; color: var(--text-muted); margin-bottom: .25rem; }
.kpi-card__value { font-size: 3.4rem; font-weight: 700; line-height: 1.1; word-break: break-word; }

.card { background: var(--card-bg); border-color: var(--border); }

/* ---------- Home grid (menu tiles) ----------
   4 per row on desktop, 3 per row on mobile. */
.home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
}
.home-grid a {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: 1.35rem .5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    font-size: .95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 104px;
}
/* বিক্রয়(কেজি) পাতার লট বাছাই — তিনটি লট পাশাপাশি, যতটুকু জায়গা লাগে ততটুকুই।
   বাকি জায়গাটা মেমো লেখার ঘরে যায়, কারণ কাজটা ওখানেই বেশি। */
.home-grid.lot-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575.98px) { .home-grid.lot-grid { grid-template-columns: repeat(2, 1fr); } }

.home-grid a:hover { border-color: var(--brand); }
.home-grid a i { display: block; font-size: 2rem; margin-bottom: .45rem; color: var(--brand); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.is-open { transform: translateX(0); }
    .app-sidebar__backdrop.is-open { display: block; }
    .app-main { margin-left: 0; }
    .app-content { padding: 1rem; padding-bottom: calc(var(--bottomnav-h) + 1rem); }

    /* 3 tiles per row on mobile */
    .kpi-grid, .home-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; }

    /* Text-only card on mobile too */
    .kpi-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .2rem;
        padding: .9rem .4rem;
    }
    .kpi-card__label { font-size: .95rem; margin-bottom: .1rem; }
    .kpi-card__value { font-size: 1.6rem; }

    .home-grid a { padding: 1rem .35rem; font-size: .8rem; min-height: 92px; }
    .home-grid a i { font-size: 1.7rem; margin-bottom: .35rem; }
}

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    padding: 1rem;
}
.login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-card__brand { text-align: center; margin-bottom: 1.5rem; color: var(--brand); }
.login-card__brand i { font-size: 2.5rem; }

/* ---------- Sortable tables ---------- */
/* Every listing table's headings are clickable (see app.js): one click sorts
   ছোট থেকে বড়, the next বড় থেকে ছোট. Every sortable heading carries a faint
   ⇅ so the affordance is visible on a phone too; the active column shows a
   solid caret pointing the way it is sorted. */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
}
th.sortable:hover { color: var(--brand); }
th.sortable::after {
    content: "\F282";                       /* bi-chevron-expand */
    font-family: "bootstrap-icons";
    font-size: .7em;
    opacity: .45;                           /* always visible — a phone has no hover */
    margin-left: .3em;
    vertical-align: middle;
}
th.sortable:hover::after { opacity: .7; }
th.sortable.sorted-asc::after  { content: "\F235"; opacity: 1; }   /* bi-caret-up-fill */
th.sortable.sorted-desc::after { content: "\F229"; opacity: 1; }   /* bi-caret-down-fill */

/* ---------- Party modules (বেপারী / কাস্টমার / দেনাদার / পাওনাদার) ---------- */
/* The owner reads these screens at arm's length on a phone, so the headline
   count/total, the party names and the ledger summary figures are set larger
   than the app default. Scoped to these pages so nothing else grows. */
.party-head        { font-size: 1.5rem; line-height: 1.35; }
.party-head .badge { font-size: .85em; vertical-align: middle; }
.party-head small  { font-size: .8em; }
.party-head .party-total { font-size: 1em; font-weight: 600; }

.party-name        { font-size: 1.15rem; font-weight: 600; }
.party-title       { font-size: 1.6rem; font-weight: 700; }

.party-sum__label  { font-size: .95rem; }
.party-sum__value  { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }

/* "all border" — every cell ruled, including the header row. Applied to every
   listing table in the app (not just the party pages) so nothing stands out. */
.table-allborder, .table-allborder th, .table-allborder td,
.card table.table th, .card table.table td { border: 1px solid var(--bs-border-color, #dee2e6); }
.table-allborder th, .card table.table thead th { background: #f8f9fa; }

@media (max-width: 575.98px) {
    .party-head       { font-size: 1.25rem; }
    .party-title      { font-size: 1.3rem; }
    .party-sum__value { font-size: 1.4rem; }
    .party-name       { font-size: 1.05rem; }
}

/* ---------- Same treatment for every other module ---------- */
/* The party pages (বেপারী / কাস্টমার / দেনাদার / পাওনাদার) set the house style:
   a large page heading, large names, large summary figures. These rules give
   the rest of the app the same sizes without touching each template. */
.app-content h5.mb-0            { font-size: 1.5rem; line-height: 1.35; }
.app-content h5.mb-0 small      { font-size: .8em; }
.app-content h5.mb-0 .badge     { font-size: .85em; vertical-align: middle; }
/* Headline count/total next to a page title. */
.app-content h5.mb-0 > small.text-muted.fw-normal.ms-2 { font-size: 1em; font-weight: 600 !important; }
/* Summary cards used across modules (খরচ, আয়, লট, রিপোর্ট …). */
.card .fs-5.fw-bold             { font-size: 1.75rem !important; font-weight: 700; line-height: 1.2; }
/* Totals row of any listing table. */
.card table.table tr.table-light.fw-bold td { font-size: 1.05rem; }

@media (max-width: 575.98px) {
    .app-content h5.mb-0 { font-size: 1.25rem; }
    .card .fs-5.fw-bold  { font-size: 1.4rem !important; }
}

/* ---------- Report tabs ---------- */
/* The report switcher is the main navigation on that page, so its labels are
   set larger than a normal button and the active one is unmistakable. */
.report-tabs .btn {
    font-size: 1.1rem;
    font-weight: 600;
    padding: .45rem 1rem;
}
@media (max-width: 575.98px) {
    .report-tabs .btn { font-size: 1rem; padding: .4rem .75rem; }
}

/* ---------- Printing ---------- */
/* The printer button in the topbar works on every module. On paper we drop the
   app chrome (menus, buttons, filters, action columns) and print a letterhead
   with the shop name, the page title and the date — so any list, ledger or
   report can be handed over or filed as-is. */
.print-head { display: none; }

@media print {
    .app-sidebar, .app-sidebar__backdrop, .app-topbar, .app-bottomnav,
    .no-print, .btn, .dropdown,
    form[method="get"], td form, th form { display: none !important; }

    html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    /* পর্দায় সাইডবারের জন্য বাঁ পাশে যে জায়গা ছাড়া থাকে, কাগজে সাইডবার নেই —
       ওই জায়গাটুকু না মুছলে পুরো লেখা ডানে সরে গিয়ে ধার কেটে যায়। */
    .app-layout, .app-main { display: block !important; margin: 0 !important; padding: 0 !important; }
    .app-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    /* কোনো কিছুই কাগজের প্রস্থ ছাড়িয়ে যাবে না। */
    .app-content, .card, .table-responsive, .slip { max-width: 100% !important; }

    .print-head { display: block !important; text-align: center; margin-bottom: .6rem;
                  border-bottom: 2px solid #000; padding-bottom: .4rem; }
    .print-head__shop  { font-size: 1.5rem; font-weight: 700; }
    .print-head__title { font-size: 1.15rem; font-weight: 600; margin-top: .2rem; }
    .print-head__sub   { font-size: .85rem; }

    .card { border: 1px solid #999 !important; box-shadow: none !important;
            break-inside: avoid; margin-bottom: .5rem; }
    .kpi-card { border: 1px solid #999 !important; box-shadow: none !important; }
    a { text-decoration: none !important; color: inherit !important; }

    /* Long tables: repeat the header on each sheet, never split a row. */
    table { break-inside: auto; width: 100% !important; }
    thead { display: table-header-group; }
    tr    { break-inside: avoid; }
    .table-responsive { overflow: visible !important; }

    @page { margin: 12mm; }
}

/* Small print under a KPI figure, e.g. "খরচ ৳৫০০ বাদে". */
.kpi-card__note { font-size: .78rem; color: var(--muted, #6c757d); margin-top: .1rem; }

/* ---------- লেনদেনের রসিদ (স্লিপ) ---------- */
/* পার্টি টাকা দিলে হাতে ধরিয়ে দেওয়ার ছোট কাগজ। চারটি খতিয়ানেই (কাস্টমার,
   বেপারী, দেনাদার, পাওনাদার) একই স্লিপ — receipt_slip() এটি বানায়।
   প্রস্থ ৪২০px, যাতে ফোনে পুরোটা দেখা যায় এবং কাগজে ছোট রসিদের মতো ছাপে। */
.slip {
    max-width: 420px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: .6rem;
    overflow: hidden;
}
/* ইনভয়েসের মতো লেটারহেড — নাম বড়, নিচে ঠিকানা ছোট হরফে। */
.slip__brand {
    text-align: center;
    padding: .7rem .9rem .5rem;
    border-bottom: 1px solid var(--border);
}
.slip__shop { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.slip__addr { font-size: .74rem; color: var(--text-muted); line-height: 1.35; margin-top: .15rem; }

.slip__head {
    background: #e8f8ef;
    color: #0f7a4a;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .6rem .75rem;
}
[data-bs-theme="dark"] .slip__head { background: #12362a; color: #6ee7b7; }

.slip__sec {
    color: #0f7a4a;
    font-size: .8rem;
    font-weight: 600;
    padding: .7rem .9rem .15rem;
}
[data-bs-theme="dark"] .slip__sec { color: #6ee7b7; }

.slip__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
}
.slip__row--plain { border-bottom: 0; padding: .15rem .9rem .35rem; align-items: flex-start; }
.slip__name  { font-size: 1.15rem; font-weight: 700; }
.slip__phone { font-size: 1.05rem; }

.slip__box {
    margin: .15rem .9rem .2rem;
    border: 1px solid #bfe8d2;
    border-radius: .5rem;
    padding: .6rem .75rem;
}
[data-bs-theme="dark"] .slip__box { border-color: #1f5741; }
.slip__label { display: block; color: #0f7a4a; font-size: .78rem; font-weight: 600; }
[data-bs-theme="dark"] .slip__label { color: #6ee7b7; }
.slip__when  { font-weight: 700; }
.slip__badge {
    border: 1px solid #0f7a4a;
    color: #0f7a4a;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .82rem;
    white-space: nowrap;
}
[data-bs-theme="dark"] .slip__badge { border-color: #6ee7b7; color: #6ee7b7; }
.slip__amount { font-size: 1.6rem; font-weight: 700; text-align: right; }
.slip__note   { font-size: .85rem; color: var(--text-muted); }

.slip__bal { margin: .15rem .9rem .3rem; border: 1px solid var(--border); border-radius: .5rem; }
.slip__bal .slip__row:last-child { border-bottom: 0; }
.slip__row--now { font-weight: 700; }

.slip__foot {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    margin-top: .5rem;
    padding: .5rem .9rem;
    font-size: .8rem;
    color: #0f7a4a;
}
[data-bs-theme="dark"] .slip__foot { color: #6ee7b7; }
.slip__thanks { text-align: center; font-weight: 700; padding: .1rem .9rem; }
.slip__thanks--big { font-size: 1.15rem; padding-bottom: .8rem; }

.slip__actions { display: flex; gap: .5rem; justify-content: center; margin: 1rem auto 0; max-width: 420px; }

/* কাগজে শুধু রসিদটুকু — দোকানের লেটারহেড বা মেনু নয়। */
@media print {
    /* পাতার লেটারহেড লুকানোর নিয়মটি receipt_slip() নিজের সাথেই পাঠায় — কারণ
       .print-head স্লিপের ভেতরে নয়, পাতার একদম উপরে বসে, তাই এখান থেকে
       descendant সিলেক্টর দিয়ে ধরা যায় না। */
    .slip-page .slip { border: 1px solid #000; max-width: 100%; }
    .slip-page .slip__head, .slip-page .slip__sec,
    .slip-page .slip__label, .slip-page .slip__badge,
    .slip-page .slip__foot { color: #000 !important; }
    .slip-page .slip__head { background: #eee !important; }
    .slip-page .slip__shop { font-size: 1.5rem; }
    .slip-page .slip__addr { color: #000 !important; }
    .slip-page .slip__row  { border-bottom: 1px solid #999; }
    @page { margin: 8mm; }
}

/* ---------- বিক্রয়ের কার্টে যে ঘরগুলোয় হাত পড়ে ---------- */
/* বস্তা / ওজন / দর — সারাদিন এই তিনটেতেই টাইপ করা হয়, তাই বাকি ঘরের চেয়ে
   বড় হরফ ও উঁচু ঘর। মোবাইলে আঙুলে চাপতে সুবিধা হয়, আর লেখা দূর থেকেও পড়া যায়। */
.cart-num {
    font-size: 1.05rem;
    font-weight: 600;
    padding: .35rem .5rem;
    height: auto;
    text-align: right;
}