/**
 * Ghost Gym - Component Styles Master File
 * Imports all component CSS modules
 * @version 1.4.0
 * @date 2026-01-20
 *
 * Usage: Include this single file in your HTML to get all component styles
 * <link rel="stylesheet" href="/static/assets/css/components.css" />
 *
 * CONSOLIDATION UPDATE (v1.1.0):
 * Added shared button, form, and dark-mode styles to reduce duplication
 * across ghost-gym-custom.css, workout-mode.css, workout-builder.css, etc.
 *
 * UPDATE (v1.2.0):
 * Added bonus-exercise-offcanvas.css for enhanced add exercise modal
 *
 * UPDATE (v1.3.0):
 * Added design-system.css as the first import for unified design tokens
 *
 * UPDATE (v1.4.0) - Phase 2 CSS Refactor:
 * Split ghost-gym-custom.css into focused modules:
 * - layout.css: Container and grid layouts
 * - menu-sidebar.css: Sidebar and mobile menu styles
 * - utilities.css: Animations, scrollbar, loading states
 */

/* ============================================
   CORE DESIGN SYSTEM (MUST be imported first)
   ============================================ */
@import url('design-system.css');

/* ============================================
   LAYOUT & STRUCTURE (Phase 2)
   ============================================ */
@import url('layout.css');
@import url('menu-sidebar.css');
@import url('utilities.css');

/* ============================================
   COMPONENT MODULES
   ============================================ */
@import url('components/data-table.css');
@import url('components/filter-bar.css');
@import url('components/badges.css');
@import url('components/sticky-footer.css');
@import url('components/feedback-button.css');
@import url('components/bonus-exercise-offcanvas.css');

/* ============================================
   SHARED CONSOLIDATED STYLES (Phase 1)
   ============================================ */
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/dark-mode.css');

/* ============================================
   WORKOUT BUILDER COMPONENTS (Phase 2)
   ============================================ */
@import url('components/exercise-group-card.css');
@import url('components/compact-card-layout.css');
@import url('components/card-actions.css');
@import url('components/builder-card-menu.css');
@import url('components/offcanvas-editor.css');
@import url('components/alternate-exercise-field.css');
@import url('components/template-note-card.css');
@import url('components/edit-mode.css');

/* ============================================================================
   COMPONENT UTILITIES
   ============================================================================ */

/* Smooth transitions for all components */
.component-transition {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Component spacing */
.component-spacing {
    margin-bottom: 1.5rem;
}

/* Component card wrapper */
.component-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 1.5rem;
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.component-loading {
    position: relative;
    min-height: 200px;
}

.component-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bs-body-bg-rgb), 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* ============================================================================
   COMPONENT ANIMATIONS
   ============================================================================ */

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

.component-fade-in {
    animation: componentFadeIn 0.4s ease;
}

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

@media (max-width: 767.98px) {
    .component-card {
        padding: 1rem;
    }
    
    .component-spacing {
        margin-bottom: 1rem;
    }
}

/* ============================================================================
   PRINT UTILITIES
   ============================================================================ */

@media print {
    .component-card {
        border: none;
        box-shadow: none;
    }
}

/* ============================================================================
   SEARCH INPUT NORMALIZATION
   Hide browser's native search clear button to avoid conflicts with custom clear buttons
   ============================================================================ */

/* Hide native clear button in WebKit browsers (Chrome, Safari, Edge) */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Hide native clear button in Firefox */
input[type="search"]::-moz-search-cancel-button {
    -moz-appearance: none;
    appearance: none;
}

/* Hide native clear button in IE/Edge legacy */
input[type="search"]::-ms-clear {
    display: none;
}

/* Also apply to text inputs that might be styled as search */
input.search-input::-webkit-search-cancel-button,
input.search-input::-webkit-search-decoration,
input.navbar-search-input::-webkit-search-cancel-button,
input.navbar-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================================
   SEARCH CARD STYLING (SHARED)
   Card-style search boxes with centered layout
   ============================================================================ */

/* Container for search cards - centers content with max-width */
.search-card-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Search card styling - applies to all search boxes */
.search-card-container .card {
    width: 100%;
    max-width: 600px;
    border-radius: var(--bs-border-radius-lg);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .search-card-container .card {
        max-width: 100%;
    }
}

/* ============================================================================
   EXERCISE INPUT GROUP STYLING
   Remove highlight/focus colors and ensure all corners are rounded
   ============================================================================ */

/* Exercise slot input groups with spacing */
.exercise-slot .input-group {
    gap: 0.375rem;
}

/* Remove focus highlight from exercise slot inputs
   Using .exercise-slot prefix for specificity over Bootstrap */
.exercise-slot .exercise-slot-input:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

/* Ensure all corners are rounded on exercise slot inputs in input-groups
   Using double-class selector for specificity */
.exercise-slot .input-group .exercise-slot-input.form-control {
    border-radius: var(--bs-border-radius);
}

/* Ensure buttons in exercise input groups have rounded corners */
.exercise-slot .input-group .btn.btn {
    border-radius: var(--bs-border-radius);
}

/* Remove highlight from exercise search input in search offcanvas
   ID selector provides sufficient specificity (100) */
#exerciseSearchInput:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

/* Ensure rounded corners on search input - ID provides specificity */
#exerciseSearchInput {
    border-radius: var(--bs-border-radius);
}