/**
 * IFINSTA Unified Sidebar
 *
 * Combines standard collapsible sidebar and personal profile sidebar.
 * Modern, minimal, with glass morphism and refined typography.
 * Updated with unified design tokens v1.0
 */

/* ==========================================================================
   SIDEBAR BASE (Check sidebar-collapsible.css for original)
   ========================================================================== */

.ifinsta-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--ifinsta-sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: var(--ifinsta-sidebar-bg);
    border-right: 1px solid var(--ifinsta-border);
    display: flex;
    flex-direction: column;
    z-index: var(--ifinsta-z-sidebar);
    overflow: hidden;
    transition: width var(--ifinsta-sidebar-transition), transform var(--ifinsta-sidebar-transition);
    transform-origin: left;
    font-family: var(--ifinsta-font-family);
}

.ifinsta-sidebar.ifinsta-sidebar--collapsed {
    width: var(--ifinsta-sidebar-collapsed-width);
}

/* Allow store-selector dropdown to escape sidebar clipping */
.ifinsta-sidebar.ifinsta-sidebar--dropdown-open {
    overflow: visible;
}

.ifinsta-sidebar.ifinsta-sidebar--footer-menu-open {
    overflow: visible;
}

.ifinsta-sidebar__resizer {
    display: none;
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: calc(var(--ifinsta-z-sidebar, 400) + 1);
    transition: background-color var(--ifinsta-sidebar-transition);
    /* Optional: visual indicator on hover */
}

.ifinsta-sidebar__resizer:hover,
.ifinsta-sidebar__resizer--active {
    background-color: var(--ifinsta-primary-alpha-50);
    /* ifinsta-primary with opacity */
}

/* Disable transitions during resize for smooth performance */
.ifinsta-sidebar--resizing {
    transition: none !important;
    -webkit-user-select: none;
    user-select: none;
}

/* ==========================================================================
   COLLAPSE TOGGLE — flat icon in header when expanded, floating circle on border when collapsed
   ========================================================================== */

/* Expanded state: flat icon button inside sidebar header flow */
.ifinsta-sidebar__collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--ifinsta-radius-md);
    border: none;
    background: transparent;
    color: var(--ifinsta-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ifinsta-sidebar__collapse-btn:hover {
    background: var(--ifinsta-bg-secondary);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__collapse-btn:focus-visible {
    outline: 2px solid var(--ifinsta-primary-500);
    outline-offset: -2px;
}

.ifinsta-sidebar__collapse-btn svg {
    width: 16px;
    height: 16px;
}

.ifinsta-sidebar__mobile-close {
    display: none;
    width: var(--ifinsta-touch-target-md);
    height: var(--ifinsta-touch-target-md);
    flex: 0 0 var(--ifinsta-touch-target-md);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--ifinsta-radius-md);
    background: transparent;
    color: var(--ifinsta-text-secondary);
    cursor: pointer;
}

.ifinsta-sidebar__mobile-close:hover,
.ifinsta-sidebar__mobile-close:focus-visible {
    background: var(--ifinsta-bg-secondary);
    color: var(--ifinsta-text);
}

.ifinsta-sidebar__mobile-close:focus-visible {
    outline: var(--ifinsta-border-width-2) solid var(--ifinsta-border-focus);
    outline-offset: calc(var(--ifinsta-border-width-2) * -1);
}

.ifinsta-sidebar__mobile-close .material-symbols-outlined {
    font-size: var(--ifinsta-icon-md);
}

/* Collapsed state: float on sidebar/content border as fixed circle with rotated chevron */
.ifinsta-sidebar--collapsed .ifinsta-sidebar__collapse-btn {
    position: fixed;
    top: 8px;
    inset-inline-start: var(--ifinsta-sidebar-layout-width, var(--ifinsta-sidebar-collapsed-width, 64px));
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--ifinsta-border);
    background: var(--ifinsta-bg-elevated);
    z-index: calc(var(--ifinsta-z-sidebar, 1400) + 1);
    transition: inset-inline-start var(--ifinsta-sidebar-transition),
        background-color 0.15s ease, color 0.15s ease;
}

[dir="rtl"] .ifinsta-sidebar--collapsed .ifinsta-sidebar__collapse-btn {
    transform: translateX(50%);
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__collapse-btn svg {
    transform: rotate(180deg);
}

/* When sidebar is hidden (mobile drawer closed), move to a restore position */
.ifinsta-app[data-sidebar-visible="false"] .ifinsta-sidebar__collapse-btn {
    position: fixed;
    top: 8px;
    inset-inline-start: 14px;
    transform: none;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--ifinsta-border);
    background: var(--ifinsta-bg-elevated);
    z-index: calc(var(--ifinsta-z-sidebar, 1400) + 1);
}

[dir="rtl"] .ifinsta-app[data-sidebar-visible="false"] .ifinsta-sidebar__collapse-btn {
    transform: none;
}

/* Hidden on mobile/tablet (< 1024px) */
@media (max-width: 1023px) {
    .ifinsta-sidebar__collapse-btn {
        display: none;
    }

    .ifinsta-sidebar__mobile-close {
        display: flex;
    }
}

.ifinsta-sidebar--light {
    background: var(--ifinsta-sidebar-bg);
    border-right: 1px solid var(--ifinsta-border);
}

/* ==========================================================================
   SIDEBAR HEADER - Ultra Minimal
   ========================================================================== */

/* Sidebar Header - Unified definition
   Height is tied to the same token the global topbar uses, so the two
   headers always line up — was hardcoded to 64px here and drifted out of
   sync when the topbar was compacted to 56px. */
.ifinsta-sidebar__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
    padding: 0 var(--ifinsta-space-3) 0 24px;
    height: 56px;
    min-height: 56px;
    border-bottom: 1px solid var(--ifinsta-border);
    background: var(--ifinsta-sidebar-bg);
    flex-shrink: 0;
    transition: all var(--ifinsta-sidebar-transition, 300ms ease);
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__header {
    padding: 0;
    justify-content: center;
}

.ifinsta-sidebar__header-actions {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-1, 4px);
    margin-left: auto;
    flex-shrink: 0;
}

.ifinsta-sidebar__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--ifinsta-radius-md, 6px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ifinsta-text-muted, #64748b);
    cursor: pointer;
    transition: all var(--ifinsta-sidebar-transition, 150ms ease);
}

