/* ══════════════════════════════════════
   TRAINER CSS — Repchitect Platform
══════════════════════════════════════ */

/* ── PIN SCREEN ── */
.pin-screen {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
}
.pin-box {
  display:flex; flex-direction:column; align-items:center;
  gap:0.75rem; padding:2rem 1.5rem; width:100%; max-width:320px;
}
.pin-logo  { font-weight:700; font-size:1.6rem; letter-spacing:0.08em; color:var(--green); }
.pin-sub   { font-size:0.80rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.14em; }
.pin-label { font-size:0.74rem; color:var(--text-muted); margin-top:0.5rem; letter-spacing:0.06em; }
.pin-input {
  width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:1.4rem; font-weight:700; padding:0.65rem 0.85rem;
  text-align:center; letter-spacing:0.3em; transition:border-color 0.15s;
}
.pin-input:focus { outline:none; border-color:var(--green-border); }
.pin-error { font-size:0.74rem; color:var(--red); min-height:1rem; }
.pin-btn {
  width:100%; background:var(--green); border:none; border-radius:var(--radius-sm); color:var(--bg);
  font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.75rem; transition:opacity 0.15s;
}
.pin-btn:hover { opacity:0.85; }

/* ── CLIENT LIST ── */
.client-list { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.1rem; }
.client-row {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:0.8rem 0.9rem; display:flex; align-items:center; gap:0.8rem; cursor:pointer; transition:all 0.15s;
}
.client-row:hover { background:var(--surface2); border-color:var(--border-strong); }
.client-avatar {
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:var(--green-dim); border:1px solid var(--green-border);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:0.80rem; color:var(--green); flex-shrink:0; letter-spacing:0.04em;
}
.client-info { flex:1; min-width:0; }
.client-name { font-size:0.8rem; font-weight:700; letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-meta { font-size:0.80rem; color:var(--text-dim); margin-top:0.2rem; letter-spacing:0.04em; }
.client-status { display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; }
.completion-pill { font-size:0.80rem; color:var(--text-dim); font-weight:700; }

.add-client-btn {
  width:100%; background:none; border:1px dashed var(--green-border);
  border-radius:var(--radius-md); color:var(--green); font-size:0.75rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; padding:0.8rem; transition:all 0.15s;
}
.add-client-btn:hover { background:var(--green-dim); }

/* ── REVIEW CARDS ── */
.review-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:0.6rem; overflow:hidden; }
.review-header { display:flex; align-items:center; justify-content:space-between; padding:0.85rem 0.9rem; cursor:pointer; transition:background 0.15s; user-select:none; }
.review-header:hover { background:var(--surface2); }
.review-client-name { font-size:0.82rem; font-weight:700; letter-spacing:0.02em; }
.review-meta        { font-size:0.80rem; color:var(--text-dim); margin-top:0.15rem; letter-spacing:0.04em; }
.review-right       { display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; }
.review-status-text { font-size:0.70rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.review-body        { display:none; border-top:1px solid var(--border); padding:0.9rem; }
.review-body.show   { display:block; }

.logged-exercise { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.7rem 0.85rem; margin-bottom:0.5rem; }
.log-ex-name  { font-size:0.75rem; font-weight:700; letter-spacing:0.03em; margin-bottom:0.4rem; }
.log-sets-row { display:flex; gap:0.4rem; flex-wrap:wrap; }
.log-set-pill { background:var(--surface3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.2rem 0.5rem; font-size:0.80rem; color:var(--text-muted); }
.log-set-pill span { color:var(--green); font-weight:700; }

.feedback-area {
  background:var(--surface3); border:1px solid var(--border); border-radius:var(--radius-sm);
  width:100%; color:var(--text); font-size:0.80rem; padding:0.6rem 0.8rem;
  resize:vertical; min-height:70px; line-height:1.6; margin-top:0.5rem; transition:border-color 0.15s;
}
.feedback-area:focus      { outline:none; border-color:var(--green-border); }
.feedback-area::placeholder { color:var(--text-dim); }
.existing-feedback { background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.6rem 0.8rem; font-size:0.78rem; color:var(--text-muted); line-height:1.7; margin-bottom:0.5rem; }
.feedback-label { font-size:0.70rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--green); margin-bottom:0.3rem; }
.send-btn { background:var(--green); border:none; border-radius:var(--radius-sm); color:var(--bg); font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.55rem 1rem; margin-top:0.5rem; transition:opacity 0.15s; }
.send-btn:hover { opacity:0.85; }

/* ── BUILDER ── */
.routine-block { position:relative; }
.routine-header-row { display:flex; align-items:center; gap:0.75rem; }
.routine-delete-btn {
  background:none; border:1px solid rgba(255,68,68,0.25); border-radius:var(--radius-sm);
  color:var(--red); font-size:0.70rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.2rem 0.55rem; flex-shrink:0; transition:all 0.15s;
}
.routine-delete-btn:hover { background:var(--red-dim); }
.add-routine-btn {
  width:100%; background:none; border:1px dashed var(--green-border); border-radius:var(--radius-md);
  color:var(--green); font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.8rem; transition:all 0.15s;
}
.add-routine-btn:hover { background:var(--green-dim); }
.routine-empty-state {
  font-size:0.75rem; color:var(--text-dim); letter-spacing:0.04em; text-align:center;
  padding:1rem 0.5rem; border:1px dashed var(--border); border-radius:var(--radius-sm); margin-bottom:0.6rem; line-height:1.6;
}
.add-ex-to-routine-btn {
  width:100%; background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:0.74rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  padding:0.55rem; margin-top:0.5rem; transition:all 0.15s;
}
.add-ex-to-routine-btn:hover { border-color:var(--green-border); color:var(--green); background:var(--green-dim); }

.ex-builder-row { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.65rem 0.8rem; margin-bottom:0.4rem; position:relative; }
.ex-builder-name { font-size:0.75rem; font-weight:700; letter-spacing:0.02em; }
.ex-builder-spec { font-size:0.80rem; color:var(--text-dim); margin-top:0.12rem; }
.ex-builder-remove { background:none; border:none; color:var(--text-dim); font-size:0.78rem; padding:0.15rem 0.35rem; border-radius:var(--radius-sm); font-weight:700; transition:all 0.15s; flex-shrink:0; }
.ex-builder-remove:hover { color:var(--red); background:var(--red-dim); }

.ex-inline-row   { display:grid; grid-template-columns:repeat(4, 1fr); gap:0.4rem; margin-top:0.5rem; }
.ex-inline-group { display:flex; flex-direction:column; gap:0.2rem; }
.ex-inline-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); }
.ex-inline-input {
  background:var(--surface3); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:0.78rem; font-weight:700; padding:0.3rem 0.4rem; text-align:center;
  width:100%; transition:border-color 0.15s;
}
.ex-inline-input:focus { outline:none; border-color:var(--green-border); }

