/* --- THEME DEFINITIONS --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --danger-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --background-color: #e9ecef;
    --card-background: #ffffff;
    --text-color: #212529;
    --text-color-light: #f8f9fa;
    --border-color: #dee2e6;
    --header-background: #343a40;
}
body.theme-dark {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --danger-color: #dc3545;
    --success-color: #20c997;
    --warning-color: #ffc107;
    --background-color: #121212;
    --card-background: #1e1e1e;
    --text-color: #e9ecef;
    --text-color-light: #f8f9fa;
    --border-color: #495057;
    --header-background: #1e1e1e;
}
body.theme-forest {
    --primary-color: #2a9d8f;
    --secondary-color: #8ab17d;
    --danger-color: #e76f51;
    --success-color: #2a9d8f;
    --warning-color: #e9c46a;
    --background-color: #f4a261;
    --card-background: #fffcf7;
    --text-color: #264653;
    --text-color-light: #ffffff;
    --border-color: #e9c46a;
    --header-background: #264653;
}
body.theme-matrix {
    --primary-color: #00ff41; /* Bright Matrix Green */
    --secondary-color: #008f11;
    --danger-color: #ff453a;
    --success-color: #00ff41;
    --warning-color: #ffcc00;
    --background-color: #000000;
    --card-background: #0d0d0d;
    --text-color: #00ff41;
    --text-color-light: #00ff41; /* Black text for on-green buttons */
    --border-color: #00570a;
    --header-background: #0a0a0a;
    font-family: 'Courier New', Courier, monospace;
}
body.theme-high-contrast {
    --primary-color: #ffffff;    /* White */
    --secondary-color: #bbbbbb;  /* Light Grey */
    --danger-color: #ff453a;     /* Bright Red */
    --success-color: #30d158;   /* Bright Green */
    --warning-color: #ffcc00;   /* Bright Yellow */
    --background-color: #000000; /* Pure Black */
    --card-background: #000000;  /* Pure Black */
    --text-color: #ffffff;       /* Pure White */
    --text-color-light: #ffffff; /* Pure Black for button text */
    --border-color: #ffffff;     /* Pure White */
    --header-background: #000000; /* Pure Black */
}
/* In high contrast, some colored buttons need inverted text */
body.theme-high-contrast .btn-secondary,
body.theme-high-contrast .btn-primary {
    color: var(--text-color-light);
    border: 2px solid black;
}
body.theme-high-contrast .nav-arrow:disabled {
    opacity: 0.4;
}
/* --- AUTHENTICATION STYLES --- */
#auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}
.auth-switch {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9em;
}
.auth-error {
    color: var(--danger-color);
    text-align: center;
    margin-top: 1rem;
    min-height: 1.2em;
}
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--primary-color);
    text-decoration: underline;
    font-size: inherit;
    cursor: pointer;
}
.btn-link:hover {
    color: var(--secondary-color);
}
/* --- GENERAL STYLES --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}
header {
    background-color: var(--header-background);
    color: var(--text-color-light);
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    transition: background-color 0.3s;
}
.header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
}
#user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#user-info span { font-weight: bold; }
#logout-btn {
    font-size: 0.8em;
    padding: 0.3rem 0.6rem;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
}
.theme-switcher-container { display: flex; align-items: center; gap: 0.5rem; }
.theme-switcher-container label { font-size: 0.9em; }
#theme-switcher {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
}
h1 { text-align: center; margin: 2rem 0 1rem 0; }
nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }
.tab-button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--secondary-color);
    background-color: transparent;
    color: var(--text-color-light);
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background-color 0.2s, color 0.2s;
}
.tab-button:hover { background-color: var(--secondary-color); }
.tab-button.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color-light);
}
main { padding: 1rem; }
.tab-content { display: none; }
.tab-content.active { display: block; }
h2, h3, h4 { margin-top: 0; }
.card {
    background-color: var(--card-background);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
}
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
.form-row {
    display: flex;
    gap: 1rem;
}
.form-row .form-group { flex: 1; }
input[type="text"], select, input[type="date"], input[type="number"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--background-color);
    color: var(--text-color);
}
body.theme-dark input[type="date"] {
    color-scheme: dark;
}
input:disabled, select:disabled {
    background-color: var(--background-color);
    opacity: 0.7;
    cursor: not-allowed;
}
button {
    cursor: pointer;
    border-radius: 5px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border: none;
}
.btn-primary { background-color: var(--primary-color); color: var(--text-color-light); }
.btn-primary:hover { opacity: 0.9; }
.form-actions { display: flex; gap: 0.5rem; align-items: center; }
.btn-secondary { background-color: var(--secondary-color); color: white; }
.btn-secondary:hover { opacity: 0.9; }
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem 0.5rem;
    color: var(--secondary-color);
}
.icon-btn:hover { color: var(--primary-color); }
.icon-btn.delete:hover { color: var(--danger-color); }
.card-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.card-header-with-action h3 {
    margin-bottom: 0;
}
/* --- Workout Log Tab Styles --- */
.workout-log-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (max-width: 900px) { .workout-log-layout { grid-template-columns: 1fr; } }
.workout-header h3 { text-align: center; margin: 0; }
.nav-arrow {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    cursor: pointer;
}
.nav-arrow:disabled { color: var(--secondary-color); cursor: not-allowed; opacity: 0.5; }
.bodyweight-display strong {
    color: var(--text-color);
    margin-right: 0.5rem;
}
.bodyweight-display .icon-btn { font-size: 1rem; vertical-align: middle; }
#add-log-entry-form, #add-food-item-form {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
}
.log-inputs { display: flex; gap: 1rem; align-items: flex-end; }
.log-inputs .form-group { flex-grow: 1; }
#search-results-container, #food-search-results-container {
    position: absolute;
    width: 100%;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
}
.search-result-item:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.search-result-item .icon-btn {
    font-size: 1rem;
    padding: 0 0.5rem;
    flex-shrink: 0;
}
#workout-log-entries, #workout-summary-content, #food-log-entries { width: 100%; }
.log-table { width: 100%; border-collapse: collapse; margin-top: 1rem; margin-bottom: 1.5rem; }
.log-table th, .log-table td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border-color); }
.log-table th { color: var(--secondary-color); font-size: 0.9em; }
.workout-controls { margin-top: 1.5rem; text-align: right; }
/* --- Food Log Specific Styles --- */
.food-log-display-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--primary-color);
}
.totals-display {
    text-align: center;
    position: sticky;
    top: 1rem;
}
.totals-display h3 { margin: 0 0 0.5rem 0; }
.totals-display p { font-size: 1.1rem; margin: 0; margin-bottom: 1.5rem; }
.chart-container {
    position: relative;
    max-width: 300px;
    margin: auto;
}
@media (max-width: 900px) {
    .food-log-display-layout { grid-template-columns: 1fr; }
    .totals-display { position: static; }
}

