/* Screen-only OFP layouts. Print output stays controlled by ofp.css. */
@media screen {
  .ofp-detail-page .ofp-official-document {
    box-sizing: border-box;
    width: 100%;
    max-width: 1120px;
    margin: 18px auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #cddae7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(20, 45, 70, .08);
    color: #213850;
  }
  .ofp-official-letterhead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #dce5ed;
    background: #f8fbfe;
  }
  .ofp-official-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .ofp-official-brand img { display: block; width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; border-radius: 10px; }
  .ofp-official-brand strong { display: block; color: #183754; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.1; letter-spacing: .025em; }
  .ofp-official-brand span { display: block; margin-top: 4px; color: #6f8294; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
  .ofp-official-title span { display: block; padding: 10px 18px; border: 1px solid #b9cbd9; border-radius: 999px; background: #fff; color: #193a57; font-size: 15px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
  .ofp-official-payee-row, .ofp-official-date-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(215px, 27%); border-bottom: 1px solid #dce5ed; }
  .ofp-official-field { display: grid; grid-template-columns: 124px minmax(0, 1fr); min-width: 0; border-right: 1px solid #dce5ed; }
  .ofp-official-field > span, .ofp-official-field > strong { display: flex; align-items: center; min-width: 0; padding: 13px 16px; overflow-wrap: anywhere; }
  .ofp-official-field > span { color: #61788e; background: #f8fafc; font-size: 11px; font-weight: 800; }
  .ofp-official-field > strong { color: #213c55; font-size: 12px; line-height: 1.45; }
  .ofp-official-number { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px; }
  .ofp-official-number span { color: #7b8da0; font-size: 11px; font-weight: 800; }
  .ofp-official-number strong { color: #c42d36; font-size: 17px; font-weight: 900; white-space: nowrap; }
  .ofp-official-ofp-date { border-right: 0; grid-template-columns: 100px minmax(0, 1fr); }
  .ofp-official-table-wrap { width: 100%; overflow-x: auto; }
  .ofp-official-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
  .ofp-official-table th { padding: 12px 16px; border-bottom: 1px solid #cfdbe6; background: #eff4f9; color: #425e77; font-size: 10px; font-weight: 900; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
  .ofp-official-project-col { width: 27%; }
  .ofp-official-amount-col { width: 20%; text-align: right !important; }
  .ofp-official-table tbody td { padding: 15px 16px; border-bottom: 1px solid #e5ecf2; color: #334f68; font-size: 12px; line-height: 1.5; vertical-align: top; overflow-wrap: anywhere; }
  .ofp-official-table tbody tr:nth-child(even) { background: #fbfcfe; }
  .ofp-official-project strong { color: #1c3b57; font-size: 12px; font-style: normal; }
  .ofp-official-po-line { display: grid; gap: 3px; }
  .ofp-official-po-line > strong { color: #1b4775; font-size: 11px; }
  .ofp-official-particulars small { display: block; margin-top: 7px; color: #7f91a2; font-size: 10px; }
  .ofp-official-amount { color: #173b57 !important; font-weight: 850; text-align: right; white-space: nowrap; }
  .ofp-official-table tfoot td { padding: 9px 16px; border-top: 1px solid #dde6ed; background: #fff; color: #263f57; font-size: 12px; }
  .ofp-official-table tfoot td:first-child { text-align: right; font-weight: 800; }
  .ofp-official-table tfoot td:last-child { text-align: right; white-space: nowrap; }
  .ofp-official-ewt td { color: #a63e45; }
  .ofp-official-grand-total td { border-top: 2px solid #a8bbcc; background: #eef4fa; color: #15334d; font-size: 14px; font-weight: 900; }
  .ofp-official-signoff { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 80px; padding: 18px 24px; border-top: 1px solid #dce5ed; }
  .ofp-official-signoff > span { color: #687d91; font-size: 11px; font-weight: 800; }
  .ofp-official-signoff strong { display: block; color: #1f3d58; font-size: 14px; }
  .ofp-official-signoff i { display: block; height: 1px; margin-top: 7px; background: #8ca3b6; }

  /* Create OFP refresh: compact, readable progress and section headings. */
  .ofp-create-intro { min-width: 0; }
  .ofp-create-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .ofp-create-flow > span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #d8e4ee; border-radius: 999px; background: #fff; color: #3a5872; font-size: 11px; font-weight: 750; white-space: nowrap; }
  .ofp-create-flow > span:first-child { border-color: #b9d6ee; background: #eaf4fc; color: #1d5e91; }
  .ofp-create-flow > span > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e8eef5; color: #315571; font-size: 10px; }
  .ofp-create-flow > span:first-child > b { background: #2c76b2; color: #fff; }
  .ofp-create-flow > svg { width: 14px; height: 14px; color: #9dafbf; flex: 0 0 14px; }
  .ofp-step-copy, .ofp-picker-section-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .ofp-step-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: #e9f2fb; color: #286ba5; }
  .ofp-step-icon svg { width: 20px; height: 20px; }
  .ofp-step-copy h3, .ofp-picker-section-heading h3 { margin: 3px 0; color: #173b59; font-size: 17px; }
  .ofp-step-copy p, .ofp-picker-section-heading p { margin: 0; color: #6f8295; font-size: 11px; line-height: 1.5; }
  .ofp-picker-section-heading { margin: 18px 0 13px; }

  .ofp-list-filter { display: grid !important; grid-template-columns: minmax(210px, 1.6fr) repeat(4, minmax(120px, .7fr)) auto !important; align-items: end; gap: 10px; padding: 0 16px 16px !important; border: 1px solid #dce6ee !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 9px 26px rgba(23,55,80,.055) !important; }
  .ofp-filter-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; margin: 0 -16px 2px; padding: 14px 17px; border-bottom: 1px solid #e5edf3; border-radius: 16px 16px 0 0; background: #f5f9fc; }
  .ofp-filter-heading > svg { width: 36px; height: 36px; flex: 0 0 36px; padding: 8px; border-radius: 10px; background: #e6f2f7; color: #24617f; }
  .ofp-filter-heading strong, .ofp-filter-heading small { display: block; }
  .ofp-filter-heading strong { color: #173b56; font-size: 13px; }
  .ofp-filter-heading small { margin-top: 2px; color: #7c8e9f; font-size: 10px; }
  .ofp-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0 !important; }
  .ofp-filter-field > span { color: #63778b; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
  .ofp-filter-field :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; border: 1px solid #cddae6; border-radius: 9px; background: #fff; color: #28455f; font-size: 11px; }
  .ofp-filter-search > div { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid #cddae6; border-radius: 9px; }
  .ofp-filter-search > div > svg { width: 16px; height: 16px; flex: 0 0 16px; color: #8195a8; }
  .ofp-list-filter .ofp-filter-search input { min-height: 38px; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; }
  html body .ofp-list-filter .ofp-filter-search input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .ofp-filter-actions { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 !important; white-space: nowrap; }
  .ofp-filter-actions .btn { min-height: 40px; }
}
@media screen and (max-width: 1250px) {
  .ofp-list-filter { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ofp-filter-search { grid-column: span 2; }
  .ofp-filter-actions { grid-column: span 2; }
}
@media screen and (max-width: 760px) {
  .ofp-official-letterhead { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .ofp-official-brand img { width: 48px; height: 48px; flex-basis: 48px; }
  .ofp-official-title span { display: inline-block; font-size: 12px; }
  .ofp-official-payee-row, .ofp-official-date-row { grid-template-columns: 1fr; }
  .ofp-official-field { grid-template-columns: 100px minmax(0, 1fr); border-right: 0; border-bottom: 1px solid #e2eaf1; }
  .ofp-official-number { justify-content: flex-start; }
  .ofp-official-ofp-date { grid-template-columns: 100px minmax(0, 1fr); }
  .ofp-official-signoff { padding: 16px; }
  .ofp-create-flow > svg { display: none; }
  .ofp-list-filter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 0 12px 12px !important; }
  .ofp-filter-heading { margin: 0 -12px 2px; }
  .ofp-filter-search, .ofp-filter-actions { grid-column: 1 / -1; }
  .ofp-filter-actions .btn { flex: 1; justify-content: center; }
}
@media screen and (max-width: 480px) {
  .ofp-list-filter { grid-template-columns: 1fr !important; }
  .ofp-filter-field, .ofp-filter-search, .ofp-filter-actions { grid-column: 1 !important; }
  .ofp-create-flow { gap: 6px; }
  .ofp-create-flow > span { font-size: 10px; }
}

/* Keep all Payment Details fields aligned on the same baseline. */
@media screen {
  .ofp-header-form-card .ofp-form-grid { align-items: start; }
  .ofp-header-form-card .ofp-form-field { display: flex; min-width: 0; flex-direction: column; }
  .ofp-header-form-card .ofp-field-label { display: flex !important; min-height: 37px; margin: 0 0 7px !important; flex-direction: column; justify-content: flex-end; gap: 2px; }
  .ofp-header-form-card .ofp-field-label > span { margin: 0 !important; color: #35516a; font-size: 11px; font-weight: 800; line-height: 1.2; }
  .ofp-header-form-card .ofp-field-label > small { display: block; margin: 0; color: #71869a; font-size: 9px; font-weight: 650; line-height: 1.25; }
  .ofp-header-form-card .ofp-form-field > input,
  .ofp-header-form-card .ofp-form-field > select { min-height: 45px; }
}


/* MPMS global table polish — colored headers + consistent scrolling. */
@media screen {
  body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  ) {
    max-width: 100%;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #7894ad #edf3f8;
    scrollbar-gutter: stable;
  }

  body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  )::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  )::-webkit-scrollbar-track {
    background: #edf3f8;
    border-radius: 999px;
  }

  body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  )::-webkit-scrollbar-thumb {
    background: #7894ad;
    border: 2px solid #edf3f8;
    border-radius: 999px;
  }

  body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  )::-webkit-scrollbar-thumb:hover {
    background: #587892;
  }

  /* Use one clear header treatment across every MPMS table. */
  body.mpms-body .page-content table thead th {
    background: linear-gradient(135deg, #173f68 0%, #1f6687 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .14) !important;
    font-weight: 850;
  }

  body.mpms-body .page-content table thead th :is(a, span, i, svg),
  body.mpms-body .page-content table thead th a.table-sort-link,
  body.mpms-body .page-content table thead th .table-sort-link {
    color: #ffffff !important;
    stroke: currentColor !important;
  }

  body.mpms-body .page-content table thead th a.table-sort-link,
  body.mpms-body .page-content table thead th .table-sort-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  body.mpms-body .page-content table thead th a.table-sort-link:hover,
  body.mpms-body .page-content table thead th .table-sort-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .18) !important;
  }

  body.mpms-body .page-content table thead th a.table-sort-link.active,
  body.mpms-body .page-content table thead th .table-sort-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .20) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  }

  body.mpms-body .page-content table thead th a.table-sort-link.active :is(svg, i),
  body.mpms-body .page-content table thead th .table-sort-link.active :is(svg, i) {
    color: #ffffff !important;
    stroke: currentColor !important;
  }

  body.mpms-body .page-content table thead th .table-sort-pair .table-sort-link + .table-sort-link {
    border-left-color: rgba(255, 255, 255, .18) !important;
  }

  html[data-theme="dark"] body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  ) {
    scrollbar-color: #5f7f9e #13263a;
  }

  html[data-theme="dark"] body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  )::-webkit-scrollbar-track {
    background: #13263a;
  }

  html[data-theme="dark"] body.mpms-body .page-content :is(
    .mpms-table-wrap,
    .approved-po-table-wrap,
    .ofp-register-wrap,
    .ofp-picker-table-wrap,
    .ofp-draft-table-wrap,
    .ofp-official-table-wrap,
    .direct-lines-table-wrap,
    .master-catalog-table-wrap
  )::-webkit-scrollbar-thumb {
    background: #5f7f9e;
    border-color: #13263a;
  }
}