/* Unified Array RMM icons (icons.js). Sizing, alignment, theme tints. Icons use currentColor, so they follow the text and the theme tokens in app.css. */
:root{--ua-win:#2f8fd8;--ua-icon:var(--ink3)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--ua-win:#0a68b8}}
:root[data-theme="light"]{--ua-win:#0a68b8}
.ua-i{display:inline-block;flex:none;vertical-align:-.2em;overflow:visible;shape-rendering:geometricPrecision}
.ua-sp{display:none}
/* quiet by default: icons are a secondary colour so the words stay the loudest thing */
.ua-dev,.ua-os,.ua-dt,.ua-h2,.ua-tab,.ua-why,.ua-th,.ua-cnt svg,.hw .lbl svg,.strip .lbl svg,.brow svg{color:var(--ua-icon)}
.ua-os{vertical-align:-.28em;margin-right:2px}
.ua-dev{margin-right:3px;vertical-align:-.3em}
/* brand tint: Windows blue on hover, on the active row, and at large sizes */
tr.dv:hover .ua-os,tr.dv.cur .ua-os,.ua-brand,.ua-oschip:hover svg,.hw .lbl .ua-os,.strip .lbl .ua-os{color:var(--ua-win)}
.ua-os[width="20"],.ua-os[width="24"],.ua-os[width="32"]{color:var(--ua-win)}
.ua-oschip{display:inline-flex;align-items:center;gap:3px}
.ua-yr{font:600 11px/1 var(--mono);letter-spacing:.02em;color:var(--ink2)}
/* navigation */
.nav button .ua-nav{align-self:center;opacity:.8;margin-right:2px}
.nav button .ua-nav-sp{display:inline-block;width:16px;height:16px;flex:none}
.nav button:hover .ua-nav,.nav button.on .ua-nav{opacity:1}
.nav button{align-items:center}
.tabbar button .ua-nav{margin:0 auto}
.ua-h1{color:var(--acc);margin-right:6px;vertical-align:-.15em}
.ph h1 .ua-h1{width:20px;height:20px}
.sh h2 .ua-h2,.sh h2 .ua-brand{margin-right:4px;vertical-align:-.2em}
.seg button .ua-tab{vertical-align:-.15em;margin-right:2px}
/* status shapes sit where the dot was; the word stays */
.st.ua-hasicon .lamp{display:none}
.st .ua-stp{margin-right:5px;vertical-align:0;flex:none}
.st.c-ok .ua-stp,.st.c-warn .ua-stp,.st.c-crit .ua-stp,.st.c-mute .ua-stp,.st.c-stale .ua-stp{color:currentColor}
.rowl .st .ua-stp{width:12px;height:12px}
/* tiles, key-value lists */
.hw .lbl,.strip .lbl{display:inline-flex;align-items:center;gap:5px}
.hw .lbl svg,.strip .lbl svg{margin:0}
.kv dt{display:flex;align-items:center;gap:6px}
.kv dt .ua-dt,.kv dt svg{margin:0}
.kv dd .ua-vendor{margin-right:6px}
.kv dd .ua-dev{margin-right:5px;vertical-align:-.25em}
/* hostname with its type icon */
.host .ua-dev{vertical-align:-.28em}
.exhead .host{display:inline-flex;align-items:center;gap:6px}
.band h1 .ua-dev{margin-right:8px;vertical-align:-.12em;color:var(--ink2)}
.exhead .host .ua-dev{margin:0}
@media (max-width:719px){table.devs .host{display:flex;align-items:center;gap:5px}table.devs .host .ua-dev{margin:0}}
/* vendor badge: neutral text, not a trademark logo */
.ua-vendor{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.06em;padding:2px 5px;border:1px solid var(--bd2);border-radius:var(--r);color:var(--ink2);background:var(--sf2);vertical-align:1px;text-transform:uppercase}
.brow .ua-vendor{margin-right:6px}
/* customers table device counts */
.ua-cnt{display:inline-flex;align-items:center;gap:3px;margin-left:10px;font:12px var(--mono)}
.ua-cnt svg{margin-left:4px}
.ua-cnt svg:first-child{margin-left:0}
/* reasons */
.ua-why{margin-right:5px;vertical-align:-.2em}
.alertwhy{display:flex;align-items:center;gap:6px}
.c-find .find > span .ua-why{margin-right:5px}
/* buttons */
.btn .ua-btn{margin-right:5px;vertical-align:-.22em}
.btn.sm .ua-btn{width:12px;height:12px}
.btn.pri .ua-btn,.btn.dz .ua-btn{color:currentColor}
.ua-th{margin-right:4px;vertical-align:-.2em}
/* helpers for other pages */
.ua-i-14{width:14px;height:14px}.ua-i-16{width:16px;height:16px}.ua-i-20{width:20px;height:20px}.ua-i-24{width:24px;height:24px}
@media print{.ua-i{color:#000}}

/* ---- brand chips: EVERY brand mark (provider, manufacturer, UniFi/OPNsense, customer logo, initials) sits in the same fixed square, whatever its aspect ratio ----
   Sizes by context: 28 in table rows (default), 32 in headers, 24 in dense lists. A mark is scaled to fit inside with margin (contain) and can never overflow. */
:root{--chip:28px;--chip-pad:4px;--chip-r:6px;--chip-bg:#fff;--chip-bd:var(--bd2);--chip-hdr:32px;--chip-dense:24px}
.ua-chip,.clogo{box-sizing:border-box;width:var(--chip);height:var(--chip);min-width:var(--chip);flex:none;padding:var(--chip-pad);border:1px solid var(--chip-bd);border-radius:var(--chip-r);background:var(--chip-bg);overflow:hidden;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}
.ua-chip > svg,.ua-chip > img,.ua-chip .ua-mark{display:block;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;object-fit:contain}
.ua-chip > svg{overflow:hidden}
.ua-chip{margin-right:6px;color:#3b434d} /* chip face is white in both themes: its own text must not follow the page ink */
/* manufacturer marks are monochrome and follow the text colour, so their chip follows the theme; provider marks keep a white chip */
.ua-vendor.ua-chip{background:var(--sf2);color:var(--ink2);font:600 10.5px/1 var(--mono);letter-spacing:0;text-transform:uppercase;padding:var(--chip-pad)}
.ua-vendor.ua-vmark{padding:calc(var(--chip-pad) + 1px)}
/* monogram badges (no mark, or a wordmark too wide to read): same square, brand colour, two letters */
.ua-isp-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font:700 11px/1 var(--font);letter-spacing:.02em;background:var(--b,#5a6470);color:#fff;border-color:transparent;white-space:nowrap;padding:0}
.ua-isp-neutral{background:var(--sf2);color:var(--ink2);border:1px solid var(--bd2)}
.ispn{display:inline-flex;align-items:center;white-space:nowrap}
.ispn .ua-chip{margin-right:8px}
.net-brand-chip{padding:calc(var(--chip-pad) + 1px)}
/* contexts */
.ph h1 .ua-chip,.ch-top .ua-chip,.band .ua-chip{--chip:var(--chip-hdr)}
.rowl .ua-chip,.brow .ua-chip,.kv dd .ua-chip,table.devs .ua-chip,.hist-block .ua-chip,table.cust .ua-chip,.net-det .ua-chip,table.devs .clogo,.rowl .clogo,.mapmiss .clogo{--chip:var(--chip-dense);--chip-pad:3px;--chip-r:5px}
.ua-chip .ua-yr{display:none}
@media (max-width:719px){.net-head-brands .ua-chip{--chip:var(--chip-dense)}}
.btn .ua-chip{--chip:20px;--chip-pad:2px;--chip-r:4px;margin-right:4px}
img.clogo{display:inline-block}
.ua-chip.ua-wide{--chip-pad:2px}
.ua-chip.ua-wide .ua-mark{width:100%;height:auto;max-height:100%}
/* owner's allowance: a very wide wordmark (over 2.5:1) that is illegible in a square gets the same-height chip, twice as wide; every other mark stays square */