/*
 * The console's look: sidebar, top bar and the deposit desk.
 * Light mode only: the console's dark mode keeps Filament's own look.
 * Served as a panel asset (public/css/app/admin-console.css), versioned by
 * AppServiceProvider::stylesheetVersion(), never inlined into components.
 */

:root {
    --tc-ink: #111827;
    --tc-body: #4b5563;
    --tc-muted: #6b7280;
    --tc-line: #eceef3;
    --tc-page: #f7f8fc;
    --tc-brand: #4f46e5;
    --tc-brand-strong: #4338ca;
    --tc-brand-tint: #eef0ff;
}

/* ---------------------------------------------------------------- shell */

html:not(.dark) .fi-body { background: var(--tc-page); }

html:not(.dark) .fi-topbar {
    background: #fff;
    border-bottom: 1px solid var(--tc-line);
    box-shadow: none;
    min-height: 4rem;
}

html:not(.dark) .fi-topbar .fi-global-search-field .fi-input-wrp {
    border-radius: .6rem;
    min-width: 15.5rem;
    background: #fff;
    box-shadow: 0 0 0 1px var(--tc-line);
}

/* The bell's count, red as the mock has it. */
html:not(.dark) .fi-topbar .fi-icon-btn .fi-badge,
html:not(.dark) .fi-topbar .fi-icon-btn-badge-ctn .fi-badge {
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 2px #fff;
}

