/* ==========================================================================
   Collapsible, persistent sidebar navigation
   ========================================================================== */

:root {
    --sidebar-width: 16rem;          /* 256px expanded */
    --sidebar-width-collapsed: 4rem; /* 64px collapsed */
    --topbar-h: 4rem;                /* horizontal top bar height */
}

/* --- Sidebar shell -------------------------------------------------------- */
#app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 50;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-right: 1px solid #e5e7eb; /* gray-200 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: width 0.2s ease, transform 0.2s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

html.sidebar-collapsed #app-sidebar {
    width: var(--sidebar-width-collapsed);
}

/* --- Main content offset -------------------------------------------------- */
#app-content {
    margin-left: var(--sidebar-width);
    padding-top: var(--topbar-h); /* clear the fixed top bar */
    transition: margin-left 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html.sidebar-collapsed #app-content {
    margin-left: var(--sidebar-width-collapsed);
}

/* No shell (anonymous pages, e.g. landing & login): full-bleed content */
#app-content.app-content--bare,
html.sidebar-collapsed #app-content.app-content--bare {
    margin-left: 0;
    padding-top: 0;
}

/* --- Brand ---------------------------------------------------------------- */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #f3f4f6; /* gray-100 */
    min-height: 4rem;
    justify-content: center;
    white-space: nowrap;
}

.sidebar-tagline {
    font-size: 0.65rem;
    color: #6b7280; /* gray-500 */
    margin-top: 0.125rem;
}

/* --- Nav ------------------------------------------------------------------ */
.sidebar-nav {
    flex: 1 1 auto;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151; /* gray-700 */
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-link:hover {
    color: #4F46E5;
    background-color: #f9fafb; /* gray-50 */
}

.sidebar-link.is-active {
    color: #4F46E5;
    background-color: #eef2ff; /* indigo-50 */
}

.sidebar-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Center icons when collapsed */
html.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* --- Footer --------------------------------------------------------------- */
.sidebar-footer {
    padding: 0.5rem;
    border-top: 1px solid #f3f4f6; /* gray-100 */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-user {
    position: relative;
}

.sidebar-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9rem;
}

.sidebar-dropdown {
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 0.25rem;
    right: 0.25rem;
    background-color: #ffffff;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    ring: 1px solid rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    padding: 0.25rem 0;
    z-index: 60;
}

/* The double-chevron flips meaning visually when collapsed */
html.sidebar-collapsed .sidebar-collapse-icon {
    transform: rotate(180deg);
}

/* Hide labels & label-only elements when collapsed (desktop) */
html.sidebar-collapsed .sidebar-label,
html.sidebar-collapsed .sidebar-hide-collapsed {
    display: none !important;
}

/* --- Horizontal top bar --------------------------------------------------- */
.app-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-h);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 1rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    transition: left 0.2s ease;
}

html.sidebar-collapsed .app-topbar {
    left: var(--sidebar-width-collapsed);
}

.app-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.app-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hamburger and brand only appear in the top bar on mobile */
.app-topbar-menu-btn,
.app-topbar-brand {
    display: none;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
}

/* ==========================================================================
   Responsive: off-canvas drawer on small screens
   ========================================================================== */
@media (max-width: 767px) {
    /* Sidebar becomes a full-width-ish drawer regardless of collapsed state */
    #app-sidebar,
    html.sidebar-collapsed #app-sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
    }

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

    /* Content is full-width (top bar offset already applied globally) */
    #app-content,
    html.sidebar-collapsed #app-content {
        margin-left: 0;
    }

    /* Top bar spans full width and shows the menu button + brand */
    .app-topbar,
    html.sidebar-collapsed .app-topbar {
        left: 0;
    }

    .app-topbar-menu-btn {
        display: inline-flex;
    }

    .app-topbar-brand {
        display: inline-flex;
    }

    /* Always show labels inside the mobile drawer, even if collapsed cookie set */
    html.sidebar-collapsed .sidebar-label,
    html.sidebar-collapsed .sidebar-hide-collapsed {
        display: revert !important;
    }

    html.sidebar-collapsed .sidebar-link {
        justify-content: flex-start;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    /* Collapse toggle is desktop-only */
    .sidebar-collapse-toggle {
        display: none !important;
    }
}

/* ==========================================================================
   Dark mode
   ========================================================================== */
html.dark #app-sidebar,
html.dark .app-topbar {
    background-color: #1f2937; /* gray-800 */
    border-color: #374151;     /* gray-700 */
}

html.dark .sidebar-brand {
    border-bottom-color: #374151;
}

html.dark .sidebar-footer {
    border-top-color: #374151;
}

html.dark .sidebar-link {
    color: #d1d5db; /* gray-300 */
}

html.dark .sidebar-link:hover {
    color: #a5b4fc; /* indigo-300 */
    background-color: #374151; /* gray-700 */
}

html.dark .sidebar-link.is-active {
    color: #a5b4fc;
    background-color: #3730a3; /* indigo-800 */
}

html.dark .sidebar-tagline {
    color: #9ca3af; /* gray-400 */
}

html.dark .sidebar-dropdown {
    background-color: #1f2937;
    border-color: #374151;
}

html.dark .sidebar-dropdown a {
    color: #d1d5db;
}

html.dark .sidebar-dropdown a:hover {
    background-color: #374151;
}