/* === Catppuccin Mocha === */
:root{
--bg:#0e0d10; --mantle:#131018; --crust:#0a090c; --base:#131018;
--surface0:#1a1823; --surface1:#302d41; --surface2:#45475a;
--overlay0:#6c7086; --overlay1:#7f849c;
--text:#cdd6f4; --subtext1:#c9c3dd; --subtext0:#bab5cf;
--blue:#89b4fa; --lavender:#b4befe;
--pane:#211e33;
--card-bg:var(--pane);
--card-border:var(--surface1);
--text-bright:#fff;
--blue-60:rgb(137 180 250 / 60%);
--teal-60:rgb(148 226 213 / 60%);
/* Admin pool folders: sapphire name + teal icon.
Static (non-creatable) sections: peach-adjacent name, peach icon. */
--sapphire:#74c7ec; --admin-folder-name:#74c7ec;
--green:#a6e3a2; --teal:#94e2d5; --yellow:#f9e2af;
--peach:#fab387; --red:#f38ba8; --maroon:#eba0ac;
--static-folder-name:color-mix(in srgb, var(--peach) 78%, var(--text));
--mauve:#cba6f7; --pink:#f5c2e7;
--focus-border:#514d67; --focus-ring:#57517342;
--h:32px; --gap:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}
html{color-scheme:dark;scrollbar-width:thin;scrollbar-color:var(--surface2) transparent}
*{scrollbar-width:thin;scrollbar-color:var(--surface2) transparent}
*::-webkit-scrollbar{-webkit-appearance:none;appearance:none;width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:var(--surface2)}
body{display:flex;flex-direction:column}
main,#dashView,#schemeView{flex:1;min-height:0}
/* Public kiosk: same header + status-bar positions as admin, stripped chrome.
html.bbx-pub is set by an inline head script so HDMI does not flash the
3-column admin "Loading…" layout before app.js runs. */
html.bbx-pub .app > main:not(#dashView):not(#schemeView),
html.bbx-pub .sec-banner,
html.bbx-pub #dashHeader,
html.bbx-pub .dash-toolbar:not(.scheme-toolbar),
html.bbx-pub #dashAddSel,
html.bbx-pub #dashAddBtn,
html.bbx-pub #dashPublishBtn,
html.bbx-pub #dashResetBtn,
html.bbx-pub #dashScope,
html.bbx-pub #viewAdminBtn,
html.bbx-pub #paneSwitch,
html.bbx-pub header.bar > .search,
html.bbx-pub header.bar > .bell,
html.bbx-pub header.bar > .who,
html.bbx-pub #wifiBtn,
html.bbx-pub #usersBtn,
html.bbx-pub #nodesBtn,
html.bbx-pub #flowsBtn,
html.bbx-pub #settingsBtn,
html.bbx-pub #accountProfileBtn,
html.bbx-pub #stGroups,
html.bbx-pub #stOrgs,
html.bbx-pub #stNodes,
html.bbx-pub #sbHost,
html.bbx-pub #sbSync,
html.bbx-pub #sbFw,
html.bbx-pub #pubBar,
html.bbx-pub .modal-bg:not(#loginModal):not(#pubKioskSettingsModal):not(.bbx-blocking):not(.bbx-info) { display: none !important; }
/* Info cards are allowed on the kiosk, but only while open. A blanket
display:flex kept a dismissed card on screen, so the close button
looked dead and only minimize (shade) changed anything. */
html.bbx-pub .modal-bg.bbx-info.open:not(.bbx-win-min) { display: flex !important; }
html.bbx-pub body.bbx-pub-hide-status #sbStats { display: none !important; }
html.bbx-pub,
html.bbx-pub body {
display: flex;
flex-direction: column;
height: 100vh;
min-height: 100vh;
}
html.bbx-pub .app {
flex: 1;
min-height: 0;
height: 100vh;
}
html.bbx-pub:not(.bbx-booted) #dashView { display:flex !important; position:relative; }
.bbx-boot{
display:flex;align-items:center;justify-content:center;gap:8px;
min-height:40vh;color:var(--subtext0);font-size:14px
}
/* Kiosk splash sits in .dash-grid, which is a multi-column widget grid.
Cover the dashboard instead of the first cell, and draw one arc so the
12px ring does not read as two circles. */
html.bbx-pub:not(.bbx-booted) #bbxBoot{
position:absolute;inset:0;z-index:2;min-height:0;margin:0;
}
html.bbx-pub:not(.bbx-booted) #bbxBoot .ai-wait-spin{
width:16px;height:16px;margin:0;flex:none;
border-color:transparent;border-top-color:var(--blue);
border-right-color:color-mix(in srgb, var(--blue) 40%, transparent);
}
html.bbx-pub #dashView,
html.bbx-pub #schemeView {
flex-direction: column;
height: 100%;
min-height: 0;
padding: 8px;
}
html.bbx-pub #schemeView { padding: 0 8px 8px; }
html.bbx-pub .scheme-toolbar { display: flex !important; }
html.bbx-pub .dash-grid { flex: 1; min-height: 0; }
html.bbx-pub .dash-widget .wh .cog,
html.bbx-pub .dash-widget .wh .rm,
html.bbx-pub .dash-widget .wh .sz { display: none; }
html.bbx-pub .dash-widget > .wh .grow { text-transform: none; letter-spacing: 0; }
body.bbx-pub.bbx-cursor-idle,
body.bbx-pub.bbx-cursor-idle * { cursor: none !important; }
body:not(.bbx-pub) #hdrKioskContact,
body:not(.bbx-pub) #pubSettingsBtn { display: none !important; }
#hdrKioskContact{font-size:12px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;opacity:.8}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:var(--text)}
button{cursor:pointer;border:2px solid var(--surface2);background:var(--surface0);height:var(--h);padding:0 12px;border-radius:6px}
button:hover{background:var(--surface1)}
button.primary{background:var(--blue);color:var(--crust);border-color:var(--blue)}
button.primary:hover{background:var(--teal);border-color:var(--teal);box-shadow:0 0 4px 0px var(--teal)}
button.warn{background:var(--yellow);color:var(--crust);border-color:var(--yellow)}
button.danger{background:var(--red);color:var(--crust);border-color:var(--red)}
button.ghost.danger{background:transparent;color:var(--red)}
button.ghost.danger:hover{background:rgba(243,139,168,.14);color:var(--red);border-color:var(--red);box-shadow:none}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover{background:rgba(148,226,213,.08);border-color:var(--teal);color:#ffffff;box-shadow:0 0 4px 0px var(--teal)}
button.sm{height:26px;padding:0 8px;font-size:12px}
button.sq{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
button.sq.sm{width:26px;height:26px}
button[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
select,textarea{height:var(--h);padding:0 8px;background:var(--surface0);border:1px solid var(--surface1);border-radius:6px;outline:none;color:#fff;font-size:1rem;transition:border .15s,box-shadow .15s}
select{
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 8px center;
background-size:10px 7px;
padding-right:26px;
}
input::placeholder,textarea::placeholder{
color:color-mix(in srgb, var(--mauve) 16%, var(--overlay0));
opacity:.9
}
textarea{height:auto;padding:6px 8px;font-family:ui-monospace,Menlo,Consolas,monospace;overflow:hidden;resize:none;field-sizing:content}
input[type=checkbox],input[type=radio]{
appearance:none;-webkit-appearance:none;print-color-adjust:exact;
width:14px;height:14px;min-width:14px;min-height:14px;margin:0;padding:0;
flex:none;vertical-align:middle;box-sizing:border-box;cursor:pointer;
border:1px solid var(--surface2);background:var(--surface0);box-shadow:none;
background-repeat:no-repeat;background-position:center;background-size:10px 10px;
}
input[type=checkbox]{border-radius:3px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked,
input[type=checkbox]:indeterminate{
background-color:var(--blue);border-color:var(--blue)
}
input[type=checkbox]:checked{
background-image:url("data:image/svg+xml;utf8,")
}
input[type=checkbox]:indeterminate{
background-image:url("data:image/svg+xml;utf8,")
}
input[type=radio]:checked{
background-image:radial-gradient(circle,var(--crust) 35%,transparent 40%)
}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
label.check,label.chk-row,.chk-row{
display:inline-flex;align-items:center;gap:8px;margin:0;line-height:1.3;
font-size:13px;color:var(--text);cursor:pointer;
}
label.check{margin-bottom:0}
textarea.enroll-cmd{min-height:var(--h);line-height:1.35;white-space:pre-wrap;word-break:break-all;max-height:none;overflow:hidden}
#nodeTokenShowModal .modal{overflow:hidden}
#nodeTokenShowModal #nts_body{overflow:visible;min-height:0}
#nodeTokenShowModal textarea.enroll-cmd{max-height:none;overflow:hidden;resize:none}
button.enroll-copy{
flex:0 0 var(--h);width:var(--h);min-width:var(--h);min-height:var(--h);
height:auto;align-self:stretch;padding:0;
display:inline-flex;align-items:center;justify-content:center;
}
.enroll-qr{
background:#fff;padding:10px;border-radius:8px;line-height:0;
flex:0 0 auto;width:fit-content;box-sizing:content-box;
}
.enroll-qr img,.enroll-qr canvas,.enroll-qr table{display:block}
.nts-tok-pick{border:1px solid var(--surface1);border-radius:6px;padding:6px 8px;cursor:pointer}
.nts-tok-pick.on{border-color:var(--blue);background:var(--surface0)}
.mid-scope-card{border:2px solid var(--surface1);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:var(--mantle)}
.mid-scope-card .title{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-start}
.mid-scope-card .title .pill{flex:none}
.mid-scope-card .meta{margin-top:4px;font-size:12px;color:var(--subtext0)}
.mid-cat-ico{color:var(--peach);flex:0 0 auto;display:inline-flex;align-items:center}
.mid-cat-ico .icon{width:16px;height:16px}
.item-card.ctrl-offline,.card.ctrl-offline{/* do not fade the whole card */}
.stale-data{opacity:.55}
.tabulator .tabulator-row-header input[type=checkbox]:checked,
.tabulator .tabulator-cell.tabulator-row-header input[type=checkbox]:checked,
.tabulator .tabulator-row-header input[type=checkbox]:indeterminate,
.tabulator .tabulator-cell.tabulator-row-header input[type=checkbox]:indeterminate{
background-color:var(--blue)!important;border-color:var(--blue)!important
}
.tabulator .tabulator-cell{user-select:text;-webkit-user-select:text}
.tabulator .tabulator-cell.tabulator-row-header,
.tabulator .tabulator-col.tabulator-row-header{user-select:none;-webkit-user-select:none}
.tabulator.tabulator-block-select,
.tabulator .tabulator-block-select{user-select:text!important;-webkit-user-select:text!important}
button.bbx-open{
background:none;border:none;padding:0;margin:0;color:var(--blue);cursor:pointer;
font:inherit;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;
user-select:text;-webkit-user-select:text
}
button.bbx-open:hover{text-decoration:underline}
.item-card.ctrl-offline .dot.offline,.card.ctrl-offline .pill{opacity:1}
button:disabled:hover,button[disabled]:hover,
button:disabled:focus,button[disabled]:focus{
background:inherit!important;border-color:inherit!important;color:inherit!important;box-shadow:none!important
}
button.ghost:disabled:hover,button.ghost[disabled]:hover{
background:transparent!important;border-color:var(--surface2)!important;color:inherit!important
}
button.primary:disabled:hover,button.primary[disabled]:hover{
background:var(--blue)!important;border-color:var(--blue)!important;opacity:.5
}
tbody[data-io="sensors"] > tr > td,
tbody.bbx-sys-rows > tr > td{
vertical-align:middle;padding-top:5px;padding-bottom:5px;line-height:1.2
}
tbody[data-io="sensors"] > tr > td:first-child,
tbody.bbx-sys-rows > tr > td:first-child{min-height:28px}
tbody[data-io="sensors"] .io-spark,
tbody.bbx-sys-rows .io-spark,
tbody[data-io="sensors"] > tr > td:nth-child(5),
tbody.bbx-sys-rows > tr > td:nth-child(5){
height:28px;max-height:28px;overflow:hidden;vertical-align:middle;padding-top:2px;padding-bottom:2px
}
.tabulator .tabulator-cell .io-spark,
.tabulator .tabulator-cell .io-spark svg{
display:block;min-width:120px;min-height:22px;max-height:28px;overflow:visible;line-height:0
}
.tabulator .tabulator-cell:has(.io-spark){
overflow:visible;line-height:1;padding-top:2px;padding-bottom:2px
}
tbody.bbx-sys-rows .sys-val{
display:inline-flex;align-items:center;min-height:18px;line-height:18px;
font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace
}
.item-card .title{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-start;text-align:left}
.item-card .title .mid-cat-label{flex:1 1 auto;min-width:0;text-align:left;color:var(--text);line-height:1.5}
.item-card .title .pill{flex:none}
#listBody .item-card .title > *:not(.pill):not(.card-more) + .pill{margin-left:auto}
#listBody .item-card .title .pill ~ .pill{margin-left:0}
.card-more{flex:none;opacity:.55;min-width:22px;height:20px;padding:0 4px;margin-left:2px;line-height:1}
.card-more:hover{opacity:1}
.mid-peek-menu{position:fixed;z-index:420;min-width:240px;max-width:320px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.mid-peek-menu .peek-node-ctrl{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-card.mesh-peer{/* flat with other mid cards — no nest indent */}
#detailBackBtn{flex:0 0 auto;margin-right:2px}
#detailBackBtn:disabled{opacity:.1;cursor:default;pointer-events:none;border-color:transparent;background:transparent;color:transparent}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):focus,
select:focus,textarea:focus{border-color:var(--focus-border);box-shadow:0 0 0 3px var(--focus-ring)}
.input-error{border-color:var(--red)!important;box-shadow:0 0 0 1px rgba(243,139,168,.35) inset}
.field-error{font-size:11px;color:var(--red);margin-top:2px}
label{font-size:12px;color:var(--subtext0);display:block;margin-bottom:3px}
.row{display:flex;gap:var(--gap);align-items:center}
.col{display:flex;flex-direction:column;gap:var(--gap)}
.grow{flex:1 1 auto}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:11px;background:var(--surface0);color:var(--subtext1);height:20px;white-space:nowrap}
.pill.on{background:rgba(166,227,162,.18);color:var(--green)}
.pill.off{background:rgba(243,139,168,.18);color:var(--red)}
button.pill{border:0;cursor:pointer;font:inherit}
.insp-rx .insp-sys{color:var(--blue)}
#wsState.off, #pubWsState.off{
background:var(--red);color:#1e1e2e;font-weight:700;letter-spacing:.02em;
animation:wsOfflinePulse 1.1s ease-in-out infinite;
}
@keyframes wsOfflinePulse{0%,100%{opacity:1}50%{opacity:.55}}
.ws-reconnect{position:fixed;right:14px;bottom:40px;z-index:240;max-width:340px}
.ws-reconnect[hidden]{display:none!important}
.ws-reconnect-card{background:var(--surface1);border:1px solid var(--red);border-radius:8px;padding:10px 14px;box-shadow:0 4px 18px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:6px}
.ws-reconnect-card strong{color:var(--red);font-size:13px}
.ws-reconnect-card p{margin:0;font-size:12px;line-height:1.4}
.ws-reconnect-actions{display:flex;gap:8px;justify-content:flex-end}
.pill.warn{background:rgba(249,226,175,.18);color:var(--yellow)}
.pill.info{background:rgba(137,180,250,.18);color:var(--blue)}
.pill.neutral{background:var(--surface0);color:var(--subtext1)}
/* Mid-column status filters: underline tabs (like detail tabs), not filled buttons */
.ef-tabs{display:flex;gap:2px;border-bottom:1px solid var(--surface1);margin:0 0 10px;flex-wrap:wrap}
.ef-tabs button{background:transparent;border:none;color:var(--subtext0);padding:6px 10px;cursor:pointer;font-size:12px;border-bottom:2px solid transparent;border-radius:0}
.ef-tabs button:hover{color:var(--text);border-bottom-color:var(--teal)}
.ef-tabs button.on{color:var(--text);border-bottom-color:var(--blue)}
.ef-filter{position:relative;margin:0 0 10px}
.ef-filter summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:28px}
.ef-filter summary.on{border-color:var(--blue);color:var(--text)}
.ef-filter-menu{position:absolute;left:0;top:100%;z-index:20;min-width:200px;padding:6px;background:var(--mantle);border:1px solid var(--surface2);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ef-filter-menu button{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--text);padding:6px 8px;border-radius:4px;cursor:pointer;font-size:12px}
.ef-filter-menu button:hover{background:var(--surface0)}
.ef-filter-menu button.on{background:var(--surface1)}
.start-hint{padding:4px 2px 10px;color:var(--subtext0);font-size:12px}
.start-card .meta{font-size:11px;color:var(--subtext0)}
.muted{opacity:.5}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
hr{border:none;border-top:1px solid var(--surface1);margin:8px 0}
/* === Layout === */
/* Rows: header / security banner (auto, collapses when hidden) / main */
.app{display:grid;grid-template-rows:48px auto minmax(0,1fr) 26px;height:100vh;min-height:100vh}
header.bar{display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--surface1);border-bottom:1px solid var(--surface1);grid-row:1}
header.bar h1{margin:0;font-size:24px;font-weight:600;letter-spacing:.4px;color:#fff;line-height:1.2}
header.bar .hdr-vendor{font-size:20px;font-weight:500;letter-spacing:.3px;color:#fff;opacity:.4;line-height:1.2;white-space:nowrap}
header.bar .hdr-vendor[hidden]{display:none!important}
header.bar .hdr-brand{display:flex;align-items:center;gap:10px;min-width:0}
header.bar .hdr-grid-link{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.2;font-size:11px;color:#fff}
header.bar .hdr-grid-link .hdr-grid-l1{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
header.bar .hdr-grid-link .hdr-grid-l2{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
header.bar .hdr-grid-link.off{color:var(--yellow)}
header.bar .hdr-node-proxy{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.2;font-size:11px;color:var(--yellow);max-width:240px}
header.bar .search{flex:0 1 280px;max-width:280px;margin-left:auto;position:relative}
header.bar .search input{width:100%}
.hdr-search-drop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:420;background:var(--mantle);border:1px solid var(--surface2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);max-height:50vh;overflow:auto;padding:4px}
.hdr-search-drop[hidden]{display:none}
.hdr-search-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer}
.hdr-search-item:hover,.hdr-search-item.on{background:var(--surface0)}
.hdr-search-item .muted{font-size:11px}
.tree-filter{height:26px;padding:0 8px;font-size:12px;width:100%;min-width:0;max-width:none}
aside.tree{display:flex;flex-direction:column;overflow:hidden}
aside.tree .pane-h{flex:none;height:auto;min-height:43px;flex-wrap:nowrap}
aside.tree .pane-h .view-pill{flex:1 1 auto;min-width:0}
aside.tree .pane-h .view-pill button{flex:1}
aside.tree .tree-search{flex:none;padding:6px 8px 8px;border-bottom:1px solid var(--surface1)}
aside.tree .pane-b{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0}
header.bar .who{display:flex;align-items:center;gap:8px}
.account-wrap{position:relative;flex:none}
.account-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--mantle);border:1px solid var(--surface2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:80;padding:6px;display:flex;flex-direction:column;gap:2px}
.account-menu[hidden]{display:none!important}
.account-menu-head{padding:8px 10px 6px;border-bottom:1px solid var(--surface1);margin-bottom:4px}
.account-menu-name{font-weight:600;font-size:13px;color:#fff}
.account-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;justify-content:flex-start;border:none;background:transparent;color:var(--text);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;text-decoration:none}
.account-menu-item:hover{background:var(--surface1)}
.account-menu-signout{color:var(--subtext0)}
.account-menu-signout:hover{color:var(--red);background:rgba(243,139,168,.12)}
.account-menu-delete{color:var(--red)}
.account-menu-delete:hover{background:rgba(243,139,168,.12)}
.pane-more-wrap{position:relative;flex:none}
.pane-more-menu{position:absolute;right:0;top:calc(100% + 4px);min-width:220px;background:var(--mantle);border:1px solid var(--surface2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:40;padding:6px;display:flex;flex-direction:column;gap:2px}
.pane-more-menu[hidden]{display:none!important}
.pane-more-item{display:flex;align-items:center;width:100%;text-align:left;justify-content:flex-start;border:none;background:transparent;color:var(--text);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;height:auto;line-height:1.3}
.pane-more-item:hover{background:var(--surface1)}
.pane-more-item.danger{color:var(--red)}
.pane-more-item.danger:hover{background:rgba(243,139,168,.12)}
.pane-more-sep{height:1px;background:var(--surface1);margin:4px 6px}
.nsm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;align-items:start}
.nsm-opt{align-items:flex-start;gap:8px}
.nsm-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.nsm-opt-hint{font-size:11px;line-height:1.35}
textarea.nsm-allowlist{min-height:96px;overflow:auto;resize:vertical;field-sizing:fixed;width:100%}
.nsm-field{display:flex;flex-direction:column;gap:4px}
.nsm-tabs-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--subtext0);padding:6px 4px 2px;align-self:center}
#nsm_tabs{flex-wrap:wrap;align-items:center}
.tabulator button.sm,.tabulator button.tbl-act,.bbx-tbl button.sm{
height:20px;line-height:16px;padding:0 6px;font-size:11px
}
.tabulator button.sm.sq,.tabulator button.sq.sm{width:20px;height:20px;padding:0}
.bbx-tbl-tools input[type="date"]{height:28px;padding:0 6px;font-size:12px;width:auto;min-width:9.5rem}
@media (max-width:560px){ .nsm-grid{grid-template-columns:1fr} }
body.bbx-server-offline main,
body.bbx-server-offline .sec-banner,
body.bbx-server-offline header.bar > .search,
body.bbx-server-offline header.bar > .stats,
body.bbx-server-offline header.bar > .bell,
body.bbx-server-offline header.bar > .who,
body.bbx-server-offline header.bar > .view-pill,
body.bbx-server-offline header.bar > button:not(#loginBtn):not(#accountBtn){
pointer-events:none;
opacity:.45;
}
body.bbx-server-offline #wsReconnect,
body.bbx-server-offline #accountWrap,
body.bbx-server-offline #accountMenu,
body.bbx-server-offline #loginBtn,
body.bbx-server-offline #hdrLang{
pointer-events:auto;
opacity:1;
}
header.bar .bell{position:relative}
header.bar .bell .badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:var(--crust);border-radius:8px;font-size:10px;padding:1px 5px;font-weight:700}
.bar .stats{display:flex;gap:6px;align-items:center}
footer.status-bar{grid-row:4;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--pane);border-top:1px solid var(--surface1);font-size:11px;color:var(--subtext0);min-height:26px;overflow-x:auto;overflow-y:hidden}
footer.status-bar .stats{display:flex;gap:6px;flex-wrap:nowrap}
footer.status-bar .stats .pill,footer.status-bar .pill{cursor:default;font-size:11px;height:18px;line-height:16px;padding:0 7px}
footer.status-bar .sb-end{display:flex;align-items:center;gap:6px;flex-shrink:0}
footer.status-bar #sbHost{min-width:40ch;font-variant-numeric:tabular-nums;white-space:nowrap}
footer.status-bar #sbUptime{min-width:12ch;font-variant-numeric:tabular-nums;white-space:nowrap}
footer.status-bar .sb-radio{display:flex;align-items:center;gap:4px;flex-shrink:0;cursor:pointer}
footer.status-bar .sb-radio .pill.radio-chip{cursor:pointer}
footer.status-bar .sb-radio .pill{padding:0 6px}
footer.status-bar .sb-radio .pill.radio-chip{
display:inline-flex;align-items:center;gap:4px;padding:0 6px;flex-shrink:0;
font-variant-numeric:tabular-nums;white-space:nowrap
}
.radio-chip .chip-kind{width:3.4em;flex-shrink:0;overflow:hidden;text-overflow:clip}
.radio-chip .pill-wan{
width:.7em;margin-left:0;flex-shrink:0;text-align:center;opacity:0;
font-size:9px;line-height:1;color:var(--blue,#1e66f5)
}
.radio-chip .pill-wan.is-on,.radio-chip.is-wan-active .pill-wan{opacity:1}
.radio-chip .sig-bars{margin-left:0;width:14px;flex-shrink:0}
.radio-chip .pill-rssi,.radio-chip .pill-snr{
display:inline-block;flex-shrink:0;font-size:10px;opacity:.9;text-align:right
}
.radio-chip .pill-rssi{width:4.2ch}
.radio-chip .pill-unit{width:2.4ch;flex-shrink:0;font-size:9px;opacity:.55}
.radio-chip .pill-snr{width:4.6ch}
footer.status-bar .server-clock{font-size:11px;color:var(--subtext0);text-align:right;line-height:1.2;white-space:nowrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.tree-row .tree-end-pills{display:inline-flex;align-items:center;gap:4px;flex:none}
.sig-bars{display:inline-flex;align-items:flex-end;gap:1px;height:11px;margin-left:4px;vertical-align:middle}
.sig-bars i{display:block;width:2px;background:var(--surface2);border-radius:1px}
.sig-bars i:nth-child(1){height:3px}
.sig-bars i:nth-child(2){height:5px}
.sig-bars i:nth-child(3){height:8px}
.sig-bars i:nth-child(4){height:11px}
.sig-bars i.on{background:currentColor}
.pill.on .sig-bars i.on{background:var(--green,#40a02b)}
.pill.warn .sig-bars i.on{background:var(--yellow,#df8e1d)}
.net-radio-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--surface1)}
.net-radio-row .grow{min-width:0}
.net-radio-row .pill.net-kind{min-width:4.6em;justify-content:center;text-align:center}
.net-radio-head,.net-radio-row.is-wide{
display:grid;
grid-template-columns:4.6em 28px 8.6em 5.2em minmax(0,1fr) 9.2ch 4.8ch;
gap:8px;align-items:center
}
.net-radio-head{font-size:10px;padding:0 0 4px}
.net-radio-head > span:nth-child(6),.net-radio-head > span:nth-child(7){text-align:right}
.net-radio-row.is-wide{padding:4px 0;border-bottom:1px solid var(--surface1);font-size:11px}
.net-radio-row.is-wide[data-wifi-tab]{cursor:pointer}
.net-radio-row .net-st,.net-radio-row .net-act,.net-radio-row .net-rssi,.net-radio-row .net-snr{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums
}
.net-radio-row .net-act{color:var(--blue,#1e66f5);font-size:10px;font-weight:600}
.net-radio-row .net-rssi,.net-radio-row .net-snr{text-align:right}
.pill-wan{margin-left:4px;font-size:9px;font-weight:700;color:var(--blue,#1e66f5)}
.pill-sig{font-size:10px;margin-left:4px;opacity:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.nsm-wan-list{list-style:none;margin:0 0 8px;padding:0}
.nsm-wan-item{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;border:1px solid var(--surface1);border-radius:6px;cursor:grab;background:var(--surface0)}
.nsm-wan-item.dragging{opacity:.45}
.nsm-wan-item .grow{min-width:0}
.ctrl-status-row{display:grid;grid-template-columns:9.2em minmax(0,1fr) 2.6em 4.2em 4.2em;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid var(--surface1);cursor:pointer}
.ctrl-status-row .pill{justify-self:start;max-width:9.2em;overflow:hidden;text-overflow:ellipsis}
.ctrl-status-row .ctrl-name,.ctrl-status-row .ctrl-ping{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px
}
.ctrl-status-row .ctrl-world{display:flex;gap:4px;align-items:center;overflow:visible;font-size:11px}
.ctrl-ico{display:inline-flex;width:16px;height:16px;flex:0 0 16px;color:var(--subtext0)}
.ctrl-ico .icon{width:16px;height:16px}
#gridState,#gridPing,#wsState,#sbVer,#hdrGridLink{cursor:pointer}
.ctrl-status-row .ctrl-ping{font-variant-numeric:tabular-nums;text-align:right}
.ctrl-dot{width:9px;height:9px;border-radius:50%;justify-self:center;background:var(--overlay0)}
.ctrl-dot.online{background:var(--green)}
.ctrl-dot.warn{background:var(--yellow)}
.ctrl-dot.stale{background:var(--peach)}
.ctrl-dot.offline{background:var(--red)}
.ctrl-dot.unknown{background:var(--overlay1)}
table.bbx-kv{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.bbx-kv td{padding:3px 0;vertical-align:baseline}
table.bbx-kv td:first-child{color:var(--subtext0);width:42%;padding-right:8px}
table.bbx-kv td.bbx-kv-v{font-weight:600;white-space:nowrap}
table.bbx-kv td.bbx-kv-x{text-align:right;color:var(--subtext0);width:3.6em;white-space:nowrap}
main{display:grid;grid-template-columns:var(--w-tree,300px) 5px var(--w-list,380px) 5px 1fr;min-height:0;height:100%;grid-row:3}
#dashView,#schemeView{grid-row:3;min-height:0;height:100%;flex-direction:column}
#schemeView .st-scheme-stage{flex:1;min-height:0;display:flex;flex-direction:column}
#hmiSchemeHost{flex:1;min-height:0}
.st-scheme-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
/* Merge mid + detail into one work pane (canvas / user toggle).
Do not display:none the mid pane — that drops it from the grid and
auto-places detail into the 0px track, so both columns vanish. */
body.bbx-wide-dash main,
body.bbx-wide-work main{grid-template-columns:var(--w-tree,260px) 5px 0px 0px 1fr}
body.bbx-wide-dash aside.tree,
body.bbx-wide-work aside.tree{grid-column:1}
body.bbx-wide-dash #gutterTL,
body.bbx-wide-work #gutterTL{grid-column:2}
body.bbx-wide-dash section.list,
body.bbx-wide-work section.list{
grid-column:3;min-width:0;overflow:hidden;visibility:hidden;pointer-events:none
}
body.bbx-wide-dash #gutterLD,
body.bbx-wide-work #gutterLD{
grid-column:4;min-width:0;overflow:hidden;visibility:hidden;pointer-events:none
}
body.bbx-wide-dash section.detail,
body.bbx-wide-work section.detail{grid-column:5;min-width:0}
.pane-h [data-work-layout]{flex:none;order:100}
.pane-h [data-work-layout].is-on{background:var(--surface1)}
aside.tree{overflow:hidden;border-right:1px solid var(--surface1);min-height:0;height:100%}
section.detail{overflow:auto;border-right:1px solid var(--surface1);min-height:0;height:100%}
section.list{overflow:hidden;display:flex;flex-direction:column;border-right:1px solid var(--surface1);min-height:0;height:100%}
section.list .pane-h{flex:none}
section.list .pane-b{flex:1;min-height:0;overflow:auto;padding:10px 10px}
section.list.bbx-mid-chat #listBody{display:none !important}
section.list.bbx-mid-chat #addAnyBtn,
section.list.bbx-mid-chat #listTypeFilter,
section.list.bbx-mid-chat #editCtrlMidBtn,
section.list.bbx-mid-chat #editNodeMidBtn,
section.list.bbx-mid-chat #editJobMidBtn,
section.list.bbx-mid-chat #editGroupMidBtn,
section.list.bbx-mid-chat #editOrgMidBtn,
section.list.bbx-mid-chat #editUserMidBtn,
section.list.bbx-mid-chat #editEnrollTokenMidBtn{display:none !important}
section.list #midModePill{flex:none}
section.detail{border-right:none;display:flex;flex-direction:column;overflow:hidden}
section.detail > .pane-h{flex:none;position:relative}
section.detail > .pane-b{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}
#detailBody{max-width:100%;overflow-x:hidden}
#detailBody .card{max-width:100%}
#detailBody .card:has(> table):not(:has(.tabulator)):not(:has(.bbx-tbl-wrap)){overflow-x:auto}
.bbx-tbl-wrap,.table-wrap{max-width:100%;overflow-x:auto}
#aiDock{display:flex;flex-direction:column;padding:10px 10px;min-height:0;flex:1;overflow:hidden}
#aiDock .ai-chat-chrome{flex:none}
#aiDock .ai-chat-tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:0 0 6px;border-bottom:1px solid var(--surface1);padding-bottom:4px}
#aiDock .ai-chat-tab{display:inline-flex;align-items:center;gap:2px;background:transparent;border:none;color:var(--subtext0);padding:4px 6px 4px 8px;cursor:pointer;font-size:11px;border-bottom:2px solid transparent;border-radius:0;max-width:140px}
#aiDock .ai-chat-tab:hover{color:var(--text);border-bottom-color:var(--teal)}
#aiDock .ai-chat-tab.on{color:var(--text);border-bottom-color:var(--blue)}
#aiDock .ai-chat-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
#aiDock .ai-chat-tab-x{border:none;background:transparent;color:var(--subtext0);cursor:pointer;padding:0 2px;font-size:12px;line-height:1}
#aiDock .ai-chat-tab-x:hover{color:var(--text)}
#aiDock .ai-chat-tab-add{background:transparent;border:none;color:var(--subtext0);cursor:pointer;padding:4px 8px;font-size:14px;line-height:1}
#aiDock .ai-chat-tab-add:hover{color:var(--text)}
#aiDock .ai-chat-composer .ts-wrapper{min-width:7.5rem;max-width:14rem;flex:0 1 auto}
.ai-chat-composer-row{display:flex;gap:6px;align-items:flex-end}
.ai-chat-composer-row textarea{
flex:1;min-width:0;width:auto;min-height:40px;max-height:160px;
resize:none;overflow-y:auto;box-sizing:border-box;line-height:1.35
}
.ai-chat-composer-row [data-ac-run]{flex:none;align-self:flex-end;height:40px}
.ai-chat-composer-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.ai-chat-composer [data-ac-usage]{margin-top:2px}
.ai-wait-spin{
width:12px;height:12px;border:2px solid var(--surface2);border-top-color:var(--blue);
border-radius:50%;animation:bbx-spin .7s linear infinite;display:inline-block;
vertical-align:middle;margin-right:6px
}
.sync-spin{
width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent;
border-radius:50%;animation:bbx-spin .7s linear infinite;display:inline-block;
vertical-align:middle;flex:none
}
.ico-sync{display:inline-flex;align-items:center;margin-right:6px;color:var(--yellow)}
.pill .sync-spin{margin-right:4px}
.tree-row .pill.catchup-n{min-width:1.6em;justify-content:center;padding:0 5px}
@keyframes bbx-spin{to{transform:rotate(360deg)}}
.ai-chat-turn{position:relative;padding-right:8px}
.ai-chat-turn-tools{
display:none;position:absolute;top:4px;right:4px;align-items:center;gap:2px;
background:var(--mantle);border:1px solid var(--surface1);border-radius:6px;padding:2px
}
.ai-chat-turn:hover .ai-chat-turn-tools{display:inline-flex}
.ai-chat-turn-tools button.on{color:var(--blue);border-color:var(--blue)}
.ai-chat-error{
margin:4px 0;padding:6px 8px;border-radius:6px;
background:rgba(210,50,50,.10);border:1px solid rgba(210,50,50,.28)
}
.ai-chat-error .ai-chat-error-tools{
display:inline-flex;position:static;margin-top:8px;padding:0;
background:transparent;border:none
}
.ai-chat-error .ai-chat-error-tools .icon{width:14px;height:14px;margin-right:4px}
#aiDock .ai-chat-reason{margin-top:7px;font-size:11px;color:var(--subtext0)}
#aiDock .ai-chat-reason summary{cursor:pointer}
#aiDock .ai-chat-reason-body{white-space:pre-wrap;margin-top:7px}
#aiDock .ai-chat-pending{padding:8px;font-size:12px}
#aiDock .ai-chat-card{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
#aiDock .ai-chat-thread, #aiDock [data-ac-thread]{flex:1;min-height:80px;max-height:none !important;overflow:auto;border:1px solid var(--surface1);border-radius:6px;padding:6px 10px;font-size:14px}
#aiDock .ai-chat-composer{flex:none;margin-top:8px}
#aiDock .ai-chat-artifact, .ai-chat-artifact{margin-top:8px}
#aiDock .ai-chat-artifact img, .ai-chat-artifact img{max-width:100%;border-radius:6px;border:1px solid var(--surface1);display:block;margin:6px 0}
#aiDock .ai-chat-artifact iframe, .ai-chat-artifact iframe{width:100%;min-height:160px;border:1px solid var(--surface1);border-radius:6px;background:var(--base);margin:6px 0}
#aiDock .ai-chat-act, .ai-chat-act{display:flex;align-items:flex-start;gap:6px}
.gutter{cursor:col-resize;background:var(--surface1);touch-action:none;-webkit-user-select:none;user-select:none;position:relative;z-index:6;border-right:1px solid var(--surface1)}
@media (hover:hover){
.gutter:hover{background:var(--blue)}
}
.gutter.dragging{background:var(--blue)}
.pane-h{position:sticky;top:0;background:var(--pane);border-bottom:1px solid var(--surface1);padding:8px 10px;display:flex;align-items:center;gap:6px;z-index:5;min-height:43px;height:43px;box-sizing:border-box}
.list .pane-h #addAnyBtn{margin-left:auto;order:99}
.pane-h .dot{width:12px;height:12px;margin-top:-3px}
.pane-h h2{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--subtext0);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pane-h #detailHeadActions{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-height:26px}
.pane-b{padding:10px 10px}
/* Sticky mid context card — distinct from child cards */
.item-card.context-card{
position:sticky;top:0;z-index:3;margin-top:0;
background:var(--surface0);box-shadow:0 6px 10px -8px rgba(0,0,0,.45);
border-style:dashed;border-color:var(--surface2)
}
.item-card.context-card.active{
background:var(--surface0);border-color:var(--blue);border-style:dashed
}
/* === Tree === */
.tree-node{padding:0;font-size:13px}
.tree-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px;cursor:pointer;user-select:none;color:var(--text)}
.tree-row:hover{background:var(--surface0);color:#fff}
.tree-row:hover .caret{color:#fff}
/* Epic 7 point 9: No hover highlight if row isn't a leaf drill target —
but never clear the active selection background (was blackout on orgs). */
.tree-row[data-kind="org"]:not([data-personal="1"]):not(.active):hover,
.tree-row[data-kind="mesh_root"]:not(.active):hover,
.tree-row[data-kind="orgs"]:not(.active):hover{background:transparent}
.tree-row.active{background:var(--blue);color:var(--crust)}
.tree-row.active:hover{background:var(--blue);color:var(--crust)}
.tree-row.active .pill{background:rgba(0,0,0,.22);color:var(--crust)}
.tree-row.active .muted,
.tree-row.active .mono{color:var(--crust);opacity:1}
.tree-row.active svg{stroke:var(--crust)}
.tree-row.active .ico.online svg,
.tree-row.active .ico.offline svg,
.tree-row.active .ico.revoked svg,
.tree-row.active .ico.stale svg,
.tree-row.active .ico.warn svg{fill:currentColor;stroke:none}
.tree-row.active .caret,
.tree-row.active .caret-tri{color:var(--crust)}
.tree-row .caret{width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--subtext0);transition:transform .15s;font-size:9px;line-height:1}
.tree-row.open .caret{transform:rotate(90deg)}
.tree-row .caret .icon{width:12px;height:12px;stroke-width:3}
.tree-row .ico{width:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--peach)}
.tree-row .ico.online{color:var(--green)}
.tree-row .ico.unknown,.tree-row.active .ico.unknown{color:var(--overlay1)}
.tree-row .ico.warn{color:var(--yellow)}
.tree-row .ico.stale{color:var(--blue)}
.tree-row .ico.offline{color:var(--red)}
.tree-row .ico.online .icon,
.tree-row .ico.stale .icon,
.tree-row .ico.warn .icon,
.tree-row .ico.offline .icon,
.tree-row .ico.revoked .icon,
.tree-row .ico.offline .icon circle,
.tree-row .ico.revoked .icon circle{
fill:currentColor;stroke:none
}
/* Admin pool folders: sapphire name + teal icon.
Static (non-creatable) sections: peach-adjacent name, peach icon.
Children of an admin folder keep default text; only their icons are tinted. */
.tree-row.tree-admin .name{color:var(--admin-folder-name, var(--sapphire))}
.tree-row.tree-admin .ico{color:var(--teal)}
.tree-row.tree-static .name{color:var(--static-folder-name, var(--peach))}
.tree-row.tree-static .ico{color:var(--peach)}
.tree-row.tree-aux .name,
.tree-row.tree-section .name{color:var(--text);opacity:.78}
.tree-row.tree-aux .ico,
.tree-row.tree-section .ico{color:var(--text);opacity:.55}
.tree-row.tree-aux:not(.active):hover .name,
.tree-row.tree-aux:not(.active):hover .ico,
.tree-row.tree-section:not(.active):hover .name,
.tree-row.tree-section:not(.active):hover .ico{color:#fff;opacity:1}
.tree-row.tree-aux.active .name,
.tree-row.tree-aux.active .ico,
.tree-row.tree-section.active .name,
.tree-row.tree-section.active .ico{color:var(--crust);opacity:1}
.tree-row.tree-admin.active .name,
.tree-row.tree-admin.active .ico,
.tree-row.tree-static.active .name,
.tree-row.tree-static.active .ico{color:var(--crust)}
.tree-row.tree-admin + .tree-children .tree-row:not(.tree-admin):not(.tree-static) .name{color:var(--text)}
.tree-row.tree-admin + .tree-children .tree-row:not(.tree-admin):not(.tree-static) .ico{color:var(--teal)}
.tree-row.tree-admin + .tree-children .tree-row:not(.tree-admin):not(.tree-static) .ico.warn{color:var(--yellow)}
.tree-row.tree-admin + .tree-children .tree-row:not(.tree-admin):not(.tree-static) .ico.online{color:var(--green)}
.tree-row.tree-admin + .tree-children .tree-row:not(.tree-admin):not(.tree-static) .ico.stale{color:var(--blue)}
.tree-row.tree-admin + .tree-children .tree-row:not(.tree-admin):not(.tree-static) .ico.offline,
.tree-row .ico.offline{color:var(--red)}
.tree-row.tree-admin + .tree-children .tree-row:not(.tree-admin):not(.tree-static) .ico.revoked,
.tree-row.tree-admin + .tree-children .tree-row.revoked .ico,
.tree-row .ico.revoked,
.tree-row.revoked .ico{color:var(--red)}
/* Revoked is not "offline": keep the red disc even if presence stamps .offline. */
.tree-row.revoked .ico.offline,
.tree-row.revoked .ico.online,
.tree-row.revoked .ico.stale,
.tree-row.revoked .ico.warn{color:var(--red)}
.tree-row.tree-admin + .tree-children .tree-row.active:not(.tree-admin):not(.tree-static) .name{color:var(--crust)}
.tree-row.tree-admin + .tree-children .tree-row.active:not(.tree-admin):not(.tree-static) .ico{color:var(--crust)}
.tree-row.tree-admin + .tree-children .tree-row.active:not(.tree-admin):not(.tree-static) .ico.online{color:var(--green)}
.tree-row.tree-admin + .tree-children .tree-row.active:not(.tree-admin):not(.tree-static) .ico.offline,
.tree-row.tree-admin + .tree-children .tree-row.active:not(.tree-admin):not(.tree-static) .ico.revoked,
.tree-row.tree-admin + .tree-children .tree-row.revoked.active .ico{color:var(--red)}
.tree-row.tree-admin + .tree-children .tree-row.active:not(.tree-admin):not(.tree-static) .ico.stale{color:var(--blue)}
.tree-row.tree-admin + .tree-children .tree-row.active:not(.tree-admin):not(.tree-static) .ico.warn{color:var(--yellow)}
.item-card.mid-admin .mid-cat-ico{color:var(--teal)}
.item-card.mid-admin .mid-cat-label{color:var(--admin-folder-name, var(--sapphire))}
.item-card.mid-static .mid-cat-ico,
.item-card.mid-static .mid-cat-label{color:var(--peach)}
.item-card.mid-aux .mid-cat-ico,
.item-card.mid-section .mid-cat-ico{color:var(--text);opacity:.55}
.item-card.mid-aux .mid-cat-label,
.item-card.mid-section .mid-cat-label{color:var(--text);opacity:.78}
/* Mid has no blue fill — crust (near-black) on mantle is unreadable. */
.item-card:hover .mid-cat-ico,
.item-card:hover .title .mid-cat-label,
.item-card.active .mid-cat-ico,
.item-card.active .title .mid-cat-label,
.item-card.active .title b,
.item-card.mid-admin.active .mid-cat-ico,
.item-card.mid-admin.active .mid-cat-label,
.item-card.mid-static.active .mid-cat-ico,
.item-card.mid-static.active .mid-cat-label,
.item-card.mid-aux.active .mid-cat-ico,
.item-card.mid-aux.active .mid-cat-label,
.item-card.mid-section.active .mid-cat-ico,
.item-card.mid-section.active .mid-cat-label,
.item-card.group-self:hover .title .mid-cat-label,
.item-card.group-self.active .title .mid-cat-label,
.item-card.mid-scope-card:hover .title .mid-cat-label,
.item-card.mid-scope-card.active .title .mid-cat-label{color:#fff;opacity:1}
/* Sticky context cards keep a dashed surface, not the blue fill. */
.item-card.context-card .title,
.item-card.context-card .title .mid-cat-label,
.item-card.context-card .title b{color:var(--text);opacity:1}
.item-card.context-card:hover .title,
.item-card.context-card:hover .title .mid-cat-label,
.item-card.context-card:hover .title b,
.item-card.context-card:hover .mid-cat-ico,
.item-card.context-card.active .title,
.item-card.context-card.active .title .mid-cat-label,
.item-card.context-card.active .title b,
.item-card.context-card.active .mid-cat-ico{color:#fff;opacity:1}
/* Empty catalog: fade labels/icons only, not the row chrome.
Whole-element opacity also washed out hover fill and the active blue. */
.tree-row.is-empty > *,
.item-card.is-empty > *{opacity:.42}
.tree-row.is-empty:hover > *,
.tree-row.is-empty.active > *,
.tree-row.is-empty:focus-visible > *,
.item-card.is-empty:hover > *,
.item-card.is-empty.active > *,
.item-card.is-empty:focus-visible > *{opacity:1}
.admin-only-mark{display:inline-flex;align-items:center;vertical-align:middle;margin-left:4px;color:var(--teal);cursor:help}
.admin-only-mark .icon{width:12px;height:12px}
.modal-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.modal-title-row h2{margin:0;flex:1;min-width:0}
.add-chooser-section{margin:0 0 12px}
.add-chooser-section h4{margin:0 0 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--subtext0)}
.add-chooser-section button{display:inline-flex;align-items:center;gap:6px;margin:0 6px 6px 0}
.add-chooser-section .ico .icon{width:14px;height:14px}
.groups-map{width:100%;height:min(420px,55vh);border:1px solid var(--surface1);border-radius:8px;background:var(--base);position:relative;z-index:1}
section.detail.map-detail-fill .groups-map{border:none}
.leaflet-container,.leaflet-pane,.leaflet-control,.leaflet-top,.leaflet-bottom{z-index:1!important}
.tree-row.active .ico{color:var(--crust)}
/* Selected row keeps online/offline state colour on the controller dot
(override the generic active->crust rule). White ring for contrast
against the active blue background so the dot doesn't blend in. */
.tree-row.active .ico.online,
.tree-row.active .ico.offline,
.tree-row.active .ico.revoked,
.tree-row.active .ico.stale{
background:var(--base);
border-radius:50%;
box-shadow:0 0 0 1.5px var(--base);
}
.tree-row.active .ico.online{color:var(--green)}
.tree-row.active .ico.stale{color:var(--blue)}
.tree-row.active .ico.offline,
.tree-row.active .ico.revoked{color:var(--red)}
.tree-row.active .ico.online .icon,
.tree-row.active .ico.offline .icon,
.tree-row.active .ico.revoked .icon,
.tree-row.active .ico.stale .icon{
fill:currentColor;stroke:none
}
.tree-row.active .ico.online svg,
.tree-row.active .ico.offline svg,
.tree-row.active .ico.revoked svg,
.tree-row.active .ico.stale svg{
fill:currentColor;stroke:none
}
.tree-row .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-children{padding-left:18px;display:none}
.tree-row.open + .tree-children{display:block}
/* First-level catalog: headers always visible, one open panel, inner scroll. */
#treeBody{display:flex;flex-direction:column;overflow:hidden;min-height:0;height:100%}
#treeBody > .empty{flex:1;padding:12px}
#treeBody > .tree-acc{
flex:0 0 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden;
max-height:2.6rem;
transition:flex .18s ease,max-height .18s ease
}
#treeBody.tree-busy > .tree-acc,
#treeBody.tree-busy > .tree-acc > .tree-node > .tree-children{
transition:none
}
#treeBody > .tree-acc.open{flex:1 1 auto;min-height:0;max-height:100%}
#treeBody > .tree-acc > .tree-node{
display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden
}
#treeBody > .tree-acc > .tree-node > .tree-row{
flex:none;border-radius:0;padding:6px 8px;
background:var(--mantle);border-bottom:1px solid var(--surface1);color:var(--text)
}
#treeBody > .tree-acc > .tree-node > .tree-row > .caret{
visibility:hidden;width:0;min-width:0;overflow:hidden;pointer-events:none
}
#treeBody > .tree-acc > .tree-node > .tree-row:not(.active):hover{background:var(--surface0)}
#treeBody > .tree-acc.open > .tree-node > .tree-row{background:var(--surface0);color:var(--text)}
#treeBody > .tree-acc.open > .tree-node > .tree-row:not(.active):hover{background:var(--surface1)}
/* Accordion headers are chrome, not leaf selection — never crust-on-blue. */
#treeBody > .tree-acc > .tree-node > .tree-row.active,
#treeBody > .tree-acc.open > .tree-node > .tree-row.active{
background:var(--surface1);color:var(--text)
}
#treeBody > .tree-acc > .tree-node > .tree-row.active .name,
#treeBody > .tree-acc > .tree-node > .tree-row.active .muted,
#treeBody > .tree-acc > .tree-node > .tree-row.active .mono,
#treeBody > .tree-acc > .tree-node > .tree-row.active .caret,
#treeBody > .tree-acc > .tree-node > .tree-row.active .caret-tri,
#treeBody > .tree-acc > .tree-node > .tree-row.tree-admin.active .name,
#treeBody > .tree-acc > .tree-node > .tree-row.tree-static.active .name{
color:var(--text);opacity:1
}
#treeBody > .tree-acc > .tree-node > .tree-row.active .ico,
#treeBody > .tree-acc > .tree-node > .tree-row.tree-admin.active .ico,
#treeBody > .tree-acc > .tree-node > .tree-row.tree-static.active .ico{
color:var(--teal)
}
#treeBody > .tree-acc > .tree-node > .tree-row.tree-static.active .ico{color:var(--peach)}
#treeBody > .tree-acc > .tree-node > .tree-row.active svg{stroke:currentColor}
#treeBody > .tree-acc > .tree-node > .tree-row.active .pill{
background:var(--surface2);color:var(--text)
}
#treeBody > .tree-acc:not(.open) > .tree-node > .tree-children{
display:block!important;flex:0 0 auto;max-height:0;opacity:0;overflow:hidden;
padding:0 6px;pointer-events:none;
transition:max-height .18s ease,opacity .16s ease,padding .16s ease
}
#treeBody > .tree-acc.open > .tree-node > .tree-children{
display:block;flex:1 1 auto;min-height:0;max-height:80vh;opacity:1;overflow:auto;
padding:4px 6px 8px 10px;pointer-events:auto;
transition:max-height .18s ease,opacity .16s ease,padding .16s ease
}
.ctpl-preview{border:1px solid var(--surface1);border-radius:8px;padding:8px;background:var(--mantle);max-height:min(42vh,420px);overflow:auto}
.ctpl-preview .ctpl-metric{display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-size:12px}
.ctpl-preview .ctpl-metric .muted{font-size:11px}
/* === Inline SVG icons === */
.icon{width:14px;height:14px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tree-row .ico.online .icon,
.tree-row .ico.stale .icon,
.tree-row .ico.warn .icon,
.tree-row .ico.offline .icon,
.tree-row .ico.revoked .icon,
.tree-row.active .ico.offline .icon,
.tree-row .ico.online .icon circle,
.tree-row .ico.stale .icon circle,
.tree-row .ico.warn .icon circle,
.tree-row .ico.offline .icon circle,
.tree-row .ico.revoked .icon circle,
.tree-row.active .ico.offline .icon circle{
fill:currentColor;stroke:none
}
/* UUID button equal height to input */
.modal button.sm.uuid-btn{height:32px;align-self:flex-end}
/* Tooltip hint icon */
.hint-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--subtext0);color:var(--subtext0);font-size:10px;font-weight:700;cursor:help;line-height:1;margin-left:4px;flex:none}
/* checkbox rows tight spacing */
.chk-row{display:flex;gap:6px;align-items:center;margin:0;line-height:1.3}
.icon-lg{width:16px;height:16px}
/* === List === */
.item-card{padding:10px;border:2px solid var(--surface1);border-radius:8px;background:var(--mantle);margin-bottom:8px;cursor:pointer}
.item-card:hover{border-color:var(--teal);box-shadow:0 0 6px 0px var(--teal)}
.item-card:hover .title{color:#fff}
.item-card.active{border-color:var(--blue)}
.item-card.active:hover{box-shadow:0 0 6px 0px var(--blue)}
.item-card.context-card:hover{border-color:var(--teal);box-shadow:0 0 6px 0px var(--teal)}
.item-card.context-card.active:hover{border-color:var(--blue);box-shadow:0 0 6px 0px var(--blue)}
tr.cell-bind-focus td{background:var(--surface1);box-shadow:inset 2px 0 0 var(--blue)}
.item-card.group-self,.item-card.mid-scope-card{
background:var(--surface0);border-style:dashed;border-color:var(--surface2)
}
.item-card.group-self.active,.item-card.mid-scope-card.active{
border-style:dashed;border-color:var(--blue);background:var(--surface0)
}
.item-card .title{font-weight:600;display:flex;justify-content:flex-start;align-items:center;gap:8px;text-align:left;color:var(--text)}
.item-card .title .pill{flex:none}
.card-more{flex:none;opacity:.55;min-width:22px;height:20px;padding:0 4px;margin-left:2px;line-height:1}
.card-more:hover{opacity:1}
.mid-peek-menu{position:fixed;z-index:420;min-width:240px;max-width:320px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.item-card .meta{font-size:11px;color:var(--subtext0);margin-top:4px;text-align:left}
#listBody .item-card,#detailBody .card{text-align:left}
#detailBody .card > table th,#detailBody .card > table td{text-align:left}
#detailBody label{text-align:left}
.card h3{text-align:left}
/* Phase 1b: Nodes / Controllers full registries in R-column */
.registry-table{width:100%;border-collapse:collapse;font-size:12px}
.registry-table th,.registry-table td{padding:6px 8px;border-bottom:1px solid var(--surface1);text-align:left;vertical-align:top}
.registry-table thead th{color:var(--subtext0);font-weight:600;font-size:11px;white-space:nowrap}
.registry-card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* === Detail === */
.card{border:1px solid var(--card-border);border-radius:8px;background:var(--card-bg);padding:10px;margin-bottom:10px}
/* Generic FSM/admin table */
.bbx-tbl{width:100%;border-collapse:collapse;font-size:12px}
.bbx-tbl th,.bbx-tbl td{padding:4px 6px;border-bottom:1px solid var(--surface1);text-align:left;vertical-align:top}
.bbx-tbl thead th{background:var(--base);color:var(--subtext0);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0}
.bbx-tbl tbody tr:hover{background:var(--surface0)}
.bbx-tbl tbody tr.folder-pick{cursor:pointer}
.bbx-tbl tbody tr:last-child td{border-bottom:none}
.card h3{margin:0 0 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--subtext0);display:flex;justify-content:space-between;align-items:center}
.fsm-sched-fields.is-off{opacity:.45;filter:grayscale(.15);pointer-events:none}
.fsm-icon-opt{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.fsm-icon-opt .icon{width:14px;height:14px;flex:none}
.fsm-icon-thumb{width:16px;height:16px;object-fit:contain;border-radius:3px;flex:none;background:var(--surface0)}
.fsm-icon-row .ts-wrapper{width:100%;max-width:100%}
.fsm-icon-row .ts-control .item{display:inline-flex;align-items:center;gap:6px}
.bbx-icon-pick-menu{position:absolute;z-index:20;min-width:160px;padding:4px;background:var(--bg);border:1px solid var(--surface2);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.bbx-icon-pick-menu button{display:block;width:100%;text-align:left;margin:0;border-radius:6px}
/* Collapsible cards () */
details.card.collapsible{padding:0}
details.card.collapsible>summary{list-style:none;cursor:pointer;padding:8px 10px;display:flex;align-items:center;gap:8px;border-radius:8px}
details.card.collapsible>summary::-webkit-details-marker{display:none}
details.card.collapsible>summary::before{
content:"";
display:inline-block;
width:7px;height:7px;
border-right:1.5px solid var(--blue);
border-bottom:1.5px solid var(--blue);
transform:rotate(-45deg);
margin-right:2px;
transition:transform .14s ease,color .14s ease,border-color .14s ease;
vertical-align:middle;
flex:none;
opacity:.95;
}
details.card.collapsible[open]>summary::before{transform:rotate(45deg)}
details.card.collapsible>summary:hover::before{border-color:var(--teal)}
details.card.collapsible>summary>h3{display:inline;text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--subtext0);margin:0}
details.card.collapsible>table,details.card.collapsible>div{padding:0 10px 10px}
/* Dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-rows:140px;grid-auto-flow:dense;gap:10px;padding:10px}
.dash-widget{border:1px solid var(--card-border);border-radius:8px;background:var(--card-bg);padding:10px;position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
.dash-widget>div:last-child{flex:1;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--surface2) transparent}
.dash-widget>div:last-child::-webkit-scrollbar{width:8px;height:8px}
.dash-widget>div:last-child::-webkit-scrollbar-track{background:transparent}
.dash-widget>div:last-child::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:4px}
.dash-widget>div:last-child::-webkit-scrollbar-thumb:hover{background:var(--surface2)}
.dash-widget.dragging{opacity:.4}
.dash-widget.drop-target{outline:2px dashed var(--blue)}
.dash-grid.drop-end{outline:2px dashed var(--green);outline-offset:-6px}
.dash-widget>.wh{display:flex;align-items:center;gap:4px;margin-bottom:6px;cursor:grab;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--subtext0);font-weight:600}
.dash-widget>.wh .grow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-widget>.wh button{background:transparent;border:none;color:var(--subtext0);cursor:pointer;font-size:13px;padding:0 3px;line-height:1}
.dash-widget>.wh button:hover{color:var(--blue)}
.dash-widget>.wh button.rm:hover{color:var(--red)}
.dash-widget>.wh .sz{display:none}
/* Edit controls only on hover/focus to keep widgets clean. */
.dash-widget>.wh button,.dash-widget>.wh .cw-pick{opacity:0;transition:opacity .12s ease-in-out;pointer-events:none}
.dash-widget:hover>.wh button,.dash-widget:hover>.wh .cw-pick,
.dash-widget>.wh button:focus,.dash-widget>.wh .cw-pick:focus,
.dash-widget>.wh .cw-pick:focus-within{opacity:1;pointer-events:auto}
/* Cell tiles inside cell widgets */
.cw-grid{display:grid;gap:3px;grid-auto-flow:row}
.cw-grid.flow-col{grid-auto-flow:column}
.cw-grid:not(.fixed-cols){grid-template-columns:repeat(auto-fit,minmax(34px,1fr))}
.cw-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:34px;border-radius:4px;background:var(--surface0);font-size:10px;font-weight:600;color:var(--subtext0);border:1px solid transparent}
.cw-tile.unlocked{background:var(--green);color:var(--crust)}
.cw-tile.latched{background:var(--yellow);color:var(--crust)}
.cw-tile.locked{background:var(--surface0);color:var(--subtext1)}
.cw-tile.frozen{outline:2px solid var(--mauve);outline-offset:-2px}
.cw-tile.code{box-shadow:inset 0 -3px 0 var(--peach)}
.cw-tile.offline{opacity:.35}
.cw-tile .lbl{font-size:9px;line-height:1}
.cw-ctl-grid{display:grid;gap:4px;grid-auto-flow:row}
.cw-ctl-grid.flow-col{grid-auto-flow:column}
.cw-ctl-grid:not(.fixed-cols){grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
.cw-ctl{display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:4px;background:var(--surface0)}
.cw-ctl .id{font-size:10px;font-weight:600;color:var(--subtext0);text-align:center}
.cw-ctl .row{display:flex;gap:2px}
.cw-ctl .row button{flex:1;height:22px;font-size:10px;padding:0;border-radius:3px;border:none;cursor:pointer;color:var(--crust);font-weight:600}
.cw-ctl .b-u{background:var(--green)}
.cw-ctl .b-l{background:var(--yellow)}
.cw-ctl .b-k{background:var(--surface2);color:var(--text)}
.cw-ctl .b-f{background:var(--mauve)}
.cw-relay{height:100%;justify-content:center;padding:8px}
.cw-relay .lbl{font-size:12px;font-weight:600;color:var(--text);text-align:center;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis}
.cw-relay.unlocked{background:var(--green);color:var(--crust)}
.cw-relay.unlocked .lbl{color:var(--crust)}
.cw-relay.latched{background:var(--yellow);color:var(--crust)}
.cw-relay.latched .lbl{color:var(--crust)}
.cw-relay.frozen{outline:2px solid var(--mauve);outline-offset:-2px}
.cw-relay.offline{opacity:.45}
.cw-pick{background:var(--surface0);color:var(--text);border:1px solid var(--surface1);border-radius:3px;font-size:10px;padding:1px 2px;max-width:120px}
.cw-hint{display:flex;align-items:center;justify-content:center;height:100%;color:var(--subtext0);font-size:11px;text-align:center;padding:0 8px}
.dash-toolbar{padding:8px 10px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--surface1)}
.view-pill{display:inline-flex;align-items:stretch;border:1px solid transparent;background:#00000061;border-radius:6px;overflow:hidden;height:26px;box-sizing:border-box;flex:none}
.view-pill button{background:transparent;border:none;color:var(--text);padding:0 8px;cursor:pointer;font-size:12px;height:100%;line-height:24px;box-sizing:border-box}
.view-pill button.on{background:var(--blue);color:var(--crust)}
select.lang-switch{height:28px;padding:0 16px 0 6px;font-size:12px;font-weight:600;min-width:4.6em;max-width:5.6em;cursor:pointer;flex:none;background-position:right 4px center}
#loginModal .modal{overflow-x:hidden;min-width:0;max-width:min(400px,calc(100vw - 24px))}
#loginModal .modal>h2{padding-right:4.8em}
#loginOpenNotice{max-width:100%;overflow-wrap:anywhere}
#loginModal .pill.warn{white-space:normal;height:auto;line-height:1.35;max-width:100%;overflow-wrap:anywhere;align-items:flex-start}
.pane-h .view-pill{align-self:center}
table{width:100%;border-collapse:collapse;font-size:12px}
table th,table td{padding:5px 6px;border-bottom:1px solid var(--surface1);text-align:left;vertical-align:middle}
table th{font-weight:600;color:var(--subtext0);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.card table:not(.bbx-tbl) th:first-child,.card table:not(.bbx-tbl) td:first-child{padding-left:0}
.card table:not(.bbx-tbl) th:last-child,.card table:not(.bbx-tbl) td:last-child{padding-right:0}
.card table + label,.card table + .row,.modal table + label,.tab-pane table + label{margin-top:12px;display:block}
.bbx-norm-card{padding:8px 10px}
.bbx-norm-card-h{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:28px}
.bbx-norm-card-b{margin-top:8px;padding-top:8px;border-top:1px solid var(--surface1)}
.bbx-norm-card.bbx-norm-hit{outline:2px solid var(--teal)}
.bbx-norm-sim{padding:8px 10px}
.bbx-norm-sum{flex:1;font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bbx-wd-dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:9px;font-weight:700;background:var(--surface1);color:var(--subtext0)}
.bbx-wd-dot.on{color:var(--text);background:var(--overlay1)}
.bbx-drag{cursor:grab;opacity:.85;user-select:none;display:inline-flex;align-items:center;padding:2px 4px}
.bbx-drag:active{cursor:grabbing}
.bbx-norm-card-h .icon{width:14px;height:14px}
.pill .icon{width:12px;height:12px;vertical-align:-2px}
.dash-widget .cog .icon{width:14px;height:14px}
.pill.stale{background:rgba(137,180,250,.16);color:var(--blue)}
/* Port "State" tab hero: value kind must be readable at a glance. */
.io-hero{padding:8px 10px 10px;margin:-2px 0 10px;border-bottom:1px solid var(--surface1)}
.io-hero-label{font-size:11px;color:var(--subtext0);text-transform:uppercase;letter-spacing:.04em}
.io-hero-value{font-size:26px;line-height:1.15;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.io-hero-unit{font-size:14px;font-weight:400;color:var(--subtext1);margin-left:6px}
.io-hero-sub{font-size:11px;color:var(--subtext0);margin-top:2px}
.io-hero-pill{margin-top:4px}
.io-hero-pill .pill{height:26px;font-size:14px;padding:0 12px;font-weight:600}
.io-hero-text{display:block;margin-top:4px;font-size:15px;line-height:1.35;color:var(--text);
white-space:pre-wrap;overflow-wrap:anywhere;max-height:8.2em;overflow:auto}
.st-scheme-el.fsm-stale{--bbx-c2:var(--blue);border-color:var(--blue)}
.st-scheme-bind.fsm-stale{--bbx-c2:var(--blue);border-color:var(--blue)}
.st-scheme-el.fsm-stale > .st-scheme-head .ico,
.st-scheme-bind.fsm-stale .st-scheme-ico{color:var(--blue)}
.bbx-win-bar > h2.bbx-win-title-jump{cursor:default}
.bbx-rules-acts{justify-content:flex-end}
.bbx-rules-acts .sm.sq{flex:0 0 auto}
table tr:last-child td,table tr:last-child th{border-bottom:none}
.cell-actions{display:inline-flex;gap:4px;vertical-align:middle}
.cmd-hops{display:inline-flex;align-items:center;gap:3px;margin-right:6px;vertical-align:middle;cursor:pointer}
.cmd-hops[hidden],.cmd-hops-idle{display:none!important}
.cmd-hops i{width:6px;height:6px;border-radius:50%;background:var(--surface2);display:inline-block;flex:none}
.cmd-hops i.gen{border-radius:1px;transform:rotate(45deg);width:5px;height:5px}
.cmd-hops i.ok{background:var(--green)}
.cmd-hops i.run{background:var(--blue);animation:cmd-hop-pulse 1s ease-in-out infinite}
.cmd-hops i.ackwait{background:var(--blue);opacity:.85}
.cmd-hops i.err{background:var(--red)}
.cmd-hops i.soft{background:var(--yellow)}
/* Queued: nothing is on the wire yet — a hollow ring, not a pulsing run. */
.cmd-hops i.queued{background:transparent;box-shadow:inset 0 0 0 1.5px var(--yellow);animation:cmd-hop-queued 2.4s ease-in-out infinite}
.cmd-hops i.wait{background:var(--surface2);opacity:.55}
.cmd-hops:not(.cmd-hops-idle) i.wait{opacity:.8}
.cmd-hops.cmd-hops-fade i{transition:background .55s ease,opacity .55s ease}
.cmd-hops.cmd-hops-fade i.ok,.cmd-hops.cmd-hops-fade i.soft{background:var(--surface2);opacity:.55}
.cmd-hop-pop{position:fixed;z-index:430;min-width:220px;max-width:340px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.cmd-hop-pop-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--subtext0);margin-bottom:8px}
.cmd-hop-pop-row{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.45;padding:2px 0}
.cmd-hop-pop-row i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--surface2)}
.cmd-hop-pop-row i.gen{border-radius:1px;transform:rotate(45deg);width:7px;height:7px}
.cmd-hop-pop-row i.ok{background:var(--green)}
.cmd-hop-pop-row i.run,.cmd-hop-pop-row i.ackwait{background:var(--blue)}
.cmd-hop-pop-row i.err{background:var(--red)}
.cmd-hop-pop-row i.soft,.cmd-hop-pop-row i.queued{background:var(--yellow)}
.cmd-hop-pop-name{flex:1;min-width:0}
.cmd-hop-pop-extra{color:var(--subtext0);font-size:11px}
.cmd-hop-pop-at{color:var(--subtext0);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:8px}
@keyframes cmd-hop-pulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
@keyframes cmd-hop-queued{0%,100%{opacity:.5}50%{opacity:1}}
/* Action buttons stay neutral (ghost) by default so colour fills always
mean "this state is currently active" \u2014 not just "this is the button".
Per-action accents are picked via [data-act] selectors. */
.cell-actions button.sq{background:transparent}
.cell-actions button.sq.act-on[data-act="open"] {background:var(--green); color:var(--crust); border-color:var(--green)}
.cell-actions button.sq.act-on[data-act="latch"] {background:var(--yellow);color:var(--crust); border-color:var(--yellow)}
/* Standalone relay ON is confirmed coil state, not the cell "latched" accent. */
.cell-actions button.sq.act-on[data-act="latch"][data-port^="relay."]{background:var(--green);color:var(--crust);border-color:var(--green)}
.cell-actions button.sq.act-pending{background:var(--yellow);color:var(--crust);border-color:var(--yellow)}
.cell-actions button.sq.act-on[data-act="close"] {background:var(--surface2);color:var(--text)}
.cell-actions button.sq.act-on[data-act="code"] {background:var(--peach); color:var(--crust); border-color:var(--peach)}
.cell-actions button.sq.act-on[data-act="freeze"],
.cell-actions button.sq.act-on[data-act="unfreeze"]{background:var(--mauve); color:var(--crust); border-color:var(--mauve)}
.cell-actions button.sq.act-on[data-act="timed"] {background:var(--teal); color:var(--crust); border-color:var(--teal)}
/* Pending countdown badge in the corner of the timed button.
Driven by data-pending-left set from the cell row renderer; works
whether the button has act-on or not. */
.cell-actions button.sq[data-act="timed"][data-pending-left]::before,
button.sq[data-act="timed"][data-pending-left]::before{
content:attr(data-pending-left);position:absolute;top:-6px;right:-6px;
background:var(--crust);color:var(--teal);font-size:10px;line-height:1;
padding:2px 4px;border-radius:8px;border:1px solid var(--teal);font-weight:600;
pointer-events:none;
}
.cell-actions button.sq{position:relative}
.viz-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.viz-row .k{min-width:180px;font-size:12px;color:var(--subtext1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-row .v{min-width:56px;font-size:11px;color:var(--subtext0);text-align:right}
.viz-row .bar{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--teal));opacity:.85}
/* Spinner contrast inside coloured (act-on) cell-action buttons. */
.cell-actions .btn-loading.act-on::after{opacity:.85}
/* === Detail tabs === */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--surface1);margin:0 0 10px}
.tabs button{background:transparent;border:none;color:var(--subtext0);padding:6px 12px;cursor:pointer;font-size:12px;border-bottom:2px solid transparent;border-radius:0}
.tabs button:hover{color:#fff;border-bottom-color:var(--teal);background:linear-gradient(0deg,var(--teal-60),transparent 4px,transparent)}
.tabs button.on{color:#fff;border-bottom-color:var(--blue)}
.tabs button.on:hover{background:linear-gradient(0deg,var(--blue-60),transparent 4px,transparent)}
.tab-pane{display:none}
.tab-pane.on{display:block}
/* Tabbed modals: keep the tallest pane so switching tabs does not resize. */
.modal .tab-stack{display:grid}
.modal .tab-stack>.tab-pane{grid-area:1/1;display:block;visibility:hidden;pointer-events:none;z-index:0}
.modal .tab-stack>.tab-pane.on{visibility:visible;pointer-events:auto;z-index:1}
/* Floating windows: size to the active tab, not the tallest (Data chart). */
.modal-bg.bbx-window .tab-stack{display:block}
.modal-bg.bbx-window .tab-stack>.tab-pane{display:none;visibility:visible;pointer-events:auto;position:static}
.modal-bg.bbx-window .tab-stack>.tab-pane.on{display:block}
.sm-dock [data-sm-pane]{display:block!important}
.sm-dock{padding:12px;overflow:auto}
.tab-pane>.dash-grid{margin-top:0}
.cell-name-primary{font-size:13px;font-weight:600;line-height:1.15;color:var(--text)}
.cell-name-secondary{font-size:11px;line-height:1.1;color:var(--subtext0);margin-top:2px}
.mono-pre{max-height:240px;overflow:auto;background:var(--mantle);padding:8px;border-radius:6px;color:var(--text);font-size:11px;border:1px solid var(--surface1)}
/* === Modal === */
.modal-bg{position:fixed;inset:0;background:rgba(17,17,27,.7);display:none;align-items:center;justify-content:center;z-index:400;backdrop-filter:blur(2px)}
.modal-bg.open{display:flex}
.modal-bg.bbx-modal-parked{display:none!important}
.modal{position:relative;background:var(--bg);border:2px solid var(--blue);border-radius:10px;padding:16px;min-width:380px;max-width:90vw;max-height:90vh;overflow:auto;box-shadow:0 6px 30px rgba(0,0,0,.4)}
.modal.modal-edit{width:min(860px,95vw)}
.modal h2{position:sticky;top:-16px;margin:-16px -16px 10px;padding:12px 44px 12px 16px;border-bottom:1px solid var(--surface1);background:var(--pane);font-size:18px;color:#fff;z-index:3}
.modal:has(.modal-head-actions) h2{padding-right:96px}
.modal .tabs{position:sticky;top:31px;background:var(--bg);z-index:2;padding-top:2px}
.modal-actions{position:sticky;bottom:-16px;display:flex;justify-content:flex-end;gap:8px;margin:12px -16px -16px;padding:10px 16px;background:var(--pane);border-top:1px solid var(--surface1);z-index:2}
#cellEditModal .modal{max-height:min(90vh,720px)}
#cellEditModal .modal-actions{position:static;margin:12px 0 0;padding:10px 0 0}
input[type=time],input[type=date]{color-scheme:dark;min-width:7.5em}
@keyframes bbx-flash{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.55);border-color:var(--blue)}30%{box-shadow:0 0 0 3px var(--peach),0 10px 40px rgba(0,0,0,.55);border-color:var(--peach)}}
.modal.bbx-flash{animation:bbx-flash .45s ease 2}
.modal-top-close{position:absolute;top:12px;right:12px;z-index:6}
.modal-top-min{position:absolute;top:12px;right:44px;z-index:6}
.modal-head-actions{position:absolute;top:12px;right:44px;z-index:5;display:flex;align-items:center;gap:4px}
.modal:has(.modal-top-min) .modal-head-actions{right:76px}
.modal:has(.modal-top-min) h2{padding-right:88px}
.modal:has(.modal-head-actions):has(.modal-top-min) h2{padding-right:140px}
/* Floating windows: tree stays clickable (backdrop never captures pointer).
Hover/focus paints a modal-like dimmer that still lets clicks through.
Overlay must not scroll — only .bbx-win-body does. */
.modal-bg.bbx-window{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;align-items:center;justify-content:center;padding:24px;overflow:hidden;transition:background .15s ease}
.modal-bg.bbx-window.open{display:flex}
.modal-bg.bbx-window.bbx-win-min{display:none!important}
.modal-bg.bbx-window.bbx-win-hover{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#bbx-win-scrim{position:fixed;inset:0;z-index:390;pointer-events:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .18s ease,backdrop-filter .18s ease,-webkit-backdrop-filter .18s ease}
body.bbx-float-blur #bbx-win-scrim{background:rgba(17,17,27,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mesh-stat.on{color:var(--green)}
.mesh-stat.off{color:var(--red)}
.mesh-stat.new{color:var(--mauve)}
.mesh-stat.links{color:var(--sapphire)}
.mesh-legend-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:8px;border:2px solid transparent;box-sizing:border-box}
.mesh-legend-list{margin:0;padding:0;list-style:none;line-height:1.7;font-size:13px}
.mesh-legend-list li{margin:0 0 6px}
.modal-bg.bbx-window .modal{pointer-events:auto;min-width:min(320px,100%);min-height:min(140px,100%);max-width:100%;max-height:100%;box-shadow:0 6px 30px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column}
.modal-bg.bbx-window.bbx-win-focus .modal{box-shadow:0 10px 40px rgba(0,0,0,.55)}
.bbx-win-bar{display:flex;align-items:center;gap:6px;flex:none;margin:-16px -16px 0;padding:4px 6px 4px 0;border-bottom:1px solid var(--surface1);background:var(--pane);min-height:44px;z-index:12;overflow:visible}
.modal-bg.bbx-window .bbx-win-bar > h2{flex:1 1 auto;min-width:0;margin:0;padding:8px 8px 8px 16px;border-bottom:none;background:transparent;position:relative;top:auto;overflow:hidden;white-space:nowrap;text-overflow:clip;z-index:auto}
.modal-bg.bbx-window .bbx-win-bar > h2.bbx-win-title-fade{
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)
}
.modal-bg.bbx-window .modal:has(.modal-head-actions) .bbx-win-bar > h2,
.modal-bg.bbx-window .modal:has(.modal-top-min) .bbx-win-bar > h2,
.modal-bg.bbx-window .modal:has(.modal-head-actions):has(.modal-top-min) .bbx-win-bar > h2{padding-right:8px}
.modal-bg.bbx-window .modal-top-close,
.modal-bg.bbx-window .modal-top-min{position:relative;top:auto;right:auto;flex:none;z-index:2;touch-action:manipulation}
.modal-bg.bbx-window .modal-head-actions{position:static;top:auto;right:auto;flex:0 0 auto;justify-content:flex-end;flex-wrap:nowrap;min-width:0;max-width:none}
.modal-bg.bbx-window .modal-head-actions > button{white-space:nowrap;flex:none}
.bbx-win-more{position:relative;flex:none}
.bbx-win-more-menu{position:absolute;right:0;top:calc(100% + 4px);min-width:168px;z-index:12;padding:4px;background:var(--bg);border:1px solid var(--surface2);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.bbx-win-more-menu[hidden]{display:none!important}
.bbx-win-more-menu > button{display:block;width:100%;text-align:left;margin:0;border-radius:6px;white-space:nowrap}
.bbx-win-more-menu > button.danger{color:var(--red)}
.modal-bg.bbx-window .tabs{position:relative;top:auto;z-index:2}
.modal-bg.bbx-window .modal > .tabs,
.modal-bg.bbx-window .bbx-win-body .tabs{flex:none;margin:0 0 10px;padding:0;background:transparent}
.bbx-win-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.modal-bg.bbx-window .modal:not(:has(> .tabs)) > .bbx-win-body{padding-top:12px}
.modal-bg.bbx-window.bbx-win-shade .modal{min-height:0!important;height:auto!important;padding-bottom:0}
.modal-bg.bbx-window.bbx-win-shade .bbx-win-body,
.modal-bg.bbx-window.bbx-win-shade .modal > .tabs,
.modal-bg.bbx-window.bbx-win-shade .bbx-win-resize{display:none!important}
.modal-bg.bbx-window.bbx-win-shade .modal-head-actions{display:none!important}
.modal-bg.bbx-window.bbx-win-shade .bbx-win-bar{border-bottom:none}
.bbx-win-drag{cursor:move;user-select:none;touch-action:none}
.bbx-win-resize{position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;z-index:9;touch-action:none;background:linear-gradient(135deg,transparent 0 45%,var(--overlay0) 45% 55%,transparent 55% 70%,var(--overlay0) 70% 80%,transparent 80%)}
@media (pointer: coarse), (hover: none) {
.modal-top-close,.modal-top-min,.bbx-win-more-btn,.bbx-win-bar button.sq{width:44px;height:44px;min-width:44px;min-height:44px}
.modal-bg.bbx-window .bbx-win-bar{min-height:52px}
.modal-bg.bbx-window .bbx-win-bar button.sm:not(.sq){height:44px;padding:0 12px}
.bbx-win-resize{width:32px;height:32px;right:0;bottom:0}
.ctrl-status-row,.net-radio-row[data-wifi-tab]{padding:8px 0;min-height:44px}
.dash-widget>.wh button,.dash-widget>.wh .cw-pick{opacity:1;pointer-events:auto;min-width:32px;min-height:32px}
footer.status-bar{min-height:44px}
footer.status-bar .pill,footer.status-bar .sb-radio .pill.radio-chip{height:32px;min-height:32px;line-height:30px}
}
/* Sit above the ~26px status bar so chips do not cover it. */
.bbx-win-dock{position:fixed;left:8px;right:8px;bottom:34px;display:flex;flex-wrap:wrap;gap:6px;z-index:5000;pointer-events:none}
.bbx-win-dock:not([hidden]){pointer-events:auto}
.bbx-win-chip{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:4px 8px;border:1px solid var(--surface2);border-radius:6px;background:var(--surface0);color:var(--text);font-size:12px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.bbx-win-chip:hover{border-color:var(--blue)}
.bbx-win-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* === Toast (above windows / overlays so save errors stay visible) === */
#toasts{position:fixed;top:54px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:11000;pointer-events:none}
.toast{background:var(--surface0);color:var(--text);padding:8px 12px;border-radius:6px;border-left:3px solid var(--blue);font-size:12px;animation:fade .25s ease;box-shadow:0 4px 12px rgba(0,0,0,.4);max-width:380px}
.toast.ok{border-color:var(--green)}
.toast.err{border-color:var(--red)}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes bbx-spin{to{transform:rotate(360deg)}}
/* === Action button loading state === */
/* Hides label/svg, draws an animated ring centered. Works for any button. */
button.btn-loading,a.btn-loading{position:relative;color:transparent!important;pointer-events:none;cursor:wait}
button.btn-loading>*,a.btn-loading>*{visibility:hidden}
button.btn-loading::after,a.btn-loading::after{
content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;
border:2px solid color-mix(in srgb, var(--crust) 28%, transparent);
border-top-color:var(--crust);
border-radius:50%;
animation:bbx-spin .7s linear infinite;visibility:visible;
}
button.ghost.btn-loading::after,button.sm.ghost.btn-loading::after,
a.ghost.btn-loading::after{
border:2px solid color-mix(in srgb, var(--text) 28%, transparent);
border-top-color:var(--text);
}
/* Pending afterglow: lasts a few seconds after request OK; useful for LoRa async ack. */
button.btn-pending,a.btn-pending{outline:1px dashed var(--blue);outline-offset:-2px;opacity:.85}
/* === Misc === */
.empty{padding:30px 12px;text-align:center;color:var(--overlay1);font-size:12px}
tr.rel-highlight td{background:var(--green) !important;color:var(--base) !important;transition:background .4s}
tr.rel-row-over td{outline:1px dashed var(--teal);outline-offset:-2px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--overlay0);margin-right:6px;vertical-align:middle}
.dot.online{background:var(--green);box-shadow:0 0 6px rgba(166,227,162,.6)}
.dot.warn{background:var(--yellow);box-shadow:0 0 6px rgba(249,226,175,.55)}
.dot.stale{background:var(--blue);box-shadow:0 0 6px rgba(137,180,250,.55)}
.dot.offline{background:var(--red)}
.dot.unknown{background:var(--overlay1)}
.pill.unknown{background:rgba(108,112,134,.2);color:var(--overlay1)}
.item-card .dot .icon,.pane-h .dot .icon,.card .dot .icon{display:none}
/* === Events dropdown === */
.menu{position:absolute;right:12px;top:46px;background:var(--bg);border:1px solid var(--surface2);border-radius:8px;width:420px;max-height:60vh;overflow:auto;display:none;z-index:420;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.menu.open{display:block}
.menu .ev{padding:6px 10px;border-bottom:1px solid var(--surface1);font-size:12px;display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center}
.menu .ev:last-child{border-bottom:none}
.menu .ev .ts{color:var(--subtext0);font-size:11px}
/* Drawflow + flow editor */
.flow-wrap{display:grid;grid-template-columns:180px 1fr;gap:8px;height:65vh;min-height:420px}
.flow-palette{border:1px solid var(--surface2);border-radius:6px;padding:6px;overflow:auto;background:var(--surface0)}
.flow-palette .pnode{border:1px solid var(--surface2);border-radius:6px;padding:6px 8px;margin-bottom:6px;cursor:grab;font-size:12px;background:var(--bg);user-select:none}
.flow-palette .pnode:hover{border-color:var(--accent)}
.flow-canvas{border:1px solid var(--surface2);border-radius:6px;background:var(--bg);position:relative;overflow:hidden}
#drawflow{width:100%;height:100%;position:relative;background-size:24px 24px;background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)}
.drawflow .drawflow-node{background:var(--surface0);color:var(--text);border:1px solid var(--surface2);border-radius:6px;font-size:12px;min-width:140px;padding:6px 8px}
.drawflow .drawflow-node.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,170,170,0.25)}
.drawflow .connection .main-path{stroke:var(--accent);stroke-width:2px}
.drawflow .input,.drawflow .output{background:var(--surface2);border:1px solid var(--accent)}
.drawflow .drawflow-node .title{font-weight:600;margin-bottom:2px}
.drawflow .drawflow-node .meta{color:var(--subtext0);font-size:11px;font-family:monospace}
tbody.bbx-sys-rows > tr:first-child > td{border-top:1px solid var(--surface2)}
/* Persistent security-warning banner (admin only, roadmap S3) */
.sec-banner{padding:6px 14px;background:rgb(109 24 48);color:#f7dee5;border-bottom:1px solid rgb(39 20 25);font-size:12px;line-height:1.6}
button.login-open-danger{
width:100%;background:rgb(109 24 48);color:#f7dee5;border:1px solid rgb(39 20 25);
font-weight:600
}
button.login-open-danger:hover{background:rgb(132 32 58);color:#fff;border-color:rgb(39 20 25)}
.sec-banner b{margin-right:4px}
.sec-banner a{color:#f7dee5;text-decoration:none}
.sec-banner a:hover{color:#ffffff;text-decoration:underline}
.sec-banner button,.sec-banner button.sm,.sec-banner button.ghost{
margin-left:8px;height:auto;padding:0;border:none;border-radius:0;
background:transparent;color:#ffffff;box-shadow:none
}
.sec-banner button:hover,.sec-banner button.sm:hover,.sec-banner button.ghost:hover{
background:transparent;border:none;color:#ffffff;text-decoration:underline;box-shadow:none
}
/* "New backend version — reload" prompt. Floats bottom-right, dismissable. */
.upd-banner{position:fixed;right:14px;bottom:40px;z-index:9998;background:var(--surface1);border:1px solid var(--surface2);border-radius:8px;padding:10px 14px;font-size:12px;line-height:1.4;box-shadow:0 4px 18px rgba(0,0,0,.35);display:flex;gap:8px;align-items:center;max-width:360px}
.upd-banner button{margin-left:0}
body.bbx-reloading{opacity:0;pointer-events:none;transition:opacity .28s ease}
html.bbx-kiosk-fadein body{animation:bbxKioskIn .4s ease forwards}
@keyframes bbxKioskIn{from{opacity:0}to{opacity:1}}
/* Dedicated login page: opaque backdrop turns the modal into a full page (roadmap S2) */
.modal-bg.login-page{background:var(--bg)}
#loginModal .modal-top-close{display:none!important}
body.bbx-need-login>header.bar,
body.bbx-need-login>main,
body.bbx-need-login>#secBanner,
body.bbx-need-login>#wsReconnect,
body.bbx-need-login>#winDock{
visibility:hidden;pointer-events:none
}
/* Vendored Tom Select — match native select height / 1px border.
Must beat vendor tom-select.css (.ts-wrapper{min-height:36px}). */
.ts-wrapper{max-width:100%;height:var(--h);max-height:var(--h);min-height:26px!important;display:inline-block;vertical-align:middle}
.pane-h .ts-wrapper,.ts-wrapper.sm{height:26px;max-height:26px;min-width:7.5rem;flex:0 1 auto;width:auto}
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control{
background:var(--surface0)!important;border:1px solid var(--surface1)!important;
border-radius:6px;color:var(--text)!important;
height:var(--h);min-height:var(--h);max-height:var(--h);
padding:0 40px 0 8px!important;box-shadow:none!important;
display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
overflow:hidden;gap:0;line-height:1.2;font-size:1rem;position:relative
}
.ts-wrapper .ts-control > *{align-self:center}
.ts-wrapper .ts-control input{
color:var(--text)!important;background:transparent!important;
height:auto!important;min-height:0!important;padding:0!important;margin:0!important;
line-height:1.2;font-size:inherit;vertical-align:middle
}
/* Closed single: selected label looks like a native