/* Shared styling for every dashboard under Pages/Statistics. Loaded as a
   plain (unscoped) stylesheet so rules reach Telerik popup elements that
   would otherwise escape Blazor's component scope. */

/* === Page-level layout ==============================================
   Root wrapper for every Statistics dashboard. Lifted from
   CurrentActivityReport — its outer gutters, vertical lock, and 8px row
   spacing are the canonical look across Statistics pages.

   Default overflow is `auto` so dashboards with more rows than fit the
   viewport (e.g. OccupationReport with three chart rows) stay scrollable.
   Pages that should never scroll (e.g. CurrentActivity, where each tab
   handles its own overflow internally) opt in via
   .statistics-layout--locked. */
.statistics-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: MIN(0.7vh, 0.4vw) MIN(1.4vh, 0.8vw) MIN(0.7vh, 0.4vw) 0;
    background-color: #f4f5f7;
    min-height: 98.6vh;
}

.statistics-layout--locked {
    height: 98.6vh;
    overflow: hidden;
}

/* === Report card ====================================================
   Shared white-card chrome around every chart/grid block in the Occupation
   reports. Outer spacing is controlled by parent `gap` rules, not a
   per-card margin. */
.report-card {
    background-color: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    position: relative;
}

/* === Left filter panel ==============================================
   Shared white-card chrome for every Statistics report's first-level
   filter sidebar (Lots / PlateTypes / etc.). No internal overflow — the
   page-level scroll handles long lists so users don't see a second
   scrollbar inside the panel (Chrome ignores scrollbar-width: none). */
.filtersLevel1 {
    padding: 14px 16px 16px 16px;
    background-color: white;
    min-width: 220px;
    flex-shrink: 0;
    margin-top: 0;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Right-side content column inside an Occupation report — flex-grows next
   to .filtersLevel1 to fill remaining horizontal space. */
.filtersLevel2 {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
}

/* Page-/section-level headers inside Statistics dashboards. Same look used
   for the report title (.statistics-layout h3) and any filter section
   header (.filtersLevel2 h3). statistics.css is loaded unscoped, so no
   ::deep needed — selectors reach Telerik popup descendants directly. */
.statistics-layout h3,
.filtersLevel2 h3 {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1.4rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 8px;
}

/* === White card surface ============================================== */
.statistics-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Same look applied via legacy `.card` selector still used in some reports. */
.statistics-card,
.recognition-cell.card,
.revenue-cell.card,
.occupation-cell.card,
.dwell-cell.card,
.recognition-row-2.card,
.recognition-row-3.card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.card-title {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a2b5f;
}

.card-subtitle {
    font-weight: 400;
    color: #6c757d;
    font-size: 0.85rem;
}

.empty-state {
    color: #6c757d;
    font-style: italic;
    padding: 24px;
    text-align: center;
}

/* === Filter pill (top-right of every card) ============================ */
/* Container holding one or two filter pills — pinned top-right of the card
   so the chart body never reflows when a badge appears or disappears. */
.period-badges {
    position: absolute;
    top: 8px;
    right: 16px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.period-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: white;
    color: #3b5998;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 400;
    z-index: 5;
    user-select: none;
    box-sizing: border-box;
}

/* Reports that need a fixed-width badge (so toggling labels doesn't reflow
   the chart header) opt in by adding .period-badge-fixed. */
.period-badge.period-badge-fixed {
    width: 180px;
    height: 26px;
    overflow: hidden;
}

/* When the badge is rendered inside a .period-badges flex container the
   container handles positioning, so reset the absolute defaults. */
.period-badges .period-badge {
    position: static;
}

.period-badge.period-badge-clickable {
    cursor: pointer;
}

/* Only the text span (the one without an `.k-icon` class — i.e. NOT the
   Telerik SVG icon wrapper) should grow + ellipsise. The icon span keeps
   its intrinsic size so the icon doesn't stretch into a blue blob. */
.period-badge > span:not(.k-icon):not(.badge-clear) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.period-badge .badge-clear {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1;
    margin-left: 2px;
    flex: 0 0 auto;
}

.period-badge.period-badge-clickable:hover .badge-clear {
    color: #1a2b5f;
}

/* === Donut headline overlay ========================================== */
.donut-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 6px), -50%);
    pointer-events: none;
    text-align: center;
}

