/* _content/TradeTracker.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   PAGE SHELL  —  mobile-first, then desktop override
   ============================================================ */

.page[b-8l9xmlia91] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

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

.sidebar[b-8l9xmlia91] {
    background: linear-gradient(180deg, #052767 0%, #3a0647 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, width 0.3s ease;
    flex-shrink: 0;
}

/* ---  Mobile: hidden drawer (slides in from the left)  --- */
@media (max-width: 767px) {
    .sidebar[b-8l9xmlia91] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 280px;
        z-index: 400;
        transform: translateX(-100%);
    }

    .sidebar.mobile-open[b-8l9xmlia91] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
    }
}

/* ---  Desktop: always-visible sidebar column  --- */
@media (min-width: 768px) {
    .page[b-8l9xmlia91] {
        flex-direction: row;
    }

    .sidebar[b-8l9xmlia91] {
        position: sticky;
        top: 0;
        width: 250px;
        height: 100vh;
        flex: 0 0 250px;
    }

    .sidebar.collapsed[b-8l9xmlia91] {
        width: 72px;
        flex: 0 0 72px;
    }
}

/* ============================================================
   SIDEBAR HEADER  (brand + toggle button row)
   ============================================================ */

.sidebar-header[b-8l9xmlia91] {
    height: 50px; /* matches main header height exactly */
    min-height: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sidebar-brand[b-8l9xmlia91] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand a[b-8l9xmlia91] {
    color: white;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.toggle-btn[b-8l9xmlia91] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.toggle-btn:hover[b-8l9xmlia91] {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

/* ============================================================
   SIDEBAR BACKDROP  (mobile only click-away overlay)
   ============================================================ */

.sidebar-backdrop[b-8l9xmlia91] {
    display: none;
}

@media (max-width: 767px) {
    .sidebar-backdrop[b-8l9xmlia91] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 390;
        animation: backdropFadeIn-b-8l9xmlia91 0.25s ease;
    }

    @keyframes backdropFadeIn-b-8l9xmlia91 {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */

main[b-8l9xmlia91] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ============================================================
   GLOBAL HEADER BAR
   ============================================================ */

.header-bar[b-8l9xmlia91] {
    height: 50px;
    min-height: 50px;
    background: #111823;
    border-bottom: 1px solid #1f2937;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Mobile hamburger — only visible on small screens */
.header-mobile-toggle[b-8l9xmlia91] {
    display: none;
}

@media (max-width: 767px) {
    .header-mobile-toggle[b-8l9xmlia91] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.75);
        cursor: pointer;
        padding: 0.4rem;
        border-radius: 4px;
        flex-shrink: 0;
        transition: background 0.2s, color 0.2s;
    }

    .header-mobile-toggle:hover[b-8l9xmlia91] {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }
}

.header-left[b-8l9xmlia91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.header-right[b-8l9xmlia91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Symbol search box */
.symbol-search[b-8l9xmlia91] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--ts-cyan);
    flex-shrink: 0;
}

.symbol-search input[b-8l9xmlia91] {
    background: transparent;
    border: none;
    color: white;
    font-family: 'Consolas', 'Courier New', monospace;
    width: 65px;
    outline: none;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Quick-symbol chips — hide on very small screens */
.quick-symbols[b-8l9xmlia91] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
}

@media (max-width: 575px) {
    .quick-symbols[b-8l9xmlia91] {
        display: none;
    }
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

.content[b-8l9xmlia91] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .content[b-8l9xmlia91] {
        padding: 1.5rem;
    }
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */

.custom-scrollbar[b-8l9xmlia91]::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar[b-8l9xmlia91]::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar[b-8l9xmlia91]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.custom-scrollbar[b-8l9xmlia91]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   BLAZOR ERROR UI
   ============================================================ */

#blazor-error-ui[b-8l9xmlia91] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-8l9xmlia91] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/TradeTracker.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Nav Icons (Bootstrap SVG sprite trick) ───────────────────── */

.bi[b-xfo78wbtou] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.bi-activity-nav-menu[b-xfo78wbtou] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-activity' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z'/%3E%3C/svg%3E");
}

.bi-list-columns-nav-menu[b-xfo78wbtou] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-columns' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5Zm-9 0a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5Zm4.5 0a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-bar-chart-fill-nav-menu[b-xfo78wbtou] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bar-chart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3E%3C/svg%3E");
}

.bi-lightning-fill-nav-menu[b-xfo78wbtou] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-lightning-fill' viewBox='0 0 16 16'%3E%3Cpath d='M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5z'/%3E%3C/svg%3E");
}

.bi-journal-text-nav-menu[b-xfo78wbtou] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-journal-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-xfo78wbtou] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2.5z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-xfo78wbtou] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

/* ── Nav Items Layout ─────────────────────────────────────────── */

.nav-item[b-xfo78wbtou] {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
}

.nav-item[b-xfo78wbtou]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 6px;
    height: 2.75rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.75rem;
    transition: background 0.15s, color 0.15s;
}

.nav-item[b-xfo78wbtou]  a.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.nav-item[b-xfo78wbtou]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-text[b-xfo78wbtou] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-scrollable[b-xfo78wbtou] {
    display: block;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}