/* Call-management controls are the baseline for the hosted quality workspace.
   Keep file upload overlays, checkboxes, multi-selects and textareas independent. */

body .filters :is(input:not([type]), input[type="search"], input[type="text"], input[type="number"], input[type="date"], select:not([multiple]):not([size])) {
  box-sizing: border-box;
  height: var(--hub-control-height);
  min-height: var(--hub-control-height);
  padding-top: var(--hub-control-padding-y, 9px);
  padding-bottom: var(--hub-control-padding-y, 9px);
  font-size: var(--hub-control-font);
  line-height: 1.5;
  border-color: var(--hub-control-border);
  border-radius: var(--hub-control-radius);
  color: var(--hub-control-state-ink, var(--hub-control-ink));
  background-color: var(--hub-control-state-bg, #fff);
}
/* Scope pickers and actions follow the same scale as their adjacent fields. */
body .scope-toggle,
body .filters > :is(button, .button),
body .filters .filter-actions > :is(button, .button),
#quality-workspace main.workspace :is(.filter-bar, .population-primary-filters, .issue-center-toolbar) > button:not(.text-button) {
  box-sizing: border-box;
  min-height: var(--hub-control-height);
  padding-top: var(--hub-control-padding-y, 9px);
  padding-bottom: var(--hub-control-padding-y, 9px);
  font-size: var(--hub-control-font);
  line-height: 1.5;
  border-radius: var(--hub-control-radius);
}
body .scope-toggle { height: var(--hub-control-height); border-color: var(--hub-control-border); }
#quality-workspace main.workspace :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]),
  select:not([multiple]):not([size])
) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--hub-control-height);
  min-height: var(--hub-control-height);
  margin: 0;
  padding: var(--hub-control-padding-y, 9px) var(--hub-control-right, 10px) var(--hub-control-padding-y, 9px) 10px;
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size: var(--hub-control-font);
  line-height: 1.5;
  font-weight: 400;
  border: 1px solid var(--hub-control-border);
  border-radius: var(--hub-control-radius);
  color: var(--hub-control-state-ink, var(--hub-control-ink));
  background-color: var(--hub-control-state-bg, #fff);
}
.filters :is(input, select):is(:disabled, [readonly]),
#quality-workspace :is(input, select):is(:disabled, [readonly]) {
  --hub-control-state-ink: var(--hub-control-muted);
  --hub-control-state-bg: #f8f9fa;
}
.filters input::placeholder,
#quality-workspace main.workspace input::placeholder {
  color: var(--hub-control-muted);
  opacity: 1;
}
/* Contain WebKit native option text within a shrinking filter column. */
.filters select { overflow: hidden; min-width: 0; max-width: 100%; }

