/* =========================================================================
   Audit form (index.html) — builds on app.css
   ========================================================================= */

/* Names the older inline styles in index.html's script still use. */
:root{
  --paper:var(--bg); --panel:var(--surface); --line:var(--border);
  --ink:var(--text); --ink-soft:var(--muted);
  --green:var(--brand); --green-deep:var(--brand-strong); --red:var(--danger);
  --nav-h:64px;
}
@media (max-width:760px){:root{--nav-h:60px;}}

#jasteca-root{min-height:100vh; max-width:1320px; margin:0 auto; padding-bottom:90px;}
#jasteca-root .navbar{max-width:none;}

/* ---------- Page header ---------- */
.page-head{padding:30px 28px 6px;}
.page-head .eyebrow{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-strong);}
.page-head h1{font-size:clamp(26px,3.2vw,34px); font-weight:800; letter-spacing:-.025em;}
.page-head .sub{margin:6px 0 0; color:var(--muted); font-size:15px; max-width:46rem;}

/* ---------- Audit details card ---------- */
.metabar{
  margin:18px 28px 0; padding:22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px 18px; align-items:start;
}
.metabar .card-title{grid-column:1 / -1; font-size:17px; font-weight:700; margin:0 0 -4px;}
.metabar-extra{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:16px;}
#add-org-row,#add-site-row{flex-wrap:wrap; flex:1 1 240px; min-width:0;}
.btnrow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; grid-column:1 / -1;
  margin-top:4px; padding-top:18px; border-top:1px solid var(--border);
}
.btnrow:empty{display:none;}
.btnrow #btnDelete{margin-left:auto;}

/* Status line under the details card */
.status-msg{
  min-height:0; margin:0 28px; font-size:14px; font-weight:600; color:var(--brand-strong);
}
.status-msg:not(:empty){
  margin-top:14px; padding:11px 16px; border-radius:12px;
  background:var(--ok-soft); border:1px solid var(--ok-border);
}
.status-msg.err:not(:empty){color:var(--danger); background:var(--danger-soft); border-color:var(--danger-border);}

/* ---------- Layout ---------- */
.layout{
  display:grid; grid-template-columns:290px minmax(0,1fr); gap:24px;
  padding:22px 28px 40px; align-items:start;
}
.gaugecol{
  position:sticky; top:calc(var(--nav-h) + 16px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px 20px;
}
.gauge-wrap{display:flex; flex-direction:column; align-items:center;}
#gaugeSvg{width:100%; max-width:230px; height:auto; overflow:visible;}
.gauge-score{font-size:42px; font-weight:800; letter-spacing:-.03em; margin-top:-64px; line-height:1;}
.gauge-max{font-size:13px; color:var(--muted); margin-top:6px;}
.gauge-band{font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-top:10px; padding:5px 14px; border-radius:999px;}
.progress{margin-top:20px; padding-top:18px; border-top:1px solid var(--border);}
.progress-label{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; color:var(--muted); font-weight:600;}
.progress-label b{color:var(--text);}
.progress-bar{height:9px; background:var(--track); border-radius:999px; overflow:hidden; margin-top:8px;}
.progress-bar i{display:block; height:100%; width:0; background:var(--brand); border-radius:999px; transition:width .3s ease;}
.breakdown{margin-top:18px; display:flex; flex-direction:column; gap:9px;}
.breakdown .brow{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted);}
.breakdown .brow b{color:var(--text); font-weight:700; white-space:nowrap;}
.breakdown .bartrack{height:5px; background:var(--track); border-radius:999px; margin-top:3px; overflow:hidden;}
.breakdown .barfill{height:100%; background:var(--brand); border-radius:999px;}
.gauge-current-section{display:none;}

.maincol{min-width:0; display:flex; flex-direction:column; gap:14px;}
#sectionsWrap{display:flex; flex-direction:column; gap:14px;}

