/* Mobile adaptation for user-center content and its dialogs. */
@media screen and (max-width: 768px) {
  .user-content { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding-top: 56px !important; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .user-content > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  .user-content .el-card, .user-content .el-card__body, .user-content .el-form, .user-content .el-form-item, .user-content .el-form-item__content { max-width: 100%; box-sizing: border-box; }
  .user-content .el-form--inline { display: flex; flex-wrap: wrap; }
  .user-content .el-form--inline .el-form-item { margin-right: 12px; max-width: 100%; }
  .user-content .el-input, .user-content .el-select, .user-content .el-date-editor, .user-content .el-cascader { max-width: 100%; }
  .el-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 6vh auto !important; box-sizing: border-box; }
  .el-dialog__body { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .el-dialog .el-form, .el-dialog .el-form-item, .el-dialog .el-form-item__content, .el-dialog .el-input, .el-dialog .el-select, .el-dialog .el-cascader, .el-dialog .el-date-editor { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .el-dialog .el-form-item__label, .el-dialog .el-radio__label, .el-dialog .el-checkbox__label { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
  .el-dialog .el-radio-group, .el-dialog .el-checkbox-group { display: flex; flex-wrap: wrap; max-width: 100%; gap: 8px 12px; }
  .el-dialog .el-radio, .el-dialog .el-checkbox { height: auto; max-width: 100%; white-space: normal; }
  .setting-pay, .setting-pay .setting-section, .setting-pay .pay-options, .setting-pay .el-form, .setting-pay .el-form-item { max-width: 100%; box-sizing: border-box; }
  .setting-pay .input-tip, .setting-pay .pay-tip, .setting-pay .el-form-item__label, .setting-pay .el-radio__label, .setting-pay .el-checkbox__label { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; }
  .setting-pay .el-radio-group, .setting-pay .el-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 12px; }
  .setting-pay .el-radio, .setting-pay .el-checkbox { height: auto; max-width: 100%; white-space: normal; }
  .user-content .template-list { display: flex; flex-wrap: wrap; gap: 12px; max-width: 100%; box-sizing: border-box; }
  .user-content .template-item { width: min(220px, 100%); max-width: 100%; box-sizing: border-box; }
  .user-content .order-root .el-table .el-button, .user-content .work-order .el-table .el-button { padding-left: 6px; padding-right: 6px; margin-left: 0; margin-right: 0; font-size: 12px; }
  .user-content .order-root .el-table .cell, .user-content .work-order .el-table .cell { padding-left: 6px; padding-right: 6px; word-break: break-word; }
  .user-content .el-table__inner-wrapper, .user-content .el-table__body-wrapper, .user-content .el-table__header-wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .user-content img, .user-content video, .user-content canvas { max-width: 100%; height: auto; }
}
@media screen and (max-width: 480px) {
  .user-content { padding: 56px 12px 12px !important; }
  .user-content .el-card__body { padding: 14px; }
  .el-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
}

@media screen and (max-width: 768px) {
  .el-dialog .el-form-item { display: block; }
  .el-dialog .el-form-item__label { display: block; width: 100% !important; padding: 0 0 6px !important; text-align: left; white-space: normal; line-height: 1.5; }
  .el-dialog .el-form-item__content { width: 100% !important; margin-left: 0 !important; line-height: normal; }
  .el-dialog .el-tabs__nav-wrap { overflow-x: auto; }
  .el-dialog .el-tabs__nav { min-width: max-content; }
  .el-dialog .el-tabs__item { padding: 0 10px; white-space: normal; }
  .el-dialog .el-radio-group, .el-dialog .el-checkbox-group { width: 100%; }

  .setting-pay .input-tip, .setting-pay .pay-tip, .setting-pay .el-radio__label, .setting-pay .el-checkbox__label { display: inline; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.6; }
  .setting-pay .el-radio, .setting-pay .el-checkbox { height: auto; min-height: 24px; white-space: normal; }

  .template-list { justify-content: center !important; margin-left: auto; margin-right: auto; }

  .order-root .el-table .el-button, .work-order .el-table .el-button { min-width: 0 !important; padding: 2px 3px !important; font-size: 10px !important; }
  .order-root .el-table .cell, .work-order .el-table .cell { padding-left: 3px !important; padding-right: 3px !important; }
  .order-root .el-table .el-button + .el-button, .work-order .el-table .el-button + .el-button { margin-left: 2px !important; }
  .order-root .el-table col:nth-last-child(-n+2) { width: 64px !important; }
  .order-root .el-table td:nth-last-child(-n+2), .order-root .el-table th:nth-last-child(-n+2) { width: 64px !important; max-width: 64px !important; }

  /* The add-channel form keeps a readable desktop-width canvas and can be swiped. */
  .el-dialog__body { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .el-dialog__body .el-form { min-width: 560px !important; }
  .el-dialog__body .el-form-item__content { min-width: 360px; }

  .template-list { justify-content: center !important; margin-left: auto; margin-right: auto; }

  /* Actual channel list action cells. */
  .xarr-sub-page-root .el-table .cell:has(.el-button),
  .polling-root .channel-list .el-table .cell:has(.el-button),
  .polling-root .channel-tools + .el-table .cell:has(.el-button) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px; }
  .xarr-sub-page-root .el-table .cell:has(.el-button) .el-button,
  .polling-root .channel-list .el-table .cell:has(.el-button) .el-button,
  .polling-root .channel-tools + .el-table .cell:has(.el-button) .el-button { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 4px 6px !important; font-size: 12px !important; }

  /* Keep all daily range choices visible without a second scroll area. */
  .statistics-root .el-form, .statistics-root .el-form-item, .statistics-root .el-radio-group, .statistics-root .el-button-group { display: flex !important; flex-wrap: wrap !important; max-width: 100% !important; gap: 6px; }
  .statistics-root .el-form-item, .statistics-root .el-radio, .statistics-root .el-radio-button, .statistics-root .el-button { margin: 0 !important; }

  /* Equal horizontal card lengths on the API page. */
  .api-root .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .api-root .grid > *, .api-root .operation-card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }

  /* MCP creation and QR actions each use a complete row. */
  [class*="mcp"] .el-button, [class*="key"] .el-button, [class*="qrcode"] .el-button, [class*="basic"] .el-button { max-width: 100%; height: auto; min-height: 32px; white-space: normal; }
  [class*="mcp"] .el-button:first-child, [class*="key"] .el-button:first-child, [class*="qrcode"] .el-button, [class*="basic"] .el-button { display: block; width: 100%; margin-left: 0 !important; margin-right: 0 !important; }

  /* Center package cards within their own list. */
  .template-list { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
  .template-list > * { flex: 0 1 220px; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }

  /* Compact ticket actions while preserving table scrolling. */
  .order-root .el-table .cell { padding-left: 3px !important; padding-right: 3px !important; word-break: break-word; }
  .order-root .el-table .el-button { width: auto !important; min-width: 0 !important; margin: 1px !important; padding: 2px 3px !important; font-size: 10px !important; }
  .statistics-root { overflow: visible !important; }
  .statistics-root .el-radio-group, .statistics-root .el-button-group { overflow: visible !important; height: auto !important; }

  .xarr-sub-page-root .el-card__header { display: flex; flex-wrap: wrap; gap: 8px; }
  .xarr-sub-page-root .el-card__header > .el-button { width: 100%; margin: 0 !important; white-space: normal; }
}

/* Page-specific mobile fixes for controls that use component-local class names. */
@media screen and (max-width: 768px) {
  /* Stack every account action in the last table column. */
  .xarr-sub-page-root .el-table__body td:last-child .cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px;
  }
  .xarr-sub-page-root .el-table__body td:last-child .cell .el-button,
  .xarr-sub-page-root .el-table__body td:last-child .cell .el-dropdown {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .xarr-sub-page-root .el-table__body td:last-child .cell .el-dropdown .el-button {
    width: 100% !important;
  }

  /* Show all quick date ranges directly in the statistics filter. */
  .statistics-root .quick-range-group,
  .statistics-root .quick-range-group .el-button-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .statistics-root .quick-range-group .el-button {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* The ePay classic and V2 cards share the same available card width. */
  .api-f-root .key-cols {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  .api-f-root .key-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep MCP's creation action on its own visible row. */
  .user-content .w-full > .flex.items-center.justify-between.flex-wrap.gap-2 {
    align-items: stretch !important;
    gap: 10px !important;
  }
  .user-content .w-full > .flex.items-center.justify-between.flex-wrap.gap-2 > .el-button {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Do not truncate the App QR-code action in profile-card headers. */
  .user-content .el-card__header .el-button {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Center each package card even when its parent is not template-list. */
  .user-content .plan-card {
    width: min(280px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}