/* WebKit otherwise paints a grey native gradient over the white field. */
.filters select:not([multiple]):not([size]),
#quality-workspace main.workspace select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  --hub-control-right: 32px;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23626d76' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 10px center;
}
/* Keep existing permission/loading placeholders concealed. */
body[data-workspace-ready="loading"] #quality-workspace .diagnostic-tab-panel select,
body[data-workspace-ready="loading"] #quality-workspace #p25-management :is(input,select),
#quality-workspace .model-slot-card[data-model-loaded="false"] :is(input,select) {
  --hub-control-state-ink: transparent;
}
#quality-workspace .combobox-option {
  color: var(--hub-control-ink);
  background: #fff;
}
#quality-workspace .combobox-option:is(:hover, [aria-selected="true"]) {
  background: var(--hub-selected);
}
#quality-workspace main.workspace input[type="date"]:not([type="hidden"]) {
  --hub-control-right: 42px;
}
#quality-workspace main.workspace :is(input, select):focus-visible {
  outline: 2px solid var(--hub-focus);
  outline-offset: 3px;
}
#quality-workspace .date-control .calendar-toggle {
  min-height: 0;
  padding: 6px;
  border: 0;
  background: transparent;
}
/* Host calendar is also used here; wrapping must not leave old overlaid hints. */
#quality-workspace .population-date-hint { display: none; }
#quality-workspace .population-date-field input::-webkit-datetime-edit { opacity: 1; }
#quality-workspace :is(.population-primary-filters, .population-custom-dates) label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
#quality-workspace :is(.population-primary-filters, .population-custom-dates) { align-items: end; }
#quality-workspace .issue-center-toolbar > label { flex: 1 1 160px; min-width: 0; }
#quality-workspace .issue-center-toolbar > label:has(input[type="search"]) { flex: 2 1 240px; }
#quality-workspace .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
#quality-workspace .filter-bar > label { flex: 1 1 160px; min-width: 0; margin: 0; }
.date-calendar .calendar-head select { box-sizing: border-box; min-height: 42px; font-size: 13px; }
@media (max-width: 760px) {
  #quality-workspace .quality-statistics-primary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #quality-workspace .quality-statistics-primary > label { grid-column: 1/-1; }
  #quality-workspace .issue-center-toolbar > label:has(input[type="search"]) { flex-basis: 100%; }
}
@media (max-width: 359px) {
  #quality-workspace .quality-statistics-primary { grid-template-columns: minmax(0,1fr); }
  #quality-workspace .temporary-date-fields { grid-template-columns: minmax(0,1fr); }
}

