/* Workspace composition. Metronic remains the palette and component foundation;
   these shared layers give every module the same contemporary BIZS identity. */
.bz-workspace-frame {
    background: var(--bz-color-canvas);
    color: var(--bz-color-fg);
}
.bz-workspace-panel { background: var(--bz-color-canvas); min-width: 0; }
.bz-workspace-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--bz-space-3);
    padding: var(--bz-space-3) clamp(var(--bz-space-3), 2vw, var(--bz-space-6));
    background: var(--bz-color-surface);
    border-bottom: 1px solid var(--bz-color-border);
    min-height: var(--bz-workspace-bar-height);
    flex: none;
}
.bz-workspace-location { flex: 1 1 10rem; min-width: 0; }
.bz-workspace-location .bz-shell-title { display: none; }
.bz-workspace-bar > .bz-mobile-header, .bz-mobile-breadcrumb { display: none; }
.bz-workspace-tools { display: flex; align-items: center; gap: var(--bz-space-2); flex-wrap: wrap; max-width: 100%; }
.bz-workspace-search, .bz-workspace-assistant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bz-space-2);
    min-height: 38px;
    padding: 0 var(--bz-space-3);
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-md);
    background: var(--bz-color-wash);
    color: var(--bz-color-fg-muted);
    font-size: var(--bz-fs-sm);
    cursor: pointer;
    transition: background var(--bz-duration-fast) var(--bz-ease), border-color var(--bz-duration-fast) var(--bz-ease);
}
.bz-workspace-search:hover { border-color: var(--bz-color-accent); color: var(--bz-color-fg); }
.bz-workspace-search kbd { font: inherit; font-size: 10px; padding: 2px 5px; background: var(--bz-color-surface); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-sm); }
.bz-workspace-assistant { color: var(--bz-color-accent-text); background: color-mix(in srgb, var(--bz-color-accent) 9%, var(--bz-color-surface)); border-color: color-mix(in srgb, var(--bz-color-accent) 20%, var(--bz-color-border)); }
.bz-workspace-assistant:hover { background: color-mix(in srgb, var(--bz-color-accent) 15%, var(--bz-color-surface)); }
.bz-shell-content { padding-top: var(--bz-space-5); }
.bz-shell-main { background: transparent; }
.bz-workspace-panel .footer { opacity: .8; }

/* Navigation is a framed rail, with a distinct active route and calm module hierarchy. */
#sidebar {
    background-color: var(--background);
    background-image: linear-gradient(165deg, color-mix(in oklab, var(--primary) 12%, var(--background)), var(--background) 65%);
    border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
}
#sidebar_header { padding-block: var(--bz-space-2); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); }
#sidebar_menu { margin-block: var(--bz-space-3); }
#sidebar :is(.kt-menu-link, .bz-nav-leaf) { border-radius: var(--bz-radius-md); transition: background var(--bz-duration-fast) var(--bz-ease), color var(--bz-duration-fast) var(--bz-ease); }
#sidebar .kt-menu-link { min-height: 36px; }
#sidebar .kt-menu-title { font-size: var(--bz-fs-sm); }
#sidebar .kt-menu-icon { font-size: 18px; }
#sidebar :is(.kt-menu-link, .bz-nav-leaf):hover { background-color: color-mix(in srgb, var(--foreground) 8%, transparent); }
#sidebar :is(.kt-menu-link.active, .bz-nav-leaf.active) {
    background: color-mix(in srgb, var(--primary) 22%, var(--background));
    box-shadow: inset 3px 0 0 var(--primary);
}
#sidebar .kt-menu-link.active :is(.kt-menu-title, .kt-menu-icon) { color: var(--foreground); }
#sidebar .kt-menu-item.here > .kt-menu-label { background: color-mix(in srgb, var(--foreground) 5%, transparent); border-radius: var(--bz-radius-md); }
#sidebar .kt-menu-label + .kt-menu-accordion { padding-block-start: var(--bz-space-2); }
/* Paint the whole leaf, including its separate favorite action, without a second pill on the link. */
#sidebar .bz-nav-leaf > .kt-menu-link { background: transparent; box-shadow: none; }
#sidebar .bz-ai-entry { min-width: 0; flex: 1; background: color-mix(in srgb, var(--primary) 24%, var(--background)); border-color: color-mix(in srgb, var(--primary) 35%, transparent); border-radius: var(--bz-radius-md); }

