/* Shared selection feedback. Only presentation: values and attribution stay in app.js. */
:root {
  --selection-feedback-edge: #5395e5;
  --selection-feedback-ring: rgba(55, 126, 207, .16);
  --selection-feedback-text: #667085;
  --selection-feedback-bg: #f2f5f9;
}

/* Extend the existing authority layer, whose important rules outrank legacy CSS. */
@layer apple-proportions {
/* At shorter desktop heights the daily table's minimum height previously
   compressed the summary, placing its cards over the daily filter triggers. */
html body #app-shell #view .platform-workbench-page {
  grid-template-rows: max-content max-content !important;
}
html body #app-shell #view .platform-workbench-page > .platform-design-summary-panel {
  min-height: max-content !important;
}
/* No scale/translation: a pressed filter keeps its anchor and dimensions. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-trigger, .store-choice-trigger, .date-picker-trigger,
  .platform-summary-filter-trigger, .platform-daily-select-trigger,
  .system-ai-model-trigger, .manual-ad-series-selector,
  select:not(.native-select-hidden), input[type="date"], input[type="month"], input[type="time"]
):not(:disabled) {
  transform: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease !important;
}

/* Open state comes from the existing menu, including calendars without aria-expanded.
   The collection dialog's calendar lives in a separate slot inside its form. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-wrap.open > .custom-select-trigger,
  .store-choice-menu:has(> .store-choice-popover:not(.hidden):not([hidden])) > .store-choice-trigger,
  :is(.date-picker, .orders-date-field, .dashboard-date-control):has(> .date-picker-popover:not(.hidden):not([hidden])) > :is(.date-picker-trigger, .platform-summary-filter-trigger),
  .platform-daily-select:has(> .platform-daily-select-menu:not(.hidden):not([hidden])) > .platform-daily-select-trigger,
  #ad-report-collect-form:has(#report-collect-calendar > .date-picker-popover) .date-picker-trigger,
  :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .platform-summary-filter-trigger, .platform-daily-select-trigger, .system-ai-model-trigger, .manual-ad-series-selector)[aria-expanded="true"],
  :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .platform-summary-filter-trigger, .platform-daily-select-trigger, .system-ai-model-trigger, .manual-ad-series-selector, select:not(.native-select-hidden), input[type="date"], input[type="month"], input[type="time"]):active
):not(:disabled) {
  border-color: var(--selection-feedback-edge) !important;
  background: var(--selection-feedback-bg) !important;
  color: var(--selection-feedback-text) !important;
  box-shadow: 0 0 0 3px var(--selection-feedback-ring), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  outline: none !important;
  transform: none !important;
  /* Pointer-down feedback must appear immediately, rather than wait for a fade. */
  transition: none !important;
}

/* Existing value elements have explicit dark !important rules. Inherit the
   trigger's state color so pagination, strong labels and nested model text agree. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-trigger, .store-choice-trigger, .date-picker-trigger,
  .platform-summary-filter-trigger, .platform-daily-select-trigger,
  .system-ai-model-trigger, .manual-ad-series-selector
) :is(strong, .custom-select-value, [data-system-ai-model-label]),
html body :is(#app-shell #view, #modal-root) .system-ai-model-trigger > span {
  color: inherit !important;
}

/* Keyboard focus stays visible after a selection without muting a closed value. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-trigger, .store-choice-trigger, .date-picker-trigger,
  .platform-summary-filter-trigger, .platform-daily-select-trigger,
  .system-ai-model-trigger, .manual-ad-series-selector,
  select:not(.native-select-hidden), input[type="date"], input[type="month"], input[type="time"]
):not(:disabled):focus-visible,
html body :is(#app-shell #view, #modal-root) .month-choice-control:has(.month-step-button:focus-visible),
html body :is(#app-shell #view, #modal-root) .month-choice-control:has(.month-step-button:active) {
  border-color: var(--selection-feedback-edge) !important;
  box-shadow: 0 0 0 3px var(--selection-feedback-ring) !important;
  outline: none !important;
}

html body :is(#app-shell #view, #modal-root) input:is([type="checkbox"], [type="radio"]):not(:disabled):is(:active, :focus-visible) {
  outline: 2px solid var(--selection-feedback-edge) !important;
  outline-offset: 2px;
}

/* Repeated report selection needs immediate feedback, including keyboard checks.
   Keep the checked/mixed artwork and focus ring; remove the press and tick motion. */
html body #app-shell #view .ad-data-report-table input[type="checkbox"],
html body #app-shell #view .ad-data-report-table input[type="checkbox"]::before,
html body #app-shell #view .ad-data-report-table input[type="checkbox"]::after,
html body #app-shell #view .ad-data-report-table tbody :is(tr, td),
html body #app-shell #view .ad-report-row-color-tools button {
  transition: none !important;
  animation: none !important;
}
html body #app-shell #view .ad-data-report-table input[type="checkbox"],
html body #app-shell #view .ad-report-row-color-tools button {
  transform: none !important;
}

/* The toolbar stays mounted and keeps its height when selection controls appear. */
html body #app-shell #view .ad-report-reportbar {
  box-sizing: border-box !important;
  min-height: 34px !important;
  height: 34px !important;
  max-height: 34px !important;
  padding: 2px 12px !important;
}
html body #app-shell #view .ad-report-reportbar-main [hidden] {
  display: none !important;
}

/* The manual-entry template switch is a title-bar action, not a form field. */
html body #modal-root .manual-ad-template-picker .custom-select-trigger {
  min-height: 26px !important;
  height: 26px !important;
  padding: 3px 23px 3px 6px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #526174 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body #modal-root .manual-ad-template-picker .custom-select-trigger:is(:hover, :focus-visible),
html body #modal-root .manual-ad-template-picker .custom-select-wrap.open > .custom-select-trigger {
  border: 0 !important;
  background: #eef3f8 !important;
  color: #1f5fae !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(#app-shell #view, #modal-root) :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .platform-summary-filter-trigger, .platform-daily-select-trigger, .system-ai-model-trigger, .manual-ad-series-selector, select, input[type="date"], input[type="month"], input[type="time"]) {
    transition: none !important;
  }
}
}

/* A readable comparison strip with a quieter destructive action. */
@layer apple-proportions {
 html body #app-shell #view .ad-report-comparison,
 html body #app-shell #view .ad-report-comparison [data-ad-report-comparison-metric]>span {font-size:13px!important;font-weight:500!important;line-height:20px!important;color:#647b99!important;}
 html body #app-shell #view .ad-report-comparison strong {font-size:13px!important;font-weight:600!important;line-height:20px!important;color:#09090b!important;}
 html body #app-shell #view .ad-report-comparison>[data-ad-report-comparison-metric],
 html body #app-shell #view .ad-report-row-color-tools,
 html body #app-shell #view #delete-selected-ad-data-snapshots {box-sizing:border-box!important;height:28px!important;min-height:28px!important;max-height:28px!important;align-self:center!important;}
 html body #app-shell #view .ad-report-comparison>[data-ad-report-comparison-metric] {padding:0 7px!important;align-items:center!important;}
 html body #app-shell #view .ad-report-row-color-tools {padding:0 5px!important;}
 html body #app-shell #view .ad-report-row-color-tools>span {font-size:12px!important;font-weight:500!important;color:#647b99!important;}
 html body #app-shell #view #delete-selected-ad-data-snapshots {padding:0 8px!important;font-size:11px!important;line-height:26px!important;border-radius:7px!important;white-space:nowrap;}
}