/* Retain the original MPRM layout; adapt the two MPMS screens. */
.monitoring-open { margin-top:24px; }
.monitoring-empty-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.monitoring-empty p { max-width:620px; }
.monitoring-password { max-width:720px; }
.monitoring-password h2 { margin-top:12px; }
.monitoring-password-form { display:grid; gap:10px; max-width:500px; margin-top:24px; }
.monitoring-password-form label { margin-top:10px; color:#23415d; font-size:13px; font-weight:600; }
.monitoring-password-form input { width:100%; padding:13px 15px; border:1px solid #cad7e4; border-radius:10px; background:#fff; font:inherit; }
.monitoring-password-form .btn { justify-self:start; }
.monitoring-success { padding:14px 16px; margin:0 0 18px; border-radius:10px; border:1px solid #b9decf; background:#effaf4; color:#226146; font-size:13px; line-height:1.55; }
html body.monitoring-dashboard .page-header h1 { white-space:normal; overflow-wrap:anywhere; font-size:clamp(25px,2.5vw,34px); }
html body.monitoring-dashboard #appSidebar .side-link > span:last-child { white-space:normal; line-height:1.35; }
.mpms-login .login-visual { display:flex; flex-direction:column; justify-content:space-between; }
.mpms-login .login-copy { margin:48px 0; }
.mpms-login .login-copy h1 { font-size:clamp(40px,4.2vw,64px); line-height:1.12; letter-spacing:-.045em; }
.monitoring-login-description { color:#c2d5e5; font-size:16px; line-height:1.7; }
.monitoring-login-feature { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; margin-top:22px; border:1px solid #ffffff30; border-radius:12px; color:#e3f3fa; background:#ffffff08; font-size:13px; font-weight:600; }
.monitoring-login-feature svg { width:19px; height:19px; }
.monitoring-visual-footer { display:flex; justify-content:space-between; gap:20px; color:#94b2ca; font-size:10px; letter-spacing:.08em; }
.mpms-login .v57-login-card { padding-top:38px !important; }
.mpms-login .v57-login-heading { margin-top:0 !important; }
.mpms-login .v57-login-fields .input-with-icon input { border:0 !important; box-shadow:none !important; background:transparent !important; }
.mpms-login .login-button { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:12px !important; }
.mpms-login .login-button svg { width:18px; height:18px; }
.monitoring-notice { padding:14px 16px; margin:0 0 18px; border-radius:10px; border:1px solid #efcecc; background:#fff3f1; color:#8b3028; font-size:13px; line-height:1.55; }
.monitoring-sample-accounts { margin-top:22px; padding:14px 16px; border:1px solid #dce6ef; border-radius:12px; color:#526a82; background:#f7fafc; font-size:12px; }
.monitoring-sample-accounts summary { cursor:pointer; font-weight:700; color:#254b6c; }
.monitoring-sample-accounts p { line-height:1.6; }
.monitoring-sample-accounts dl { margin:12px 0 0; }
.monitoring-sample-accounts dl div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; }
.monitoring-sample-accounts dt { font-weight:600; }
.monitoring-sample-accounts dd { margin:0; font-family:monospace; font-size:12px; }
.mpms-login .mprm-login-card-footer { margin-top:24px; }
.mpms-login a:focus-visible, .mpms-login button:focus-visible, .mpms-login input:focus-visible, .mpms-login summary:focus-visible { outline:3px solid #169bbc; outline-offset:3px; }
.monitoring-header-actions { display:flex; align-items:center; gap:24px; }
.monitoring-header-actions form { margin:0; }
.monitoring-user-name { color:#fff; font-size:13px; font-weight:600; text-align:right; }
.monitoring-user-name small { display:block; margin-top:4px; color:#b6d2e2; font-size:11px; font-weight:400; }
.monitoring-logout { display:flex; align-items:center; gap:9px; padding:11px 15px; border:1px solid #ffffff40; border-radius:10px; background:#ffffff10; color:#fff; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; }
.monitoring-logout:hover { background:#ffffff25; }
.monitoring-logout svg { width:17px; height:17px; }
.monitoring-welcome { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:10px 0 6px; }
.monitoring-welcome h2 { margin:9px 0; font-size:24px; color:#183853; }
.monitoring-welcome p { margin:0; color:#718397; font-size:13px; }
.monitoring-connection { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #dde5ee; border-radius:999px; color:#677c90; background:#fff; font-size:11px; white-space:nowrap; }
.monitoring-connection > span { width:7px; height:7px; border-radius:50%; background:#a2b3c4; }
.monitoring-empty { display:flex; min-height:420px; margin:10px 0 0; padding:56px 24px; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid #e0e8f0; box-shadow:0 6px 24px #17375004; }
.monitoring-empty-icon { display:grid; place-items:center; width:86px; height:86px; margin-bottom:28px; color:#1b6389; background:#edf5fa; border:1px solid #dcecf5; border-radius:24px; }
.monitoring-empty-icon svg { width:39px; height:39px; stroke-width:1.4; }
.monitoring-empty > .eyebrow { font-size:10px; letter-spacing:.16em; }
.monitoring-empty h2 { margin:12px 0 6px; color:#183853; font-size:25px; }
.monitoring-empty p { margin:6px 0 0; color:#708397; font-size:14px; line-height:1.8; }
@media(max-width:1000px) {
  .monitoring-user-name { display:none; }
  .monitoring-dashboard .page-header { gap:22px; }
}
@media(max-width:700px) {
  html body.monitoring-dashboard { padding-bottom:0 !important; }
  .monitoring-welcome { align-items:flex-start; flex-direction:column; gap:16px; }
  .monitoring-empty { min-height:350px; padding:40px 22px; }
  .monitoring-welcome h2 { font-size:22px; }
  .monitoring-empty h2 { font-size:23px; }
  .monitoring-dashboard .page-header { align-items:flex-start; flex-direction:column; }
  .monitoring-dashboard .page-header h1 { margin-top:8px; }
  .monitoring-header-actions { width:100%; justify-content:space-between; }
  .monitoring-user-name { display:block; text-align:left; }
  .mpms-login .v57-login-card { padding-top:26px !important; }
  .monitoring-desktop-break { display:none; }
}

/* Approved P.O. monitoring enhancements */
.mpms-filter { grid-template-columns: minmax(250px, 1.6fr) 170px 165px 165px 120px auto auto; align-items:end; }
.mpms-filter label { display:flex; flex-direction:column; gap:6px; color:#6f8094; font-size:10px; font-weight:800; }
.mpms-filter input, .mpms-filter select { width:100%; min-height:42px; }
.approved-filter-card { grid-template-columns:minmax(260px,1.55fr) minmax(160px,.72fr) minmax(145px,.62fr) minmax(145px,.62fr) 105px auto !important; gap:12px !important; padding:0 !important; border:1px solid #dbe6ef !important; border-radius:17px !important; background:#fff !important; overflow:hidden; box-shadow:0 10px 30px rgba(24,56,83,.055) !important; }
.approved-filter-heading { grid-column:1/-1; display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid #e7edf3; background:linear-gradient(135deg,#f8fbfe,#f2f7fb); }
.approved-filter-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#245f83; background:#e7f2f8; }
.approved-filter-icon svg { width:19px; height:19px; }
.approved-filter-heading strong,.approved-filter-heading small { display:block; }
.approved-filter-heading strong { color:#173b57; font-size:13px; }
.approved-filter-heading small { margin-top:3px; color:#7b8da0; font-size:10px; }
.approved-filter-field { min-width:0; padding-bottom:15px; }
.approved-filter-field:first-of-type { padding-left:16px; }
.approved-filter-field > span { display:block; margin-bottom:6px; color:#60758a; font-size:9px; font-weight:900; letter-spacing:.055em; text-transform:uppercase; }
.approved-filter-input { display:flex; align-items:center; gap:7px; padding-left:11px; border:1px solid #cedbe6; border-radius:10px; background:#fff; }
.approved-filter-input:focus-within { border-color:#3a7fa5; box-shadow:0 0 0 3px rgba(48,123,164,.10); }
.approved-filter-input svg { width:16px; color:#8497a9; flex:0 0 auto; }
.approved-filter-input input { min-height:40px !important; padding-left:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; }
.approved-filter-actions { display:flex; align-items:flex-end; gap:7px; padding:0 16px 15px 0; }
.approved-filter-actions .btn { min-height:42px; white-space:nowrap; }
.monitoring-ofp-reference { color:#3b4fa8; font-weight:700; }
.accounting-po-card.status-ofp-created { border-left-color:#596ec5; }
.accounting-po-card.status-no-ofp { border-left-color:#8aa2bd; }
.ofp-approved-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.approved-po-table-card { margin:0; padding:0; border:1px solid #dce6ef; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(24,56,83,.06); }
.approved-po-table-wrap { width:100%; overflow-x:auto; }
.approved-po-table { width:100%; min-width:1080px; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.approved-po-table th { height:54px; padding:10px 16px; border-bottom:1px solid #dce6ef; background:linear-gradient(180deg,#f8fbfe 0%,#f1f5fa 100%); color:#536a82; font-size:10px; font-weight:900; letter-spacing:.055em; line-height:1.2; text-align:left; text-transform:uppercase; vertical-align:middle; }
.approved-po-table th:nth-child(1) { width:16%; }
.approved-po-table th:nth-child(2) { width:22%; }
.approved-po-table th:nth-child(3) { width:13%; }
.approved-po-table th:nth-child(4) { width:12%; }
.approved-po-table th:nth-child(5) { width:17%; }
.approved-po-table th:nth-child(6) { width:20%; }
.approved-po-table td { padding:17px 16px; border-bottom:1px solid #e8eef4; color:#21364e; font-size:12px; line-height:1.45; vertical-align:middle; overflow-wrap:anywhere; }
.approved-po-table tbody tr { transition:background-color .18s ease, box-shadow .18s ease; }
.approved-po-table tbody tr:last-child td { border-bottom:0; }
.approved-po-table tbody tr:hover { background:#f9fbfe; box-shadow:inset 4px 0 #315fc5; }
.approved-po-table tbody tr.status-ofp-created { background:#fbfcff; }
.approved-po-table tbody tr.status-ofp-partial { background:#fffdf8; }
.approved-po-number-link { display:block; color:#173f73; font-size:14px; font-weight:900; text-decoration:none; }
.approved-po-number-link:hover { color:#315fc5; text-decoration:underline; }
.approved-po-subline { display:flex; align-items:center; gap:5px; margin-top:5px; color:#718297; font-size:10px; line-height:1.4; }
.approved-po-subline svg { width:13px; height:13px; flex:0 0 auto; }
.approved-po-approval-badge { margin-top:8px; font-size:9px; }
.approved-po-supplier { display:block; color:#203750; font-size:12px; line-height:1.45; }
.approved-po-date { display:block; color:#314b66; font-weight:700; white-space:nowrap; }
.approved-po-date + .approved-po-date { margin-top:8px; }
.approved-po-date small { display:block; margin-bottom:1px; color:#8695a6; font-size:9px; font-weight:800; text-transform:uppercase; }
.approved-po-amount-heading, .approved-po-amount { text-align:right !important; }
.approved-po-amount { color:#183853 !important; font-size:13px !important; font-weight:900; white-space:nowrap; }
.approved-ofp-status { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid transparent; border-radius:999px; font-size:10px; font-weight:900; white-space:nowrap; }
.approved-ofp-status svg { width:14px; height:14px; }
.approved-ofp-status.created { color:#17643f; background:#eaf8f0; border-color:#c5ead5; }
.approved-ofp-status.partial { color:#8a5708; background:#fff5d9; border-color:#efd59a; }
.approved-ofp-status.pending { color:#855b00; background:#fff7df; border-color:#eedba4; }
.approved-ofp-status.unavailable { color:#7b4650; background:#fff1f3; border-color:#f0cdd3; }
.approved-ofp-reference { display:block; margin-top:7px; color:#3155ad; font-size:11px; font-weight:900; }
.approved-po-actions-heading { text-align:center !important; }
.approved-po-row-actions { display:flex; flex-direction:column; gap:7px; }
.approved-po-row-actions .approved-action-btn { width:100%; min-height:37px; justify-content:center; padding:8px 10px; white-space:nowrap; }
@media(max-width:1180px) {
  .mpms-filter { grid-template-columns: minmax(240px, 1fr) 160px 1fr 1fr 110px auto auto; }
  .approved-filter-card { grid-template-columns:1.5fr 1fr 1fr 1fr !important; }
  .approved-filter-search { grid-column:span 2; padding-left:16px; }
  .approved-filter-actions { grid-column:span 2; padding-left:16px; }
}
@media(max-width:900px) {
  .mpms-filter { grid-template-columns: 1fr 1fr; }
  .approved-filter-card { grid-template-columns:1fr 1fr !important; }
  .approved-filter-card .approved-filter-field { padding-left:14px; padding-right:14px; }
  .ofp-approved-heading-actions { width:100%; justify-content:flex-start; }
  .approved-po-table-wrap { overflow:visible; }
  .approved-po-table { display:block; min-width:0; table-layout:auto; }
  .approved-po-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .approved-po-table tbody { display:grid; gap:12px; padding:12px; }
  .approved-po-table tr { display:grid; grid-template-columns:1fr 1fr; border:1px solid #dce6ef; border-radius:14px; background:#fff !important; overflow:hidden; box-shadow:0 5px 16px rgba(24,56,83,.055); }
  .approved-po-table tbody tr:hover { box-shadow:0 7px 20px rgba(24,56,83,.09); }
  .approved-po-table td { display:block; padding:13px 14px; border:0; border-bottom:1px solid #edf1f5; }
  .approved-po-table td::before { content:attr(data-label); display:block; margin-bottom:6px; color:#8997a8; font-size:9px; font-weight:900; letter-spacing:.055em; text-transform:uppercase; }
  .approved-po-table td:nth-child(1), .approved-po-table td:nth-child(2), .approved-po-table td:nth-child(5), .approved-po-table td:nth-child(6) { grid-column:1 / -1; }
  .approved-po-table td:nth-child(2) { background:#fbfcfe; }
  .approved-po-amount { text-align:left !important; }
  .approved-po-row-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .mpms-filter { grid-template-columns: 1fr; }
  .approved-filter-card { grid-template-columns:1fr !important; }
  .approved-filter-heading,.approved-filter-search,.approved-filter-actions { grid-column:1 !important; }
  .approved-filter-actions { display:grid; grid-template-columns:1fr 1fr; padding:0 14px 14px; }
  .approved-filter-actions .btn { width:100%; justify-content:center; }
  .ofp-approved-heading-actions { display:grid; grid-template-columns:1fr; }
  .ofp-approved-heading-actions .btn, .ofp-approved-heading-actions .mpms-refresh { width:100%; justify-content:center; }
  .approved-po-table tbody { padding:9px; }
  .approved-po-table tr { grid-template-columns:1fr; }
  .approved-po-table td { grid-column:1 !important; }
  .approved-po-row-actions { grid-template-columns:1fr; }
}

/* Compact approved P.O. filter toolbar and clickable table sorting. */
.approved-filter-toolbar {
  display:grid !important;
  grid-template-columns:minmax(260px,1.6fr) minmax(145px,.75fr) minmax(138px,.65fr) minmax(138px,.65fr) 100px auto !important;
  align-items:end !important;
  gap:8px !important;
  margin:14px 0 18px !important;
  padding:10px 11px !important;
  border:1px solid #dbe6ef !important;
  border-radius:13px !important;
  background:#fff !important;
  box-shadow:0 5px 18px rgba(24,56,83,.045) !important;
}
.approved-filter-toolbar .approved-filter-field { min-width:0; padding:0 !important; }
.approved-filter-toolbar .approved-filter-field > span { margin:0 0 4px; font-size:8px; letter-spacing:.045em; }
.approved-filter-toolbar :is(input,select) { min-height:36px !important; padding-top:7px !important; padding-bottom:7px !important; border-radius:8px !important; font-size:11px !important; }
.approved-filter-toolbar .approved-filter-input { min-height:36px; padding-left:9px; border-radius:8px; }
.approved-filter-toolbar .approved-filter-input input { min-height:34px !important; }
.approved-filter-toolbar .approved-filter-actions { display:flex; align-items:flex-end; gap:6px; padding:0 !important; }
.approved-filter-toolbar .approved-filter-actions .btn { min-height:36px; padding:7px 10px; font-size:10px; }
.approved-po-table .table-sort-link { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; min-height:28px; padding:5px 7px; margin:-5px -7px; border-radius:7px; color:inherit; line-height:1; text-decoration:none !important; white-space:nowrap; transition:background-color .15s ease,color .15s ease; }
.approved-po-table .table-sort-link:hover { color:#174f88; background:#e5eef8; }
.approved-po-table .table-sort-link.active { color:#174f88; background:#deebf8; }
.approved-po-table .table-sort-link svg { display:block !important; width:13px !important; min-width:13px !important; max-width:13px !important; height:13px !important; min-height:13px !important; max-height:13px !important; flex:0 0 13px !important; margin:0 !important; stroke-width:2.35; }
.approved-po-table .table-sort-link.active svg { color:#1768b2; }
.approved-po-table .table-sort-pair { display:flex; align-items:center; justify-content:flex-start; gap:8px; min-width:0; }
.approved-po-table .table-sort-pair .table-sort-link + .table-sort-link { padding-left:8px; margin-left:0; border-left:1px solid #cfdae5; border-radius:0 7px 7px 0; }
.table-sort-pair.numeric { justify-content:flex-end; }
@media(max-width:1180px) {
  .approved-filter-toolbar { grid-template-columns:minmax(240px,1.5fr) 1fr 1fr !important; }
  .approved-filter-toolbar .approved-filter-search { grid-column:span 2; padding-left:0 !important; }
  .approved-filter-toolbar .approved-filter-actions { grid-column:auto; padding-left:0; }
}
@media(max-width:700px) {
  .approved-filter-toolbar { grid-template-columns:1fr 1fr !important; padding:9px !important; }
  .approved-filter-toolbar .approved-filter-search { grid-column:1/-1 !important; }
  .approved-filter-toolbar .approved-filter-actions { grid-column:1/-1 !important; display:grid; grid-template-columns:1fr 1fr; }
  .approved-filter-toolbar .approved-filter-actions .btn { width:100%; justify-content:center; }
}