/* ============================================================================ Geocoding Lookup — app styles. Theme tokens live in tokens.css. Structural patterns (topbar, .maptools, .zipbtn, area editor rails, drawbar) follow routingapp/tower so the two apps feel like one system. ============================================================================ */ /* Typography is taken verbatim from routingapp/tower/styles.css:35-40 — same 12.5px/1.45 Inter base, same mono stack, same letter-spacing and antialiasing, so the two apps set type identically. Do not "modernise" these numbers independently of tower. */ *{box-sizing:border-box} html,body{height:100%;margin:0} body{ font:12.5px/1.45 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; background:var(--bg);color:var(--txt);overflow:hidden;-webkit-font-smoothing:antialiased; letter-spacing:.005em; } .mono,code,.code{font-family:var(--mono)} .mono,.num,.gtable td.num{font-variant-numeric:tabular-nums} button,input,select,textarea{font-family:inherit} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:var(--bg2)} ::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--thumb2)} /* ── topbar ─────────────────────────────────────────────────────────────── */ /* Three columns so the middle one is centred on the viewport regardless of how wide the side groups are — a flex row would push the lookup off-centre as tabs or the clock change width. */ .topbar{ position:fixed;top:0;left:0;right:0;height:46px;z-index:900; /* FLEX, not a 1fr-auto-1fr grid. That grid gave the right column as much room as the left even though its content is ~400px narrower, so at 1920px the tab bar was handed 592px when it needed 667 and four tabs — Users among them — were simply not on screen. The search box centres itself in whatever is left over (margin:auto on a flex item), which is a pixel or two off dead-centre and worth it for nine reachable tabs. */ display:flex;align-items:center;gap:12px;padding:0 12px; background:var(--head);border-bottom:1px solid var(--rule); } .tb-left{display:flex;align-items:center;gap:14px;min-width:0;flex:0 1 auto} /* The hero lookup: styled as a search field, sized to be the obvious target, with an accent ring and a soft glow so it reads as the primary action rather than another toolbar button. */ .lk-hero{ margin:0 auto;flex:0 1 auto; display:flex;align-items:center;gap:9px;cursor:pointer;justify-self:center; width:clamp(260px,32vw,420px);height:32px;padding:0 10px; background:var(--bg2);color:var(--txt2); border:1px solid color-mix(in srgb,var(--a-map) 55%,var(--rule2));border-radius:999px; box-shadow:0 0 0 3px color-mix(in srgb,var(--a-map) 12%,transparent), 0 2px 10px -4px color-mix(in srgb,var(--a-map) 45%,transparent); transition:border-color .14s,box-shadow .14s,background .14s,color .14s; } .lk-hero:hover{ color:var(--txt);background:var(--pane2);border-color:var(--a-map); box-shadow:0 0 0 4px color-mix(in srgb,var(--a-map) 20%,transparent), 0 4px 14px -4px color-mix(in srgb,var(--a-map) 55%,transparent); } .lk-hero-ic{color:var(--a-map);font-size:13px;flex:none} .lk-hero-t{font:600 12px/1 Inter,sans-serif;white-space:nowrap} .lk-hero-hint{ flex:1;text-align:left;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font:500 10px/1 var(--mono);letter-spacing:.02em; } .lk-hero kbd{ flex:none;background:var(--pane);border:1px solid var(--rule2);border-radius:4px; padding:2px 5px;font:700 9px/1.3 var(--mono);color:var(--txt3); } /* ── the More menu ─────────────────────────────────────────────────────────── Six screens people live in stay on the bar; the ones visited occasionally — Users, Sync log, Data Quality — plus theme and text size move in here. That is what stops the bar outgrowing its space and silently dropping the tail. */ .moretab{position:relative;flex:none} .tab.more{font-family:var(--mono);letter-spacing:.06em} .moremenu{ position:absolute;top:calc(100% + 6px);left:0;z-index:1200;display:none; min-width:212px;padding:5px;background:var(--pane2);border:1px solid var(--rule2); border-radius:9px;box-shadow:0 14px 34px -10px var(--shadow); } .moremenu.on{display:block} .moremenu .mm-item{display:flex;width:100%;justify-content:flex-start;text-align:left} .mm-grp{ padding:7px 8px 4px;color:var(--txt3); font:700 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; } .mm-grp:not(:first-child){margin-top:3px;border-top:1px solid var(--rule)} .mm-slot{display:flex;flex-direction:column;gap:6px;padding:4px 6px 6px} /* Inside the menu these lay out as full-width rows, not as header furniture. */ .mm-slot .thpick,.mm-slot .fontprefs{width:100%;margin:0} .mm-slot .thbtn{width:100%;justify-content:flex-start} .mm-slot .fontprefs select{flex:1;min-width:0} /* The theme list drops from the menu itself, so anchor it to the slot. */ .mm-slot .thmenu{left:0;right:auto;max-height:280px;overflow:auto} /* Long labels above 1500px, short ones below — the swap happens before any tab can fall off. */ .tab .t-short{display:none} @media (max-width:1500px){ .tab .t-long{display:none} .tab .t-short{display:inline} } @media (max-width:1600px){ .lk-hero{width:clamp(200px,20vw,320px)} } @media (max-width:1500px){ /* The clock is decoration next to the tabs; the OS has one. */ .topbar .clock{display:none} } @media (max-width:1400px){ .lk-hero{width:clamp(170px,16vw,240px)} .brand .mk{height:30px} .tab{padding:6px 8px} } @media (max-width:1180px){ .lk-hero-hint{display:none} .lk-hero{width:clamp(150px,15vw,200px)} .brand .mk{height:26px} .tab{padding:6px 6px;font-size:10px} } .brand{ display:flex;align-items:center;gap:7px;flex:none; font:800 12px/1 var(--mono);letter-spacing:.09em;color:var(--txt); } /* The Perfect Light lockup from tpl-pm (300x85), sized by height so it never distorts. The logo stands alone — the app's name is already in the tab title and on the boot screen, and repeating it beside the mark only crowds the tabs. The star in favicon.svg is the same family. */ /* The asset ships with its own dark plate (tpl-pm is a dark app), so it stays dark on every one of our 28 themes. Rounding the corners makes that read as a badge rather than as a PNG someone forgot to cut out. */ /* 34px in a 46px bar. At 24px the 300x85 lockup rendered 85px wide and the wordmark was too small to read as a logo at all — present, but not showing, which is the same thing to whoever is looking at it. This leaves 6px of air above and below. */ .brand .mk{height:34px;width:auto;display:block;flex:none;object-fit:contain;border-radius:6px} @media (max-width:1100px){ .brand .mk{height:28px} } /* SCROLLS rather than clips. overflow:hidden meant that on any screen where the tabs did not fit, the ones on the right — Users, Sync log, Data Quality — simply were not there, with nothing to say so. A tab you cannot reach is a feature you do not have. The scrollbar itself is hidden because a 9-tab bar that fits on most screens should not carry furniture for the ones where it does not. */ .tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{ background:none;border:1px solid transparent;border-radius:6px;cursor:pointer; color:var(--txt3);padding:6px 11px;white-space:nowrap; font:600 11px/1 Inter,sans-serif;letter-spacing:.02em; } .tab:hover{color:var(--txt);background:var(--hover)} .tab.on{color:var(--ink);background:var(--ac,var(--a-map));border-color:transparent} .tb-right{display:flex;align-items:center;gap:9px;flex:none;min-width:0} .clock{text-align:right;font:700 11px/1.15 var(--mono);color:var(--txt2)} .clock small{display:block;font-weight:500;font-size:9px;color:var(--txt3)} /* service-line filter — tinted per line, from the DB colors */ .svcfilter{display:flex;gap:3px;background:var(--pane);border:1px solid var(--rule2);border-radius:7px;padding:2px} .svcbtn{ background:none;border:0;border-radius:5px;cursor:pointer;color:var(--txt3); padding:5px 10px;font:700 10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase; } .svcbtn:hover{color:var(--txt);background:var(--hover)} .svcbtn.on{color:var(--ink);background:var(--sc,var(--a-map))} /* signed-in chip */ .authchip{display:flex;align-items:center;gap:5px} .authwho{ display:flex;align-items:center;gap:7px;background:var(--pane);border:1px solid var(--rule2); border-radius:999px;padding:3px 10px 3px 3px;max-width:220px; } .authname{font:600 11px/1 Inter,sans-serif;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .authrole{ font:700 8.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--txt3); border-left:1px solid var(--rule2);padding-left:7px;white-space:nowrap; } @media (max-width:1320px){ .authrole{display:none} } /* text size + typeface, ported from tower/styles.css:2995-2998 */ .fontprefs{display:flex;align-items:center;gap:4px;margin-right:4px} .fontprefs .fp-a{font:800 13px/1 system-ui,sans-serif;color:var(--txt3);margin-right:1px} .fontprefs select{ background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:6px; font-size:10.5px;padding:3px 5px;cursor:pointer;max-width:82px; } .fontprefs select:hover{border-color:var(--a-map);color:var(--txt)} .fontprefs select#fpSize{max-width:52px} /* theme picker */ .thpick{position:relative} .thbtn{ display:flex;align-items:center;gap:7px;background:var(--pane);color:var(--txt2); border:1px solid var(--rule2);border-radius:6px;padding:5px 9px;cursor:pointer; font:600 10px/1 var(--mono); } .thbtn:hover{color:var(--txt);border-color:var(--a-map)} .thsw{display:inline-flex;gap:2px} .thsw i{width:6px;height:11px;border-radius:2px;display:block} .thmenu{ position:absolute;right:0;top:32px;display:none;z-index:1000; background:var(--pane2);border:1px solid var(--rule2);border-radius:8px;padding:6px; max-height:66vh;overflow:auto;box-shadow:0 12px 34px -10px var(--shadow); grid-template-columns:repeat(2,minmax(150px,1fr));gap:3px; } .thmenu.on{display:grid} .thmenu button{ display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer; background:none;border:1px solid transparent;border-radius:5px;color:var(--txt2); padding:5px 7px;font:600 10px/1 Inter,sans-serif; } .thmenu button:hover{background:var(--hover);color:var(--txt)} .thmenu button.on{background:var(--sel);color:var(--txt);border-color:var(--a-map)} .thmenu-h{ grid-column:1/-1;padding:6px 7px 3px;color:var(--txt3); font:700 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; } /* ── view / module host ─────────────────────────────────────────────────── */ #view{position:fixed;top:46px;left:0;right:0;bottom:0} .mod{display:none;position:absolute;inset:0;overflow:auto} .mod.on{display:block} .mod.flex.on{display:flex} /* ── 3-column workspace: rail | map | rail ──────────────────────────────── */ /* The left rail carries names like "Annetta South / Cresson / Weatherford" — three cities joined with slashes — so it is sized to show them whole rather than ellipsing the third one away. */ .wrap{position:absolute;inset:0;display:grid;grid-template-columns:360px 1fr 320px} /* Nothing selected means nothing to say: the detail rail is not rendered at all and the map takes the space back, rather than sitting there as an empty panel telling you to click something. */ .wrap.nosel{grid-template-columns:360px 1fr} .wrap.nosel > .side.r{display:none} .side{background:var(--pane);border-right:1px solid var(--rule);overflow:auto;min-width:0} /* The RIGHT rail lays itself out rather than scrolling as one long column. Its sections shared a single scroll before, so on a short screen the third one — ZIP codes — was simply below the fold and looked missing. Now the header block is fixed, the open accordions divide what is left, and each list scrolls inside its own box. Nothing can push a heading off screen. */ .side.r{display:flex;flex-direction:column;overflow:hidden} .side.r > #rDetail{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden} #rDetail > .detail{flex:none} #rDetail > .acc{display:flex;flex-direction:column;min-height:0} /* Sections take the height their CONTENT needs, not an equal share — one area manager was being given as much room as a sixty-row ZIP list, and the gap under it was pure waste. */ #rDetail > .acc.on{flex:0 0 auto} #rDetail > .acc:not(.on){flex:none} /* The ZIP list is the one that is always long, so it absorbs whatever is left and scrolls. */ #rDetail > .acc.on[data-acc="zips"]{flex:1 1 0} #rDetail > .acc.on[data-acc="zips"] > .acc-b{flex:1;min-height:0;overflow:auto} /* A section that is short still scrolls rather than overflowing if the rail is tiny. */ #rDetail > .acc.on:not([data-acc="zips"]) > .acc-b{max-height:46vh;overflow:auto} .side.r{border-right:0;border-left:1px solid var(--rule)} .side-h{ position:sticky;top:0;z-index:2;background:var(--head);border-bottom:1px solid var(--rule); padding:9px 11px;font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3); display:flex;align-items:center;justify-content:space-between;gap:8px; } .side-h b{color:var(--ac,var(--a-map));font-size:10px} .mapcol{position:relative;background:var(--bg2);min-width:0} #map,#territoryMap{position:absolute;inset:0} .leaflet-container{background:var(--bg2);font-family:inherit} .leaflet-control-zoom{display:none} html.theme-light .leaflet-tile-pane{filter:saturate(1.08) contrast(1.06) brightness(.97)} /* ── on-map controls: plain HTML, absolutely positioned (tower .maptools) ── */ .maptools{position:absolute;right:10px;top:10px;z-index:500;display:flex;flex-direction:column;gap:5px;align-items:flex-end} .mtrow{display:flex;gap:5px} .mtool{ background:color-mix(in srgb,var(--pane2) 82%,transparent);backdrop-filter:blur(8px); border:1px solid var(--rule);border-radius:6px;color:var(--txt2);cursor:pointer; padding:6px 9px;font:600 10px/1 Inter,sans-serif;white-space:nowrap; } .mtool:hover{color:var(--txt);border-color:var(--a-map)} .mtool.on{color:var(--ink);background:var(--a-map);border-color:transparent} .mtool.wx.on{background:var(--a-over)} .mtool.sep{margin-left:6px} /* An action, not a layer toggle — it never lights, so it reads as a button you press. */ .mtool.act{color:var(--txt);border-color:var(--rule2)} .mtool.act:hover{color:var(--ink);background:var(--a-map);border-color:transparent} .mapkpi{ position:absolute;left:10px;bottom:10px;z-index:500;display:flex; background:color-mix(in srgb,var(--pane2) 82%,transparent);backdrop-filter:blur(8px); border:1px solid var(--rule);border-radius:7px;overflow:hidden; } .mapkpi .mk{padding:6px 13px;border-right:1px solid var(--rule);text-align:center} .mapkpi .mk:last-child{border-right:0} .mapkpi .v{font:700 15px/1.1 var(--mono);color:var(--ac,var(--a-map))} .mapkpi .k{font:600 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-top:3px} .basemapsw{ position:absolute;left:10px;top:10px;z-index:500;display:flex;gap:2px; background:color-mix(in srgb,var(--pane2) 82%,transparent);backdrop-filter:blur(8px); border:1px solid var(--rule);border-radius:7px;padding:2px; } .bmbtn{ background:none;border:0;border-radius:5px;cursor:pointer;color:var(--txt3); padding:5px 9px;font:700 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase; } .bmbtn:hover{color:var(--txt);background:var(--hover)} .bmbtn.on{color:var(--ink);background:var(--a-map)} /* Per-region conditions from api.weather.gov. Sits under the basemap switch and only exists while the Weather layer is lit, so it never competes with the map when nobody asked for weather. */ .wxstrip{position:absolute;left:10px;top:46px;z-index:500;display:flex;flex-direction:column;gap:4px} .wxchip{ position:relative;display:flex;align-items:center;gap:7px;width:152px; background:color-mix(in srgb,var(--pane2) 84%,transparent);backdrop-filter:blur(8px); border:1px solid var(--rule);border-left:3px solid var(--rc,var(--a-map)); border-radius:7px;padding:5px 8px;cursor:pointer;text-align:left; } .wxchip:hover{border-color:var(--a-over);border-left-color:var(--rc,var(--a-map))} .wxchip.on{background:color-mix(in srgb,var(--rc) 16%,var(--pane2));border-color:var(--rc)} .wxchip .wxg{font-size:15px;line-height:1;filter:saturate(.9)} .wxchip .wxb{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .wxchip .wxr{display:flex;align-items:baseline;justify-content:space-between;gap:6px} .wxchip .wxr b{ font-family:var(--mono);font-weight:700;font-size:9px;line-height:1; letter-spacing:.08em;text-transform:uppercase;color:var(--txt2); } .wxchip .wxt{font-family:var(--mono);font-weight:700;font-size:12px;line-height:1;color:var(--txt)} .wxchip .wxs{ font-family:Inter,sans-serif;font-weight:500;font-size:9px;line-height:1.1; color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .wxchip .wxal{ position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%; background:var(--sc);box-shadow:0 0 0 2px color-mix(in srgb,var(--sc) 30%,transparent); } /* Map labels + pins. These sit on top of tiles, not on a pane, so they cannot inherit contrast from the theme surfaces — a white label on the light Voyager basemap is invisible. Each one therefore names its own ink and its own halo, and .theme-light flips both. */ .ziplbl{ font:700 9px/1 var(--mono);color:var(--txt2); text-shadow:0 0 3px var(--bg),0 0 2px var(--bg); white-space:nowrap;pointer-events:none; } .arealbl{ font:700 10px/1 Inter,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9); white-space:nowrap;pointer-events:none;letter-spacing:.02em; } .reglbl{ font:800 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95);white-space:nowrap;pointer-events:none; } /* Light themes: dark ink with a white halo, so labels read against pale tiles. */ html.theme-light .arealbl{color:#10161d;text-shadow:0 0 3px #fff,0 1px 2px rgba(255,255,255,.95)} html.theme-light .reglbl{color:#0d1319;text-shadow:0 0 4px #fff,0 1px 3px rgba(255,255,255,.95)} html.theme-light .ziplbl{text-shadow:0 0 3px #fff,0 0 2px #fff} /* Manager badge: avatar(s) plus a name. Photo when there is one, initials when there is not. */ .mgrbadge{ display:inline-flex;align-items:center;gap:6px;cursor:pointer; background:color-mix(in srgb,var(--pane2) 92%,transparent);backdrop-filter:blur(6px); border:1px solid var(--mc,var(--a-assign));border-left:3px solid var(--mc,var(--a-assign)); border-radius:999px;padding:3px 9px 3px 4px;white-space:nowrap; box-shadow:0 3px 10px -4px rgba(0,0,0,.75); } .mgrbadge:hover{background:var(--pane2);border-color:var(--txt)} .mgrname{font:700 10px/1 Inter,sans-serif;color:var(--txt);letter-spacing:.01em} .avstack{display:inline-flex;align-items:center} .avstack > *{margin-left:-6px;box-shadow:0 0 0 2px var(--pane2)} .avstack > *:first-child{margin-left:0} .avmore{ display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:999px; background:var(--rule2);color:var(--txt2);font:800 9px/1 var(--mono); } /* Avatar: initials by default, photo when supplied. Sized inline by avatarHtml(). */ .avi{ position:relative;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden; background:var(--av,var(--a-assign));color:#0b1016;flex:none; } .avi i{font:800 9px/1 var(--mono);letter-spacing:.02em;font-style:normal} .avi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .avi.has-img i{opacity:0} html.theme-light .avi{color:#fff} .gpin{ width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg); background:var(--pc,var(--txt2)); /* TWO rings, light inside and dark outside. Neither alone is a guarantee: white separates the pin from a strong fill but washes out on a pale one (1.36 against a selected South East), and a dark ring does the reverse. With both, whatever is underneath, one of them contrasts — which is what makes a pin findable without knowing which area it landed on. */ border:1.5px solid rgba(255,255,255,.95); box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.3); } .gpin::after{content:'';position:absolute;left:4.5px;top:4.5px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.9)} /* Light theme: pins are deep, so keep the white rim and give the centre dot the same treatment. */ html.theme-light .gpin{border-color:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.3)} html.theme-light .gpin::after{background:rgba(255,255,255,.92)} /* Dark theme: pins are bright, so the dot goes dark to stay legible inside them. */ html:not(.theme-light) .gpin::after{background:rgba(0,0,0,.45)} .poph{font:700 11px/1.3 Inter,sans-serif;color:var(--txt);margin-bottom:5px} .popr{display:flex;justify-content:space-between;gap:12px;font:500 10px/1.5 Inter,sans-serif;color:var(--txt3)} .popr b{color:var(--txt2);font-weight:700} .leaflet-popup-content-wrapper{background:var(--pane2);color:var(--txt);border:1px solid var(--rule2);border-radius:8px;box-shadow:0 10px 30px -8px var(--shadow)} .leaflet-popup-content{margin:9px 11px;font-family:inherit} .leaflet-popup-tip{background:var(--pane2);border:1px solid var(--rule2)} .leaflet-popup-close-button{color:var(--txt3)!important} .leaflet-tooltip{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);font:600 10px/1 Inter,sans-serif;box-shadow:none} .leaflet-tooltip-top:before{border-top-color:var(--rule2)} .leaflet-control-attribution{background:color-mix(in srgb,var(--pane) 70%,transparent)!important;color:var(--txt3)!important;font-size:9px!important} .leaflet-control-attribution a{color:var(--txt2)!important} /* clickable region label on the map */ .reglbl.clickable{cursor:pointer} .reglbl.clickable:hover{text-decoration:underline;text-decoration-thickness:2px} /* ── expandable accordion in the right rail ─────────────────────────────── */ .acc{border-bottom:1px solid var(--rule)} .acc-h{ display:flex;align-items:center;gap:8px; background:var(--head);border-top:1px solid var(--rule);color:var(--txt2); padding:6px 11px;font:700 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; /* STICKY, so the section headings stay reachable however long the lists get. The rail scrolls, and on a short screen a metro's 171 ZIP rows pushed Managers and Areas clean out of sight — the headers are the navigation, so they must never be the thing that scrolls away. */ position:sticky;top:0;z-index:3; } .acc-t{ display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer;text-align:left; background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:2px 0; } .acc-t:hover{color:var(--txt)} /* the section filter — small, quiet, and it must not look like the page's main search */ .acc-q{ width:96px;flex:none;background:var(--bg2)!important;border:1px solid var(--rule2)!important; border-radius:5px!important;color:var(--txt)!important;padding:4px 7px!important; font:500 10.5px/1.2 Inter,sans-serif!important;text-transform:none;letter-spacing:0; } .acc-q:focus{border-color:var(--ac,var(--a-map))!important;box-shadow:none!important} .acc-q::placeholder{color:var(--txt3)} /* The twisty: 9px of --txt3 was too faint and clipped the glyph. Give it room, weight and colour, and light it up with the section accent when the section is open. */ .acc-tw{ color:var(--txt2);font-size:11px;line-height:1;width:13px;flex:none;text-align:center; font-weight:700;transition:color .12s; } .acc.on > .acc-h .acc-tw{color:var(--ac,var(--a-map))} .acc-t:hover .acc-tw{color:var(--txt)} .mgr-wrap.on .acc-tw{color:var(--a-assign)} .acc-row:hover .acc-tw{color:var(--txt)} .acc-lb{flex:1} .acc-n{font:800 11px/1 var(--mono);color:var(--ac,var(--a-map))} .acc-b{display:none;padding:3px 0} .acc.on .acc-b{display:block} .acc-scroll{overflow:visible} /* the section body is the scroller now, not this */ .acc-empty{padding:9px 12px;color:var(--txt3);font-size:10.5px;line-height:1.5} /* ── the regional manager, above everything ────────────────────────────────── A region manager owns every shape on screen, so their name belongs before the lists rather than inside one. Area managers stay in their own section below, which is what makes the two roles read as the different jobs they are. */ .rgn-mgrs{margin-top:11px;display:flex;flex-direction:column;gap:5px} .rgn-mgr{ /* Two rows, not one. Side by side, two phone numbers squeezed the name to nothing — the links are fixed-width and the name is the part that must never be the one that gives way. */ display:grid;grid-template-columns:auto 1fr;grid-template-areas:"av who" "links links"; align-items:center;gap:4px 9px;padding:8px 9px; background:var(--hover);border:1px solid var(--rule);border-radius:7px; } .rgn-mgr > .avi{grid-area:av} .rgn-mgr.none{color:var(--warn);font-size:10.5px;justify-content:center} .rgn-who{grid-area:who;min-width:0} .rgn-role{ color:var(--txt3);font:700 8px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .rgn-name{margin-top:3px;color:var(--txt);font-weight:700;font-size:11.5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rgn-links{grid-area:links;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:2px} .rgn-links a{ color:var(--txt3);text-decoration:none;padding:3px 5px;border-radius:4px; background:var(--pane);border:1px solid var(--rule);font:700 9px/1 var(--mono);white-space:nowrap; } .rgn-links a:hover{color:var(--txt);border-color:var(--rule2)} /* ── the rail's answer-at-a-glance block ────────────────────────────────────── A column of lists makes you read to learn anything. These two say how big the selection is and how it divides, above the lists rather than inside them. */ .dstats{display:flex;gap:6px;margin-top:11px} .dstat{ flex:1;min-width:0;text-align:center;padding:7px 4px; background:var(--hover);border:1px solid var(--rule);border-radius:6px; } .dstat b{display:block;font:700 14px/1 var(--mono);color:var(--txt);letter-spacing:-.02em} .dstat span{ display:block;margin-top:3px;color:var(--txt3); font:700 8px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; } /* Children by ZIP share. Each segment is also the fastest way to drill into one. */ .sharebar{display:flex;height:22px;margin-top:8px;border-radius:5px;overflow:hidden;gap:1px} .sharebar button{ border:0;padding:0;cursor:pointer;min-width:3px;overflow:hidden; display:flex;align-items:center;justify-content:center; opacity:.85;transition:opacity .12s; } .sharebar button:hover{opacity:1} .sharebar button span{ padding:0 5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font:700 8.5px/1 var(--mono);letter-spacing:.04em; text-shadow:0 1px 2px rgba(0,0,0,.55); } /* Heading inside an accordion body — "Region managers" / "Area managers". Two different jobs, so they get their own headings rather than a grey note distinguishing them mid-column. */ .acc-grp{ padding:8px 12px 4px;color:var(--txt3); font:700 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; } .acc-grp:not(:first-child){margin-top:4px;border-top:1px solid var(--rule)} /* The "showing n of m" line when a manager is filtering the ZIP list below them. */ .acc-note{ padding:7px 12px;color:var(--txt3);font-size:10px;line-height:1.5; background:var(--hover);border-bottom:1px solid var(--rule); } .acc-note b{color:var(--txt2)} .acc-row{ display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer; background:none;border:0;border-radius:5px;color:var(--txt2);padding:6px 11px;font-size:11px; } .acc-row:hover{background:var(--hover);color:var(--txt)} .acc-row.faded{opacity:.55} .acc-row.faded:hover{opacity:1} .acc-row .sw{width:10px;height:10px;border-radius:2px;flex:none} .acc-rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acc-rm{color:var(--txt3);font-size:10px;white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis} .acc-rz{font:700 9px/1 var(--mono);color:var(--txt3);flex:none} /* service-line chips on a manager row, shown only when the filter is "All" */ .acc-svc{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:150px} .chip.svc{padding:1px 5px;font-size:8.5px;line-height:1.5} .acc-row .zipno{min-width:44px;text-align:left;color:var(--txt2);font-size:10.5px} /* a manager's contact block, opened inline */ .mgr-wrap.on{background:color-mix(in srgb,var(--a-assign) 9%,transparent)} .mgr-card{padding:3px 11px 10px 27px} .mgr-line{ display:flex;justify-content:space-between;gap:10px;align-items:baseline; padding:3px 0;border-bottom:1px dashed var(--rule);text-decoration:none; } .mgr-line span{color:var(--txt3);font-size:10px} .mgr-line b{color:var(--txt2);font:600 10.5px/1.4 var(--mono);text-align:right;word-break:break-all} a.mgr-line:hover b{color:var(--a-map);text-decoration:underline} .linkish{ background:none;border:0;padding:0;cursor:pointer;color:var(--a-map); font-weight:600;font-size:11px;line-height:1.4;text-align:right; } .linkish:hover{text-decoration:underline} .detail h4 .dot{display:inline-block;width:11px;height:11px;border-radius:3px} /* ── rails: tree, rows, gaps ────────────────────────────────────────────── */ .tree{padding:5px} .trow{ display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer; background:none;border:1px solid transparent;border-radius:6px;color:var(--txt2); padding:6px 8px;font:600 11px/1.2 Inter,sans-serif; } .trow:hover{background:var(--hover);color:var(--txt)} .trow.on{background:var(--sel);color:var(--txt);border-color:var(--rule2)} .trow.sub{padding-left:20px;font-weight:500;font-size:10.5px} /* Four levels of tree. Indent and weight both fall with depth, so the shape of the hierarchy is readable without any connecting lines. */ .trow.d1{padding-left:18px;font-weight:600;font-size:10.5px} .trow.d2{padding-left:30px;font-weight:500;font-size:10.5px} .trow.d3{padding-left:44px;font-weight:500;font-size:10px;color:var(--txt3)} .trow.d3:hover,.trow.d3.on{color:var(--txt)} /* The caret is its own click target inside the row: it expands, the rest selects. */ .trow .tcar{flex:none;width:11px;text-align:center;font-size:8px;color:var(--txt3);border-radius:3px} .trow .tcar:hover{background:var(--rule2);color:var(--txt)} .trow .tcar.sp{visibility:hidden} .trow .sw{width:11px;height:11px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.35) inset} .trow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* A name too long even for the wider rail wraps to a second line instead of being cut. */ .trow.sub .nm,.trow.d2 .nm,.trow.d3 .nm{white-space:normal;overflow-wrap:anywhere;line-height:1.25} .trow .ct{font:700 9px/1 var(--mono);color:var(--txt3);flex:none} .trow.warn .ct{color:var(--warn)} /* An area with no coverage on the active service line: still listed, visibly quieter. */ .trow.faded{opacity:.5} .trow.faded:hover{opacity:1} .gaprow{ display:flex;align-items:center;gap:8px;padding:6px 9px;border-bottom:1px solid var(--rule); font:500 10.5px/1.3 Inter,sans-serif;color:var(--txt2); } .gaprow .pill{ font:700 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase; padding:3px 5px;border-radius:3px;background:var(--warn);color:var(--ink);flex:none; } .gaprow .pill.err{background:var(--neg)} .detail{padding:10px 11px} .detail h4{margin:0 0 8px;font:800 12px/1.2 Inter,sans-serif;color:var(--txt)} .drow{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--rule);font-size:11px} .drow span{color:var(--txt3)} .drow b{color:var(--txt2);font-weight:600;text-align:right} .dlink{ display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:6px 9px; background:var(--pane2);border:1px solid var(--rule2);border-radius:6px; color:var(--a-map);text-decoration:none;font:700 10px/1 var(--mono); } .dlink:hover{border-color:var(--a-map);background:var(--hover)} .empty{padding:26px 16px;text-align:center;color:var(--txt3)} .empty .ic{font-size:24px;opacity:.5} .empty .ti{margin-top:7px;font:700 11px/1.3 Inter,sans-serif;color:var(--txt2)} .empty .hi{margin-top:4px;font-size:10px;line-height:1.5} .dim{color:var(--txt3)} /* ── territory editor ───────────────────────────────────────────────────── */ .lvlsw{display:flex;gap:2px;background:var(--pane2);border:1px solid var(--rule2);border-radius:6px;padding:2px} .lvlbtn{background:none;border:0;border-radius:4px;cursor:pointer;color:var(--txt3);padding:4px 9px;font:700 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase} .lvlbtn.on{background:var(--a-cover);color:var(--ink)} .tform{padding:10px 11px} .afield{margin-bottom:11px} .afield label{display:block;margin-bottom:5px;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)} .afield input[type=text],.afield select{ width:100%;background:var(--bg2);border:1px solid var(--rule2);border-radius:5px; color:var(--txt);padding:7px 8px;font:500 11px/1 Inter,sans-serif; } .afield input[type=text]:focus,.afield select:focus{outline:none;border-color:var(--a-cover)} .swgrid{display:flex;gap:5px;flex-wrap:wrap;align-items:center} .swgrid span[data-c]{width:21px;height:21px;border-radius:5px;cursor:pointer;outline-offset:1px} .afcustom{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:var(--txt3);font:700 9px/1 var(--mono)} .afcustom input[type=color]{width:23px;height:23px;padding:0;border:1px solid var(--rule2);border-radius:5px;background:none;cursor:pointer} .tbtn{ width:100%;margin-top:4px;padding:8px;cursor:pointer;border-radius:6px; border:1px solid var(--rule2);background:var(--pane2);color:var(--txt); font:700 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase; } .tbtn:hover{border-color:var(--a-cover);background:var(--hover)} .tbtn.pri{background:var(--a-cover);color:var(--ink);border-color:transparent} .tbtn.danger{color:var(--neg)} .tbtn.danger:hover{border-color:var(--neg)} /* Geoman: hide its action bar, keep the toolbar; we supply Finish/Cancel */ .leaflet-pm-toolbar .button-container a{background:var(--pane2);color:var(--txt);border-color:var(--rule2)} .leaflet-pm-toolbar .leaflet-pm-actions-container{display:none!important} #territoryMap .leaflet-pm-toolbar .button-container a{width:32px;height:32px;background-size:18px 18px} .area-drawbar{ position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:1000;display:none; align-items:center;gap:8px;background:var(--pane2);border:1px solid var(--a-cover); border-radius:8px;padding:7px 10px;box-shadow:0 6px 20px rgba(0,0,0,.55); } .area-drawbar.on{display:flex} .area-drawhint{font:600 10px/1 Inter,sans-serif;color:var(--txt2)} .area-dbtn{ font:700 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.03em;border-radius:5px; padding:7px 12px;cursor:pointer;border:1px solid var(--rule2);background:var(--pane);color:var(--txt); } .area-dbtn.ok{background:var(--pos);color:var(--ink);border-color:transparent} /* manager assignment grid */ .mgrid{width:100%;border-collapse:collapse;font-size:11px} .mgrid th,.mgrid td{padding:6px 8px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle} .mgrid th{ position:sticky;top:0;background:var(--head);color:var(--txt3);z-index:1; font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase; } .mgrid td.rg{color:var(--txt3);font:600 10px/1 var(--mono)} .mgrid select{ width:100%;background:var(--bg2);border:1px solid var(--rule2);border-radius:5px; color:var(--txt);padding:5px 6px;font:500 10.5px/1 Inter,sans-serif; } .mgrid select.multi{border-color:var(--warn);color:var(--warn)} .mgrid select.none{color:var(--txt3)} .mgrid tr:hover td{background:var(--hover)} .tablewrap{overflow:auto;max-height:100%} /* ── generic table (admin, customers, data quality) ─────────────────────── */ .gtable{width:100%;border-collapse:collapse;font-size:11.5px} .gtable th,.gtable td{padding:7px 10px;border-bottom:1px solid var(--rule);text-align:left} .gtable th{ position:sticky;top:0;background:var(--head);color:var(--txt3);z-index:1;cursor:default; font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase; } .gtable tr:hover td{background:var(--hover)} .gtable td.num{font-family:var(--mono);color:var(--txt2)} .sev{font:700 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 5px;border-radius:3px} .sev.error{background:var(--neg);color:var(--ink)} .sev.warning{background:var(--warn);color:var(--ink)} .pagehead{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 14px;border-bottom:1px solid var(--rule);background:var(--head); } .pagehead h3{margin:0;font:800 13px/1.2 Inter,sans-serif;color:var(--txt)} .pagehead .sub{font-size:10.5px;color:var(--txt3);margin-top:3px} .padded{padding:14px} /* ============================================================================ UI KIT — form overlay, slide-in detail panel, confirm dialog, segmented control, chips, selection bar. Class names and proportions follow routingapp/tower (.pay-ov/.pay-card/.ph/.pay-l/.pay-acts/.miniact, .detailwin/.dw-*, .confirmmodal, .seg, .ibtn) so both apps read as one system. ============================================================================ */ /* Global form-control base, ported from routingapp/tower/styles.css:42-58 so inputs and selects are identical in both apps: same radius, padding, 12.5px type, focus ring and chevron. */ input[type=text],input[type=number],input[type=email],input[type=password],input[type=search], input[type=tel],input[type=url],input:not([type]),select,textarea{ background:var(--pane2);color:var(--txt);border:1px solid var(--rule2);border-radius:8px; padding:8px 11px;font:inherit;font-size:12.5px;line-height:1.3;outline:none;box-sizing:border-box; transition:border-color .13s,box-shadow .13s,background .13s;-webkit-appearance:none;appearance:none; } input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{ border-color:var(--ac,var(--a-map)); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac,var(--a-map)) 26%,transparent); } input:not([type=checkbox]):not([type=radio])::placeholder,textarea::placeholder{color:var(--txt3);opacity:1} input:not([type=checkbox]):not([type=radio]):hover:not(:focus),select:hover:not(:focus){ border-color:var(--rule2);filter:brightness(1.03); } select{ padding-right:30px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:11px; } select:disabled{opacity:.5;cursor:not-allowed} select option,option{background:var(--pane);color:var(--txt)} optgroup{background:var(--pane);color:var(--txt3);font:700 10px/1 var(--mono)} /* pane header, used by cards and overlays */ .ph{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 14px;background:var(--head);border-bottom:1px solid var(--rule); } .ph h3{ margin:0;display:flex;align-items:center;gap:8px; font:800 12px/1.2 Inter,sans-serif;color:var(--ac,var(--a-map)); } .ph h3 .acc{width:8px;height:8px;border-radius:2px;background:var(--ac,var(--a-map))} .ph .meta{font:500 10px/1 var(--mono);letter-spacing:.05em;color:var(--txt3)} /* form overlay */ .pay-ov{ position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center; padding:20px;background:rgba(0,0,0,.58);backdrop-filter:blur(3px);animation:ovin .14s ease-out; } @keyframes ovin{from{opacity:0}to{opacity:1}} .pay-card{ width:min(440px,94vw);max-height:92vh;overflow:auto;background:var(--pane); border:1px solid var(--rule2);border-radius:10px;box-shadow:0 22px 64px rgba(0,0,0,.55); } .pay-card.wide{width:min(660px,95vw)} .pay-body{padding:13px 15px;display:flex;flex-direction:column;gap:2px} .pay-l{ margin:9px 0 4px;font:700 9.5px/1 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--txt3); } .pay-body input[type=text],.pay-body input[type=email],.pay-body select{ width:100%;background:var(--pane2);border:1px solid var(--rule2);border-radius:5px; color:var(--txt);padding:8px 9px;font:500 12px/1.2 Inter,sans-serif; } .pay-body input:focus,.pay-body select:focus{ outline:none;border-color:var(--ac,var(--a-map)); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac,var(--a-map)) 20%,transparent); } .pay-body .hint{margin-top:5px;font-size:10px;line-height:1.5;color:var(--txt3)} .pay-row{display:grid;grid-template-columns:1fr 1fr;gap:11px} .pay-err{ display:none;margin:2px 0 6px;padding:8px 10px;border-radius:6px; background:color-mix(in srgb,var(--neg) 14%,transparent); border:1px solid color-mix(in srgb,var(--neg) 45%,transparent); color:var(--neg);font-size:11px;line-height:1.45; } .pay-err.on{display:block} .pay-acts{display:flex;justify-content:flex-end;gap:8px;padding:11px 15px;border-top:1px solid var(--rule)} .miniact{ padding:7px 13px;border-radius:6px;cursor:pointer; border:1px solid var(--rule2);background:var(--pane2);color:var(--txt); font:700 10px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase; } .miniact:hover{background:var(--hover);border-color:var(--ac,var(--a-map))} .miniact.go{background:var(--ac,var(--a-map));color:var(--ink);border-color:transparent} .miniact.go:hover{filter:brightness(1.09);background:var(--ac,var(--a-map))} .miniact.danger{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,transparent)} .miniact.danger:hover{background:var(--neg);color:var(--ink);border-color:transparent} .miniact:disabled{opacity:.42;cursor:not-allowed} /* header action button on a tinted pane header */ .ph-act{ padding:6px 11px;border-radius:6px;cursor:pointer;white-space:nowrap; border:1px solid var(--rule2);background:var(--pane2);color:var(--ac,var(--a-map)); font:800 9.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase; } .ph-act:hover{background:var(--ac,var(--a-map));color:var(--ink);border-color:transparent} /* slide-in detail panel */ .detailwin{ position:fixed;top:46px;right:0;bottom:0;width:360px;max-width:92vw;z-index:1250; display:flex;flex-direction:column;background:var(--pane);border-left:1px solid var(--rule2); transform:translateX(102%);transition:transform .2s cubic-bezier(.4,0,.2,1); box-shadow:-14px 0 40px -18px var(--shadow); } .detailwin.on{transform:translateX(0)} .dw-hd{ display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none; padding:11px 13px;background:var(--head);border-bottom:1px solid var(--rule); } .dw-kind{font:800 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac,var(--a-map))} .dw-x{background:none;border:0;color:var(--txt3);font-size:16px;cursor:pointer;line-height:1} .dw-x:hover{color:var(--neg)} .dw-body{padding:13px;overflow:auto;flex:1} .dw-sec{ margin:14px 0 7px;font:700 9px/1 var(--mono);letter-spacing:.11em; text-transform:uppercase;color:var(--txt3); } .dw-sec:first-child{margin-top:0} /* confirm dialog */ .confirmmodal{ position:fixed;inset:0;z-index:4600;display:none;align-items:center;justify-content:center; background:rgba(2,5,9,.62);backdrop-filter:blur(3px); } .confirmmodal.on{display:flex} .confirmbox{ width:min(430px,92vw);background:var(--pane);border:1px solid var(--rule2); border-radius:10px;box-shadow:0 22px 64px rgba(0,0,0,.55);overflow:hidden; } .confirmhd{padding:12px 15px;background:var(--head);border-bottom:1px solid var(--rule);font:800 12px/1.2 Inter,sans-serif;color:var(--txt)} .confirmbody{padding:14px 15px;font-size:11.5px;line-height:1.6;color:var(--txt2)} .confirmbody b{color:var(--txt)} .confirmacts{display:flex;justify-content:flex-end;gap:8px;padding:11px 15px;border-top:1px solid var(--rule)} /* segmented control */ .seg{display:flex;border:1px solid var(--rule2);border-radius:6px;overflow:hidden} .seg button{ padding:6px 12px;border:0;cursor:pointer;background:var(--pane2);color:var(--txt3); font:700 10px/1 var(--mono);letter-spacing:.05em; } .seg button:hover{color:var(--txt);background:var(--hover)} .seg button.on{background:var(--ac,var(--a-map));color:var(--ink)} /* status pill */ .chip{ display:inline-block;white-space:nowrap;border:1px solid;border-radius:999px; padding:2px 8px;font:700 9px/1.5 var(--mono);letter-spacing:.03em; } .chip.ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 42%,transparent);background:color-mix(in srgb,var(--pos) 11%,transparent)} .chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)} .chip.bad{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 52%,transparent);background:color-mix(in srgb,var(--neg) 13%,transparent)} .chip.mute{color:var(--txt3);border-color:var(--rule2);background:transparent} .chip.info{color:var(--a-assign);border-color:color-mix(in srgb,var(--a-assign) 45%,transparent);background:color-mix(in srgb,var(--a-assign) 11%,transparent)} /* selection bar for bulk edits */ .selbar{ position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:700; display:none;align-items:center;gap:9px;padding:9px 12px; background:var(--pane2);border:1px solid var(--ac,var(--a-map));border-radius:9px; box-shadow:0 12px 34px -12px var(--shadow); } .selbar.on{display:flex} .selbar .n{font:800 11px/1 var(--mono);color:var(--ac,var(--a-map))} .selbar .lb{font:600 10px/1 Inter,sans-serif;color:var(--txt3)} .selbar select{ background:var(--bg2);border:1px solid var(--rule2);border-radius:5px;color:var(--txt); padding:6px 8px;font:500 11px/1 Inter,sans-serif;max-width:190px; } /* row checkbox — square, themed, no native chrome */ .rowck{ appearance:none;width:14px;height:14px;border-radius:3px;cursor:pointer; border:1px solid var(--rule2);background:var(--bg2);display:block;position:relative; } .rowck:hover{border-color:var(--ac,var(--a-map))} .rowck:checked{background:var(--ac,var(--a-map));border-color:transparent} .rowck:checked::after{ content:'✓';position:absolute;inset:0;display:grid;place-items:center; color:var(--ink);font-size:10px;font-weight:800; } .gtable td.ck,.gtable th.ck{width:30px;padding-right:0} .gtable tr.picked td{background:color-mix(in srgb,var(--ac,var(--a-map)) 11%,transparent)} .gtable tr.clickable{cursor:pointer} /* roles list: share-of-permissions bar, so scale reads at a glance */ .permbar{height:5px;border-radius:999px;background:var(--rule2);overflow:hidden} .permbar span{display:block;height:100%;background:var(--ac,var(--a-driv))} /* permissions modal — grouped, described, searchable; built for a growing catalog */ .permgroup{justify-content:space-between;padding-right:5px} .permall{padding:2px 7px;font-size:8.5px} .permrow{align-items:flex-start;padding:7px} .permrow .rowck{margin-top:2px} .permtext{display:flex;flex-direction:column;gap:2px;min-width:0} .permlabel{font-weight:600;font-size:11.5px;line-height:1.3;color:var(--txt)} .permdesc{font-size:10.5px;line-height:1.45;color:var(--txt3);white-space:normal} .permkey{font:500 9px/1 var(--mono);color:var(--txt3);opacity:.6} /* multi-select lists — themed checkbox rows, never a native