/* Customer Filament panel — MD3 olive nav + settings layout */

.fi-panel-customer {
    --dashboard-primary: 101 95 0;
    --dashboard-primary-container: 255 230 0;
    --dashboard-on-primary-container: 81 76 0;
    --brand-accent: var(--dashboard-primary);
    --brand-accent-muted: 245 240 200;
    --brand-structure: 67 69 69;
}

/* Brand logo: optically center in sidebar header; collapse control stays at the end */
@media (min-width: 1024px) {
    .fi-panel-customer .fi-sidebar {
        width: clamp(16rem, 20vw, 20rem) !important;
        max-width: min(20rem, 36vw);
    }

    .fi-panel-customer .fi-sidebar-nav {
        min-width: 0;
    }
}

.fi-panel-customer .fi-sidebar-header {
    position: relative;
    align-items: center;
    justify-content: flex-end;
    min-height: 4rem;
    padding-inline: 0.75rem;
}

.fi-panel-customer .fi-sidebar-header > div:first-child {
    position: absolute;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.fi-panel-customer .fi-sidebar-header > div:first-child a {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 2.75rem);
}

.fi-panel-customer .fi-sidebar-header .fi-logo {
    width: auto;
    max-width: 100%;
    max-height: 2rem;
    object-fit: contain;
    margin-inline: auto;
}

.fi-panel-customer .fi-sidebar-header .fi-icon-btn {
    position: relative;
    z-index: 1;
    margin-inline-start: 0 !important;
}

/* Sidebar item buttons: no light fill on hover/focus/active (prevents washout on dark canvas) */
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button:hover,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button:focus,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button:focus-visible,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button:focus-within,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button:active,
.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-row > .fi-sidebar-item-button,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button.bg-gray-100,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button.bg-white {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    --tw-bg-opacity: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    outline: none !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item-button:hover,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Parent active: flush yellow edge rail */
.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-row > .fi-sidebar-item-button {
    position: relative;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button::before,
.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-row > .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    /* nav px-6 (1.5rem) − groups -mx-2 (0.5rem) → net 1rem inset from sidebar edge */
    inset-inline-start: -1rem;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0;
    background-color: rgb(var(--dashboard-primary-container));
    pointer-events: none;
}

/* Nested children: no edge rail */
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
    display: none;
}

/* Metronic-style accordion toggle (+ / −) — text only, no box */
.fi-panel-customer .fi-sidebar .dashboard-sidebar-accordion-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    margin-inline-end: 0.125rem;
    padding: 0;
    width: 1.25rem;
}

.fi-panel-customer .fi-sidebar .dashboard-sidebar-accordion-toggle:hover {
    color: rgb(255, 255, 255);
    background: transparent;
    border: 0;
}