.ifinsta-sidebar__search-btn:hover {
    background: var(--ifinsta-bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--ifinsta-text-primary, #0f172a);
}

.ifinsta-sidebar__search-btn:focus-visible {
    outline: 2px solid var(--ifinsta-primary, #2563eb);
    outline-offset: 2px;
}

.ifinsta-sidebar__search-btn .ifinsta-icon,
.ifinsta-sidebar__search-btn svg {
    width: 18px;
    height: 18px;
}

.ifinsta-sidebar__notification-btn {
    position: relative;
    text-decoration: none;
}

.ifinsta-sidebar__notification-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: var(--ifinsta-radius-full, 9999px);
    background-color: var(--ifinsta-danger, #ef4444);
    color: var(--ifinsta-white);
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 1.5px var(--ifinsta-sidebar-bg, #ffffff);
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__header-actions {
    display: none;
}

.ifinsta-sidebar__apps {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-0-5);
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-3);
    border-bottom: 1px solid var(--ifinsta-border);
}

.ifinsta-sidebar__apps:empty {
    display: none !important;
}

.ifinsta-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ifinsta-space-1-5) 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: opacity var(--ifinsta-sidebar-transition);
}

.ifinsta-sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    overflow: hidden;
    height: 40px;
    width: auto;
    transition: all var(--ifinsta-sidebar-transition, 300ms ease);
}

.ifinsta-sidebar__logo-img {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    transition: all var(--ifinsta-sidebar-transition, 300ms ease);
}

/* ==========================================================================
   SIDEBAR SMART SELECT
   ========================================================================== */
.ifinsta-smart-select--sidebar {
    padding: 0 var(--ifinsta-space-2);
}

.ifinsta-smart-select--sidebar .ifinsta-smart-select__control {
    background: transparent;
    border: 1px solid transparent;
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    border-radius: var(--ifinsta-radius-md, 6px);
    color: var(--ifinsta-sidebar-text);
    box-shadow: none;
    height: 38px;
}

.ifinsta-smart-select--sidebar .ifinsta-smart-select__control:hover {
    background: var(--ifinsta-sidebar-hover);
    color: var(--ifinsta-text-primary);
}

.ifinsta-smart-select--sidebar.ifinsta-smart-select--open .ifinsta-smart-select__control {
    background: var(--ifinsta-bg-elevated, var(--ifinsta-sidebar-bg));
    border-color: var(--ifinsta-border);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--ifinsta-text-primary);
    position: relative;
    z-index: calc(var(--ifinsta-z-max, 10000) + 1);
}

.ifinsta-smart-select--sidebar .ifinsta-smart-select__control-text {
    font-size: var(--ifinsta-text-sm);
    font-weight: 500;
}

.ifinsta-smart-select--sidebar .ifinsta-smart-select__control-icon {
    display: flex;
    color: inherit;
    width: 20px;
    height: 20px;
}

.ifinsta-smart-select--sidebar .ifinsta-smart-select__control-icon svg {
    display: none;
}

.ifinsta-smart-select--sidebar .ifinsta-smart-select__control-icon::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.ifinsta-smart-select--sidebar .ifinsta-smart-select__dropdown {
    background: var(--ifinsta-bg-elevated, var(--ifinsta-sidebar-bg));
    border: 1px solid var(--ifinsta-border);
    box-shadow: var(--ifinsta-shadow-lg);
    border-radius: var(--ifinsta-radius-md, 6px);
    left: var(--ifinsta-space-2);
    right: var(--ifinsta-space-2);
    width: calc(100% - var(--ifinsta-space-4));
}