/* Crisp content surfaces and a stronger reading rhythm across all module dashboards/lists. */
.bz-page-card, .bz-dash-section, .bz-dash-kpi, .bz-dash-nav-card {
    box-shadow: var(--bz-shadow-md);
    border-color: color-mix(in srgb, var(--bz-color-border) 75%, var(--bz-color-surface));
}
.bz-page-card-head, .bz-dash-section-head { background: var(--bz-color-wash); }
.bz-dash-section-head { gap: var(--bz-space-3); flex-wrap: wrap; }
.bz-dash-section-title { font-size: var(--bz-fs-lg); letter-spacing: -.02em; }
.bz-dash-kpi { position: relative; overflow: hidden; gap: var(--bz-space-1); }
.bz-dash-kpi::after { content: ''; position: absolute; top: 0; inset-inline: var(--bz-space-5); height: 3px; border-radius: 0 0 var(--bz-radius-pill) var(--bz-radius-pill); background: color-mix(in srgb, var(--bz-color-accent) 40%, transparent); }
.bz-dash-kpi-value { font-size: var(--bz-fs-3xl); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bz-dash-kpi-label { text-transform: none; letter-spacing: 0; font-size: var(--bz-fs-sm); }
.bz-dash-kpi-icon { border-radius: var(--bz-radius-md); }
.bz-dash-nav-card:hover { box-shadow: var(--bz-shadow-lg); transform: translateY(-4px); text-decoration: none; }
.bz-toolbar, .bz-filter-bar { gap: var(--bz-space-3); }
.bz-tabs {
    background: var(--bz-color-surface);
    padding: var(--bz-space-1);
    gap: var(--bz-space-1);
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-lg);
    width: fit-content;
    max-width: 100%;
    box-shadow: var(--bz-shadow-sm);
}
.bz-tabs a { border: 0; border-radius: var(--bz-radius-md); padding-inline: var(--bz-space-4); }
.bz-tabs a:is(.active, [aria-current="page"]) { background: color-mix(in srgb, var(--bz-color-accent) 12%, var(--bz-color-surface)); color: var(--bz-color-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bz-color-accent) 18%, transparent); }

