/* Keep navigation and account controls within the fixed-height header. */
#page-topbar .plan-usage-panel { width:380px; max-width:calc(100vw - 24px); border-radius:10px; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,.22); color:inherit; }
.plan-usage-header { padding:20px 22px 16px; border-bottom:1px solid rgba(150,160,180,.18); }
.plan-usage-header h5 { margin:0 0 10px; color:inherit; font-size:17px; font-weight:600; }
.plan-usage-expiry { display:flex; flex-direction:column; gap:4px; margin-top:16px; font-size:12px; }
.plan-usage-expiry > span { opacity:.7; }
.plan-usage-expiry strong { font-size:24px; line-height:1.3; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.plan-usage-body { padding:18px 22px 20px; max-height:calc(100vh - 190px); overflow-y:auto; }
.plan-usage-caption { margin:0 0 18px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; opacity:.65; }
.plan-usage-item + .plan-usage-item { margin-top:18px; }
.plan-usage-line { display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:13px; line-height:1.5; }
.plan-usage-value { flex-shrink:0; font-size:12px; font-variant-numeric:tabular-nums; }
.plan-usage-value strong { font-weight:600; }
.plan-usage-value > span { opacity:.65; }
.plan-usage-track { height:5px; margin-top:9px; border-radius:4px; overflow:hidden; background:rgba(150,160,180,.18); }
.plan-usage-track > span { display:block; height:100%; border-radius:inherit; background:#8793ee; }
.plan-usage-remaining { display:block; margin-top:5px; font-size:11px; opacity:.65; }
.plan-usage-item.is-warning .plan-usage-track > span { background:#e6b66c; }
.plan-usage-item.is-full .plan-usage-track > span { background:#ed8492; }
.plan-usage-item.is-full .plan-usage-remaining { color:#ed8492; opacity:1; }
.plan-usage-tools { padding-top:16px; border-top:1px solid rgba(150,160,180,.18); }
#sidebar-menu .sidebar-project-label { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#sidebar-menu .sidebar-project-settings { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:4px; border-radius:4px; color:inherit; line-height:1; }
#sidebar-menu .sidebar-project-settings i { margin:0; width:auto; font-size:16px; }
#sidebar-menu .sidebar-project-settings:hover { color:#b8c0ff; background:rgba(98,110,212,.16); }
#sidebar-menu .sidebar-project-settings:focus-visible { outline:2px solid #8793db; outline-offset:2px; }
#sidebar-menu .sidebar-project-heading > p:first-child { padding-top:8px; padding-bottom:18px; margin-bottom:0!important; font-weight:600; }
#sidebar-menu .sidebar-project-heading { position:sticky; top:0; z-index:2; padding-top:4px; padding-bottom:1px; background:#2a3142; }
#sidebar-menu .sidebar-current-project { display:flex; align-items:center; gap:10px; margin:0 12px 20px; padding:12px; border:1px solid rgba(135,147,238,.28); border-radius:7px; background:rgba(135,147,238,.12); }
#sidebar-menu .sidebar-current-project-copy { flex:1; min-width:0; }
#sidebar-menu .sidebar-current-project-copy small { display:block; margin-bottom:4px; color:#a6b0c6; font-size:11px; }
#sidebar-menu .sidebar-current-project-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eef0ff; font-size:15px; font-weight:600; }
#sidebar-menu .sidebar-current-project > .sidebar-project-settings { flex-shrink:0; color:#bcc6df; }
#sidebar-menu .sidebar-project-caption { display:flex; justify-content:space-between; align-items:center; margin:0 16px 10px; color:#a6b0c6; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
#sidebar-menu .sidebar-project-caption > span { padding:1px 6px; border-radius:4px; background:rgba(150,160,180,.12); font-size:10px; }
#sidebar-menu .sidebar-project-search { display:flex; align-items:center; gap:8px; margin:0 12px 12px; padding:9px 10px; border:1px solid rgba(150,160,180,.25); border-radius:6px; color:#a6b0c6; }
#sidebar-menu .sidebar-project-search i { font-size:13px; }
#sidebar-menu .sidebar-project-search input { width:100%; min-width:0; padding:0; border:0; outline:none; color:#eef0ff; background:transparent; font-size:13px; }
#sidebar-menu .sidebar-project-search input::placeholder { color:#a6b0c6; opacity:1; }
#sidebar-menu .sidebar-project-search:focus-within { border-color:#8793ee; box-shadow:0 0 0 2px rgba(135,147,238,.15); }
#sidebar-menu .sidebar-project-empty { padding:12px 20px; color:#a6b0c6; font-size:12px; }
#sidebar-menu .sidebar-project-row[hidden], #sidebar-menu .sidebar-project-empty[hidden] { display:none!important; }
#sidebar-menu .sidebar-project-row { position:relative; margin:4px 12px; border-radius:7px; }
#sidebar-menu .sidebar-project-row > .sidebar-project-link { display:block; padding:12px; border-radius:7px; color:#a6b0c6; font-size:14px; line-height:20px; }
#sidebar-menu .sidebar-project-link > span { align-items:center; gap:10px; min-width:0; }
#sidebar-menu .sidebar-project-link i { flex-shrink:0; width:auto; margin:0; font-size:17px; }
#sidebar-menu .sidebar-project-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sidebar-menu .sidebar-project-row.is-current { background:rgba(135,147,238,.14); box-shadow:inset 3px 0 #8793ee; }
#sidebar-menu .sidebar-project-row.is-current > .sidebar-project-link { color:#eef0ff; font-weight:600; }
#sidebar-menu .sidebar-project-row.has-settings > .sidebar-project-link { padding-right:46px; }
#sidebar-menu .sidebar-project-row > .sidebar-project-settings { position:absolute; right:8px; top:8px; display:flex; width:28px; height:28px; padding:4px; border-radius:5px; color:#b7c0db; }
#sidebar-menu .sidebar-project-row > a:hover { background:rgba(150,160,180,.1); color:#fff; }
#sidebar-menu .sidebar-project-link:focus-visible, #sidebar-menu .sidebar-project-add:focus-visible { outline:2px solid #8793ee; outline-offset:2px; }
#sidebar-menu .sidebar-project-create { padding-top:12px; border-top:1px solid rgba(150,160,180,.14); }
#sidebar-menu .sidebar-project-add { padding:9px 12px; border:1px solid rgba(150,160,180,.25); border-radius:6px; color:#bcc6df; font-size:13px; background:transparent; }
#sidebar-menu .sidebar-project-add i { margin-right:6px; font-size:11px; }
#sidebar-menu .sidebar-project-add:hover { border-color:#8793ee; color:#eef0ff; background:rgba(135,147,238,.1); }
#page-topbar .topbar-navigation {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}

#page-topbar .navbar-brand-box,
#page-topbar .topbar-actions {
    flex-shrink: 0;
}

#page-topbar .topbar-actions {
    align-items: center;
    margin-left: auto;
}

#page-topbar .topbar-language {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
}

@media (min-width: 992px) {
    #page-topbar .topnav {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0 12px !important;
        background: transparent;
    }

    #page-topbar .topnav .navbar-nav {
        width: auto;
        align-items: center;
        justify-content: flex-start;
    }

    #page-topbar .topnav .nav-link {
        display: flex;
        align-items: center;
        min-height: 70px;
        padding: 0 16px;
        white-space: nowrap;
        font-size: 14.5px;
    }

    #page-topbar .topnav .nav-link i {
        flex-shrink: 0;
    }

    #page-topbar .topnav .nav-link:focus-visible,
    #page-topbar .topnav .nav-link:hover {
        background: rgba(255, 255, 255, .05);
    }

    #page-topbar .topnav .dropdown:focus-within > .dropdown-menu {
        display: block;
    }

    #page-topbar .topnav .nav-item:last-child .dropdown-menu {
        right: 0;
        left: auto;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    #page-topbar .navbar-brand-box {
        width: 70px;
        padding: 0 15px;
    }

    #page-topbar .logo-lg {
        display: none;
    }

    #page-topbar .logo-sm {
        display: block;
    }

    #page-topbar .topnav .nav-link {
        padding: 0 6px;
        font-size: 12px;
    }

    #page-topbar .topnav .nav-link i {
        margin-right: 6px !important;
        font-size: 14px;
    }

    #page-topbar .topbar-actions .header-item {
        padding-right: 8px;
        padding-left: 8px;
    }
}

/* Leave room for all project sections in the compact desktop header. */
#page-topbar .project-module-nav>.nav-link.active,
#page-topbar .project-module-nav .dropdown-item.active { color:inherit; background:rgba(98,110,212,.12); font-weight:600; }
body[data-layout-mode="dark"] #page-topbar .project-module-nav>.nav-link.active,
body[data-layout-mode="dark"] #page-topbar .project-module-nav .dropdown-item.active,
body[data-theme="dark"] #page-topbar .project-module-nav>.nav-link.active,
body[data-theme="dark"] #page-topbar .project-module-nav .dropdown-item.active { color:#b8c0ff; background:rgba(98,110,212,.16); }
@media (min-width: 992px) and (max-width: 1399.98px) {
    #page-topbar .topnav .nav-link {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 11.5px;
    }

    #page-topbar .topnav .nav-link > i {
        display: none;
    }
}