.ifinsta-smart-select--sidebar.ifinsta-smart-select--open .ifinsta-smart-select__dropdown {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
    margin-top: -1px;
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar {
    padding-inline: 4px;
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar .ifinsta-smart-select__control {
    min-height: 52px;
    padding: 6px 2px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: center;
    border-color: transparent !important;
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar.ifinsta-smart-select--open .ifinsta-smart-select__control {
    background: var(--ifinsta-sidebar-active);
    color: var(--ifinsta-primary-600);
    border-radius: var(--ifinsta-radius-md, 6px);
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar .ifinsta-smart-select__control-text {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: 9px;
    font-weight: 600;
    line-height: 11px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar .ifinsta-smart-select__arrow {
    display: none;
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar .ifinsta-smart-select__control-icon {
    margin: 0 auto;
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar .ifinsta-smart-select__dropdown {
    width: 240px;
    min-width: 240px;
    left: calc(var(--ifinsta-sidebar-collapsed-width, 64px) + 8px);
    right: auto;
    top: 0;
    padding: 6px;
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-bg-elevated);
    box-shadow: var(--ifinsta-shadow-lg);
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar.ifinsta-smart-select--open .ifinsta-smart-select__dropdown {
    border-top-left-radius: var(--ifinsta-radius-md);
    border-top-right-radius: var(--ifinsta-radius-md);
    border-top-color: var(--ifinsta-border);
    margin-top: 0;
}

.ifinsta-sidebar--collapsed .ifinsta-smart-select--sidebar .ifinsta-smart-select__dropdown::before {
    content: "STORES";
    display: block;
    padding: 4px 10px 8px;
    font-size: 0.7857rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ifinsta-text-muted);
    border-bottom: 1px solid var(--ifinsta-border);
    margin-bottom: 4px;
}

/* Sidebar Logo Collapsed State */
.ifinsta-sidebar--collapsed .ifinsta-sidebar__logo {
    justify-content: center;
    width: 100%;
}

.ifinsta-sidebar__logo-icon {
    display: none;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__logo-img {
    display: none !important;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__logo-icon {
    display: block;
    height: 28px;
    width: 28px;
    object-fit: contain;
}

.ifinsta-sidebar__brand-wrap {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2, 8px);
    user-select: none;
    cursor: default;
}

.ifinsta-sidebar__brand {
    font-weight: 750;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--ifinsta-text-primary);
    letter-spacing: -0.04em;
    white-space: nowrap;
    user-select: none;
    cursor: default;
    transition: opacity var(--ifinsta-sidebar-transition);
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__brand {
    display: none !important;
}

.ifinsta-sidebar__mode {
    font-size: var(--ifinsta-caption);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-primary);
    background: var(--ifinsta-surface-2);
    padding: var(--ifinsta-space-1) var(--ifinsta-space-2);
    border-radius: var(--ifinsta-radius-sm);
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity var(--ifinsta-sidebar-transition);
}

/* A quiet overline, not a ruled header. The 1px border-bottom drew a hard
   line across the full rail at every section break — the strongest single
   contributor to the "rigid" read, since it chopped the nav into boxed
   registers. Whitespace and the muted uppercase micro-label separate the
   groups now, matching .ifinsta-in-app-sidebar__group-label. */
.ifinsta-sidebar__section-label {
    display: flex;
    align-items: center;
    padding: var(--ifinsta-space-3) var(--ifinsta-space-3) var(--ifinsta-space-1);
    margin: var(--ifinsta-space-2) 0 0;
    font-size: var(--ifinsta-font-size-overline, 0.6875rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ifinsta-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 1;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__mode {
    opacity: 0;
}

.ifinsta-sidebar__apps {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-bottom: 1px solid var(--ifinsta-border);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ifinsta-sidebar__apps::-webkit-scrollbar {
    display: none;
}

.ifinsta-sidebar__app {
    width: 34px;
    height: 34px;
    border-radius: var(--ifinsta-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ifinsta-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    transition: background-color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth),
        border-color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth),
        color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth);
    flex-shrink: 0;
}

.ifinsta-sidebar__app:hover {
    background: var(--ifinsta-sidebar-hover);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__app--active {
    background: var(--ifinsta-sidebar-active);
    color: var(--ifinsta-primary);
    border-color: var(--ifinsta-primary);
}

.ifinsta-sidebar__app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ifinsta-sidebar__app-icon svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   SIDEBAR NAVIGATION
   ========================================================================== */

.ifinsta-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ifinsta-space-2-5) var(--ifinsta-space-2) var(--ifinsta-space-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: opacity var(--ifinsta-sidebar-transition);
}

.ifinsta-sidebar__nav::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   COLLAPSIBLE MODULE - Ultra Clean
   ========================================================================== */

/* 2px of air between rows. Flush-stacked rows read as a ledger; the small
   gap lets each hover/active pill resolve as its own object. Applied as a
   margin rather than a flex `gap` on .ifinsta-sidebar__nav, because that
   container scrolls — making it a flex column would let items shrink to fit
   instead of overflowing into the scroll. */
.ifinsta-sidebar__module {
    margin-bottom: 2px;
}

.ifinsta-sidebar__module-header {
    /* Aligned to the in-app sidebar's reference values — see the matching
       comment on .ifinsta-sidebar__link above. */
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-gray-700);
    font-size: 14px;
    line-height: 1.35;
    /* 500 at rest, 600 when active. Every row sharing one weight left the
       active row with nothing but colour to distinguish it, so the accent
       bar had to do all the work. */
    font-weight: 500;
    font-family: var(--ifinsta-font-family);
    cursor: pointer;
    /* Named properties rather than `all`: `all` also animated padding,
       flex-direction fallout, and the ::before geometry on every collapse,
       which is what made the rail snap instead of settle. Padding stays in
       the list on the slower sidebar duration so collapsing still glides. */
    transition: background-color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth),
        color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth),
        padding var(--ifinsta-sidebar-transition);
    text-align: left;
    position: relative;
}

.ifinsta-sidebar__module-header:hover {
    background: var(--ifinsta-sidebar-hover);
    color: var(--ifinsta-gray-900);
}

/* Active reads as a seated, tinted field — the same treatment the in-app
   sidebar and the flyout submenu already use. Replaces the hard 3x24px
   accent rectangle, which was the rail's single most rigid element. */
.ifinsta-sidebar__module-header--active {
    background: var(--ifinsta-sidebar-active);
    color: var(--ifinsta-primary-600);
    font-weight: 600;
}

/* Module Name (P2-21: 2-line wrapping instead of truncation) */
.ifinsta-sidebar__module-name {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    transition: opacity var(--ifinsta-sidebar-transition);
}

/* Chevron Icon - Sleek Animation */
.ifinsta-sidebar__chevron {
    width: 14px;
    height: 14px;
    color: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform var(--ifinsta-sidebar-transition);
}

[data-expanded="true"]>.ifinsta-sidebar__module-header .ifinsta-sidebar__chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

[data-expanded="true"]>.ifinsta-sidebar__submenu {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

/* Icon — sized to match the in-app sidebar's 20px icons */
.ifinsta-sidebar__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--ifinsta-gray-500);
    opacity: 1;
    transition: all var(--ifinsta-sidebar-transition);
}

.ifinsta-sidebar__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.ifinsta-sidebar__module-header:hover .ifinsta-sidebar__icon,
.ifinsta-sidebar__module-header--active .ifinsta-sidebar__icon {
    color: currentColor;
}

/* ==========================================================================
   SUBMENU - Smooth Collapse
   ========================================================================== */

.ifinsta-sidebar__submenu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 0;
    overflow: hidden;

    transform: translateY(-6px);
    transition: max-height var(--ifinsta-sidebar-transition),
        opacity var(--ifinsta-sidebar-transition),
        transform var(--ifinsta-sidebar-transition);
    margin: 4px 0 var(--ifinsta-space-2) var(--ifinsta-space-6);
    padding: 2px 0 2px var(--ifinsta-space-2);
    /* The tree line stays — it earns its keep for scanning nested items —
       but at border-light rather than secondary-200 it guides instead of
       fencing. */
    border-left: 1px solid var(--ifinsta-border-light, var(--ifinsta-border));
}

/* ==========================================================================
   COLLAPSED SIDEBAR — FLYOUT SUBMENU
   At 64px wide there's no room to expand a submenu inline: doing so used to
   cram sub-items (some modules have up to 9) into a ~28px-wide sliver of
   unreadable, wrapped text. sidebar-flyout.js repositions the SAME submenu
   element as a floating panel beside the sidebar on hover/focus/click
   instead, toggling this class and setting inline top/left (computed from
   the trigger's real position — can't be done in pure CSS since different
   modules sit at different scroll offsets in the nav list).
   position:fixed is required, not absolute: .ifinsta-sidebar has its own
   overflow:hidden, which would otherwise clip anything positioned relative
   to it.
   ========================================================================== */

/* sidebar.js's inline click-to-expand still runs underneath this (harmless
   no-op visually) — it's simpler to let it keep setting data-expanded and
   suppress the effect here than to fight over which script owns the click. */
.ifinsta-sidebar--collapsed [data-expanded="true"]>.ifinsta-sidebar__submenu:not(.ifinsta-sidebar__submenu--flyout) {
    max-height: 0 !important;
    opacity: 0;
}

.ifinsta-sidebar__submenu--flyout {
    position: fixed;
    max-height: none;
    overflow: visible;
    transform: none;
    opacity: 1;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: none;
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    /* Theme-aware surface + text (themes/dark.css redefines both under
       [data-theme="dark"]) — a hardcoded white background here would show
       as a jarring bright popup against a dark sidebar. */
    background: var(--ifinsta-bg-elevated);
    color: var(--ifinsta-text-primary);
    min-width: 200px;
    max-width: 280px;
    z-index: calc(var(--ifinsta-z-sidebar, 1400) + 2);
}

/* Module name header — the icon rail gives no other indication of whose
   children these are once the panel is floating on its own. */
.ifinsta-sidebar__submenu--flyout::before {
    content: attr(data-flyout-label);
    display: block;
    padding: 4px 10px 8px;
    font-size: 0.7857rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ifinsta-text-muted);
    border-bottom: 1px solid var(--ifinsta-border);
    margin-bottom: 4px;
}

/* Only the padding differs in the flyout now. The two overrides that used
   to live here — hiding the active dot and substituting a background for
   it — are gone: the base .ifinsta-sidebar__subitem rules give the inline
   and flyout submenus the same tinted active field, so there is nothing
   left to work around. */
.ifinsta-sidebar__submenu--flyout .ifinsta-sidebar__subitem {
    padding: 8px 10px;
}

/* Simple label tooltip for single-link items (no children) when collapsed —
   same position:fixed reasoning as the flyout above. A fixed dark
   background (the usual "dark tooltip regardless of site theme" pattern)
   would have low contrast against an already-dark page in dark mode, so
   this uses the same elevated-surface + border treatment as the flyout
   instead, which contrasts correctly in both themes. */
.ifinsta-sidebar__tooltip {
    position: fixed;
    padding: 6px 10px;
    background: var(--ifinsta-bg-elevated);
    color: var(--ifinsta-text-primary);
    border: 1px solid var(--ifinsta-border);
    font-size: 0.7857rem;
    font-weight: 500;
    border-radius: var(--ifinsta-radius-sm);
    white-space: nowrap;
    pointer-events: none;
    z-index: calc(var(--ifinsta-z-sidebar, 1400) + 2);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.ifinsta-sidebar__tooltip--visible {
    opacity: 1;
    transform: translateX(0);
}

/* Subitem Links - Ultra Clean */
.ifinsta-sidebar__subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
    min-height: 34px;
    padding: 6px 12px;
    margin: 1px 0;
    color: var(--ifinsta-text-secondary);
    font-size: 0.925rem;
    line-height: 1.35;
    font-weight: 500;
    font-family: var(--ifinsta-font-family);
    text-decoration: none;
    transition: background-color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth),
        color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth);
    position: relative;
    border-radius: var(--ifinsta-radius-md, 6px);
}

