/* SPDX-License-Identifier: AGPL-3.0-only */

.sidebar{width:292px;padding:24px 18px 18px;gap:0}
main{margin-left:292px}
.sidebar .workspace{margin:22px 0 14px}
.sidebar-section{padding:16px 0;border-top:1px solid var(--line)}
.sidebar-section>h2{margin:0 7px 12px;color:#63748a;font-size:9px;font-weight:700;letter-spacing:1.35px;text-transform:uppercase}
.cloud-scope{padding-top:15px}
.provider-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 2px}
.provider-radio{position:relative;display:grid;place-items:center;gap:2px;min-width:0;margin:0;padding:9px 3px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.025);cursor:pointer}
.provider-radio input{position:absolute;opacity:0;pointer-events:none}
.provider-radio span{color:#8ea0b5;font-size:9px;font-weight:700;letter-spacing:.3px}
.provider-radio small{color:#5f7187;font-size:9px;font-weight:500}
.provider-radio:hover{border-color:rgba(69,240,194,.32);background:rgba(69,240,194,.05)}
.provider-radio:has(input:focus-visible),.account-check:has(input:focus-visible){outline:2px solid rgba(69,240,194,.65);outline-offset:2px}
.provider-radio.active{border-color:rgba(69,240,194,.55);background:linear-gradient(145deg,rgba(69,240,194,.14),rgba(82,191,255,.07));box-shadow:inset 0 0 0 1px rgba(69,240,194,.08)}
.provider-radio.active span{color:#61e9c5}
.account-picker-head{display:flex;align-items:center;justify-content:space-between;margin:14px 5px 7px;color:#718298;font-size:9px;text-transform:uppercase;letter-spacing:.8px}
.account-picker-head button{border:0;background:transparent;color:#55dcb9;font-size:9px;padding:3px}
.account-selector{display:grid;gap:4px;max-height:142px;overflow:auto;padding-right:3px}
.account-selector>p{margin:4px 6px;color:#75869b;font-size:10px;line-height:1.45}
.account-check{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 9px;border:1px solid transparent;border-radius:6px;cursor:pointer}
.account-check:hover{background:rgba(255,255,255,.035);border-color:var(--line)}
.account-check:has(input:checked){background:rgba(69,240,194,.055);border-color:rgba(69,240,194,.16)}
.account-check input{flex:0 0 auto;width:14px;height:14px;margin:2px 0 0;accent-color:var(--green)}
.account-check span{min-width:0}
.account-check strong{display:block;overflow:hidden;color:#cbd8e6;font-size:11px;font-weight:550;text-overflow:ellipsis;white-space:nowrap}
.account-check small{display:block;margin-top:2px;overflow:hidden;color:#687a90;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
#provider-context{display:block;margin:10px 6px 0;color:#607188;font-size:8px;letter-spacing:.8px}
#navigation{display:block}
#navigation .sidebar-section:last-child{padding-bottom:10px}
.service-provider-title{display:flex;align-items:center;gap:8px;margin:0 7px 13px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.025)}
.service-provider-title span{color:#5ee8c4;font-size:10px;font-weight:700}
.service-provider-title small{overflow:hidden;color:#718298;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.service-tree-group{margin:10px 4px 14px}
.service-tree-heading{margin:0}
.service-tree-node{display:flex;align-items:center;gap:6px;width:100%;margin:0;border:0;border-radius:5px;background:transparent;color:#7f91a7;font-weight:650;text-align:left;cursor:pointer}
.service-tree-node:hover{background:rgba(255,255,255,.04);color:#b5c4d6}
.service-tree-node:focus-visible{outline:2px solid rgba(69,240,194,.65)}
.service-tree-root{padding:6px 8px;color:#63748a;font-size:9px;letter-spacing:1px;text-transform:uppercase}
.service-tree-branch{padding:8px 7px 5px;font-size:10px;letter-spacing:.25px}
.tree-chevron{display:inline-grid;flex:0 0 13px;place-items:center;font-size:15px;line-height:1;transform:rotate(0);transition:transform .16s ease}
.service-tree-node[aria-expanded="true"] .tree-chevron{transform:rotate(90deg)}
.service-tree-children{position:relative;margin:0 0 0 11px;padding:0 0 0 14px;border-left:1px solid var(--line);list-style:none}
.service-tree-children>li{position:relative;margin:0;padding:0}
.service-tree-children>li:before{position:absolute;top:15px;left:-14px;width:13px;border-top:1px solid var(--line);content:""}
.service-tree-children>li:last-child:after{position:absolute;top:16px;bottom:0;left:-15px;width:2px;background:var(--sidebar-bg,#0b1522);content:""}
.service-tree-leaves{margin-left:10px;padding-top:1px;padding-bottom:2px}
.service-tree-leaves a{min-width:0;padding:8px 9px;font-size:11px;line-height:1.3}
.service-tree-leaves a>span{width:16px;font-size:14px;text-align:center}
.service-tree-group>.service-tree-leaves{margin-left:11px}
.sidebar-section>.nav-links{display:grid;gap:3px}
.sidebar-section>.nav-links a{padding:9px 11px;font-size:12px}
.sidebar-section>.nav-links a>span{width:18px;font-size:15px;text-align:center}
.sidebar-bottom{padding-top:10px}
html[data-theme="light"] .provider-radio,html[data-theme="light"] .service-provider-title{background:#f7fafc}
html[data-theme="light"] .provider-radio.active{background:linear-gradient(145deg,#dcf7f0,#edf7fb)}
html[data-theme="light"] .provider-radio span,html[data-theme="light"] .account-check strong{color:#40556b}
html[data-theme="light"] .provider-radio.active span{color:#087c69}
html[data-theme="light"] .account-check:has(input:checked){background:#edf9f6;border-color:#c6ebe2}
html[data-theme="light"] .service-tree-node:hover{background:#edf4f8;color:#1a3046}
html[data-theme="light"] .service-tree-children>li:last-child:after{background:#fafdfd}
@media(max-width:1100px){.sidebar{width:260px}main{margin-left:260px}.provider-selector{grid-template-columns:repeat(2,1fr)}}
@media(max-width:750px){
 .sidebar{position:static;width:100%;padding:14px 16px}.sidebar .brand{margin-bottom:10px}.cloud-scope{display:block;padding:12px 0}.provider-selector{grid-template-columns:repeat(4,1fr)}.account-selector{grid-template-columns:repeat(2,minmax(0,1fr));max-height:104px}.sidebar-section{padding:11px 0}.sidebar-section>h2{margin-bottom:8px}#navigation{display:grid;grid-template-columns:1fr}.service-provider-title{display:none}.service-tree-group{margin:8px 4px 12px}.service-tree-children{display:block;overflow:visible}.service-tree-leaves a{display:flex;white-space:normal}.sidebar-bottom{display:none}main{margin-left:0}
}
@media(max-width:480px){.provider-selector{grid-template-columns:repeat(2,1fr)}.account-selector{grid-template-columns:1fr}}
.badge.available{color:#398159;background:#ecf6eb}
.badge.partial{color:#a27543;background:#faf2e7}
html[data-theme="dark"] .badge.available{color:#54e7c0;background:rgba(69,240,194,.1)}
html[data-theme="dark"] .badge.partial{color:#ffd27a;background:rgba(255,191,71,.1)}
.badge.ingress,.badge.customer,.badge.normal{color:#087c69;background:#e2f6f1}
.badge.egress,.badge.managed{color:#9b6829;background:#faf0df}
html[data-theme="dark"] .badge.ingress,html[data-theme="dark"] .badge.customer,html[data-theme="dark"] .badge.normal{color:#54e7c0;background:rgba(69,240,194,.1)}
html[data-theme="dark"] .badge.egress,html[data-theme="dark"] .badge.managed{color:#ffd27a;background:rgba(255,191,71,.1)}