/* Shared Customer and Admin navigation; loaded after the branded panel theme. */
:root {
    --panel-nav-text: #273c2f;
    --panel-nav-muted: #4a574f;
    --panel-nav-icon: #4f6557;
    --panel-nav-active: #1c5135;
    --panel-nav-selected: #cdd7c8;
    --panel-nav-hover: rgba(15, 26, 20, .06);
}
html.dark {
    --panel-nav-text: #dde8df;
    --panel-nav-muted: #acc0b0;
    --panel-nav-icon: #adc6b6;
    --panel-nav-active: #d4ead9;
    --panel-nav-selected: #264534;
    --panel-nav-hover: #213a2b;
}
html .fi-sidebar .fi-sidebar-item-button {
    min-height: 2.75rem !important;
}
html .fi-sidebar .fi-sidebar-item-label {
    color: var(--panel-nav-text) !important;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}
html .fi-sidebar .fi-sidebar-item-icon {
    color: var(--panel-nav-icon) !important;
}
html .fi-sidebar .fi-sidebar-group-label {
    color: var(--panel-nav-muted) !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: .06em !important;
}
html .fi-sidebar .fi-sidebar-group-collapse-button {
    color: var(--panel-nav-muted) !important;
}
html .fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button:hover {
    background-color: var(--panel-nav-hover) !important;
}
html .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--panel-nav-selected) !important;
}
html .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
html .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--panel-nav-active) !important;
}
html .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label {
    font-weight: 700 !important;
}
html .fi-sidebar .fi-sidebar-item-button:focus-visible {
    outline: 2px solid var(--panel-nav-active);
    outline-offset: 2px;
}

/* The active account's role travels with the shared brand, including after account switching. */
.panel-brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}
.fi-sidebar-header > div:has(.panel-brand) {
    flex: 1;
    min-width: 0;
    margin-inline-end: 1rem;
}
.fi-sidebar-header .fi-logo,
.fi-sidebar-header .panel-brand {
    width: 100%;
}
.fi-sidebar-header .panel-brand {
    justify-content: space-between;
}
/* On a site's own host the site's name stands where the platform's wordmark does; it gives way to the role badge, which keeps its place. */
.panel-brand__name {
    min-width: 0;
    overflow: hidden;
    color: var(--workspace-accent, #2a6244);
    font: 800 1.25rem/1.2 "Archivo", ui-sans-serif, system-ui, sans-serif;
    font-stretch: 108%;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Filament reserves a logo height. Centre the brand inside it instead of aligning to its top. */
.fi-sidebar-header .fi-logo:has(.panel-brand) {
    justify-content: center;
}
.panel-account-role {
    --role-ink: #365466;
    --role-surface: rgba(54, 84, 102, .065);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: .4rem;
    padding: .375rem .625rem;
    border-radius: 999px;
    background: var(--role-surface);
    color: var(--role-ink);
    font: 600 .6875rem/1.25 "Archivo", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
}
.panel-account-role[data-account-role="admin"] {
    --role-ink: #70552f;
    --role-surface: rgba(112, 85, 47, .065);
}
.panel-account-role[data-account-role="fulfillment_center"] {
    --role-ink: #2d6145;
    --role-surface: rgba(45, 97, 69, .07);
}
.panel-account-role[data-account-role="developer"] {
    --role-ink: #5b5175;
    --role-surface: rgba(91, 81, 117, .065);
}
.panel-account-role[data-account-role="storefront"] {
    --role-ink: #7a3e5c;
    --role-surface: rgba(122, 62, 92, .065);
}
.panel-account-role__icon {
    width: .875rem;
    height: .875rem;
    flex: 0 0 .875rem;
    stroke-width: 1.75;
}
.panel-topbar-role { display: flex; align-items: center; }
.fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn { order: -1; }
html.dark .panel-account-role {
    --role-ink: #b7d4e8;
    --role-surface: #253c49;
}
html.dark .panel-account-role[data-account-role="admin"] {
    --role-ink: #e8c994;
    --role-surface: #403824;
}
html.dark .panel-account-role[data-account-role="fulfillment_center"] {
    --role-ink: #aedbbd;
    --role-surface: #284b37;
}
html.dark .panel-account-role[data-account-role="developer"] {
    --role-ink: #d1c4ec;
    --role-surface: #3b334e;
}
html.dark .panel-account-role[data-account-role="storefront"] {
    --role-ink: #ecb5cd;
    --role-surface: #4a2f3d;
}

/* Customer workspace: the last group (Account > Settings) sits at the bottom of the sidebar, not right under the other
   items. In a short menu the free space goes above it; in a long one margin-top:auto collapses and the menu scrolls. */
.fi-panel-customer .fi-sidebar-nav-groups {
    flex: 1 1 auto;
}
.fi-panel-customer .fi-sidebar-nav-groups > .fi-sidebar-group:last-child {
    margin-top: auto;
}
/* The same for a storefront's panel. One whose request waits has one page and no groups at all: that one is not pinned to the bottom (hence :not(:first-child)). */
.fi-panel-storefront .fi-sidebar-nav-groups {
    flex: 1 1 auto;
}
.fi-panel-storefront .fi-sidebar-nav-groups > .fi-sidebar-group:last-child:not(:first-child) {
    margin-top: auto;
}

/* The eye beside a side-menu item that has a website to open (the pinned sidebar item view draws it for a badge written `eye:<address>`): a link of its own inside the item's row,
   at the right, muted until the pointer or the keyboard reaches it, like the one beside "Online Store" in Shopify. */
.fi-sidebar-item.mg-has-eye {
    position: relative;
}
.fi-sidebar-item.mg-has-eye > .fi-sidebar-item-button {
    padding-inline-end: 2.75rem;
}
.mg-nav-eye {
    position: absolute;
    inset-inline-end: .5rem;
    top: .375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    color: rgb(var(--gray-400, 156 163 175));
    transition: color .15s ease, background-color .15s ease;
}
.mg-nav-eye:hover,
.mg-nav-eye:focus-visible {
    color: rgb(var(--primary-600, 47 107 74));
    background-color: rgb(var(--gray-100, 243 244 246));
    outline: none;
}
html.dark .mg-nav-eye:hover,
html.dark .mg-nav-eye:focus-visible {
    color: rgb(var(--primary-400, 162 201 174));
    background-color: rgba(255, 255, 255, .08);
}
.mg-nav-eye:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-500, 47 107 74));
}