732 lines
20 KiB
CSS
732 lines
20 KiB
CSS
/* ════════════════════════════════════════════════════════════════════════
|
|
table.css — Day tabs, filter profiles, column toggles, hourly table,
|
|
now-row and night-row decorations.
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── 5. DAY TABS (today / tomorrow / etc.) ─────────────────────────── */
|
|
/* Note: each tab's background colour comes from inline styles in
|
|
app.js (the confidence bands). This file only handles spacing,
|
|
typography, and the active-tab underline. */
|
|
|
|
/* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */
|
|
.utci-day-tabs-wrap {
|
|
position: relative;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Edge fade gradients — only show when there's content to scroll to. */
|
|
.utci-day-tabs-wrap::before,
|
|
.utci-day-tabs-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 2px; /* leave the underline border visible */
|
|
width: 40px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.utci-day-tabs-wrap::before {
|
|
left: 0;
|
|
background: linear-gradient(to right, #f5edd6 0%, rgba(245,237,214,0) 100%);
|
|
}
|
|
.utci-day-tabs-wrap::after {
|
|
right: 0;
|
|
background: linear-gradient(to left, #f5edd6 0%, rgba(245,237,214,0) 100%);
|
|
}
|
|
.utci-day-tabs-wrap.fade-left::before { opacity: 1; }
|
|
.utci-day-tabs-wrap.fade-right::after { opacity: 1; }
|
|
|
|
/* Chevron buttons — sit on top of the fades. */
|
|
.utci-day-scroll {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
border: 1px solid #d4c0a0;
|
|
background: #fffcf2;
|
|
color: #6b4f2a;
|
|
font-size: 20px;
|
|
font-family: Fraunces, serif;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0 2px 0;
|
|
box-shadow: 0 1px 4px rgba(80,55,20,0.12);
|
|
transition: opacity 0.2s, background 0.15s, transform 0.15s;
|
|
}
|
|
.utci-day-scroll:hover {
|
|
background: #fef3dc;
|
|
}
|
|
.utci-day-scroll.left { left: -2px; }
|
|
.utci-day-scroll.right { right: -2px; }
|
|
.utci-day-scroll.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.utci-day-tabs {
|
|
display: flex;
|
|
border-bottom: 2px solid #d4c0a0;
|
|
overflow-x: auto;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* old Edge */
|
|
}
|
|
.utci-day-tabs::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari */
|
|
}
|
|
|
|
.utci-day-tab {
|
|
flex-shrink: 0;
|
|
padding: 12px 24px;
|
|
cursor: pointer;
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
background: transparent;
|
|
border: none;
|
|
color: #b09870;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.utci-day-tab:hover {
|
|
color: #6b4f2a;
|
|
}
|
|
|
|
.utci-day-tab.active {
|
|
color: #c8922a;
|
|
border-bottom-color: #c8922a;
|
|
}
|
|
|
|
/* The "Mon 12 May" date underneath each tab name */
|
|
.utci-day-date {
|
|
font-family: Fraunces, serif;
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
display: block;
|
|
margin-top: 3px;
|
|
color: inherit;
|
|
}
|
|
|
|
|
|
/* ── 5b. FILTER PROFILES (the "Profile: Basic Urban …" bar) ───────── */
|
|
|
|
.filter-profiles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
padding: 10px 14px;
|
|
background: #fdf8ee;
|
|
border: 1.5px solid #d4c0a0;
|
|
border-bottom: none; /* merges visually with the col-toggles bar below */
|
|
}
|
|
|
|
.filter-profiles-label {
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #7a5c2a;
|
|
margin-right: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Vertical rule separating general-use profiles from technical ones */
|
|
.profile-divider {
|
|
display: inline-block;
|
|
width: 1px;
|
|
align-self: stretch;
|
|
background: #c9b08a;
|
|
margin: 2px 6px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.profile-btn {
|
|
padding: 5px 13px;
|
|
cursor: pointer;
|
|
border: 1.5px solid #c9b08a;
|
|
background: #f5edd6;
|
|
color: #6b4228;
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
transition: all 0.15s;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.profile-btn:hover {
|
|
border-color: #c8922a;
|
|
color: #6b4f2a;
|
|
background: #fef3dc;
|
|
}
|
|
|
|
.profile-btn.active {
|
|
background: #c8922a;
|
|
border-color: #c8922a;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* ── 6. COLUMN TOGGLES (the "Columns: Hour Air RH ..." bar) ────────── */
|
|
|
|
.col-toggles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
padding: 10px 14px;
|
|
background: #fdf8ee;
|
|
border: 1.5px solid #d4c0a0;
|
|
}
|
|
|
|
.col-toggles-label {
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #7a5c2a;
|
|
margin-right: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* The little pill buttons */
|
|
.col-toggle {
|
|
padding: 5px 13px;
|
|
cursor: pointer;
|
|
border: 1.5px solid #c9b08a;
|
|
background: #f5edd6;
|
|
color: #6b4228;
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
transition: all 0.15s;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.col-toggle:hover {
|
|
border-color: #c8922a;
|
|
color: #6b4f2a;
|
|
background: #fef3dc;
|
|
}
|
|
|
|
/* The "pressed-in" active look */
|
|
.col-toggle.on {
|
|
background: #c8922a;
|
|
border-color: #c8922a;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── Vehicle group: select + windows-open checkbox fused together ── */
|
|
.col-toggle-group {
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
/* Collapse any whitespace-node gap between the cs-wrap span and cs-vent */
|
|
font-size: 0;
|
|
}
|
|
.col-toggle-group > * {
|
|
font-size: 12px; /* restore font size for children */
|
|
}
|
|
|
|
/* Remove the right border + radius on the cs-wrap/cs-btn so it butts
|
|
flush with the VentPill. The cs-wrap is the direct child, so we
|
|
target its inner cs-btn via the grouped-left class on the button. */
|
|
.col-toggle-group .cs-wrap {
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
}
|
|
.col-toggle-group .grouped-left {
|
|
border-right: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
.col-toggle-group .cs-wrap:only-child .grouped-left,
|
|
.col-toggle-group .cs-wrap:last-child .grouped-left {
|
|
border-right: 1.5px solid #c9b08a !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
|
|
/* ── 7. HOURLY TABLE ────────────────────────────────────────────────── */
|
|
|
|
.utci-table-wrap {
|
|
/* No overflow on this wrapper — having any overflow here would make
|
|
the wrapper a scroll container, which would break sticky-to-viewport
|
|
on the .utci-thead-sticky strip inside.
|
|
The body scroller (.utci-tbody-scroll) owns the horizontal scrollbar. */
|
|
border: 1.5px solid #c9b08a;
|
|
background: #fffcf2;
|
|
position: relative; /* needed for ::before / ::after pseudo-element indicators */
|
|
}
|
|
|
|
/* ── SCROLL INDICATORS ──────────────────────────────────────────────────
|
|
Fade + chevron overlays on the left/right edges of the table wrap.
|
|
They appear only when there is content to scroll in that direction,
|
|
driven by the scroll-fade-left / scroll-fade-right classes toggled by JS. */
|
|
.utci-table-wrap::before,
|
|
.utci-table-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 48px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 6; /* above sticky header (z-index 5) */
|
|
}
|
|
|
|
/* Left fade — warm cream fading to transparent rightward */
|
|
.utci-table-wrap::before {
|
|
left: 0;
|
|
background: linear-gradient(to right, rgba(240,228,196,0.92) 0%, transparent 100%);
|
|
}
|
|
|
|
/* Right fade — warm cream fading to transparent leftward */
|
|
.utci-table-wrap::after {
|
|
right: 0;
|
|
background: linear-gradient(to left, rgba(240,228,196,0.92) 0%, transparent 100%);
|
|
}
|
|
|
|
.utci-table-wrap.scroll-fade-left::before { opacity: 1; }
|
|
.utci-table-wrap.scroll-fade-right::after { opacity: 1; }
|
|
|
|
/* Chevron arrows — sit on top of the fade, centred vertically */
|
|
.utci-table-wrap .utci-scroll-chevron {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 7;
|
|
pointer-events: none;
|
|
color: #8a6a3a;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
user-select: none;
|
|
}
|
|
.utci-table-wrap .utci-scroll-chevron.left { left: 6px; }
|
|
.utci-table-wrap .utci-scroll-chevron.right { right: 6px; }
|
|
|
|
.utci-table-wrap.scroll-fade-left .utci-scroll-chevron.left { opacity: 1; }
|
|
.utci-table-wrap.scroll-fade-right .utci-scroll-chevron.right { opacity: 1; }
|
|
|
|
/* Grab cursor on the body scroller to hint drag-to-scroll */
|
|
.utci-tbody-scroll {
|
|
cursor: grab;
|
|
user-select: none; /* prevent text highlighting during drag */
|
|
-webkit-user-select: none;
|
|
}
|
|
.utci-tbody-scroll:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* ── STICKY HEADER STRIP ────────────────────────────────────────────────
|
|
Sits above the body and locks to the top of the viewport while the
|
|
page scrolls. Has overflow:hidden so the inner .utci-thead-track can
|
|
be translateX'd by JS to follow the body's scrollLeft. */
|
|
.utci-thead-sticky {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
background: #f0e4c4;
|
|
border-bottom: 2px solid #c9b08a;
|
|
box-shadow: 0 2px 5px rgba(74, 52, 32, 0.10);
|
|
}
|
|
|
|
/* The shifted track inside the sticky header — JS sets transform:translate3d
|
|
to keep its columns aligned with the body scroller's scrollLeft. */
|
|
.utci-thead-track {
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Body scroller — owns the horizontal scrollbar for the whole table. */
|
|
.utci-tbody-scroll {
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.utci-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
/* Fixed layout so the explicit per-cell widths set by the JS width-sync
|
|
(see useLayoutEffect in app.js) are actually enforced. Without
|
|
this the browser's auto layout treats those widths as suggestions and
|
|
redistributes space, which makes the header and body columns drift
|
|
apart the further right you scroll. */
|
|
table-layout: fixed;
|
|
}
|
|
|
|
/* Column headings (Hour, Air, RH, Wind...).
|
|
NOTE: stickiness is handled by the .utci-thead-sticky wrapper, not
|
|
the <th> itself — see the new wrapper rules higher up. */
|
|
.utci-table th {
|
|
background: #f0e4c4;
|
|
color: #6b4f2a;
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
font-weight: 700;
|
|
padding: 14px 12px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.utci-table th {
|
|
font-size: 10px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
}
|
|
|
|
/* The Hour column aligns left, the rest align right */
|
|
.utci-table th:first-child,
|
|
.utci-table td:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
/* The "°C" / "m/s" etc. unit underneath each heading */
|
|
.utci-table th .col-unit {
|
|
display: block;
|
|
color: #c8922a;
|
|
font-size: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.utci-table th .col-unit {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
.utci-table tbody tr {
|
|
border-bottom: 1px solid #ede4cc;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.utci-table tbody tr:hover {
|
|
background: #fef8ea;
|
|
}
|
|
|
|
.utci-table td {
|
|
padding: 10px 12px;
|
|
text-align: right;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-variant-numeric: tabular-nums; /* stops digits jiggling between rows */
|
|
white-space: nowrap;
|
|
color: #4a3420;
|
|
/* Baseline minimum column width — the JS width-sync uses max(60, head,
|
|
body) so very-narrow data columns ("Air 5.0") still feel comfortable
|
|
to read instead of being squashed. */
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* Subtle vertical column dividers — same pale cream as the row
|
|
dividers so the table reads as a soft grid, not a hard one. The
|
|
last column has no divider so it doesn't double-up with the
|
|
container border. */
|
|
.utci-table th:not(:last-child),
|
|
.utci-table td:not(:last-child) {
|
|
border-right: 1px solid #ede4cc;
|
|
}
|
|
|
|
/* The Dir column is centered on both desktop and mobile so the
|
|
compass vane sits with even padding either side — especially
|
|
important on mobile where the compass label is hidden and there's
|
|
no text to balance the right-aligned content. */
|
|
.utci-table th.utci-dir-cell,
|
|
.utci-table td.utci-dir-cell {
|
|
text-align: center;
|
|
}
|
|
|
|
/* "Tight" header — for columns whose body content is narrower than
|
|
the default tracked-out header would suggest (Air, Pcpt). Reducing
|
|
the letter-spacing shrinks the heading's natural width so it stops
|
|
driving the column wider than the body needs. Right-aligned values */
|
|
.utci-table th.utci-tight-head {
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ── CLICKABLE COLUMN HEADERS ───────────────────────────────────────────
|
|
.col-info-th makes every <th> show a pointer cursor and a subtle hover
|
|
tint to signal it can be clicked for a description popup. */
|
|
.utci-table th.col-info-th {
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.utci-table th.col-info-th:hover {
|
|
background: #e8d8a8;
|
|
}
|
|
|
|
/* ── COLUMN DESCRIPTION POPUP ───────────────────────────────────────────
|
|
Fixed-position card that appears below a clicked column header.
|
|
JS sets left/top via inline style (centred on the clicked th). */
|
|
.col-info-popup {
|
|
position: fixed; /* set by JS — stays in viewport regardless of scroll */
|
|
z-index: 200;
|
|
width: 260px;
|
|
background: #fffcf2;
|
|
border: 1.5px solid #c9b08a;
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 16px rgba(74,52,32,0.18);
|
|
padding: 14px 16px 16px;
|
|
pointer-events: all;
|
|
}
|
|
/* Arrow points DOWN toward the column header (default — popup is above the th) */
|
|
.col-info-popup::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -7px;
|
|
left: var(--arrow-left, 50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #fffcf2;
|
|
border-right: 1.5px solid #c9b08a;
|
|
border-bottom: 1.5px solid #c9b08a;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
}
|
|
/* Arrow points UP toward the column header (popup is below the th) */
|
|
.col-info-popup.col-info-popup--below::after {
|
|
bottom: auto;
|
|
top: -7px;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
border-left: 1.5px solid #c9b08a;
|
|
border-top: 1.5px solid #c9b08a;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
}
|
|
.col-info-title {
|
|
display: block;
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #4a3420;
|
|
margin-bottom: 6px;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
.col-info-desc {
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 12px;
|
|
color: #6b4f2a;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
.col-info-close {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 8px;
|
|
background: none;
|
|
border: none;
|
|
font-size: 16px;
|
|
color: #a08060;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
padding: 0 2px;
|
|
}
|
|
.col-info-close:hover {
|
|
color: #4a3420;
|
|
}
|
|
|
|
|
|
/* ── 8. NOW-ROW & NIGHT-ROW DECORATIONS ─────────────────────────────── */
|
|
|
|
/* "Currently this hour" — the highlighted row.
|
|
The row gets a cream-yellow background and darker text. No left
|
|
stripe or pip — the colour shift alone signals "this is now". */
|
|
.utci-table tbody tr.is-now {
|
|
background: #fff8e4 !important;
|
|
}
|
|
|
|
.utci-table tbody tr.is-now td {
|
|
color: #1e1208;
|
|
/* Brass bracket framing the current-hour row top and bottom — clean,
|
|
definitive, no left stripe needed. */
|
|
border-top: 2px solid #c8922a;
|
|
border-bottom: 2px solid #c8922a;
|
|
}
|
|
|
|
/* Night-time hours get a slightly muted text colour */
|
|
.utci-table tbody tr.is-night td {
|
|
color: #7a5c30;
|
|
}
|
|
|
|
/* The time cell — uses the display serif instead of monospace */
|
|
.utci-time {
|
|
font-family: Fraunces, serif !important;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #1e1208 !important;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.utci-time {
|
|
font-size: 15px;
|
|
}
|
|
.utci-cell-hero {
|
|
font-size: 15px !important;
|
|
padding: 5px 12px;
|
|
min-width: 60px;
|
|
}
|
|
}
|
|
|
|
/* The coloured pill inside UTCI / UTCI+P cells.
|
|
The pill's BACKGROUND comes from inline styles in app.js
|
|
(the utciCategory() function decides which thermal-stress colour
|
|
to apply). This rule just handles the pill shape. */
|
|
.utci-cell {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Hero variant used for the UTCI+P column — the headline number.
|
|
Bigger, bolder, more breathing room so the eye lands here first. */
|
|
.utci-cell-hero {
|
|
padding: 6px 4px;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
min-width: 63px;
|
|
letter-spacing: 0.01em;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset, 0 0 0 1px rgba(255,255,255,0.08) inset;
|
|
}
|
|
|
|
.utci-band-label {
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
|
|
/* ── FILTER PROFILES + COLUMN TOGGLES — mobile fixes ───────────────── */
|
|
@media (max-width: 640px) {
|
|
|
|
/* ── Profile bar ────────────────────────────────────────────────────
|
|
Keep flex-wrap but make every child a consistent ~31% width so
|
|
they land in tidy rows of 3. The label gets its own full row. */
|
|
.filter-profiles {
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
padding: 10px 10px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.filter-profiles-label {
|
|
flex: 0 0 100%; /* own row */
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Hide vertical pipe dividers — not needed when wrapping */
|
|
.profile-divider {
|
|
display: none;
|
|
}
|
|
|
|
/* Plain profile buttons: fixed ~31% so 3 fit per row */
|
|
.profile-btn {
|
|
flex: 0 0 calc(33.33% - 4px);
|
|
text-align: center;
|
|
padding: 7px 2px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.03em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* CustomSelect (Activities / Places dropdowns) — same width as buttons */
|
|
.filter-profiles .cs-wrap {
|
|
flex: 0 0 calc(33.33% - 4px);
|
|
}
|
|
.filter-profiles .cs-btn {
|
|
width: 100%;
|
|
padding: 7px 6px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.03em;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ── Column toggles bar ─────────────────────────────────────────────
|
|
Same approach — label full row, toggles at ~31% each. */
|
|
.col-toggles {
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
padding: 10px 10px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.col-toggles-label {
|
|
flex: 0 0 100%;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.col-toggle {
|
|
flex: 0 0 calc(33.33% - 4px);
|
|
text-align: center;
|
|
padding: 7px 2px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
/* Pollen CustomSelect in col-toggles — match toggle width */
|
|
.col-toggles .cs-wrap {
|
|
flex: 0 0 calc(33.33% - 4px);
|
|
}
|
|
.col-toggles .cs-btn {
|
|
width: 100%;
|
|
padding: 7px 6px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.03em;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Fused vehicle group (select + vent pill): spans 2 slots = ~65% */
|
|
.col-toggle-group {
|
|
flex: 0 0 calc(66.66% - 1px);
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
}
|
|
.col-toggle-group .cs-wrap {
|
|
flex: 1;
|
|
}
|
|
.col-toggle-group .cs-btn {
|
|
width: 100%;
|
|
font-size: 11px;
|
|
padding: 7px 6px;
|
|
justify-content: center;
|
|
}
|
|
}
|