/* Contextual navigation and operational dashboards share the same surfaces on every page. */
.bz-module-menu { position: relative; flex: none; }
.bz-module-menu > summary { display: inline-flex; align-items: center; gap: var(--bz-space-2); min-height: 38px; padding: var(--bz-space-2) var(--bz-space-3); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-md); background: var(--bz-color-wash); color: var(--bz-color-fg); font-size: var(--bz-fs-sm); cursor: pointer; list-style: none; }
.bz-module-menu > summary::-webkit-details-marker { display: none; }
.bz-module-menu[open] > summary { border-color: var(--bz-color-accent); color: var(--bz-color-accent-text); }
.bz-module-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + var(--bz-space-2)); z-index: 50; width: min(360px, calc(100vw - 24px)); max-height: 65dvh; display: flex; flex-direction: column; padding: var(--bz-space-3); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-lg); background: var(--bz-color-popover); box-shadow: var(--bz-shadow-lg); }
.bz-module-menu-panel > .bz-search-input { flex: none; }
.bz-module-menu-links { overflow: auto; min-height: 0; margin-top: var(--bz-space-2); overscroll-behavior: contain; }
.bz-module-menu-links a { display: flex; align-items: center; gap: var(--bz-space-3); min-height: 40px; padding: var(--bz-space-2) var(--bz-space-3); border-radius: var(--bz-radius-md); color: var(--bz-color-fg); text-decoration: none; }
.bz-module-menu-links a:hover, .bz-module-menu-links a[aria-current="page"] { background: var(--bz-color-wash); color: var(--bz-color-accent-text); }
.bz-module-menu-links a > i { flex: none; color: var(--bz-color-accent-text); }
.bz-module-workspace-body { padding: var(--bz-space-4) var(--bz-space-5); }
.bz-module-workspace-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--bz-space-3); }
.bz-module-workspace-links a { display: flex; align-items: center; gap: var(--bz-space-3); padding: var(--bz-space-3); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-md); background: var(--bz-color-wash); color: var(--bz-color-fg); text-decoration: none; min-width: 0; }
.bz-module-workspace-links a > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bz-module-workspace-links a > i { color: var(--bz-color-accent-text); flex: none; }
.bz-module-workspace-links a:hover { border-color: var(--bz-color-accent); background: var(--bz-color-surface-2); }
.bz-module-workspace-group { margin-top: var(--bz-space-4); border-top: 1px solid var(--bz-color-border); padding-top: var(--bz-space-2); }
.bz-module-workspace-group > summary { padding-block: var(--bz-space-2); cursor: pointer; color: var(--bz-color-fg-muted); font-weight: var(--bz-fw-medium); }
.bz-module-workspace-group[open] > summary { margin-bottom: var(--bz-space-2); }
.bz-breakdown-body { padding: var(--bz-space-4) var(--bz-space-5); }
.bz-breakdown-track { display: flex; overflow: hidden; gap: 3px; border-radius: var(--bz-radius-pill); height: 14px; margin-block: var(--bz-space-3) var(--bz-space-4); background: var(--bz-color-surface-2); }
.bz-breakdown-track > span, .bz-breakdown-dot { background: currentColor; }
.bz-breakdown-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--bz-space-2); }
.bz-breakdown-item { display: flex; align-items: center; gap: var(--bz-space-2); padding: var(--bz-space-3); min-width: 0; border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-md); color: var(--bz-color-fg); text-decoration: none; }
.bz-breakdown-item > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bz-breakdown-item:hover { background: var(--bz-color-wash); border-color: var(--bz-color-accent); }
.bz-breakdown-dot { width: 8px; height: 8px; border-radius: var(--bz-radius-pill); flex: none; }
a:is(.bz-dash-kpi, .bz-card) { position: relative; text-decoration: none; color: var(--bz-color-fg); }
a:is(.bz-dash-kpi, .bz-card)::before { content: '\2197'; position: absolute; inset-inline-end: var(--bz-space-4); top: var(--bz-space-4); color: var(--bz-color-fg-subtle); font-size: var(--bz-fs-lg); }
a:is(.bz-dash-kpi, .bz-card):hover { border-color: color-mix(in srgb, var(--bz-color-accent) 45%, var(--bz-color-border)); }
.bz-dash-skeleton > span { height: 14px; border-radius: var(--bz-radius-sm); background: var(--bz-color-surface-2); }
.bz-dash-skeleton > span:first-child { width: 42px; height: 42px; }
.bz-dash-skeleton > span:nth-child(2) { width: 45%; height: 32px; margin-block: var(--bz-space-3); }
.bz-dash-skeleton > span:last-child { width: 70%; }
.bz-dash-table-scroll { overflow: auto; max-width: 100%; overscroll-behavior-inline: contain; }
.bz-dash-table-scroll .bz-dash-table { min-width: 540px; }
.bz-dash-table td { overflow-wrap: anywhere; }
.bz-dash-table tbody tr:focus-within td { background: var(--bz-color-wash); }
.bz-dashboard .bz-dash-kpis { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.bz-toolbar:not(.bz-grid-toolbar), .bz-filter-bar { padding: var(--bz-space-3); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-lg); background: var(--bz-color-surface); margin-bottom: var(--bz-space-4); }
.bz-page-card > .bz-filter-bar { border: 0; border-bottom: 1px solid var(--bz-color-border); border-radius: 0; }
@media (pointer: coarse) {
    .bz-module-menu > summary, .bz-module-menu-links a, .bz-module-workspace-group > summary { min-height: 44px; }
    .bz-dash-table td a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 640px) {
    .bz-module-menu > summary { min-width: 44px; justify-content: center; padding-inline: var(--bz-space-2); }
    .bz-module-menu > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .bz-module-menu > summary > i:last-child { display: none; }
    .bz-dashboard .bz-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bz-dashboard .bz-dash-kpis > .bz-dash-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .bz-module-workspace-body, .bz-breakdown-body { padding: var(--bz-space-3); }
    a:is(.bz-dash-kpi, .bz-card)::before { inset-inline-end: var(--bz-space-2); top: var(--bz-space-2); }
}

