/* exercise-builder.css — bespoke styles for the in-page workout builder and
   exercise picker dialogs on the /exercise "build your own" surface.
   Loaded after exercise.css so builder rules can extend/override base classes. */

/* ── section panels reuse the AI-workout phase aura; the data-section hook lives on the
   inner list, so colour the panel via :has() ───────────────────────────────── */
.builder-section:has(.builder-ex-list[data-section="warmup"])   { border-left-color:#E5484D; background:rgba(229,72,77,0.07); }
.builder-section:has(.builder-ex-list[data-section="working"])  { border-left-color:#B5E000; background:rgba(181,224,0,0.07); }
.builder-section:has(.builder-ex-list[data-section="cooldown"]) { border-left-color:#5AB0E5; background:rgba(90,176,229,0.08); }

/* ── picker dialogs reuse .sf-dialog (a 420px confirm modal) — widen by id into a
   list-browser shell, like the food search dialog. MUST be scoped to [open]:
   `display:flex` unscoped would beat the UA `dialog:not([open]){display:none}`
   and the closed dialog would render inline in the page (always-open bug). ──── */
#exercise-picker-dialog[open], #fav-exercise-picker-dialog[open], #fav-workout-picker-dialog[open] {
    width:min(560px,96vw); height:min(660px,86vh); max-width:96vw;
    padding:0; display:flex; flex-direction:column; overflow:hidden;
}

/* ── themed selects are fixed 200px; inside the meta column + dialog go full-width ─ */
.builder-meta .exercise-select, .picker-browse .exercise-select { width:100%; }

/* ═══════════════════════════════════════════════════════════════════════════════
   BUILDER (in-page)
   ═══════════════════════════════════════════════════════════════════════════════ */

.builder { margin-top:.5rem; }

/* meta card — mirrors .exercise-config; must win over .exercise-fieldset reset */
.builder-meta {
    background:var(--nr-surface); border:1px solid var(--nr-border); border-radius:16px;
    padding:1.25rem; margin-bottom:1.5rem;
}
/* title as a plain block, not a <legend> — a fieldset legend escapes the card's
   rounded border (renders above it). A div inside the padded card sits correctly. */
.builder-meta-title { font-size:.85rem; font-weight:600; color:var(--nr-text); margin-bottom:.75rem; }

.builder-meta-row { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.75rem; }
.builder-meta-row span { font-size:.78rem; font-weight:500; color:var(--nr-text-mute); }

/* section panel — mirrors .exercise-section; :has() above recolours per phase */
.builder-section {
    margin-bottom:1.5rem; padding:.9rem 1rem; border-left:3px solid var(--nr-border);
    border-radius:10px; background:var(--nr-bg);
}
.builder-section-title { font-size:1.05rem; font-weight:700; color:var(--nr-text); margin:0 0 .6rem; }

.builder-ex-list { margin-bottom:.5rem; }

/* exercise card */
.builder-ex-card {
    background:var(--nr-surface); border:1px solid var(--nr-border); border-radius:12px;
    padding:.85rem; margin-bottom:.6rem;
}

/* Top row: label + X */
.builder-ex-top { margin-bottom:.6rem; }
.builder-ex-name-row {
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:.25rem;
}
.builder-label {
    font-size:.78rem; font-weight:500; color:var(--nr-text-mute);
    letter-spacing:.02em;
}

/* Name input — full width */
.builder-ex-name-input {
    display:block; width:100%; box-sizing:border-box;
    padding:.45rem .6rem; font-size:16px; font-weight:500;
    background:var(--nr-bg); color:var(--nr-text);
    border:1px solid var(--nr-border); border-radius:8px;
}
.builder-ex-name-input:focus { outline:2px solid var(--nr-yellow); outline-offset:1px; }

/* Meta row: muscle group + mode dropdown, side by side */
.builder-ex-meta-row {
    display:flex; gap:.75rem; margin-bottom:.65rem;
}
.builder-meta-col {
    flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem;
}
.builder-meta-col .builder-ex-field {
    padding:.4rem .5rem; font-size:14px;
    background:var(--nr-bg); color:var(--nr-text);
    border:1px solid var(--nr-border); border-radius:8px;
}
.builder-meta-col .builder-ex-field:focus {
    outline:2px solid var(--nr-yellow); outline-offset:1px;
}
.builder-ex-type {
    padding:.4rem .5rem; font-size:14px;
    background:var(--nr-bg); color:var(--nr-text);
    border:1px solid var(--nr-border); border-radius:8px;
}
.builder-ex-type:focus { outline:2px solid var(--nr-yellow); outline-offset:1px; }

/* remove exercise × */
.builder-ex-remove {
    width:2rem; height:2rem; padding:0; flex-shrink:0; display:inline-flex;
    align-items:center; justify-content:center; font-size:1.1rem; line-height:1;
    background:transparent; color:var(--nr-text-mute); border:1px solid var(--nr-border);
    border-radius:8px; cursor:pointer;
}
.builder-ex-remove:hover { border-color:#E5484D; color:#E5484D; }

/* sets */
.builder-set-list { margin:.4rem 0; display:flex; flex-direction:column; gap:.5rem; }

/* Set block: header + grid of fields */
.builder-set-block {
    border:1px solid var(--nr-border); border-radius:8px; padding:.5rem .6rem;
}
.builder-set-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.4rem;
}
.builder-set-label {
    font-weight:700; font-size:.82rem; color:var(--nr-text);
    text-transform:uppercase; letter-spacing:.03em;
}

/* Grid: rows of field columns */
.builder-set-grid {
    display:flex; flex-direction:column; gap:.35rem;
}
.builder-set-grid-row {
    display:flex; gap:.6rem;
}
.builder-field-col {
    flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem;
}
.builder-field-label {
    font-size:.7rem; font-weight:500; color:var(--nr-text-mute);
    text-transform:capitalize;
}
.builder-field-cell {
    display:flex; align-items:center; gap:.25rem;
}
.builder-unit {
    font-size:.75rem; color:var(--nr-text-mute); flex-shrink:0;
}

/* Set inputs — fixed width so columns align */
.builder-set-input {
    width:80px; padding:.3rem .25rem; font-size:16px; font-weight:600;
    background:var(--nr-surface); color:var(--nr-text); border:1px solid var(--nr-border);
    border-radius:6px; text-align:center;
}
.builder-set-input:focus { outline:2px solid var(--nr-yellow); outline-offset:1px; }

/* Rest time: min:sec group — same total width as a single input */
.builder-rest-group {
    display:flex; align-items:center; gap:0;
}
.builder-rest-input {
    width:36px; padding:.3rem .15rem; font-size:16px; font-weight:600;
    background:var(--nr-surface); color:var(--nr-text); border:1px solid var(--nr-border);
    border-radius:6px; text-align:center;
}
.builder-rest-input:first-child { border-radius:6px 0 0 6px; border-right:none; }
.builder-rest-input:last-child { border-radius:0 6px 6px 0; }
.builder-rest-sep {
    font-size:16px; font-weight:700; color:var(--nr-text-mute); padding:0 1px;
}
.builder-rest-input:focus { outline:2px solid var(--nr-yellow); outline-offset:-1px; }

/* remove set × */
.builder-set-remove {
    width:1.6rem; height:1.6rem; padding:0; display:inline-flex;
    align-items:center; justify-content:center; background:transparent;
    color:var(--nr-text-mute); border:1px solid var(--nr-border); border-radius:6px;
    cursor:pointer; font-size:.9rem; line-height:1;
}
.builder-set-remove:hover { color:#E5484D; border-color:#E5484D; }

/* add affordances */
.builder-set-add { padding:.35rem .8rem; font-size:.85rem; border-style:dashed; border-radius:8px; margin-top:.4rem; }
.builder-add-btn { margin-top:.2rem; font-size:.9rem; }
#builder-save-btn { margin-top:1rem; }

/* ═══════════════════════════════════════════════════════════════════════════════
   PICKER (dialogs)
   ═══════════════════════════════════════════════════════════════════════════════ */

.picker { display:flex; flex-direction:column; height:100%; min-height:0; }

.picker-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:1rem 1.25rem .75rem; border-bottom:1px solid var(--nr-border); flex-shrink:0;
}
.picker-head h3 { margin:0; font-size:1rem; }

.picker-modes { display:flex; gap:.5rem; flex-wrap:wrap; padding:.9rem 1.25rem 0; flex-shrink:0; }
.picker-modes .btn-secondary { flex:1; min-width:8rem; font-size:.85rem; }

.picker-browse {
    flex:1; display:flex; flex-direction:column; gap:.6rem;
    padding:1rem 1.25rem 1.25rem; min-height:0;
}
/* filters stay static; only .picker-list scrolls (swipe the list in place) */
.picker-browse > .builder-meta-row { flex-shrink:0; }

/* scrollable list — also applies to fav dialog lists directly */
.picker-list, #fav-exercise-list, #fav-workout-list {
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column; gap:.3rem; margin-top:.3rem;
}
#fav-exercise-list, #fav-workout-list { padding:1rem 1.25rem 1.25rem; }

/* clickable row (a <button>) */
.picker-row {
    display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
    width:100%; text-align:left; padding:.6rem .7rem; background:var(--nr-surface);
    color:var(--nr-text); border:1px solid var(--nr-border); border-radius:10px;
    cursor:pointer;
}
.picker-row:hover { border-color:var(--nr-text-mute); background:var(--nr-bg); }
.picker-row-name { font-weight:600; font-size:.95rem; color:var(--nr-text); }
/* echoes the AI view's .exercise-exercise-description; clamp to 2 lines so rows stay uniform */
.picker-row-desc {
    font-size:.82rem; color:var(--nr-text-mute); font-style:italic; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.picker-row-meta { font-size:.74rem; color:var(--nr-text-mute); letter-spacing:.02em; text-transform:capitalize; }

/* workout variant — name/meta in a row */
.picker-row--workout {
    flex-direction:row; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:.2rem .6rem;
}

/* Favourite exercise row: flat layout matching session card style */
.fav-ex-row {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.75rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    cursor: pointer;
    gap: 0.2rem;
    transition: border-color 0.15s;
}
.fav-ex-row:hover {
    border-color: var(--nr-text-mute);
    background: var(--nr-bg);
}
.fav-ex-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.fav-ex-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--nr-text);
}
.fav-ex-heart {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #E84393;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.1s ease;
}
.fav-ex-heart:hover {
    transform: scale(1.2);
}
.fav-ex-meta {
    font-size: 0.78rem;
    color: var(--nr-text-mute);
    letter-spacing: 0.02em;
    text-transform: capitalize;
}
.fav-ex-desc {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--nr-text-mute);
}

