/* Customer console shell v4: navigation, account footer and workspace top bar. */
.client-shell.cloud-console {
    --shell-sidebar: #0b2731;
    --shell-sidebar-raised: #10343f;
    --shell-sidebar-hover: #153f4a;
    --shell-sidebar-active: #12635f;
    --shell-sidebar-line: #28505a;
    --shell-sidebar-text: #e8f3f5;
    --shell-sidebar-muted: #9ebbc3;
    --shell-mint: #62e0c1;
    --shell-blue: #74a9ff;
    --shell-amber: #f3bc61;
    --shell-rose: #ff86a7;
    --shell-cyan: #69d8ec;
}

.client-shell.cloud-console .app-sidebar.client-sidebar {
    background: var(--shell-sidebar) !important;
    border-right-color: var(--shell-sidebar-line) !important;
    box-shadow: 12px 0 34px rgba(9, 34, 42, .08) !important;
}

.client-shell.cloud-console .app-sidebar.client-sidebar::before {
    display: block !important;
    height: 3px !important;
    background: #62e0c1 !important;
    box-shadow: 74px 0 0 #74a9ff, 148px 0 0 #f3bc61, 222px 0 0 #ff86a7 !important;
}

.client-shell.cloud-console .client-brand {
    min-height: 84px;
    padding: 15px 18px;
    border-bottom-color: var(--shell-sidebar-line) !important;
    background: #0d303b !important;
}

.client-shell.cloud-console .client-brand-link { gap: 12px; }
.client-shell.cloud-console .client-brand-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    padding: 3px;
    border-color: rgba(255,255,255,.2);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
    transition: transform .22s ease, box-shadow .22s ease;
}
.client-shell.cloud-console .client-brand-link:hover .client-brand-logo {
    transform: translateY(-2px) rotate(-2deg);
    box-shadow: 0 12px 24px rgba(0,0,0,.22);
}
.client-shell.cloud-console .client-brand-copy strong {
    color: #fff !important;
    font-size: 15px;
    font-weight: 800;
}
.client-shell.cloud-console .client-brand-copy span {
    color: var(--shell-sidebar-muted) !important;
    font-size: 10px;
    font-weight: 600;
}

.client-shell.cloud-console .client-deploy-button {
    position: relative;
    min-height: 48px;
    margin: 18px 16px 8px;
    overflow: hidden;
    border: 1px solid #73e9cb !important;
    border-radius: 8px !important;
    background: #dffaf3 !important;
    color: #075d52 !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
    font-size: 13px;
    font-weight: 800;
}
.client-shell.cloud-console .client-deploy-button::after {
    position: absolute;
    top: -28px;
    left: -52px;
    width: 34px;
    height: 110px;
    content: "";
    background: rgba(255,255,255,.72);
    transform: rotate(25deg);
    transition: left .55s ease;
}
.client-shell.cloud-console .client-deploy-button:hover {
    background: #effdf9 !important;
    color: #064b44 !important;
    transform: translateY(-2px);
}
.client-shell.cloud-console .client-deploy-button:hover::after { left: calc(100% + 24px); }
.client-shell.cloud-console .client-deploy-button i { font-size: 14px; }

