/* ── Watch Time Report ─────────────────────────────────────────── */

.wt-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Newest month not imported yet (see renderPendingNote) */
.wt-pending-note {
    margin-bottom: 14px;
    padding: 8px 14px;
    font-size: 0.82rem;
    color: var(--desert-dark);
    background: var(--linen-light);
    border: 1px solid var(--desert-light);
    border-left: 4px solid var(--desert);
    border-radius: 6px;
}

/* Sub-tabs on the left, Sources chips pushed right, one line */
.wt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 14px;
}

/* Sub-tabs (report view switcher) */
.wt-subtabs {
    display: flex;
    gap: 6px;
}

/* Sources: checkbox chips, deliberately unlike the tabs (no fill, a
   checkbox glyph, a label in front) so they don't read as more views */
.wt-sources {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px dashed var(--linen-dark);
    border-radius: 999px;
}

.wt-sources-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--stone);
    margin-right: 2px;
}

.wt-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px 2px 7px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--stone);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wt-source-chip .bi {
    font-size: 0.8rem;
}

.wt-source-chip:hover {
    background: var(--linen);
}

.wt-source-chip.on {
    color: var(--forest);
    border-color: var(--sage);
    background: var(--linen-light);
}

.wt-source-chip[aria-disabled="true"] {
    cursor: not-allowed;
}

/* Origins-only course (not on the Hours Watched sheet) */
.wt-origins-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--forest);
    border: 1px solid var(--sage);
    border-radius: 999px;
    vertical-align: 1px;
}

/* Database vs Google Sheet disagree (see renderParity) */
.wt-parity-banner {
    margin-bottom: 14px;
    padding: 10px 14px;
    font-size: 0.84rem;
    color: #7a1f1f;
    background: #fdecec;
    border: 1px solid #f1b8b8;
    border-left: 4px solid #c0392b;
    border-radius: 6px;
}

.wt-parity-banner.wt-parity-soft {
    color: var(--stone);
    background: var(--linen-light);
    border-color: var(--linen-dark);
    border-left-color: var(--stone);
}

.wt-parity-banner details {
    margin-top: 4px;
}

.wt-parity-banner ul {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 0.78rem;
}

.wt-subtab {
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--stone);
    background: transparent;
    border: 1px solid var(--linen-dark);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wt-subtab:hover {
    color: var(--forest);
    border-color: var(--sage);
    background: var(--linen);
}

.wt-subtab.active {
    color: #fff;
    background: var(--forest);
    border-color: var(--forest);
}

.wt-subtab.wt-mini {
    padding: 3px 10px;
    font-size: 0.72rem;
}

/* Controls row */
.wt-controls {
    flex-wrap: wrap;
    gap: 8px;
}

.wt-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wt-metric-toggle {
    display: flex;
    gap: 4px;
}

.wt-window-select {
    width: auto;
    font-size: 0.75rem;
    padding: 4px 26px 4px 8px;
}

/* Chart panel height */
.wt-chart-panel .chart-container {
    height: 220px;
}

/* Table. It is the report, so it gets (nearly) a window of its own: the
   scroll box is the window's height less the top bar and the card's header,
   and the page scrolls down to it past the KPIs and chart (Hide chart skips
   that). Rows are compact. Before 2026-10-21 the box got what the chart left,
   about six rows on a laptop (Jacob: "I can only see about 6 at a time"). */
.wt-table-flex {
    flex: none;
}

.wt-table-flex > .wt-table-scroll,
.wt-table-scroll {
    overflow: auto;
    flex: none;
    height: calc(100vh - 175px);
    min-height: 360px;
    max-height: none;
}

.wt-table thead th {
    padding: 7px 10px;
}

.wt-table tbody td,
.wt-table tfoot td {
    padding: 4px 10px;
}

.wt-table-scroll tfoot .total-row td {
    padding: 7px 10px;
}

.wt-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.wt-measure {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* A source with nothing for the measure (Kajabi in Views) */
.wt-source-chip.na {
    color: var(--stone-light);
    text-decoration: line-through;
}

.wt-source-chip.na:hover {
    background: transparent;
}

.wt-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.wt-chart-head h3 {
    margin-bottom: 12px;
}

.wt-chart-collapsed {
    padding-top: 12px;
    padding-bottom: 12px;
}

.wt-chart-collapsed .wt-chart-head h3 {
    margin-bottom: 0;
}

.wt-chart-toggle {
    flex-shrink: 0;
    padding: 2px 8px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--stone);
    background: transparent;
    border: 1px solid var(--linen-dark);
    border-radius: 6px;
    cursor: pointer;
}

.wt-chart-toggle:hover {
    color: var(--forest);
    border-color: var(--sage);
}

.wt-custom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* A quarter or year the range holds only part of */
.wt-partial {
    margin-left: 1px;
    color: var(--desert);
    cursor: help;
}

/* Sparkline column */
.wt-table .wt-trend-col {
    width: 88px;
    min-width: 88px;
    padding-top: 2px;
    padding-bottom: 2px;
    cursor: default;
}

.wt-spark {
    display: block;
    overflow: visible;
}

.wt-spark path {
    fill: none;
    stroke: var(--sage-dark);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.wt-spark circle {
    fill: var(--forest);
}

.wt-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.wt-table th.sortable:hover {
    color: var(--forest);
}

.wt-table td, .wt-table th {
    white-space: nowrap;
}

.wt-course {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sticky #/Course columns */
.wt-table .wt-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}

.wt-table .wt-sticky-2 {
    position: sticky;
    left: 42px;
    z-index: 2;
    background: #fff;
}

.wt-table thead .wt-sticky,
.wt-table thead .wt-sticky-2 {
    z-index: 11; /* above sticky month headers (z10) when scrolled horizontally */
    background: var(--linen);
}

.wt-table tfoot .wt-sticky,
.wt-table tfoot .wt-sticky-2 {
    background: var(--linen);
}

.wt-col-num {
    width: 42px;
    min-width: 42px;
    color: var(--stone);
    font-size: 0.72rem;
}

/* Rolling average columns — visually separated */
.wt-table th.wt-roll,
.wt-table td.wt-roll {
    border-left: 2px solid var(--linen-dark);
}

/* Darker divider between the latest month and the rolling-average block */
.wt-table th.wt-roll-first,
.wt-table td.wt-roll-first {
    border-left: 2px solid var(--stone-light);
}

/* Pinned TOTAL row (Hours Watched tab) — sticks just below the header row */
.wt-table thead tr.wt-totals-row th {
    top: var(--wt-head-h, 37px);
    z-index: 9;
    background: var(--linen);
    cursor: default;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--forest);
    box-shadow: 0 1px 0 var(--linen-dark);
}

.wt-table thead tr.wt-totals-row th:hover {
    color: var(--forest);
}

.wt-table thead tr.wt-totals-row .wt-sticky,
.wt-table thead tr.wt-totals-row .wt-sticky-2 {
    z-index: 11;
    background: var(--linen);
}

.wt-table tfoot td {
    background: var(--linen);
    font-weight: 600;
}