/* ── EXERCISE PICKER MODAL ── */
.picker-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:500;
  display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.picker-overlay.open { opacity:1; pointer-events:all; }
.picker-modal {
  background:var(--surface); border:1px solid var(--green-border); border-bottom:none;
  border-radius:var(--radius-md) var(--radius-md) 0 0; width:100%; max-height:82vh;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform 0.25s cubic-bezier(0.32,0.72,0,1);
}
.picker-overlay.open .picker-modal { transform:translateY(0); }
.picker-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem 0.75rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.picker-title  { font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--green); }
.picker-close  { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.78rem; font-weight:700; width:28px; height:28px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.picker-close:hover { border-color:var(--border-strong); color:var(--text); }
.picker-search-row { padding:0.75rem 1.1rem 0.5rem; flex-shrink:0; }
.picker-search { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:0.75rem; padding:0.55rem 0.8rem; transition:border-color 0.15s; }
.picker-search:focus { outline:none; border-color:var(--green-border); }
.picker-search::placeholder { color:var(--text-dim); }
.picker-filters { display:flex; gap:0.3rem; padding:0 1.1rem 0.6rem; overflow-x:auto; flex-shrink:0; scrollbar-width:none; }
.picker-filters::-webkit-scrollbar { display:none; }
.picker-filter-chip { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.80rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.25rem 0.6rem; white-space:nowrap; flex-shrink:0; transition:all 0.15s; }
.picker-filter-chip.active { background:var(--green-dim); border-color:var(--green-border); color:var(--green); }
.picker-filter-chip:hover:not(.active) { border-color:var(--border-strong); color:var(--text); }
.picker-results { overflow-y:auto; flex:1; padding:0 1.1rem 1.5rem; -webkit-overflow-scrolling:touch; }
.picker-empty   { text-align:center; padding:2rem 1rem; font-size:0.68rem; color:var(--text-dim); }
.picker-ex-row  { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid var(--border); transition:opacity 0.15s; }
.picker-ex-row:last-child { border-bottom:none; }
.picker-ex-row.added { opacity:0.45; }
.picker-ex-info { flex:1; min-width:0; }
.picker-ex-name { font-size:0.8rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-ex-meta { display:flex; align-items:center; gap:0.35rem; margin-top:0.2rem; flex-wrap:wrap; }
.picker-ex-muscle { font-size:0.80rem; font-weight:700; color:var(--blue); text-transform:uppercase; }
.picker-ex-dot   { font-size:0.70rem; color:var(--text-dim); }
.picker-ex-equip { font-size:0.80rem; color:var(--gold); }
.picker-add-btn { background:var(--green); border:none; border-radius:var(--radius-sm); color:var(--bg); font-size:0.78rem; font-weight:700; width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity 0.15s; }
.picker-add-btn:hover:not(:disabled) { opacity:0.8; }
.picker-added-btn { background:var(--surface3); color:var(--green); border:1px solid var(--green-border); }

/* ── LOADING SCREEN ── */
.loading-screen, .error-screen {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center; z-index:900;
}
.loading-inner, .error-inner { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2rem; }
.loading-logo, .error-logo  { font-weight:700; font-size:1.4rem; letter-spacing:0.08em; color:var(--green); }
.loading-dots { display:flex; gap:0.4rem; }
.loading-dots span { width:6px; height:6px; border-radius:50%; background:var(--green); opacity:0.3; animation:pulse 1.2s infinite; }
.loading-dots span:nth-child(2) { animation-delay:0.2s; }
.loading-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes pulse { 0%,80%,100%{opacity:0.3} 40%{opacity:1} }
.error-code { font-weight:700; font-size:2rem; color:var(--text-dim); }
.error-msg  { font-size:0.80rem; color:var(--text-muted); text-align:center; line-height:1.8; }
.error-link { font-size:0.75rem; color:var(--green); border:1px solid var(--green-border); padding:0.3rem 0.75rem; border-radius:var(--radius-sm); transition:background 0.15s; }
.error-link:hover { background:var(--green-dim); }

/* ── SHARE SCREEN ── */
.share-screen { text-align:center; padding:1rem 0 2rem; animation:fadeIn 0.3s ease; }
.share-check { font-size:2.5rem; color:var(--green); margin-bottom:0.75rem; }
.share-title { font-size:1.1rem; font-weight:700; letter-spacing:0.04em; }
.share-subtitle { font-size:0.68rem; color:var(--text-muted); margin-top:0.3rem; margin-bottom:1.25rem; }
.share-link-card { background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.85rem; text-align:left; margin-bottom:1rem; }
.share-actions { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.25rem; }
.share-action-btn {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.7rem; text-decoration:none; transition:all 0.15s;
}
.share-action-btn:hover { border-color:var(--green-border); color:var(--green); }
.share-qr-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; display:inline-flex; flex-direction:column; align-items:center; gap:0.5rem; }
.share-qr-label { font-size:0.70rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:0.12em; }
.share-qr-hint { font-size:0.70rem; color:var(--text-dim); }
#shareQR { border-radius:var(--radius-sm); }

/* ── LAST SEEN + SEARCH (client list) ── */
.client-last-seen { font-size:0.70rem; color:var(--text-dim); margin-top:0.1rem; }
.client-last-seen.stale { color:var(--gold); }
.client-last-seen.cold { color:var(--red); }

/* ══════════════════════════════════════
   LOGIN SCREEN (Build B1)
══════════════════════════════════════ */
.login-field { width:100%; margin-bottom:0.85rem; text-align:left; }
.login-label {
  display:block; font-size:0.72rem; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.35rem;
}
.login-input {
  width:100%; background:var(--surface2); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); color:var(--text); font-family:var(--font-family);
  font-size:0.95rem; padding:0.75rem 0.9rem; min-height:48px; transition:border-color 0.15s;
}
.login-input:focus { outline:none; border-color:var(--green); }
.login-input::placeholder { color:var(--text-dim); }
.login-reset-btn {
  background:none; border:none; color:var(--text-dim); font-family:var(--font-family);
  font-size:0.8rem; margin-top:0.85rem; cursor:pointer; text-decoration:underline;
  min-height:44px;
}
.login-reset-btn:hover { color:var(--green); }
.frozen-msg {
  font-size:0.9rem; color:var(--text-muted); line-height:1.7; margin:1rem 0 1.5rem;
  text-align:center;
}

/* Mark as Reviewed button (v48) — secondary action next to Send */
.mark-reviewed-btn {
  display:block; width:100%; background:transparent; border:1px solid var(--border-strong, var(--border));
  border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.72rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; padding:0.55rem 1rem; margin-top:0.5rem;
  cursor:pointer; transition:border-color 0.15s, color 0.15s;
}
.mark-reviewed-btn:hover { border-color:var(--accent); color:var(--text); }
.mark-reviewed-btn:disabled { opacity:0.5; cursor:default; }