.ifinsta-sidebar__subitem:hover {
    color: var(--ifinsta-gray-900);
    background: var(--ifinsta-sidebar-hover);
}

/* Tinted field instead of the 5px dot in the gutter. This unifies the
   inline submenu with the flyout submenu, which already used exactly this
   treatment because the dot had no room to render there. */
.ifinsta-sidebar__subitem--active {
    background: var(--ifinsta-sidebar-active);
    color: var(--ifinsta-primary-600);
    font-weight: 600;
}

.ifinsta-sidebar__subitem--disabled {
    color: var(--ifinsta-text-muted);
    cursor: not-allowed;
}

.ifinsta-sidebar__subitem-text {
    min-width: 0;
    flex: 1;
}

/* ==========================================================================
   SINGLE LINK (No Sub-modules)
   ========================================================================== */

.ifinsta-sidebar__link {
    /* Font/row-height/gap/icon size aligned to the in-app (property module)
       sidebar's values as reference — see .ifinsta-prop-sidebar__item in
       property.css: 14px font, 8px/16px padding, 0 gap between rows. No
       min-height: this element is box-sizing:content-box (the default), so
       a min-height sets the CONTENT box's floor, not the total rendered
       height — combined with 16px of vertical padding that silently adds
       16px on top of whatever height value gets set here. The in-app
       reference doesn't set min-height either; padding (8+8) plus the 20px
       icon already sum to exactly 36px with nothing fighting box-sizing. */
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: 8px 16px;
    /* See .ifinsta-sidebar__module for why this is a margin, not a gap. */
    margin-bottom: 2px;
    color: var(--ifinsta-gray-700);
    font-size: 14px;
    line-height: 1.35;
    /* Matches .ifinsta-sidebar__module-header: 500 at rest, 600 active. A
       single link and a module header sit in the same list and must not
       render at different weights. */
    font-weight: 500;
    font-family: var(--ifinsta-font-family);
    text-decoration: none;
    border-radius: var(--ifinsta-radius-md);
    /* See .ifinsta-sidebar__module-header for why these are named rather
       than `all`. */
    transition: background-color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth),
        color var(--ifinsta-duration-fast) var(--ifinsta-ease-smooth),
        padding var(--ifinsta-sidebar-transition);
    position: relative;
}

.ifinsta-sidebar__link:hover {
    background: var(--ifinsta-sidebar-hover);
    color: var(--ifinsta-gray-900);
}

.ifinsta-sidebar__link--active {
    background: var(--ifinsta-sidebar-active);
    color: var(--ifinsta-primary-600);
    font-weight: 600;
}

.ifinsta-sidebar__link--disabled {
    color: var(--ifinsta-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

.ifinsta-sidebar__link-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--ifinsta-sidebar-transition);
}

/* Collapsed app rail: retain recognition by pairing each icon with its name.
   The existing name nodes remain the single source of truth for expanded,
   collapsed, tooltip, and assistive-technology labels. */
