/* Groundworks portal – Cyden Homes. Bootstrap 5 + a few design tokens from the Figma file. */
:root {
    --gw-navy: #1c3461;
    --gw-navy-600: #243f72;
    --gw-gold: #c9a24b;
    --gw-bg: #eef1f5;
    --gw-surface: #ffffff;
    --gw-border: #e4e7ec;
    --gw-text: #1d2433;
    --gw-muted: #6b7280;
    --gw-radius: 12px;

    /* Type scale: use these instead of one-off sizes */
    --gw-fs-2xs: .6875rem;  /* 11px – uppercase labels: table headers, nav section labels, eyebrows */
    --gw-fs-xs: .75rem;     /* 12px – badges, statuses, counts, secondary lines under a name */
    --gw-fs-sm: .8125rem;   /* 13px – helper text, captions, small buttons */
    --gw-fs-base: .875rem;  /* 14px – body, table cells, inputs, buttons */
    --gw-fs-md: 1rem;       /* 16px – card and section titles */
    --gw-fs-lg: 1.125rem;   /* 18px – popup titles */
    --gw-fs-xl: 1.5rem;     /* 24px – page titles */
    --gw-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --gw-shadow-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--gw-text);
    /* Bootstrap uses this for modals, inputs, dropdowns and the sidebar, so keep it white; the page grey is set on body. */
    --bs-body-bg: var(--gw-surface);
    --bs-primary: var(--gw-navy);
    --bs-primary-rgb: 28, 52, 97;
    --bs-link-color: var(--gw-navy);
    --bs-link-color-rgb: 28, 52, 97;
    --bs-link-hover-color: var(--gw-navy-600);
    --bs-border-color: var(--gw-border);
}

body { font-size: var(--gw-fs-base); background: var(--gw-bg); }
a { text-decoration: none; }
.text-navy { color: var(--gw-navy); }