.fi-panel-customer .fi-sidebar .dashboard-sidebar-accordion-toggle__icon {
    display: block;
    line-height: 1;
    user-select: none;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item-row {
    min-width: 0;
    width: 100%;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Ensure chevron rotates when collapsed (fallback for purged Tailwind classes) */
.fi-panel-customer .fi-sidebar-group-collapse-button.-rotate-180 {
    transform: rotate(-180deg) !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: rgb(255 255 255 / 0.12) !important;
    color: rgb(255 255 255 / 0.9) !important;
    border: 1px solid rgb(255 255 255 / 0.18);
    font-weight: 600;
    font-size: 0.6875rem;
}

/* Default / hover / active labels (nested block below overrides child defaults) */
.fi-panel-customer .fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label,
.fi-panel-customer .fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-panel-customer .fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-panel-customer .fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-label,
.fi-panel-customer .fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-icon {
    color: rgb(var(--dashboard-primary-container)) !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-panel-customer .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: rgb(var(--dashboard-primary-container)) !important;
    font-weight: 600;
}

/* Nested submenu: leading dots + yellow hover/active */
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items {
    gap: 0.125rem;
    padding-inline-start: 0.5rem;
    margin-top: 0.125rem;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-icon,
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border {
    display: none !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-button {
    min-width: 0;
    overflow: hidden;
    padding-block: 0.375rem;
    padding-inline-start: 0.875rem;
    gap: 0.5rem;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-label {
    /* Dot is absolutely positioned so label text can ellipsize beside badges. */
    position: relative;
    display: block !important;
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    font-size: 0.8125rem !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-label::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.4);
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item-button > span:has(.fi-badge),
.fi-panel-customer .fi-sidebar .fi-sidebar-item-badge-ctn {
    flex-shrink: 0;
    max-width: 4.5rem;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge,
.fi-panel-customer .fi-sidebar .fi-sidebar-item-button > span:has(.fi-badge) .fi-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: rgb(var(--dashboard-primary-container)) !important;
    font-weight: 600 !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active .fi-sidebar-item-label::before {
    /* solid yellow dot only — no outer ring (ring was clipped by overflow) */
    width: 0.375rem;
    height: 0.375rem;
    background-color: rgb(var(--dashboard-primary-container));
    box-shadow: none;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-label {
    color: rgb(var(--dashboard-primary-container)) !important;
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label::before,
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-label::before {
    background-color: rgb(var(--dashboard-primary-container));
}

.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-button.bg-gray-100,
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-button:hover,
.fi-panel-customer .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-button:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    --tw-bg-opacity: 0 !important;
}

/* Settings: hide dropdown select (icon at end of tab bar), always use tabs */
.fi-panel-customer.fi-customer-settings-page .fi-page-sub-navigation-select {
    display: none !important;
}

.fi-panel-customer.fi-customer-settings-page .fi-page-sub-navigation-tabs.fi-tabs {
    display: flex !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.fi-panel-customer.fi-customer-settings-page .fi-page-sub-navigation-tabs.fi-tabs::-webkit-scrollbar {
    display: none;
}

/* Sub-navigation tabs: full width, shared across settings + lead-gen clusters */
.fi-panel-customer .fi-page-sub-navigation-tabs.fi-tabs {
    align-items: center !important;
    background: transparent !important;
    border-bottom: 1px solid rgb(var(--dashboard-outline, 202 199 182) / 0.85);
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 0;
    margin-inline: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item {
    align-items: center;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    display: inline-flex;
    justify-content: center;
    margin-bottom: -1px;
    min-height: 2.75rem;
    padding-inline: 1rem;
}

.fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    background-color: transparent !important;
    border-bottom-color: rgb(var(--dashboard-primary));
}

.fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon {
    font-weight: 600;
    color: rgb(var(--dashboard-primary)) !important;
}

/* Settings content: same width as other pages */
.fi-panel-customer.fi-customer-settings-page .fi-section,
.fi-panel-customer.fi-customer-settings-page .fi-ta-ctn,
.fi-panel-customer.fi-customer-settings-page form,
.fi-panel-customer.fi-customer-settings-page .fi-page-sub-navigation-tabs {
    max-width: none;
    width: 100%;
}

/* Hide sidebar scrollbar */
.fi-panel-customer .fi-sidebar-nav {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.fi-panel-customer .fi-sidebar-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Compact sticky sidebar footer (spacing + link polish; brand colors stay in dashboard.css) */
.fi-panel-customer .dashboard-sidebar-footer--compact {
    gap: 0.625rem;
    margin: 0.375rem 0.75rem 0.625rem;
    padding: 0.75rem;
}

.fi-panel-customer .dashboard-sidebar-footer--compact .dashboard-sidebar-footer__upgrade {
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 0 rgb(var(--brand-structure) / 0.12);
}

.fi-panel-customer .dashboard-sidebar-footer--compact .dashboard-sidebar-footer__upgrade-icon {
    width: 1rem;
    height: 1rem;
}

.fi-panel-customer .dashboard-sidebar-footer--compact .dashboard-sidebar-footer__links {
    gap: 0.125rem;
    padding-top: 0.125rem;
    border-top: 1px solid rgb(var(--brand-structure) / 0.12);
}

.fi-panel-customer .dashboard-sidebar-footer--compact .dashboard-sidebar-footer__link {
    gap: 0.625rem;
    min-height: 2.125rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

.fi-panel-customer .dashboard-sidebar-footer--compact .dashboard-sidebar-footer__link-icon {
    width: 1.125rem;
    height: 1.125rem;
    opacity: 0.85;
}

.fi-panel-customer .dashboard-sidebar-footer--compact .dashboard-sidebar-footer__link--muted {
    color: rgb(var(--brand-structure) / 0.78);
}

.fi-panel-customer .dashboard-sidebar-footer--compact .dashboard-sidebar-footer__link--muted:hover {
    color: rgb(var(--brand-structure));
}