.recipe-ingredient-item {
    display: flex;
    justify-content: flex-start; /* Aligns items to the left */
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem; /* Adds space between elements */
}

.recipe-ingredient-item .ingredient-number {
    font-weight: bold;
    color: var(--secondary-color);
    width: 25px; /* Gives the number a fixed space */
    flex-shrink: 0;
}

.recipe-ingredient-item .ingredient-name {
    font-weight: bold;
    flex-grow: 1; /* Allows the name to take up available space */
}

.ingredient-weight-input {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ingredient-weight-input .inline-ingredient-weight {
    width: 70px; /* A reasonable width for the weight input */
    text-align: right;
    padding: 0.4rem;
}

.remove-ingredient-btn {
    /* Override any default button styles */
    background: none !important;
    border: none !important;
    padding: 0.25rem !important; /* Small padding for a better click target */
    
    /* Set the color */
    color: var(--danger-color); /* Make it red by default */
    font-size: 1.2rem;
    line-height: 1; /* Helps with alignment */
    opacity: 0.7;
    transition: opacity 0.2s;
}
.remove-ingredient-btn:hover {
    opacity: 1;
}

.recipe-ingredient-item .remove-ingredient-btn {
    /* Override all default button styles */
    background: transparent;
    border: none;
    padding: 0.5rem;
    margin: 0;
    
    /* Set the desired style */
    color: var(--danger-color); /* Makes the 'X' red */
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.recipe-ingredient-item .remove-ingredient-btn:hover {
    opacity: 1.0;
    background-color: transparent; /* Ensure no background on hover */
    color: var(--danger-color); /* Ensure it stays red */
}

.scan-btn {
    position: absolute;
    bottom: 4px;
    right: 5px;
    height: 36px;
    width: 36px;
    padding: 0;
    border: none;
    background-color: var(--secondary-color);
    cursor: pointer;
    opacity: 0.7;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h2v12H7V6zm3 0h2v12h-2V6zm3 0h1v12h-1V6zm2 0h3v12h-3V6zm4 0h2v12h-2V6z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h2v12H7V6zm3 0h2v12h-2V6zm3 0h1v12h-1V6zm2 0h3v12h-3V6zm4 0h2v12h-2V6z'/%3e%3c/svg%3e");
    -webkit-mask-size: 75%;
    mask-size: 75%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
body.theme-dark .scan-btn {
    background-color: var(--text-color);
}
.scan-btn:hover {
    opacity: 1;
    background-color: var(--primary-color);
}

/* --- My Progress Tab Styles --- */
.progress-charts-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: flex-start;
}
.chart-wrapper {
    position: relative;
    height: 300px;
    width: 100%;
    margin-top: 1rem;
}
.reset-zoom-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    padding: 0.2rem 0.5rem;
    font-size: 0.8em;
    opacity: 0.7;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
}
.reset-zoom-btn:hover {
    opacity: 1;
}
@media (max-width: 1200px) { .progress-charts-layout { grid-template-columns: 1fr; } }
/* --- About Me Tab Styles --- */
.about-me-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
#calorie-results-container h4 {
    color: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
#calorie-results-container p { font-size: 1.1rem; line-height: 1.6; }
#calorie-results-container strong { font-size: 1.2rem; color: var(--primary-color); }
@media (max-width: 900px) { .about-me-layout { grid-template-columns: 1fr; } }
/* Manage Exercises List Styles */
.exercise-item { display: flex; justify-content: space-between; align-items: center; }
.exercise-item .actions { display: flex; gap: 0.5rem; }
/* --- Additions for Food Search UX --- */
.search-results-header {
    padding: 0.5rem 0.75rem 0.25rem;
    margin: 0;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--secondary-color);
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#food-search-results-container h6:first-child {
    border-top: none;
    margin-top: -1px;
}
.search-meta-info {
    padding: 0.75rem;
    text-align: center;
    color: var(--secondary-color);
    font-style: italic;
    font-size: 0.9em;
}
#food-macro-details {
    border-top: 1px dashed var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
    display: none;
}
/* --- Additions for In-Line Workout Editing --- */
.log-table tr.edit-mode {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-background));
}
.log-table input[type="number"],
.log-table input[type="text"] {
    width: 95%;
    padding: 0.5rem;
    font-size: 1em;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.log-table .actions-cell .icon-btn {
    font-size: 1.5rem;
}
.log-table .icon-btn.save:hover {
    color: #2a9d8f;
}
.log-table .icon-btn.cancel:hover {
    color: var(--danger-color);
}
.search-results-container-inline {
    position: absolute;
    width: 100%;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.search-results-container {
    position: absolute;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000; /* Ensure it's on top */
}
/* --- Additions for Manage Exercises Layout --- */
#exercise-list-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.exercise-category-card {
    margin-bottom: 0;
}
.exercise-category-card .exercise-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.exercise-category-card .exercise-item {
    padding: 0.75rem 0;
}
/* --- Additions for Create Workout Form Layout --- */
.form-inline-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.form-inline-group .form-group {
    margin-bottom: 0;
    flex-grow: 1;
    flex-basis: auto;
}
.form-inline-group button {
    flex-shrink: 0;
}
/* --- Definitive Fix for Workout Header Alignment --- */
.workout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.workout-title-group {
    flex-grow: 1;
    text-align: center;
}
.workout-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.bodyweight-display {
    padding: 0.5rem 0 0 0;
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--secondary-color);
}
.workout-header .nav-arrow {
   width: auto;
   flex-shrink: 0;
}
.log-table .actions-cell {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
/* --- Macro and Calorie Goal Color Coding --- */
.totals-display .macro-value {
    padding: 0 0.25em;
    display: inline-block;
}
.totals-display .macro-red,
.totals-display .macro-green,
.totals-display .macro-yellow,
.totals-display .macro-default {
    font-weight: bold;
}
.totals-display .macro-red {
    color: var(--danger-color);
}
.totals-display .macro-green {
    color: var(--success-color);
}
.totals-display .macro-yellow {
    color: var(--warning-color);
}
.totals-display .macro-default {
    color: var(--text-color);
}
#calorie-goal-progress {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
#calorie-goal-progress .calories-consumed {
    color: inherit;
}
/* --- Admin User List Styles --- */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}
.status-indicator.online {
    background-color: var(--success-color);
}
.status-indicator.offline {
    background-color: var(--secondary-color);
}
.icon-btn.reset-pin:hover {
    color: var(--primary-color);
}
/* --- Barcode Scanner Styles --- */
.input-with-icon {
    position: relative;
}
.input-with-icon > input[type="text"],
.input-with-icon > input[type="number"],
.input-with-icon > input[type="password"] {
    /* Add space on the right for the icon button */
    padding-right: 45px;
}

