/* =========================================================
   SIDEBAR.CSS
   Styles for the collapsible left-hand sidebar used on
   all tutor-facing pages. Loaded globally via _Layout.cshtml.
   ========================================================= */

/* =========================================================
   CSS VARIABLES
   Referenced throughout this file and in the layout HTML.
   ========================================================= */
:root {
    --color-background-primary: #ffffff;
    --color-border-tertiary:    #ebebeb;
    --color-border-secondary:   #d4d4d4;
    --sidebar-width:            200px;
    --sidebar-collapsed-width:  52px;
}

/* =========================================================
   PAGE LAYOUT
   .eli-page-body is the flex row that holds sidebar + content.
   No header — sidebar starts at top: 0 and fills the full viewport.
   ========================================================= */

/* Reset the padding-top that site.css sets for the old fixed header */
body {
    padding-top: 0;
}

.eli-page-body {
    display:    flex;
    min-height: 100vh;
}

/* Push content right to compensate for the fixed sidebar */
.eli-page-body:has(.eli-sidebar) {
    padding-left: var(--sidebar-width);
    box-sizing:   border-box;
    transition:   padding-left 0.22s ease;
}

/* Reduce offset when sidebar is collapsed */
.eli-page-body:has(.eli-sidebar.collapsed) {
    padding-left: var(--sidebar-collapsed-width);
}

/* Main content area grows to fill remaining width */
.eli-content {
    flex:       1;
    min-width:  0; /* prevents flex overflow on narrow screens */
    overflow-x: hidden;
}

/* =========================================================
   SIDEBAR SHELL
   overflow: visible so the toggle button can hang outside the edge.
   The inner .eli-sidebar-inner handles overflow: hidden for content.
   ========================================================= */
.eli-sidebar {
    width:          var(--sidebar-width);
    flex-shrink:    0;
    background:     var(--color-background-primary);
    border-right:   0.5px solid var(--color-border-tertiary);
    display:        flex;
    flex-direction: column;
    position:       fixed;
    top:            0;
    left:           0;
    height:         100vh;
    z-index:        50;
    transition:     width 0.22s ease;
    overflow:       visible;
}

/* Collapsed state — icons only */
.eli-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* =========================================================
   TOGGLE BUTTON
   Circular button on the right edge of the sidebar.
   Lives outside .eli-sidebar-inner so it is never clipped.
   ========================================================= */
.eli-sidebar-toggle {
    position:        absolute;
    right:           -13px;
    top:             24px;
    width:           26px;
    height:          26px;
    background:      var(--color-background-primary);
    border:          0.5px solid var(--color-border-secondary);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         20;
    padding:         0;
    color:           #666;
    transition:      background 0.15s ease, border-color 0.15s ease;
}

.eli-sidebar-toggle:hover {
    background:   #FEF3DC;
    border-color: #F5C97A;
}

/* Chevron rotates 180deg when sidebar collapses */
.eli-sidebar-toggle svg {
    transition: transform 0.22s ease;
}

.eli-sidebar.collapsed .eli-sidebar-toggle svg {
    transform: rotate(180deg);
}

/* =========================================================
   INNER WRAPPER
   Contains brand + top + bottom. overflow: hidden clips content
   on collapse. The toggle button lives outside this wrapper.
   ========================================================= */
.eli-sidebar-inner {
    display:        flex;
    flex-direction: column;
    height:         100%;
    overflow:       hidden;
    width:          100%;
}

/* =========================================================
   BRAND / LOGO (top of sidebar)
   ========================================================= */
.eli-sidebar-brand {
    padding:     14px 14px 12px;
    flex-shrink: 0;
}

.eli-sidebar-brand-link {
    display:         flex;
    align-items:     center;
    gap:             9px;
    text-decoration: none;
    white-space:     nowrap;
}

.eli-sidebar-brand-link:hover {
    text-decoration: none;
}

.eli-sidebar-brand-logo {
    height:      32px;
    width:       auto;
    flex-shrink: 0;
}