.btn-primary {
    --bs-btn-bg: var(--gw-navy); --bs-btn-border-color: var(--gw-navy);
    --bs-btn-hover-bg: var(--gw-navy-600); --bs-btn-hover-border-color: var(--gw-navy-600);
    --bs-btn-active-bg: var(--gw-navy-600); --bs-btn-active-border-color: var(--gw-navy-600);
}
.btn-outline-secondary { --bs-btn-color: var(--gw-text); --bs-btn-border-color: var(--gw-border); --bs-btn-hover-bg: #f0f2f5; --bs-btn-hover-color: var(--gw-text); --bs-btn-hover-border-color: var(--gw-border); }
.pagination { --bs-pagination-active-bg: var(--gw-navy); --bs-pagination-active-border-color: var(--gw-navy); --bs-pagination-color: var(--gw-text); }
.form-control:focus, .form-select:focus { border-color: var(--gw-navy); box-shadow: 0 0 0 .2rem rgba(28, 52, 97, .12); }
.gw-icon-btn { color: var(--gw-muted); padding: .25rem .5rem; }
.gw-icon-btn:hover { color: var(--gw-text); }

/* Shell */
.gw-shell { display: flex; min-height: 100vh; }
.gw-sidebar { width: 248px; flex-shrink: 0; background: var(--gw-surface) !important; /* offcanvas-lg makes it transparent on desktop */ display: flex; flex-direction: column; padding: 1.1rem .85rem; }
/* On desktop the sidebar floats as a raised panel so it stands off the page background. */
@media (min-width: 992px) {
    .gw-shell { padding-left: .75rem; }
    .gw-sidebar { position: sticky; top: .75rem; height: calc(100vh - 1.5rem); margin: .75rem 0; border: 1px solid var(--gw-border); border-radius: 16px; box-shadow: var(--gw-shadow-lg); z-index: 2; }
}
.gw-brand { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem 1.25rem; color: var(--gw-navy); }
.gw-brand strong { display: block; font-size: var(--gw-fs-sm); letter-spacing: .04em; }
.gw-brand small { display: block; font-size: var(--gw-fs-2xs); color: var(--gw-gold); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.gw-nav { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.gw-nav-label { font-size: var(--gw-fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gw-muted); padding: 1rem .6rem .35rem; }
.gw-nav a { position: relative; display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px; color: #3f4756; font-weight: 500; }
.gw-nav a i { font-size: 1rem; color: var(--gw-muted); }
.gw-nav a:hover { background: #f2f4f7; }
.gw-nav a.active { background: #eef1f7; color: var(--gw-navy); }
.gw-nav a.active::before { content: ""; position: absolute; left: -.85rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--gw-gold); }
.gw-nav-count { margin-left: auto; min-width: 1.35rem; padding: 0 .4rem; border-radius: 99px; background: #f79009; color: #fff; font-size: var(--gw-fs-2xs); font-weight: 600; line-height: 1.35rem; text-align: center; }
.gw-nav a.active i { color: var(--gw-navy); }
.gw-user { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--gw-border); padding: .9rem .4rem 0; }
.gw-user strong { display: block; font-size: var(--gw-fs-sm); }
.gw-user small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-muted); }

.gw-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-topbar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.75rem; background: var(--gw-surface); border-bottom: 1px solid var(--gw-border); box-shadow: var(--gw-shadow-sm); }
@media (min-width: 992px) {
    /* Same side gutters as the page content (and the same inner padding as the cards) so the edges line up */
    .gw-topbar { margin: .75rem 1.75rem 0; padding: .7rem 1.15rem; border: 1px solid var(--gw-border); border-radius: var(--gw-radius); }
}
/* Site switcher */
.gw-site-btn { display: flex; align-items: center; gap: .6rem; padding: .3rem .6rem .3rem .35rem; border: 1px solid var(--gw-border); border-radius: 10px; background: var(--gw-surface); color: var(--gw-text); }
.gw-site-btn:hover, .gw-site-btn[aria-expanded="true"] { background: #f7f8fa; border-color: #d4d8df; }
.gw-site-btn small { display: block; font-size: var(--gw-fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--gw-muted); line-height: 1.1; }
.gw-site-btn strong { display: block; font-weight: 600; line-height: 1.2; }
.gw-site-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--gw-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.gw-site-menu { width: 320px; padding: 0; border-color: var(--gw-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .12); overflow: hidden; }
.gw-site-search { position: relative; padding: .6rem; border-bottom: 1px solid var(--gw-border); }
.gw-site-search i { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--gw-muted); font-size: var(--gw-fs-sm); }
.gw-site-search input { padding-left: 2rem; }
.gw-site-list { max-height: 320px; overflow-y: auto; padding: .35rem; }
.gw-site-list .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 8px; padding: .5rem .6rem; white-space: normal; }
.gw-site-list .dropdown-item[hidden] { display: none; }
.gw-site-item-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: #f0f2f5; color: var(--gw-muted); display: inline-flex; align-items: center; justify-content: center; }
.gw-site-list .dropdown-item strong { display: block; font-weight: 500; }
.gw-site-list .dropdown-item small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-muted); }
.gw-site-list .dropdown-item.active, .gw-site-list .dropdown-item:active { background: #eef1f7; color: var(--gw-navy); }
.gw-site-list .dropdown-item.active .gw-site-item-icon { background: var(--gw-navy); color: #fff; }
.gw-site-list .dropdown-item.active > i { color: var(--gw-navy); }
.gw-site-empty { padding: .75rem; text-align: center; color: var(--gw-muted); font-size: var(--gw-fs-sm); }
.gw-site-footer { border-top: 1px solid var(--gw-border); padding: .35rem; background: #fafbfc; }
.gw-site-footer .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 8px; padding: .5rem .6rem; white-space: normal; }
.gw-site-footer .dropdown-item strong { display: block; font-weight: 500; }
.gw-site-footer .dropdown-item small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-muted); }
.gw-site-footer .dropdown-item:hover .gw-site-item-icon { background: var(--gw-navy); color: #fff; }

/* Settings */
.gw-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .4rem; }
.gw-codes code { background: #fff; border: 1px solid #f0d79a; border-radius: 6px; padding: .3rem .5rem; color: var(--gw-text); text-align: center; }
.gw-qr { padding: 12px; border: 1px solid var(--gw-border); border-radius: 12px; display: inline-block; background: #fff; }
.gw-key { font-size: var(--gw-fs-md); background: #f3f4f6; padding: .35rem .6rem; border-radius: 6px; color: var(--gw-text); letter-spacing: .04em; }
.gw-steps { padding-left: 1.1rem; margin: 0; }
.gw-steps li { margin-bottom: 1rem; }
.gw-icon-btn.active { color: var(--gw-navy); }
.gw-crumb { color: var(--gw-muted); border-left: 1px solid var(--gw-border); padding-left: .75rem; }
.gw-live { font-size: var(--gw-fs-sm); color: var(--gw-muted); display: flex; align-items: center; gap: .4rem; }
.gw-dot { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; }
.gw-content { padding: 1.5rem 1.75rem 2.5rem; width: 100%; }
.gw-toast { border-radius: var(--gw-radius); }

/* Page header */
.gw-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.gw-page-head h1 { font-size: var(--gw-fs-xl); font-weight: 600; color: var(--gw-navy); margin: 0; }
.gw-day-nav { display: flex; gap: .35rem; }
.gw-day-nav .form-control { width: 10.5rem; }
.gw-page-head p { color: var(--gw-muted); margin: .2rem 0 0; }
.gw-eyebrow { font-size: var(--gw-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gw-gold); margin-bottom: .35rem; }

/* Cards & stats */
.gw-card { background: var(--gw-surface); border: 1px solid var(--gw-border); border-radius: var(--gw-radius); box-shadow: var(--gw-shadow-sm); }
.gw-card-title { font-size: var(--gw-fs-md); font-weight: 600; margin: 0; }
.gw-stat { background: var(--gw-surface); border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: 1rem 1.15rem; height: 100%; box-shadow: var(--gw-shadow-sm); }
.gw-stat-label { display: flex; justify-content: space-between; font-size: var(--gw-fs-sm); font-weight: 500; color: var(--gw-muted); }
.gw-stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; margin-top: .6rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.gw-stat-value small { font-size: var(--gw-fs-xs); font-weight: 400; color: var(--gw-muted); }
.gw-stat-primary { background: var(--gw-navy); border-color: var(--gw-navy); color: #fff; }
.gw-stat-primary .gw-stat-label, .gw-stat-primary small { color: rgba(255, 255, 255, .75); }

/* Visit table */
.gw-tabs { display: flex; align-items: center; gap: 1.25rem; padding: 0 1.15rem; border-bottom: 1px solid var(--gw-border); }
.gw-tabs a { padding: .85rem 0; color: var(--gw-muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.gw-tabs a span { font-size: var(--gw-fs-xs); background: #f0f2f5; border-radius: 99px; padding: .05rem .45rem; margin-left: .25rem; }
.gw-tabs a.active { color: var(--gw-navy); border-color: var(--gw-navy); }
.gw-caption { font-size: var(--gw-fs-sm); color: var(--gw-muted); }
.gw-filters { display: flex; gap: .5rem; padding: .9rem 1.15rem; flex-wrap: wrap; }
.gw-filters .form-select, .gw-filters input[type=date] { width: auto; }
.gw-search { position: relative; flex: 1 1 260px; }
.gw-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--gw-muted); }
.gw-search input { padding-left: 2.2rem; }
.gw-chips { display: flex; align-items: center; gap: .4rem; padding: 0 1.15rem .9rem; flex-wrap: wrap; }
.gw-table { --bs-table-bg: transparent; }
.gw-table th { font-size: var(--gw-fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--gw-muted); font-weight: 600; background: #fafbfc; padding: .6rem 1.15rem; }
.gw-table td { padding: .7rem 1.15rem; border-color: #eef0f3; }
.gw-person { display: flex; align-items: center; gap: .65rem; color: var(--gw-text); }
.gw-person strong, .gw-stack span { display: block; font-weight: 500; }
.gw-person small, .gw-stack small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-muted); }
.gw-pager { display: flex; align-items: center; padding: .75rem 1.15rem; border-top: 1px solid var(--gw-border); }

/* Avatars, badges, status */
.gw-avatar { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; background: #eef1f7; color: var(--gw-navy); flex-shrink: 0; }
.gw-avatar-sm { width: 32px; height: 32px; font-size: var(--gw-fs-xs); }
.gw-avatar-photo { overflow: hidden; padding: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gw-border); }
.gw-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.gw-badge-site { background: #f0f2f5; color: #3f4756; }
.gw-row-muted td { opacity: .6; }
.gw-badge { display: inline-block; font-size: var(--gw-fs-xs); font-weight: 500; padding: .2rem .55rem; border-radius: 6px; border: 1px solid transparent; }
.gw-badge-visitor { background: #f1f2f4; color: #4b5563; }
.gw-badge-staff { background: #e8eef9; color: var(--gw-navy); }
.gw-badge-contractor { background: #fbf0dc; color: #94650f; }
.gw-badge.selected { border-color: currentColor; }
.gw-status { display: inline-block; font-size: var(--gw-fs-xs); font-weight: 500; padding: .2rem .55rem; border-radius: 6px; background: #f1f2f4; color: var(--gw-muted); }
.gw-status.onsite { background: #e8eef9; color: var(--gw-navy); }
.gw-status-warning { background: #fdf3dc; color: #94650f; }
.gw-status-danger { background: #fdecec; color: #b42318; }

/* Activity, details */
.gw-dl { display: grid; grid-template-columns: 140px 1fr; gap: .55rem 1rem; margin: 0; }
.gw-dl dt { font-weight: 500; color: var(--gw-muted); }
.gw-dl dd { margin: 0; }
.gw-selfie { aspect-ratio: 4 / 3; border-radius: 10px; background: #f0f2f5; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gw-selfie img { width: 100%; height: 100%; object-fit: cover; }

/* Login */
.gw-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gw-bg); padding: 1rem; }
.gw-auth-card { background: var(--gw-surface); border: 1px solid var(--gw-border); border-radius: 16px; padding: 2.5rem; width: 100%; max-width: 420px; }

@media (max-width: 575.98px) {
    .gw-content { padding: 1rem; }
    .gw-topbar { padding: .6rem 1rem; }
    .gw-crumb, .gw-live { display: none !important; }
    .gw-dl { grid-template-columns: 1fr; }
}

/* Activity log */
.gw-event { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--gw-fs-sm); font-weight: 500; padding: .2rem .55rem; border-radius: 6px; }
.gw-event.in { background: #e7f6ee; color: #146c43; }
.gw-event.out { background: #f1f2f4; color: #4b5563; }

/* UK number plate (rear): yellow, black capitals, blue UK band */
.gw-plate { display: inline-flex; align-items: stretch; border: 2px solid #1a1a1a; border-radius: 6px; overflow: hidden; background: #f7d117; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); vertical-align: middle; }
.gw-plate-band { display: flex; align-items: flex-end; justify-content: center; background: #00309a; color: #fff; font-size: .6rem; font-weight: 700; padding: .2rem .3rem; letter-spacing: .02em; }
.gw-plate-reg { font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: .08em; color: #111; padding: .1rem .7rem; line-height: 1.4; white-space: nowrap; }

/* Fire register */
.gw-stat-danger { background: #b42318; border-color: #b42318; color: #fff; }
.gw-stat-danger .gw-stat-label, .gw-stat-danger small { color: rgba(255, 255, 255, .8); }
.gw-fire-group-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.15rem; border-bottom: 1px solid var(--gw-border); }
.gw-fire-tick { width: 1.5rem; height: 1.5rem; cursor: pointer; }
.gw-fire-tick:checked { background-color: #198754; border-color: #198754; }
.gw-fire-row.done td { background: #f0faf4; }
.gw-fire-row.done .gw-person strong { text-decoration: line-through; text-decoration-color: rgba(25, 135, 84, .6); }
.gw-plate-sm .gw-plate-reg { font-size: .85rem; padding: 0 .45rem; }
.gw-plate-sm .gw-plate-band { font-size: .5rem; padding: .1rem .2rem; }
.gw-print-only { display: none; }

@media print {
    .gw-sidebar, .gw-topbar, .gw-no-print, .gw-toast { display: none !important; }
    .gw-shell, .gw-main { display: block; }
    .gw-content { padding: 0; }
    body { background: #fff; font-size: 11pt; }
    .gw-card, .gw-stat { break-inside: avoid; box-shadow: none; }
    .gw-stat-danger { background: #fff !important; color: #000 !important; border: 2px solid #b42318; }
    .gw-stat-danger .gw-stat-label, .gw-stat-danger small { color: #444 !important; }
    .progress { display: none; }
    .gw-print-only { display: block; }
    a { color: inherit !important; text-decoration: none !important; }
    .gw-plate, .gw-badge, .gw-status { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* "Not signed out" alert (shown on every page while anyone is still on site after closing) */
.gw-alert-overdue { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; margin-bottom: 1.25rem; border: 1px solid #fedf89; border-left: 4px solid #f79009; border-radius: var(--gw-radius); background: #fffaeb; color: #7a4a06; box-shadow: var(--gw-shadow-sm); }
.gw-alert-overdue > i { font-size: 1.2rem; color: #f79009; }
.gw-alert-overdue strong { margin-right: .25rem; }
.gw-filter-note { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 1.15rem .9rem; padding: .5rem .75rem; border-radius: 8px; background: #fffaeb; color: #7a4a06; font-size: var(--gw-fs-sm); }
.gw-filter-note i { color: #f79009; }

/* Tick lists in modals (contractors on a site, sites for a contractor) */
.gw-checklist { max-height: 300px; overflow-y: auto; border: 1px solid var(--gw-border); border-radius: 10px; padding: .25rem; }
.gw-check-row { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; margin: 0; }
.gw-check-row[hidden] { display: none; }
.gw-check-row:hover { background: #f5f6f8; }
.gw-check-row .form-check-input { margin: 0; flex-shrink: 0; }
.gw-check-row strong { display: block; font-weight: 500; }
.gw-check-row small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-muted); }
.gw-checklist-empty { padding: 1rem; border: 1px dashed var(--gw-border); border-radius: 10px; color: var(--gw-muted); font-size: var(--gw-fs-sm); text-align: center; }
.modal-content { border: 0; border-radius: 16px; box-shadow: var(--gw-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--gw-border); }

/* Row action buttons never wrap their icon onto its own line; headers stay on one line */
.gw-table .btn { white-space: nowrap; }
.gw-table th { white-space: nowrap; }

/* "+N more" sites badge and the list it opens */
.gw-badge-more { background: #fff; color: var(--gw-navy); border: 1px dashed #c3cad6; cursor: pointer; }
.gw-badge-more:hover { background: #eef1f7; border-style: solid; }
.gw-site-lines { list-style: none; padding: 0; margin: 0; }
.gw-site-lines li { display: flex; align-items: center; gap: .6rem; padding: .6rem .25rem; border-bottom: 1px solid #f0f2f5; }
.gw-site-lines li:last-child { border-bottom: 0; }
.gw-site-lines i { color: var(--gw-muted); }

/* How someone signed out: at a kiosk, or by a portal user */
.gw-via { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--gw-fs-xs); font-weight: 500; white-space: nowrap; margin-top: .15rem; }
.gw-via-kiosk { color: var(--gw-muted); }
.gw-via-portal { color: #6941c6; }
.gw-stack .gw-via { display: inline-flex; }

/* Bootstrap controls on the same type scale as the rest of the portal */
.btn { --bs-btn-font-size: var(--gw-fs-base); }
.btn-sm { --bs-btn-font-size: var(--gw-fs-sm); }
.form-control, .form-select, .input-group-text { font-size: var(--gw-fs-base); }
.form-control-sm, .form-select-sm { font-size: var(--gw-fs-sm); }
.form-label, .form-check-label { font-size: var(--gw-fs-base); }
.form-label { font-weight: 500; }
.form-text, .invalid-feedback { font-size: var(--gw-fs-sm); }
.dropdown-menu { --bs-dropdown-font-size: var(--gw-fs-base); }
.dropdown-item { font-size: var(--gw-fs-base); }
.alert { font-size: var(--gw-fs-base); }
.modal-title { font-size: var(--gw-fs-lg); font-weight: 600; }
.pagination-sm { --bs-pagination-font-size: var(--gw-fs-sm); }
small, .small { font-size: var(--gw-fs-sm); }

/* Tables: 14px main text, 12px secondary line, one line-height so rows are even */
.gw-table td { font-size: var(--gw-fs-base); line-height: 1.35; }
.gw-person strong, .gw-stack > span:first-child { font-size: var(--gw-fs-base); }
.gw-person small, .gw-stack small { margin-top: .1rem; }

/* Export menu: CSV or PDF */
.gw-export-menu { min-width: 300px; padding: .35rem; border-radius: 12px; box-shadow: var(--gw-shadow-lg); border-color: var(--gw-border); }
.gw-export-menu .dropdown-item { display: flex; align-items: center; gap: .65rem; border-radius: 8px; padding: .55rem .6rem; white-space: normal; }
.gw-export-menu strong { display: block; font-weight: 500; }
.gw-export-menu small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-muted); }
.gw-export-menu .dropdown-item:hover .gw-site-item-icon { background: var(--gw-navy); color: #fff; }

/* Reports */
.gw-report-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.gw-report-picker a { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border: 1px solid var(--gw-border); border-radius: var(--gw-radius);
    background: var(--gw-surface); color: var(--gw-text); box-shadow: var(--gw-shadow-sm); }
.gw-report-picker a:hover { border-color: #c3cad6; }
.gw-report-picker a.active { border-color: var(--gw-navy); box-shadow: 0 0 0 1px var(--gw-navy), var(--gw-shadow-sm); }
.gw-report-picker a.active .gw-site-item-icon { background: var(--gw-navy); color: #fff; }
.gw-report-picker strong { display: block; font-size: var(--gw-fs-base); font-weight: 600; }
.gw-report-picker small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-muted); line-height: 1.3; }
.gw-report-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .9rem 1.15rem; }
.gw-report-filters .form-control, .gw-report-filters .form-select { width: auto; }
.gw-range-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.gw-report-scope { padding: .55rem 1.15rem; border-top: 1px solid var(--gw-border); font-size: var(--gw-fs-sm); color: var(--gw-muted); display: flex; align-items: center; gap: .4rem; }
.gw-stat-value-sm { font-size: 1.5rem; }
.gw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--gw-border); }

/* Bar charts: horizontal (top 10s) and vertical (per day) */
.gw-hbars { display: flex; flex-direction: column; gap: .45rem; }
.gw-hbar { display: grid; grid-template-columns: minmax(120px, 22%) 1fr 5.5rem; align-items: center; gap: .75rem; font-size: var(--gw-fs-sm); }
.gw-hbar-track { height: 14px; background: #f0f2f5; border-radius: 99px; overflow: hidden; }
.gw-hbar-fill { display: block; height: 100%; background: var(--gw-navy); border-radius: 99px; min-width: 2px; }
.gw-hbar-value { text-align: right; font-weight: 500; }
.gw-vbars { display: flex; align-items: flex-end; gap: 4px; height: 200px; padding-top: 1.1rem; overflow-x: auto; }
.gw-vbar { flex: 1 0 22px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 22px; }
.gw-vbar-fill { width: 70%; max-width: 36px; background: var(--gw-navy); border-radius: 4px 4px 0 0; }
.gw-vbar-value { font-size: var(--gw-fs-xs); color: var(--gw-muted); margin-bottom: .2rem; }
.gw-vbar-label { font-size: var(--gw-fs-xs); color: var(--gw-muted); margin-top: .35rem; white-space: nowrap; }
.gw-vbars.dense .gw-vbar-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.gw-vbars.dense .gw-vbar-value { font-size: .625rem; }

/* Busiest-times heatmap */
.gw-heatmap { border-collapse: separate; border-spacing: 3px; font-size: var(--gw-fs-xs); }
.gw-heatmap th { font-weight: 500; color: var(--gw-muted); text-align: center; padding: 0 .25rem; }
.gw-heatmap tbody th { text-align: left; padding-right: .5rem; }
.gw-heatmap td { width: 34px; height: 28px; text-align: center; border-radius: 5px; background: #f3f5f8; font-weight: 600; }