/* ================================================================
   THEME NAVMENU - Sidebar Navigation Styles
   The app's navigation chrome is the collapsible left sidebar
   (NavMenuSide.razor); this file also styles the offcanvas panels
   (AI chat, notifications) the sidebar opens.
   ================================================================ */

/* ================================================================
   SHARED UTILITY PATTERNS
   ================================================================ */

/* Flex centering */
.notification-bell, .profile-avatar-placeholder, .user-header-avatar-placeholder, .notification-icon-wrapper, .loading-state, .error-state, .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Avatar sizing */
.profile-avatar, .profile-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.user-header-avatar, .user-header-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 12px;
}

.notification-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

/* Primary backgrounds */
.profile-avatar-placeholder, .user-header-avatar-placeholder {
    background: var(--theme-primary);
    color: var(--theme-white);
}

.notification-item:hover {
    background: var(--theme-accent3) !important;
}

/* Standard borders */
.notifications-header, .notifications-footer, .notification-item {
    border-color: var(--theme-accent2);
}

/* White backgrounds */
.notifications-container, .notifications-body, .notification-item {
    background: var(--theme-white) !important;
}

/* State containers */
.loading-state, .error-state, .empty-state {
    flex-direction: column;
    padding: 3rem 2rem;
    text-align: center;
}

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

.app-sidebar {
    background: var(--theme-dark);
    border-right: 1px solid var(--theme-accent1);
    width: 240px;
    min-width: 240px;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: width 0.2s ease, min-width 0.2s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.85rem;
    min-height: 64px;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-white) !important;
    white-space: nowrap;
}

.sidebar-collapse-btn {
    background: transparent;
    border: none;
    color: var(--theme-white);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0.7;
    flex-shrink: 0;
}

    .sidebar-collapse-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        opacity: 1;
    }

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--theme-white) !important;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .sidebar-link.active {
        background: var(--theme-primary);
        color: var(--theme-white) !important;
    }

    .sidebar-link svg {
        flex-shrink: 0;
    }

.sidebar-footer {
    padding: 0.75rem 0.6rem;
    border-top: 1px solid var(--theme-accent1);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.sidebar-user {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-user-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    border-radius: 8px;
    padding: 0.25rem;
}

    .sidebar-user-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }

.sidebar-user-name {
    color: var(--theme-white);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer-btn {
    border-radius: 8px;
    flex-shrink: 0;
}

/* Mobile drawer chrome (hidden on desktop) */
.sidebar-mobile-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1053;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--theme-dark);
    color: var(--theme-white);
    border: 1px solid var(--theme-accent1);
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--scrim);
    z-index: 1054;
}

/* Icon rail (desktop only): the sidebar narrows to icons, the brand reduces to the
   globe mark, and the footer stacks. On mobile the drawer always renders expanded. */
@media (min-width: 1200px) {
    .app-sidebar.collapsed {
        width: 68px;
        min-width: 68px;
    }

        .app-sidebar.collapsed .sidebar-header {
            flex-direction: column;
            gap: 0.35rem;
            padding: 0.85rem 0.5rem 0.35rem 0.5rem;
        }

        .app-sidebar.collapsed .brand-text,
        .app-sidebar.collapsed .sidebar-label {
            display: none;
        }

        .app-sidebar.collapsed .sidebar-brand {
            flex: 0 0 auto;
            justify-content: center;
        }

        .app-sidebar.collapsed .sidebar-link {
            justify-content: center;
            padding: 0.6rem 0;
        }

        .app-sidebar.collapsed .sidebar-footer {
            flex-direction: column;
            gap: 0.5rem;
        }

        .app-sidebar.collapsed .sidebar-user {
            flex: 0 0 auto;
        }
}

/* ================================================================
   NOTIFICATION SYSTEM
   ================================================================ */

.notification-bell {
    width: 44px;
    height: 44px;
    color: var(--theme-white) !important;
    position: relative;
    transition: background-color 0.15s ease;
}

    .notification-bell:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--theme-white) !important;
    }

.notification-icon {
    width: 22px;
    height: 22px;
    color: var(--theme-white) !important;
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--theme-danger);
    color: var(--theme-white);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.user-dropdown-toggle {
    padding: 0.25rem;
    color: var(--theme-white) !important;
    text-decoration: none;
}

