/* ==========================================================
   components.css
   Inputs, toggles, repeatable rows, photo attach, incident counters, inline notes and the toast.
   ========================================================== */

/* fields */
label{display:block;margin-bottom:5px;font-size:12.5px;color:var(--mid)}
label.req::after{content:" *";color:var(--alarm)}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink);padding:10px 12px;
  min-height:46px;border:1px solid var(--rule);background:var(--card);width:100%;
  border-radius:9px}
textarea{min-height:auto;font-size:15px;line-height:1.45;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sdg);
  box-shadow:0 0 0 3px var(--sdg-soft)}
[aria-invalid="true"]{border-color:var(--alarm);background:var(--alarm-soft)}
.grid{display:grid;gap:12px}
.stack{display:grid;gap:14px}
.stack label{margin-bottom:5px}
.g2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.fld{min-width:0}
.total{display:flex;align-items:baseline;gap:8px;margin-top:13px;padding-top:13px;
  border-top:1px solid var(--hair);font-size:13px;color:var(--mid)}
.total b{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--sdg);
  letter-spacing:-.02em}

/* toggles */
.togs{display:flex;flex-wrap:wrap;gap:7px}
.tog{padding:9px 14px;min-height:44px;border:1px solid var(--rule);background:var(--card);
  font:inherit;font-size:13.5px;color:var(--mid);cursor:pointer;border-radius:99px}
.tog[aria-pressed="true"]{background:var(--sdg);border-color:var(--sdg);color:#fff;font-weight:600}
.tog.bad[aria-pressed="true"]{background:var(--alarm);border-color:var(--alarm)}

/* repeat rows */
.row{border:1px solid var(--hair);background:var(--sunken);border-radius:10px;
  padding:12px;margin-bottom:9px;position:relative}
.row .x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;
  background:transparent;color:var(--mute);font-size:19px;cursor:pointer;line-height:1;
  border-radius:7px}
.row .x:hover{background:var(--alarm-soft);color:var(--alarm)}
.add{width:100%;padding:12px;min-height:46px;border:1px dashed #b9c6bc;background:var(--card);
  color:var(--sdg);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:9px}
.add:hover{background:var(--sdg-soft);border-style:solid}
.none{font-size:12.5px;color:var(--mute);padding:2px 0 11px}

/* photo attach */
.drop{position:relative;border:1px dashed #b9c6bc;background:var(--sunken);border-radius:10px;
  padding:18px 14px;text-align:center;cursor:pointer;display:block}
/* The native file input is covered by the label, not merely faded. The global
   input{} rule forces min-height, border and padding, so each has to be undone
   or the control shows through as a "Choose Files" box. */
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;
  margin:0;padding:0;border:0;background:none;opacity:0;font-size:0;cursor:pointer}
.drop:hover,.drop.over{background:var(--sdg-soft);border-color:var(--sdg);border-style:solid}
.drop b{display:block;font-size:13.5px;color:var(--sdg);font-weight:600;margin-bottom:3px}
.drop span{font-size:12px;color:var(--mute)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;
  margin-bottom:11px}
.thumb{position:relative}
.thumb .pic{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;display:block;
  background:var(--hair);border:1px solid var(--rule)}
.thumb .rm{position:absolute;top:5px;right:5px;width:26px;height:26px;border:0;border-radius:7px;
  background:rgba(24,35,28,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0}
.thumb .rm:hover{background:var(--alarm)}
.thumb .cap{margin-top:5px;font-size:12px;padding:7px 8px;min-height:36px;border-radius:7px}
.thumb .sz{font-size:10px;color:var(--mute);font-family:var(--mono);margin-top:3px}

/* checkbox */
.chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mid);
  margin-top:10px;cursor:pointer}
.chk input{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--sdg)}

/* counters */
.cts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}
.ct{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 10px;
  border:1px solid var(--hair);background:var(--sunken);border-radius:9px;font-size:13px}
.ct.on{border-color:var(--alarm);background:var(--alarm-soft)}
.stp{display:flex;align-items:center;gap:3px;flex:none}
.stp button{width:34px;height:34px;border:1px solid var(--rule);background:var(--card);
  font:inherit;font-size:17px;color:var(--mid);cursor:pointer;border-radius:7px;line-height:1}
.stp button:hover:not([disabled]){border-color:var(--sdg);color:var(--sdg)}
.stp button[disabled]{opacity:.35;cursor:default}
.stp b{font-family:var(--mono);font-size:15px;min-width:22px;text-align:center}
.ct.on .stp b{color:var(--alarm)}

.dayhint{font-size:11.5px;color:var(--mute);margin-top:5px}
.flag{font-size:11.5px;color:var(--amber);margin-top:5px;font-weight:500}

/* quiet notes */
.hint{font-size:12.5px;color:var(--mute);margin-top:9px;line-height:1.5}
.warn{font-size:12.5px;line-height:1.5;margin-top:11px;padding:10px 12px;border-radius:9px;
  background:var(--amber-soft);color:#6f4a0e}
.warn b{color:var(--ink)}
.due{font-size:12.5px;line-height:1.5;margin-top:11px;padding:10px 12px;border-radius:9px;
  background:var(--alarm-soft);color:var(--alarm);font-weight:500}