.eli-sidebar-brand-name {
    font-family: 'Nunito', sans-serif;
    font-size:   20px;
    font-weight: 500;
    color:       #111;
    overflow:    hidden;
    opacity:     1;
    transition:  opacity 0.12s ease;
}

/* Hide brand name when collapsed */
.eli-sidebar.collapsed .eli-sidebar-brand-name {
    opacity: 0;
    width:   0;
}

/* =========================================================
   INNER LAYOUT
   .eli-sidebar-top grows; .eli-sidebar-bottom pins to bottom
   ========================================================= */
.eli-sidebar-top {
    flex:       1;
    overflow-x: hidden;
    overflow-y: auto;
}

.eli-sidebar-bottom {
    padding-bottom: 8px;
    flex-shrink:    0;
    background:     var(--color-background-primary);
}

/* =========================================================
   NOTIFICATION BELL (in sidebar bottom)
   ========================================================= */
.eli-sidebar-bell-wrap {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           18px;
    height:          18px;
}

.eli-sidebar-bell-dot {
    position:     absolute;
    top:          -3px;
    right:        -3px;
    width:        7px;
    height:       7px;
    background:   #F5A623;
    border-radius: 50%;
    border:       1.5px solid var(--color-background-primary);
}

/* Bell button reset (we use a <button> instead of <a> now) */
.eli-notif-bell-btn {
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     0;
    width:       100%;
    text-align:  left;
    color:       inherit;
}

/* Wrapper that anchors the dropdown */
.eli-notif-container {
    position: relative;
}

/* Unread count badge next to the label text */
.eli-notif-count {
    margin-left:      auto;
    background:       #F5A623;
    color:            #fff;
    font-size:        10px;
    font-weight:      700;
    line-height:      1;
    padding:          2px 5px;
    border-radius:    8px;
    min-width:        16px;
    text-align:       center;
}

/* =========================================================
   NOTIFICATION DROPDOWN PANEL
   ========================================================= */
.eli-notif-dropdown {
    position:      fixed;
    width:         300px;
    background:    var(--color-background-primary, #fff);
    border:        1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow:    0 8px 24px rgba(0,0,0,0.12);
    z-index:       9999;
    overflow:      hidden;
    max-height:    80vh;
}

.eli-notif-dropdown-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px 10px;
    border-bottom:   1px solid #f0f0f0;
    font-family:     'Nunito', sans-serif;
    font-size:       13px;
    font-weight:     700;
    color:           #374151;
}

.eli-notif-dropdown-header button {
    background:  none;
    border:      none;
    cursor:      pointer;
    /* font-size:   11px; */
    font-size:   12px;
    color:       #9ca3af;
    padding:     0;
}

.eli-notif-dropdown-header button:hover {
    color: #F5A623;
}

.eli-notif-list {
    max-height: 320px;
    overflow-y: auto;
}

/* Single notification row */
.eli-notif-item {
    display:      flex;
    flex-direction: column;
    gap:          2px;
    padding:      12px 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor:       pointer;
    transition:   background 0.15s;
}

.eli-notif-item:last-child {
    border-bottom: none;
}

.eli-notif-item:hover {
    background: #f9fafb;
}

/* Unread items get a subtle left accent */
.eli-notif-item--unread {
    background:    #fffbf0;
    border-left:   3px solid #F5A623;
    padding-left:  13px;
}

.eli-notif-item--unread:hover {
    background: #fff7e0;
}

.eli-notif-msg {
    font-family: 'Nunito', sans-serif;
    font-size:   13px;
    color:       #374151;
    line-height: 1.4;
}

.eli-notif-time {
    font-family: 'Nunito', sans-serif;
    /* font-size:   11px; */
    font-size:   12px;
    color:       #9ca3af;
}

.eli-notif-empty {
    padding:     20px 16px;
    font-family: 'Nunito', sans-serif;
    font-size:   13px;
    color:       #9ca3af;
    text-align:  center;
    margin:      0;
}

/* =========================================================
   SECTION LABELS  (e.g. "NAVIGATE", "STUDENTS")
   ========================================================= */