/* ---------- Section cards ---------- */
.section{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; scroll-margin-top:calc(var(--nav-h) + 70px);
}
.section.open{border-color:var(--border-strong);}
.section-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 20px; cursor:pointer; user-select:none;
}
.section-head:hover{background:var(--surface-2);}
.section-head .snum{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:26px; padding:0 8px;
  font-size:13px; font-weight:700; color:var(--brand-strong); background:var(--brand-soft);
  border-radius:8px; margin-right:10px; vertical-align:middle;
}
.section-head h3{font-size:17px; font-weight:700; display:inline; vertical-align:middle;}
.section-head .sdesc{font-size:13px; color:var(--muted); margin:6px 0 0; font-weight:400; line-height:1.5;}
.section-head .shead-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.section-head .stotal{font-size:14px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;}
.sprog{
  font-size:12px; font-weight:700; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:3px 10px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.sprog.done{color:var(--brand-strong); background:var(--brand-soft); border-color:var(--ok-border);}
.sprog.done::before{content:"✓ ";}
.section-head .chev{transition:transform .2s ease; color:var(--muted); flex-shrink:0;}
.section.open .chev{transform:rotate(180deg);}
.section-body{max-height:0; overflow:hidden; transition:max-height .28s ease; border-top:1px solid transparent;}
.section.open .section-body{border-top:1px solid var(--border);}
.section-body-inner{padding:6px 20px 18px;}

/* ---------- Checklist items ---------- */
.item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 18px;
  padding:15px 10px; margin:0 -10px; border-bottom:1px solid var(--border); border-radius:10px;
}
.item:last-of-type{border-bottom:none;}
.item.missing{background:var(--danger-soft); box-shadow:inset 3px 0 0 var(--danger); border-bottom-color:transparent;}
.item-label{font-size:14.5px; line-height:1.5; min-width:0;}
.item-label .inum{
  display:inline-block; min-width:34px; margin-right:8px; padding:1px 7px; text-align:center;
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
}
.item-label .si-text,.q14-item .si-text{display:block; margin-top:5px; font-family:'Noto Sans Sinhala',var(--font); font-size:13.5px; line-height:1.65; color:var(--muted);}
.q14-item .si-text{margin:4px 0 10px;}

.pills{display:flex; gap:8px; flex-shrink:0;}
.pill{
  width:42px; height:42px; border-radius:50%; padding:0;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:var(--surface); color:var(--muted); border:1.5px solid var(--border-strong);
  font-size:15px; font-weight:700; line-height:1; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.pill:hover{border-color:var(--brand); color:var(--text);}
.pill:active{transform:scale(.94);}
.pill.selected{color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,.18);}
.pill[data-v="1"].selected{background:var(--r-poor);}
.pill[data-v="2"].selected{background:var(--r-fair);}
.pill[data-v="3"].selected{background:var(--r-good);}
.pill[data-v="4"].selected{background:var(--r-vgood);}
.pill[data-v="5"].selected{background:var(--r-excellent);}
.pill[data-v="3"].selected,.pill[data-v="4"].selected{color:#1a1a12;}
.pill .plabel{display:none;}

.legend{display:flex; gap:8px 16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); padding:12px 0 2px;}
.legend span{display:flex; align-items:center; gap:6px;}
.legend i{width:10px; height:10px; border-radius:50%; display:inline-block;}
.kbd-hint{font-size:12.5px; color:var(--faint); padding:2px 0 0;}
.kbd-hint kbd{font-family:var(--mono); font-size:11.5px; background:var(--surface-2); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:5px; padding:0 5px;}

.notes-toggle{
  font-size:13.5px; color:var(--brand-strong); cursor:pointer; margin-top:12px; display:inline-block; font-weight:600;
  background:none; border:0; padding:4px 0; border-radius:6px;
}
.notes-toggle:hover{text-decoration:underline;}
.notes-area{display:none; margin-top:8px;}
.notes-area.show{display:block;}
textarea{font-family:inherit; color:var(--text);}
.notes-area textarea,.q14-item textarea,.note-textarea{
  width:100%; min-height:84px; font-size:15px; padding:11px 13px; resize:vertical;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
}
.notes-area textarea:focus,.q14-item textarea:focus,.note-textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);}

