/* ============================================================
   VIDARIA 1.1 HOME TAB — CHROME RESTYLE
   ------------------------------------------------------------
   Under body.vds-shell the legacy <HomeTab> JSX renders
   unchanged. This stylesheet ONLY layers new chrome on top:
     • Full-bleed hero map (.home-tab__hero-map)
     • Card chrome on AlertViewer / TodaysTours / etc.
     • Updated background + spacing
     • Photos gallery bottom strip styling

   Per user direction (2026-05-25): "i would prefer if we simply
   reused as many components as possible with simple style
   changes." No JSX swaps — only CSS.

   Loaded statically via _SpaLayout.cshtml so it applies to ALL
   pages but only activates under body.vds-shell (every selector
   in this file is scoped).
   ============================================================ */

/* ── 1. Outer chrome on the HomeTab container ─────────────── */
body.vds-shell .home-tab {
    background: var(--gray-50);
    /* No outer padding under the new shell — top metric bar +
       ShiftStatusBar + hero map all go edge-to-edge against the
       sidebar's right border. The grid + photo strip below get
       their own horizontal padding so cards don't touch edges. */
    padding: 0;
    /* Scroll fix — HomeTab is the scroll container. Its parent
       .group-main-content is fixed-height and overflow:hidden,
       so without this rule content below the fold is clipped. */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Reinstate horizontal padding ONLY on the parts that read as
   "cards floating inside the page" — grid below the hero and
   the photo strip at the bottom. Top metric bar, ShiftStatusBar,
   and hero map go fully edge-to-edge. */
body.vds-shell .home-tab > .home-tab__grid,
body.vds-shell .home-tab > .home-tab__grid-photos {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-top: 0;
    padding-bottom: 0;
}

/* ── 2. ShiftStatusBar + Top metric bar blended into one unit
       (Phase B, position swap 2026-05-26). Visually they appear as
       a single chrome strip across the top of the home tab with a
       thin internal divider line. Render order:
         - ShiftStatusBar FIRST  (no border-radius, 1px divider below)
         - VidariaHomeMetricBar SECOND (no border-radius, gap below)
       Both go edge-to-edge under the new sidebar layout (.home-tab
       has padding: 0). The gap below the merged unit sits on the
       metric bar's margin-bottom. ── */
body.vds-shell .home-tab > .shift-status-bar,
body.vds-shell .home-tab > .ShiftStatusBar,
body.vds-shell .home-tab > .home-tab__header {
    background: var(--white);
    border: none;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-3) var(--space-5);
    margin: 0;
    /* Force single-row layout at every viewport width. Legacy CSS
       sets `flex-wrap: wrap` at <600px which makes the
       Schedule Changes button squish + its inner spans wrap to
       multiple lines. Under Vidaria we want the bar to stay one
       row; narrow viewports get a horizontal scroll instead. */
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
}
/* Schedule Changes button — never shrink, never wrap text. The
   legacy ShiftStatusBar @media (max-width: 600px) breakpoint
   wraps the bar and would otherwise let this button squish. */