#scan-barcode-btn {
    position: absolute;
    bottom: 4px;
    right: 5px;
    height: 36px;
    width: 36px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    opacity: 0.6;
    background-color: var(--secondary-color);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h2v12H7V6zm3 0h2v12h-2V6zm3 0h1v12h-1V6zm2 0h3v12h-3V6zm4 0h2v12h-2V6z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h2v12H7V6zm3 0h2v12h-2V6zm3 0h1v12h-1V6zm2 0h3v12h-3V6zm4 0h2v12h-2V6z'/%3e%3c/svg%3e");
    -webkit-mask-size: 75%;
    mask-size: 75%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
body.theme-dark #scan-barcode-btn {
    background-color: var(--text-color);
}
#scan-barcode-btn:hover {
    opacity: 1;
    background-color: var(--primary-color);
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background-color: var(--card-background);
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    text-align: center;
}
#barcode-reader {
    width: 100%;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto; /* This pushes it to the left of the secondary buttons */
    padding: 0 1rem;
}

.toggle-switch-label {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--secondary-color);
    cursor: pointer;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 28px;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .slider {
    background-color: var(--success-color);
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(22px);
}

#food-review-card .review-macro {
    text-align: center;
    background-color: var(--card-background);
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}
#food-review-card .review-macro label {
    font-size: 0.8em;
    color: var(--secondary-color);
}
#food-review-card .review-macro p {
    font-weight: bold;
    font-size: 1.2em;
    margin: 0.25rem 0 0 0;
}
/* --- REFINED CALENDAR STYLES (SOFTER & SPACED) --- */
#workout-calendar-container {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.calendar-header h4 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.1em;
}
.calendar-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 5px;
    padding: 0 4px; /* Align with the new gap */
}
.calendar-days-header div {
    font-weight: bold;
    font-size: 0.8em;
    color: var(--secondary-color);
}
.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; /* This creates the padding/space between days */
}
.calendar-day {
    padding: 4px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* New border and border-radius for the softer look */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Adjust this value to make it more/less round */
}
.calendar-day:hover {
    background-color: var(--hover-background);
}
.day-number {
    font-size: 0.9em;
    padding: 4px 0;
}
/* Updated "today" highlight to be cleaner */
.calendar-day.is-today {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.1);
}
.calendar-day.is-today .day-number {
    font-weight: bold;
    color: var(--primary-color);
}
.calendar-day.other-month {
    background-color: var(--background-color-alt);
    border-color: transparent; /* Hide border for non-month days */
}
.calendar-day.other-month .day-number {
    opacity: 0.5;
}
.calendar-workout-bar {
    width: 100%;
    border: none;
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    padding: 3px 0;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 0.2s;
}
/* --- CALENDAR BAR COLORS FOR NEW CATEGORIES --- */
.calendar-workout-bar.category-upper-body { background-color: #17a2b8; } /* Teal */
.calendar-workout-bar.category-lower-body { background-color: #6f42c1; } /* Indigo */
/* Special style for Full Body for high contrast */
.calendar-workout-bar.category-full-body {
    background-color: #f8f9fa; /* Off-white */
    color: #212529; /* Dark text for readability */
    border: 1px solid #adb5bd; /* A subtle border to pop on light backgrounds */
}
.calendar-day.is-selected {
    /* A thick, white border to make it stand out */
    border: 2px solid white;
    /* A subtle background to further distinguish it */
    background-color: var(--hover-background);
}
.calendar-workout-bar:hover {
    filter: brightness(1.15);
}
.calendar-workout-bar.category-push { background-color: #d32f2f; }
.calendar-workout-bar.category-pull { background-color: #7b1fa2; }
.calendar-workout-bar.category-legs { background-color: #388e3c; }
.calendar-workout-bar.category-other { background-color: #f57c00; }
/* --- REFINED FOOD CALENDAR BAR STYLES --- */
.food-calendar-bar {
    width: 100%;
    border: none;
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    padding: 3px 0; /* Adjusted padding for a shorter bar */
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.2s;
    /* Removed multi-line properties */
}
.food-calendar-bar:hover {
    filter: brightness(1.15);
}
/* Color-coding based on the existing macro classes */
.food-calendar-bar.macro-green { background-color: #388e3c; } /* Green */
.food-calendar-bar.macro-yellow { background-color: #fbc02d; } /* Yellow */
.food-calendar-bar.macro-red { background-color: #d32f2f; } /* Red */
.food-calendar-bar.macro-default { background-color: #546e7a; } /* Grey for no goal */
/* --- NEW LAYOUT FOR FOOD LOG TAB --- */
#tab-food-log > section {
    /* Set a maximum width - 800px is a good starting point */
    max-width: 1200px;
    /* On smaller screens, it will take up 100% of the available space */
    width: 100%;
    /* This is the magic for centering a block element */
    margin-left: auto;
    margin-right: auto;
}
#food-calendar-container {
    margin-bottom: 20px;
}
/* --- NEW STYLES FOR WORKOUT TIMER --- */
#workout-timer-display {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-color);
    margin-top: 8px;
    background-color: var(--background-color-alt);
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and time */
}
/* --- NEW STYLES FOR REST TIMER --- */
#rest-timer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
}
#rest-timer-display {
    font-size: 3.5em; /* Big, easy to read timer */
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace; /* Monospaced for stable width */
    color: var(--text-color);
}
.rest-timer-controls {
    display: flex;
    gap: 15px;
}
.rest-timer-controls button {
    min-width: 100px; /* Give buttons a nice uniform width */
}
/* --- NEW FOOD LOG ENTRY STYLES --- */
.food-entries-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.food-item-details {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--background-color);
}
.food-item-summary {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none; /* Hide the default triangle */
}
.food-item-summary::-webkit-details-marker {
    display: none; /* Hide triangle in Chrome/Safari */
}
.food-item-summary:hover {
    background-color: var(--hover-background, rgba(0,0,0,0.05));
}
.food-item-summary .food-name {
    font-weight: bold;
}
.food-item-summary .food-calories {
    color: var(--text-color);
    font-weight: bold;
}
.food-item-content {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
}
.macro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    color: var(--secondary-color);
    font-size: 0.9em;
}
.food-item-actions {
    text-align: right;
}
.edit-quantity-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
.edit-quantity-form input,
.edit-quantity-form select {
    width: 80px;
    padding: 0.5rem;
    text-align: center;
}
#custom-food-modal .modal-content {
    text-align: left;
}
#custom-food-modal h2 {
    text-align: center;
    margin-bottom: 1rem;
}
#custom-food-modal p {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}
#custom-food-modal hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}
#custom-food-modal .form-actions {
    margin-top: 1.5rem;
    justify-content: flex-end;
}
/* --- NEW SETTINGS MENU STYLES --- */
.settings-menu {
    position: relative;
    display: inline-block;
}
#settings-menu-btn {
    font-size: 1.5rem;
    color: var(--text-color-light);
}
.dropdown-content {
    display: none; /* Hidden by default, JS will toggle this */
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem); /* Position below the button */
    background-color: var(--card-background);
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 100;
    padding: 0.5rem 0;