.js .date-control input[type="date"] { background-image: none; }
.date-control .calendar-toggle,
#quality-workspace .date-control .calendar-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23294551' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4m10-4v4M3 11h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
.calendar-range-status { margin: 8px 0; color: var(--muted); font-size: 12px; }
.date-calendar .calendar-grid .in-range { background: var(--primary-soft, #edf2f4); }
.date-calendar .calendar-grid .selected,
.date-calendar .calendar-grid .selected:hover,
.date-calendar .calendar-grid .selected:focus-visible { background: #dce7eb; color: #26343c; }
.date-calendar .calendar-confirm { background: var(--green); color: white; }
.date-calendar .calendar-confirm:is(:hover, :focus-visible, :active) {
  background: var(--green);
  color: white;
  filter: none;
}
.date-calendar .calendar-confirm:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.date-calendar { max-height: calc(100dvh - 16px); overflow-y: auto; }

/* One option scale across single-select, searchable multi-select and table menus. */
:root { --hub-option-font: 13px; --hub-option-height: 36px; }
.select-menu {
  position: fixed;
  z-index: 1300;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--hub-control-border);
  border-radius: 10px;
  background: #fff;
  color: var(--hub-ink);
  box-shadow: 0 8px 28px #202a301a;
  overflow: hidden;
  font-family: var(--hub-font);
}
.select-menu-list { overflow: auto; min-height: 0; overscroll-behavior: contain; outline: none; }
.select-menu > input[type=search] { flex: none; box-sizing: border-box; width: 100%; min-width: 0; height: 40px; margin: 0; font-size: 16px; }
.select-menu > [hidden] { display: none !important; }
.select-menu .select-menu-option,
.scope-dropdown .scope-option,
.number-filter-menu a,
.ct-popup .ct-option,
#quality-workspace .combobox-option {
  box-sizing: border-box;
  min-height: var(--hub-option-height);
  padding: 8px 10px;
  font-family: var(--hub-font);
  font-size: var(--hub-option-font);
  font-weight: 400;
  line-height: 1.5;
  color: var(--hub-ink);
  overflow-wrap: anywhere;
}
.select-menu .select-menu-option { position: relative; padding-right: 30px; border-radius: 6px; cursor: pointer; }
.select-menu-option[aria-selected=true]::after { content: '✓'; position: absolute; right: 10px; top: 8px; color: var(--green); }
.select-menu .select-menu-option:is(.is-active, [aria-selected=true]),
.scope-dropdown .scope-option:has(input:checked),
#quality-workspace .combobox-option[aria-selected=true] { background: var(--hub-selected); }
.select-menu-option:hover:not([aria-disabled=true]),
.scope-dropdown .scope-option:hover { background: var(--surface-subtle); }
.select-menu-option.is-active { outline: 1px solid var(--hub-focus); outline-offset: -1px; }
.select-menu .select-menu-option[aria-disabled=true] { color: var(--hub-muted); opacity: .55; cursor: default; }
.select-menu-group, .select-menu-empty { padding: 8px 10px; font-size: 12px; color: var(--hub-muted); }
@media (max-width: 760px) {
  :root { --hub-option-font: 14px; --hub-option-height: 44px; }
  .select-menu .select-menu-option { padding-top: 11px; padding-bottom: 11px; }
  .select-menu-option[aria-selected=true]::after { top: 11px; }
  .scope-dropdown > input[type=search] { font-size: 16px; }
}

/* One range field, retaining the two original values for existing query handlers. */
.js .date-initial-source, .js .date-initial-tail { display: none; }
html:not(.js) [data-date-prerender] { display: none; }
[data-date-prerender]:disabled { opacity: 1; }
.date-range-source, .date-range-tail { display: none !important; }
.date-range-field { min-width: 0 !important; }
.temporary-date-fields:has(.date-range-field) { grid-template-columns: minmax(0,1fr); }
.date-control.date-range-control > .calendar-toggle.date-range-toggle,
#quality-workspace .date-control.date-range-control > .calendar-toggle.date-range-toggle {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: var(--hub-control-height, 42px);
  line-height: 1.5;
  padding: 9px 38px 9px 10px;
  justify-content: flex-start;
  border: 1px solid var(--hub-control-border, #cbdce5);
  border-radius: var(--hub-control-radius, 6px);
  background-color: #fff;
  background-position: right 12px center;
  background-size: 18px 18px;
  color: var(--hub-control-ink, #26343c);
  font-size: var(--hub-control-font, 14px);
  font-weight: 400;
  white-space: normal;
  text-align: left;
}
.date-range-toggle:disabled { opacity: .55; cursor: default; }

#quality-workspace .population-primary-filters:has(.date-range-field) { flex-wrap: wrap; }
#quality-workspace .population-primary-filters .date-range-field,
#quality-workspace .population-custom-dates .date-range-field { flex: 1 1 240px; width: auto; }

/* Filter values identify the controls; retain their semantic labels off screen. */
#quality-workspace .population-custom-dates:has(.date-range-control) .population-date-separator { display: none; }
#quality-workspace :is(#population-export, #refresh-population, #export-issue-center) { background: transparent; border: 0; box-shadow: none; color: var(--muted); font-size: 12px; font-weight: 400; min-height: 32px; padding: 4px 8px; }
#quality-workspace :is(#population-export, #refresh-population, #export-issue-center):hover:not(:disabled) { color: var(--ink); background: var(--surface-subtle); }
#quality-workspace .population-results-toolbar { width: 100%; justify-content: space-between; }
@media (max-width:760px) { #quality-workspace :is(#population-export, #refresh-population, #export-issue-center) { min-height: 44px; } }

#quality-workspace .population-result-actions { display: flex; align-items: center; gap: 8px; }

/* Datetime ranges share the calendar, preserving minute-level analysis boundaries. */
.calendar-times { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin: 10px 0; }
.calendar-times label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; }
.calendar-times input { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; }
#quality-workspace .diagnostic-filter-list fieldset:has(.date-range-field) { display: block; min-width: 0; }
#quality-workspace .diagnostic-filter-list .date-range-field { width: 100%; }
#quality-workspace .diagnostic-filter-list .date-range-toggle { height: auto; min-height: 42px; line-height: 1.5; }

.sync-range-fields:has(.date-range-control) { grid-template-columns: minmax(0, 1fr); }
.sync-range-fields .date-range-toggle { height: auto; min-height: 42px; white-space: normal; line-height: 1.5; }
.calendar-open-end { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.calendar-open-end input { width: auto; min-height: 0; }

/* Keep general editing fields at their existing mobile text size. */
@media (max-width: 760px) {
  :root { --hub-control-font: 16px; --hub-control-height: 44px; }
  /* Project/person selectors are buttons, so input-only rules do not reach them. */
  body .scope-toggle {
    box-sizing: border-box;
    height: var(--hub-control-height);
    min-height: var(--hub-control-height);
    padding: 7px 10px;
    font-size: var(--hub-control-font);
    line-height: 1.5;
  }
  body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]),
    select, textarea
  ) { font-size: var(--hub-mobile-edit-font, 16px); }
}

