/*
 * Responsive redesign — Phase 2
 * Finance, receipts, purchasing, and payment workflows.
 * Desktop presentation is intentionally unchanged above 900px.
 */

.ofo-responsive-form,
.ofo-editable-card-table,
.ofo-transaction-card-table {
  min-width: 0;
}

.ofo-mobile-field-label {
  display: none;
  color: #64748b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.receipt-mobile-more { display: none; }
.receipt-image-unavailable {
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px;
  color: var(--ofo-r-muted);
  background: #f8fafc;
  text-align: center;
  text-decoration: none;
}
.receipt-image-unavailable[hidden] { display: none; }
.receipt-image-unavailable strong { color: var(--ofo-r-text); }
.receipt-image-unavailable small { font-size: .82rem; }

@media (max-width: 900px) {
  .finance-content-body {
    background: #f3f6fa;
  }

  .finance-content-body > .page-sticky-header,
  .finance-content-body > .perpetua-page-header {
    margin-inline: 0;
  }

  .finance-content-body .card {
    min-width: 0;
    border-color: #dce3ec;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }

  .finance-content-body .card-body {
    min-width: 0;
  }

  .finance-module-header .finance-section-tabs:not(.finance-secondary-tabs) {
    display: none;
  }

  .finance-module-header {
    margin-bottom: .75rem !important;
  }

  .finance-module-title-row {
    min-height: 52px;
    align-items: center !important;
    padding: .55rem 1rem !important;
  }

  .finance-module-title {
    font-size: 1.08rem !important;
  }

  .finance-content-body input:not([type="checkbox"]):not([type="radio"]),
  .finance-content-body select,
  .finance-content-body textarea,
  .finance-content-body .btn,
  .ofo-payment-workflow input:not([type="checkbox"]):not([type="radio"]),
  .ofo-payment-workflow select,
  .ofo-payment-workflow textarea,
  .ofo-payment-workflow .btn {
    min-height: 44px;
  }

  .finance-content-body .row > [class*="col-md-"],
  .ofo-payment-workflow .row > [class*="col-md-"] {
    min-width: 0;
  }

  .ofo-responsive-form > .ofo-mobile-action-bar,
  .ofo-payment-workflow .ofo-mobile-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    margin: 1rem -.75rem -.75rem;
    padding: .75rem max(.75rem, env(safe-area-inset-right))
      calc(.75rem + env(safe-area-inset-bottom))
      max(.75rem, env(safe-area-inset-left));
    border-top: 1px solid #dce3ec;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
  }

  .ofo-responsive-form {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .finance-select-vendor-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem !important;
  }

  .finance-select-vendor-form > div {
    min-width: 0 !important;
  }

  .receipt-review-grid {
    gap: .85rem !important;
    padding-inline: 0 !important;
  }

  .receipt-status-row {
    padding-inline: 0 !important;
  }

  .receipt-details-grid {
    gap: .8rem !important;
  }

  .receipt-detail-half,
  .receipt-detail-quarter,
  .receipt-detail-category,
  .receipt-detail-notes {
    grid-column: span 6 !important;
  }

  .receipt-image-stage,
  .receipt-pdf-preview {
    min-height: 18rem !important;
  }

  .receipt-line-items-wrap {
    overflow: visible !important;
  }

  #content .finance-content-body .receipt-line-items-wrap {
    overflow: visible !important;
  }

  body #content .finance-content-body table.receipt-line-items-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
  }

  body #content .finance-content-body table.receipt-line-items-table colgroup,
  body #content .finance-content-body table.table.receipt-line-items-table[data-no-managed-table] > thead {
    display: none !important;
  }

  body #content .finance-content-body table.receipt-line-items-table > tbody,
  body #content .finance-content-body table.receipt-line-items-table > tbody > tr,
  body #content .finance-content-body table.receipt-line-items-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  body #content .finance-content-body table.receipt-line-items-table > tbody > tr {
    margin-bottom: .75rem;
    padding: .75rem;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    background: #fff;
  }

  body #content .finance-content-body table.receipt-line-items-table > tbody > tr > td {
    min-width: 0;
    padding: .3rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .receipt-line-items-table .ofo-mobile-field-label {
    display: block;
    margin-bottom: .08rem;
  }

  .receipt-line-items-table .receipt-line-actions {
    margin-top: .35rem;
    padding-top: .55rem !important;
    border-top: 1px solid #edf1f5 !important;
  }

  .receipt-line-items-table .receipt-line-action-buttons {
    flex-wrap: wrap;
  }

  .receipt-line-items-table .receipt-line-action-buttons .btn {
    flex: 1 1 9rem;
  }

  .receipt-line-warranty input[name$="-warranty_duration_value"],
  .receipt-line-warranty select[name$="-warranty_duration_unit"] {
    width: auto;
    min-width: 0;
  }

  .ofo-editable-card-wrap,
  .ofo-transaction-card-wrap {
    overflow: visible !important;
  }

  .ofo-editable-card-table,
  .ofo-transaction-card-table {
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .ofo-editable-card-table thead,
  .ofo-transaction-card-table thead {
    display: none;
  }

  .ofo-editable-card-table tbody,
  .ofo-editable-card-table tr,
  .ofo-editable-card-table td,
  .ofo-transaction-card-table tbody,
  .ofo-transaction-card-table tr,
  .ofo-transaction-card-table td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ofo-editable-card-table tr,
  .ofo-transaction-card-table tr {
    margin-bottom: .75rem;
    padding: .75rem;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    background: #fff;
  }

  .ofo-editable-card-table td,
  .ofo-transaction-card-table td {
    min-width: 0;
    padding: .28rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .ofo-editable-card-table .perpetua-cell-text,
  .ofo-transaction-card-table .perpetua-cell-text {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .ofo-editable-card-table td::before,
  .ofo-transaction-card-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .08rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
  }

  .ofo-editable-card-table td[data-label=""]::before,
  .ofo-transaction-card-table td[data-label=""]::before {
    display: none;
  }

  .ofo-editable-card-table input:not([type="checkbox"]):not([type="radio"]),
  .ofo-editable-card-table select,
  .ofo-editable-card-table textarea {
    width: 100%;
    max-width: none;
  }

  .cash-activity-scroll {
    overflow: visible !important;
  }

  .finance-content-body .table-responsive:has(> .payables-table),
  .finance-content-body .table-responsive:has(> .receivables-table) {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /*
   * Finance list tables are enhanced by the shared managed-table script.
   * Its desktop sizing must not win over the responsive card presentation.
   */
  body #content .finance-content-body table.payables-table,
  body #content .finance-content-body table.receivables-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  body #content .finance-content-body table.payables-table > thead,
  body #content .finance-content-body table.receivables-table > thead {
    display: none !important;
  }

  body #content .finance-content-body table.payables-table > tbody,
  body #content .finance-content-body table.payables-table > tbody > tr,
  body #content .finance-content-body table.payables-table > tbody > tr > td,
  body #content .finance-content-body table.receivables-table > tbody,
  body #content .finance-content-body table.receivables-table > tbody > tr,
  body #content .finance-content-body table.receivables-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  body #content .finance-content-body table.payables-table > tbody > tr,
  body #content .finance-content-body table.receivables-table > tbody > tr {
    margin-bottom: .75rem !important;
    padding: .8rem !important;
    border: 1px solid #dce3ec !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  body #content .finance-content-body table.payables-table > tbody > tr > td,
  body #content .finance-content-body table.receivables-table > tbody > tr > td {
    min-width: 0 !important;
    padding: .25rem 0 !important;
    border: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .payables-table .perpetua-cell-text,
  .receivables-table .perpetua-cell-text {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .payables-table .payable-mobile-label,
  .receivables-table .receivable-mobile-label {
    display: block !important;
  }

  .ofo-responsive-form .row > [class*="col-md-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .ofo-responsive-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .ofo-responsive-form .form-control,
  .ofo-responsive-form .form-select,
  .ofo-responsive-form textarea {
    width: 100% !important;
    max-width: none !important;
  }

  .receipt-review-header .page-sticky-actions {
    width: auto;
  }

  .receipt-review-header {
    position: relative !important;
    z-index: 220 !important;
    overflow: visible !important;
  }

  .receipt-review-header .page-sticky-actions > form,
  .receipt-review-header .page-sticky-actions > a,
  .receipt-review-header .page-sticky-actions button[name="save_create_bill"] {
    display: none !important;
  }

  .receipt-mobile-more {
    position: relative;
    display: block;
    margin-left: .35rem;
  }

  .receipt-mobile-more summary {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    border: 1px solid #dce3ec;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: .1em;
    list-style: none;
  }

  .receipt-mobile-more summary::-webkit-details-marker {
    display: none;
  }

  .receipt-mobile-more > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 240;
    display: grid;
    width: 190px;
    gap: 6px;
    padding: 8px;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
  }

  .receipt-mobile-more form,
  .receipt-mobile-more .btn {
    width: 100%;
    margin: 0;
  }

  .settings-table-wrap:has(> .coa-table),
  .table-wrapper:has(> .statements-due-table) {
    overflow: visible !important;
  }

  body #content table.coa-table,
  body #content table.statements-due-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  body #content table.coa-table > colgroup,
  body #content table.statements-due-table > colgroup,
  body #content table.coa-table > thead,
  body #content table.statements-due-table > thead {
    display: none !important;
  }

  body #content table.coa-table > tbody,
  body #content table.coa-table > tbody > tr,
  body #content table.coa-table > tbody > tr > td,
  body #content table.statements-due-table > tbody,
  body #content table.statements-due-table > tbody > tr,
  body #content table.statements-due-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  body #content table.coa-table > tbody > tr,
  body #content table.statements-due-table > tbody > tr {
    margin-bottom: .75rem !important;
    padding: .8rem !important;
    border: 1px solid #dce3ec !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  body #content table.coa-table > tbody > tr > td,
  body #content table.statements-due-table > tbody > tr > td {
    min-width: 0 !important;
    padding: .25rem 0 !important;
    border: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    white-space: normal !important;
  }

  table.coa-table td::before,
  table.statements-due-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .08rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
  }

  table.coa-table td[data-label=""]::before,
  table.statements-due-table td[data-label=""]::before {
    display: none;
  }

  .coa-table .perpetua-cell-text,
  .statements-due-table .perpetua-cell-text {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .statements-due-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    white-space: normal !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  body #content table.coa-table > tbody > tr {
    display: grid !important;
    grid-template-columns: .7fr 1.4fr 1fr 1.3fr .8fr;
    gap: .75rem;
    align-items: center;
  }

  body #content table.coa-table > tbody > tr > td {
    width: auto !important;
  }

  body #content table.statements-due-table > tbody > tr {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem 1.25rem;
  }

  body #content table.statements-due-table > tbody > tr > td {
    width: auto !important;
  }

  body #content table.statements-due-table > tbody > tr > td:last-child {
    grid-column: 1 / -1;
  }

  body #content table.statements-due-table > tbody > tr > td:nth-child(2) {
    grid-column: span 3;
  }
}