.login-required-link {
    background: var(--theme-primary) !important;
    color: var(--theme-white) !important;
}

/* ================================================================
   DOCK PANELS (AI chat / notifications)
   In-flow flex children of the app shell, sitting between the
   sidebar and the page content; the content column shrinks to make
   room, so the page never exceeds the viewport width. Panels stay
   rendered (display-toggled) so the AI conversation survives
   close/reopen.
   ================================================================ */

.side-dock-panel {
    display: flex;
    width: 0;
    min-width: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 1020; /* under the sidebar (1030) */
    background: var(--theme-white);
    border-right: 0 solid var(--theme-accent2);
    flex-direction: column;
    overflow: hidden;
    /* Eased open/close; visibility flips after the close animation so hidden
       panels are neither visible nor tab-reachable */
    visibility: hidden;
    transition: width 0.25s ease, min-width 0.25s ease, visibility 0s linear 0.25s;
}

    .side-dock-panel.open {
        /* 420px content + the 1px border (border-box) so nothing clips at the edge */
        width: 421px;
        min-width: 421px;
        border-right-width: 1px;
        visibility: visible;
        transition: width 0.25s ease, min-width 0.25s ease, visibility 0s;
    }

    /* Fixed inner width so the content doesn't reflow while the panel animates */
    .side-dock-panel .notifications-container {
        width: 420px;
        min-width: 420px;
    }

/* AI chat session stats: compact permission-gated footer strip */
.ai-chat-stats-footer {
    padding: 0.5rem 1rem;
}

.notifications-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.notifications-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--theme-accent2);
    background: var(--theme-accent3);
}

/* The offcanvas panel headings (notifications, AI chat, self-service console).
   --theme-dark is the NAVBAR surface colour, not an ink role: on a dark theme
   it is near-black (#252932) and the heading sat invisibly on the panel header
   (--theme-accent3, #454c58). --text-primary is the ink role and already
   resolves to --theme-dark on the light themes, so this is a no-op there. */
.notifications-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary) !important;
}

.notifications-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary) !important;
}

.notifications-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.notification-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--theme-accent2);
}

.notification-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.notification-details {
    flex: 1;
}

/* Same surface-vs-ink mix-up as .notifications-title above: these sit on
   .notification-item (--theme-white), so they need the ink roles. */
.notification-subject {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.notifications-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-accent2);
    background: var(--theme-accent3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-unread {
    border-left: 4px solid var(--theme-primary);
}

/* Text states */
.loading-text, .empty-title {
    color: var(--theme-accent1);
    font-size: 0.9rem;
}

.empty-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.empty-subtitle {
    font-size: 0.9rem;
    color: var(--theme-accent2);
}

.error-text {
    color: var(--theme-danger);
    font-weight: 500;
}

.notifications-warning {
    font-size: 0.75rem;
    color: var(--theme-accent2);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
}

.header-content {
    flex: 1;
}

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

/* Mobile drawer: the sidebar slides in from the left over a backdrop, opened by the
   floating toggle. One breakpoint (1200px) governs the whole shell. */
@media (max-width: 1199.98px) {
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        width: 260px;
        min-width: 260px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1055;
        box-shadow: var(--shadow-lg);
    }

        .app-sidebar.mobile-open {
            transform: translateX(0);
        }

        /* The drawer is always expanded; the collapse control is desktop-only */
        .app-sidebar .sidebar-collapse-btn {
            display: none;
        }

    .sidebar-mobile-toggle {
        display: flex;
    }

    .sidebar-backdrop {
        display: block;
    }

    /* Dock panels have no room beside content on small screens — slide in from the
       right edge instead, full height, above content but below the sidebar drawer */
    .side-dock-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        height: 100vh;
        width: min(420px, 100vw);
        min-width: 0;
        z-index: 1052;
        border-right: none;
        border-left: 1px solid var(--theme-accent2);
        box-shadow: var(--shadow-lg);
        transform: translateX(105%);
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

        .side-dock-panel.open {
            width: min(420px, 100vw);
            min-width: 0;
            transform: translateX(0);
            transition: transform 0.25s ease, visibility 0s;
        }

        .side-dock-panel .notifications-container {
            width: 100%;
            min-width: 0;
        }
}