/* ============================================================
   Action Personal Fitness — Client Portal shared styles
   Uses the color/font variables already defined in style.css
   (--red, --red-dark, --black, --white, --offwhite, --gray,
   --light-gray, --dark, --serif, --sans). Every portal-*.html
   page should link style.css BEFORE this file.
   ============================================================ */

.pc-body{background:var(--offwhite);min-height:100vh}

.pc-wordmark{display:flex;align-items:baseline;gap:8px}
.pc-wordmark .pc-tri{width:15px;height:15px;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%);display:inline-block}
.pc-wordmark span{font-family:var(--serif);font-weight:700;font-size:1.02rem}
.pc-wordmark-link{text-decoration:none;color:inherit;display:inline-block;transition:opacity .15s}
.pc-wordmark-link:hover{opacity:0.72}

.pc-eyebrow{font-size:0.68rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--red)}

.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:7px;padding:13px 22px;font-size:0.82rem;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;cursor:pointer;transition:background .15s,opacity .15s;font-family:var(--sans)}
.pc-btn-primary{background:var(--red);color:#fff}
.pc-btn-primary:hover{background:var(--red-dark)}
.pc-btn-primary:disabled{opacity:0.6;cursor:default}
.pc-btn-ghost{background:transparent;color:var(--black);border:1px solid var(--light-gray)}
.pc-btn-ghost:hover{border-color:var(--gray)}
.pc-btn-sm{padding:9px 16px;font-size:0.72rem}

.pc-field{margin-bottom:16px}
.pc-field label{display:block;font-size:0.72rem;font-weight:600;color:var(--gray);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em}
.pc-field input,.pc-field textarea,.pc-field select{width:100%;padding:12px 14px;border:1px solid var(--light-gray);border-radius:7px;font-size:0.94rem;font-family:var(--sans);background:#fff;color:var(--black)}
.pc-field input:focus,.pc-field textarea:focus,.pc-field select:focus{outline:2px solid var(--red);outline-offset:1px}
.pc-field textarea{resize:vertical;min-height:80px;line-height:1.5}
.pc-field-row-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pc-field-row-between label{margin-bottom:0}

.pc-error{color:var(--red-dark);font-size:0.84rem;margin:-6px 0 14px;display:none}
.pc-error.show{display:block}
.pc-success{color:#2f7d5c;font-size:0.84rem;margin:-6px 0 14px;display:none}
.pc-success.show{display:block}

/* login */
.pc-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 18px}
.pc-login-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--light-gray);border-radius:14px;padding:40px 34px;box-shadow:0 18px 50px rgba(17,17,17,0.08)}
.pc-login-card .pc-wordmark{justify-content:center;margin-bottom:22px}
.pc-login-card h1{font-family:var(--serif);font-size:1.6rem;text-align:center;margin:0 0 6px}
.pc-login-sub{color:var(--gray);font-size:0.88rem;text-align:center;line-height:1.5;margin-bottom:28px}
.pc-login-card .pc-btn-primary{width:100%;margin-top:6px;padding:14px}
.pc-login-foot{text-align:center;margin-top:24px;font-size:0.82rem;color:var(--gray)}
.pc-login-foot a,.pc-forgot{color:var(--red);text-decoration:none;font-weight:600}
.pc-forgot{font-size:0.72rem}

