/* GNT.Components — timephased grid (design note §11).
   Everything is scoped under .gnt-timephase. Colours resolve from tokens with fallbacks so a host
   theme can override them; nothing here names a literal twice. */

.gnt-timephase {
    --gnt-tp-unit: 28px;
    --gnt-tp-border: var(--gnt-border-color, #d9d9d9);
    --gnt-tp-toolbar-bg: var(--gnt-toolbar-bg, #f7f7f7);
    --gnt-tp-derived-fg: var(--gnt-muted-fg, #6b7280);
    --gnt-tp-empty-fg: var(--gnt-empty-fg, #b8bcc4);
    --gnt-tp-actual-bg: var(--gnt-actual-bg, #f1f3f6);
    --gnt-tp-locked-bg: var(--gnt-locked-bg, #ececec);
    --gnt-tp-rollup-fg: var(--gnt-rollup-fg, #1f2937);
    --gnt-tp-negative-fg: var(--gnt-negative-fg, #b00020);
    --gnt-tp-dirty-bg: var(--gnt-dirty-bg, #fff6d6);
    --gnt-tp-error-fg: var(--gnt-error-fg, #b00020);
    --gnt-tp-pending-bg: var(--gnt-pending-bg, repeating-linear-gradient(45deg, #fafafa, #fafafa 4px, #f0f0f0 4px, #f0f0f0 8px));

    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--gnt-tp-border);
    background: var(--gnt-surface-bg, #fff);
}

/* ---- chrome: on both panes or neither --------------------------------------------------- */

.gnt-timephase .gnt-tp-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--gnt-tp-border);
    background: var(--gnt-tp-toolbar-bg);
    flex-wrap: wrap;
}

.gnt-timephase .gnt-tp-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 8px;
    border-right: 1px solid var(--gnt-tp-border);
}

.gnt-timephase .gnt-tp-toolbar-group:last-of-type {
    border-right: none;
}

.gnt-timephase .gnt-tp-toolbar-button.e-btn {
    min-width: 30px;
    padding: 4px 6px;
}

.gnt-timephase .gnt-tp-grain {
    height: 28px;
    margin: 0 2px;
    font: inherit;
}

.gnt-timephase .gnt-tp-measure-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    color: var(--gnt-tp-derived-fg);
}

.gnt-timephase .gnt-tp-measure-toggle--on {
    color: inherit;
    font-weight: 600;
}

.gnt-timephase .gnt-tp-dirty-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--gnt-tp-dirty-bg);
    border: 1px solid var(--gnt-tp-border);
    font-size: 11px;
    text-align: center;
}

.gnt-timephase .gnt-tp-toolbar-status {
    margin-left: auto;
    font-size: 12px;
}

.gnt-timephase .gnt-tp-loading {
    color: var(--gnt-tp-derived-fg);
}

.gnt-timephase .gnt-tp-error {
    color: var(--gnt-tp-error-fg);
}

.gnt-timephase .gnt-tp-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.gnt-timephase .gnt-tp-pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 8px;
    border-top: 1px solid var(--gnt-tp-border);
    background: var(--gnt-tp-toolbar-bg);
}

.gnt-timephase .gnt-tp-pager .e-pager {
    border: none;
    background: transparent;
}

.gnt-timephase .gnt-tp-pager-readout {
    margin-left: auto;
    font-size: 12px;
    color: var(--gnt-tp-derived-fg);
    white-space: nowrap;
}

/* ---- panes ----------------------------------------------------------------------------- */

.gnt-timephase .gnt-tp-left,
.gnt-timephase .gnt-tp-right {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.gnt-timephase .e-splitter .e-pane {
    overflow: hidden;
}

/* The vendor grid's own vertical scrollbar is suppressed on the left: one scroll position,
   mirrored, and the right pane's bar is the visible one. Only the vertical bar goes; the
   horizontal one must keep its space or the pane heights diverge (see the rule at the end). */
.gnt-timephase .gnt-tp-left .e-content {
    overflow-y: hidden !important;
}

.gnt-timephase .e-grid .e-rowcell,
.gnt-timephase .e-treegrid .e-rowcell {
    padding: 0 6px;
    font-size: 12px;
    line-height: var(--gnt-tp-unit);
}

.gnt-timephase .e-grid .e-headercell,
.gnt-timephase .e-treegrid .e-headercell {
    padding: 2px 6px;
    font-size: 12px;
}

.gnt-timephase .gnt-tp-right .e-grid .e-stackedheadercelldiv {
    text-align: center;
}

/* ---- cell state (§11): a closed set, so classes; identity would be data attributes ------ */

.gnt-timephase .gnt-tp-cell--derived {
    color: var(--gnt-tp-derived-fg);
    font-style: italic;
}

.gnt-timephase .gnt-tp-cell--rollup {
    color: var(--gnt-tp-rollup-fg);
    font-weight: 600;
}

.gnt-timephase .gnt-tp-cell--actual {
    background: var(--gnt-tp-actual-bg);
}

.gnt-timephase .gnt-tp-cell--locked {
    background: var(--gnt-tp-locked-bg);
}

.gnt-timephase .gnt-tp-cell--empty {
    color: var(--gnt-tp-empty-fg);
}

.gnt-timephase .gnt-tp-cell--zero {
    color: var(--gnt-tp-derived-fg);
}

.gnt-timephase .gnt-tp-cell--negative {
    color: var(--gnt-tp-negative-fg);
}

.gnt-timephase .gnt-tp-cell--pending {
    background: var(--gnt-tp-pending-bg);
}

.gnt-timephase .gnt-tp-cell--readonly {
    cursor: not-allowed;
}

.gnt-timephase .e-rowcell.gnt-tp-cell--dirty {
    background: var(--gnt-tp-dirty-bg);
    font-weight: 600;
}

/* Both bodies always reserve a horizontal scrollbar, whether or not their columns overflow. A bar
   that appears on one pane only takes ~15px from that pane's content height and the row counts
   diverge (§8.4 invariant 1). Symmetric always beats conditional here. */
.gnt-timephase .gnt-tp-left .e-content,
.gnt-timephase .gnt-tp-right .e-content {
    overflow-x: scroll !important;
}

/* ---- our own tree affordance in the left pane (decision 35) ------------------------------ */

/* Block-level flex, not inline-flex: an overflowing inline-flex box moves its baseline and grows
   the line box by a few pixels, which broke the row-height arithmetic on deep, long labels. */
.gnt-timephase .gnt-tp-rowlabel {
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--gnt-tp-unit);
    line-height: var(--gnt-tp-unit);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.gnt-timephase .gnt-tp-rowlabel-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gnt-timephase .gnt-tp-rowlabel--rollup .gnt-tp-rowlabel-text {
    font-weight: 600;
}

.gnt-timephase .gnt-tp-expander {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gnt-tp-derived-fg);
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.gnt-timephase .gnt-tp-expander:hover {
    color: inherit;
}

.gnt-timephase .gnt-tp-expander--leaf {
    cursor: default;
}

/* ---- row separators without layout height ------------------------------------------------
   The vendor's 1px row border is part of the row's height, so the right pane (measures rows per
   entity) grows by (measures - 1)px per entity relative to the left, and the panes drift. Draw the
   separators with an inset shadow instead: no layout, exact unit heights on both sides. Between
   measures the line is light; at an entity boundary it is the full border colour. */
.gnt-timephase .e-grid .e-rowcell {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    box-shadow: inset 0 -1px var(--gnt-tp-row-sep, #eeeeee);
}

.gnt-timephase .gnt-tp-left .e-grid .e-rowcell,
.gnt-timephase .gnt-tp-right .e-rowcell.gnt-tp-cell--last-measure,
.gnt-timephase .gnt-tp-right .e-rowcell.gnt-tp-details--last-measure {
    box-shadow: inset 0 -1px var(--gnt-tp-border);
}