.eli-sidebar-label {
    font-family:    'Nunito', sans-serif;
    /* font-size:      10px; */
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.08em;
    color:          #aaa;
    text-transform: uppercase;
    padding:        0 14px 6px 14px;
    display:        block;
    white-space:    nowrap;
}

/* Hide labels when collapsed */
.eli-sidebar.collapsed .eli-sidebar-label {
    opacity:        0;
    pointer-events: none;
}

/* Smaller sub-label (e.g. "STUDENT NOTES" inside Planner context) */
.eli-sidebar-sublabel {
    font-family:    'Nunito', sans-serif;
    /* font-size:      9px; */
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    color:          #bbb;
    text-transform: uppercase;
    padding:        10px 14px 4px 14px;
    display:        block;
    white-space:    nowrap;
}

.eli-sidebar.collapsed .eli-sidebar-sublabel {
    display: none;
}

/* =========================================================
   NAV ITEM GROUP
   ========================================================= */
.eli-sidebar-nav {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0 8px;
}

/* =========================================================
   NAV ITEM
   ========================================================= */
.eli-sidebar-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         7px 8px;
    border-radius:   8px;
    text-decoration: none;
    color:           #444;
    font-family:     'Nunito', sans-serif;
    font-size:       0.875rem;
    font-weight:     500;
    white-space:     nowrap;
    cursor:          pointer;
    transition:      background 0.15s ease, color 0.15s ease;
    position:        relative; /* needed for tooltip ::after */
    border:          none;
    background:      transparent;
    width:           100%;
    text-align:      left;
}

.eli-sidebar-item:hover {
    background:      #f5f5f5;
    color:           #111;
    text-decoration: none;
}

/* Active item highlight */
.eli-sidebar-item.eli-sidebar-active {
    background:  #FEF3DC;
    color:       #B07010;
    font-weight: 500;
}

.eli-sidebar-item svg {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
}

/* Allow text to wrap for "[Name]'s Notes" items — icon pins to top */
.eli-sidebar-item--wrap {
    align-items: flex-start;
}

.eli-sidebar-item--wrap .eli-sidebar-text {
    /* overflow: hidden; */
    overflow:    visible;
    white-space: normal;
}

/* Text label */
.eli-sidebar-text {
    opacity:    1;
    transition: opacity 0.12s ease;
    overflow:   hidden;
    flex:       1;
}

/* Hide text when collapsed */
.eli-sidebar.collapsed .eli-sidebar-text {
    opacity: 0;
    width:   0;
}

/* =========================================================
   TOOLTIPS (shown only when collapsed, on hover)
   ========================================================= */
