/**
 * Workout Logging Mockup Styles
 * Styles specific to the workout logging mockup
 */

/* ============================================
   Logging Screen
   ============================================ */
.logging-screen {
    display: flex;
    flex-direction: column;
    background: var(--mockup-feed-bg);
}

/* ============================================
   Workout Header (Dark)
   ============================================ */
.workout-header {
    background: var(--mockup-header-dark);
    padding: 48px 16px 16px;
    color: #fff;
}

.workout-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.workout-exercise-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.workout-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workout-progress {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.workout-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #fff;
}

.workout-timer img {
    flex-shrink: 0;
}

.timer-value {
    font-weight: 500;
    font-family: system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
}

.timer-mins::after {
    content: "8";
}

.timer-secs::after {
    content: "17";
    animation: timerSecsCount 12s linear infinite;
}

/* ============================================
   Exercise Navigation Bar
   ============================================ */
.exercise-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f5f5f5;
    font-size: 10px;
}

.nav-btn {
    background: #fff;
    color: #000;
    font-weight: 500;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 6px;
}

.nav-btn.disabled {
    opacity: 0.5;
    color: #999;
}

.nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nav-count {
    font-weight: 600;
    color: #333;
}

.nav-actions {
    display: flex;
    gap: 6px;
}

.nav-action {
    background: #E8E8E8;
    color: #000;
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 4px;
}

/* ============================================
   Enhanced Exercise Card
   ============================================ */
.exercise-card-enhanced {
    background: #fff;
    margin: 10px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--mockup-cyan);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.exercise-info {
    flex: 1;
}

.exercise-name {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.exercise-meta {
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 12px;
}

.exercise-progress {
    display: flex;
    align-items: center;
    gap: 6px;
}

.swap-btn {
    color: var(--mockup-cyan);
    font-size: 14px;
}

.set-count {
    font-size: 10px;
    font-weight: 600;
    color: #333;
}

/* ============================================
   Your Previous Section
   ============================================ */
.previous-section {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
}

.previous-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #333;
}

.expand-icon {
    font-size: 8px;
    color: #999;
}

.previous-data {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
    margin-top: -4px;
}

.previous-note {
    font-size: 9px;
    color: #888;
    margin-bottom: 6px;
    font-style: italic;
}

.previous-table-header,
.previous-row {
    display: flex;
    font-size: 9px;
    padding: 2px 0;
}

.previous-table-header {
    color: #999;
    font-weight: 500;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 2px;
}

.previous-row {
    color: #666;
}

.col-set {
    width: 30px;
}

.col-reps {
    flex: 1;
}

.col-weight {
    flex: 1;
    text-align: right;
}

.previous-volume {
    font-size: 9px;
    color: #666;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e5e5e5;
}

/* ============================================
   Current Sets Header & Table
   ============================================ */
.current-sets-header {
    display: flex;
    font-size: 9px;
    color: #999;
    font-weight: 500;
    padding: 4px 8px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 6px;
}

.sets-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.set-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 11px;
}

.set-row.completed {
    background: #f0fdf4;
}

.set-row.active {
    background: #fff;
    border: 1px solid var(--mockup-cyan);
}

.set-row.active-dashed {
    background: #fff;
    border: 2px dashed var(--mockup-cyan);
    border-radius: 8px;
}

.set-num {
    width: 20px;
    font-weight: 600;
    color: #374151;
}

.set-weight {
    flex: 1;
    color: #6b7280;
}

.set-reps {
    flex: 1;
    color: #6b7280;
}

.set-check {
    color: var(--mockup-success);
}

/* Enhanced Set Row Colors */
.set-num.green,
.set-reps.green,
.set-weight.green {
    color: #34C759;
    font-weight: 600;
}

.set-num.red,
.set-reps.red,
.set-weight.red {
    color: #FF3B30;
    font-weight: 600;
}

.set-num.cyan {
    color: var(--mockup-cyan);
    font-weight: 600;
}

.set-reps.placeholder,
.set-weight.placeholder {
    color: #ccc;
    font-size: 10px;
}

/* ============================================
   Card Action Buttons
   ============================================ */
.card-action-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.card-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.undo-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
}

.log-btn {
    background: #1e1b4b;
    color: #fff;
}

.remove-btn {
    background: #fff;
    border: 1px solid #FF3B30;
    color: #FF3B30;
}

.add-set-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
}

