/* ============================= */
/* # View: Workout Configuration */
/* ============================= */

/* ------- */
/* Content */
/* ------- */
.view-workout-configuration-content {
    width: 100cqw;
    height: 100cqh;
    container-type: size;
    overflow: hidden;

    display: grid;
    grid-template-columns: 100cqw;
    grid-template-rows: 28cqh 54cqh 14cqh;
    gap: 2cqh;
}

.view-workout-configuration-content-form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
}

#config-form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
}

.view-workout-configuration-content-exercises {
    container-type: size;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Prepare (seconds) */
/* Active Period (seconds) */
/* Number of Sets */

.form-group {
    display: grid;
    grid-template-columns: 68cqw 30cqw;
    align-items: center;
    overflow: hidden;
    gap: 2cqw;
}

.form-group label {
    color: var(--color-text);
    text-shadow: var(--color-text-glow);
    white-space: nowrap;
    font-size: 3dvh;
    font-weight: 600;
    text-align: left;
}

.form-group input {
    padding: 1cqh;
    font-size: 3dvh;
    background: var(--input-bg);
    border: var(--input-border);
    border-radius: 2cqh;
    color: var(--color-text);
    box-shadow: var(--input-shadow);
    font-weight: 500;
}

.form-group input:focus {
    outline: none;
    border-color: var(--ocean-bright);
    box-shadow: var(--input-shadow-focus);
}

.btn {
    cursor: pointer;
    transition: all 0.2s;
}

.exercise-assignments {
    container-type: size;

    overflow-y: auto;
    height: 100%;
}

.set-assignment {
    display: grid;
    align-items: center;
    grid-template-columns: 20cqw 75cqw;
    gap: 2cqh;
    padding-bottom: 3cqh
}

.set-assignment:last-child {
    border-bottom: none;
}

.set-assignment label {
    color: var(--color-text);
    font-size: 8cqh;
    font-weight: 600;
    white-space: nowrap;
}

.exercise-select {
    color: var(--color-text);
    font-size: 8cqh;
    padding: 2cqh;

    border: var(--input-border);
    border-radius: 2cqh;
    background: var(--ocean-deep-mid);
    cursor: pointer;
    transition: all 0.2s;
 }

.exercise-select:focus {
    outline: none;
    border-color: var(--ocean-bright);
    box-shadow: var(--input-shadow-focus);
}

.exercise-select:hover {
    background: linear-gradient(135deg, var(--ocean-deep-light) 0%, #0088cc 100%);
}

.exercise-select option {
    background: var(--ocean-deep-mid);
    color: var(--color-text);
    padding: 1cqh;
    font-weight: 600;
}

.exercise-select optgroup {
    background: var(--ocean-deep-dark);
    color: var(--ocean-bright);
    font-weight: 700;
    font-style: normal;
}