transform: translateZ(0);
}
.dropdown-content hr {
    margin: 0.5rem 0;
    border: none;
    border-top: 1px solid var(--border-color);
}
.dropdown-item {
    width: 100%;
    padding: 0.75rem 1.5rem;
    text-align: left;
    background-color: transparent;
    color: var(--text-color);
    border: none;
    font-size: 1rem;
}
.dropdown-item:hover {
    background-color: var(--background-color);
}
/* Specific styles for items moved into the dropdown */
.dropdown-content .tab-button {
    border: none; /* Remove border from tab buttons */
}
.dropdown-content .theme-switcher-container {
    display: flex;
    justify-content: flex-start; /* Or just remove justify-content */
    align-items: center;
    gap: 0.5rem; /* Add some space between label and select */
}
#logout-btn {
    width: 100%;
    background: none;
    color: var(--danger-color);
    font-weight: bold;
}
#logout-btn:hover {
    background-color: var(--background-color);
}
.dropdown-content #theme-switcher {
    width: auto; /* Override the global 100% width */
    flex-shrink: 0; /* Prevent it from shrinking if space is tight */
}
.programs-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .programs-layout {
        grid-template-columns: 1fr;
    }
}
.program-list-item {
    padding: 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}
.program-list-item:last-child {
    border-bottom: none;
}
.program-list-item:hover {
    background-color: var(--background-color);
}
.program-list-item.active {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    font-weight: bold;
}
.program-detail-panel .log-table td:first-child {
    font-weight: bold;
}
.program-notes {
    margin-top: 2rem;
    padding: 1rem;
    background-color: var(--background-color);
    border-radius: 6px;
}
#tab-programs {
    max-width: 1400px; /* Adjust this value to make it wider or narrower */
    margin: 0 auto;
}
.program-exercise-list {
    /* Add some space between workout sections */
    margin-bottom: 1rem;
}
.program-exercise-row {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% / 25% split */
    gap: 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.program-exercise-list .program-exercise-row:last-child {
    border-bottom: none; /* Remove border from last item */
}
.program-exercise-row span:last-child {
    text-align: right;
}
.workout-log-entry-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px; /* Exercise, Weight, Sets, Reps, Actions */
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.workout-log-entry-row input {
    font-size: 1em;
    padding: 0.5rem;
}
.workout-log-entry-row .actions-cell {
    text-align: right;
}
.workout-log-header-row, .workout-log-entry-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px; /* Exercise, Weight, Sets, Reps, Actions */
    gap: 0.75rem;
    align-items: center;
}
.workout-log-header-row {
    padding: 0 0.5rem 0.5rem 0.5rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: bold;
    color: var(--secondary-color);
    font-size: 0.9em;
}
.workout-log-header-row span:not(:first-child), .workout-log-entry-row .center-text {
    text-align: center;
}
.workout-log-entry-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.workout-log-entry-row input {
    font-size: 1em;
    padding: 0.5rem;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.workout-log-entry-row input[data-field="name"] {
    text-align: left;
}
.workout-log-entry-row .actions-cell {
    text-align: right;
}
#workout-exercise-search-results {
    position: absolute; /* This allows JS to position it freely */
}
/* The main container for a whole category (e.g., "Chest") */
.pr-category-group {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
body.theme-dark .pr-category-group {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* The category title (e.g., H2 for "Chest") */
.pr-category-group h2 {
    font-size: 1.8em;
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
/* The grid for exercise cards INSIDE a category group */
.pr-category-group .pr-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
/* The individual exercise PR card */
.pr-category-group .pr-layout .card {
    margin-bottom: 0;
    background-color: var(--background-color);
    transition: transform 0.2s ease-in-out;
}
.pr-category-group .pr-layout .card:hover {
    transform: translateY(-5px);
}
/* Styles for the content inside the PR card */
.pr-layout .card h4 {
    font-size: 1.5em;
    margin-bottom: 1.25rem;
    text-align: center;
}
.pr-card-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pr-metric {
    background-color: color-mix(in srgb, var(--background-color) 50%, var(--card-background) 50%);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.pr-metric-value {
    display: block;
    font-size: 1.8em;
    font-weight: bold;
}
.pr-metric-label {
    font-size: 0.8em;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pr-metric.metric-e1rm .pr-metric-value {
    color: var(--success-color);
}
body.theme-dark .pr-metric.metric-heavy-lift .pr-metric-value {
    color: var(--text-color-light);
}
body:not(.theme-dark) .pr-metric.metric-heavy-lift .pr-metric-value {
    color: var(--header-background);
}
/* --- NEW: COLORING FOR PR METRICS --- */
/* Color for the Estimated 1-Rep Max value (uses theme's success green) */
.pr-metric.metric-e1rm .pr-metric-value {
    color: var(--success-color);
}
/* For dark themes, make the "Heaviest Lift" value white */
body.theme-dark .pr-metric.metric-heavy-lift .pr-metric-value {
    color: var(--text-color-light); /* This is your theme's "white" */
}
/* For light/forest themes, use a dark color to ensure readability */
body:not(.theme-dark) .pr-metric.metric-heavy-lift .pr-metric-value {
    color: var(--header-background); /* This is a dark color from your themes */
}
/* --- REFINED "ADD EXERCISE" BUTTON STYLES (V2) --- */
/* This targets the container for the button and aligns it to the left */
#current-workout-section .add-exercise-row {
    padding: 1rem 0;
    text-align: left;
}
/* This uses a more specific selector (#current-workout-section) to guarantee the styles apply */
#current-workout-section .add-exercise-btn {
    /* --- Color and Shape --- */
    background-color: var(--success-color); /* Green background */
    color: var(--text-color-light);         /* White '+' sign */
    border: none;                           /* Remove all borders */
    border-radius: 50%;                     /* Make it a perfect circle */
    /* --- Sizing --- */
    width: 44px;                            /* A comfortable but compact size */
    height: 44px;
    padding: 0;                             /* Remove any default padding */
    /* --- The '+' Symbol --- */
    font-size: 2.2rem;                      /* A nice large plus sign */
    font-weight: 300;                       /* A thinner, more modern font weight */
    line-height: 44px;                      /* Vertically centers the '+' in the button */
    text-align: center;                     /* Horizontally centers the '+' */
    /* --- Interaction --- */
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
}
#current-workout-section .add-exercise-btn:hover {
    opacity: 1;
    transform: scale(1.05); /* A subtle "grow" effect on hover */
    border-style: none;     /* Ensure no border appears on hover */
}
/* --- NEW: Confirmation Modal Styles --- */
#confirmation-modal .modal-content {
    max-width: 450px;
    text-align: center;
}
#confirmation-modal h3 {
    margin-bottom: 1rem;
    font-size: 1.4em;
}
#confirmation-modal p {
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    font-size: 1.1em;
    line-height: 1.5;
}
/* This makes the confirm button red for delete actions */
#confirmation-confirm-btn[data-danger="true"] {
    background-color: var(--danger-color);
}
/* The main container for a single exercise and its sets */
.exercise-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
body.theme-dark .exercise-card {
    color: var(--text-color-light);
}
/* Header within the card holding the exercise name and action buttons */
.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem; /* <-- Reduced from 1rem */
}
.exercise-header h4 {
    margin: 0;
    font-size: 1.5em;
}
/* Container for the pencil/trash icons */
.exercise-header .actions {
    display: flex;
    gap: 0.5rem;
}
/* The list of all sets for an exercise */
.set-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* The new +/- stepper input component */
.stepper-input {
    display: flex;
    align-items: center;
}
.stepper-input input[type="number"] {
    text-align: center;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 0.75rem 0.25rem;
    font-size: 1.1em;
    /* Hide the default browser spinners */
    -moz-appearance: textfield;
}
.stepper-input input::-webkit-outer-spin-button,
.stepper-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stepper-btn {
    /* --- Sizing and Layout --- */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0; /* No padding */

    /* --- Visuals --- */
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    
    /* --- Icon Symbol Styling --- */
    font-size: 1.5rem; /* A good, large size for the symbol */
    font-weight: bold;
    line-height: 1; /* Reset line-height, let flexbox handle centering */

    /* --- Interaction --- */
    cursor: pointer;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.stepper-btn:hover {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
}
.stepper-btn.minus { 
    border-radius: 4px 0 0 4px;
    color: #f44336;
}
.stepper-btn.minus:hover {
    background-color: #ffebee;
    color: #d32f2f;
}

.stepper-btn.plus { 
    border-radius: 0 4px 4px 0; 
    color: #4CAF50;
}
.stepper-btn.plus:hover {
    background-color: #e8f5e9;
    color: #388E3C;
}
.add-drop-to-last-set-btn {
    background-color: var(--warning-color);
    color: var(--text-color-light);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: bold; /* Bold makes the ⤹ icon look better */
    line-height: 38px;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: all 0.2s;
}

.add-drop-to-last-set-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}

