/* ─── BizeeOS admin theme ────────────────────────────────────────────────────
   Implements DESIGN.md: white sidebar, soft grey workspace, white cards,
   Inter (optical sizes), thin outline icons, ink primary actions, violet accents.
   Loaded last (HEAD_END hook), layered over Filament's compiled CSS.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --bz-canvas:        #F4F4F6;
    --bz-surface:       #FFFFFF;
    --bz-surface-2:     #FAFAFB;
    --bz-hover:         #F4F4F7;
    --bz-selected:      #F0F0F4;

    --bz-ink:           #0E0C24;
    --bz-ink-hover:     #26234A;
    --bz-text:          #0E0C24;
    --bz-text-2:        #3F3D56;
    --bz-muted:         #8A889C;

    --bz-line:          #ECECF1;
    --bz-line-strong:   #DEDDE6;

    --bz-accent:        #5B3DF5;
    --bz-accent-2:      #22B8F0;
    --bz-accent-3:      #F79009;
    --bz-accent-soft:   #F0EDFF;
    --bz-accent-text:   #4A2FE0;
    --bz-positive:      #12B76A;
    --bz-negative:      #F04438;

    --bz-radius-card:   16px;
    --bz-radius-ctrl:   10px;
    --bz-radius-sm:     8px;
    --bz-shadow-sm:     0 1px 2px rgba(14, 12, 36, 0.04);
    --bz-shadow-pop:    0 16px 40px -12px rgba(14, 12, 36, 0.18), 0 2px 6px rgba(14, 12, 36, 0.06);
    --bz-focus:         0 0 0 3px rgba(91, 61, 245, 0.15);
    --bz-transition:    0.15s ease;
}

.dark {
    --bz-canvas:        #0B0B12;
    --bz-surface:       #15141F;
    --bz-surface-2:     #1A1926;
    --bz-hover:         #1E1D2B;
    --bz-selected:      #24233A;
    --bz-ink:           #F4F3FA;
    --bz-ink-hover:     #FFFFFF;
    --bz-text:          #F4F3FA;
    --bz-text-2:        #CFCDE0;
    --bz-muted:         #8F8DA6;
    --bz-line:          rgba(255, 255, 255, 0.07);
    --bz-line-strong:   rgba(255, 255, 255, 0.12);
    --bz-accent-soft:   rgba(91, 61, 245, 0.18);
    --bz-accent-text:   #B3A6FF;
}

/* ─── Shell ──────────────────────────────────────────────────────────────── */

.fi-body {
    background-color: var(--bz-surface);
    color: var(--bz-text);
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
}

.fi-layout { background-color: var(--bz-surface); }

/* The workspace: a soft grey panel next to the white sidebar */
.fi-main-ctn {
    background-color: var(--bz-canvas);
    min-height: 100vh;
}

@media (min-width: 1024px) {
    .fi-main-ctn {
        border-top-left-radius: 28px;
        border-bottom-left-radius: 28px;
        margin-block: 10px;
        min-height: calc(100vh - 20px);
    }
}

.fi-main { padding-top: 0.5rem !important; }
.fi-page-header-main-ctn { padding-top: 1.25rem !important; row-gap: 1.5rem !important; }

/* ─── Sidebar ────────────────────────────────────────────────────────────── */

.fi-sidebar {
    background-color: var(--bz-surface) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fi-sidebar-header {
    height: 76px !important;
    padding-inline: 1.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.fi-sidebar-header .fi-icon-btn { color: var(--bz-muted) !important; }

/* Hide-sidebar arrow sits after the logo, on the right */
.fi-sidebar-header .fi-icon-btn { order: 2; margin-left: auto; }

.fi-sidebar-nav {
    padding: 0.5rem 1rem 1.5rem !important;
    scrollbar-width: thin;
    scrollbar-color: var(--bz-line-strong) transparent;
}

.fi-sidebar-nav-groups { gap: 2px !important; }

/* Module rows: the expanded (current) one and the single links */
.fi-sidebar-group-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem !important;
    min-height: 44px;
    padding: 0 0.75rem !important;
    border-radius: var(--bz-radius-ctrl);
    color: var(--bz-text);
    transition: background-color var(--bz-transition);
}

.fi-sidebar-group-btn:hover { background-color: var(--bz-hover); }

.fi-sidebar-group-btn .fi-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: var(--bz-text-2) !important;
}

.fi-sidebar-group-label {
    color: var(--bz-text) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
}

/* Current module: medium weight and the ink bar on the sidebar edge (the page below gets the pill) */
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label { font-weight: 500 !important; }
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-icon { color: var(--bz-ink) !important; }

.fi-sidebar-group.fi-active > .fi-sidebar-group-btn::before {
    content: "";
    position: absolute;
    left: -8px; /* the row starts 8px from the sidebar edge */
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bz-ink);
}

/* Its pages: a tree hanging from the module icon */
.fi-sidebar-group-items {
    position: relative;
    margin: 4px 0 8px 1.375rem !important;
    padding: 0 0 0 0.875rem !important;
    border-left: 1px solid var(--bz-line-strong);
    gap: 2px !important;
}

.fi-sidebar-item-grouped-border { display: none !important; }

.fi-sidebar-item-btn {
    min-height: 36px;
    padding: 0 0.75rem !important;
    border-radius: var(--bz-radius-sm) !important;
    transition: background-color var(--bz-transition);
}

.fi-sidebar-item-btn:hover { background-color: var(--bz-hover) !important; }

