/* PERMIT CENTER (js/56-permit-center.js) — a folder library that reads like Master Templates:
   full-width stacked, collapsible cards; then the Acrobat-lite PDF fill/sign editor. */
.pc-list{ display:flex; flex-direction:column; gap:14px }
/* the SAME solid panel the Templates cards use (.card: #1e242b + border-2 + shadow), so the folder
   cards read identically and the page background never bleeds through them (Ryan: visual consistency) */
.pc-card{ background:#1e242b; border:1px solid var(--border-2); border-radius:var(--r); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.22); transition:box-shadow .3s var(--ease) }
.pc-card:hover{ box-shadow:0 2px 4px rgba(0,0,0,.26),0 10px 26px rgba(0,0,0,.18) }
.pc-empty-card{ padding:22px 22px; color:var(--text3); font-size:13.5px; line-height:1.7 }
.pc-empty-card b{ color:var(--text2) }
.pc-card-head{ display:flex; align-items:center; gap:12px; padding:18px 20px; cursor:pointer; user-select:none }
.pc-card-head:hover{ background:rgba(255,255,255,.02) }
.pc-chev{ width:16px; height:16px; color:var(--text3); transition:transform .15s; flex-shrink:0 }
.pc-chev.open{ transform:rotate(90deg) }
.pc-fico{ color:var(--brand,#2f9aa6); display:flex; flex-shrink:0 } .pc-fico .ic{ width:19px; height:19px }
.pc-card-title{ flex:1; min-width:0 }
/* match the Templates card title exactly: the app's default sans, .fw = font-weight:600 at 14px
   (NOT the Fraunces serif) — Ryan wants the two pages to read identically */
.pc-fname{ font-size:14px; font-weight:600; color:var(--text); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pc-fsub{ font-size:12px; color:var(--text3); margin-top:2px }
.pc-card-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0 }
.pc-card-actions .pc-upload{ cursor:pointer }
.pc-card-actions .pc-del:hover{ color:var(--red); border-color:rgba(224,86,111,.45) }
.pc-card-body{ border-top:1px solid var(--border) }
.pc-card-body.pc-hidden{ display:none }
.pc-file{ display:flex; align-items:center; gap:11px; padding:11px 18px; border-bottom:1px solid var(--border) }
.pc-file:last-child{ border-bottom:none }
.pc-file-ico{ color:var(--text3); display:flex } .pc-file-ico .ic{ width:18px; height:18px }
.pc-file-thumb{ width:40px; height:52px; flex-shrink:0; border-radius:6px; overflow:hidden; border:1px solid var(--border); background:#0d0f13; display:flex; align-items:center; justify-content:center }
.pc-file-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block }
.pc-file-thumb .dt-doc-ext{ font-size:12px }
.pc-file-name{ flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pc-file-sz{ font-size:11px; color:var(--text3); font-variant-numeric:tabular-nums; white-space:nowrap }
.pc-fx{ width:30px; height:30px; border:1px solid transparent; border-radius:8px; background:none; color:var(--text3); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.pc-fx:hover{ color:var(--red); border-color:rgba(224,86,111,.4); background:rgba(224,86,111,.08) }
.pc-fx .ic{ width:15px; height:15px }
.pc-empty{ padding:20px; text-align:center; color:var(--text3); font-size:13px; line-height:1.6 }
.pc-files-empty{ padding:16px 18px; text-align:left }
@media (max-width:640px){ .pc-card-head{ flex-wrap:wrap } .pc-card-actions{ width:100%; padding-left:28px } }

/* ── FILL VIEW ── */
.pc-fill-stage{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:8px 0 40px; position:relative }
.pc-page{ position:relative; box-shadow:0 6px 24px rgba(0,0,0,.35); border-radius:4px; overflow:hidden; background:#fff }
.pc-canvas{ display:block }
.pc-ov{ position:absolute; inset:0; }
.pc-txt{ position:absolute; min-width:12px; min-height:1em; color:#10233a; font-family:Helvetica,Arial,sans-serif; line-height:1.05;
  padding:1px 2px; outline:1px dashed rgba(47,154,166,.55); background:rgba(255,255,255,.35); cursor:move; white-space:pre; user-select:text }
.pc-txt:focus{ outline:1.5px solid var(--brand,#2f9aa6); background:rgba(255,255,255,.7) }
.pc-sig{ position:absolute; cursor:move; outline:1px dashed rgba(47,154,166,.55) }
.pc-ov.pc-adding{ cursor:crosshair }
#pc-tx-btn.on{ background:rgba(47,154,166,.16); border-color:var(--brand,#2f9aa6); color:var(--text) }
.pc-selbar{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:30;
  background:#11161d; border:1px solid var(--border-2); border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.5) }
.pc-selbar button{ min-width:34px; height:32px; padding:0 9px; border:1px solid var(--border); border-radius:7px; background:rgba(255,255,255,.04);
  color:var(--text2); font:inherit; font-weight:800; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center }
.pc-selbar button:hover{ color:var(--text); border-color:var(--border-2); background:rgba(255,255,255,.09) }
.pc-selbar .ic{ width:15px; height:15px }

/* ── SIGNATURE MODAL ── */
.pc-modal{ position:fixed; inset:0; background:rgba(6,10,16,.62); z-index:120; display:flex; align-items:center; justify-content:center; padding:16px }
.pc-modal-card{ width:560px; max-width:100%; background:var(--panel,#161b22); border:1px solid var(--border-2); border-radius:14px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.55) }
.pc-modal-h{ font-family:"Fraunces",Georgia,serif; font-size:19px; font-weight:600; color:var(--text); margin-bottom:12px }
.pc-sig-tabs{ display:flex; gap:6px; margin-bottom:12px }
.pc-sig-tabs button{ padding:6px 14px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.03); color:var(--text3); font:inherit; font-weight:700; font-size:12.5px; cursor:pointer }
.pc-sig-tabs button.on{ color:var(--text); border-color:var(--brand,#2f9aa6); background:rgba(47,154,166,.14) }
.pc-sig-pane{ display:none } .pc-sig-pane.on{ display:block }
#pc-sigpad{ width:100%; height:180px; background:#fff; border:1px solid var(--border-2); border-radius:10px; touch-action:none; cursor:crosshair }
.pc-sig-hint{ font-size:11.5px; color:var(--text3); margin-top:6px; text-align:center }
#pc-sigtype{ width:100%; background:rgba(0,0,0,.22); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; font-size:15px; padding:10px 12px; outline:none }
#pc-sigtype:focus{ border-color:var(--brand,#2f9aa6) }
.pc-sig-fonts{ display:flex; gap:16px; margin:9px 2px; font-size:12.5px; color:var(--text2) }
.pc-sig-prev{ min-height:96px; display:flex; align-items:center; justify-content:center; font-family:"Great Vibes",cursive; font-size:56px; line-height:1.1; color:#10233a; background:#fff; border-radius:10px; margin-top:10px; overflow:hidden; padding:6px 14px }
.pc-sig-prev-img{ max-width:100%; max-height:160px; background:#fff; border-radius:10px; padding:8px }
.pc-sig-save{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text2); margin:12px 2px 0 }
.pc-modal-btns{ display:flex; align-items:center; gap:8px; margin-top:14px }

/* ── SAVE-TO-JOB PICKER (searchable, in-aesthetic; reuses .pc-modal overlay) ── */
.pc-job-card{ width:480px }
.pc-job-search{ width:100%; background:rgba(0,0,0,.22); border:1px solid var(--border); border-radius:9px; color:var(--text);
  font:inherit; font-size:14px; padding:11px 13px; outline:none; box-sizing:border-box }
.pc-job-search:focus{ border-color:var(--brand,#2f9aa6) }
.pc-job-search::placeholder{ color:var(--text3) }
.pc-job-list{ margin-top:10px; max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:2px }
.pc-job-row{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--border); border-radius:9px;
  background:rgba(255,255,255,.02); cursor:pointer; transition:background .12s,border-color .12s }
.pc-job-row:hover{ background:rgba(47,154,166,.10); border-color:var(--brand,#2f9aa6) }
.pc-job-num{ font-size:12px; font-weight:800; color:var(--brand,#2f9aa6); font-variant-numeric:tabular-nums; flex-shrink:0; min-width:44px }
.pc-job-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.pc-job-name{ font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pc-job-addr{ font-size:11.5px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pc-job-go{ width:15px; height:15px; color:var(--text3); flex-shrink:0 }
.pc-job-row:hover .pc-job-go{ color:var(--brand,#2f9aa6) }
.pc-job-empty{ padding:24px 12px; text-align:center; color:var(--text3); font-size:13px }