.eli-sidebar.collapsed .eli-sidebar-item[data-tip]:hover::after {
    content:        attr(data-tip);
    position:       absolute;
    left:           50px;
    top:            50%;
    transform:      translateY(-50%);
    background:     #1a1a1a;
    color:          #fff;
    padding:        4px 10px;
    border-radius:  6px;
    font-size:      0.75rem;
    font-family:    'Nunito', sans-serif;
    white-space:    nowrap;
    z-index:        200;
    pointer-events: none;
    box-shadow:     0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Small arrow pointing left toward the icon */
.eli-sidebar.collapsed .eli-sidebar-item[data-tip]:hover::before {
    content:        '';
    position:       absolute;
    left:           44px;
    top:            50%;
    transform:      translateY(-50%);
    border:         5px solid transparent;
    border-right-color: #1a1a1a;
    z-index:        201;
    pointer-events: none;
}

/* =========================================================
   DIVIDER LINE
   ========================================================= */
.eli-sidebar-divider {
    height:     0.5px;
    background: var(--color-border-tertiary);
    margin:     8px 8px;
    flex-shrink: 0;
}

/* =========================================================
   STUDENT LIST ITEMS (contextual sections)
   ========================================================= */
.eli-sidebar-students {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0 8px;
}

.eli-sidebar-student {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         6px 8px;
    border-radius:   8px;
    text-decoration: none;
    color:           #444;
    font-family:     'Nunito', sans-serif;
    font-size:       0.82rem;
    font-weight:     500;
    white-space:     nowrap;
    position:        relative;
    transition:      background 0.15s ease;
}

.eli-sidebar-student:hover {
    background:      #f5f5f5;
    text-decoration: none;
    color:           #111;
}

.eli-sidebar-student.eli-sidebar-active {
    background: #FEF3DC;
    color:      #B07010;
}

/* Avatar dot */
.eli-sidebar-dot {
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      #F5A623;
    color:           #fff;
    font-family:     'Nunito', sans-serif;
    /* font-size:       0.62rem; */
    font-size:       0.75rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    text-transform:  uppercase;
}

/* Student name — hide when collapsed */
.eli-sidebar-student-name {
    overflow:      hidden;
    text-overflow: ellipsis;
    opacity:       1;
    transition:    opacity 0.12s ease;
}

.eli-sidebar.collapsed .eli-sidebar-student-name {
    opacity: 0;
    width:   0;
}

/* Tick for "current student" in notes context */
.eli-sidebar-tick {
    margin-left: auto;
    color:       #B07010;
    flex-shrink: 0;
}

.eli-sidebar.collapsed .eli-sidebar-tick {
    display: none;
}

/* Collapsed tooltip for student items */
.eli-sidebar.collapsed .eli-sidebar-student[data-tip]:hover::after {
    content:        attr(data-tip);
    position:       absolute;
    left:           38px;
    top:            50%;
    transform:      translateY(-50%);
    background:     #1a1a1a;
    color:          #fff;
    padding:        4px 10px;
    border-radius:  6px;
    font-size:      0.75rem;
    font-family:    'Nunito', sans-serif;
    white-space:    nowrap;
    z-index:        200;
    pointer-events: none;
    box-shadow:     0 2px 8px rgba(0, 0, 0, 0.18);
}

.eli-sidebar.collapsed .eli-sidebar-student[data-tip]:hover::before {
    content:            '';
    position:           absolute;
    left:               32px;
    top:                50%;
    transform:          translateY(-50%);
    border:             5px solid transparent;
    border-right-color: #1a1a1a;
    z-index:            201;
    pointer-events:     none;
}

/* =========================================================
   INVITE LINK (orange, below student list)
   ========================================================= */
.eli-sidebar-invite {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         6px 8px;
    margin:          4px 8px 0 8px;
    border-radius:   8px;
    text-decoration: none;
    color:           #F5A623;
    font-family:     'Nunito', sans-serif;
    font-size:       0.82rem;
    font-weight:     600;
    white-space:     nowrap;
    transition:      background 0.15s ease;
    border:          none;
    background:      transparent;
    cursor:          pointer;
    width:           calc(100% - 16px);
    box-sizing:      border-box;
}

.eli-sidebar-invite:hover {
    background:      #FFF8EE;
    text-decoration: none;
    color:           #D4820A;
}

.eli-sidebar-invite svg {
    flex-shrink: 0;
    width:       16px;
    height:      16px;
}

.eli-sidebar.collapsed .eli-sidebar-invite span {
    opacity: 0;
    width:   0;
    overflow: hidden;
}

/* =========================================================
   STUDENT PILL SWITCHER (notes contextual section)
   ========================================================= */
.eli-student-pill-wrap {
    padding: 6px 8px 4px;
}

/* Pill trigger button */
.eli-student-pill-btn {
    display:         flex;
    align-items:     center;
    gap:             7px;
    width:           100%;
    background:      #FEF3DC;
    border:          1px solid #F5A623;
    border-radius:   999px;
    padding:         5px 10px 5px 8px;
    cursor:          pointer;
    transition:      background 0.15s ease, border-color 0.15s ease;
    position:        relative; /* needed for collapsed tooltip ::after */
}

.eli-student-pill-btn:hover {
    background: #fde9b8;
}

/* Collapsed: strip the pill shape, show just the avatar dot */
.eli-sidebar.collapsed .eli-student-pill-btn {
    background:      transparent;
    border:          none;
    padding:         4px 8px;
    justify-content: center;
    width:           auto;
}

.eli-pill-avatar {
    flex-shrink: 0;
}

/* Name + chevron — hidden when collapsed, same pattern as .eli-sidebar-text */
.eli-pill-text {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex:        1;
    min-width:   0;
    overflow:    hidden;
    opacity:     1;
    transition:  opacity 0.12s ease;
}

.eli-sidebar.collapsed .eli-pill-text {
    opacity: 0;
    width:   0;
}

.eli-pill-name {
    font-family:   'Nunito', sans-serif;
    font-size:     0.8rem;
    font-weight:   600;
    color:         #B07010;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    flex:          1;
}

.eli-pill-text svg {
    flex-shrink: 0;
    color:       #B07010;
}

/* Collapsed tooltip — mirrors the pattern used for .eli-sidebar-item */
.eli-sidebar.collapsed .eli-student-pill-btn[data-tip]:hover::after {
    content:        attr(data-tip);
    position:       absolute;
    left:           50px;
    top:            50%;
    transform:      translateY(-50%);
    background:     #1a1a1a;
    color:          #fff;
    padding:        4px 10px;
    border-radius:  6px;
    font-size:      0.75rem;
    font-family:    'Nunito', sans-serif;
    white-space:    nowrap;
    z-index:        200;
    pointer-events: none;
    box-shadow:     0 2px 8px rgba(0, 0, 0, 0.18);
}

.eli-sidebar.collapsed .eli-student-pill-btn[data-tip]:hover::before {
    content:            '';
    position:           absolute;
    left:               44px;
    top:                50%;
    transform:          translateY(-50%);
    border:             5px solid transparent;
    border-right-color: #1a1a1a;
    z-index:            201;
    pointer-events:     none;
}

/* Dropdown — hidden by default, shown/positioned by JS */
.eli-student-pill-dropdown {
    position:      fixed;
    display:       none;
    background:    #fff;
    border-radius: 10px;
    box-shadow:    0 6px 24px rgba(0, 0, 0, 0.13);
    min-width:     180px;
    z-index:                    500;
    max-height:                 60vh;
    overflow-y:                 auto;
    -webkit-overflow-scrolling: touch;
    padding:                    6px 0;
}

.eli-student-pill-item {
    display:         block;
    padding:         9px 16px;
    font-size:       0.875rem;
    font-family:     'Nunito', sans-serif;
    color:           #333;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 0.1s ease;
}

.eli-student-pill-item:hover {
    background:      #fdf3e3;
    color:           #F5A623;
    text-decoration: none;
}

.eli-student-pill-item--active {
    color:       #B07010;
    font-weight: 600;
    background:  #FEF3DC;
}

/* =========================================================
   INVITE STUDENT INLINE DROPDOWN
   ========================================================= */

/* Wrapper around the button + panel */
.eli-sidebar-invite-wrap {
    display: block;
}

/* Dropdown panel — hidden by default, shown by JS */
.eli-sidebar-invite-panel {
    display:     none;
    padding:     8px 8px 6px 8px;
    margin:      0 8px;
}

/* Helper text */
.eli-invite-hint {
    font-family: 'Nunito', sans-serif;
    font-size:   0.73rem;
    color:       #999;
    margin:      0 0 8px;
    line-height: 1.45;
    white-space: normal;
}

/* Read-only URL input — truncates long URLs */
.eli-invite-url-field {
    display:       block;
    width:         100%;
    font-family:   'Nunito', sans-serif;
    font-size:     0.7rem;
    color:         #666;
    border:        1px solid #e0e0e0;
    border-radius: 6px;
    padding:       5px 7px;
    background:    #f8f8f8;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    box-sizing:    border-box;
    margin-bottom: 7px;
}

/* Row holding the Copy button and "✓ Copied" text */
.eli-invite-action-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Orange copy button */
.eli-invite-copy-btn {
    background:    #f5a623;
    color:         #fff;
    border:        none;
    border-radius: 6px;
    padding:       5px 13px;
    font-family:   'Nunito', sans-serif;
    font-size:     0.78rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s ease;
    white-space:   nowrap;
}

.eli-invite-copy-btn:hover {
    background: #e0941a;
}

/* "✓ Copied" confirmation */
.eli-invite-copied {
    display:     none;
    font-family: 'Nunito', sans-serif;
    font-size:   0.78rem;
    font-weight: 600;
    color:       #4caf50;
    white-space: nowrap;
}

/* Chevron — sits at the right of the invite button; rotates when open */
.eli-invite-chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition:  transform 0.2s ease;
}

