@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0');

/* Shared MeanIF fitness UI styles */

/* Sticky headers while the table is in view; release once scrolled past. */
table.sessions-table,
table.fitness-stats-table,
table.weight-trend-table {
    border-collapse: separate;
    border-spacing: 0;
}

table.sessions-table thead th,
table.fitness-stats-table thead th,
table.weight-trend-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 0 1px 0 #ddd;
}

.sessions-table input[type="datetime-local"] {
    font-size: 12px;
    padding: 2px 4px;
    max-width: 175px;
}

.sessions-table .edit-log-form input[type="submit"],
.sessions-table .delete-log-form input[type="submit"] {
    font-size: 12px;
    padding: 2px 6px;
}

@media (max-width: 640px) {
    .sessions-table thead { display: none; }
    .sessions-table tbody tr {
        display: block;
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 8px;
    }
    .sessions-table tbody td {
        display: block;
        padding: 4px 0;
    }
    .sessions-table tbody td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
    }
    .sessions-table input[type="datetime-local"] {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
    .sessions-table .delete-log-form { margin-top: 6px; }
}

.fitness-stats-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.fitness-stats-table th,
.fitness-stats-table td {
    padding: 0.35rem 0.4rem;
    white-space: nowrap;
    text-align: center;
}
.fitness-stats-table th:first-child,
.fitness-stats-table td:first-child,
.fitness-stats-table th[data-column="period"],
.fitness-stats-table td[data-column="period"] {
    text-align: left;
    min-width: 5.5rem;
}
.fitness-stats-table.compact th,
.fitness-stats-table.compact td {
    padding: 0.25rem 0.3rem;
    font-size: 0.9rem;
}
.fitness-stats-table.compact th[data-column="period"],
.fitness-stats-table.compact td[data-column="period"] {
    min-width: auto;
}
@media (max-width: 700px) {
    .fitness-stats-table { font-size: 0.9rem; }
    .fitness-stats-table th,
    .fitness-stats-table td { padding: 0.25rem 0.25rem; }
}

.weight-month-chart {
    width: 100%;
    max-width: 920px;
    height: 240px;
    display: block;
    background: #fff;
    border: 1px solid #e2ebcf;
    border-radius: 12px;
}
.weight-chart-wrap {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: #fbfdf6;
    border: 1px solid #e2ebcf;
}
.weight-chart-caption {
    color: #556b2f;
    font-size: 0.92em;
    margin: 0 0 8px;
}
.weight-trend-selected-card {
    padding: 18px;
    border: 1px solid #d8e4c2;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbef 100%);
    margin-bottom: 18px;
}
.weight-trend-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.weight-trend-metric {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
}
.weight-trend-metric__label {
    color: #70843a;
    font-size: 0.9em;
}
.weight-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.weight-status-dot--sm {
    width: 10px;
    height: 10px;
}

table.weight-trend-table {
    width: 100%;
    table-layout: auto;
}
table.weight-trend-table th,
table.weight-trend-table td {
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.4rem 0.45rem;
}
table.weight-trend-table thead th {
    background: #f3f8e4;
    box-shadow: 0 1px 0 #d8e4c2;
}
table.weight-trend-table th.col-month,
table.weight-trend-table td.col-month { min-width: 4.5rem; }
table.weight-trend-table th.col-trend,
table.weight-trend-table td.col-trend { min-width: 7rem; }
table.weight-trend-table th.col-weight,
table.weight-trend-table td.col-weight { min-width: 3.5rem; }
table.weight-trend-table th.col-fasting,
table.weight-trend-table td.col-fasting { min-width: 3.8rem; }
table.weight-trend-table th.col-water,
table.weight-trend-table td.col-water { min-width: 3.2rem; }
table.weight-trend-table th.col-pushups,
table.weight-trend-table td.col-pushups { min-width: 3rem; }
table.weight-trend-table th.col-calories,
table.weight-trend-table td.col-calories { min-width: 4.6rem; }
table.weight-trend-table th.col-alcohol,
table.weight-trend-table td.col-alcohol { min-width: 4.5rem; }
table.weight-trend-table th.col-activities,
table.weight-trend-table td.col-activities {
    min-width: 12rem;
    white-space: normal;
    line-height: 1.3;
}
table.weight-trend-table th.col-oura,
table.weight-trend-table td.col-oura { min-width: 12rem; }
table.weight-trend-table .oura-heart {
    display: inline-block;
    min-width: 3.6em;
    letter-spacing: 0;
}

table.weight-trend-table.hide-oura-details .oura-details { display: none; }
table.weight-trend-table.hide-oura-details th.col-oura,
table.weight-trend-table.hide-oura-details td.col-oura {
    min-width: 3.8em;
    width: 3.8em;
}
table.weight-trend-table.compact-cells { font-size: 0.92rem; }
table.weight-trend-table.compact-cells th,
table.weight-trend-table.compact-cells td { padding: 0.28rem 0.3rem; }
table.weight-trend-table.compact-cells th.col-month,
table.weight-trend-table.compact-cells td.col-month { min-width: 3.2rem; }
table.weight-trend-table.compact-cells th.col-trend,
table.weight-trend-table.compact-cells td.col-trend { min-width: 4.8rem; }
table.weight-trend-table.compact-cells th.col-oura,
table.weight-trend-table.compact-cells td.col-oura,
table.weight-trend-table.compact-cells.hide-oura-details th.col-oura,
table.weight-trend-table.compact-cells.hide-oura-details td.col-oura {
    min-width: 3.8em;
    width: 3.8em;
}
table.weight-trend-table.compact-cells .trend-full { display: none; }
table.weight-trend-table.compact-cells .trend-compact { display: inline !important; }
table.weight-trend-table .trend-compact { display: none; }

table.weight-trend-table.very-compact .trend-compact .trend-label { display: none; }
table.weight-trend-table.very-compact th.col-trend,
table.weight-trend-table.very-compact td.col-trend {
    min-width: 1.4rem;
    width: 1.4rem;
    text-align: center;
}
table.weight-trend-table.very-compact .trend-compact .weight-status-dot { margin-right: 0 !important; }
table.weight-trend-table.very-compact th.col-oura,
table.weight-trend-table.very-compact td.col-oura,
table.weight-trend-table.very-compact.hide-oura-details th.col-oura,
table.weight-trend-table.very-compact.hide-oura-details td.col-oura {
    min-width: 3.8em;
    width: 3.8em;
}

table.weight-trend-table.hide-water col.col-water,
table.weight-trend-table.hide-water th.col-water,
table.weight-trend-table.hide-water td.col-water { display: none; }
table.weight-trend-table.hide-alcohol col.col-alcohol,
table.weight-trend-table.hide-alcohol th.col-alcohol,
table.weight-trend-table.hide-alcohol td.col-alcohol { display: none; }
table.weight-trend-table.hide-pushups col.col-pushups,
table.weight-trend-table.hide-pushups th.col-pushups,
table.weight-trend-table.hide-pushups td.col-pushups { display: none; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', 'Segoe UI Symbol', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.05em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: text-bottom;
    white-space: nowrap;
    user-select: none;
}

.fitness-activity-icon {
    color: #556b2f;
    margin-right: 0.25rem;
    opacity: 0.9;
}

.fitness-activity-label {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.fitness-activity-value {
    display: inline-block;
    min-width: 1.2em;
    text-align: left;
}

.weight-trend-activities-by-day {
    margin-top: 14px;
}