@media (max-width: 600px) {
  .finance-content-body {
    padding-inline: 0;
  }

  .finance-content-body .card-body {
    padding: .9rem;
  }

  .finance-module-header { display: none; }

  .receipt-review-header {
    position: relative !important;
    display: flex !important;
    min-height: 58px;
    align-items: center;
    margin: 0 !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #dce3ec;
    background: #fff;
  }

  .receipt-review-header .page-sticky-left {
    min-width: 0;
    align-items: center;
  }

  .receipt-review-header .page-sticky-left > a {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  .receipt-review-header .page-sticky-left > a::before {
    content: "←";
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 42px;
    color: #172033;
    font-size: 1.35rem;
    line-height: 1;
  }

  .receipt-review-header .page-sticky-title {
    font-size: 1.05rem;
    font-weight: 850;
  }

  .receipt-review-header .page-sticky-actions {
    position: fixed;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    width: 100%;
    padding: 10px 16px;
    border-top: 1px solid #dce3ec;
    background: rgba(255,255,255,.98);
    box-shadow: 0 -8px 24px rgba(15,35,68,.08);
  }

  .receipt-review-header .page-sticky-actions > form,
  .receipt-review-header .page-sticky-actions button[name="save_create_bill"] {
    display: none !important;
  }

  .receipt-review-header .page-sticky-actions > a,
  .receipt-review-header .page-sticky-actions > button[name="save"] {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
  }

  .receipt-review-header .page-sticky-actions > a { grid-column: 1; grid-row: 1; }
  .receipt-review-header .page-sticky-actions > button[name="save"] {
    grid-column: 2;
    grid-row: 1;
    border-color: #1761dc;
    background: #1761dc;
    color: #fff !important;
  }

  .receipt-mobile-more {
    position: relative;
    display: block;
    margin-left: auto;
  }
  .receipt-mobile-more summary {
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 42px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: .1em;
    list-style: none;
  }
  .receipt-mobile-more summary::-webkit-details-marker { display: none; }
  .receipt-mobile-more > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 170;
    display: grid;
    width: 190px;
    gap: 6px;
    padding: 8px;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15,23,42,.18);
  }
  .receipt-mobile-more form,
  .receipt-mobile-more .btn { width: 100%; margin: 0; }

  body #content .finance-content-body .receipt-review-grid {
    padding-bottom: 86px !important;
  }
  body #content .finance-content-body .receipt-attachments-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body #content .finance-content-body .receipt-details-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body #content .finance-content-body .receipt-line-items-card {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .finance-content-body .page-sticky-actions {
    width: 100%;
  }

  .finance-content-body .page-sticky-actions > .btn,
  .finance-content-body .page-sticky-actions > a,
  .finance-content-body .page-sticky-actions > form {
    flex: 1 1 100%;
  }

  .finance-content-body .page-sticky-actions .btn {
    width: 100%;
  }

  .finance-select-vendor-form {
    grid-template-columns: 1fr;
  }

  .receipt-detail-half,
  .receipt-detail-quarter,
  .receipt-detail-category,
  .receipt-detail-notes {
    grid-column: 1 / -1 !important;
  }

  .receipt-image-stage,
  .receipt-pdf-preview {
    min-height: 15rem !important;
    height: auto !important;
  }

  .receipt-image-card .card-body {
    padding: .75rem;
  }

  .ofo-mobile-action-bar {
    flex-wrap: wrap;
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .ofo-mobile-action-bar .btn {
    flex: 1 1 calc(50% - .3rem);
    white-space: normal;
  }

  .ofo-mobile-action-bar .btn-primary,
  .ofo-mobile-action-bar .btn-success {
    order: 2;
  }

  .ofo-mobile-action-bar .btn-secondary,
  .ofo-mobile-action-bar .btn-outline-secondary {
    order: 1;
  }

  .receipt-upload-card,
  [data-receipt-upload-form] {
    max-width: none !important;
  }

  .statements-due-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .statements-due-bulk-bar .btn {
    width: 100%;
  }
}

@media print {
  .ofo-mobile-field-label {
    display: none !important;
  }
}