/* ===== Sidebar menu (groups, icons) ===== */

.sb-nav .sb-group-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sb-sub {
    display: none;
}

.sb-group.open .sb-sub {
    display: block;
}

/* ---------- Mobile / small screens: keep the old look, groups always open ---------- */
@media (max-width: 768px) {
    .sb-ico,
    .sb-chev,
    .sb-collapse {
        display: none;
    }

    .sb-nav .sb-group-btn {
        padding: 12px 14px 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #8a6d68;
        cursor: default;
        pointer-events: none;
    }

    .sb-sub {
        display: block;
    }
}

/* ---------- Laptop / desktop ---------- */
@media (min-width: 769px) {
    :root {
        --sb-w: 264px;
    }

    body.sb-collapsed {
        --sb-w: 76px;
    }

    .app-layout {
        display: block !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 100;
        width: var(--sb-w) !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        background: linear-gradient(180deg, #0e3b2a 0%, #0a2c1f 100%) !important;
        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: #d3e6dc;
        transition: width 0.18s ease;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }

    .main-content {
        margin-left: var(--sb-w) !important;
        transition: margin-left 0.18s ease;
    }

    /* brand */
    .sidebar .brand {
        padding: 22px 20px 16px;
        border: 0 !important;
        background: transparent !important;
    }

    .sidebar .brand h1 {
        margin: 0;
        font-size: 17px;
        letter-spacing: 0.04em;
        color: #ffffff !important;
        white-space: nowrap;
    }

    .sidebar .brand p {
        margin: 4px 0 0;
        font-size: 12px;
        color: #8fb5a2 !important;
        white-space: nowrap;
    }

    .sb-nav {
        flex: 1;
        padding: 6px 12px 12px;
    }

    /* links and group buttons */
    .sidebar .sb-nav .nav-link,
    .sidebar .sb-nav .sb-group-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        margin: 2px 0;
        padding: 11px 12px;
        border-radius: 10px;
        background: transparent;
        color: #cfe3d8 !important;
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.12s, color 0.12s;
    }

    .sidebar .sb-nav .nav-link:hover,
    .sidebar .sb-nav .sb-group-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff !important;
    }

    .sidebar .sb-nav .nav-link.active {
        background: #1fa463 !important;
        color: #ffffff !important;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(31, 164, 99, 0.35);
    }

    .sb-group.has-active > .sb-group-btn {
        color: #ffffff !important;
    }

    .sb-ico {
        flex: none;
    }

    .sb-text {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sb-chev {
        flex: none;
        opacity: 0.7;
        transition: transform 0.15s;
    }

    .sb-group.open > .sb-group-btn .sb-chev {
        transform: rotate(90deg);
    }

    /* sub links */
    .sb-sub {
        margin: 2px 0 6px 21px;
        padding-left: 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .sidebar .sb-sub .nav-link {
        padding: 9px 12px;
        font-size: 13.5px;
        color: #aecabb !important;
    }

    /* collapse button */
    .sb-collapse {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 12px 14px;
        padding: 11px 12px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        background: transparent;
        color: #cfe3d8;
        font: inherit;
        font-size: 13.5px;
        cursor: pointer;
    }

    .sb-collapse:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    .sb-collapse svg {
        flex: none;
        transition: transform 0.18s;
    }

    /* ----- collapsed (icons only) ----- */
    body.sb-collapsed .sidebar .brand {
        padding: 22px 0 16px;
        text-align: center;
    }

    body.sb-collapsed .sidebar .brand h1,
    body.sb-collapsed .sidebar .brand p {
        font-size: 0;
    }

    body.sb-collapsed .sidebar .brand h1::before {
        content: "MN";
        font-size: 17px;
        font-weight: 800;
    }

    body.sb-collapsed .sb-text,
    body.sb-collapsed .sb-chev,
    body.sb-collapsed .sb-sub {
        display: none !important;
    }

    body.sb-collapsed .sb-nav {
        padding: 6px 10px 12px;
    }

    body.sb-collapsed .sidebar .sb-nav .nav-link,
    body.sb-collapsed .sidebar .sb-nav .sb-group-btn {
        justify-content: center;
        padding: 12px 0;
    }

    body.sb-collapsed .sb-collapse {
        justify-content: center;
        margin: 0 10px 14px;
        padding: 11px 0;
    }

    body.sb-collapsed .sb-collapse svg {
        transform: rotate(180deg);
    }
}
/* ===== Cloud sync status (bottom of sidebar) ===== */
.sync-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px;
    padding: 9px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.sync-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9aa8a0;
}

.sync-ok .sync-dot { background: #2fbf71; }
.sync-syncing .sync-dot { background: #f0b429; animation: sync-pulse 1s infinite; }
.sync-updated .sync-dot { background: #3b82f6; }
.sync-offline .sync-dot { background: #9aa8a0; }
.sync-signedout .sync-dot,
.sync-error .sync-dot { background: #e5484d; }

@keyframes sync-pulse {
    50% { opacity: 0.3; }
}

@media (min-width: 769px) {
    .sidebar .sync-chip {
        border-color: rgba(255, 255, 255, 0.14);
        color: #cfe3d8;
    }

    .sidebar .sync-chip:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    body.sb-collapsed .sync-text { display: none; }
    body.sb-collapsed .sidebar .sync-chip { justify-content: center; margin: 8px 10px; }
}
/* Hide the old menu until sidebar.js has built the new one (no flash) */
.sidebar nav:not(.sb-nav) {
    visibility: hidden;
    animation: sb-reveal 0s linear 2s forwards;
}

@keyframes sb-reveal {
    to { visibility: visible; }
}