/* 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 {
    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;
}