@media (max-width: 760px) {
  /* A complete range gets its own row; action buttons wrap below it. */
  body label.date-range-field:has(.date-range-control),
  #quality-workspace .date-range-field:has(.date-range-control) {
    flex: 1 0 100%;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .filters,
  #quality-workspace :is(.filter-bar, .population-primary-filters, .population-custom-dates, .quality-statistics-primary, .issue-center-toolbar, .diagnostic-filter-list) {
    --hub-mobile-edit-font: var(--hub-control-font);
  }
}

/* Native fields and custom filter buttons share the same outer size on mobile.
   Keep ranges flexible when enlarged text or a time range needs a second line. */
@media (max-width: 760px) {
  body .filters :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select:not([multiple]):not([size])),
  #quality-workspace main.workspace :is(.filter-bar, .population-primary-filters, .population-custom-dates, .quality-statistics-primary, .issue-center-toolbar, .diagnostic-filter-list) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select:not([multiple]):not([size])) {
    box-sizing: border-box;
    height: var(--hub-control-height);
    min-height: var(--hub-control-height);
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: var(--hub-control-font);
    line-height: 1.5;
  }
  body .filters > :is(button, .button),
  body .filters .filter-actions > :is(button, .button) {
    box-sizing: border-box;
    min-height: var(--hub-control-height);
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: var(--hub-control-font);
    line-height: 1.5;
  }
  .date-control.date-range-control > .calendar-toggle.date-range-toggle,
  #quality-workspace .date-control.date-range-control > .calendar-toggle.date-range-toggle {
    box-sizing: border-box;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* Editable mobile controls keep their size before, during and after focus.
   A focus-only font increase causes reflow and arrives too late for focus zoom.
   Keep buttons, file pickers and non-text inputs at their existing density. */
@media (max-width:760px), (pointer:coarse) {
  :root { --hub-control-font:16px; }
  body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select, textarea, [contenteditable="true"]
  ) { font-size:16px !important; }
}
/* The caret and existing focus border provide feedback without a transient
   browser tap overlay. Keyboard focus styling and user zoom remain available. */
:where(input, textarea, select, [contenteditable="true"]) {
  -webkit-tap-highlight-color:transparent;
}

/* Reserve the combined range before deferred calendar enhancement. */
.js :is([data-analytics-filters], .lead-filters) label:has(input[name="to"]) { display:none; }
@media(max-width:760px) {
  .js :is([data-analytics-filters], .lead-filters) label:has(input[name="from"]) { flex:1 0 100%; min-width:0; }
  #quality-workspace { --hub-control-padding-y:7px; }
  /* Do not squeeze the project picker beside a 200px search field. */
  .call-primary-filters [data-scope-project-slot],
  .call-primary-filters > .wide { flex:1 0 100%; min-width:0; }
}

/* Large touch screens use 16px editable text too; allow room for the shared line height. */
@media (min-width:761px) and (pointer:coarse) {
  :root { --hub-control-height:48px; }
}

/* Lifecycle metrics retain readable labels within the shared scroll container. */
.lead-process-table th, .lead-process-table td { white-space: nowrap; }

/* Explicit closed state also applies before JS and on older embedded browsers. */
[popover]:not([data-hub-popover-open]){display:none!important}
[popover][data-hub-popover-open]{display:block;z-index:1400}