/* ============================================================================
   BIG SURF WORKOUT TRACKER - STYLES
   ============================================================================
   
   TABLE OF CONTENTS:
   1. CSS Variables & Reset ............... Theme colors, global resets
   2. Layout & Structure .................. Header, containers, sections
   3. Components .......................... Buttons, cards, badges, tabs
   4. Workout Features .................... Exercise cards, sets, timers
   5. History & Calendar .................. Workout history, calendar grid
   6. Modals & Overlays ................... Modal dialogs, popups
   7. Forms & Inputs ...................... Input fields, selects, forms
   8. Animations & Loading ................ Keyframes, skeletons, spinners
   9. Utilities ........................... Hidden, helpers, misc
   10. Media Queries ...................... Responsive breakpoints
   
   ============================================================================ */


/* ============================================================================
   1. CSS VARIABLES & RESET
   ============================================================================ */

:root {
    --primary: #40e0d0;
    --primary-hover: #36c7b8;
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --border: #30363d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --success: #238636;
    --warning: #d29922;
    --danger: #da3633;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1f2e 100%);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
}

/* ============================================================================
   2. LAYOUT & STRUCTURE
   ============================================================================ */

/* ==================== Sidebar Navigation ==================== */
.sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    transition: left 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.sidebar.open {
    left: 0;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.sidebar-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.sidebar-close:hover {
    color: var(--text-primary);
}

.sidebar-menu {
    list-style: none;
    padding: 1rem 0 5rem 0; /* Bottom padding for footer */
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.sidebar-menu li a:hover {
    background: var(--bg-tertiary);
    color: var(--primary);
}

.sidebar-menu li a i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 1.5rem;
}

.sidebar-section-title {
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 999;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Footer (User Profile) */
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(64, 224, 208, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.sidebar-user-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-sign-out-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.125rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

.sidebar-sign-out-btn:hover {
    color: var(--primary);
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    position: relative;
}

.menu-toggle {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.2rem;
}

.menu-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--primary);
}

.logo-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.logo-fallback {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    color: var(--bg-primary);
}

.app-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Auth Section */
.workout-controls {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

/* Today Header */
/* Enhanced Workout Type Header */
.workout-type-header {
    text-align: center;
    margin-bottom: 2rem;
}

.workout-type-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.workout-type-header p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1rem;
}

/* Workout Header */
.workout-header {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.workout-info h3 {
    margin: 0;
    font-size: 1.5rem;
}

.workout-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.workout-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Management Header */
.management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
}

.management-actions {
    display: flex;
    gap: 0.5rem;
}

/* Step 2 Header */
.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
}

.step-info {
    text-align: center;
    flex: 1;
}

.step-info h4 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.step-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Manual Exercise Container */
.manual-exercises-container {
    min-height: 300px;
}

/* Add Exercise Header Styling */
.add-exercise-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    text-align: center;
}

.add-exercise-header .btn {
    min-width: 150px;
    font-weight: 600;
    font-size: 1rem;
}

.add-exercise-footer {
    margin-top: 0.75rem;
    text-align: center;
}

.btn-add-exercise {
    width: 100%;
    max-width: 300px;
    font-weight: 600;
    font-size: 1rem;
}

/* Make sure the exercise header has proper spacing */
.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.exercise-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Sortable table header improvements */
.workout-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    position: relative;
}

.workout-table th.sortable:hover {
    background: var(--primary);
    color: var(--bg-primary);
}

.workout-table th.sortable i {
    margin-left: 0.5rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.workout-table th.sortable:hover i {
    opacity: 1;
}

/* Sort direction indicators */
.workout-table th.sortable.sort-asc i:before {
    content: "\f0de"; /* fa-sort-up */
    color: var(--primary);
}

.workout-table th.sortable.sort-desc i:before {
    content: "\f0dd"; /* fa-sort-down */
    color: var(--primary);
}

.workout-table th.sortable.sort-asc,
.workout-table th.sortable.sort-desc {
    background: rgba(64, 224, 208, 0.1);
    color: var(--primary);
}

/* Table container improvements */
.workout-table-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.workout-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
}

