/* One set of invoice rows/actions; only their mobile presentation changes. */
.invoice-register-mobile-only {
  display: none !important;
}

@media (max-width: 680px) {
  body.invoice-mobile-register-active #tab-invoices .invoice-panel-card {
    min-width: 0;
    padding: 14px 10px;
    border: 0;
    background: #f7f9fc;
    box-shadow: none;
  }
  body.invoice-mobile-register-active #invoiceCreateHeading {
    display: block;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  body.invoice-mobile-register-active .invoice-create-heading-bar {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  body.invoice-mobile-register-active #invoiceBackToHomeBtn {
    width: auto;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    color: #15804e;
    text-align: left;
    white-space: normal;
  }
  body.invoice-mobile-register-active #invoiceMode {
    align-self: flex-start;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #17243d;
    font-size: 22px;
    font-weight: 800;
  }
  #invoiceViewPanel {
    min-width: 0;
    gap: 14px;
  }
  #invoiceViewPanel > .invoice-register-actions {
    display: none;
  }
  #invoiceViewPanel .invoice-register-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background: #fff;
    box-shadow: none;
    align-items: end;
  }
  #invoiceViewPanel .invoice-register-search {
    grid-column: 1 / -1;
    order: 0;
  }
  #invoiceViewPanel .invoice-register-search input[type="search"] {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  #invoiceViewPanel .compact-filter {
    font-size: 12px;
    order: 1;
    margin: 0;
  }
  #invoiceViewPanel .compact-filter .field-optional { display: none; }
  #invoiceViewPanel .compact-filter select,
  #invoiceViewPanel .compact-filter input[type="date"] {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }
  #invoiceViewPanel .compact-filter .field-control {
    min-width: 0;
    max-width: 100%;
  }
  #invoiceViewPanel .invoice-register-filter-toggle,
  #invoiceViewPanel .invoice-register-clear-filters {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px;
    border: 1px solid #dce3f0;
    border-radius: 12px;
    background: #f5f7fd;
    color: #304777;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    touch-action: manipulation;
    cursor: pointer;
  }
  #invoiceViewPanel .invoice-register-filter-toggle { order: 2; }
  #invoiceViewPanel .invoice-register-filter-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
  #invoiceViewPanel .invoice-register-filter-toggle.has-active-filters { border-color: #2860d8; color: #1854ce; background: #edf3ff; }
  #invoiceViewPanel .invoice-register-date-filter,
  #invoiceViewPanel #invoiceClearDateFilterBtn { display: none; }
  #invoiceViewPanel.invoice-register-filters-open .invoice-register-date-filter { display: grid; order: 3; }
  #invoiceViewPanel.invoice-register-filters-open #invoiceClearDateFilterBtn { display: inline-flex; order: 4; width: 100%; min-height: 44px; font-size: 13px; }
  #invoiceViewPanel .invoice-register-clear-filters { order: 5; grid-column: 1 / -1; border: 0; background: transparent; color: #596d8a; min-height: 44px; padding: 6px; }
  #invoiceViewPanel.invoice-register-filters-open .invoice-register-clear-filters { grid-column: auto; }
  #invoiceViewPanel .invoice-register-mobile-meta {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #536581;
    font-size: 12px;
  }
  #invoiceMobileRegisterCount { color: #263c60; font-size: 14px; }
  #invoiceViewPanel .invoice-register-table {
    min-width: 0;
    width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  #invoiceViewPanel .invoice-register-table table,
  #invoiceViewPanel .invoice-register-table thead,
  #invoiceViewPanel #invoiceTableHeaderRow {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #invoiceViewPanel #invoiceTableHeaderRow th { display: none; }
  #invoiceViewPanel #invoiceTableHeaderRow .invoice-register-select-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 44px;
    padding: 0 4px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    position: static;
  }
  #invoiceViewPanel #invoiceTableHeaderRow .invoice-register-select-cell::after { content: "Select all on this page"; }
  #invoiceViewPanel #invoiceTableBody { display: grid; gap: 12px; width: 100%; }
  #invoiceViewPanel .invoice-register-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dfe6f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(28, 49, 83, 0.045);
  }
  #invoiceViewPanel .invoice-register-table .invoice-register-row > td {
    display: block;
    grid-column: 1 / -1;
    order: 10;
    min-width: 0;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: #24334e;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column]::before {
    content: attr(data-invoice-label);
    display: block;
    margin-bottom: 4px;
    color: #728099;
    font-size: 11px;
    font-weight: 600;
  }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="invoiceNumber"] { order: 1; padding-right: 50px; font-size: 16px; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="invoiceDate"] { order: 2; margin-top: -5px; color: #728099; font-size: 12px; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="customer"] { order: 3; font-weight: 750; font-size: 15px; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="customer"] .muted { color: #738199; font-size: 13px; font-weight: 400; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="status"] { order: 4; grid-column: 1; align-self: center; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="items"] { order: 5; grid-column: 2; align-self: center; justify-self: end; color: #75839b; font-size: 12px; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="items"]::before { display: inline; margin-right: 5px; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="grandTotal"],
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="amountReceived"],
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="balanceDue"],
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="dueDate"] {
    order: 6;
    grid-column: auto;
    padding: 10px;
    border-radius: 10px;
    background: #f7f9fc;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
  }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="amountReceived"] { order: 7; color: #16834d; background: #f2faf5; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="balanceDue"] { order: 8; color: #b63c36; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="dueDate"] { order: 9; }
  #invoiceViewPanel .invoice-register-row > td.invoice-register-mobile-only { display: block !important; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="actions"] { position: absolute; top: 12px; right: 12px; width: 44px; }
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="invoiceNumber"]::before,
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="invoiceDate"]::before,
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="customer"]::before,
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="status"]::before,
  #invoiceViewPanel .invoice-register-row > td[data-invoice-column="actions"]::before { display: none; }
  #invoiceViewPanel .invoice-number-verify-cell { display: flex; padding: 0; border-radius: 0; background: transparent; }
  #invoiceViewPanel .invoice-register-row.is-reconciled > td:first-child { box-shadow: none; }
  #invoiceViewPanel .invoice-reconciled-tick { flex: 0 0 auto; }
  #invoiceViewPanel .invoice-total-hover { min-height: 0; padding: 0; font-size: inherit; color: inherit; }
  #invoiceViewPanel .quotation-status-badge { max-width: 100%; white-space: normal; font-size: 11px; padding: 4px 8px; }
  #invoiceViewPanel .invoice-row-action-menu .action-menu-summary { min-height: 44px; width: 44px; min-width: 44px; }
  #invoiceViewPanel .invoice-row-action-menu .action-menu-list { max-width: calc(100vw - 24px); }
  #invoiceViewPanel .invoice-row-action-menu .action-menu-list button { min-height: 44px; }
  #invoiceViewPanel .invoice-register-row > td.invoice-register-select-cell { order: 0; padding-right: 50px; display: flex; align-items: center; min-height: 28px; gap: 8px; color: #78869b; font-size: 11px; }
  #invoiceViewPanel .invoice-register-row > td.invoice-register-select-cell::after { content: "Select invoice"; }
  #invoiceViewPanel .invoice-register-select-cell input { width: 22px; height: 22px; margin: 0; }
  #invoiceViewPanel .invoice-register-table td[colspan] { display: block; width: auto; border: 0; padding: 16px; background: #fff; border-radius: 14px; }
  #invoiceViewPanel .invoice-register-pagination { gap: 12px; padding: 12px; box-shadow: none; font-size: 12px; }
  #invoiceViewPanel .invoice-register-pagination-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; width: 100%; }
  #invoiceViewPanel .invoice-register-page-size { grid-column: 1 / -1; justify-content: space-between; }
  #invoiceViewPanel #invoiceRowsPerPage { min-height: 44px; font-size: 16px; }
  #invoiceViewPanel #invoicePrevPageBtn,
  #invoiceViewPanel #invoiceNextPageBtn { width: auto; min-width: 0; min-height: 44px; padding: 8px; font-size: 12px; justify-content: center; }
  #invoiceViewPanel #invoicePageNumber { align-self: center; min-width: 0; padding: 6px; font-size: 12px; }
  #invoiceViewPanel .invoice-bulk-verification-toolbar { padding: 12px; font-size: 13px; }
  #invoiceViewPanel .invoice-bulk-verification-toolbar .action-row { display: flex; flex-wrap: wrap; }
  #invoiceViewPanel .invoice-bulk-verification-toolbar button { min-height: 44px; font-size: 12px; }
}