/* ============================================================
VIDARIA 1.1 GROUP SIDEBAR — Phase A overhaul
------------------------------------------------------------
Matches Image #36 mockup precisely:
• Edge-to-edge on the LEFT (no margin, no rounded corners)
• Solid 1px border on the RIGHT (separates sidebar from
the main content area)
• Flush GroupClock at top (no card chrome)
• Section divider lines between blocks
• Capability pills (GUARDTRAX / NFC / GEO) — same chip
look as licenses but tinted gray instead of blue
• License chips — vidaria-blue background, white text
• 4 metric rows with circular badge counts (blue + green
for "On Shift Now > 0")
• ON SHIFT • LIVE header with green pill
• Officer cards restyled with MOVING badge + battery color
(data already comes from renderCompactOnShiftSection;
this sheet just dresses the existing JSX).
All selectors scoped under body.vds-shell — legacy untouched.
============================================================ */
/* ── Sidebar container: edge-to-edge, solid right border ── */
body.vds-shell .group-view {
/* The whole .group-view layout uses `display: flex` (legacy).
The default `align-items: stretch` already makes the sidebar
full-height. We just need to drop the padding and the round
chrome the legacy sidebar carries. */
padding: 0;
}
body.vds-shell .sidebar-container {
margin: 0;
padding: 0;
background: var(--white);
border-right: 1px solid var(--gray-300);
width: 320px;
min-width: 320px;
max-width: 320px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 0;
}
body.vds-shell .sidebar {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
margin: 0;
overflow: visible;
flex: 1 1 auto;
}
/* Kill legacy .sidebar-section chrome where it leaks through
alongside our new Vidaria sections (e.g. when activeTab !== null
the legacy renderSidebarContent fires inside the same .sidebar). */
body.vds-shell .sidebar > .sidebar-section {
padding: var(--space-3) var(--space-4);
margin: 0;
border-bottom: 1px solid var(--gray-100);
}
/* ── GroupClock — flush top block, no card chrome ─────────── */
body.vds-shell .group-clock {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: var(--space-4);
margin: 0;
border-bottom: 1px solid var(--gray-400);
transition: none;
/* Left-justify everything per mockup #36 (user feedback
2026-05-26). Override the legacy GroupClock's centered
inline styles by force. */
text-align: left !important;
display: block !important;
}
body.vds-shell .group-clock > * {
text-align: left !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
body.vds-shell .group-clock:hover {
box-shadow: none;
background: transparent;
}
body.vds-shell .group-clock .group-clock__time,
body.vds-shell .group-clock .clock-time,
body.vds-shell .group-clock .time {
/* Big bold blue clock per mockup. The mockup uses a deep
navy blue (close to --vidaria-blue), not gray-900. */
font-size: 30px;
font-weight: var(--font-weight-bold);
color: var(--vidaria-blue, #1e3a8a) !important;
letter-spacing: -0.02em;
line-height: 1.1;
text-align: left !important;
}
body.vds-shell .group-clock .group-clock__date,
body.vds-shell .group-clock .clock-date,
body.vds-shell .group-clock .date {
color: var(--gray-500);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-top: 4px;
text-align: left !important;
}
body.vds-shell .group-clock .group-clock__tz,
body.vds-shell .group-clock .clock-tz,
body.vds-shell .group-clock .timezone {
color: var(--gray-400);
font-size: 11px;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* 12h/24h toggle inside GroupClock — pill style */
body.vds-shell .group-clock button,
body.vds-shell .group-clock .clock-toggle button,
body.vds-shell .group-clock .group-clock__toggle button {
background: var(--white);
border: 1px solid var(--gray-200);
color: var(--gray-700);
border-radius: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
transition: background var(--transition-fast), color var(--transition-fast);
}
body.vds-shell .group-clock button.active,
body.vds-shell .group-clock button[aria-pressed="true"],
body.vds-shell .group-clock .clock-toggle button.active {
background: var(--gray-100);
color: var(--gray-900);
border-color: var(--gray-300);
}
/* ── Sidebar section wrapper (Vidaria) ────────────────────── */
body.vds-shell .vds-sb-section {
padding: var(--space-4);
border-bottom: 1px solid var(--gray-400);
}
body.vds-shell .vds-sb-section:last-child {
border-bottom: none;
}
body.vds-shell .vds-sb-label {
/* Section header with a "trailing accent line" that fills
the remaining horizontal space — per mockup #36. The label
sits left, a 1px line extends to the right edge of the
section padding. */
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 11px;
font-weight: var(--font-weight-semibold);
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-3);
}
body.vds-shell .vds-sb-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--gray-300);
}
/* ── CURRENT GROUP section ────────────────────────────────── */
body.vds-shell .vds-sb-group-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: 4px;
}
body.vds-shell .vds-sb-group-name {
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--gray-900);
margin: 0;
letter-spacing: -0.01em;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vds-shell .vds-sb-group-chevron {
background: transparent;
border: none;
color: var(--gray-500);
font-size: 14px;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-md);
line-height: 1;
transition: background var(--transition-fast), color var(--transition-fast);
}
body.vds-shell .vds-sb-group-chevron:hover {
background: var(--gray-100);
color: var(--gray-900);
}
body.vds-shell .vds-sb-address {
color: var(--gray-500);
font-size: var(--font-size-sm);
margin: 0 0 var(--space-3);
line-height: 1.4;
}
/* ── Feature pills (capability chips) ─────────────────────── */
body.vds-shell .vds-sb-feature-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--space-2);
}
body.vds-shell .vds-sb-feature-pill {
background: var(--gray-100);
color: var(--gray-700);
border: 1px solid var(--gray-200);
border-radius: var(--radius-full);
padding: 3px 9px;
font-size: 9px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.05em;
text-transform: uppercase;
/* Matches license chip shadow treatment so the two chip
families read as a consistent system. */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}
/* ── LICENSES section — chips ─────────────────────────────── */
body.vds-shell .vds-sb-licenses .license-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.vds-shell .vds-sb-licenses .license-grid > li {
margin: 0;
}
/* License chips — mockup-precise small pill, defeats the legacy
`.license-grid li { width: 100% }` and `.license-grid .license-button
{ width: 100%; height: 28px; padding: 4px 8px; font-size: 11px }`
rules in GroupView.css. All overridden with !important because the
legacy rules cascade in later than mine via webpack chunks.
Container also needs to be `display: flex; width: auto` so li's
don't stretch the chips full-width.
*/
body.vds-shell .vds-sb-licenses .license-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
body.vds-shell .vds-sb-licenses .license-grid li {
display: inline-flex !important;
width: auto !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
body.vds-shell .vds-sb-licenses .license-grid .license-button,
body.vds-shell .vds-sb-licenses .license-button,
body.vds-shell .vds-sb-licenses .btn.license-button,
body.vds-shell .vds-sb-licenses .btn-primary.license-button {
/* Mockup look: tiny 9px font per user feedback 2026-05-26
("make the text in the license buttons smaller"). All
sizing forced with !important because legacy
`.license-grid .license-button` in GroupView.css has
higher specificity than my old rule. */
background: var(--vidaria-blue-tint, #f0f5fb) !important;
color: var(--vidaria-blue, #103255) !important;
border: 1px solid rgba(16, 50, 85, 0.2) !important;
border-radius: var(--radius-full) !important;
padding: 2px 8px !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
box-shadow: none !important;
/* Defeat the fixed-size rules in GroupView.css */
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
line-height: 1.5 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
cursor: pointer;
}
body.vds-shell .vds-sb-licenses .license-button:hover,
body.vds-shell .vds-sb-licenses .btn-primary.license-button:hover {
background: var(--vidaria-blue, #103255) !important;
color: var(--white) !important;
border-color: var(--vidaria-blue, #103255) !important;
}
/* ── 4 metric rows with circular badge counts ─────────────── */
body.vds-shell .vds-sb-metrics {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
}
body.vds-shell .vds-sb-metric-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) 0;
color: var(--gray-700);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
body.vds-shell .vds-sb-metric-row + .vds-sb-metric-row {
border-top: 1px dashed transparent; /* spacing only */
}
body.vds-shell .vds-sb-metric-name {
color: var(--gray-700);
}
body.vds-shell .vds-sb-metric-badge {
background: var(--vidaria-blue-tint, #dbeafe);
color: var(--vidaria-blue, #2563eb);
min-width: 30px;
height: 24px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 8px;
font-size: 12px;
font-weight: var(--font-weight-bold);
}
body.vds-shell .vds-sb-metric-badge--success {
background: rgba(16, 185, 129, 0.12); /* var(--success) at 12% */
color: var(--success, #10b981);
}
/* ── ON SHIFT section header with LIVE pill ────────────────
The legacy renderCompactOnShiftSection renders:
We restyle the section + h4 to match the mockup and append
the green LIVE pill via ::after on the h4.
*/
body.vds-shell .vds-sb-onshift-wrap > .sidebar-section {
/* The on-shift block is the last sidebar-section under Vidaria */
padding: var(--space-3) var(--space-4) var(--space-4);
border-bottom: none;
}
/* Spacing above ON SHIFT — user feedback 2026-05-29: remove the
double grey bar (border-top was the offender). Keep only the
accent line that sits NEXT to the "ON SHIFT ● LIVE" header.
Use margin/padding for breathing room instead of a border. */
body.vds-shell .vds-sb-onshift-wrap--vds {
padding-top: var(--space-3);
margin-top: var(--space-2);
border-top: none;
}
/* When our explicit JSX header is in play (.vds-sb-onshift-wrap--vds),
hide the legacy h4 that renderCompactOnShiftSection emits — we
render the same info with full control over the layout. */
body.vds-shell .vds-sb-onshift-wrap--vds > .sidebar-section > h4 {
display: none !important;
}
/* Explicit JSX header — bulletproof flex row that no pseudo-element
or stale CSS can break. */
body.vds-shell .vds-sb-onshift-header {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 0 12px 0;
padding: 0;
}
body.vds-shell .vds-sb-onshift-title {
font-size: 11px;
font-weight: 600;
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 0.1em;
white-space: nowrap;
}
body.vds-shell .vds-sb-onshift-live {
background: rgba(16, 185, 129, 0.15);
color: var(--success, #10b981);
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--radius-full);
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
body.vds-shell .vds-sb-onshift-accent {
flex: 1 1 auto;
height: 1px;
background: var(--gray-300);
display: block;
}
/* ── Officer cards: PRESERVED VERBATIM ────────────────────
Per user direction (2026-05-25): "dont touch the officer cards
jsx. I like the old versions." We also leave the inline styles
that the legacy renderCompactOnShiftSection paints onto each
card alone — no CSS overrides. The only thing this section
does is style the empty-state message + the surrounding h4
(the LIVE pill, above).
*/
/* Empty state ("No officers on shift") */
body.vds-shell .vds-sb-onshift-wrap > .sidebar-section p {
color: var(--gray-400) !important;
font-style: italic;
font-size: var(--font-size-xs) !important;
text-align: left !important;
}
/* ── Date-range bubble (rendered when activeTab is non-null) ── */
body.vds-shell .date-range-bubble {
background: var(--white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-bottom: 1px solid var(--gray-400);
border-radius: 0;
box-shadow: none;
padding: var(--space-3) var(--space-4);
margin: 0;
}
body.vds-shell .date-range-bubble:hover {
border-color: var(--gray-200);
box-shadow: none;
}
/* Defensive: ensure sidebar scroll works even though the legacy CSS
sets overflow on multiple parents. */
body.vds-shell .sidebar::-webkit-scrollbar { width: 6px; }
body.vds-shell .sidebar::-webkit-scrollbar-track { background: transparent; }
body.vds-shell .sidebar::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 3px;
}
body.vds-shell .sidebar::-webkit-scrollbar-thumb:hover {
background: var(--gray-400);
}
/* ── Main content area: flush, no rounded corners ──────────
Legacy chrome on `.group-main-content` is a card with margin,
border, border-radius, and shadow — meant to read as a panel
floating inside the page background. The mockup eliminates
that entirely: the sidebar's right border IS the divider, and
the main content extends edge-to-edge from there to the right
viewport edge with no chrome of its own.
Also reset .group-content-wrapper padding/margin so the main
content lines up with the sidebar's top edge (no gap between
the nav and the first row of content).
*/
body.vds-shell .group-content-wrapper {
padding: 0;
margin: 0;
}
body.vds-shell .group-main-content {
background: transparent;
border: none;
border-radius: 0;
margin: 0;
padding: 0;
box-shadow: none;
}
/* The ManagedAccountBanner (purple "Managing:" strip) was a
chrome island in legacy. Under vds-shell, square the corners
and let it span the full width above the home tab — flush with
the nav above and the content below. */
body.vds-shell .managed-account-banner {
border-radius: 0;
border-left: none;
border-right: none;
box-shadow: none;
margin: 0;
}
body.vds-shell .managed-account-banner .banner-exit-btn {
border-radius: var(--radius-full);
}
/* ============================================================
VIDARIA 1.1 — SIDEBAR COMPONENT EXTRACTION (2026-05-30)
------------------------------------------------------------
The sidebar is now a real component () rendered
on EVERY non-mapping tab via the main rail (.vds-main-rail).
Per-tab functions live in the secondary rail
(.vds-sidebar-secondary) immediately to its right. The
on-shift list is one unified card (.vds-onshift-card) shared
across all tabs.
============================================================ */
/* ── Main rail: GroupSidebar mounts directly inside the
.sidebar-container (no inner .sidebar wrapper). The container
already has width/border/overflow from the Phase A rules
above; just make its own scrollbar match. ── */
body.vds-shell .vds-main-rail::-webkit-scrollbar { width: 6px; }
body.vds-shell .vds-main-rail::-webkit-scrollbar-track { background: transparent; }
body.vds-shell .vds-main-rail::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 3px;
}
body.vds-shell .vds-main-rail::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
/* ── Secondary rail: fixed, always visible when a tab has
controls. Narrower than the main rail. Sits as a flex sibling
between the main rail and the main content. ── */
body.vds-shell .vds-sidebar-secondary {
width: 208px;
min-width: 208px;
max-width: 208px;
flex-shrink: 0;
height: 100%;
background: var(--white);
border-right: 1px solid var(--gray-300);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 0;
}
body.vds-shell .vds-sidebar-secondary::-webkit-scrollbar { width: 6px; }
body.vds-shell .vds-sidebar-secondary::-webkit-scrollbar-track { background: transparent; }
body.vds-shell .vds-sidebar-secondary::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 3px;
}
/* The per-tab control sections (.sidebar-section) used to inherit
chrome from `body.vds-shell .sidebar > .sidebar-section`. In the
secondary rail there is no .sidebar ancestor, so re-apply a
tighter padding + divider here (rail is intentionally compact). */
body.vds-shell .vds-sidebar-secondary .sidebar-section {
padding: 10px 12px;
margin: 0;
border-bottom: 1px solid var(--gray-150, #eef0f3);
}
body.vds-shell .vds-sidebar-secondary .date-range-bubble {
background: var(--white);
border: none;
border-bottom: 1px solid var(--gray-150, #eef0f3);
border-radius: 0;
box-shadow: none;
padding: 10px 12px;
margin: 0;
}
/* ── Compact typography + controls inside the secondary rail ──
"Thinner + smaller buttons/text" (user, 2026-05-31). All scoped
to the rail so the main content + main rail are untouched. */
body.vds-shell .vds-sidebar-secondary h3,
body.vds-shell .vds-sidebar-secondary h4,
body.vds-shell .vds-sidebar-secondary h5 {
font-size: 12px;
font-weight: var(--font-weight-semibold);
margin: 0 0 8px 0;
color: var(--gray-800);
}
body.vds-shell .vds-sidebar-secondary p,
body.vds-shell .vds-sidebar-secondary label {
font-size: 11px;
line-height: 1.4;
}
body.vds-shell .vds-sidebar-secondary .date-range-bar { font-size: 11px; }
body.vds-shell .vds-sidebar-secondary .drb-date { font-size: 11px; }
/* Buttons: shrink the chunky legacy btn-action / btn-primary in the rail. */
body.vds-shell .vds-sidebar-secondary .btn,
body.vds-shell .vds-sidebar-secondary .btn-action,
body.vds-shell .vds-sidebar-secondary .btn-primary {
font-size: 11px;
padding: 6px 10px;
border-radius: var(--radius-md);
line-height: 1.3;
}
body.vds-shell .vds-sidebar-secondary .help-icon-button {
width: 16px;
height: 16px;
font-size: 10px;
line-height: 1;
}
/* Search box + toggles */
body.vds-shell .vds-sidebar-secondary .officer-name-input {
font-size: 11px;
padding: 6px 8px;
}
body.vds-shell .vds-sidebar-secondary .toggle-switch label { font-size: 10px; }
/* Report-type grid pills — tighter in the narrower rail */
body.vds-shell .vds-sidebar-secondary .report-type-btn {
font-size: 11px;
padding: 6px 8px;
}
body.vds-shell .vds-sidebar-secondary .report-type-badge { font-size: 10px; }
/* ============================================================
DASHBOARD HEADER — Single Group / Compare Groups tabs +
inline date-range editor (lives in the main section, moved out
of the secondary rail). Vidaria shell only. (2026-05-31)
============================================================ */
body.vds-shell .vds-dash-wrap {
display: flex;
flex-direction: column;
/* min-width:0 lets the wide compare table scroll inside its own
overflow-x:auto wrap instead of forcing the whole page to scroll
(flexbox children default to min-width:auto = intrinsic content). */
min-width: 0;
}
body.vds-shell .vds-dash-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 10px 16px;
border-bottom: 1px solid var(--gray-200);
flex-shrink: 0;
flex-wrap: wrap;
}
body.vds-shell .vds-dash-tabs {
display: inline-flex;
background: var(--gray-100);
border: 1px solid var(--gray-200);
border-radius: var(--radius-full);
padding: 2px;
gap: 2px;
}
body.vds-shell .vds-dash-tab {
border: none;
background: transparent;
color: var(--gray-600);
font-size: 12px;
font-weight: var(--font-weight-semibold);
padding: 5px 14px;
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
body.vds-shell .vds-dash-tab:hover { color: var(--gray-900); }
body.vds-shell .vds-dash-tab.active {
background: var(--vidaria-blue, #103255);
color: var(--white);
}
body.vds-shell .vds-dash-daterange {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
}
body.vds-shell .vds-dash-daterange__text {
font-size: 12px;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
font-variant-numeric: tabular-nums;
}
body.vds-shell .vds-dash-daterange__edit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid var(--gray-300);
background: var(--white);
border-radius: var(--radius-md);
color: var(--vidaria-blue, #103255);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
body.vds-shell .vds-dash-daterange__edit:hover {
background: var(--vidaria-blue-tint, #f0f5fb);
border-color: var(--vidaria-blue-pale, rgba(16,50,85,0.25));
}
/* ── Weather chip in CURRENT GROUP section ── */
body.vds-shell .vds-sb-weather {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 var(--space-3);
padding: 6px 10px;
background: var(--vidaria-blue-tint, #f0f5fb);
border: 1px solid var(--vidaria-blue-pale, rgba(16,50,85,0.12));
border-radius: var(--radius-md);
width: fit-content;
max-width: 100%;
}
body.vds-shell .vds-sb-weather__icon {
color: var(--vidaria-blue, #103255);
flex-shrink: 0;
}
body.vds-shell .vds-sb-weather__temp {
font-size: 14px;
font-weight: var(--font-weight-bold);
color: var(--vidaria-blue, #103255);
font-variant-numeric: tabular-nums;
}
body.vds-shell .vds-sb-weather__cond {
font-size: 11px;
font-weight: var(--font-weight-medium);
color: var(--gray-500);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── No-address weather prompt + inline editor ──────────────
Shown in the weather slot when the group has no address/coords.
Clicking opens an inline address input that geocodes + persists. */
body.vds-shell .vds-sb-weather-prompt {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
margin: 0 0 var(--space-3);
padding: 7px 10px;
background: var(--gray-50);
border: 1px dashed var(--gray-300);
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
body.vds-shell .vds-sb-weather-prompt:hover {
background: var(--vidaria-blue-tint, #f0f5fb);
border-color: var(--vidaria-blue-pale, rgba(16,50,85,0.25));
}
body.vds-shell .vds-sb-weather-prompt__icon { color: var(--gray-400); flex-shrink: 0; }
body.vds-shell .vds-sb-weather-prompt__text {
flex: 1;
min-width: 0;
font-size: 11px;
font-weight: var(--font-weight-medium);
color: var(--gray-600);
line-height: 1.35;
}
body.vds-shell .vds-sb-weather-prompt__edit {
color: var(--vidaria-blue, #103255);
flex-shrink: 0;
}
body.vds-shell .vds-sb-weather-edit {
margin: 0 0 var(--space-3);
}
body.vds-shell .vds-sb-weather-edit__row {
display: flex;
align-items: center;
gap: 4px;
}
body.vds-shell .vds-sb-weather-edit__input {
flex: 1;
min-width: 0;
padding: 6px 8px;
font-size: 12px;
color: var(--gray-800);
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: var(--radius-sm);
}
body.vds-shell .vds-sb-weather-edit__input:focus {
outline: none;
border-color: var(--vidaria-blue, #103255);
box-shadow: 0 0 0 2px var(--vidaria-blue-pale, rgba(16,50,85,0.15));
}
body.vds-shell .vds-sb-weather-edit__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: var(--radius-sm);
color: var(--gray-500);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
body.vds-shell .vds-sb-weather-edit__btn:hover { background: var(--gray-100); color: var(--gray-800); }
body.vds-shell .vds-sb-weather-edit__btn:disabled { opacity: 0.6; cursor: default; }
body.vds-shell .vds-sb-weather-edit__btn--save {
background: var(--vidaria-blue, #103255);
border-color: var(--vidaria-blue, #103255);
color: var(--white);
}
body.vds-shell .vds-sb-weather-edit__btn--save:hover {
background: var(--vidaria-blue, #103255);
color: var(--white);
filter: brightness(1.1);
}
body.vds-shell .vds-sb-weather-edit__error {
margin-top: 4px;
font-size: 10px;
color: var(--danger, #dc2626);
}
body.vds-shell .vds-spin { animation: vds-spin 0.8s linear infinite; }
@keyframes vds-spin { to { transform: rotate(360deg); } }
/* ── Unified on-shift list + cards ──────────────────────────
Retains the legacy color scheme + glassmorphic look (user lock
2026-05-30): bright-blue tint fill, blue border, soft blur. The
only rebrand change vs. the old inline cards is SVG icons. ── */
body.vds-shell .vds-onshift-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
}
body.vds-shell .vds-onshift-card {
background: rgba(0, 102, 255, 0.10);
border: 1px solid rgba(0, 102, 255, 0.30);
border-radius: var(--radius-md);
padding: 8px 10px;
width: 100%;
box-sizing: border-box;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.vds-shell .vds-onshift-card:hover {
background: rgba(0, 102, 255, 0.16);
border-color: rgba(0, 102, 255, 0.45);
}
body.vds-shell .vds-onshift-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 4px;
}
body.vds-shell .vds-onshift-card__id {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
body.vds-shell .vds-onshift-card__name {
font-size: 13px;
font-weight: var(--font-weight-semibold);
color: var(--gray-900, #1a1a1a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vds-shell .vds-onshift-card__role {
font-size: 8px;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
color: #9c27b0;
background: rgba(156, 39, 176, 0.10);
padding: 1px 4px;
border-radius: 3px;
flex-shrink: 0;
}
body.vds-shell .vds-onshift-card__meta {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
body.vds-shell .vds-onshift-card__move {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: var(--font-weight-semibold);
background: rgba(100, 100, 100, 0.18);
color: var(--gray-500, #666);
}
body.vds-shell .vds-onshift-card__move.is-moving {
background: rgba(0, 102, 255, 0.28);
color: #0066ff;
}
body.vds-shell .vds-onshift-card__batt {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
body.vds-shell .vds-onshift-card__charge { color: var(--warning, #f59e0b); }
body.vds-shell .vds-onshift-card__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 10px;
color: var(--gray-500, #666);
}
body.vds-shell .vds-onshift-card__device {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
}
body.vds-shell .vds-onshift-card__device-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
}
body.vds-shell .vds-onshift-card__seen { white-space: nowrap; flex-shrink: 0; }
/* Optional per-page extra metrics block on the base officer card. */
body.vds-shell .vds-onshift-card__extra {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(0, 102, 255, 0.18);
display: flex;
flex-direction: column;
gap: 2px;
}
body.vds-shell .vds-onshift-card__extra-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
}
body.vds-shell .vds-onshift-card__extra-label { color: var(--gray-500, #666); }
body.vds-shell .vds-onshift-card__extra-value { font-weight: var(--font-weight-semibold); color: var(--gray-800); }
body.vds-shell .vds-onshift-empty {
color: var(--gray-400) !important;
font-style: italic;
font-size: var(--font-size-xs);
text-align: left;
margin: 0;
padding: 4px 0;
}
/* ── Live vehicle card (mirrors officer card, blue-cyan accent) ── */
body.vds-shell .vds-onshift-vehicles-label {
display: flex;
align-items: center;
gap: 6px;
margin: var(--space-2) 0 4px;
padding-top: var(--space-2);
border-top: 1px solid var(--gray-200);
font-size: 12px;
font-weight: var(--font-weight-semibold);
color: var(--gray-600);
}
body.vds-shell .vds-onshift-vcard {
background: rgba(33, 150, 243, 0.10);
border: 1px solid rgba(33, 150, 243, 0.30);
border-radius: var(--radius-md);
padding: 8px 10px;
width: 100%;
box-sizing: border-box;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.vds-shell .vds-onshift-vcard__tag {
font-size: 8px;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
color: #2196F3;
background: rgba(33, 150, 243, 0.10);
padding: 1px 4px;
border-radius: 3px;
flex-shrink: 0;
}
body.vds-shell .vds-onshift-vcard__status {
padding: 2px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: var(--font-weight-semibold);
background: rgba(100, 100, 100, 0.20);
color: var(--gray-500, #666);
}
body.vds-shell .vds-onshift-vcard__status.is-moving { background: rgba(33, 150, 243, 0.30); color: #1565c0; }
body.vds-shell .vds-onshift-vcard__status.is-idling { background: rgba(255, 152, 0, 0.20); color: #e65100; }