/* Glass navigation (01.11.2026): a floating, narrow glass bar with round icon buttons on the left edge.
   Collapsed (default on desktop): 64 px wide pill, icons only, the label appears as a tooltip (crm-glass-nav.js).
   Expanded (arrow next to the logo, stored per device in crm_nav_open): 236 px wide, labels and group headings.
   Phones keep the drawer from the hamburger button, in the same glass look.
   All rules hang on #sidebar so they win over crm-shell.css, crm-style.css and crm-liquid.css without touching them. */

body {
    --gn-gap: 12px;
    --gn-w-zu: 64px;
    --gn-w-auf: 236px;
    --gn-glas: rgba(255, 255, 255, .68);
    --gn-rand: rgba(15, 23, 42, .08);
    --gn-licht: rgba(255, 255, 255, .9);
    --gn-schatten: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -8px rgba(15, 23, 42, .14);
    --gn-text: #5b6472;
    --gn-text-stark: #111827;
    --gn-text-leise: #8a93a0;
    --gn-hover: rgba(15, 23, 42, .045);
    --gn-aktiv: #ffffff;
    --gn-aktiv-rand: rgba(15, 23, 42, .07);
    --gn-aktiv-schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px -4px rgba(15, 23, 42, .12);
    --gn-linie: rgba(15, 23, 42, .08);
    --gn-pop: rgba(255, 255, 255, .94);
}
body.dark-mode {
    --gn-glas: rgba(26, 28, 31, .66);
    --gn-rand: rgba(255, 255, 255, .08);
    --gn-licht: rgba(255, 255, 255, .06);
    --gn-schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -10px rgba(0, 0, 0, .55);
    --gn-text: #a3aaa6;
    --gn-text-stark: #f2f4f3;
    --gn-text-leise: #7d8580;
    --gn-hover: rgba(255, 255, 255, .05);
    --gn-aktiv: rgba(255, 255, 255, .1);
    --gn-aktiv-rand: rgba(255, 255, 255, .1);
    --gn-aktiv-schatten: inset 0 1px 0 rgba(255, 255, 255, .06);
    --gn-linie: rgba(255, 255, 255, .07);
    --gn-pop: rgba(30, 32, 35, .96);
}

/* ---------- Glass surface and expanded layout (all screen sizes) ---------- */
body #sidebar {
    background: var(--gn-glas) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
    backdrop-filter: blur(24px) saturate(170%) !important;
    border: 1px solid var(--gn-rand) !important;
    box-shadow: inset 0 1px 0 var(--gn-licht), var(--gn-schatten) !important;
    border-radius: 24px !important;
    color: var(--gn-text);
    overflow: visible !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body #sidebar { background: var(--card, #fff) !important; }
}
@media (prefers-reduced-transparency: reduce) {
    body #sidebar { background: var(--card, #fff) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    body.dark-mode #sidebar { background: #1a1c1f !important; }
}

#sidebar .sidebar-brand { position: relative; min-height: 0; padding: 14px 14px 10px; align-items: center; }
#sidebar .brand-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 1px solid var(--gn-rand); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .25); }
#sidebar .brand-text strong { color: var(--gn-text-stark); }
#sidebar .brand-text span { color: var(--gn-text-leise); }

#sidebar .sidebar-create { padding: 2px 12px 10px; }
#sidebar .btn-add-lead { min-height: 38px; border-radius: 999px; padding: 8px 14px; box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--brand, #1fae8c) 70%, transparent); }

#sidebar .sidebar-nav { padding: 0 10px 8px; gap: 6px; scrollbar-width: none; }
#sidebar .sidebar-nav::-webkit-scrollbar { display: none; }
#sidebar .nav-group + .nav-group { padding-top: 6px; border-top: 1px solid var(--gn-linie); }
#sidebar .nav-group-toggle { color: var(--gn-text-leise); border-radius: 999px; padding: 4px 12px; letter-spacing: .01em; }
#sidebar .nav-group-toggle:hover { color: var(--gn-text-stark); background: var(--gn-hover); }

#sidebar .nav-item { min-height: 38px; padding: 6px 12px; border-radius: 999px; color: var(--gn-text); border: 1px solid transparent; background: transparent; }
#sidebar .nav-item:hover { color: var(--gn-text-stark); background: var(--gn-hover); }
#sidebar .nav-item.active {
    color: var(--gn-text-stark) !important;
    background: var(--gn-aktiv) !important;
    border: 1px solid var(--gn-aktiv-rand) !important;
    box-shadow: var(--gn-aktiv-schatten) !important;
    font-weight: 500;
}
#sidebar .nav-item.active .shell-icon { color: var(--primary, var(--brand, #1fae8c)); }
#sidebar .nav-item.active::after { display: none !important; }
#sidebar :is(.today-badge, .shell-count) { border-radius: 999px; background: var(--gn-hover); color: var(--gn-text); }