.donut-center-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a2b5f;
}

/* === Legend cards under donuts ====================================== */
.legend-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.legend-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 10px 16px;
    flex: 1 1 140px;
    min-width: 140px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.legend-card-clickable {
    cursor: pointer;
}

.legend-card-clickable:hover {
    border-color: #b0bedd;
}

.legend-card-selected {
    border-color: #1a2b5f;
    background-color: #eef2fa;
}

.legend-card-faded {
    opacity: 0.4;
}

.legend-card-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    background-color: var(--dot-color);
}

.legend-card-label {
    font-size: 0.7rem;
    color: #6c757d;
}

.legend-card-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #212529;
}

/* Line-series legend marker — dashed line + dot, used by OccupationReports'
   line/threshold legends (peak limits, dwell anomalies, etc.). */
.legend-card-line {
    position: relative;
    width: 24px;
    height: 6px;
    margin-top: 8px;
    flex-shrink: 0;
}

.legend-card-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px dotted red;
}

.legend-card-line::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* OccupationReports legend cards toggle a series on/off when clicked; the
   "disabled" modifier dims the card to mirror the hidden series. */
.legend-card.legend-card-disabled,
.traffic-flow-legend-card.legend-card-disabled {
    opacity: 0.4;
}

/* === Month navigation buttons (chart corner pager) =================== */
.month-nav {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.month-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    color: #3b5998;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.month-nav-btn:hover {
    background-color: #f0f2f5;
}

.month-nav-btn:disabled,
.month-nav-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* === Filter button-group pill ======================================== */
/* Telerik renders TelerikButtonGroup with .k-button-group; restyle it as a
   rounded pill row matching the dashboard chrome. Loaded unscoped so it
   applies inside Telerik's own DOM without ::deep. */
.k-button-group {
    gap: 4px;
    border: none;
    background-color: #e9ecef;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    margin-bottom: 8px;
}

.k-button-group .k-button {
    border-radius: 20px !important;
    border: none;
    flex: 1;
    background-color: transparent;
    color: #6c757d;
    font-size: 0.85rem;
    padding: 6px 20px;
    transition: all 0.2s ease;
}

.k-button-group .k-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.k-button-group .k-button.k-selected {
    background-color: #3b5998;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 89, 152, 0.3);
}

/* === Filter row (above the bottom row of OccupationReports / Dwell) === */
.report-card-title {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 8px;
    margin-left: 4px;
}

/* === Shared chart tooltip body ====================================== */
/* Telerik teleports the tooltip popup outside the component scope, so the
   selectors must NOT carry a [b-XXX] attribute — that's why these live in a
   plain .css file rather than a *.razor.css file. */
.shared-tooltip {
    min-width: 180px;
    padding: 4px 2px;
}
.shared-tooltip-header {
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a2b5f;
}
.shared-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.shared-tooltip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.shared-tooltip-name {
    flex: 1;
}
/* Section sub-header inside a shared tooltip — used by the Traffic Flow
   tooltip to split rows into "Entry Terminals" / "Exit Terminals" groups
   so the IN and OUT sides of the same month don't read as one undivided
   list. Smaller and less prominent than the main tooltip header. */
.shared-tooltip-section {
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.04em;
}
.shared-tooltip-section:first-of-type {
    margin-top: 4px;
}


/* ===== Traffic-flow heatmap (Summary > Month view) ============== */
/* Lives in the global stylesheet because Blazor's scoped CSS bundle
   has a cache cycle that lags behind hot-reload during heavy iteration;
   keeping these rules global guarantees they apply the moment the
   markup mounts. */

