/* Pro action controls only. Never target cards, navigation or field triggers. */
html[data-xboox-experience=mobile] {
  --xb-mobile-action-height: 44px;
  --xb-mobile-action-radius: 22px;
  --xb-mobile-action-inline: 20px;
}

html[data-xboox-experience=mobile] :is(
  .expense-mobile-filter-apply, .expense-mobile-filter-clear,
  .xboox-mobile-capture-chooser__primary, .xboox-mobile-capture-chooser__secondary,
  .xboox-mobile-expense-more-actions__upload, .xb-mobile-detail-actions > button,
  .xbm-date-actions > button, [data-history-retry], [data-feed-retry],
  [data-mobile-attachment-back], [data-mobile-attachment-delete],
  .rc-capture-actions > button, .rc-review-actions > button, .rc-text-button
  , .rc-mapping-step-actions > button, .rc-mapping-page > header > button
) {
  box-sizing: border-box;
  min-height: var(--xb-mobile-action-height);
  height: var(--xb-mobile-action-height);
  padding: 0 var(--xb-mobile-action-inline);
  border-radius: var(--xb-mobile-action-radius);
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

html[data-xboox-experience=mobile] :is(
  .xboox-mobile-expense-more-actions__upload, .xboox-mobile-capture-chooser__secondary,
  [data-history-retry], [data-feed-retry], [data-mobile-attachment-back]
) {
  border: 1px solid var(--xb-color-outline);
  background: transparent;
  color: var(--xb-color-primary);
  box-shadow: none;
}

html[data-xboox-experience=mobile] :is(
  .xboox-mobile-capture-chooser__primary, .rc-review-actions > .rc-primary,
  .rc-capture-actions > .rc-primary, .expense-mobile-filter-apply
) {
  background: var(--xb-color-primary);
  color: var(--xb-color-on-primary);
  box-shadow: var(--xb-elevation-1);
}

html[data-xboox-experience=mobile] :is(
  .rc-capture-actions > button, .rc-review-actions > button,
  .xboox-mobile-capture-chooser__primary, .xboox-mobile-capture-chooser__secondary,
  .expense-mobile-filter-apply
):disabled {
  background: var(--xb-color-surface-container-highest);
  color: color-mix(in srgb, var(--xb-color-on-surface) 38%, transparent);
  box-shadow: none;
  opacity: 1;
}

/* Attachments retain their existing list/preview workflow in one native dialog. */
html[data-xboox-experience=mobile] .xb-mobile-attachment-panel {
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  height: min(78dvh, var(--xb-mobile-viewport-height, 100dvh));
  max-height: min(78dvh, var(--xb-mobile-viewport-height, 100dvh));
  border: 0;
  border-radius: 28px 28px 0 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--xb-color-surface-container-high);
}
html[data-xboox-experience=mobile] .xb-mobile-attachment-sheet {
  grid-template-rows: auto auto minmax(0, 1fr);
}
html[data-xboox-experience=mobile] .xb-mobile-attachment-sheet::before {
  content: '';
  width: 32px;
  height: 4px;
  margin: 14px auto 8px;
  border-radius: 4px;
  background: var(--xb-color-outline);
}
html[data-xboox-experience=mobile] .xb-mobile-attachment-sheet > header {
  display: flex;
  padding: 0 20px 10px;
  border: 0;
}
html[data-xboox-experience=mobile] .xb-mobile-attachment-sheet > header h2 {
  flex: 1;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  text-align: left;
}
html[data-xboox-experience=mobile] :is([data-mobile-attachment-close], [data-mobile-expense-close]) {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--xb-color-primary);
  box-shadow: none;
}
html[data-xboox-experience=mobile] :is([data-mobile-attachment-close], [data-mobile-expense-close]) svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}
html[data-xboox-experience=mobile] .rc-mapping-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--xb-mobile-action-radius);
  background: transparent;
  color: var(--xb-color-primary);
}
html[data-xboox-experience=mobile] .rc-mapping-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