#sidebar .sidebar-appearance { margin: 0 12px; padding: 6px 0; border-top: 1px solid var(--gn-linie); }
#sidebar .theme-toggle-btn { min-height: 40px; border-radius: 999px; padding: 6px 10px; color: var(--gn-text-stark); }
#sidebar .theme-toggle-btn:hover { background: var(--gn-hover); }
#sidebar .theme-caption small { color: var(--gn-text-leise); }
#sidebar .theme-track { border-radius: 999px; border-color: var(--gn-rand); background: var(--gn-hover); }
#sidebar .theme-track > span { background: var(--gn-text-leise); }
#sidebar .theme-toggle-btn[aria-checked="true"] .theme-track > span { background: var(--primary, var(--brand, #1fae8c)); }

#sidebar .sidebar-account { position: relative; margin: 0 12px; border-top: 1px solid var(--gn-linie); }
#sidebar .account-menu > summary { border-radius: 999px; }
#sidebar .account-menu > summary:hover, #sidebar .account-menu[open] > summary { background: var(--gn-hover); }
#sidebar .account-avatar { border-radius: 50%; background: var(--gn-aktiv); border-color: var(--gn-rand); color: var(--gn-text-stark); }
#sidebar #sidebar-username { color: var(--gn-text-stark); }
#sidebar #sidebar-role, #sidebar .account-menu .nav-chevron { color: var(--gn-text-leise); }
#sidebar .account-menu .account-actions {
    background: var(--gn-pop); border: 1px solid var(--gn-rand); border-radius: 16px; padding: 6px;
    -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
    box-shadow: var(--gn-schatten);
}
#sidebar .account-menu .account-actions button { color: var(--gn-text-stark); border-radius: 10px; }
#sidebar .account-menu .account-actions button:hover { background: var(--gn-hover); }

/* Expand / collapse arrow: a small round button sitting on the right edge next to the logo */
.gn-schalter { display: none; }
#sidebar .shell-close { color: var(--gn-text) !important; border-radius: 50% !important; }

