/* ===========================================================
   Canonical sticky-first-column data table component.

   Straight header cells with a 3px accent underline and a tilted label
   that's allowed to overhang into the next column's header space.
   Deliberately no slanted/skewed background shapes: a shape that needs
   to paint over its neighbors invites z-index/stacking bugs, and this
   design has no shape to fight over, only text.

   Column sizing is NOT done here in CSS: it's computed from measured
   text width in includes/js/data_table.js (see that file's measure()),
   because getting it right needs a real canvas text measurement, not a
   character-count guess. This file only holds the static visual rules;
   widths arrive as inline styles set by JS.
   =========================================================== */

:root {
    --dt-accent-sage: #6B9472;
    --dt-accent-plum: #946B8D;
    --dt-accent-steel: #3C6C9E;
    --dt-accent-amber: #B98A3D;
    --dt-accent-rose: #B15E6C;
    --dt-accent-slate: #5A6B7A;
    --dt-neutral: #e4e7eb;
    --dt-border: #d0d5db;
    --dt-grid: #e6e9ec;
    --dt-zebra: #f4f5f3;
    --dt-first-bg: #e6e6e6;
    --dt-first-bg-alt: #dedede;
    --dt-sum-bg: #e6e6e6;
    --dt-sum-bg-first: #dcdfe3;
    --dt-sum-rule: #c3ccd4;
    --dt-ink: #3a4552;
    --dt-hover: rgba(1, 50, 95, .10);
    --dt-hover-active: rgba(1, 50, 95, .22);
    --dt-tint: 18%;

    /* Bootstrap layers this must sit between: .modal = 1050,
       .tooltip = 1080. The floating "Jump to period" panel needs to
       clear modals but never fight a tooltip. */
    --dt-z-popover: 1075;
}

.dt-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--dt-border);
    background: #fff;
}

.dt-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
}

.dt-table th,
.dt-table td {
    border: none;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}

.dt-table td {
    height: 28px;
    padding: 6px 8px;
    background-color: #fff;
    border-right: 1px solid var(--dt-grid);
    border-bottom: 1px solid var(--dt-grid);
}

.dt-table tbody tr:last-child td {
    border-bottom: none;
}

.dt-table td.dt-col:last-child {
    border-right: none;
}

/* Header: no box, no fill, an accent underline plus a label tilted
   30deg off vertical. overflow:visible is required: the label is
   deliberately allowed to lean into the next column's header cell
   rather than being clipped or fought over with z-index. */
.dt-table thead th.dt-col {
    padding: 0;
    position: relative;
    overflow: visible;
    background-color: transparent;
    border-bottom: 3px solid var(--col-accent, var(--dt-neutral));
}

.dt-label {
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform-origin: 0 100%;
    transform: rotate(-60deg);
    white-space: nowrap;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--dt-ink);
}

/* Zebra + accent tint resolve to ONE opaque background-color (not a
   translucent overlay) so the row's own border-bottom reads at the
   same darkness on every row, striped or not. */
.dt-table td.dt-col {
    background-color: #fff;
}

.dt-table tbody tr:nth-child(even) td.dt-col {
    background-color: var(--dt-zebra);
}

.dt-table td.dt-col[data-accent] {
    background-color: color-mix(in srgb, var(--col-accent) var(--dt-tint), #fff);
}

.dt-table tbody tr:nth-child(even) td.dt-col[data-accent] {
    background-color: color-mix(in srgb, var(--col-accent) var(--dt-tint), var(--dt-zebra));
}

.dt-table th.dt-first-col,
.dt-table td.dt-first-col {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: right;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-table td.dt-first-col {
    background-color: var(--dt-first-bg);
    font-weight: 700;
    box-shadow: 2px 0 0 rgba(0, 0, 0, .05);
}

.dt-table tbody tr:nth-child(even) td.dt-first-col {
    background-color: var(--dt-first-bg-alt);
}

.dt-table thead th.dt-first-col {
    background: #fff;
    /* opaque: masks tilted labels scrolling underneath it */
    color: var(--dt-ink);
    z-index: 4;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: .68rem;
    vertical-align: bottom;
    padding-bottom: 7px;
    border-bottom: 3px solid var(--dt-neutral);
}

.dt-table tr.dt-sum-row td {
    background-color: var(--dt-sum-bg);
    border-top: 2px solid var(--dt-sum-rule);
    font-weight: 700;
}

.dt-table tr.dt-sum-row td.dt-first-col {
    background-color: var(--dt-sum-bg-first);
}

/* Hover tint layers ON TOP of zebra/accent backgrounds via box-shadow
   instead of replacing background-color: a background rule would
   lose to the zebra/accent rule on every other row and the highlight
   would silently disappear on alternating rows. Not additive, so
   column 0's seam shadow has to be repeated alongside it here. */
.dt-table td.row-hover,
.dt-table td.col-hover {
    box-shadow: inset 0 0 0 9999px var(--dt-hover);
}

.dt-table td.dt-first-col.row-hover,
.dt-table td.dt-first-col.col-hover {
    box-shadow: inset 0 0 0 9999px var(--dt-hover), 2px 0 0 rgba(0, 0, 0, .05);
}

.dt-table td.active-hover {
    box-shadow: inset 0 0 0 9999px var(--dt-hover-active);
}

.dt-table td.dt-first-col.active-hover {
    box-shadow: inset 0 0 0 9999px var(--dt-hover-active), 2px 0 0 rgba(0, 0, 0, .05);
}

/* ===========================
   Floating "Jump to period" popover
=========================== */

/* Once includes/js/period_jump.js opens a panel it re-parents the
   panel to <body> and switches it to this fixed/floating mode:
   position/top/left are then set inline per-open, computed from the
   trigger's getBoundingClientRect(). This is what lets the popover
   escape any ancestor `.dt-shell { overflow-x: auto }` clipping
   entirely: as a child of <body> it has zero ancestors that set
   overflow/transform/filter/contain/backdrop-filter. */
.period-jump-panel.dt-floating {
    position: fixed;
    z-index: var(--dt-z-popover);
    margin: 0;
    /* style.css's base .period-jump-panel/.period-jump-start rules set
       `right: 0` (or `left: 0`) to anchor the panel while it's still
       positioned relative to its own toggle. Once floated, period_jump.js
       sets left+top (or left+bottom) directly via inline style. Inline
       `left` alongside the class rule's `right: 0` with no explicit width
       would leave both constraints active, and the browser would stretch
       the panel to fill the gap between them (full viewport width)
       instead of sizing to content. Resetting all four to auto here
       means only whichever inline styles the JS actually sets apply. */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}