/**
 * Ghost Gym - Workout Builder Styles (REFACTORED)
 * Page-specific styles for the workout builder
 *
 * REFACTORING NOTES (v3.0.0 - 2026-01-18):
 * - Major split: Extracted 8 component files to components/
 * - This file now contains ONLY page-specific styles (~400 lines)
 * - Component styles are now imported via components.css:
 *   - exercise-group-card.css - Base card styles
 *   - compact-card-layout.css - Compact card variant
 *   - card-actions.css - Edit/menu button container
 *   - builder-card-menu.css - Dropdown menu system
 *   - offcanvas-editor.css - Exercise edit modal
 *   - alternate-exercise-field.css - Dynamic alternate inputs
 *   - template-note-card.css - Note card styling
 *   - edit-mode.css - Edit mode toggle/states
 *
 * PREVIOUS REFACTORING (v2.2.0):
 * - Removed 200+ lines of dead accordion-based layout code
 * - Removed legacy .exercise-group.card styles
 * - Removed duplicate form styles (now in components/forms.css)
 *
 * @version 3.0.0
 * @date 2026-01-18
 */

/* ============================================
   SHARED UTILITY CLASSES
   Note: Common utilities moved to components/buttons.css and components/forms.css
   See components.css for imports
   ============================================ */

/* ============================================
   WORKOUT EDITOR SECTION (Bottom)
   ============================================ */

.workout-editor-section {
    background: var(--bs-card-bg);
    border-radius: var(--bs-border-radius);
    padding: 2rem;
    min-height: 500px;
}

.workout-editor-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--bs-secondary);
}

.workout-editor-empty-state i {
    opacity: 0.5;
}

.workout-editor-form {
    animation: fadeIn 0.3s ease;
}

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

/* ============================================
   BONUS EXERCISES
   ============================================ */

.bonus-exercise {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
    transition: box-shadow 0.2s;
}

.bonus-exercise:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bonus-exercise .card-header {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
}

/* ============================================
   EDITOR ACTIONS - USES SHARED STICKY FOOTER
   ============================================ */

/* Note: .editor-actions now uses .sticky-footer-base from components/sticky-footer.css */
/* No custom CSS needed - all styling comes from the shared component */

/* Add padding to workout editor to prevent content from being hidden behind sticky footer */
#workoutEditorForm {
    padding-bottom: 200px;
}

/* Save status styling */
.editor-actions #saveStatus {
    display: block;
    text-align: center;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

/* Workout Selection Prompt */
#workoutSelectionOffcanvas .btn-lg {
    text-align: left;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#workoutSelectionOffcanvas .btn-lg i {
    font-size: 1.5rem;
    vertical-align: middle;
}

#workoutSelectionOffcanvas .btn-lg:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

#workoutSelectionOffcanvas .btn-lg small {
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--bs-secondary);
}

/* Button styling - Override to make buttons more compact */
.editor-actions .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.editor-actions .btn i {
    font-size: 1rem;
}