.ifinsta-sidebar--collapsed .ifinsta-sidebar__nav {
    padding-inline: 4px;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__module-header,
.ifinsta-sidebar--collapsed .ifinsta-sidebar__link {
    min-height: 52px;
    padding: 6px 2px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__module-name,
.ifinsta-sidebar--collapsed .ifinsta-sidebar__link-text {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: 9px;
    font-weight: 600;
    line-height: 11px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__chevron,
.ifinsta-sidebar--collapsed .ifinsta-sidebar__badge,
.ifinsta-sidebar--collapsed .ifinsta-sidebar__highlight-dot {
    display: none;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   BADGES - Minimal & Elegant
   ========================================================================== */

.ifinsta-sidebar__badge {
    font-size: 0.7857rem;
    padding: 2px var(--ifinsta-space-1-5);
    border-radius: var(--ifinsta-radius-sm);
    font-weight: var(--ifinsta-font-semibold);
    letter-spacing: 0.04em;
    background: var(--ifinsta-warning);
    color: var(--ifinsta-white);
    box-shadow: none;
}

.ifinsta-sidebar__subbadge {
    font-size: 0.7857rem;
    padding: 2px var(--ifinsta-space-1-5);
    border-radius: var(--ifinsta-radius-sm);
    margin-left: auto;
    background: var(--ifinsta-warning);
    color: var(--ifinsta-white);
    box-shadow: none;
}

.ifinsta-sidebar__separator {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: var(--ifinsta-space-3) var(--ifinsta-space-3) var(--ifinsta-space-2);
    padding: 0 var(--ifinsta-space-1);
    border-bottom: 1px solid var(--ifinsta-border);
}

.ifinsta-sidebar__separator::before {
    display: none;
}

.ifinsta-sidebar__separator-text {
    color: var(--ifinsta-gray-700);
    font-size: 0.8571rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    padding: 0;
}

/* From sidebar-personal-profile.css - Generic Badges */
.ifinsta-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--ifinsta-space-1) var(--ifinsta-space-2);
    border-radius: var(--ifinsta-radius-sm);
    font-size: var(--ifinsta-caption);
    font-weight: var(--ifinsta-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ifinsta-badge--primary {
    background: var(--ifinsta-primary-alpha-10);
    color: var(--ifinsta-primary);
}

.ifinsta-badge--accent {
    background: var(--ifinsta-success-alpha-10);
    color: var(--ifinsta-success);
}

/* ==========================================================================
   HIGHLIGHTED MODULES - Dashboard Context Indicators
   ========================================================================== */

.ifinsta-sidebar__highlight-dot {
    width: 6px;
    height: 6px;
    background: var(--ifinsta-success);
    border-radius: 50%;
    flex-shrink: 0;
    animation: none;
    box-shadow: none;
}

@keyframes highlight-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.9);
    }
}

.ifinsta-sidebar__module-header--highlighted,
.ifinsta-sidebar__link--highlighted {
    background: transparent;
    color: var(--ifinsta-gray-700);
}

.ifinsta-sidebar__module-header--highlighted:hover,
.ifinsta-sidebar__link--highlighted:hover {
    background: var(--ifinsta-sidebar-hover);
    color: var(--ifinsta-gray-900);
}

.ifinsta-sidebar__subitem--highlighted {
    color: var(--ifinsta-success);
    font-weight: var(--ifinsta-font-semibold);
}

/* ==========================================================================
   SIDEBAR HEADER - Brand Link
   ========================================================================== */

.ifinsta-sidebar__brand-link {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    text-decoration: none;
    transition: all var(--ifinsta-sidebar-transition);
}

/* ==========================================================================
   SIDEBAR FOOTER - Enhanced
   ========================================================================== */

/* ==========================================================================
    SIDEBAR FOOTER - Minimal & Creative
    ========================================================================== */

.ifinsta-sidebar__footer {
    padding: var(--ifinsta-space-2) var(--ifinsta-space-2) var(--ifinsta-space-3);
    background: var(--ifinsta-sidebar-bg);
    border-top: 1px solid var(--ifinsta-border);
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
    flex-shrink: 0;
    /* Was transition: none — padding/background/border-top all changed
       value on collapse (see the .ifinsta-sidebar--collapsed rule below)
       but snapped instantly instead of animating with the rest of the
       sidebar's collapse motion. */
    transition: padding var(--ifinsta-sidebar-transition),
        background-color var(--ifinsta-sidebar-transition),
        border-color var(--ifinsta-sidebar-transition);
}

/* ==========================================================================
   UPGRADE CTA — sidebar plan/subscription display
   ========================================================================== */

.ifinsta-sidebar__upgrade-cta {
    padding: 0;
    margin: 0;
}

/* Trial variant */
.ifinsta-upgrade-cta--trial {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    background: var(--ifinsta-surface-2);
    border: var(--ifinsta-border-width) solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    transition: var(--ifinsta-transition-fast);
}

.ifinsta-upgrade-cta--trial:hover {
    background: var(--ifinsta-secondary-100);
    border-color: var(--ifinsta-secondary-300);
    transform: none;
    box-shadow: none;
}

.ifinsta-upgrade-cta__icon {
    width: var(--ifinsta-space-10);
    height: var(--ifinsta-space-10);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-warning-100);
    color: var(--ifinsta-warning-600);
    flex-shrink: 0;
    transition: var(--ifinsta-transition-fast);
}

.ifinsta-upgrade-cta--trial:hover .ifinsta-upgrade-cta__icon {
    background: var(--ifinsta-warning-200);
    color: var(--ifinsta-warning-700);
}

.ifinsta-upgrade-cta__content {
    flex: 1;
    min-width: 0;
}

.ifinsta-upgrade-cta__title {
    display: block;
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
    line-height: 1.3;
    margin-bottom: var(--ifinsta-space-1);
}

.ifinsta-upgrade-cta__subtitle {
    display: block;
    font-size: var(--ifinsta-text-xs);
    color: var(--ifinsta-text-secondary);
}

/* Usage progress bar variant */
.ifinsta-upgrade-cta--limit {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    background: var(--ifinsta-bg-surface);
    border: var(--ifinsta-border-width) solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    padding: 0;
    box-shadow: none;
    position: relative;
    isolation: isolate;
}

.ifinsta-upgrade-cta__progress {
    height: var(--ifinsta-space-1-5);
    background: var(--ifinsta-bg-tertiary);
    border-radius: var(--ifinsta-radius-full);
    overflow: hidden;
    position: relative;
    display: none;
}

.ifinsta-upgrade-cta__progress-fill {
    height: 100%;
    width: 0;
    background: var(--ifinsta-danger-500);
    border-radius: var(--ifinsta-radius-full);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left;
    position: relative;
}

.ifinsta-upgrade-cta__progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.ifinsta-upgrade-cta--limit:hover .ifinsta-upgrade-cta__progress-fill {
    filter: brightness(1.1);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.ifinsta-upgrade-cta__text {
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-text-secondary);
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ifinsta-space-2);
}

.ifinsta-upgrade-cta--limit .ifinsta-btn {
    transition: var(--ifinsta-transition-fast);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.ifinsta-upgrade-cta--limit .ifinsta-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s;
}

.ifinsta-upgrade-cta--limit .ifinsta-btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.ifinsta-upgrade-cta--limit:hover .ifinsta-btn {
    background: var(--ifinsta-primary-700);
    box-shadow: var(--ifinsta-shadow-primary);
    transform: translateY(0);
}

/* Default subtle upgrade link */
.ifinsta-upgrade-cta--default {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    background: var(--ifinsta-primary-alpha-08);
    border: var(--ifinsta-border-width) solid var(--ifinsta-primary-200);
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-primary-700);
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-medium);
    text-decoration: none;
    transition: var(--ifinsta-transition-fast);
    position: relative;
    overflow: hidden;
}

