/* Tile flip animations for the Dashboard2 cards.
   Lives as a plain global CSS file (NOT a .razor.css companion) because
   Blazor's CSS-isolation pipeline rewrites @keyframes names with the
   per-component scope identifier (e.g. dashboard2-tile-flip-out-b-xxxxxxx).
   That breaks the `animation: dashboard2-tile-flip-out ...` reference in
   Dashboard2.razor's inline <style> block, which collapses the flip into
   an instant snap. Keeping the keyframes here means the names stay global. */

@keyframes dashboard2-tile-flip-out {
    0%   { transform: perspective(1400px) rotateY(0deg)   scale(1); }
    100% { transform: perspective(1400px) rotateY(90deg)  scale(0.985); }
}

@keyframes dashboard2-tile-flip-in {
    0%   { transform: perspective(1400px) rotateY(-90deg) scale(0.985); }
    100% { transform: perspective(1400px) rotateY(0deg)   scale(1); }
}

/* ConsultTime / ConsultRatio ECharts tooltip — site-standard MudTooltip look
   (dark gray, white text, 4 px radius) plus a CSS-pseudo-element arrow that
   points back at the cursor. ECharts tooltips render inside document.body, so
   the rule has to be GLOBAL (this file) rather than scoped — it would
   never match if it lived in a .razor.css companion or a component-
   scoped <style> block.

   Both the consult-time card and the complex-consult-ratio card opt into
   the same chart-center-y flip-with-arrow behaviour, so the rules below
   target both classes. The position function in echarts-interop.js sets
   data-arrow="left" or "right" on the tooltip element after deciding which
   side of the cursor the panel sits on; the matching ::before / ::after
   rule below renders the triangle pointing at the cursor. */
.consult-time-tip,
.consult-ratio-tip {
    position: relative;
    overflow: visible !important;
}

.consult-time-tip[data-arrow="left"]::before,
.consult-time-tip[data-arrow="right"]::after,
.consult-ratio-tip[data-arrow="left"]::before,
.consult-ratio-tip[data-arrow="right"]::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -6px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Triangle math (CSS arrows on a 0×0 box):
     border-right-color creates a triangle whose APEX sits at the box's
     content-left-edge and whose BASE is at the box's content-right-edge.
     For a `border:6px` element the visible triangle occupies the right
     half of the 12×12 border-box. To put the triangle's BASE flush with
     the panel edge and the APEX 6 px outside it, the element's outer
     box has to start 12 px before the panel edge — hence -12 px, not
     -6 px. (Same logic mirrored for the right-side arrow.) */
.consult-time-tip[data-arrow="left"]::before,
.consult-ratio-tip[data-arrow="left"]::before {
    left: -12px;
    border-right-color: #424242;
}

.consult-time-tip[data-arrow="right"]::after,
.consult-ratio-tip[data-arrow="right"]::after {
    right: -12px;
    border-left-color: #424242;
}

/* PLO label positioning is handled globally in logged-in.css under
   `.plo-select-wrap .mud-input-label-outlined` so every PLO-using
   page renders the same way. */

/* ── Consult Volume Data: column headers ───────────────────────────────────
   Lives here (not in Dashboard.razor's <style> block) so edits take effect
   on browser refresh without a rebuild.
   MudItem is a flex container, so without explicit width the child shrinks to
   text-width, making both text-align and the absolute underline ineffective. */
.dashboard-col-header {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 0 8px 0;
}

.dashboard-col-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.75;
}

/* ── Consult Volume Data: rolling-year card year-bracket row ────────────────
   Sits below the KpiSparkline in row-1 cards. Each year-group's flex-grow
   is set inline by the renderer (= MonthCount), so a 4-month group is 4×
   the width of a 1-month group, keeping the brackets aligned with the
   underlying sparkline data points. */
/* Month-abbreviation row sits directly above the year-bracket row.
   Each cell is flex:1 so the row distributes evenly across the same
   axis the sparkline uses (one cell per data point in _rollingMonths). */
.vol-month-row {
    display: flex;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.vol-month-row .month-cell {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #9AA0B0;
    line-height: 1;
}

.vol-year-row {
    display: flex;
    align-items: stretch;
    /* Stretch full card width regardless of parent's align-items: center.
       align-self overrides the parent flex's align-items, width:100% is a
       belt-and-braces fallback for non-flex parents. */
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
    margin-top: 2px;
    height: 18px;
    flex: 0 0 auto;
}

.vol-year-row .year-group {
    flex-basis: 0;
    flex-shrink: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.vol-year-row .bracket {
    position: relative;
    width: 100%;
    height: 4px;
}

.vol-year-row .bracket .line {
    position: absolute;
    top: 0;
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    height: 1px;
    border-top: 1px solid #C8CCD8;
}

.vol-year-row .bracket .tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 3px;
    background: #C8CCD8;
}

.vol-year-row .bracket .tick.left  { left:  calc(50% / var(--n)); }
.vol-year-row .bracket .tick.right { right: calc(50% / var(--n)); }

/* Pull bracket inner-edges to the year boundary (between DEC & JAN) so two
   adjacent year groups visually meet. Outer edges keep their 50%/n inset
   so the brackets stay centered under the first/last data point. */
.vol-year-row .year-group:not(:first-child) .bracket .line,
.vol-year-row .year-group:not(:first-child) .bracket .tick.left {
    left: calc(10% / var(--n));
}

.vol-year-row .year-group:not(:last-child) .bracket .line,
.vol-year-row .year-group:not(:last-child) .bracket .tick.right {
    right: calc(10% / var(--n));
}

.vol-year-row .year-label {
    font-size: 9px;
    color: #9AA0B0;
    line-height: 1;
    text-align: center;
    margin-top: 2px;
}

/* ── Consult Volume Data: row height distribution ───────────────────────────
   :has() selectors are content-based so they don't depend on child order.
   Row 1 (Rolling Year)   — uniquely contains .seasonal-bg-overlay  → flex 1.5
   Row 2 (Rolling Avg)    — uniquely contains .kpi-stat-root         → flex 0.5
   Row 3 (Selected Range) — the remaining row-wrapper                → flex 1   */
.dashboard-grid-inner-fill-panel .dashboard-row-wrapper:has(.seasonal-bg-overlay) {
    flex: 1.5 !important;
}
.dashboard-grid-inner-fill-panel .dashboard-row-wrapper:has(.kpi-stat-root) {
    flex: 0.5 !important;
    min-height: 0 !important;
}
.dashboard-grid-inner-fill-panel .dashboard-row-wrapper:not(:has(.seasonal-bg-overlay)):not(:has(.kpi-stat-root)) {
    flex: 1 !important;
}