.client-shell.cloud-console .client-nav-scroll {
    padding: 2px 12px 18px;
    scrollbar-color: #47717b transparent;
}
.client-shell.cloud-console .client-nav-group { margin-top: 17px; }
.client-shell.cloud-console .client-nav-label {
    padding: 0 10px 7px;
    color: #8fb0b9 !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em !important;
}
.client-shell.cloud-console .client-nav-list { gap: 4px; }
.client-shell.cloud-console .client-nav-link.nav-link {
    min-height: 44px;
    grid-template-columns: 32px minmax(0,1fr) auto;
    gap: 10px;
    padding: 5px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #d1e1e5 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}
.client-shell.cloud-console .client-nav-link > i {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(116,169,255,.16) !important;
    border-radius: 8px !important;
    background: rgba(116,169,255,.12) !important;
    color: var(--shell-blue) !important;
    font-size: 13px !important;
    transition: transform .2s ease, background-color .2s ease, color .2s ease !important;
}
.client-shell.cloud-console .client-nav-group:nth-of-type(3) .client-nav-link > i {
    border-color: rgba(243,188,97,.16) !important;
    background: rgba(243,188,97,.11) !important;
    color: var(--shell-amber) !important;
}
.client-shell.cloud-console .client-nav-group:nth-of-type(4) .client-nav-link > i {
    border-color: rgba(255,134,167,.16) !important;
    background: rgba(255,134,167,.11) !important;
    color: var(--shell-rose) !important;
}
.client-shell.cloud-console .client-nav-group:nth-of-type(5) .client-nav-link > i {
    border-color: rgba(98,224,193,.16) !important;
    background: rgba(98,224,193,.11) !important;
    color: var(--shell-mint) !important;
}
.client-shell.cloud-console .client-nav-link.nav-link:hover {
    border-color: #315964 !important;
    background: var(--shell-sidebar-hover) !important;
    color: #fff !important;
    transform: translateX(2px);
}
.client-shell.cloud-console .client-nav-link:hover > i { transform: translateY(-1px) scale(1.05); }
.client-shell.cloud-console .client-nav-link.nav-link.active {
    border-color: #2b837a !important;
    background: var(--shell-sidebar-active) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 #72e7c8, 0 8px 18px rgba(0,0,0,.12) !important;
}
.client-shell.cloud-console .client-nav-link.active > i {
    border-color: rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.13) !important;
    color: #fff !important;
}
.client-shell.cloud-console .panel-nav-badge {
    border: 1px solid #446874;
    background: #173e49;
    color: #e9f7f8;
}

