/* ============================================================
   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; }

/* 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. */
.fi-ta-actions { overflow: visible !important; }
.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; }
    .fi-ta-table .fi-ta-empty-state-cell { display: block; }
}

/* ---------- 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; }
}