/* Mirror .charts-row's flex contract exactly so the bottom row's
   35% / 65% split aligns to the same pixel boundary as the top
   row. Same gap, same flex math, same box-sizing.
   min-height reserves the row's natural footprint up front: the
   heatmap is intrinsically 25 rows (1 header + 24 hours) plus card
   chrome, so the row is always at least ~600px tall. Setting it on
   the row itself (instead of only on the heatmap card) means
   Telerik charts inside .month-day-left mount at the correct height
   from the very first render — even when the user lands here with a
   pre-selected day from Peak and the Month/Day data loads before the
   heatmap. Otherwise the chart canvas captures the smaller height
   and refuses to grow when the heatmap arrives. */
.month-day-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    /* 2 × 320px (Month + Day cards' min-height) + 8px gap = 648px. Keeps
       the whole lower section visible on a standard laptop screen (~900px
       viewport) without forcing the user to scroll. The heatmap on the
       right stretches to this same height via flex align-items: stretch. */
    min-height: 648px;
    align-items: stretch;
    margin-bottom: 8px;
    box-sizing: border-box;
}

/* The top-row first card is .charts-row > .report-card:first-child with
   { flex: 0 0 35%; max-width: 35% } and default box-sizing: content-box.
   That makes its CONTENT box 35% of .charts-row and its OUTER box 35%
   + 32px (the card's 16px horizontal padding). To get the bottom row's
   left column to end at the same X position as the top card's right
   edge, .month-day-left needs to occupy the same outer width:
   35% + 32px. The inner cards stack inside this column with no padding
   of their own contributing to the column width. */