/* ============================================
   Bottom Workout Buttons
   ============================================ */
.workout-bottom-btns {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: #f5f5f5;
}

.workout-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.cancel-workout-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
}

.complete-workout-btn {
    background: linear-gradient(135deg, #00d2ff 0%, #1e1b4b 100%);
    color: #fff;
}

/* ============================================
   Modal Overlay
   ============================================ */
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-end;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    animation: modalOverlayFade 12s ease-in-out infinite;
}

.set-input-modal {
    background: #fff;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    transform: translateY(100%);
    animation: modalSlideUp 12s ease-in-out infinite;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-cancel {
    font-size: 12px;
    color: var(--mockup-cyan);
}

.modal-title {
    font-size: 14px;
    font-weight: 600;
}

.modal-spacer {
    width: 50px;
}

/* ============================================
   Input Fields
   ============================================ */
.input-fields {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.input-field {
    flex: 1;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.input-field.active {
    background: #e8f7ff;
    border: 2px solid var(--mockup-cyan);
}

.input-label {
    font-size: 9px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.input-value {
    font-size: 28px;
    font-weight: 700;
    position: relative;
}

.input-value.disabled {
    color: var(--mockup-disabled-text);
    animation: valueActivate 12s ease infinite;
}

.value-display {
    position: relative;
}

.value-8 {
    animation: value8Fade 12s step-end infinite;
}

.value-9 {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    animation: value9Fade 12s step-end infinite;
}

.input-hint {
    font-size: 9px;
    color: #9ca3af;
    margin-top: 4px;
}

/* ============================================
   Copy Prev Button
   ============================================ */
.copy-prev-btn {
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 12px;
    position: relative;
}

/* ============================================
   Quick Adjust Buttons
   ============================================ */
.quick-adjust {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.adjust-btn {
    width: 44px;
    height: 36px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    position: relative;
}

/* +1 button gets highlighted during animation only */
.adjust-btn.plus-one {
    background: #f5f5f5;
    color: #374151;
    animation: plusOneHighlight 12s ease infinite;
}

/* ============================================
   Modal Actions
   ============================================ */
.modal-actions {
    display: flex;
    gap: 10px;
}

.log-set-btn {
    flex: 2;
    padding: 14px;
    background: #34C759;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    animation: buttonPress 12s ease infinite;
}

.next-btn {
    flex: 1;
    padding: 14px;
    background: #000;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

/* ============================================
   Rest Timer Modal (matches app design)
   ============================================ */
.rest-timer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    opacity: 0;
    animation: restTimerAppear 12s ease infinite;
}

.rest-timer-modal {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    width: 90%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rest-timer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
}

.rest-timer-title {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.rest-minimize-btn {
    font-size: 10px;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 500;
}

.rest-timer-exercise {
    font-size: 12px;
    color: #666;
    margin-bottom: 16px;
    text-align: center;
}

.rest-timer-display {
    font-size: 56px;
    font-weight: 700;
    color: #34C759;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.rest-mins::after {
    content: "3";
    animation: restMinsCount 12s linear infinite;
}

.rest-secs::after {
    content: "00";
    animation: restSecsCount 12s linear infinite;
}

.rest-progress-bar {
    width: 100%;
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 16px;
}

.rest-progress-fill {
    height: 100%;
    background: #34C759;
    width: 0%;
    animation: restProgressFill 12s linear infinite;
}

.rest-quick-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.rest-quick-btn {
    padding: 6px 14px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: #000;
}

.rest-control-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

.rest-control-btn {
    flex: 1;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.rest-skip-btn {
    width: 100%;
    padding: 12px;
    background: #FF3B30;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

/* ============================================
   Touch Indicators
   ============================================ */
.touch-indicator {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 210, 255, 0.3);
    border: 2px solid var(--mockup-cyan);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 50;
}

.touch-copy-prev {
    top: 73%;
    left: 50%;
    margin-left: -20px;
    animation: touchPulse 12s ease infinite;
    animation-delay: 2.5s;
}

.touch-plus-one {
    top: 80%;
    left: 60%;
    margin-left: -20px;
    animation: touchPulse 12s ease infinite;
    animation-delay: 4.5s;
}

.touch-log-set {
    top: 87%;
    left: 38%;
    margin-left: -20px;
    animation: touchPulse 12s ease infinite;
    animation-delay: 5.8s;
}

/* ============================================
   Animations
   ============================================ */

/* Workout timer counting up - seconds (8:17 to 8:28, stays within same minute) */
@keyframes timerSecsCount {
    0%, 7% { content: "17"; }
    8%, 15% { content: "18"; }
    16%, 23% { content: "19"; }
    24%, 31% { content: "20"; }
    32%, 39% { content: "21"; }
    40%, 47% { content: "22"; }
    48%, 55% { content: "23"; }
    56%, 63% { content: "24"; }
    64%, 71% { content: "25"; }
    72%, 79% { content: "26"; }
    80%, 87% { content: "27"; }
    88%, 100% { content: "28"; }
}

/* Rest timer countdown - seconds (counts down by 1 per real second) */
@keyframes restSecsCount {
    0%, 75% { content: "00"; }
    76%, 83% { content: "59"; }
    84%, 91% { content: "58"; }
    92%, 100% { content: "57"; }
}

/* Rest timer countdown - minutes (changes at same moment seconds hit 59) */
@keyframes restMinsCount {
    0%, 75% { content: "3"; }
    76%, 100% { content: "2"; }
}

/* Modal overlay fade */
@keyframes modalOverlayFade {
    0%, 14% {
        opacity: 0;
        pointer-events: none;
    }
    18%, 54% {
        opacity: 1;
        pointer-events: auto;
    }
    58%, 100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* Modal slide up - 12s loop */
@keyframes modalSlideUp {
    0%, 14% {
        transform: translateY(100%);
    }
    20%, 52% {
        transform: translateY(0);
    }
    58%, 100% {
        transform: translateY(100%);
    }
}

/* Value activation (gray to black) */
@keyframes valueActivate {
    0%, 28% {
        color: var(--mockup-disabled-text);
    }
    32%, 100% {
        color: #000;
    }
}

/* Reps 8 fade out */
@keyframes value8Fade {
    0%, 38% {
        opacity: 1;
    }
    42%, 100% {
        opacity: 0;
    }
}

/* Reps 9 fade in */
@keyframes value9Fade {
    0%, 38% {
        opacity: 0;
    }
    42%, 100% {
        opacity: 1;
    }
}

/* Button press effect */
@keyframes buttonPress {
    0%, 48%, 52%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
        background: #2da44e;
    }
}

/* +1 button highlight effect - only active when tapped */
@keyframes plusOneHighlight {
    0%, 32%, 40%, 100% {
        background: #f5f5f5;
        color: #374151;
    }
    35%, 38% {
        background: #e8f7ff;
        color: var(--mockup-cyan);
        transform: scale(0.95);
    }
}

/* Rest timer appear */
@keyframes restTimerAppear {
    0%, 62% {
        opacity: 0;
    }
    68%, 85% {
        opacity: 1;
    }
    92%, 100% {
        opacity: 0;
    }
}

/* Rest progress fill */
@keyframes restProgressFill {
    0%, 68% {
        width: 0%;
    }
    76% {
        width: 1.5%;
    }
    84% {
        width: 3%;
    }
    92%, 100% {
        width: 4.5%;
    }
}

/* Touch indicator pulse */
@keyframes touchPulse {
    0%, 100% {
        transform: scale(0);
        opacity: 0;
    }
    2% {
        transform: scale(0.6);
        opacity: 0.8;
    }
    5% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .set-input-modal,
    .input-value.disabled,
    .value-8,
    .value-9,
    .log-set-btn,
    .rest-timer-overlay,
    .rest-progress-fill,
    .touch-indicator,
    .adjust-btn.plus-one,
    .timer-mins::after,
    .timer-secs::after,
    .rest-mins::after,
    .rest-secs::after {
        animation: none !important;
    }

    .timer-mins::after {
        content: "8";
    }

    .timer-secs::after {
        content: "17";
    }

    .rest-mins::after {
        content: "3";
    }

    .rest-secs::after {
        content: "00";
    }

    /* Show static state for logging mockup */
    .modal-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .set-input-modal {
        transform: translateY(0);
    }

    .input-value.disabled {
        color: #000;
    }

    .value-8 {
        opacity: 1;
    }

    .value-9 {
        opacity: 0;
    }

    .rest-timer-overlay {
        display: none;
    }

    .touch-indicator {
        display: none;
    }

    .adjust-btn.plus-one {
        background: #f5f5f5;
        color: #374151;
    }
}