.save-status {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.save-status.dirty::before {
    content: "●";
    color: var(--bs-warning);
    font-size: 1.2rem;
    animation: pulse 2s infinite;
}

.save-status.saved::before {
    content: "✓";
    color: var(--bs-success);
    font-size: 1.2rem;
}

.save-status.saving::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bs-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

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

/* ============================================
   DARK THEME ADJUSTMENTS
   Page-specific dark mode styles only
   ============================================ */

/* Workout Editor Card - Light Mode */
.workout-editor-card {
    background: var(--bs-card-bg);
}

/* Dark Mode - Workout Editor Card
   Using page class for specificity over generic card styles */
[data-bs-theme="dark"] .workout-builder-page .workout-editor-card {
    background: #1e293b;
    border-color: #475569;
}

/* Workout Editor Section */
[data-bs-theme="dark"] .workout-editor-section {
    background: #1e293b;
    color: #f8fafc;
}

[data-bs-theme="dark"] .workout-editor-empty-state {
    color: #94a3b8;
}

/* Accordion Items - Legacy support */
[data-bs-theme="dark"] .accordion-workout-groups .accordion-item {
    background: #1e293b;
    border-color: #475569;
}

[data-bs-theme="dark"] .accordion-workout-groups .accordion-button {
    background: #1e293b;
    color: #f8fafc;
}

[data-bs-theme="dark"] .accordion-workout-groups .accordion-button:not(.collapsed) {
    background: #334155;
    color: #f8fafc;
}

[data-bs-theme="dark"] .accordion-workout-groups .accordion-button:hover {
    background: #334155;
}

[data-bs-theme="dark"] .accordion-workout-groups .exercise-preview-main {
    color: #f8fafc;
}

[data-bs-theme="dark"] .accordion-workout-groups .exercise-preview-secondary,
[data-bs-theme="dark"] .accordion-workout-groups .exercise-preview-info,
[data-bs-theme="dark"] .accordion-workout-groups .exercise-preview-weight {
    color: #94a3b8;
}

[data-bs-theme="dark"] .accordion-workout-groups .accordion-body {
    background: #334155;
    color: #f8fafc;
}

[data-bs-theme="dark"] .accordion-workout-groups .drag-handle {
    color: #94a3b8;
}

[data-bs-theme="dark"] .accordion-workout-groups .drag-handle:hover {
    color: #d49378;  /* Brighter Clay */
}

/* Form Elements */
[data-bs-theme="dark"] .exercise-input-label,
[data-bs-theme="dark"] .form-label {
    color: #f8fafc;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #334155;
    border-color: #475569;
    color: #f8fafc;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: #334155;
    border-color: var(--bs-primary);
    color: #f8fafc;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748b;
}

/* Bonus Exercise Card Dark Mode */
[data-bs-theme="dark"] .bonus-exercise {
    background: #1e293b;
    border-color: #475569;
}

[data-bs-theme="dark"] .bonus-exercise .card-header {
    background: #334155;
    border-color: #475569;
    color: #f8fafc;
}

[data-bs-theme="dark"] .bonus-exercise .card-body {
    background: #1e293b;
    color: #f8fafc;
}

/* Bonus Exercise Specific */
[data-bs-theme="dark"] .bonus-exercise .card-header {
    background: rgba(var(--gs-success-rgb), 0.1);
    border-color: rgba(var(--gs-success-rgb), 0.3);
}

/* Editor Actions - Sticky Footer Dark Mode */
[data-bs-theme="dark"] .editor-actions > div {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .save-status {
    color: #94a3b8;
}

/* Scrollbar */
[data-bs-theme="dark"] .workout-builder-container ::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-bs-theme="dark"] .workout-builder-container ::-webkit-scrollbar-thumb {
    background: #475569;
}

[data-bs-theme="dark"] .workout-builder-container ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.workout-builder-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.workout-builder-error {
    padding: 2rem;
    text-align: center;
    color: var(--bs-danger);
}

.workout-builder-empty {
    padding: 3rem;
    text-align: center;
    color: var(--bs-secondary);
}

/* ============================================
   TRANSITIONS
   ============================================ */

.workout-card-compact,
.exercise-group,
.bonus-exercise {
    transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

button {
    transition: background-color 0.15s ease, transform 0.15s ease;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.workout-builder-container ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.workout-builder-container ::-webkit-scrollbar-track {
    background: var(--bs-gray-200);
    border-radius: 4px;
}

.workout-builder-container ::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400);
    border-radius: 4px;
}

.workout-builder-container ::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   Page-specific responsive styles only
   ============================================ */

@media (max-width: 768px) {
    /* Workout Builder Page Specific Styles */
    .workout-builder-page {
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .workout-builder-page .card-body {
        padding: 1rem;
    }

    /* Hide the header row on mobile - search is in navbar */
    .workout-builder-page .card-body > .d-flex.justify-content-between:first-child {
        display: none !important;
    }

    .workout-builder-page .btn {
        width: 100%;
        padding: 0.625rem 1rem;
        min-height: 44px;
        font-size: 1rem;
        margin-top: 0.75rem;
    }

    /* Editor section */
    .workout-editor-section {
        padding: 1rem;
        min-height: 400px;
    }

    /* Form fields */
    .workout-editor-form .row {
        margin-left: 0;
        margin-right: 0;
    }

    .workout-editor-form .row > [class*='col-'] {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1rem;
    }

    /* Sets/Reps/Rest */
    .sets-reps-rest-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Accordion optimizations */
    .accordion-workout-groups .accordion-button {
        /* Use logical properties to override Bootstrap's logical properties */
        padding-block-start: 0.25rem !important;
        padding-block-end: 0.25rem !important;
        padding-inline-start: 0.25rem !important;
        padding-inline-end: 3rem !important;
        font-size: 0.95rem;
        min-height: 56px;
    }

    .accordion-workout-groups .accordion-body {
        padding: 0.75rem;
    }

    .accordion-workout-groups .exercise-preview-main {
        font-size: 0.85rem;
    }

    .accordion-workout-groups .exercise-preview-secondary {
        font-size: 0.7rem;
        padding-left: 0.375rem;
    }

    .accordion-workout-groups .group-title {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .accordion-workout-groups .accordion-body .row > [class*='col-'] {
        margin-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .accordion-workout-groups .form-control {
        font-size: 1rem;
        padding: 0.625rem 0.75rem;
        min-height: 44px;
    }

    .accordion-workout-groups .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
        font-weight: 500;
    }

    .accordion-workout-groups .btn {
        padding: 0.625rem 1rem;
        min-height: 44px;
        font-size: 0.95rem;
    }

    .accordion-workout-groups .btn-sm {
        padding: 0.5rem 0.875rem;
        min-height: 40px;
        font-size: 0.9rem;
    }

    /* Bonus exercises */
    .bonus-exercise {
        margin-bottom: 0.875rem;
    }

    .bonus-exercise .card-body {
        padding: 1rem 0.875rem;
    }

    .bonus-exercise .card-header {
        padding: 0.75rem 0.875rem;
        min-height: 52px;
    }

    .bonus-exercise .card-header h6 {
        font-size: 0.95rem;
    }

    /* Editor actions - Sticky Footer Mobile */
    .editor-actions {
        padding: 0.75rem 1rem;
        margin-left: 0;
    }

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

    .editor-actions #saveStatus {
        font-size: 0.8125rem;
        margin-bottom: 0.625rem;
    }

    /* Adjust padding for mobile */
    #workoutEditorForm {
        padding-bottom: 180px;
    }
}

@media (max-width: 1199px) {
    /* Remove sidebar offset on tablet/mobile */
    .editor-actions {
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .editor-actions {
        padding: 0.625rem 0.875rem;
    }

    .editor-actions .btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    /* Extra compact for very small screens */
    #workoutEditorForm {
        padding-bottom: 160px;
    }

    .editor-actions .btn-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .editor-actions .btn-group .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        min-height: 48px;
        font-size: 1rem;
    }

    .save-status {
        justify-content: center;
        order: -1;
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    /* Extra small screens */
    .form-label {
        font-size: 0.85rem;
    }

    .form-control,
    .form-select {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    /* Landscape mobile optimization */
    .workout-editor-section {
        min-height: 300px;
    }

    .workout-editor-empty-state {
        min-height: 250px;
    }
}