/* ===== BASE: style.css ===== */
@media print {
.no-print, .no-print * {
display: none !important;
}
}
.login_style_text{
height:30px;
font-size:16px;
}
.compare_swatch{
cursor: pointer;
}
.selection_button{
cursor: pointer;
border: 1px solid var(--border-strong);
background-color: var(--gray-6);
border-radius: var(--radius-sm);
/*margin:2px;*/
color: var(--text);
padding:5px;
text-decoration: none;
width: 100%;
height:40px;
font-size:16px;
}
.button_style{
display: inline-block;
vertical-align: middle!important;
text-align: center !important;
cursor: pointer;
border: 1px solid var(--border-strong);
background-color: var(--gray-6);
border-radius: var(--radius-sm);
margin:5px;
padding:5px;
text-decoration: none;
color: var(--text);
min-width: 80px;
font-family: var(--font-legacy);
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
color: var(--text);
text-align: left;
white-space: nowrap;
}
.button_style:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.all_menu_button{
cursor: pointer;
border: 1px solid var(--border-strong);
background-color: var(--gray-6);
border-radius: var(--radius-sm);
margin:5px;
color: var(--text);
padding:5px;
text-decoration: none;
width: 300px;
height:40px;
font-size:20px;
}
.all_menu_button_thin{
cursor: pointer;
border: 1px solid var(--border-strong);
background-color: var(--gray-6);
border-radius: var(--radius-sm);
margin:5px;
color: var(--text);
padding:5px;
text-decoration: none;
width: 150px;
height:40px;
font-size:20px;
}
.svg-icon-button {
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
padding: 6px;
border-radius: 50%;
border: 2px solid var(--border-strong);
background-color: var(--gray-6);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.svg-icon-button--white {
border-color: var(--border-strong) !important;
}
.svg-icon-button > svg {
display: block;
}
/* SENTRY play/pause/stop/power icon buttons removed - they were backed by
images/{play,playing,pause,stop,sync,poweron,poweroff}.png and injected by
jquery/validation.js into containers that no page rendered. pages/devices.php
uses the inline-SVG .sentry-ctrl buttons instead. */
.menu_button{
cursor: pointer;
border: 1px solid var(--border-strong);
background-color: var(--gray-6);
border-radius: var(--radius-sm);
margin:5px;
color: var(--text);
padding:5px;
text-decoration: none;
min-width: 200px;
height:40px;
font-size:20px;
}
.headertitletext{
font-family: var(--font-legacy);
font-size: 30px;
font-style: normal;
font-variant: normal;
font-weight: bold;
color: var(--text);
}
.headingtitletext{
font-family: var(--font);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.015em;
color: var(--heading);
}
/* Padding only when used as a .boxed section title row */
tr.boxed-title td.headingtitletext {
padding: 14px 18px 12px;
}
.headingtitletext a:hover:not(.menu_button),.headingtitletext a:active:not(.menu_button),.headingtitletext a:link:not(.menu_button){
font-family: var(--font-legacy);
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: bold;
color: var(--text) !important;
}
.titletext{
font-family: var(--font-legacy);
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: bold;
text-decoration: none;
color: var(--text);
text-align: left;
}
.payment_text,.payment_text_left{
font-family: var(--font-legacy);
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
vertical-align: middle;
color: var(--text);
text-align: center;
}
.payment_text_left{
text-align: left;
}
.maintext{
font-family: var(--font-legacy);
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
color: var(--text);
text-align: left;
white-space: nowrap;
}
.maintext a:hover:not(.menu_button),.maintext a:active:not(.menu_button),.maintext a:link:not(.menu_button){
font-family: var(--font-legacy);
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
color: var(--text);
text-align: left;
white-space: nowrap;
}
.boxed{
background-color: var(--gray-3);
border-radius: var(--radius-sm);
box-shadow: 0 1px 3px 0 var(--gray-5);
/* margin-top: 5px; */
margin-bottom: 5px;
padding: 5px;
transition: all 0.2s linear 0s;
}
/* A card whose title IS the whole message - "No Results Available" and nothing else.
render_boxed_card() omits .card-body entirely in that case and marks the section, so the only
thing to undo is the separator: the border divides the head from content, and with no content
below it there is nothing to divide. The 14px bottom padding STAYS - it is what keeps the title
off the card's edge, and dropping it left the text sitting on the bottom border. */
.boxed.is-head-only > .card-head {
border-bottom: 0;
}
/* .card-title h3 carries margin-bottom:2px to sit above the optional description. With no
description and no body that 2px is the only thing below the text, so it reads as 16px under
against 14px over - just enough to look off-centre. :only-child scopes this to the case where
there is genuinely no
to make room for. */
.boxed.is-head-only > .card-head .card-title h3:only-child {
margin-bottom: 0;
}
#progressbar {
width: 100%;
height: 20px;
position: relative;
background-color: var(--gray-6);
}
#blackprogressmm {
height: 5px;
background-color: black !important;
}
#greenprogressmm {
height: 5px;
background-color: var(--signal-green) !important;
}
#greyprogressmm {
height: 5px;
background-color: var(--gray-6) !important;
}
#amberprogressmm {
height: 5px;
background-color: var(--signal-amber);
}
#redprogressmm {
height: 5px;
background-color: var(--signal-red);
}
.play_state_button,.power_message_type{
display: inline-block;
color: var(--text);
text-align: center;
padding: 3px;
border-width: 2px;
border-color: #dde3e8;
border-style: solid;
float: center;
border-radius: var(--radius-sm);
margin-left: 5px;
font-size: 12px;
}
.play_state_button{ min-width: 90px; }
.power_message_type{ min-width: 65px; }
#percent {
position: absolute;
left: 2px;
top: 1px;
color: var(--text);
}
#greenprogress {
height: 20px;
background-color: var(--signal-green);
}
#amberprogress {
height: 20px;
background-color: var(--signal-amber);
}
#redprogress {
height: 20px;
background-color: var(--signal-red);
}
.userinput {
border: 1px solid #000;
background-color: var(--gray-6);
border-radius: var(--radius-sm);
margin:5px;
color: var(--text);
padding:5px;
text-decoration: none;
width: 400px;
height:50px;
font-size:20px;
}
#logindiv{
opacity: 1 !important;
position: fixed !important;
top: 0px !important;
left: 0px !important;
height: 100% !important;
width: 100% !important;
background: var(--gray-6) !important;
display: block;
z-index: 100;
}
#logindiv img{
padding: 20px;
margin: 20px;
}
#register{
width:auto !important;
margin:20px !important;
background-color: var(--silver);
font-family: 'Arial', serif;
position: fixed !important;
border: 5px solid #000;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
}
#login{
width:auto !important;
margin:20px !important;
background-color: var(--silver);
font-family: 'Arial', serif;
position: fixed !important;
border: 5px solid #000;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
padding: 20px;
}
.graph_button{
cursor: pointer;
border: 1px solid var(--border-strong);
background-color: var(--gray-3);
border-radius: var(--radius-sm);
padding:5px;
text-decoration: none;
color: var(--text);
width: 100%;
height:40px;
font-size:20px;
}
.graph_button:hover {
cursor: pointer;
border: 1px solid var(--border-strong);
background-color: var(--gray-6);
border-radius: var(--radius-sm);
padding:5px;
text-decoration: none;
color: var(--text);
width: 100%;
height:40px;
font-size:20px;
}
.graph_button_on {
cursor: default;
border: 1px solid var(--border-strong);
background-color: var(--gray-6);
border-radius: var(--radius-sm);
padding:5px;
text-decoration: none;
color: var(--text);
width: 100%;
height:40px;
font-size:20px;
}
/* .comments_text / .bookmark_select / .network_select removed - the survey comments,
bookmark, weather and network-filter controls in index.php now use the shared
.field-control wrapper (see FIELD section below) instead of three near-identical
copies of the same eight declarations. */
.network_dropdown {
position: relative;
display: inline-block;
margin: 5px;
}
.network_dropdown_toggle {
min-width: 240px;
text-align: left;
}
.network_dropdown_menu {
display: none;
position: absolute;
left: 0;
top: calc(100% + 6px);
/* --surface, not --gray-3: this is the same role as a native 's option list, which
".field-control select option" below paints with --surface. The two tokens are close in
dark mode (#2a2a2a vs #333) but nowhere near it in light (#ffffff vs #dde2e7). */
background-color: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 6px;
min-width: 260px;
max-height: 300px;
overflow-y: auto;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
z-index: 10000;
}
.network_dropdown.open .network_dropdown_menu {
display: block;
}
/* The menu is position:absolute, so it gets clipped by the nearest ancestor whose overflow is
not visible - and .boxed sets overflow:hidden to keep content inside its 14px corners. Opt
out only for cards that actually contain one of these dropdowns (survey_list.php's Filters
card; edit_device.php's SENTRY Configuration card for the #steering PLMN picker, which reuses
.network_dropdown_menu directly without the .network_dropdown toggle wrapper); nothing in such
a card reaches the rounded corners, so there is nothing left to clip. index.php's Operators
filter never hit this because it sits in the map header, outside any card. */
.boxed:has(.network_dropdown, .network_dropdown_menu) {
overflow: visible;
}
/* Same opt-out for the results page's Device card when it carries the previous-software pill, whose
hover card hangs out of the card. */
.boxed:has(.previous-sw-pill) {
overflow: visible;
}
/* Survey Schedules quick-assign dropdown (render_schedules_mgmt_row(), includes/functions.php) -
the same .network_dropdown/.network_dropdown_menu/.network_dropdown_item widget as the Operators
filter above, just stretched to fill its slot in the .input-group next to the Assign button
instead of that widget's own standalone inline-block/margin sizing. */
.input-group .network_dropdown.schedule-dropdown { flex: 1 1 auto; min-width: 0; margin: 0; }
.schedule-dropdown-toggle { width: 100%; }
/* .input-group > *:not(:last-child) (INPUT GROUP section below) chamfers the right corners of
its own direct children - but the toggle isn't one, it's nested a level down inside the
.schedule-dropdown wrapper, so that rule never reaches it and it kept its full 9px radius
against the Assign button. Zeroed here directly instead of restructuring the wrapper out. */
.input-group .schedule-dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* .row-action-btn (the base class this button also carries) sets background:transparent, which
left the closed toggle showing whatever's behind it (the .mgmt-row's own faint tint) instead
of a solid surface - same var(--surface) the open .network_dropdown_menu below it uses, so the
closed and open states read as one continuous control in both light and dark mode. Specificity
bumped past .row-action-btn on purpose, not relying on source order. */
button.schedule-dropdown-toggle { background: var(--surface); }
/* .field-control select is 600 weight (see FIELD section below) - match it exactly rather than
the 700 .row-action-btn .row-action-label normally uses, so the toggle reads like the plain
select it replaces instead of a bolder CTA button. Specificity bumped past that rule on
purpose, not relying on source order. */
button.schedule-dropdown-toggle .schedule-dropdown-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-dropdown-toggle .mdi-chevron-down { flex: 0 0 auto; color: var(--text-secondary); transition: transform .15s ease; }
.schedule-dropdown.open .schedule-dropdown-toggle .mdi-chevron-down { transform: rotate(180deg); }
/* .network_dropdown_item above was written for a (the Operators filter's checkboxes),
which carries no UA chrome by default - used as a here (Create/Manage nav rows +
schedule options), it needs its own reset or Chrome's native button face (grey, shrink-to-content)
shows through instead of a flat, full-width row. */
button.network_dropdown_item { width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; }
/* Matches .field-control select / .network_dropdown_toggle - without these the items fall back
to the page default and the menu reads in a different font to the native menus and
to this widget's own toggle button. .network_dropdown_group still overrides to bold below,
so operator group headings keep standing out from their PLMN children in index.php. */
.network_dropdown_item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
color: var(--text);
font-size: 14px;
font-weight: 600;
}
.network_dropdown_item:hover {
background-color: var(--gray-4);
}
.network_dropdown_item input {
margin: 0;
}
.network_dropdown_group {
font-weight: bold;
/* border-bottom: 1px solid var(--gray-5);
margin-bottom: 4px;
padding-bottom: 6px; */
}
.filter_select {
border: 1px solid var(--border-strong);
background-color: var(--gray-3);
border-radius: var(--radius-sm);
padding:5px;
margin:5px;
text-decoration: none;
color: var(--text);
width: 100%;
height:30px;
font-size:14px;
}
.filter_button {
border: 1px solid var(--border-strong);
background-color: var(--gray-3);
border-radius: var(--radius-sm);
padding:5px;
margin:5px;
text-decoration: none;
color: var(--text);
width: 200px;
height:30px;
font-size:14px;
cursor: pointer;
}
.helptip, .helptipleft {
position: relative;
display: inline-block;
cursor: help;
vertical-align: top;
}
.helptip .helptiptext,
.helptipleft .helptiplefttext {
position: absolute;
visibility: hidden;
min-width: 250px;
background:
radial-gradient(circle at 20% 15%, rgba(var(--brand-rgb),.14), transparent 60%),
var(--surface);
color: var(--text);
border: 1px solid rgba(var(--accent-soft-rgb),.28);
border-radius: 12px;
padding: 12px 14px;
z-index: 100000;
top: 50%;
opacity: 0;
font-size: 14px;
line-height: 1.4;
box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(var(--ink-rgb),.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: opacity .15s ease, visibility .15s ease;
}
.helptip .helptiptext { text-align: left; margin-left: 14px; transform: translate(0%, -50%); }
.helptipleft .helptiplefttext { text-align: right; right: 100%; margin-right: 14px; transform: translate(0%, -50%); }
.helptiptext::after, .helptiplefttext::after {
content: "";
position: absolute;
top: 50%;
width: 0;
height: 0;
border: solid transparent;
pointer-events: none;
}
.helptip .helptiptext::after {
right: 100%;
border-width: 9px;
border-right-color: var(--surface);
margin-top: -9px;
}
.helptipleft .helptiplefttext::after {
left: 100%;
border-width: 9px;
border-left-color: var(--surface);
margin-top: -9px;
}
.helptiptext, .helptiplefttext {
min-height: 44px;
min-width: 200px;
cursor: default;
}
/* hover only where there is a real hover - a phone's sticky emulated :hover would hold a bubble open after
it is closed. Touch opens these with .is-tip-open instead (tap handling in jquery/summary-charts.js). */
@media (hover: hover) {
.helptip:hover .helptiptext,
.helptipleft:hover .helptiplefttext {
visibility: visible;
opacity: 1;
}
}
.helptip.is-tip-open .helptiptext,
.helptipleft.is-tip-open .helptiplefttext {
visibility: visible;
opacity: 1;
}
.helptipdown {
position: relative;
display: inline-block;
cursor: help;
vertical-align: top;
}
.helptipdown .helptipdowntext {
position: absolute;
visibility: hidden;
min-width: 250px;
background:
radial-gradient(circle at 20% 15%, rgba(var(--brand-rgb),.14), transparent 60%),
var(--surface);
color: var(--text);
border: 1px solid rgba(var(--accent-soft-rgb),.28);
border-radius: 12px;
padding: 12px 14px;
z-index: 100000;
right: 0;
top: 100%;
margin-top: 14px;
opacity: 0;
font-size: 14px;
line-height: 1.4;
text-align: left;
box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(var(--ink-rgb),.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: opacity .15s ease, visibility .15s ease;
min-height: 44px;
cursor: default;
}
.helptipdown .helptipdowntext::after {
content: "";
position: absolute;
bottom: 100%;
right: 20px;
width: 0;
height: 0;
border: solid transparent;
border-width: 9px;
border-bottom-color: var(--surface);
margin-right: -9px;
pointer-events: none;
}
@media (hover: hover) {
.helptipdown:hover .helptipdowntext {
visibility: visible;
opacity: 1;
}
}
.helptipdown.is-tip-open .helptipdowntext {
visibility: visible;
opacity: 1;
}
/* Opens above the trigger instead - for triggers that always sit at the foot of the page (the
results page's Device card), where a card opening downward runs off the bottom of the screen. */
.helptipdown .helptipdowntext--up { top: auto; bottom: 100%; margin: 0 0 14px; }
.helptipdown .helptipdowntext--up::after { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--surface); }
*,*:before,*:after{
box-sizing:border-box;
outline:none;
font-family: var(--font-legacy);
}
.switch{
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
user-select:none;
}
.switch:has(.switch-input:disabled){
cursor:not-allowed;
opacity:.5;
}
.switch-input{
position:absolute;
width:0;
height:0;
opacity:0;
border:none;
outline:none;
}
.switch-thumb{
position:relative;
order:1;
flex:0 0 auto;
width:44px;
height:24px;
border:1px solid var(--border-strong);
border-radius:var(--radius-pill);
background:var(--gray-6);
transition:background-color .2s ease, border-color .2s ease;
}
.switch-thumb::before{
content:'';
position:absolute;
top:50%;
left:3px;
width:16px;
height:16px;
border-radius:50%;
background:#fff;
box-shadow:0 2px 4px rgba(0,0,0,.3);
transform:translateY(-50%);
transition:transform .2s ease;
}
.switch-input:checked + .switch-thumb{
background:var(--signal-green);
border-color:var(--signal-green);
}
.switch-input:checked + .switch-thumb::before{
transform:translate(20px, -50%);
}
.switch-input:focus-visible + .switch-thumb{
outline:2px solid var(--accent);
outline-offset:2px;
}
.switch-state{
order:0;
min-width:26px;
font-size:11px;
font-weight:800;
line-height:1;
letter-spacing:.02em;
text-transform:uppercase;
color:var(--text-secondary);
white-space:nowrap;
}
.switch-state::before{ content:attr(data-off); }
.switch-input:checked ~ .switch-state::before{ content:attr(data-on); }
.switch-r .switch-thumb{ order:0; }
.switch-r .switch-state{ order:1; }
.switch--compact .switch-state{ display:none; }
/* tech-matrix column-toggle: some rows on, some off */
.switch-input:indeterminate ~ .switch-state::before{ content:"Mix"; }
.toggle-group{ display:flex; flex-wrap:nowrap; gap:8px; }
.toggle-group input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.toggle-group label{ cursor:pointer; white-space:nowrap; }
.toggle-group label.button-dark{
background: transparent;
border-color: var(--border);
color: var(--text);
box-shadow: none;
backdrop-filter: none;
}
.toggle-group label.button-dark:hover{
background: rgba(var(--ink-rgb),.06);
border-color: var(--border);
color: var(--text);
}
.toggle-group input:checked + label{
background: linear-gradient(#0aa2e6, #0879c6);
border-color: #0789cf;
color: var(--text-on-accent);
}
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--signal-red);
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--signal-green);
}
body > .skiptranslate:first-child {
display: none;
}
body {
top: 0px !important;
}
.goog-te-gadget-simple {
display: inline-flex !important;
align-items: center;
border: 1px solid var(--border);
background-color: var(--surface) !important;
border-radius: 9px;
padding: 0 10px !important;
margin: 0;
text-decoration: none;
color: var(--text);
width: 200px;
height: 38px;
box-sizing: border-box;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.VIpgJd-ZVi9od-xl07Ob-lTBxed span {
color: var(--text) !important;
}
.VIpgJd-ZVi9od-vH1Gmf {
background-color: var(--gray-3) !important;
color: var(--text) !important;
}
.gm-style-iw, .poi-info-window > * {
min-width: 250px !important;
/* not --ink-rgb: that triplet flips to near-black under .light-mode, which turned the
infowindow into a black panel with #111 text. This panel stays light in both themes. */
background-color: rgba(255,255,255,0.9) !important;
padding: 12px !important;
color: #111;
}
/* Map marker tooltips (a render_hover_card() card as the InfoWindow's whole content, from
index.php's marker builders / jquery/mapping_helpers.js's renderHoverCard() twin): strip the fixed
light panel above so it doesn't double up with the card's own panel below, same "wrapper drops its
own inset" convention .floating-chart-tip:has(.hover-card) already uses for the button tooltips. */
.gm-style-iw:has(.hover-card), .poi-info-window > *:has(.hover-card) {
background-color: transparent !important;
padding: 0 !important;
color: inherit;
}
/* .hover-card itself has no background/color of its own - every other place it appears
(.helptipdowntext, .plan-grid's cards) supplies that via its own wrapper. The InfoWindow gives it
none, so without this it rendered as bare text floating over the map (see the map screenshot this
fixed). Same recipe .helptipdowntext/.floating-chart-tip already use, so it matches every other
hover-card in the app rather than a one-off white. */
.gm-style-iw:has(.hover-card) .hover-card, .map-card-sheet .hover-card {
width: 380px;
max-width: min(420px, calc(100vw - 32px));
background: radial-gradient(circle at 20% 15%, rgba(var(--brand-rgb),.14), transparent 60%), var(--surface);
color: var(--text);
border: 1px solid rgba(var(--accent-soft-rgb),.28);
box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.gm-style-iw-d {
overflow: unset !important;
}
/* Google sizes .gm-style with absolute insets, so size containment doesn't change its size. This
just gives the InfoWindow cqh units to read the map's height (see .hover-card-body--split). */
.gm-style { container-type: size; }
/* Google auto-caps the InfoWindow's height to whatever fits between the marker and the map's edge,
scrolling .gm-style-iw-d internally when content doesn't fit - the rule above strips that globally,
fine for the old flat font-tag content (never tall enough to hit the cap), but a hover-card (the
"S" marker's can genuinely run past a full screen with a long "Cells Located" list) now does. Without
this, Google still caps the height, just with nothing left to scroll it - the excess renders past
the cap's edge instead (the map screenshot this fixed). Restore normal scrolling for this case only. */
.gm-style-iw:has(.hover-card) .gm-style-iw-d {
overflow: auto !important;
}
.gm-style-iw-ch {
padding: 0;
}
.gm-style-iw-chr button.gm-ui-hover-effect {
position: absolute !important;
top: 0;
right: 0;
}
/* A map card on a phone: jquery/mapping_helpers.js bindMapCardSheet() opens it here instead of in the
InfoWindow, which can't outgrow the map. MySCAN's dot card (dots/css/style.css) is the pattern:
12px in from every edge, z-index under .modal's 5000 so confirm boxes still land on top. The sheet
scrolls; a hover-card fills it and takes its look from the shared rule above. Plain (non-card)
content gets the sheet's own panel. The JS also sets its width/height to the real screen size,
since a page wider than the phone stretches these insets past the screen edge. */
.map-card-sheet {
position: fixed; inset: 12px; z-index: 4500; overflow: auto; overscroll-behavior: contain;
padding: 12px; border-radius: 12px; background: var(--surface); color: var(--text);
box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.map-card-sheet[hidden] { display: none; }
.map-card-sheet:has(.hover-card) { padding: 0; background: transparent; box-shadow: none; }
.map-card-sheet-body { min-height: 100%; display: flex; flex-direction: column; }
.map-card-sheet .hover-card { flex: 1 0 auto; width: auto; max-width: none; box-sizing: border-box; }
.map-card-sheet-close {
position: sticky; top: 0; float: right; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%;
background: rgba(var(--ink-rgb),.08); color: var(--text); font-size: 18px; cursor: pointer;
}
/* a render_hover_card() card brings its own close button */
.map-card-sheet:has(.hover-card-close) .map-card-sheet-close { display: none; }
td[th-hidden] {
/* width: 0%;*/
display: none;
}
td[td-toggle][td-visibility="false"] span {
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.menuicon-btn {
display: none !important;
}
#nav-row .mobile-only {
display: none;
}
/* Always out of flow (position only - it's a 0x0 box until .nav-back sizes it): an empty static
#nav-back is still a .portal-nav flex item and costs a 14px gap, so it going fixed on open freed
that gap and reflowed the header from two rows to one. */
#nav-back { position: fixed; }
.nav-back {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 2;
}
@media only screen and (max-width: 1800px) {
.menuicon-btn {
display: inline-flex !important;
flex-direction: column;
gap: 4px !important;
}
.menuicon-btn div {
width: 16px;
height: 2px;
background-color: var(--accent-soft);
border-radius: 2px;
}
#nav-row { display: none; }
.responsive {
display: flex !important;
flex-direction: column;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 6px;
margin: 0 !important;
position: fixed;
right: 0;
top: 0;
z-index: 3;
width: 240px;
padding: 52px 12px 20px;
height: 100vh;
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
background:
radial-gradient(circle at 20% 20%, rgba(var(--brand-rgb),0.12), transparent 50%),
var(--surface);
border-left: 1px solid rgba(var(--accent-soft-rgb),0.18);
box-shadow: -8px 0 32px rgba(0,0,0,0.45);
transition: transform 0.25s ease;
}
#nav-row.responsive .mobile-only { display: flex !important; }
.responsive a { display: block; text-decoration: none; }
.responsive > button,
.responsive a > button {
display: flex !important;
align-items: center !important;
width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
margin: 0 !important;
}
#nav-row.responsive .mobile-drawer-footer {
position: sticky;
bottom: 0;
margin-top: auto;
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
border-top: 2px solid rgba(var(--accent-soft-rgb),0.35);
background: var(--surface);
}
#nav-row.responsive .all_menu_button_thin,
#nav-row.responsive .tablinks,
#nav-row.responsive .nav-tab,
#nav-row.responsive .headingtitletext {
color: var(--text) !important;
}
/* stacked, so every chip stretches to the footer's width and they all match */
#nav-row.responsive .drawer-chip-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
}
#nav-row.responsive .drawer-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: rgba(var(--ink-rgb),0.08);
border: 1px solid rgba(var(--ink-rgb),0.14);
color: var(--text-secondary) !important;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
}
#nav-row.responsive .drawer-chip .mdi {
font-size: 0.9rem;
}
#nav-row.responsive a.drawer-chip--action {
background: rgba(var(--accent-rgb),0.14);
border-color: rgba(var(--accent-rgb),0.3);
color: var(--accent) !important;
cursor: pointer;
}
}
/* Dynamic Modal */
.modal_content { width: 30vw; }
.modal_content.box-small { width: 30vw; }
.modal_content.box-medium { width: 55vw; }
.modal_content.box-large { width: 80vw; }
.stars { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 40px; line-height: 45px; user-select: none; margin-bottom: 14px; }
.star { cursor: pointer; color: var(--accent); }
.modal { display: none; position: fixed; z-index: 5000; left: 0; top: 0; width: 100%; height: 100%; overflow: none; background-color: rgba(0,0,0,0.4); }
.modal_content {
color: var(--text-on-accent);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 20px;
height: auto;
border-radius: 14px;
z-index: 5001;
background:
radial-gradient(circle at 20% 20%, rgba(var(--brand-rgb),0.18), transparent 50%),
linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(var(--accent-soft-rgb),0.18);
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
span.close { color: var(--text-on-accent); float: right; font-size: 28px; font-weight: bold; }
span.close:hover,
span.close:focus { color: #aaa; text-decoration: none; cursor: pointer; }
/* Card-as-modal variant - for a modal whose content is a single render_boxed_card() (the
feedback modal below), the card supplies its own border/radius/shadow, so modal_content's
usual glass-panel chrome would just double it up as a second, misaligned outline around it.
Strip modal_content down to sizing/centering only and let the card be the visible modal.
openModal() always rewrites modal_content's class list to "modal_content " on
every open, so this only ever applies when the caller adds it back straight after. */
.modal_content.is-card-modal {
padding: 0;
background: none;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* The blank spacer row (createModalElement()'s "
") - not #modalHTML,
which also carries class="row" but holds the actual card and must stay. */
.modal_content.is-card-modal > .row:not(#modalHTML) { display: none; }
.modal_content.is-card-modal .boxed { margin-bottom: 0; }
.modal_content.is-card-modal > .close {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
float: none;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255,255,255,.14);
color: #fff;
font-size: 22px;
font-weight: normal;
transition: background .15s ease;
}
.modal_content.is-card-modal > .close:hover { background: rgba(255,255,255,.26); color: #fff; }
/* CreateBoxType() Ok/Cancel row: the sitewide .menu_button min-width:200px pushed two buttons
past a phone-width modal; they share the row while they fit and stack once they don't. */
.modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.modal-actions .menu_button { flex: 1 1 140px; min-width: 0; margin: 0; }
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.modal_content.box-small { width: calc(100vw - 24px); }
.modal_content.box-medium { width: calc(100vw - 24px); }
.modal_content.box-large { width: calc(100vw - 24px); }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
.modal_content.box-small { width: 75vw; }
.modal_content.box-medium { width: 85vw; }
.modal_content.box-large { width: 95vw; }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
.modal_content.box-small { width: 55vw; }
.modal_content.box-medium { width: 75vw; }
.modal_content.box-large { width: 85vw; }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1400px) {
.modal_content.box-small { width: 45vw; }
.modal_content.box-medium { width: 65vw; }
.modal_content.box-large { width: 75vw; }
}
/* 1400px+ needs no override: matches the unqualified base rule above (30/55/80vw). */
table.heatmap-table { width: 100%; color: var(--text); min-height: 400px; border-collapse: separate; border-spacing: 0; margin-bottom: 14px; }
table.heatmap-table th, table.heatmap-table td { padding: 8px; text-align: center; }
table.heatmap-table th, table.heatmap-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
table.heatmap-table tbody tr:last-child td { border-bottom: none; }
table.heatmap-table th:last-child, table.heatmap-table td:last-child { border-right: none; }
/* cell text is inline color:#fff from generateHeatmapTable() - readable on the dark theme's mostly-dark
composited backgrounds, but low-intensity cells go near-white in light mode and swallow white text */
body.light-mode table.heatmap-table td { color: #16233b !important; }
/* margin:0 auto here was always a no-op (no width/max-width was ever set, so auto margins had
nothing to centre) until .journey-summary-card started sharing .summary-graph-grid's
> .boxed > .card-body{display:flex;flex-direction:column} rule (below, written for the chart
cards' own height-matching) - as a flex item, auto margins absorb free space and win over
align-items:stretch, so .journey-wrapper shrank to whatever width its content (e.g. the
currently-displayed address string) happened to need instead of filling the row - reported as
the whole Journey Summary card visibly resizing as journey_timeline.js updated address text
mid-drag. Plain margin:0 lets it stretch to fill .card-body's width like every other card. */
.journey-wrapper { position: relative; margin: 0; }
/* Circle - bar - circle is ONE flex row (see .journey-grid) so they always touch, at any
container width, with no manual px/% math to keep in sync - the bar is just flex:1, filling
exactly whatever space is left between the two fixed-size circles. Green->amber gradient
(same colours as the circles) blends straight into them, and the pill radius means the bar
itself has no square corners butting into a round circle either. */
.journey-wrapper .journey-line { flex: 1 1 auto; min-width: 40px; height: 30px; background: linear-gradient(90deg, var(--signal-green), var(--signal-amber)); border-radius: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.35); text-shadow: 0 1px 3px rgba(0,0,0,.45); border-top: 2px dashed var(--border-strong); border-bottom: 2px dashed var(--border-strong); color: var(--text); text-align: center; line-height: 26px; box-sizing: border-box; }
.journey-wrapper .journey-grid { display: flex; align-items: center; position: relative; }
.endpoint-slot { flex: 0 0 auto; }
.journey-wrapper .endpoints { font-size: 30px; width: 100px; height: 100px; background-color: var(--gray-6); border-radius: 50%; color: var(--text); font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border-strong); }
/* weather glyph inside the endpoint circle - font-size, not width, since the PNGs became MDI */
.journey-wrapper .endpoints .mdi { font-size: 58px; line-height: 1; }
.journey-wrapper .endpoints.start { background-color: var(--signal-green); }
.journey-wrapper .endpoints.end { background-color: var(--signal-amber); }
/* Fixed equal thirds + stretch: the old auto/1fr/auto columns sized each box to its own content,
so a longer wrapped address made that box both wider and taller than its neighbours. */
.journey-wrapper .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; justify-items: stretch; gap: 16px; margin-top: 20px; }
/* Same glass-panel treatment as .boxed/.boxed-alt (render_boxed_card()) instead of a flat grey
box, so these match the rest of the app's card look. */
.journey-wrapper .info,
.journey-wrapper .middle-info { background: var(--surface-hover); border: 1px solid rgba(var(--ink-rgb),.09); box-shadow: inset 0 1px 0 rgba(var(--ink-rgb),.06), 0 6px 22px rgba(0,0,0,.28); border-radius: 10px; padding: 14px; font-size: 14px; color: var(--text); width: 100%; box-sizing: border-box; }
.journey-wrapper .info { text-align: left; }
.journey-wrapper .middle-info { text-align: center; }
@media (max-width: 900px) {
.journey-wrapper .info-grid { grid-template-columns: 1fr; gap: 12px; }
.journey-wrapper .middle-info { order: -1; }
}
@media (max-width: 600px) {
.journey-wrapper .endpoints { width: 60px; height: 60px; font-size: 20px; }
.journey-wrapper .endpoints .mdi { font-size: 34px; }
}
/* Interactive Journey Summary timeline (behind $journey_sliding_bool in index.php) - recreated
from a reference mockup, restyled with this app's own tokens. .timeline-area is the flex child
that sits between the two .endpoints circles when the slider is on, replacing .journey-line's
role above (same flex:1, same slot in .journey-grid) - ported from _sandbox_journey_timeline/. */
.journey-wrapper .timeline-area { flex: 1 1 auto; min-width: 0; padding: 0 8px; }
.selected-label { text-align: center; color: var(--accent); font-size: 13px; font-weight: 800; margin-top: 6px; }
.distance-line { text-align: center; font-size: 16px; font-weight: 800; margin-top: 5px; color: var(--text); }
.time-line { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; margin-top: 8px; }
.slider-shell { position: relative; height: 84px; margin-top: 3px; }
.track { position: absolute; left: 16px; right: 16px; top: 31px; height: 8px; border-radius: 999px; background: var(--gray-6); opacity: .75; }
/* the highlighted selection - also the click-and-hold target that pans both handles together */
.selected-track {
position: absolute; top: 31px; height: 8px; border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 18px rgba(var(--accent-rgb),.4);
z-index: 2; pointer-events: auto; cursor: grab; touch-action: none;
}
.selected-track:active { cursor: grabbing; }
.marker-row { position: absolute; left: 16px; right: 16px; top: 27px; display: flex; justify-content: space-between; pointer-events: none; z-index: 1; }
.marker-row span { width: 14px; height: 14px; border-radius: 50%; background: var(--border-strong); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),.05); }
.marker-row span.active { background: var(--accent); box-shadow: 0 0 11px rgba(var(--accent-rgb),.8); }
/* two overlaid native range inputs - pointer-events:none on the body lets clicks fall through to
.selected-track underneath; only the round thumb (cursor:ew-resize) is clickable, same
"auto on the interactive part only" pattern as .selected-track above. */
.range-input { position: absolute; left: 16px; top: 20px; width: calc(100% - 32px); height: 30px; margin: 0; pointer-events: none; background: transparent; appearance: none; z-index: 5; }
.range-input::-webkit-slider-runnable-track { height: 8px; background: transparent; }
.range-input::-moz-range-track { height: 8px; background: transparent; }
.range-input::-webkit-slider-thumb {
appearance: none; width: 28px; height: 28px; border-radius: 50%;
background: var(--surface); border: 4px solid var(--accent);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18), 0 3px 12px rgba(0,0,0,.45);
cursor: ew-resize; pointer-events: auto;
/* WebKit doesn't auto-centre the thumb on the (8px-tall) track like Firefox does - without
this it sits flush with the track's top edge instead of straddling its centre. */
margin-top: -10px;
}
.range-input::-moz-range-thumb {
width: 28px; height: 28px; border-radius: 50%;
background: var(--surface); border: 4px solid var(--accent);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18), 0 3px 12px rgba(0,0,0,.45);
cursor: ew-resize; pointer-events: auto;
}
@media (pointer: coarse) {
.range-input::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -16px; }
.range-input::-moz-range-thumb { width: 40px; height: 40px; }
}
.slider-meta { display: flex; justify-content: space-between; gap: 24px; margin-top: 4px; font-size: 13px; color: var(--text); font-weight: 700; }
.slider-meta > div { width: 46%; text-align: center; }
.slider-meta small { display: block; color: var(--text-muted); font-weight: 600; margin-top: 3px; white-space: normal; }
/* Account > Settings "Signal Quality Thresholds" - the slider above with a red | amber | green track.
--lvl-fair / --lvl-good are plain 0-100 numbers set inline and kept in sync by account.php's
script; named lvl- because --good is already the colour token. */
/* the light theme darkens these for text contrast; here they're only fills (track, thumbs, band
dots), so keep the bright shades in both themes */
.signal-levels { --good: #22c55e; --ok: #f59e0b; --poor: #ef4444; }
.signal-levels .slider-shell { height: 40px; margin-top: 0; }
.signal-levels .range-input { top: 5px; }
/* the thumb centre travels from 16px + half the thumb to the same from the right, so inset the
track by that much - then the band edges land exactly under the thumbs */
.signal-levels .track {
--thumb-half: 14px;
left: calc(16px + var(--thumb-half)); right: calc(16px + var(--thumb-half)); top: 16px; opacity: 1;
background: linear-gradient(90deg,
var(--poor) calc(var(--lvl-fair) * 1%),
var(--ok) calc(var(--lvl-fair) * 1%) calc(var(--lvl-good) * 1%),
var(--good) calc(var(--lvl-good) * 1%));
}
@media (pointer: coarse) {
.signal-levels .slider-shell { height: 52px; }
.signal-levels .range-input { top: 11px; }
.signal-levels .track { --thumb-half: 20px; top: 22px; }
}
/* thumbs take their band colour instead of the accent */
.signal-levels .range-input::-webkit-slider-thumb { box-shadow: 0 3px 12px rgba(0,0,0,.45); }
.signal-levels .range-input::-moz-range-thumb { box-shadow: 0 3px 12px rgba(0,0,0,.45); }
.signal-levels .range-input[data-level="fair"]::-webkit-slider-thumb { border-color: var(--ok); }
.signal-levels .range-input[data-level="fair"]::-moz-range-thumb { border-color: var(--ok); }
.signal-levels .range-input[data-level="good"]::-webkit-slider-thumb { border-color: var(--good); }
.signal-levels .range-input[data-level="good"]::-moz-range-thumb { border-color: var(--good); }
/* whichever handle was last grabbed sits on top */
.signal-levels .range-input.is-top { z-index: 6; }
.signal-levels-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 0 16px; }
.signal-band { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
/* inline-flex above would otherwise beat the [hidden] the script sets at fair 0 */
.signal-band[hidden] { display: none; }
.signal-band::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.signal-band.poor::before { background: var(--poor); }
.signal-band.ok::before { background: var(--ok); }
.signal-band.good::before { background: var(--good); }
.signal-band b { color: var(--text); }
.signal-band .field-control input { width: 64px; flex: none; padding: 0 4px 0 10px; }
.signal-levels-reset { height: 36px; padding: 0 12px; gap: 6px; cursor: pointer; color: var(--text-secondary); font: 600 13px var(--font); }
/* "Separate thresholds per technology": the combined slider above plus one row per technology.
Everything that changes with that toggle is CSS-only, off .signal-levels-group:has(...:checked). */
/* combined slider, per-tech off: full width with a small caps caption over it */
.signal-levels-caption { display: block; padding: 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.signal-levels-caption .when-on,
.signal-levels--combined .signal-levels-unit,
.signal-levels-hint,
.signal-levels-tech { display: none; }
/* what Combined is still for once each technology has its own bands - full width along the bottom
of the combined row's bubble */
.signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels-hint { display: block; grid-column: 1 / -1; margin: 8px 0 0; padding: 0 16px; font-size: 12px; color: var(--text-secondary); }
/* per-tech on: caption swaps, the technology rows show, the Poor label goes (rows don't have one) */
.signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels-caption { padding: 0; letter-spacing: 0; text-transform: none; }
.signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels-caption .when-off,
.signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined .signal-band.poor { display: none; }
.signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels-caption .when-on { display: flex; }
.signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined .signal-levels-unit { display: block; }
.signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels-tech { display: grid; gap: 12px; }
.signal-levels--combined .tech-dot { background: var(--text-secondary); }
/* one row per technology - and the combined slider too when per-tech is on - name with its readout
under it | slider | Fair / Good */
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) {
display: grid; grid-template-columns: 144px minmax(140px, 1fr) auto; align-items: center; column-gap: 10px;
grid-template-areas: "name slider inputs" "unit slider inputs";
}
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) :is(.technology-name, .signal-levels-caption) {
grid-area: name; align-self: end; padding-left: 16px;
}
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) .slider-shell { grid-area: slider; }
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) .signal-levels-inputs {
grid-area: inputs; padding: 0 16px 0 0; flex-wrap: nowrap; gap: 10px;
}
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) .signal-band { white-space: nowrap; }
/* the combined slider and each technology row are their own bubbles, same look as the account
.detail-rows (search "same look as the device drawer's") - the per-tech toggle above them is one of
those detail rows. Sliders and inputs already carry their own 16px side inset, so these bubbles
only pad top and bottom. */
.signal-levels-group { display: grid; gap: 12px; }
:is(.signal-levels--combined, .signal-levels--row) { padding: 12px 0; border: 1px solid rgba(var(--ink-rgb),.08); border-radius: 12px; background: rgba(var(--ink-rgb),.03); }
@media (min-width: 1100px) {
:is(.signal-levels--combined, .signal-levels--row) { padding: 16px 0; }
}
/* no display here - the combined row's name is shown/hidden by the toggle rules above */
.signal-levels-group .technology-name { align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.signal-levels--row .technology-name { display: flex; }
.signal-levels-unit { grid-area: unit; align-self: start; padding: 0 16px; font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.signal-levels-unit b { color: var(--text); }
/* up to 1600px the Site defaults card is too narrow for name | slider | inputs on one line: name +
readout on one line, then the slider and the inputs full width under it */
@media (max-width: 1600px) {
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) {
grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name unit" "slider slider" "inputs inputs";
}
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) :is(.technology-name, .signal-levels-caption, .signal-levels-unit) { align-self: center; }
/* wrap is the fallback for the narrowest phones - the 480px input trim below keeps one line down to ~380px */
:is(.signal-levels--row, .signal-levels-group:has(input[name="signal_levels_per_tech"]:checked) .signal-levels--combined) .signal-levels-inputs { padding: 0 16px; flex-wrap: wrap; }
}
@media (max-width: 480px) {
.signal-band .field-control input { width: 48px; padding: 0 2px 0 8px; }
}
@media (max-width: 900px) {
.journey-wrapper .journey-grid { flex-wrap: wrap; }
.journey-wrapper .timeline-area { flex: 1 1 100%; order: -1; padding: 0; }
}
/* brief dim while journey_graphs_ajax_response()'s fetch() is in flight */
.is-refreshing > .card-body { opacity: .45; transition: opacity .15s ease; }
.svg-gauge { display: block; width: 100%; height: 100%; overflow: initial; }
.svg-gauge .needle { /*stroke: #4285f4; stroke-width: 6; stroke-linecap: round;*/ }
.svg-gauge .needle-base { /*fill: #4285f4;*/ }
.svg-gauge .marker { /*stroke-width: 10;*/ }
.svg-gauge .label { font-size: 20px; fill: var(--text); line-height: 20px; }
.svg-gauge .tick-label { font-size: 12px; fill: var(--text); line-height: 12px; }
.recommended-highlight-item { text-align: center; }
.recommended-highlight-circle { background: linear-gradient(135deg, #f39c12, #e67e22); color: var(--text-on-accent); font-weight: normal; font-size: 1rem; border-radius: 50%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 10px solid white; text-align: center; overflow: hidden; width: var(--size, 400px); height: var(--size, 400px); padding: calc(var(--size, 400px) / 2); }
.recommended-highlight-circle .recommended-highlight-title { user-select: none; font-size: calc(var(--size, 400px) / 22.22) /*1.1rem*/; margin-bottom: 0.3rem; opacity: 0.9; white-space: nowrap; }
.recommended-highlight-circle .recommended-highlight-name { user-select: none; font-size: calc(var(--size, 400px) / 5) /*80px*/; font-weight: bold; margin-bottom: 0.3rem; white-space: nowrap; }
.recommended-highlight-circle .recommended-highlight-desc { user-select: none; font-size: calc(var(--size, 400px) / 22.22) /*1.1rem*/; opacity: 0.85; line-height: 1.2; white-space: nowrap; }
.recommended-highlight-circle.recommended_antenna::after {
content: 'recommended';
top: 21%;
right: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: calc(var(--size, 400px) / 11);
opacity: 0.5;
text-transform: uppercase;
}
.recommended-highlight-rect { background: linear-gradient(135deg, #f39c12, #e67e22); color: var(--text-on-accent); font-weight: normal; font-size: 1rem; border-radius: 60px; width: 450px; height: 200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; /*padding: 200px;*/ /*box-shadow: 0 0 1px 10px white;*/ border: 10px solid white; text-align: center; overflow: hidden; }
.recommended-highlight-rect .recommended-highlight-title { user-select: none; font-size: 1.1rem; margin-bottom: 0.3rem; opacity: 0.9; white-space: nowrap; }
.recommended-highlight-rect .recommended-highlight-name { user-select: none; font-size: 80px; font-weight: bold; margin-bottom: 0.3rem; white-space: nowrap; }
.recommended-highlight-rect .recommended-highlight-desc { user-select: none; font-size: 1.1rem; opacity: 0.85; line-height: 1.2; white-space: nowrap; }
button.tablinks { white-space: nowrap; }
div.tab_list button:not(.active) { opacity: 0.5; }
tr.tabcontent { display: none; }
tr.tabcontent { animation: tabContentFadeEffect 1s; }
tr.tabcontent:not(.active) {
height: 0px;
width: 100%;
overflow: hidden;
/*display: inline-block;*/
display: block;
visibility: hidden;
}
tr.tabcontent.active {
height: auto;
overflow: auto;
visibility: visible;
}
/* panels sharing one tr.tabcontent (account.php settings) */
div.tabcontent:not(.active) { display: none; }
div.tabcontent { animation: tabContentFadeEffect 1s; }
@keyframes tabContentFadeEffect { from {opacity: 0;} to {opacity: 1;} }
/* Tab bodies used to get their top/left breathing room for free from an outer
wrapper (border+background made the gap from the tab bar above read fine even at 0 margin) -
now that every tab wires its own items straight into render_boxed_card()/.metric-card/etc.
instead of nesting them inside that wrapper, nothing supplies the gap any more. One rule here
covers every tab uniformly instead of requiring each tab's own heading to carry a margin. */
tr.tabcontent > td { padding-top: 20px; }
.div-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 1fr);
/*padding: 10px;*/
}
.google-visualization-tooltip {
color: #000 !important;
text-align: left !important;
border: solid 1px #999 !important;
padding: 5px !important;
min-width: 200px !important;
border-radius: var(--radius-sm) !important;
background-color: #ddd !important;
position: absolute !important;
font-size: 13px !important;
font-family: var(--font-legacy) !important;
white-space: nowrap;
}
/* ===== DARK THEME + CHIP SYSTEM ===== */
:root {
--bg: #1a1a1a;
--surface: #2a2a2a;
--surface-hover: #333333;
--border: rgba(255,255,255,0.08);
--text: #ffffff;
--text-secondary: #b8b8b8;
--good: #22c55e;
--ok: #f59e0b;
--poor: #ef4444;
--radius: 12px;
/* "white tint on dark" overlay triplet - flips to 0,0,0 in a light theme */
--ink-rgb: 255,255,255;
/* text */
--text-on-accent: #ffffff; /* text sitting on brand-blue/coloured fills - does not flip */
--text-muted: #9aaab7; /* hero / device-card grey */
--text-soft: #dddddd; /* legacy secondary text */
--heading: rgba(220,232,240,0.82); /* section headings */
/* legacy grey ramp */
--gray-2: #222;
--gray-3: #333;
--gray-4: #444;
--gray-5: #555;
--gray-6: #666;
--gray-8: #888;
--border-strong: #fff; /* legacy `border: 1px solid #fff` on grey buttons */
/* brand / accent */
--accent: #11bdf3; /* hero/login cyan */
--accent-rgb: 17,189,243;
--accent-soft: #7dd3fc; /* light cyan text/icons */
--accent-soft-rgb: 125,211,252; /* chip borders */
--brand-rgb: 0,147,211; /* CloudSURVEY blue glows/tints */
--brand-bright-rgb: 0,167,230; /* chip gradient start */
--brand-deep-rgb: 0,76,140; /* chip gradient end */
--navy-975: #030b17;
--navy-900: #071a2e;
--hero-1: #0a4384;
--hero-2: #08275a;
--hero-3: #061e47;
/* status extremes used in progress-fill gradients */
--good-strong: #16a34a;
--ok-strong: #d97706;
--poor-strong: #dc2626;
/* Survey Weather metric card accent (index.php picks day vs night by survey hour).
--weather-night has to flip: the original #001f3f is near-black, which reads fine on the
light card but disappears against the dark one, taking the icon badge with it since
.metric-icon derives both its colour and its 16% wash from --metric-accent. */
--weather-day: #0093d0;
--weather-night: #6f9fd8;
/* legacy signal colours (progress bars, arrows, journey endpoints) */
--signal-green: #0B9444;
--signal-amber: #FF6600;
--signal-red: #a80b10;
--record-red: #d51010;
/* misc legacy */
--silver: #c0c0c0; /* login/register boxes */
--chart-grid: #585656; /* Google Charts axis gridlines (read via JS, see performance_chart.js) */
/* non-colour reused values */
--radius-sm: 6px;
--radius-pill: 999px;
--font: system-ui, sans-serif;
--font-legacy: Arial;
}
body.light-mode {
/* the deep navy only works here, where the card behind it is white */
--weather-night: #001f3f;
--bg: #f3f5f8;
--surface: #ffffff;
--surface-hover: #eef1f5;
--border: rgba(15,23,32,0.12);
--text: #15202b;
--text-secondary: #55636f;
--ink-rgb: 15,23,32;
--text-muted: #5b6b79;
--text-soft: #33414d;
--heading: rgba(21,32,43,0.82);
--gray-2: #e8ebef;
--gray-3: #dde2e7;
--gray-4: #cdd4db;
--gray-5: #b3bcc4;
--gray-6: #93a0ab;
--gray-8: #66707a;
--border-strong: #33414d;
--chart-grid: #c7ccd1;
/* unchanged from the dark theme otherwise, which measures 2.15-3.76:1 text contrast on
white (fails WCAG AA's 4.5:1) wherever used as text colour (.metric-good/-warning/-bad).
These land ~5:1 - see INVESTIGATION_REPORT_2026-08-05_light-mode.md */
--good: #15803d;
--ok: #b45309;
--poor: #dc2626;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
margin: 20px;
}
/* Legacy structural wrappers (index.php's $header opens table.page-shell, which never closes
its own
- it and table.report both stay open row-by-row for the rest of the page,
see the "in table"/"in cell" insertion-mode comment in pages/devices.php). Both are always a
single column (one per , used purely to stack sections), but with the browser default
table-layout:auto a table sizes to its content's min-content width and ignores width="100%"
the moment anything inside can't shrink enough - on a narrow viewport this dragged the ENTIRE
page (nav, hero, cards, everything) out to whatever that min-content happened to be, no matter
how much flex-wrap/grid responsiveness existed further down. table-layout:fixed makes these two
actually obey width:100% and hand their real, narrower width down to their content instead.
On pages where table.report itself gets reopened several times row-by-row (survey reports,
same unclosed-tag pattern as page-shell), fixed layout's "column width comes from row 1"
rule stops giving every row the same column width - some rows (the hero's) collapsed to a
sliver instead of 100%. Forcing each cell's own width closes that gap without touching the
narrow-viewport fix above. */
table.page-shell, table.report { table-layout: fixed; width: 100%; }
table.report > tbody > tr > td { width: 100%; }
/* CARD — unified container for all section panels across all tabs */
.boxed {
background: rgba(var(--ink-rgb),.028);
border: 1px solid rgba(var(--ink-rgb),.09);
border-radius: 14px;
padding: 0;
/* margin-top: 5px; */
margin-bottom: 20px;
box-shadow:
inset 0 1px 0 rgba(var(--ink-rgb),.06),
0 6px 22px rgba(0,0,0,.28);
overflow: hidden;
transition: all 0.2s linear 0s;
}
/* Alt panel - a visually distinct "nested" section within a .boxed layout: class="boxed boxed-alt" */
.boxed-alt {
background: var(--surface-hover);
}
/* summary-graph-panel no longer adds its own background — absorbed into .boxed */
.summary-graph-panel {}
/* SECTION TITLE */
.section-title {
margin: 0 0 16px 0;
font-size: 1.3rem;
font-weight: 600;
}
/* Links */
.boxed a:not(.menu_button):not(.hover-card-cta) {
color: inherit;
text-decoration: none;
}
/* .dot-antenna-row is a whole-card link (MySCAN dot Antenna tab) - its highlight is the hover state */
.boxed a:hover:not(.menu_button):not(.hover-card-cta):not(.dot-antenna-row) {
color: var(--text);
text-decoration: underline;
}
.import-panel .table-wrapper { max-height: 70vh; overflow-y: auto; }
@media (max-width: 1600px) {
.div-grid.import-grid { grid-template-columns: 1fr !important; }
/* Combined heatmaps carry every band from every technology, too wide for 4-up. Not !important,
so .div-grid's 1-column rule under 580px still wins. */
.div-grid.combined-matrix-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Chrome / Edge */
.table-wrapper::-webkit-scrollbar {
height: 10px;
}
.table-wrapper::-webkit-scrollbar-track {
background: var(--gray-2);
border-radius: var(--radius-pill);
}
.table-wrapper::-webkit-scrollbar-thumb {
background: var(--gray-5);
border-radius: var(--radius-pill);
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
background: #777;
}
/* STICKY HEADER */
.data-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface);
}
/* GROUP HEADER ROW — for tables with section/group separator rows mixed into tbody */
.data-table tbody tr.row-group-header td,
.data-table tbody tr.row-group-header th {
background: rgba(var(--brand-rgb),0.08);
font-weight: 700;
padding-top: 16px;
}
/* STICKY SECTION HEADER ROW — for grouped survey list tables */
.data-table tbody tr.sticky_header_row > td {
background: rgba(var(--brand-rgb),0.08);
}
/* COMPACT VIEW (survey list, RMS 3344) — the same table with most columns dropped, so the
toggle never re-renders or re-queries anything. c-hide leaves in compact, c-only (the info
icon whose tip carries what c-hide took away) arrives. Marker classes rather than :nth-child
because the hide-below-* utilities already change which columns are on screen at a given
width, and the two must not fight. */
.data-table .c-only { display: none; }
.data-table.is-compact .c-hide { display: none; }
.data-table.is-compact .c-only { display: table-cell; }
/* The hide-below-* utilities drop c-hide columns too, and the info card is where their values
still live - so it arrives at the first of those breakpoints, not only in compact. Both lists
(survey list, SENTRY history) first hide columns at 1600. */
@media (max-width: 1600px) { .data-table .c-only { display: table-cell; } }
/* Survey list Location: capped and clamped to two lines, so a long address wraps in place
instead of widening the table. The full text is on the title. */
.data-table .loc-cell {
min-width: 110px;
max-width: 220px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
white-space: normal;
overflow-wrap: anywhere;
}
/* The group headings are what make DOM order != sort order; compact drops them and the JS
reorders rows by data-order, so the flat list reads in the sort the user actually picked. */
.data-table.is-compact tbody tr.sticky_header_row { display: none; }
/* Rows label their own values inline ("Started:" / "Surveyed:") because the two device types
word them differently. In compact the does the labelling, so these go - along with
the
*/
.input-group {
display: flex;
align-items: stretch;
width: 100%;
}
.input-group *:not(input) {
user-select: none;
}
.input-group > *:not(:last-child) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right-width: 0 !important;
}
.input-group > *:not(:first-child) {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.input-group > input {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
/* a labelled .field-control in place of the bare input - same shrink, or the input's own size= width
pushes the attached button out of a narrow container */
.input-group > .field-control {
flex: 1 1 auto;
min-width: 0;
}
/* CLOUDSURVEY CALL TO ACTION */
.report-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 42px;
overflow: hidden;
padding: 24px 30px;
min-height: 190px;
background:
radial-gradient(circle at 16% 35%, rgba(var(--brand-rgb),0.38), transparent 38%),
radial-gradient(circle at 72% 60%, rgba(var(--brand-deep-rgb),0.22), transparent 36%),
linear-gradient(135deg, #1e2d3d 0%, #1a2233 50%, #16202e 100%);
border-radius: var(--radius);
margin-bottom: 12px;
}
.report-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: var(--radius);
background:
linear-gradient(90deg, rgba(var(--brand-rgb),0.20), transparent 42%),
linear-gradient(180deg, rgba(var(--ink-rgb),0.045), transparent 45%);
opacity: 0.65;
}
.report-header-text {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
}
.report-header-brand {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.report-header-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
background:
radial-gradient(circle at top left, rgba(var(--ink-rgb),0.22), transparent 34%),
linear-gradient(135deg, #00a7e6 0%, #006cc1 55%, #004c8c 100%);
box-shadow:
0 12px 30px rgba(0,0,0,0.36),
0 0 20px rgba(var(--brand-rgb),0.20),
inset 0 1px 0 rgba(var(--ink-rgb),0.22);
color: var(--text-on-accent);
font-size: 2.05rem;
font-weight: 950;
font-style: italic;
letter-spacing: -0.06em;
}
.report-header-company {
margin: 0;
font-size: 1.5rem;
line-height: 1.08;
font-weight: 850;
}
.report-header-contact {
margin: 8px 0 0 0;
color: rgba(255,255,255,0.82);
font-size: 1.08rem;
font-weight: 500;
}
.report-header-contact a {
color: var(--text-secondary);
text-decoration: none;
}
.report-header-contact a:hover {
color: var(--text);
text-decoration: none;
}
.report-header-title {
margin: 0;
font-size: clamp(1.9rem, 2.75vw, 2.45rem);
line-height: 1.12;
font-weight: 900;
letter-spacing: -0.035em;
text-shadow: 0 3px 14px rgba(0,0,0,0.32);
}
.report-header-title-highlight {
color: var(--accent-soft);
}
.report-header-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 20px;
}
.report-header-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
border: 1px solid rgba(var(--accent-soft-rgb),0.26);
border-radius: 15px;
background:
radial-gradient(circle at top left, rgba(var(--ink-rgb),0.15), transparent 42%),
linear-gradient(135deg, rgba(var(--brand-bright-rgb),0.24), rgba(var(--brand-deep-rgb),0.18));
color: var(--text-on-accent);
font-size: 0.94rem;
font-weight: 850;
letter-spacing: 0.018em;
text-transform: uppercase;
backdrop-filter: blur(8px);
box-shadow:
0 9px 24px rgba(0,0,0,0.26),
0 0 18px rgba(var(--brand-rgb),0.16),
inset 0 1px 0 rgba(var(--ink-rgb),0.14);
}
.cloud-cta-wrap {
position: relative;
z-index: 2;
display: flex;
justify-content: flex-end;
align-items: center;
flex: 0 0 auto;
margin: 0;
}
.cloud-cta-button {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 500px;
max-width: 500px;
padding: 24px 28px;
border: 1px solid rgba(var(--ink-rgb),0.18);
border-radius: 15px;
background:
radial-gradient(circle at top left, rgba(var(--ink-rgb),0.22), transparent 32%),
linear-gradient(135deg, #00a7e6 0%, #0078bd 48%, #004c8c 100%);
color: var(--text-on-accent);
font-family: var(--font);
text-align: left;
text-decoration: none;
cursor: pointer;
box-shadow:
0 10px 26px rgba(0,0,0,0.34),
0 0 22px rgba(var(--brand-rgb),0.22),
inset 0 1px 0 rgba(var(--ink-rgb),0.2);
transition:
width 0.2s ease,
max-width 0.2s ease,
padding 0.2s ease,
border-radius 0.2s ease,
transform 0.16s ease,
box-shadow 0.16s ease;
}
.cloud-cta-button:hover {
transform: translateY(-2px);
box-shadow:
0 14px 34px rgba(0,0,0,0.42),
0 0 30px rgba(var(--brand-rgb),0.36),
inset 0 1px 0 rgba(var(--ink-rgb),0.26);
}
.cloud-cta-button:active {
transform: translateY(0);
}
.cloud-cta-main {
display: flex;
flex-direction: column;
gap: 3px;
}
.cloud-cta-kicker {
font-size: 0.9rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.9;
}
.cloud-cta-title {
font-size: 1.65rem;
font-weight: 900;
line-height: 1.12;
}
.cloud-cta-subtitle {
color: rgba(255,255,255,0.9);
font-size: 0.98rem;
font-weight: 500;
line-height: 1.32;
}
.cloud-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: var(--radius-pill);
background: rgba(var(--ink-rgb),0.16);
border: 1px solid rgba(var(--ink-rgb),0.22);
font-size: 1.55rem;
box-shadow: inset 0 1px 0 rgba(var(--ink-rgb),0.18);
}
.cloud-cta-wrap.is-floating {
position: fixed;
top: 18px;
right: 24px;
z-index: 1000;
margin: 0;
}
.cloud-cta-wrap.is-floating .cloud-cta-button {
width: 285px;
max-width: 285px;
padding: 11px 14px;
border-radius: 13px;
}
.cloud-cta-wrap.is-floating .cloud-cta-kicker,
.cloud-cta-wrap.is-floating .cloud-cta-subtitle {
display: none;
}
.cloud-cta-wrap.is-floating .cloud-cta-title {
font-size: 0.95rem;
}
.cloud-cta-wrap.is-floating .cloud-cta-icon {
width: 36px;
height: 36px;
font-size: 1.08rem;
}
@media (max-width: 900px) {
.report-header {
align-items: stretch;
gap: 18px;
}
.cloud-cta-button {
width: 430px;
max-width: 430px;
padding: 22px 24px;
}
}
@media (max-width: 760px) {
.report-header {
display: block;
}
.report-header-brand {
align-items: flex-start;
}
.report-header-meta {
margin-bottom: 2px;
}
.cloud-cta-wrap,
.cloud-cta-wrap.is-floating {
position: static;
margin-top: 16px;
justify-content: stretch;
}
.cloud-cta-button,
.cloud-cta-wrap.is-floating .cloud-cta-button {
width: 100%;
max-width: 100%;
}
}
.cloud-cta-button,
.cloud-cta-button:visited,
.cloud-cta-button:hover,
.cloud-cta-button:active {
color: var(--text-on-accent);
text-decoration: none;
}
.cloud-cta-button {
-webkit-tap-highlight-color: transparent;
}
.cloud-cta-button,
.cloud-cta-button:link,
.cloud-cta-button:visited,
.cloud-cta-button:hover,
.cloud-cta-button:active,
.cloud-cta-button:focus,
.cloud-cta-button *,
.cloud-cta-button *:hover {
text-decoration: none;
color: var(--text-on-accent);
}
/* Graph tooltip canvases should never intercept mouse clicks */
canvas[id^="tip"] {
pointer-events: none;
}
/* EMBEDDED CANVAS GRAPH REFINEMENTS */
canvas[id^="canvas"] {
display: block;
margin-top: 12px;
border-radius: 12px;
background:
radial-gradient(circle at top left, rgba(var(--brand-rgb),0.08), transparent 36%),
rgba(var(--ink-rgb),0.025);
box-shadow:
inset 0 1px 0 rgba(var(--ink-rgb),0.04),
0 10px 28px rgba(0,0,0,0.18);
}
canvas[id^="canvas"]:hover {
cursor: crosshair;
}
/* Prevent tiny horizontal scrollbars beneath embedded canvas graphs */
.table-wrapper canvas[id^="canvas"] {
max-width: 100%;
box-sizing: border-box;
}
.table-wrapper:has(canvas[id^="canvas"]) {
overflow-x: hidden;
}
.report-header-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 10px;
color: var(--accent-soft);
flex: 0 0 auto;
filter: drop-shadow(0 0 7px rgba(var(--accent-soft-rgb),0.38));
}
.report-header-chip-icon svg {
display: block;
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.cloud-cta-icon {
position: relative;
}
.cloud-cta-icon::before {
content: "";
position: absolute;
left: -18px;
top: 8px;
bottom: 8px;
width: 1px;
background: rgba(var(--ink-rgb),0.12);
}
/* Section title layout with visible expand/collapse marker and inline signal legend */
summary.section-title {
position: relative;
display: flex;
align-items: center;
gap: 0;
flex-wrap: nowrap;
list-style: none;
cursor: pointer;
padding-left: 30px;
width: 100%;
box-sizing: border-box;
}
summary.section-title::-webkit-details-marker {
display: none;
}
summary.section-title::before {
content: "▶";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: var(--text);
font-size: 1rem;
line-height: 1;
}
details[open] > summary.section-title::before {
content: "▼";
}
.signal-legend-inline {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 26px;
margin-left: auto;
margin-right: 12px;
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 650;
line-height: 1;
vertical-align: middle;
flex: 0 0 auto;
}
.signal-legend-inline span {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.signal-dot {
width: 14px;
height: 14px;
border-radius: var(--radius-pill);
display: inline-block;
}
.signal-dot.good { background: var(--good); }
.signal-dot.fair { background: var(--ok); }
.signal-dot.poor { background: var(--poor); }
@media (max-width: 900px) {
.signal-legend-inline {
margin-left: auto;
margin-right: 8px;
gap: 14px;
}
}
/* ===== SPLIT-PANEL LAYOUT (hero left / form right) ===== */
.split-panel { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 100vh; }
.hero-panel {
position: relative; overflow: hidden; padding: clamp(40px, 4vw, 84px) clamp(36px, 4.6vw, 96px);
display: flex; flex-direction: column; justify-content: space-between;
border-right: 1px solid rgba(50,84,105,.35);
background:
radial-gradient(circle at 26% 18%, rgba(var(--accent-rgb),.10), transparent 38%),
radial-gradient(circle at 80% 78%, rgba(22,155,88,.07), transparent 42%),
linear-gradient(160deg, #0a1620, #071018, #04090e);
}
.hero-wordmark { margin: 0; font-size: clamp(20px, 1.9vw, 38px); letter-spacing: .2em; text-transform: uppercase; font-weight: 900; color: #dff7ff; }
.hero-wordmark span { color: var(--accent); }
.hero-headline { font-size: clamp(32px, 4.3vw, 76px); line-height: 1.18; font-weight: 700; color: #f4fbff; margin: 0 0 16px; }
.hero-headline em { font-style: normal; color: var(--accent); }
.hero-sub { font-size: clamp(15px, 1.6vw, 28px); color: var(--text-muted); line-height: 1.6; margin: 0 0 32px; max-width: 42ch; }
.hero-features { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 26px); }
.hero-feature { display: flex; align-items: flex-start; gap: 14px; }
.hero-feature-icon {
width: clamp(38px, 3.2vw, 58px); height: clamp(38px, 3.2vw, 58px); border-radius: 9px; flex: 0 0 auto;
border: 1px solid rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.07);
display: grid; place-items: center; color: var(--accent);
}
.hero-feature-icon svg { width: clamp(19px, 1.6vw, 29px); height: clamp(19px, 1.6vw, 29px); }
.hero-feature h4 { margin: 0 0 3px; font-size: clamp(16px, 1.45vw, 24px); font-weight: 700; color: #eaf5fa; }
.hero-feature p { margin: 0; font-size: clamp(14px, 1.25vw, 21px); color: var(--text-muted); line-height: 1.5; }
.hero-stats { display: flex; gap: clamp(28px, 2.6vw, 56px); margin-top: 18px; }
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats b { font-size: clamp(22px, 2.2vw, 38px); color: var(--text); letter-spacing: -.02em; }
.hero-stats span { font-size: clamp(12.5px, 1.15vw, 19px); color: var(--text-muted); margin-top: 2px; }
.hero-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero-mobile-brand svg { width: 24px; height: 24px; color: #dff7ff; }
.hero-mobile-brand b { letter-spacing: .18em; font-size: 15px; color: #dff7ff; text-transform: uppercase; font-weight: 900; }
.hero-mobile-brand b span { color: var(--accent); }
/* ===== FORM PANEL ===== */
/* No padding: fit_login_card() in landing.php sizes the card to 90% of this section, so the
remaining 10% is the gutter. Mobile puts real padding back below. */
.form-panel { display: flex; align-items: center; justify-content: center; padding: 0; }
/* ===== CARD — clean bordered container ===== */
.card {
width: 520px; max-width: 100%;
border: 1px solid rgba(50,84,105,.48); border-radius: 14px; padding: 44px 42px 36px;
background:
radial-gradient(circle at 18% 0%, rgba(16,93,125,.07), transparent 34%),
linear-gradient(180deg, rgba(11,20,30,.96), rgba(5,10,15,.985));
box-shadow: inset 0 1px 0 rgba(var(--ink-rgb),.03), 0 24px 60px rgba(0,0,0,.45);
}
/* ===== FIELD — icon-prefix input control =====
Flippable by default so it can be reused on regular (theme-following) panels like the
account page. The login/register/2FA card is a deliberate fixed-dark splash screen that
doesn't flip with the theme, so its own field-controls are pinned back below. */
.field { margin-bottom: 16px; }
.field > label {
display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800;
letter-spacing: .04em; color: var(--text-secondary); text-transform: uppercase;
}
.field-control {
position: relative; display: inline-flex; align-items: center; max-width: 100%;
border: 1px solid var(--border); border-radius: 9px;
background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.field-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14); }
button.field-control:hover { border-color: var(--accent); }
.field-icon { width: 38px; flex: 0 0 auto; display: grid; place-items: center; color: var(--text-secondary); }
.field-icon svg { width: 16px; height: 16px; }
.field-icon .mdi { font-size: 16px; line-height: 1; }
/* text equivalent of .field-icon - a plain word/phrase prefixing the input instead of an icon,
e.g. Add User Access:
*/
.field-label { padding-left: 12px; font-size: 14px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.field-control input,
/* font-family: inherit because / do NOT inherit it - without it these sit in the
UA's form-control font while every label around them is var(--font). Same reason
.field-control textarea below already carries it. */
/* text-overflow/overflow/white-space: a long selected option (e.g. edit_device.php's "New Survey
Control") otherwise forces the select wider than its grid cell and overlaps the next field -
.field-control's own max-width fix above caps the box, this truncates the text inside it
instead of letting it overflow. */
.field-control select {
flex: 1; min-width: 0; height: 36px; border: none; outline: none; border-radius: 9px; outline-offset: -2px;
background: transparent; color: var(--text); font-size: 14px; font-weight: 600; padding: 0 6px 0 12px;
font-family: inherit; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.field-control input::placeholder { color: var(--text-secondary); font-weight: 500; }
/* Chrome paints the dropdown popup from the select's own background, which is transparent
here and so falls back to white - repaint the options from the theme vars instead. */
.field-control select option, .field-control select optgroup { background: var(--surface); color: var(--text); }
.field-control input[type="file"] { display: flex; align-items: center; line-height: 36px; }
.field-control input[type="file"]::file-selector-button { vertical-align: middle; margin-right: 10px; }
.field-control .network_dropdown_toggle {
flex: 1; min-width: 160px; height: 36px; border: none; outline: none; border-radius: 9px; outline-offset: -2px;
background: transparent; color: var(--text); font-size: 14px; font-weight: 600; padding: 0 6px 0 12px;
text-align: left; cursor: pointer; font-family: inherit;
}
/* Disabled when the survey has one operator - same arrow cursor a disabled select gets. */
.field-control .network_dropdown_toggle:disabled { cursor: default; }
/* One dropdown chevron for native selects and the .network_dropdown_toggle button alike. Each
browser draws its own native arrow (shape, size and inset all differ), so a button can only match
a select everywhere if both use this one instead. Masked rather than an
page scaffold (index.php ~line 562/732, no table-layout:fixed - the same class of bug
.table-wrapper{contain:inline-size} already fixed elsewhere). Without this, journey_timeline.js
rewriting text/table content on every drag frame (address, date/time, the dynamic tech-totals
table) lets the browser recompute the outer table's own column width from whatever's currently
shortest, visibly shrinking/growing this whole region as you drag - reported as the Journey
Summary card's width "jumping" mid-drag. This isolates the grid's own sizing from its
descendants so those content changes can't bubble back up into the table's layout pass. */
.journey-tab-grid{contain:inline-size;}
.journey-tab-grid #journey-summary-card{grid-column:1 / -1;}
@media(min-width:1800px){
/* wider than a 15" laptop: true 2x2 - Journey Summary becomes a normal grid cell like the rest */
.journey-tab-grid{grid-template-columns:repeat(2,1fr);}
.journey-tab-grid #journey-summary-card{grid-column:auto;}
}
@media(max-width:1050px){
/* .summary-graph-grid's own 1050px rule above already collapses this to one column; spanning
is meaningless there but reset it anyway so nothing depends on the wider-breakpoint value */
.journey-tab-grid #journey-summary-card{grid-column:auto;}
}
/* index.php's Network Summary tab wires render_bar_chart()/render_stacked_bar_chart() straight
into render_boxed_card() (a plain .boxed , not .summary-chart-card) inside this grid.
.boxed/.card-body are ordinary block elements, so when align-items:stretch above grows a
shorter card to match a taller sibling in the same row, that extra height just becomes empty
space below the chart instead of being used - .boxed itself never knows it grew. Scoped to
.summary-graph-grid specifically (not .boxed generally, which is used all over the site) so
nothing outside this grid is affected. Horizontal bar charts centre in the leftover space
(a fixed row height stretched out would just look like oddly spaced-out bars); the vertical/
stacked column chart grows to fill it instead (.bar-chart-vertical's height:200px is a
flex-basis here, and flex:1 0 auto keeps it as the minimum - plain flex:1 is a 0 basis, which
collapsed the chart whenever no taller sibling stretched the row) - taller columns read fine
since .bar-fill's height is already a %, so it scales up proportionally with the extra room. render_stacked_bar_chart()
wraps its output in .line-chart-wrap (for the legend), so .bar-chart-vertical isn't a direct
.card-body child there like it is for render_bar_chart(vertical) - the :has() rule handles
that nesting without also growing .line-chart-wrap for line/scatter/candle charts, which
aren't part of this fix. */
.summary-graph-grid > .boxed{display:flex;flex-direction:column;}
.summary-graph-grid > .boxed > .card-body{flex:1;display:flex;flex-direction:column;}
.summary-graph-grid > .boxed > .card-body > .bar-chart:not(.bar-chart-vertical){margin:auto 0;}
.summary-graph-grid > .boxed > .card-body > .bar-chart-vertical,
.summary-graph-grid > .boxed > .card-body > .line-chart-wrap:has(> .bar-chart-vertical){flex:1 0 auto;}
.summary-graph-grid > .boxed > .card-body > .line-chart-wrap:has(> .bar-chart-vertical) > .bar-chart-vertical{flex:1 0 auto;}
/* Performance Monitoring's first .div-grid (index.php) mixes fixed-height gauge cards with the
"Comparison to All Network Results" grouped-bar-chart card - same empty-space-below-the-chart
problem as .summary-graph-grid above (default grid align-items:stretch grows .boxed's outer
height to match the tallest gauge card, but .boxed/.card-body are plain block elements that
don't use the extra room), scoped to .perf-metric-grid specifically since .div-grid itself is
a generic layout class reused all over the site. */
.perf-metric-grid > .boxed{display:flex;flex-direction:column;}
.perf-metric-grid > .boxed > .card-body{flex:1;display:flex;flex-direction:column;}
.perf-metric-grid > .boxed > .card-body > .bar-chart-grouped,
.perf-metric-grid > .boxed > .card-body > .line-chart-wrap:has(> .bar-chart-grouped){flex:1;}
.perf-metric-grid > .boxed > .card-body > .line-chart-wrap:has(> .bar-chart-grouped) > .bar-chart-grouped{flex:1;}
/* Survey Results' per-technology Signal Log row (index.php, .signal-log-grid) - same
empty-space-below problem again: the Signal Log line chart is the tall reference card, the
"Average Signal by Network" horizontal bar list (render_bar_chart(), no .bar-chart-vertical,
not wrapped in .line-chart-wrap since it has no legend) is the short one. */
.signal-log-grid > .boxed{display:flex;flex-direction:column;}
.signal-log-grid > .boxed > .card-body{flex:1;display:flex;flex-direction:column;}
.signal-log-grid > .boxed > .card-body > .bar-chart:not(.bar-chart-vertical){margin:auto 0;}
.signal-log-grid > .boxed > .card-body > .line-chart-wrap:has(> .line-chart-plot){flex:1;}
/* Selected-cell panel above the Signal Log chart (performance_chart.js renderSignalLogCell()) -
the hover-card key/value blocks, but as many columns as the half-width card fits. */
.signal-log-cell{margin-bottom:12px;}
.signal-log-cell .signal-log-cell-details{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:10px;padding-top:10px;}
.signal-log-cell .signal-log-cell-details .hover-card-detail{padding-bottom:6px;}
/* values keep the table's metric colours, which .hover-card-kv span would otherwise flatten */
.signal-log-cell .metric-good{color:var(--good);}
.signal-log-cell .metric-warning{color:var(--ok);}
.signal-log-cell .metric-bad{color:var(--poor);}
.table-wrapper{contain:inline-size;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--gray-4) var(--bg);}
.data-table{width:100%;border-collapse:collapse;white-space:nowrap;}
.data-table th{background:rgba(var(--ink-rgb),0.05);padding:10px;text-align:left;font-size:0.82rem;font-weight:700;border-bottom:1px solid var(--border);color:var(--text-secondary);}
.data-table td{padding:7px 10px;border-bottom:1px solid rgba(var(--ink-rgb),0.04);font-size:0.88rem;vertical-align:middle;}
.data-table tbody tr:nth-child(even){background:rgba(var(--ink-rgb),0.02);}
.data-table tbody tr:hover{background:rgba(var(--brand-rgb),0.07);}
/* CARD VIEW - jquery/table-cards.js adds .is-cards once a wide table would scroll sideways. Each
row becomes a card and each cell a "Label: value" line, with the label taken from data-label.
Child combinators throughout, so a nested table that isn't in cards keeps its own layout. The
label stays absolutely positioned rather than in a grid column, because a grid would split a
"valuesub " cell into separate items. The !important on white-space and the
label padding beats the inline nowrap/padding/text-align some table builders put on their cells. */
table.is-cards, table.is-cards > tbody { display: block; white-space: normal; }
/* !important: the compare filters .toggle() head rows too, and jQuery's show writes an inline
display:table-row on anything CSS still hides */
table.is-cards > thead, table.is-cards > tbody > tr[data-card-head] { display: none !important; }
table.is-cards > tbody > tr { display: block; margin: 0 0 10px; padding: 6px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.is-cards > tbody > tr > td { display: block; width: auto !important; border: 0; padding: 4px 12px; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
table.is-cards > tbody > tr > td[data-label] { position: relative; padding-left: calc(40% + 10px) !important; }
table.is-cards > tbody > tr > td[data-label]::before { content: attr(data-label); position: absolute; left: 12px; top: 4px; width: calc(40% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
table.is-cards > tbody > tr > td:empty { display: none; }
/* Buttons sized for a table column (.menu_button's 200px min-width, .cs-chip--narrow's 100px, a long
email) fit the value column, wrapping their label rather than clipping it. Any depth, since action
buttons usually sit in a