/* =================================================================
   ABL Common UI — Shared Sidebar Components (Header + Footer)
   Consumes --abl-common-ui-sf-* CSS variables set by each product.
   ================================================================= */

/* =================================================================
   SIDEBAR HEADER (product branding)
   ================================================================= */

.abl-common-ui-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--abl-common-ui-sf-border, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}

.abl-common-ui-sidebar-brand {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.abl-common-ui-sidebar-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.abl-common-ui-sidebar-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--abl-heading, #F8FAFC);
    letter-spacing: -0.02em;
}

.abl-common-ui-sidebar-badge {
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(248, 113, 113, 0.1);
    color: var(--color-accent-red, #F87171);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =================================================================
   SIDEBAR FOOTER
   ================================================================= */

/* -- Footer Container -- */
.abl-common-ui-sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--abl-common-ui-sf-border, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* -- User Info Row -- */
.abl-common-ui-sidebar-footer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
}

.abl-common-ui-sidebar-footer-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--abl-avatar-member, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--abl-avatar-member, #FFFFFF);
    flex-shrink: 0;
}
.abl-common-ui-sidebar-footer-avatar[data-role="owner"] {
    border-color: var(--abl-avatar-owner, #FBBF24);
    color: var(--abl-avatar-owner, #FBBF24);
}
.abl-common-ui-sidebar-footer-avatar[data-role="admin"] {
    border-color: var(--abl-avatar-admin, #A855F7);
    color: var(--abl-avatar-admin, #A855F7);
}
.abl-common-ui-sidebar-footer-avatar[data-role="member"] {
    border-color: var(--abl-avatar-member, #FFFFFF);
    color: var(--abl-avatar-member, #FFFFFF);
}
.abl-common-ui-sidebar-footer-avatar[data-role="guest"] {
    border-color: var(--abl-avatar-guest, #6B7280);
    color: var(--abl-avatar-guest, #6B7280);
    border-style: dashed;
}

.abl-common-ui-sidebar-footer-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.abl-common-ui-sidebar-footer-username {
    font-size: 12px;
    font-weight: 600;
    color: var(--abl-common-ui-sf-text, #e5e7eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Tier Badge -- */
.abl-common-ui-sidebar-footer-tier {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 1px;
}

.abl-common-ui-sidebar-footer-tier--free {
    color: #0ED9B4;
}

.abl-common-ui-sidebar-footer-tier--investor {
    color: #7B61FF;
}

.abl-common-ui-sidebar-footer-tier--portfolio {
    color: #60A5FA;
}

/* -- Email (secondary line, used by Auth Account) -- */
.abl-common-ui-sidebar-footer-email {
    font-size: 10px;
    color: var(--abl-common-ui-sf-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Extra Links (admin nav-link style) -- */
.abl-common-ui-sidebar-footer-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.abl-common-ui-sidebar-footer-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--abl-common-ui-sf-muted, #9ca3af);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.abl-common-ui-sidebar-footer-nav-link:hover {
    background: var(--abl-common-ui-sf-bg-hover, rgba(255, 255, 255, 0.03));
    color: var(--abl-common-ui-sf-text, #e5e7eb);
}

.abl-common-ui-sidebar-footer-nav-link svg {
    flex-shrink: 0;
}

/* -- Action Buttons (Dashboard / Logout) -- */
.abl-common-ui-sidebar-footer-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* Admin nav-link variant — stacks vertically */
.abl-common-ui-sidebar-footer-actions--nav {
    flex-direction: column;
    gap: 2px;
    margin-top: 0;
}

.abl-common-ui-sidebar-footer-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--abl-common-ui-sf-muted, #6b7280);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--abl-common-ui-sf-border, rgba(255, 255, 255, 0.08));
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 1;
    justify-content: center;
}

.abl-common-ui-sidebar-footer-action-btn:hover {
    color: var(--abl-common-ui-sf-text, #e5e7eb);
    border-color: var(--abl-common-ui-sf-border, rgba(255, 255, 255, 0.12));
    background: var(--abl-common-ui-sf-bg-hover, rgba(255, 255, 255, 0.03));
}

.abl-common-ui-sidebar-footer-action-btn--logout:hover {
    color: #F87171;
    border-color: rgba(248, 113, 113, 0.3);
}

/* Nav-link variant for action buttons (admin style) */
.abl-common-ui-sidebar-footer-actions--nav .abl-common-ui-sidebar-footer-action-btn {
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    justify-content: flex-start;
    gap: 10px;
    flex: unset;
}

.abl-common-ui-sidebar-footer-actions--nav .abl-common-ui-sidebar-footer-action-btn--logout {
    color: var(--color-accent-red, #F87171);
}

.abl-common-ui-sidebar-footer-actions--nav .abl-common-ui-sidebar-footer-action-btn--logout:hover {
    background: var(--color-accent-red-bg, rgba(248, 113, 113, 0.08));
}

/* -- Theme Controls (mode toggle + palette popover) -- */
.abl-common-ui-sidebar-footer-theme-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* -- Shared icon button style (mode toggle + palette toggle + twin visibility toggle) -- */
.abl-common-ui-mode-toggle,
.abl-common-ui-palette-toggle,
.abl-common-ui-twin-visibility-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid var(--abl-common-ui-sf-border, rgba(255, 255, 255, 0.08));
    background: transparent;
    color: var(--abl-common-ui-sf-muted, #6b7280);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.abl-common-ui-mode-toggle:hover,
.abl-common-ui-palette-toggle:hover,
.abl-common-ui-twin-visibility-toggle:hover {
    color: var(--abl-common-ui-sf-text, #e5e7eb);
    border-color: var(--abl-common-ui-sf-border, rgba(255, 255, 255, 0.15));
    background: var(--abl-common-ui-sf-bg-hover, rgba(255, 255, 255, 0.03));
}

/* -- Twin visibility icon swap -- */
.abl-common-ui-twin-visibility-toggle .abl-twin-vis-icon-on { display: inline-block; }
.abl-common-ui-twin-visibility-toggle .abl-twin-vis-icon-off { display: none; }
.abl-common-ui-twin-visibility-toggle.is-hidden .abl-twin-vis-icon-on { display: none; }
.abl-common-ui-twin-visibility-toggle.is-hidden .abl-twin-vis-icon-off { display: inline-block; }

/* -- Mode icon swap (three separate SVGs, driven by data-theme-pref) --
   The sidebar toggle cycles auto → light → dark → auto on click. The
   icon reflects the user's PREFERENCE (what they picked), not the
   resolved mode (what's actually rendering). So a user on 'auto' at
   night sees the half-circle auto icon even though the page is dark.

   Default: all three are hidden via display:none, then the matching
   [data-theme-pref="..."] selector enables exactly one. The default
   value of data-theme-pref is 'auto' (set by the FOUC partial). */
.abl-mode-icon-dark,
.abl-mode-icon-light,
.abl-mode-icon-auto {
    display: none;
}

[data-theme-pref="dark"] .abl-mode-icon-dark {
    display: block;
}

[data-theme-pref="light"] .abl-mode-icon-light {
    display: block;
}

[data-theme-pref="auto"] .abl-mode-icon-auto {
    display: block;
}

/* -- Colour picker popover -- */
.abl-common-ui-theme-picker {
    position: relative;
}

.abl-common-ui-theme-popover {
    display: none;
    position: fixed;
    background: var(--abl-card, #13141F);
    border: 1px solid var(--abl-border, #1C1D2E);
    border-radius: 12px;
    padding: 0;
    width: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 10000;
}

.abl-common-ui-theme-popover.abl-common-ui-theme-popover--open {
    display: block;
}

/* -- Picker header -- */
.abl-cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 0;
}
.abl-cp-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--abl-heading, #F0F1F5);
}
.abl-cp-aurora-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 10px;
    transition: opacity 0.15s;
}
.abl-cp-aurora-btn:hover { opacity: 0.8; }
.abl-cp-aurora-pill {
    display: block;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--abl-picker-default, var(--abl-accent-default, #72AA16));
}

/* -- Hue strip -- */
.abl-cp-hue-wrap {
    position: relative;
    padding: 10px 18px 0;
}
.abl-cp-hue {
    display: block;
    width: 244px;
    height: 14px;
    border-radius: 7px;
    cursor: crosshair;
}
.abl-cp-hue-thumb {
    position: absolute;
    top: 10px;
    width: 12px;
    height: 14px;
    border-radius: 7px;
    border: 2.5px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    box-sizing: border-box;
    transform: translateX(-50%);
}

/* -- Saturation/Brightness square -- */
.abl-cp-sb-wrap {
    position: relative;
    padding: 6px 18px 0;
}
.abl-cp-sb {
    display: block;
    width: 244px;
    height: 120px;
    border-radius: 8px;
    cursor: crosshair;
}
.abl-cp-sb-thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transform: translate(-7px, -7px);
    box-sizing: border-box;
}

/* -- Divider -- */
.abl-cp-divider {
    height: 1px;
    background: var(--abl-border, #1E1F30);
    margin: 10px 18px 0;
}

/* -- Preview + hex row -- */
.abl-cp-preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 14px;
}
.abl-cp-preview-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}
.abl-cp-hex-wrap {
    display: flex;
    align-items: center;
    background: var(--abl-bg, #0A0B14);
    border: 1px solid var(--abl-border, #1E1F30);
    border-radius: 6px;
    padding: 0 8px;
    height: 28px;
    flex: 1;
}
.abl-cp-hash {
    font-size: 11px;
    color: var(--abl-muted, #555B6E);
    margin-right: 2px;
}
.abl-cp-hex-input {
    background: none;
    border: none;
    outline: none;
    color: var(--abl-heading, #F0F1F5);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', monospace;
    letter-spacing: 1px;
    width: 100%;
    text-transform: uppercase;
}
.abl-cp-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background: var(--abl-surface, #1E1F30);
    color: var(--abl-muted, #555B6E);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}
.abl-cp-copy-btn:hover {
    color: var(--abl-text, #E8EAF6);
}

/* ============================================================
   SIDEBAR NAV — collapsible groups + rail mode.

   Generic module styles shared by every product. Binds via the
   same data attributes the Jinja macros + JS controller use:
   [data-sidebar-module], [data-group], [data-collapsed],
   [data-rail], [data-sidebar-item], etc.
   ============================================================ */

/* ── Nav container ───────────────────────────────────────── */

.abl-common-ui-sidebar-nav {
    flex: 1;
    padding: 8px 0 12px 0;
    overflow-y: auto;
}

/* ── Group ───────────────────────────────────────────────── */

.abl-common-ui-sidebar-nav-group {
    margin-bottom: 4px;
}

.abl-common-ui-sidebar-nav-group-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 20px 6px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--abl-muted, #64748B);
    transition: color 0.15s ease;
    font-family: inherit;
}

.abl-common-ui-sidebar-nav-group-header:hover {
    color: var(--abl-text, #E2E8F0);
}

.abl-common-ui-sidebar-nav-group-header:focus-visible {
    outline: 2px solid var(--abl-nav-accent, #72AA16);
    outline-offset: -2px;
    border-radius: 4px;
}

.abl-common-ui-sidebar-nav-group-label {
    flex: 1;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: inherit;
}

.abl-common-ui-sidebar-nav-group-chevron {
    flex-shrink: 0;
    margin-left: 6px;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

[data-collapsed="1"] > .abl-common-ui-sidebar-nav-group-header .abl-common-ui-sidebar-nav-group-chevron {
    transform: rotate(-90deg);
}

/* Group badge — visible only when collapsed */
.abl-common-ui-sidebar-nav-group-badge {
    display: none;
    flex-shrink: 0;
    min-width: 18px;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--abl-nav-accent, #72AA16);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

[data-collapsed="1"] > .abl-common-ui-sidebar-nav-group-header .abl-common-ui-sidebar-nav-group-badge:not([hidden]) {
    display: inline-block;
}

/* ── Group items container ──────────────────────────────── */

.abl-common-ui-sidebar-nav-group-items {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.15s ease;
    max-height: 800px;
    opacity: 1;
}

[data-collapsed="1"] > .abl-common-ui-sidebar-nav-group-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Nav item ────────────────────────────────────────────── */

.abl-common-ui-sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-left: 3px solid transparent;
    color: var(--abl-muted, #94A3B8);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    position: relative;
}

.abl-common-ui-sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.02);
    color: var(--abl-text, #E2E8F0);
}

.abl-common-ui-sidebar-nav-item.active,
.abl-common-ui-sidebar-nav-item[aria-current="page"] {
    border-left-color: var(--abl-nav-accent, #72AA16);
    color: var(--abl-nav-accent, #72AA16);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
}

.abl-common-ui-sidebar-nav-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.abl-common-ui-sidebar-nav-item.active svg,
.abl-common-ui-sidebar-nav-item[aria-current="page"] svg {
    opacity: 1;
}

/* Item badge */
.abl-common-ui-sidebar-nav-item-badge {
    margin-left: auto;
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 9px;
    background: color-mix(in srgb, #F87171 25%, transparent);
    color: #F87171;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

/* ── Rail toggle button ──────────────────────────────────── */

.abl-common-ui-sidebar-rail-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--abl-border, #334155);
    border-radius: 6px;
    color: var(--abl-muted, #94A3B8);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease;
}

.abl-common-ui-sidebar-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--abl-text, #E2E8F0);
    border-color: var(--abl-nav-accent, #72AA16);
}

/* ── Rail mode ───────────────────────────────────────────── */

[data-rail="1"] .abl-common-ui-sidebar-nav-group-label,
[data-rail="1"] .abl-common-ui-sidebar-nav-group-chevron,
[data-rail="1"] .abl-common-ui-sidebar-nav-group-badge,
[data-rail="1"] .abl-common-ui-sidebar-nav-item span,
[data-rail="1"] .abl-common-ui-sidebar-name,
[data-rail="1"] .abl-common-ui-sidebar-badge,
[data-rail="1"] .abl-common-ui-sidebar-footer-user-info,
[data-rail="1"] .abl-common-ui-sidebar-footer-links,
[data-rail="1"] .abl-common-ui-sidebar-footer-theme-row,
[data-rail="1"] .abl-common-ui-sidebar-footer-actions:not(.abl-common-ui-sidebar-footer-actions--nav) {
    display: none !important;
}

[data-rail="1"] .abl-common-ui-sidebar-nav-item {
    justify-content: center;
    padding: 10px 0;
}

[data-rail="1"] .abl-common-ui-sidebar-nav-item svg {
    margin: 0;
}

[data-rail="1"] .abl-common-ui-sidebar-nav-item-badge {
    position: absolute;
    top: 6px;
    right: 12px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: #F87171;
}

[data-rail="1"] .abl-common-ui-sidebar-nav-group-header {
    padding: 4px 12px;
    cursor: default;
    pointer-events: none;
}

[data-rail="1"] .abl-common-ui-sidebar-nav-group-items {
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Tooltip in rail mode */
[data-rail="1"] .abl-common-ui-sidebar-nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(12px);
    padding: 6px 10px;
    background: var(--abl-card, #13141F);
    border: 1px solid var(--abl-border, #334155);
    border-radius: 6px;
    color: var(--abl-text, #F1F5F9);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 200;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-rail="1"] .abl-common-ui-sidebar-nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(8px);
}

[data-rail="1"] .abl-common-ui-sidebar-rail-toggle {
    right: 50%;
    transform: translateX(50%);
    top: 16px;
}

/* ── In-page linked tab strip (e.g. Security Dashboard) ── */

.abl-common-ui-sidebar-subnav {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    background: var(--abl-card, #13141F);
    border: 1px solid var(--abl-border, #334155);
    border-radius: 10px;
    width: fit-content;
}

.abl-common-ui-sidebar-subnav-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--abl-muted, #94A3B8);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.abl-common-ui-sidebar-subnav-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--abl-text, #F1F5F9);
}

.abl-common-ui-sidebar-subnav-tab.active {
    background: var(--abl-nav-accent, #72AA16);
    color: #fff;
    font-weight: 600;
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    [data-rail="1"] .abl-common-ui-sidebar-nav-group-items {
        max-height: 800px;
    }
    .abl-common-ui-sidebar-rail-toggle {
        display: none;
    }
}