.client-shell.cloud-console .client-wallet-summary {
    order: 4;
    margin: 0;
    padding: 14px 17px;
    border: 0 !important;
    border-top: 1px solid var(--shell-sidebar-line) !important;
    border-radius: 0;
    background: #103640 !important;
    transition: background-color .18s ease;
}
.client-shell.cloud-console .client-wallet-summary:hover { background: #16434d !important; }
.client-shell.cloud-console .client-wallet-summary > i:first-child {
    background: rgba(98,224,193,.14) !important;
    color: var(--shell-mint) !important;
}
.client-shell.cloud-console .client-wallet-summary span { color: #a9c4ca !important; }
.client-shell.cloud-console .client-wallet-summary strong { color: #fff !important; font-size: 14px; }
.client-shell.cloud-console .client-wallet-summary > .fa-chevron-right { color: #8fb3bc !important; }

.client-shell.cloud-console .client-sidebar-footer {
    order: 5;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 10px;
    padding: 13px 14px;
    border-top-color: var(--shell-sidebar-line) !important;
    background: #081f27 !important;
}
.client-shell.cloud-console .client-sidebar-footer .client-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border: 1px solid rgba(255,255,255,.18);
    background: #f3bc61;
    color: #3b2a08;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.client-shell.cloud-console .client-sidebar-user strong { color: #fff !important; font-size: 11px; }
.client-shell.cloud-console .client-sidebar-user span { color: #91b0b8 !important; font-size: 9px; }
.client-shell.cloud-console .client-sidebar-footer form { margin: 0; }
.client-shell.cloud-console .client-sidebar-logout {
    width: auto;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-color: #355661;
    border-radius: 8px;
    background: #102f38;
    color: #c5d9dd;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.client-shell.cloud-console .client-sidebar-logout:hover {
    border-color: #d85d7c;
    background: #4a2531;
    color: #ffdbe4;
    transform: translateY(-1px);
}

.client-shell.cloud-console .client-topbar.topbar {
    isolation: isolate;
    min-height: 76px !important;
    padding: 11px clamp(18px,2.1vw,32px) !important;
    overflow: visible;
    border-bottom-color: #d8e4e7 !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 8px 26px rgba(16,47,61,.07) !important;
    backdrop-filter: blur(18px) saturate(125%);
}
.client-shell.cloud-console .client-topbar.topbar::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: min(48vw,720px);
    content: "";
    background-image: url('/images/cloud-workspace-v2.png');
    background-repeat: no-repeat;
    background-position: 74% 46%;
    background-size: cover;
    opacity: .075;
    pointer-events: none;
}
.client-shell.cloud-console .client-topbar-left { gap: 12px; min-width: 0; }
.client-shell.cloud-console .client-context-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border: 1px solid #bed4f9;
    border-radius: 8px;
    background: #edf4ff;
    color: #2563eb;
    box-shadow: 0 7px 16px rgba(37,99,235,.1);
}
.client-shell.cloud-console .client-page-context {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.client-shell.cloud-console .client-page-context > span {
    color: #6c8188;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em !important;
}
.client-shell.cloud-console .client-page-context > span::after { display: none; }
.client-shell.cloud-console .client-context-title {
    overflow: hidden;
    color: #12323d;
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-shell.cloud-console .client-topbar-actions { gap: 8px; }
.client-shell.cloud-console .client-health-chip {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #cce5de;
    border-radius: 8px;
    background: #edf9f5;
    color: #087665;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.client-shell.cloud-console .client-health-chip i { animation: shell-signal 2.4s ease-in-out infinite; }
.client-shell.cloud-console .panel-command-trigger,
.client-shell.cloud-console .panel-icon-button,
.client-shell.cloud-console .client-user-trigger {
    border: 1px solid #d6e2e5 !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 5px 14px rgba(16,47,61,.05);
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.client-shell.cloud-console .panel-command-trigger:hover,
.client-shell.cloud-console .panel-icon-button:hover,
.client-shell.cloud-console .client-user-trigger:hover {
    border-color: #9ec9c0 !important;
    background: #f2faf8 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(16,47,61,.09);
}
.client-shell.cloud-console .client-user-trigger { min-height: 42px; padding: 3px 8px 3px 4px; }
.client-shell.cloud-console .client-user-trigger .client-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 7px;
    background: #12635f;
    color: #fff;
}

[data-theme="dark"] .client-shell.cloud-console .client-topbar.topbar {
    border-bottom-color: #2f4b54 !important;
    background: rgba(18,37,44,.95) !important;
}
[data-theme="dark"] .client-shell.cloud-console .client-context-title { color: #eff8f9; }
[data-theme="dark"] .client-shell.cloud-console .client-page-context > span { color: #9cb7be; }
[data-theme="dark"] .client-shell.cloud-console .client-context-mark {
    border-color: #31566f;
    background: #173d51;
    color: #8bb8ff;
}
[data-theme="dark"] .client-shell.cloud-console .client-health-chip {
    border-color: #28574e;
    background: #163e37;
    color: #7be0c7;
}
[data-theme="dark"] .client-shell.cloud-console :is(.panel-command-trigger,.panel-icon-button,.client-user-trigger) {
    border-color: #38515a !important;
    background: rgba(29,52,60,.9) !important;
    color: #e6f0f2;
}

@keyframes shell-signal {
    0%,100% { opacity: .65; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width:1199.98px) {
    .client-shell.cloud-console .client-health-chip span { display:none; }
    .client-shell.cloud-console .client-health-chip { width:40px; padding:0; justify-content:center; }
}
@media (max-width:991.98px) {
    .client-shell.cloud-console .app-sidebar.client-sidebar { width:min(88vw,318px) !important; }
    .client-shell.cloud-console .client-topbar.topbar { min-height:68px !important; padding-inline:16px !important; }
    .client-shell.cloud-console .client-topbar.topbar::before { width:68vw; }
}
@media (max-width:767.98px) {
    .client-shell.cloud-console .client-context-mark { width:36px; height:36px; flex-basis:36px; }
    .client-shell.cloud-console .client-context-title { max-width:170px; font-size:14px; }
    .client-shell.cloud-console .client-health-chip { display:none; }
}
@media (max-width:575.98px) {
    .client-shell.cloud-console .client-topbar.topbar { min-height:62px !important; padding:8px 10px !important; }
    .client-shell.cloud-console .client-topbar.topbar::before { display:none; }
    .client-shell.cloud-console .client-topbar-left { gap:7px; }
    .client-shell.cloud-console .client-context-mark { width:34px; height:34px; flex-basis:34px; }
    .client-shell.cloud-console .client-context-title { max-width:116px; font-size:13px; }
    .client-shell.cloud-console .client-user-trigger { min-width:38px; width:38px; padding:2px; justify-content:center; }
    .client-shell.cloud-console .client-user-trigger > :not(.client-avatar) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .client-shell.cloud-console .client-health-chip i { animation:none; }
    .client-shell.cloud-console .client-deploy-button::after { display:none; }
    .client-shell.cloud-console :is(.client-brand-logo,.client-nav-link,.client-nav-link>i,.client-sidebar-logout,.panel-command-trigger,.panel-icon-button,.client-user-trigger) { transition:none !important; }
}