.ifinsta-upgrade-cta--default::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.5s;
}

.ifinsta-upgrade-cta--default:hover::before {
    transform: translateX(100%);
}

.ifinsta-upgrade-cta--default:hover {
    background: var(--ifinsta-primary-alpha-15);
    border-color: var(--ifinsta-primary-300);
    color: var(--ifinsta-primary-800);
    transform: none;
    box-shadow: none;
}

.ifinsta-upgrade-cta--default svg {
    transition: transform var(--ifinsta-transition-fast);
}

.ifinsta-upgrade-cta--default:hover svg {
    transform: translateX(3px);
}

/* Active plan variant */
.ifinsta-upgrade-cta--active-plan {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-3);
    background: transparent;
    border: none;
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-text-muted);
    text-decoration: none;
    transition: var(--ifinsta-transition-fast);
}

.ifinsta-upgrade-cta--active-plan:hover {
    background: var(--ifinsta-secondary-50);
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.ifinsta-upgrade-cta--active-plan .ifinsta-upgrade-cta__icon {
    width: 24px;
    height: 24px;
    border-radius: var(--ifinsta-radius-sm);
    background: transparent;
    color: var(--ifinsta-success-500);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ifinsta-upgrade-cta--active-plan:hover .ifinsta-upgrade-cta__icon {
    background: transparent;
    color: var(--ifinsta-success-600);
}

.ifinsta-upgrade-cta--active-plan .ifinsta-upgrade-cta__title {
    color: var(--ifinsta-text-muted);
    font-weight: var(--ifinsta-font-medium);
    font-size: var(--ifinsta-text-xs);
    margin-bottom: 0;
}

.ifinsta-upgrade-cta--active-plan .ifinsta-upgrade-cta__subtitle {
    color: var(--ifinsta-text-muted);
    font-size: var(--ifinsta-text-xs);
    margin-bottom: 0;
    opacity: 0.8;
}

/* Focus states */
.ifinsta-upgrade-cta--trial:focus,
.ifinsta-upgrade-cta--default:focus,
.ifinsta-upgrade-cta--active-plan:focus {
    outline: var(--ifinsta-space-0-5) solid var(--ifinsta-primary-500);

}

.ifinsta-upgrade-cta--limit .ifinsta-btn:focus {
    outline: var(--ifinsta-space-0-5) solid var(--ifinsta-primary-500);

}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ifinsta-upgrade-cta__progress-fill {
        animation: none;
        transition: width 0.3s ease;
    }

    .ifinsta-upgrade-cta--limit::before,
    .ifinsta-upgrade-cta--default::before {
        animation: none;
    }

    .ifinsta-upgrade-cta--limit:hover,
    .ifinsta-upgrade-cta--default:hover,
    .ifinsta-upgrade-cta--trial:hover,
    .ifinsta-upgrade-cta--active-plan:hover {
        transform: none;
    }
}

/* Loading state */
.ifinsta-upgrade-cta--limit .ifinsta-btn.ifinsta-btn--loading {
    pointer-events: none;
    opacity: 0.7;
}

.ifinsta-upgrade-cta--limit .ifinsta-btn.ifinsta-btn--loading::after {
    content: '';
    position: absolute;
    width: var(--ifinsta-space-3);
    height: var(--ifinsta-space-3);
    margin: auto;
    border: var(--ifinsta-space-0-5) solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   QUICK LINKS
   ═══════════════════════════════════════════════════════════════════════ */
.ifinsta-sidebar__quick-links {
    display: flex;
    justify-content: center;
    gap: var(--ifinsta-space-2);
    padding-top: var(--ifinsta-space-1);
}

.ifinsta-sidebar__quick-link {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ifinsta-gray-400);
    border-radius: var(--ifinsta-radius-full);
    transition: background-color var(--ifinsta-sidebar-transition), color var(--ifinsta-sidebar-transition);
    opacity: 1;
}

.ifinsta-sidebar__quick-link:hover {
    background: var(--ifinsta-gray-100);
    color: var(--ifinsta-gray-700);
}

.ifinsta-sidebar__quick-link--highlight {
    color: var(--ifinsta-primary-500);
}

.ifinsta-sidebar__quick-link--highlight:hover {
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary-600);
}

.ifinsta-sidebar__footer-menu {
    display: block;
    width: 100%;
}

.ifinsta-sidebar__footer-account-row {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-1);
    width: 100%;
}

.ifinsta-sidebar__footer-menu-trigger {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-2);
    border: 1px solid transparent;
    border-radius: var(--ifinsta-radius-md);
    background: transparent;
    color: var(--ifinsta-text-primary);
    cursor: pointer;
    text-align: start;
}

.ifinsta-sidebar__footer-menu-trigger:hover,
.ifinsta-sidebar__footer-menu-trigger[aria-expanded="true"] {
    background: var(--ifinsta-secondary-100);
    border-color: var(--ifinsta-border);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__account-avatar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    overflow: hidden;
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-primary);
    color: var(--ifinsta-text-inverse);
    font-size: var(--ifinsta-text-sm);
    font-weight: var(--ifinsta-font-semibold);
    letter-spacing: 0.02em;
}

