/* ============================================================
   TLC Portal — progbook.css  (v3)
   ============================================================ */

/* ── Modal ── */
#progbook-modal .modal-box { max-width:960px!important;width:96vw;height:88vh;max-height:88vh;display:flex;flex-direction:column; }
#progbook-modal .modal-header { background:#38473E;border-bottom:none;padding:10px 16px;flex-shrink:0; }
#progbook-modal .modal-title  { color:#e8f0ea;font-size:14px; }
#progbook-modal .modal-close svg { stroke:#e8f0ea; }
#progbook-modal .modal-close:hover { background:rgba(255,255,255,0.12); }
#progbook-modal .modal-body   { padding:0!important;flex:1;overflow:hidden;max-height:none!important; }

/* ── Shell ── */
.pb-shell { display:flex;height:100%;overflow:hidden; }

/* ── Rail ── */
.pb-rail { width:60px;background:var(--color-background-secondary);border-right:0.5px solid var(--color-border-tertiary);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;flex-shrink:0; }
.pb-rail-btn { width:44px;padding:8px 0 5px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:var(--color-text-secondary);transition:background 0.12s; }
.pb-rail-btn:hover { background:#e8f0ea;color:#38473E; }
.pb-rail-btn.active { background:#38473E;color:#e8f0ea; }
.pb-rail-btn svg { width:18px;height:18px; }
.pb-rail-label { font-size:8px;font-weight:500;letter-spacing:0.02em; }

/* ── Main ── */
.pb-main { flex:1;overflow-y:auto;background:#f0f3f1; }
.pb-spinner { width:28px;height:28px;border:3px solid #e8f0ea;border-top-color:#38473E;border-radius:50%;animation:pbSpin 0.7s linear infinite;margin:40px auto; }
@keyframes pbSpin { to { transform:rotate(360deg); } }

/* ── Programs split layout ── */
.pb-split { display:flex;height:100%;overflow:hidden; }
.pb-split-main { flex:1;overflow-y:auto;padding:14px 16px; }
.pb-split-right { width:240px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;border-left:0.5px solid var(--color-border-tertiary);background:var(--color-background-primary);min-height:0; }

/* ── Right panel tabs ── */
.pb-right-tabs { display:flex;border-bottom:0.5px solid var(--color-border-tertiary);flex-shrink:0; }
.pb-right-tab { flex:1;padding:9px 6px;text-align:center;font-size:11px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;border-right:0.5px solid var(--color-border-tertiary);transition:background 0.1s; }
.pb-right-tab:last-child { border-right:none; }
.pb-right-tab:hover { background:var(--color-background-secondary); }
.pb-right-tab.active { color:#38473E;background:#f0f7f2;border-bottom:2.5px solid #38473E; }

/* ── Sticky selected target header ── */
.pb-sel-header { padding:9px 12px;background:#38473E;flex-shrink:0; }
.pb-sel-header.pb-sel-none { background:var(--color-background-secondary); }
.pb-sel-lbl { font-size:9px;font-weight:500;color:#c8d8cc;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px; }
.pb-sel-header.pb-sel-none .pb-sel-lbl { color:var(--color-text-secondary);margin-bottom:0; }
.pb-sel-name { font-size:12px;font-weight:500;color:#e8f0ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* ── Panel body (scrollable content area) ── */
#pb-right-content { display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden; }
.pb-panel-body { flex:1;overflow-y:auto;padding:8px 10px;min-height:0; }

/* ── Target bank quick-item ── */
.pb-bank-qi { border:0.5px solid var(--color-border-tertiary);border-radius:8px;padding:8px 10px;margin-bottom:6px;background:var(--color-background-secondary); }
.pb-bank-qi-name { font-size:12px;font-weight:500;color:var(--color-text-primary);margin-bottom:3px; }
.pb-bank-qi-pills { display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px; }
.pb-qi-add-btn { width:100%;padding:5px;font-size:10px;font-weight:500;border:none;border-radius:5px;background:#38473E;color:#e8f0ea;cursor:pointer; }
.pb-qi-add-btn:hover { background:#2e3a32; }

/* ── Variant picker ── */
.pb-variant-picker { border:0.5px solid #c8d8cc;border-radius:7px;background:#f5f9f6;padding:9px 10px;margin-top:6px; }
.pb-vp-lbl { font-size:9px;font-weight:500;color:#38473E;letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px; }
.pb-vp-opts { display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px; }
.pb-vp-opt { padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;border:0.5px solid var(--color-border-tertiary);background:var(--color-background-primary);color:var(--color-text-secondary);cursor:pointer;transition:background 0.1s; }
.pb-vp-opt.active { background:#38473E;color:#e8f0ea;border-color:#38473E; }
.pb-vp-preview { font-size:11px;color:#38473E;font-style:italic;margin-bottom:7px;min-height:16px; }
.pb-vp-confirm { width:100%;padding:6px;font-size:11px;font-weight:500;border:none;border-radius:5px;background:#38473E;color:#e8f0ea;cursor:pointer; }
.pb-vp-confirm:disabled { background:var(--color-background-secondary);color:var(--color-text-secondary);cursor:default; }

/* ── Procedure quick-item ── */
.pb-proc-qi { border:0.5px solid var(--color-border-tertiary);border-radius:8px;margin-bottom:6px;overflow:hidden; }
.pb-proc-qi.pb-proc-active { border-color:#38473E;background:#f5f9f6; }
.pb-proc-qi-head { display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:8px 10px; }
.pb-proc-qi-left { flex:1;min-width:0; }
.pb-proc-qi-name { font-size:12px;font-weight:500;color:var(--color-text-primary);margin-bottom:3px; }
.pb-proc-qi-pills { display:flex;flex-wrap:wrap;gap:3px; }
.pb-proc-apply-btn { padding:4px 10px;font-size:10px;font-weight:500;border:none;border-radius:5px;background:#38473E;color:#e8f0ea;cursor:pointer;flex-shrink:0;white-space:nowrap; }
.pb-proc-apply-btn.dim { background:var(--color-background-secondary);color:var(--color-text-secondary);border:0.5px solid var(--color-border-tertiary);cursor:default; }
.pb-proc-apply-btn:not(.dim):hover { background:#2e3a32; }
.pb-proc-expand-hint { font-size:9px;color:#38473E;padding:0 10px 7px;cursor:pointer;font-weight:500; }
.pb-proc-detail { padding:8px 10px;border-top:0.5px solid var(--color-border-tertiary);background:#f9fbf9; }
.pb-pd-lbl { font-size:9px;font-weight:500;color:#38473E;letter-spacing:.05em;text-transform:uppercase;margin:6px 0 3px; }
.pb-pd-lbl:first-child { margin-top:0; }
.pb-pd-val { font-size:11px;color:var(--color-text-primary);line-height:1.7;white-space:pre-wrap; }

/* ── Target cards ── */
.pb-tcard { background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:9px;margin-bottom:7px;overflow:hidden; }
.pb-tcard-selected { border-color:#38473E;box-shadow:0 0 0 2.5px rgba(56,71,62,0.15); }
.pb-tcard-head { display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:9px 11px;cursor:pointer; }
.pb-tcard-left { flex:1;min-width:0; }
.pb-head-del-btn { width:22px;height:22px;border-radius:5px;border:0.5px solid #F7C1C1;background:#FCEBEB;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;opacity:0.7;transition:opacity 0.1s; }
.pb-head-del-btn:hover { opacity:1;background:#F7C1C1; }
.pb-head-del-btn svg { stroke:#A32D2D; }
.pb-tcard-right { flex-shrink:0;display:flex;align-items:center;gap:5px;margin-top:1px; }
.pb-tcard-name { font-size:13px;font-weight:500;color:var(--color-text-primary);line-height:1.3;margin:2px 0; }
.pb-manual-badge { display:inline-block;font-size:8px;font-weight:500;padding:1px 5px;border-radius:3px;background:#faeeda;color:#633806;margin-right:4px;vertical-align:middle; }
.pb-expand-btn { width:18px;height:18px;border-radius:4px;border:0.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.pb-expand-btn.open svg { transform:rotate(180deg); }
.pb-dtype { display:inline-block;font-size:8px;font-weight:600;letter-spacing:.04em;padding:1px 6px;border-radius:3px;margin-bottom:2px; }
.pb-dtype-fluency  { background:#e6f1fb;color:#0C447C; }
.pb-dtype-task     { background:#EEEDFE;color:#3C3489; }
.pb-dtype-prompt   { background:#faeeda;color:#633806; }
.pb-dtype-duration { background:#E1F5EE;color:#085041; }
.pb-dtype-lesson   { background:#F1EFE8;color:#444441; }
.pb-st { font-size:9px;font-weight:500;padding:2px 7px;border-radius:10px;white-space:nowrap; }
.pb-st-run      { background:#e8f0ea;color:#2e3a32; }
.pb-st-intro    { background:#e6f1fb;color:#0C447C; }
.pb-st-mastered { background:#38473E;color:#e8f0ea; }
.pb-st-hold     { background:#faeeda;color:#633806; }

/* channel wrap */
.pb-cw-pills { display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:3px; }
.pb-cw-pill { font-size:9px;padding:1px 7px;border-radius:10px; }
.pb-cw-in  { background:#e6f1fb;color:#0C447C; }
.pb-cw-out { background:#EEEDFE;color:#3C3489; }
.pb-cw-arr { font-size:10px;color:var(--color-text-secondary); }
.pb-cw-missing { display:flex;align-items:center;gap:4px;font-size:10px;color:#A32D2D;margin-top:3px; }
.pb-cw-row { display:flex;align-items:center;gap:5px;margin-bottom:4px; }
.pb-cw-sel { font-size:11px;padding:5px 6px;border:0.5px solid var(--color-border-tertiary);border-radius:6px;background:var(--color-background-secondary);color:var(--color-text-primary);flex:1;min-width:0;cursor:pointer; }
.pb-cw-sel:focus { outline:none;border-color:#38473E;box-shadow:0 0 0 2px rgba(56,71,62,0.12); }
.pb-cw-sep { font-size:12px;color:var(--color-text-secondary);flex-shrink:0; }
.pb-cw-suggest { font-size:10px;color:#38473E;font-style:italic;min-height:16px; }
.pb-cw-val { display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:2px 0; }

/* card body */
.pb-tcard-body { padding:0 11px 10px;border-top:0.5px solid var(--color-border-tertiary); }
.pb-tcard-fields { display:flex;flex-direction:column;gap:6px;margin-top:8px; }
.pb-tfield { display:flex;flex-direction:column;gap:3px; }
.pb-tfield-full { width:100%; }
.pb-tfield-row { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.pb-tfield-label { font-size:9px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.04em;text-transform:uppercase; }
.pb-tfield-val { font-size:11px;color:var(--color-text-primary);line-height:1.4; }
.pb-req { color:#A32D2D; }

/* Active procedure row on card */
.pb-proc-active-row { display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px;border-radius:6px;background:#e8f0ea;border:0.5px solid #c8d8cc;margin-bottom:5px; }
.pb-proc-active-name { font-size:12px;font-weight:500;color:#2e3a32; }
.pb-proc-active-name.pb-proc-empty { color:var(--color-text-secondary);font-weight:400;font-style:italic; }
.pb-proc-active-badge { font-size:9px;font-weight:500;color:#38473E;background:#fff;border:0.5px solid #c8d8cc;padding:2px 7px;border-radius:10px;flex-shrink:0; }
.pb-change-proc-btn { display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;padding:4px 9px;border-radius:5px;border:0.5px solid #c8d8cc;background:var(--color-background-primary);color:#38473E;cursor:pointer; }
.pb-change-proc-btn:hover { background:#e8f0ea; }

.pb-inp { width:100%;font-size:11px;padding:5px 8px;border:0.5px solid var(--color-border-tertiary);border-radius:5px;background:var(--color-background-secondary);color:var(--color-text-primary);font-family:'DM Sans',sans-serif; }
.pb-inp:focus { outline:none;border-color:#38473E; }
.pb-textarea { resize:vertical;min-height:40px; }

/* card actions */
.pb-tcard-actions { display:flex;gap:5px;align-items:center;margin-top:8px;padding-top:7px;border-top:0.5px solid var(--color-border-tertiary); }
.pb-btn-hold { font-size:10px;padding:4px 9px;border-radius:5px;border:0.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);color:var(--color-text-secondary);cursor:pointer; }
.pb-btn-hold.active { background:#faeeda;border-color:#fac775;color:#633806; }
.pb-btn-del { font-size:10px;padding:4px 9px;border-radius:5px;border:0.5px solid #F7C1C1;background:#FCEBEB;color:#A32D2D;cursor:pointer; }
.pb-save-as-template-btn { font-size:10px;padding:4px 9px;border-radius:5px;border:0.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);color:var(--color-text-secondary);cursor:pointer; }
.pb-btn-save { margin-left:auto;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;padding:4px 10px;border-radius:5px;border:none;background:#38473E;color:#e8f0ea;cursor:pointer; }
.pb-btn-save:hover { background:#2e3a32; }
.pb-add-target-btn { display:flex;align-items:center;gap:5px;width:100%;padding:8px 10px;border-radius:7px;border:0.5px dashed var(--color-border-tertiary);background:var(--color-background-primary);color:var(--color-text-secondary);font-size:11px;cursor:pointer;justify-content:center;margin:4px 0 10px; }
.pb-add-target-btn:hover { background:#e8f0ea;color:#2e3a32;border-color:#c8d8cc; }

/* collapse rows */
.pb-collapse-row { display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:7px;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);cursor:pointer;margin-bottom:6px; }
.pb-collapse-row:hover { background:#e8f0ea; }
.pb-collapse-lbl { font-size:11px;font-weight:500;color:var(--color-text-secondary);display:flex;align-items:center;gap:6px; }
.pb-cnt { font-size:9px;padding:1px 6px;border-radius:10px;background:var(--color-background-secondary);color:var(--color-text-secondary); }

/* section labels */
.pb-sec-label { font-size:10px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.pb-sec-group { margin-bottom:14px; }
.pb-sec-title { font-size:9px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;padding-bottom:4px;border-bottom:0.5px solid var(--color-border-tertiary); }

/* ── Bank tab — manage mode ── */
.pb-full-view { padding:14px 18px; }
.pb-bank-subtabs { display:flex;gap:2px;background:var(--color-background-secondary);border-radius:8px;padding:3px;margin-bottom:14px;width:fit-content; }
.pb-bank-subtab { padding:6px 16px;font-size:11px;font-weight:500;border-radius:6px;cursor:pointer;color:var(--color-text-secondary);transition:background 0.1s; }
.pb-bank-subtab.active { background:var(--color-background-primary);color:#38473E;border:0.5px solid var(--color-border-tertiary); }
.pb-full-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.pb-add-btn { display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:6px 12px;border-radius:6px;border:none;background:#38473E;color:#e8f0ea;cursor:pointer; }
.pb-add-btn:hover { background:#2e3a32; }

/* bank cards (manage mode) */
.pb-bank-card { background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:10px;margin-bottom:10px;overflow:hidden; }
.pb-bank-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 12px; }
.pb-bank-card-left { flex:1;min-width:0; }
.pb-bank-card-actions { display:flex;gap:5px;flex-shrink:0; }
.pb-bcard-name { font-size:15px;font-weight:500;color:var(--color-text-primary);margin-bottom:6px; }
.pb-bcard-badges { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px; }
.pb-bcard-summary { font-size:12px;color:var(--color-text-secondary);line-height:1.5; }

/* badges */
.pb-badge { font-size:10px;padding:3px 9px;border-radius:20px;font-weight:500; }
.pb-badge-cat  { background:#e8f0ea;color:#2e3a32; }
.pb-badge-proc { background:#e6f1fb;color:#0C447C; }
.pb-badge-meas { background:#EEEDFE;color:#3C3489; }
.pb-badge-cw   { background:#e6f1fb;color:#0C447C; }
.pb-badge-var  { background:#faeeda;color:#633806; }
.pb-badge-active { background:#38473E;color:#e8f0ea; }

.pb-icon-btn { width:28px;height:28px;border-radius:6px;border:0.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-secondary); }
.pb-icon-btn:hover { background:#e8f0ea; }
.pb-icon-del { color:#A32D2D;border-color:#F7C1C1;background:#FCEBEB; }
.pb-icon-del:hover { background:#F7C1C1; }

/* procedure tab-switcher cards */
.pb-bcard { background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:10px;margin-bottom:10px;overflow:hidden; }
.pb-bcard-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 12px; }
.pb-bcard-left { flex:1;min-width:0; }
.pb-bcard-tabs { display:flex;border-top:0.5px solid var(--color-border-tertiary); }
.pb-bcard-tab { flex:1;padding:9px 10px;text-align:center;font-size:11px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;border-right:0.5px solid var(--color-border-tertiary);transition:background 0.12s; }
.pb-bcard-tab:last-child { border-right:none; }
.pb-bcard-tab:hover { background:var(--color-background-secondary); }
.pb-bcard-tab.active { color:#38473E;background:#d8ece0;border-bottom:2px solid #38473E; }
.pb-bcard-body { padding:14px 16px;border-top:0.5px solid var(--color-border-tertiary);background:#f9fbf9; }
.pb-bcard-blbl { font-size:10px;font-weight:500;color:#38473E;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px; }
.pb-bcard-bval { font-size:13px;color:var(--color-text-primary);line-height:1.8;white-space:pre-wrap;word-break:break-word; }

/* protocol cards */
.pb-proto-card { background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-left:3px solid #38473E;border-radius:9px;padding:10px 14px;margin-bottom:8px; }
.pb-proto-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px; }
.pb-proto-title { font-size:13px;font-weight:500;color:var(--color-text-primary); }
.pb-proto-type { display:inline-block;font-size:9px;padding:2px 7px;border-radius:10px;background:#e8f0ea;color:#2e3a32;margin-top:3px;font-weight:500; }
.pb-proto-desc { font-size:11px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:6px; }
.pb-proto-field { display:flex;flex-direction:column;gap:2px;margin-top:5px; }
.pb-bank-flbl { font-size:9px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.04em;text-transform:uppercase; }
.pb-bank-fval { font-size:11px;color:var(--color-text-primary);line-height:1.5;white-space:pre-wrap; }

/* learner info */
.pb-info-wrap { padding:16px 18px;max-width:680px; }
.pb-info-field { margin-bottom:14px; }
.pb-info-ta { width:100%;font-size:12px;padding:7px 10px;border:0.5px solid var(--color-border-tertiary);border-radius:7px;background:var(--color-background-primary);color:var(--color-text-primary);resize:vertical;font-family:'DM Sans',sans-serif;line-height:1.5; }
.pb-info-ta:focus { outline:none;border-color:#38473E; }

/* dialog */
.pb-dlg-field { margin-bottom:11px; }
.pb-dlg-lbl { display:block;font-size:10px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px; }
.pb-dlg-inp,.pb-dlg-sel,.pb-dlg-ta { width:100%;font-size:12px;padding:6px 9px;border:0.5px solid var(--color-border-tertiary);border-radius:6px;background:var(--color-background-secondary);color:var(--color-text-primary);font-family:'DM Sans',sans-serif; }
.pb-dlg-inp:focus,.pb-dlg-sel:focus,.pb-dlg-ta:focus { outline:none;border-color:#38473E; }
.pb-dlg-ta { resize:vertical;min-height:60px;line-height:1.5; }
.pb-req-note { font-size:10px;color:var(--color-text-secondary);font-style:italic;margin-top:4px; }

/* search */
.pb-bank-search { width:100%;font-size:11px;padding:5px 8px;border:0.5px solid var(--color-border-tertiary);border-radius:5px;background:var(--color-background-secondary);color:var(--color-text-primary);margin-bottom:7px; }
.pb-bank-search:focus { outline:none;border-color:#38473E; }

/* empty */
.pb-empty { text-align:center;padding:28px 20px;font-size:12px;color:var(--color-text-secondary);line-height:1.7; }