.fi-sidebar-item-label {
    color: var(--bz-text-2) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--bz-selected) !important; }

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--bz-ink) !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-icon { color: var(--bz-text-2) !important; }

/* Modules you are not in (and single-page modules): one link each (see the sidebar override) */
.bz-sidebar-module { list-style: none; }
.bz-sidebar-module.fi-active > .fi-sidebar-group-btn { background-color: var(--bz-selected); }
.bz-sidebar-module-link { text-decoration: none; }

.fi-sidebar-close-overlay { background-color: rgba(14, 12, 36, 0.32) !important; }

/* ─── Workspace toolbar ──────────────────────────────────────────────────── */

.bz-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1.25rem 1rem 0;
}

@media (min-width: 768px) { .bz-toolbar { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .bz-toolbar { padding-inline: 2rem; } }

.bz-toolbar-search { flex: 1; min-width: 0; max-width: 26rem; }

.bz-toolbar-search .fi-global-search-field .fi-input-wrp {
    height: 44px;
    background-color: var(--bz-surface) !important;
    border-radius: var(--bz-radius-ctrl) !important;
    box-shadow: none !important;
    --tw-ring-color: var(--bz-line) !important;
}

.bz-toolbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.bz-tool-btn,
.bz-toolbar .fi-topbar-database-notifications-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--bz-radius-ctrl) !important;
    background-color: var(--bz-surface) !important;
    border: 1px solid var(--bz-line);
    color: var(--bz-text-2) !important;
    transition: border-color var(--bz-transition), color var(--bz-transition);
}

.bz-tool-btn:hover,
.bz-toolbar .fi-topbar-database-notifications-btn:hover {
    border-color: var(--bz-line-strong);
    color: var(--bz-ink) !important;
}

.bz-tool-btn .fi-icon,
.bz-toolbar .fi-topbar-database-notifications-btn .fi-icon { width: 20px; height: 20px; }

.bz-toolbar-sidebar-btn { flex-shrink: 0; }

.bz-profile-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px 0 6px !important;
    border-radius: var(--bz-radius-ctrl) !important;
    background-color: var(--bz-surface) !important;
    border: 1px solid var(--bz-line);
    text-align: left;
}

.bz-profile-chip .fi-avatar { width: 32px; height: 32px; border-radius: 999px; }

.bz-profile-chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.bz-profile-chip-name { color: var(--bz-ink); font-size: 0.8125rem; font-weight: 500; }
.bz-profile-chip-email { color: var(--bz-muted); font-size: 0.6875rem; }

.bz-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--bz-radius-ctrl);
    background-color: var(--bz-ink);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--bz-transition);
}

.bz-new-btn:hover { background-color: var(--bz-ink-hover); }
.bz-new-btn .fi-icon { width: 18px; height: 18px; color: inherit; }
.dark .bz-new-btn { color: #0E0C24; }

@media (max-width: 767px) {
    .bz-profile-chip-text { display: none; }
    .bz-profile-chip { padding: 0 5px !important; }
    .bz-new-btn span { display: none; }
    .bz-new-btn { padding: 0 12px; }
    .bz-toolbar .bz-tool-btn[aria-label] + .fi-user-menu { margin-left: 0; }
}

/* ─── Page header ────────────────────────────────────────────────────────── */

.fi-header-heading {
    font-size: 1.625rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
    color: var(--bz-ink) !important;
}

.fi-header-subheading { color: var(--bz-muted) !important; }

.fi-breadcrumbs-item-label { color: var(--bz-muted); font-size: 0.8125rem; }

@media (max-width: 767px) {
    .fi-breadcrumbs { display: none !important; }
    .fi-header-heading { font-size: 1.375rem !important; }
    .fi-page-header-actions { flex-wrap: wrap; gap: 8px; }
}

/* ─── Tabs: underline, ink ───────────────────────────────────────────────── */

.fi-tabs {
    gap: 0 !important;
    padding: 0 !important;
    margin-inline: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--bz-line);
    /* No vertical scrolling; a slim bar only when there are more tabs than fit */
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--bz-line-strong) transparent;
}

/* Underline drawn inside the tab (an overlapping border made the bar scroll vertically) */
.fi-tabs-item {
    flex-shrink: 0;
    border-radius: 0 !important;
    padding: 0.75rem 0.875rem !important;
    background-color: transparent !important;
    box-shadow: inset 0 -2px 0 transparent !important;
    transition: color var(--bz-transition), box-shadow var(--bz-transition);
}

.fi-tabs-item-label {
    color: var(--bz-muted) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

.fi-tabs-item .fi-icon { color: var(--bz-muted) !important; }
.fi-tabs-item:hover .fi-tabs-item-label { color: var(--bz-ink) !important; }

.fi-tabs-item.fi-active { box-shadow: inset 0 -2px 0 var(--bz-ink) !important; }
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon { color: var(--bz-ink) !important; }



/* Saved views bar sitting on top of a table: one card */
.fi-tabs.w-full {
    background-color: var(--bz-surface) !important;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-radius-card) var(--bz-radius-card) 0 0 !important;
    padding: 0 0.75rem !important;
}

:has(> .fi-tabs.w-full) .fi-ta-ctn {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 0 !important;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background-color: var(--bz-surface) !important;
    border-radius: var(--bz-radius-card) !important;
    --tw-shadow: 0 0 #0000 !important; /* keep the hairline ring, drop the shadow */
    --tw-ring-color: var(--bz-line) !important;
}