.ifinsta-sidebar__account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ifinsta-sidebar__account-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ifinsta-sidebar__account-name,
.ifinsta-sidebar__account-plan {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ifinsta-sidebar__account-name {
    color: var(--ifinsta-text-primary);
    font-size: var(--ifinsta-text-sm);
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-sidebar__account-plan {
    color: var(--ifinsta-text-muted);
    font-size: var(--ifinsta-text-xs);
}

.ifinsta-sidebar__account-chevron {
    flex: 0 0 auto;
    color: var(--ifinsta-text-muted);
}

.ifinsta-sidebar__account-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 34px;
    flex: 0 0 24px;
    padding: 0;
    border: 0;
    border-radius: var(--ifinsta-radius-md);
    background: transparent;
    color: var(--ifinsta-text-muted);
    cursor: pointer;
}

.ifinsta-sidebar__account-menu-toggle:hover,
.ifinsta-sidebar__account-menu-toggle:focus-visible,
.ifinsta-sidebar__account-menu-toggle[aria-expanded="true"] {
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__account-menu-toggle:focus-visible {
    outline: 2px solid var(--ifinsta-primary-500);
    outline-offset: 1px;
}

.ifinsta-sidebar__footer-download-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
    color: var(--ifinsta-text-secondary);
    text-decoration: none;
}

.ifinsta-sidebar__footer-download-action:hover,
.ifinsta-sidebar__footer-download-action:focus-visible {
    border-color: var(--ifinsta-border-focus);
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__footer-download-action:focus-visible {
    outline: 2px solid var(--ifinsta-primary-500);
    outline-offset: 2px;
}

.ifinsta-sidebar__footer-download-action .material-symbols-outlined {
    font-size: 19px;
}

.ifinsta-sidebar__footer-menu-trigger:focus-visible {
    outline: 2px solid var(--ifinsta-primary-500);
    outline-offset: 2px;
}

.ifinsta-sidebar__footer-menu-card {
    position: fixed;
    z-index: 1200;
    width: min(304px, calc(100vw - 24px));
    max-height: min(540px, calc(100dvh - 24px));
    overflow-y: auto;
    padding: var(--ifinsta-space-1-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    box-shadow: var(--ifinsta-shadow-lg);
}

.ifinsta-sidebar__footer-menu-card[hidden] {
    display: none;
}

.ifinsta-sidebar__footer-menu-email {
    padding: var(--ifinsta-space-2) var(--ifinsta-space-2-5);
    overflow: hidden;
    color: var(--ifinsta-text-secondary);
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ifinsta-sidebar__footer-menu-divider {
    height: 1px;
    margin: var(--ifinsta-space-1) 0;
    background: var(--ifinsta-border);
}

.ifinsta-sidebar__footer-menu-items {
    display: grid;
    gap: var(--ifinsta-space-0-5);
}

.ifinsta-sidebar__footer-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    min-height: 36px;
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-2-5);
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-text-primary);
    text-decoration: none;
    font-size: var(--ifinsta-text-sm);
    font-weight: var(--ifinsta-font-medium);
    font-family: inherit;
    text-align: start;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ifinsta-sidebar__footer-menu-item:hover,
.ifinsta-sidebar__footer-menu-item:focus-visible {
    background: var(--ifinsta-secondary-100);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__footer-menu-item--theme {
    cursor: default;
}

.ifinsta-sidebar__footer-menu-item--theme:hover {
    background: transparent;
}

.ifinsta-sidebar__footer-menu-theme-switcher {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.ifinsta-sidebar__footer-menu-theme-switcher .ifinsta-theme-switcher__label {
    display: none;
}

.ifinsta-sidebar__footer-menu-theme-switcher .ifinsta-theme-switcher__trigger {
    width: 2.25rem;
    padding: var(--ifinsta-space-1);
}

.ifinsta-sidebar__footer-menu-item:focus-visible {
    outline: 2px solid var(--ifinsta-primary-500);
    outline-offset: -2px;
}

.ifinsta-sidebar__footer-menu-item .material-symbols-outlined {
    font-size: 20px;
}

.ifinsta-sidebar__footer-menu-item>span:nth-child(2) {
    flex: 1;
}

.ifinsta-sidebar__footer-menu-arrow {
    color: var(--ifinsta-text-muted);
}

.ifinsta-sidebar__update-nudge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: var(--ifinsta-space-0-5) var(--ifinsta-space-1-5);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-primary-100);
    color: var(--ifinsta-primary-700);
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-bold);
    line-height: 1.2;
}

.ifinsta-sidebar__footer-menu-item--attention:hover,
.ifinsta-sidebar__footer-menu-item--attention:focus-visible {
    background: var(--ifinsta-warning-100);
}

.ifinsta-sidebar__footer-menu-status {
    margin-left: auto;
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-semibold);
    line-height: 1;
    border-radius: var(--ifinsta-radius-full);
    padding: 0.25rem 0.45rem;
}

.ifinsta-sidebar__footer-menu-status--good {
    background: var(--ifinsta-success-100);
    color: var(--ifinsta-success-700);
}

.ifinsta-sidebar__footer-menu-status--warning {
    background: var(--ifinsta-warning-100);
    color: var(--ifinsta-warning-700);
}

.ifinsta-sidebar__update-nudge[hidden] {
    display: none;
}

.ifinsta-sidebar__update-nudge--dot {
    position: absolute;
    top: -3px;
    right: -3px;
    display: block;
    min-width: 0;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 2px solid var(--ifinsta-surface);
    background: var(--ifinsta-primary-600);
}

.ifinsta-sidebar__update-nudge--dot[hidden] {
    display: none;
}

.ifinsta-sidebar__footer-submenu {
    position: fixed;
    z-index: 1201;
    width: min(264px, calc(100vw - 24px));
    max-height: min(420px, calc(100dvh - 24px));
    overflow-y: auto;
    padding: var(--ifinsta-space-2);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    box-shadow: var(--ifinsta-shadow-lg);
}

.ifinsta-sidebar__footer-submenu[hidden] {
    display: none;
}

