/* ============================================================================
   IRONLOG - BUILDER STYLES
   Estilos complementares para interface de montagem e execução
   ============================================================================ */

:root {
    --bg: #07070b;
    --bg2: #0f0f18;
    --bg3: #161625;
    --purple: #7a3cff;
    --accent: #b026ff;
    --red: #ff2a2a;
    --orange: #ff8c00;
    --text: #ffffff;
    --metal: #8a8a9d;
    --border: #222235;
}

/* ========== BUILDER STYLES ========== */

.builder-container {
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

.builder-container h2 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.builder-container h3 {
    margin: 20px 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--metal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.builder-container p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--metal);
    line-height: 1.5;
}

/* ========== OPTION GRID ========== */

.option-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.option-grid.two-cols {
    grid-template-columns: 1fr 1fr;
}

.option-grid.three-cols {
    grid-template-columns: 1fr 1fr 1fr;
}

.option-card {
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    background: var(--bg3);
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.option-card:hover {
    border-color: var(--purple);
    background: rgba(122,60,255,0.05);
}

.option-card:active {
    transform: scale(0.98);
}

.option-card.selected {
    border-color: var(--purple);
    background: rgba(122,60,255,0.15);
    color: var(--accent);
    box-shadow: 0 0 20px rgba(122,60,255,0.2);
}

/* ========== MUSCLE ITEM ========== */

.muscle-item {
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.muscle-item:hover {
    border-color: var(--purple);
    background: rgba(122,60,255,0.05);
}

.muscle-item:active {
    transform: scale(0.98);
}

.muscle-item.selected {
    border-color: var(--purple);
    background: rgba(122,60,255,0.15);
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.muscle-item.selected .checkbox-custom {
    background: var(--purple);
    border-color: var(--purple);
}

.muscle-item.selected .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 600;
}

/* ========== INJURY ITEM ========== */

.injury-item {
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.injury-item:hover {
    border-color: var(--red);
    background: rgba(255,42,42,0.05);
}

.injury-item:active {
    transform: scale(0.98);
}

.injury-item.selected {
    border-color: var(--red);
    background: rgba(255,42,42,0.15);
}

.injury-item.selected input[type="checkbox"] {
    accent-color: var(--red);
}

/* ========== WEEK SELECTOR ========== */

.week-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.week-day {
    padding: 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.day-label {
    font-size: 11px;
    color: var(--metal);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.day-select {
    width: 100%;
    padding: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.day-select:focus {
    border-color: var(--purple);
    outline: none;
}

/* ========== BUILDER NAV ========== */

.builder-nav {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.builder-nav button {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.builder-nav .btn-back {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
}

.builder-nav .btn-back:active {
    transform: scale(0.98);
    background: var(--bg2);
}

.builder-nav .btn-next {
    background: var(--purple);
    color: white;
    box-shadow: 0 4px 15px rgba(122,60,255,0.3);
}

.builder-nav .btn-next:active {
    transform: scale(0.98);
}

/* ========== EXECUTION STYLES ========== */

.execution-screen {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exercise-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.execution-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.exec-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.exec-meta {
    font-size: 12px;
    color: var(--metal);
}

.exec-timer-btn {
    background: var(--purple);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.exec-timer-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 15px rgba(122,60,255,0.4);
}

/* ========== EXECUTION TABLE ========== */

.execution-table {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.table-header {
    display: grid;
    grid-template-columns: 40px 80px 60px 60px 40px;
    gap: 8px;
    padding: 12px;
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--metal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-body {
    display: flex;
    flex-direction: column;
}

.table-row {
    display: grid;
    grid-template-columns: 40px 80px 60px 60px 40px;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.table-row:last-child {
    border-bottom: none;
}

.col-type {
    display: flex;
    align-items: center;
    justify-content: center;
}

.series-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.series-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.series-badge:active {
    transform: scale(0.95);
}

.col-anterior {
    font-size: 12px;
    color: var(--metal);
    text-align: center;
}

.col-weight, .col-reps {
    display: flex;
    align-items: center;
    justify-content: center;
}

.set-input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    color: white;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    width: 100%;
    font-size: 13px;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.set-input:focus {
    border-color: var(--purple);
    background: rgba(122,60,255,0.1);
    outline: none;
}

.set-input::placeholder {
    color: var(--metal);
}

.col-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-btn {
    background: var(--purple);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(122,60,255,0.2);
}

.check-btn:hover {
    background: var(--accent);
    box-shadow: 0 4px 12px rgba(122,60,255,0.3);
}

.check-btn:active {
    transform: scale(0.92);
}

/* ========== BUTTONS ========== */

.btn-add-set {
    width: 100%;
    background: var(--bg3);
    border: 1px dashed var(--border);
    color: var(--accent);
    padding: 12px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    display: block;
    text-align: center;
}

.btn-add-set:hover {
    border-color: var(--accent);
    background: rgba(176,38,255,0.05);
}

.btn-add-set:active {
    transform: scale(0.98);
}

.btn-next-exercise {
    width: 100%;
    background: var(--purple);
    border: none;
    color: white;
    padding: 16px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(122,60,255,0.2);
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.btn-next-exercise:hover {
    background: var(--accent);
    box-shadow: 0 6px 20px rgba(176,38,255,0.3);
}

.btn-next-exercise:active {
    transform: scale(0.98);
}

.btn-next-exercise:active {
    transform: scale(0.98);
}

/* ========== SERIES TYPE MODAL ========== */

.series-type-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.series-type-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.series-type-option:hover {
    border-color: var(--purple);
    background: rgba(122,60,255,0.05);
}

.series-type-option:active {
    transform: scale(0.98);
    background: rgba(122,60,255,0.1);
    border-color: var(--purple);
}

.series-type-badge {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.series-type-info {
    flex: 1;
}

.series-type-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.series-type-desc {
    font-size: 12px;
    color: var(--metal);
}

.series-type-help {
    color: var(--metal);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.btn-remove-set {
    width: 100%;
    background: rgba(255,42,42,0.1);
    border: 1px solid var(--red);
    color: var(--red);
    padding: 12px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-set:hover {
    background: rgba(255,42,42,0.2);
}

.btn-remove-set:active {
    transform: scale(0.98);
}

/* ========== QUICK REPS ADJUST ========== */

.quick-reps-adjust {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-quick-adjust {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quick-adjust:hover {
    border-color: var(--purple);
    background: rgba(122,60,255,0.05);
}

.btn-quick-adjust:active {
    transform: scale(0.98);
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 0 15px rgba(122,60,255,0.3);
}

.btn-rir {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-rir:hover {
    border-color: var(--purple);
    background: rgba(122,60,255,0.05);
}

.btn-rir:active {
    transform: scale(0.92);
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 0 12px rgba(122,60,255,0.3);
}

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

@media (max-width: 600px) {
    .table-header, .table-row {
        grid-template-columns: 35px 70px 50px 50px 35px;
        gap: 6px;
        padding: 10px;
        font-size: 11px;
    }

    .set-input {
        height: 32px;
        font-size: 12px;
    }

    .check-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .option-grid.three-cols {
        grid-template-columns: 1fr 1fr;
    }

    .week-selector {
        grid-template-columns: 1fr;
    }

    .builder-nav {
        flex-direction: column;
    }

    .builder-nav button {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .table-header, .table-row {
        grid-template-columns: 30px 60px 45px 45px 30px;
        gap: 4px;
        padding: 8px;
    }

    .set-input {
        height: 30px;
        font-size: 11px;
        padding: 6px;
    }

    .check-btn {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .option-grid.two-cols {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   BOTTOM NAVIGATION
   ============================================================================ */
.bottom-nav {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    flex-shrink: 0;
    z-index: 100;
}
.nav-item {
    background: none;
    border: none;
    color: var(--metal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 16px;
    flex: 1;
}
.nav-item .nav-icon { font-size: 20px; line-height: 1; }
.nav-item.active { color: var(--purple); }

/* ============================================================================
   EXECUTION HEADER
   ============================================================================ */
.exec-header-title { font-weight: 700; font-size: 16px; color: var(--text); }
.exec-header-subtitle { font-size: 11px; color: var(--metal); margin-top: 2px; }

/* ============================================================================
   SEGMENTED CONTROL (Histórico: Treinos / Por Exercício)
   ============================================================================ */
.segmented-control {
    display: flex;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    gap: 4px;
}
.seg-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--metal);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}
.seg-btn.active { background: var(--purple); color: white; }

/* ============================================================================
   SESSION SUMMARY / STATS
   ============================================================================ */
.session-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.session-stat {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
}
.session-stat .stat-value { font-size: 18px; font-weight: 700; color: var(--purple); }
.session-stat .stat-label { font-size: 10px; color: var(--metal); text-transform: uppercase; margin-top: 4px; }

/* ============================================================================
   EXECUTION / HISTORY TABLE EXTRAS
   ============================================================================ */
.exercise-card.exercise-done { opacity: 0.6; }
.table-row.row-completed { background: rgba(122,60,255,0.06); }
.check-btn.check-btn-done { background: #3fbf60; }
.set-rir-tag {
    font-size: 11px;
    color: var(--metal);
    padding: 0 12px 8px;
    margin-top: -8px;
}

/* ============================================================================
   PROGRESSÃO POR EXERCÍCIO
   ============================================================================ */
.progression-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.progression-row {
    display: grid;
    grid-template-columns: 50px 32px 1fr auto;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
}
.progression-row.progression-pr { border-color: var(--purple); background: rgba(122,60,255,0.08); }
.progression-date { font-size: 11px; color: var(--metal); }
.progression-badge {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white;
}
.progression-value { font-size: 14px; font-weight: 600; color: var(--text); }
.progression-rir { font-size: 11px; color: var(--metal); }
.progression-pr-tag { grid-column: 1 / -1; font-size: 11px; color: var(--purple); font-weight: 600; }