/* Small confirm dialog for unfavourite */
#fav-confirm-dialog[open] {
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: 1.5rem;
}
.fav-confirm-body p {
    margin: 0 0 1.2rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--nr-text);
}
.sf-dialog-submit--danger {
    background: #C62828;
    color: #fff;
    border-color: #C62828;
}
.sf-dialog-submit--danger:hover { filter: brightness(0.93); }
[data-theme="dark"] .sf-dialog-submit--danger {
    background: #3B1B1B;
    color: #EF9A9A;
    border-color: #C62828;
}

/* Exercise description textarea in builder */
/* Textarea styling — matches other builder inputs, allows vertical resize */
.builder-ex-desc-row {
    margin-top: 0.75rem;
}
.builder-ex-desc-input {
    width: 100%;
    min-height: 80px;
    padding: 0.5rem;
    font-size: 0.9rem;
    border: 1px solid var(--nr-border, #ddd);
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    background: var(--nr-bg, #fff);
    color: var(--nr-text, #333);
}
.builder-ex-desc-input:focus {
    outline: none;
    border-color: var(--nr-accent, #4a90e2);
}
[data-theme="dark"] .builder-ex-desc-input {
    border-color: var(--nr-border-dark, #444);
    background: var(--nr-bg-dark, #1e1e1e);
    color: var(--nr-text-dark, #eee);
}
[data-theme="dark"] .builder-ex-desc-input:focus {
    border-color: var(--nr-accent-dark, #6ab0ff);
}

/* ════════════════════════════════════════════════════════════════════════════
   User Workouts dialog — stacked glow buttons
   ════════════════════════════════════════════════════════════════════════════ */

#user-workouts-dialog[open] {
    width: min(400px, 92vw);
    padding: 0;
}

.uw-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.25rem 0.5rem;
}
.uw-dialog-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.uw-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem 1.5rem;
}

/* Shared glow button base */
.uw-glow-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.85rem 1.2rem;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1F1F1F;
    cursor: pointer;
    text-align: center;
    /* animated gradient background */
    background: linear-gradient(
        90deg,
        var(--nr-yellow) 0%,
        var(--nr-lime) 25%,
        var(--nr-yellow) 50%,
        var(--nr-lime) 75%,
        var(--nr-yellow) 100%
    );
    background-size: 400% 100%;
    animation: uw-glow-wave 4s ease-in-out infinite;
    transition: filter 0.15s, transform 0.05s;
}
.uw-glow-btn:active {
    transform: translateY(1px);
}
.uw-glow-btn:hover {
    filter: brightness(1.05);
}

/* Button 2 starts its animation offset so the waves are out of sync */
.uw-glow-btn--2 {
    animation-delay: -2s;
}

@keyframes uw-glow-wave {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Dark mode: keep the glow vivid but soften the text */
[data-theme="dark"] .uw-glow-btn {
    color: #1F1F1F;
}
@media (prefers-color-scheme: dark) {
    .uw-glow-btn {
        color: #1F1F1F;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Favourite Workout cards — mirror session card style
   ════════════════════════════════════════════════════════════════════════════ */

.fav-workout-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.15s;
}
.fav-workout-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Header — 3 rows, click to expand */
.fav-workout-header {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    gap: 0.4rem;
}
.fav-workout-header:hover {
    background: var(--nr-bg);
}
.fav-workout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.fav-workout-row--middle {
    justify-content: flex-start;
    gap: 0.6rem;
    flex-wrap: nowrap;
}

/* Import button wrapper — slightly narrower than full width */
.fav-workout-import-wrap {
    padding: 0 0.75rem 0.75rem;
    margin-top: 0.75rem;
}
.fav-workout-import-wrap .uw-glow-btn {
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Chevron — card-level, bottom-right corner */
.fav-workout-card .exercise-session-chevron {
    position: absolute;
    bottom: 0.55rem;
    right: 0.7rem;
    z-index: 2;
    font-size: 0.8rem;
    color: var(--nr-text-mute);
    transition: transform 0.15s;
}
.fav-workout-card.is-expanded .exercise-session-chevron {
    transform: rotate(90deg);
}

/* Summary section — hidden until expanded, scrollable */
.fav-workout-summary {
    border-top: 1px solid var(--nr-border);
    max-height: 280px;
    overflow-y: auto;
    padding-bottom: 1rem;
}
.fav-workout-summary .exercise-session-summary {
    padding: 0.6rem 1.1rem 0.8rem;
}

/* ── Phase C: per-side (L/R) toggle ─────────────────────────────────────── */
.uw-per-side {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--nr-text-mute); cursor: pointer;
    padding-top: 1.25rem; white-space: nowrap;
}
.uw-per-side input { accent-color: var(--nr-lime); }