/* ============================================================
   BizChat.io — professional panel theme + motion
   Layered ON TOP of Filament v3's own styles: only polish here,
   never layout. Brand color arrives as --bz-brand (inlined from
   the panel_brand_color setting) and every accent below derives
   from it via color-mix(), so one admin setting re-skins it all.
   ============================================================ */

:root {
    --bz-brand: #0b7fc6;
    --bz-brand-deep: color-mix(in srgb, var(--bz-brand) 78%, #0a1f33);
    --bz-brand-soft: color-mix(in srgb, var(--bz-brand) 10%, #ffffff);
    --bz-ring: color-mix(in srgb, var(--bz-brand) 28%, transparent);
    --bz-radius: 12px;
    --bz-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --bz-shadow-md: 0 4px 14px rgba(15, 23, 42, .07);
    --bz-shadow-lg: 0 12px 30px rgba(15, 23, 42, .12);
    --bz-ease: cubic-bezier(.22, .8, .36, 1);
}

/* ---------- canvas ---------- */
.fi-body { background: linear-gradient(160deg, #f6f8fc 0%, #eef2f9 55%, #f4f0f9 100%) fixed; }
.dark .fi-body { background: linear-gradient(160deg, #0e1520 0%, #101a28 60%, #131625 100%) fixed; }

/* ---------- entrance motion: page content fades up in a gentle stagger ---------- */
@keyframes bz-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.fi-page > section, .fi-page > div, .fi-page form, .fi-wi > * {
    animation: bz-fade-up .38s var(--bz-ease) backwards;
}
.fi-page > *:nth-child(2) { animation-delay: .05s; }
.fi-page > *:nth-child(3) { animation-delay: .10s; }
.fi-page > *:nth-child(4) { animation-delay: .15s; }
.fi-page > *:nth-child(5) { animation-delay: .20s; }
.fi-page > *:nth-child(n+6) { animation-delay: .24s; }

/* ---------- sidebar: full brand gradient, the "menu" wears the color ---------- */
.fi-sidebar {
    background: linear-gradient(185deg, var(--bz-brand-deep) 0%, color-mix(in srgb, var(--bz-brand-deep) 80%, #1e1b4b) 100%) !important;
    border-right: none !important;
    box-shadow: 6px 0 28px rgba(15, 23, 42, .18);
}
/* the logo strip sits on the color as a soft frosted band */
.fi-sidebar-header {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.fi-sidebar-nav { scrollbar-width: thin; }
.fi-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }

.fi-sidebar-item-button {
    border-radius: 10px;
    transition: background-color .18s var(--bz-ease), transform .18s var(--bz-ease), color .18s;
}
.fi-sidebar-item .fi-sidebar-item-label { color: rgba(255, 255, 255, .86); }
.fi-sidebar-item .fi-sidebar-item-icon { color: rgba(255, 255, 255, .72); }
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background: rgba(255, 255, 255, .13);
    transform: translateX(3px);
}
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: #fff; }

/* active item: solid white pill, brand-colored text — pops on the gradient */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--bz-brand) !important; font-weight: 700; }

/* group headings + collapse chevrons in light white */
.fi-sidebar-group-label { letter-spacing: .06em; color: rgba(255, 255, 255, .55) !important; }
.fi-sidebar-group-collapse-button { color: rgba(255, 255, 255, .55) !important; }
.fi-sidebar-group-collapse-button:hover { background: rgba(255, 255, 255, .12); }

/* nav badges (e.g. open complaints count) need to stay readable on the color */
.fi-sidebar-item-badge-ctn .fi-badge { background: rgba(255, 255, 255, .9) !important; color: var(--bz-brand-deep) !important; }

/* ---------- topbar: full-width brand gradient, edge to edge ---------- */
.fi-topbar > nav {
    background: linear-gradient(110deg, var(--bz-brand-deep) 0%, var(--bz-brand) 55%, color-mix(in srgb, var(--bz-brand) 72%, #7c3aed) 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 18px var(--bz-ring);
}
.dark .fi-topbar > nav { box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }

/* everything sitting ON the gradient turns white */
.fi-topbar .fi-icon-btn { color: #fff !important; }
.fi-topbar .fi-icon-btn:hover { background: rgba(255, 255, 255, .16); transform: scale(1.08); }
.fi-topbar .fi-breadcrumbs-item-label, .fi-topbar .fi-breadcrumbs svg { color: rgba(255, 255, 255, .9) !important; }
.fi-topbar .fi-breadcrumbs-item-label:hover { color: #fff; }
/* the avatar button gets a white ring so it pops on the color */
.fi-topbar .fi-user-avatar, .fi-topbar .fi-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

/* ---------- cards / sections / table shell ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-widget {
    border-radius: var(--bz-radius) !important;
    border-color: #e7ecf4 !important;
    box-shadow: var(--bz-shadow-sm), var(--bz-shadow-md) !important;
    transition: box-shadow .22s var(--bz-ease), transform .22s var(--bz-ease);
}
.dark .fi-section, .dark .fi-ta-ctn, .dark .fi-wi-widget { border-color: #24324a !important; }
.fi-section:hover { box-shadow: var(--bz-shadow-lg) !important; }

/* Widgets that already draw their own cards (the stat grids, the top notice)
   opt out of the shell above — otherwise every card sits inside a second,
   emptier card and the dashboard reads as boxes inside boxes. */
.fi-wi-widget.bz-bare {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* section headers get a whisper of brand tint */
.fi-section-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bz-brand) 4%, transparent), transparent);
    border-radius: var(--bz-radius) var(--bz-radius) 0 0;
}

/* ---------- buttons ---------- */
.fi-btn {
    border-radius: 10px !important;
    transition: transform .16s var(--bz-ease), box-shadow .16s var(--bz-ease), filter .16s;
}
.fi-btn:hover { transform: translateY(-1px); }
.fi-btn:active { transform: translateY(0) scale(.97); }
.fi-btn-color-primary {
    background: linear-gradient(120deg, var(--bz-brand) 0%, var(--bz-brand-deep) 100%) !important;
    box-shadow: 0 3px 10px var(--bz-ring) !important;
    border: none !important;
}
.fi-btn-color-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 16px var(--bz-ring) !important; }
.fi-icon-btn { transition: background-color .16s, transform .16s var(--bz-ease); border-radius: 9px; }
.fi-icon-btn:hover { transform: scale(1.08); }
.fi-icon-btn:active { transform: scale(.94); }

/* ---------- inputs: compact + a soft brand tint (not flat gray) ---------- */
.fi-input-wrp {
    border-radius: 9px !important;
    --tw-ring-color: color-mix(in srgb, var(--bz-brand) 16%, #cbd5e1) !important;
    transition: box-shadow .18s var(--bz-ease), border-color .18s;
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px var(--bz-ring) !important;
    border-color: var(--bz-brand) !important;
}
.dark .fi-input-wrp { --tw-ring-color: color-mix(in srgb, var(--bz-brand) 30%, transparent) !important; }
/* Select / date / textarea share the same compact sizing as text inputs. */
.fi-select-input, .fi-fo-textarea { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; font-size: 0.8125rem !important; }
.fi-fo-field-wrp-label { font-size: 0.8125rem; }

/* ---------- status tabs ---------- */
.fi-tabs { border-radius: 12px; }
.fi-tabs-item {
    border-radius: 9px !important;
    transition: background-color .18s, color .18s, transform .18s var(--bz-ease), box-shadow .18s;
}
.fi-tabs-item:hover:not(.fi-active) { background: color-mix(in srgb, var(--bz-brand) 6%, transparent); }
.fi-tabs-item.fi-active {
    background: linear-gradient(120deg, var(--bz-brand) 0%, var(--bz-brand-deep) 100%) !important;
    box-shadow: 0 3px 10px var(--bz-ring);
}
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-tabs-item-icon { color: #fff !important; }
.fi-tabs-item.fi-active .fi-badge { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }

/* ---------- table rows / record cards ---------- */
.fi-ta-row { transition: background-color .16s, box-shadow .2s var(--bz-ease); }
.fi-ta-row:hover { background: color-mix(in srgb, var(--bz-brand) 4%, transparent) !important; }
.fi-ta-record { transition: box-shadow .2s var(--bz-ease), transform .2s var(--bz-ease); border-radius: 12px; }
.fi-ta-record:hover { box-shadow: var(--bz-shadow-md); }

/* ---------- index tables: wrap, never clip, NEVER scroll sideways ----------
   Long product names / addresses / notes fold onto the next line instead of
   stretching the table wider than the screen — the single biggest cause of
   left-right scrolling, which this panel bans. */
.fi-ta-cell, .fi-ta-cell * { white-space: normal !important; overflow-wrap: anywhere; }
.fi-ta-header-cell { white-space: normal !important; }
/* …but never the action buttons: "Edit" / "Delete" must stay on one line,
   or a narrow actions column shreds them into a vertical letter-stack. */
.fi-ta-actions, .fi-ta-actions *,
.fi-ta-cell .fi-btn, .fi-ta-cell .fi-btn *,
.fi-ta-cell .fi-icon-btn, .fi-ta-cell .fi-icon-btn *,
.fi-ta-cell .fi-badge, .fi-ta-cell .fi-badge *,
.fi-ta-cell .fi-dropdown-trigger, .fi-ta-cell .fi-dropdown-trigger * {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all;
}
/* the actions column keeps its natural width instead of being squeezed */
.fi-ta-table td:has(.fi-ta-actions) { width: 1px; }
/* Filament ships `.fi-ta-actions { overflow-x: auto }` so a long row of inline
   actions can pan. Squeezed to width:1px above, that box ends up narrower than
   the icon button inside it (Filament gives icon buttons a -m-2, so a 36px
   button occupies a 20px slot) and the browser draws tiny scrollbars right
   next to the ⋮. Nothing here ever needs to pan — let the button spill.
   Scoped to the row's own ⋮ cell only — the bulk-selection toolbar (Assign,
   Delete, …) renders the SAME .fi-ta-actions class but isn't squeezed to
   width:1px, so it still needs its real overflow-x:auto scrollbar or its
   later buttons (Delete, Restore) render off the edge of the screen with no
   way to reach them. */
td.fi-ta-actions-cell .fi-ta-actions { overflow: visible !important; }
/* The bulk-selection toolbar's own overflow-x:auto (restored above) only
   works if the box holding it is actually width-constrained. Its direct
   wrapper ships `shrink-0` (refuses to shrink) and no width of its own, so
   on a narrow screen it just grows to fit every button (Assign, Delete, …)
   at full size and spills past the card — same "gone off the edge" bug,
   one level up. Let it shrink to the toolbar's real width, then scroll. */
.fi-ta-header-toolbar > div:has(.fi-ta-actions) {
    min-width: 0;
    flex-shrink: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Labels are short now, but 6+ bulk buttons still won't all fit on one
   line on a phone — wrap onto a 2nd/3rd line instead of relying on the
   scroll above, same "never pan sideways" rule the status tabs follow.
   `.fi-ta-actions` itself also ships `shrink-0`, so it still grows to fit
   every child at full width unless it's forced back down to the space its
   (now-shrinkable) wrapper actually has — only then does wrap have
   anything to wrap against. */
.fi-ta-header-toolbar .fi-ta-actions {
    flex-wrap: wrap;
    flex-shrink: 1;
    width: 100%;
}
.fi-ta-content { overflow-x: visible !important; }
.fi-ta-table { width: 100%; table-layout: auto; }

/* Phone: a real table can't fit — each ROW becomes a rounded card and its
   cells flow inside like chips. Headers go (each value reads on its own),
   nothing ever pans sideways. */
@media (max-width: 768px) {
    .fi-ta-table, .fi-ta-table tbody { display: block; width: 100%; }
    .fi-ta-table thead { display: none; }
    .fi-ta-table tr.fi-ta-row {
        display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
        padding: 10px 12px; margin: 8px;
        background: var(--bz-card-bg, #fff);
        border: 1px solid #eef1f6; border-radius: 12px;
        box-shadow: var(--bz-shadow-sm);
    }
    .dark .fi-ta-table tr.fi-ta-row { background: #1c2531; border-color: #26334a; }
    .fi-ta-table tr.fi-ta-row > td { display: inline-flex; align-items: center; padding: 2px 0 !important; border: none !important; min-width: 0; }
    .fi-ta-table tr.fi-ta-row > td:first-child { flex-basis: auto; }
    /* actions drift to the row's end, full-width strip */
    .fi-ta-table td.fi-ta-actions-cell, .fi-ta-table td:last-child { margin-inline-start: auto; }
    /* The desktop "width:1px" trick (above) starves this cell down to 1px
       once the row becomes a wrapping flexbox here — the ⋮ button then
       paints outside its own box and spills past the card's right edge.
       Give it its content's real size back so it either fits on the line
       or wraps onto its own, but never bleeds outside the card. */
    .fi-ta-table tr.fi-ta-row > td.fi-ta-actions-cell { width: auto; flex-basis: auto; }
    .fi-ta-table .fi-ta-empty-state-cell { display: block; }
}

/* Orders, phone card: checkbox + ⋮ share the top line (checkbox top-left,
   ⋮ pushed to the far right by the rule above); every OTHER cell — invoice,
   customer, products, status, … — gets the full card width and wraps onto
   its own line. Without this each cell only takes the room it needs and
   wraps wherever it runs out, so invoice/customer/etc. all start from
   different left edges depending on what happened to be on their line —
   this way everything below the top line lines up on one consistent left
   edge instead of zigzagging. */
@media (max-width: 768px) {
    .fi-resource-orders .fi-ta-table tr.fi-ta-row > td:not(:first-child):not(.fi-ta-actions-cell) {
        flex-basis: 100%;
    }
    /* Every cell's real content sits inside Filament's own `.fi-ta-text`
       wrapper, which ships `py-4` (32px of top+bottom padding) — sized for
       a normal single-line desktop table row, not 9 cells now each
       stacked as their own full-width line. That padding was always
       there; it just wasn't visible before because short cells used to
       share one line instead of each getting a full one, so the row's
       height was set by its tallest single-line cell, not the SUM of
       nine. This is the actual "big gaps between everything" the last
       change introduced. */
    .fi-resource-orders .fi-ta-table tr.fi-ta-row .fi-ta-text {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Title + "New order" button, pinned right under the app's own topbar (64px)
   so it — and the New order button — stay reachable while the status tabs
   and order list scroll underneath, instead of scrolling away with them. */
.fi-resource-orders .fi-header {
    position: sticky;
    top: 64px;
    z-index: 31;
    background: #f9fafb;
    padding: 12px 0;
}
.dark .fi-resource-orders .fi-header { background: #030712; }
/* New order + quick Status/courier buttons now share this one row —
   smaller text (and tighter padding on phones) keeps all of them fitting
   without the row wrapping to three or four lines. */
.fi-resource-orders .fi-header .fi-ac-btn-action { font-size: .75rem; padding-inline: .625rem; }
/* Phone: New order + Status + up to 4 courier buttons never fit as text on
   one line — icon-only keeps this bar to the single row it's meant to be,
   same treatment as the bottom bulk toolbar. */
@media (max-width: 640px) {
    .fi-resource-orders .fi-header .fi-actions { flex-wrap: nowrap; gap: .375rem; overflow-x: auto; }
    /* "New order" keeps its label — a lone + icon reads as unclear on its
       own — only the Status/courier quick actions (marked bz-quick-action)
       go icon-only. */
    .fi-resource-orders .fi-header .bz-quick-action.fi-ac-btn-action { padding: .5rem; min-width: 2.25rem; }
    .fi-resource-orders .fi-header .bz-quick-action.fi-ac-btn-action .fi-btn-label { display: none; }
}

/* Bulk-action toolbar (Assign, Status, Delete, per-courier send, …):
   its OWN static bar at the BOTTOM — separate from the header's static bar
   at the top — appearing once an order is selected and staying reachable
   no matter how far down the list you scroll after that. Targeted by its
   own x-show value, not a class, because `.fi-ta-header-ctn` is the WHOLE
   toolbar — search box included — and stays visible always; only this
   inner block is what Filament shows/hides on selection. */
.fi-resource-orders .fi-ta-actions[x-show="selectedRecords.length"] {
    position: fixed;
    left: 12px;
    right: 12px;
    z-index: 40;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    gap: 6px;
    justify-content: center;
    overflow-x: auto;
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .18);
}
.dark .fi-resource-orders .fi-ta-actions[x-show="selectedRecords.length"] { background: #111827; }
/* The bottom nav bar (60px) only exists below the 1024px breakpoint where
   it hides itself — clear it there, sit flush on desktop where it's gone. */
@media (max-width: 1023px) {
    .fi-resource-orders .fi-ta-actions[x-show="selectedRecords.length"] {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}
@media (min-width: 1024px) {
    /* Filament centers the per-page (10/25/50) selector by default — right
       where a centered toolbar would then sit on top of it. Centered
       toolbar + the selector pushed to the right corner keeps both
       reachable instead of one covering the other. */
    .fi-resource-orders .fi-ta-actions[x-show="selectedRecords.length"] {
        bottom: 16px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: max-content;
    }
    .fi-resource-orders .fi-pagination > div:has(.fi-pagination-records-per-page-select) {
        grid-column: 3;
        justify-self: end;
    }
}
/* Phone: up to a dozen buttons (8 general + up to 4 per-courier) — icon-only
   so it wraps onto as many rows as needed instead of scrolling sideways. */
@media (max-width: 768px) {
    .fi-resource-orders .fi-ta-actions[x-show="selectedRecords.length"] { flex-wrap: wrap; justify-content: center; }
    .fi-resource-orders .fi-ta-actions[x-show="selectedRecords.length"] .fi-btn-label { display: none; }
    .fi-resource-orders .fi-ta-actions[x-show="selectedRecords.length"] .fi-btn { padding: 8px; min-width: 2.25rem; }
}

/* ---------- Orders index: the Customer cell — name, phone, address, all
   in one small card instead of three bare lines. Smaller text throughout
   (0.75rem base) so the whole card stays compact. */
.fi-resource-orders .bz-customer-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f9fafb;
    border: 1px solid #eef0f2;
    border-radius: 0.5rem;
    padding: 6px 8px;
    font-size: 0.75rem;
}
.dark .fi-resource-orders .bz-customer-box { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
/* Name: its own slightly bolder/larger line, ellipsis instead of wrapping
   (full name still available on hover via the title attribute) — the
   phone/address below it wrap normally, this is the one exception to the
   panel-wide "never truncate, always wrap" rule above. */
.fi-resource-orders .bz-name-chip {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 0.8125rem;
}
/* A phone number is always short and fixed-format — never wrap it. Without
   this, a narrow Customer column breaks "📞" onto its own line above the
   digits (the column's normal wrap rule doesn't know this one line should
   never split). */
.fi-resource-orders .bz-customer-phone { color: #6b7280; white-space: nowrap; }
.fi-resource-orders .bz-customer-phone a { white-space: nowrap !important; }
.dark .fi-resource-orders .bz-customer-phone { color: #9ca3af; }
.fi-resource-orders .bz-customer-history { color: var(--bz-warning-text, #b45309); }
/* Address: tap-to-copy, same UX Filament's own ->copyable() columns use —
   a pointer cursor and a faint hover tint hint that it's clickable. Wraps
   normally (long addresses go to a 2nd/3rd line) rather than truncating —
   this one needs to stay readable in full, unlike the name. */
.fi-resource-orders .bz-copyable-address { color: #9ca3af; cursor: pointer; border-radius: 4px; transition: background-color .1s; }
.fi-resource-orders .bz-copyable-address:hover { background: color-mix(in srgb, var(--bz-brand) 8%, transparent); }

/* ---------- Orders index: Products cell ---------- */
/* The product name, same treatment as the Customer name box — a light
   card instead of bare text floating next to the photo. Wraps (long names
   go to a 2nd/3rd line inside the box) rather than truncating — unlike
   the customer name, there's no separate line below it competing for
   room, so there's nothing to protect by cutting this one short. */
.fi-resource-orders .bz-product-name {
    display: inline-block;
    max-width: 100%;
    border-radius: 0.375rem;
    background: #f9fafb;
    border: 1px solid #eef0f2;
    padding: 3px 8px;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.35;
}
.dark .fi-resource-orders .bz-product-name { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
/* No product photo saved for this order — a plain bag icon in the same
   56px slot instead of the column just looking broken/empty. */
.fi-resource-orders .bz-product-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 2.5rem; width: 2.5rem; flex-shrink: 0;
    border-radius: 0.375rem;
    background: #f3f4f6;
    font-size: 1.1rem;
}
.dark .fi-resource-orders .bz-product-placeholder { background: rgba(255,255,255,.06); }
/* "+2" etc. when an order has more than one distinct product — the single
   visible name is only the first; this is the "there's more" signal. */
.fi-resource-orders .bz-more-items-badge {
    display: inline-block;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--bz-brand) 12%, transparent);
    color: var(--bz-brand);
    padding: 0 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Orders index: give the short columns a cap instead of a fixed
   split ---------- table-layout:fixed with hand-summed percentages looked
   right in isolation but never accounted for the checkbox/⋮-actions
   columns eating their own slice too — the real total ran past 100% and
   the browser answered by letting Customer/Products text paint outside
   its own cell into its neighbour, not by shrinking politely. table-layout
   stays auto (browser measures real content); Status/Fraud/Payment/
   Courier/Assigned/Total — a badge or a few words — get a max-width and
   ellipsis so THEY can't stretch the row, while Customer/Products keep
   wrapping normally and take whatever's left. Desktop only — the phone
   layout below 769px is the flex-wrap card treatment, a different
   (non-table) layout this doesn't apply to. */
@media (min-width: 769px) {
    /* Total (money) deliberately left out of this group — "BDT 1,140.00"
       clipped to "BDT 1,140." by the same 9rem+ellipsis cap reads as a
       DIFFERENT, wrong number, not a stylistic truncation. A price is one
       of the few things here that must never be shortened. */
    .fi-resource-orders .fi-ta-table .fi-table-cell-status,
    .fi-resource-orders .fi-ta-table .fi-table-cell-fraud,
    .fi-resource-orders .fi-ta-table .fi-table-cell-cod,
    .fi-resource-orders .fi-ta-table .fi-table-cell-courier,
    .fi-resource-orders .fi-ta-table .fi-table-cell-assignee\.name {
        max-width: 9rem;
    }
    .fi-resource-orders .fi-ta-table .fi-table-cell-status *,
    .fi-resource-orders .fi-ta-table .fi-table-cell-fraud *,
    .fi-resource-orders .fi-ta-table .fi-table-cell-cod *,
    .fi-resource-orders .fi-ta-table .fi-table-cell-courier,
    .fi-resource-orders .fi-ta-table .fi-table-cell-assignee\.name {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; max-width: 100%;
    }
    .fi-resource-orders .fi-ta-table .fi-table-cell-total {
        white-space: nowrap !important;
    }
    /* Customer/Products: real paragraphs — cap how wide they're ALLOWED to
       grow (auto layout otherwise lets a long address stretch the column
       as wide as its longest line) and clip anything that still manages
       to overflow, so a rendering edge case shrinks a word instead of
       bleeding into the next column like before. */
    .fi-resource-orders .fi-ta-table .fi-table-cell-customer-name,
    .fi-resource-orders .fi-ta-table .fi-table-cell-items {
        max-width: 22rem;
        overflow: hidden;
    }
}

/* ---------- stat / summary boxes: compact numbers that wrap, never overflow ----------
   The custom pages print big figures with text-4xl / text-2xl; on small
   boxes they overflow. Scale them fluidly with the viewport instead —
   clamp() keeps them readable on a phone AND calm on a desktop. */
.fi-page .text-4xl { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.85rem) !important; line-height: 1.2; }
.fi-page .text-2xl { font-size: clamp(1.1rem, .9rem + .9vw, 1.4rem) !important; line-height: 1.25; }
.fi-page .text-xl  { font-size: clamp(1rem, .85rem + .7vw, 1.2rem) !important; line-height: 1.3; }
/* box labels: a touch smaller and quieter than the number they describe */
.fi-section .text-xs, .fi-page .rounded-lg .text-xs { font-size: .7rem; letter-spacing: .01em; }
/* grid children may shrink below their content width — required for wrapping */
.fi-page .grid > * { min-width: 0; }
/* words inside cards fold to the next line instead of pushing the box wider */
.fi-section *, .fi-wi-widget *, .fi-page .rounded-lg *, .fi-page .rounded-xl * { overflow-wrap: break-word; }

/* ---------- badges ---------- */
.fi-badge { font-weight: 700 !important; transition: transform .15s var(--bz-ease); }
.fi-badge:hover { transform: scale(1.06); }

/* ---------- dropdowns & modals: soft pop ---------- */
@keyframes bz-pop {
    from { opacity: 0; transform: translateY(6px) scale(.97); }
    to { opacity: 1; transform: none; }
}
.fi-dropdown-panel { animation: bz-pop .18s var(--bz-ease); border-radius: 12px !important; box-shadow: var(--bz-shadow-lg) !important; }
.fi-modal-window { animation: bz-pop .24s var(--bz-ease); border-radius: 16px !important; box-shadow: 0 24px 60px rgba(15, 23, 42, .25) !important; }

/* ---------- notifications ---------- */
.fi-no-notification { border-radius: 14px !important; box-shadow: var(--bz-shadow-lg) !important; animation: bz-pop .22s var(--bz-ease); }

/* ---------- pagination ---------- */
.fi-pagination-item { border-radius: 9px; transition: background-color .16s, transform .16s var(--bz-ease); }
.fi-pagination-item:hover { transform: translateY(-1px); }

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c6d0de; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--bz-brand) 45%, #c6d0de); }
.dark *::-webkit-scrollbar-thumb { background: #33415a; }

/* ---------- page header ---------- */
.fi-header h1 { letter-spacing: -.02em; }
.fi-breadcrumbs-item-label { transition: color .15s; }
.fi-breadcrumbs-item-label:hover { color: var(--bz-brand); }

/* ---------- motion accessibility: one switch kills it all ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}