.week-picker {
    position: relative;
    display: inline-block;
}

.period-week-button {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #dce4ed;
    background: #fff;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 1px 2px #0000000d;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.period-week-button:hover {
    border-color: #93cefd;
    background: #eff8ff;
    color: #1b59bb;
}

.week-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

.week-status-dot-data {
    background: #10b981;
}

.week-status-dot-empty {
    background: #bdc9d8;
}

.week-picker-panel {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.5rem);
    z-index: 30;
    width: min(22rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    border-radius: 0.5rem;
    border: 1px solid #dce4ed;
    background: #fff;
    padding: 0.75rem;
    text-align: left;
    box-shadow: 0 16px 50px #10182714;
}

.week-picker-nav {
    margin-bottom: 0.75rem;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.week-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.week-picker-option {
    min-height: 3.5rem;
    border-radius: 0.5rem;
    border: 1px solid;
    padding: 0.5rem 0.75rem;
    text-align: left;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.week-picker-option-selected {
    border-color: #1f70df;
    background: #1f70df;
    color: #fff;
    box-shadow: 0 1px 2px #0000000d;
}

.week-picker-option-selected:hover {
    background: #1b59bb;
}

.week-picker-option-data {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.week-picker-option-data:hover {
    border-color: #6ee7b7;
    background: #d1fae5;
}

.week-picker-option-empty {
    border-color: #dce4ed;
    background: #f8fafc;
    color: #8da0b4;
}

.week-picker-option-empty:hover {
    border-color: #bdc9d8;
    color: #475569;
}

.week-picker-date {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.week-picker-status {
    margin-top: 0.125rem;
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.power-toolbar {
    grid-template-columns: 2.75rem minmax(10rem, 1fr) 2.75rem;
}

.players-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
}

.players-toolbar > p {
    margin-left: auto;
}

.players-detail-panel {
    top: 10rem;
    max-height: calc(100vh - 11.25rem);
}

.power-month-control {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-self: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #dce4ed;
    background: #fff;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: #475569;
    box-shadow: 0 1px 2px #0000000d;
}

.power-month-control input {
    min-height: 0;
    width: 9rem;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    box-shadow: none;
}

.power-month-control input:focus {
    outline: 0;
    box-shadow: none;
}

.power-march-table {
    min-width: 72rem;
    width: 100%;
    table-layout: fixed;
}

.power-march-table th,
.power-march-table td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* table-layout: fixed reads column widths ONLY from first-row cells (Player,
   the two colspan tabs, the THP and Delta rowspan cells), and treats
   clamp()/calc() mixing % with rem as auto there — widths must be plain
   percentages. The six march columns carry no width: they split what the
   fixed columns leave over, evenly. */
.power-march-table .power-player-header,
.power-march-table tbody td:first-child {
    width: 16%;
    vertical-align: middle;
}

.power-march-table tbody td:first-child {
    overflow-wrap: anywhere;
}

.power-column-tab {
    border-left: 1px solid #dce4ed;
    border-right: 1px solid #dce4ed;
    border-bottom: 1px solid #dce4ed;
    background: #eef2f6;
    text-align: center;
    color: #334155;
}

.power-column-tab-previous {
    background: #f8fafc;
}

.power-column-tab-current {
    background: #eff8ff;
    color: #1b59bb;
}

.power-column-tab-delta {
    width: 7.5%;
    background: #ecfdf5;
    color: #047857;
    vertical-align: middle;
}

.power-thp-header {
    width: 8%;
    vertical-align: middle;
}

/* The THP and Delta rowspan headers stack their labels on two lines (via
   <br>) so the columns can run narrower than the one-line label. The base
   .th-sort is inline-flex + nowrap, which ignores the break and crops. */
.power-thp-header .th-sort,
.power-column-tab-delta .th-sort {
    display: inline-block;
    text-align: center;
    white-space: normal;
}

.power-march-subhead {
    text-align: center;
}

.power-group-start {
    border-left: 1px solid #dce4ed;
}

.power-group-end {
    border-right: 1px solid #dce4ed;
}

/* Two-row march header inside a .table-scroll container: pin row one to an
   exact 2.5rem (py-3 + one text-xs line) so the subhead row can stick
   directly beneath it. The rowspan cells (Player, Delta) start in row one,
   so their sticky top stays 0. */
.table-scroll .power-march-table thead tr:first-child th {
    height: 2.5rem;
}

.table-scroll .power-march-table thead tr:last-child th {
    top: 2.5rem;
}

.dark .period-week-button {
    border-color: #334155;
    background: #101827;
    color: #eef2f6;
}

.dark .period-week-button:hover {
    border-color: #1c4078;
    background: rgb(28 64 120 / 0.4);
    color: #dbeefe;
}

.dark .week-status-dot-empty {
    background: #475569;
}

.dark .week-picker-panel {
    border-color: #334155;
    background: #101827;
    box-shadow: none;
}

.dark .week-picker-nav {
    color: #8da0b4;
}

.dark .week-picker-option-selected {
    border-color: #358ff3;
    background: #358ff3;
    color: #fff;
}

.dark .week-picker-option-selected:hover {
    background: #1f70df;
}

.dark .week-picker-option-data {
    border-color: #047857;
    background: rgb(6 78 59 / 0.3);
    color: #d1fae5;
}

.dark .week-picker-option-data:hover {
    border-color: #059669;
}

.dark .week-picker-option-empty {
    border-color: #334155;
    background: #1f2937;
    color: #64748b;
}

.dark .week-picker-option-empty:hover {
    color: #bdc9d8;
}

.dark .power-month-control {
    border-color: #334155;
    background: #101827;
    color: #dce4ed;
}

.dark .power-month-control input {
    color: #eef2f6;
}

.dark .power-column-tab,
.dark .power-group-start,
.dark .power-group-end {
    border-color: #334155;
}

.dark .power-column-tab {
    background: #1f2937;
    color: #dce4ed;
}

.dark .power-column-tab-previous {
    background: #101827;
}

.dark .power-column-tab-current {
    background: rgb(28 64 120 / 0.4);
    color: #dbeefe;
}

.dark .power-column-tab-delta {
    background: rgb(6 78 59 / 0.3);
    color: #a7f3d0;
}

@media (max-width: 1023px) {
    .power-toolbar {
        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    }
}

@media (max-width: 767px) {
    .week-picker-panel {
        width: min(20rem, calc(100vw - 2rem));
    }

    .week-picker-grid {
        grid-template-columns: 1fr;
    }
}