/*
 * IPcom CRM navigation.
 *
 * Shared by the Admin and Seller panels.
 * Group headings remain visually consistent in every state.
 * Amber highlighting is reserved for the active page only.
 */

/* Sidebar shell */

.fi-sidebar {
    border-right: 1px solid rgb(226 232 240);
    background:
        linear-gradient(
            180deg,
            rgb(255 255 255) 0%,
            rgb(248 250 252) 100%
        );
}

.fi-sidebar-header {
    border-bottom: 1px solid rgb(226 232 240);
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.fi-sidebar-nav {
    padding: 0.8rem 0.7rem 1rem;
}

.fi-sidebar-nav-groups {
    gap: 0.55rem;
}

.fi-sidebar-footer {
    border-top: 1px solid rgb(226 232 240);
    background: rgb(255 255 255 / 0.86);
}

/* Navigation groups */

.fi-sidebar-group {
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 0.88);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.025);
}

/*
 * Both class names are retained for compatibility with the
 * installed Filament components.
 */

.fi-sidebar .fi-sidebar-group >
.fi-sidebar-group-btn,
.fi-sidebar .fi-sidebar-group >
.fi-sidebar-group-button {
    min-height: 2.65rem;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid rgb(203 213 225) !important;
    border-radius: 0;
    background:
        linear-gradient(
            135deg,
            rgb(241 245 249) 0%,
            rgb(248 250 252) 100%
        ) !important;
    color: rgb(30 58 95) !important;
}

.fi-sidebar .fi-sidebar-group >
.fi-sidebar-group-btn:hover,
.fi-sidebar .fi-sidebar-group >
.fi-sidebar-group-button:hover {
    background:
        linear-gradient(
            135deg,
            rgb(226 232 240) 0%,
            rgb(241 245 249) 100%
        ) !important;
    color: rgb(30 58 95) !important;
}

.fi-sidebar .fi-sidebar-group-label {
    color: rgb(30 58 95) !important;
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 750 !important;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.fi-sidebar .fi-sidebar-group-btn svg,
.fi-sidebar .fi-sidebar-group-button svg,
.fi-sidebar .fi-sidebar-group-collapse-btn,
.fi-sidebar .fi-sidebar-group-icon {
    color: rgb(71 85 105) !important;
}

.fi-sidebar-group-items {
    gap: 0.1rem;
    padding: 0.2rem 0.4rem 0.48rem;
    border-top: 0;
}

/* Inactive navigation links */

.fi-sidebar .fi-sidebar-item >
.fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-item >
.fi-sidebar-item-button {
    min-height: 2.35rem;
    padding: 0.46rem 0.62rem;
    border-radius: 0.52rem;
    background: transparent !important;
    color: rgb(51 65 85) !important;
    box-shadow: none !important;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.fi-sidebar .fi-sidebar-item:not(.fi-active) >
.fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item:not(.fi-active) >
.fi-sidebar-item-button:hover {
    background: rgb(241 245 249) !important;
    color: rgb(15 23 42) !important;
}

.fi-sidebar-item-label {
    font-size: 0.86rem;
    line-height: 1.25;
    font-weight: 550;
}

.fi-sidebar .fi-sidebar-item:not(.fi-active)
.fi-sidebar-item-icon {
    color: rgb(148 163 184) !important;
}

/* Active page only */

.fi-sidebar .fi-sidebar-item.fi-active >
.fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-item.fi-active >
.fi-sidebar-item-button {
    background:
        linear-gradient(
            90deg,
            rgb(255 247 237) 0%,
            rgb(255 251 235) 100%
        ) !important;
    color: rgb(154 52 18) !important;
    box-shadow:
        inset 3px 0 0 rgb(245 158 11),
        0 1px 2px rgb(15 23 42 / 0.04) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active
.fi-sidebar-item-icon {
    color: rgb(217 119 6) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active
.fi-sidebar-item-label {
    color: rgb(154 52 18) !important;
    font-weight: 700;
}

/* Badges */

.fi-sidebar-item-badge-ctn {
    margin-left: auto;
}

.fi-sidebar-item-badge-ctn .fi-badge {
    min-width: 1.65rem;
    justify-content: center;
    border-color: rgb(253 186 116);
    background: rgb(255 247 237);
    color: rgb(194 65 12);
    font-weight: 700;
}

/* Dark mode */

.dark .fi-sidebar {
    border-color: rgb(255 255 255 / 0.1);
    background:
        linear-gradient(
            180deg,
            rgb(17 24 39) 0%,
            rgb(15 23 42) 100%
        );
}

.dark .fi-sidebar-header,
.dark .fi-sidebar-footer {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(17 24 39 / 0.96);
}

.dark .fi-sidebar-group {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.025);
}

.dark .fi-sidebar .fi-sidebar-group >
.fi-sidebar-group-btn,
.dark .fi-sidebar .fi-sidebar-group >
.fi-sidebar-group-button {
    border-bottom-color: rgb(71 85 105) !important;
    background:
        linear-gradient(
            135deg,
            rgb(30 41 59) 0%,
            rgb(15 23 42) 100%
        ) !important;
}

.dark .fi-sidebar .fi-sidebar-group-label {
    color: rgb(226 232 240) !important;
}

.dark .fi-sidebar .fi-sidebar-group-btn svg,
.dark .fi-sidebar .fi-sidebar-group-button svg,
.dark .fi-sidebar .fi-sidebar-group-collapse-btn,
.dark .fi-sidebar .fi-sidebar-group-icon {
    color: rgb(148 163 184) !important;
}

.dark .fi-sidebar .fi-sidebar-item >
.fi-sidebar-item-btn,
.dark .fi-sidebar .fi-sidebar-item >
.fi-sidebar-item-button {
    color: rgb(203 213 225) !important;
}

.dark .fi-sidebar .fi-sidebar-item:not(.fi-active) >
.fi-sidebar-item-btn:hover,
.dark .fi-sidebar .fi-sidebar-item:not(.fi-active) >
.fi-sidebar-item-button:hover {
    background: rgb(255 255 255 / 0.06) !important;
    color: rgb(255 255 255) !important;
}

.dark .fi-sidebar .fi-sidebar-item.fi-active >
.fi-sidebar-item-btn,
.dark .fi-sidebar .fi-sidebar-item.fi-active >
.fi-sidebar-item-button {
    background: rgb(120 53 15 / 0.35) !important;
    color: rgb(253 186 116) !important;
}

.dark .fi-sidebar .fi-sidebar-item.fi-active
.fi-sidebar-item-label {
    color: rgb(253 186 116) !important;
}