.add-set-btn {
    background-color: var(--success-color);
    color: var(--text-color-light);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 38px;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: all 0.2s;
}

.add-set-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}

.add-set-btn-container {
    padding-left: 1.5rem; /* Align with sets */
    margin-top: 1.5rem; /* Increased from 1rem to add more space */
    display: flex;
    gap: 0.75rem;
}

/* This styles the new button to be a blue circle */
.add-exercise-to-superset-btn {
    background-color: #007bff; /* Blue */
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: all 0.2s;
    /* These are for centering the icon inside */
    display: flex;
    justify-content: center;
    align-items: center;
}
.add-exercise-to-superset-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}
/* This styles the image icon inside the new button */
.add-exercise-to-superset-btn img {
    width: 38px;
    height: 38px;
}
/* The "Done" button for an entire exercise block */
.exercise-done-btn-container {
    text-align: right;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}
.superset-exercise-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Adds space between number, input, and button */
}
/* This tells the text input to take up all the available space */
.superset-exercise-header .exercise-name-input {
    flex-grow: 1;
}
/* This ensures the delete button doesn't shrink */
.superset-exercise-header .delete-sub-exercise-btn {
    flex-shrink: 0;
}
/* --- WORKOUT LOG V3 - INLINE REST TIMER --- */
/* Style for the new checkmark button */
.complete-set-btn:hover {
    color: var(--success-color);
}
/* The container for the new inline timer */
.rest-timer-inline {
    /* This makes the timer span all columns of the grid its in */
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color);
    padding: 0.75rem 1.25rem;
    margin-top: 0.75rem;
    border-radius: 6px;
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.rest-timer-inline-time {
    font-size: 1.5em;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    color: var(--primary-color);
}
.rest-timer-inline-actions .btn-secondary {
    padding: 0.4rem 0.8rem;
    font-size: 0.9em;
}
/* --- PERSONAL RECORDS V3 - CATEGORY BOX LAYOUT --- */
/* The main container for a whole category (e.g., "Push") */
.pr-category-group {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Slightly larger radius for the main container */
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
body.theme-dark .pr-category-group {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* The category title (e.g., H2 for "Push") */
.pr-category-group h2 {
    font-size: 1.8em;
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}
/* The grid for exercise cards within a category */
.pr-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Slightly wider cards */
    gap: 1.5rem;
}
/* Style for the individual exercise cards (e.g., "Bench Press") */
.pr-layout .card {
    margin-bottom: 0; /* Let the grid gap handle spacing */
    /* Make the card background contrast with the category group background */
    background-color: var(--background-color);
    transition: transform 0.2s ease-in-out;
}
.pr-layout .card:hover {
    transform: translateY(-5px);
}
/* These rules from before are still needed for the inside of the card */
.pr-layout .card h4 {
    font-size: 1.5em;
    margin-bottom: 1.25rem;
    text-align: center;
}
.pr-card-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pr-metric {
    /* Use a slightly different background for contrast */
    background-color: color-mix(in srgb, var(--background-color) 50%, var(--card-background) 50%);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
/* All the coloring and value/label styles remain the same */
#workout-selection-modal .modal-content {
    text-align: left;
}
#workout-selection-list {
    margin-top: 1.5rem;
    max-height: 40vh;
    overflow-y: auto;
}
.workout-selection-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.workout-selection-item:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color);
}
.workout-selection-item-info {
    font-weight: bold;
}
.workout-selection-item-info span {
    font-weight: normal;
    color: var(--secondary-color);
    font-size: 0.9em;
    margin-left: 0.5rem;
}
.calendar-day {
    /* We reset some flex properties to have more control */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Make children fill the width */
    justify-content: flex-start; /* Align everything to the top */
    position: relative;
    padding: 4px; /* Overall padding for the day cell */
    min-height: 90px;
}
.day-number {
    /* No longer absolute, just a simple element at the top */
    font-size: 0.9em;
    padding-left: 4px; /* Indent it slightly */
    height: 20px; /* Give it a fixed height */
}
/* Container for multiple bars - gap provides spacing now */
.calendar-bar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 3px; /* Space between bars */
    padding: 0;
    box-sizing: border-box;
    /* margin-top is no longer needed as the flexbox handles it */
}
/* Re-styled workout bar to show text again */
.calendar-workout-bar {
    width: 100%;
    border: none;
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 2px;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 0.2s;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-workout-bar:hover {
    filter: brightness(1.15);
}
/* Make sure the day number is on top of the bars */
.day-number {
    z-index: 2;
}
/* Your existing color classes for categories will still work */
.calendar-workout-bar.category-push { background-color: #d32f2f; }
.calendar-workout-bar.category-pull { background-color: #7b1fa2; }
.calendar-workout-bar.category-legs { background-color: #388e3c; }
.calendar-workout-bar.category-other { background-color: #f57c00; }
.calendar-workout-bar.category-upper-body { background-color: #17a2b8; }
.calendar-workout-bar.category-lower-body { background-color: #6f42c1; }
.calendar-workout-bar.category-full-body {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #adb5bd;
}
* 1. Global best practice: Makes layout math more intuitive.
* This tells the browser to include padding and border in the element's total width and height.
*/
html {
  box-sizing: border-box;
}
_,_ :before, *:after {
  box-sizing: inherit;
}
/*
* 2. The main fix for the food log: Allows the row of macro inputs to wrap.
* This prevents them from forcing the page to be wider than the screen.
*/
.log-inputs {
    flex-wrap: wrap;
}
/*
* 3. Safety net: Ensures that very long words (like a long food name)
* will break onto the next line instead of overflowing.
*/
.food-name, .exercise-header h4 {
    overflow-wrap: break-word;
    word-break: break-word; /* For better browser compatibility */
}
/* Style for the summarized set display */
.sets-summary-display {
    padding: 0.5rem 0 0.5rem 1.5rem;
    line-height: 1.7;
    font-size: 1.05em;
    color: inherit; /* This makes it inherit the new white color from .exercise-card */
}
#exercise-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
/*
* THIS IS THE MAIN FIX:
* We are overriding the old `.exercise-item` style.
* The card itself is a block, not a flex row.
*/
#exercise-list-container .exercise-item {
    display: block; /* Override old display:flex */
    margin-bottom: 0; /* Let the grid gap handle spacing */
}
/* Header for each card: Contains title and action buttons */
.exercise-display-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}
.exercise-display-header h4 {
    margin: 0;
    font-size: 1.3em;
    overflow-wrap: break-word; /* Safety for long names */
}
.exercise-display-header .actions {
    display: flex;
    flex-shrink: 0; /* Prevent buttons from wrapping */
    gap: 0.5rem;
    margin-left: 1rem;
}
/* Body of the card containing muscle info */
.exercise-display-body p {
    margin: 0 0 0.5rem 0;
    font-size: 0.95em;
}
.exercise-display-body strong {
    color: var(--secondary-color);
    display: inline-block;
    width: 100px;
}
.secondary-muscles {
    text-transform: capitalize;
}
/* --- STYLES FOR WEEKLY SUMMARY SECTION --- */
#weekly-summary-section h2 {
    font-size: 1.8em;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}
.weekly-nav-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.weekly-nav-header h3 {
    margin: 0;
}
.weekly-summary-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Adjusted ratio for better balance */
    gap: 1.5rem;
}
#set-volume-list {
    column-count: 3;
    column-gap: 2.5rem; /* Increased gap for better readability */
}
/* CORRECTED: This rule was incomplete */
.set-volume-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    break-inside: avoid; /* Prevents items from splitting across columns */
}
.set-volume-item .muscle-name {
    font-weight: bold;
    text-transform: capitalize;
}
.set-volume-item .set-count {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-color);
    margin-left: 1rem; /* Ensures space between name and count */
}
.set-volume-item .set-count small {
    font-size: 0.7em;
    color: var(--secondary-color);
}
/* --- STYLES FOR WEEKLY NUTRITION SUMMARY CARD --- */
#nutrition-summary-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.nutrition-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.1em;
}
.nutrition-summary-item span:first-child {
    color: var(--secondary-color);
    font-weight: bold;
}
.nutrition-summary-value {
    font-weight: bold;
    font-size: 1.3em;
}
.nutrition-summary-value.macro-red { color: var(--danger-color); }
.nutrition-summary-value.macro-green { color: var(--success-color); }
.nutrition-summary-value.macro-yellow { color: var(--warning-color); }
.nutrition-summary-value.macro-default { color: var(--text-color); }
/* --- RESPONSIVE STYLES FOR WEEKLY SUMMARY --- */
@media (max-width: 900px) {
    .weekly-summary-grid {
        grid-template-columns: 1fr;
    }
    #set-volume-list {
        column-count: 2;
    }
}
@media (max-width: 500px) {
    #set-volume-list {
        column-count: 1;
    }
}
/* --- Add this to your main CSS file --- */
/* --- Add this to your main CSS file --- */
/* 1. Main Action Buttons (Add Exercise / Add Superset)
------------------------------------------------------------- */
.add-exercise-row {
    display: flex;
    gap: 16px;
    justify-content: flex-start; /* Changed from 'center' to 'flex-start' */
    margin-top: 1.5rem;
    padding-bottom: 1rem;
}
.log-action-btn {
    /*
      --- DIMENSION & LAYOUT LOCK (THE "SLEDGEHAMMER") ---
      This redundantly and aggressively sets the size to prevent
      any browser calculation quirks based on the button's content.
    */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box !important; /* Force the box model */
    width: 48px;
    height: 48px;
    min-width: 48px;   /* Do not allow it to be smaller */
    min-height: 48px;
    max-width: 48px;   /* Do not allow it to be larger */
    max-height: 48px;
    /* --- Visuals & Interaction --- */
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    /* --- Font Styling Reset --- */
    font-weight: 300;
    line-height: 1; /* Let flexbox handle all alignment */
}
.log-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.log-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
/*
  --- INDIVIDUAL ICON & COLOR STYLING ---
  This part still balances the _visual appearance_ of the icon
  inside the now-identically-sized buttons.
*/
.add-exercise-btn {
    background-color: #28a745; /* Green */
}
/* This new rule styles the image inside to your specified size */
.add-exercise-btn img {
    width: 42px;
    height: 42px;
}
/* --- MODIFY THIS RULE --- */
.add-superset-btn {
    background-color: #007bff; /* Blue */
    /* The font-size property is no longer needed, so we remove it. */
}
/* --- ADD THIS NEW RULE --- */
.add-superset-btn img {
    width: 42px;        /* Controls the direct size of the image icon */
    height: 42px;
    border-radius: 50%; /* This makes the square JPEG appear circular */
    object-fit: cover;  /* Ensures the image fills the circle without being stretched */
}
/* 2. Superset & Set Row Layout
------------------------------------------------------------- */
.superset-card {
    border-left: 3px solid #007bff;
    padding-left: 1rem;
    background-color: rgba(0, 123, 255, 0.03);
}
.sub-exercise:not(:first-child) {
    border-top: 1px dashed #ccc;
    padding-top: 1rem;
    margin-top: 1rem;
}

