/* Legacy Load Tracker v6.1: filter sizing only. No data or permission changes.
   Wrap by the CARD's width, not the full window (the desktop sidebar uses space).
   Do not put horizontal padding on native date inputs: WebKit issue 301648. */
.report-hero { container-name: report-controls; container-type: inline-size; }
#tickets > .card { container-name: ticket-controls; container-type: inline-size; }
.report-filters, .ticket-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
  width: 100%;
  min-width: 0;
}
.report-filters > label, .ticket-filters > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  grid-column: auto;
}
.report-filters input, .report-filters select,
.ticket-filters input, .ticket-filters select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-height: 48px;
  margin: 0;
  font-size: 16px;
}
.report-filters select, .ticket-filters select {
  padding: 10px 30px 10px 12px;
  text-overflow: ellipsis;
}
/* Give longer company/location text a full row on tablets. */
.report-filters #rCompanyWrap { grid-column: 1 / -1; }
.ticket-filters > label:has(#filterGpsAddress) { grid-column: 1 / -1; }
.ticket-filters > button { justify-self: start; min-height: 48px; height: auto; }
.report-filters .filter-date-control, .ticket-filters .filter-date-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 0 12px;
  background: #091828;
  border: 1px solid #34526c;
  border-radius: 9px;
}
.filter-date-control:focus-within {
  border-color: #6faefe;
  outline: 2px solid #6faefe;
  outline-offset: 2px;
}
.report-filters .filter-date-control > input[type="date"],
.ticket-filters .filter-date-control > input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e9f1f8;
  color-scheme: dark;
  text-align: left;
}
.filter-date-control input::-webkit-date-and-time-value {
  min-width: 0;
  min-inline-size: 0;
  text-align: left;
}
.filter-date-control input::-webkit-datetime-edit { padding: 0; }
/* Four generous fields fit on wide tablets. Five only on large desktops. */
@container report-controls (min-width: 960px) {
  .report-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container report-controls (min-width: 1180px) {
  .report-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .report-filters #rCompanyWrap { grid-column: auto; }
  #reports.driver-report .report-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container ticket-controls (min-width: 960px) {
  .ticket-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ticket-filters > label:has(#filterGpsAddress) { grid-column: auto; }
}
/* Use complete rows on phones; no tiny or overlapping two-column date inputs. */
@media (max-width: 600px) {
  .report-filters, .ticket-filters { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .report-filters > label, .report-filters #rCompanyWrap,
  .report-filters .report-location, .report-filters > label:last-child,
  .ticket-filters > label { grid-column: 1 / -1; min-width: 0; }
}
/* Keep hidden company controls hidden; role/access behavior is unchanged. */
.report-filters > .hidden, .ticket-filters > .hidden { display: none !important; }