/* CBFR Forms app layer: makes the printed form layout fillable on screen.
   The form pages keep their own styles; this file only adds inputs, the toolbar and the signature pad. */

html { background:#d9d6d4; }
body { background:#d9d6d4; padding-top:58px; }

.doc { padding:12px 0 40px; }
.page { margin:0 auto 14px; box-shadow:0 2px 10px rgba(0,0,0,.18); background:#fff; }

/* Toolbar */
.bar { position:fixed; top:0; left:0; right:0; z-index:50; height:50px; display:flex; align-items:center; gap:8px; padding:0 12px;
       background:#231F20; color:#fff; font-family:Montserrat,'Segoe UI',Arial,sans-serif; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.bar .ttl { flex:1; font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar a, .bar button { font:inherit; font-weight:700; font-size:13px; border:0; border-radius:6px; padding:9px 12px; cursor:pointer; text-decoration:none; color:#fff; background:#3d3839; white-space:nowrap; }
.bar .go { background:#E1232B; }
.bar button:disabled { opacity:.5; cursor:default; }

/* Fill-in lines: the <i> keeps the underline, the input sits inside it */
.f i, .lines i { position:relative; font-style:normal; }
.fi { position:absolute; inset:0; width:100%; height:100%; border:0; margin:0; padding:0 3px; background:rgba(225,35,43,.05);
      font:inherit; font-style:normal; font-size:10pt; color:#0b2a6f; outline:none; }
.fi:focus { background:rgba(225,35,43,.13); }
td { position:relative; }
td .fi { font-size:9.5pt; text-align:center; }
input.blank { border:0; border-bottom:1px solid #9c9794; background:rgba(225,35,43,.05); font:inherit; font-size:9.5pt; color:#0b2a6f;
              padding:0 2px; margin:0 2px; height:1.2em; outline:none; vertical-align:baseline; }

/* Checkboxes */
.ck span { cursor:pointer; -webkit-user-select:none; user-select:none; }
.ck span.on::before { content:"\2713"; font-size:10px; line-height:8px; text-align:center; font-weight:700; color:#0b2a6f; }

/* Signature lines */
i.s { cursor:pointer; background:rgba(225,35,43,.05); }
i.s::after { content:"Tap to sign"; position:absolute; right:4px; bottom:1px; font-size:7.5pt; color:#E1232B; font-family:Montserrat,sans-serif; font-weight:600; }
i.s.signed::after { content:""; }
i.s img { position:absolute; left:4px; bottom:-2px; height:2.3em; max-width:95%; }

/* Signature modal */
.sigm { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:12px; }
.sigm.open { display:flex; }
.sigm .sbox { background:#fff; border-radius:10px; width:min(680px,100%); padding:14px; font-family:Montserrat,'Segoe UI',Arial,sans-serif; }
.sigm h3 { margin:0 0 8px; font-size:15px; }
.sigm canvas { display:block; width:100%; height:220px; border:2px dashed #9c9794; border-radius:6px; touch-action:none; background:#fff; }
.sigm .btns { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.sigm button { font:inherit; font-weight:700; font-size:14px; border:0; border-radius:6px; padding:10px 16px; cursor:pointer; background:#e8e4e2; color:#231F20; }
.sigm button.go { background:#E1232B; color:#fff; }

/* Busy overlay */
.busy { position:fixed; inset:0; z-index:120; background:rgba(255,255,255,.8); display:none; align-items:center; justify-content:center;
        font-family:Montserrat,sans-serif; font-weight:700; color:#231F20; }
.busy.open { display:flex; }

/* During PDF capture: show the form exactly as printed */
.capturing .fi, .capturing input.blank, .capturing i.s { background:transparent !important; }
.capturing i.s::after { content:"" !important; }

@media print {
  html, body { background:#fff; padding:0; }
  .bar, .sigm, .busy { display:none !important; }
  .doc { padding:0; zoom:1 !important; }
  .page { margin:0; box-shadow:none; }
  .fi, input.blank, i.s { background:transparent !important; }
  i.s::after { content:"" !important; }
}