.set-row-header-flex {
    display: grid;
    /* Columns: [Set #] [Weight]   [Reps]     [Actions] */
    grid-template-columns: 45px 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--secondary-color);
    text-transform: uppercase;
}

/* Center the "WEIGHT" and "REPS" headers */
.set-row-header-flex span:nth-child(2),
.set-row-header-flex span:nth-child(3) {
    text-align: center;
}

/* Align the "ACTIONS" header to the right */
.set-row-header-flex span:nth-child(4) {
    text-align: right;
    padding-right: 0.5rem;
}

/* The actual row for a set/drop-set */
.set-row {
    display: grid;
    /* Columns: [Set #] [Weight] [Reps] [Actions] */
    grid-template-columns: 45px 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 5px;
}

/* The group of action buttons (check, warmup, delete) */
.set-actions-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

/* This is the small placeholder for the delete button on non-last drops */
.delete-drop-placeholder {
    display: inline-block;
    width: 20px;
    height: 20px;
}
/* 4. Warm-up Toggle & Set Styling
------------------------------------------------------------- */
.set-number-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to the left */
    gap: 0.5rem;
    padding-left: 0.25rem;
}

/* 
  --- REDESIGNED, NON-OBTRUSIVE WARMUP TOGGLE ---
*/

/* This targets the container generated by createWarmupToggle() */
.warmup-toggle-container {
    display: flex;
    flex-direction: column; /* Stacks the label on top of the slider */
    align-items: center;
    gap: 2px; /* A small gap between label and slider */
}

