/* ==========================================================================
   Cascading location selector (Province -> City/Municipality -> Barangay)
   Markup is generated by public/js/location-selector.js from every
   [data-loc-group] placeholder, so all styling lives here.

   The three controls use their own flex row (not Bootstrap columns) on
   purpose: Bootstrap column widths collapse inside narrow containers
   (col-md-4 inside col-md-4, modal bodies, mobile 50% overrides), which
   clipped long dataset text such as "Select city/municipality".
   Each control keeps a readable minimum width and wraps onto its own line
   when the available space is smaller than that.
   ========================================================================== */

.loc-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
}

.loc-group-row > .loc-col {
  /* Grow to fill, but never go below ~13.5rem (216px) so option text stays
     fully visible; when 3 controls do not fit they wrap to the next line.
     Three across need 664px, which fits the widest columns of every form
     (register card inner width is 688px+). */
  flex: 1 1 13.5rem;
  min-width: 0;
  max-width: 100%;
}

.loc-group-row > .loc-col > .form-label {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.loc-group-row > .loc-col > .form-select,
.loc-group-row > .loc-col > .form-control {
  width: 100%;
  min-width: 0;
}

/* Keep the selected value clear of the dropdown arrow (arrow is 1.5em wide,
   positioned 0.5rem from the right edge). */
.loc-group-row > .loc-col > .form-select {
  padding-right: 1.75rem;
  text-overflow: ellipsis;
}

.loc-group-row > .loc-col > .form-select:disabled {
  background-color: #eef1f5;
  color: #6b7280;
}

.loc-group-row > .loc-col > .form-select.is-invalid,
.loc-group-row > .loc-col > .form-control.is-invalid {
  border-color: #dc3545;
}

/* Phones / small tablets: two controls per row, not one.
   This used to be `flex: 1 1 100%`, which stacked Province / City / Barangay
   into three full-width rows. Measured at 390px that is 3 x 64px = 192px of
   vertical space for three short-value selects, and the values are short (a
   province, a city, a barangay name) so 2-up stays readable.
   The third control spans the full width so the row ends flush rather than
   leaving a ragged half-cell. */
@media (max-width: 767.98px) {
  .loc-group-row > .loc-col {
    flex: 1 1 calc(50% - 0.25rem);
  }
  /* Barangay is last in the group; give it the whole row. */
  .loc-group-row > .loc-col:last-child {
    flex: 1 1 100%;
  }
}

/* Below 360px a half-width select is too tight for a long barangay name, so
   fall back to one per row rather than truncating. */
@media (max-width: 359.98px) {
  .loc-group-row > .loc-col {
    flex: 1 1 100%;
  }
}