/* The signed-in person's name and a chevron beside the avatar (set in <head>). */
html:not(.dark) .fi-topbar .fi-user-menu-trigger { display: inline-flex; align-items: center; gap: .6rem; }
html:not(.dark) .fi-topbar .fi-user-menu-trigger::after {
    content: var(--tc-user-name, "");
    font-size: .9rem;
    font-weight: 600;
    color: var(--tc-ink);
    padding-inline-end: 1.1rem;
    background: no-repeat right center / .8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
html:not(.dark) .fi-topbar .fi-user-menu-trigger .fi-avatar { background: var(--tc-brand); color: #fff; }

/* ---------------------------------------------------------------- sidebar */

html:not(.dark) .fi-sidebar { background: #fff; border-inline-end: 1px solid var(--tc-line); }
html:not(.dark) .fi-sidebar-nav { padding: 1rem .85rem 2rem; row-gap: 1.1rem; }
html:not(.dark) .fi-sidebar-nav-groups { row-gap: 1.25rem; }
/* The menu search (sidebar-search.blade.php): sticky at the top of the menu. */
.tc-navsearch { position: sticky; top: -1rem; z-index: 5; margin: -1rem -.85rem 0; padding: 1rem .85rem .6rem; background: #fff; }
.dark .tc-navsearch { background: var(--color-gray-900, #111827); }
.tc-navsearch-box { display: flex; align-items: center; gap: .5rem; border: 1px solid #e5e7eb; border-radius: .65rem; background: #f9fafb; padding: .45rem .6rem; cursor: text; transition: border-color .15s, box-shadow .15s, background .15s; }
.dark .tc-navsearch-box { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .05); }
.tc-navsearch-box:focus-within { border-color: var(--tc-brand, #4f46e5); background: #fff; box-shadow: 0 0 0 3px rgb(79 70 229 / .12); }
.dark .tc-navsearch-box:focus-within { background: rgb(255 255 255 / .08); }
.tc-navsearch-icon { width: 1rem; height: 1rem; flex: none; color: #9ca3af; }
.tc-navsearch-box input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; font-size: .85rem; color: inherit; outline: none; box-shadow: none; }
.tc-navsearch-box input:focus { outline: none; box-shadow: none; }
.tc-navsearch-box input::-webkit-search-cancel-button { cursor: pointer; }
.tc-navsearch-kbd { flex: none; border: 1px solid #e5e7eb; border-radius: .35rem; padding: 0 .35rem; font-size: .7rem; line-height: 1.25rem; color: #9ca3af; background: #fff; font-family: inherit; }
.dark .tc-navsearch-kbd { border-color: rgb(255 255 255 / .1); background: transparent; }
.tc-navsearch-empty { margin: .5rem .2rem 0; font-size: .78rem; color: #9ca3af; }
.tc-navsearch-hide { display: none !important; }


html:not(.dark) .fi-sidebar-group-btn { padding: .4rem .45rem .4rem .7rem; column-gap: .7rem; }
html:not(.dark) .fi-sidebar-group-label { font-size: .875rem; font-weight: 500; color: #374151; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.dark) .fi-sidebar-group-btn > .fi-icon,
html:not(.dark) .fi-sidebar-group-btn > svg { color: var(--tc-muted); width: 1.3rem; height: 1.3rem; }
html:not(.dark) .fi-sidebar-group-collapse-btn { color: #9ca3af; }

/* Groups whose pages carry their own icons get a header icon from here. */
html:not(.dark) .fi-sidebar-group[data-group-label] > .fi-sidebar-group-btn::before {
    content: none;
}
html:not(.dark) .fi-sidebar-group[data-group-label="Financial Management"] > .fi-sidebar-group-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z%22/%3E%3C/svg%3E"); }
html:not(.dark) .fi-sidebar-group[data-group-label="B2B Management"] > .fi-sidebar-group-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z%22/%3E%3C/svg%3E"); }
html:not(.dark) .fi-sidebar-group[data-group-label="B2C (Online store) Management"] > .fi-sidebar-group-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z%22/%3E%3C/svg%3E"); }
html:not(.dark) .fi-sidebar-group[data-group-label="API Management"] > .fi-sidebar-group-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z%22/%3E%3C/svg%3E"); }
html:not(.dark) .fi-sidebar-group[data-group-label="Accounts"] > .fi-sidebar-group-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z%22/%3E%3C/svg%3E"); }
html:not(.dark) .fi-sidebar-group[data-group-label="Platform"] > .fi-sidebar-group-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z%22/%3E%3C/svg%3E"); }
html:not(.dark) .fi-sidebar-group[data-group-label="Rules"] > .fi-sidebar-group-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z%22/%3E%3C/svg%3E"); }
html:not(.dark) .fi-sidebar-group[data-group-label="Financial Management"] > .fi-sidebar-group-btn::before,
html:not(.dark) .fi-sidebar-group[data-group-label="B2B Management"] > .fi-sidebar-group-btn::before,
html:not(.dark) .fi-sidebar-group[data-group-label="B2C (Online store) Management"] > .fi-sidebar-group-btn::before,
html:not(.dark) .fi-sidebar-group[data-group-label="API Management"] > .fi-sidebar-group-btn::before,
html:not(.dark) .fi-sidebar-group[data-group-label="Accounts"] > .fi-sidebar-group-btn::before,
html:not(.dark) .fi-sidebar-group[data-group-label="Platform"] > .fi-sidebar-group-btn::before,
html:not(.dark) .fi-sidebar-group[data-group-label="Rules"] > .fi-sidebar-group-btn::before {
    content: "";
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    background-color: var(--tc-muted);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}

html:not(.dark) .fi-sidebar-group-items { row-gap: .15rem; margin-top: .25rem; }

html:not(.dark) .fi-sidebar-item-btn {
    padding: .55rem .75rem;
    border-radius: .6rem;
    column-gap: .8rem;
}
html:not(.dark) .fi-sidebar-item-label { font-size: .875rem; font-weight: 500; color: var(--tc-body); }
html:not(.dark) .fi-sidebar-item-icon { color: var(--tc-muted); width: 1.2rem; height: 1.2rem; }
html:not(.dark) .fi-sidebar-item-btn:hover { background: #f5f6fb; }

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--tc-brand-tint); }
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--tc-brand); font-weight: 600; }
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--tc-brand); }

/* Bookings: its pages as a dotted list under the group, no rail. */
html:not(.dark) .fi-sidebar-item-grouped-border-part-not-first,
html:not(.dark) .fi-sidebar-item-grouped-border-part-not-last { display: none; }
html:not(.dark) .fi-sidebar-item-grouped-border-part {
    width: .3rem; height: .3rem; border-radius: 999px; background: #9ca3af;
}
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part { background: var(--tc-brand); }

/* Counts: small rounded pills. */
html:not(.dark) .fi-sidebar-item-badge-ctn .fi-badge {
    border-radius: 999px;
    min-width: 1.4rem;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    padding: .05rem .45rem;
}

/* ---------------------------------------------------------------- deposit desk */

html:not(.dark) .dep-page .fi-header-heading { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; color: var(--tc-ink); }
html:not(.dark) .dep-page .fi-header-subheading { color: var(--tc-body); font-size: .95rem; margin-top: .25rem; }
html:not(.dark) .dep-page .fi-header .fi-btn { border-radius: .6rem; padding: .6rem 1rem; font-weight: 600; }

/* Tabs: pills on a soft rail, the chosen one filled. */
html:not(.dark) .dep-page .fi-tabs {
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: .35rem;
    gap: .6rem;
    background: #f4f4fb;
    border-radius: .8rem;
    box-shadow: none;
}
html:not(.dark) .dep-page .fi-tabs-item {
    background: #fff;
    border-radius: .55rem;
    padding: .45rem 2.2rem;
    font-size: .85rem;
    font-weight: 500;
    color: #374151;
}
html:not(.dark) .dep-page .fi-tabs-item.fi-active { background: var(--tc-brand); color: #fff; box-shadow: 0 2px 6px rgb(79 70 229 / .25); }
html:not(.dark) .dep-page .fi-tabs-item.fi-active .fi-tabs-item-label { color: #fff; }

/* The four totals. */
html:not(.dark) .dep-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
html:not(.dark) .dep-total {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: .9rem;
    box-shadow: 0 1px 2px rgb(16 24 40 / .04);
}
html:not(.dark) .dep-total-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .8rem; flex: none; }
html:not(.dark) .dep-total-icon svg { width: 1.5rem; height: 1.5rem; }
html:not(.dark) .dep-total-total { background: #eef0ff; color: #4f46e5; }
html:not(.dark) .dep-total-pending { background: #fef3c7; color: #d97706; }
html:not(.dark) .dep-total-approved { background: #dcfce7; color: #16a34a; }
html:not(.dark) .dep-total-rejected { background: #ffe4e6; color: #e11d48; }
html:not(.dark) .dep-total-label { font-size: .8rem; color: #6b6f8f; }
html:not(.dark) .dep-total-value { font-size: 1.3rem; font-weight: 800; color: var(--tc-ink); font-variant-numeric: tabular-nums; margin-top: .1rem; }
html:not(.dark) .dep-total:first-child .dep-total-label { color: #5b5fd6; }
html:not(.dark) .dep-total:first-child .dep-total-value { color: #2934c9; }

/* The table as a card, with the filters in one row above it. */
html:not(.dark) .dep-table.fi-ta,
html:not(.dark) .dep-table .fi-ta-ctn { background: transparent; box-shadow: none; border: 0; }
html:not(.dark) .dep-table .fi-ta-ctn { overflow: visible; }
html:not(.dark) .dep-table .fi-ta-filters-above-content-ctn { padding: 0 0 1rem; border: 0; background: transparent; }
html:not(.dark) .dep-table .fi-ta-filters { display: flex; align-items: flex-start; gap: .75rem; }
html:not(.dark) .dep-table .fi-ta-filters-header { display: none; }
html:not(.dark) .dep-table .fi-ta-filters > :not(.fi-ta-filters-header):not(.fi-ta-filters-actions-ctn) { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1024px) {
    html:not(.dark) .dep-table .fi-ta-filters > .fi-grid {
        grid-template-columns: 2.4fr 1fr 1.15fr 1fr .95fr .9fr 1.75fr;
        gap: .6rem;
    }
}
html:not(.dark) .dep-table .fi-ta-filters .fi-input-wrp { border-radius: .55rem; background: #fff; box-shadow: 0 0 0 1px #e3e6ee; min-height: 2.6rem; }
/* The search and calendar icons sit inside the field, not in a box beside it. */
html:not(.dark) .dep-table .fi-ta-filters .fi-input-wrp-prefix { border: 0; background: transparent; padding-inline: .75rem 0; }
html:not(.dark) .dep-table .fi-ta-filters .fi-input-wrp-prefix .fi-icon { color: #9ca3af; }
html:not(.dark) .dep-table .fi-ta-filters-actions-ctn { display: flex; flex-direction: row-reverse; gap: .5rem; margin: 0; padding: 0; }
html:not(.dark) .dep-table .fi-ta-filters-actions-ctn .fi-btn { border-radius: .55rem; min-height: 2.6rem; padding-inline: 1rem; font-weight: 600; }
html:not(.dark) .dep-table .fi-ta-filters-actions-ctn .fi-btn.fi-color-danger {
    background: #fff; color: #374151; box-shadow: 0 0 0 1px #e3e6ee;
}
html:not(.dark) .dep-table .fi-ta-filters-actions-ctn .fi-btn.fi-color-danger::before {
    content: ""; width: 1rem; height: 1rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22%23000%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99%22/%3E%3C/svg%3E") center / contain no-repeat;
}
html:not(.dark) .dep-table .fi-ta-filter-indicators { display: none; }

html:not(.dark) .dep-table .fi-ta-content-ctn,
html:not(.dark) .dep-table .fi-ta-content {
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: .9rem;
    box-shadow: 0 1px 2px rgb(16 24 40 / .04);
}
html:not(.dark) .dep-table .fi-ta-header-toolbar { border: 0; padding-inline: 0; background: transparent; }
html:not(.dark) .dep-table .fi-ta-table thead th { background: #f9fafb; }
html:not(.dark) .dep-table .fi-ta-header-cell-label { font-size: .8rem; font-weight: 700; color: var(--tc-ink); white-space: nowrap; }
html:not(.dark) .dep-table .fi-ta-table tbody td { padding-block: 0; }
/* Ten columns and the decision buttons fit the width: tighter cells. */
html:not(.dark) .dep-table .fi-ta-cell > .fi-ta-col,
html:not(.dark) .dep-table .fi-ta-cell > button.fi-ta-col { padding-inline: .45rem; }
html:not(.dark) .dep-table .fi-ta-header-cell { padding-inline: .45rem; }
html:not(.dark) .dep-table .fi-ta-col > .fi-ta-text,
html:not(.dark) .dep-table .fi-ta-col > .fi-ta-text-item { padding: 0; }
html:not(.dark) .dep-table .fi-ta-cell > .fi-ta-col,
html:not(.dark) .dep-table .fi-ta-cell > button.fi-ta-col { padding-block: .6rem; }
html:not(.dark) .dep-table .fi-ta-cell .fi-ta-actions { padding-inline: .45rem .5rem; }
/* The decision stays in view: the Action column is pinned to the right edge
   when the table has to scroll on a narrower screen. */
html:not(.dark) .dep-table .fi-ta-table thead th:last-child,
html:not(.dark) .dep-table .fi-ta-table tbody td:last-child {
    position: sticky; right: 0; z-index: 1;
    background: #fff;
    box-shadow: -10px 0 10px -10px rgb(15 23 42 / .12);
}
html:not(.dark) .dep-table .fi-ta-table thead th:last-child { background: #f9fafb; }
@media (max-width: 1799px) {
    html:not(.dark) .dep-table .fi-ta-header-cell,
html:not(.dark) .dep-table .fi-ta-header-cell * { white-space: normal; }
    html:not(.dark) .dep-table .fi-ta-header-cell-label { line-height: 1.2; }
}
html:not(.dark) .dep-table .fi-ta-cell.fi-ta-selection-cell,
html:not(.dark) .dep-table .fi-ta-header-cell.fi-ta-selection-cell { padding-inline: 1rem .25rem; }
html:not(.dark) .dep-table .fi-ta-cell-agent .fi-ta-col,
html:not(.dark) .dep-table .fi-ta-cell-bank .fi-ta-col { padding-inline-end: .9rem; }
html:not(.dark) .dep-table .fi-ta-actions { flex-wrap: nowrap; gap: .5rem; }
html:not(.dark) .dep-table .fi-ta-row { border-color: #f1f2f6; }
html:not(.dark) .dep-table .fi-ta-footer,
html:not(.dark) .dep-table .fi-pagination { border-top: 1px solid var(--tc-line); }

html:not(.dark) .dep-sub { display: block; font-size: .76rem; color: var(--tc-muted); line-height: 1.25; }
html:not(.dark) .dep-agent,
html:not(.dark) .dep-bank { display: flex; align-items: center; gap: .6rem; }
html:not(.dark) .dep-agent-text { display: flex; flex-direction: column; min-width: 0; }
html:not(.dark) .dep-avatar { width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex: none; }
html:not(.dark) .dep-agent-name { font-size: .84rem; font-weight: 600; color: var(--tc-ink); text-transform: uppercase; max-width: 8rem; line-height: 1.25; }
html:not(.dark) .dep-agent-link { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
html:not(.dark) .dep-agent-link:hover .dep-agent-name,
html:not(.dark) .dep-agent-link:focus-visible .dep-agent-name { color: var(--tc-brand); text-decoration: underline; text-underline-offset: 2px; }
html:not(.dark) .dep-amount { padding-inline-end: .5rem; }
html:not(.dark) .dep-amount-main { display: block; font-size: .875rem; font-weight: 700; color: #2536d6; white-space: nowrap; font-variant-numeric: tabular-nums; }
html:not(.dark) .dep-method { display: inline-block; padding: .2rem .5rem; border-radius: .35rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
html:not(.dark) .dep-method-bank { background: #eef0ff; color: #4f46e5; }
html:not(.dark) .dep-method-bkash { background: #fce7f3; color: #be185d; }
html:not(.dark) .dep-method-nagad { background: #ffe4e6; color: #e11d48; }
html:not(.dark) .dep-method-rocket { background: #f3e8ff; color: #7e22ce; }
html:not(.dark) .dep-method-upay { background: #fef9c3; color: #a16207; }
html:not(.dark) .dep-method-cash { background: #dcfce7; color: #15803d; }
html:not(.dark) .dep-method-card { background: #e0f2fe; color: #0369a1; }
html:not(.dark) .dep-method-online { background: #ccfbf1; color: #0f766e; }
html:not(.dark) .dep-method-other { background: #f3f4f6; color: #4b5563; }
html:not(.dark) .dep-payer { font-size: .84rem; color: #1f2937; max-width: 7rem; }
html:not(.dark) .dep-bank-tile { width: 2rem; height: 2rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; flex: none; letter-spacing: .02em; }
html:not(.dark) .dep-bank-logo { width: 2rem; height: 2rem; object-fit: contain; flex: none; border-radius: .4rem; }
html:not(.dark) .dep-bank-name { font-size: .84rem; font-weight: 500; color: var(--tc-ink); white-space: nowrap; }
html:not(.dark) .dep-when { display: flex; flex-direction: column; font-size: .82rem; color: #1f2937; line-height: 1.35; white-space: nowrap; }
html:not(.dark) .dep-attachment svg,
html:not(.dark) .dep-attachment .fi-icon { color: #ef4444; }
html:not(.dark) .dep-attachment .fi-ta-text-item { font-size: .84rem; }
html:not(.dark) .dep-status { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem; border-radius: .4rem; font-size: .76rem; font-weight: 600; white-space: nowrap; }
html:not(.dark) .dep-status i { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
html:not(.dark) .dep-status-pending { background: #fff7e6; color: #d97706; }
html:not(.dark) .dep-status-pending i { background: #f59e0b; }
html:not(.dark) .dep-status-approved { background: #ecfdf5; color: #059669; }
html:not(.dark) .dep-status-approved i { background: #10b981; }
html:not(.dark) .dep-status-rejected { background: #fff1f2; color: #e11d48; }
html:not(.dark) .dep-status-rejected i { background: #f43f5e; }
html:not(.dark) .dep-status-cancelled { background: #f3f4f6; color: #6b7280; }
html:not(.dark) .dep-info { color: #b45309; margin-top: .2rem; }

html:not(.dark) .dep-table .fi-ta-actions .fi-btn { border-radius: .5rem; padding: .42rem .7rem; font-weight: 600; font-size: .8rem; }
html:not(.dark) .dep-table .fi-ta-actions .fi-btn.fi-color-success { background: #16a34a; }
html:not(.dark) .dep-table .fi-ta-actions .dep-reject.fi-btn { background: #ffe4e6; color: #e11d48; box-shadow: none; }
html:not(.dark) .dep-table .fi-ta-actions .dep-reject.fi-btn:hover { background: #fecdd3; }
html:not(.dark) .dep-table .fi-ta-actions .dep-dash { color: #9ca3af; cursor: default; min-width: 9.4rem; justify-content: center; text-decoration: none; opacity: 1; }

@media (max-width: 1280px) {
    html:not(.dark) .dep-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:not(.dark) .dep-table .fi-ta-filters { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    html:not(.dark) .dep-totals { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- health monitor */
/* Console → Platform → Health Monitor. Both themes: status colours carry the meaning. */

.hm { --hm-ok: #16a34a; --hm-warn: #d97706; --hm-down: #dc2626; --hm-idle: #9ca3af; --hm-card: #fff; --hm-line: #eceef3; --hm-ink: #111827; --hm-muted: #6b7280; display: grid; gap: 1.5rem; }
.dark .hm { --hm-card: rgb(255 255 255 / .04); --hm-line: rgb(255 255 255 / .1); --hm-ink: #f3f4f6; --hm-muted: #9ca3af; }

.hm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 1rem; border: 1px solid var(--hm-line); background: var(--hm-card); border-left: 6px solid var(--hm-idle); }
.hm-head-ok { border-left-color: var(--hm-ok); }
.hm-head-warn { border-left-color: var(--hm-warn); }
.hm-head-down { border-left-color: var(--hm-down); }
.hm-head-title { font-size: 1.35rem; font-weight: 800; color: var(--hm-ink); }
.hm-head-down .hm-head-title { color: var(--hm-down); }
.hm-head-sub { margin-top: .2rem; font-size: .85rem; color: var(--hm-muted); }
.hm-tiles { display: flex; flex-wrap: wrap; gap: .75rem; }
.hm-tile { min-width: 9rem; padding: .6rem .9rem; border-radius: .75rem; border: 1px solid var(--hm-line); }
.hm-tile span { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--hm-muted); }
.hm-tile b { font-size: 1.4rem; font-weight: 800; color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hm-tile b.is-bad { color: var(--hm-down); }
.hm-tile small { margin-left: .25rem; color: var(--hm-muted); }

.hm-section header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .75rem; }
.hm-section h3 { font-size: 1rem; font-weight: 700; color: var(--hm-ink); }
.hm-section header p { font-size: .82rem; color: var(--hm-muted); }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.hm-card { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; width: 100%; text-align: left; padding: .85rem 1rem; border-radius: .85rem; border: 1px solid var(--hm-line); background: var(--hm-card); border-top: 3px solid var(--hm-idle); transition: box-shadow .15s; }
button.hm-card:hover, .hm-card.is-open { box-shadow: 0 4px 14px rgb(15 23 42 / .08); }
.hm-card.is-ok { border-top-color: var(--hm-ok); }
.hm-card.is-warn { border-top-color: var(--hm-warn); }
.hm-card.is-down { border-top-color: var(--hm-down); background: color-mix(in srgb, var(--hm-down) 5%, var(--hm-card)); }
.hm-card-top, .hm-card-foot { width: 100%; }
.hm-card-top { display: flex; align-items: center; gap: .5rem; }
.hm-card-top b { flex: 1; font-size: .9rem; font-weight: 700; color: var(--hm-ink); }
.hm-card-top em { font-style: normal; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hm-muted); }
.hm-card.is-down .hm-card-top em { color: var(--hm-down); }
.hm-card.is-warn .hm-card-top em { color: var(--hm-warn); }
.hm-card p { font-size: .8rem; line-height: 1.35; color: var(--hm-muted); overflow-wrap: anywhere; }
.hm-card-foot { display: flex; justify-content: space-between; gap: .75rem; margin-top: auto; font-size: .72rem; color: var(--hm-muted); font-variant-numeric: tabular-nums; }
/* The CPU card: its body opens the history, its foot the graph. */
.hm-card-body { display: flex; flex-direction: column; gap: .4rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.hm-card-body:focus-visible, .hm-graph-link:focus-visible { outline: 2px solid var(--primary-500, #7c3aed); outline-offset: 2px; border-radius: .35rem; }
.hm-graph-link { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: inherit; font-size: .75rem; font-weight: 700; color: var(--primary-600, #6d28d9); cursor: pointer; }
.hm-graph-link:hover { text-decoration: underline; }
.dark .hm-graph-link { color: var(--primary-400, #a78bfa); }
.hm-graph-icon { width: .9rem; height: .9rem; }

.hm-dot { display: inline-block; flex: none; width: .6rem; height: .6rem; border-radius: 999px; background: var(--hm-idle); }
.is-ok .hm-dot { background: var(--hm-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hm-ok) 20%, transparent); }
.is-warn .hm-dot { background: var(--hm-warn); }
.is-down .hm-dot { background: var(--hm-down); animation: hm-pulse 1.4s infinite; }
@keyframes hm-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--hm-down) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .is-down .hm-dot { animation: none; } }

.hm-table-wrap { overflow-x: auto; border-radius: .85rem; border: 1px solid var(--hm-line); background: var(--hm-card); }
.hm-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.hm-table th { padding: .6rem .8rem; text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--hm-muted); border-bottom: 1px solid var(--hm-line); white-space: nowrap; }
.hm-table td { padding: .6rem .8rem; vertical-align: top; color: var(--hm-ink); border-bottom: 1px solid var(--hm-line); font-variant-numeric: tabular-nums; }
.hm-table tr:last-child td { border-bottom: 0; }
.hm-table tbody tr { cursor: pointer; }
.hm-table tbody tr:hover td { background: color-mix(in srgb, var(--hm-ink) 3%, transparent); }
.hm-table tr.is-idle td { color: var(--hm-muted); }
.hm-table td small { display: block; margin-top: .15rem; font-size: .72rem; color: var(--hm-muted); overflow-wrap: anywhere; }
.hm-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--hm-idle) 15%, transparent); color: var(--hm-muted); }
.hm-pill.is-ok { background: color-mix(in srgb, var(--hm-ok) 12%, transparent); color: var(--hm-ok); }
.hm-pill.is-warn { background: color-mix(in srgb, var(--hm-warn) 14%, transparent); color: var(--hm-warn); }
.hm-pill.is-down { background: color-mix(in srgb, var(--hm-down) 12%, transparent); color: var(--hm-down); }
.hm-env { display: inline-block; padding: .1rem .5rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--hm-idle) 15%, transparent); color: var(--hm-muted); }
.hm-env.is-live { background: color-mix(in srgb, var(--hm-ok) 12%, transparent); color: var(--hm-ok); }
.hm-bad { color: var(--hm-down); font-weight: 700; }
.hm-muted, .hm-none { color: var(--hm-muted); }
.hm-none { padding: 1rem; font-size: .85rem; }
.hm-link { color: #4f46e5; font-weight: 600; margin-left: .5rem; }

.hm-history { padding: 1rem 1.25rem; border-radius: 1rem; border: 1px solid var(--hm-line); background: var(--hm-card); }
.hm-strip { display: flex; gap: 2px; margin-bottom: .75rem; }
.hm-strip span { flex: 1; min-width: 4px; max-width: 14px; height: 1.6rem; border-radius: 2px; background: var(--hm-idle); }
.hm-strip span.is-ok { background: var(--hm-ok); }
.hm-strip span.is-warn { background: var(--hm-warn); }
.hm-strip span.is-down { background: var(--hm-down); }
.hm-history-list { display: grid; gap: .35rem; font-size: .8rem; color: var(--hm-muted); }
.hm-history-list li { display: flex; align-items: baseline; gap: .5rem; }
.hm-history-list b { color: var(--hm-ink); font-weight: 600; white-space: nowrap; }

/* ================================================================ the design of 2 Oct 2026
 * The console frame as the dashboard design draws it: a slimmer top bar
 * with the search on the left (⌘K), then the bell, Quick Actions and the
 * person with their role; a narrower, denser sidebar whose B2B and B2C
 * groups read as section headings, and a card at its foot.
 */

html:not(.dark) .fi-topbar { min-height: 3.25rem; }
html:not(.dark) .fi-topbar-end { flex: 1; justify-content: flex-end; gap: .9rem; }
html:not(.dark) .fi-topbar-end > .fi-global-search-ctn { order: -1; margin-inline-end: auto; }
html:not(.dark) .fi-topbar-end > .fi-dropdown.fi-user-menu { order: 3; }
html:not(.dark) .fi-topbar-end > .tc-quick { order: 2; }
html:not(.dark) .fi-topbar .fi-global-search-field .fi-input-wrp { min-width: 30rem; border-radius: .55rem; background: #fafbfd; }
html:not(.dark) .fi-topbar .fi-global-search-field .fi-input { font-size: .8rem; }
html:not(.dark) .fi-topbar .fi-global-search-field .fi-input-wrp-suffix { font-size: .7rem; color: var(--tc-muted); }
html:not(.dark) .fi-topbar .fi-global-search-field .fi-input-wrp-suffix > * { padding: .1rem .4rem; border-radius: .35rem; background: #fff; box-shadow: 0 0 0 1px var(--tc-line); }
@media (max-width: 1100px) { html:not(.dark) .fi-topbar .fi-global-search-field .fi-input-wrp { min-width: 15rem; } }

/* Quick Actions: a soft brand button. */
.tc-quick-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .8rem; border-radius: .55rem;
    background: var(--tc-brand-tint); color: var(--tc-brand);
    font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.tc-quick-btn:hover { background: #e3e6ff; }
.tc-quick-bolt { width: 1rem; height: 1rem; }
.tc-quick-chev { width: .9rem; height: .9rem; opacity: .8; }
@media (max-width: 760px) { .tc-quick-btn span { display: none; } }

/* The person: name over role, the chevron beside them. */
html:not(.dark) .fi-topbar .fi-user-menu-trigger {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "avatar name" "avatar role";
    column-gap: .6rem; row-gap: 0;
    align-items: center; justify-items: start;
    padding-inline-end: 1.2rem;
    background: no-repeat right center / .8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
html:not(.dark) .fi-topbar .fi-user-menu-trigger .fi-avatar { grid-area: avatar; width: 2.1rem; height: 2.1rem; background: #111827; color: #fff; font-size: .75rem; }
html:not(.dark) .fi-topbar .fi-user-menu-trigger::before {
    content: var(--tc-user-name, "");
    grid-area: name;
    font-size: .8rem; font-weight: 700; color: var(--tc-ink); line-height: 1.15;
}
html:not(.dark) .fi-topbar .fi-user-menu-trigger::after {
    content: var(--tc-user-role, "");
    grid-area: role;
    font-size: .68rem; font-weight: 500; color: var(--tc-muted); line-height: 1.2;
    padding-inline-end: 0; background: none;
}
@media (max-width: 760px) {
    html:not(.dark) .fi-topbar .fi-user-menu-trigger::before,
    html:not(.dark) .fi-topbar .fi-user-menu-trigger::after { content: none; }
}

/* The sidebar: narrower and denser, as drawn. */
html:not(.dark) .fi-sidebar-nav { padding: .7rem .6rem 1rem; row-gap: .6rem; }
html:not(.dark) .fi-sidebar-nav-groups { row-gap: .55rem; }
html:not(.dark) .fi-sidebar-group-btn { padding: .38rem .4rem .38rem .6rem; column-gap: .6rem; }
html:not(.dark) .fi-sidebar-group-label { font-size: .78rem; }
html:not(.dark) .fi-sidebar-group-btn > .fi-icon,
html:not(.dark) .fi-sidebar-group-btn > svg,
html:not(.dark) .fi-sidebar-group[data-group-label] > .fi-sidebar-group-btn::before { width: 1.1rem; height: 1.1rem; }
html:not(.dark) .fi-sidebar-item-btn { padding: .42rem .6rem; column-gap: .65rem; border-radius: .5rem; }
html:not(.dark) .fi-sidebar-item-label { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.dark) .fi-sidebar-item-icon { width: 1.05rem; height: 1.05rem; }

/* B2B and B2C read as section headings, small capitals, no icon. */
html:not(.dark) .fi-sidebar-group[data-group-label="B2B Management"] > .fi-sidebar-group-btn::before,
html:not(.dark) .fi-sidebar-group[data-group-label="B2C (Online store) Management"] > .fi-sidebar-group-btn::before { content: none; }
html:not(.dark) .fi-sidebar-group[data-group-label="B2B Management"] > .fi-sidebar-group-btn .fi-sidebar-group-label,
html:not(.dark) .fi-sidebar-group[data-group-label="B2C (Online store) Management"] > .fi-sidebar-group-btn .fi-sidebar-group-label {
    font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9ca3af;
}

/* The card at the foot of the sidebar. */
.tc-side-card {
    margin: .4rem .6rem 1rem; padding: .9rem .85rem;
    border-radius: .9rem; color: #fff;
    background: radial-gradient(120% 90% at 100% 0%, #8b6cf6 0%, transparent 60%), linear-gradient(160deg, #5b3df5, #4527d6);
    box-shadow: 0 12px 26px -16px rgb(69 39 214 / .8);
}
.tc-side-card-top { display: flex; align-items: center; gap: .6rem; }
.tc-side-card-top b { font-size: .8rem; font-weight: 800; line-height: 1.25; }
.tc-side-card-badge { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: rgb(255 255 255 / .16); flex: none; }
.tc-side-card-badge svg { width: 1.25rem; height: 1.25rem; }
.tc-side-card p { margin: .75rem 0 .85rem; font-size: .72rem; line-height: 1.45; opacity: .85; }
.tc-side-card-btn {
    display: flex; align-items: center; justify-content: space-between; gap: .4rem;
    padding: .5rem .65rem; border-radius: .55rem;
    border: 1px solid rgb(255 255 255 / .4); background: rgb(255 255 255 / .08);
    color: #fff; font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.tc-side-card-btn:hover { background: rgb(255 255 255 / .16); }
.tc-side-card-btn svg { width: .9rem; height: .9rem; }

/* ---------------------------------------------------------------- documentation */

.doc { display: grid; gap: 1rem; }
.doc-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.doc-tabs button { padding: .45rem .9rem; border-radius: .6rem; background: #fff; box-shadow: 0 0 0 1px var(--tc-line); font-size: .82rem; font-weight: 600; color: var(--tc-body); }
.doc-tabs button.is-on { background: var(--tc-brand); color: #fff; box-shadow: none; }
.doc-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.doc-toc { position: sticky; top: 4.5rem; display: grid; gap: .3rem; max-height: calc(100vh - 6rem); overflow: auto; padding: 1rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px var(--tc-line); font-size: .78rem; }
.doc-toc b { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tc-muted); margin-bottom: .2rem; }
.doc-toc a { color: var(--tc-body); }
.doc-toc a:hover { color: var(--tc-brand); }
.doc-toc a.is-l3 { padding-left: .8rem; color: var(--tc-muted); }
.doc-prose { min-width: 0; padding: 1.5rem 1.75rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px var(--tc-line); font-size: .88rem; line-height: 1.65; color: var(--tc-body); }
.doc-prose h1, .doc-prose h2, .doc-prose h3 { color: var(--tc-ink); font-weight: 800; line-height: 1.25; scroll-margin-top: 5rem; }
.doc-prose h1 { font-size: 1.5rem; margin: 0 0 .8rem; }
.doc-prose h2 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--tc-line); }
.doc-prose h3 { font-size: .98rem; margin: 1.3rem 0 .4rem; }
.doc-prose p, .doc-prose ul, .doc-prose ol { margin: .55rem 0; }
.doc-prose ul { list-style: disc; padding-left: 1.3rem; }
.doc-prose ol { list-style: decimal; padding-left: 1.3rem; }
.doc-prose a { color: var(--tc-brand); text-decoration: underline; }
.doc-prose code { padding: .08rem .35rem; border-radius: .3rem; background: #f3f4f8; font-size: .8em; }
.doc-prose pre { margin: .8rem 0; padding: .9rem 1rem; border-radius: .6rem; background: #0f172a; color: #e2e8f0; overflow: auto; font-size: .78rem; line-height: 1.55; }
.doc-prose pre code { padding: 0; background: none; color: inherit; }
.doc-prose table { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .8rem; display: block; overflow-x: auto; }
.doc-prose th, .doc-prose td { padding: .45rem .6rem; border: 1px solid var(--tc-line); text-align: left; vertical-align: top; }
.doc-prose th { background: #f7f8fc; color: var(--tc-ink); }
@media (max-width: 900px) { .doc-body { grid-template-columns: 1fr; } .doc-toc { position: static; max-height: none; } }