/* This is the "W/u" label */
.warmup-label {
    display: block;
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--secondary-color);
    text-transform: uppercase;
}

/* This is the main body of the toggle switch, now ~30% smaller */
.warmup-toggle {
    position: relative;
    display: inline-block;
    width: 12px;   /* SHRUNK from 18px */
    height: 22px;  /* SHRUNK from 32px */
}

.warmup-toggle input { display: none; }

/* The track of the slider */
.warmup-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .2s;
    border-radius: 12px; /* Rounded based on the new width */
}

/* The little circle that moves, now smaller */
.warmup-slider:before {
    position: absolute;
    content: "";
    height: 8px; /* SHRUNK from 12px */
    width: 8px;  /* SHRUNK from 12px */
    left: 2px;   /* RE-CENTERED from 3px */
    bottom: 2px; /* RE-POSITIONED from 3px */
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

/* Styling for when the toggle is 'on' */
input:checked + .warmup-slider {
    background-color: var(--primary-color);
}

/* The distance the knob travels is now shorter */
input:checked + .warmup-slider:before {
    transform: translateY(-10px); /* REDUCED from -14px */
}
/* Styling for when the toggle is 'on' */
input:checked + .warmup-slider {
    background-color: var(--primary-color);
}

/* KEY CHANGE: Move the slider UP instead of right */
input:checked + .warmup-slider:before {
    transform: translateY(-14px); /* Moves the knob up by 14px */
}}.action-placeholder {
    display: inline-block;
    width: 40px;
    height: 40px;
}
/* Make the new drop set icon look consistent with the others */
.add-drop-to-set-btn {
    font-size: 1.5em; /* Make the return symbol larger */
    font-weight: bold;
    color: #ffc107; /* Keep the yellow color to signify drop set */
}
/* --- Style Update: Color-Coding Action Buttons --- */
/* 1. Stepper Buttons (+/-) for Reps and Weight */
/* Style the 'plus' button in green */
.stepper-btn.plus {
    color: #4CAF50; /* A pleasant, positive green */
    font-weight: bold;
}
.stepper-btn.plus:hover {
    background-color: #e8f5e9; /* Optional: light green background on hover */
    color: #388E3C; /* A slightly darker green for the hover effect */
}
/* Style the 'minus' button in red */
.stepper-btn.minus {
    color: #f44336; /* A clear, attention-grabbing red */
    font-weight: bold;
}
.stepper-btn.minus:hover {
    background-color: #ffebee; /* Optional: light red background on hover */
    color: #d32f2f; /* A slightly darker red for the hover effect */
}
/* 2. Set Action Buttons (Checkmark & Delete) */
/* Style the 'complete set' checkmark in green */
.icon-btn.complete-set-btn {
    color: #4CAF50; /* Using the same green for consistency */
}
.icon-btn.complete-set-btn:hover {
    color: #388E3C; /* Consistent hover effect */
}
/* Style the 'delete drop' X button in red */
.icon-btn.delete-drop {
    color: #f44336; /* Using the same red for consistency */
}
.icon-btn.delete-drop:hover {
    color: #d32f2f; /* Consistent hover effect */
}
/* Optional: Make the icons a little bigger and add a smooth transition */
.icon-btn, .stepper-btn {
    font-size: 1.1em; /* Adjust as needed */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: 50%; /* Makes the hover background circular */
    padding: 4px; /* Add some space for the circular background */
}
/* --- Style Update: Actions Group Layout --- */
/* This new container will group all our action icons together */
.set-actions-group {
    display: flex;
    flex: 1; /* Allow this group to take up available space */
    justify-content: flex-end; /* Push all content to the right */
    align-items: center;
    gap: 8px; /* Consistent spacing between all items in the group */
}
/* A placeholder to keep alignment consistent on multi-drop sets */
.action-placeholder {
    width: 24px; /* Adjust to match the width of your icon buttons */
    height: 24px;
}
.update-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 15px;
}
@media (max-width: 768px) {

    /* --- 1. Global Scaling & Layout Predictability --- */
    html {
        font-size: 11px;
        box-sizing: border-box; /* Makes width/height calculations include padding and border */
    }
    *, *:before, *:after {
        box-sizing: inherit; /* Apply the new box model to all elements */
    }

    main {
        padding: 0.5rem;
    }
    .card {
        padding: 1rem;
    }

    /* --- 2. Header & Navigation --- */
    header nav {
        gap: 0.25rem;
        justify-content: center;
    }
    #tab-nav .tab-button {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    /* --- 3. Major Layout Stacking --- */
    .workout-log-layout,
    .about-me-layout,
    .progress-charts-layout,
    .food-log-display-layout,
    .programs-layout,
    .weekly-summary-grid {
        grid-template-columns: 1fr;
    }
    #pr-container, .pr-layout {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    #set-volume-list {
        column-count: 1;
    }
    .totals-display {
        position: static;
        margin-top: 2rem;
    }

    /* --- 4. Form & Input Fixes --- */
    .form-row,
    .form-inline-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .form-inline-group .form-group {
        flex-basis: auto; /* Reset flex-basis for vertical stacking */
    }
    .form-row .form-group,
    .log-inputs .form-group,
    .form-inline-group .form-group {
        width: 100%;
        margin-bottom: 0;
    }
    .form-inline-group button,
    .form-actions {
        margin-top: 0.5rem;
    }

    /* --- 5. THE FOOD LOG OVERFLOW FIX --- */
    
    /* THIS IS THE KEY FIX: Allows the row of macro inputs to wrap onto a
       second line instead of overflowing the screen. */
    .log-inputs {
        flex-wrap: wrap;
        gap: 0.5rem; /* Use a slightly smaller gap when wrapped */
    }
    
    /* This forces long food names in the log to break onto a new line instead
       of pushing the calorie count off the screen. */
    .food-item-summary .food-name {
        overflow-wrap: break-word;
        word-break: break-word;
        /* Give the name a max width to ensure the calorie count is always visible */
        flex: 1 1 70%; 
    }

    /* Safety Net: As a last resort, prevent the entire tab from being scrollable. */
    #tab-food-log {
        overflow-x: hidden;
    }
    
    /* --- 6. Component-Specific Tweaks --- */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .modal-content {
        width: 95vw;
        padding: 1.5rem;
    }
    #workout-calendar-container,
    #food-calendar-container {
        padding: 0;
    }
    .workout-log-header-row, .workout-log-entry-row {
        grid-template-columns: 1fr auto auto auto 40px;
        gap: 0.5rem;
    }
    .chart-wrapper {
        height: 250px;
    }
    .chart-wrapper canvas {
        max-width: 100%;
    }
	.chart-container {
    max-width: 260px;
	}
	#calorie-goal-progress {
    font-size: 1.3rem;
	}

/* --- THE NEW SINGLE-LINE FIX --- */
/* Target the container for the macro list */
	#food-log-totals {
		font-size: 0.85rem; /* Shrink the font size of the entire line */
		line-height: 1.4;    /* Ensure it has some vertical space */
		overflow-wrap: normal; /* Override any global word-break rules for this line */
		word-break: normal;
	}

/* Target the individual macro spans to reduce their padding */
	#food-log-totals .macro-value {
		padding: 0 0.15em; /* Reduce the horizontal padding around each macro */
		display: inline-block; /* Keep it as an inline block */
	}
	#scan-barcode-btn,
	.scan-btn {
		top: 50%;
		transform: translateY(-50%);
		bottom: 2px; /* Unset the old positioning property */
	}
}
.more-options-menu {
    position: relative; /* This is the anchor for the dropdown */
    margin-left: auto;  /* This pushes the button to the far right */
}

/* Style the new "more options" button */
#food-log-more-options-btn {
    font-size: 1.5rem;
    padding: 0.5rem;
    border-radius: 50%;
}
#food-log-more-options-btn:hover {
    background-color: var(--background-color);
}

/* Position the dropdown menu ABOVE the button */
#food-log-more-options-dropdown {
    position: absolute;
    bottom: calc(100% + 5px); /* Position it 5px above the button */
    right: 0;
    top: auto; /* Override any existing 'top' styles */
    min-width: 200px;
}

/* Ensure buttons inside the dropdown take the full width */
#food-log-more-options-dropdown .dropdown-item {
    width: 100%;
}
#scanner-modal {
    z-index: 1001; /* Higher than the default .modal-overlay z-index of 1000 */
}
#save-to-my-foods-container {
    display: flex;
    flex-direction: column; /* Stack label and switch vertically */
    align-items: center;    /* Center them horizontally */
    gap: 4px;               /* Small gap between label and switch */
    margin-left: 1rem;      /* Remove 'auto' and add a fixed margin */
    padding: 0;             /* Remove old padding */
}

/* 2. Style the label above the switch */
#save-to-my-foods-container .toggle-switch-label {
    font-size: 0.7em;      /* Make the label text smaller */
    font-weight: normal;   /* Lighter font weight */
    color: var(--secondary-color);
    margin: 0;             /* Remove any default margin */
    line-height: 1;
}

/* 3. Shrink the toggle switch itself */
#save-to-my-foods-container .toggle-switch {
    width: 40px;   /* Shrunk from 50px */
    height: 22px;  /* Shrunk from 28px */
}

/* 4. Shrink the moving knob inside the switch */
#save-to-my-foods-container .slider:before {
    height: 16px;  /* Shrunk from 20px */
    width: 16px;   /* Shrunk from 20px */
    left: 3px;     /* Re-centered from 4px */
    bottom: 3px;   /* Re-centered from 4px */
}

/* 5. Adjust the travel distance of the knob */
#save-to-my-foods-container input:checked + .slider:before {
    transform: translateX(18px); /* Adjusted from 22px */
}
.log-table tr.superset-summary-row {
    background-color: color-mix(in srgb, var(--primary-color) 5%, var(--card-background));
}

/* Add a colored left border to the cells to visually link them */
.log-table tr.superset-summary-row td {
    border-left: 3px solid var(--primary-color);
}

/* Remove the top border for superset rows that follow another one to create a seamless block */
.log-table tr.superset-summary-row + tr.superset-summary-row {
    border-top: none;
}
.log-table tr.superset-summary-row + tr.superset-summary-row td {
    border-top: 1px solid var(--border-color); /* Use the cell border instead */
}

/* Make the exercise name bold in the summary */
.log-table tr.superset-summary-row td:first-child {
    font-weight: bold;
}

/* Style the link icon */
.superset-icon {
    display: inline-block;
    margin-right: 0.5rem;
    opacity: 0.6;
    transform: rotate(-45deg); /* Optional: Rotate the icon slightly */
}
/* The container for all exercises within a muscle group */
.pr-exercise-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The main card container (a div) */
.pr-exercise-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s;
}
.pr-exercise-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* The exercise name/title */
.pr-exercise-card .pr-exercise-name {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* The main stat display (Heaviest Lift) */
.pr-main-stat {
    text-align: center;
    background-color: var(--background-color);
    padding: 0.75rem;
    border-radius: 6px;
}
.pr-main-stat span {
    display: block;
    font-size: 0.8em;
    color: var(--secondary-color);
    text-transform: uppercase;
}
.pr-main-stat strong {
    display: block;
    font-size: 2.2em;
    font-weight: 700;
    color: var(--success-color); /* Always green */
}

/* The accordion container for detailed rep PRs */
.pr-details-accordion {
    margin-top: 0.5rem;
}
.pr-details-accordion summary {
    cursor: pointer;
    list-style: none;
    padding: 0.5rem;
    text-align: center;
    font-weight: bold;
    color: var(--secondary-color);
    background-color: var(--background-color);
    border-radius: 4px;
    transition: background-color 0.2s;
    outline: none;
}
.pr-details-accordion summary:hover {
    background-color: color-mix(in srgb, var(--secondary-color) 20%, transparent);
    color: var(--text-color);
}
.pr-details-accordion summary::-webkit-details-marker {
    display: none;
}

/* The content area that appears when the card is opened */
.pr-exercise-details {
    padding: 0.75rem 0 0 0;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

/* NEW: The secondary stat (E1RM) inside the details */
.pr-secondary-stat {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    margin-bottom: 1rem;
}
.pr-secondary-stat span {
    display: block;
    font-size: 0.8em;
    opacity: 0.8;
}
.pr-secondary-stat strong {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
}

/* An individual "X reps @ Y lbs" item */
.rep-pr-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    font-size: 1.1em;
}
.rep-pr-item:not(:last-child) {
    border-bottom: 1px dashed var(--border-color);
}
.rep-pr-item span {
    color: var(--secondary-color);
}