.month-day-left {
    flex: 0 0 calc(35% + 32px);
    max-width: calc(35% + 32px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

/* The Month view / Day view cards inside .month-day-left aren't direct
   .charts-row children, so the top-row's 35%-locking rule
   (.charts-row > .report-card:first-child) doesn't reach them. Force
   them to fill the 35% column instead of shrinking to intrinsic content
   width — otherwise the right edge of "Mėnesio rodinys" sits left of
   the top row's left card and the gap leaks past the Traffic Flow chart
   boundary on the right. !important wins over any scoped rule that may
   set width: auto via inheritance. */
/* The top row's first card uses default box-sizing: content-box —
   .charts-row > .report-card:first-child { flex: 0 0 35% } means
   flex-basis applies to the CONTENT box, and the card's 16px×2 padding
   renders OUTSIDE that 35%, making the OUTER card 32px wider than 35%.
   Match that exactly here: drop max-width on the column so the inner
   card can spill past 35%, and let the inner card render with default
   content-box sizing. */
.month-day-row .month-day-left {
    max-width: none;
}

.month-day-row .month-day-left > .report-card,
.filtersLevel2 .month-day-left > .report-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    align-self: stretch;
}

/* And the heatmap card too — already a direct child of .month-day-row
   but make sure its width tracks the 65% flex allocation cleanly. */
.month-day-row .month-day-heatmap.report-card {
    width: auto;
    max-width: none;
}

/* flex: 1 1 0 mirrors the Traffic Flow card on the top row so the
   heatmap occupies exactly the same right-hand share (65%) regardless
   of the heatmap's intrinsic content width. The min-height reserves
   the heatmap's natural footprint (25 rows × ~22px + card chrome) up
   front so the Month + Day stack on the left renders at full height
   even when the heatmap data is still loading — without it the column
   compresses to whatever's currently rendered on the right and then
   jumps when the heatmap arrives. */
.month-day-heatmap {
    flex: 1 1 0;
    min-width: 0;
    min-height: 648px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.heatmap-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.heatmap-direction-toggle {
    display: inline-flex;
    gap: 4px;
}

.heatmap-direction-btn {
    border: 1px solid #c5cae9;
    background: white;
    color: #1a2b5f;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
}

.heatmap-direction-btn.active {
    background: #3b5998;
    color: white;
    border-color: #3b5998;
}

.heatmap-direction-btn:not(.active):hover {
    background: #eef2ff;
}

.heatmap-empty {
    padding: 24px;
    text-align: center;
    color: #888;
}

.heatmap-grid {
    display: grid;
    /* 25 columns: 1 row-label + 24 hours.
       Rows: 1 header + 31 day rows. Using auto for the header and
       minmax(0, 1fr) for the day rows distributes the available height
       evenly across days, so the heatmap stretches to fill the card
       and matches the height of the Month/Day chart stack on the left
       (which is locked to 220px per chart). */
    grid-template-columns: 32px repeat(24, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 1px;
    background-color: #e0e0e0;
    padding: 1px;
    border-radius: 6px;
    margin-top: 8px;
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
}

.month-day-heatmap .report-card-title,
.heatmap-card-title {
    min-width: 0;
}

.heatmap-corner {
    background: #f4f5f7;
}

.heatmap-col-header,
.heatmap-row-header {
    background: #f4f5f7;
    color: #555;
    font-size: 0.7rem;
    text-align: center;
    padding: 2px 0;
    font-family: 'Segoe UI', sans-serif;
}

.heatmap-row-header {
    padding: 2px 4px;
    text-align: right;
}

.heatmap-cell {
    /* No min-height: rows distribute via grid-auto-rows: 1fr so cells
       shrink to fit the available card height. Down to ~14px the digits
       remain readable; below that the cell still renders the colour even
       if the value digit clips slightly. */
    font-size: 0.7rem;
    text-align: center;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    line-height: 1;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Clickable cells / day-headers drill the Day view to that day. Pointer
   cursor signals the affordance; a thin inner ring on hover hints at
   the target column without changing the heat colour underneath. The
   ring is inset so adjacent cells don't shift when a neighbour lights
   up. */
.heatmap-cell-clickable,
.heatmap-col-header-clickable {
    cursor: pointer;
}

.heatmap-cell-clickable:hover,
.heatmap-col-header-clickable:hover {
    box-shadow: inset 0 0 0 1px #1a2b5f;
}

/* Weekend row-header: tints the day-number cell with the same page
   accent the Month view chart uses for its weekend plot band so the
   visual cue carries over. The bullet sits below the number, matching
   the chart's "{day}\n●" label. */
.heatmap-row-header-weekend {
    background: rgba(59, 89, 152, 0.10);
}

.heatmap-row-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.05;
}

.heatmap-weekend-dot {
    color: #3b5998;
    font-size: 0.55rem;
    line-height: 1;
    margin-top: 1px;
}

/* Highlight the row of the day the user picked in the Month view chart
   so the heatmap visually echoes the drill-down. Same accent (#3b5998)
   the monthly grid uses for the selected column. Top + bottom borders
   on each cell of the row turn into a continuous outline since the
   cells sit in a 1px-gap grid; the row-header gets the left edge to
   close the outline. */
.heatmap-row-selected {
    background-color: rgba(59, 89, 152, 0.12);
    border-top: 2px solid #3b5998;
    border-bottom: 2px solid #3b5998;
    z-index: 1;
}

.heatmap-row-header.heatmap-row-selected {
    border-left: 2px solid #3b5998;
    color: #1a2b5f;
    font-weight: 700;
}

.heatmap-cell-selected {
    background-color: rgba(59, 89, 152, 0.12);
    border-top: 2px solid #3b5998;
    border-bottom: 2px solid #3b5998;
}

/* The cells already get a value-based background-color inline; the
   selected outline must win on the border edges while letting the
   inline background show through so the heat ramp stays readable.
   Inline style wins on background-color anyway, so the rule above
   just covers cells with value=0 (white background). */
.heatmap-cell-selected:last-of-type,
.heatmap-row-header.heatmap-row-selected + .heatmap-cell-selected ~ .heatmap-cell-selected:nth-child(25n + 25) {
    border-right: 2px solid #3b5998;
}

/* Month view + Day view charts inside .month-day-left share their column
   with the heatmap on the right. The heatmap is intrinsically 25 rows
   tall and stretches via flex to fill the row; we want the Month+Day
   stack to match its total height so the two columns end on the same
   line. Make the two cards split the column height evenly via flex: 1
   and let each chart fill its card (height: 100%). */
.month-day-left {
    align-self: stretch;
}

/* Each Month + Day card needs enough height for Telerik to render
   the X-axis day labels, Min=0 baseline, and weekend dots. 320px is
   the minimum total card height that keeps Telerik from dropping
   labels; the column flex-grows to fill the row's full height. */
.month-day-left > .report-card {
    flex: 1 1 320px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}


/* Groups mode wraps the chart in <div class="charts-blurred-content">
   (or just a plain <div>) to host the blurred-overlay state. That
   wrapper breaks the flex relationship between .report-card and
   .k-chart, leaving white space below the chart when the card grows.
   Make that intermediate div a flex pass-through so the chart can
   stretch all the way to the card's bottom edge.
   :not(.legend-cards) keeps the legend strip at its natural compact
   height — without it the legend cards would also grow to half the
   card. :not(.k-chart) prevents this rule from forcing display:flex on
   Telerik's chart canvas in PlateType mode where .k-chart is a direct
   child of .report-card (no wrapper div). */
.month-day-left > .report-card > div:not(.report-card-title):not(.month-nav):not(.legend-cards):not(.summary-loader) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.month-day-left > .report-card > .legend-cards {
    flex: 0 0 auto;
}

/* Telerik chart needs an explicit height: 100% to grow with its card —
   height: auto leaves the SVG at its mount-time size and the card
   develops a white gap below the X-axis when flex-grow expands the
   card to fill the column. With height: 100% the chart's SVG reflows
   on every container resize so X-axis always sits at the card bottom. */
.month-day-left .report-card .k-chart {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
}

/* ===== Transposed heatmap (X=days, Y=hours) ============= */
/* The transposed grid has 25 rows (1 header + 24 hours) and a variable
   number of columns (one per day of the month, set inline). Cells share
   1px gaps with the legacy layout but they're much shorter so all 24
   hour rows fit in the same vertical envelope as the Month/Day chart
   stack on the left. */
.heatmap-grid-transposed {
    grid-auto-rows: minmax(0, 1fr);
}

/* Day-number cells across the top. Tighter padding than the legacy
   row-header so 28-31 columns fit without horizontal scroll. */
.heatmap-grid-transposed .heatmap-col-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    line-height: 1.05;
    font-size: 0.7rem;
    background: #f4f5f7;
    color: #555;
}

/* Weekend tint moves from row to column header in the transposed grid. */
.heatmap-col-header-weekend {
    background: rgba(59, 89, 152, 0.10) !important;
}

/* Hour labels live in the first column. Center-aligned and a bit wider
   so "23:00" fits without truncating. */
.heatmap-grid-transposed .heatmap-row-header {
    text-align: right;
    padding: 0 6px 0 0;
    align-items: flex-end;
    background: #f4f5f7;
    color: #555;
    font-size: 0.7rem;
}

/* Selected day = highlighted COLUMN. Top + bottom outlines on the
   column-header and the bottom-most cell complete the box; left + right
   borders come from the column-header's siblings via the col-selected
   class on every cell of the column (set inline in the loop). */
.heatmap-col-selected {
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
    background-color: rgba(59, 89, 152, 0.12);
}

.heatmap-col-header.heatmap-col-selected {
    border-top: 2px solid #3b5998;
    color: #1a2b5f;
    font-weight: 700;
}

/* Cell selection in the transposed grid: solid left + right borders
   form the vertical stripe; the column header's top border closes
   the top edge, and the LAST hour-row cell carries a bottom border
   so the outline reads as a full rectangle around the selected day. */
.heatmap-grid-transposed .heatmap-cell-selected {
    background-color: rgba(59, 89, 152, 0.12);
    border-top: none;
    border-bottom: none;
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
}

.heatmap-grid-transposed .heatmap-cell-selected-last {
    border-bottom: 2px solid #3b5998;
}