/* Motion lives on interactive surfaces and entrances, leaving data updates and typing stable. */
.bz-workspace-tools button, .bz-dash-kpi, .bz-bottom-nav-item, .home-create-btn { transition: transform var(--bz-duration-base) var(--bz-ease), box-shadow var(--bz-duration-base) var(--bz-ease), background var(--bz-duration-base) var(--bz-ease); }
.bz-workspace-tools button:active:not(:disabled) { transform: scale(.97); }
.dxbl-modal .dxbl-modal-content { animation: bz-workspace-dialog var(--bz-duration-slow) var(--bz-ease-drawer); }
@keyframes bz-workspace-dialog { from { opacity: .4; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (hover: hover) {
    .bz-dash-kpi:hover { transform: translateY(-3px); box-shadow: var(--bz-shadow-lg); }
}

@media (min-width: 1024px) {
    #sidebar { top: var(--bz-space-3); bottom: var(--bz-space-3); inset-inline-start: var(--bz-space-3); border-radius: var(--bz-radius-xl); box-shadow: var(--bz-shadow-lg); }
    .bz-workspace-panel { margin: var(--bz-space-3); margin-inline-start: calc(var(--sidebar-width) + var(--bz-space-5)); border-radius: var(--bz-radius-xl); overflow: clip; }
    .bz-workspace-bar { border-radius: var(--bz-radius-xl) var(--bz-radius-xl) 0 0; }
}
@media (min-width: 1024px) and (max-width: 1399px) {
    .bz-workspace-search span, .bz-workspace-assistant span { display: none; }
}
@media (max-width: 1023.98px) {
    .bz-workspace-frame {
        --bz-workspace-bar-height: 0px;
        --bz-workspace-height: calc(100dvh - var(--header-height) - var(--bz-space-4) - var(--bz-mobile-nav-h) - var(--bz-space-6) - env(safe-area-inset-bottom, 0px));
    }
    .bz-workspace-bar {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 10;
        height: var(--header-height);
        min-height: var(--header-height);
        flex-wrap: nowrap;
        gap: var(--bz-space-2);
        padding: var(--bz-space-2) var(--bz-space-3);
        background: linear-gradient(110deg, var(--bz-color-hero), var(--bz-color-hero-end));
        box-shadow: var(--bz-shadow-md);
    }
    .bz-workspace-bar > .bz-mobile-header { display: flex; align-items: center; gap: var(--bz-space-2); flex: 1; min-width: 0; }
    .bz-mobile-header .bz-mobile-nav-toggle { flex: none; margin-inline-start: 0; }
    .bz-mobile-header .brand { min-width: 0; min-height: 44px; overflow: hidden; }
    .bz-mobile-header .brand strong { max-width: 100%; }
    .bz-mobile-header .brand-logo { max-width: 48px; object-fit: contain; flex: none; }
    .bz-workspace-location { display: none; }
    .bz-workspace-tools { flex: none; flex-wrap: nowrap; gap: var(--bz-space-1); }
    .bz-workspace-bar .bz-workspace-tools :is(.bz-timer-chip, .bz-timer-action) {
        color: var(--bz-color-accent-fg);
        background: color-mix(in srgb, var(--bz-color-accent-fg) 12%, transparent);
        border-color: color-mix(in srgb, var(--bz-color-accent-fg) 22%, transparent);
    }
    .bz-workspace-bar .bz-workspace-tools .bz-bell-trigger { color: var(--bz-color-accent-fg); width: 44px; height: 44px; }
    .bz-workspace-bar .bz-workspace-tools .bz-timer-action :is(i, svg) { color: inherit; }
    .bz-workspace-bar .bz-workspace-tools :is(.bz-bell-trigger, .bz-timer-chip, .bz-timer-action):hover { background: color-mix(in srgb, var(--bz-color-accent-fg) 20%, transparent); }
    .bz-workspace-bar :is(button, summary, .brand):focus-visible { outline: 2px solid var(--bz-color-accent-fg); outline-offset: -2px; }
    .bz-mobile-breadcrumb { display: block; padding: var(--bz-space-2) clamp(var(--bz-space-3), 2vw, var(--bz-space-6)); border-bottom: 1px solid var(--bz-color-border); background: var(--bz-color-surface); }
    .bz-workspace-search, .bz-workspace-assistant { display: none; }
    .bz-shell-content { padding-top: var(--bz-space-4); }
    .bz-bottom-nav { inset-inline: var(--bz-space-2); bottom: max(var(--bz-space-2), env(safe-area-inset-bottom, 0px)); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-xl); padding: var(--bz-space-1); box-shadow: var(--bz-shadow-lg); }
    .bz-bottom-nav-item { border-radius: var(--bz-radius-lg); }
    .bz-bottom-nav-item.is-active { color: var(--bz-color-accent-text); background: color-mix(in srgb, var(--bz-color-accent) 12%, var(--bz-color-surface)); }
    #scrollable_content { padding-bottom: calc(var(--bz-mobile-nav-h) + var(--bz-space-5) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
    .bz-workspace-bar:has([data-testid="shell-timer-resume"]) .brand { display: none; }
}
@media (pointer: coarse) {
    .bz-workspace-tools button { min-height: 44px; }
    #sidebar .kt-menu-link, #sidebar .bz-nav-chevron, #sidebar .nav-fav { min-height: 44px; }
    #sidebar .bz-nav-chevron, #sidebar .nav-fav { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .dxbl-modal .dxbl-modal-content { animation: none; }
    .bz-workspace-tools button, .bz-dash-kpi, .bz-bottom-nav-item, .home-create-btn, .bz-dash-nav-card { transition: none; }
    .bz-workspace-tools button:active, .bz-dash-kpi:hover, .bz-dash-nav-card:hover { transform: none; }
}

/* The count, its context and destination stay together. */
.bz-dashboard-attention { display: flex; align-items: center; gap: var(--bz-space-3); padding: var(--bz-space-4) var(--bz-space-5); color: var(--bz-color-fg); text-decoration: none; }
.bz-dashboard-attention > span:nth-child(2) { flex: 1; min-width: 0; }
.bz-dashboard-attention:hover { border-color: var(--bz-color-accent); background: var(--bz-color-wash); }
.bz-dash-note { padding: var(--bz-space-4) var(--bz-space-5); color: var(--bz-color-fg-muted); }
.bz-dashboard .bz-card, .bz-dashboard .bz-dash-kpi { position: relative; }
.bz-summary-cards > a.bz-card { position: relative; color: var(--bz-color-fg); text-decoration: none; }
.bz-summary-cards > a.bz-card:hover { border-color: var(--bz-color-accent); }
.bz-dash-table-scroll:focus-visible { outline: 2px solid var(--bz-color-accent); outline-offset: -2px; }