/* =====================================================================
   quickadd-shared.css  —  Shared styles for all QuickAdd pages
   ===================================================================== */

/* ── Page shell ── */
.qa-page {
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f2f4f7;
}

.qa-section {
    padding: 16px;
    background: var(--npt-card);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.qa-section.add-card {
    background: var(--npt-blue-tint-bg);
    border: 2px dashed #1677f2;
    box-shadow: none;
}

.qa-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4a5568;
    margin-bottom: 8px;
    display: block;
}

.qa-sublabel {
    font-size: 12px;
    color: var(--npt-text-3);
    font-weight: 500;
}

/* Field-level sublabel (above inputs/chips within a card) */
.ex-sublabel {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #b0baca;
    margin-top: 10px;
    margin-bottom: 7px;
}

/* Spacer that clears the fixed CTA bar */
.cta-spacer { height: 90px; }

/* ── AppBar page title block ── */
.qa-appbar-title { text-align: center; line-height: 1.2; }
.qa-appbar-title-text { font-size: 16px; font-weight: 700; color: var(--npt-text); }
.qa-appbar-title-sub { font-size: 11px; font-weight: 500; color: var(--npt-text-3); letter-spacing: .03em; }

/* ── CTA bar ── */
.qa-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px 28px;
    background: var(--npt-card);
    border-top: 1px solid #f0f0f0;
    z-index: 50;
}
.cta-btn {
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 16px !important;
    height: auto !important;
}

/* ── Stepper ── */
.stepper {
    display: flex;
    align-items: center;
    background: var(--npt-card);
    border: 1.5px solid #d0d5dd;
    border-radius: 10px;
    overflow: hidden;
    height: 44px;
    align-self: flex-start;
}
.stepper-btn {
    width: 36px;
    height: 44px;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--npt-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stepper-btn:active { background: #e8ecf0; }
.stepper-btn.sm { width: 30px; height: 34px; font-size: 16px; }
.stepper-val {
    min-width: 36px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--npt-text);
    padding: 0 4px;
}

/* ── Chip rows ── */
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }

.chip-scroll {
    display: flex;
    gap: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }

/* Recent-name chips */
.name-chip {
    background: var(--npt-hover);
    border: 1.5px solid #e0e4ea;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--npt-text);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.name-chip.active { background: var(--npt-blue-tint-bg); border-color: #1677f2; color: #1677f2; }
.name-chip:active { background: var(--npt-blue-tint-bg); border-color: #1677f2; color: #1677f2; }

/* Tracking-type chips (full size — Single / Superset) */
.track-chip {
    background: var(--npt-hover);
    border: 1.5px solid #e0e4ea;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--npt-text);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.track-chip.active { background: var(--npt-blue-tint-bg); color: #1677f2; border-color: #1677f2; }
.track-chip.disabled { opacity: 0.38; cursor: not-allowed; }

/* Tracking-type chips (compact — Circuit / AMRAP / Interval) */
.ex-track-chip {
    background: var(--npt-hover);
    border: 1.5px solid #e0e4ea;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--npt-text-3);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ex-track-chip.active { background: var(--npt-blue-tint-bg); color: #1677f2; border-color: #1677f2; }

/* Tracking-type chips (inline row — EMOM) */
.track-chip-sm {
    background: var(--npt-hover);
    border: 1.5px solid #e0e4ea;
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--npt-text-3);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.track-chip-sm.active { background: var(--npt-blue-tint-bg); color: #1677f2; border-color: #1677f2; }

/* Rest preset chips */
.rest-chip {
    background: var(--npt-hover);
    border: 1.5px solid #e0e4ea;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--npt-text);
    cursor: pointer;
}
.rest-chip.active { background: var(--npt-blue-tint-bg); color: #1677f2; border-color: #1677f2; }

/* ── Sets stack ── */
.sets-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border-radius: 14px;
    border: 1px solid #e8ecf1;
    overflow: hidden;
}
.sets-stack-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #e8ecf1;
}
.sets-stack-item:last-child { border-bottom: none; }

/* ── Weight / unit inputs ── */
.weight-row { display: flex; align-items: center; gap: 6px; }
.weight-field { width: 90px !important; }

.unit-btn {
    background: var(--npt-hover);
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--npt-text-3);
    cursor: pointer;
    height: 34px;
}
.unit-btn.active { background: var(--npt-blue-tint-bg); color: #1677f2; border-color: #1677f2; }

.unit-btn-sm {
    background: var(--npt-hover);
    border: 1.5px solid transparent;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--npt-text-3);
    cursor: pointer;
}
.unit-btn-sm.active { background: var(--npt-blue-tint-bg); color: #1677f2; border-color: #1677f2; }

/* ── Action pills (toggle-style buttons) ── */
.action-pill {
    background: var(--npt-hover);
    border: 1.5px solid transparent;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--npt-text);
    cursor: pointer;
}
.action-pill.active { background: var(--npt-blue-tint-bg); border-color: #1677f2; color: #1677f2; }

/* ── Exercise list ── */
.exercise-list { display: flex; flex-direction: column; gap: 8px; }

.ex-row {
    background: var(--npt-card);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ex-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
}

.ex-row-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Blue circle number badge */
.ex-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--npt-blue-tint-bg);
    color: #1677f2;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Outlined exercise name display */
.ex-name-box {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--npt-text);
    border: 1.5px solid #d0d5dd;
    border-radius: 10px;
    padding: 8px 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Horizontal tracking chip scroll within an ex-row */
.ex-chip-scroll {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ex-chip-scroll::-webkit-scrollbar { display: none; }

/* ── Reorder controls ── */
.reorder-col { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.reorder-btn {
    width: 22px;
    height: 20px;
    background: none;
    border: none;
    color: #c0c8d4;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.reorder-btn:disabled { opacity: 0.3; cursor: default; }

/* ── Remove button ── */
.remove-btn {
    background: none;
    border: none;
    color: #c0c8d4;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
}
.remove-btn:active { color: #e53935; }

/* ── Target fields ── */
.ex-target-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.target-field-wrap { display: flex; align-items: center; gap: 3px; }
.target-x { font-size: 13px; font-weight: 700; color: var(--npt-text-3); }
.target-unit { font-size: 12px; font-weight: 600; color: var(--npt-text-3); }

/* ── Confirm add button (inline picker) ── */
.add-ex-confirm-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: var(--npt-blue-tint-bg);
    border: 1.5px solid #1677f2;
    border-radius: 12px;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    color: #1677f2;
    cursor: pointer;
    text-align: center;
}
.add-ex-confirm-btn:active { background: #dbeafe; }

/* ── Coaching note toggle ── */
.notes-toggle {
    background: none;
    border: 1.5px dashed #d8dde5;
    border-radius: 12px;
    padding: 10px 16px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--npt-text-3);
    cursor: pointer;
    text-align: left;
}
.notes-toggle:active { border-color: #1677f2; color: #1677f2; }