.eli-sidebar-invite-wrap.open .eli-invite-chevron {
    transform: rotate(180deg);
}

/* Hide panel and chevron when sidebar is collapsed */
.eli-sidebar.collapsed .eli-sidebar-invite-panel {
    display: none !important;
}

.eli-sidebar.collapsed .eli-invite-chevron {
    display: none;
}

/* =========================================================
   MOBILE BURGER BUTTON
   Hidden on desktop — only shown via media query below.
   ========================================================= */
.eli-sidebar-burger {
    display: none;
}

/* =========================================================
   MOBILE BACKDROP
   Hidden by default on all screen sizes.
   Shown (display: block) when sidebar is open on mobile.
   ========================================================= */
.eli-sidebar-backdrop {
    display:       none;
    position:      fixed;
    inset:         0;
    background:    rgba(0, 0, 0, 0.35);
    z-index:       99;
}

.eli-sidebar-backdrop.visible {
    display: block;
}

/* =========================================================
   MOBILE — sidebar becomes a slide-in overlay at ≤ 768px
   ========================================================= */
@media (max-width: 768px) {

    /* Remove the left-padding that compensates for the fixed sidebar */
    .eli-page-body:has(.eli-sidebar) {
        padding-left: 0;
    }

    /* Also remove for the collapsed state — not needed on mobile */
    .eli-page-body:has(.eli-sidebar.collapsed) {
        padding-left: 0;
    }

    /* Sidebar starts hidden off-screen to the left */
    .eli-sidebar {
        transform:  translateX(-100%);
        transition: transform 0.25s ease, width 0.22s ease;
        z-index:    100;
        height:     100vh;                   /* fallback for all browsers */
        height:     -webkit-fill-available;  /* older iOS + UC/QQ browsers */
        height:     100svh;                  /* modern iOS and Android */
    }

    /* Open state — slides fully into view at expanded width */
    .eli-sidebar.mobile-open {
        transform: translateX(0);
        width:     var(--sidebar-width);
    }

    /* Force all text/labels visible when open on mobile,
       even if sidebar was in a collapsed state on desktop */
    .eli-sidebar.mobile-open .eli-sidebar-text,
    .eli-sidebar.mobile-open .eli-sidebar-brand-name,
    .eli-sidebar.mobile-open .eli-sidebar-student-name,
    .eli-sidebar.mobile-open .eli-sidebar-label,
    .eli-sidebar.mobile-open .eli-sidebar-sublabel {
        opacity: 1;
        width:   auto;
    }

    .eli-sidebar.mobile-open .eli-sidebar-tick {
        display: flex;
    }

    .eli-sidebar.mobile-open .eli-invite-chevron {
        display: flex;
    }

    /* Hide the desktop collapse toggle — burger button takes over */
    .eli-sidebar-toggle {
        display: none;
    }

    /* Burger button — 44x44px tap target, fixed top-left corner */
    .eli-sidebar-burger {
        display:         flex;
        align-items:     center;
        justify-content: center;
        position:        fixed;
        top:             12px;
        left:            12px;
        width:           44px;
        height:          44px;
        background:      var(--color-background-primary);
        border:          0.5px solid var(--color-border-secondary);
        border-radius:   10px;
        cursor:          pointer;
        z-index:         98;
        box-shadow:      0 2px 8px rgba(0, 0, 0, 0.08);
        padding:         0;
        color:           #444;
    }

    .eli-sidebar-burger:hover {
        background:   #FEF3DC;
        border-color: #F5C97A;
        color:        #B07010;
    }

    /* Push page content down so it clears the burger button */
    .eli-content {
        padding-top: 68px;
    }

    /* Notification dropdown — cap width so it never overflows the screen edge */
    .eli-notif-dropdown {
        width:     calc(100vw - 32px);
        max-width: 300px;
        left:      16px !important; /* override the JS-set left position on mobile */
    }
}