.ifinsta-sidebar__footer-submenu-title {
    padding: var(--ifinsta-space-2) var(--ifinsta-space-2-5);
    color: var(--ifinsta-text-secondary);
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-sidebar__footer-submenu form {
    margin: 0;
}

.ifinsta-sidebar__footer-submenu-item {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-2-5);
    border: 0;
    border-radius: var(--ifinsta-radius-md);
    background: transparent;
    color: var(--ifinsta-text-primary);
    font: inherit;
    font-size: var(--ifinsta-text-sm);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.ifinsta-sidebar__footer-submenu-item:hover,
.ifinsta-sidebar__footer-submenu-item:focus-visible {
    background: var(--ifinsta-secondary-100);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__footer-submenu-item:focus-visible {
    outline: 2px solid var(--ifinsta-primary-500);
    outline-offset: -2px;
}

.ifinsta-sidebar__footer-submenu-item .material-symbols-outlined {
    color: var(--ifinsta-primary-600);
    font-size: 18px;
}

/* Collapsed State Handling */
.ifinsta-sidebar--collapsed .ifinsta-sidebar__footer {
    padding: var(--ifinsta-space-2);
    background: transparent;
    border-top: none;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__footer-menu {
    display: flex;
    justify-content: center;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__footer-account-row {
    justify-content: center;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__footer-menu-trigger {
    width: 48px;
    min-height: 48px;
    justify-content: center;
    padding: var(--ifinsta-space-1);
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__account-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__account-copy,
.ifinsta-sidebar--collapsed .ifinsta-sidebar__account-menu-toggle,
.ifinsta-sidebar--collapsed .ifinsta-sidebar__footer-download-action {
    display: none;
}

/* At the 64px collapsed rail, a horizontal row of up to 4 quick-links
   (40px each + gaps) needs ~184px — nearly 3x what's available. Without
   flex-shrink:0 the icons got visually squashed to ~18px, and even then
   the first and last still clipped off both edges of the sidebar (its
   overflow:hidden cut them rather than wrapping). Stacking vertically
   instead scales to any number of quick-links without ever overflowing,
   and matches the icon-rail's existing vertical layout language. */
.ifinsta-sidebar--collapsed .ifinsta-sidebar__quick-links {
    flex-direction: column;
    align-items: center;
    gap: var(--ifinsta-space-1);
}

.ifinsta-sidebar--collapsed .ifinsta-upgrade-cta {
    padding: var(--ifinsta-space-2);
    border: none;
    background: transparent;
    width: auto;
}

.ifinsta-sidebar__store-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-2);
    margin-top: var(--ifinsta-space-1);
    background: var(--ifinsta-primary-alpha-10);
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-primary);
    font-size: var(--ifinsta-caption);
    font-weight: var(--ifinsta-font-medium);
}

.ifinsta-sidebar__store-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__store-indicator {
    padding: var(--ifinsta-space-2);
    width: 36px;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__store-name,
.ifinsta-sidebar--collapsed .ifinsta-sidebar__footer-link span:not(.ifinsta-sidebar__icon) {
    display: none;
}

.ifinsta-sidebar__footer-link {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-4);
    color: var(--ifinsta-text-secondary);
    font-size: var(--ifinsta-body);
    font-weight: var(--ifinsta-font-medium);
    font-family: var(--ifinsta-font-family);
    text-decoration: none;
    border-radius: var(--ifinsta-radius-md);
    transition: all var(--ifinsta-sidebar-transition);
}

.ifinsta-sidebar__footer-link:hover {
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-primary);
}

.ifinsta-sidebar__footer-link .ifinsta-sidebar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__footer-link {
    justify-content: center;
    padding: var(--ifinsta-space-2);
}

/* ==========================================================================
    From sidebar-personal-profile.css - Upgrade CTA / Extras
    ========================================================================== */

/* Upgrade CTA */
.ifinsta-sidebar__upgrade {
    margin-bottom: var(--ifinsta-space-3);
}

.ifinsta-sidebar__upgrade-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    background: var(--ifinsta-primary);
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-white);
    font-size: var(--ifinsta-body);
    font-weight: var(--ifinsta-font-semibold);
    font-family: var(--ifinsta-font-family);
    text-decoration: none;
    transition: all var(--ifinsta-sidebar-transition);
}

.ifinsta-sidebar__upgrade-link:hover {
    background: var(--ifinsta-primary-hover);
    transform: none;
    box-shadow: none;
}

.ifinsta-sidebar__upgrade-link:active {
    transform: translateY(0);
}

.ifinsta-sidebar__upgrade-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.ifinsta-sidebar__upgrade-icon svg {
    width: 100%;
    height: 100%;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__upgrade-text {
    display: none;
}

.ifinsta-sidebar--collapsed .ifinsta-sidebar__upgrade-link {
    padding: var(--ifinsta-space-2);
}

/* ==========================================================================
    RESPONSIVE
    ========================================================================== */

/* Mobile/Tablet (< 1024px): Show store indicator */
@media (max-width: 1023px) {
    .ifinsta-sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        width: min(85vw, 320px);
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        display: none !important;
        transform: translateX(calc(-100% * var(--ifinsta-dir-multiplier, 1)));
        z-index: var(--ifinsta-z-sidebar, 500);
    }

    .ifinsta-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: var(--ifinsta-black-alpha-40, rgba(0, 0, 0, 0.4));
        z-index: calc(var(--ifinsta-z-sidebar, 500) - 1);
        display: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .ifinsta-sidebar.ifinsta-sidebar--open,
    .ifinsta-sidebar[data-visible="true"].ifinsta-sidebar--open {
        display: flex !important;
        transform: translateX(0);
    }

    .ifinsta-sidebar-overlay.ifinsta-sidebar-overlay--visible,
    .ifinsta-sidebar-overlay[data-visible="true"] {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .ifinsta-sidebar__store-indicator {
        display: flex;
    }

    /* Compact store selector */
    .ifinsta-sidebar__store-selector-label {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .ifinsta-sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    /* Icon-only store selector on small phones */
    .ifinsta-sidebar__store-selector-label,
    .ifinsta-sidebar__store-selector-chevron {
        display: none;
    }

    .ifinsta-sidebar__store-selector-toggle {
        padding: 0.375rem;
        background: transparent;
        border: none;
    }

    .ifinsta-sidebar__store-selector-toggle:hover {
        background: var(--ifinsta-dropdown-item-hover);
    }

    .ifinsta-sidebar__store-selector-icon {
        width: var(--ifinsta-space-3-5);
        height: var(--ifinsta-space-3-5);
    }
}

/* Desktop (1024px+): Hide store indicator */
@media (min-width: 1024px) {
    .ifinsta-sidebar__store-indicator {
        display: none;
    }
}

/* ==========================================================================
    DARK MODE - Premium Dark Theme
    Uses semantic tokens that adapt automatically via variables.css
    ========================================================================== */

.ifinsta-sidebar--dark,
[data-theme="dark"] .ifinsta-sidebar {
    background: var(--ifinsta-surface-1);
    border-color: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-sidebar__header,
[data-theme="dark"] .ifinsta-sidebar__apps {
    border-color: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-sidebar__brand {
    color: var(--ifinsta-text-primary);
}

[data-theme="dark"] .ifinsta-sidebar__mode {
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-primary);
}

/* ==========================================================================
    MICRO-INTERACTIONS
    ========================================================================== */

/* Smooth subitem appearance */
.ifinsta-sidebar__subitem {
    opacity: 0.9;
}

.ifinsta-sidebar__subitem:hover {
    opacity: 1;
}

/* Dashboard transition effect - uses unified transition */
.ifinsta-sidebar__nav {
    transition: opacity var(--ifinsta-sidebar-transition);
}

.ifinsta-sidebar[data-transitioning="true"] .ifinsta-sidebar__nav {
    opacity: 0.6;
}

/* ==========================================================================
    REDUCED MOTION - Accessibility
    ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .ifinsta-sidebar,
    .ifinsta-sidebar__link,
    .ifinsta-sidebar__module-header,
    .ifinsta-sidebar__app,
    .ifinsta-sidebar__subitem,
    .ifinsta-sidebar__quick-link,
    .ifinsta-sidebar__footer-link,
    .ifinsta-sidebar__upgrade-link,
    .ifinsta-sidebar__nav {
        transition: none !important;
        animation: none !important;
    }
}