/* app shell */
.pc-header{background:#fff;border-bottom:1px solid var(--light-gray);position:sticky;top:0;z-index:20}
.pc-header-inner{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.pc-header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.pc-avatar{width:34px;height:34px;border-radius:50%;background:#f6dcde;color:var(--red-dark);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:0.9rem;flex-shrink:0}
.pc-signout{font-size:0.78rem;color:var(--gray);text-decoration:none;font-weight:600;cursor:pointer;background:none;border:none;font-family:var(--sans)}

/* client subnav — explicitly reset against style.css's bare `nav{position:fixed;...}` rule,
   which otherwise pins this subnav over the header and hides the logo/back-to-site link */
.pc-subnav{position:static;top:auto;left:auto;right:auto;z-index:auto;background:none;backdrop-filter:none;box-shadow:none;border-bottom:none;display:flex;gap:2px;max-width:1080px;margin:0 auto;padding:0 24px;overflow-x:auto}
.pc-subnav-link{padding:11px 14px;font-size:0.8rem;font-weight:600;color:var(--gray);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.pc-subnav-link:hover{color:var(--black)}
.pc-subnav-link.active{color:var(--red);border-bottom-color:var(--red)}
@media(max-width:460px){.pc-subnav{padding:0 16px}.pc-subnav-link{padding:10px 10px;font-size:0.76rem}}

/* goal progress */
.pc-goal-nums{display:flex;justify-content:space-between;align-items:baseline;font-size:0.78rem;color:var(--gray);margin-bottom:9px}
.pc-goal-nums b{color:var(--black);font-size:1.15rem;font-family:var(--serif);font-weight:700}
.pc-progress-track{height:10px;background:var(--light-gray);border-radius:6px;overflow:hidden;position:relative;margin-bottom:8px}
.pc-progress-fill{height:100%;background:var(--red);border-radius:6px;transition:width .5s ease}
.pc-goal-achieved{background:#eafaf1;border:1px solid #bfe8cf;color:#1e7a4c;padding:13px 16px;border-radius:9px;font-size:0.86rem;font-weight:600;margin-bottom:16px}
.pc-goal-remaining{font-size:0.82rem;color:var(--gray);margin-top:2px}
.pc-goal-remaining b{color:var(--black)}

/* progress photos */
.pc-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.pc-photo-thumb{position:relative;aspect-ratio:3/4;border-radius:9px;overflow:hidden;background:var(--light-gray);cursor:pointer;border:1px solid var(--light-gray);display:block}
.pc-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pc-photo-date{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.68));color:#fff;font-size:0.66rem;padding:18px 8px 7px;font-weight:600}
.pc-lightbox{position:fixed;inset:0;background:rgba(10,10,10,0.94);display:none;align-items:center;justify-content:center;z-index:200;flex-direction:column;padding:30px}
.pc-lightbox.open{display:flex}
.pc-lightbox img{max-width:90vw;max-height:78vh;border-radius:8px;object-fit:contain}
.pc-lightbox-cap{color:#fff;margin-top:16px;font-size:0.88rem;text-align:center;max-width:600px}
.pc-lightbox-close{position:absolute;top:18px;right:22px;color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;line-height:1;padding:6px}
.pc-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.12);border:none;color:#fff;font-size:1.6rem;width:44px;height:44px;border-radius:50%;cursor:pointer}
.pc-lightbox-nav.prev{left:16px}.pc-lightbox-nav.next{right:16px}
.pc-photo-del{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.62);color:#fff;border:none;border-radius:5px;padding:4px 8px;font-size:0.68rem;cursor:pointer;z-index:2}

/* homework paste */
.pc-paste-box{width:100%;min-height:90px;border:1.5px dashed var(--light-gray);border-radius:9px;padding:14px;font-family:var(--sans);font-size:0.85rem;color:var(--black);margin-bottom:4px;resize:vertical;background:var(--offwhite)}
.pc-paste-box:focus{outline:2px solid var(--red);outline-offset:1px;border-style:solid;background:#fff}
.pc-paste-hint{font-size:0.78rem;color:var(--gray);margin:0 0 16px}

/* monthly report control */
.pc-report-month{padding:9px 10px;border:1px solid var(--light-gray);border-radius:7px;font-size:0.82rem;font-family:var(--sans);background:#fff;color:var(--black)}
@media(max-width:600px){.pc-greet{flex-direction:column;align-items:flex-start}}

.pc-main{max-width:1080px;margin:0 auto;padding:36px 24px 64px}
.pc-greet{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.pc-greet h1{font-family:var(--serif);font-size:1.9rem;margin:0}
.pc-greet .pc-meta{color:var(--gray);font-size:0.9rem;margin-top:6px}
.pc-greet .pc-meta b{color:var(--black);font-weight:600}

.pc-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--light-gray);border:1px solid var(--light-gray);border-radius:12px;overflow:hidden;margin-bottom:24px}
.pc-stat{background:#fff;padding:20px 22px}
.pc-stat-label{font-size:0.68rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.pc-stat-value{font-family:var(--serif);font-size:1.8rem;font-weight:700;line-height:1}
.pc-stat-delta{margin-top:8px;font-size:0.78rem;font-weight:600}
.pc-stat-delta.good{color:#2f7d5c}
.pc-stat-delta.flat{color:var(--gray)}

.pc-grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
.pc-grid-2-even{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:20px}
.pc-card{background:#fff;border:1px solid var(--light-gray);border-radius:12px;padding:26px 26px 22px;margin-bottom:20px}
.pc-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.pc-card-head h2{font-family:var(--serif);font-size:1.15rem;margin:0}
.pc-card-sub{color:var(--gray);font-size:0.82rem;margin-bottom:18px}

.pc-note{background:var(--offwhite);border:1px solid var(--light-gray);border-radius:9px;padding:14px 16px;font-size:0.86rem;line-height:1.6;color:var(--gray)}
.pc-note b{color:var(--black)}

.pc-hist-table{width:100%;border-collapse:collapse;font-size:0.86rem}
.pc-hist-table th{text-align:left;font-size:0.66rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray);padding:9px 10px;border-bottom:2px solid var(--light-gray);white-space:nowrap}
.pc-hist-table td{padding:10px;border-bottom:1px solid var(--light-gray);white-space:nowrap}
.pc-hist-table tr:last-child td{border-bottom:none}
.pc-table-wrap{overflow-x:auto}

.pc-hw-list{list-style:decimal;margin:0;padding-left:22px;display:flex;flex-direction:column;gap:16px}
.pc-hw-ex-name{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--black)}
.pc-hw-ex-meta{display:inline-block;margin-left:8px;font-size:0.72rem;font-weight:700;color:var(--red-dark);background:#f6dcde;border-radius:20px;padding:2px 10px;vertical-align:middle}
.pc-hw-ex-note{color:var(--gray);font-size:0.86rem;margin-top:3px}

.pc-chart-wrap{position:relative}
.pc-chart-tip{position:absolute;pointer-events:none;background:var(--dark);color:#fff;font-size:0.72rem;padding:7px 10px;border-radius:6px;transform:translate(-50%,-115%);white-space:nowrap;opacity:0;transition:opacity .1s;z-index:5}
.pc-chart-tip b{font-variant-numeric:tabular-nums}
.pc-axis-label{font-size:10px;fill:var(--gray);font-family:var(--sans)}
.pc-grid-line{stroke:#eae7e1;stroke-width:1}
.pc-hover-line{stroke:var(--gray);stroke-width:1;stroke-dasharray:3 3;opacity:0}

.pc-empty{color:var(--gray);font-size:0.9rem;line-height:1.6;padding:8px 0}

/* trainer-specific */
.pc-client-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--light-gray);border-radius:10px;overflow:hidden}
.pc-client-list li{background:#fff}
.pc-client-list button{width:100%;text-align:left;background:none;border:none;padding:14px 18px;font-size:0.92rem;font-family:var(--sans);cursor:pointer;display:block;border-bottom:1px solid var(--light-gray)}
.pc-client-list li:last-child button{border-bottom:none}
.pc-client-list button:hover{background:var(--offwhite)}
.pc-client-list button.active{background:#f6dcde;font-weight:600}
.pc-client-list .pc-client-email{display:block;font-size:0.74rem;color:var(--gray);font-weight:400;margin-top:2px}

.pc-hw-row{display:grid;grid-template-columns:1.3fr 0.7fr 1.5fr auto;gap:10px;align-items:start;margin-bottom:10px}
.pc-hw-row input{width:100%}
.pc-remove-row{background:none;border:1px solid var(--light-gray);border-radius:7px;color:var(--gray);cursor:pointer;padding:0 12px;height:46px;font-size:0.8rem}
.pc-remove-row:hover{border-color:var(--red);color:var(--red)}
.pc-add-row{background:none;border:1px dashed var(--light-gray);border-radius:7px;color:var(--gray);cursor:pointer;padding:10px 16px;font-size:0.8rem;width:100%;margin-top:4px}
.pc-add-row:hover{border-color:var(--red);color:var(--red)}

.pc-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pc-form-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

.pc-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--light-gray)}
.pc-tabs button{background:none;border:none;padding:10px 4px;margin-right:22px;font-size:0.82rem;font-weight:600;color:var(--gray);cursor:pointer;font-family:var(--sans);border-bottom:2px solid transparent;margin-bottom:-1px}
.pc-tabs button.active{color:var(--red);border-bottom-color:var(--red)}

@media(max-width:760px){
  .pc-grid-2,.pc-grid-2-even{grid-template-columns:1fr}
  .pc-stat-row{grid-template-columns:1fr 1fr}
  .pc-form-2col,.pc-form-3col{grid-template-columns:1fr}
  .pc-hw-row{grid-template-columns:1fr}
}
@media(max-width:460px){
  .pc-stat-row{grid-template-columns:1fr 1fr}
  .pc-main{padding:24px 16px 48px}
  .pc-login-card{padding:32px 22px}
}