/* Merchant UX pass, round 2 (2026-09-23). Loaded after admin-ui-consistency.css. */

/* Secondary actions read as outline buttons so the primary action on each
   surface stands out. Excluded: danger actions, tab and toggle buttons that
   carry their own selected/pressed state, Order Labels / Orders (own dispatch
   styling) and the Communications inbox. The exclusions sit inside :where()
   so the rule keeps the specificity of `.content button.action.secondary`. */
.content button.action.secondary:where(:not(.danger, .settings-tab, .prometheus-shipping-tab, [role="tab"], [aria-pressed], [role="tablist"] *, #panel-order-labels *, #panel-orders *, #panel-communications-inbox *)),
.content a.action.secondary:where(:not(#panel-order-labels *, #panel-orders *, #panel-communications-inbox *)) {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-card);
  color: var(--ui-text);
}

.content button.action.secondary:where(:not(.danger, .settings-tab, .prometheus-shipping-tab, [role="tab"], [aria-pressed], [role="tablist"] *, #panel-order-labels *, #panel-orders *, #panel-communications-inbox *)):hover,
.content a.action.secondary:where(:not(#panel-order-labels *, #panel-orders *, #panel-communications-inbox *)):hover {
  border-color: #94a3b8;
  background: var(--ui-card-soft);
}

/* Forecast rolling calendar: every row is its own grid, so the value tracks are
   fixed (identical in every row) and the captions line up with the numbers.
   Week cards can be as narrow as ~300px on phones, so the tracks stay at 56px:
   the weekday and date stack in the first column, the projected quantity wraps
   under the forecast value, and the captions use a smaller size to fit. */
.forecast-day-row {
  grid-template-columns: minmax(0, 1fr) repeat(3, 56px);
}

.forecast-day-row .value {
  min-width: 0;
}

.forecast-day-row .day .muted {
  display: block;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

.forecast-day-row .value .muted {
  display: block;
  font-size: 11px;
}

.forecast-day-row.forecast-day-columns {
  border-color: transparent;
  padding-block: 0;
  color: var(--ui-muted, #64748b);
  font-size: 10px;
  font-weight: 700;
}

/* The smallest phones (about 270px week cards): the day and date take their
   own line above three equal value columns that still line up with the
   captions. */
@media (width < 360px) {
  .forecast-day-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 4px;
  }

  .forecast-day-row .day {
    grid-column: 1 / -1;
  }

  .forecast-day-row .day .muted {
    display: inline;
  }

  .forecast-day-row.forecast-day-columns .day {
    display: none;
  }
}

/* Campaign results sort controls: keep a 24px minimum target (WCAG 2.5.8). */
.analytics-activity-sort-btn {
  min-height: 24px;
  padding-block: 2px;
}

/* Desktop: the Feedback launcher is fixed bottom-right; leave room so the last
   rows, table actions and selects scroll clear of it. Phones keep their own
   compact launcher and layout. */
@media (width > 960px) {
  .layout .content {
    padding-bottom: 56px;
  }
}

/* Settings help: plain copy first; lookup keys stay available for support in a
   collapsed "Technical keys" disclosure. */
.settings-technical-keys {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ui-muted, #64748b);
}

.settings-technical-keys > summary {
  cursor: pointer;
  width: fit-content;
}