/* SIMPEL Emergency / Laporan form — Bold Accent reference */

/* Apply only to reporting sheets that contain the emergency report form. */
.sheet:has(#f-catatan){
  padding:24px 24px 26px;
  background:#fff;
  border-radius:30px 30px 0 0;
  max-height:92vh;
  overflow-y:auto;
}

.sheet:has(#f-catatan) .sheet-handle{
  width:42px;
  height:5px;
  border-radius:999px;
  background:#d7d2c7;
  margin:0 auto 24px;
}

.sheet:has(#f-catatan) .sheet-title.et-center,
.sheet:has(#f-catatan) .sheet-title{
  text-align:left !important;
  color:#d62828;
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0 0 6px;
}

.sheet:has(#f-catatan) .sheet-desc.et-center,
.sheet:has(#f-catatan) .sheet-desc{
  text-align:left !important;
  margin:0 0 22px;
  color:#6b7280;
  font-size:12px;
  line-height:1.5;
}

.sheet:has(#f-catatan) .form-field{
  margin:0 0 20px;
}

.sheet:has(#f-catatan) .form-field > label{
  display:block;
  margin:0 0 8px;
  color:#202a35;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
}

/* Location is the visual anchor. */
.sheet:has(#f-catatan) .location-box{
  display:flex;
  align-items:flex-start;
  gap:13px;
  width:100%;
  padding:18px 17px;
  border:0;
  border-radius:16px;
  background:linear-gradient(145deg,#e32323 0%,#cf1717 52%,#b70f0f 100%);
  color:#fff;
  box-shadow:0 14px 30px -20px rgba(202,22,22,.8);
}

.sheet:has(#f-catatan) .location-box i{
  margin-top:2px;
  font-size:20px;
  color:#fff;
  flex:0 0 auto;
}

.sheet:has(#f-catatan) .location-box span{
  color:#fff;
  font-size:13px;
  font-weight:600;
  line-height:1.55;
}

.sheet:has(#f-catatan) .location-manual-link{
  margin-top:11px;
  color:#c91b1b;
  font-size:11px;
  font-weight:700;
  text-align:center;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.sheet:has(#f-catatan) textarea,
.sheet:has(#f-catatan) input[type="text"],
.sheet:has(#f-catatan) input[type="tel"],
.sheet:has(#f-catatan) select{
  width:100%;
  border:1px solid #e2e5e9;
  border-radius:14px;
  background:#fff;
  color:#202a35;
  font-family:var(--font-body);
  font-size:13px;
  outline:none;
  box-shadow:none;
  transition:border-color .2s, box-shadow .2s;
}

.sheet:has(#f-catatan) input[type="text"],
.sheet:has(#f-catatan) input[type="tel"],
.sheet:has(#f-catatan) select{
  min-height:52px;
  padding:0 15px;
}

.sheet:has(#f-catatan) textarea{
  min-height:104px;
  padding:14px 15px;
  resize:vertical;
  line-height:1.5;
}

.sheet:has(#f-catatan) textarea:focus,
.sheet:has(#f-catatan) input:focus,
.sheet:has(#f-catatan) select:focus{
  border-color:#e33434;
  box-shadow:0 0 0 3px rgba(227,52,52,.08);
}

.sheet:has(#f-catatan) textarea::placeholder,
.sheet:has(#f-catatan) input::placeholder{
  color:#9aa1aa;
}

/* Photo becomes a dedicated action card, not an ordinary input. */
.sheet:has(#f-catatan) .photo-add-btn-wide{
  min-height:82px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:14px 18px;
  border:1.5px dashed #ef7777;
  border-radius:15px;
  background:#fffafa;
  color:#cf1f1f;
  cursor:pointer;
}

.sheet:has(#f-catatan) .photo-add-btn-wide i{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#f04b4b;
  color:#fff;
  font-size:18px;
  box-shadow:0 8px 18px -12px rgba(198,22,22,.9);
}

.sheet:has(#f-catatan) .photo-add-btn-wide span{
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.sheet:has(#f-catatan) .photo-add-btn-wide span::after{
  content:'\A Maks. 3 foto';
  white-space:pre;
  display:block;
  margin-top:5px;
  color:#727b86;
  font-size:9px;
  font-weight:600;
  text-transform:none;
}

.sheet:has(#f-catatan) .photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:10px;
}

.sheet:has(#f-catatan) .photo-thumb{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #eee;
}

/* Main CTA */
.sheet:has(#f-catatan) .sheet-btn.danger{
  min-height:54px;
  width:100%;
  margin-top:5px;
  border:0;
  border-radius:14px;
  background:linear-gradient(90deg,#df2020,#bf1717);
  color:#fff;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  box-shadow:0 14px 26px -18px rgba(190,20,20,.75);
}

.sheet:has(#f-catatan) .sheet-btn.danger:active{
  transform:scale(.985);
}

/* Manual-location form should preserve the same visual system. */
.sheet:has(#f-kelurahan) .form-field:first-of-type select,
.sheet:has(#f-alamat) #f-alamat{
  background:#fafafa;
}

@media (max-width:380px){
  .sheet:has(#f-catatan){padding-left:20px;padding-right:20px;}
  .sheet:has(#f-catatan) .sheet-title.et-center,
  .sheet:has(#f-catatan) .sheet-title{font-size:22px;}
}