.fi-section-header { padding: 1.25rem 1.5rem !important; }

.fi-section-header-heading {
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--bz-ink) !important;
}

.fi-section-header-description { color: var(--bz-muted) !important; font-size: 0.8125rem !important; }

.fi-section-content { padding: 1.5rem !important; }

.fi-wi-stats-overview-stat-value {
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    font-variant-numeric: tabular-nums;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */

.fi-ta-ctn { overflow: hidden; }

.fi-ta-header-cell {
    background-color: var(--bz-surface) !important;
    color: var(--bz-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--bz-line);
}

.fi-ta-row { transition: background-color var(--bz-transition); }
.fi-ta-row:hover { background-color: var(--bz-surface-2) !important; }

.fi-ta-cell { font-size: 0.875rem; color: var(--bz-text-2); }

.fi-ta-empty-state-icon-bg { background-color: var(--bz-selected) !important; }
.fi-ta-empty-state-icon-bg .fi-icon { color: var(--bz-text-2) !important; }
.fi-ta-empty-state-heading { font-weight: 500 !important; color: var(--bz-ink) !important; }

/* ─── Controls ───────────────────────────────────────────────────────────── */

.fi-btn {
    border-radius: var(--bz-radius-ctrl) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

/* One primary action: solid ink (violet stays for accents and focus).
   Status steppers (.stage-button: Quote › Quote sent › Order) keep their own styling. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.stage-button) {
    background-color: var(--bz-ink) !important;
    color: #FFFFFF !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.stage-button):hover { background-color: var(--bz-ink-hover) !important; }
.dark .fi-btn.fi-color-primary:not(.fi-outlined):not(.stage-button) { color: #0E0C24 !important; }

.fi-btn.fi-color-primary:not(.fi-outlined):not(.stage-button) .fi-icon { color: inherit !important; }

/* Secondary buttons: white with a hairline */
.fi-btn.fi-color-gray:not(.fi-outlined) {
    background-color: var(--bz-surface) !important;
    --tw-ring-color: var(--bz-line-strong) !important;
    color: var(--bz-ink) !important;
}

.fi-icon-btn { border-radius: var(--bz-radius-sm) !important; }

.fi-input-wrp {
    border-radius: var(--bz-radius-ctrl) !important;
    --tw-ring-color: var(--bz-line-strong) !important;
}

.fi-input-wrp:focus-within { --tw-ring-color: var(--bz-accent) !important; }

.fi-fo-field-label-content { font-weight: 500 !important; color: var(--bz-text-2); font-size: 0.8125rem !important; }

.fi-badge { border-radius: 6px !important; font-weight: 500 !important; }

.fi-avatar { background-color: var(--bz-accent); }

/* ─── Page navigation: segmented switcher ─────────────────────────────────
   Pages of a section (Products · Packages · Batches) and a record's pages (View · Edit · Invoices)
   use a compact segmented control; underline tabs are kept for filters inside a card. */
.fi-tabs.fi-page-sub-navigation-tabs,
.fi-tabs.fi-tabs-segmented {
    display: inline-flex !important;
    align-self: flex-start; /* parents are column flexboxes: do not stretch */
    width: auto !important;
    max-width: 100%;
    gap: 2px !important;
    margin: 0 !important;
    padding: 3px !important;
    background-color: var(--bz-surface) !important;
    border: 1px solid var(--bz-line) !important;
    border-radius: var(--bz-radius-ctrl) !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item,
.fi-tabs-segmented .fi-tabs-item {
    padding: 0.4375rem 0.75rem !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    gap: 0.4375rem !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item:hover,
.fi-tabs-segmented .fi-tabs-item:hover { background-color: var(--bz-hover) !important; }

.fi-page-sub-navigation-tabs .fi-tabs-item .fi-icon,
.fi-tabs-segmented .fi-tabs-item .fi-icon { width: 1rem !important; height: 1rem !important; }

.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active,
.fi-tabs-segmented .fi-tabs-item.fi-active {
    background-color: var(--bz-ink) !important;
    box-shadow: none !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-icon,
.fi-tabs-segmented .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-segmented .fi-tabs-item.fi-active .fi-icon { color: #FFFFFF !important; }

.dark .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .fi-tabs-segmented .fi-tabs-item.fi-active .fi-tabs-item-label { color: #0E0C24 !important; }

/* Tighter rhythm between header, switcher and content */
.fi-page-main { row-gap: 1.25rem !important; }

/* ─── Record pages and forms ─────────────────────────────────────────────── */

/* Breadcrumbs: one line; the last crumb (List / View / Edit / Create) repeats the title, so it goes */
.fi-breadcrumbs-list { flex-wrap: nowrap !important; overflow: hidden; }
.fi-breadcrumbs-item { white-space: nowrap; min-width: 0; }
.fi-breadcrumbs-item:last-child { display: none !important; }
.fi-breadcrumbs-item-label { overflow: hidden; text-overflow: ellipsis; }

/* Record pages with their own tab bar (View · Edit · Invoices …): hide the section tabs above it,
   so there is one row of tabs, as in the reference */
.fi-page-main:has(.fi-tabs-segmented) > .fi-page-sub-navigation-tabs { display: none !important; }

/* Delete & co. in page headers: quiet secondary until hovered (confirm dialogs keep solid red) */
.fi-header .fi-btn.fi-color-danger:not(.fi-outlined) {
    background-color: var(--bz-surface) !important;
    color: #B42318 !important;
    box-shadow: inset 0 0 0 1px var(--bz-line-strong) !important;
}

.fi-header .fi-btn.fi-color-danger:not(.fi-outlined):hover {
    background-color: #FEF3F2 !important;
    box-shadow: inset 0 0 0 1px #FDA29B !important;
}

.fi-header .fi-btn.fi-color-danger:not(.fi-outlined) .fi-icon { color: inherit !important; }
.dark .fi-header .fi-btn.fi-color-danger:not(.fi-outlined) { color: #FDA29B !important; }

/* Cards: no rule under the title; the title sits close to its content */
.fi-section-has-header > .fi-section-content-ctn { border-top: 0 !important; }
.fi-section-has-header > .fi-section-content-ctn > .fi-section-content { padding-top: 0.25rem !important; }

/* Read-only fields: small muted label, ink value */
.fi-in-entry-label {
    color: var(--bz-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

.fi-in-entry-content-ctn { color: var(--bz-ink); }
.fi-in-text-item { color: var(--bz-ink); }

/* Grouped fields (Address, Account properties): hairline box like the cards */
.fi-fieldset {
    border-radius: var(--bz-radius-ctrl) !important;
    --tw-ring-color: var(--bz-line) !important;
    border-color: var(--bz-line) !important;
}

.fi-fieldset > legend { color: var(--bz-ink); font-size: 0.875rem; font-weight: 500; padding-inline: 6px; }

/* Field hints and helper text */
.fi-fo-field-wrp-helper-text, .fi-sc-text { color: var(--bz-muted); }

/* Bottom form actions: a little air above, aligned with the cards */
.fi-form-actions { padding-top: 0.25rem; }

/* Contained tabs inside a card (e.g. Order line · Other information): underline, flush to the card */
.fi-sc-tabs.fi-contained { border-radius: var(--bz-radius-card) !important; --tw-ring-color: var(--bz-line) !important; }
.fi-sc-tabs.fi-contained > .fi-tabs { padding-inline: 0.75rem !important; }

/* ─── Overlays ───────────────────────────────────────────────────────────── */

.fi-dropdown-panel {
    border-radius: 12px !important;
    box-shadow: var(--bz-shadow-pop) !important;
    --tw-ring-color: var(--bz-line) !important;
}

.fi-dropdown-list-item { border-radius: var(--bz-radius-sm) !important; }
.fi-dropdown-list-item-label { font-size: 0.875rem; }

.fi-modal-window { border-radius: 20px !important; }
.fi-modal-heading { font-weight: 500 !important; letter-spacing: -0.01em; }

.fi-no-notification { border-radius: 12px !important; }

/* ─── Home dashboard (plugins/bizeeos/core/resources/views/home/index.blade.php) ─── */

:root { --bz-track: #F1F1F4; }
.dark { --bz-track: rgba(255, 255, 255, 0.06); }

/* Series colours: hatched for the main series, soft tints for the rest */
.bz-c1 { background: repeating-linear-gradient(135deg, #5B3DF5 0 6px, #7559F7 6px 9px); }
.bz-c2 { background: #CBC1FF; }
.bz-c3 { background: repeating-linear-gradient(135deg, #22B8F0 0 6px, #4CC7F3 6px 9px); }
.bz-c4 { background: #BDEAFB; }
.bz-c5 { background: repeating-linear-gradient(135deg, #F79009 0 6px, #F9A63A 6px 9px); }
.bz-c6 { background: #E3E3EA; }

.bz-dash { display: grid; gap: 16px; }
.bz-dash-main, .bz-dash-side { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* Layout follows the width of the main column, not the screen (14" laptops, side column on) */
.bz-dash-main { container-type: inline-size; }

/* Side column only on wide screens; on laptops the main column gets the full width
   and the side cards sit underneath, side by side */
@media (min-width: 1440px) {
    .bz-dash { grid-template-columns: minmax(0, 1fr) 22rem; }
}

@media (max-width: 1439px) {
    .bz-dash-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}

.bz-card {
    background: var(--bz-surface);
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-radius-card);
    padding: 1.5rem;
    min-width: 0;
}

.bz-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.bz-card-title {
    margin: 0;
    color: var(--bz-ink);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.bz-caption { margin: 2px 0 0; color: var(--bz-muted); font-size: 0.78rem; }
.bz-strong { color: var(--bz-ink); font-weight: 500; }

.bz-hero {
    margin: 0;
    color: var(--bz-ink);
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.bz-figure {
    margin: 0 0 1rem;
    color: var(--bz-ink);
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.bz-trend { font-weight: 500; margin-left: 6px; }
.bz-trend.is-up { color: var(--bz-positive); }
.bz-trend.is-down { color: var(--bz-negative); }

.bz-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.bz-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--bz-line-strong);
    border-radius: var(--bz-radius-sm);
    color: var(--bz-text-2);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.bz-legend { display: flex; gap: 14px; color: var(--bz-text-2); font-size: 0.78rem; }
.bz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bz-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Sales overview: chart + balances in one card */
.bz-overview { display: grid; padding: 0; overflow: hidden; }
.bz-overview-chart { padding: 1.5rem; min-width: 0; }
.bz-overview-stats { display: grid; border-top: 1px solid var(--bz-line); }

@container (min-width: 720px) {
    .bz-overview { grid-template-columns: minmax(0, 1fr) 15rem; }
    .bz-overview-stats { border-top: 0; border-left: 1px solid var(--bz-line); }
}

.bz-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bz-line);
    transition: background-color var(--bz-transition);
}

.bz-stat:last-child { border-bottom: 0; }
a.bz-stat:hover { background: var(--bz-surface-2); }
.bz-stat-label { color: var(--bz-text-2); font-size: 0.8125rem; }
.bz-stat-value { color: var(--bz-ink); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bz-stat-note { color: var(--bz-muted); font-size: 0.75rem; }
.bz-stat-note.is-warn { color: #B54708; }

/* Bar chart: grey bars, the current (or hovered) month in colour with a tooltip */
.bz-bars { position: relative; height: 16rem; margin-top: 0.5rem; }

.bz-bars-grid {
    position: absolute;
    inset: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bz-bars-grid span { position: relative; border-top: 1px dashed var(--bz-line-strong); }

.bz-bars-grid em {
    position: absolute;
    top: -9px;
    left: 0;
    padding-right: 8px;
    background: var(--bz-surface);
    color: var(--bz-muted);
    font-size: 0.6875rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.bz-bars-cols {
    position: absolute;
    inset: 0 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.bz-bars-col { position: relative; display: flex; flex-direction: column; align-items: center; outline: none; }

.bz-bars-pair {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: calc(100% - 28px);
}

.bz-bar {
    flex: 1;
    max-width: 30px;
    border-radius: 8px 8px 4px 4px;
    background: var(--bz-track);
    transition: background-color var(--bz-transition);
}

.bz-bar-2 { background: color-mix(in srgb, var(--bz-track) 70%, var(--bz-surface)); }

.bz-bars-col.is-current .bz-bar-1,
.bz-bars-col:hover .bz-bar-1,
.bz-bars-col:focus-visible .bz-bar-1 { background: repeating-linear-gradient(135deg, #5B3DF5 0 6px, #7559F7 6px 9px); }

.bz-bars-col.is-current .bz-bar-2,
.bz-bars-col:hover .bz-bar-2,
.bz-bars-col:focus-visible .bz-bar-2 { background: repeating-linear-gradient(135deg, #22B8F0 0 6px, #4CC7F3 6px 9px); }

.bz-bars-label {
    display: flex;
    align-items: flex-end;
    height: 28px;
    color: var(--bz-muted);
    font-size: 0.75rem;
}

.bz-bars-col.is-current .bz-bars-label { color: var(--bz-ink); font-weight: 500; }

.bz-bars-tip {
    position: absolute;
    top: 4px;
    left: calc(50% + 34px);
    z-index: 2;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 11rem;
    padding: 10px 12px;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-radius-ctrl);
    background: var(--bz-surface);
    box-shadow: var(--bz-shadow-pop);
    font-size: 0.72rem;
    white-space: nowrap;
}

.bz-bars-col:nth-last-child(-n + 3) .bz-bars-tip { left: auto; right: calc(50% + 34px); }
.bz-bars-tip strong { color: var(--bz-muted); font-weight: 500; }
.bz-bars-tip span { display: flex; align-items: center; gap: 6px; color: var(--bz-text-2); }
.bz-bars-tip b { margin-left: auto; padding-left: 12px; color: var(--bz-ink); font-weight: 500; }

.bz-bars-col.is-current .bz-bars-tip,
.bz-bars-col:hover .bz-bars-tip,
.bz-bars-col:focus-visible .bz-bars-tip { display: flex; }

.bz-bars-cols:hover .bz-bars-col.is-current:not(:hover) .bz-bars-tip { display: none; }

.bz-bars-empty {
    position: absolute;
    top: 38%;
    left: calc(50% + 1.5rem);
    transform: translateX(-50%);
    width: max-content;
    max-width: 80%;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--bz-line);
    border-radius: 999px;
    background: var(--bz-surface);
    color: var(--bz-text-2);
    font-size: 0.8125rem;
    text-align: center;
}

/* Row 2 */
.bz-row-2, .bz-row-3 { display: grid; gap: 16px; }
@container (min-width: 640px) {
    .bz-row-2, .bz-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bz-row-3 > :last-child:nth-child(3) { grid-column: 1 / -1; }
}

@container (min-width: 900px) {
    .bz-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bz-row-3 > :last-child:nth-child(3) { grid-column: auto; }
}

.bz-progress {
    display: flex;
    height: 28px;
    overflow: hidden;
    border-radius: var(--bz-radius-sm);
    background: var(--bz-track);
}

.bz-progress-fill { height: 100%; border-radius: var(--bz-radius-sm); }
.bz-progress.is-thin { height: 8px; border-radius: 999px; }
.bz-progress.is-thin .bz-progress-fill { border-radius: 999px; }

.bz-progress-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--bz-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.bz-tip { display: flex; justify-content: space-between; gap: 16px; overflow: hidden; }
.bz-eyebrow { margin: 0 0 6px; color: var(--bz-muted); font-size: 0.75rem; font-weight: 500; }
.bz-tip-text { max-width: 36ch; margin: 6px 0 14px; color: var(--bz-text-2); font-size: 0.85rem; line-height: 1.5; }

.bz-link { display: inline-flex; align-items: center; gap: 6px; color: var(--bz-ink); font-size: 0.875rem; font-weight: 500; }
.bz-link:hover { color: var(--bz-accent-text); }

.bz-tip-art {
    display: grid;
    grid-template-columns: repeat(2, 22px);
    grid-auto-rows: 14px;
    gap: 4px;
    align-self: center;
    flex-shrink: 0;
}

.bz-tip-art span { border-radius: 4px; }

/* Row 3 */
.bz-segments { display: flex; gap: 4px; height: 28px; }
.bz-segments span { min-width: 6px; border-radius: 6px; }
.bz-segments.is-empty span { flex: 1; background: var(--bz-track); }

.bz-legend-list { margin: 1.125rem 0 0; padding: 0; list-style: none; }

.bz-legend-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    color: var(--bz-text-2);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.bz-legend-list li > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.bz-gauge { position: relative; max-width: 15rem; margin: 0.5rem auto 0; }
.bz-gauge svg { display: block; width: 100%; height: auto; }
.bz-gauge-value { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; }
.bz-gauge-value span { color: var(--bz-ink); font-size: 2.125rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.bz-gauge-value small { display: block; margin-top: 4px; color: var(--bz-muted); font-size: 0.72rem; }

.bz-footnote { margin: 1rem 0 0; color: var(--bz-text-2); font-size: 0.8rem; line-height: 1.5; }

.bz-goal { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.bz-goal + .bz-goal { border-top: 1px solid var(--bz-line); }
.bz-goal-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.bz-goal-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* Name keeps a readable width and breaks between words; when space runs out the amount drops below it */
.bz-goal-top .bz-strong { flex: 1 1 9rem; min-width: 0; overflow-wrap: break-word; }
.bz-goal-top > span:last-child { white-space: nowrap; }

/* Avatars (initials) */
.bz-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--bz-radius-ctrl);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.bz-avatar.is-round { width: 44px; height: 44px; border-radius: 999px; font-size: 0.8125rem; }
.bz-tone-0 { background: #F0EDFF; color: #4A2FE0; }
.bz-tone-1 { background: #E5F6FD; color: #0B7FAE; }
.bz-tone-2 { background: #FEF0DC; color: #B54708; }
.bz-tone-3 { background: #F1F1F4; color: #3F3D56; }

/* Side: quick actions */
.bz-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

.bz-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}

.bz-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 56px;
    aspect-ratio: 1;
    border: 1px solid var(--bz-line-strong);
    border-radius: 12px;
    background: var(--bz-surface);
    color: var(--bz-text-2);
    transition: border-color var(--bz-transition), color var(--bz-transition);
}

.bz-tile-icon svg { width: 22px; height: 22px; }
.bz-tile:hover .bz-tile-icon { border-color: var(--bz-ink); color: var(--bz-ink); }
.bz-tile-label { color: var(--bz-text-2); font-size: 0.75rem; line-height: 1.3; }

.bz-subhead { margin: 1.5rem 0 0.75rem; color: var(--bz-ink); font-size: 0.8125rem; font-weight: 500; }

.bz-people { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bz-person { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bz-person-name { max-width: 100%; overflow: hidden; color: var(--bz-text-2); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }

/* Side: activity list */
.bz-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.bz-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -8px;
    padding: 9px 8px;
    border-radius: var(--bz-radius-ctrl);
    transition: background-color var(--bz-transition);
}

a.bz-list-row[href]:hover { background: var(--bz-surface-2); }
.bz-list-main { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: 0.85rem; }
.bz-list-main .bz-strong, .bz-list-main .bz-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-list-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bz-amount { color: var(--bz-ink); font-size: 0.85rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bz-status { font-size: 0.7rem; }
.bz-status.is-positive { color: #079455; }
.bz-status.is-warning { color: #B54708; }
.bz-status.is-muted { color: var(--bz-muted); }

.bz-empty { margin: 0; padding: 6px 0; color: var(--bz-muted); font-size: 0.8125rem; line-height: 1.5; }

@media (max-width: 639px) {
    .bz-card { padding: 1.125rem; }
    .bz-overview-chart { padding: 1.125rem; }
    .bz-hero { font-size: 2rem; }
    .bz-card-head { flex-wrap: wrap; }
    .bz-head-side { align-items: flex-start; }
    .bz-bars { height: 13rem; }
    .bz-bars-cols { left: 2.5rem; gap: 6px; }
    .bz-bars-tip { display: none !important; }
}

/* ─── WhatsApp share button (record header) ──────────────────────────────── */

.bz-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--bz-radius-ctrl);
    background-color: #E7F8EE;
    color: #128C4B;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--bz-transition), color var(--bz-transition);
}

.bz-share-btn:hover, .bz-share-btn:focus-visible { background-color: #25D366; color: #FFFFFF; }
.dark .bz-share-btn { background-color: rgba(37, 211, 102, 0.15); color: #4ADE80; }

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-group-btn, .fi-sidebar-item-btn, .fi-tabs-item, .fi-ta-row,
    .bz-tool-btn, .bz-new-btn, .bz-quick-action, .bz-share-btn { transition: none; }
}

/* Home: first-run setup checklist (SetupChecklist) */
.bz-workspace-setup { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-color: var(--bz-accent, #5B4FE9); }
.bz-checklist .bz-card-head { align-items: flex-start; }
.bz-checklist-hide { color: var(--bz-muted); font-size: 0.8125rem; }
.bz-checklist .bz-progress { margin: 4px 0 18px; }
.bz-checklist-steps {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bz-checklist-step {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-radius-ctrl);
    background: var(--bz-surface);
}
.bz-checklist-step.is-done { background: var(--bz-surface-2); }
.bz-checklist-mark {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--bz-accent-soft);
    color: var(--bz-accent-text);
    font-size: 0.75rem;
    font-weight: 600;
}
.bz-checklist-step.is-done .bz-checklist-mark { background: var(--bz-positive); color: #fff; }
.bz-checklist-mark svg { width: 14px; height: 14px; }
.bz-checklist-body { min-width: 0; }
.bz-checklist-title { margin: 2px 0 0; color: var(--bz-ink); font-size: 0.875rem; font-weight: 500; }
.bz-checklist-step.is-done .bz-checklist-title { color: var(--bz-muted); text-decoration: line-through; text-decoration-color: var(--bz-line-strong); }
.bz-checklist-text { margin: 4px 0 8px; color: var(--bz-text-2); font-size: 0.8125rem; line-height: 1.45; }
.bz-checklist-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bz-checklist-links .bz-link { font-size: 0.8125rem; }

.bz-checklist .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Import data (Bizeeos\Imports) ─────────────────────────────────────── */
.bz-import { display: grid; gap: 16px; }
.bz-import-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bz-import-kind {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-radius-ctrl);
    background: var(--bz-surface);
    text-align: left;
    transition: border-color var(--bz-transition), box-shadow var(--bz-transition);
}
.bz-import-kind:hover { border-color: var(--bz-line-strong); }
.bz-import-kind.is-active { border-color: var(--bz-accent); box-shadow: var(--bz-focus); }
.bz-import-kind-title { color: var(--bz-ink); font-size: 0.9rem; font-weight: 600; }
.bz-import-kind-text { color: var(--bz-text-2); font-size: 0.8125rem; line-height: 1.45; }
.bz-import-steps { display: grid; gap: 16px; }
.bz-import-step-head { display: flex; align-items: flex-start; gap: 14px; }
.bz-import-step-head > div:nth-child(2) { flex: 1; min-width: 0; }
.bz-import-step-action { display: flex; flex-wrap: wrap; gap: 8px; align-self: center; }
.bz-import-step-no {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--bz-accent-soft); color: var(--bz-accent-text); font-size: 0.8125rem; font-weight: 600;
}
.bz-import-step-no.is-done { background: var(--bz-positive); color: #fff; }
.bz-import-notes { margin: 14px 0 0 42px; padding: 0; color: var(--bz-text-2); font-size: 0.8125rem; line-height: 1.55; list-style: disc; }
.bz-import-notes li { margin-bottom: 2px; }
.bz-import-columns { margin: 12px 0 0 42px; }
.bz-import-columns summary { cursor: pointer; color: var(--bz-ink); font-size: 0.8125rem; font-weight: 500; }
.bz-import-columns table, .bz-import-table table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 0.8125rem; }
.bz-import-columns th, .bz-import-table th { padding: 8px 10px; border-bottom: 1px solid var(--bz-line); color: var(--bz-muted); font-weight: 500; text-align: left; white-space: nowrap; }
.bz-import-columns td, .bz-import-table td { padding: 8px 10px; border-bottom: 1px solid var(--bz-line); color: var(--bz-text-2); vertical-align: top; }
.bz-import-columns td strong { color: var(--bz-ink); font-weight: 500; }
.bz-import-required { margin-left: 6px; color: var(--bz-accent-text); font-size: 0.75rem; }
.bz-import-options { display: block; margin-top: 2px; color: var(--bz-muted); }
.bz-import-example { color: var(--bz-muted); white-space: nowrap; }
.bz-import-upload { display: grid; gap: 12px; margin: 14px 0 0 42px; }
.bz-import-upload-actions { display: flex; }
.bz-import-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 42px; }
.bz-import-count { padding: 6px 12px; border-radius: 999px; background: var(--bz-surface-2); color: var(--bz-text-2); font-size: 0.8125rem; }
.bz-import-count b { color: var(--bz-ink); font-weight: 600; }
.bz-import-count.is-error b { color: var(--bz-negative); }
.bz-import-ignored { margin: 10px 0 0 42px; color: var(--bz-muted); font-size: 0.8125rem; }
.bz-import-step > .bz-import-table, .bz-import-step > .bz-caption { margin-left: 42px; }
.bz-import-table { overflow-x: auto; }
.bz-import-table tr.is-error td { background: color-mix(in srgb, var(--bz-negative) 5%, transparent); }
.bz-import-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.bz-import-line { color: var(--bz-muted); font-variant-numeric: tabular-nums; width: 60px; }
.bz-import-file { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-import-pill { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.bz-import-pill.is-create { background: color-mix(in srgb, var(--bz-positive) 14%, transparent); color: #067647; }
.bz-import-pill.is-update { background: var(--bz-accent-soft); color: var(--bz-accent-text); }
.bz-import-pill.is-error { background: color-mix(in srgb, var(--bz-negative) 12%, transparent); color: #B42318; }
.bz-import-msg { display: block; margin-top: 3px; color: var(--bz-muted); }
.bz-import-msg.is-error { color: #B42318; }
@media (max-width: 700px) {
    .bz-import-step-head { flex-wrap: wrap; }
    .bz-import-notes, .bz-import-columns, .bz-import-upload, .bz-import-counts, .bz-import-ignored, .bz-import-step > .bz-import-table, .bz-import-step > .bz-caption { margin-left: 0; }
}

/* Billing › Customers › Overdue (Bizeeos\Reminders) */
.bz-overdue-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bz-overdue-stat { display: grid; gap: 2px; }
.bz-overdue-figure { margin: 2px 0; color: var(--bz-ink); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bz-overdue-figure.is-late { color: #B42318; }
.bz-overdue-warning { margin: 0; padding: 10px 14px; border-radius: var(--bz-radius-ctrl); background: color-mix(in srgb, #F79009 12%, var(--bz-surface)); color: #93370D; font-size: 0.8125rem; }

/* Finance › GST (Bizeeos\Gst) */
.bz-gst-period { display: flex; flex-wrap: wrap; gap: 12px; }
.bz-gst-period label { display: grid; gap: 4px; color: var(--bz-muted); font-size: 0.75rem; }
.bz-gst-period select {
    height: 36px; min-width: 200px; padding: 0 30px 0 10px; border: 1px solid var(--bz-line-strong);
    border-radius: var(--bz-radius-ctrl); background-color: var(--bz-surface); color: var(--bz-ink); font-size: 0.875rem;
}
.bz-gst-notice { margin: 0; padding: 10px 14px; border-radius: var(--bz-radius-ctrl); background: var(--bz-accent-soft); color: var(--bz-text-2); font-size: 0.8125rem; line-height: 1.5; }
.bz-gst-notice.is-warning { background: color-mix(in srgb, #F79009 12%, var(--bz-surface)); color: #93370D; }
.bz-gst-warnings { margin: 10px 0 0 18px; padding: 0; color: var(--bz-text-2); font-size: 0.8125rem; line-height: 1.55; list-style: disc; }
.bz-gst-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

/* People › Payroll (Bizeeos\Payroll) */
.bz-pay-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bz-pay-status.is-draft { color: #B54708; }
.bz-pay-status.is-approved { color: var(--bz-accent-text); }
.bz-pay-status.is-paid { color: #067647; }
.bz-pay-input input { max-width: 110px; margin-left: auto; text-align: right; }
.bz-pay-breakup { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 10px 14px; border-radius: var(--bz-radius-ctrl); background: var(--bz-surface-2); color: var(--bz-text-2); font-size: 0.8125rem; }
.bz-pay-breakup b { color: var(--bz-ink); font-weight: 600; }
.bz-pay-warning { margin: 6px 0 0; color: #B42318; font-size: 0.8125rem; }

/* ─── Card lists (tables with contentGrid: employees, departments, contacts, candidates, projects…) ───
   Cards size themselves (no fixed 4 columns), long text truncates instead of leaving the card, and the
   actions sit in a footer that drops to icons when a card is narrow (labels stay for screen readers). */
.fi-ta-content-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
    gap: 12px;
}
.fi-ta-content-grid > .fi-ta-record {
    container-type: inline-size;
    display: flex;
    min-width: 0;
    overflow: hidden;
}
.fi-ta-content-grid .fi-ta-record-content-ctn {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.fi-ta-content-grid .fi-ta-record-content,
.fi-ta-content-grid .fi-ta-record-content .fi-grid-col,
.fi-ta-content-grid .fi-ta-stack,
.fi-ta-content-grid .fi-ta-col { min-width: 0; max-width: 100%; }
.fi-ta-content-grid .fi-ta-text { max-width: 100%; }
.fi-ta-content-grid .fi-ta-text-item { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.fi-ta-content-grid .fi-ta-text-item > :not(.fi-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fi-ta-content-grid .fi-ta-text-item > .fi-icon { flex: none; color: var(--bz-muted); }
.fi-ta-content-grid .fi-ta-image:empty { display: none; }
.fi-ta-content-grid .fi-ta-actions {
    flex-wrap: wrap !important;
    gap: 2px 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--bz-line);
}
@container (max-width: 330px) {
    .fi-ta-content-grid .fi-ta-actions .fi-link-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .fi-ta-content-grid .fi-ta-actions .fi-link { padding: 6px; border-radius: 8px; }
    .fi-ta-content-grid .fi-ta-actions .fi-link:hover { background: var(--bz-hover); }
}

/* Saved-view tabs with many views (tasks, contacts, equipment…): on laptop widths the icons go (labels
   say enough) and the right edge fades, so a bar that scrolls sideways shows there is more. */
.fi-tabs.w-full {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
    scrollbar-width: none;
}
.fi-tabs.w-full::-webkit-scrollbar { display: none; }
@media (max-width: 1439px) {
    .fi-tabs.w-full .fi-tabs-item > .fi-icon { display: none; }
    .fi-tabs.w-full .fi-tabs-item { padding-inline: 0.7rem !important; }
}

/* Code to copy (website form embed code): keep line breaks, wrap long URLs. */
.bz-code-block .fi-in-text-item,
.bz-code-block .fi-in-text {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12.5px;
  line-height: 1.6;
}
.bz-code-block .fi-in-text-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bz-canvas, #F4F4F6);
}

/* Small read-only table inside a record page section (e.g. invoices a recurring schedule created). */
.bz-mini-table-wrap { overflow-x: auto; }
.bz-mini-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bz-mini-table th { padding: 8px 12px 8px 0; text-align: start; font-size: 12px; font-weight: 500; color: var(--bz-muted, #8A889C); border-bottom: 1px solid var(--bz-line, #ECECF1); }
.bz-mini-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--bz-line, #ECECF1); vertical-align: top; }
.bz-mini-table tr:last-child td { border-bottom: 0; }
.bz-mini-table .is-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bz-mini-table .is-nowrap { white-space: nowrap; }
.bz-mini-table .bz-link { font-weight: 500; color: var(--bz-accent, #5B3DF5); }
.bz-mini-table .bz-link:hover { text-decoration: underline; }
.bz-mini-table-error { display: block; margin-top: 2px; font-size: 12px; color: #B42318; }