/* Date column styling */
.workout-date {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Duration column styling */
.workout-duration {
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* ============================================
   SIMPLIFIED WORKOUT HISTORY TABLE STYLES
   ============================================ */

/* Header */
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.history-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Simplified Search */
.simple-search {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.search-input {
    flex: 1;
    max-width: 300px;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

/* Simplified Table Container */
.simplified-table-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Simplified Table */
.simplified-workout-table {
    width: 100%;
    border-collapse: collapse;
}

.simplified-workout-table th {
    background: var(--bg-tertiary);
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.simplified-workout-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.simplified-workout-table tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
}

.simplified-workout-table tbody tr:hover {
    background: var(--bg-tertiary);
    transform: translateY(-1px);
}

.simplified-workout-table tbody tr:last-child td {
    border-bottom: none;
}

/* Calendar Header */
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .calendar-title {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .calendar-title h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }

        .month-navigation {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .nav-button {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: var(--bg-secondary);
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 1rem;
        }

        .nav-button:hover {
            background: var(--primary);
            color: var(--bg-primary);
            transform: scale(1.05);
        }

        .current-month {
            font-size: 1.1rem;
            font-weight: 600;
            min-width: 150px;
            text-align: center;
        }

        .header-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn {
            padding: 0.5rem 0.75rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), #20b2aa);
            color: var(--bg-primary);
            border: none;
        }

        /* Calendar Container */
        /* Calendar Header */
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .calendar-title {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .calendar-title h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }

        .month-navigation {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .nav-button {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: var(--bg-secondary);
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 1rem;
        }

        .nav-button:hover {
            background: var(--primary);
            color: var(--bg-primary);
            transform: scale(1.05);
        }

        .current-month {
            font-size: 1.1rem;
            font-weight: 600;
            min-width: 150px;
            text-align: center;
        }

        .header-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn {
            padding: 0.5rem 0.75rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), #20b2aa);
            color: var(--bg-primary);
            border: none;
        }

        /* Calendar Container */
        .calendar-container {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            border: 1px solid var(--border);
            overflow: hidden;
        }

        /* Weekdays Header */
        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.25rem;
            margin-bottom: 0.5rem;
        }

        .weekday {
            text-align: center;
            padding: 0.5rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 1px;
        }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/* Today Header Improvements */
.today-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
}

.today-header h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Workout Header Improvements */
.current-workout-header {
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.workout-info h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.workout-meta {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.workout-progress {
    margin-bottom: 0.5rem;
}

.workout-progress span {
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--primary);
}

.workout-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: nowrap;
}


/* ============================================================================
   3. COMPONENTS
   ============================================================================ */







.app-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

/* Template Selection */
.template-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    max-height: 60vh;
    overflow-y: auto;
}

.template-selection-actions {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Template Cards */
.template-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.template-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(64, 224, 208, 0.1);
}

.template-card.default {
    border-left: 4px solid var(--primary);
}

.template-card.default::before {
    content: 'DEFAULT';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--primary);
    color: var(--bg-primary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.template-card.custom {
    border-left: 4px solid var(--warning);
}

.template-card.custom::before {
    content: 'CUSTOM';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--warning);
    color: var(--bg-primary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.template-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    padding-right: 3rem; /* Space for badge */
}

.template-category {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.template-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.template-exercises-preview {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.template-exercises-list {
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.template-exercise-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    font-size: 0.875rem;
}

.template-exercise-item:hover {
    background: rgba(64, 224, 208, 0.05);
}

.template-exercise-item .exercise-number {
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 1.5rem;
}

.template-exercise-item .exercise-name {
    color: var(--text-primary);
    flex: 1;
    font-weight: 500;
}

.template-exercise-item .exercise-details {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.template-preview {
    margin: 1rem 0;
}

.template-preview .exercise-count {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.exercise-list-preview {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.exercise-list-preview li {
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.exercise-list-preview li:last-child {
    border-bottom: none;
}

.exercise-list-preview li:hover {
    background: rgba(64, 224, 208, 0.05);
}

.template-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Category Management */
.template-categories {
    margin-bottom: 2rem;
}

.category-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 2rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.category-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.category-tab.active {
    background: var(--primary);
    color: var(--bg-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.3);
}

.category-content {
    min-height: 400px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}



/* Exercise Cards */
.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Auto-collapse completed exercises to save space */
@media (max-width: 768px) {
    .exercise-list {
        gap: 0.5rem;
    }
}

.exercise-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.exercise-title-row {
    text-align: center;
    margin-bottom: 0.5rem;
}

.exercise-title-row .exercise-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.exercise-progress-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.exercise-actions-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.btn-text {
    background: rgba(80, 80, 80, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

.btn-text:hover, .btn-text:active {
    background: rgba(64, 224, 208, 0.15);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-text-danger:hover, .btn-text-danger:active {
    background: rgba(220, 53, 69, 0.15);
    border-color: var(--danger);
    color: var(--danger);
}

.exercise-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exercise-card.completed {
    border: 2px solid var(--success);
    background: rgba(35, 134, 54, 0.08);
    order: 999; /* Move completed to bottom */
}

.exercise-card.completed::before {
    opacity: 1;
}

.exercise-card.focused {
    border-color: var(--primary);
    box-shadow: 0 8px 25px rgba(64, 224, 208, 0.2);
    transform: scale(1.02);
}

.exercise-unit-toggle-mini {
    display: flex;
    gap: 2px;
    margin-top: 0.5rem;
}

.unit-btn-mini {
    padding: 2px 6px;
    font-size: 0.7rem;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.unit-btn-mini.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.unit-btn-mini:hover {
    background: var(--primary-hover);
    color: white;
}

.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.exercise-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.exercise-actions {
    display: flex;
    gap: 0.5rem;
}

.exercise-focus-btn {
    background: var(--primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.exercise-focus-btn:hover {
    transform: scale(1.1);
}

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    color: var(--bg-primary);
    border: none;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-success {
    background: var(--success);
    color: white;
    border: none;
}

.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
}

.btn-small {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Template Editor Section */
.template-editor-section {
    margin-bottom: 2rem;
}

.editor-header {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.editor-title-section h2 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.75rem;
}

.editor-title-section p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

.editor-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.template-editor-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Template Info Section */
.template-info-section {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.template-info-section h3 {
    margin: 0 0 1.5rem 0;
    color: var(--primary);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-info-section h3::before {
    content: '\f05a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Template Exercises Section */
.template-exercises-section {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.exercises-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.exercises-header h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exercises-header h3::before {
    content: '\f0cb';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.template-editor-exercises {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Template Editor Exercise Cards */
.template-editor-exercise-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.template-editor-exercise-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.1);
}

.exercise-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.exercise-info h4 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.exercise-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.exercise-progress-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.progress-bar-track {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    max-width: 200px;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #20b2aa);
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 2px;
}

.exercise-card.completed .progress-bar-fill {
    background: linear-gradient(90deg, var(--success), #32cd32);
}

.progress-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

.exercise-card.completed .progress-text {
    color: var(--success);
}

.exercise-actions {
    display: flex;
    gap: 0.5rem;
}

/* Enhanced Exercise Library Card for Templates */
.library-exercise-card {
    position: relative;
}

.library-exercise-card .library-exercise-actions {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.library-exercise-card:hover .library-exercise-actions {
    opacity: 1;
}

/* Mobile Responsiveness for Template Editor */


/* Animation for Template Editor */
.template-editor-section {
    animation: slideInFromRight 0.3s ease;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Focus states for better accessibility */
.template-editor-exercise-card:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

/* Enhanced button hover states in template editor */
.template-editor-section .btn:hover {
    transform: translateY(-1px);
}

.template-editor-section .btn-small:hover {
    transform: translateY(-1px) scale(1.05);
}

/* Workout History Cards */
.workout-history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.workout-history-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.workout-history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(64, 224, 208, 0.1);
    border-color: var(--primary);
}

.workout-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.workout-card-main h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.workout-card-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.workout-date {
    color: var(--text-secondary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workout-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workout-status.completed {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success);
    border: 1px solid var(--success);
}

.workout-status.cancelled {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.workout-status.discarded {
    background: rgba(128, 128, 128, 0.2);
    color: #808080;
    border: 1px solid #808080;
}

.workout-status.in-progress {
    background: rgba(210, 153, 34, 0.2);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.workout-card-actions {
    display: flex;
    gap: 0.5rem;
}

.workout-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.stat-item {
    text-align: center;
}

.stat-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.stat-value {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

/* Manual Exercise Cards */
.manual-exercise-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.manual-exercise-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.1);
}

.manual-exercise-card.completed {
    border-left: 4px solid var(--success);
    background: rgba(35, 134, 54, 0.05);
}

.manual-exercise-card.completed::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--success);
    font-size: 1.25rem;
}

.manual-exercise-card .exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.manual-exercise-card .exercise-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    flex: 1;
    padding-right: 1rem;
}

.manual-exercise-card .exercise-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Exercise Preview in Manual Cards */
.manual-exercise-card .exercise-preview {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.manual-exercise-card .no-sets {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px dashed var(--border);
}

/* Improved Button States */
.manual-exercise-card .btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.manual-exercise-card .exercise-actions .btn:hover {
    transform: translateY(-1px);
}

/* Animation for Manual Exercise Cards */
.manual-exercise-card {
    animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Focus States */
.manual-exercise-card:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

.step-header:focus-within {
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

/* Better Visual Hierarchy */
.manual-step h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.manual-step h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Success States */
.manual-exercise-card.completed .exercise-header h4 {
    color: var(--success);
}

/* Category Badge */
.workout-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary);
    color: var(--bg-primary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* Exercise card enhancements */
.exercise-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Enhanced exercise cards */
.exercise-actions .btn {
    margin-right: 0.25rem;
}

.exercise-actions .btn-success {
    background: var(--success);
    color: white;
    border: none;
}
/* =============================================================================
   ADD THESE CSS STYLES TO YOUR MAIN CSS FILE
   ============================================================================= */

/* Delete Button Styling */
.exercise-actions .btn-danger {
    background: var(--danger, #dc3545);
    color: white;
    border: none;
}

.exercise-actions .btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.exercise-actions .btn-danger:active {
    transform: translateY(0);
}

/* Improved exercise card layout */
.exercise-card {
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.exercise-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Button sizing consistency */
.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    min-width: auto;
}

/* Focus button styling */
.exercise-focus-btn {
    background: var(--primary, #007bff);
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exercise-focus-btn:hover {
    background: var(--primary-dark, #0056b3);
    transform: translateY(-1px);
}

/* Status badges in table */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.completed {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success);
    border: 1px solid rgba(35, 134, 54, 0.3);
}

.status-badge.incomplete {
    background: rgba(255, 193, 7, 0.2);
    color: #f39c12;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-badge.cancelled {
    background: rgba(220, 53, 69, 0.2);
    color: var(--danger);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Progress bar in table */
.progress-bar {
    width: 80px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-right: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.progress-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Action buttons in table */
.table-actions {
    display: flex;
    gap: 0.25rem;
}

.table-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Mobile responsive */

/* Table action buttons */
.table-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.table-actions .btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    min-width: auto;
}

.table-actions .btn i {
    font-size: 0.875rem;
}

/* Responsive table improvements */


/* Empty state styling */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--primary);
}

.empty-state h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* Status badge improvements */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-badge.completed {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
    border: 1px solid rgba(35, 134, 54, 0.3);
}

.status-badge.incomplete {
    background: rgba(255, 193, 7, 0.15);
    color: #f39c12;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-badge.cancelled {
    background: rgba(220, 53, 69, 0.15);
    color: var(--danger);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Search bar improvements */
.simple-search {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.simple-search .form-input {
    flex: 1;
    max-width: 400px;
}

#clear-search {
    white-space: nowrap;
}

/* Status Badge */
.simple-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: capitalize;
}

.simple-status.completed {
    background: rgba(40, 167, 69, 0.2);
    color: var(--success);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.simple-status.incomplete {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.simple-status.cancelled {
    background: rgba(220, 53, 69, 0.2);
    color: var(--danger);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Progress Indicator */
.simple-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progress-circle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) 0deg, var(--primary) calc(var(--progress) * 3.6deg), var(--bg-tertiary) calc(var(--progress) * 3.6deg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background: var(--bg-secondary);
    border-radius: 50%;
}

.progress-text {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-details {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Action Buttons */
.simple-action {
    text-align: center;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.action-btn {
    padding: 0.5rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.action-btn.action-view {
    background: var(--primary);
    color: var(--bg-primary);
    border-color: var(--primary);
}

.action-btn.action-view:hover {
    background: #20b2aa;
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.3);
}

.action-btn.action-resume {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.action-btn.action-resume:hover {
    background: #218838;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.action-btn.action-repeat,
.action-btn.action-retry {
    background: var(--warning);
    color: var(--bg-primary);
    border-color: var(--warning);
}

.action-btn.action-repeat:hover,
.action-btn.action-retry:hover {
    background: #e0a800;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.action-btn.action-delete {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.action-btn.action-delete:hover {
    background: #c82333;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Better action button layout on mobile */

/* ============================================
   MOBILE HISTORY FIXES
   ============================================ */

/* Hide mobile status bar by default, show only on mobile */
.mobile-status-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    margin-top: 0.75rem;
    border: 1px solid var(--border);
}

.mobile-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Enhanced mobile responsive styles */


/* Fix for duration display fallback */
.workout-duration-fallback {
    color: var(--text-secondary);
    font-style: italic;
}
.simple-status.unknown {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.simple-status.unknown i {
    color: var(--warning);
}

.today-subtitle {
    margin-bottom: 1.5rem; /* Add more space before buttons */
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.nav-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.workout-actions .btn {
    min-width: 160px; /* Match the width of the top buttons */
    padding: 0.75rem 1.5rem; /* Match the padding of nav buttons */
    flex: 0 0 auto; /* Don't grow or shrink, fixed size */
}

/* Also ensure the nav buttons have consistent styling */
.nav-buttons .btn {
    min-width: 160px;
    padding: 0.75rem 1.5rem;
}


/* ============================================================================
   Exercise Manager Styles
   ============================================================================ */

.search-filters {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.filter-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

.filter-row input,
.filter-row select {
    font-size: 0.9rem;
    padding: 0.5rem;
}

.exercise-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Collapsible Group Styles */
.exercise-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.exercise-group-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-primary);
}

.exercise-group-header:hover {
    background: rgba(64, 224, 208, 0.05);
}

.group-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.group-header-content h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.exercise-count {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.group-toggle-icon {
    color: var(--primary);
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.exercise-group-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.exercise-group-grid.collapsed {
    max-height: 0;
}

/* Compact Exercise Cards - REMOVED: Conflicted with three-row layout */
/* .exercise-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    transition: background 0.2s;
}

.exercise-card:hover {
    background: rgba(64, 224, 208, 0.05);
} */

.exercise-card.custom {
    border-left: 3px solid var(--success);
    padding-left: calc(1rem - 3px);
}

.exercise-card.override {
    border-left: 3px solid var(--primary);
    padding-left: calc(1rem - 3px);
}

.exercise-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.exercise-card-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exercise-type-badge {
    font-size: 0.6rem;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-custom {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success);
}

.badge-override {
    background: rgba(64, 224, 208, 0.2);
    color: var(--primary);
}

.exercise-card-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 1rem;
}

.exercise-card-stats span {
    white-space: nowrap;
}

.equipment-tag {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.exercise-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.btn-icon:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-icon-warning:hover {
    border-color: var(--warning);
    color: var(--warning);
}

.btn-icon-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}


/* ==================== PR Badge Animation ==================== */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.pr-badge {
    display: inline-block;
}

/* ==================== Location Selector ==================== */
.saved-locations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.location-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.location-option:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
}

.location-option.active {
    background: rgba(64, 224, 208, 0.1);
    border-color: var(--primary);
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.location-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.location-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.location-icon {
    font-size: 1.5rem;
    color: var(--primary);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .workout-actions .btn,
    .nav-buttons .btn {
        min-width: 140px; /* Slightly smaller on mobile if needed */
    }

/* ===================================================================
   RESUME WORKOUT CARD - Version 1 Style
   =================================================================== */

.resume-workout-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0 auto 2rem auto;
    max-width: 700px;
    animation: fadeInUp 0.4s ease-out;
}

.resume-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.resume-card-header i {
    font-size: 1.5rem;
    color: var(--primary);
}

.resume-card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.resume-card-info {
    margin-bottom: 1.25rem;
    padding-left: 2.25rem;
}

.resume-workout-name {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.resume-workout-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.resume-workout-meta i {
    margin-right: 0.25rem;
    opacity: 0.7;
}

.resume-card-actions {
    display: flex;
    gap: 0.75rem;
    padding-left: 2.25rem;
}

.resume-card-actions .btn {
    flex: 1;
    padding: 0.75rem 1rem;
    font-weight: 600;
    justify-content: center;
}

.resume-card-actions .btn i {
    margin-right: 0.5rem;
}

/* Mobile responsive */
}

/* ===================================================================
   LOADING SKELETONS & PERFORMANCE
   ================================================================ */

/* Skeleton workout card */
.skeleton-workout-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-text {
    height: 16px;
    width: 80%;
    margin-bottom: 0.5rem;
}

.skeleton-button {
    height: 40px;
    width: 120px;
    margin-top: 1rem;
}


/* ============================================================================
   4. WORKOUT FEATURES
   ============================================================================ */

/* Workout Selection */
.workout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.workout-option {
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.workout-option:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
    transform: translateY(-2px);
}

.workout-option.selected {
    border-color: var(--primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

.workout-option i {
    font-size: 2rem;
    color: var(--primary);
}

.workout-option span {
    font-weight: 600;
    color: var(--text-primary);
}

/* Global Settings */
.global-settings {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.unit-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
}

.unit-btn {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.unit-btn.active {
    background: var(--primary);
    color: var(--bg-primary);
}

/* Rest Timer Sticky - Ultra Compact */
.rest-timer-sticky {
    position: fixed;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    min-width: 100px;
}

.rest-timer-sticky:not(.active) {
    display: none !important;
}

.rest-timer-sticky.active {
    transform: translateX(0);
}

.rest-timer-content {
    text-align: center;
}

.rest-timer-exercise {
    display: none; /* Hide exercise name to save space */
}

.rest-timer-display {
    font-size: 1.25rem;
    font-weight: bold;
    color: #000000 !important;
    margin: 0;
    line-height: 1;
}

.rest-timer-controls {
    display: none; /* Hide controls to save space - just show timer */
}

/* Exercise Video Section */
.exercise-video-section {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.video-container {
    margin-bottom: 0.5rem;
}

.video-container iframe {
    border-radius: 8px;
    width: 100%;
    height: 315px;
}

/* Exercise Modal - Full Screen Native Feel */
.exercise-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 2000;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.exercise-modal.active {
    opacity: 1;
    visibility: visible;
}

.exercise-modal-content {
    background: var(--bg-primary);
    border-radius: 0;
    padding: 1rem;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    border: none;
    transform: none;
    transition: none;
    display: flex;
    flex-direction: column;
}

.exercise-modal.active .exercise-modal-content {
    transform: none;
}

.exercise-unit-toggle {
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Compact buttons in exercise modal */
.exercise-modal .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.exercise-modal h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* In-Modal Rest Timer - Ultra Compact */
.modal-rest-timer {
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #000000 !important;
}

.modal-rest-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.modal-rest-exercise {
    display: none; /* Hide exercise name to save space */
}

.modal-rest-display {
    font-size: 1.1rem;
    font-weight: bold;
    color: #000000 !important;
    margin: 0;
    line-height: 1;
}

.modal-rest-controls {
    display: flex;
    gap: 0.3rem;
}

.modal-rest-controls .btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    min-width: auto;
}

.modal-rest-controls .btn {
    background: rgba(255, 255, 255, 0.3);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.modal-rest-controls .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: none;
    box-shadow: none;
}

/* Exercise History Section */
.exercise-history-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

/* Exercise Table - Compact */
.exercise-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
}

.exercise-table th {
    background: var(--bg-tertiary);
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.exercise-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.exercise-table tr:hover {
    background: rgba(64, 224, 208, 0.05);
}

.set-input {
    width: 70px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px; /* Prevents zoom on iOS - MUST be 16px or larger */
    -webkit-appearance: none;
    appearance: none;
}

.set-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

.set-input.completed {
    background: rgba(35, 134, 54, 0.2);
    border-color: var(--success);
}

/* Notes */
.notes-area {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    margin-top: 1rem;
    font-size: 16px; /* Prevents zoom on iOS - MUST be 16px or larger */
    -webkit-appearance: none;
    appearance: none;
}

.notes-area:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

/* Exercise Library */
.exercise-library-content {
    max-width: 900px;
    max-height: 90vh;
}

.library-filters {
    margin-bottom: 1.5rem;
}

.filter-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.search-input {
    flex: 1;
    min-width: 200px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
}

.search-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

.exercise-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.library-exercise-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.library-exercise-card:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.library-exercise-card h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.library-exercise-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.library-exercise-stats {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Quick Add Section */
.quick-add-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.quick-add-section h4 {
    margin: 0 0 1rem 0;
    color: var(--primary);
}

.quick-add-form .form-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Empty Exercises State */
.empty-exercises-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 2px dashed var(--border);
}

.empty-exercises-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--border);
}

.empty-exercises-state h4 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-exercises-state p {
    margin: 0;
}

/* Exercise Details */
.exercise-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exercise-params {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.param {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
}

.param i {
    color: var(--primary);
    font-size: 1rem;
}

.param-input {
    width: 80px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    color: var(--text-primary);
    text-align: center;
    font-size: 0.875rem;
}

.param-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

.param label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exercise-video-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.exercise-video-link i {
    color: var(--primary);
}

.exercise-video-link a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.exercise-video-link a:hover {
    text-decoration: underline;
}

/* Library Exercise Actions */
.library-exercise-actions {
    margin-top: 1rem;
    text-align: center;
}

/* Enhanced Workout Actions Layout */
.workout-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.workout-actions > span {
    margin-right: 0.5rem;
}

/* Better Visual Hierarchy */
.progress-alert-body strong {
    color: var(--primary);
    font-size: 1.125rem;
}
/* Workout History Section */
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
}

.history-actions {
    display: flex;
    gap: 0.5rem;
}

/* Exercise Preview */
.exercise-preview {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.exercise-preview-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exercise-preview-item:last-child {
    border-bottom: none;
}

.exercise-name {
    color: var(--text-primary);
    font-weight: 500;
}

.exercise-best {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.exercise-more {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

/* Workout Detail Modal */
.workout-detail-modal .modal-content {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.workout-detail-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.workout-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
}

.detail-stat {
    text-align: center;
}

.detail-stat-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-stat-value {
    display: block;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: bold;
}

.workout-detail-exercises {
    margin: 2rem 0;
}

.detail-exercise {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.detail-exercise h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.detail-sets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.detail-set {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.detail-notes {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.workout-detail-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.no-exercise-data {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
}

/* Add Manual Workout Modal */
/* Redesigned Manual Workout Modal */
.manual-workout-modal {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Manual Workout Steps */
.manual-step {
    min-height: 400px;
}

.manual-step.hidden {
    display: none !important;
}

/* Step Actions */
.step-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* Exercise Management */
.manual-exercise-management {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
}

.exercise-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.exercise-management-header h4 {
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* No Exercises State */
.no-exercises-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: var(--bg-tertiary);
}

.no-exercises-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--border);
}

.no-exercises-state h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.no-exercises-state p {
    margin: 0 0 1.5rem 0;
}

/* Enhanced Exercise Table for Manual Entry */
.manual-exercise-entry-modal .exercise-table {
    margin-bottom: 1rem;
}

.manual-exercise-entry-modal .exercise-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.manual-exercise-entry-modal .exercise-table tr.completed-set {
    background: rgba(35, 134, 54, 0.1);
}

.manual-exercise-entry-modal .exercise-table tr.completed-set .set-input {
    border-color: var(--success);
    background: rgba(35, 134, 54, 0.1);
}

/* Enhanced Set Inputs */
.manual-exercise-entry-modal .set-input {
    min-width: 80px;
}

.manual-exercise-entry-modal .set-input:valid:not(:placeholder-shown) {
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(35, 134, 54, 0.2);
}

/* Manual Workout Progress Indicators */
.manual-workout-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.progress-item i {
    color: var(--primary);
}

.progress-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Empty Workout Message */
.empty-workout-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 8px;
    margin: 1rem 0;
}

.empty-workout-message i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-workout-message h3 {
    margin: 0.5rem 0;
    color: var(--text-primary);
}

.empty-workout-message p {
    margin: 0;
    font-size: 0.9rem;
}

/* Enhanced exercise actions spacing */
.exercise-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Ensure proper spacing in exercise list */
.exercise-list {
    padding: 1rem 0;
}

/* Responsive adjustments */

/* Workout Table */
.workout-table-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.workout-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
}

.workout-table th {
    background: var(--bg-tertiary);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border);
    position: relative;
}

.workout-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.workout-table th.sortable:hover {
    background: var(--primary);
    color: var(--bg-primary);
}

.workout-table th.sortable.sort-asc i:after {
    content: "\f0de"; /* fa-sort-up */
}

.workout-table th.sortable.sort-desc i:after {
    content: "\f0dd"; /* fa-sort-down */
}

.workout-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.workout-table tbody tr {
    transition: background-color 0.2s ease;
}

.workout-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Workout row improvements */
.workout-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.workout-row:hover {
    background: var(--bg-tertiary);
    transform: translateY(-1px);
}

/* Workout name cell styling */
.workout-name-main {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.manual-indicator {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.manual-indicator i {
    color: var(--warning);
}

/* Progress cell styling */
.progress-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #20b2aa);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Workout Info Cell */
.workout-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.workout-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.workout-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.meta-item i {
    width: 14px;
    text-align: center;
    opacity: 0.8;
}

.simple-status.unknown.has-progress {
    background: rgba(255, 193, 7, 0.3);
    border: 1px solid var(--warning);
}
/* Detailed Workout Modal Styles */
.detailed-workout-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.detailed-modal-content-wrapper {
    background: var(--bg-primary);
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border);
}

.detailed-workout-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    border-radius: 12px 12px 0 0;
}

.detailed-modal-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.detailed-modal-content {
    padding: 1.5rem;
}

/* Workout Overview Section */
.workout-overview {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.workout-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.workout-stat strong {
    color: var(--text-primary);
    min-width: 80px;
}

.status-completed {
    color: var(--success);
    font-weight: 600;
}

.status-incomplete {
    color: var(--warning);
    font-weight: 600;
}

.status-in-progress {
    color: var(--primary);
    font-weight: 600;
}

/* Exercises Section */
.exercises-detailed-list h3 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
}

.exercise-detail-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.exercise-detail-card h4 {
    margin: 0 0 1rem 0;
    color: var(--primary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exercise-detail-card h4::before {
    content: "🏋️";
    font-size: 1.2rem;
}

.exercise-template-info {
    background: var(--bg-tertiary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--primary);
}

/* Sets Table */
.sets-container {
    margin: 1rem 0;
}

.sets-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.sets-table th {
    background: var(--bg-tertiary);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.sets-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.sets-table tr:last-child td {
    border-bottom: none;
}

.completed-set {
    background: rgba(40, 167, 69, 0.1);
    color: var(--text-primary);
}

.completed-set td {
    border-color: rgba(40, 167, 69, 0.2);
}

.incomplete-set {
    background: rgba(108, 117, 125, 0.1);
    color: var(--text-secondary);
}

.incomplete-set td {
    border-color: rgba(108, 117, 125, 0.2);
}

.no-sets {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem !important;
}

/* Exercise Notes */
.exercise-notes {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    border-left: 3px solid var(--info);
}

.exercise-notes strong {
    color: var(--info);
    display: block;
    margin-bottom: 0.5rem;
}

/* No Exercises State */
.no-exercises {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.no-exercises p {
    margin: 0;
    font-size: 1.1rem;
}

        /* Workout Icons */
        .workout-icon {
            width: 20px;
            height: 20px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            margin-bottom: 0.15rem;
            background: var(--primary);
            color: var(--bg-primary);
        }

        /* Status-based icon colors */
        .workout-icon.status-completed {
            background: #30d158; /* Green for completed */
            color: white;
        }

        .workout-icon.status-incomplete {
            background: #ff9f0a; /* Orange/yellow for in-progress */
            color: white;
        }

        .workout-icon.status-partial {
            background: #ff9f0a; /* Orange for partial */
            color: white;
        }

        .workout-icon.status-cancelled {
            background: #ff453a; /* Red for cancelled */
            color: white;
        }

        .no-workout {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--danger);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.6rem;
            opacity: 0.4;
        }

        .workout-status {
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            padding: 0.1rem 0.25rem;
            border-radius: 6px;
            line-height: 1;
        }

        .status-completed {
            color: #30d158;
            background: rgba(48, 209, 88, 0.15);
            border: 1px solid rgba(48, 209, 88, 0.3);
        }

        .status-partial {
            color: #ff9f0a;
            background: rgba(255, 159, 10, 0.15);
            border: 1px solid rgba(255, 159, 10, 0.3);
        }

        .status-missed {
            color: #ff453a;
            background: rgba(255, 69, 58, 0.15);
            border: 1px solid rgba(255, 69, 58, 0.3);
        }

        .multiple-workouts {
            display: flex;
            flex-wrap: wrap;
            gap: 1px;
            justify-content: center;
            align-items: center;
        }

        .multiple-workouts .workout-icon {
            width: 14px;
            height: 14px;
            font-size: 0.6rem;
        }

        /* CRITICAL MOBILE FIXES */
        

        /* EXTRA SMALL SCREENS */
        

        /* Ensure no horizontal overflow */
        html, body {
            overflow-x: hidden;
            width: 100%;
        }

        .calendar-container {
            box-sizing: border-box;
        }

/* ============================================================================
   5. HISTORY & CALENDAR
   ============================================================================ */

/* History Stats */
.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.history-stat {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.history-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.1);
}

.history-stat .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.history-stat .stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* History Filters */
.history-filters {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.filter-section {
    margin-bottom: 1.5rem;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.search-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

/* History styles */
.workout-history-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.workout-history-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.status-completed { color: var(--success); }
.status-cancelled { color: var(--danger); }
.status-incomplete { color: var(--warning); }

/* Updated History Filters */
/* Simple Search */
.simple-search {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

        /* Calendar Grid */
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.25rem;
        }

        /* Calendar Days */
        .calendar-day {
            aspect-ratio: 1;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            background: var(--bg-tertiary);
            border: 1px solid transparent;
            min-height: 70px;
            padding: 0.25rem;
        }

        .calendar-day:hover {
            transform: scale(1.02);
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(64, 224, 208, 0.3);
        }

        .calendar-day.other-month {
            opacity: 0.3;
            cursor: default;
        }

        .calendar-day.other-month:hover {
            transform: none;
            border-color: transparent;
            box-shadow: none;
        }

        .calendar-day.today {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
            background: rgba(64, 224, 208, 0.05);
        }

        .calendar-day.today .day-number {
            color: var(--primary);
            font-weight: 700;
        }

        .day-number {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: var(--text-primary);
        }

        .calendar-day.other-month .day-number {
            color: var(--text-secondary);
        }


/* ============================================================================
   6. MODALS & OVERLAYS
   ============================================================================ */

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 1000;
    padding: 0;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: 0;
    padding: 1rem;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    border: none;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-large {
    max-width: none;
    max-height: none;
}

.modal-actions-top {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0;
}

/* Enhanced Modal Transitions */
.manual-exercise-entry-modal {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.manual-exercise-entry-modal.active .exercise-modal-content {
    animation: modalSlideIn 0.3s ease;
}

/* Modal Actions */
.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    border-radius: 0 0 12px 12px;
}

/* Responsive Design */


        /* Detail Modal - keeping your existing modal styles */
    .workout-detail-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
    }

    .modal-content {
        background: var(--bg-secondary);
        border-radius: var(--border-radius);
        max-width: 600px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        padding: 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .close-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .close-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .modal-body {
        padding: 1.5rem;
    }


/* ============================================================================
   7. FORMS & INPUTS
   ============================================================================ */

/* Form Elements */
.form-group {
    margin-bottom: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Day Selector */
.day-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.day-checkbox {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.day-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.day-checkbox span {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.day-checkbox:hover span {
    border-color: var(--primary);
    background: var(--bg-tertiary);
}

.day-checkbox input[type="checkbox"]:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-primary);
    font-weight: 600;
}

.form-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.form-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Form Validation States */
.manual-workout-basic-form .form-input:invalid {
    border-color: var(--danger);
}

.manual-workout-basic-form .form-input:valid {
    border-color: var(--success);
}

/* Enhanced Unit Toggle for Manual Entry */
.manual-exercise-entry-modal .exercise-unit-toggle {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

/* Performance hints for browser */
.exercise-card,
.workout-card,
.template-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

/* Reduce motion for accessibility */


/* ============================================================================
   8. ANIMATIONS & LOADING
   ============================================================================ */

/* Loading States */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--border);
}

.empty-state h3 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

/* Animations */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideDown {
    from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateX(-50%) translateY(0); opacity: 1; }
    to { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.timer-active {
    color: var(--warning);
    animation: pulse 1s infinite;
}

.timer-complete {
    color: var(--success);
}

/* Animation for Progress Alert Icon */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.05);
    }
}

/* Loading State for Progress Check */
.checking-progress {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.checking-progress .spinner {
    margin: 0 auto 1rem;
}

/* Loading States */
.manual-exercises-container.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.manual-exercises-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Responsive Design */


/* Animation */
.simplified-table-container {
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}





/* Animation */
.detailed-workout-modal[style*="flex"] {
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.detailed-modal-content-wrapper {
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

        /* Animation */
        .calendar-day {
            animation: fadeInUp 0.3s ease;
            animation-fill-mode: both;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

    /* Animation */
    .calendar-day {
        animation: fadeInUp 0.3s ease;
        animation-fill-mode: both;
    }

/* Skeleton loading animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 0px,
        rgba(255, 255, 255, 0.05) 40px,
        var(--bg-tertiary) 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: 8px;
}

/* Loading states */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 17, 23, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-overlay .loading-spinner {
    width: 60px;
    height: 60px;
    border-width: 6px;
    margin-bottom: 1rem;
}

.loading-text {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Image lazy loading */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Optimize logo rendering */
.logo-img {
    will-change: transform;
    content-visibility: auto;
}


/* ============================================================================
   9. UTILITIES
   ============================================================================ */

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1f2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.loading-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
}

.loading-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: block;
    box-shadow: 0 8px 32px rgba(64, 224, 208, 0.2);
}

.loading-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), #20b2aa);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin: 0 0 2rem 0;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-message {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 1rem 0;
    min-height: 1.5rem;
}

.loading-signin-prompt {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.loading-signin-prompt p {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

.loading-signin-prompt .btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.loading-screen.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

/* Hidden */
.hidden {
    display: none !important;
}

/* Location selector modal - higher z-index to appear above other modals */
#location-selector-modal {
    z-index: 2000 !important;
}

/* Mobile Responsiveness */


/* Mobile status bar (hidden on desktop) */
.mobile-status-bar {
    padding: 0.5rem 0.75rem; /* Less padding */
    border-radius: 10px; /* More rounded */
    margin-top: 0.75rem; /* Space from meta info */
}

.mobile-progress-circle {
    width: 20px; /* Smaller circle */
    height: 20px;
    font-size: 0.65rem; /* Smaller text */
}

.mobile-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mobile-progress-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) 0deg, var(--primary) calc(var(--progress) * 3.6deg), var(--border) calc(var(--progress) * 3.6deg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Mobile Responsive */



/* ============================================================================
   10. MEDIA QUERIES (RESPONSIVE)
   ============================================================================ */

@media (max-width: 768px) {
    .template-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .app-container {
        padding: 0.5rem;
    }

    .workout-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.75rem;
    }

    .template-selection-grid {
        grid-template-columns: 1fr;
    }

    .workout-header,
    .global-settings,
    .management-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .workout-actions,
    .management-actions {
        justify-content: center;
    }

    .rest-timer-sticky {
        right: 10px;
        top: 10px;
        min-width: 180px;
    }

    .exercise-modal-content {
        margin: 0.5rem;
        padding: 1.5rem;
    }

    .exercise-table {
        font-size: 0.875rem;
    }

    .set-input {
        width: 60px;
    }

    .form-actions {
        justify-content: center;
    }

    .quick-add-form .form-row {
        grid-template-columns: 1fr;
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input {
        min-width: auto;
    }

    .category-tabs {
        flex-direction: column;
        gap: 4px;
    }

    .today-header h2 {
        font-size: 1.25rem;
    }

    .workout-type-header h3 {
        font-size: 1.25rem;
    }

    .template-card h4 {
        padding-right: 2rem;
    }

    .video-container iframe {
        height: 200px;
    }

    .exercise-library-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .editor-header {
        flex-direction: column;
        text-align: center;
    }

    .editor-actions {
        width: 100%;
        justify-content: center;
    }

    .exercises-header {
        flex-direction: column;
        text-align: center;
    }

    .exercise-card-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .exercise-actions {
        justify-content: center;
    }

    .exercise-params {
        justify-content: center;
    }

    .param {
        min-width: 70px;
    }

    .param-input {
        width: 70px;
    }

    .template-editor-content {
        gap: 1rem;
    }

    .template-info-section,
    .template-exercises-section {
        padding: 1.5rem;
    }

    .empty-exercises-state {
        padding: 2rem 1rem;
    }

    .empty-exercises-state i {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .manual-workout-modal {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .step-header {
        flex-direction: column;
        text-align: center;
    }

    .step-actions {
        flex-direction: column;
    }

    .exercise-management-header {
        flex-direction: column;
        text-align: center;
    }

    .manual-exercise-card .exercise-header {
        flex-direction: column;
        gap: 1rem;
    }

    .manual-exercise-card .exercise-actions {
        justify-content: center;
    }

    .manual-exercise-entry-modal .exercise-modal-content {
        margin: 0.5rem;
        padding: 1rem;
    }

    .manual-exercise-entry-modal .exercise-table {
        font-size: 0.875rem;
    }

    .manual-exercise-entry-modal .set-input {
        min-width: 60px;
    }
}

@media (max-width: 768px) {
    .add-exercise-header {
        padding: 0.75rem;
    }
    
    .add-exercise-header .btn {
        min-width: 120px;
        font-size: 0.9rem;
    }
    
    .exercise-actions {
        gap: 0.3rem;
    }
    
    .btn-small {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .exercise-header {
        padding: 0.75rem;
    }
    
    .exercise-title {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .workout-table {
        font-size: 0.875rem;
    }
    
    .workout-table th,
    .workout-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .table-actions {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .simple-search {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .workout-table {
        font-size: 0.875rem;
    }
    
    .workout-table th,
    .workout-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .table-actions {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .table-actions .btn {
        padding: 0.25rem 0.375rem;
        font-size: 0.7rem;
    }
    
    .progress-cell {
        min-width: 80px;
    }
    
    .progress-text {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .history-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .simple-search {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input {
        max-width: none;
    }

    /* Mobile Table - Stack layout */
    .simplified-workout-table {
        display: block;
    }

    .simplified-workout-table thead {
        display: none; /* Hide headers on mobile */
    }

    .simplified-workout-table tbody {
        display: block;
    }

    .simplified-workout-table tbody tr {
        display: block;
        background: var(--bg-tertiary);
        margin-bottom: 1rem;
        border-radius: 12px;
        padding: 1rem;
        border: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .simplified-workout-table tbody tr:hover {
        transform: none; /* Disable hover transform on mobile */
    }

    .simplified-workout-table td {
        display: block;
        padding: 0;
        border: none;
        text-align: left;
    }

    /* Mobile workout card layout */
    .workout-info {
        margin-bottom: 1rem;
    }

    .workout-name {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .workout-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /* Mobile status and progress row */
    .simple-status,
    .simple-progress {
        display: none; /* Hide individual status and progress */
    }

    /* Show mobile status bar only on mobile */
    .mobile-status-bar {
        display: flex !important;
    }

    /* Mobile actions */
    .action-buttons {
        justify-content: center;
        gap: 1rem;
    }

    .action-btn {
        min-width: 44px; /* iOS minimum touch target */
        height: 44px;
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 8px;
    }
}

@media (max-width: 768px) {
    .workout-table thead {
        display: none; /* Hide headers since cards are self-explanatory */
    }
}

@media (max-width: 768px) {
    .workout-row {
        margin-bottom: 1.5rem; /* More space between cards */
        padding: 1.25rem; /* More internal padding */
    }
}

@media (max-width: 768px) {
    .workout-name {
        font-size: 1.2rem; /* Slightly larger on mobile */
    }
    
    .meta-item {
        font-size: 0.9rem; /* Easier to read */
    }
}

@media (max-width: 768px) {
    .action-buttons {
        gap: 0.75rem; /* More space between buttons */
        margin-top: 0.5rem; /* Some top margin */
    }
    
    .action-btn {
        min-width: 48px; /* Slightly larger touch targets */
        height: 48px;
        border-radius: 12px; /* More rounded corners */
    }
}

@media (max-width: 768px) {
    /* Better meta item spacing */
    .workout-meta {
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .meta-item {
        font-size: 0.85rem;
        color: #bbb;
    }

    /* Show mobile status bar */
    .mobile-status-bar {
        display: flex !important;
    }

    /* Better action button spacing */
    .action-buttons {
        gap: 0.75rem;
        margin-top: 0.5rem;
    }
    
    .action-btn {
        min-width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    /* Improved card spacing */
    .simplified-workout-table tbody tr {
        margin-bottom: 1.5rem;
        padding: 1.25rem;
    }

    .workout-name {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 768px) {
    .detailed-workout-modal {
        padding: 10px;
    }
    
    .detailed-modal-content-wrapper {
        max-height: 95vh;
    }
    
    .detailed-workout-modal .modal-header,
    .detailed-modal-content,
    .modal-actions {
        padding: 1rem;
    }
    
    .workout-overview {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .exercise-detail-card {
        padding: 1rem;
    }
    
    .sets-table {
        font-size: 0.8rem;
    }
    
    .sets-table th,
    .sets-table td {
        padding: 0.5rem 0.25rem;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
            #workout-history-section:not(.hidden) {
                padding: 0.25rem;
            }

            .calendar-header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
                margin-bottom: 1rem;
                padding-bottom: 0.75rem;
            }

            .calendar-title {
                order: 2;
            }

            .month-navigation {
                order: 1;
                gap: 1rem;
            }

            .header-actions {
                order: 3;
                width: 100%;
                justify-content: center;
            }

            .calendar-title h1 {
                font-size: 1.25rem;
            }

            .current-month {
                font-size: 1rem;
                min-width: 120px;
            }

            /* FIXED: Calendar container with proper mobile padding */
            #workout-history-section .calendar-container {
                padding: 0.5rem 0.25rem;
                margin: 0;
                width: 100%;
                max-width: 100%;
                overflow: visible;
                box-sizing: border-box;
            }

            /* FIXED: Grid with minimal gaps to maximize space */
            #workout-history-section .calendar-grid {
                gap: 1px;
                width: 100%;
                box-sizing: border-box;
            }

            /* FIXED: Weekdays grid with same minimal gap */
            #workout-history-section .calendar-weekdays {
                gap: 1px;
                margin-bottom: 0.25rem;
            }

            /* FIXED: Calendar days with forced aspect ratio removal for mobile */
            #workout-history-section .calendar-day {
                aspect-ratio: unset !important;
                min-height: 32px;
                max-height: 45px;
                height: auto;
                padding: 0.15rem;
                border-radius: 4px;
                font-size: 0.75rem;
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                overflow: hidden;
            }

            .day-number {
                font-size: 0.7rem;
                margin-bottom: 0.1rem;
                line-height: 1;
            }

            .workout-icon {
                width: 14px;
                height: 14px;
                font-size: 0.55rem;
                margin-bottom: 0.05rem;
                flex-shrink: 0;
            }

            .workout-status {
                font-size: 0.45rem;
                padding: 0.025rem 0.15rem;
                line-height: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }

            .weekday {
                padding: 0.25rem 0.1rem;
                font-size: 0.6rem;
                line-height: 1;
            }

            .multiple-workouts {
                gap: 0.5px;
            }

            .multiple-workouts .workout-icon {
                width: 10px;
                height: 10px;
                font-size: 0.45rem;
            }

            .no-workout {
                width: 12px;
                height: 12px;
                font-size: 0.5rem;
            }
        }

@media (max-width: 400px) {
            #workout-history-section .calendar-day {
                min-height: 40px;
                max-height: 70px;
            }

            #workout-history-section .day-number {
                font-size: 0.6rem;
            }

            #workout-history-section .workout-icon {
                width: 16px;
                height: 16px;
                font-size: 0.6rem;
            }

            #workout-history-section .workout-status {
                font-size: 0.45rem;
            }

            #workout-history-section .weekday {
                font-size: 0.6rem;
            }
        }

@media (max-width: 768px) {
    .resume-workout-card {
        margin: 0 1rem 1.5rem 1rem;
        padding: 1.25rem;
    }
    
    .resume-card-info {
        padding-left: 0;
        margin-top: 1rem;
    }
    
    .resume-workout-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .resume-card-actions {
        padding-left: 0;
        flex-direction: column;
    }
    
    .resume-card-actions .btn {
        width: 100%;
    }
}

/* ================================================================== */
/* DASHBOARD STYLES                                                    */
/* ================================================================== */

.dashboard-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-text {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    transition: opacity 0.2s;
}

.btn-text:hover {
    opacity: 0.7;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stat-card-highlight {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(64, 224, 208, 0.05), rgba(64, 224, 208, 0.1));
}

.stat-icon {
    font-size: 2rem;
    color: var(--primary);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 12px;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Quick Actions */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.quick-action-btn {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.quick-action-btn:hover:not(.disabled) {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.quick-action-btn i {
    font-size: 1.5rem;
    color: var(--primary);
}

.quick-action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Suggested Workouts */
.suggested-section {
    margin: 1.5rem 0;
}

.suggested-workouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.suggested-workout-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.suggested-workout-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.suggested-workout-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(64, 224, 208, 0.2);
    border-color: var(--secondary);
}

.suggested-workout-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.suggested-workout-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.suggested-workout-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suggested-workout-meta i {
    color: var(--primary);
    font-size: 0.875rem;
}

.workout-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    text-transform: capitalize;
    color: var(--primary);
}

/* PR List */
.pr-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pr-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: background 0.2s;
}

.pr-item:hover {
    background: var(--bg-tertiary);
}

.pr-icon {
    font-size: 1.5rem;
    color: #ffd700;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.pr-content {
    flex: 1;
    min-width: 0;
}

.pr-exercise {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.pr-details {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.pr-badge {
    background: rgba(64, 224, 208, 0.1);
    color: var(--primary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pr-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
}

.pr-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Workout List */
.workout-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.workout-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.workout-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateX(4px);
}

.workout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.workout-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.workout-date {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.workout-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.workout-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.workout-stats i {
    color: var(--primary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.empty-state i {
    display: block;
}

.empty-state p:first-of-type {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workout-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ================================================================== */
/* STATS & RECORDS VIEW                                               */
/* ================================================================== */

.stats-header {
    margin-bottom: 2rem;
}

.stats-header h2 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.stats-count {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Filters */
.stats-filters {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.filter-select:hover {
    border-color: var(--primary);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.1);
}

/* PR Leaderboard */
.pr-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.exercise-pr-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.exercise-pr-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.exercise-pr-title i {
    color: var(--primary);
}

.pr-records-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* PR Record Cards */
.pr-record-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s;
}

.pr-record-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.pr-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pr-type-badge.maxWeight {
    background: rgba(255, 99, 71, 0.1);
    color: #ff6347;
}

.pr-type-badge.maxReps {
    background: rgba(64, 224, 208, 0.1);
    color: var(--primary);
}

.pr-type-badge.maxVolume {
    background: rgba(138, 43, 226, 0.1);
    color: #ba55d3;
}

.pr-equipment-badge {
    padding: 0.25rem 0.625rem;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.pr-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.pr-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.pr-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pr-card-meta i {
    color: var(--primary);
    width: 14px;
}

/* Stats Overview (Streaks & Frequency) */
.stats-overview {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Frequency Bars */
.frequency-bars {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.frequency-bar-item {
    display: grid;
    grid-template-columns: 60px 1fr 50px;
    align-items: center;
    gap: 1rem;
}

.frequency-day {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
}

.frequency-bar-track {
    height: 28px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.frequency-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, #36c7b8 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.frequency-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .stats-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        min-width: 100%;
    }

    .pr-records-grid {
        grid-template-columns: 1fr;
    }

    .stats-header h2 {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}