.content {
    padding: 20px;
}

.heatmap-card {
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

/* The grid is 25 columns wide; let it scroll on narrow screens rather than squash. */
.heatmap-scroll {
    overflow-x: auto;
}

table.heatmap {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0 auto;
}

.heatmap-hour-label,
.heatmap-day-label {
    font-size: 11px;
    color: #555;
    font-weight: bold;
    text-align: center;
    padding: 2px 4px;
    white-space: nowrap;
}

.heatmap-day-label {
    text-align: right;
    padding-right: 8px;
}

.heatmap-cell {
    width: 62px;
    min-width: 62px;
    height: 30px;
    text-align: center;
    font-size: 11px;
    border-radius: 3px;
    cursor: help;
}

/* Legend */
.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}


.heatmap-legend-label {
    font-size: 11px;
    color: #555;
}

.heatmap-note {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* Ranked lists */








.heatmap-empty {
    color: #666;
    padding: 30px 0;
}

.data-error {
    font-size: 13px;
    font-weight: bold;
    color: #b35c00;
    margin-bottom: 10px;
}

/* Period picker + timezone toggle */
.heatmap-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.heatmap-month-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.heatmap-month-form label {
    font-size: 13px;
    font-weight: bold;
    color: #4B2C01;
}

.heatmap-tz-toggle {
    background: none;
    border: 1px solid #4B2C01;
    color: #4B2C01;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.heatmap-tz-toggle:hover {
    background-color: #4B2C01;
    color: #fff;
}

.heatmap-period {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #4B2C01;
    margin-bottom: 10px;
}

/* Legend as labelled steps, so the shading maps to real numbers */
.heatmap-legend-steps {
    display: inline-flex;
    gap: 3px;
}

.heatmap-legend-step {
    min-width: 46px;
    padding: 3px 6px;
    font-size: 11px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Marginal "Avg" row and column */
.heatmap-margin {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #4B2C01;
    background-color: #faf6f1;
    border-radius: 3px;
    min-width: 42px;
    padding: 2px 4px;
}

.heatmap-margin-label {
    font-size: 11px;
    font-weight: bold;
    color: #4B2C01;
    text-align: center;
    padding: 2px 6px;
}

/* The single busiest hour of the week */
.heatmap-cell.is-peak {
    outline: 2px solid #4B2C01;
    outline-offset: -2px;
}

.heatmap-summary {
    text-align: center;
    font-size: 13px;
    color: #2b2118;
    margin-bottom: 6px;
}

.heatmap-howto {
    max-width: 760px;
    margin: 0 auto 14px auto;
    text-align: center;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.heatmap-corner {
    min-width: 34px;
}

/* A month of dates is 30+ rows; keep the hour header and date column in view */
.heatmap-scroll {
    max-height: 78vh;
    overflow: auto;
}

table.heatmap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
}

table.heatmap tbody th.heatmap-day-label,
table.heatmap tfoot th.heatmap-margin-label {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
}

table.heatmap thead th.heatmap-corner {
    z-index: 3;
    left: 0;
}

table.heatmap tfoot td,
table.heatmap tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: #faf6f1;
}

/* Full day names and full times need more room than the abbreviations did */
.heatmap-day-label {
    white-space: nowrap;
    min-width: 160px;
}

.heatmap-hour-label {
    white-space: nowrap;
    min-width: 62px;
}

.heatmap-margin {
    min-width: 56px;
}

/* Each populated square links to its peak moment */
.heatmap-cell-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.heatmap-cell-link:hover {
    text-decoration: underline;
}

.heatmap-cell:hover {
    outline: 2px solid #4B2C01;
    outline-offset: -2px;
}

/* ---- peak moment page ---- */
.moment-back {
    margin-bottom: 12px;
    font-size: 13px;
}

.moment-back a {
    color: #4B2C01;
    font-weight: bold;
}

.moment-headline {
    text-align: center;
}

.moment-slot {
    font-size: 14px;
    color: #666;
}

.moment-count {
    font-size: 54px;
    font-weight: bold;
    line-height: 1.1;
    color: #4B2C01;
}

.moment-count-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.moment-when {
    font-size: 14px;
    color: #2b2118;
}

.moment-when .moment-utc {
    display: block;
    font-size: 12px;
    color: #777;
}

.moment-series {
    width: 100%;
    border-collapse: collapse;
}

.moment-series th,
.moment-series td {
    padding: 2px 6px;
    font-size: 12px;
}

.moment-series-time {
    width: 60px;
    text-align: right;
    color: #555;
    font-weight: normal;
    cursor: help;
}

.moment-series-bar {
    width: auto;
}

.moment-bar {
    display: block;
    height: 12px;
    border-radius: 3px;
    background-color: hsl(28, 72%, 58%);
}

.moment-series-value {
    width: 70px;
    text-align: right;
    font-weight: bold;
    color: #2b2118;
}

.moment-series .is-peak-row .moment-bar {
    background-color: #4B2C01;
}

.moment-series .is-peak-row .moment-series-time,
.moment-series .is-peak-row .moment-series-value {
    color: #4B2C01;
}

.moment-players {
    font-weight: bold;
    white-space: nowrap;
}

.moment-capacity {
    font-weight: normal;
    color: #888;
}

.moment-breakdown-note {
    text-align: left;
    margin-bottom: 8px;
}

.moment-servers {
    background-color: #fff;
}