/* global.css */

/* --- Global Styles --- */
body { 
    font-family: 'Inter', sans-serif; 
}

/* --- Loader Styles --- */
/* Base loader definition */
.loader { 
    border: 4px solid #f3f3f3; 
    border-radius: 50%; 
    /* Default color (indigo, used on Dashboard) */
    border-top: 4px solid #4f46e5; 
    width: 40px; 
    height: 40px; 
    animation: spin 2s linear infinite; 
}

/* Modifier for the blue color used on most other pages */
.loader-blue {
    border-top-color: #3498db;
}

.loader-sm { 
    border: 2px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 2px solid #4f46e5; 
    width: 16px; 
    height: 16px; 
    animation: spin 1s linear infinite; 
}

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

/* --- Mobile Responsive Navigation Styles --- */

/* --- Mobile First (Default) --- */
/* 1. Hide the desktop sidebar by default */
#sidebar {
    display: none;
}

/* 2. Hide the mobile hamburger button (replaced by the bottom bar) */
#menu-button {
    display: none !important;
}

/* 3. Style the new bottom nav (visible by default) */
#mobile-bottom-nav {
    display: flex;
}

/* 4. Add padding to the bottom of the main content to prevent overlap */
.main-content {
    padding-bottom: 4rem; /* 64px, which is h-16 */
}

/* 5. Style for the active icon on the bottom bar */
#mobile-bottom-nav a.active {
    color: #4f46e5; /* indigo-600 */
}

/* 6. Adjust AI Toast position on mobile (if it exists) */
#ai-toast {
    bottom: 5rem; /* 1rem above the 4rem nav bar */
}


/* --- Desktop Styles (min-width: 768px) --- */
@media (min-width: 768px) {
    /* 1. Show the desktop sidebar */
    #sidebar {
        display: flex;
    }

    /* 2. Hide the mobile bottom bar */
    #mobile-bottom-nav {
        display: none;
    }

    /* 3. Remove the bottom padding from the main content */
    .main-content {
        padding-bottom: 0;
    }

    /* 4. Reset AI Toast position on desktop */
    #ai-toast {
        bottom: 1.25rem; /* 20px (bottom-5) */
    }
}

/* --- Global Utility/Component Styles --- */

/* Star Rating (used in equipment.html, gyms.html, exercises.html) */
.star-rating svg { cursor: pointer; }
.star-rating svg.filled { color: #f59e0b; } /* Amber-500 color */
.star-rating.danger svg.filled { color: #ef4444; } /* Red-500 */

/* Tabs (used in grip-types.html, mesocycles.html) */
.tab-btn.active {
    border-color: #4f46e5;
    color: #4f46e5;
}

/* Toggle Switch (used in exercises.html) */
.toggle-checkbox:checked {
    right: 0;
    border-color: #34D399;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #34D399;
}

/* --- START: 2025 Style Icon Cards --- */
.icon-card-2025 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem; /* p-6 */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    aspect-ratio: 1 / 1;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Base "glass" effect, will be overridden by bg-gradient from Tailwind */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.icon-card-2025:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* shadow-xl */
    transform: translateY(-6px); /* -translate-y-1.5 */
}

.icon-card-2025 svg {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    margin-bottom: 0.75rem; /* mb-3 */
    stroke-width: 1.5;
}

.icon-card-2025 span {
    font-weight: 600; /* font-semibold */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    text-align: center;
}

/* Responsive sizes */
@media (min-width: 640px) {
    .icon-card-2025 svg {
        width: 3rem; /* sm:w-12 */
        height: 3rem; /* sm:h-12 */
    }
    .icon-card-2025 span {
        font-size: 1rem; /* sm:text-base */
        line-height: 1.5rem;
    }
}
/* --- END: 2025 Style Icon Cards --- */


/* --- WORKOUT SESSION COMPONENTS --- */
/* These are moved here so they are available to the dynamic JS renderers */

/* Exercise List Items */
.exercise-list-item.active { 
    background-color: #EBF8FF; 
    border-left: 4px solid #4299E1; 
}
.exercise-list-item.completed { 
    background-color: #f0fdf4; 
    border-left: 4px solid #22c55e; 
    opacity: 0.7; 
}

/* Specific Exercise Highlight */
.specific-exercise-highlight {
    border-left-color: #d97706 !important; /* Amber-600 */
    background-color: #fffbeb !important; /* Amber-50 */
}
.specific-exercise-highlight .exercise-name {
    color: #d97706 !important;
}

/* Supersets & Combos */
.superset-container {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}
.superset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
}
.superset-item {
    padding-left: 1rem;
    border-left: 3px solid #cbd5e0;
    background-color: #fff;
    margin-left: 0.5rem;
}
.complex-superset-container {
    /* Additional styles for complex supersets if needed */
}
.combo-container {
    background-color: white;
    border: 1px dashed #9ca3af;
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
}

/* Selection State */
.selecting-superset {
    outline: 2px dashed #4f46e5;
    background-color: #e0e7ff !important;
}

/* Action Buttons */
.action-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    transition: opacity 0.2s;
}
.action-buttons button:hover {
    opacity: 0.8;
}

/* Timer Visuals */
.timer-circle { width: 200px; height: 200px; }
.timer-circle svg { transform: rotate(-90deg); }
.timer-circle circle { transition: stroke-dashoffset 0.5s linear; }

/* Video Embeds */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    background-color: #000;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Builder Tiles */
.exercise-tile {
    padding: 0.75rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.exercise-tile:active { transform: scale(0.95); }

/* Exercise Type Colors */
.type-strength { background-color: #bfdbfe; color: #1e40af; }
.type-climbing-specific { background-color: #fef3c7; color: #92400e; }
.type-conditioning { background-color: #d1fae5; color: #065f46; }
.type-mobility { background-color: #e9d5ff; color: #6b21a8; }
.type-antagonist { background-color: #fecaca; color: #991b1b; }
.type-other { background-color: #f3f4f6; color: #374151; }