/* Shared Excel-style sheet chrome — period entry and reporting-grid matrices. */
.cf-excel-sheet {
    --excel-green: #107c41;
    --excel-chrome: color-mix(in srgb, var(--color-page-bg, #f1f5f9) 42%, var(--color-card-bg, #ffffff));
    --excel-header-bg: color-mix(in srgb, var(--color-card-bg, #ffffff) 78%, var(--color-page-bg, #f1f5f9));
    --excel-header-text: var(--color-text-muted, #64748b);
    --excel-col-letter-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-card-bg, #ffffff) 94%, var(--color-page-bg, #f1f5f9)) 0%,
        color-mix(in srgb, var(--color-card-bg, #ffffff) 72%, var(--color-page-bg, #f1f5f9)) 100%
    );
    --excel-col-letter-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 88%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--color-text-muted, #64748b) 18%, transparent);
    --excel-grid-line: color-mix(in srgb, var(--color-card-border, #cbd5e1) 70%, transparent);
    --excel-grid-line-strong: color-mix(in srgb, var(--color-card-border, #cbd5e1) 90%, var(--color-text-muted, #64748b));
    --excel-text: var(--color-text-primary, #0f172a);
    --excel-text-muted: var(--color-text-muted, #64748b);
    --excel-surface: var(--color-card-bg, #ffffff);
    --excel-missing: color-mix(in srgb, #f59e0b 14%, var(--color-card-bg, #ffffff));
    --excel-ghost: color-mix(in srgb, var(--excel-chrome) 70%, var(--excel-surface));
    --excel-sheet-bar-start: color-mix(in srgb, var(--color-page-bg, #f1f5f9) 58%, var(--color-card-bg, #ffffff));
    --excel-sheet-tab-active-bg: var(--color-card-bg, #ffffff);
    --excel-sheet-tab-shadow:
        0 -1px 0 color-mix(in srgb, var(--color-card-bg, #ffffff) 92%, #ffffff) inset,
        0 1px 3px rgba(15, 23, 42, 0.06);
    --excel-font: 'Aptos', 'Segoe UI', Calibri, system-ui, sans-serif;
    --excel-row-height: 28px;
    --excel-header-height: 20px;
    --excel-col-count: 12;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--excel-grid-line-strong);
    border-radius: 4px;
    background: var(--excel-surface);
    font-family: var(--excel-font);
}

.cf-excel-sheet--compact {
    --excel-row-height: 26px;
    --excel-header-height: 18px;
}

.cf-excel-sheet__sheet-bar {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    min-height: 1.75rem;
    padding: 0.35rem 0.4rem 0;
    background: linear-gradient(180deg, var(--excel-sheet-bar-start) 0%, var(--excel-chrome) 100%);
    border-bottom: 1px solid var(--excel-grid-line-strong);
}

.cf-excel-sheet__sheet-tab {
    display: inline-block;
    max-width: min(42rem, 92%);
    margin: 0;
    padding: 0.3rem 0.85rem 0.35rem;
    font-family: var(--excel-font);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--excel-text);
    background: var(--excel-sheet-tab-active-bg);
    border: 1px solid var(--excel-grid-line-strong);
    border-bottom: 2px solid var(--excel-green);
    border-radius: 5px 5px 0 0;
    box-shadow: var(--excel-sheet-tab-shadow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Emphasise what is being collected (KPI name or breakdown slice). */
.cf-excel-sheet__sheet-tab--collecting {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    max-width: min(48rem, 96%);
    font-weight: 700;
    color: var(--excel-text);
    background: color-mix(in srgb, var(--excel-green) 14%, var(--excel-sheet-tab-active-bg));
    border-color: color-mix(in srgb, var(--excel-green) 38%, var(--excel-grid-line-strong));
    box-shadow:
        var(--excel-sheet-tab-shadow),
        inset 0 0 0 1px color-mix(in srgb, var(--excel-green) 10%, transparent);
}

.cf-excel-sheet__sheet-tab-meta {
    font-weight: 600;
    color: var(--excel-text-muted);
}

.cf-excel-sheet__sheet-tab-meta::after {
    content: ":";
}

.cf-excel-sheet__sheet-tab-focus {
    font-weight: 700;
    color: var(--excel-text);
}

.cf-excel-sheet__sheet-tab-tip,
.cf-excel-sheet__sheet-tab-tip.dash-hover-tooltip {
    display: inline-flex;
    max-width: min(48rem, 96%);
    min-width: 0;
}

.cf-excel-sheet__sheet-tab-tip .cf-excel-sheet__sheet-tab {
    max-width: 100%;
}

.cf-excel-sheet__scroll {
    /* Horizontal only: sheets grow with rows so the page (not the grid) owns vertical scroll.
       overflow:auto + overscroll-behavior:contain was trapping the wheel while hovering. */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    background: var(--excel-surface);
    scrollbar-width: thin;
}

.cf-excel-sheet__grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--excel-text);
    background: var(--excel-surface);
}

.cf-excel-sheet__col {
    width: calc(100% / var(--excel-col-count));
}

.cf-excel-sheet__grid th,
.cf-excel-sheet__grid td {
    border-right: 1px solid var(--excel-grid-line-strong);
    border-bottom: 1px solid var(--excel-grid-line);
    padding: 0;
    vertical-align: middle;
    height: var(--excel-row-height);
    min-height: var(--excel-row-height);
    box-sizing: border-box;
}

.cf-excel-sheet__grid th:last-child,
.cf-excel-sheet__grid td:last-child {
    border-right: none;
}

.cf-excel-sheet__row--letters th {
    height: var(--excel-header-height);
    min-height: var(--excel-header-height);
    border-bottom: 1px solid var(--excel-grid-line-strong);
}

.cf-excel-sheet__cell--col-letter {
    width: calc(100% / var(--excel-col-count));
    min-width: 0;
    max-width: none;
    background: var(--excel-col-letter-bg);
    color: var(--excel-header-text);
    font-weight: 400;
    font-size: 0.6875rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: var(--excel-col-letter-shadow);
}

.cf-excel-sheet__col-letter {
    display: block;
    line-height: var(--excel-header-height);
    letter-spacing: 0.02em;
}

.cf-excel-sheet__cell--header {
    width: calc(100% / var(--excel-col-count));
    min-width: 0;
    max-width: none;
    background: var(--excel-header-bg);
    color: var(--excel-text);
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
        inset 0 -1px 0 var(--excel-green);
}

.cf-excel-sheet__cell-value {
    display: block;
    padding: 0 0.15rem;
    line-height: var(--excel-row-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-excel-sheet__cell-value--numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cf-excel-sheet__cell--value {
    width: calc(100% / var(--excel-col-count));
    min-width: 0;
    max-width: none;
    background: var(--excel-surface);
    padding: 0;
}

.cf-excel-sheet__cell--row-header {
    width: calc(100% / var(--excel-col-count));
    min-width: 0;
    max-width: none;
    background: var(--excel-header-bg);
    color: var(--excel-text);
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
        inset -1px 0 0 var(--excel-grid-line-strong);
}

.cf-excel-sheet__cell--corner {
    background: var(--excel-col-letter-bg);
    box-shadow: var(--excel-col-letter-shadow);
}

.cf-excel-sheet__cell--missing {
    background: var(--excel-missing);
}

.cf-excel-sheet__cell--header.cf-excel-sheet__cell--ghost {
    color: transparent;
    font-weight: 500;
    background: color-mix(in srgb, var(--excel-header-bg) 55%, var(--excel-ghost));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--excel-green) 28%, var(--excel-grid-line-strong));
}

.cf-excel-sheet__cell--value.cf-excel-sheet__cell--ghost {
    background:
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--excel-ghost) 92%, var(--excel-grid-line)),
            color-mix(in srgb, var(--excel-ghost) 92%, var(--excel-grid-line)) 3px,
            color-mix(in srgb, var(--excel-surface) 82%, var(--excel-ghost)) 3px,
            color-mix(in srgb, var(--excel-surface) 82%, var(--excel-ghost)) 6px
        );
    pointer-events: none;
    user-select: none;
}

.cf-excel-sheet__ghost-fill {
    display: block;
    width: 100%;
    height: var(--excel-row-height);
    min-height: var(--excel-row-height);
}

.cf-excel-sheet__cell--value .cf-input,
.cf-excel-sheet__cell--value input.cf-input,
.cf-excel-sheet__cell--value button.cf-input--display,
.cf-excel-sheet__cell--value div.cf-input,
.cf-excel-sheet__cell--value .cf-excel-sheet__input,
.cf-excel-sheet__cell--value input.cf-excel-sheet__input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: var(--excel-row-height) !important;
    height: var(--excel-row-height) !important;
    margin: 0;
    padding: 0 0.2rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: var(--excel-font);
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: calc(var(--excel-row-height) - 2px) !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    appearance: none;
    -moz-appearance: textfield;
}

.cf-excel-sheet__cell--value .cf-input:focus,
.cf-excel-sheet__cell--value input.cf-input:focus,
.cf-excel-sheet__cell--value .cf-excel-sheet__input:focus,
.cf-excel-sheet__cell--value input.cf-excel-sheet__input:focus {
    outline: 2px solid var(--excel-green);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--excel-green) 6%, var(--excel-surface)) !important;
    color: var(--excel-text) !important;
    z-index: 1;
    position: relative;
}

.cf-excel-sheet__cell--value .cf-input:disabled,
.cf-excel-sheet__cell--value input.cf-input:disabled,
.cf-excel-sheet__cell--value .cf-excel-sheet__input:disabled,
.cf-excel-sheet__cell--value input.cf-excel-sheet__input:disabled {
    color: var(--excel-text-muted);
    cursor: not-allowed;
}

.cf-excel-sheet__cell--value .cf-input__uom-placeholder {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    line-height: var(--excel-row-height);
    color: color-mix(in srgb, var(--excel-text-muted, #64748b) 70%, transparent);
    opacity: 0.8;
}

.cf-excel-sheet__cell--value input.cf-input::placeholder {
    color: color-mix(in srgb, var(--excel-text-muted, #64748b) 70%, transparent);
    opacity: 0.85;
    font-weight: 400;
}

.cf-excel-sheet__goal {
    margin-top: 0.65rem;
}