/* PMX_MOBILE_PILOT_CSS_PATCH_V1
   Target: finance-only pilot pages.
   Purpose: reduce horizontal overflow, make tables/cards/buttons usable on 390px mobile screens.
*/

@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  * {
    box-sizing: border-box;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  img,
  svg,
  canvas,
  video {
    max-width: 100%;
    height: auto;
  }

  main,
  .main,
  .content,
  .page,
  .page-content,
  .container,
  .wrapper,
  .layout,
  .dashboard,
  .dashboard-shell,
  .shell,
  .app-shell,
  .pmx-shell,
  .pmx-main,
  .pmx-content,
  .panel,
  .card,
  .section,
  .box {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .container,
  .wrapper,
  .page,
  .page-content,
  .content,
  .main,
  .pmx-main,
  .pmx-content {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .grid,
  .cards,
  .dashboard-grid,
  .stats-grid,
  .kpi-grid,
  .modules-grid,
  .report-grid,
  .pmx-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .row,
  .toolbar,
  .actions,
  .filters,
  .header-actions,
  .page-actions,
  .button-row,
  .form-row,
  .controls {
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .toolbar > *,
  .actions > *,
  .filters > *,
  .header-actions > *,
  .page-actions > *,
  .controls > * {
    min-width: 0 !important;
  }

  table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
  }

  .table,
  .table-wrap,
  .table-wrapper,
  .data-table,
  .list-table,
  .pmx-table,
  .responsive-table,
  .report-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    white-space: nowrap;
  }

  input,
  select,
  textarea,
  button,
  .btn,
  .button,
  a.btn,
  [role="button"] {
    max-width: 100%;
  }

  button,
  .btn,
  .button,
  a.btn,
  [role="button"] {
    min-height: 40px;
    padding: 10px 12px;
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    min-height: 40px;
    font-size: 16px;
  }

  .hide-mobile {
    display: none !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    white-space: pre-wrap;
    word-break: break-word;
  }

  .sidebar,
  .pmx-sidebar,
  aside {
    max-width: 100vw !important;
  }

  .modal,
  .dialog,
  .drawer,
  .popover {
    max-width: calc(100vw - 24px) !important;
  }

  .modal-content,
  .dialog-content,
  .drawer-content {
    max-width: 100% !important;
    overflow-x: auto;
  }
}

/* PMX_MOBILE_LISTS_PATCH_V2
   Target: invoices.html + purchase-bills.html.
   Purpose: make dense finance tables/lists usable on mobile without changing backend/data.
*/

@media (max-width: 720px) {
  body[data-pmx-mobile-list-v2="1"] {
    overflow-x: hidden !important;
  }

  body[data-pmx-mobile-list-v2="1"] table,
  body[data-pmx-mobile-list-v2="1"] thead,
  body[data-pmx-mobile-list-v2="1"] tbody,
  body[data-pmx-mobile-list-v2="1"] tr,
  body[data-pmx-mobile-list-v2="1"] th,
  body[data-pmx-mobile-list-v2="1"] td {
    max-width: 100% !important;
  }

  body[data-pmx-mobile-list-v2="1"] table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  body[data-pmx-mobile-list-v2="1"] .table,
  body[data-pmx-mobile-list-v2="1"] .table-wrap,
  body[data-pmx-mobile-list-v2="1"] .table-wrapper,
  body[data-pmx-mobile-list-v2="1"] .data-table,
  body[data-pmx-mobile-list-v2="1"] .list-table,
  body[data-pmx-mobile-list-v2="1"] .pmx-table,
  body[data-pmx-mobile-list-v2="1"] .responsive-table,
  body[data-pmx-mobile-list-v2="1"] .report-table,
  body[data-pmx-mobile-list-v2="1"] [class*="table"],
  body[data-pmx-mobile-list-v2="1"] [class*="Table"],
  body[data-pmx-mobile-list-v2="1"] [class*="list"],
  body[data-pmx-mobile-list-v2="1"] [class*="List"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-pmx-mobile-list-v2="1"] th,
  body[data-pmx-mobile-list-v2="1"] td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 8px 8px !important;
  }

  body[data-pmx-mobile-list-v2="1"] td a,
  body[data-pmx-mobile-list-v2="1"] td button,
  body[data-pmx-mobile-list-v2="1"] td .btn,
  body[data-pmx-mobile-list-v2="1"] td .button {
    white-space: normal !important;
  }

  body[data-pmx-mobile-list-v2="1"] .toolbar,
  body[data-pmx-mobile-list-v2="1"] .filters,
  body[data-pmx-mobile-list-v2="1"] .actions,
  body[data-pmx-mobile-list-v2="1"] .page-actions,
  body[data-pmx-mobile-list-v2="1"] .header-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body[data-pmx-mobile-list-v2="1"] .toolbar button,
  body[data-pmx-mobile-list-v2="1"] .toolbar a,
  body[data-pmx-mobile-list-v2="1"] .filters button,
  body[data-pmx-mobile-list-v2="1"] .filters a,
  body[data-pmx-mobile-list-v2="1"] .actions button,
  body[data-pmx-mobile-list-v2="1"] .actions a,
  body[data-pmx-mobile-list-v2="1"] .page-actions button,
  body[data-pmx-mobile-list-v2="1"] .page-actions a {
    width: 100% !important;
    min-height: 44px !important;
  }

  body[data-pmx-mobile-list-v2="1"] input,
  body[data-pmx-mobile-list-v2="1"] select,
  body[data-pmx-mobile-list-v2="1"] textarea {
    width: 100% !important;
  }

  body[data-pmx-mobile-list-v2="1"] .badge,
  body[data-pmx-mobile-list-v2="1"] .status,
  body[data-pmx-mobile-list-v2="1"] .chip,
  body[data-pmx-mobile-list-v2="1"] .tag {
    display: inline-flex !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* PMX_MOBILE_INVOICES_CARDS_PATCH_V3
   Target: invoices.html only.
   Reason: invoice table #billsBody / tr.bill-row overflows mobile viewport.
   Strategy: transform invoice rows into mobile cards.
*/

@media (max-width: 720px) {
  body[data-pmx-invoices-mobile-v3="1"] {
    overflow-x: hidden !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] thead {
    display: none !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] tbody,
  body[data-pmx-invoices-mobile-v3="1"] #billsBody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] tr,
  body[data-pmx-invoices-mobile-v3="1"] tr.bill-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(148, 163, 184, .25) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .04) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] td {
    display: grid !important;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 8px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] td::before {
    content: "حقل";
    font-size: 12px;
    font-weight: 700;
    opacity: .72;
    line-height: 1.5;
  }

  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(1)::before { content: "رقم الفاتورة"; }
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(2)::before { content: "العميل"; }
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(3)::before { content: "الحالة"; }
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(4)::before { content: "القيد"; }
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(5)::before { content: "المبلغ"; }
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(6)::before { content: "ZATCA"; }
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(7)::before { content: "الإجراءات"; }

  body[data-pmx-invoices-mobile-v3="1"] td > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] td:last-child,
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(7) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(148, 163, 184, .18) !important;
  }

  body[data-pmx-invoices-mobile-v3="1"] td:last-child::before,
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(7)::before {
    flex: 0 0 100%;
  }

  body[data-pmx-invoices-mobile-v3="1"] td:last-child a,
  body[data-pmx-invoices-mobile-v3="1"] td:last-child button,
  body[data-pmx-invoices-mobile-v3="1"] td:last-child .btn,
  body[data-pmx-invoices-mobile-v3="1"] td:last-child .button,
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(7) a,
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(7) button,
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(7) .btn,
  body[data-pmx-invoices-mobile-v3="1"] td:nth-child(7) .button {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* PMX_MOBILE_TABLES_CARDS_PATCH_V4
   Target: parties.html, accounting.html, posted-entries.html.
   Purpose: remove remaining mobile offscreen table layouts and hide closed help panel.
*/

@media (max-width: 720px) {
  body[data-pmx-parties-mobile-v4="1"] .pmx-help-panel:not(.open):not(.active):not(.is-open):not([data-open="1"]) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-pmx-parties-mobile-v4="1"] .pmx-help-panel.open,
  body[data-pmx-parties-mobile-v4="1"] .pmx-help-panel.active,
  body[data-pmx-parties-mobile-v4="1"] .pmx-help-panel.is-open,
  body[data-pmx-parties-mobile-v4="1"] .pmx-help-panel[data-open="1"] {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }

  body[data-pmx-parties-mobile-v4="1"] table,
  body[data-pmx-accounting-mobile-v4="1"] table,
  body[data-pmx-posted-mobile-v4="1"] table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  body[data-pmx-parties-mobile-v4="1"] thead,
  body[data-pmx-accounting-mobile-v4="1"] thead,
  body[data-pmx-posted-mobile-v4="1"] thead {
    display: none !important;
  }

  body[data-pmx-parties-mobile-v4="1"] tbody,
  body[data-pmx-accounting-mobile-v4="1"] tbody,
  body[data-pmx-posted-mobile-v4="1"] tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-pmx-parties-mobile-v4="1"] tr,
  body[data-pmx-accounting-mobile-v4="1"] tr,
  body[data-pmx-posted-mobile-v4="1"] tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(148, 163, 184, .25) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .04) !important;
    overflow: hidden !important;
  }

  body[data-pmx-parties-mobile-v4="1"] td,
  body[data-pmx-accounting-mobile-v4="1"] td,
  body[data-pmx-posted-mobile-v4="1"] td {
    display: grid !important;
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 8px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  body[data-pmx-parties-mobile-v4="1"] td::before,
  body[data-pmx-accounting-mobile-v4="1"] td::before,
  body[data-pmx-posted-mobile-v4="1"] td::before {
    content: "Field";
    font-size: 12px;
    font-weight: 700;
    opacity: .72;
    line-height: 1.5;
  }

  body[data-pmx-parties-mobile-v4="1"] td:nth-child(1)::before { content: "Name"; }
  body[data-pmx-parties-mobile-v4="1"] td:nth-child(2)::before { content: "Type"; }
  body[data-pmx-parties-mobile-v4="1"] td:nth-child(3)::before { content: "Tax ID"; }
  body[data-pmx-parties-mobile-v4="1"] td:nth-child(4)::before { content: "Phone"; }
  body[data-pmx-parties-mobile-v4="1"] td:nth-child(5)::before { content: "Balance"; }
  body[data-pmx-parties-mobile-v4="1"] td:nth-child(6)::before { content: "Actions"; }
  body[data-pmx-parties-mobile-v4="1"] td:nth-child(7)::before { content: "Actions"; }

  body[data-pmx-accounting-mobile-v4="1"] td:nth-child(1)::before { content: "Entry"; }
  body[data-pmx-accounting-mobile-v4="1"] td:nth-child(2)::before { content: "Date"; }
  body[data-pmx-accounting-mobile-v4="1"] td:nth-child(3)::before { content: "Description"; }
  body[data-pmx-accounting-mobile-v4="1"] td:nth-child(4)::before { content: "Amount"; }
  body[data-pmx-accounting-mobile-v4="1"] td:nth-child(5)::before { content: "Status"; }
  body[data-pmx-accounting-mobile-v4="1"] td:nth-child(6)::before { content: "Actions"; }

  body[data-pmx-posted-mobile-v4="1"] td:nth-child(1)::before { content: "Date"; }
  body[data-pmx-posted-mobile-v4="1"] td:nth-child(2)::before { content: "Description"; }
  body[data-pmx-posted-mobile-v4="1"] td:nth-child(3)::before { content: "Amount"; }
  body[data-pmx-posted-mobile-v4="1"] td:nth-child(4)::before { content: "Status"; }
  body[data-pmx-posted-mobile-v4="1"] td:nth-child(5)::before { content: "Actions"; }

  body[data-pmx-parties-mobile-v4="1"] td:last-child,
  body[data-pmx-accounting-mobile-v4="1"] td:last-child,
  body[data-pmx-posted-mobile-v4="1"] td:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(148, 163, 184, .18) !important;
  }

  body[data-pmx-parties-mobile-v4="1"] td:last-child::before,
  body[data-pmx-accounting-mobile-v4="1"] td:last-child::before,
  body[data-pmx-posted-mobile-v4="1"] td:last-child::before {
    flex: 0 0 100%;
  }

  body[data-pmx-parties-mobile-v4="1"] td a,
  body[data-pmx-parties-mobile-v4="1"] td button,
  body[data-pmx-accounting-mobile-v4="1"] td a,
  body[data-pmx-accounting-mobile-v4="1"] td button,
  body[data-pmx-posted-mobile-v4="1"] td a,
  body[data-pmx-posted-mobile-v4="1"] td button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}