/* Icon logo: show/hide light/dark variants */
.fi-logo-tools-icon-logo-dark { display: none; }
.dark .fi-logo-tools-icon-logo-dark { display: block; }
.dark .fi-logo-tools-icon-logo-light { display: none; }

/* Icon logo container layout */
.fi-logo-tools-icon-logo-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inverted mode: swap full logo light/dark */
.fi-logo-tools-inverted .fi-logo-light { display: none !important; }
.fi-logo-tools-inverted .fi-logo-dark { display: flex !important; }
.dark .fi-logo-tools-inverted .fi-logo-light { display: flex !important; }
.dark .fi-logo-tools-inverted .fi-logo-dark { display: none !important; }

/* Inverted mode: swap icon logo light/dark */
.fi-logo-tools-inverted .fi-logo-tools-icon-logo-light { display: none !important; }
.fi-logo-tools-inverted .fi-logo-tools-icon-logo-dark { display: block !important; }
.dark .fi-logo-tools-inverted .fi-logo-tools-icon-logo-light { display: block !important; }
.dark .fi-logo-tools-inverted .fi-logo-tools-icon-logo-dark { display: none !important; }

/* Topbar logo section: positioned container for background/border strip */
.fi-logo-tools-inverted .fi-topbar,
.fi-logo-tools-border .fi-topbar {
    position: relative;
}

/* Topbar logo section: background strip (inverted mode) */
.fi-logo-tools-topbar-bg {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background-color: var(--fi-logo-tools-bg, rgb(17 24 39));
    pointer-events: none;
    transition: width 150ms ease-in-out;
}
.dark .fi-logo-tools-topbar-bg {
    background-color: var(--fi-logo-tools-bg, rgb(255 255 255));
}

/* Topbar logo section: border-only strip (no background) */
.fi-logo-tools-topbar-border {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    pointer-events: none;
    transition: width 150ms ease-in-out;
}

/* Ensure topbar children sit above the background strip */
.fi-logo-tools-inverted .fi-topbar > :not(.fi-logo-tools-topbar-bg) {
    position: relative;
    z-index: 1;
}

/* Inverted mode: sidebar header background (non-topbar layout) */
.fi-logo-tools-inverted:not(.fi-body-has-topbar) .fi-sidebar-header-ctn {
    background-color: var(--fi-logo-tools-bg, rgb(17 24 39));
}
.dark .fi-logo-tools-inverted:not(.fi-body-has-topbar) .fi-sidebar-header-ctn {
    background-color: var(--fi-logo-tools-bg, rgb(255 255 255));
}

/* Inverted mode: sidebar header background (topbar layout, visible on mobile) */
.fi-logo-tools-inverted.fi-body-has-topbar .fi-sidebar-header {
    background-color: var(--fi-logo-tools-bg, rgb(17 24 39)) !important;
    --tw-ring-color: rgb(255 255 255 / 0.1);
}
.dark .fi-logo-tools-inverted.fi-body-has-topbar .fi-sidebar-header {
    background-color: var(--fi-logo-tools-bg, rgb(255 255 255)) !important;
    --tw-ring-color: rgb(3 7 18 / 0.05);
}

/* Inverted mode: text color for brand name fallback in topbar logo section */
.fi-logo-tools-inverted .fi-topbar-start .fi-logo {
    color: white;
}
.dark .fi-logo-tools-inverted .fi-topbar-start .fi-logo {
    color: rgb(3 7 18);
}

/* Inverted mode: collapse button color in topbar logo section */
.fi-logo-tools-inverted .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn {
    color: rgb(209 213 219); /* gray-300 */
}
.dark .fi-logo-tools-inverted .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn {
    color: rgb(55 65 81); /* gray-700 */
}

/* Inverted mode: text color for brand name fallback in sidebar (non-topbar) */
.fi-logo-tools-inverted:not(.fi-body-has-topbar) .fi-logo {
    color: white;
}
.dark .fi-logo-tools-inverted:not(.fi-body-has-topbar) .fi-logo {
    color: rgb(3 7 18);
}

/* Icon logo: constrain topbar-start width to match sidebar */
.fi-topbar-start[style*="width"] {
    transition: width 150ms ease-in-out;
    overflow: visible;
}

/* Icon logo active: hide full logo in topbar when sidebar is collapsed */
.fi-topbar-start.fi-logo-tools-icon-active > a { display: none !important; }
.fi-topbar-start.fi-logo-tools-icon-active > .fi-logo { display: none !important; }

/* Button position: right (move collapse button after logo in sidebar) */
.fi-logo-tools-btn-right .fi-sidebar-header-logo-ctn { order: 1; }
.fi-logo-tools-btn-right .fi-sidebar-close-collapse-sidebar-btn { order: 2; }
.fi-logo-tools-btn-right .fi-logo-tools-icon-logo-ctn { order: 1; }

/* Button position: right (topbar layout — ordering fallback) */
.fi-logo-tools-btn-right .fi-topbar-start > a { order: 1; }
.fi-logo-tools-btn-right .fi-topbar-start > .fi-logo { order: 1; }

/* Logo section padding */
.fi-logo-tools .fi-topbar-start {
    padding-inline-start: var(--fi-logo-tools-padding, 0);
}
.fi-logo-tools:not(.fi-body-has-topbar) .fi-sidebar-header {
    padding-inline-start: var(--fi-logo-tools-padding, 0);
}

/* Edge button: position on the logo section border */
.fi-logo-tools-btn-right .fi-topbar-start {
    position: relative;
}
.fi-logo-tools-btn-right .fi-topbar-collapse-sidebar-btn-ctn {
    position: absolute;
    inset-inline-end: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: auto !important;
}

/* Edge button: base styling */
.fi-logo-tools-btn-right .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn {
    background-color: white;
    border: 1px solid rgb(229 231 235);
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.dark .fi-logo-tools-btn-right .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

/* Edge button: smaller icon */
.fi-logo-tools-btn-right .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Edge button shape: circle (default) */
.fi-logo-tools-btn-circle .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn {
    border-radius: 9999px;
}

/* Edge button shape: rounded */
.fi-logo-tools-btn-rounded .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn {
    border-radius: 0.375rem;
}

/* Edge button shape: square */
.fi-logo-tools-btn-square .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn {
    border-radius: 0;
}