body.vds-shell .home-tab > .shift-status-bar .shift-request-badge {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
body.vds-shell .home-tab > .shift-status-bar .shift-request-badge__text {
    white-space: nowrap !important;
    overflow: visible !important;
}
body.vds-shell .home-tab > .shift-status-bar .shift-request-badge__icon {
    display: inline-flex !important;
    align-items: center;
    line-height: 1;
}
body.vds-shell .home-tab > .shift-status-bar .shift-request-badge__icon > svg {
    stroke: currentColor;
}
/* Shift bubble + officer avatars cluster — also never shrink so
   "Overnight Shift 00:00 - 09:00" stays on one line. */
body.vds-shell .home-tab > .shift-status-bar .shift-status-bar__shift {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    flex-basis: auto !important;
    order: 0 !important;
    min-width: 0;
}
body.vds-shell .home-tab > .shift-status-bar .shift-bubble,
body.vds-shell .home-tab > .shift-status-bar .shift-bubble__name,
body.vds-shell .home-tab > .shift-status-bar .shift-bubble__time {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
body.vds-shell .home-tab > .vds-home-metricbar {
    background: var(--white) !important;
    border-bottom: none;
    padding: 0 24px !important;
    margin: 0 0 var(--space-4) 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0;
    min-height: 46px !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    flex-shrink: 0 !important;
    /* User report 2026-05-26: metric bar was disappearing after
       initial render. !important defensively prevents any
       later-loading CSS chunk from collapsing the bar. */
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Metric bar internals — mockup-precise spacing + dividers ──
   Each metric chip is separated by a thin 22px vertical line per
   the mockup (Image #48). The dividers are auto-inserted between
   adjacent chips via the sibling selector below so we don't have
   to touch the JSX. */
.vds-home-metricbar__metric {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 0 14px;
    height: 100%;
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 600;
    position: relative;
}
.vds-home-metricbar__metric:first-child { padding-left: 0; }
/* Vertical divider between adjacent metric chips */
.vds-home-metricbar__metric + .vds-home-metricbar__metric::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--gray-200);
}
.vds-home-metricbar__metric--with-dot {
    align-items: center;
}
.vds-home-metricbar__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-400);
    flex-shrink: 0;
}
.vds-home-metricbar__dot--success { background: var(--success, #10b981); }
.vds-home-metricbar__dot--warning { background: var(--warning, #f59e0b); }
.vds-home-metricbar__dot--danger  { background: var(--danger, #ef4444); }

.vds-home-metricbar__value {
    font-size: 16px;
    font-weight: 900;
    color: var(--gray-900);
    letter-spacing: -0.01em;
    line-height: 1;
}
.vds-home-metricbar__metric--tone-success .vds-home-metricbar__value { color: var(--success, #10b981); }
.vds-home-metricbar__metric--tone-warning .vds-home-metricbar__value { color: var(--warning, #f59e0b); }
.vds-home-metricbar__metric--tone-danger  .vds-home-metricbar__value { color: var(--danger,  #ef4444); }
.vds-home-metricbar__metric--tone-neutral .vds-home-metricbar__value { color: var(--gray-700); }

.vds-home-metricbar__label {
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 600;
}

.vds-home-metricbar__spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.vds-home-metricbar__datestamp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--gray-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.vds-home-metricbar__datestamp-icon {
    font-size: 14px;
}

/* ShiftStatusBar internal tweaks under the new shell — the legacy
   styles use card chrome (border, rounded, shadow) that competes
   with the new merged bar. Strip those and let our parent wrapper
   above provide the chrome. */
body.vds-shell .home-tab > .shift-status-bar > .shift-status-bar__divider {
    background: var(--gray-200);
}
body.vds-shell .home-tab > .shift-status-bar .quick-date-btn {
    border-radius: 6px;
}
body.vds-shell .home-tab > .shift-status-bar .quick-date-btn--active {
    background: var(--vidaria-blue, #2563eb);
    color: var(--white);
    border-color: var(--vidaria-blue, #2563eb);
}

/* ── 3. Hero map — full-bleed below ShiftStatusBar ──────────
   Parent .home-tab is `display: flex; flex-direction: column`,
   which gives every child `flex: 0 1 auto` by default. Under
   that default, a child can SHRINK below its `height` if the
   browser's `min-height: auto` resolves to the child's content
   height (and our MiniLiveMap inner div is sized to 100% of
   parent — a chicken-and-egg that collapses the wrapper to 0).
   Fix: pin the height + opt out of shrinking (`flex-shrink: 0`)
   so the hero stays 300px regardless of sibling content. */
body.vds-shell .home-tab__hero-map {
    /* Card-style chrome per mockup #50. Reduced to 260px to match
       the mockup home.css `.home-hero-map { height: 260px }` exactly. */
    position: relative;
    width: auto;
    height: 260px;
    min-height: 260px;
    flex: 0 0 260px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin: 0 16px 0;
    cursor: pointer;
    background: var(--gray-100);
    transition: box-shadow var(--transition-base);
}
body.vds-shell .home-tab__hero-map:hover {
    box-shadow: var(--shadow-lg);
}
body.vds-shell .home-tab__hero-map:focus-visible {
    outline: 3px solid var(--vidaria-blue);
    outline-offset: 2px;
}
/* Subtle "Open Full Map →" affordance pinned to the top-right
   so users always know it's interactive — the map gestures are
   cooperative so the click target needs to read as a link. */
body.vds-shell .home-tab__hero-map::after {
    content: "Open Full Map →";
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 5;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--vidaria-blue);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}
/* Let the embedded map fill the wrapper. MiniLiveMap already
   renders its outer div at exactly `height={300}px` (the prop
   we pass from HomeTab), so we DON'T force `height: 100% !important`
   — that override created a chicken-and-egg with the wrapper's
   `min-height: auto` and collapsed the hero to 0. The inner div's
   inline 300px matches our wrapper's 300px exactly. */
body.vds-shell .home-tab__hero-map > * {
    width: 100%;
}

/* ── 3b. Officer ticker — attached to the bottom of the hero map
   card. Lives directly under the map (no negative margin —
   that was hiding the ticker behind the next row in 2026-05-26
   user report). Visually shares the card chrome with the map
   above by matching width + having border but no top border. */
body.vds-shell .home-tab > .vds-home-ticker {
    background: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-top: none !important;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    padding: 0 16px !important;
    margin: 0 16px var(--space-4) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0;
    min-height: 48px !important;
    height: auto !important;
    overflow-x: auto;
    overflow-y: visible;
    font-size: 12px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* And eliminate the rounded corners at the BOTTOM of the map so
   the two pieces look like a single card. */
body.vds-shell .home-tab__hero-map {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: none;
}

.vds-home-ticker__officers {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    height: 100%;
}

/* Per mockup #50 — each officer is its own segment, separated
   by a thin vertical line. The chip-style border is gone in
   favor of a strip layout. */
.vds-home-ticker__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-right: 1px solid var(--gray-100);
    border-radius: 0;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-left: none;
    height: 100%;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: inherit;
    appearance: none;
    color: inherit;
    font-size: inherit;
}
.vds-home-ticker__chip:first-child { padding-left: 0; }
.vds-home-ticker__chip:hover { background: var(--vidaria-blue-tint, #f0f5fb); }

.vds-home-ticker__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vds-home-ticker__dot--active    { background: var(--success, #10b981); }
.vds-home-ticker__dot--idle      { background: var(--warning, #f59e0b); }
.vds-home-ticker__dot--no-signal { background: var(--danger,  #ef4444); }
.vds-home-ticker__dot--info      { background: var(--vidaria-blue, #2563eb); }

.vds-home-ticker__name {
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.vds-home-ticker__pill {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    line-height: 1.4;
}
.vds-home-ticker__pill--active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success, #10b981);
}
.vds-home-ticker__pill--idle {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning, #f59e0b);
}
.vds-home-ticker__pill--no-signal {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger, #ef4444);
}

.vds-home-ticker__empty {
    color: var(--gray-400);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.vds-home-ticker__scan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.vds-home-ticker__scan-text {
    color: var(--gray-700);
}
.vds-home-ticker__scan-text strong {
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
}
.vds-home-ticker__scan-time {
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
}
.vds-home-ticker__scan-empty {
    margin-left: auto;
    color: var(--gray-400);
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* ── 4. Grid chrome — reuses legacy 2-col grid markup ─────── */
body.vds-shell .home-tab__grid {
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
body.vds-shell .home-tab__grid-item,
body.vds-shell .home-tab__grid-photos {
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}
body.vds-shell .home-tab__grid-item:hover,
body.vds-shell .home-tab__grid-photos:hover {
    box-shadow: var(--shadow-md);
}

/* ── 5. AlertViewer chrome (reused 1:1 per user direction) ── */
body.vds-shell .home-tab .alert-viewer {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
body.vds-shell .home-tab .alert-viewer .alert-header {
    background: var(--white);
    border-bottom: var(--border-light);
    padding: var(--space-3) var(--space-4);
}
body.vds-shell .home-tab .alert-viewer .alert-header strong {
    color: var(--gray-900);
    font-weight: var(--font-weight-bold);
}
body.vds-shell .home-tab .alert-viewer .alert-controls {
    background: var(--gray-50);
    border-bottom: var(--border-light);
}
body.vds-shell .home-tab .alert-viewer .filter-badge-btn {
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-300);
    background: var(--white);
    font-size: var(--font-size-xs);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
body.vds-shell .home-tab .alert-viewer .filter-badge-btn:hover {
    border-color: var(--vidaria-blue);
}
body.vds-shell .home-tab .alert-viewer .filter-badge-btn.hidden {
    opacity: 0.45;
}
body.vds-shell .home-tab .alert-viewer .alert-list {
    padding: var(--space-2);
}
body.vds-shell .home-tab .alert-viewer .alert-count,
body.vds-shell .home-tab .alert-viewer .hidden-count {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}
body.vds-shell .home-tab .alert-viewer .new-alert-badge {
    background: var(--vidaria-blue);
    color: var(--white);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

/* ── 6. TodaysTours chrome ────────────────────────────────── */
body.vds-shell .home-tab .todays-tours,
body.vds-shell .home-tab .todays-tours-container {
    background: var(--white);
    border: none;
    box-shadow: none;
    border-radius: 0;
}
body.vds-shell .home-tab .todays-tours-header,
body.vds-shell .home-tab .todays-tours-title {
    border-bottom: var(--border-light);
    padding: var(--space-3) var(--space-4);
    color: var(--gray-900);
    font-weight: var(--font-weight-bold);
}

/* ── 7. RecentReportViewer chrome ─────────────────────────── */
body.vds-shell .home-tab .recent-reports,
body.vds-shell .home-tab .recent-report-viewer {
    background: var(--white);
    border: none;
    box-shadow: none;
}

/* ── 8. ActivityViewer chrome ─────────────────────────────── */
body.vds-shell .home-tab .activity-viewer {
    background: var(--white);
    border: none;
    box-shadow: none;
}

/* ── 9. Photos gallery — bottom full-width strip ──────────── */
body.vds-shell .home-tab .recent-photos-gallery,
body.vds-shell .home-tab__grid-photos > * {
    background: var(--white);
    border: none;
    box-shadow: none;
}
body.vds-shell .home-tab__grid-photos {
    margin-top: 0;
}

/* ── 10. ReportCard modal — keep existing chrome ──────────── */
/* ReportCard already has its own restyle CSS from Phase 3
   (VidariaReportCard.css). Don't redefine here. */

/* ── 11. Date Range Popup anchor — keep on top ────────────── */
body.vds-shell .home-tab .date-range-popup {
    z-index: 300;
}

/* ============================================================
   PHASE D — ops row + tabbed log zone
   ============================================================ */

/* ── 3-card ops row — mockup-tight spacing (image #52).
   16px gap matches the mockup, plus the same horizontal padding
   as the map+ticker block above so all rows align on a clean
   vertical grid. */
body.vds-shell .home-tab > .vds-home-ops-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 0 16px;
    margin: 0 0 16px 0;
}
@media (max-width: 1280px) {
    body.vds-shell .home-tab > .vds-home-ops-row {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {
    body.vds-shell .home-tab > .vds-home-ops-row {
        grid-template-columns: 1fr;
    }
}

/* ── Ops card chrome (shared between Alerts / Coverage / Pending) ── */
body.vds-shell .vds-home-ops-row > .alert-viewer,
body.vds-shell .vds-home-ops-row > .vds-home-ops-card {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 380px;        /* uniform fixed height — Alerts no longer towers */
    min-height: 380px;
    max-height: 380px;
    /* CRITICAL: AlertViewer.css sets `padding: var(--space-md)` on the
       .alert-viewer root. Without border-box, that padding ADDS to the
       380px height making the alerts card ~412px tall while the other
       two cards stay at 380px. With border-box, padding is included in
       the fixed 380px so all three cards match. */
    box-sizing: border-box;
    padding: 0 !important;  /* defeat AlertViewer's root padding — its
                                internal header/list elements provide
                                their own. */
}

/* Alert viewer chrome alignment — header + list must lay out as flex
   children of the card with the list scrolling. */
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-header {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    /* Toggle removed under Vidaria — no chevron hover affordance,
       not interactive. */
    cursor: default !important;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-controls {
    flex-shrink: 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    padding: var(--space-2) var(--space-3);
}
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
}

/* ── Filter pills — VISIBLE, DRAGGABLE horizontal scrollbar.
   Legacy AlertViewer.css does three problematic things:
     1. .filter-badges-scroll has its own overflow-x: auto
        (so we get TWO scroll containers fighting each other)
     2. .filter-badges-scroll::-webkit-scrollbar { display: none }
        (hides the scrollbar entirely)
     3. .filter-badges-container::after gradient overlay
        (covers the scrollbar end)
   We:
     • Disable scroll on the inner .filter-badges-scroll
     • Enable scroll on the outer .filter-badges-container
     • Force a visible scrollbar at the bottom of the container
     • Hide the legacy gradient overlay
*/

/* OUTER — the scrolling container. */
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 6px;       /* room for the scrollbar so it doesn't
                                  overlap the pills */
    /* Firefox + standard scrollbar visibility */
    scrollbar-width: thin !important;
    scrollbar-color: var(--gray-400) var(--gray-100) !important;
}
/* WebKit (Chrome/Edge/Safari) — force the bar to render. */
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-container::-webkit-scrollbar {
    display: block !important;
    height: 8px !important;
    -webkit-appearance: auto !important;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-container::-webkit-scrollbar-track {
    background: var(--gray-100) !important;
    border-radius: 99px;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-container::-webkit-scrollbar-thumb {
    background: var(--gray-400) !important;
    border-radius: 99px;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-container::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500) !important;
}
/* Kill the legacy `::after` gradient overlay that covered the
   right edge of the badges container — it makes the scrollbar
   end invisible. */
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-container::after {
    display: none !important;
}

/* INNER — pill strip. NO overflow here (single source of scroll
   on the OUTER container). inline-flex so the strip grows
   wider than the container, triggering the outer scroll. */
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-scroll {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 0 !important;
    overflow: visible !important;
    width: max-content !important;
    max-width: none !important;
    /* Defeat the legacy `scrollbar-width: none` which the cascade
       can leak up to children if a future rule changes overflow. */
    scrollbar-width: auto;
}
/* Make sure the legacy `display: none` rule on the inner
   scrollbar doesn't apply (since we no longer use it for scroll). */
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badges-scroll::-webkit-scrollbar {
    display: none !important;
}

/* Controls parent — single row, no wrap, badges container can shrink. */
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-controls {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 6px;
    min-width: 0;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn {
    /* Default: SLEEK NEUTRAL gray pill per user feedback 2026-05-26
       (no per-type tint by default — colors only appear on hover/active).
       Defeats the legacy `.filter-badge-btn { ... !important }` rules
       inside AlertViewer.css. */
    background: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-full) !important;
    padding: 4px 10px 4px 8px !important;
    font-size: 11px !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--gray-700) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-400) !important;
    color: var(--gray-900) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn .badge-count {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    border-radius: var(--radius-full) !important;
    font-size: 10px !important;
    padding: 0 6px !important;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn.hidden {
    opacity: 0.5;
    background: var(--gray-50) !important;
    border-style: dashed !important;
    color: var(--gray-400) !important;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn.hidden .badge-count {
    background: var(--white) !important;
    color: var(--gray-400) !important;
}

/* Per-type accent colors apply ONLY on hover — default state stays
   neutral gray. User direction 2026-05-26: "sleek grey" not yellow. */
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="TagScanned"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="LocationUpdate"]:hover    { border-color: #059669 !important; color: #059669 !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="ShiftStarted"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="ShiftEnded"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="ShiftReportFiled"]:hover  { border-color: #f97316 !important; color: #ea580c !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="CHARGER"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="POWER_CONNECTED"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="POWER_DISCONNECTED"]:hover{ border-color: #8b5cf6 !important; color: #7c3aed !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="IncidentReportFiled"]:hover{ border-color: #f59e0b !important; color: #d97706 !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="LowBattery"]:hover        { border-color: var(--success, #10b981) !important; color: var(--success, #10b981) !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="PhotoReportFiled"]:hover  { border-color: var(--gray-600) !important; color: var(--gray-900) !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="AllClear"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="ALL_CLEAR"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="ALLCLEAR"]:hover          { border-color: #475569 !important; color: #475569 !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="GeofenceEntered"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="GeofenceExited"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="Geofence"]:hover          { border-color: #0891b2 !important; color: #0891b2 !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="NoMotionDetected"]:hover,
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="NO_MOTION"]:hover         { border-color: var(--warning, #f59e0b) !important; color: var(--warning, #f59e0b) !important; }
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn[data-type="Emergency"]:hover         { border-color: var(--danger,  #ef4444) !important; color: var(--danger,  #ef4444) !important; background: rgba(239, 68, 68, 0.05) !important; }

/* "Show All" button — sleek Vidaria-blue chip. Now lives inline in
   the alert-header__right row (next to the "N shown" count) per
   user direction 2026-05-26. */
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-header__right {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .clear-filters-btn {
    background: var(--vidaria-blue, #103255) !important;
    color: var(--white) !important;
    border: 1px solid var(--vidaria-blue, #103255) !important;
    border-radius: var(--radius-full) !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-left: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition-fast);
    line-height: 1.5;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .clear-filters-btn:hover {
    background: var(--vidaria-blue-hover, #0b2440) !important;
}

/* Make sure the controls row doesn't clip the Show All button at narrow
   widths — wrap to a second line instead. */
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-controls {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap !important;
    gap: 6px;
}

/* ── Alert card (Vidaria layout — Image #43, with user override
       2026-05-26: time in its OWN row at the bottom so the
       title gets full horizontal space for long text) ─────────
   2-column grid: [icon bubble] [body (title + officer + time)]
   Hover state shifts the card 2px right and tints it light
   blue so it reads as clickable. Native title="" tooltip
   handles "full text on hover" automatically. */
.alert-card.alert-card--vds {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: var(--space-3);
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-align: left;
    cursor: default;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    margin-bottom: 4px;
}
.alert-card.alert-card--vds.alert-card--clickable {
    cursor: pointer;
}
.alert-card.alert-card--vds.alert-card--clickable:hover {
    background: var(--vidaria-blue-tint, #dbeafe);
    border-color: rgba(37, 99, 235, 0.25);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.alert-card.alert-card--vds.alert-card--new {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.2);
}

.alert-card.alert-card--vds .alert-card__icon-wrap {
    grid-column: 1;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    align-self: start;
    margin-top: 1px;
    font-size: 18px;
    line-height: 1;
}
.alert-card.alert-card--vds .alert-card__icon {
    display: inline-block;
    line-height: 1;
}

/* Per-type icon-bubble: tinted background + matching full-saturation
   color for the SVG stroke. Since the SVG inherits via
   `stroke: currentColor`, setting `color` on the wrapper does both
   the icon stroke and any text inside the bubble.

   2026-05-29 rev:
     • TagScanned → green (was red)
     • Geofence (all) → cyan (was teal — distinct from green)
     • LowBattery → amber (was green; freed for TagScanned)
*/
.alert-card--vds .alert-card__icon-wrap[data-type="ShiftStarted"],
.alert-card--vds .alert-card__icon-wrap[data-type="ShiftEnded"],
.alert-card--vds .alert-card__icon-wrap[data-type="ShiftReportFiled"]      { background: rgba(37, 99, 235, 0.15);  color: #2563eb; }
.alert-card--vds .alert-card__icon-wrap[data-type="TagScanned"],
.alert-card--vds .alert-card__icon-wrap[data-type="LocationUpdate"]        { background: rgba(16, 185, 129, 0.18); color: #059669; }
.alert-card--vds .alert-card__icon-wrap[data-type="CHARGER"],
.alert-card--vds .alert-card__icon-wrap[data-type="POWER_CONNECTED"],
.alert-card--vds .alert-card__icon-wrap[data-type="POWER_DISCONNECTED"]    { background: rgba(139, 92, 246, 0.18); color: #7c3aed; }
.alert-card--vds .alert-card__icon-wrap[data-type="IncidentReportFiled"]   { background: rgba(249, 115, 22, 0.18); color: #ea580c; }
.alert-card--vds .alert-card__icon-wrap[data-type="LowBattery"]            { background: rgba(245, 158, 11, 0.18); color: #d97706; }
.alert-card--vds .alert-card__icon-wrap[data-type="PhotoReportFiled"]      { background: rgba(107, 114, 128, 0.18); color: #4b5563; }
.alert-card--vds .alert-card__icon-wrap[data-type="AllClear"],
.alert-card--vds .alert-card__icon-wrap[data-type="ALL_CLEAR"],
.alert-card--vds .alert-card__icon-wrap[data-type="ALLCLEAR"]              { background: rgba(100, 116, 139, 0.16); color: #475569; }
.alert-card--vds .alert-card__icon-wrap[data-type="GeofenceEntered"],
.alert-card--vds .alert-card__icon-wrap[data-type="GeofenceExited"],
.alert-card--vds .alert-card__icon-wrap[data-type="Geofence"]              { background: rgba(6, 182, 212, 0.18); color: #0891b2; }
.alert-card--vds .alert-card__icon-wrap[data-type="TourStarted"],
.alert-card--vds .alert-card__icon-wrap[data-type="TourCompleted"],
.alert-card--vds .alert-card__icon-wrap[data-type="TourReportFiled"]       { background: rgba(99, 102, 241, 0.18); color: #4f46e5; }
.alert-card--vds .alert-card__icon-wrap[data-type="NoMotionDetected"],
.alert-card--vds .alert-card__icon-wrap[data-type="NO_MOTION"]             { background: rgba(245, 158, 11, 0.18); color: #d97706; }
.alert-card--vds .alert-card__icon-wrap[data-type="Emergency"]             { background: rgba(239, 68, 68, 0.28); color: #b91c1c; }
.alert-card--vds .alert-card__icon-wrap[data-type="ActivityReportFiled"],
.alert-card--vds .alert-card__icon-wrap[data-type="SiteReportFiled"]       { background: rgba(99, 102, 241, 0.15); color: #4f46e5; }

/* Every SVG inside an alert card icon bubble strokes with the
   color we set on the wrapper above. */
.alert-card--vds .alert-card__icon-wrap > .alert-card__icon > svg {
    stroke: currentColor;
    display: block;
}

/* Filter pills (.filter-badge-btn .badge-icon) — SVG inherits
   stroke from the pill text color (which we already tone by
   data-type on hover). Default neutral color = gray-700. */
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn .badge-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
body.vds-shell .vds-home-ops-row > .alert-viewer .filter-badge-btn .badge-icon > svg {
    stroke: currentColor;
}

.alert-card.alert-card--vds .alert-card__body {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alert-card.alert-card--vds .alert-card__title {
    color: var(--gray-900);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    /* MarqueeTitle viewport — overflow clipped, single line.
       When `.is-scrollable` is set (JS detected overflow), hover
       activates the marquee animation. When NOT scrollable,
       ellipsis truncates the single text. */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.alert-card.alert-card--vds .alert-card__title-track {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    will-change: transform;
}
.alert-card.alert-card--vds .alert-card__title-text {
    display: inline-block;
    flex-shrink: 0;
}
/* Non-scrollable variant: ellipsis on the inner text. */
.alert-card.alert-card--vds .alert-card__title:not(.is-scrollable)
  .alert-card__title-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On hover: ONLY scroll if the text actually overflows. The
   duplicate copy + translateX(-50% - 20px) shift creates a
   seamless loop (track contains [text][gap 40px][duplicate text],
   shifting by exactly one text+gap snaps the duplicate into the
   original's position). */
.alert-card.alert-card--vds:hover .alert-card__title.is-scrollable
  .alert-card__title-track {
    animation: vds-alert-title-marquee 9s linear infinite;
    animation-delay: 0.4s;
}

@keyframes vds-alert-title-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 20px)); }
}
.alert-card.alert-card--vds .alert-card__officer {
    color: var(--gray-500);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Time on its own row at the BOTTOM of the body — user direction
   2026-05-26: "let's make the date/timestamp small and at the
   bottom of the card in its own row so we can see as much of the
   text in the alert as possible". Aligned right inside the row. */
.alert-card.alert-card--vds .alert-card__time {
    color: var(--gray-400);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    text-align: right;
    margin-top: 2px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── Tour Status header strip (above legacy TodaysTours) ───── */
.vds-home-tour-status-header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
}
.vds-home-tour-status-header__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.vds-home-tour-status-header__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}
.vds-home-tour-status-header__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vds-home-tour-status-header__dot--success { background: var(--success, #10b981); }
.vds-home-tour-status-header__dot--info    { background: var(--vidaria-blue, #2563eb); }
.vds-home-tour-status-header__dot--warning { background: var(--warning, #f59e0b); }
.vds-home-tour-status-header__dot--danger  { background: var(--danger, #ef4444); }

.vds-home-tour-status-header__bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vds-home-tour-status-header__bar {
    flex: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.vds-home-tour-status-header__bar-fill {
    height: 100%;
    background: var(--success, #10b981);
    border-radius: var(--radius-full);
    transition: width 600ms ease-out;
}
.vds-home-tour-status-header__meta {
    color: var(--gray-500);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* AlertViewer chrome already gets reskinned in section 5 above
   (.home-tab .alert-viewer rules). The .vds-home-ops-row scope
   overrides the wrapper bg/border to fit the card chrome. */
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-header {
    background: transparent;
    border-bottom: 1px solid var(--gray-100);
    padding: var(--space-3) var(--space-4);
}
body.vds-shell .vds-home-ops-row > .alert-viewer .alert-list {
    flex: 1;
    overflow-y: auto;
}

/* ── Schedule Coverage card internals ──────────────────────── */
.vds-home-ops-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
}
.vds-home-ops-card__title {
    margin: 0;
    /* Mockup-precise: 12px, 800 weight, uppercase, wide tracking */
    font-size: 12px;
    font-weight: 800;
    color: var(--gray-900);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.vds-home-ops-card__meta {
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 600;
}
.vds-home-ops-card__body {
    padding: 12px 14px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vds-home-ops-card__footer {
    background: var(--gray-50);
    border: none;
    border-top: 1px solid var(--gray-100);
    padding: var(--space-3) var(--space-4);
    color: var(--vidaria-blue, #2563eb);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast);
}
.vds-home-ops-card__footer:hover {
    background: var(--vidaria-blue-tint, #dbeafe);
}

/* Coverage bar + percentage — bar on the LEFT, percentage on the
   RIGHT, single row so the bar is always visible regardless of
   card overflow. User reported bar was hidden 2026-05-26. */
.vds-home-coverage__bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.vds-home-coverage__bar {
    flex: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
    min-width: 60px;
}
.vds-home-coverage__bar-fill {
    height: 100%;
    background: var(--success, #10b981);
    border-radius: var(--radius-full);
    transition: width 600ms ease-out;
    min-width: 2px; /* visible even at 0% so it doesn't look broken */
}
.vds-home-coverage__bar--warning .vds-home-coverage__bar-fill { background: var(--warning, #f59e0b); }
.vds-home-coverage__bar--danger  .vds-home-coverage__bar-fill { background: var(--danger,  #ef4444); }
.vds-home-coverage__bar--neutral .vds-home-coverage__bar-fill { background: var(--gray-300); }

.vds-home-coverage__pct {
    font-size: 20px;
    font-weight: 900;
    text-align: right;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--success, #10b981);
    min-width: 48px;
    flex-shrink: 0;
}
.vds-home-coverage__pct--warning { color: var(--warning, #f59e0b); }
.vds-home-coverage__pct--danger  { color: var(--danger,  #ef4444); }
.vds-home-coverage__pct--neutral { color: var(--gray-400); }

/* 3-tile stat row */
.vds-home-coverage__stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
}
.vds-home-coverage__stat {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 7px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.vds-home-coverage__stat-val {
    font-size: 18px;
    font-weight: 900;
    color: var(--gray-900);
    line-height: 1;
    letter-spacing: -0.01em;
}
.vds-home-coverage__stat-val--danger { color: var(--danger, #ef4444); }
.vds-home-coverage__stat-lbl {
    font-size: 9px;
    color: var(--gray-500);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

/* Shifts list */
.vds-home-coverage__shifts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vds-home-coverage__shifts-empty {
    color: var(--gray-400);
    font-style: italic;
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--space-3) 0;
}
.vds-home-coverage__shift {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
}
.vds-home-coverage__shift-info {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}
.vds-home-coverage__shift-name {
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}
.vds-home-coverage__shift-time {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
}
.vds-home-coverage__shift-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}
.vds-home-coverage__shift-icon.is-covered {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success, #10b981);
}
.vds-home-coverage__shift-icon.is-gap {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #f59e0b);
}

/* ── Tabbed log zone ──────────────────────────────────────── */
body.vds-shell .home-tab > .vds-home-logzone {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin: 0 var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    /* Bigger per user feedback 2026-05-26 — Tour Status /
       Recent Reports / Photos panels were squashed at 320px. */
    min-height: 520px;
    height: 520px;
}
.vds-home-logzone__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--gray-100);
    padding: 0 var(--space-2);
    background: var(--gray-50);
}
.vds-home-logzone__tab {
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    margin-bottom: -1px; /* overlap the tabs bottom border */
}
.vds-home-logzone__tab:hover {
    color: var(--gray-900);
}
.vds-home-logzone__tab.is-active {
    color: var(--vidaria-blue, #2563eb);
    border-bottom-color: var(--vidaria-blue, #2563eb);
}
.vds-home-logzone__content {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.vds-home-logzone__panel {
    display: none;
    padding: 0;
    height: 100%;
    overflow-y: auto;
}
.vds-home-logzone__panel.is-visible {
    display: block;
}

/* Strip the card chrome off legacy components inside the log
   zone — the .vds-home-logzone container now provides chrome. */
body.vds-shell .vds-home-logzone__panel .todays-tours,
body.vds-shell .vds-home-logzone__panel .todays-tours-container,
body.vds-shell .vds-home-logzone__panel .recent-photos-gallery {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    height: auto;
}

/* ── Recent Reports tab — type filter pills + list ────────── */
.vds-home-recent-reports {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.vds-home-recent-reports__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vds-home-recent-reports__filter {
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.vds-home-recent-reports__filter:hover {
    border-color: var(--vidaria-blue, #2563eb);
}
.vds-home-recent-reports__filter.is-active {
    background: var(--vidaria-blue, #2563eb);
    border-color: var(--vidaria-blue, #2563eb);
    color: var(--white);
}
.vds-home-recent-reports__filter-count {
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-full);
    padding: 0 6px;
    font-size: 10px;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
}
.vds-home-recent-reports__filter.is-active .vds-home-recent-reports__filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
}
.vds-home-recent-reports__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vds-home-recent-reports__empty {
    color: var(--gray-400);
    font-style: italic;
    text-align: center;
    padding: var(--space-5) 0;
    font-size: var(--font-size-sm);
}
.vds-home-recent-reports__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.vds-home-recent-reports__item:hover {
    background: var(--gray-50);
    border-color: var(--vidaria-blue, #2563eb);
}
.vds-home-recent-reports__item.is-pending {
    border-left: 3px solid var(--warning, #f59e0b);
}
.vds-home-recent-reports__icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-md);
}
.vds-home-recent-reports__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vds-home-recent-reports__line1 {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.vds-home-recent-reports__officer {
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}
.vds-home-recent-reports__type {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
}
.vds-home-recent-reports__line2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
}
.vds-home-recent-reports__id {
    color: var(--gray-400);
    font-family: monospace;
}
.vds-home-recent-reports__badge {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vds-home-recent-reports__badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #f59e0b);
}
.vds-home-recent-reports__time {
    color: var(--gray-400);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    font-weight: var(--font-weight-medium);
}

/* ── Photos tab — grid with vertical scroll ────────────────
   User direction 2026-05-26: "change the photos section to a
   grid with overflow on the y axis".

   Legacy `.photos-grid` defaults to `display: inline-flex` +
   horizontal scroll. We force a true CSS grid that fills the
   tab panel width, wraps as many rows as needed, and scrolls
   vertically inside the tab.

   Specificity is intentionally heavy (5 classes) so this
   defeats the legacy `.photos-grid { ... !important }` rules
   defined in RecentPhotosGallery.css regardless of which
   stylesheet loads later in the cascade. */
body.vds-shell .vds-home-logzone__panel.is-visible .recent-photos-gallery {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.vds-shell .vds-home-logzone__panel.is-visible .recent-photos-gallery .recent-photos-gallery__header {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
}
body.vds-shell .vds-home-logzone__panel.is-visible .recent-photos-gallery .recent-photos-gallery__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-4);
    white-space: normal !important;
}
body.vds-shell .vds-home-logzone__panel.is-visible .recent-photos-gallery .recent-photos-gallery__content .photos-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    grid-auto-rows: 140px !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
    gap: var(--space-2) !important;
    padding: 0 !important;
    white-space: normal !important;
    width: 100% !important;
    overflow: visible !important;
    max-height: none !important;
}
/* Reset the photo-card sizing — legacy uses width:140px + flex
   chops that don't agree with grid auto-sizing. */
body.vds-shell .vds-home-logzone__panel.is-visible .recent-photos-gallery .photos-grid .photo-card {
    width: auto !important;
    min-width: 0 !important;
    flex: initial !important;
    display: flex !important;
    flex-direction: column;
}

/* ── Pending Actions card internals ────────────────────────── */
.vds-home-pending__count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--danger, #ef4444);
    color: var(--white);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 0 7px;
}
.vds-home-pending__body {
    padding: var(--space-2);
    gap: 4px !important;
}
.vds-home-pending__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    font-style: italic;
    padding: var(--space-5) 0;
}
.vds-home-pending__empty-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: var(--success, #10b981);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-style: normal;
}
.vds-home-pending__empty-icon > svg { stroke: currentColor; }

/* Inline lucide SVG inside the colored icon bubbles. The
   parent .vds-home-pending__icon already sets background-color
   (per severity) and color (text) — the SVG inherits stroke
   color via `stroke: currentColor`. */
.vds-home-pending__icon > svg,
.vds-home-recent-reports__icon > svg,
.todays-tours__icon > svg {
    stroke: currentColor;
    flex-shrink: 0;
}
.vds-home-recent-reports__icon { color: var(--gray-700); }
.todays-tours__icon { color: var(--vidaria-blue, #103255); display: inline-flex; align-items: center; }
.vds-home-pending__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    /* Slightly grey item bg per mockup. Cards float on the white card
       chrome above — the gray-50 makes them read as distinct rows. */
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    border-left-width: 3px;
}
.vds-home-pending__item--danger  { border-left-color: var(--danger,  #ef4444); }
.vds-home-pending__item--warning { border-left-color: var(--warning, #f59e0b); }
.vds-home-pending__item--info    { border-left-color: var(--vidaria-blue, #2563eb); }
.vds-home-pending__item:hover {
    background: var(--white);
    border-color: var(--gray-300);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.vds-home-pending__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}
.vds-home-pending__icon--danger  { background: rgba(239, 68, 68, 0.12);  color: var(--danger,  #ef4444); }
.vds-home-pending__icon--warning { background: rgba(245, 158, 11, 0.12); color: var(--warning, #f59e0b); }
.vds-home-pending__icon--info    { background: rgba(37, 99, 235, 0.12);  color: var(--vidaria-blue, #2563eb); }
.vds-home-pending__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.vds-home-pending__title {
    /* Mockup-precise: 12px, 700 weight, line-height 1.3 */
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vds-home-pending__desc {
    font-size: 11px;
    line-height: 1.35;
    color: var(--gray-500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vds-home-pending__action {
    color: var(--vidaria-blue, #2563eb);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    flex-shrink: 0;
}