/* ============================================================
   ACTIVITY SCORE — CARD
   ============================================================ */

.wd-activity-card {
    background: var(--wd-bg-card);
    border-radius: var(--wd-radius-lg);
    padding: var(--wd-card-padding);
    max-width: 1240px;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--wd-border);
    box-shadow: var(--wd-shadow-lg);
    overflow: hidden;
}

.wd-activity-title {
    margin: 0 0 12px;
    font-size: var(--wd-font-size-xl);
    font-weight: 800;
    color: var(--wd-text-primary);
}


/* ============================================================
   TABLE SCROLL ZONE
   ============================================================ */
.wd-activity-table-wrap {
    max-width: 800px;            /* 👈 visual rail */
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

/* ============================================================
   ACTIVITY SCORE — TABLE
   ============================================================ */

.wd-activity-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    table-layout: fixed; /* 🔑 required for column control */
}


/* ============================================================
   BASE CELL STYLES
   ============================================================ */

.wd-activity-table th,
.wd-activity-table td {
    border: 1px solid var(--wd-table-border);
    padding: 6px 4px;              /* 👈 tighter horizontally */
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}


/* ============================================================
   COLUMN WIDTH CONTROL
   Order:
   1 = Day
   2 = Avg
   3+ = Time slots
   ============================================================ */

.wd-activity-table th:nth-child(1),
.wd-activity-table td:nth-child(1) {
    width: 72px;                   /* Day */
}

.wd-activity-table th:nth-child(2),
.wd-activity-table td:nth-child(2) {
    width: 58px;                   /* Avg */
}

.wd-activity-table th:nth-child(n+3),
.wd-activity-table td:nth-child(n+3) {
    width: 44px;                   /* 👈 score cells */
}


/* ============================================================
   HEADERS
   ============================================================ */

.wd-activity-table th {
    background: var(--wd-bg-subtle);
    font-weight: 700;
    color: var(--wd-text-primary);
    border-top: none;
}


/* ============================================================
   AVG COLUMN DIVIDER
   ============================================================ */

.wd-activity-table th:nth-child(2),
.wd-activity-table td:nth-child(2) {
    border-right: 4px solid #b5b5b5;
    font-weight: 800;
    background: var(--wd-bg-subtle);
}


/* ============================================================
   SPECIAL CELLS
   ============================================================ */

.wd-activity-table td.empty,
.wd-activity-table td.past-grey {
    background: var(--wd-bg-subtle);
    color: var(--wd-text-muted);
}


/* ============================================================
   SCORE COLOUR SCALE
   ============================================================ */

.score-cell {
    transition: background-color 0.15s ease;
}

.score-9,
.score-10 { background: var(--wd-score-excellent) !important; }

.score-7,
.score-8 { background: var(--wd-score-good) !important; }

.score-5,
.score-6 { background: var(--wd-score-fair) !important; }

.score-3,
.score-4 { background: var(--wd-score-poor) !important; }

.score-0,
.score-1,
.score-2 { background: var(--wd-score-bad) !important; }


/* ============================================================
   DESCRIPTION
   ============================================================ */

.wd-activity-desc {
    margin-top: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--wd-text-secondary);
    font-weight: 500;
}

.wd-activity-note {
    margin-top: 8px;
    padding-top: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--wd-text-muted);
    border-top: 1px dashed var(--wd-border-strong);
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1024px) {

    .wd-activity-title {
        font-size: 1.15rem;
    }

    .wd-activity-table th,
    .wd-activity-table td {
        font-size: 0.84rem;
        padding: 5px 4px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .wd-activity-card {
        padding: var(--wd-card-padding-mobile);
    }

    .wd-activity-table {
        min-width: 640px;
    }

    .wd-activity-table th:nth-child(1),
    .wd-activity-table td:nth-child(1) {
        width: 64px;
    }

    .wd-activity-table th:nth-child(2),
    .wd-activity-table td:nth-child(2) {
        width: 52px;
    }

    .wd-activity-table th:nth-child(n+3),
    .wd-activity-table td:nth-child(n+3) {
        width: 40px;               /* 👈 tighter on mobile */
    }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .wd-activity-table {
        min-width: 480px;
    }
	
    .wd-activity-table th,
    .wd-activity-table td {
        font-size: 0.76rem;
        padding: 4px 3px;
    }
	
	    .wd-activity-table th:nth-child(1),
    .wd-activity-table td:nth-child(1) {
        width: 35px;
    }

    .wd-activity-table th:nth-child(2),
    .wd-activity-table td:nth-child(2) {
        width: 25px;
    }

    .wd-activity-table th:nth-child(n+3),
    .wd-activity-table td:nth-child(n+3) {
        width: 25px;
    }
}


/* ============================================================
   SCORE LEGEND
   ============================================================ */

.wind-key-horizontal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px auto 0;
    font-size: 0.85rem;
}

.key-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 2px solid #ccc;
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-subtle);
}

.color-box {
    width: 16px;
    height: 16px;
    border: 1px solid var(--wd-text-muted);
    border-radius: 4px;
}