Template:NewsItemForm/styles.css

/* Form:NewsItem/styles.css
   Styles for collapsible Enforcement + Plots sections in Form:NewsItem
*/

/* Collapsible container */
.lw-form-details {
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background: #fafafa;
  padding: 10px 12px;
  margin: 6px 0;
}

/* Summary row */
.lw-form-details > summary {
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Clean up default marker */
.lw-form-details > summary::marker {
  content: "";
}

/* Custom chevron */
.lw-form-details > summary::before {
  content: "▸";
  font-size: 14px;
  line-height: 1;
  opacity: 0.8;
  transform: translateY(1px);
}

/* Rotate chevron when open */
.lw-form-details[open] > summary::before {
  content: "▾";
}

/* Body spacing */
.lw-form-details__body {
  margin-top: 10px;
}

/* Nested details (Eradication Plots inside Enforcement) */
.lw-form-details .lw-form-details {
  background: #ffffff;
  border-color: #e3e3e3;
  padding: 10px 12px;
  margin-top: 10px;
}

/* Make the inner table look sane */
.lw-form-details table.formtable {
  border-collapse: separate;
  border-spacing: 0 8px;
  width: 100%;
}

/* Header cells inside the drawer */
.lw-form-details table.formtable th {
  text-align: left;
  vertical-align: top;
  padding: 6px 10px 6px 0;
  white-space: nowrap;
  font-weight: 600;
}

/* Data cells inside the drawer */
.lw-form-details table.formtable td {
  vertical-align: top;
  padding: 0;
}

/* Inputs inside the drawer */
.lw-form-details input[type="text"],
.lw-form-details input[type="url"],
.lw-form-details textarea,
.lw-form-details select {
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 6px 8px;
  max-width: 100%;
}

/* Slight focus polish */
.lw-form-details input[type="text"]:focus,
.lw-form-details input[type="url"]:focus,
.lw-form-details textarea:focus,
.lw-form-details select:focus {
  outline: none;
  border-color: #8bb59f;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12);
}

/* Coordinate widget sometimes comes out tall/odd; keep it aligned */
.lw-form-details .pfCoordsInput,
.lw-form-details .pfCoordinatesInput,
.lw-form-details .coordsInput {
  max-width: 420px;
}

/* Mobile: stop headers from forcing horizontal scroll */
@media (max-width: 720px) {
  .lw-form-details table.formtable th {
    white-space: normal;
    width: auto !important;
    padding-right: 8px;
  }
}