/* ---------- Section 14 ---------- */
.q14{padding:8px 20px 18px;}
.q14-item{padding:18px 0; border-bottom:1px solid var(--border);}
.q14-item:last-child{border-bottom:none;}
.q14-item .qhead{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.q14-item .qnum{display:inline-block; font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--brand-strong); background:var(--brand-soft); border-radius:6px; padding:1px 8px;}
.q14-item p.qtext{font-size:14.5px; margin:8px 0 8px; line-height:1.55;}
.q14-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px; flex-wrap:wrap; gap:10px;}
.wordcount{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.wordcount.over{color:var(--danger); font-weight:700;}
.scoreinput{display:flex; align-items:center; gap:8px;}
.scoreinput label{font-size:13px; color:var(--muted); font-weight:600;}
.scoreinput input{
  width:68px; min-height:42px; padding:6px 8px; text-align:center; font-size:16px; font-weight:700; font-family:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
}
.scoreinput input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);}

/* ---------- Bottom: totals, signature, save ---------- */
.grandcard{
  color:#fff; border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow);
  background:linear-gradient(135deg, #25905A 0%, #14573A 100%);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.grandcard .gt-label{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.8);}
.grandcard .gt-score{font-size:34px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}

.signature-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px; margin-top:14px;}
.signature-card h3{font-size:18px; margin:0 0 4px;}
.signature-card .sig-help{font-size:13.5px; color:var(--muted); margin:0 0 14px;}
.signature-summary{display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin-bottom:14px; font-size:14px;}
.signature-summary b{color:var(--muted); font-weight:600;}
.signature-pad-wrap{background:#fff; border:2px dashed var(--border-strong); border-radius:12px; overflow:hidden;}
#signatureCanvas{display:block; width:100%; height:190px; background:#fff; cursor:crosshair; touch-action:none;}
.signature-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;}
.signature-status{font-size:13.5px; color:var(--muted);}
.signature-status.signed{color:var(--brand-strong); font-weight:600;}

.save-card{padding:22px;}
.save-warning{
  display:flex; gap:10px; align-items:flex-start; background:var(--warn-soft); border:1px solid var(--warn-border); color:var(--warn-text);
  border-radius:12px; padding:13px 15px; margin-bottom:14px; font-size:14px; line-height:1.55;
}
.save-warning svg{width:20px; height:20px; flex-shrink:0; margin-top:1px;}
#btnSave{width:100%; min-height:52px; font-size:16px; border-radius:12px;}
.save-msg{margin-top:14px; font-size:14.5px; font-weight:600; line-height:1.55; border-radius:12px;}
.save-msg:empty{display:none;}
.save-msg:not(:empty){padding:13px 16px;}
.save-msg.ok{color:var(--brand-strong); background:var(--ok-soft); border:1px solid var(--ok-border);}
.save-msg.err{color:var(--danger); background:var(--danger-soft); border:1px solid var(--danger-border);}
.save-msg ul{margin:8px 0 0; padding-left:20px; font-weight:500;}
.save-msg ul button{background:none; border:0; padding:3px 0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; text-align:left;}

/* ---------- Floating "next unanswered" helper ---------- */
.fab{
  position:fixed; right:24px; bottom:24px; z-index:80;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand); color:var(--on-brand); border:0; border-radius:999px; padding:14px 20px; min-height:52px;
  font-size:15px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.fab{transition:opacity .2s ease, transform .2s ease, background .15s ease;}
.fab.away{opacity:0; transform:translateY(14px); pointer-events:none;}
.fab:hover{background:var(--brand-strong); color:#fff;}
.fab .fab-count{background:rgba(255,255,255,.22); border-radius:999px; padding:2px 10px; font-size:13px; font-variant-numeric:tabular-nums;}
.fab svg{width:18px; height:18px;}
.item.flash{animation:flash 1.4s ease;}
@keyframes flash{0%,40%{background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand);} 100%{background:transparent; box-shadow:inset 3px 0 0 transparent;}}

/* ---------- Tablet and phone ---------- */
@media (max-width:1100px){
  .layout{grid-template-columns:240px minmax(0,1fr); gap:18px; padding:20px 20px 36px;}
  .metabar{margin:16px 20px 0;} .page-head{padding:26px 20px 4px;} .status-msg{margin:0 20px;}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:14px; padding:0 0 30px;}
  /* The big gauge becomes a slim bar that stays visible under the top bar. */
  .gaugecol{
    position:sticky; top:var(--nav-h); z-index:60; margin:14px 0 0;
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:10px 16px; border-radius:0; border-width:1px 0; box-shadow:var(--shadow);
  }
  .gauge-wrap{flex-direction:row; align-items:baseline; gap:8px;}
  #gaugeSvg{display:none;}
  .gauge-score{font-size:24px; margin-top:0;}
  .gauge-max{margin-top:0;}
  .gauge-band{margin-top:0; padding:3px 10px; font-size:11px;}
  .progress{margin:0; padding:0; border:0; flex:1 1 150px; min-width:140px;}
  .progress-bar{margin-top:5px; height:7px;}
  .breakdown{display:none;}
  .gauge-current-section{display:none; align-items:baseline; gap:6px; font-size:12.5px; color:var(--muted); width:100%; overflow:hidden;}
  .gauge-current-section.show{display:flex;}
  .gauge-current-section .gcs-num{font-weight:700; color:var(--brand-strong); background:var(--brand-soft); padding:1px 8px; border-radius:6px; flex-shrink:0;}
  .gauge-current-section .gcs-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .gauge-current-section .gcs-score{font-weight:700; color:var(--text); flex-shrink:0; margin-left:auto;}
  .maincol{padding:0 14px;}
  .metabar{margin:14px 14px 0; padding:18px;} .page-head{padding:22px 16px 2px;} .status-msg{margin:0 14px;}
}
@media (max-width:700px){
  /* One question per card: the label on top, then five large, evenly spaced mark buttons. */
  .item{grid-template-columns:1fr; gap:12px; padding:16px 10px 18px;}
  .pills{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%;}
  .pill{width:100%; height:52px; border-radius:14px; font-size:17px; gap:2px;}
  .pill .plabel{display:block; font-size:10px; font-weight:600; letter-spacing:0; opacity:.85;}
  .kbd-hint{display:none;}
  .section-head{padding:14px 14px; align-items:flex-start;}
  .section-head .shead-right{flex-direction:column; align-items:flex-end; gap:6px;}
  .section-head .sdesc{display:none;}
  .section-body-inner,.q14{padding-left:14px; padding-right:14px;}
  .btnrow .btn-ghost,.btnrow .btn-danger{flex:1 1 auto;}
  .btnrow #btnDelete{margin-left:0;}
  .fab{right:14px; left:14px; bottom:14px; justify-content:center;}
  #jasteca-root{padding-bottom:96px;}
  .signature-card,.save-card{padding:18px 16px;}
  #signatureCanvas{height:170px;}
}
@media (max-width:380px){
  .pill .plabel{font-size:9px;}
  .gauge-band{display:none;}
}

.note-card{padding:20px 22px;}
.note-label{display:block; font-size:15px; font-weight:700; margin-bottom:10px;}

/* Phone: put short fields side by side so the details card stays compact. */
@media (max-width:700px){
  .metabar{grid-template-columns:1fr 1fr; gap:14px 12px;}
  .metabar .card-title,.metabar .btnrow,.metabar-extra,
  .metabar .field:has(#f-org),.metabar .field:has(#f-dept),.metabar .field:has(#loadSelect){grid-column:1 / -1;}
}
@media (max-width:700px){
  /* Order: organisation, then site + month as a pair, then department, then the saved-audit picker. */
  .metabar .card-title{order:0;}
  .metabar .field:has(#f-org){order:1;}
  .metabar .field:has(#f-site){order:2;}
  .metabar .field:has(#f-month){order:3;}
  .metabar .field:has(#f-dept){order:4;}
  .metabar .field:has(#loadSelect){order:5;}
  .metabar-extra{order:8;} .metabar .btnrow{order:9;}
}