/* ===== SMS_REPORT_FOUR_MOBILE_FIX_V1_START ===== */

@media (max-width: 760px) {
  html.sms-report-mobile-page,
  html.sms-report-mobile-page body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  html.sms-report-mobile-page .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    .message-page,
    .messages-page,
    .sent-page,
    .reply-page,
    .batch-page
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html.sms-report-mobile-page
  :is(
    .message-actions,
    .messages-actions,
    .sent-actions,
    .reply-actions,
    .batch-actions,
    .filter-actions
  ) {
    display: grid !important;
    grid-template-columns:
      repeat(auto-fit, minmax(125px, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    gap: 10px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    .message-actions,
    .messages-actions,
    .sent-actions,
    .reply-actions,
    .batch-actions,
    .filter-actions
  )
  :is(button, .action-btn, .export-btn) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .action-menu {
    top: 52px !important;
    left: 0 !important;
    width: min(190px, 100%) !important;
    max-width: 100% !important;
    z-index: 50 !important;
  }

  html.sms-report-mobile-page
  :is(.filter-card, .table-card) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(.filter-grid, .detail-grid) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .filter-card
  :is(label, .field, .form-field) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .filter-card
  :is(
    input:not([type='checkbox']):not([type='radio']),
    select,
    textarea
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .table-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 2px 0 14px !important;
    gap: 12px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .page-size {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .search-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    gap: 8px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .search-box input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  ) {
    --sms-report-four-mobile-fix-v1: 1;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  ) thead {
    display: none !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  ) tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  ) tbody tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  )
  tbody td:not([data-sms-report-empty='1']) {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    padding: 10px 12px !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  )
  tbody td:not([data-sms-report-empty='1'])::before {
    content: attr(data-sms-report-label);
    flex: 0 0 40%;
    max-width: 40%;
    color: #64748b;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  )
  tbody td:not([data-sms-report-empty='1']):last-child {
    border-bottom: 0 !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  )
  tbody td[data-sms-report-empty='1'] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 88px !important;
    height: auto !important;
    padding: 30px 12px !important;
    border: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  )
  tbody td > * {
    max-width: 58% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html.sms-report-mobile-page
  :is(
    table.message-table,
    table.messages-table,
    table.sent-table,
    table.reply-table,
    table.batch-table,
    .table-card table
  )
  input[type='checkbox'] {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
  }

  html.sms-report-mobile-page
  :is(.type-badge, .status-badge, .view-btn) {
    max-width: 58% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html.sms-report-mobile-page .row-actions {
    display: flex !important;
    max-width: 58% !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html.sms-report-mobile-page .table-footer {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 68px !important;
    padding: 12px 0 2px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page .table-footer > span {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.sms-report-mobile-page .pager {
    display: flex !important;
    max-width: 100% !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(.modal-mask, .dialog-mask) {
    padding: 12px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(.modal-card, .detail-card, .dialog-card) {
    width: 100% !important;
    max-width: 480px !important;
    min-width: 0 !important;
    max-height: calc(100vh - 24px) !important;
    margin: 0 auto !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  html.sms-report-mobile-page
  :is(
    #chat-widget,
    #customer-service,
    .chat-widget,
    .chat-float,
    .float-chat,
    .customer-service,
    [class*='chat-widget'],
    [class*='chat-float'],
    [class*='customer-service']
  ) {
    display: none !important;
  }
}

/* ===== SMS_REPORT_FOUR_MOBILE_FIX_V1_END ===== */