/* 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 --- */