/* ---------- Desktop: floating bar ---------- */
@media (min-width: 769px) {
    body #sidebar {
        top: var(--gn-gap) !important;
        bottom: var(--gn-gap) !important;
        left: var(--gn-gap) !important;
        height: auto !important;
        min-height: 0 !important;
        width: var(--gn-w-auf) !important;
        transition: width var(--motion-panel, .22s) var(--ease-standard, ease);
        z-index: 40;
    }
    body .main { margin-left: calc(var(--gn-w-auf) + var(--gn-gap) * 2) !important; transition: margin-left var(--motion-panel, .22s) var(--ease-standard, ease); }

    .gn-schalter {
        display: grid; place-items: center; position: absolute; top: 22px; right: -11px; z-index: 2;
        width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
        border: 1px solid var(--gn-rand); background: var(--gn-pop); color: var(--gn-text-stark);
        box-shadow: 0 2px 8px -2px rgba(15, 23, 42, .25);
    }
    .gn-schalter:hover { color: var(--primary, var(--brand, #1fae8c)); }
    .gn-schalter svg { width: 12px; height: 12px; transition: transform var(--motion-panel, .22s) var(--ease-standard, ease); }
    html.gn-auf .gn-schalter svg { transform: rotate(180deg); }

    /* ----- Collapsed: icons only ----- */
    html:not(.gn-auf) body #sidebar { width: var(--gn-w-zu) !important; border-radius: 32px !important; }
    html:not(.gn-auf) body .main { margin-left: calc(var(--gn-w-zu) + var(--gn-gap) * 2) !important; }

    html:not(.gn-auf) #sidebar .sidebar-brand { justify-content: center; padding: 13px 0 10px; }
    html:not(.gn-auf) #sidebar .brand-text { display: none; }

    html:not(.gn-auf) #sidebar .sidebar-create { display: flex; justify-content: center; padding: 0 0 8px; }
    html:not(.gn-auf) #sidebar .btn-add-lead { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
    html:not(.gn-auf) #sidebar .btn-add-lead > span { display: none; }

    html:not(.gn-auf) #sidebar .sidebar-nav { padding: 0 0 8px; align-items: center; gap: 4px; }
    html:not(.gn-auf) #sidebar .nav-group { align-items: center; gap: 4px; width: 100%; }
    html:not(.gn-auf) #sidebar .nav-group + .nav-group { padding-top: 4px; border-top: 0; }
    html:not(.gn-auf) #sidebar .nav-group + .nav-group::before { content: ''; width: 18px; height: 1px; margin: 2px auto 4px; background: var(--gn-linie); }
    html:not(.gn-auf) #sidebar .nav-group-toggle { display: none; }
    html:not(.gn-auf) #sidebar .nav-group-items { display: flex !important; flex-direction: column; align-items: center; gap: 4px; }
    html:not(.gn-auf) #sidebar .nav-item { position: relative; width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
    html:not(.gn-auf) #sidebar .nav-item .shell-icon { width: 19px; height: 19px; flex-basis: 19px; }
    html:not(.gn-auf) #sidebar .nav-item .nav-label,
    html:not(.gn-auf) #sidebar .shell-count { display: none; }
    /* "Today" counter becomes a small dot on the icon */
    html:not(.gn-auf) #sidebar .today-badge {
        position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; min-width: 0; padding: 0;
        border-radius: 50%; font-size: 0; background: var(--primary, var(--brand, #1fae8c)); box-shadow: 0 0 0 2px var(--gn-glas);
    }

    html:not(.gn-auf) #sidebar .sidebar-appearance { margin: 0 12px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; }
    html:not(.gn-auf) #sidebar .sidebar-appearance > :not(#theme-toggle-btn) { display: none !important; }
    html:not(.gn-auf) #sidebar #theme-toggle-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
    html:not(.gn-auf) #sidebar #theme-toggle-btn .theme-caption > span,
    html:not(.gn-auf) #sidebar #theme-toggle-btn .theme-track { display: none; }
    html:not(.gn-auf) #sidebar #theme-toggle-btn .theme-caption { gap: 0; justify-content: center; width: 100%; }
    html:not(.gn-auf) #sidebar #theme-toggle-btn .theme-caption > i { width: auto; margin: 0; }

    html:not(.gn-auf) #sidebar .sidebar-account { margin: 0 12px; padding: 8px 0 12px; display: flex; justify-content: center; }
    html:not(.gn-auf) #sidebar .account-menu > summary { padding: 3px; min-height: 0; border-radius: 50%; }
    html:not(.gn-auf) #sidebar .account-copy,
    html:not(.gn-auf) #sidebar .account-menu .nav-chevron { display: none; }
    html:not(.gn-auf) #sidebar .account-avatar { width: 36px; height: 36px; flex-basis: 36px; }
    /* The account menu opens beside the bar instead of above it */
    html:not(.gn-auf) #sidebar .account-menu .account-actions { left: calc(100% + 18px); right: auto; bottom: 4px; width: 220px; }
    html:not(.gn-auf) #sidebar .account-menu .account-actions button { width: 100%; }
}

/* ---------- Phone: drawer floats with a small inset ---------- */
@media (max-width: 768px) {
    body #sidebar { top: 10px !important; bottom: 10px !important; left: 10px !important; height: auto !important; width: min(280px, calc(100vw - 40px)) !important; }
    /* Over the darkened page the glass needs more body, otherwise it turns grey */
    body { --gn-glas: rgba(255, 255, 255, .92); }
    body.dark-mode { --gn-glas: rgba(26, 28, 31, .92); }
    #sidebar .sidebar-brand { padding-right: 8px !important; }
    #sidebar .shell-close { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
}

/* Tooltip next to the collapsed bar */
.gn-tipp {
    position: fixed; z-index: 1000; pointer-events: none; padding: 5px 10px; border-radius: 8px;
    background: var(--gn-pop); color: var(--gn-text-stark); border: 1px solid var(--gn-rand);
    font: 500 12px/1.4 var(--app-font, system-ui); white-space: nowrap; box-shadow: var(--gn-schatten);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; transform: translate(-4px, -50%); transition: opacity .12s ease, transform .12s ease;
}
.gn-tipp.sichtbar { opacity: 1; transform: translate(0, -50%); }

@media (prefers-reduced-motion: reduce) {
    body #sidebar, body .main, .gn-schalter svg, .gn-tipp { transition: none !important; }
}

/* More items below the visible part of the bar: soft fade at the bottom edge instead of a scrollbar */
#sidebar .sidebar-nav.gn-mehr { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }