body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #FFD700; /* Yellow background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Exo 2', sans-serif;
}

  .navbar-brand {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900; /* Extra bold */
    font-size: 1.5rem; /* Optional: Adjust size if needed */
  }

h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900; /* Extra bold */
    font-size: 2.5rem; /* Optional: Adjust size if needed */
  }
  /* Login Button - Dark Royal Blue */
.btn.btn-primary.btn-lg {
    background-color: #004282 !important;  /* Dark Royal Blue */
    border-color: #003366 !important;  /* Slightly darker blue */
    color: white !important;
}

.btn.btn-primary.btn-lg:hover {
    background-color: #0055A4 !important;  /* Lighter shade on hover */
    border-color: #004282 !important;
}

/* Register Button - Dark Orchid */
.btn.btn-success.btn-lg {
    background-color: #663399 !important;  /* Dark Purple */
    border-color: #50287D !important;
    color: white !important;
}

.btn.btn-success.btn-lg:hover {
    background-color: #7D4EB2 !important;  /* Slightly lighter purple */
    border-color: #663399 !important;
}

.exercise-icon {
    vertical-align: top;  /* Align the image to the top of the cell */
    width: 128px;          /* Set the width of the image */
    height: 128px;         /* Set the height of the image */
    margin-right: 5px;    /* Optional margin to the right of the image */
}

 /* Initially hide the exercise rows */
 .exercise-row {
    display: none;
}

/* Styling for the workout row to indicate it is clickable */
.workout-row {
    cursor: pointer;
    background-color: #f2f2f2;
}

.exercise-row {
    display: none;
}

.exercise-row.visible {
    display: table-row;
}

.flatpickr-calendar {
    z-index: 1050; /* Ensure it appears above other elements */
}

.input-group-text {
    background-color: #f8f9fa; /* Light gray background */
    border: 1px solid #ced4da; /* Match input border */
    cursor: pointer;
}

.input-group-text:hover {
    background-color: #e9ecef; /* Slightly darker on hover */
}

.exercise-tile {
    text-align: center; /* Center-align the content */
    border: none; /* Remove any border from the card */
    background-color: transparent; /* Ensure the card background is transparent */
    box-shadow: none; /* Remove any shadow from the card */
}

.exercise-tile img {
    cursor: pointer;
    max-width: 100%; /* Ensure the image fits within its container */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add transition for hover effect */
    border-radius: 8px; /* Apply rounded corners to all sides */
}

.exercise-tile img:hover {
    transform: scale(1.1); /* Slightly enlarge the image on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow effect on hover */
}

.exercise-tile .card-body {
    padding: 0.1rem; /* Adjust padding for the card body */
}

#profile-section pre {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    text-align: left; /* Ensure text is left-aligned */
}

.navbar-logo {
    height: 40px; /* Adjust the height as needed */
    filter: invert(0.85); /* Invert colors and adjust brightness */
    background-color: #212529; /* Set the background color to match the navbar */
    padding: 0px; /* Add padding to create a uniform look */
    border-radius: 5px; /* Optional: Add rounded corners for a smoother look */
}

.td-container {
    /* Vertical alignment for the cell itself */
    vertical-align: middle !important; 
    text-align: center;
}

.td-container .checkmark {
    /* Use flexbox to center the SVG inside the box */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Box dimensions and style */
    width: 36px;
    height: 28px;
    background-color: #cccccc;
    border-radius: 6px;
    
    /* Center the box itself within the TD */
    margin: 0 auto; 
    
    /* Remove absolute positioning to keep it in the row flow */
    position: relative; 
}

.td-container .checkmark svg {
    width: 20px;
    height: 20px;
    fill: #555555; /* #F9F3E3; */ /* warm off-white */
    display: block;
}

/* Toggleable state for checkmarks (unchecked -> done) */
.td-container .checkmark {
    cursor: pointer;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.td-container .checkmark:active {
    transform: scale(0.98);
}

.td-container .checkmark.done {
    background-color: #16A34A; /* green for done */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.td-container .checkmark.done svg {
    fill: #ffffff;
}

.td-container .checkmark:focus {
    outline: 2px solid rgba(0,123,255,0.18);
    outline-offset: 2px;
}

/* Per-set rest timer shown when a set is marked done */
.rest-timer {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1565c0; /* blue-ish */
}

.rest-timer.complete {
    color: #16A34A; /* green when finished */
}


.image-container {
    position: relative; /* Position container for absolute positioning of the checkmark */
    display: inline-block;
}

.image-container .checkmark {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: #16A34A; /* #28a745; Green color */
    border-radius: 50%; /* Make it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.image-container .checkmark svg {
    width: 24px;
    height: 24px;
    fill: #FFFFFF; /* #F9F3E3; */ /* warm off-white */
    display: block;
}


.calories-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background-color: #2563EB; /* #007bff;*/
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

@keyframes upgradeNudge {
    0%   { transform: translate(0, 0); }
    70%  { transform: translate(0, 0); }
    85%  { transform: translate(2px, -2px); }
    100% { transform: translate(0, 0); }
}

.image-container .upgrade-indicator {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 28px;
    height: 28px;

    background-color: #D97706; /*#048359; */ /* dark brown-gold */
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    animation: upgradeNudge 2.8s ease-in-out infinite;

    z-index: 10;
}

.image-container .upgrade-indicator svg {
    width: 16px;
    height: 16px;
    fill: #FFFFFF; /* warm off-white */
    display: block;
    transform: rotate(-45deg);
}

.image-container .working-to-upgrade-indicator {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 28px;
    height: 28px;

    background-color: #6B4E16; /* #6B4E16; */ /* dark brown-gold */
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);

    z-index: 10;
}

.image-container .working-to-upgrade-indicator svg {
    width: 16px;
    height: 16px;
    fill: #F9F3E3; /* warm off-white */
    display: block;
}

@media (max-width: 576px) {
        .image-container .checkmark {
        width: 22px;
        height: 22px;
        bottom: 6px;
        right: 6px;
    }

    .image-container .checkmark svg {
        width: 12px;
        height: 12px;
    }
    .image-container .upgrade-indicator {
        width: 22px;
        height: 22px;
        top: 6px;
        right: 6px;
    }

    .image-container .upgrade-indicator svg {
        width: 12px;
        height: 12px;
    }
    .image-container .working-to-upgrade-indicator {
        width: 22px;
        height: 22px;
        top: 6px;
        right: 6px;
    }

    .image-container .working-to-upgrade-indicator svg {
        width: 12px;
        height: 12px;
    }

    .calories-badge {
        padding: 2px 6px;
        bottom: 6px;
        left: 6px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .time-to-upgrade-indicator {
        animation: none;
    }
}

/* Hide chart x-axis labels on mobile devices for better readability */
@media (max-width: 768px) {
    .chartjs-hidden {
        display: none !important;
    }
}

/* Training plan tiles styling */
.training-plan-tile {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
}

.training-plan-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    border-color: #0d6efd;
}

.training-plan-tile .card-body {
    padding: 1.5rem 1rem;
}

.training-plan-tile .bi {
    font-size: 2rem;
}

@media (max-width: 576px) {
    .training-plan-tile {
        border-radius: 8px;
    }
    
    .training-plan-tile .card-body {
        padding: 1rem 0.75rem;
    }
    
    .training-plan-tile .bi {
        font-size: 1.5rem;
    }
    
    .training-plan-tile .card-title {
        font-size: 0.9rem;
    }
    
    .training-plan-tile .card-text {
        font-size: 0.75rem;
    }
}

/* Reduce vertical spacing for the workout save form table */
.save-workout-table, .save-workout-table th, .save-workout-table td {
    font-size: 0.95rem;
    padding: 0.35rem 0.5rem; /* reduced from bootstrap default */
    line-height: 1.05;
    vertical-align: middle;
    border-collapse: collapse;
}

.save-workout-table thead th {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-weight: 600;
}

.save-workout-table tbody tr {
    margin: 0;
}

.save-workout-table input.form-control {
    padding: 0.25rem 0.35rem;
    height: calc(1.5em + 0.3rem);
    font-size: 0.95rem;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .save-workout-table, .save-workout-table th, .save-workout-table td {
        font-size: 0.78rem;
        padding: 0.25rem 0.35rem;
    }

    .save-workout-table thead tr {
        font-size: 0.72rem;
    }

    .save-workout-table input.form-control {
        font-size: 0.78rem;
        padding: 0.25rem 0.35rem;
        height: calc(1.5em + 0.4rem);
    }

    /* Make the image header slightly smaller on very small screens */
    #saveWorkoutFormContainer .img-fluid {
        max-height: 220px;
    }
}