:root {
    --navy-950: #081426;
    --navy-900: #0b1930;
    --navy-850: #10213d;
    --navy-800: #142949;
    --blue-700: #2563eb;
    --blue-600: #2f75ed;
    --cyan-500: #10b8d5;
    --ink: #111827;
    --muted: #64748b;
    --muted-light: #94a3b8;
    --line-soft: #dfe6ef;
    --surface: #ffffff;
    --background: #f2f6fb;
    --red: #d72828;
    --green: #149553;
    --amber: #d97706;
    --shadow: 0 18px 48px rgba(15, 35, 65, 0.10);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
}

@media screen and (max-width: 720px) {
    .mr-review-body .review-buttons,
    .engineering-review-body .review-buttons {
        width: 100%;
        flex-direction: column;
    }

    .mr-review-body .review-action-form,
    .engineering-review-body .review-action-form,
    .mr-review-body .review-action-form input,
    .mr-review-body .review-action-form textarea,
    .mr-review-body .review-action-form .btn,
    .engineering-review-body .review-action-form input,
    .engineering-review-body .review-action-form textarea,
    .engineering-review-body .review-action-form .btn {
        width: 100%;
        min-width: 0;
    }

    .engineering-review-body .print-page-shell,
    .mr-review-body .print-page-shell {
        width: 100%;
        padding: 12px;
        overflow: hidden;
    }

    .engineering-review-body .mr-paper,
    .mr-review-body .mr-paper {
        width: 100%;
        min-width: 0;
        padding: 16px;
        font-size: 11px;
    }

    .engineering-review-body .mr-head,
    .mr-review-body .mr-head {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .engineering-review-body .mr-title-block,
    .mr-review-body .mr-title-block {
        align-items: flex-start;
        text-align: left;
    }

    .engineering-review-body .mr-meta-grid.static,
    .engineering-review-body .mr-signs.saved-signs,
    .engineering-review-body .mr-engineering-validation,
    .mr-review-body .mr-meta-grid.static,
    .mr-review-body .mr-signs.saved-signs,
    .mr-review-body .mr-engineering-validation {
        grid-template-columns: 1fr;
    }

    .engineering-review-body .mr-items,
    .mr-review-body .mr-items {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .engineering-review-body .mr-items col:nth-child(1), .mr-review-body .mr-items col:nth-child(1) { width: 18% !important; }
    .engineering-review-body .mr-items col:nth-child(2), .mr-review-body .mr-items col:nth-child(2) { width: 34% !important; }
    .engineering-review-body .mr-items col:nth-child(3), .mr-review-body .mr-items col:nth-child(3) { width: 14% !important; }
    .engineering-review-body .mr-items col:nth-child(4), .mr-review-body .mr-items col:nth-child(4) { width: 12% !important; }
    .engineering-review-body .mr-items col:nth-child(5), .mr-review-body .mr-items col:nth-child(5) { width: 22% !important; }

    .engineering-review-body .mr-items th,
    .engineering-review-body .mr-items td,
    .mr-review-body .mr-items th,
    .mr-review-body .mr-items td {
        padding: 4px;
        overflow-wrap: anywhere;
    }
}

/* Engineering M.R validation */
.correction-reason {
    margin-bottom: 16px;
    padding: 18px;
    border-left: 4px solid #dc2626;
    background: #fff7f7;
    color: #7f1d1d;
}

.correction-reason strong,
.correction-reason p,
.table-remarks {
    display: block;
}

.mr-engineering-validation {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr);
    gap: 20px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #111827;
}

.mr-engineering-validation > div {
    position: relative;
    min-height: 64px;
}

.mr-engineering-validation label,
.mr-engineering-validation strong,
.mr-engineering-validation small {
    display: block;
}

.mr-engineering-validation strong {
    margin-top: 8px;
}

.mr-engineering-validation small {
    margin-top: 4px;
}

.engineering-esign {
    position: absolute;
    right: 12px;
    bottom: 0;
    max-width: 150px;
    max-height: 54px;
    object-fit: contain;
}

.mr-engineering-remarks p {
    margin: 8px 0 0;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .mr-engineering-validation {
        grid-template-columns: 1fr;
    }
}

/* v45.3 offline role-workflow connection control */
.offline-status-control { min-height: 54px; grid-template-columns: 36px minmax(0, 1fr) auto 34px; gap: 8px; padding: 7px; border-color: rgba(255,255,255,.16); border-radius: 6px; background: rgba(0,0,0,.12); transition: border-color .18s ease, background-color .18s ease; }
.offline-status-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 5px; background: rgba(255,255,255,.1); }
.offline-status-copy { min-height: 31px; align-content: center; }
.offline-status-label { font-weight: 800; }
.offline-status-copy small { display: block; min-height: 11px; }
.offline-status-control[data-connection-state="online"] { border-color: rgba(109,214,158,.42); background: rgba(20,118,92,.15); }
.offline-status-control[data-connection-state="offline"] { border-color: rgba(242,191,104,.42); background: rgba(128,88,12,.15); }
.offline-status-control[data-connection-state="attention"] { border-color: rgba(255,143,136,.48); background: rgba(162,59,53,.17); }
.offline-status-control[data-connection-state="syncing"] { border-color: rgba(141,200,255,.48); background: rgba(25,103,160,.17); }
.offline-status-control[data-connection-state="syncing"] .offline-status-icon svg,
.offline-status-control[data-connection-state="syncing"] .offline-sync-button svg { animation: offline-status-spin 1s linear infinite; }
.offline-status-control:focus-within { outline: 2px solid rgba(141,200,255,.8); outline-offset: 2px; }
.side-icon [data-lucide="cloud-cog"] { width: 16px; height: 16px; }
body.sidebar-collapsed .offline-status-control { grid-template-columns: 36px; width: 48px; padding: 5px; overflow: visible; }
body.sidebar-collapsed .offline-status-copy,
body.sidebar-collapsed .offline-status-count,
body.sidebar-collapsed .offline-sync-button { display: none; }
body.sidebar-collapsed .offline-status-control:hover::after { content: attr(aria-label); position: absolute; left: 54px; bottom: 6px; z-index: 40; width: max-content; max-width: 220px; padding: 7px 9px; border-radius: 4px; background: #17212b; color: #fff; font-size: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
@media (max-width: 700px) {
    .offline-status-control { width: 100%; max-width: 100%; grid-template-columns: 36px minmax(0,1fr) auto 34px; }
    .offline-status-copy small { white-space: normal; line-height: 1.15; }
}

.correction-reason p {
    margin: 8px 0 0;
}

.mr-checker-card.is-locked {
    cursor: default;
    opacity: .78;
}

.table-remarks {
    max-width: 240px;
    margin-top: 6px;
    color: #991b1b;
    line-height: 1.4;
}
.workflow-badge.pending_engineering,
.workflow-badge.pending {
    background: #e0f2fe;
    color: #075985;
}

.workflow-badge.correction_required,
.workflow-badge.rejected {
    background: #fee2e2;
    color: #991b1b;
}

.engineering-hero {
    background: linear-gradient(120deg, #0a2d5e 0%, #164f91 58%, #0f766e 100%);
}

.engineering-queue-card td small {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

.engineering-decision-panel textarea {
    width: min(360px, 100%);
    resize: vertical;
}

@media (max-width: 760px) {
    .engineering-hero {
        align-items: stretch;
    }

    .engineering-hero .po-command-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .engineering-queue-card .table-wrap {
        overflow: visible;
    }

    .engineering-queue-card table,
    .engineering-queue-card tbody,
    .engineering-queue-card tr,
    .engineering-queue-card td {
        display: block;
        width: 100%;
    }

    .engineering-queue-card thead {
        display: none;
    }

    .engineering-queue-card tr {
        padding: 16px;
        border-bottom: 1px solid #dbe4ef;
    }

    .engineering-queue-card td {
        padding: 4px 0;
        border: 0;
    }

    .engineering-queue-card td:last-child {
        padding-top: 12px;
    }

    .engineering-queue-card .table-action {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 44px;
    }
}

/* My Account security controls v43 */
.account-page-content {
    max-width: 1120px;
}

.account-required-banner {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #cf9d31;
    border-radius: 8px;
    background: #fff8df;
    color: #654200;
}

.account-summary-grid,
.account-settings-grid {
    display: grid;
    gap: 16px;
}

.account-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.account-summary-item,
.account-operation {
    min-width: 0;
    border: 1px solid #d5dfe7;
    border-radius: 8px;
    background: #fff;
}

.account-summary-item {
    padding: 14px;
}

.account-summary-item span,
.account-operation .eyebrow,
.account-operation small {
    display: block;
}

.account-summary-item span,
.account-operation small {
    color: #647486;
    font-size: 12px;
}

.account-summary-item strong {
    display: block;
    margin-top: 4px;
    color: #173f32;
    overflow-wrap: anywhere;
}

.account-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-operation {
    padding: 18px;
}

.account-operation h2 {
    margin: 4px 0 8px;
    color: #173f32;
    font-size: 20px;
}

.account-operation p {
    margin: 0 0 16px;
    color: #536779;
    line-height: 1.5;
}

.account-operation form {
    display: grid;
    gap: 10px;
}

.account-operation input {
    width: 100%;
    box-sizing: border-box;
}

.account-project-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.account-project-list span {
    padding: 4px 7px;
    border: 1px solid #c9d9d0;
    border-radius: 6px;
    background: #eef7f1;
    color: #195b38;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .account-summary-grid,
    .account-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--background);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

[hidden] {
    display: none !important;
}

/* ---------- Shared controls ---------- */

.btn,
.navbtn {
    appearance: none;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 750;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}

.btn:hover,
.navbtn:hover {
    transform: translateY(-1px);
}

.btn:disabled,
.navbtn:disabled {
    cursor: not-allowed;
    opacity: .5;
    transform: none;
    box-shadow: none;
}

.btn.primary,
.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--blue-700), var(--cyan-500));
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

.btn.secondary,
.secondary {
    color: #19304f;
    background: #eef3f9;
    border: 1px solid #d9e2ec;
}

.btn.glass {
    color: #fff;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.34);
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.btn.glass.subtle {
    background: rgba(255,255,255,.10);
}

.btn.compact {
    padding: 10px 14px;
    border-radius: 11px;
    font-size: 14px;
}

.eyebrow {
    display: block;
    color: var(--blue-700);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.eyebrow.light {
    color: rgba(255,255,255,.86);
}

.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin: 12px 0;
    font-size: 14px;
}

.alert.danger,
.danger {
    color: #991b1b;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

/* ---------- Login ---------- */

.login-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(440px, .8fr);
    min-height: 100vh;
    background: var(--navy-950);
}

.login-visual {
    position: relative;
    overflow: hidden;
    padding: 54px 64px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 20%, rgba(39, 116, 239, .45), transparent 35%),
        radial-gradient(circle at 82% 78%, rgba(16, 184, 213, .32), transparent 40%),
        linear-gradient(145deg, #081426 8%, #102649 62%, #0a6c91 125%);
}

.login-visual::before,
.login-visual::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
}

.login-visual::before {
    width: 520px;
    height: 520px;
    right: -180px;
    top: -130px;
}

.login-visual::after {
    width: 340px;
    height: 340px;
    left: -120px;
    bottom: -120px;
}

.login-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.login-brand strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 21px;
    letter-spacing: .06em;
}

.login-brand small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.66);
    font-size: 10px;
    letter-spacing: .32em;
}

.metriccon-mark {
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.08);
    font-family: Georgia, serif;
    font-weight: 900;
}

.metriccon-mark.large {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    font-size: 20px;
}

.metriccon-mark span:first-child {
    transform: translate(-4px, 1px);
}

.metriccon-mark span:last-child {
    position: absolute;
    transform: translate(6px, -1px);
    opacity: .85;
}

.login-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-top: clamp(110px, 19vh, 210px);
}

.login-copy h1 {
    margin: 14px 0 22px;
    font-size: clamp(50px, 6.2vw, 86px);
    line-height: .98;
    letter-spacing: -.055em;
}

.login-copy p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 19px;
    line-height: 1.75;
}

.login-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.login-feature-row span {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    font-size: 13px;
}

.login-panel {
    display: grid;
    place-items: center;
    padding: 34px;
    background: #f7f9fc;
}

.login-card.modern {
    width: min(430px, 100%);
    padding: 42px;
    border: 1px solid #e3eaf2;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 35, 65, .15);
}

.mobile-login-brand {
    display: none;
}

.login-card h2 {
    margin: 9px 0 4px;
    font-size: 36px;
    letter-spacing: -.04em;
}

.login-card > p {
    margin: 0 0 28px;
    color: var(--muted);
}

.login-card label {
    display: block;
    margin: 16px 0 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.input-with-icon {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 13px;
    background: #f9fbfd;
    transition: border .18s ease, box-shadow .18s ease;
}

.input-with-icon:focus-within {
    border-color: #75a4fa;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.input-with-icon span {
    display: grid;
    place-items: center;
    color: #6b7e98;
}

.input-with-icon input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 14px 14px 14px 0;
    background: transparent;
}

.login-button {
    width: 100%;
    margin-top: 24px;
    padding: 14px;
}

.password-recovery-card form > input:not([type="hidden"]),
.password-recovery-card form > label > input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #172033;
}

.password-recovery-card form > input:not([type="hidden"]):focus,
.password-recovery-card form > label > input:focus {
    outline: 3px solid rgba(37, 99, 235, .2);
    outline-offset: 1px;
    border-color: #2563eb;
}

.password-recovery-resend {
    margin-top: 12px;
}

.password-recovery-resend .btn {
    width: 100%;
}

.password-recovery-link {
    margin: 18px 0 0;
    text-align: center;
}

.password-recovery-card .inline-notice-fallback {
    margin: 16px 0;
}

.login-hint {
    display: grid;
    gap: 4px;
    margin-top: 24px;
    padding: 14px;
    color: #63738a;
    border-radius: 13px;
    background: #f4f7fb;
    font-size: 12px;
    text-align: center;
}

.login-hint b {
    color: #1e293b;
}

/* ---------- Main application shell ---------- */

.app-layout {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 300px;
    display: flex;
    flex-direction: column;
    padding: 28px 18px 20px;
    color: #e7edf7;
    background:
        radial-gradient(circle at 15% 10%, rgba(47,117,237,.22), transparent 32%),
        linear-gradient(180deg, #0b1930, #0a1425 70%);
    box-shadow: 12px 0 36px rgba(8, 20, 38, .12);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 10px 22px;
}

.sidebar-brand strong {
    display: block;
    font-size: 21px;
    letter-spacing: -.02em;
}

.sidebar-brand small,
.sidebar-user small {
    display: block;
    margin-top: 3px;
    color: #91a0b7;
    font-size: 12px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 24px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    background: rgba(255,255,255,.065);
}

.sidebar-user strong {
    display: block;
    max-width: 184px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.user-avatar,
.profile-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #4f75ef, #11b5d6);
    font-weight: 800;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
}

.sidebar-nav {
    flex: 1;
}

.nav-section {
    display: block;
    margin: 18px 11px 10px;
    color: #71819b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.side-link,
.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 52px;
    margin: 5px 0;
    padding: 0 16px;
    color: #c7d0de;
    border-radius: 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.side-link:hover,
.sidebar-logout:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.side-link.active {
    color: #fff;
    background: linear-gradient(110deg, #2865ea, #0fa8c6);
    box-shadow: 0 12px 26px rgba(27, 107, 225, .24);
}

.side-icon {
    width: 28px;
    display: inline-grid;
    place-items: center;
    font-size: 20px;
}

.mobile-only {
    display: none;
}

.sidebar-logout {
    margin-top: 18px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.055);
}

.app-main {
    min-width: 0;
    min-height: 100vh;
    margin-left: 300px;
}

.page-header {
    min-height: 142px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(248, 250, 253, .92);
    backdrop-filter: blur(14px);
}

.page-header h1 {
    margin: 7px 0 0;
    font-size: clamp(32px, 3.1vw, 48px);
    line-height: 1;
    letter-spacing: -.05em;
}

.header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.quick-search {
    width: clamp(280px, 35vw, 500px);
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    padding: 0 15px;
    border: 1px solid #dfe6ef;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15,35,65,.04);
}

.quick-search span {
    color: #60728d;
    font-size: 24px;
}

.quick-search input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 16px 6px;
    background: transparent;
    font-size: 15px;
}

.profile-pill {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #dfe6ef;
    border-radius: 18px;
    background: #fff;
}

.profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 15px;
}

.profile-pill strong,
.profile-pill small {
    display: block;
}

.profile-pill strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-pill small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.page-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 34px 32px 54px;
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr);
    gap: 22px;
    margin-bottom: 24px;
}

.hero-main {
    min-height: 360px;
    padding: 34px 38px;
    color: #fff;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 87% 12%, rgba(255,255,255,.22), transparent 24%),
        linear-gradient(120deg, #235fe1, #2b8edc 55%, #08b6ca);
    box-shadow: 0 24px 54px rgba(28, 110, 223, .22);
}

.hero-main h2 {
    margin: 16px 0 20px;
    font-size: clamp(42px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.055em;
}

.hero-main p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.90);
    font-size: 18px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.hero-note,
.card-soft {
    padding: 30px;
    border: 1px solid #dfe6ef;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow);
}

.hero-note h3 {
    margin: 0 0 14px;
    font-size: 23px;
}

.hero-note p {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.65;
}

.hero-note small {
    display: block;
    margin-top: 16px;
    color: #7b8ba1;
    line-height: 1.55;
}

.next-po-number {
    margin: 18px 0;
    color: var(--red);
    font-family: Georgia, serif;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: .08em;
}

.mini-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    padding: 14px 15px;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.mini-info-row span {
    color: #52647e;
    font-size: 13px;
}

.mini-info-row b {
    font-size: 18px;
}

.compact-hero .hero-main {
    min-height: 300px;
}

.compact-hero .hero-main h2 {
    font-size: clamp(40px, 4vw, 58px);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 26px;
}

.stats-grid.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px;
    border: 1px solid #dfe6ef;
    border-radius: 22px;
    background:
        linear-gradient(150deg, #fff 58%, #edf4ff 115%);
    box-shadow: 0 14px 34px rgba(15,35,65,.07);
}

.stat-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    color: #2865ea;
    border-radius: 17px;
    background: #dbe9ff;
    font-size: 22px;
    font-weight: 850;
}

.stat-card span,
.stat-card strong,
.stat-card small {
    display: block;
}

.stat-card span {
    color: #536681;
    font-size: 13px;
}

.stat-card strong {
    margin: 6px 0 3px;
    font-size: clamp(28px, 2.5vw, 40px);
    line-height: 1;
    letter-spacing: -.04em;
}

.stat-card small {
    color: #8a9ab0;
    font-size: 12px;
}

.content-card {
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow);
}

.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px 20px;
}

.card-heading h2 {
    margin: 6px 0 0;
    font-size: 27px;
    letter-spacing: -.035em;
}

.soft-badge,
.role-badge,
.status-badge,
.po-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 750;
    white-space: nowrap;
}

.soft-badge {
    padding: 8px 12px;
    color: #52647e;
    background: #eef3f9;
    font-size: 12px;
}

.table-wrap {
    overflow-x: auto;
}

.data {
    width: 100%;
    border-collapse: collapse;
}

.modern-table th,
.modern-table td {
    padding: 16px 20px;
    border-top: 1px solid #edf1f5;
    text-align: left;
    vertical-align: middle;
}

.modern-table th {
    color: #6b7c93;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.modern-table td {
    color: #334155;
    font-size: 13px;
}

.modern-table tbody tr:hover {
    background: #fbfdff;
}

.po-number-badge {
    padding: 7px 10px;
    color: #b91c1c;
    background: #fff1f2;
    font-family: Georgia, serif;
    letter-spacing: .05em;
}

.money-cell {
    color: #0f172a !important;
    font-weight: 800;
}

.table-action {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 13px;
    color: #fff;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #16a3c7);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.table-action:hover {
    filter: brightness(1.03);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .24);
    text-decoration: none;
    transform: translateY(-1px);
}

.table-action:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(37, 99, 235, .18);
}

.empty-row td {
    padding: 44px;
    color: #8a9ab0;
    text-align: center;
}

.role-badge {
    padding: 7px 10px;
    color: #1e4fb4;
    background: #e7efff;
    font-size: 11px;
}

.status-badge {
    padding: 7px 10px;
    font-size: 11px;
}

.status-badge.active {
    color: #0f7a43;
    background: #e9f9f0;
}

.status-badge.inactive {
    color: #9f1239;
    background: #fff1f2;
}

/* ---------- Create P.O workspace ---------- */
.po-source-choice-page{max-width:980px;margin:0 auto;padding-bottom:110px}.po-source-intro{padding:26px 2px 18px}.po-source-intro h2{margin:5px 0 8px;font-size:clamp(1.55rem,2.2vw,2rem);color:#0b1f3a}.po-source-intro p{margin:0;color:#5c6f88}.po-source-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.po-source-option{min-height:172px;display:grid;grid-template-columns:58px 1fr 24px;align-items:center;gap:16px;padding:24px;border:1px solid #cad9ea;border-radius:8px;background:#fff;color:#0b1f3a;text-decoration:none;box-shadow:0 14px 34px rgba(12,45,82,.1);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.po-source-option:hover{transform:translateY(-3px);border-color:#2d8fe8;box-shadow:0 18px 40px rgba(12,45,82,.16)}.po-source-option.direct-source{background:#eef7ff}.po-source-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:8px;background:#0b3768;color:#fff;font-weight:800}.direct-source .po-source-icon{background:#168ab6}.po-source-copy{display:grid;gap:7px}.po-source-copy b{font-size:1.12rem}.po-source-copy small{font-size:.9rem;line-height:1.5;color:#5c6f88}.po-source-arrow{font-size:2rem;color:#268ee0}.direct-po-reason-card{margin:0 0 16px;padding:16px 18px;border:1px solid #9fc5e8;border-left:4px solid #168ab6;border-radius:6px;background:#f4faff}.direct-po-reason-card label{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-weight:800;color:#0b3768}.direct-po-reason-card label span{font-size:.72rem;text-transform:uppercase;color:#54718f}.direct-po-reason-card textarea{width:100%;resize:vertical;min-height:76px;border:1px solid #afc8df;border-radius:6px;padding:11px 12px;background:#fff;color:#12243c}
@media (max-width:700px){.po-source-choice-page{padding:10px 14px 112px}.po-source-intro{padding:16px 2px 14px}.po-source-choice-grid{grid-template-columns:1fr;gap:12px}.po-source-option{min-height:132px;padding:18px;grid-template-columns:50px 1fr 18px}.po-source-icon{width:48px;height:48px}.direct-po-reason-card label{display:grid;gap:3px}}

.po-page-content {
    max-width: 1580px;
}

.po-command-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 22px 24px;
    border: 1px solid #dfe6ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15,35,65,.07);
}

.po-command-card h2 {
    margin: 5px 0;
    font-size: 26px;
    letter-spacing: -.035em;
}

.po-command-card p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.po-command-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(100,116,139,.12);
}

.status-pill.checking {
    color: #52647e;
    background: #eef3f9;
}

.status-pill.good {
    color: #0f7a43;
    background: #e8f8ef;
}

.status-pill.bad {
    color: #b42318;
    background: #fff0ef;
}

.po-scroll-shell {
    overflow-x: auto;
    padding: 8px 8px 28px;
}

/* ---------- Exact printable P.O form ---------- */

.po-paper {
    width: 1000px;
    margin: 0 auto;
    padding: 12px;
    color: #222;
    border: 1px solid #d6d6d6;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15,35,65,.16);
}

.po-form {
    font-family: Arial, Helvetica, sans-serif;
}

.po-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.po-title {
    font-size: 29px;
    font-weight: 900;
}

.po-no {
    margin-left: 40px;
    color: var(--red);
    font-family: Georgia, serif;
    font-size: 24px;
    letter-spacing: 4px;
}

.po-number-input {
    width: 112px;
    color: var(--red);
    font-family: Georgia, serif;
    font-size: 22px;
    letter-spacing: 2px;
}

.company {
    text-align: right;
}

.po-company-brand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.po-company-mark {
    width: 55px;
    height: 47px;
    display: grid;
    place-items: center;
    color: #283a5b;
    border: 3px solid #283a5b;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -3px;
}

.logo-line {
    font-family: Georgia, serif;
    font-size: 29px;
    letter-spacing: .5px;
}

.contractor {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 31px 1px 38px;
    color: #fff;
    background: #111;
    font-size: 13px;
    letter-spacing: 7px;
}

.company small {
    display: block;
    line-height: 1.22;
}

.line-input {
    border: 0;
    border-bottom: 2px solid #444;
    border-radius: 0;
    outline: 0;
    padding: 4px;
    background: transparent;
    text-align: center;
    font-weight: 700;
}

.static-line {
    display: inline-block;
}

.mr-date {
    width: 350px;
    margin-top: 8px;
}

.blackbar {
    height: 28px;
    margin: 11px 0;
    background: #17130f;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 2px solid #333;
    border-top: 0;
}

.info-box {
    min-height: 160px;
    padding: 0 10px;
    border-right: 2px solid #333;
}

.info-box:last-child {
    border-right: 0;
}

.box-title {
    margin: 0 -10px 12px;
    padding: 7px;
    color: #fff;
    background: #231f1c;
    text-align: center;
    font-size: 19px;
    font-weight: 800;
}

.rowline {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: end;
    margin: 8px 0;
    font-size: 14px;
}

.rowline input {
    min-width: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    outline: 0;
    padding: 2px 5px;
    background: transparent;
    font-weight: 700;
}

.rowline input:focus,
.sig input:focus,
.items input:focus,
.items textarea:focus,
.notes textarea:focus,
.total-row input:focus,
.line-input:focus {
    background: #eef6ff;
    box-shadow: inset 0 -2px 0 #3978e7;
}

.rowline b {
    min-width: 0;
    overflow-wrap: anywhere;
}

.items {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.items th {
    padding: 12px 6px;
    color: #fff;
    border: 2px solid #333;
    background: #231f1c;
    font-size: 20px;
}

.items td {
    height: 33px;
    padding: 0 5px;
    border: 1px solid #555;
}

.items input,
.items textarea {
    width: 100%;
    border: 0;
    border-radius: 0;
    outline: 0;
    padding: 6px 3px;
    background: transparent;
    font-size: 14px;
}

.items textarea.product-description {
    min-height: 33px;
    resize: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.items .item-description-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.item_total {
    color: #222;
}

.item_total.manual-override {
    background: #fff7d6;
    box-shadow: inset 3px 0 0 #d89a00;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.notes-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.notes {
    min-height: 125px;
    padding: 13px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    font-weight: 800;
}

.notes textarea {
    width: 100%;
    height: 75px;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
}

.notes-value {
    font-weight: 400;
}

.totals {
    border-right: 2px solid #333;
}

.total-row {
    min-height: 31px;
    display: grid;
    grid-template-columns: 195px 125px;
}

.total-row label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding: 7px;
    color: #fff;
    background: #231f1c;
    font-weight: 800;
}

.total-row input {
    width: 100%;
    border: 1px solid #555;
    border-left: 0;
    border-radius: 0;
    outline: 0;
    padding: 5px;
    background: #fff;
    text-align: right;
}

.total-row.grand-row label,
.total-row.grand-row input {
    font-weight: 900;
}

.total-row input.manual-override {
    background: #fff7d6;
    box-shadow: inset 3px 0 0 #d89a00;
}

.calc-auto-button {
    padding: 2px 5px;
    color: #173a6f;
    border: 0;
    border-radius: 5px;
    background: #dbeafe;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .03em;
}

.calc-auto-button.is-auto {
    color: #0b6b3a;
    background: #dcfce7;
}

.manual-calc-note {
    margin: 8px 0 2px auto;
    padding: 8px 10px;
    width: 520px;
    color: #5f6f84;
    border: 1px solid #dde6f0;
    border-radius: 8px;
    background: #f7f9fc;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 10px;
    line-height: 1.45;
}

.footer-note {
    margin: 8px;
    text-align: center;
    font-size: 13px;
}

.signs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 8px;
}

.sig label {
    font-weight: 800;
}

.sig input {
    width: 100%;
    border: 0;
    border-bottom: 2px solid #333;
    border-radius: 0;
    outline: 0;
    padding: 10px 3px;
    background: transparent;
    text-align: center;
    font-weight: 800;
}

.sig small {
    display: block;
    margin-top: 4px;
    text-align: center;
}

.series {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
}

.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 18px -12px -12px;
    padding: 13px;
    border-top: 1px solid #dbe3ec;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.form-actions .primary {
    width: auto;
}

/* ---------- Saved P.O view ---------- */

.print-view-body {
    background: #eaf0f6;
}

.print-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 28px;
    color: #fff;
    background: rgba(8,20,38,.96);
    box-shadow: 0 12px 30px rgba(8,20,38,.20);
    backdrop-filter: blur(12px);
}

.print-toolbar strong,
.print-toolbar small {
    display: block;
}

.print-toolbar strong {
    margin-top: 3px;
    font-size: 20px;
}

.print-toolbar small {
    margin-top: 2px;
    color: #a9b6c8;
}

.print-toolbar > div:last-child {
    display: flex;
    gap: 9px;
}

.po-draft-inline-form {
    display: inline-flex;
    margin: 0;
}

.po-draft-inline-form .btn {
    width: 100%;
}

.print-page-shell {
    padding: 34px 18px 60px;
}

/* ---------- System message ---------- */

.system-message-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(145deg, #eef4fb, #f8fafc);
}

.system-message-card {
    width: min(480px, 100%);
    padding: 34px;
    border: 1px solid #dfe6ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
}

.system-message-card h1 {
    margin-top: 0;
}

.system-message-card p {
    color: var(--muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .sidebar {
        width: 250px;
    }

    .app-main {
        margin-left: 250px;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-tools {
        width: 100%;
        justify-content: space-between;
    }

    .quick-search {
        width: min(580px, 100%);
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .po-command-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .po-command-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .login-body {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

    .mobile-login-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 28px;
        color: #0f294b;
    }

    .mobile-login-brand .metriccon-mark {
        background: linear-gradient(145deg, #2865ea, #10b8d5);
    }

    .sidebar {
        position: static;
        width: auto;
        min-height: auto;
        padding: 14px;
    }

    .sidebar-brand,
    .sidebar-user,
    .nav-section,
    .sidebar-logout {
        display: none;
    }

    .sidebar-nav {
        display: flex;
        gap: 7px;
        overflow-x: auto;
    }

    .side-link {
        flex: 0 0 auto;
        margin: 0;
        min-height: 44px;
    }

    .mobile-only {
        display: flex;
    }

    .app-main {
        margin-left: 0;
    }

    .page-header {
        min-height: auto;
        padding: 24px 20px;
    }

    .page-content {
        padding: 24px 18px 40px;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
    }

    .hero-main {
        min-height: auto;
    }

    .profile-pill {
        display: none;
    }

    .header-tools,
    .quick-search {
        width: 100%;
    }

    .stats-grid,
    .stats-grid.three-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Metriccon Materials Requisition Slip: fixed A4 document surface. */
.mr-document-stage {
    --mr-document-scale: 1;
    position: relative;
    width: 794px;
    height: 1123px;
    margin: 0 auto;
}

.mr-document-stage > .mr-paper {
    position: relative;
    width: 794px;
    height: 1123px;
    min-height: 1123px;
    margin: 0;
    padding: 31px 38px 27px;
    border: 1px solid #cbd5e1;
    box-sizing: border-box;
    overflow: hidden;
    color: #070b12;
    background: #fff;
    box-shadow: 0 24px 55px rgba(15, 35, 65, .13);
    font-family: Arial, Helvetica, sans-serif;
    transform: scale(var(--mr-document-scale, 1));
    transform-origin: top left;
}

.mr-document-header {
    height: 150px;
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(265px, .92fr);
    gap: 24px;
}

.mr-document-company {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.mr-document-logo {
    width: 92px;
    height: 102px;
    object-fit: contain;
}

.mr-document-company-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.08;
}

.mr-document-company-name {
    padding-bottom: 2px;
    border-bottom: 2px solid #111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.mr-document-contractor {
    margin: 3px 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    letter-spacing: 5px;
    line-height: 1;
    white-space: nowrap;
}

.mr-document-company-copy strong,
.mr-document-company-copy span {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1px;
}

.mr-title-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
}

.mr-title-block .mr-slip-title {
    width: 236px;
    min-height: 74px;
    margin-left: auto;
    padding: 15px 22px 11px;
    border: 3px solid #111;
    border-radius: 50%;
    box-sizing: border-box;
    display: grid;
    place-content: center;
    color: #070b12;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

.mr-title-block .mr-number-line {
    color: #070b12;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.mr-title-block .mr-number-line b {
    display: inline-block;
    margin-left: 14px;
    color: #7e1f26;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    letter-spacing: 3px;
}

.mr-document-meta {
    height: 70px;
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    grid-template-rows: 31px 31px;
    column-gap: 12px;
    row-gap: 4px;
    margin-top: 5px;
}

.mr-document-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 5px;
    font-size: 13px;
}

.mr-document-field b {
    min-width: 0;
    min-height: 22px;
    padding: 0 5px 2px;
    border-bottom: 1.5px solid #111;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-document-stage .mr-items {
    width: 100%;
    height: 650px;
    border: 1.5px solid #111;
    border-collapse: collapse;
    table-layout: fixed;
}

.mr-document-stage .mr-col-date { width: 16.5%; }
.mr-document-stage .mr-col-description { width: 40%; }
.mr-document-stage .mr-col-quantity { width: 13.5%; }
.mr-document-stage .mr-col-unit { width: 10%; }
.mr-document-stage .mr-col-purpose { width: 20%; }

.mr-document-stage .mr-items th,
.mr-document-stage .mr-items td {
    border: 1px solid #111;
    padding: 0;
    color: #070b12;
    background: #fff;
}

.mr-document-stage .mr-items th {
    height: 29px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.mr-document-stage .mr-items tbody tr {
    height: 30.6px;
}

.mr-document-stage .mr-items td {
    height: 30.6px;
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.08;
    vertical-align: top;
}

.mr-cell-content {
    width: 100%;
    height: 29.6px;
    padding: 3px 5px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mr-description-content {
    white-space: pre-line;
}

.mr-document-stage .mr-print-procurement-ref {
    display: block;
    margin-top: 1px;
    color: #2d5d91;
    font-size: 7.5px;
    font-weight: 800;
    line-height: 1;
}

.mr-document-signatures {
    height: 75px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 62px;
    align-items: center;
    margin: 11px 6px 0;
}

.mr-document-signature {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
    align-items: end;
    font-size: 12px;
}

.mr-signature-line {
    position: relative;
    min-width: 0;
    min-height: 45px;
    padding: 0 4px 2px;
    border-bottom: 1px solid #111;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    overflow: hidden;
}

.mr-signature-line strong,
.mr-signature-line small {
    display: block;
    max-width: 100%;
}

.mr-signature-line strong {
    font-size: 10px;
}

.mr-signature-line small {
    color: #374151;
    font-size: 7px;
}

.mr-checker-signature-list {
    display: grid;
    grid-template-columns: repeat(var(--mr-checker-count, 1), minmax(0, 1fr));
    align-items: end;
    gap: 3px;
}

.mr-checker-signature {
    position: relative;
    min-width: 0;
    min-height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

.mr-esign-image {
    position: absolute !important;
    left: 50% !important;
    bottom: 10px !important;
    width: 76px !important;
    height: 34px !important;
    max-width: 76px !important;
    max-height: 34px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: translateX(-50%) !important;
    opacity: .86;
}

.mr-checker-esign {
    bottom: 7px !important;
    width: calc(100% - 2px) !important;
}

.mr-checker-signature b {
    max-width: 100%;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-checker-signature small {
    font-size: 6px;
}

.mr-checker-signature-list.reviewer-count-many .mr-checker-signature b {
    font-size: 6px;
}

.mr-checker-signature-list.reviewer-count-many .mr-checker-signature small {
    font-size: 4.5px;
}

.mr-document-engineering {
    min-height: 72px;
    margin: 1px auto 0;
    display: grid;
    grid-template-columns: auto 292px;
    grid-template-rows: 45px 18px;
    align-items: end;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
}

.mr-purchasing-edit-marker {
    position: absolute;
    right: 40px;
    bottom: 18px;
    max-width: 540px;
    color: #6f1d1b;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.mr-history-list { display: grid; gap: 14px; }
.mr-history-event { background: #fff; border: 1px solid #d8e1ec; border-radius: 8px; padding: 16px; }
.mr-history-event header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mr-history-changes { width: 100%; border-collapse: collapse; font-size: 13px; }
.mr-history-changes th, .mr-history-changes td { padding: 9px; border-bottom: 1px solid #e5ebf2; text-align: left; vertical-align: top; }
.mr-history-old { color: #8b2f2f; }
.mr-history-new { color: #14532d; }
.po-mr-update-card { display: grid; gap: 14px; border-left: 4px solid #d69e2e; }
.mr-sync-list { display: grid; gap: 8px; margin: 12px 0; }
.mr-sync-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: #f7fafc; border: 1px solid #d8e1ec; border-radius: 7px; }
.mr-sync-item span { display: grid; gap: 3px; }
.mr-sync-item small { color: #526579; }

@media (max-width: 720px) {
    .print-toolbar > div:last-child {
        width: 100%;
        flex-wrap: wrap;
    }

    .print-toolbar > div:last-child > * {
        flex: 1 1 105px;
        text-align: center;
    }
}

.mr-engineering-signature-line {
    position: relative;
    min-height: 45px;
    padding: 0 5px 2px;
    border-bottom: 1px solid #111;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    overflow: hidden;
}

.mr-engineering-signature-line strong {
    font-size: 10px;
}

.mr-engineering-signature-line small {
    color: #374151;
    font-size: 7px;
}

.mr-engineering-remarks {
    position: static;
    grid-column: 1 / -1;
    width: min(440px, 100%);
    max-height: 20px;
    margin: 2px auto 0;
    overflow: hidden;
    color: #374151;
    font-size: 7px;
    line-height: 1.1;
    text-align: center;
}

.mr-document-footer {
    position: absolute;
    bottom: 20px;
    left: 38px;
    right: 38px;
    font-size: 10px;
}

@media screen and (max-width: 840px) {
    .print-page-shell:has(.mr-document-stage) {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .mr-document-stage {
        margin-left: 0;
        margin-right: 0;
    }
}

@media print {
    .print-page-shell:has(.mr-document-stage) {
        width: 210mm !important;
        height: 297mm !important;
        padding: 5mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mr-document-stage {
        width: 200mm !important;
        height: 287mm !important;
        margin: 0 !important;
    }

    .mr-document-stage > .mr-paper,
    .print-page-shell .mr-document-stage > .mr-paper {
        width: 200mm !important;
        height: 287mm !important;
        min-height: 287mm !important;
        max-height: 287mm !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* Approved M.R item selection */
.mr-po-select-content {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 112px;
}

.mr-po-source-summary,
.mr-po-selection-shell {
    border: 1px solid #d6e2f0;
    background: #fff;
    box-shadow: 0 14px 36px rgba(13, 43, 85, .09);
}

.mr-po-source-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border-top: 4px solid #123f73;
    border-radius: 8px;
}

.mr-po-source-summary h2,
.mr-po-selection-heading h2 {
    margin: 4px 0 6px;
    color: #102a4c;
    font-size: 22px;
    letter-spacing: 0;
}

.mr-po-source-summary p {
    margin: 0;
    color: #59708c;
}

.mr-po-source-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 8px;
}

.mr-po-source-stats span {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #d8e5f2;
    border-radius: 7px;
    background: #f5f9fd;
    color: #60748b;
    font-size: 12px;
    text-align: center;
}

.mr-po-source-stats b {
    display: block;
    color: #123f73;
    font-size: 22px;
}

.mr-po-selection-shell {
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
}

.mr-po-selection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #dce6f1;
}

.mr-po-selection-tools {
    display: flex;
    gap: 8px;
}

.mr-po-item-list {
    display: grid;
    gap: 10px;
    padding: 16px;
    background: #f4f7fb;
}

.mr-po-item-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    min-height: 82px;
    padding: 15px 16px;
    border: 1px solid #d7e2ee;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mr-po-item-row:hover {
    border-color: #83b9ee;
    box-shadow: 0 8px 18px rgba(17, 61, 111, .08);
}

.mr-po-item-row.is-selected {
    border-color: #2f8ee5;
    box-shadow: inset 4px 0 0 #2f8ee5, 0 8px 20px rgba(18, 63, 115, .12);
}

.mr-po-item-row.is-disabled {
    cursor: default;
    background: #edf2f7;
    color: #708197;
    box-shadow: none;
}

.mr-po-item-check {
    position: relative;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
}

.mr-po-item-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.mr-po-item-check span {
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid #9fb3c8;
    border-radius: 6px;
    background: #fff;
}

.mr-po-item-check input:checked + span {
    border-color: #287fce;
    background: #287fce;
    box-shadow: inset 0 0 0 5px #fff;
}

.mr-po-item-check input:focus-visible + span {
    outline: 3px solid rgba(47, 142, 229, .28);
    outline-offset: 2px;
}

.mr-po-item-row.is-disabled .mr-po-item-check span {
    border-color: #c8d3de;
    background: #dfe7ef;
}

.mr-po-item-copy,
.mr-po-item-topline {
    min-width: 0;
}

.mr-po-item-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.mr-po-item-topline strong {
    color: #122d50;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.mr-po-item-state {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 6px;
    background: #e7f3ff;
    color: #155f9f;
    font-size: 11px;
    font-weight: 800;
}

.state-assigned .mr-po-item-state {
    background: #e8f5ee;
    color: #167249;
}

.state-closed .mr-po-item-state,
.state-legacy_complete .mr-po-item-state {
    background: #eef1f5;
    color: #5f6f82;
}

.mr-po-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    color: #5a6f87;
    font-size: 12px;
}

.mr-po-item-remarks {
    display: block;
    margin-top: 7px;
    color: #6a7888;
}

.mr-po-empty-state {
    padding: 44px 20px;
    color: #687c93;
    text-align: center;
}

.mr-po-selection-bar {
    position: sticky;
    z-index: 8;
    bottom: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid #d7e3ef;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -12px 28px rgba(13, 43, 85, .09);
    backdrop-filter: blur(14px);
}

.mr-po-selection-count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    color: #62748a;
    font-size: 12px;
}

.mr-po-selection-count b {
    color: #123f73;
    font-size: 20px;
}

@media (max-width: 900px) {
    .mr-po-select-content {
        padding: 12px 12px 126px;
    }

    .mr-po-source-summary {
        display: block;
        padding: 18px;
    }

    .mr-po-source-summary h2,
    .mr-po-selection-heading h2 {
        font-size: 19px;
    }

    .mr-po-source-stats {
        margin-top: 16px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mr-po-source-stats span {
        min-width: 0;
        padding: 9px 5px;
    }

    .mr-po-selection-heading {
        display: block;
        padding: 17px;
    }

    .mr-po-selection-tools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 14px;
    }

    .mr-po-selection-tools .btn {
        min-height: 44px;
        white-space: normal;
    }

    .mr-po-item-list {
        padding: 10px;
    }

    .mr-po-item-row {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 10px;
        padding: 14px 12px;
    }

    .mr-po-item-topline {
        display: block;
    }

    .mr-po-item-state {
        display: inline-flex;
        margin-top: 7px;
        white-space: normal;
    }

    .mr-po-item-meta {
        display: grid;
        gap: 4px;
    }

    .mr-po-selection-bar {
        position: fixed;
        right: 8px;
        bottom: calc(var(--mobile-nav-height, 72px) + 8px);
        left: 8px;
        grid-template-columns: 1fr 1.35fr;
        gap: 8px;
        padding: 9px;
        border: 1px solid #cddbea;
        border-radius: 8px;
    }

    .mr-po-selection-bar .btn {
        min-width: 0;
        min-height: 46px;
        padding: 9px 10px;
        white-space: normal;
    }

    .mr-po-selection-count {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mr-po-item-row {
        transition-duration: .01ms;
    }
}

.po-form .items tr.source-controlled td {
    background: #f5f9fd;
}

.po-form .items .source-controlled[readonly] {
    color: #183a63;
    background: #edf5fc;
    cursor: default;
}

.mr-source-line-label {
    display: block;
    margin: 3px 5px 0;
    color: #2079c6;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.po-form .items tr.source-blank-locked {
    opacity: .45;
}

.procurement-progress-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #e8eef5;
    color: #52677f;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.procurement-progress-badge.in_progress {
    background: #e6f2ff;
    color: #1768ad;
}

.procurement-progress-badge.complete {
    background: #e7f5ed;
    color: #167149;
}

.mr-print-procurement-ref {
    display: block;
    margin-top: 3px;
    color: #174f80;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .login-panel {
        padding: 18px;
    }

    .login-card.modern {
        padding: 28px 22px;
    }

    .page-header h1 {
        font-size: 34px;
    }

    .hero-main {
        padding: 28px 24px;
        border-radius: 22px;
    }

    .hero-main h2 {
        font-size: 42px;
    }

    .hero-main p {
        font-size: 15px;
    }

    .hero-note {
        padding: 24px;
        border-radius: 22px;
    }

    .stats-grid,
    .stats-grid.three-columns {
        grid-template-columns: 1fr;
    }

    .stat-card {
        min-height: 160px;
    }

    .card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .po-command-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .po-command-actions > * {
        width: 100%;
    }

    .print-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ---------- Print ---------- */

.print-only {
    display: none;
}

/* ---------- Operational center, settings and revisions ---------- */
.operations-page,.operations-settings-page,.revisions-page{display:flex;flex-direction:column;gap:18px}
.operations-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;border-radius:26px;color:#fff;background:linear-gradient(135deg,#112f5c,#1d6ed0 57%,#0da6b8);box-shadow:0 18px 42px rgba(17,47,92,.2)}
.operations-hero h2{margin:7px 0 8px;font-size:32px}.operations-hero p{margin:0;color:rgba(255,255,255,.82)}.operations-export{display:flex;gap:9px;flex-wrap:wrap}
.operations-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.operations-kpis article{padding:20px;border:1px solid #cfe0f7;border-left:5px solid #2563eb;border-radius:20px;background:#eff6ff;box-shadow:0 7px 20px rgba(15,35,65,.05)}.operations-kpis article.amber{background:#fff8e7;border-color:#f1d49a;border-left-color:#d99108}.operations-kpis article.red{background:#fff1f2;border-color:#f3c3c8;border-left-color:#d72828}.operations-kpis article.green{background:#edfbf4;border-color:#bce4cf;border-left-color:#149553}.operations-kpis span,.operations-kpis strong,.operations-kpis small{display:block}.operations-kpis span{color:#65758b;font-size:11px;font-weight:850}.operations-kpis strong{margin:5px 0;font-size:29px}.operations-kpis small{color:#7e8da1;font-size:11px}
.operations-chart-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr) minmax(270px,1fr);gap:15px}.operations-chart{padding-bottom:20px}.month-bars{height:245px;display:flex;align-items:flex-end;gap:8px;padding:5px 20px 0;overflow-x:auto}.month-bars>div{height:100%;min-width:55px;display:flex;flex:1;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.month-bars span,.month-bars small{font-size:9px;color:#73839a;white-space:nowrap}.month-bars b{font-size:9px;color:#334155;white-space:nowrap}.month-bars i{display:block;width:60%;height:var(--bar);min-height:6px;border-radius:8px 8px 3px 3px;background:linear-gradient(#20b5ce,#2563eb)}
.rank-card{padding-bottom:12px}.rank-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 9px;padding:11px 17px;border-top:1px solid #edf1f5}.rank-row span{overflow:hidden;font-size:12px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.rank-row b{font-size:11px}.rank-row small{grid-column:1/-1;color:#8492a5;font-size:9px}
.operations-filter{display:grid;grid-template-columns:repeat(6,minmax(135px,1fr));gap:10px;padding:16px;border:1px solid #dfe6ef;border-radius:20px;background:#fff;box-shadow:0 8px 25px rgba(15,35,65,.06)}.operations-filter input,.operations-filter select{width:100%;height:43px;padding:0 11px;border:1px solid #d8e1ec;border-radius:11px;background:#f8fafc}.operations-filter label{display:flex;flex-direction:column;gap:3px;color:#718096;font-size:9px;font-weight:800}.operations-table{min-width:1250px}.operations-table td{vertical-align:top}.operations-table td>small{display:block;margin-top:5px;color:#77869a}.archive-badge{display:inline-flex;margin-top:6px;padding:4px 7px;border-radius:99px;color:#536172;background:#e7ebf0;font-size:9px;font-weight:900}.delivery-status-badge.overdue{color:#b42331;background:#ffe7e9}.pagination{display:flex;justify-content:center;gap:7px;padding:18px}.pagination a{display:grid;place-items:center;min-width:36px;height:36px;border-radius:10px;color:#40516a;background:#edf2f7;text-decoration:none;font-weight:800}.pagination a.active{color:#fff;background:#2563eb}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.settings-panel{padding-bottom:20px}.settings-panel .modern-form,.inline-setting-form,.threshold-form,.permission-user-picker,.permission-grid{padding:0 22px}.inline-setting-form,.threshold-form{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.inline-setting-form input,.threshold-form input,.threshold-form select,.permission-user-picker select,.project-department-grid select{min-height:42px;padding:8px 11px;border:1px solid #d8e1ec;border-radius:11px;background:#f8fafc}.setting-list{display:grid;margin-top:13px}.setting-list>div{display:flex;justify-content:space-between;align-items:center;padding:10px 22px;border-top:1px solid #edf1f5}.setting-list form{margin:0}.threshold-form input{flex:1;min-width:135px}.threshold-form label{display:flex;align-items:center;gap:7px;font-size:12px}.threshold-form label input{min-width:auto}.permission-user-picker select{width:min(100%,480px)}.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}.permission-grid fieldset{max-height:330px;overflow:auto;padding:14px;border:1px solid #dfe6ef;border-radius:15px}.permission-grid legend{font-weight:850}.permission-grid label{display:block;padding:6px}.permission-grid button{grid-column:1/-1}.project-department-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 22px}.project-department-grid form{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;align-items:center;gap:8px;padding:10px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc}.project-department-grid b{font-size:12px}
.revision-version-list{display:flex;gap:11px;overflow-x:auto;padding-bottom:3px}.revision-version-list a{min-width:220px;padding:15px;border:1px solid #dfe6ef;border-radius:17px;background:#fff;text-decoration:none}.revision-version-list a.active{border-color:#76a8ed;background:#eff6ff;box-shadow:0 0 0 2px rgba(37,99,235,.1)}.revision-version-list span,.revision-version-list b,.revision-version-list small{display:block}.revision-version-list span{color:#2563eb;font-size:11px;font-weight:900}.revision-version-list b{margin:5px 0;font-size:13px}.revision-version-list small,.revision-version-list p{color:#7d8b9e;font-size:10px}.revision-version-list p{margin:7px 0 0}.revision-compare-card{padding-bottom:22px}.revision-diff-grid{display:grid;grid-template-columns:180px 1fr 1fr;margin:0 22px;border:1px solid #e2e8f0;border-radius:15px;overflow:hidden}.revision-diff-grid>div{padding:11px;border-right:1px solid #e8edf3;border-bottom:1px solid #e8edf3;font-size:12px}.revision-diff-grid>div.changed{background:#fff5d9}.revision-diff-head{color:#fff!important;background:#243b5c!important;font-weight:850}.revision-items{margin:22px}.revision-items h3{margin:0 0 10px}
@media(max-width:1100px){.operations-kpis{grid-template-columns:1fr 1fr}.operations-chart-grid{grid-template-columns:1fr 1fr}.operations-chart{grid-column:1/-1}.operations-filter{grid-template-columns:repeat(3,1fr)}.project-department-grid{grid-template-columns:1fr}}
@media(max-width:760px){.operations-hero{align-items:flex-start;flex-direction:column}.operations-export,.operations-export .btn{width:100%}.operations-kpis,.operations-chart-grid,.operations-filter,.settings-grid,.permission-grid{grid-template-columns:1fr}.operations-chart{grid-column:auto}.project-department-grid form{grid-template-columns:1fr}.revision-diff-grid{grid-template-columns:110px 1fr 1fr;margin:0 10px;overflow-x:auto}.revision-diff-grid>div{font-size:10px}.threshold-form>*{width:100%}}

@media print {
    html,
    body {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: #fff !important;
    }

    .no-print,
    .sidebar,
    .page-header,
    .po-command-card,
    .form-actions,
    .print-toolbar,
    .manual-calc-note {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .page-content,
    .po-page-content,
    .print-page-shell,
    .po-scroll-shell {
        max-width: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .po-paper {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .po-form input,
    .po-form textarea {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .print-only {
        display: block;
    }

    .items td {
        height: 26px;
    }

    .po-title {
        font-size: 24px;
    }

    .logo-line {
        font-size: 24px;
    }

    .po-company-mark {
        width: 46px;
        height: 40px;
    }

    .company small {
        font-size: 10px;
    }

    .box-title,
    .items th,
    .total-row label,
    .blackbar,
    .contractor {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    @page {
        size: A4 portrait;
        margin: 7mm;
    }
}

/* ---------- A4 single-page print lock ----------
   Keeps the saved Purchase Order on exactly one A4 portrait page in Chrome/Edge. */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body,
    body.print-view-body {
        width: 210mm !important;
        height: 297mm !important;
        min-width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .print-page-shell {
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 5mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .po-paper,
    .print-page-shell .po-paper {
        width: 200mm !important;
        height: 287mm !important;
        min-height: 287mm !important;
        max-height: 287mm !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        overflow: hidden !important;
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
        break-after: avoid-page !important;
        page-break-after: avoid !important;
    }

    .po-form {
        font-size: 8.5pt !important;
        line-height: 1.08 !important;
    }

    .po-head {
        height: 27mm !important;
        grid-template-columns: 44% 56% !important;
        overflow: hidden !important;
    }

    .po-title {
        font-size: 18pt !important;
        line-height: 1 !important;
    }

    .po-no {
        margin-left: 7mm !important;
        font-size: 15pt !important;
        letter-spacing: 1mm !important;
    }

    .mr-date {
        width: 78mm !important;
        margin-top: 1.5mm !important;
        font-size: 8.5pt !important;
        line-height: 1 !important;
    }

    .line-input,
    .static-line {
        padding: .7mm 1mm !important;
        border-bottom-width: .4mm !important;
    }

    .po-company-brand {
        gap: 1.5mm !important;
    }

    .po-company-mark {
        width: 11mm !important;
        height: 10mm !important;
        border-width: .6mm !important;
        font-size: 8pt !important;
    }

    .logo-line {
        font-size: 18pt !important;
        line-height: 1 !important;
    }

    .contractor {
        margin-top: .5mm !important;
        padding: .5mm 5mm !important;
        font-size: 7.5pt !important;
        line-height: 1 !important;
        letter-spacing: 1.3mm !important;
    }

    .company small {
        font-size: 6.8pt !important;
        line-height: 1.05 !important;
    }

    .blackbar {
        height: 5mm !important;
        margin: 1.5mm 0 2mm !important;
    }

    .info-grid {
        height: 35mm !important;
        min-height: 35mm !important;
        border-width: .4mm !important;
        border-top: 0 !important;
        overflow: hidden !important;
    }

    .info-box {
        height: 35mm !important;
        min-height: 0 !important;
        padding: 0 2mm !important;
        border-right-width: .4mm !important;
        overflow: hidden !important;
    }

    .box-title {
        height: 6.5mm !important;
        margin: 0 -2mm 1.4mm !important;
        padding: 1.2mm 1mm !important;
        box-sizing: border-box !important;
        font-size: 10.5pt !important;
        line-height: 1 !important;
    }

    .rowline {
        grid-template-columns: 22mm minmax(0, 1fr) !important;
        margin: 1.25mm 0 !important;
        font-size: 7.7pt !important;
        line-height: 1.05 !important;
    }

    .rowline b,
    .rowline input {
        padding: 0 .7mm !important;
        line-height: 1.05 !important;
    }

    .items {
        width: 100% !important;
        height: 148mm !important;
        font-size: 8pt !important;
        table-layout: fixed !important;
    }

    .items thead,
    .items thead tr {
        height: 8mm !important;
    }

    .items th {
        height: 8mm !important;
        padding: .8mm 1mm !important;
        border-width: .4mm !important;
        font-size: 10pt !important;
        line-height: 1 !important;
    }

    .items tbody tr {
        height: 7mm !important;
        min-height: 7mm !important;
        max-height: 7mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .items td {
        height: 7mm !important;
        min-height: 7mm !important;
        max-height: 7mm !important;
        padding: .5mm 1mm !important;
        border-width: .25mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        font-size: 8pt !important;
        line-height: 1.05 !important;
        vertical-align: middle !important;
    }

    .notes-total {
        height: 25mm !important;
        grid-template-columns: minmax(0, 1fr) 62mm !important;
        overflow: hidden !important;
    }

    .notes {
        height: 25mm !important;
        min-height: 0 !important;
        padding: 2mm !important;
        border-left-width: .4mm !important;
        border-bottom-width: .4mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        font-size: 8pt !important;
        line-height: 1.1 !important;
    }

    .notes-value {
        display: block !important;
        max-height: 17mm !important;
        overflow: hidden !important;
        font-size: 7.8pt !important;
        line-height: 1.1 !important;
    }

    .totals {
        height: 25mm !important;
        border-right-width: .4mm !important;
        overflow: hidden !important;
    }

    .total-row {
        height: 6.25mm !important;
        min-height: 6.25mm !important;
        grid-template-columns: 38mm 24mm !important;
    }

    .total-row label,
    .total-row input {
        height: 6.25mm !important;
        padding: .7mm 1mm !important;
        box-sizing: border-box !important;
        font-size: 7.8pt !important;
        line-height: 1 !important;
    }

    .total-row input {
        border-width: .25mm !important;
        border-left: 0 !important;
    }

    .footer-note {
        height: 4.5mm !important;
        margin: 1.2mm 0 .8mm !important;
        overflow: hidden !important;
        font-size: 7.2pt !important;
        line-height: 1.2 !important;
    }

    .signs {
        height: 18mm !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3mm !important;
        margin-top: .5mm !important;
        overflow: hidden !important;
    }

    .sig {
        height: 18mm !important;
        overflow: hidden !important;
        font-size: 7.5pt !important;
    }

    .sig label {
        font-size: 7.5pt !important;
    }

    .sig input {
        height: 7mm !important;
        padding: 1mm .5mm !important;
        border-bottom-width: .4mm !important;
        box-sizing: border-box !important;
        font-size: 8pt !important;
        line-height: 1 !important;
    }

    .sig small {
        margin-top: .7mm !important;
        font-size: 7pt !important;
        line-height: 1 !important;
    }

    .series {
        height: 3mm !important;
        margin-top: .7mm !important;
        overflow: hidden !important;
        font-size: 7pt !important;
        line-height: 1 !important;
    }
}

/* ========================================================================== */
/* Approval workflow, monitoring, reviewer accounts                           */
/* ========================================================================== */

.workflow-badge,
.decision-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    white-space: nowrap;
    background: #edf2f7;
    color: #52637a;
}

.workflow-badge.pending_review,
.decision-badge.pending { background: #fff7dc; color: #9a6400; }
.workflow-badge.partially_approved { background: #e8f2ff; color: #1d5fb8; }
.workflow-badge.approved,
.decision-badge.approved { background: #e5f8ee; color: #0f7b43; }
.workflow-badge.rejected,
.decision-badge.rejected { background: #fff0f1; color: #bd2431; }
.workflow-badge.cancelled { background: #edf0f4; color: #475569; text-decoration: line-through; }
.workflow-badge.saved { background: #eef2ff; color: #4f46e5; }

.checker-help-card,
.edit-remarks-card,
.monitoring-top-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 35, 65, .06);
}

.checker-help-card > div,
.edit-remarks-card label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checker-help-card span,
.edit-remarks-card span,
.monitoring-top-card p { color: var(--muted); font-size: 13px; }

.checker-help-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.checker-help-actions .btn { white-space: nowrap; }
.monitoring-top-card h2 { margin: 5px 0 4px; }
.edit-remarks-card { align-items: stretch; }
.edit-remarks-card input {
    min-width: 360px;
    flex: 1;
    border: 1px solid #d8e1ec;
    border-radius: 12px;
    padding: 12px 14px;
    background: #f8fafc;
}

.checker-picker { width: 100%; position: relative; }
.checker-picker summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 5px 8px;
    border-bottom: 1px solid #111;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    color: #22324b;
}
.checker-picker summary::-webkit-details-marker { display: none; }
.checker-picker[open] summary { border-color: var(--blue-700); color: var(--blue-700); }
.checker-options {
    position: absolute;
    z-index: 25;
    left: 0;
    right: 0;
    top: calc(100% + 7px);
    max-height: 260px;
    overflow: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #d7e1ed;
    border-radius: 13px;
    box-shadow: 0 18px 45px rgba(15, 35, 65, .18);
}
.checker-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 8px;
    border-radius: 9px;
    cursor: pointer;
}
.checker-option:hover { background: #f2f7fd; }
.checker-option.locked { background: #f4f6f8; cursor: not-allowed; }
.checker-option input { width: 17px !important; height: 17px; flex: 0 0 auto; accent-color: var(--blue-700); }
.checker-option span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.checker-option b { font-size: 12px; }
.checker-option small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.checker-empty { padding: 14px 10px; color: var(--muted); font-size: 12px; text-align: center; }
.checked-by-print-preview { display: none; }

.filter-card {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 190px 175px 175px auto auto;
    align-items: end;
    gap: 12px;
    padding: 16px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 35, 65, .06);
}
.filter-card input,
.filter-card select {
    width: 100%;
    height: 44px;
    border: 1px solid #d8e1ec;
    border-radius: 12px;
    padding: 0 12px;
    background: #f8fafc;
    color: var(--ink);
}
.filter-search { position: relative; }
.filter-search span { position: absolute; left: 13px; top: 11px; color: var(--muted); z-index: 1; }
.filter-search input { padding-left: 38px; }
.date-filter { display: flex; flex-direction: column; gap: 5px; }
.date-filter span { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.wide-table-wrap { overflow-x: auto; }
.monitoring-table { min-width: 1320px; }
.monitoring-table td { vertical-align: top; }
.monitoring-table td > b,
.monitoring-table td > span,
.monitoring-table td > small,
.assigned-table td > b,
.assigned-table td > span,
.assigned-table td > small {
    display: block;
}
.monitoring-table td > small,
.assigned-table td > small { margin-top: 5px; color: var(--muted); }
.remarks-preview {
    max-width: 190px;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #516177;
    font-size: 11px;
}
.text-danger { color: #bd2431 !important; }
.cancelled-row { opacity: .72; background: #f6f7f9; }
.table-action-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table-action-group form { margin: 0; }
.table-action-group button.table-action {
    font: inherit;
    cursor: pointer;
}

.table-action-group form[data-next="archive"] .table-action,
.table-action-group form[data-next="deactivate"] .table-action,
.table-action-group form[data-next="disable"] .table-action,
.table-action.reset-password-button {
    border-color: rgba(220, 38, 38, .18);
    background: linear-gradient(135deg, #dc2626, #f97316);
    box-shadow: 0 8px 18px rgba(220, 38, 38, .18);
}

.table-action-group form[data-next="restore"] .table-action,
.table-action-group form[data-next="activate"] .table-action,
.table-action-group form[data-next="enable"] .table-action {
    border-color: rgba(20, 149, 83, .18);
    background: linear-gradient(135deg, #149553, #10b981);
    box-shadow: 0 8px 18px rgba(20, 149, 83, .18);
}

.table-action-group form[data-next="supplier"] .table-action,
.table-action-group form[data-next="subcon"] .table-action {
    border-color: rgba(124, 58, 237, .18);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 8px 18px rgba(124, 58, 237, .18);
}

.modern-table td .table-action {
    vertical-align: middle;
}

@media screen and (max-width: 700px) {
    .table-action-group {
        align-items: stretch;
    }

    .table-action-group,
    .table-action-group form,
    .table-action-group .table-action {
        width: 100%;
    }
}

.danger-link {
    color: #fff !important;
    border-color: rgba(220, 38, 38, .18) !important;
    background: linear-gradient(135deg, #dc2626, #f97316) !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .18) !important;
}

.history-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.history-summary-card {
    min-height: 130px;
    padding: 20px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 35, 65, .06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.history-summary-card > span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.history-summary-card > b { font-size: 16px; }
.history-summary-card > small { color: var(--muted); }

.checker-decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.checker-decision-card {
    padding: 16px;
    border: 1px solid #dfe6ef;
    border-radius: 15px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.checker-decision-card.approved { border-color: #b8e9cf; background: #effbf4; }
.checker-decision-card.rejected { border-color: #fac7cc; background: #fff4f5; }
.checker-decision-card > span { font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.checker-decision-card > small { color: var(--muted); }
.checker-decision-card p { margin: 7px 0 0; color: #40516a; font-size: 13px; }
.empty-copy { color: var(--muted); }

.timeline-list { display: flex; flex-direction: column; }
.timeline-item {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 13px;
    padding: 16px 0;
    border-bottom: 1px solid #edf1f5;
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-700), var(--cyan-500)); box-shadow: 0 0 0 5px #edf5ff; }
.timeline-item > div:nth-child(2) { display: flex; flex-wrap: wrap; gap: 5px 8px; }
.timeline-item > div:nth-child(2) span { color: var(--muted); }
.timeline-item p { flex-basis: 100%; margin: 5px 0 0; color: #46576f; }
.timeline-item time { color: var(--muted); font-size: 12px; white-space: nowrap; }

.reviewer-hero .hero-main { min-width: 0; }
.assigned-table .decision-badge { margin-bottom: 4px; }
.review-decision-panel {
    max-width: 1120px;
    margin: 22px auto 0;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.review-decision-panel h2 { margin: 5px 0; }
.review-decision-panel p { max-width: 720px; margin: 0 0 5px; color: var(--muted); }
.review-decision-panel small { color: #516177; }
.review-buttons { display: flex; gap: 10px; }
.approve-button { color: #fff; background: #149553; min-width: 130px; }
.reject-button { color: #fff; background: #d72828; min-width: 130px; }
.cancelled-panel { border-color: #d6dce4; background: #f4f6f8; }

.user-management-grid { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(360px, 1.1fr); gap: 18px; margin-bottom: 18px; }
.modern-form { display: flex; flex-direction: column; gap: 13px; }
.modern-form label { display: flex; flex-direction: column; gap: 6px; color: #34455d; font-size: 12px; font-weight: 800; }
.modern-form input { height: 45px; border: 1px solid #d7e1ec; border-radius: 12px; padding: 0 13px; background: #f8fafc; }
.role-preview { padding: 14px; border-radius: 13px; background: #edf5ff; display: flex; flex-direction: column; gap: 4px; }
.role-preview span { font-size: 11px; font-weight: 850; color: var(--blue-700); text-transform: uppercase; letter-spacing: .08em; }
.role-preview small { color: var(--muted); }
.role-summary-list { display: flex; flex-direction: column; }
.role-summary-list > div { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid #edf1f5; }
.role-summary-list > div:last-child { border-bottom: 0; }
.role-summary-list p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.role-summary-list small { color: var(--muted); }
.stat-icon.small { width: 42px; height: 42px; font-size: 16px; }

.saved-po-document { position: relative; overflow: hidden; }
.cancelled-watermark {
    position: absolute;
    z-index: 10;
    top: 43%;
    left: 8%;
    width: 84%;
    transform: rotate(-22deg);
    text-align: center;
    color: rgba(190, 28, 39, .15);
    border: 9px solid rgba(190, 28, 39, .13);
    font-size: 84px;
    font-weight: 950;
    letter-spacing: .08em;
    pointer-events: none;
}
.saved-checker-list {
    min-height: 42px;
    border-bottom: 1px solid #111;
    padding: 2px 3px 3px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
}
.checker-line { display: flex; flex-direction: column; line-height: 1.04; font-size: 9px; }
.checker-line b { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checker-line small { font-size: 7px; color: #45556b; }
.checker-line.approved small { color: #0b783f; }
.checker-line.rejected small { color: #b5202d; }

@media (max-width: 1200px) {
    .filter-card { grid-template-columns: 1fr 180px 165px 165px; }
    .filter-card .btn { width: 100%; }
    .history-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .checker-help-card,
    .edit-remarks-card,
    .monitoring-top-card,
    .review-decision-panel { align-items: stretch; flex-direction: column; }
    .checker-help-actions { width: 100%; justify-content: stretch; }
    .checker-help-actions .btn { flex: 1 1 160px; }
    .edit-remarks-card input { min-width: 0; width: 100%; }
    .filter-card { grid-template-columns: 1fr; }
    .history-summary-grid,
    .user-management-grid { grid-template-columns: 1fr; }
    .review-buttons { width: 100%; }
    .review-buttons form, .review-buttons button { flex: 1; width: 100%; }
}

@media print {
    .checker-picker { display: none !important; }
    .checked-by-print-preview {
        display: flex !important;
        min-height: 34px;
        border-bottom: .2mm solid #111;
        flex-direction: column;
        justify-content: flex-end;
        gap: .3mm;
        padding: .3mm .5mm;
        font-size: 6.7pt;
        line-height: 1.02;
        overflow: hidden;
    }
    .checked-by-print-preview span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .saved-checker-list { min-height: 8.5mm; max-height: 11mm; gap: .15mm; padding: .2mm .4mm; overflow: hidden; }
    .checker-line { font-size: 6.2pt; line-height: 1; }
    .checker-line b { font-size: 6.2pt; }
    .checker-line small { font-size: 5.1pt; }
    .cancelled-watermark { font-size: 44pt; border-width: 2mm; }
    .reviewer-view-body .print-page-shell { padding-top: 0 !important; }
}

/* ---------- Notification center and audit spacing patch ---------- */
.side-link-label {
    flex: 1;
    min-width: 0;
}

.notification-count {
    min-width: 25px;
    height: 25px;
    display: inline-grid;
    place-items: center;
    padding: 0 7px;
    color: #fff;
    border: 2px solid rgba(255,255,255,.20);
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 7px 18px rgba(239, 68, 68, .28);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* Keep decision cards, timeline dots, and text comfortably inside cards. */
.checker-decision-grid {
    padding: 0 28px 26px;
}

.timeline-list {
    padding: 0 28px 24px;
}

.timeline-item {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px 8px;
}

.timeline-dot {
    margin: 6px 0 0 4px;
}

.notification-page-content {
    max-width: 1380px;
}


.notification-push-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid rgba(11, 34, 58, .12);
    border-radius: 18px;
    background: var(--card-bg, #fff);
    box-shadow: 0 8px 24px rgba(11, 34, 58, .06);
}
.notification-push-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(11, 34, 58, .08);
    font-size: 22px;
}
.notification-push-copy h2 { margin: 4px 0 6px; }
.notification-push-copy p { margin: 0 0 4px; font-weight: 700; }
.notification-push-copy small { display: block; opacity: .72; line-height: 1.45; }
.notification-push-copy [data-push-status][data-state="success"] { color: #198754; }
.notification-push-copy [data-push-status][data-state="warning"] { color: #9a6700; }
.notification-push-copy [data-push-status][data-state="error"] { color: #b42318; }
.notification-push-button { white-space: nowrap; }
html[data-theme="dark"] .notification-push-card {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    box-shadow: none;
}
@media (max-width: 720px) {
    .notification-push-card {
        grid-template-columns: auto 1fr;
    }
    .notification-push-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.notification-summary-card {
    min-height: 245px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 24px;
    padding: 34px 38px;
    color: #fff;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.24), transparent 26%),
        linear-gradient(120deg, #215bd7, #258dde 54%, #0ab2c9);
    box-shadow: 0 24px 54px rgba(28, 110, 223, .22);
}

.notification-summary-card h2 {
    max-width: 720px;
    margin: 12px 0 14px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.notification-summary-card p {
    max-width: 780px;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 17px;
    line-height: 1.65;
}

.notification-summary-count {
    flex: 0 0 150px;
    min-height: 150px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 26px;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(10px);
}

.notification-summary-count strong {
    font-size: 55px;
    line-height: 1;
}

.notification-summary-count span {
    margin-top: 8px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.notification-card-heading {
    align-items: flex-start;
}

.notification-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.notification-heading-actions form {
    margin: 0;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 28px 28px;
}

.notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 18px 20px;
    border: 1px solid #e1e8f0;
    border-radius: 18px;
    background: #fbfcfe;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.notification-item:hover {
    transform: translateY(-1px);
    border-color: #cbd8e8;
    box-shadow: 0 13px 30px rgba(15, 35, 65, .08);
}

.notification-item.unread {
    border-color: #b9d4ff;
    background: linear-gradient(135deg, #f7fbff, #eef7ff);
    box-shadow: inset 4px 0 0 #2f75ed;
}

.notification-item.approved.unread {
    border-color: #b8e9cf;
    background: #f0fbf5;
    box-shadow: inset 4px 0 0 #149553;
}

.notification-item.rejected.unread {
    border-color: #fac7cc;
    background: #fff5f6;
    box-shadow: inset 4px 0 0 #d72828;
}

.notification-item-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 15px;
    background: linear-gradient(145deg, #4775ef, #10b8d5);
    font-size: 22px;
    font-weight: 900;
}

.notification-item.approved .notification-item-icon {
    background: linear-gradient(145deg, #0f9f55, #25b974);
}

.notification-item.rejected .notification-item-icon {
    background: linear-gradient(145deg, #d72828, #f05252);
}

.notification-item-copy {
    min-width: 0;
}

.notification-item-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.notification-item h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -.015em;
}

.notification-item p {
    margin: 7px 0 9px;
    color: #516177;
    line-height: 1.55;
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: #8391a5;
    font-size: 12px;
}

.unread-pill {
    padding: 4px 7px;
    color: #1d5ed1;
    border-radius: 999px;
    background: #dceaff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.notification-item-actions {
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.notification-item-actions form {
    margin: 0;
    text-align: center;
}

.notification-text-button {
    appearance: none;
    border: 0;
    padding: 4px 8px;
    color: #60728d;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.notification-text-button:hover {
    color: #215bd7;
}

.notification-empty-state {
    display: grid;
    place-items: center;
    padding: 56px 24px 64px;
    text-align: center;
}

.notification-empty-state > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    color: #2f75ed;
    border-radius: 20px;
    background: #e4efff;
    font-size: 26px;
    font-weight: 900;
}

.notification-empty-state h3 {
    margin: 17px 0 5px;
    font-size: 22px;
}

.notification-empty-state p {
    margin: 0;
    color: var(--muted);
}

.live-notification-toast {
    position: fixed;
    z-index: 120;
    top: 22px;
    right: 22px;
    width: min(410px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: start;
    overflow: hidden;
    border: 1px solid #cfe0f5;
    border-radius: 19px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 70px rgba(8, 28, 58, .24);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-18px) scale(.98);
    transition: opacity .24s ease, transform .24s ease;
}

.live-notification-toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.live-notification-toast > a {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    padding: 16px 8px 16px 16px;
    text-decoration: none;
}

.live-notification-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(145deg, #2f75ed, #10b8d5);
    font-size: 20px;
    font-weight: 900;
}

.live-notification-copy {
    min-width: 0;
}

.live-notification-copy small,
.live-notification-copy strong,
.live-notification-copy > span {
    display: block;
}

.live-notification-copy small {
    color: #2f75ed;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
}

.live-notification-copy strong {
    margin: 3px 0 5px;
    font-size: 14px;
}

.live-notification-copy > span {
    overflow: hidden;
    color: #60728d;
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-notification-close {
    appearance: none;
    width: 30px;
    height: 30px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    color: #7b8ba1;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
}

.live-notification-close:hover {
    color: #172033;
    background: #eef3f9;
}

@media (max-width: 900px) {
    
.notification-push-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid rgba(11, 34, 58, .12);
    border-radius: 18px;
    background: var(--card-bg, #fff);
    box-shadow: 0 8px 24px rgba(11, 34, 58, .06);
}
.notification-push-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(11, 34, 58, .08);
    font-size: 22px;
}
.notification-push-copy h2 { margin: 4px 0 6px; }
.notification-push-copy p { margin: 0 0 4px; font-weight: 700; }
.notification-push-copy small { display: block; opacity: .72; line-height: 1.45; }
.notification-push-copy [data-push-status][data-state="success"] { color: #198754; }
.notification-push-copy [data-push-status][data-state="warning"] { color: #9a6700; }
.notification-push-copy [data-push-status][data-state="error"] { color: #b42318; }
.notification-push-button { white-space: nowrap; }
html[data-theme="dark"] .notification-push-card {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    box-shadow: none;
}
@media (max-width: 720px) {
    .notification-push-card {
        grid-template-columns: auto 1fr;
    }
    .notification-push-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.notification-summary-card {
        align-items: stretch;
        flex-direction: column;
        padding: 28px;
    }

    .notification-summary-count {
        min-height: 100px;
        flex-basis: auto;
    }

    .notification-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .notification-item-actions {
        grid-column: 1 / -1;
        min-width: 0;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .timeline-item {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .timeline-item time {
        grid-column: 2;
        white-space: normal;
    }
}

@media (max-width: 620px) {
    .checker-decision-grid,
    .timeline-list,
    .notification-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .notification-card-heading {
        flex-direction: column;
    }

    .notification-heading-actions {
        justify-content: flex-start;
    }

    .notification-item {
        padding: 16px;
    }

    .live-notification-toast {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }
}


/* ========================================================================== */
/* Metriccon logo + refined A4 Purchase Order print layout (2026-06-15)       */
/* ========================================================================== */

.po-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 28px;
    white-space: nowrap;
}

.po-title-row .po-no {
    margin-left: 0;
    white-space: nowrap;
}

.po-company-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    object-fit: contain;
    object-position: center;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 6mm;
    }

    html,
    body,
    body.print-view-body {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .print-page-shell,
    .reviewer-view-body .print-page-shell {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .po-paper,
    .print-page-shell .po-paper {
        width: 100% !important;
        height: 285mm !important;
        min-height: 285mm !important;
        max-height: 285mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        overflow: hidden !important;
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
        break-after: avoid-page !important;
        page-break-after: avoid !important;
    }

    .po-form {
        font-size: 8.2pt !important;
        line-height: 1.08 !important;
    }

    .po-head {
        height: 30mm !important;
        grid-template-columns: 43% 57% !important;
        align-items: start !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .po-title-row {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: nowrap !important;
        gap: 7mm !important;
        white-space: nowrap !important;
    }

    .po-title {
        flex: 0 0 auto !important;
        font-size: 18.5pt !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .po-no,
    .po-title-row .po-no {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        font-size: 15pt !important;
        line-height: 1 !important;
        letter-spacing: .8mm !important;
        white-space: nowrap !important;
    }

    .po-number-input {
        width: 29mm !important;
        font-size: 14pt !important;
        line-height: 1 !important;
        letter-spacing: .65mm !important;
    }

    .mr-date {
        width: 79mm !important;
        margin-top: 2.2mm !important;
        font-size: 8.2pt !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .line-input,
    .static-line {
        padding: .6mm 1mm !important;
        border-bottom-width: .35mm !important;
    }

    .company {
        padding-top: .2mm !important;
    }

    .po-company-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 2mm !important;
        white-space: nowrap !important;
    }

    .po-company-logo {
        width: 14mm !important;
        height: 14mm !important;
        flex: 0 0 14mm !important;
        object-fit: contain !important;
    }

    .logo-line {
        font-size: 17.2pt !important;
        line-height: 1 !important;
        letter-spacing: .12mm !important;
        white-space: nowrap !important;
    }

    .contractor {
        margin-top: .5mm !important;
        padding: .45mm 4.5mm !important;
        font-size: 7.2pt !important;
        line-height: 1 !important;
        letter-spacing: 1.2mm !important;
        white-space: nowrap !important;
    }

    .company small {
        font-size: 6.4pt !important;
        line-height: 1.04 !important;
        white-space: nowrap !important;
    }

    .blackbar {
        height: 5mm !important;
        margin: 2mm 0 !important;
    }

    .info-grid {
        height: 38mm !important;
        min-height: 38mm !important;
        border-width: .35mm !important;
        border-top: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .info-box {
        height: 38mm !important;
        min-height: 0 !important;
        padding: 0 2mm !important;
        border-right-width: .35mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .box-title {
        height: 7mm !important;
        margin: 0 -2mm 1.5mm !important;
        padding: 1.3mm 1mm !important;
        box-sizing: border-box !important;
        font-size: 10.2pt !important;
        line-height: 1 !important;
    }

    .rowline {
        grid-template-columns: 22mm minmax(0, 1fr) !important;
        margin: 1.35mm 0 !important;
        font-size: 7.6pt !important;
        line-height: 1.04 !important;
    }

    .rowline b,
    .rowline input {
        padding: 0 .6mm !important;
        line-height: 1.04 !important;
    }

    .items {
        width: 100% !important;
        height: 153mm !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        font-size: 7.8pt !important;
    }

    .items thead,
    .items thead tr,
    .items th {
        height: 8mm !important;
    }

    .items th {
        padding: .8mm 1mm !important;
        border-width: .35mm !important;
        box-sizing: border-box !important;
        font-size: 9.2pt !important;
        line-height: 1 !important;
    }

    .items tbody tr,
    .items td {
        height: 7.25mm !important;
        min-height: 7.25mm !important;
        max-height: 7.25mm !important;
    }

    .items tbody tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .items td {
        padding: .5mm 1mm !important;
        border-width: .22mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        font-size: 7.7pt !important;
        line-height: 1.04 !important;
        vertical-align: middle !important;
    }

    .items input {
        padding: .5mm .6mm !important;
        font-size: 7.7pt !important;
        line-height: 1.04 !important;
    }

    .notes-total {
        height: 25mm !important;
        grid-template-columns: minmax(0, 1fr) 62mm !important;
        overflow: hidden !important;
    }

    .notes {
        height: 25mm !important;
        min-height: 0 !important;
        padding: 2mm !important;
        border-left-width: .35mm !important;
        border-bottom-width: .35mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        font-size: 7.7pt !important;
        line-height: 1.08 !important;
    }

    .notes-value {
        display: block !important;
        max-height: 17mm !important;
        overflow: hidden !important;
        font-size: 7.4pt !important;
        line-height: 1.08 !important;
    }

    .totals {
        height: 25mm !important;
        border-right-width: .35mm !important;
        overflow: hidden !important;
    }

    .total-row {
        height: 6.25mm !important;
        min-height: 6.25mm !important;
        grid-template-columns: 38mm 24mm !important;
    }

    .total-row label,
    .total-row input {
        height: 6.25mm !important;
        padding: .65mm 1mm !important;
        box-sizing: border-box !important;
        font-size: 7.5pt !important;
        line-height: 1 !important;
    }

    .total-row input {
        border-width: .22mm !important;
        border-left: 0 !important;
    }

    .footer-note {
        height: 5mm !important;
        margin: 1mm 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        font-size: 6.8pt !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .signs {
        height: 22mm !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3mm !important;
        margin-top: 0 !important;
        overflow: hidden !important;
    }

    .sig {
        height: 22mm !important;
        min-width: 0 !important;
        overflow: hidden !important;
        font-size: 7.3pt !important;
    }

    .sig label {
        font-size: 7.3pt !important;
        line-height: 1 !important;
    }

    .sig input {
        height: 8mm !important;
        padding: 1.2mm .5mm !important;
        border-bottom-width: .35mm !important;
        box-sizing: border-box !important;
        font-size: 7.7pt !important;
        line-height: 1 !important;
    }

    .sig small {
        margin-top: .6mm !important;
        font-size: 6.6pt !important;
        line-height: 1 !important;
    }

    .saved-checker-list {
        min-height: 9mm !important;
        max-height: 13mm !important;
        gap: .2mm !important;
        padding: .3mm .4mm !important;
        overflow: hidden !important;
    }

    .checker-line,
    .checker-line b {
        font-size: 6pt !important;
        line-height: 1 !important;
    }

    .checker-line small {
        font-size: 5pt !important;
        line-height: 1 !important;
    }

    .series {
        display: none !important;
    }
}


/* Complete-system logo safeguard */
.po-company-logo {
    display: block;
    background: #132d5b;
    border-radius: 8px;
}
@media print {
    .po-company-logo {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ========================================================================== */
/* Realtime notification status + reviewer mobile portal (schema v6)          */
/* ========================================================================== */

.sidebar-brand-logo {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.16);
}

.sidebar-live-status {
    margin: auto 4px 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #9eacc2;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    font-size: 11px;
    font-weight: 700;
}

.sidebar-live-status i,
.notification-side-icon i {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245,158,11,.14);
}

.sidebar-live-status i[data-state="live"],
.notification-side-icon i[data-state="live"] {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}

.sidebar-live-status i[data-state="fallback"],
.notification-side-icon i[data-state="fallback"] {
    background: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56,189,248,.15);
}

.notification-side-icon {
    position: relative;
    font-size: 0;
}

.notification-side-icon::after {
    content: "\25CF";
    font-size: 18px;
    line-height: 1;
}

.notification-side-icon i {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--navy-900);
}

.reviewer-mobile-welcome {
    display: none;
}

.reviewer-phone-status {
    margin: 0 0 20px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #dbe6f2;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f5f9ff);
    box-shadow: 0 10px 28px rgba(15,35,65,.06);
}

.reviewer-phone-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 15px;
    background: linear-gradient(145deg, #2563eb, #10b8d5);
    font-size: 22px;
}

.reviewer-phone-status strong,
.reviewer-phone-status p {
    display: block;
}

.reviewer-phone-status p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.reviewer-phone-badge {
    padding: 7px 10px;
    color: #64748b;
    border: 1px solid #d8e0ea;
    border-radius: 999px;
    background: #f4f7fa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.reviewer-phone-badge.connected {
    color: #087443;
    border-color: #a7e2c4;
    background: #eafaf1;
}

.review-mobile-summary,
.mobile-review-action-bar,
.review-paper-label {
    display: none;
}

.review-paper-scroll {
    min-width: 0;
}

@media (max-width: 900px) {
    .sidebar-live-status {
        display: none;
    }

    .reviewer-portal-body .sidebar {
        position: sticky;
        top: 0;
        z-index: 90;
        padding-top: max(10px, env(safe-area-inset-top));
        box-shadow: 0 7px 24px rgba(3, 14, 32, .18);
    }

    .reviewer-portal-body .sidebar-nav {
        scrollbar-width: none;
    }

    .reviewer-portal-body .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .reviewer-portal-body .page-header {
        display: none;
    }

    .reviewer-page-content {
        padding-top: 16px;
    }

    .reviewer-mobile-welcome {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 15px;
        padding: 16px;
        color: #fff;
        border-radius: 19px;
        background: linear-gradient(135deg, #10213d, #16467c);
        box-shadow: 0 14px 32px rgba(15,35,65,.17);
    }

    .reviewer-mobile-avatar {
        width: 49px;
        height: 49px;
        flex: 0 0 49px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 15px;
        background: linear-gradient(145deg, #3479ef, #10b8d5);
        font-size: 20px;
        font-weight: 900;
    }

    .reviewer-mobile-welcome > div:last-child {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .reviewer-mobile-welcome span,
    .reviewer-mobile-welcome small {
        color: rgba(255,255,255,.72);
        font-size: 11px;
    }

    .reviewer-mobile-welcome strong {
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .reviewer-hero {
        display: none;
    }

    .reviewer-phone-status {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px;
        gap: 12px;
        border-radius: 17px;
    }

    .reviewer-phone-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .reviewer-phone-badge {
        grid-column: 2;
        justify-self: start;
    }

    .reviewer-stats-grid {
        grid-template-columns: repeat(4, minmax(118px, 1fr));
        gap: 10px;
        overflow-x: auto;
        padding: 2px 2px 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .reviewer-stats-grid::-webkit-scrollbar {
        display: none;
    }

    .reviewer-stats-grid .stat-card {
        min-height: 122px;
        padding: 15px;
        scroll-snap-align: start;
    }

    .reviewer-stats-grid .stat-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .reviewer-stats-grid .stat-card strong {
        font-size: 30px;
    }

    .reviewer-stats-grid .stat-card small {
        font-size: 10px;
    }

    .reviewer-filter-card {
        position: sticky;
        top: 73px;
        z-index: 40;
        gap: 8px;
        padding: 11px;
        border-radius: 16px;
        box-shadow: 0 10px 26px rgba(15,35,65,.12);
    }

    .reviewer-filter-card .filter-search {
        min-height: 44px;
    }

    .reviewer-filter-card select,
    .reviewer-filter-card .btn {
        min-height: 43px;
    }

    .reviewer-queue-card {
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .reviewer-queue-card > .card-heading {
        padding: 6px 2px 12px;
    }

    .assigned-table-wrap {
        overflow: visible;
    }

    .assigned-table,
    .assigned-table tbody,
    .assigned-table tr,
    .assigned-table td {
        display: block;
        width: 100%;
    }

    .assigned-table thead {
        display: none;
    }

    .assigned-table tbody {
        display: grid;
        gap: 13px;
    }

    .assigned-table tr:not(.empty-row) {
        position: relative;
        padding: 18px;
        overflow: hidden;
        border: 1px solid #dfe7f1;
        border-radius: 19px;
        background: #fff;
        box-shadow: 0 10px 25px rgba(15,35,65,.07);
    }

    .assigned-table tr.pending-review-row {
        border-color: #bdd6ff;
        box-shadow: 0 12px 30px rgba(37,99,235,.12);
    }

    .assigned-table tr.pending-review-row::before {
        content: "Needs review";
        position: absolute;
        top: 0;
        right: 0;
        padding: 6px 10px;
        color: #fff;
        border-bottom-left-radius: 12px;
        background: linear-gradient(135deg, #2563eb, #10b8d5);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .assigned-table td {
        min-height: 0;
        padding: 10px 0;
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        border: 0;
        border-bottom: 1px solid #edf1f5;
        text-align: right;
    }

    .assigned-table td::before {
        content: attr(data-label);
        color: #7b8aa1;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }

    .assigned-table td:last-child {
        display: block;
        padding: 14px 0 0;
        border-bottom: 0;
    }

    .assigned-table td:last-child::before {
        display: none;
    }

    .assigned-table td > b,
    .assigned-table td > span,
    .assigned-table td > small {
        justify-self: end;
    }

    .assigned-table td > small {
        grid-column: 2;
        text-align: right;
    }

    .reviewer-open-action {
        width: 100%;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: #fff;
        background: linear-gradient(135deg, #2563eb, #10b8d5);
        box-shadow: 0 10px 20px rgba(37,99,235,.20);
        font-size: 14px;
        font-weight: 850;
        text-decoration: none;
    }

    .assigned-table .empty-row {
        display: block;
        padding: 24px;
        border: 1px dashed #cfd9e5;
        border-radius: 17px;
        background: #fff;
        text-align: center;
    }

    .assigned-table .empty-row td {
        display: block;
        border: 0;
        text-align: center;
    }

    .assigned-table .empty-row td::before {
        display: none;
    }
}

@media (max-width: 700px) {
    .reviewer-mobile-review-body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
        background: #eef3f9;
    }

    .reviewer-toolbar {
        position: sticky;
        top: 0;
        z-index: 100;
        min-height: auto;
        padding: max(10px, env(safe-area-inset-top)) 13px 11px;
        align-items: center;
        background: rgba(8,20,38,.96);
        backdrop-filter: blur(14px);
    }

    .reviewer-toolbar-copy {
        min-width: 0;
    }

    .reviewer-toolbar-copy .eyebrow,
    .reviewer-toolbar-copy small {
        display: none;
    }

    .reviewer-toolbar-copy strong {
        font-size: 16px;
        white-space: nowrap;
    }

    .reviewer-toolbar-actions {
        gap: 6px !important;
    }

    .reviewer-toolbar-actions .btn {
        min-height: 40px;
        padding: 9px 11px;
        color: #fff;
        border-color: rgba(255,255,255,.18);
        background: rgba(255,255,255,.09);
        font-size: 12px;
    }

    .review-mobile-summary {
        display: block;
        margin: 14px 12px;
        padding: 17px;
        border: 1px solid #dce5ef;
        border-radius: 21px;
        background: #fff;
        box-shadow: 0 13px 32px rgba(15,35,65,.09);
    }

    .review-mobile-summary-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 15px;
        border-bottom: 1px solid #edf1f5;
    }

    .review-mobile-summary-head h1 {
        margin: 4px 0 3px;
        font-size: 29px;
        letter-spacing: -.035em;
    }

    .review-mobile-summary-head p {
        margin: 0;
        color: var(--muted);
        font-size: 11px;
    }

    .review-mobile-summary-head .workflow-badge {
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .review-mobile-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    .review-mobile-detail-grid article {
        min-width: 0;
        padding: 13px;
        border: 1px solid #e4eaf1;
        border-radius: 14px;
        background: #f8fafc;
    }

    .review-mobile-detail-grid span,
    .review-mobile-detail-grid strong,
    .review-mobile-detail-grid small {
        display: block;
    }

    .review-mobile-detail-grid span,
    .review-mobile-section-title span,
    .review-mobile-notes > span {
        color: #64748b;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .review-mobile-detail-grid strong {
        margin: 5px 0 4px;
        overflow-wrap: anywhere;
        font-size: 13px;
    }

    .review-mobile-detail-grid small {
        color: #718198;
        font-size: 10px;
        line-height: 1.4;
    }

    .review-mobile-items {
        padding-top: 4px;
    }

    .review-mobile-section-title {
        padding: 8px 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .review-mobile-section-title b {
        color: #64748b;
        font-size: 11px;
    }

    .review-mobile-item {
        display: grid;
        grid-template-columns: 31px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 12px 0;
        border-bottom: 1px solid #edf1f5;
    }

    .review-mobile-item-number {
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        color: #2563eb;
        border-radius: 10px;
        background: #eaf2ff;
        font-size: 11px;
        font-weight: 900;
    }

    .review-mobile-item-copy {
        min-width: 0;
    }

    .review-mobile-item-copy strong,
    .review-mobile-item-copy span {
        display: block;
    }

    .review-mobile-item-copy strong {
        margin-bottom: 3px;
        overflow-wrap: anywhere;
        font-size: 12px;
    }

    .review-mobile-item-copy span {
        color: #718198;
        font-size: 10px;
    }

    .review-mobile-item > b {
        font-size: 12px;
        white-space: nowrap;
    }

    .review-mobile-empty {
        color: var(--muted);
        font-size: 12px;
    }

    .review-mobile-totals {
        margin-top: 12px;
        padding: 12px;
        border-radius: 15px;
        background: #0f1f38;
        color: #fff;
    }

    .review-mobile-totals > div {
        min-height: 31px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(255,255,255,.09);
        font-size: 11px;
    }

    .review-mobile-totals > div:last-child {
        border-bottom: 0;
    }

    .review-mobile-totals .grand {
        min-height: 43px;
        color: #7dd3fc;
    }

    .review-mobile-totals .grand strong {
        font-size: 18px;
    }

    .review-mobile-notes {
        margin-top: 12px;
        padding: 13px;
        border: 1px solid #e3eaf2;
        border-radius: 14px;
        background: #fbfcfe;
    }

    .review-mobile-notes p {
        margin: 7px 0 0;
        color: #44546b;
        font-size: 11px;
        line-height: 1.55;
    }

    .desktop-review-decision {
        display: none !important;
    }

    .mobile-review-action-bar {
        position: fixed;
        z-index: 200;
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        padding: 10px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(255,255,255,.55);
        border-radius: 19px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 18px 44px rgba(9,24,47,.24);
        backdrop-filter: blur(16px);
    }

    .mobile-review-current {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-review-current > span {
        color: #718198;
        font-size: 8px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .mobile-review-current .decision-badge {
        font-size: 8px;
    }

    .mobile-review-action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mobile-review-action-buttons form,
    .mobile-review-action-buttons button {
        width: 100%;
    }

    .mobile-review-action-buttons .btn {
        min-height: 47px;
        padding: 10px 8px;
        border-radius: 13px;
        font-size: 13px;
    }

    .review-paper-label {
        margin: 18px 13px 0;
        padding: 13px 14px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        color: #fff;
        border-radius: 15px 15px 0 0;
        background: #10213d;
    }

    .review-paper-label span {
        font-size: 12px;
        font-weight: 850;
    }

    .review-paper-label small {
        color: rgba(255,255,255,.67);
        font-size: 9px;
    }

    .review-paper-scroll {
        width: calc(100% - 26px);
        margin: 0 13px 20px;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 0 0 16px 16px;
        background: #66717d;
        box-shadow: 0 13px 30px rgba(15,35,65,.13);
        -webkit-overflow-scrolling: touch;
    }

    .review-paper-scroll .print-page-shell {
        width: 800px;
        min-width: 800px;
        padding: 14px;
    }

    .review-paper-scroll .po-paper {
        margin: 0;
    }
}

@media (max-width: 430px) {
    .reviewer-page-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .reviewer-filter-card {
        top: 68px;
    }

    .review-mobile-detail-grid {
        grid-template-columns: 1fr;
    }

    .review-mobile-summary-head {
        flex-direction: column;
    }

    .mobile-review-action-bar {
        grid-template-columns: 1fr;
    }

    .mobile-review-current {
        display: none;
    }
}

@media print {
    .review-mobile-summary,
    .mobile-review-action-bar,
    .review-paper-label,
    .reviewer-mobile-welcome,
    .reviewer-phone-status {
        display: none !important;
    }

    .review-paper-scroll {
        width: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .review-paper-scroll .print-page-shell {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
}

/* ========================================================================== */
/* Supplier, project and product reference modules + P.O smart dropdowns v8   */
/* ========================================================================== */

.sidebar-nav {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.18); }

.catalog-page-content {
    max-width: 1600px;
}

.catalog-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding: 30px 34px;
    color: #fff;
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 16%, rgba(255,255,255,.22), transparent 25%),
        linear-gradient(120deg, #1e56d6, #1689d1 58%, #08afc2);
    box-shadow: 0 22px 46px rgba(28, 110, 223, .20);
}

.catalog-hero h2 {
    max-width: 790px;
    margin: 9px 0 10px;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.catalog-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.88);
    line-height: 1.6;
}

.catalog-metrics {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 12px;
}

.catalog-metrics div {
    min-width: 120px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
}

.catalog-metrics span,
.catalog-metrics b { display: block; }
.catalog-metrics span { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.catalog-metrics b { margin-top: 8px; font-size: 32px; }

.catalog-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.catalog-form-card {
    position: sticky;
    top: 24px;
}

.catalog-list-card {
    min-width: 0;
}

.catalog-list-heading {
    margin-bottom: 16px;
}

.catalog-filter-bar {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 170px auto auto;
    gap: 10px;
    margin-bottom: 18px;
}

.catalog-filter-bar input,
.catalog-filter-bar select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #dce4ee;
    border-radius: 13px;
    outline: none;
    background: #fff;
}

.catalog-filter-bar input:focus,
.catalog-filter-bar select:focus {
    border-color: #4c7ff0;
    box-shadow: 0 0 0 3px rgba(50,105,230,.12);
}

.catalog-table-wrap { max-height: 680px; }
.catalog-table th { white-space: nowrap; }
.catalog-table td { min-width: 120px; }
.catalog-table td:first-child { min-width: 135px; font-weight: 800; }
.catalog-row-archived { opacity: .58; }
.empty-table-cell { padding: 42px !important; color: #718096; text-align: center; }

.supplier-list-groups {
    display: grid;
    gap: 18px;
}

.supplier-list-section {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    background: #f8fbff;
}

.supplier-list-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.supplier-list-section-heading h3 {
    margin: 3px 0 0;
    font-size: 20px;
}

.supplier-list-section .catalog-table td:nth-child(2) {
    font-weight: 800;
}

.catalog-form-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 7px 10px;
    color: #52647e;
    border: 1px dashed #c9d5e5;
    border-radius: 9px;
    background: #f7faff;
    font-size: 11px;
    line-height: 1.4;
}

.catalog-form-hint span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #fff;
    border-radius: 6px;
    background: #2e6ee8;
    font-weight: 900;
}

.product-hint { margin-top: 7px; }

.po-form input[list] {
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    padding-right: 18px;
}

/* The P.O uses the original logo image without a CSS frame or colored tile. */
.po-company-logo,
.saved-po-document .po-company-logo {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
}

.po-image-exporting .no-print,
.po-image-exporting datalist,
.po-image-exporting #poCatalogData {
    display: none !important;
}

.po-image-exporting .po-paper {
    margin: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 1180px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-form-card { position: static; }
}

@media (max-width: 760px) {
    .catalog-hero { align-items: stretch; flex-direction: column; padding: 24px; border-radius: 22px; }
    .catalog-metrics { width: 100%; }
    .catalog-metrics div { min-width: 0; }
    .catalog-filter-bar { grid-template-columns: 1fr 1fr; }
    .catalog-filter-bar input { grid-column: 1 / -1; }
}

@media print {
    .catalog-form-hint { display: none !important; }
    .po-company-logo { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
}

/* ========================================================================== */
/* Catalog form spacing and full-address display fix v9                       */
/* ========================================================================== */

.catalog-form-card {
    overflow: hidden;
}

.catalog-form-card > .card-heading {
    padding: 28px 28px 18px;
}

.catalog-form-card .modern-form {
    gap: 16px;
    padding: 0 28px 28px;
}

.catalog-form-card .modern-form label {
    gap: 8px;
    margin: 0;
    line-height: 1.35;
}

.catalog-form-card .modern-form input,
.catalog-form-card .modern-form select,
.catalog-form-card .modern-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7e1ec;
    border-radius: 14px;
    outline: 0;
    background: #f8fafc;
    color: #14213a;
    font: inherit;
    font-weight: 650;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.catalog-form-card .modern-form input,
.catalog-form-card .modern-form select {
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
}

.catalog-form-card .modern-form textarea {
    min-height: 112px;
    padding: 13px 14px;
    resize: vertical;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.5;
}

.catalog-form-card .modern-form input::placeholder,
.catalog-form-card .modern-form textarea::placeholder {
    color: #7b8798;
    opacity: 1;
}

.catalog-form-card .modern-form input:focus,
.catalog-form-card .modern-form select:focus,
.catalog-form-card .modern-form textarea:focus {
    border-color: #3978e7;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(57,120,231,.12);
}

.catalog-duplicate-note {
    display: block;
    margin-top: 1px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.catalog-duplicate-note[hidden] {
    display: none !important;
}

.catalog-duplicate-note.available {
    color: #047857;
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
}

.catalog-duplicate-note.duplicate {
    color: #9f1239;
    border: 1px solid #fecdd3;
    background: #fff1f2;
}

.catalog-form-card .modern-form > .btn.disabled-by-duplicate,
.catalog-form-card .modern-form > .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.1);
}

.catalog-form-card .modern-form > .btn {
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
}

.catalog-table td.catalog-cell {
    vertical-align: top;
    line-height: 1.5;
}

.catalog-table td.catalog-long-text {
    min-width: 260px;
    max-width: 430px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 760px) {
    .catalog-form-card > .card-heading {
        gap: 14px;
        padding: 22px 20px 16px;
    }

    .catalog-form-card .modern-form {
        gap: 15px;
        padding: 0 20px 22px;
    }

    .catalog-form-card .modern-form textarea {
        min-height: 104px;
    }
}

/* ========================================================================== */
/* P.O supplier address / project location full display fix v10               */
/* ========================================================================== */

.rowline.address-row {
    align-items: start;
}

.multiline-suggest-wrap {
    position: relative;
    min-width: 0;
    width: 100%;
}

.rowline .po-multiline {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    max-height: 88px;
    box-sizing: border-box;
    padding: 3px 5px;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    outline: 0;
    overflow-y: auto;
    resize: vertical;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rowline .po-multiline:focus {
    background: #eef6ff;
    box-shadow: inset 0 -2px 0 #3978e7;
}

.saved-po-document .rowline.address-row b {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.catalog-textarea-suggestions {
    position: absolute;
    z-index: 60;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 210px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #cfdbea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(31, 52, 81, .18);
}

.catalog-textarea-suggestions[hidden] {
    display: none !important;
}

.catalog-textarea-option {
    width: 100%;
    display: block;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #17233b;
    text-align: left;
    cursor: pointer;
}

.catalog-textarea-option:hover,
.catalog-textarea-option:focus {
    outline: 0;
    background: #eef5ff;
}

.catalog-textarea-option strong,
.catalog-textarea-option small {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.catalog-textarea-option strong {
    font-size: 12px;
    line-height: 1.35;
}

.catalog-textarea-option small {
    margin-top: 2px;
    color: #667890;
    font-size: 10px;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .rowline.address-row {
        align-items: stretch;
    }

    .rowline .po-multiline {
        min-height: 58px;
        max-height: 120px;
    }
}

@media print {
    .catalog-textarea-suggestions {
        display: none !important;
    }

    .rowline.address-row {
        align-items: start !important;
    }

    .rowline.address-row b,
    .rowline.address-row .po-multiline {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 9.5mm !important;
        padding: 0 .6mm !important;
        overflow: hidden !important;
        resize: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.12 !important;
    }
}

/* ========================================================================== */
/* P.O preview / print long-address spacing fix v11                           */
/* ========================================================================== */

/* Keep long supplier addresses and project locations from colliding with the
   next field in the on-screen saved P.O preview and JPG export. */
.saved-po-document .info-grid {
    align-items: stretch;
}

.saved-po-document .info-box {
    height: auto;
    min-height: 188px;
    overflow: visible;
}

.saved-po-document .rowline {
    align-items: start;
}

.saved-po-document .rowline label {
    padding-top: 1px;
    line-height: 1.18;
}

.saved-po-document .rowline b {
    line-height: 1.2;
}

.saved-po-document .rowline.address-row {
    margin-top: 5px;
    margin-bottom: 7px;
}

@media print {
    /* Give the Supplier / Deliver To section more vertical room. The same
       amount is taken from the blank item rows so the document remains one A4
       page. */
    .info-grid {
        height: 45mm !important;
        min-height: 45mm !important;
        overflow: hidden !important;
    }

    .info-box {
        height: 45mm !important;
        min-height: 45mm !important;
        overflow: hidden !important;
    }

    .box-title {
        height: 7mm !important;
        margin-bottom: 1mm !important;
    }

    .rowline {
        align-items: start !important;
        margin: .85mm 0 !important;
        line-height: 1.08 !important;
    }

    .rowline label {
        padding-top: .1mm !important;
        line-height: 1.08 !important;
    }

    .rowline b,
    .rowline input {
        line-height: 1.08 !important;
    }

    .rowline.address-row {
        margin-top: .7mm !important;
        margin-bottom: 1.1mm !important;
    }

    .rowline.address-row b,
    .rowline.address-row .po-multiline {
        max-height: 15mm !important;
        line-height: 1.08 !important;
        overflow: hidden !important;
    }

    .items {
        height: 146mm !important;
    }

    .items tbody tr,
    .items td {
        height: 6.9mm !important;
        min-height: 6.9mm !important;
        max-height: 6.9mm !important;
    }
}

/* ========================================================================== */
/* Reviewer e-signature profile and P.O signature snapshots (schema v9)       */
/* ========================================================================== */

.checker-name-signature {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.checker-name-signature b {
    min-width: 0;
    flex: 1;
}

.checker-esign {
    width: 58px;
    height: 23px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    object-position: center;
    border: 0;
    background: transparent;
}

.esign-page-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.esign-hero .hero-main p {
    max-width: 720px;
}

.esign-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: 18px;
}

.esign-upload-card,
.esign-current-card,
.esign-guidance-card {
    min-width: 0;
}

.esign-upload-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.esign-drop-zone {
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    color: #243954;
    border: 2px dashed #a9c3e8;
    border-radius: 20px;
    background: linear-gradient(145deg, #f8fbff, #edf5ff);
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.esign-drop-zone:hover,
.esign-drop-zone:focus-within {
    border-color: #2b68db;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .10);
    transform: translateY(-1px);
}

.esign-drop-zone input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.esign-upload-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #13b4cf);
    box-shadow: 0 13px 28px rgba(37, 99, 235, .23);
    font-size: 29px;
}

.esign-drop-zone strong {
    font-size: 18px;
}

.esign-drop-zone small {
    max-width: 360px;
    color: #697a91;
    overflow-wrap: anywhere;
}

.esign-file-preview {
    min-height: 118px;
    padding: 14px;
    border: 1px solid #dbe6f2;
    border-radius: 16px;
    background: #fff;
}

.esign-file-preview img {
    width: 100%;
    height: 90px;
    display: block;
    object-fit: contain;
}

.esign-save-button {
    width: 100%;
}

.esign-current-preview {
    min-height: 190px;
    display: grid;
    place-items: center;
    padding: 22px;
    border: 1px solid #dbe6f2;
    border-radius: 20px;
    background-image:
        linear-gradient(45deg, #f2f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f2f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f2f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f2f5f9 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.esign-current-preview img {
    width: 100%;
    max-width: 390px;
    height: 145px;
    display: block;
    object-fit: contain;
}

.esign-current-preview.empty {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #53647b;
    background: #f8fafc;
    text-align: center;
}

.esign-current-preview.empty > span {
    font-size: 38px;
}

.esign-current-preview.empty small {
    max-width: 310px;
}

.esign-name-preview {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #dce5ef;
    border-radius: 15px;
    background: #f8fafc;
}

.esign-name-preview > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.esign-name-preview strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esign-name-preview small {
    color: #5e7088;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
}

.esign-name-preview img {
    width: 120px;
    height: 48px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}

.esign-updated-at {
    margin: 10px 0;
    color: #6c7b90;
    font-size: 12px;
    text-align: center;
}

.esign-remove-form .btn {
    width: 100%;
}

.danger-outline {
    color: #b4232f;
    border-color: #f0b7bc;
    background: #fff8f8;
}

.danger-outline:hover {
    color: #fff;
    border-color: #c82532;
    background: #c82532;
}

.esign-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.esign-guidance-grid article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e0e8f1;
    border-radius: 16px;
    background: #f9fbfd;
}

.esign-guidance-grid article > span {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 11px;
    background: #2563eb;
    font-weight: 900;
}

.esign-guidance-grid p {
    margin: 4px 0 0;
    color: #65758b;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .esign-layout,
    .esign-guidance-grid {
        grid-template-columns: 1fr;
    }

    .esign-drop-zone {
        min-height: 175px;
    }
}

@media (max-width: 560px) {
    .esign-page-content {
        gap: 13px;
    }

    .esign-drop-zone {
        min-height: 155px;
        padding: 20px 14px;
        border-radius: 17px;
    }

    .esign-current-preview {
        min-height: 155px;
        padding: 14px;
    }

    .esign-current-preview img {
        height: 115px;
    }

    .esign-name-preview {
        align-items: flex-start;
        flex-direction: column;
    }

    .esign-name-preview img {
        width: 150px;
        height: 52px;
        align-self: center;
    }
}

@media print {
    .checker-name-signature {
        min-height: 4.4mm;
        gap: .6mm;
    }

    .checker-name-signature b {
        font-size: 5.8pt !important;
        line-height: 1 !important;
    }

    .checker-esign {
        width: 14mm !important;
        height: 4.6mm !important;
        object-fit: contain !important;
    }

    .checker-line small {
        margin-top: -.2mm;
    }
}

/* ========================================================================== */
/* Checked By one-line reviewer/signature/status layout v13                  */
/* ========================================================================== */

/* Give the reviewer column more room while keeping the full signature block
   compact. Each reviewer now stays on one horizontal line. */
.saved-po-document .signs {
    grid-template-columns: .9fr 1.7fr .9fr .9fr;
    gap: 10px;
}

.saved-po-document .checker-saved-cell {
    min-width: 0;
}

.saved-po-document .saved-checker-list {
    min-height: 42px;
    max-height: none;
    display: grid;
    grid-auto-rows: minmax(34px, auto);
    align-content: end;
    justify-content: stretch;
    gap: 2px;
    padding: 2px 3px 3px;
    overflow: visible;
}

.saved-po-document .checker-line {
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 96px minmax(0, 1.15fr);
    align-items: center;
    gap: 7px;
    padding: 1px 0;
    line-height: 1;
}

.saved-po-document .checker-reviewer-name {
    min-width: 0;
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-po-document .checker-esign-slot {
    width: 96px;
    height: 32px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.saved-po-document .checker-esign {
    width: 96px;
    height: 32px;
    max-width: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    border: 0;
    background: transparent;
}

.saved-po-document .checker-decision-meta {
    min-width: 0;
    display: block;
    margin: 0;
    overflow: hidden;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.05;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-po-document .checker-decision-compact {
    display: none;
}

.saved-po-document .checker-empty-line {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #526174;
    font-size: 9px;
    font-style: italic;
    border-bottom: 1px solid #111;
}

@media (max-width: 900px) {
    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
        gap: 5px;
    }

    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 78px;
        height: 29px;
    }
}

@media print {
    /* The Checked By column is intentionally wider so four reviewers can fit
       legibly on one A4 page without wrapping. */
    .saved-po-document .signs {
        grid-template-columns: .9fr 1.75fr .9fr .9fr !important;
        gap: 1.5mm !important;
    }

    .saved-po-document .checker-saved-cell {
        height: 22mm !important;
        overflow: hidden !important;
    }

    .saved-po-document .saved-checker-list {
        width: 100% !important;
        height: 18.2mm !important;
        min-height: 18.2mm !important;
        max-height: 18.2mm !important;
        display: grid !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(0, 1fr) !important;
        align-content: stretch !important;
        justify-content: stretch !important;
        gap: .12mm !important;
        padding: .18mm .25mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .saved-po-document .checker-line {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.05fr) 18mm minmax(0, 1.12fr) !important;
        align-items: center !important;
        gap: .35mm !important;
        padding: 0 !important;
        overflow: hidden !important;
        line-height: 1 !important;
    }

    .saved-po-document .checker-reviewer-name {
        min-width: 0 !important;
        display: block !important;
        overflow: hidden !important;
        font-size: 5pt !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .saved-po-document .checker-esign-slot {
        width: 18mm !important;
        height: 4.05mm !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .saved-po-document .checker-esign {
        width: 18mm !important;
        height: 4.05mm !important;
        max-width: 18mm !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .saved-po-document .checker-decision-meta {
        min-width: 0 !important;
        display: block !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 4.15pt !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: right !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .saved-po-document .checker-decision-full {
        display: none !important;
    }

    .saved-po-document .checker-decision-compact {
        display: inline !important;
    }

    .saved-po-document .checker-empty-line {
        grid-row: 1 / -1 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 5.2pt !important;
        line-height: 1 !important;
    }
}



/* ========================================================================== */
/* Checked By compact date + full-name fit layout v14                        */
/* ========================================================================== */
/* Keep reviewer name, signature, status, date, and time on one complete line.
   The Checked By column is wider, and all dates use MM/DD/YY. */
.saved-po-document .signs {
    grid-template-columns: .72fr 2.2fr .82fr .82fr;
    gap: 8px;
}

.saved-po-document .checker-line {
    grid-template-columns: minmax(0, 1.35fr) 88px minmax(0, 1fr);
    gap: 5px;
}

.saved-po-document .checker-reviewer-name {
    font-size: 9px;
    letter-spacing: -.02em;
}

.saved-po-document .checker-esign-slot,
.saved-po-document .checker-esign {
    width: 88px;
    height: 32px;
}

.saved-po-document .checker-decision-meta {
    font-size: 7.3px;
    letter-spacing: -.025em;
}

/* The compact value is short enough for previews/JPG as well as printing. */
.saved-po-document .checker-decision-full {
    display: none;
}
.saved-po-document .checker-decision-compact {
    display: inline;
}

@media (max-width: 900px) {
    .saved-po-document .signs {
        grid-template-columns: .68fr 2.3fr .78fr .78fr;
        gap: 5px;
    }
    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1.4fr) 72px minmax(0, .95fr);
        gap: 4px;
    }
    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 72px;
        height: 29px;
    }
    .saved-po-document .checker-reviewer-name {
        font-size: 8.2px;
    }
    .saved-po-document .checker-decision-meta {
        font-size: 6.7px;
    }
}

@media print {
    .saved-po-document .signs {
        grid-template-columns: .72fr 2.2fr .82fr .82fr !important;
        gap: 1.15mm !important;
    }

    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1.38fr) 16.5mm minmax(0, 1fr) !important;
        gap: .28mm !important;
    }

    .saved-po-document .checker-reviewer-name {
        font-size: 4.7pt !important;
        letter-spacing: -.035em !important;
        text-overflow: clip !important;
    }

    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 16.5mm !important;
        max-width: 16.5mm !important;
        height: 4.1mm !important;
    }

    .saved-po-document .checker-decision-meta {
        font-size: 3.75pt !important;
        letter-spacing: -.035em !important;
        text-overflow: clip !important;
    }
}

/* ========================================================================== */
/* Balanced A4 signature footer layout v15                                    */
/* ========================================================================== */
/* Keep Checked By useful for up to four reviewer rows without allowing it to
   consume most of the footer. The other three signature columns remain
   readable and visually balanced. */
.saved-po-document .signs {
    grid-template-columns: 1fr 1.8fr 1.1fr 1.1fr;
    gap: 10px;
}

.saved-po-document .checker-line {
    grid-template-columns: minmax(0, 1.4fr) 74px minmax(0, 1.05fr);
    gap: 4px;
}

.saved-po-document .checker-reviewer-name {
    font-size: 8.5px;
    letter-spacing: -.025em;
}

.saved-po-document .checker-esign-slot,
.saved-po-document .checker-esign {
    width: 74px;
    height: 29px;
}

.saved-po-document .checker-decision-meta {
    font-size: 6.7px;
    letter-spacing: -.03em;
}

@media (max-width: 900px) {
    .saved-po-document .signs {
        grid-template-columns: .95fr 1.9fr 1.05fr 1.05fr;
        gap: 5px;
    }

    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1.4fr) 64px minmax(0, 1.05fr);
        gap: 3px;
    }

    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 64px;
        height: 27px;
    }

    .saved-po-document .checker-reviewer-name {
        font-size: 7.8px;
    }

    .saved-po-document .checker-decision-meta {
        font-size: 6.2px;
    }
}

@media print {
    .saved-po-document .signs {
        grid-template-columns: 1fr 1.8fr 1.1fr 1.1fr !important;
        gap: 1.35mm !important;
    }

    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1.4fr) 15mm minmax(0, 1.05fr) !important;
        gap: .30mm !important;
    }

    .saved-po-document .checker-reviewer-name {
        font-size: 4.55pt !important;
        letter-spacing: -.025em !important;
        text-overflow: clip !important;
    }

    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 15mm !important;
        max-width: 15mm !important;
        height: 4.15mm !important;
    }

    .saved-po-document .checker-decision-meta {
        font-size: 3.6pt !important;
        letter-spacing: -.025em !important;
        text-overflow: clip !important;
    }
}


/* ========================================================================== */
/* Compact Checked By height based on reviewer count v16                      */
/* ========================================================================== */
/* The previous print layout always reserved four reviewer rows. Keep support
   for four names, but let one or two reviewers use only the space they need. */
.saved-po-document .saved-checker-list {
    align-content: start;
}

@media print {
    .saved-po-document .checker-saved-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .saved-po-document .checker-saved-cell > label {
        flex: 0 0 auto !important;
    }

    .saved-po-document .saved-checker-list {
        min-height: 0 !important;
        max-height: 18.2mm !important;
        margin-top: .35mm !important;
        padding: .12mm .25mm .18mm !important;
        grid-auto-rows: minmax(0, 1fr) !important;
        align-content: stretch !important;
        overflow: hidden !important;
    }

    .saved-po-document .saved-checker-list.reviewer-count-1 {
        height: 4.9mm !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .saved-po-document .saved-checker-list.reviewer-count-2 {
        height: 9.35mm !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    }

    .saved-po-document .saved-checker-list.reviewer-count-3 {
        height: 13.8mm !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    }

    .saved-po-document .saved-checker-list.reviewer-count-4 {
        height: 18.2mm !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    }

    .saved-po-document .saved-checker-list.reviewer-count-1 .checker-line,
    .saved-po-document .saved-checker-list.reviewer-count-2 .checker-line,
    .saved-po-document .saved-checker-list.reviewer-count-3 .checker-line,
    .saved-po-document .saved-checker-list.reviewer-count-4 .checker-line {
        height: 100% !important;
    }

    .saved-po-document .checker-empty-line {
        grid-row: auto !important;
        height: 100% !important;
    }
}


/* Reviewer P.O preview zoom controls */
.review-paper-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.review-paper-label > div:first-child { display:flex; flex-direction:column; gap:3px; }
.po-zoom-controls {
    display:inline-flex; align-items:center; gap:6px; padding:6px;
    border:1px solid #d7e0ed; border-radius:14px; background:#fff;
    box-shadow:0 8px 20px rgba(15,35,65,.08);
}
.po-zoom-button,.po-zoom-value,.po-zoom-fit {
    min-height:38px; border:0; border-radius:10px; background:#eef4ff;
    color:#15315d; font:inherit; font-weight:800; cursor:pointer;
}
.po-zoom-button { width:40px; font-size:22px; line-height:1; }
.po-zoom-value { min-width:70px; padding:0 12px; }
.po-zoom-fit { padding:0 15px; background:linear-gradient(135deg,#2563eb,#12afd0); color:#fff; }
.po-zoom-button:disabled { opacity:.45; cursor:not-allowed; }
.review-paper-scroll {
    width:100%; overflow:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; position:relative;
}
.po-preview-stage {
    position:relative; min-width:max-content; min-height:max-content;
    display:flex; justify-content:center; align-items:flex-start; padding:18px;
}
#poPreviewDocument {
    transform-origin:top center; transition:transform .16s ease; will-change:transform;
}
@media (max-width:720px) {
    .review-paper-label { align-items:stretch; }
    .po-zoom-controls { width:100%; justify-content:center; position:sticky; top:8px; z-index:40; }
    .po-zoom-button { flex:0 0 44px; }
    .po-zoom-value,.po-zoom-fit { flex:1; }
    .po-preview-stage { justify-content:flex-start; padding:12px; }
}
@media print {
    .po-zoom-controls { display:none !important; }
    .review-paper-scroll { overflow:visible !important; }
    .po-preview-stage { display:block !important; min-width:0 !important; min-height:0 !important; padding:0 !important; }
    #poPreviewDocument { transform:none !important; transform-origin:initial !important; }
}

/* Reviewer preview scrolling fix: keep the page vertically scrollable on phones. */
.review-paper-scroll#poPreviewViewport {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

#poPreviewStage.po-preview-stage {
    min-width: 100%;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    .review-paper-scroll#poPreviewViewport {
        overflow-x: auto;
        overflow-y: visible;
        height: auto;
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }

    #poPreviewStage.po-preview-stage {
        justify-content: flex-start;
        min-width: 100%;
        padding: 10px 8px 18px;
    }

    #poPreviewDocument {
        transform-origin: top left;
    }

    .review-paper-label .po-zoom-controls {
        position: static;
        top: auto;
    }
}

/* =========================================================
   PRESIDENT ACCESS + MOBILE APP POLISH (v10)
   ========================================================= */
.login-button { position: relative; display: inline-flex; align-items:center; justify-content:center; gap:10px; }
.login-button-spinner { display:none; width:18px; height:18px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:metricconSpin .7s linear infinite; }
.login-button.loading .login-button-spinner { display:inline-block; }
.login-button.loading .login-button-text { opacity:.82; }
.login-loading-overlay { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:24px; background:rgba(6,18,38,.62); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.2s ease; }
.login-loading-overlay.show { opacity:1; visibility:visible; }
.login-loading-card { width:min(330px,100%); display:flex; flex-direction:column; align-items:center; gap:9px; padding:30px 24px; border-radius:24px; background:#fff; color:#10213d; box-shadow:0 28px 70px rgba(0,0,0,.28); text-align:center; }
.login-loading-card small { color:#6b7a91; }
.login-loading-spinner { width:42px; height:42px; margin-bottom:4px; border:4px solid #dfe9fb; border-top-color:#2563eb; border-radius:50%; animation:metricconSpin .75s linear infinite; }
@keyframes metricconSpin { to { transform:rotate(360deg); } }

.president-chip { margin-left:auto; padding:7px 10px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff !important; background:rgba(255,255,255,.12); font-size:9px !important; font-weight:900; letter-spacing:.08em; white-space:nowrap; }
.president-po-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.president-po-card { overflow:hidden; border:1px solid #dfe7f1; border-radius:20px; background:#fff; box-shadow:0 10px 28px rgba(15,35,65,.07); transition:transform .18s ease, box-shadow .18s ease; }
.president-po-card:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(15,35,65,.12); }
.president-po-card.cancelled { opacity:.72; }
.president-po-top,.president-po-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; }
.president-po-top { border-bottom:1px solid #edf1f6; background:linear-gradient(180deg,#fbfdff,#f7faff); }
.president-po-top > div { display:flex; flex-direction:column; gap:2px; }
.president-po-top > div span,.president-po-footer small { color:#7b889b; font-size:9px; font-weight:900; letter-spacing:.08em; }
.president-po-top strong { color:#15315d; font-size:20px; }
.president-po-body { padding:16px 17px; }
.president-po-body h3 { margin:0 0 5px; color:#10213d; font-size:17px; }
.president-po-body p { margin:0 0 13px; color:#66758b; }
.president-po-meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:#7b889b; font-size:11px; }
.president-po-footer { align-items:flex-end; border-top:1px solid #edf1f6; background:#fbfcfe; }
.president-po-footer > div { display:flex; flex-direction:column; gap:5px; }
.decision-badge.not_reviewed { color:#516078; background:#edf2f7; border-color:#d8e0ea; }

@media (max-width: 900px) {
    .reviewer-portal-body { background:#eef3f9; }
    .reviewer-portal-body .app-main { background:transparent; }
    .reviewer-page-content.mobile-app-content,.reviewer-page-content { padding:14px 12px 92px; }
    .reviewer-mobile-welcome { position:relative; margin:0 0 13px; padding:17px 15px; border-radius:22px; box-shadow:0 16px 32px rgba(15,35,65,.18); }
    .reviewer-mobile-welcome > div:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
    .reviewer-mobile-welcome > div:nth-child(2) strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .reviewer-phone-status,.reviewer-filter-card,.reviewer-queue-card,.mobile-app-card { border:0; border-radius:22px; box-shadow:0 10px 28px rgba(15,35,65,.08); }
    .reviewer-stats-grid .stat-card { min-width:132px; border:0; border-radius:19px; scroll-snap-align:start; box-shadow:0 8px 22px rgba(15,35,65,.07); }
    .reviewer-filter-card { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:12px; background:#fff; }
    .reviewer-filter-card .filter-search { grid-column:1/-1; min-height:48px; }
    .reviewer-filter-card select { min-height:46px; border-radius:13px; }
    .reviewer-filter-card .btn { min-height:44px; border-radius:13px; }
    .reviewer-queue-card { padding:13px; }
    .reviewer-queue-card .card-heading { padding:3px 2px 12px; }
    .assigned-table-wrap { overflow:visible; }
    .assigned-table thead { display:none; }
    .assigned-table,.assigned-table tbody,.assigned-table tr,.assigned-table td { display:block; width:100%; }
    .assigned-table tr { margin-bottom:12px; padding:14px; border:1px solid #e4eaf2; border-radius:18px; background:#fff; box-shadow:0 7px 18px rgba(15,35,65,.05); }
    .assigned-table td { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0 !important; border:0 !important; text-align:right; }
    .assigned-table td::before { content:attr(data-label); flex:0 0 40%; color:#8090a6; font-size:10px; font-weight:900; letter-spacing:.05em; text-align:left; }
    .assigned-table td[data-label="Supplier / Project"] { align-items:flex-start; }
    .assigned-table td[data-label="Action"] { padding-top:12px !important; }
    .assigned-table .reviewer-open-action { width:100%; min-height:44px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,#2563eb,#12afd0); }
    .president-po-grid { grid-template-columns:1fr; gap:12px; }
    .president-po-card { border:0; border-radius:22px; box-shadow:0 9px 24px rgba(15,35,65,.08); }
    .president-po-top,.president-po-footer { padding:14px; }
    .president-po-body { padding:15px 14px; }
    .president-po-footer { display:grid; grid-template-columns:1fr 1fr; align-items:end; }
    .president-po-footer .btn { grid-column:1/-1; width:100%; min-height:44px; margin-top:3px; }
}


/* ========================================================================== */
/* President approval signature in Approved By v18                            */
/* ========================================================================== */
.saved-po-document .approved-by-saved-cell {
    min-width: 0;
}
.saved-po-document .approved-by-content {
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 1px;
    padding: 2px 2px 3px;
    border-bottom: 1px solid #111;
    overflow: hidden;
}
.saved-po-document .approved-by-content strong {
    width: 100%;
    overflow: hidden;
    color: #111827;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.saved-po-document .approved-by-esign {
    width: 86px;
    height: 28px;
    max-width: 100%;
    display: block;
    object-fit: contain;
    border: 0;
    background: transparent;
}
.saved-po-document .approved-by-meta {
    margin: 0;
    color: #7b5a08;
    font-size: 6.5px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.saved-po-document .approved-by-content.approved .approved-by-meta { color:#0b783f; }
.saved-po-document .approved-by-content.rejected .approved-by-meta { color:#b42318; }
@media print {
    .saved-po-document .approved-by-content {
        min-height: 0 !important;
        height: 9.4mm !important;
        padding: .15mm .25mm .2mm !important;
        gap: 0 !important;
    }
    .saved-po-document .approved-by-content strong {
        font-size: 4.5pt !important;
    }
    .saved-po-document .approved-by-esign {
        width: 19mm !important;
        height: 4.8mm !important;
    }
    .saved-po-document .approved-by-meta {
        font-size: 3.55pt !important;
        letter-spacing: -.02em !important;
    }
}


/* ========================================================================== */
/* Final president signature containment fix + Philippine release v19         */
/* ========================================================================== */
.saved-po-document .approved-by-saved-cell,
.saved-po-document .approved-by-content {
    min-width: 0 !important;
    overflow: hidden !important;
}
.saved-po-document .approved-by-content {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: grid !important;
    grid-template-rows: 11px 34px 9px !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 1px 2px !important;
    box-sizing: border-box !important;
}
.saved-po-document .approved-by-esign {
    position: static !important;
    inset: auto !important;
    float: none !important;
    display: block !important;
    width: 96px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 96px !important;
    max-height: 32px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
}
@media print {
    .saved-po-document .approved-by-content {
        height: 10mm !important;
        min-height: 10mm !important;
        max-height: 10mm !important;
        grid-template-rows: 1.8mm 6.4mm 1.4mm !important;
        padding: .1mm .2mm !important;
    }
    .saved-po-document .approved-by-esign {
        width: 25mm !important;
        height: 6.4mm !important;
        max-width: 25mm !important;
        max-height: 6.4mm !important;
    }
}


/* Backup & Restore */
.backup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.backup-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.backup-card h2,.backup-card p{margin:0}.backup-card p{color:#65748a;line-height:1.6}.backup-card .btn{margin-top:auto}.restore-grid{margin-top:18px}.danger-card{border-color:#fecaca}.restore-form{width:100%;margin-top:4px}.btn.danger{background:#b42318;color:#fff;border-color:#b42318}@media(max-width:760px){.backup-grid{grid-template-columns:1fr}}


/* ========================================================================== */
/* Footer signature polish v20                                                */
/* ========================================================================== */
/* Final footer tuning:
   - bigger Joseph P. Alarilla e-sign in Approved By
   - cleaner signature/name lines
   - balanced footer widths for print and preview */
.saved-po-document .signs {
    grid-template-columns: .95fr 1.55fr 1.12fr 1.08fr !important;
    gap: 8px !important;
    align-items: start !important;
}

.saved-po-document .sig {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
}

.saved-po-document .sig > label {
    margin-bottom: 0;
    line-height: 1.05;
}

.saved-po-document .sig > input,
.saved-po-document .checker-saved-cell > .saved-checker-list,
.saved-po-document .approved-by-content {
    border-bottom: 1.2px solid #111 !important;
}

.saved-po-document .sig > input {
    min-height: 28px;
    padding: 2px 2px 3px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center;
    font-weight: 900;
    line-height: 1.05 !important;
    box-sizing: border-box;
}

.saved-po-document .sig > small {
    margin-top: 2px !important;
    line-height: 1.05 !important;
}

.saved-po-document .approved-by-saved-cell {
    min-width: 0 !important;
}

.saved-po-document .approved-by-content {
    position: relative;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 1px 2px 2px !important;
    overflow: visible !important;
}

.saved-po-document .approved-by-content strong {
    position: relative;
    z-index: 2;
    width: 100%;
    font-size: 7.8px !important;
    line-height: 1 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-po-document .approved-by-esign {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 132px !important;
    height: 46px !important;
    max-width: 132px !important;
    max-height: 46px !important;
    margin: -8px auto -4px !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    background: transparent !important;
}

.saved-po-document .approved-by-meta {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    font-size: 6.2px !important;
    line-height: 1 !important;
    text-align: center;
    white-space: nowrap;
}

.saved-po-document .checker-saved-cell > .saved-checker-list {
    margin-top: 1px !important;
}

.saved-po-document .checker-empty-line {
    border-bottom: 0 !important;
}

@media print {
    .saved-po-document .signs {
        grid-template-columns: .95fr 1.55fr 1.12fr 1.08fr !important;
        gap: 1.25mm !important;
        height: auto !important;
        min-height: 18mm !important;
    }

    .saved-po-document .sig {
        height: auto !important;
        min-height: 18mm !important;
        gap: .35mm !important;
    }

    .saved-po-document .sig > label {
        font-size: 7.3pt !important;
    }

    .saved-po-document .sig > input {
        height: 6.8mm !important;
        min-height: 6.8mm !important;
        padding: .45mm .3mm .55mm !important;
        border-bottom-width: .35mm !important;
        font-size: 8.1pt !important;
    }

    .saved-po-document .sig > small {
        margin-top: .45mm !important;
        font-size: 6.7pt !important;
    }

    .saved-po-document .checker-saved-cell > .saved-checker-list,
    .saved-po-document .approved-by-content {
        border-bottom-width: .35mm !important;
    }

    .saved-po-document .approved-by-content {
        min-height: 11.1mm !important;
        height: 11.1mm !important;
        max-height: 11.1mm !important;
        padding: .15mm .2mm .2mm !important;
        grid-template-rows: 1.7mm 1fr 1.5mm !important;
    }

    .saved-po-document .approved-by-content strong {
        font-size: 4.6pt !important;
        letter-spacing: -.01em !important;
    }

    .saved-po-document .approved-by-esign {
        width: 33mm !important;
        height: 9.4mm !important;
        max-width: 33mm !important;
        max-height: 9.4mm !important;
        margin: -1.7mm auto -1.3mm !important;
    }

    .saved-po-document .approved-by-meta {
        font-size: 3.8pt !important;
        letter-spacing: -.02em !important;
    }
}


/* ========================================================================== */
/* Approved By signature containment + clean footer lines v21                 */
/* ========================================================================== */
/* This block intentionally overrides all earlier signature experiments. */
.saved-po-document .signs {
    grid-template-columns: 1fr 1.55fr 1.15fr 1.15fr !important;
    gap: 9px !important;
    align-items: start !important;
    overflow: visible !important;
}

.saved-po-document .sig {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow: visible !important;
}

.saved-po-document .sig > label {
    display: block !important;
    margin: 0 !important;
    color: #111 !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
}

.saved-po-document .sig > input {
    width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 7px 2px 4px !important;
    border: 0 !important;
    border-bottom: 1.2px solid #111 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    color: #111 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.saved-po-document .sig > small {
    display: block !important;
    margin: 2px 0 0 !important;
    color: #111 !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

.saved-po-document .checker-saved-cell > .saved-checker-list {
    width: 100% !important;
    margin-top: 1px !important;
    border-bottom: 1.2px solid #111 !important;
    box-sizing: border-box !important;
}

.saved-po-document .approved-by-saved-cell {
    min-width: 0 !important;
    overflow: visible !important;
}

.saved-po-document .approved-by-content {
    position: relative !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 2px 2px 3px !important;
    display: block !important;
    border: 0 !important;
    border-bottom: 1.2px solid #111 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
}

.saved-po-document .approved-by-content strong {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #111 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.saved-po-document .approved-by-esign-wrap {
    position: absolute !important;
    z-index: 2 !important;
    left: 3% !important;
    right: 3% !important;
    top: 7px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.saved-po-document .approved-by-esign {
    position: static !important;
    float: none !important;
    transform: none !important;
    width: 124px !important;
    height: 40px !important;
    max-width: 92% !important;
    max-height: 40px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    background: transparent !important;
}

.saved-po-document .approved-by-meta {
    position: absolute !important;
    z-index: 4 !important;
    left: 2px !important;
    right: 2px !important;
    bottom: 2px !important;
    display: block !important;
    margin: 0 !important;
    color: #7b5a08 !important;
    font-size: 6.2px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.saved-po-document .approved-by-content.approved .approved-by-meta { color: #0b783f !important; }
.saved-po-document .approved-by-content.rejected .approved-by-meta { color: #b42318 !important; }

@media print {
    .saved-po-document .signs {
        grid-template-columns: 1fr 1.55fr 1.15fr 1.15fr !important;
        gap: 1.35mm !important;
        height: auto !important;
        min-height: 18mm !important;
        overflow: visible !important;
    }

    .saved-po-document .sig {
        height: auto !important;
        min-height: 18mm !important;
        overflow: visible !important;
        gap: .3mm !important;
    }

    .saved-po-document .sig > label {
        font-size: 7.25pt !important;
    }

    .saved-po-document .sig > input {
        height: 7.1mm !important;
        min-height: 7.1mm !important;
        padding: 1.1mm .35mm .55mm !important;
        border-bottom-width: .35mm !important;
        font-size: 8pt !important;
    }

    .saved-po-document .sig > small {
        margin-top: .45mm !important;
        font-size: 6.65pt !important;
    }

    .saved-po-document .checker-saved-cell > .saved-checker-list {
        border-bottom-width: .35mm !important;
    }

    .saved-po-document .approved-by-content {
        height: 11.5mm !important;
        min-height: 11.5mm !important;
        max-height: 11.5mm !important;
        padding: .25mm .2mm .35mm !important;
        border-bottom-width: .35mm !important;
        overflow: hidden !important;
    }

    .saved-po-document .approved-by-content strong {
        font-size: 5.1pt !important;
    }

    .saved-po-document .approved-by-esign-wrap {
        left: 2% !important;
        right: 2% !important;
        top: 1.3mm !important;
        height: 8.9mm !important;
        overflow: hidden !important;
    }

    .saved-po-document .approved-by-esign {
        width: 31mm !important;
        height: 8.2mm !important;
        max-width: 92% !important;
        max-height: 8.2mm !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    .saved-po-document .approved-by-meta {
        bottom: .35mm !important;
        font-size: 3.75pt !important;
        letter-spacing: -.02em !important;
    }
}


/* ========================================================================== */
/* Joseph signature order and print sizing fix v20.2                          */
/* Signature is above the name; the name sits directly above status/time. */
.saved-po-document .approved-by-content {
    position: relative !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    display: grid !important;
    grid-template-rows: 48px 11px 9px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 0 2px 2px !important;
    overflow: hidden !important;
    border-bottom: 1.2px solid #111 !important;
    box-sizing: border-box !important;
}

.saved-po-document .approved-by-esign-wrap {
    position: static !important;
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.saved-po-document .approved-by-esign {
    position: static !important;
    display: block !important;
    width: 150px !important;
    height: 47px !important;
    max-width: 96% !important;
    max-height: 47px !important;
    margin: 0 auto -1px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
}

.saved-po-document .approved-by-name,
.saved-po-document .approved-by-content strong {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #111 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.saved-po-document .approved-by-meta {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 6.1px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Keep all footer name lines crisp and aligned. */
.saved-po-document .sig > input,
.saved-po-document .checker-saved-cell > .saved-checker-list,
.saved-po-document .approved-by-content {
    border-bottom-style: solid !important;
    border-bottom-color: #111 !important;
}

@media print {
    .saved-po-document .signs {
        min-height: 20mm !important;
        height: auto !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .saved-po-document .sig {
        min-height: 20mm !important;
        height: auto !important;
        overflow: visible !important;
    }

    .saved-po-document .approved-by-content {
        height: 14.2mm !important;
        min-height: 14.2mm !important;
        max-height: 14.2mm !important;
        grid-template-rows: 10.7mm 1.9mm 1.35mm !important;
        padding: 0 .2mm .15mm !important;
        overflow: hidden !important;
        border-bottom-width: .35mm !important;
    }

    .saved-po-document .approved-by-esign-wrap {
        width: 100% !important;
        height: 10.7mm !important;
        align-items: flex-end !important;
        overflow: hidden !important;
    }

    .saved-po-document .approved-by-esign {
        width: 36mm !important;
        height: 10.7mm !important;
        max-width: 96% !important;
        max-height: 10.7mm !important;
        margin: 0 auto -.15mm !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }

    .saved-po-document .approved-by-name,
    .saved-po-document .approved-by-content strong {
        font-size: 5.2pt !important;
        line-height: 1 !important;
        letter-spacing: -.01em !important;
    }

    .saved-po-document .approved-by-meta {
        font-size: 3.75pt !important;
        line-height: 1 !important;
        letter-spacing: -.02em !important;
    }

    .saved-po-document .approved-by-saved-cell > small {
        margin-top: .4mm !important;
    }
}


/* ========================================================================== */
/* Prepared By e-sign + checker stacked status v20.3                         */
/* ========================================================================== */
.saved-po-document .prepared-by-saved-cell,
.saved-po-document .prepared-by-content,
.saved-po-document .checker-saved-cell,
.saved-po-document .checker-line,
.saved-po-document .checker-reviewer-copy {
    min-width: 0 !important;
}

.saved-po-document .prepared-by-content {
    position: relative !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: grid !important;
    grid-template-rows: 43px 13px !important;
    align-items: end !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 0 2px 2px !important;
    border-bottom: 1.2px solid #111 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.saved-po-document .prepared-by-esign-wrap {
    width: 100% !important;
    height: 43px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.saved-po-document .prepared-by-esign {
    display: block !important;
    width: 118px !important;
    height: 42px !important;
    max-width: 96% !important;
    max-height: 42px !important;
    margin: 0 auto -2px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border: 0 !important;
    background: transparent !important;
}

.saved-po-document .prepared-by-name {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #111 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Checker layout: name on top, status/date directly below, e-sign beside it. */
.saved-po-document .checker-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 82px !important;
    align-items: center !important;
    gap: 5px !important;
}

.saved-po-document .checker-reviewer-copy {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
}

.saved-po-document .checker-reviewer-name {
    font-size: 8.7px !important;
    line-height: 1 !important;
}

.saved-po-document .checker-decision-meta {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    color: #7b5a08 !important;
    font-size: 6.4px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.saved-po-document .checker-line.approved .checker-decision-meta { color:#0b783f !important; }
.saved-po-document .checker-line.rejected .checker-decision-meta { color:#b42318 !important; }

.saved-po-document .checker-esign-slot,
.saved-po-document .checker-esign {
    width: 82px !important;
    height: 31px !important;
    max-width: 82px !important;
    max-height: 31px !important;
}

.saved-po-document .checker-esign-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.saved-po-document .checker-esign {
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    background: transparent !important;
}

@media print {
    .saved-po-document .prepared-by-content {
        height: 12.2mm !important;
        min-height: 12.2mm !important;
        max-height: 12.2mm !important;
        grid-template-rows: 9.8mm 2mm !important;
        padding: 0 .2mm .25mm !important;
        border-bottom-width: .35mm !important;
    }

    .saved-po-document .prepared-by-esign-wrap {
        height: 9.8mm !important;
    }

    .saved-po-document .prepared-by-esign {
        width: 30mm !important;
        height: 9.6mm !important;
        max-width: 96% !important;
        max-height: 9.6mm !important;
        margin: 0 auto -.35mm !important;
    }

    .saved-po-document .prepared-by-name {
        font-size: 5.1pt !important;
        letter-spacing: -.01em !important;
    }

    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1fr) 16.5mm !important;
        gap: .45mm !important;
    }

    .saved-po-document .checker-reviewer-copy {
        gap: .25mm !important;
    }

    .saved-po-document .checker-reviewer-name {
        font-size: 4.65pt !important;
        line-height: 1 !important;
        text-overflow: clip !important;
    }

    .saved-po-document .checker-decision-meta {
        font-size: 3.55pt !important;
        line-height: 1 !important;
        text-align: left !important;
        letter-spacing: -.02em !important;
        text-overflow: clip !important;
    }

    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 16.5mm !important;
        height: 4.55mm !important;
        max-width: 16.5mm !important;
        max-height: 4.55mm !important;
    }
}

/* ========================================================================== */
/* Larger approval e-signatures + Accounting workflow v21                     */
/* ========================================================================== */
.saved-po-document .checker-line {
    grid-template-columns: minmax(0, 1fr) 98px !important;
    gap: 6px !important;
}
.saved-po-document .checker-esign-slot,
.saved-po-document .checker-esign {
    width: 98px !important;
    height: 37px !important;
    max-width: 98px !important;
    max-height: 37px !important;
}
.saved-po-document .approved-by-esign {
    width: 172px !important;
    height: 54px !important;
    max-width: 98% !important;
    max-height: 54px !important;
}
.saved-po-document .approved-by-esign-wrap {
    height: 54px !important;
}
.saved-po-document .approved-by-content {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    grid-template-rows: 54px 12px 9px !important;
}

.accounting-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:25px;
    padding:4px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
}
.accounting-badge.waiting { background:#eef1f5; color:#65748a; }
.accounting-badge.ready { background:#e8f2ff; color:#1d5fb8; }
.accounting-badge.on_process { background:#fff3d6; color:#9a6500; }
.accounting-badge.paid { background:#e5f8ee; color:#0f7b43; }

.accounting-page-content { display:flex; flex-direction:column; gap:18px; }
.accounting-hero {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(340px,.8fr);
    gap:22px;
    padding:28px;
    border-radius:26px;
    color:#fff;
    background:linear-gradient(135deg,#123467,#186bd0 55%,#12afd0);
    box-shadow:0 18px 42px rgba(18,52,103,.2);
}
.accounting-hero h2 { margin:8px 0 10px; font-size:34px; line-height:1.05; }
.accounting-hero p { margin:0; max-width:720px; color:rgba(255,255,255,.84); line-height:1.65; }
.accounting-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-self:stretch; }
.accounting-hero-stats article {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:118px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:19px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
}
.accounting-hero-stats span { font-size:11px; font-weight:800; color:rgba(255,255,255,.8); }
.accounting-hero-stats strong { margin-top:4px; font-size:31px; line-height:1; }
.accounting-filter { grid-template-columns:minmax(260px,1fr) 220px auto auto; }
.accounting-po-list { display:grid; gap:14px; }
.accounting-po-card {
    display:grid;
    grid-template-columns:190px minmax(0,1fr) minmax(210px,.7fr) auto;
    gap:18px;
    align-items:center;
    padding:18px;
    border:1px solid #e1e7f0;
    border-left:5px solid #8aa2bd;
    border-radius:20px;
    background:#fff;
    box-shadow:0 9px 25px rgba(15,35,65,.07);
}
.accounting-po-card.status-ready { border-left-color:#2563eb; }
.accounting-po-card.status-on_process { border-left-color:#e6a300; }
.accounting-po-card.status-paid { border-left-color:#0b8f55; }
.accounting-po-number { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.accounting-po-number small { font-size:9px; font-weight:900; letter-spacing:.12em; color:#708199; }
.accounting-po-number strong { font-size:23px; color:#101d33; }
.accounting-po-details { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.accounting-po-details div { min-width:0; }
.accounting-po-details span { display:block; margin-bottom:4px; font-size:10px; font-weight:800; color:#8190a4; }
.accounting-po-details b { display:block; overflow:hidden; font-size:13px; color:#15233a; text-overflow:ellipsis; white-space:nowrap; }
.accounting-po-meta { display:flex; flex-direction:column; gap:6px; color:#617086; font-size:11px; line-height:1.35; }
.accounting-po-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.accounting-po-actions form { margin:0; }
.btn.process-button { background:#2563eb; color:#fff; border-color:#2563eb; }
.btn.paid-button { background:#0b8f55; color:#fff; border-color:#0b8f55; }
.accounting-empty { padding:48px; text-align:center; }
.accounting-empty > span { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 14px; border-radius:18px; background:#e9f8f0; color:#0b8f55; font-size:25px; font-weight:900; }

.accounting-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.accounting-summary-grid article { display:flex; align-items:center; gap:16px; padding:20px; border:1px solid #e3e9f2; border-radius:21px; background:#fff; box-shadow:0 8px 22px rgba(15,35,65,.06); }
.accounting-summary-icon { display:grid; place-items:center; width:52px; height:52px; flex:0 0 52px; border-radius:17px; font-size:22px; font-weight:900; }
.accounting-summary-icon.ready { background:#e8f2ff; color:#2563eb; }
.accounting-summary-icon.on_process { background:#fff3d6; color:#aa7000; }
.accounting-summary-icon.paid { background:#e5f8ee; color:#0b8f55; }
.accounting-summary-grid small { display:block; color:#73839a; font-weight:800; }
.accounting-summary-grid strong { display:block; margin:2px 0; font-size:28px; color:#0f1e34; }
.accounting-summary-grid p { margin:0; color:#8290a3; font-size:11px; }
.accounting-status-section { padding:0; overflow:hidden; }
.accounting-status-section .card-heading { padding:19px 21px; margin:0; border-bottom:1px solid #e7ebf1; }
.simple-po-list { display:grid; }
.simple-po-list article { display:grid; grid-template-columns:minmax(300px,1fr) minmax(210px,.55fr) auto; gap:18px; align-items:center; padding:16px 21px; border-bottom:1px solid #edf0f4; }
.simple-po-list article:last-child { border-bottom:0; }
.simple-po-main { display:flex; align-items:center; gap:13px; min-width:0; }
.simple-po-main > div { min-width:0; }
.simple-po-main b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.simple-po-main small,.simple-po-status small { display:block; margin-top:4px; color:#738198; font-size:10px; }
.simple-po-status { display:flex; flex-direction:column; align-items:flex-start; }
.simple-po-actions { display:flex; align-items:center; justify-content:flex-end; gap:13px; }
.simple-po-empty { padding:30px; color:#75849a; text-align:center; }

.monitoring-status-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.monitoring-status-chip { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border:1px solid #e1e7ef; border-radius:15px; background:#fff; color:#33445c; text-decoration:none; box-shadow:0 5px 16px rgba(15,35,65,.04); }
.monitoring-status-chip span { font-size:10px; font-weight:850; }
.monitoring-status-chip b { display:grid; place-items:center; min-width:28px; height:28px; padding:0 6px; border-radius:10px; background:#eef3f9; color:#1d3558; }
.monitoring-status-chip.approved { border-color:#bce8cf; }
.monitoring-status-chip.rejected { border-color:#f4c3c3; }
.monitoring-status-chip.cancelled { opacity:.76; }
.monitoring-status-group { margin-top:16px; }
.monitoring-group-heading { padding-bottom:14px; border-bottom:1px solid #e8ecf2; }
.monitoring-empty-state { padding:45px; text-align:center; color:#718096; }
.monitoring-empty-state > span { font-size:30px; }

/* ---------- Delivery monitoring ---------- */

.delivery-page-content { display:flex; flex-direction:column; gap:18px; }
.delivery-hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:27px 30px;
    color:#fff;
    border-radius:25px;
    background:linear-gradient(135deg,#153b73,#176fcf 58%,#0aa9b9);
    box-shadow:0 18px 42px rgba(18,72,140,.2);
}
.delivery-hero h2 { margin:7px 0 8px; font-size:32px; letter-spacing:-.035em; }
.delivery-hero p { max-width:820px; margin:0; color:rgba(255,255,255,.84); line-height:1.55; }
.delivery-readonly-badge {
    flex:0 0 auto;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:rgba(255,255,255,.12);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}
.delivery-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.delivery-summary-grid a {
    display:block;
    padding:19px 21px;
    border:1px solid #e0e7f0;
    border-left:5px solid #2563eb;
    border-radius:19px;
    background:#edf5ff;
    box-shadow:0 8px 22px rgba(15,35,65,.06);
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.delivery-summary-grid a:hover { transform:translateY(-2px); box-shadow:0 12px 27px rgba(15,35,65,.1); }
.delivery-summary-grid a.active { border-color:#8cb9f2; box-shadow:0 0 0 2px rgba(37,99,235,.1),0 12px 27px rgba(15,35,65,.09); }
.delivery-summary-grid a.pending { border-left-color:#d99108; background:#fff8e7; }
.delivery-summary-grid a.pending.active { border-color:#e9bd62; }
.delivery-summary-grid a.delivered { border-left-color:#149553; background:#edfbf4; }
.delivery-summary-grid a.delivered.active { border-color:#84d1a8; }
.delivery-summary-grid span,.delivery-summary-grid strong,.delivery-summary-grid small { display:block; }
.delivery-summary-grid span { color:#667790; font-size:12px; font-weight:800; }
.delivery-summary-grid strong { margin:4px 0; color:#102039; font-size:29px; line-height:1; }
.delivery-summary-grid small { color:#8a98aa; font-size:11px; }
.delivery-filter { grid-template-columns:minmax(280px,1fr) 220px auto auto; margin-bottom:0; }
.delivery-list { display:grid; gap:15px; }
.delivery-status-section { padding:18px; border:1px solid #e0e7f0; border-radius:24px; }
.delivery-status-section.status-pending { background:#fff9eb; border-color:#f1d79f; }
.delivery-status-section.status-delivered { background:#effaf4; border-color:#bde4cf; }
.delivery-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:4px 4px 17px; }
.delivery-section-heading h2 { margin:4px 0; color:#17263d; font-size:24px; }
.delivery-section-heading p { margin:0; color:#6f7e91; font-size:12px; }
.delivery-section-count { padding:8px 12px; border-radius:999px; color:#6e520e; background:#ffe9b8; font-size:11px; font-weight:850; white-space:nowrap; }
.status-delivered .delivery-section-count { color:#11683d; background:#d5f3e2; }
.delivery-card { border-radius:22px; }
.delivery-card.is-pending { border-left:5px solid #d99108; }
.delivery-card.is-delivered { border-left:5px solid #149553; }
.delivery-card-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:20px 22px;
}
.delivery-po-identity { display:flex; align-items:center; gap:16px; min-width:0; }
.delivery-po-identity > div { min-width:0; }
.delivery-po-identity h3 { margin:0; overflow:hidden; color:#14233b; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.delivery-po-identity p { margin:4px 0; color:#50627b; font-size:13px; }
.delivery-po-identity small { color:#8492a5; font-size:11px; }
.delivery-card-status { display:flex; align-items:center; justify-content:flex-end; gap:11px; flex:0 0 auto; }
.delivery-card-status > strong { color:#14233b; font-size:15px; }
.delivery-status-badge {
    display:inline-flex;
    padding:8px 11px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
}
.delivery-status-badge.pending { color:#936000; background:#fff3d6; }
.delivery-status-badge.delivered { color:#0f7b43; background:#e5f8ee; }
.delivery-details-editor { border-top:1px solid #e8edf3; }
.delivery-details-editor summary {
    padding:14px 22px;
    color:#245a9f;
    background:#f8fbff;
    cursor:pointer;
    font-size:12px;
    font-weight:850;
}
.delivery-form {
    display:grid;
    grid-template-columns:170px 170px minmax(260px,1fr) minmax(210px,.65fr);
    gap:14px;
    padding:20px 22px 22px;
}
.delivery-form label { display:flex; flex-direction:column; gap:6px; }
.delivery-form label > span,.delivery-readonly-details span { color:#65758b; font-size:10px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.delivery-form label > small { color:#8795a8; font-size:10px; line-height:1.35; }
.delivery-form input,.delivery-form textarea {
    width:100%;
    border:1px solid #d8e1ec;
    border-radius:12px;
    padding:11px 12px;
    color:#17243a;
    background:#f8fafc;
}
.delivery-form input { height:44px; }
.delivery-form textarea { resize:vertical; line-height:1.45; }
.delivery-notes-field { grid-column:1/-1; }
.delivery-form-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.delivery-form-footer small { color:#76859a; }
.delivery-readonly-details {
    display:grid;
    grid-template-columns:1fr 2fr 1fr 1fr;
    gap:16px;
    padding:18px 22px 21px;
    border-top:1px solid #e8edf3;
    background:#fbfdfc;
}
.delivery-readonly-details div { min-width:0; }
.delivery-readonly-details b { display:block; margin-top:5px; color:#213149; font-size:13px; line-height:1.45; }
.delivery-readonly-details .wide { grid-column:1/-1; }
.delivery-readonly-details p { margin:5px 0 0; color:#40516a; font-size:13px; line-height:1.55; }
.delivery-readonly-details > small { color:#7b899b; }
.delivery-president-pending { padding:15px 22px; border-top:1px solid #e8edf3; color:#86600c; background:#fffaf0; font-size:12px; }
.delivery-empty { padding:48px; color:#718096; text-align:center; }
.delivery-empty > span { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 13px; border-radius:18px; color:#0f7b43; background:#e5f8ee; font-size:24px; font-weight:900; }
.delivery-empty h2 { margin:0 0 7px; color:#22324b; }
.delivery-empty p { margin:0; }

@media (max-width:1100px) {
    .accounting-hero { grid-template-columns:1fr; }
    .accounting-po-card { grid-template-columns:160px minmax(0,1fr); }
    .accounting-po-meta,.accounting-po-actions { grid-column:1/-1; }
    .accounting-po-actions { justify-content:flex-start; }
    .monitoring-status-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .delivery-form { grid-template-columns:1fr 1fr; }
    .delivery-place-field { grid-column:1/-1; }
    .delivery-readonly-details { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
    .accounting-hero { padding:21px; border-radius:22px; }
    .accounting-hero h2 { font-size:27px; }
    .accounting-hero-stats { grid-template-columns:repeat(3,1fr); }
    .accounting-hero-stats article { min-height:85px; }
    .accounting-filter { grid-template-columns:1fr; }
    .accounting-po-card { grid-template-columns:1fr; gap:14px; padding:16px; }
    .accounting-po-meta,.accounting-po-actions { grid-column:auto; }
    .accounting-po-details { grid-template-columns:1fr 1fr; }
    .accounting-po-actions,.accounting-po-actions form,.accounting-po-actions .btn { width:100%; }
    .accounting-summary-grid { grid-template-columns:1fr; }
    .simple-po-list article { grid-template-columns:1fr; gap:12px; }
    .simple-po-actions { justify-content:space-between; }
    .monitoring-status-summary { grid-template-columns:1fr 1fr; }
    .delivery-hero { align-items:flex-start; flex-direction:column; padding:22px; }
    .delivery-hero h2 { font-size:27px; }
    .delivery-summary-grid,.delivery-filter,.delivery-form,.delivery-readonly-details { grid-template-columns:1fr; }
    .delivery-place-field,.delivery-notes-field,.delivery-form-footer,.delivery-readonly-details .wide { grid-column:auto; }
    .delivery-card-summary,.delivery-po-identity,.delivery-card-status,.delivery-form-footer,.delivery-section-heading { align-items:flex-start; flex-direction:column; }
    .delivery-card-status { width:100%; justify-content:flex-start; }
    .delivery-card-status .table-action,.delivery-form-footer .btn { width:100%; }
    .delivery-po-identity .po-number-badge { flex:0 0 auto; }
}

@media print {
    .saved-po-document .checker-line {
        grid-template-columns:minmax(0,1fr) 19.5mm !important;
        gap:.5mm !important;
    }
    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width:19.5mm !important;
        height:5.6mm !important;
        max-width:19.5mm !important;
        max-height:5.6mm !important;
    }
    .saved-po-document .saved-checker-list.reviewer-count-1 { height:5.8mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-2 { height:11.25mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-3 { height:16.7mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-4 { height:22.1mm !important; max-height:22.1mm !important; }
    .saved-po-document .checker-saved-cell { min-height:23mm !important; height:auto !important; }
    .saved-po-document .approved-by-content {
        height:15.4mm !important;
        min-height:15.4mm !important;
        max-height:15.4mm !important;
        grid-template-rows:11.8mm 1.9mm 1.35mm !important;
    }
    .saved-po-document .approved-by-esign-wrap { height:11.8mm !important; }
    .saved-po-document .approved-by-esign {
        width:40mm !important;
        height:11.8mm !important;
        max-width:98% !important;
        max-height:11.8mm !important;
    }
}

/* ========================================================================== */
/* Final access, PDF, and login security update                               */
/* ========================================================================== */
.view-only-pill {
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:12px;
    color:#dbe8fb;
    background:rgba(255,255,255,.08);
    font-size:11px;
    font-weight:850;
    letter-spacing:.03em;
}

.human-verification-card {
    display:grid;
    gap:10px;
    margin:17px 0 4px;
    padding:15px;
    border:1px solid #dce5f1;
    border-radius:17px;
    background:linear-gradient(145deg,#f8fbff,#f1f6fd);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.human-verification-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.human-verification-heading > div {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.human-verification-heading strong,
.human-verification-heading small {
    display:block;
}

.human-verification-heading strong {
    color:#17243a;
    font-size:13px;
}

.human-verification-heading small {
    margin-top:2px;
    color:#75849a;
    font-size:9.5px;
}

.human-shield {
    display:grid;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#15a9cb);
    font-weight:900;
}

.human-refresh {
    display:grid;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border:1px solid #d3deed;
    border-radius:11px;
    color:#31527f;
    background:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:900;
}

.human-verification-card > label:not(.human-confirm-row) {
    margin:0;
    color:#34445c;
    font-size:11px;
    font-weight:800;
}

.human-verification-card > input[type="number"] {
    width:100%;
    min-height:46px;
    padding:0 14px;
    border:1px solid #cdd9e9;
    border-radius:13px;
    outline:0;
    background:#fff;
    color:#17243a;
    font:inherit;
    font-weight:800;
    box-sizing:border-box;
}

.human-verification-card > input[type="number"]:focus {
    border-color:#2b6fe8;
    box-shadow:0 0 0 3px rgba(43,111,232,.12);
}

.human-confirm-row {
    display:flex !important;
    align-items:center;
    gap:9px;
    margin:0 !important;
    color:#34445c;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.human-confirm-row input {
    width:18px;
    height:18px;
    margin:0;
    accent-color:#2563eb;
}

.login-honeypot {
    position:absolute !important;
    left:-10000px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

@media (max-width:600px) {
    .human-verification-card { padding:13px; border-radius:15px; }
    .human-verification-heading small { font-size:9px; }
}

@media print {
    body.po-print-restricted .print-page-shell,
    body.po-print-restricted .po-paper,
    body.po-print-restricted .po-scroll-shell,
    body.po-print-restricted .review-paper-scroll {
        display:none !important;
    }

    body.po-print-restricted::before {
        content:"Printing is available only to Purchasing users and the Company President.";
        display:block !important;
        margin:25mm auto;
        padding:14mm;
        max-width:150mm;
        border:1px solid #222;
        color:#111;
        background:#fff;
        font:700 14pt Arial,sans-serif;
        line-height:1.5;
        text-align:center;
    }
}

/* ========================================================================== */
/* Complete interface padding audit                                            */
/* Only padding values are normalized in this block.                           */
/* ========================================================================== */

@media screen and (min-width: 901px) {
    .page-header {
        padding: 30px 38px;
    }

    .page-content {
        padding: 38px 38px 58px;
    }

    .hero-main {
        padding: 46px 50px;
    }

    .hero-note,
    .card-soft {
        padding: 34px;
    }

    .stat-card {
        padding: 28px;
    }

    .card-heading {
        padding: 28px 30px 22px;
    }

    .po-command-card {
        padding: 24px 28px;
    }

    .checker-help-card,
    .edit-remarks-card,
    .monitoring-top-card {
        padding: 20px 24px;
    }

    .filter-card {
        padding: 18px;
    }

    .history-summary-card {
        padding: 22px;
    }

    .review-decision-panel {
        padding: 24px 28px;
    }

    
.notification-push-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid rgba(11, 34, 58, .12);
    border-radius: 18px;
    background: var(--card-bg, #fff);
    box-shadow: 0 8px 24px rgba(11, 34, 58, .06);
}
.notification-push-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(11, 34, 58, .08);
    font-size: 22px;
}
.notification-push-copy h2 { margin: 4px 0 6px; }
.notification-push-copy p { margin: 0 0 4px; font-weight: 700; }
.notification-push-copy small { display: block; opacity: .72; line-height: 1.45; }
.notification-push-copy [data-push-status][data-state="success"] { color: #198754; }
.notification-push-copy [data-push-status][data-state="warning"] { color: #9a6700; }
.notification-push-copy [data-push-status][data-state="error"] { color: #b42318; }
.notification-push-button { white-space: nowrap; }
html[data-theme="dark"] .notification-push-card {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    box-shadow: none;
}
@media (max-width: 720px) {
    .notification-push-card {
        grid-template-columns: auto 1fr;
    }
    .notification-push-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.notification-summary-card {
        padding: 40px 44px;
    }

    .notification-item {
        padding: 20px 22px;
    }

    .catalog-hero {
        padding: 38px 42px;
    }

    .catalog-metrics div {
        padding: 20px;
    }

    .catalog-form-card > .card-heading {
        padding: 30px 30px 20px;
    }

    .catalog-form-card .modern-form {
        padding: 0 30px 30px;
    }

    .catalog-list-card > .card-heading {
        padding: 30px 30px 20px;
    }

    .catalog-list-card .catalog-filter-bar {
        padding: 0 30px;
    }

    .esign-upload-form {
        padding: 0 30px 30px;
    }

    .esign-current-card {
        padding: 0 30px 30px;
    }

    .esign-current-card > .card-heading {
        padding: 28px 0 22px;
    }

    .esign-guidance-grid {
        padding: 0 30px 30px;
    }

    .accounting-hero {
        padding: 36px 40px;
    }

    .accounting-hero-stats article {
        padding: 16px;
    }

    .accounting-po-card {
        padding: 20px 22px;
    }

    .accounting-summary-grid article {
        padding: 22px;
    }

    .accounting-status-section .card-heading {
        padding: 22px 24px;
    }

    .simple-po-list article {
        padding: 18px 24px;
    }

    .monitoring-status-chip {
        padding: 13px 15px;
    }

    .monitoring-empty-state,
    .accounting-empty {
        padding: 48px 36px;
    }

    .president-po-top,
    .president-po-footer {
        padding: 16px 18px;
    }

    .president-po-body {
        padding: 18px;
    }

    .system-message-card {
        padding: 38px;
    }

    .po-scroll-shell {
        padding: 12px 12px 30px;
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    .page-header {
        padding: 26px 22px;
    }

    .page-content {
        padding: 26px 22px 44px;
    }

    .reviewer-portal-body .reviewer-page-content {
        padding: 14px 12px 92px;
    }

    .hero-main {
        padding: 36px 32px;
    }

    .hero-note,
    .card-soft {
        padding: 28px;
    }

    .stat-card {
        padding: 24px;
    }

    .card-heading {
        padding: 25px 24px 19px;
    }

    .po-command-card {
        padding: 22px 24px;
    }

    .checker-help-card,
    .edit-remarks-card,
    .monitoring-top-card,
    .review-decision-panel {
        padding: 20px 22px;
    }

    .filter-card {
        padding: 16px;
    }

    
.notification-push-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid rgba(11, 34, 58, .12);
    border-radius: 18px;
    background: var(--card-bg, #fff);
    box-shadow: 0 8px 24px rgba(11, 34, 58, .06);
}
.notification-push-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(11, 34, 58, .08);
    font-size: 22px;
}
.notification-push-copy h2 { margin: 4px 0 6px; }
.notification-push-copy p { margin: 0 0 4px; font-weight: 700; }
.notification-push-copy small { display: block; opacity: .72; line-height: 1.45; }
.notification-push-copy [data-push-status][data-state="success"] { color: #198754; }
.notification-push-copy [data-push-status][data-state="warning"] { color: #9a6700; }
.notification-push-copy [data-push-status][data-state="error"] { color: #b42318; }
.notification-push-button { white-space: nowrap; }
html[data-theme="dark"] .notification-push-card {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    box-shadow: none;
}
@media (max-width: 720px) {
    .notification-push-card {
        grid-template-columns: auto 1fr;
    }
    .notification-push-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.notification-summary-card {
        padding: 32px;
    }

    .catalog-hero {
        padding: 32px;
    }

    .catalog-form-card > .card-heading,
    .catalog-list-card > .card-heading {
        padding: 26px 24px 18px;
    }

    .catalog-form-card .modern-form {
        padding: 0 24px 26px;
    }

    .catalog-list-card .catalog-filter-bar {
        padding: 0 24px;
    }

    .esign-upload-form {
        padding: 0 24px 26px;
    }

    .esign-current-card {
        padding: 0 24px 26px;
    }

    .esign-current-card > .card-heading {
        padding: 25px 0 19px;
    }

    .esign-guidance-grid {
        padding: 0 24px 26px;
    }

    .accounting-hero {
        padding: 30px;
    }

    .accounting-hero-stats article {
        padding: 14px;
    }

    .accounting-po-card,
    .accounting-summary-grid article {
        padding: 20px;
    }

    .accounting-status-section .card-heading {
        padding: 20px 22px;
    }

    .simple-po-list article {
        padding: 17px 22px;
    }

    .po-scroll-shell {
        padding: 10px 10px 28px;
    }
}

@media screen and (max-width: 600px) {
    .page-header {
        padding: 22px 16px;
    }

    .page-content {
        padding: 20px 14px 36px;
    }

    .reviewer-portal-body .reviewer-page-content {
        padding: 14px 12px 92px;
    }

    .hero-main {
        padding: 30px 22px;
    }

    .hero-note,
    .card-soft {
        padding: 22px;
    }

    .stat-card {
        padding: 21px;
    }

    .card-heading {
        padding: 22px 20px 17px;
    }

    .modern-table th,
    .modern-table td {
        padding: 14px 16px;
    }

    .po-command-card {
        padding: 20px 18px;
    }

    .checker-help-card,
    .edit-remarks-card,
    .monitoring-top-card,
    .review-decision-panel {
        padding: 18px;
    }

    .filter-card {
        padding: 14px;
    }

    .history-summary-card {
        padding: 19px;
    }

    
.notification-push-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid rgba(11, 34, 58, .12);
    border-radius: 18px;
    background: var(--card-bg, #fff);
    box-shadow: 0 8px 24px rgba(11, 34, 58, .06);
}
.notification-push-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(11, 34, 58, .08);
    font-size: 22px;
}
.notification-push-copy h2 { margin: 4px 0 6px; }
.notification-push-copy p { margin: 0 0 4px; font-weight: 700; }
.notification-push-copy small { display: block; opacity: .72; line-height: 1.45; }
.notification-push-copy [data-push-status][data-state="success"] { color: #198754; }
.notification-push-copy [data-push-status][data-state="warning"] { color: #9a6700; }
.notification-push-copy [data-push-status][data-state="error"] { color: #b42318; }
.notification-push-button { white-space: nowrap; }
html[data-theme="dark"] .notification-push-card {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    box-shadow: none;
}
@media (max-width: 720px) {
    .notification-push-card {
        grid-template-columns: auto 1fr;
    }
    .notification-push-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.notification-summary-card {
        padding: 28px 22px;
    }

    .notification-item {
        padding: 16px;
    }

    .catalog-hero {
        padding: 28px 22px;
    }

    .catalog-metrics div {
        padding: 16px;
    }

    .catalog-form-card > .card-heading,
    .catalog-list-card > .card-heading {
        padding: 22px 20px 16px;
    }

    .catalog-form-card .modern-form {
        padding: 0 20px 22px;
    }

    .catalog-list-card .catalog-filter-bar {
        padding: 0 20px;
    }

    .esign-upload-form {
        padding: 0 20px 22px;
    }

    .esign-current-card {
        padding: 0 20px 22px;
    }

    .esign-current-card > .card-heading {
        padding: 22px 0 16px;
    }

    .esign-guidance-grid {
        padding: 0 20px 22px;
    }

    .esign-drop-zone {
        padding: 22px 16px;
    }

    .accounting-hero {
        padding: 26px 22px;
    }

    .accounting-hero-stats article {
        padding: 12px 8px;
    }

    .accounting-po-card {
        padding: 17px;
    }

    .accounting-summary-grid article {
        padding: 19px;
    }

    .accounting-status-section .card-heading {
        padding: 19px 18px;
    }

    .simple-po-list article {
        padding: 16px 18px;
    }

    .simple-po-empty {
        padding: 26px 18px;
    }

    .monitoring-status-chip {
        padding: 12px;
    }

    .monitoring-empty-state,
    .accounting-empty {
        padding: 38px 22px;
    }

    .president-po-top,
    .president-po-footer {
        padding: 14px;
    }

    .president-po-body {
        padding: 16px 14px;
    }

    .system-message-page {
        padding: 18px;
    }

    .system-message-card {
        padding: 30px 22px;
    }

    .po-scroll-shell {
        padding: 8px 4px 24px;
    }
}

/* ========================================================================== */
/* IT login trail and P.O number settings                                     */
/* ========================================================================== */

.sidebar-live-status.is-online i {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .15);
}

.it-audit-page,
.po-settings-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 38px 38px 58px;
}

.it-audit-page .compact-hero,
.po-settings-page .compact-hero {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    gap: 28px;
    margin-bottom: 28px;
}

.it-audit-page .compact-hero .hero-main,
.po-settings-page .compact-hero .hero-main {
    min-height: 330px;
    padding: 54px 60px;
}

.it-audit-page .compact-hero .hero-main h2,
.po-settings-page .compact-hero .hero-main h2 {
    margin: 14px 0 16px;
}

.it-audit-page .compact-hero .hero-main p,
.po-settings-page .compact-hero .hero-main p {
    max-width: 780px;
}

.it-audit-page .hero-note,
.po-settings-page .hero-note {
    min-height: 330px;
    padding: 34px;
}

.audit-filter-card {
    margin-bottom: 28px;
    padding: 24px;
}

.audit-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(170px, .65fr) minmax(160px, .6fr) minmax(160px, .6fr) auto;
    align-items: end;
    gap: 16px;
}

.audit-filter-grid > label {
    display: grid;
    gap: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.audit-filter-grid input,
.audit-filter-grid select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    color: var(--ink);
    border: 1px solid #d8e1ec;
    border-radius: 12px;
    outline: none;
    background: #fff;
}

.audit-filter-grid input:focus,
.audit-filter-grid select:focus {
    border-color: #70a3f3;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.audit-filter-grid .filter-search {
    display: block;
}

.audit-filter-grid .filter-search span {
    top: 14px;
}

.audit-filter-grid .filter-search input {
    padding-left: 40px;
}

.audit-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.audit-filter-actions .btn {
    min-height: 48px;
    white-space: nowrap;
}

.audit-table-card {
    padding-bottom: 8px;
}

.audit-table-card > .table-wrap {
    padding: 0 8px;
}

.login-trail-table th,
.login-trail-table td {
    padding: 17px 18px;
}

.login-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
}

.login-user-avatar {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-700), var(--cyan-500));
    font-weight: 850;
}

.login-user-cell b,
.login-user-cell small,
.device-cell b,
.device-cell small,
.table-subtext {
    display: block;
}

.login-user-cell small,
.device-cell small,
.table-subtext {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.device-cell {
    min-width: 245px;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 999px;
    color: #1e40af;
    background: #eaf1ff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.source-badge.reviewer_app {
    color: #0f766e;
    background: #e5faf6;
}

.audit-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 22px 28px 26px;
    color: var(--muted);
    font-size: 13px;
}

.audit-pagination > :last-child {
    justify-self: end;
}

.po-settings-next-number {
    margin: 18px 0;
    color: var(--red);
    font-family: Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: .06em;
}

.po-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 28px;
}

.po-settings-grid > .content-card {
    padding-bottom: 30px;
}

.po-number-setting-form {
    display: grid;
    gap: 22px;
    padding: 0 30px;
}

.po-number-setting-form > label {
    display: grid;
    gap: 10px;
    color: #334155;
    font-weight: 750;
}

.po-number-input-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid #d8e1ec;
    border-radius: 14px;
    background: #fff;
}

.po-number-input-wrap > span {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 17px;
    color: #1d4ed8;
    border-right: 1px solid #d8e1ec;
    background: #eef4ff;
    font-size: 18px;
    font-weight: 850;
}

.po-number-input-wrap input {
    width: 100%;
    min-height: 58px;
    padding: 13px 16px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 22px;
    font-weight: 800;
}

.po-number-input-wrap:focus-within {
    border-color: #70a3f3;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.setting-warning,
.setting-note {
    padding: 18px 19px;
    border: 1px solid #f4d49d;
    border-radius: 14px;
    background: #fff9ed;
}

.setting-warning b,
.setting-note b {
    display: block;
    margin-bottom: 6px;
}

.setting-warning p,
.setting-note p {
    margin: 0;
    color: #75551e;
    line-height: 1.65;
}

.po-number-setting-form .btn {
    width: 100%;
    min-height: 50px;
}

.sequence-summary-list {
    display: grid;
    gap: 12px;
    padding: 0 30px 24px;
}

.sequence-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.sequence-summary-list span {
    color: #52647e;
    font-size: 13px;
}

.sequence-summary-list b {
    text-align: right;
}

.po-sequence-summary-card .setting-note {
    margin: 0 30px;
    border-color: #d8e6ff;
    background: #f3f7ff;
}

.po-sequence-summary-card .setting-note p {
    color: #435979;
}

@media (max-width: 1180px) {
    .audit-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audit-search,
    .audit-filter-actions {
        grid-column: 1 / -1;
    }

    .audit-filter-actions .btn {
        flex: 1;
    }
}

@media (max-width: 1050px) {
    .it-audit-page .compact-hero,
    .po-settings-page .compact-hero,
    .po-settings-grid {
        grid-template-columns: 1fr;
    }

    .it-audit-page .compact-hero .hero-main,
    .po-settings-page .compact-hero .hero-main,
    .it-audit-page .hero-note,
    .po-settings-page .hero-note {
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .it-audit-page,
    .po-settings-page {
        padding: 18px;
    }

    .it-audit-page .compact-hero,
    .po-settings-page .compact-hero,
    .po-settings-grid {
        gap: 18px;
        margin-bottom: 22px;
    }

    .it-audit-page .compact-hero .hero-main,
    .po-settings-page .compact-hero .hero-main {
        padding: 34px 26px;
        border-radius: 20px;
    }

    .it-audit-page .hero-note,
    .po-settings-page .hero-note {
        padding: 24px 22px;
        border-radius: 18px;
    }

    .audit-filter-card {
        padding: 20px;
    }

    .audit-filter-grid {
        grid-template-columns: 1fr;
    }

    .audit-search,
    .audit-filter-actions {
        grid-column: auto;
    }

    .audit-filter-actions {
        flex-direction: column;
    }

    .audit-filter-actions .btn {
        width: 100%;
    }

    .audit-table-card .card-heading {
        align-items: flex-start;
        padding: 24px 22px 18px;
    }

    .audit-pagination {
        padding: 20px 22px 24px;
    }

    .po-settings-grid > .content-card {
        padding-bottom: 24px;
        border-radius: 18px;
    }

    .po-number-setting-form,
    .sequence-summary-list {
        padding-left: 22px;
        padding-right: 22px;
    }

    .po-sequence-summary-card .setting-note {
        margin-left: 22px;
        margin-right: 22px;
    }
}

@media (max-width: 480px) {
    .it-audit-page,
    .po-settings-page {
        padding: 13px;
    }

    .it-audit-page .compact-hero .hero-main,
    .po-settings-page .compact-hero .hero-main {
        padding: 30px 21px;
    }

    .it-audit-page .hero-note,
    .po-settings-page .hero-note,
    .audit-filter-card {
        padding: 21px 18px;
    }

    .audit-table-card .card-heading {
        flex-direction: column;
        padding: 22px 18px 16px;
    }

    .audit-pagination {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 18px;
    }

    .audit-pagination > * {
        width: 100%;
        justify-self: stretch !important;
    }

    .po-number-setting-form,
    .sequence-summary-list {
        padding-left: 18px;
        padding-right: 18px;
    }

    .po-sequence-summary-card .setting-note {
        margin-left: 18px;
        margin-right: 18px;
    }

    .sequence-summary-list > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .sequence-summary-list b {
        text-align: left;
    }
}

/* ========================================================================== */
/* Supplier company full display / print fix v12                              */
/* ========================================================================== */

.rowline.company-row {
    align-items: start;
}

.saved-po-document .rowline.company-row b {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.saved-po-document .rowline.company-row {
    margin-top: 5px;
    margin-bottom: 7px;
}

@media (max-width: 760px) {
    .rowline.company-row {
        align-items: stretch;
    }
}

@media print {
    .rowline.company-row {
        align-items: start !important;
        margin-top: .7mm !important;
        margin-bottom: 1.1mm !important;
    }

    .rowline.company-row b,
    .rowline.company-row .po-multiline {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 15mm !important;
        padding: 0 .6mm !important;
        overflow: hidden !important;
        resize: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.08 !important;
    }
}



/* ========================================================================== */
/* Full supplier/project suggestions and long Project/Location display v13    */
/* ========================================================================== */

/* Company, supplier address, project name, and project location use the same
   multiline behavior so long saved values remain readable while editing. */
.rowline.company-row,
.rowline.address-row,
.rowline.project-row,
.rowline.location-row {
    align-items: start;
}

.saved-po-document .rowline.company-row b,
.saved-po-document .rowline.address-row b,
.saved-po-document .rowline.project-row b,
.saved-po-document .rowline.location-row b {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.22;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.saved-po-document .rowline.company-row,
.saved-po-document .rowline.address-row,
.saved-po-document .rowline.project-row,
.saved-po-document .rowline.location-row {
    margin-top: 4px;
    margin-bottom: 6px;
}

/* Show every useful supplier/project value inside each autocomplete result. */
.catalog-textarea-suggestions {
    max-height: 330px;
    padding: 7px;
}

.catalog-textarea-option {
    padding: 11px 12px;
}

.catalog-textarea-option + .catalog-textarea-option {
    margin-top: 4px;
}

.catalog-option-title {
    display: block;
    color: #14213a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.catalog-option-details {
    display: grid;
    gap: 3px;
    margin-top: 6px;
}

.catalog-option-detail {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 7px;
    color: #5d6f88;
    font-size: 10px;
    line-height: 1.35;
}

.catalog-option-detail b {
    color: #334762;
    font-size: inherit;
    font-weight: 800;
}

.catalog-option-detail span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 760px) {
    .rowline.company-row,
    .rowline.address-row,
    .rowline.project-row,
    .rowline.location-row {
        align-items: stretch;
    }

    .catalog-textarea-suggestions {
        max-height: 360px;
    }
}

@media print {
    /* Preserve full Company, Address, Project, and Location text in the saved
       preview, printed page, PDF, and JPG export. */
    .info-grid {
        height: 48mm !important;
        min-height: 48mm !important;
        overflow: hidden !important;
    }

    .info-box {
        height: 48mm !important;
        min-height: 48mm !important;
        overflow: hidden !important;
    }

    .rowline.company-row,
    .rowline.address-row,
    .rowline.project-row,
    .rowline.location-row {
        align-items: start !important;
        margin-top: .55mm !important;
        margin-bottom: .75mm !important;
    }

    .rowline.company-row b,
    .rowline.address-row b,
    .rowline.project-row b,
    .rowline.location-row b,
    .rowline.company-row .po-multiline,
    .rowline.address-row .po-multiline,
    .rowline.project-row .po-multiline,
    .rowline.location-row .po-multiline {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 .6mm !important;
        overflow: visible !important;
        resize: none !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.05 !important;
    }

    /* Reclaim the small amount of space added to the information section so
       the P.O remains locked to one A4 page. */
    .items {
        height: 143mm !important;
    }

    .items tbody tr,
    .items td {
        height: 6.7mm !important;
        min-height: 6.7mm !important;
        max-height: 6.7mm !important;
    }
}

/* ========================================================================== */
/* Payment Terms catalog + Other Information field (schema v15)              */
/* ========================================================================== */

.rowline.payment-terms-row,
.rowline.other-information-row {
    align-items: start;
}

.rowline.other-information-row .po-other-information {
    min-height: 54px;
    max-height: 110px;
}

.saved-po-document .rowline.payment-terms-row b,
.saved-po-document .rowline.other-information-row b {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.18;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.saved-po-document .rowline.payment-terms-row,
.saved-po-document .rowline.other-information-row {
    margin-top: 4px;
    margin-bottom: 5px;
}

.other-information-box .delivery-date-row {
    margin-top: 5px;
}

@media (max-width: 760px) {
    .rowline.payment-terms-row,
    .rowline.other-information-row {
        align-items: stretch;
    }

    .rowline.other-information-row .po-other-information {
        min-height: 72px;
        max-height: 150px;
    }
}

@media print {
    /* Give the new Other Information text enough room while keeping the P.O
       locked to one A4 page by reclaiming space from the blank item rows. */
    .info-grid {
        height: 58mm !important;
        min-height: 58mm !important;
    }

    .info-box {
        height: 58mm !important;
        min-height: 58mm !important;
    }

    .rowline.payment-terms-row,
    .rowline.other-information-row {
        align-items: start !important;
        margin-top: .45mm !important;
        margin-bottom: .65mm !important;
    }

    .rowline.payment-terms-row b,
    .rowline.other-information-row b,
    .rowline.payment-terms-row .po-multiline,
    .rowline.other-information-row .po-multiline {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 .6mm !important;
        overflow: hidden !important;
        resize: none !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.03 !important;
    }

    .rowline.payment-terms-row b,
    .rowline.payment-terms-row .po-multiline {
        max-height: 10mm !important;
    }

    .rowline.other-information-row b,
    .rowline.other-information-row .po-multiline {
        max-height: 16mm !important;
    }

    .other-information-box .delivery-date-row {
        margin-top: .45mm !important;
    }

    .items {
        height: 133mm !important;
    }

    .items tbody tr,
    .items td {
        height: 6.2mm !important;
        min-height: 6.2mm !important;
        max-height: 6.2mm !important;
    }
}

/* ========================================================================== */
/* Compact P.O information section spacing v16                                */
/* ========================================================================== */

/* Remove the excessive blank area below Supplier, Deliver To, and Other
   Information in the saved preview and image/PDF exports while still allowing
   long values to wrap naturally. */
.saved-po-document .info-box {
    min-height: 144px;
}

@media print {
    /* The previous 58mm fixed height left a large empty block. Keep enough
       room for wrapped Company, Address, Project, Location, Payment Terms,
       and Other Info values, then return the reclaimed space to item rows. */
    .info-grid {
        height: 38mm !important;
        min-height: 38mm !important;
        max-height: 38mm !important;
    }

    .info-box {
        height: 38mm !important;
        min-height: 38mm !important;
        max-height: 38mm !important;
    }

    .items {
        height: 153mm !important;
    }

    .items tbody tr,
    .items td {
        height: 7.25mm !important;
        min-height: 7.25mm !important;
        max-height: 7.25mm !important;
    }
}

/* ========================================================================== */
/* Mobile app-style left navigation drawer + larger touch controls v17        */
/* ========================================================================== */

.mobile-sidebar-toggle,
.mobile-sidebar-overlay,
.mobile-sidebar-close {
    display: none;
}

@media screen and (max-width: 900px) {
    body.sidebar-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .mobile-sidebar-toggle {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        z-index: 980;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-width: 112px;
        min-height: 50px;
        padding: 0 16px;
        color: #fff;
        border: 0;
        border-radius: 16px;
        background: linear-gradient(135deg, #1e5dde, #0b9fc1);
        box-shadow: 0 10px 25px rgba(25, 88, 194, .27);
        font: 800 15px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: .01em;
        cursor: pointer;
        transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    .mobile-sidebar-toggle:active {
        transform: scale(.97);
    }

    .mobile-sidebar-toggle:focus-visible,
    .mobile-sidebar-close:focus-visible {
        outline: 3px solid rgba(59, 130, 246, .35);
        outline-offset: 3px;
    }

    .mobile-sidebar-toggle-icon {
        font-size: 23px;
        line-height: 1;
    }

    body.sidebar-open .mobile-sidebar-toggle {
        opacity: 0;
        pointer-events: none;
    }

    .mobile-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 990;
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgba(4, 13, 29, .58);
        backdrop-filter: blur(2px);
        transition: opacity .22s ease, visibility .22s ease;
    }

    body.sidebar-open .mobile-sidebar-overlay {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar,
    .reviewer-portal-body .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1000 !important;
        width: min(88vw, 350px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        padding:
            calc(15px + env(safe-area-inset-top))
            14px
            calc(16px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        transform: translate3d(-104%, 0, 0);
        transition: transform .24s cubic-bezier(.2, .75, .25, 1);
        box-shadow: 18px 0 42px rgba(3, 13, 29, .28) !important;
    }

    body.sidebar-open .sidebar {
        transform: translate3d(0, 0, 0);
    }

    .sidebar-brand {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 2px 5px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .sidebar-brand-logo {
        width: 48px;
        height: 48px;
    }

    .sidebar-brand strong {
        font-size: 20px;
    }

    .mobile-sidebar-close {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        margin-left: auto;
        place-items: center;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 15px;
        background: rgba(255, 255, 255, .08);
        font: 400 31px/1 Arial, sans-serif;
        cursor: pointer;
    }

    .sidebar-user {
        display: flex !important;
        margin: 15px 0 10px !important;
        padding: 14px !important;
        border-radius: 17px !important;
    }

    .sidebar-user strong {
        max-width: 210px;
        font-size: 15px;
    }

    .sidebar-user small {
        font-size: 12px;
    }

    .user-avatar {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .sidebar-nav,
    .reviewer-portal-body .sidebar-nav {
        flex: 1 1 auto !important;
        display: block !important;
        min-height: 0 !important;
        padding: 4px 3px 12px 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    .nav-section {
        display: block !important;
        margin: 17px 12px 9px !important;
        font-size: 11px;
    }

    .side-link {
        width: 100%;
        min-height: 58px !important;
        margin: 5px 0 !important;
        padding: 0 16px !important;
        border-radius: 16px !important;
        font-size: 16px !important;
        flex: none !important;
    }

    .side-icon {
        width: 31px;
        font-size: 22px;
    }

    .notification-count {
        min-width: 28px;
        min-height: 28px;
        padding: 5px 8px;
        font-size: 12px;
    }

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

    .sidebar-live-status {
        display: flex !important;
        margin: 8px 2px 0;
        padding: 10px 12px;
        font-size: 12px;
    }

    .sidebar-logout {
        display: flex !important;
        flex: 0 0 auto;
        min-height: 56px !important;
        margin: 10px 0 0 !important;
        padding: 0 16px !important;
        border-radius: 16px !important;
        font-size: 16px !important;
    }

    .app-main {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .page-header {
        min-height: 78px !important;
        padding-left: 142px !important;
    }

    .page-header h1 {
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.08;
    }

    .reviewer-portal-body .page-header {
        display: none !important;
    }

    .reviewer-portal-body .reviewer-page-content {
        padding-top: calc(76px + env(safe-area-inset-top)) !important;
    }

    .modern-form input,
    .modern-form select,
    .modern-form textarea,
    .filter-card input,
    .filter-card select,
    .catalog-filter-bar input,
    .catalog-filter-bar select {
        min-height: 50px;
        font-size: 16px;
    }

    .btn,
    .table-action {
        min-height: 48px;
        font-size: 15px;
    }

    .table-wrap,
    .assigned-table-wrap {
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 480px) {
    .mobile-sidebar-toggle {
        min-width: 104px;
        min-height: 48px;
        padding: 0 14px;
    }

    .sidebar,
    .reviewer-portal-body .sidebar {
        width: min(92vw, 340px) !important;
    }

    .page-header {
        padding-left: 130px !important;
    }
}

@media screen and (max-width: 600px) {
    /* Keep the page title full-width below the large, fixed Menu button. */
    .page-header {
        padding:
            calc(78px + env(safe-area-inset-top))
            16px
            22px !important;
    }
}


/* ========================================================================== */
/* Final P.O wording + stronger footer signatures v18.1                       */
/* ========================================================================== */

/* Keep the longer Supplier and Subcon label readable without changing layout. */
.po-form .info-box:first-child .box-title,
.saved-po-document .info-box:first-child .box-title {
    letter-spacing: .01em;
    white-space: normal;
}

/* Bigger Prepared By name and e-signature in previews/exports. */
.saved-po-document .prepared-by-content {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    grid-template-rows: 49px 15px !important;
}

.saved-po-document .prepared-by-esign-wrap {
    height: 49px !important;
}

.saved-po-document .prepared-by-esign {
    width: 140px !important;
    height: 48px !important;
    max-width: 98% !important;
    max-height: 48px !important;
}

.saved-po-document .prepared-by-name {
    font-size: 10.5px !important;
    line-height: 1.05 !important;
}

/* Bigger Checked By names and e-signatures while keeping the A4 footer compact. */
.saved-po-document .checker-line {
    grid-template-columns: minmax(0, 1fr) 108px !important;
    gap: 7px !important;
}

.saved-po-document .checker-reviewer-name {
    font-size: 9.7px !important;
    line-height: 1.05 !important;
}

.saved-po-document .checker-decision-meta {
    font-size: 6.8px !important;
}

.saved-po-document .checker-esign-slot,
.saved-po-document .checker-esign {
    width: 108px !important;
    height: 40px !important;
    max-width: 108px !important;
    max-height: 40px !important;
}

@media print {
    .po-form .info-box:first-child .box-title,
    .saved-po-document .info-box:first-child .box-title {
        font-size: 9.1pt !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
    }

    .saved-po-document .signs {
        grid-template-columns: 1.06fr 1.62fr 1.1fr 1.08fr !important;
        gap: 1.05mm !important;
        min-height: 23.2mm !important;
    }

    .saved-po-document .sig {
        min-height: 23.2mm !important;
    }

    .saved-po-document .prepared-by-content {
        height: 13.3mm !important;
        min-height: 13.3mm !important;
        max-height: 13.3mm !important;
        grid-template-rows: 10.85mm 2.15mm !important;
        padding: 0 .15mm .25mm !important;
    }

    .saved-po-document .prepared-by-esign-wrap {
        height: 10.85mm !important;
    }

    .saved-po-document .prepared-by-esign {
        width: 34.5mm !important;
        height: 10.65mm !important;
        max-width: 98% !important;
        max-height: 10.65mm !important;
        margin: 0 auto -.3mm !important;
    }

    .saved-po-document .prepared-by-name {
        font-size: 5.85pt !important;
        line-height: 1 !important;
        letter-spacing: -.015em !important;
    }

    .saved-po-document .checker-saved-cell {
        min-height: 24.4mm !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .saved-po-document .saved-checker-list.reviewer-count-1 { height: 6.7mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-2 { height: 12.7mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-3 { height: 18.7mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-4 {
        height: 23.8mm !important;
        max-height: 23.8mm !important;
    }

    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1fr) 21.8mm !important;
        gap: .45mm !important;
    }

    .saved-po-document .checker-reviewer-copy {
        gap: .22mm !important;
    }

    .saved-po-document .checker-reviewer-name {
        font-size: 5.35pt !important;
        line-height: .98 !important;
        letter-spacing: -.025em !important;
        text-overflow: clip !important;
    }

    .saved-po-document .checker-decision-meta {
        font-size: 3.8pt !important;
        line-height: .98 !important;
        letter-spacing: -.03em !important;
        text-overflow: clip !important;
    }

    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 21.8mm !important;
        height: 6mm !important;
        max-width: 21.8mm !important;
        max-height: 6mm !important;
    }

    .saved-po-document .sig > small {
        font-size: 6.35pt !important;
    }
}

/* ========================================================================== */
/* Accessibility tune-up for senior reviewers + stronger print signatures     */
/* ========================================================================== */

.review-decision-panel {
    border: 2px solid #1d4ed8 !important;
    background: #f8fbff !important;
}

.review-decision-panel .eyebrow {
    color: #153e91 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.review-decision-panel h2 {
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.05 !important;
}

.review-decision-panel p {
    color: #24364f !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
}

.review-buttons {
    gap: 14px !important;
}

.review-buttons .btn,
.mobile-review-action-buttons .btn {
    min-width: 170px !important;
    min-height: 62px !important;
    border-radius: 16px !important;
    font-size: 20px !important;
    font-weight: 950 !important;
}

.assigned-table td[data-label="Your Decision"] .decision-badge,
.mobile-review-current .decision-badge,
.president-po-footer .decision-badge,
.simple-po-meta .decision-badge {
    font-size: 15px !important;
    font-weight: 950 !important;
    padding: 8px 12px !important;
}

.president-po-footer small {
    color: #223756 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

@media screen and (max-width: 900px) {
    .mobile-sidebar-toggle {
        top: calc(18px + env(safe-area-inset-top)) !important;
        left: calc(18px + env(safe-area-inset-left)) !important;
        min-width: 118px !important;
        min-height: 54px !important;
    }

    .esign-page-content,
    .reviewer-portal-body .reviewer-page-content {
        padding-top: calc(96px + env(safe-area-inset-top)) !important;
    }
}

@media screen and (max-width: 600px) {
    .review-decision-panel h2 {
        font-size: 30px !important;
    }

    .review-decision-panel p {
        font-size: 16px !important;
    }

    .mobile-review-action-bar {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 13px !important;
    }

    .mobile-review-current {
        align-items: center !important;
        text-align: center !important;
    }

    .mobile-review-current > span {
        color: #18345f !important;
        font-size: 13px !important;
        font-weight: 950 !important;
    }

    .mobile-review-current .decision-badge {
        font-size: 15px !important;
    }

    .mobile-review-action-buttons .btn {
        min-width: 0 !important;
        min-height: 58px !important;
        font-size: 18px !important;
    }
}

@media print {
    .saved-po-document .signs {
        grid-template-columns: 1.12fr 1.72fr 1.04fr .98fr !important;
        gap: 1.05mm !important;
        min-height: 26.8mm !important;
    }

    .saved-po-document .sig {
        min-height: 26.8mm !important;
    }

    .saved-po-document .prepared-by-content {
        height: 16mm !important;
        min-height: 16mm !important;
        max-height: 16mm !important;
        grid-template-rows: 12.9mm 2.75mm !important;
        padding: 0 .15mm .25mm !important;
    }

    .saved-po-document .prepared-by-esign-wrap {
        height: 12.9mm !important;
    }

    .saved-po-document .prepared-by-esign {
        width: 42mm !important;
        height: 12.6mm !important;
        max-width: 99% !important;
        max-height: 12.6mm !important;
        margin: 0 auto -.35mm !important;
    }

    .saved-po-document .prepared-by-name {
        font-size: 7.25pt !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    .saved-po-document .checker-saved-cell {
        min-height: 27.8mm !important;
    }

    .saved-po-document .saved-checker-list.reviewer-count-1 { height: 8.2mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-2 { height: 15.6mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-3 { height: 22.8mm !important; }
    .saved-po-document .saved-checker-list.reviewer-count-4 {
        height: 27.2mm !important;
        max-height: 27.2mm !important;
    }

    .saved-po-document .checker-line {
        grid-template-columns: minmax(0, 1fr) 25.5mm !important;
        gap: .7mm !important;
    }

    .saved-po-document .checker-reviewer-copy {
        gap: .28mm !important;
    }

    .saved-po-document .checker-reviewer-name {
        font-size: 6.35pt !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    .saved-po-document .checker-decision-meta {
        font-size: 4.35pt !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    .saved-po-document .checker-esign-slot,
    .saved-po-document .checker-esign {
        width: 25.5mm !important;
        height: 7.25mm !important;
        max-width: 25.5mm !important;
        max-height: 7.25mm !important;
    }
}

/* Final shared action buttons */
.table-action,
.users-page .table-action {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 13px !important;
    color: #fff !important;
    border: 1px solid rgba(37, 99, 235, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #2563eb, #16a3c7) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.table-action:hover {
    filter: brightness(1.03);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .24) !important;
    text-decoration: none !important;
}

.table-action-group form[data-next="archive"] .table-action,
.table-action-group form[data-next="deactivate"] .table-action,
.table-action-group form[data-next="disable"] .table-action,
.table-action.reset-password-button,
.danger-link {
    border-color: rgba(220, 38, 38, .18) !important;
    background: linear-gradient(135deg, #dc2626, #f97316) !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .18) !important;
}

.table-action-group form[data-next="restore"] .table-action,
.table-action-group form[data-next="activate"] .table-action,
.table-action-group form[data-next="enable"] .table-action {
    border-color: rgba(20, 149, 83, .18) !important;
    background: linear-gradient(135deg, #149553, #10b981) !important;
    box-shadow: 0 8px 18px rgba(20, 149, 83, .18) !important;
}

.table-action-group form[data-next="supplier"] .table-action,
.table-action-group form[data-next="subcon"] .table-action {
    border-color: rgba(124, 58, 237, .18) !important;
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    box-shadow: 0 8px 18px rgba(124, 58, 237, .18) !important;
}

/* Product descriptions should wrap instead of being clipped. */
.po-form .items .item-description-cell {
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: top;
}

.po-form .items textarea.product-description {
    display: block;
    min-height: 33px;
    max-height: 118px;
    padding: 5px 3px;
    resize: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.saved-po-document .items .item-description-cell {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.16 !important;
    vertical-align: middle !important;
}

@media print {
    .po-form .items input,
    .po-form .items textarea {
        padding: .25mm .45mm !important;
        font-size: 6.9pt !important;
        line-height: 1.02 !important;
    }

    .po-form .items textarea.product-description {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        resize: none !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .po-form .items .item-description-cell,
    .saved-po-document .items .item-description-cell {
        padding: .35mm .7mm !important;
        overflow: hidden !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        font-size: 6.65pt !important;
        line-height: .98 !important;
        vertical-align: middle !important;
    }
}
/* Materials Requisition module */
.mr-paper {
    width: min(100%, 980px);
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d1d5db;
    padding: 24px;
    color: #111827;
}
.mr-form input,
.mr-form textarea,
.mr-form select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #9ca3af;
    padding: 6px 4px;
    font: inherit;
    background: transparent;
}
.mr-form textarea {
    min-height: 42px;
    resize: vertical;
}
.mr-head {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
    margin-bottom: 22px;
}
.mr-company-block {
    display: grid;
    gap: 3px;
}
.mr-company-block small {
    color: #374151;
}
.mr-title-block {
    display: grid;
    gap: 18px;
    justify-items: stretch;
}
.mr-slip-title {
    justify-self: end;
    border: 2px solid #374151;
    border-radius: 999px;
    padding: 16px 34px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .04em;
}
.mr-title-block label,
.mr-meta-grid label {
    display: grid;
    gap: 4px;
    font-weight: 700;
}
.mr-number-line {
    text-align: right;
    font-weight: 700;
}
.mr-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    margin-bottom: 14px;
}
.mr-meta-grid.static > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    border-bottom: 1px solid #9ca3af;
    min-height: 30px;
}
.mr-meta-grid.static span {
    font-weight: 700;
}
.mr-items {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.mr-items th,
.mr-items td {
    border: 1px solid #6b7280;
    padding: 7px;
    vertical-align: top;
}
.mr-items th {
    background: #f3f4f6;
    text-align: center;
}
.mr-items textarea,
.mr-items input {
    border: 0;
    padding: 3px;
}
.mr-signs {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 30px;
    margin-top: 28px;
}
.mr-source-picker {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.mr-source-picker select {
    min-width: min(420px, 100%);
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}
.saved-mr-document .mr-items td {
    min-height: 28px;
}
@media (max-width: 760px) {
    .mr-paper {
        padding: 16px;
    }
    .mr-head,
    .mr-meta-grid,
    .mr-signs {
        grid-template-columns: 1fr;
    }
    .mr-slip-title {
        justify-self: start;
    }
    .mr-items {
        min-width: 760px;
    }
}

/* Mobile-first M.R entry form. Print/PDF keeps the hardcopy .mr-paper layout. */
.mr-entry-page .po-page-content {
    max-width: 1120px;
    margin: 0 auto;
}

.mr-entry-shell {
    width: 100%;
}

.mr-entry-form {
    display: grid;
    gap: 18px;
    padding-bottom: 96px;
}

.mr-entry-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    padding: 20px;
}

.mr-entry-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.mr-entry-section-head h2 {
    margin: 3px 0 0;
    color: #102033;
    font-size: 22px;
    line-height: 1.15;
}

.mr-entry-number {
    flex: 0 0 auto;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 13px;
}

.mr-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mr-field-grid label,
.material-item-card label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.mr-field-grid label.wide,
.material-item-card label.wide {
    grid-column: 1 / -1;
}

.mr-field-grid span,
.material-item-card label span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.mr-entry-form input,
.mr-entry-form textarea,
.mr-entry-form select {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font: inherit;
    min-height: 44px;
    padding: 10px 12px;
}

.mr-entry-form input[readonly] {
    background: #f8fafc;
    color: #334155;
}

.mr-entry-form textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.45;
}

.material-item-list {
    display: grid;
    gap: 14px;
}

.material-item-card {
    display: grid;
    gap: 13px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #f8fafc;
    padding: 15px;
}

.material-item-card.is-hidden {
    display: none;
}

.material-item-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.material-item-card-head strong {
    color: #102033;
    font-size: 15px;
}

.material-item-card .clear-mr-item {
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    padding: 4px 0;
}

.mr-item-inline-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) minmax(90px, .8fr) minmax(90px, .8fr);
    gap: 12px;
}

.mr-checker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.mr-checker-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #f8fafc;
    padding: 13px;
    cursor: pointer;
}

.mr-checker-card input {
    width: 19px;
    min-width: 19px;
    height: 19px;
    min-height: 19px;
}

.mr-checker-card span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mr-checker-card b,
.mr-checker-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-checker-card b {
    color: #102033;
}

.mr-checker-card small {
    color: #64748b;
}

.mr-mobile-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
    backdrop-filter: blur(10px);
}

.mr-mobile-save-bar .btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 760px) {
    .mr-entry-page .page-content {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 18px;
    }

    .mr-entry-command .po-command-actions {
        display: none;
    }

    .mr-entry-form {
        gap: 13px;
        padding-bottom: 0;
    }

    .mr-entry-section {
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
    }

    .mr-entry-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .mr-entry-section-head h2 {
        font-size: 19px;
    }

    .mr-entry-number {
        width: fit-content;
    }

    .mr-field-grid,
    .mr-item-inline-grid,
    .mr-checker-grid {
        grid-template-columns: 1fr;
    }

    .material-item-card {
        padding: 13px;
    }

    .mr-mobile-save-bar {
        display: grid;
    }
}

/* Modern mobile app GUI refresh */
:root {
    --app-bg: #f6f7f3;
    --app-panel: #ffffff;
    --app-panel-soft: #f9faf7;
    --app-ink: #18202a;
    --app-muted: #64706f;
    --app-line: #e3e6df;
    --app-accent: #127c76;
    --app-accent-strong: #0f6863;
    --app-blue: #3165d4;
    --app-coral: #d7654f;
    --app-gold: #b98522;
    --app-green: #17865a;
    --app-radius: 10px;
    --app-radius-lg: 14px;
    --app-shadow: 0 14px 34px rgba(32, 39, 44, .08);
}

body:not(.print-view-body) {
    color: var(--app-ink);
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0) 280px),
        var(--app-bg);
}

body:not(.print-view-body) .app-layout {
    min-height: 100vh;
    background: transparent;
}

body:not(.print-view-body) .app-main {
    background: transparent;
}

body:not(.print-view-body) .page-content,
body:not(.print-view-body) .reviewer-page-content {
    padding-top: 18px;
}

body:not(.print-view-body) .sidebar {
    background: rgba(255,255,255,.92);
    border-right: 1px solid var(--app-line);
    box-shadow: 12px 0 36px rgba(32, 39, 44, .06);
    backdrop-filter: blur(18px);
}

body:not(.print-view-body) .sidebar-brand,
body:not(.print-view-body) .sidebar-user,
body:not(.print-view-body) .sidebar-live-status {
    background: var(--app-panel-soft);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
}

body:not(.print-view-body) .sidebar-brand strong,
body:not(.print-view-body) .sidebar-user strong {
    color: var(--app-ink);
}

body:not(.print-view-body) .sidebar-brand small,
body:not(.print-view-body) .sidebar-user small,
body:not(.print-view-body) .nav-section {
    color: var(--app-muted);
    letter-spacing: 0;
}

body:not(.print-view-body) .side-link,
body:not(.print-view-body) .sidebar-logout {
    min-height: 44px;
    color: #374151;
    border-radius: var(--app-radius);
    transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

body:not(.print-view-body) .side-link:hover,
body:not(.print-view-body) .sidebar-logout:hover {
    color: var(--app-ink);
    background: #f1f5f2;
    transform: translateY(-1px);
}

body:not(.print-view-body) .side-link.active {
    color: #fff;
    background: var(--app-accent);
    box-shadow: 0 10px 22px rgba(18, 124, 118, .22);
}

body:not(.print-view-body) .side-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(18, 124, 118, .1);
    color: var(--app-accent);
    font-weight: 900;
}

body:not(.print-view-body) .side-link.active .side-icon {
    background: rgba(255,255,255,.18);
    color: #fff;
}

body:not(.print-view-body) .page-header {
    background: rgba(255,255,255,.82);
    border: 1px solid var(--app-line);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 12px 32px rgba(32, 39, 44, .06);
    backdrop-filter: blur(18px);
}

body:not(.print-view-body) .page-header h1 {
    color: var(--app-ink);
    letter-spacing: 0;
}

body:not(.print-view-body) .eyebrow {
    color: var(--app-accent);
    letter-spacing: .08em;
}

body:not(.print-view-body) .profile-pill,
body:not(.print-view-body) .content-card,
body:not(.print-view-body) .po-command-card,
body:not(.print-view-body) .checker-help-card,
body:not(.print-view-body) .filter-card,
body:not(.print-view-body) .reviewer-filter-card,
body:not(.print-view-body) .notification-summary-card,
body:not(.print-view-body) .mr-entry-section,
body:not(.print-view-body) .mobile-app-card,
body:not(.print-view-body) .reviewer-phone-status,
body:not(.print-view-body) .reviewer-queue-card,
body:not(.print-view-body) .operations-filter,
body:not(.print-view-body) .backup-card {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
    background: rgba(255,255,255,.94);
    box-shadow: var(--app-shadow);
}

body:not(.print-view-body) .card-heading h2,
body:not(.print-view-body) .po-command-card h2,
body:not(.print-view-body) .checker-help-card b,
body:not(.print-view-body) .notification-summary-card h2,
body:not(.print-view-body) .mr-entry-section-head h2 {
    color: var(--app-ink);
    letter-spacing: 0;
}

body:not(.print-view-body) .btn,
body:not(.print-view-body) .navbtn,
body:not(.print-view-body) button.table-action,
body:not(.print-view-body) a.table-action {
    border-radius: var(--app-radius);
    min-height: 42px;
    letter-spacing: 0;
}

body:not(.print-view-body) .btn.primary,
body:not(.print-view-body) .primary {
    color: #fff;
    background: var(--app-accent);
    box-shadow: 0 10px 22px rgba(18, 124, 118, .22);
}

body:not(.print-view-body) .btn.primary:hover,
body:not(.print-view-body) .primary:hover {
    background: var(--app-accent-strong);
}

body:not(.print-view-body) .btn.secondary,
body:not(.print-view-body) .secondary {
    color: var(--app-ink);
    background: #f3f6f2;
    border: 1px solid var(--app-line);
    box-shadow: none;
}

body:not(.print-view-body) input:not([type="checkbox"]):not([type="radio"]),
body:not(.print-view-body) textarea,
body:not(.print-view-body) select {
    min-height: 44px;
    border: 1px solid #d8ded5;
    border-radius: var(--app-radius);
    background: #fff;
    color: var(--app-ink);
    box-shadow: none;
}

body:not(.print-view-body) input:focus,
body:not(.print-view-body) textarea:focus,
body:not(.print-view-body) select:focus {
    outline: 3px solid rgba(18, 124, 118, .16);
    border-color: var(--app-accent);
}

body:not(.print-view-body) .modern-table {
    border-collapse: separate;
    border-spacing: 0;
}

body:not(.print-view-body) .modern-table th {
    color: var(--app-muted);
    background: #f4f6f1;
    border-bottom: 1px solid var(--app-line);
    letter-spacing: .03em;
}

body:not(.print-view-body) .modern-table td {
    border-bottom: 1px solid #edf0ea;
}

body:not(.print-view-body) .modern-table tbody tr:hover {
    background: #fbfcf8;
}

body:not(.print-view-body) .workflow-badge,
body:not(.print-view-body) .status-badge,
body:not(.print-view-body) .delivery-status-badge,
body:not(.print-view-body) .decision-badge,
body:not(.print-view-body) .soft-badge,
body:not(.print-view-body) .po-number-badge {
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 850;
    letter-spacing: 0;
}

body:not(.print-view-body) .workflow-badge.approved,
body:not(.print-view-body) .status-badge.active,
body:not(.print-view-body) .delivery-status-badge.delivered {
    color: var(--app-green);
    background: #eaf7ef;
    border-color: #ccebd8;
}

body:not(.print-view-body) .workflow-badge.rejected,
body:not(.print-view-body) .workflow-badge.cancelled,
body:not(.print-view-body) .status-badge.inactive {
    color: #a33a2d;
    background: #fff0ed;
    border-color: #ffd2c9;
}

body:not(.print-view-body) .workflow-badge.pending,
body:not(.print-view-body) .workflow-badge.pending_review,
body:not(.print-view-body) .workflow-badge.partially_approved,
body:not(.print-view-body) .delivery-status-badge.pending {
    color: var(--app-gold);
    background: #fff7e5;
    border-color: #f3dfb1;
}

body:not(.print-view-body) .login-visual {
    background:
        linear-gradient(145deg, rgba(18, 124, 118, .94), rgba(49, 101, 212, .82)),
        url("../logo.png");
    background-size: cover;
    background-position: center;
}

body:not(.print-view-body) .login-card.modern,
body:not(.print-view-body) .system-message-card {
    border-radius: 18px;
    border: 1px solid var(--app-line);
    box-shadow: 0 22px 54px rgba(32, 39, 44, .14);
}

@media (max-width: 900px) {
    body:not(.print-view-body) {
        background: var(--app-bg);
    }

    body:not(.print-view-body) .mobile-sidebar-toggle,
    body:not(.print-view-body) .mobile-sidebar-overlay,
    body:not(.print-view-body) .mobile-sidebar-close,
    body:not(.print-view-body) .sidebar-brand,
    body:not(.print-view-body) .sidebar-user,
    body:not(.print-view-body) .sidebar-live-status,
    body:not(.print-view-body) .sidebar-logout,
    body:not(.print-view-body) .nav-section {
        display: none !important;
    }

    body:not(.print-view-body) .app-main,
    body:not(.print-view-body) .reviewer-portal-body .app-main {
        margin-left: 0;
        padding: 0 0 92px;
    }

    body:not(.print-view-body) .page-header {
        position: sticky;
        top: 0;
        z-index: 20;
        margin: 0;
        border-radius: 0 0 16px 16px;
        padding: 15px 14px;
    }

    body:not(.print-view-body) .page-header h1 {
        font-size: 22px;
        line-height: 1.12;
    }

    body:not(.print-view-body) .profile-pill {
        display: none;
    }

    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body) .reviewer-portal-body .sidebar {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        top: auto;
        z-index: 60;
        display: block;
        width: auto;
        height: 72px;
        padding: 8px;
        transform: none !important;
        border: 1px solid rgba(216, 222, 213, .92);
        border-radius: 18px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 16px 38px rgba(32, 39, 44, .18);
        backdrop-filter: blur(18px);
    }

    body:not(.print-view-body) .sidebar-nav,
    body:not(.print-view-body) .reviewer-portal-body .sidebar-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: 100%;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    body:not(.print-view-body) .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    body:not(.print-view-body) .side-link {
        flex: 0 0 auto;
        min-width: 72px;
        height: 56px;
        padding: 7px 9px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        border-radius: 14px;
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
    }

    body:not(.print-view-body) .side-link span:last-child,
    body:not(.print-view-body) .side-link-label {
        max-width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.print-view-body) .side-icon {
        width: 26px;
        height: 26px;
        border-radius: 9px;
        font-size: 12px;
    }

    body:not(.print-view-body) .notification-count {
        position: absolute;
        top: 5px;
        right: 9px;
    }

    body:not(.print-view-body) .content-card,
    body:not(.print-view-body) .po-command-card,
    body:not(.print-view-body) .checker-help-card,
    body:not(.print-view-body) .filter-card,
    body:not(.print-view-body) .reviewer-filter-card,
    body:not(.print-view-body) .notification-summary-card,
    body:not(.print-view-body) .mr-entry-section {
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(32, 39, 44, .07);
    }
}

@media (max-width: 700px) {
    body:not(.print-view-body) .table-wrap {
        overflow: visible;
    }

    body:not(.print-view-body) .modern-table,
    body:not(.print-view-body) .modern-table thead,
    body:not(.print-view-body) .modern-table tbody,
    body:not(.print-view-body) .modern-table th,
    body:not(.print-view-body) .modern-table td,
    body:not(.print-view-body) .modern-table tr {
        display: block;
        width: 100%;
    }

    body:not(.print-view-body) .modern-table thead {
        display: none;
    }

    body:not(.print-view-body) .modern-table tbody {
        display: grid;
        gap: 10px;
    }

    body:not(.print-view-body) .modern-table tbody tr {
        border: 1px solid var(--app-line);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(32, 39, 44, .06);
        overflow: hidden;
    }

    body:not(.print-view-body) .modern-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 42px;
        border: 0;
        border-bottom: 1px solid #eef1ec;
        padding: 10px 12px;
        text-align: right;
    }

    body:not(.print-view-body) .modern-table td:last-child {
        border-bottom: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    body:not(.print-view-body) .modern-table td:first-child {
        justify-content: flex-start;
        text-align: left;
        background: #f8faf7;
        font-weight: 850;
    }

    body:not(.print-view-body) .modern-table td .table-action {
        min-height: 36px;
        padding: 8px 10px;
        border-radius: 10px;
        background: #f2f6f2;
        color: var(--app-accent);
    }

    body:not(.print-view-body) .header-tools,
    body:not(.print-view-body) .po-command-actions,
    body:not(.print-view-body) .notification-heading-actions,
    body:not(.print-view-body) .reviewer-toolbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body:not(.print-view-body) .header-tools .btn,
    body:not(.print-view-body) .po-command-actions .btn,
    body:not(.print-view-body) .notification-heading-actions .btn,
    body:not(.print-view-body) .reviewer-toolbar-actions .btn {
        width: 100%;
    }
}

/* Colorful app shell correction: dark drawer, real sidebar open/close, stronger modern contrast. */
:root {
    --drawer-bg: #111827;
    --drawer-bg-2: #182332;
    --drawer-line: rgba(255,255,255,.11);
    --drawer-muted: #94a3b8;
    --role-accent: #14b8a6;
    --role-accent-2: #2dd4bf;
    --role-soft: #e8fbf7;
    --role-ring: rgba(20,184,166,.24);
}

body:not(.print-view-body):has(.sidebar.app-role-po_user) {
    --role-accent: #2563eb;
    --role-accent-2: #38bdf8;
    --role-soft: #edf5ff;
    --role-ring: rgba(37,99,235,.24);
}

body:not(.print-view-body):has(.sidebar.app-role-reviewer),
body:not(.print-view-body):has(.sidebar.app-role-president) {
    --role-accent: #d97706;
    --role-accent-2: #f59e0b;
    --role-soft: #fff7e6;
    --role-ring: rgba(217,119,6,.24);
}

body:not(.print-view-body):has(.sidebar.app-role-accounting) {
    --role-accent: #16a34a;
    --role-accent-2: #22c55e;
    --role-soft: #ebf9ef;
    --role-ring: rgba(22,163,74,.24);
}

body:not(.print-view-body):has(.sidebar.app-role-it) {
    --role-accent: #64748b;
    --role-accent-2: #94a3b8;
    --role-soft: #f1f5f9;
    --role-ring: rgba(100,116,139,.24);
}

body:not(.print-view-body) {
    background:
        linear-gradient(135deg, rgba(20,184,166,.12), rgba(37,99,235,.09) 42%, rgba(245,158,11,.08)),
        #eef2f6;
}

body:not(.print-view-body) .sidebar,
body:not(.print-view-body) .reviewer-portal-body .sidebar {
    width: 300px;
    color: #e5edf6;
    background:
        radial-gradient(circle at 12% 7%, color-mix(in srgb, var(--role-accent) 42%, transparent), transparent 30%),
        linear-gradient(180deg, var(--drawer-bg-2), var(--drawer-bg) 62%, #0b111c);
    border-right: 1px solid var(--drawer-line);
    box-shadow: 16px 0 42px rgba(2, 8, 23, .24);
}

body:not(.print-view-body) .sidebar-brand,
body:not(.print-view-body) .sidebar-user,
body:not(.print-view-body) .sidebar-live-status,
body:not(.print-view-body) .sidebar-logout {
    background: rgba(255,255,255,.065);
    border: 1px solid var(--drawer-line);
    color: #fff;
}

body:not(.print-view-body) .sidebar-brand {
    padding: 10px;
}

body:not(.print-view-body) .sidebar-brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fff;
}

body:not(.print-view-body) .sidebar-brand strong,
body:not(.print-view-body) .sidebar-user strong {
    color: #fff;
}

body:not(.print-view-body) .sidebar-brand small,
body:not(.print-view-body) .sidebar-user small,
body:not(.print-view-body) .sidebar-live-status,
body:not(.print-view-body) .nav-section {
    color: var(--drawer-muted);
}

body:not(.print-view-body) .desktop-sidebar-toggle {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border: 1px solid var(--drawer-line);
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.08);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

body:not(.print-view-body) .desktop-sidebar-toggle:hover {
    background: rgba(255,255,255,.15);
}

body:not(.print-view-body) .side-link,
body:not(.print-view-body) .sidebar-logout {
    color: #d6e0eb;
    border: 1px solid transparent;
}

body:not(.print-view-body) .side-link:hover,
body:not(.print-view-body) .sidebar-logout:hover {
    color: #fff;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.08);
}

body:not(.print-view-body) .side-link.active {
    color: #07111f;
    background: linear-gradient(135deg, var(--role-accent-2), var(--role-accent));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--role-accent) 34%, transparent);
}

body:not(.print-view-body) .side-icon {
    background: rgba(255,255,255,.09);
    color: var(--role-accent-2);
}

body:not(.print-view-body) .side-link.active .side-icon {
    background: rgba(255,255,255,.28);
    color: #07111f;
}

body:not(.print-view-body) .user-avatar,
body:not(.print-view-body) .profile-avatar {
    background: linear-gradient(135deg, var(--role-accent-2), var(--role-accent));
    color: #07111f;
}

body:not(.print-view-body) .app-main {
    margin-left: 300px;
    transition: margin-left .2s ease;
}

body:not(.print-view-body).sidebar-collapsed .sidebar {
    width: 88px;
    padding-left: 14px;
    padding-right: 14px;
}

body:not(.print-view-body).sidebar-collapsed .app-main {
    margin-left: 88px;
}

body:not(.print-view-body).sidebar-collapsed .sidebar-brand > div,
body:not(.print-view-body).sidebar-collapsed .sidebar-user > div,
body:not(.print-view-body).sidebar-collapsed .nav-section,
body:not(.print-view-body).sidebar-collapsed .side-link span:last-child,
body:not(.print-view-body).sidebar-collapsed .side-link-label,
body:not(.print-view-body).sidebar-collapsed .sidebar-live-status span,
body:not(.print-view-body).sidebar-collapsed .sidebar-logout span:last-child {
    display: none;
}

body:not(.print-view-body).sidebar-collapsed .sidebar-brand,
body:not(.print-view-body).sidebar-collapsed .sidebar-user,
body:not(.print-view-body).sidebar-collapsed .side-link,
body:not(.print-view-body).sidebar-collapsed .sidebar-logout {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body:not(.print-view-body).sidebar-collapsed .desktop-sidebar-toggle {
    margin-left: 0;
}

body:not(.print-view-body) .page-header {
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(255,255,255,.24), transparent 26%),
        linear-gradient(135deg, color-mix(in srgb, var(--role-accent) 84%, #0f172a), #111827);
    border: 0;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

body:not(.print-view-body) .page-header h1,
body:not(.print-view-body) .page-header .eyebrow,
body:not(.print-view-body) .page-header .profile-pill strong,
body:not(.print-view-body) .page-header .profile-pill small {
    color: #fff;
}

body:not(.print-view-body) .page-header .profile-pill {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}

body:not(.print-view-body) .content-card,
body:not(.print-view-body) .po-command-card,
body:not(.print-view-body) .checker-help-card,
body:not(.print-view-body) .filter-card,
body:not(.print-view-body) .reviewer-filter-card,
body:not(.print-view-body) .notification-summary-card,
body:not(.print-view-body) .mr-entry-section,
body:not(.print-view-body) .mobile-app-card,
body:not(.print-view-body) .reviewer-phone-status,
body:not(.print-view-body) .reviewer-queue-card,
body:not(.print-view-body) .operations-filter,
body:not(.print-view-body) .backup-card {
    background: rgba(255,255,255,.88);
    border-color: rgba(226,232,240,.92);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
}

body:not(.print-view-body) .content-card::before,
body:not(.print-view-body) .mr-entry-section::before,
body:not(.print-view-body) .po-command-card::before {
    content: "";
    display: block;
    height: 3px;
    margin: -20px -20px 17px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--role-accent), var(--role-accent-2));
}

body:not(.print-view-body) .btn.primary,
body:not(.print-view-body) .primary {
    background: linear-gradient(135deg, var(--role-accent), var(--role-accent-2));
    box-shadow: 0 12px 24px var(--role-ring);
}

body:not(.print-view-body) .btn.secondary,
body:not(.print-view-body) .secondary {
    background: var(--role-soft);
    color: color-mix(in srgb, var(--role-accent) 72%, #111827);
    border-color: color-mix(in srgb, var(--role-accent) 24%, #d9e2ec);
}

body:not(.print-view-body) input:focus,
body:not(.print-view-body) textarea:focus,
body:not(.print-view-body) select:focus {
    outline-color: var(--role-ring);
    border-color: var(--role-accent);
}

body:not(.print-view-body) .eyebrow,
body:not(.print-view-body) .po-number-badge,
body:not(.print-view-body) .table-action {
    color: var(--role-accent);
}

@media (max-width: 900px) {
    body:not(.print-view-body) .desktop-sidebar-toggle {
        display: none !important;
    }

    body:not(.print-view-body) .mobile-sidebar-toggle {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        z-index: 980;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-width: 108px;
        min-height: 48px;
        padding: 0 15px;
        color: #07111f;
        border: 0;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--role-accent-2), var(--role-accent));
        box-shadow: 0 12px 28px var(--role-ring);
        font-weight: 900;
    }

    body:not(.print-view-body).sidebar-open .mobile-sidebar-toggle {
        opacity: 0;
        pointer-events: none;
    }

    body:not(.print-view-body) .mobile-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 990;
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgba(3, 7, 18, .66);
        backdrop-filter: blur(4px);
        transition: opacity .22s ease, visibility .22s ease;
    }

    body:not(.print-view-body).sidebar-open .mobile-sidebar-overlay {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    body:not(.print-view-body) .mobile-sidebar-close {
        display: grid !important;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin-left: auto;
        place-items: center;
        color: #fff;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 14px;
        background: rgba(255,255,255,.09);
        font: 400 30px/1 Arial, sans-serif;
    }

    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body) .reviewer-portal-body .sidebar,
    body:not(.print-view-body).sidebar-collapsed .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1000 !important;
        width: min(88vw, 350px) !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        padding: calc(15px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        transform: translate3d(-104%, 0, 0) !important;
        transition: transform .24s cubic-bezier(.2, .75, .25, 1) !important;
        border-radius: 0 24px 24px 0;
        box-shadow: 22px 0 54px rgba(3, 7, 18, .42) !important;
    }

    body:not(.print-view-body).sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    body:not(.print-view-body) .sidebar-brand,
    body:not(.print-view-body) .sidebar-user,
    body:not(.print-view-body) .sidebar-live-status,
    body:not(.print-view-body) .sidebar-logout,
    body:not(.print-view-body) .nav-section {
        display: flex !important;
    }

    body:not(.print-view-body) .nav-section {
        display: block !important;
    }

    body:not(.print-view-body) .sidebar-nav,
    body:not(.print-view-body) .reviewer-portal-body .sidebar-nav {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 4px 3px 12px 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    body:not(.print-view-body) .side-link,
    body:not(.print-view-body) .sidebar-logout {
        width: 100%;
        min-height: 56px !important;
        padding: 0 16px !important;
        flex-direction: row;
        justify-content: flex-start;
        gap: 13px;
        font-size: 15px !important;
        text-align: left;
    }

    body:not(.print-view-body) .side-link span:last-child,
    body:not(.print-view-body) .side-link-label {
        display: inline;
        max-width: none;
        white-space: normal;
    }

    body:not(.print-view-body) .app-main,
    body:not(.print-view-body).sidebar-collapsed .app-main,
    body:not(.print-view-body) .reviewer-portal-body .app-main {
        margin-left: 0 !important;
        padding-bottom: 0;
    }

    body:not(.print-view-body) .page-header {
        min-height: 116px !important;
        padding: calc(70px + env(safe-area-inset-top)) 16px 18px !important;
        border-radius: 0 0 24px 24px;
    }

    body:not(.print-view-body) .profile-pill {
        display: none !important;
    }
}

/* Navy mobile app shell v3: brand color, desktop collapse, animated bottom sheet on phones. */
:root {
    --brand-navy: #071a33;
    --brand-navy-2: #0d2b55;
    --brand-navy-3: #123d73;
    --brand-sky: #4ea8ff;
    --brand-ice: #eef6ff;
    --brand-line: #d8e3f0;
    --brand-shadow: 0 18px 44px rgba(7, 26, 51, .16);
    --drawer-bg: var(--brand-navy);
    --drawer-bg-2: var(--brand-navy-2);
    --role-accent: var(--brand-navy-3);
    --role-accent-2: var(--brand-sky);
    --role-soft: var(--brand-ice);
    --role-ring: rgba(18, 61, 115, .26);
}

body:not(.print-view-body),
body:not(.print-view-body):has(.sidebar.app-role-mr_user),
body:not(.print-view-body):has(.sidebar.app-role-po_user),
body:not(.print-view-body):has(.sidebar.app-role-reviewer),
body:not(.print-view-body):has(.sidebar.app-role-president),
body:not(.print-view-body):has(.sidebar.app-role-accounting),
body:not(.print-view-body):has(.sidebar.app-role-it) {
    --role-accent: var(--brand-navy-3);
    --role-accent-2: var(--brand-sky);
    --role-soft: var(--brand-ice);
    --role-ring: rgba(18, 61, 115, .26);
}

body:not(.print-view-body) {
    background:
        linear-gradient(145deg, rgba(7,26,51,.08), rgba(78,168,255,.11) 42%, rgba(255,255,255,.28)),
        #f3f7fb;
}

body:not(.print-view-body) .sidebar,
body:not(.print-view-body) .reviewer-portal-body .sidebar {
    background:
        radial-gradient(circle at 18% 8%, rgba(78,168,255,.24), transparent 31%),
        radial-gradient(circle at 88% 80%, rgba(33,95,168,.22), transparent 34%),
        linear-gradient(180deg, var(--brand-navy-2), var(--brand-navy) 68%, #041024);
    border-right-color: rgba(255,255,255,.1);
}

body:not(.print-view-body) .page-header {
    background:
        radial-gradient(circle at 86% 12%, rgba(78,168,255,.30), transparent 28%),
        linear-gradient(135deg, var(--brand-navy-3), var(--brand-navy));
}

body:not(.print-view-body) .btn.primary,
body:not(.print-view-body) .primary,
body:not(.print-view-body) .side-link.active {
    background: linear-gradient(135deg, var(--brand-sky), #1f69bd 48%, var(--brand-navy-3));
}

body:not(.print-view-body) .side-link.active {
    color: #fff;
}

body:not(.print-view-body) .side-link.active .side-icon {
    color: #fff;
}

body:not(.print-view-body) .desktop-sidebar-toggle {
    font-size: 20px;
    font-weight: 900;
}

@keyframes navyBottomSheetIn {
    from {
        transform: translate3d(0, calc(100% + 34px), 0);
        opacity: .75;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes navyMenuButtonLift {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-2px);
    }
}

@media (max-width: 900px) {
    body:not(.print-view-body) {
        background:
            linear-gradient(180deg, rgba(7,26,51,.08), rgba(78,168,255,.10) 320px, rgba(243,247,251,0)),
            #f3f7fb;
    }

    body:not(.print-view-body) .mobile-sidebar-toggle {
        top: auto;
        left: 50%;
        right: auto;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: 980;
        min-width: 132px;
        min-height: 54px;
        padding: 0 19px;
        color: #fff;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        background:
            linear-gradient(135deg, var(--brand-sky), #245fba 48%, var(--brand-navy-2));
        box-shadow: 0 18px 36px rgba(7,26,51,.30);
        animation: navyMenuButtonLift 2.8s ease-in-out infinite;
    }

    body:not(.print-view-body) .mobile-sidebar-toggle:active {
        transform: translateX(-50%) scale(.97);
    }

    body:not(.print-view-body).sidebar-open .mobile-sidebar-toggle {
        opacity: 0;
        pointer-events: none;
        animation: none;
    }

    body:not(.print-view-body) .mobile-sidebar-overlay {
        background:
            linear-gradient(180deg, rgba(7,26,51,.38), rgba(7,26,51,.78));
        backdrop-filter: blur(5px);
    }

    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body) .reviewer-portal-body .sidebar,
    body:not(.print-view-body).sidebar-collapsed .sidebar {
        inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px !important;
        width: auto !important;
        max-width: 540px !important;
        height: min(78dvh, 640px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 14px 14px 16px !important;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 28px !important;
        transform: translate3d(0, calc(100% + 34px), 0) !important;
        box-shadow: 0 -24px 56px rgba(7,26,51,.36) !important;
        overflow: hidden !important;
    }

    body:not(.print-view-body).sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
        animation: navyBottomSheetIn .26s cubic-bezier(.2, .75, .25, 1);
    }

    body:not(.print-view-body) .sidebar::before {
        content: "";
        width: 44px;
        height: 5px;
        margin: 0 auto 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.32);
    }

    body:not(.print-view-body) .sidebar-brand {
        padding: 8px 8px 12px !important;
        border-radius: 20px;
    }

    body:not(.print-view-body) .sidebar-brand-logo {
        width: 42px;
        height: 42px;
    }

    body:not(.print-view-body) .sidebar-user {
        margin: 10px 0 8px !important;
        border-radius: 20px !important;
    }

    body:not(.print-view-body) .sidebar-nav,
    body:not(.print-view-body) .reviewer-portal-body .sidebar-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 9px;
        padding: 8px 2px 12px !important;
        overflow-y: auto !important;
    }

    body:not(.print-view-body) .nav-section {
        grid-column: 1 / -1;
        margin: 12px 4px 1px !important;
        color: rgba(226,238,255,.70);
        font-size: 10px;
    }

    body:not(.print-view-body) .side-link,
    body:not(.print-view-body) .sidebar-logout {
        min-height: 68px !important;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.075);
        border-color: rgba(255,255,255,.09);
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        text-align: center;
        font-size: 12px !important;
    }

    body:not(.print-view-body) .side-link span:last-child,
    body:not(.print-view-body) .side-link-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.print-view-body) .side-icon {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        font-size: 15px;
        background: rgba(78,168,255,.16);
        color: #b9dcff;
    }

    body:not(.print-view-body) .side-link.active {
        box-shadow: 0 14px 26px rgba(78,168,255,.18);
    }

    body:not(.print-view-body) .sidebar-live-status,
    body:not(.print-view-body) .sidebar-logout {
        display: none !important;
    }

    body:not(.print-view-body) .app-main,
    body:not(.print-view-body).sidebar-collapsed .app-main,
    body:not(.print-view-body) .reviewer-portal-body .app-main {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    body:not(.print-view-body) .page-header {
        min-height: 104px !important;
        padding: calc(16px + env(safe-area-inset-top)) 16px 18px !important;
        border-radius: 0 0 26px 26px;
    }

    body:not(.print-view-body) .page-header h1 {
        font-size: clamp(26px, 7vw, 36px);
    }
}

@media (max-width: 420px) {
    body:not(.print-view-body) .sidebar-nav,
    body:not(.print-view-body) .reviewer-portal-body .sidebar-nav {
        grid-template-columns: 1fr 1fr;
    }

    body:not(.print-view-body) .side-link {
        min-height: 64px !important;
    }
}

/* Mobile bottom navigation v4: fixed app tabs with the full menu in a bottom sheet. */
.mobile-app-nav {
    display: none;
}

@keyframes mobileNavDockIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mobileMoreSheetIn {
    from {
        opacity: .72;
        transform: translate3d(0, calc(100% + 40px), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 900px) {
    body:not(.print-view-body) .mobile-app-nav {
        position: fixed;
        z-index: 985;
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(var(--mobile-tab-count), minmax(0, 1fr));
        align-items: stretch;
        gap: 4px;
        min-height: 78px;
        padding: 6px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 22px;
        background: rgba(7,26,51,.97);
        box-shadow: 0 20px 48px rgba(7,26,51,.34), 0 3px 10px rgba(7,26,51,.18);
        backdrop-filter: blur(18px);
        animation: mobileNavDockIn .28s cubic-bezier(.2,.75,.25,1) both;
        transition: opacity .2s ease, transform .24s cubic-bezier(.2,.75,.25,1);
    }

    body:not(.print-view-body) .mobile-app-tab {
        position: relative;
        min-width: 0;
        height: 66px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        padding: 6px 3px;
        color: #bfd0e5;
        border: 0;
        border-radius: 16px;
        background: transparent;
        box-shadow: none;
        text-align: center;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
        transition: color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
        -webkit-tap-highlight-color: transparent;
    }

    body:not(.print-view-body) .mobile-app-tab:active {
        transform: scale(.94);
    }

    body:not(.print-view-body) .mobile-app-tab.active {
        color: var(--brand-navy);
        background: #fff;
        box-shadow: 0 8px 20px rgba(2,12,27,.24);
        transform: translateY(-2px);
    }

    body:not(.print-view-body) .mobile-app-tab-icon {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        flex: 0 0 29px;
        color: inherit;
        border-radius: 9px;
        background: rgba(255,255,255,.09);
        font-size: 11px;
        font-weight: 950;
        line-height: 1;
    }

    body:not(.print-view-body) .mobile-app-tab.active .mobile-app-tab-icon {
        color: #fff;
        background: #2777cb;
        box-shadow: 0 5px 12px rgba(39,119,203,.27);
    }

    body:not(.print-view-body) .mobile-app-tab-label {
        width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.print-view-body) .mobile-app-tab-badge {
        position: absolute;
        top: 4px;
        left: calc(50% + 7px);
        min-width: 17px;
        height: 17px;
        display: grid;
        place-items: center;
        padding: 0 4px;
        color: #fff;
        border: 2px solid var(--brand-navy);
        border-radius: 999px;
        background: #dc3545;
        font-size: 8px;
        font-weight: 950;
        line-height: 1;
    }

    body:not(.print-view-body) .mobile-app-nav .mobile-sidebar-toggle.mobile-app-more {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 66px !important;
        min-height: 66px !important;
        max-height: 66px !important;
        margin: 0 !important;
        padding: 6px 3px !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1;
        transform: none !important;
        animation: none !important;
    }

    body:not(.print-view-body) .mobile-app-nav .mobile-sidebar-toggle.mobile-app-more.active {
        color: var(--brand-navy);
        background: #fff !important;
        box-shadow: 0 8px 20px rgba(2,12,27,.24) !important;
        transform: translateY(-2px) !important;
    }

    body:not(.print-view-body).sidebar-open .mobile-app-nav {
        opacity: 0 !important;
        pointer-events: none;
        transform: translateY(calc(100% + 24px)) !important;
        animation: none !important;
    }

    body:not(.print-view-body).sidebar-open .mobile-sidebar-toggle {
        opacity: 1;
    }

    body:not(.print-view-body) .mobile-sidebar-overlay {
        z-index: 990 !important;
    }

    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body) .reviewer-portal-body .sidebar,
    body:not(.print-view-body).sidebar-collapsed .sidebar {
        inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        top: auto !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: 520px !important;
        height: min(82dvh, 660px) !important;
        min-height: 0 !important;
        max-height: 660px !important;
        margin: 0 auto !important;
        border-radius: 26px !important;
        transform: translate3d(0, calc(100% + 40px), 0) !important;
        transition: transform .26s cubic-bezier(.2,.75,.25,1), opacity .2s ease !important;
    }

    body:not(.print-view-body).sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
        animation: mobileMoreSheetIn .26s cubic-bezier(.2,.75,.25,1) both;
    }

    body:not(.print-view-body) .sidebar.app-role-mr_user {
        height: min(64dvh, 520px) !important;
    }

    body:not(.print-view-body) .sidebar.app-role-accounting {
        height: min(58dvh, 470px) !important;
    }

    body:not(.print-view-body) .sidebar .side-link-label {
        height: auto;
        min-height: 13px;
        flex: 0 0 auto;
        line-height: 1.15;
    }

    body:not(.print-view-body) .mobile-sidebar-close {
        width: 42px !important;
        height: 42px !important;
        display: grid !important;
        place-items: center;
        flex: 0 0 42px;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.13) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.10) !important;
        font-size: 25px !important;
    }

    body:not(.print-view-body) .app-main,
    body:not(.print-view-body).sidebar-collapsed .app-main,
    body:not(.print-view-body) .reviewer-portal-body .app-main {
        width: 100% !important;
        margin-left: 0 !important;
        padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    }

    body:not(.print-view-body) .page-content,
    body:not(.print-view-body) .reviewer-page-content {
        padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
    }

    body:not(.print-view-body) .page-header h1 {
        font-size: 28px;
        line-height: 1.12;
    }

    body:not(.print-view-body) .mr-mobile-save-bar,
    body:not(.print-view-body) .form-actions,
    body:not(.print-view-body) .mobile-review-action-bar {
        bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }

    body:not(.print-view-body) .mr-mobile-save-bar {
        z-index: 70;
        border-radius: 18px;
        box-shadow: 0 14px 34px rgba(7,26,51,.18);
    }

    body:not(.print-view-body) .mr-entry-command .po-command-actions {
        display: none !important;
    }

    body:not(.print-view-body) .live-notification-toast {
        bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    body:not(.print-view-body) .mobile-app-nav {
        left: max(6px, env(safe-area-inset-left));
        right: max(6px, env(safe-area-inset-right));
        gap: 2px;
        padding: 5px;
    }

    body:not(.print-view-body) .mobile-app-tab-label {
        font-size: 9px;
    }

    body:not(.print-view-body) .mobile-app-tab-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    body:not(.print-view-body) .page-header h1 {
        font-size: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.print-view-body) .mobile-app-nav,
    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body).sidebar-open .sidebar {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}
/* Critical email delivery console v22 */
.email-delivery-page {
    display: grid;
    gap: 18px;
}

.email-delivery-hero .hero-main {
    max-width: 720px;
}

.email-smtp-state {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 0 8px;
}

.email-smtp-state span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d97706;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14);
}

.email-smtp-state.ready span {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
}

.email-delivery-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.email-summary-tile {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 16px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #334155;
    background: #fff;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.email-summary-tile:hover,
.email-summary-tile.active {
    border-color: #2563eb;
    box-shadow: 0 8px 22px rgba(15, 45, 82, 0.1);
    transform: translateY(-1px);
}

.email-summary-tile strong {
    color: var(--brand-navy, #0f2d52);
    font-size: 22px;
}

.email-delivery-tools,
.email-delivery-table-card {
    min-width: 0;
}

.email-delivery-filter,
.email-delivery-actions,
.email-test-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.email-delivery-filter > label,
.email-test-form > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #34455d;
    font-size: 12px;
    font-weight: 800;
}

.email-delivery-filter {
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.email-delivery-filter label:first-child {
    flex: 1 1 280px;
}

.email-delivery-actions {
    justify-content: space-between;
    padding-top: 16px;
}

.email-test-form label {
    min-width: 260px;
}

.email-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #334155;
    background: #e2e8f0;
    font-size: 12px;
    font-weight: 800;
}

.email-status.sent { color: #166534; background: #dcfce7; }
.email-status.failed { color: #991b1b; background: #fee2e2; }
.email-status.pending { color: #92400e; background: #fef3c7; }
.email-status.processing { color: #1d4ed8; background: #dbeafe; }

.email-error-cell {
    max-width: 260px;
    color: #64748b;
    overflow-wrap: anywhere;
}

.email-row-action {
    width: 84px;
}

@media (max-width: 900px) {
    .email-delivery-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .email-summary-tile:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .email-delivery-page {
        gap: 14px;
    }

    .email-delivery-summary {
        gap: 8px;
    }

    .email-summary-tile {
        padding: 12px;
    }

    .email-delivery-filter,
    .email-delivery-actions,
    .email-test-form {
        align-items: stretch;
        flex-direction: column;
    }

    .email-test-form label,
    .email-delivery-filter label:first-child {
        flex: none;
        min-width: 0;
        width: 100%;
    }

    .email-delivery-tools .btn,
    .email-row-action .btn {
        width: 100%;
    }

    .email-delivery-table .email-error-cell,
    .email-delivery-table .email-row-action {
        width: auto;
        max-width: none;
    }
}

/* Slim desktop sidebar rail v23 */
@media (min-width: 901px) {
    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body) .reviewer-portal-body .sidebar {
        width: 300px !important;
        padding: 18px 14px 16px !important;
        overflow: visible;
        transition: width .22s ease, padding .22s ease, box-shadow .22s ease;
    }

    body:not(.print-view-body) .app-main,
    body:not(.print-view-body) .reviewer-portal-body .app-main {
        margin-left: 300px !important;
        transition: margin-left .22s ease;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar {
        width: 76px !important;
        padding: 14px 10px 12px !important;
        box-shadow: 10px 0 30px rgba(2, 12, 27, .22);
    }

    body:not(.print-view-body).sidebar-collapsed .app-main {
        margin-left: 76px !important;
    }

    body:not(.print-view-body) .sidebar-brand {
        min-height: 64px;
        flex: 0 0 64px;
        gap: 12px;
        padding: 8px !important;
        border-radius: 16px;
        transition: background .18s ease, border-color .18s ease, padding .22s ease;
    }

    body:not(.print-view-body) .sidebar-brand-logo {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 11px;
        transition: transform .18s ease;
    }

    body:not(.print-view-body) .desktop-sidebar-toggle,
    body:not(.print-view-body) .sidebar-brand-logo {
        box-sizing: border-box;
    }

    body:not(.print-view-body) .desktop-sidebar-toggle {
        position: absolute;
        top: 28px;
        right: -17px;
        z-index: 4;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 2px solid #dcecff;
        border-radius: 10px;
        color: #fff;
        background: #123d73;
        box-shadow: 0 8px 20px rgba(2, 12, 27, .28);
        transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    body:not(.print-view-body) .desktop-sidebar-toggle:hover {
        background: #1f69bd;
        box-shadow: 0 10px 24px rgba(2, 12, 27, .34);
        transform: translateY(-1px);
    }

    body:not(.print-view-body) .desktop-sidebar-toggle:focus-visible,
    body:not(.print-view-body).sidebar-collapsed .side-link:focus-visible,
    body:not(.print-view-body).sidebar-collapsed .sidebar-logout:focus-visible {
        outline: 3px solid rgba(78, 168, 255, .48);
        outline-offset: 3px;
    }

    body:not(.print-view-body) .desktop-sidebar-toggle-icon {
        width: 8px;
        height: 8px;
        display: block;
        border: solid currentColor;
        border-width: 0 2px 2px 0;
        transform: translateX(2px) rotate(135deg);
        transition: transform .2s ease;
    }

    body:not(.print-view-body) .desktop-sidebar-toggle[data-collapsed="true"] .desktop-sidebar-toggle-icon {
        transform: translateX(-2px) rotate(-45deg);
    }

    body:not(.print-view-body) .sidebar-user {
        min-height: 58px;
        margin: 10px 0 12px;
        padding: 9px 10px;
        border-radius: 15px;
        transition: width .22s ease, height .22s ease, margin .22s ease, padding .22s ease;
    }

    body:not(.print-view-body) .sidebar-user .user-avatar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 11px;
    }

    body:not(.print-view-body) .sidebar-nav,
    body:not(.print-view-body) .reviewer-portal-body .sidebar-nav {
        min-height: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: 2px 4px 8px 0;
        overflow-x: visible;
        overflow-y: auto;
    }

    body:not(.print-view-body) .nav-section {
        margin: 14px 10px 6px;
    }

    body:not(.print-view-body) .side-link,
    body:not(.print-view-body) .sidebar-logout {
        position: relative;
        flex: 0 0 auto;
        min-height: 46px;
        margin: 3px 0;
        padding: 0 12px;
        border-radius: 12px;
    }

    body:not(.print-view-body) .side-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
        font-size: 17px;
    }

    body:not(.print-view-body) .sidebar-live-status {
        flex: 0 0 auto;
        min-height: 40px;
        margin: 8px 0 7px;
        border-radius: 12px;
    }

    body:not(.print-view-body) .sidebar-logout {
        margin-top: 0;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-brand {
        width: 56px;
        min-height: 64px;
        margin: 0 auto;
        padding: 0 !important;
        justify-content: center;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-brand-logo {
        margin: 0;
        transform: none;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-user {
        width: 48px;
        height: 48px;
        min-height: 48px;
        margin: 8px auto 10px;
        padding: 0;
        justify-content: center;
        border-radius: 14px;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-user > .user-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        display: grid !important;
        border-radius: 10px;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-user > div:not(.user-avatar) {
        display: none !important;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-nav,
    body:not(.print-view-body).sidebar-collapsed .reviewer-portal-body .sidebar-nav {
        width: 56px;
        margin: 0 auto;
        padding: 2px 0 6px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-nav::-webkit-scrollbar,
    body:not(.print-view-body).sidebar-collapsed .reviewer-portal-body .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    body:not(.print-view-body).sidebar-collapsed .side-link {
        width: 48px;
        height: 48px;
        min-height: 48px;
        margin: 4px auto;
        padding: 0 !important;
        justify-content: center;
        gap: 0;
        border-radius: 14px;
        overflow: visible;
    }

    body:not(.print-view-body).sidebar-collapsed .side-link .side-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
    }

    body:not(.print-view-body).sidebar-collapsed .side-link.active::after {
        content: "";
        position: absolute;
        top: 12px;
        right: -10px;
        width: 4px;
        height: 24px;
        border-radius: 4px 0 0 4px;
        background: #80c5ff;
        box-shadow: 0 0 12px rgba(78, 168, 255, .72);
    }

    body:not(.print-view-body).sidebar-collapsed .notification-count:not([hidden]) {
        position: absolute;
        top: -2px;
        right: -4px;
        z-index: 2;
        display: inline-flex !important;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        align-items: center;
        justify-content: center;
        border: 2px solid #0d2b55;
        border-radius: 9px;
        font-size: 9px;
        line-height: 1;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-live-status {
        width: 48px;
        height: 34px;
        min-height: 34px;
        margin: 8px auto 7px;
        padding: 0;
        justify-content: center;
        border-radius: 12px;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-live-status i {
        width: 9px;
        height: 9px;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-logout {
        width: 48px;
        height: 48px;
        min-height: 48px;
        margin: 0 auto;
        padding: 0 !important;
        justify-content: center;
        border-radius: 14px;
    }

    body:not(.print-view-body).sidebar-collapsed .sidebar-logout .side-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body) .app-main,
    body:not(.print-view-body) .sidebar-brand,
    body:not(.print-view-body) .sidebar-brand-logo,
    body:not(.print-view-body) .sidebar-user,
    body:not(.print-view-body) .desktop-sidebar-toggle,
    body:not(.print-view-body) .desktop-sidebar-toggle-icon {
        transition-duration: .01ms !important;
    }
}

@media (max-width: 900px) {
    body:not(.print-view-body) .sidebar-nav .side-link > span:last-child,
    body:not(.print-view-body) .sidebar-nav .side-link-label {
        height: 15px !important;
        min-height: 15px !important;
        line-height: 15px !important;
    }
}


/* ========================================================================== */
/* MPRM SYSTEM UI REFRESH v26                                                 */
/* Metriccon Procurement & Requisition Management System                      */
/* ========================================================================== */

:root {
    --mprm-navy-950: #071525;
    --mprm-navy-900: #0b1f35;
    --mprm-navy-800: #123252;
    --mprm-blue: #2463eb;
    --mprm-cyan: #13a8c7;
    --mprm-teal: #0d9488;
    --mprm-bg: #f3f6fa;
    --mprm-surface: #ffffff;
    --mprm-line: #dfe7f0;
    --mprm-text: #172033;
    --mprm-muted: #67758a;
    --mprm-shadow: 0 18px 44px rgba(16, 38, 68, .10);
}

body:not(.print-view-body) {
    --app-bg: var(--mprm-bg);
    --app-panel: var(--mprm-surface);
    --app-ink: var(--mprm-text);
    --app-muted: var(--mprm-muted);
    --app-line: var(--mprm-line);
    background:
        radial-gradient(circle at 78% 0%, rgba(36, 99, 235, .07), transparent 30%),
        linear-gradient(180deg, #f8fafc 0, var(--mprm-bg) 380px);
}

/* Login: strong MPRM identity without knowing the role yet. */
.login-body {
    grid-template-columns: minmax(0, 1.22fr) minmax(420px, .78fr);
    background: var(--mprm-navy-950);
}

body:not(.print-view-body) .login-visual {
    min-height: 100vh;
    padding: clamp(34px, 5vw, 66px);
    background:
        radial-gradient(circle at 18% 18%, rgba(19, 168, 199, .24), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(36, 99, 235, .28), transparent 34%),
        linear-gradient(145deg, #071525 0%, #0b2540 50%, #103a5c 100%);
}

body:not(.print-view-body) .login-visual::before {
    width: 640px;
    height: 640px;
    right: -260px;
    top: -260px;
    border-color: rgba(255,255,255,.08);
}

body:not(.print-view-body) .login-visual::after {
    width: 420px;
    height: 420px;
    left: -160px;
    bottom: -180px;
    border-color: rgba(19,168,199,.18);
}

.mprm-login-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex: 0 0 58px;
    padding: 4px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.mprm-login-brand-copy strong {
    display: block;
    color: #fff;
    font-family: inherit;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.04em;
}

.mprm-login-brand-copy small {
    display: block;
    margin-top: 3px;
    color: #a9bad0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

body:not(.print-view-body) .login-copy {
    max-width: 800px;
    margin-top: clamp(80px, 14vh, 150px);
}

body:not(.print-view-body) .login-copy h1 {
    max-width: 790px;
    margin: 16px 0 20px;
    font-size: clamp(46px, 5.6vw, 78px);
    line-height: 1.00;
    letter-spacing: -.055em;
}

body:not(.print-view-body) .login-copy .mprm-login-system-name {
    max-width: 780px;
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
}

body:not(.print-view-body) .login-copy .mprm-login-description {
    max-width: 670px;
    margin: 14px 0 0;
    color: #b9c8d9;
    font-size: 16px;
    line-height: 1.65;
}

body:not(.print-view-body) .login-feature-row {
    margin-top: 27px;
}

body:not(.print-view-body) .login-feature-row span {
    padding: 8px 12px;
    border-color: rgba(174, 215, 255, .20);
    background: rgba(255,255,255,.065);
    color: #dce9f7;
    font-size: 12px;
    font-weight: 750;
}

.mprm-login-flow {
    position: absolute;
    left: clamp(34px, 5vw, 66px);
    bottom: clamp(28px, 5vh, 52px);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #b9c8d9;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.mprm-login-flow span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.mprm-login-flow i {
    width: 20px;
    height: 1px;
    background: rgba(19,168,199,.52);
}

body:not(.print-view-body) .login-panel {
    padding: clamp(24px, 4vw, 48px);
    background:
        radial-gradient(circle at 100% 0%, rgba(36,99,235,.06), transparent 32%),
        #f7f9fc;
}

body:not(.print-view-body) .login-card.modern {
    width: min(450px, 100%);
    padding: clamp(30px, 4vw, 44px);
    border: 1px solid #dce5ef;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(10, 35, 63, .14);
}

body:not(.print-view-body) .login-card h2 {
    margin-top: 10px;
    color: var(--mprm-text);
    font-size: 38px;
}

body:not(.print-view-body) .login-card > p {
    color: var(--mprm-muted);
}

body:not(.print-view-body) .input-with-icon {
    min-height: 50px;
    border-color: #d7e1ec;
    border-radius: 13px;
    background: #f8fafc;
}

body:not(.print-view-body) .input-with-icon:focus-within {
    border-color: var(--mprm-blue);
    box-shadow: 0 0 0 4px rgba(36,99,235,.10);
    background: #fff;
}

body:not(.print-view-body) .login-button {
    min-height: 50px;
    background: linear-gradient(135deg, var(--mprm-blue), var(--mprm-cyan));
    box-shadow: 0 14px 28px rgba(36,99,235,.22);
}

.mprm-login-card-footer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #e8edf3;
    color: #8a98a9;
    font-size: 10px;
    line-height: 1.35;
}

.mprm-login-card-footer b {
    color: var(--mprm-navy-800);
    font-size: 11px;
}

/* Sidebar: compact system name, stronger information hierarchy. */
body:not(.print-view-body) .sidebar,
body:not(.print-view-body) .reviewer-portal-body .sidebar {
    background:
        radial-gradient(circle at 14% 6%, rgba(19,168,199,.18), transparent 27%),
        linear-gradient(180deg, #0a1d31 0%, #081725 64%, #06111d 100%) !important;
    border-right-color: rgba(166, 194, 222, .12) !important;
    box-shadow: 18px 0 46px rgba(5, 18, 32, .22) !important;
}

body:not(.print-view-body) .sidebar-brand,
body:not(.print-view-body) .sidebar-user,
body:not(.print-view-body) .sidebar-live-status {
    border-color: rgba(184, 210, 237, .12) !important;
    background: rgba(255,255,255,.055) !important;
}

.sidebar-brand-copy {
    min-width: 0;
    flex: 1 1 auto;
}

body:not(.print-view-body) .sidebar-brand strong {
    color: #fff !important;
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -.045em;
}

body:not(.print-view-body) .sidebar-system-name {
    max-width: 170px;
    margin-top: 1px !important;
    color: #93a9c0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: .035em !important;
}

body:not(.print-view-body) .sidebar-brand-logo {
    border-radius: 13px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

.sidebar-user-copy {
    min-width: 0;
    flex: 1;
}

.mprm-role-chip {
    display: inline-flex;
    align-items: center;
    max-width: 174px;
    min-height: 22px;
    margin-top: 6px;
    padding: 3px 8px;
    overflow: hidden;
    border: 1px solid rgba(19,168,199,.22);
    border-radius: 999px;
    color: #aee9f5;
    background: rgba(19,168,199,.09);
    font-size: 9px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.print-view-body) .nav-section {
    margin-top: 17px !important;
    color: #7189a1 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
}

body:not(.print-view-body) .side-link,
body:not(.print-view-body) .sidebar-logout {
    color: #c7d5e3 !important;
}

body:not(.print-view-body) .side-link:hover,
body:not(.print-view-body) .sidebar-logout:hover {
    color: #fff !important;
    background: rgba(255,255,255,.075) !important;
}

body:not(.print-view-body) .side-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, #2463eb, #149bb8) !important;
    border-color: rgba(133, 206, 255, .22) !important;
    box-shadow: 0 13px 28px rgba(14, 92, 181, .28) !important;
}

body:not(.print-view-body) .side-icon {
    color: #70c5db !important;
    background: rgba(19,168,199,.09) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: -.02em;
}

body:not(.print-view-body) .side-link.active .side-icon {
    color: #fff !important;
    background: rgba(255,255,255,.16) !important;
}

body:not(.print-view-body) .desktop-sidebar-toggle {
    border-color: rgba(146,198,239,.22) !important;
    background: #103455 !important;
}

body:not(.print-view-body) .desktop-sidebar-toggle:hover {
    background: #18507e !important;
}

/* Main application chrome. */
body:not(.print-view-body) .page-header {
    min-height: 118px;
    border-radius: 0 0 24px 24px !important;
    background:
        radial-gradient(circle at 84% 5%, rgba(19,168,199,.24), transparent 24%),
        linear-gradient(135deg, #0b223a 0%, #133b62 58%, #155877 120%) !important;
    box-shadow: 0 18px 40px rgba(15, 42, 72, .15) !important;
}

body:not(.print-view-body) .page-header .eyebrow {
    color: #99deef !important;
}

body:not(.print-view-body) .page-header h1 {
    color: #fff !important;
    font-size: clamp(27px, 2.5vw, 38px);
    letter-spacing: -.035em !important;
}

body:not(.print-view-body) .page-content,
body:not(.print-view-body) .reviewer-page-content {
    max-width: 1680px;
    margin: 0 auto;
    padding-top: 24px;
}

body:not(.print-view-body) .content-card,
body:not(.print-view-body) .po-command-card,
body:not(.print-view-body) .filter-card,
body:not(.print-view-body) .reviewer-filter-card,
body:not(.print-view-body) .mr-entry-section,
body:not(.print-view-body) .operations-filter,
body:not(.print-view-body) .backup-card {
    border-color: #dfe7f0 !important;
    border-radius: 17px !important;
    box-shadow: var(--mprm-shadow) !important;
}

body:not(.print-view-body) .card-heading {
    border-bottom-color: #e8edf3;
}

body:not(.print-view-body) .btn.primary,
body:not(.print-view-body) .primary {
    background: linear-gradient(135deg, #2463eb, #159bb9) !important;
    box-shadow: 0 11px 24px rgba(36,99,235,.20) !important;
}

body:not(.print-view-body) .btn.primary:hover,
body:not(.print-view-body) .primary:hover {
    background: linear-gradient(135deg, #1d55cf, #11859f) !important;
}

body:not(.print-view-body) .modern-table th {
    color: #5c6b80 !important;
    background: #f4f7fa !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .045em !important;
    text-transform: uppercase;
}

body:not(.print-view-body) .modern-table tbody tr:hover {
    background: #f8fbfe !important;
}

/* Purchasing dashboard now communicates the whole MPRM flow. */
body:not(.print-view-body) .dashboard-hero {
    overflow: hidden;
    border: 1px solid rgba(125, 188, 223, .18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 82% 20%, rgba(29, 158, 190, .30), transparent 26%),
        linear-gradient(135deg, #0a2340, #164c73 68%, #167f8b 130%);
    box-shadow: 0 22px 52px rgba(13, 48, 78, .17);
}

body:not(.print-view-body) .dashboard-hero .hero-main h2 {
    letter-spacing: -.045em;
}

.mprm-flow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 22px 0 0;
}

.mprm-flow-row span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #e7f7fb;
    background: rgba(255,255,255,.08);
    font-size: 11px;
    font-weight: 850;
}

.mprm-flow-row b {
    color: #7dd3e6;
    font-size: 13px;
}

body:not(.print-view-body) .stats-grid .stat-card {
    border: 1px solid #dfe7f0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16,38,68,.08);
}

body:not(.print-view-body) .stats-grid .stat-icon {
    background: #eef6ff;
    color: #2463eb;
}

/* Mobile uses MPRM as the product label while keeping role navigation concise. */
@media (max-width: 900px) {
    .login-body {
        display: block;
        min-height: 100vh;
        background: #f5f8fc;
    }

    body:not(.print-view-body) .login-visual {
        display: none;
    }

    body:not(.print-view-body) .login-panel {
        min-height: 100vh;
        padding: 24px 16px;
        align-items: center;
    }

    body:not(.print-view-body) .login-card.modern {
        padding: 28px 22px;
        border-radius: 22px;
    }

    body:not(.print-view-body) .mobile-login-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 26px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e8edf3;
    }

    body:not(.print-view-body) .mobile-login-brand img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        padding: 3px;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(20,49,80,.12);
    }

    body:not(.print-view-body) .mobile-login-brand strong {
        display: block;
        color: #0d2946;
        font-size: 24px;
        font-weight: 950;
        letter-spacing: -.04em;
    }

    body:not(.print-view-body) .mobile-login-brand small {
        display: block;
        margin-top: 1px;
        color: #75859a;
        font-size: 10px;
        font-weight: 800;
    }

    body:not(.print-view-body) .page-header {
        min-height: 82px;
        padding: 15px 16px !important;
        border-radius: 0 0 18px 18px !important;
    }

    body:not(.print-view-body) .page-header .eyebrow {
        font-size: 9px;
    }

    body:not(.print-view-body) .page-header h1 {
        font-size: 23px !important;
    }

    body:not(.print-view-body) .page-content,
    body:not(.print-view-body) .reviewer-page-content {
        padding: 16px 12px 104px;
    }

    body:not(.print-view-body) .mobile-app-nav {
        border-color: rgba(188, 207, 226, .88) !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 18px 46px rgba(15,37,61,.20) !important;
    }

    body:not(.print-view-body) .mobile-app-tab.active {
        color: #174e8c !important;
        background: #eef6ff !important;
    }

    body:not(.print-view-body) .mobile-app-tab.active .mobile-app-tab-icon {
        color: #fff !important;
        background: linear-gradient(135deg, #2463eb, #159bb9) !important;
    }

    body:not(.print-view-body) .dashboard-hero {
        border-radius: 18px;
    }

    .mprm-flow-row {
        gap: 5px;
    }

    .mprm-flow-row span {
        min-height: 26px;
        padding: 0 8px;
        font-size: 9px;
    }
}

@media (max-width: 420px) {
    body:not(.print-view-body) .login-card h2 {
        font-size: 32px;
    }

    .mprm-login-card-footer {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* MPRM PWA INSTALL + HERO LABEL CONTRAST v27                                 */
/* ========================================================================== */

/* Keep all dark/gradient hero eyebrow labels white after role-accent rules. */
body:not(.print-view-body) .eyebrow.light {
    color: #fff !important;
}

.pwa-install-button {
    appearance: none;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid rgba(97, 208, 230, .24);
    border-radius: 13px;
    color: #eaf8fb;
    background: linear-gradient(135deg, rgba(36,99,235,.22), rgba(19,168,199,.16));
    box-shadow: 0 10px 24px rgba(2, 15, 28, .14);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.pwa-install-button:hover {
    transform: translateY(-1px);
    border-color: rgba(116, 224, 244, .42);
    background: linear-gradient(135deg, rgba(36,99,235,.32), rgba(19,168,199,.25));
    box-shadow: 0 14px 28px rgba(2, 15, 28, .20);
}

.pwa-install-button:focus-visible {
    outline: 3px solid rgba(115, 211, 235, .30);
    outline-offset: 2px;
}

.pwa-install-button[hidden] {
    display: none !important;
}

.pwa-install-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #2463eb, #13a8c7);
    box-shadow: 0 7px 16px rgba(13, 116, 181, .28);
    font-size: 17px;
    font-weight: 900;
}

.pwa-install-copy,
.pwa-install-login > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pwa-install-button b {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.pwa-install-button small {
    color: rgba(218, 238, 247, .72);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
}

.pwa-install-sidebar,
.pwa-refresh-sidebar {
    width: auto;
    margin: 9px 14px 8px;
}

.pwa-install-login {
    margin-top: 12px;
    color: #15395c;
    border-color: #d7e5f1;
    background: #f4f8fc;
    box-shadow: none;
}

.pwa-install-login:hover {
    border-color: #b9d4ea;
    background: #edf5fb;
    box-shadow: 0 10px 22px rgba(20,49,80,.08);
}

.pwa-install-login small {
    color: #6c8094;
}

@media (min-width: 901px) {
    body:not(.print-view-body).sidebar-collapsed .pwa-install-sidebar,
    body:not(.print-view-body).sidebar-collapsed .pwa-refresh-sidebar {
        justify-content: center;
        width: 46px;
        min-height: 46px;
        margin: 8px auto;
        padding: 7px;
        gap: 0;
    }

    body:not(.print-view-body).sidebar-collapsed .pwa-install-sidebar .pwa-install-copy,
    body:not(.print-view-body).sidebar-collapsed .pwa-refresh-sidebar .pwa-install-copy {
        display: none;
    }
}

@media (max-width: 900px) {
    .pwa-install-sidebar,
    .pwa-refresh-sidebar {
        margin: 10px 14px;
        min-height: 50px;
    }

    .pwa-install-sidebar b,
    .pwa-refresh-sidebar b {
        font-size: 13px;
    }
}

/* ========================================================================== */
/* MPRM MOBILE BUTTON NORMALIZATION v28                                      */
/* ========================================================================== */
/*
 * Phone controls should feel like compact app actions, not full-width bars.
 * Keep natural button widths, preserve a 44px touch target, and let action
 * groups wrap when there is not enough horizontal room.
 */
@media (max-width: 760px) {
    body:not(.print-view-body) :where(
        a.btn,
        button.btn,
        input.btn,
        button.table-action,
        a.table-action,
        .reviewer-open-action,
        .email-row-action .btn
    ) {
        width: auto !important;
        max-width: 100% !important;
        min-width: 44px;
        min-height: 44px;
        flex: 0 1 auto !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
    }

    body:not(.print-view-body) :where(.btn.compact, .modern-table td .table-action, .table-action) {
        min-height: 40px;
        padding: 8px 12px;
    }

    body:not(.print-view-body) :where(
        .header-tools,
        .po-command-actions,
        .notification-heading-actions,
        .reviewer-toolbar-actions,
        .review-buttons,
        .mobile-review-action-buttons,
        .accounting-po-actions,
        .delivery-card-status,
        .delivery-form-footer,
        .operations-export,
        .audit-filter-actions,
        .email-delivery-actions,
        .table-action-group,
        .form-actions
    ) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    body:not(.print-view-body) :where(
        .review-buttons form,
        .mobile-review-action-buttons form,
        .accounting-po-actions form,
        .notification-heading-actions form,
        .table-action-group form,
        .audit-filter-actions form,
        .email-delivery-actions form,
        .operations-export
    ) {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        margin: 0;
    }

    body:not(.print-view-body) :where(
        .header-tools .btn,
        .po-command-actions .btn,
        .notification-heading-actions .btn,
        .reviewer-toolbar-actions .btn,
        .review-buttons .btn,
        .mobile-review-action-buttons .btn,
        .accounting-po-actions .btn,
        .delivery-card-status .table-action,
        .delivery-form-footer .btn,
        .operations-export .btn,
        .filter-card .btn,
        .operations-filter .btn,
        .audit-filter-actions .btn,
        .email-delivery-tools .btn,
        .email-row-action .btn,
        .modern-table td .table-action
    ) {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
    }

    body:not(.print-view-body) .review-buttons,
    body:not(.print-view-body) .mobile-review-action-buttons {
        justify-content: flex-start;
    }

    body:not(.print-view-body) .review-buttons .btn,
    body:not(.print-view-body) .mobile-review-action-buttons .btn {
        min-width: 124px !important;
    }

    body:not(.print-view-body) .accounting-po-actions,
    body:not(.print-view-body) .delivery-card-status,
    body:not(.print-view-body) .delivery-form-footer,
    body:not(.print-view-body) .notification-heading-actions,
    body:not(.print-view-body) .operations-export {
        justify-content: flex-start;
    }

    body:not(.print-view-body) .modern-table td:last-child {
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
    }

    body:not(.print-view-body) .modern-table td:last-child form {
        width: auto !important;
        flex: 0 1 auto !important;
        margin: 0;
    }

    body:not(.print-view-body) .mr-mobile-save-bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    body:not(.print-view-body) .mr-mobile-save-bar .btn {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        min-width: 96px;
    }

    body:not(.print-view-body) .form-actions {
        justify-content: flex-end;
    }

    /* These are intentionally navigation/install surfaces rather than page actions. */
    body:not(.print-view-body) .pwa-install-button,
    body:not(.print-view-body) .mobile-app-tab,
    body:not(.print-view-body) .mobile-app-nav .mobile-sidebar-toggle.mobile-app-more,
    body:not(.print-view-body) .side-link,
    body:not(.print-view-body) .sidebar-logout {
        max-width: 100%;
    }
}

@media (max-width: 380px) {
    body:not(.print-view-body) :where(a.btn, button.btn, button.table-action, a.table-action) {
        padding-left: 11px;
        padding-right: 11px;
        font-size: 12px;
    }

    body:not(.print-view-body) .review-buttons .btn,
    body:not(.print-view-body) .mobile-review-action-buttons .btn {
        min-width: 112px !important;
    }
}

@media (max-width: 760px) {
    /* Full-card authentication CTA is intentionally wide; page/action buttons stay compact. */
    body:not(.print-view-body) .login-card .login-button {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}


/* ========================================================================== */
/* MPRM HERO WRAPPER / PADDING BACKGROUND CLEANUP v29                         */
/* ========================================================================== */
/*
 * The dashboard hero is a two-card grid. Keep the gradient on the left card
 * and the white status card on the right, but let the space around/between
 * those cards show the normal page background instead of a navy wrapper.
 */
body:not(.print-view-body) .dashboard-hero {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Decision submission feedback */
.decision-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(255, 255, 255, .86);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}

.decision-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.decision-loading-panel {
    width: min(360px, 100%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid #cad5e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
}

.decision-loading-panel strong,
.decision-loading-panel span {
    display: block;
    letter-spacing: 0;
}

.decision-loading-panel strong {
    color: #111827;
    font-size: 16px;
}

.decision-loading-panel div > span {
    margin-top: 3px;
    color: #526174;
    font-size: 13px;
}

.decision-loading-spinner {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    box-sizing: border-box;
    border: 3px solid #d7e0ea;
    border-top-color: #12613c;
    border-radius: 50%;
    animation: decision-spinner-turn .72s linear infinite;
}

@keyframes decision-spinner-turn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .decision-loading-spinner { animation-duration: 1.5s; }
    .decision-loading-overlay { transition: none; }
}

@media print {
    .decision-loading-overlay { display: none !important; }
}

/* Shared login and page navigation controls */
.page-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #17324d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.page-back-button:hover {
    border-color: #8fa4bb;
    background: #f4f7fa;
}

.page-back-button:focus-visible,
.password-visibility-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

.page-back-button.compact {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
}

.page-back-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke-width: 2.2;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.login-back-control {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.password-input-shell {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr) 40px;
}

.password-input-shell input {
    min-width: 0;
}

.password-visibility-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    align-self: center;
    padding: 0;
    border: 0;
    border-left: 1px solid #e2e8f0;
    border-radius: 0;
    background: transparent;
    color: #526579;
    cursor: pointer;
}

.password-visibility-toggle:hover {
    background: #eef3f8;
    color: #17324d;
}

.password-visibility-toggle svg {
    width: 19px;
    height: 19px;
}

@media (max-width: 420px) {
    .password-input-shell {
        grid-template-columns: 36px minmax(0, 1fr) 40px;
    }
}

@media print {
    .page-back-button,
    .login-back-control {
        display: none !important;
    }
}

/* Linked M.R approval chain displayed in P.O Checked By. */
.po-source-approvals-cell {
    min-width: 0;
}

.po-source-approval-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-top: 3px;
}

.po-source-approval-grid.approval-count-1,
.po-source-approval-grid.approval-count-2 {
    grid-template-columns: minmax(0, 1fr);
}

.po-source-approval-grid.approval-count-3,
.po-source-approval-grid.approval-count-4,
.po-source-approval-grid.approval-count-5,
.po-source-approval-grid.approval-count-6,
.po-source-approval-grid.approval-count-7,
.po-source-approval-grid.approval-count-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.po-source-approval {
    display: grid;
    grid-template-columns: minmax(36px, 52px) minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 34px;
    padding: 2px 3px;
    border-bottom: 1px solid #cbd5df;
    box-sizing: border-box;
    break-inside: avoid;
}

.po-source-signature {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 36px;
    max-width: 52px;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.po-source-signature img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.po-source-copy {
    display: flex;
    gap: 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.08;
    letter-spacing: 0;
}

.po-source-copy strong {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 10px;
    letter-spacing: 0;
}

.po-source-copy small,
.po-source-copy time {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #506174;
    font-size: 7px;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-source-copy time {
    color: #0b783f;
    font-weight: 800;
}

.po-source-approval.rejected .po-source-copy time {
    color: #b42318;
}

.po-source-slip-note {
    display: block;
    margin-top: 3px;
    color: #526174;
    font-size: 7px;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0;
}

.system-notice-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #eef2f5;
}

.system-notice-shell {
    width: min(460px, 100%);
}

.system-notice-fallback {
    padding: 24px;
    border: 1px solid #ced8e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(23, 50, 77, .14);
}

.system-notice-fallback h1 {
    margin: 6px 0 8px;
    font-size: 22px;
    letter-spacing: 0;
}

.system-notice-fallback p {
    margin: 0 0 18px;
    color: #526174;
    line-height: 1.55;
}

/* IT detailed audit log */
.detailed-audit-page {
    display: grid;
    gap: 18px;
}

.audit-filter-card,
.audit-table-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid #d4dde6;
    border-radius: 8px;
    background: #fff;
}

.detailed-audit-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.audit-summary-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin-bottom: 14px;
    border: 1px solid #d7dfe7;
    background: #d7dfe7;
}

.audit-summary-band > div {
    min-width: 0;
    padding: 12px 14px;
    background: #fff;
}

.audit-summary-band span,
.audit-summary-band strong {
    display: block;
}

.audit-summary-band span {
    color: #647486;
    font-size: 11px;
    font-weight: 800;
}

.audit-summary-band strong {
    margin-top: 4px;
    color: #173f32;
    font-size: 20px;
}

.inline-notice-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
    padding: 12px;
    border: 1px solid #cbd7df;
    background: #f7fafb;
}

.inline-notice-fallback span {
    flex: 1;
    min-width: 0;
}

.audit-reference-filter {
    grid-column: span 2;
}

.detailed-audit-table {
    min-width: 1040px;
}

.detailed-audit-table td {
    vertical-align: top;
}

.audit-category-badge {
    display: inline-flex;
    padding: 3px 6px;
    border: 1px solid #bad0c3;
    border-radius: 6px;
    background: #edf7f0;
    color: #195b38;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

.audit-action-name {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.audit-summary {
    min-width: 230px;
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.audit-details {
    margin-top: 8px;
}

.audit-details summary {
    color: #205b48;
    cursor: pointer;
    font-weight: 800;
}

.audit-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.audit-context-grid span {
    min-width: 0;
    padding: 8px;
    background: #f3f6f8;
    overflow-wrap: anywhere;
}

.audit-context-grid b {
    display: block;
    margin-bottom: 2px;
    color: #526174;
    font-size: 10px;
}

.audit-change-table {
    display: grid;
    gap: 1px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #d7dfe7;
    background: #d7dfe7;
}

.audit-change-head,
.audit-change-row {
    display: grid;
    grid-template-columns: minmax(110px, .7fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 1px;
}

.audit-change-head > *,
.audit-change-row > * {
    min-width: 0;
    margin: 0;
    padding: 8px;
    background: #fff;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.audit-change-head > * {
    background: #edf1f4;
}

.audit-format-value {
    max-width: 100%;
    color: #2f4051;
    font: 11px/1.4 Consolas, monospace;
}

.audit-no-changes {
    margin: 10px 0 0;
    color: #647486;
    font-size: 12px;
}

@media (max-width: 760px) {
    .detailed-audit-filters,
    .audit-context-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .audit-reference-filter {
        grid-column: auto;
    }

    .audit-filter-card,
    .audit-table-card {
        padding: 14px;
    }

    .detailed-audit-table-wrap {
        overflow: visible;
    }

    .detailed-audit-table {
        display: block;
        min-width: 0;
    }

    .detailed-audit-table thead {
        display: none;
    }

    .detailed-audit-table tbody,
    .detailed-audit-table tr,
    .detailed-audit-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .detailed-audit-table tr {
        margin-bottom: 12px;
        border: 1px solid #d4dde6;
        border-radius: 8px;
        overflow: hidden;
    }

    body:not(.print-view-body) .detailed-audit-page .detailed-audit-table td {
        display: block;
        padding: 10px 12px 10px 112px;
        position: relative;
        border-bottom: 1px solid #e5eaf0;
        overflow-wrap: anywhere;
        text-align: left;
    }

    body:not(.print-view-body) .detailed-audit-page .detailed-audit-table td:first-child,
    body:not(.print-view-body) .detailed-audit-page .detailed-audit-table td:last-child {
        display: block;
        padding-left: 112px;
        text-align: left;
    }

    .detailed-audit-page .audit-summary {
        min-width: 0;
    }

    .detailed-audit-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        top: 11px;
        width: 88px;
        color: #647486;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .audit-change-head,
    .audit-change-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .audit-change-head {
        display: none;
    }
}

/* Role dashboards v44 */
.role-dashboard,
.role-dashboard * { box-sizing: border-box; }
.role-dashboard { width: 100%; color: #17212b; }
.role-dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0 22px;
    border-bottom: 1px solid #d9e1e8;
}
.role-dashboard-heading h2,
.role-dashboard-section-head h3 { margin: 4px 0 0; color: #162331; letter-spacing: 0; }
.role-dashboard-heading h2 { font-size: 26px; line-height: 1.2; }
.role-dashboard-heading p {
    max-width: 640px;
    margin: 8px 0 0;
    color: #5d6c7a;
    font-size: 14px;
    line-height: 1.5;
}
.role-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 560px;
}
.role-dashboard-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #cbd6df;
    border-radius: 6px;
    background: #fff;
    color: #263746;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.role-dashboard-action > span {
    display: inline-grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border-radius: 4px;
    background: #eaf0f5;
    color: #33495e;
    font-size: 10px;
}
.role-dashboard-action:hover { border-color: #8da1b3; background: #f7f9fb; }
.role-dashboard-action.is-primary { border-color: #1565a8; background: #1565a8; color: #fff; }
.role-dashboard-action.is-primary > span { background: rgba(255, 255, 255, .18); color: #fff; }
.role-dashboard-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 20px 0;
}
.role-dashboard-counter {
    min-width: 0;
    min-height: 122px;
    padding: 16px;
    border: 1px solid #d9e1e8;
    border-top: 3px solid #5e7890;
    border-radius: 8px;
    background: #fff;
}
.role-dashboard-counter > span,
.role-dashboard-counter > strong,
.role-dashboard-counter > small { display: block; overflow-wrap: anywhere; }
.role-dashboard-counter > span {
    color: #536474;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.role-dashboard-counter > strong {
    margin-top: 9px;
    color: #152331;
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: 0;
}
.role-dashboard-counter > small { margin-top: 7px; color: #6c7986; font-size: 11px; line-height: 1.35; }
.role-dashboard-counter.tone-success { border-top-color: #168253; }
.role-dashboard-counter.tone-warning { border-top-color: #c57a0a; }
.role-dashboard-counter.tone-danger { border-top-color: #c33e42; }
.role-dashboard-counter.tone-info { border-top-color: #3174a6; }
.role-dashboard-counter.tone-muted { border-top-color: #788895; }
.role-dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, .72fr);
    gap: 16px;
    align-items: start;
}
.role-dashboard-work,
.role-dashboard-notifications { min-width: 0; border-top: 1px solid #cfd9e2; background: #fff; }
.role-dashboard-section-head {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e1e7ed;
}
.role-dashboard-section-head h3 { font-size: 17px; }
.role-dashboard-section-head > a { color: #1565a8; font-size: 12px; font-weight: 800; }
.role-dashboard-table-wrap { width: 100%; overflow-x: auto; }
.role-dashboard-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.role-dashboard-table th,
.role-dashboard-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e5eaef;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}
.role-dashboard-table th { background: #f4f7f9; color: #607080; font-size: 10px; text-transform: uppercase; }
.role-dashboard-table td { color: #384959; font-size: 12px; }
.role-dashboard-table td:first-child a { color: #125f9f; font-weight: 800; }
.role-dashboard-status {
    display: inline-flex;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 5px;
    background: #eaf0f5;
    color: #41566a;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.role-dashboard-status.tone-success { background: #e5f5ed; color: #17663f; }
.role-dashboard-status.tone-warning { background: #fff2d9; color: #825006; }
.role-dashboard-status.tone-danger { background: #fae9e9; color: #972f34; }
.role-dashboard-status.tone-info { background: #e7f1f8; color: #245c83; }
.role-dashboard-empty { padding: 36px 18px; text-align: center; }
.role-dashboard-empty.compact { padding: 26px 16px; }
.role-dashboard-empty strong,
.role-dashboard-empty p { display: block; }
.role-dashboard-empty p { margin: 7px auto 14px; color: #6a7885; font-size: 12px; line-height: 1.45; }
.role-dashboard-notification-list { display: grid; }
.role-dashboard-notification {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 13px 16px;
    border-bottom: 1px solid #e5eaef;
    color: #314455;
    text-decoration: none;
}
.role-dashboard-notification.is-unread { padding-left: 22px; background: #f4f9fc; }
.role-dashboard-notification.is-unread::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 18px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1571b8;
}
.role-dashboard-notification strong,
.role-dashboard-notification span,
.role-dashboard-notification small { min-width: 0; overflow-wrap: anywhere; }
.role-dashboard-notification strong { color: #203242; font-size: 12px; }
.role-dashboard-notification span { color: #607080; font-size: 11px; line-height: 1.4; }
.role-dashboard-notification small { color: #87939e; font-size: 10px; }

@media (max-width: 1000px) {
    .role-dashboard-heading { display: block; }
    .role-dashboard-actions { justify-content: flex-start; max-width: none; margin-top: 16px; }
    .role-dashboard-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-dashboard-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .role-dashboard-page-content,
    .dashboard-browser-main .page-content { padding-left: 12px; padding-right: 12px; }
    .role-dashboard-heading { padding-top: 10px; }
    .role-dashboard-heading h2 { font-size: 21px; }
    .role-dashboard-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-dashboard-action { width: 100%; min-width: 0; justify-content: flex-start; overflow-wrap: anywhere; }
    .role-dashboard-counters { gap: 8px; padding: 14px 0; }
    .role-dashboard-counter { min-height: 116px; padding: 12px; }
    .role-dashboard-counter > strong { font-size: 21px; }
    .role-dashboard-table-wrap { overflow: visible; }
    .role-dashboard-table,
    .role-dashboard-table tbody,
    .role-dashboard-table tr,
    .role-dashboard-table td { display: block; width: 100%; min-width: 0; }
    .role-dashboard-table thead { display: none; }
    .role-dashboard-table tr { padding: 8px 0; border-bottom: 1px solid #d8e1e8; }
    .role-dashboard-table td { position: relative; min-height: 34px; padding: 8px 10px 8px 104px; border: 0; }
    .role-dashboard-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 9px;
        width: 82px;
        color: #6b7986;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
    }
}

@media (max-width: 390px) {
    .role-dashboard-actions { grid-template-columns: minmax(0, 1fr); }
}

/* My Account workspace v44 */
.account-workspace,
.account-workspace *,
.account-forced-workspace,
.account-forced-workspace * { box-sizing: border-box; }
.account-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    width: 100%;
    border-top: 1px solid #ccd7e0;
    border-bottom: 1px solid #ccd7e0;
    background: #fff;
}
.account-identity {
    min-width: 0;
    padding: 26px 22px;
    border-right: 1px solid #dce3e9;
    background: #f5f8fa;
}
.account-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 8px;
    background: #174f78;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}
.account-identity h2 { margin: 16px 0 0; color: #1a2a38; font-size: 19px; letter-spacing: 0; overflow-wrap: anywhere; }
.account-identity > p { margin: 5px 0 0; color: #657585; font-size: 12px; }
.account-identity dl { display: grid; gap: 0; margin: 22px 0 0; }
.account-identity dl > div { min-width: 0; padding: 11px 0; border-top: 1px solid #dce4ea; }
.account-identity dt,
.account-access-summary > span { color: #70808e; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.account-identity dd { margin: 4px 0 0; color: #2e4152; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.account-access-summary { margin-top: 18px; }
.account-workspace .account-project-list { display: grid; gap: 6px; margin-top: 9px; }
.account-workspace .account-project-list span {
    display: block;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #d6e0e7;
    border-radius: 5px;
    background: #fff;
    color: #3c5061;
    font-size: 11px;
    overflow-wrap: anywhere;
}
.account-settings { min-width: 0; }
.account-tabs {
    display: flex;
    min-width: 0;
    padding: 0 18px;
    border-bottom: 1px solid #dce3e9;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.account-tabs [role="tab"] {
    min-width: max-content;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #596b7b;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.account-tabs [role="tab"]:hover { color: #174f78; background: #f6f9fb; }
.account-tabs [role="tab"][aria-selected="true"] { border-bottom-color: #17699f; color: #174f78; }
.account-tabs [role="tab"]:focus-visible { outline: 2px solid #17699f; outline-offset: -3px; }
.account-panel { min-width: 0; padding: 26px; }
.account-panel[hidden] { display: none !important; }
.account-panel-heading { margin-bottom: 22px; padding-bottom: 13px; border-bottom: 1px solid #e1e7ec; }
.account-panel-heading h2 { margin: 4px 0 0; color: #1d2e3c; font-size: 20px; letter-spacing: 0; }
.account-panel form { display: grid; gap: 15px; width: min(100%, 560px); }
.account-panel form label { display: grid; gap: 6px; color: #3f5160; font-size: 12px; font-weight: 700; }
.account-panel form input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 9px 11px;
    border: 1px solid #c8d4de;
    border-radius: 6px;
    background: #fff;
    color: #182633;
    font: inherit;
}
.account-panel form input:focus { border-color: #17699f; outline: 2px solid rgba(23, 105, 159, .14); }
.account-panel form .btn { width: fit-content; min-width: 150px; margin-top: 2px; }
.account-email-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.account-email-steps form { align-content: start; width: 100%; }
.account-email-steps form + form { padding-left: 26px; border-left: 1px solid #e1e7ec; }
.account-email-steps h3 { margin: 0; color: #2b3e4e; font-size: 15px; letter-spacing: 0; }
.account-email-state { min-height: 34px; margin: 0; color: #6a7987; font-size: 11px; line-height: 1.45; }
.account-esignature-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 680px;
    padding: 18px 0;
    border-top: 1px solid #e1e7ec;
    border-bottom: 1px solid #e1e7ec;
}
.account-esignature-action strong,
.account-esignature-action span { display: block; }
.account-esignature-action strong { color: #2a3d4d; font-size: 13px; }
.account-esignature-action span { margin-top: 4px; color: #71808d; font-size: 11px; }
.account-forced-workspace { width: min(100%, 760px); margin: 0 auto; border-top: 1px solid #ccd7e0; border-bottom: 1px solid #ccd7e0; background: #fff; }
.account-forced-identity { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #f5f8fa; }
.account-forced-identity .account-avatar { width: 44px; height: 44px; font-size: 17px; }
.account-forced-identity strong,
.account-forced-identity span { display: block; }
.account-forced-identity strong { color: #243746; font-size: 14px; }
.account-forced-identity span { margin-top: 3px; color: #6a7986; font-size: 11px; }
.account-forced-workspace .account-required-banner { margin: 0; border-radius: 0; }
.account-forced-panel { padding-top: 22px; }

@media (max-width: 860px) {
    .account-workspace { grid-template-columns: minmax(0, 1fr); }
    .account-identity { border-right: 0; border-bottom: 1px solid #dce3e9; }
    .account-identity dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .account-access-summary { margin-top: 12px; }
    .account-workspace .account-project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .account-page-content { padding-left: 12px; padding-right: 12px; }
    .account-identity { padding: 18px 16px; }
    .account-avatar { width: 48px; height: 48px; font-size: 18px; }
    .account-identity h2 { margin-top: 12px; font-size: 17px; }
    .account-identity dl { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 15px; }
    .account-workspace .account-project-list { grid-template-columns: minmax(0, 1fr); }
    .account-tabs { padding: 0 6px; }
    .account-tabs [role="tab"] { min-height: 48px; padding: 0 11px; }
    .account-panel { padding: 20px 16px; }
    .account-panel-heading h2 { font-size: 18px; }
    .account-panel form .btn { width: 100%; min-width: 0; }
    .account-email-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .account-email-steps form + form { padding: 24px 0 0; border-top: 1px solid #e1e7ec; border-left: 0; }
    .account-esignature-action { align-items: stretch; flex-direction: column; }
    .account-esignature-action .btn { width: 100%; }
    .account-forced-identity { padding: 15px 16px; }
}
.offline-status-control {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    color: #eaf0f7;
    background: rgba(4, 17, 31, .42);
}
.offline-status-icon { width: 18px; height: 18px; color: #7bd9a4; }
.offline-status-icon svg { width: 18px; height: 18px; }
.offline-status-copy { min-width: 0; display: grid; gap: 1px; }
.offline-status-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.2; }
.offline-status-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(234, 240, 247, .66); font-size: 9px; }
.offline-status-count { min-width: 20px; padding: 2px 5px; border-radius: 999px; background: #dcecff; color: #16304d; text-align: center; font-size: 10px; font-weight: 800; }
.offline-sync-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 5px; color: inherit; background: rgba(255, 255, 255, .1); cursor: pointer; }
.offline-sync-button svg { width: 16px; height: 16px; }
.offline-sync-button:disabled { cursor: default; opacity: .48; }
.offline-status-control[data-connection-state="offline"] .offline-status-icon { color: #f2bf68; }
.offline-status-control[data-connection-state="attention"] .offline-status-icon { color: #ff8f88; }
.offline-status-control[data-connection-state="syncing"] .offline-status-icon { color: #8dc8ff; animation: offline-status-spin 1s linear infinite; }
@keyframes offline-status-spin { to { transform: rotate(360deg); } }
.offline-setting-toggle { display: flex !important; align-items: flex-start; gap: 10px; }
.offline-setting-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: #126a57; }
.offline-setting-toggle span { display: grid; gap: 2px; }
.offline-setting-toggle small { color: #5d6874; }
.offline-form-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #9fcdbf; border-radius: 6px; background: #eef8f4; color: #174b3d; }
.offline-form-result[hidden] { display: none; }
.offline-form-result strong { font-size: 14px; }
.offline-form-result span { grid-column: 1; font-size: 12px; }
.offline-form-result b { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; white-space: nowrap; }
.offline-form-result[data-tone="error"] { border-color: #e3aaa5; background: #fff2f1; color: #7c2c26; }
.offline-form-result[data-tone="synced"] { border-color: #9bbddd; background: #eff6fc; color: #1e4d72; }
@media (max-width: 720px) {
    .offline-status-control { min-height: 46px; grid-template-columns: 18px minmax(0, 1fr) auto 32px; }
    .offline-sync-button { width: 32px; height: 32px; }
    .offline-form-result { grid-template-columns: 1fr; }
    .offline-form-result b { grid-column: 1; grid-row: auto; }
}

/* Server sync sidebar polish v45.5 */
body:not(.print-view-body) .offline-status-control {
    position: relative;
    grid-template-columns: 38px minmax(0, 1fr) auto 38px;
    gap: 10px;
    min-height: 60px;
    padding: 9px;
    overflow: hidden;
    border-color: rgba(180, 213, 239, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .065);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(4, 14, 26, .12);
}

body:not(.print-view-body) .offline-status-control::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 42%);
}

body:not(.print-view-body) .offline-status-control > * {
    position: relative;
    z-index: 1;
}

body:not(.print-view-body) .offline-status-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(123, 217, 164, .12);
}

body:not(.print-view-body) .offline-status-icon svg {
    width: 19px;
    height: 19px;
}

body:not(.print-view-body) .offline-status-copy {
    gap: 3px;
}

body:not(.print-view-body) .offline-status-label {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

body:not(.print-view-body) .offline-status-copy small {
    display: block;
    color: #9fb4c8;
    font-size: 10px;
    line-height: 1.25;
}

body:not(.print-view-body) .offline-sync-button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(190, 219, 244, .16);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

body:not(.print-view-body) .offline-sync-button:hover {
    transform: translateY(-1px);
    border-color: rgba(145, 220, 255, .34);
    background: rgba(145, 220, 255, .16);
}

body:not(.print-view-body) .offline-status-count {
    min-width: 24px;
    padding: 3px 7px;
}

body:not(.print-view-body) .offline-status-control[data-connection-state="offline"] .offline-status-icon {
    background: rgba(242, 191, 104, .13);
}

body:not(.print-view-body) .offline-status-control[data-connection-state="attention"] .offline-status-icon {
    background: rgba(255, 143, 136, .13);
}

body:not(.print-view-body).sidebar-collapsed .offline-status-control {
    grid-template-columns: 38px;
    width: 50px;
}

body:not(.print-view-body).sidebar-collapsed .offline-status-icon,
body:not(.print-view-body).sidebar-collapsed .offline-sync-button {
    width: 38px;
    height: 38px;
}

@media (max-width: 720px) {
    body:not(.print-view-body) .offline-status-control {
        min-height: 52px;
        grid-template-columns: 34px minmax(0, 1fr) auto 34px;
    }
    body:not(.print-view-body) .offline-status-icon,
    body:not(.print-view-body) .offline-sync-button {
        width: 34px;
        height: 34px;
    }
}

/* MPRM table and MR draft polish v49 */
body:not(.print-view-body) .table-wrap {
    border: 1px solid #d9e4ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 35, 65, .08);
}

body:not(.print-view-body) .modern-table {
    width: 100%;
    min-width: 880px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    color: #24364a;
}

body:not(.print-view-body) .modern-table th {
    padding: 13px 14px;
    border-bottom: 1px solid #cbd8e6;
    background: linear-gradient(180deg, #f8fbff 0%, #edf5fb 100%) !important;
    color: #15324f !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    white-space: nowrap;
}

body:not(.print-view-body) .modern-table td {
    padding: 14px;
    border-bottom: 1px solid #e5edf4;
    color: #27394d;
    font-size: 12px;
    line-height: 1.45;
    vertical-align: middle;
}

body:not(.print-view-body) .modern-table tbody tr:nth-child(even) td {
    background: #fbfdff;
}

body:not(.print-view-body) .modern-table tbody tr:hover td {
    background: #eef7ff;
}

body:not(.print-view-body) .modern-table tbody tr:last-child td {
    border-bottom: 0;
}

body:not(.print-view-body) .modern-table td b,
body:not(.print-view-body) .modern-table td strong {
    color: #16283d;
    font-weight: 900;
}

body:not(.print-view-body) .modern-table td > small,
body:not(.print-view-body) .modern-table td > span:not(.po-number-badge):not(.workflow-badge):not(.procurement-progress-badge):not(.accounting-badge):not(.requester-identity) {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

body:not(.print-view-body) .modern-table .empty-row td {
    padding: 28px 18px;
    background: #f8fafc;
    color: #6b7c8f;
    text-align: center;
    font-weight: 800;
}

body:not(.print-view-body) .po-number-badge {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #174c7c;
}

body:not(.print-view-body) .workflow-badge.saved,
body:not(.print-view-body) .procurement-progress-badge.not_started {
    border-color: #d7dee8;
    background: #f4f7fb;
    color: #475569;
}

body:not(.print-view-body) .requester-cell {
    min-width: 220px;
    text-align: left;
}

.requester-identity {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.requester-identity::before {
    content: attr(data-initial);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(20, 149, 83, .22);
    border-radius: 8px;
    background: linear-gradient(135deg, #e8fff6 0%, #dbeafe 100%);
    color: #0f766e;
    font-size: 13px;
    font-weight: 900;
}

.requester-identity > span {
    min-width: 0;
}

.requester-identity b,
.requester-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.requester-identity small {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.requester-identity.compact {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    margin-top: 7px;
}

.requester-identity.compact::before {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 11px;
}

body:not(.print-view-body) .table-action,
body:not(.print-view-body) .modern-table td .table-action {
    border: 1px solid #c9d9e8;
    background: #ffffff;
    color: #174f78;
    box-shadow: 0 4px 12px rgba(15, 35, 65, .06);
}

body:not(.print-view-body) .table-action:hover,
body:not(.print-view-body) .modern-table td .table-action:hover {
    border-color: #77b7e5;
    background: #eff8ff;
    color: #0f5e91;
}

body:not(.print-view-body) .table-action.draft-action,
.btn.draft-submit {
    border-color: #c7d2fe !important;
    background: #eef2ff !important;
    color: #4338ca !important;
}

body:not(.print-view-body) .table-action.draft-action:hover,
.btn.draft-submit:hover {
    border-color: #a5b4fc !important;
    background: #e0e7ff !important;
    color: #3730a3 !important;
}

body:not(.print-view-body) .mr-entry-section {
    position: relative;
    overflow: hidden;
    border-radius: 8px !important;
    box-shadow: 0 16px 34px rgba(15, 35, 65, .07) !important;
}

body:not(.print-view-body) .mr-entry-section::before {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    height: auto;
    width: 5px;
    margin: 0;
    border-radius: 8px 0 0 8px;
    opacity: 1;
}

body:not(.print-view-body) .mr-entry-section[data-section-tone="details"] {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #f8fbff 0%, #edf7ff 100%);
}

body:not(.print-view-body) .mr-entry-section[data-section-tone="details"]::before {
    background: #2563eb;
}

body:not(.print-view-body) .mr-entry-section[data-section-tone="materials"] {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #fbfffd 0%, #eefdf5 100%);
}

body:not(.print-view-body) .mr-entry-section[data-section-tone="materials"]::before {
    background: #149553;
}

body:not(.print-view-body) .mr-entry-section[data-section-tone="checkers"] {
    border-color: #fde68a;
    background: linear-gradient(135deg, #fffdf5 0%, #fff7df 100%);
}

body:not(.print-view-body) .mr-entry-section[data-section-tone="checkers"]::before {
    background: #d97706;
}

body:not(.print-view-body) .mr-entry-section-head {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(148, 163, 184, .28);
}

body:not(.print-view-body) .mr-field-grid label,
body:not(.print-view-body) .material-item-card label {
    color: #334155;
}

body:not(.print-view-body) .mr-field-grid input,
body:not(.print-view-body) .mr-field-grid select,
body:not(.print-view-body) .material-item-card input,
body:not(.print-view-body) .material-item-card select {
    min-height: 42px;
    border-color: #cbd8e6;
    border-radius: 7px;
    background-color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(15, 35, 65, .04);
}

body:not(.print-view-body) .mr-field-grid select,
body:not(.print-view-body) .material-item-card select {
    appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, #42617c 50%),
        linear-gradient(135deg, #42617c 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

body:not(.print-view-body) .mr-field-grid input:focus,
body:not(.print-view-body) .mr-field-grid select:focus,
body:not(.print-view-body) .material-item-card input:focus {
    border-color: #2f75ed;
    outline: 3px solid rgba(47, 117, 237, .14);
}

body:not(.print-view-body) .material-item-card {
    border-color: rgba(20, 149, 83, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}

.mr-review-body .review-decision-panel,
.engineering-review-body .review-decision-panel {
    display: grid !important;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: stretch;
    width: min(1120px, calc(100% - 32px));
    margin: 20px auto;
    padding: 18px !important;
    border: 1px solid #d8e3ed !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(15, 35, 65, .10) !important;
}

.mr-review-body .review-buttons,
.engineering-review-body .review-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
}

.mr-review-body .review-decision-panel h2,
.engineering-review-body .review-decision-panel h2 {
    font-size: 24px !important;
    letter-spacing: 0 !important;
}

.mr-review-body .review-decision-panel p,
.engineering-review-body .review-decision-panel p {
    font-size: 13px !important;
}

.mr-review-body .review-decision-card,
.engineering-review-body .review-decision-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #dce6ef;
    border-radius: 8px;
    background: #f8fbff;
}

.mr-review-body .review-decision-card.approve,
.engineering-review-body .review-decision-card.approve {
    border-color: #b7ebcf;
    background: #f0fdf7;
}

.mr-review-body .review-decision-card.reject,
.engineering-review-body .review-decision-card.reject {
    border-color: #fecaca;
    background: #fff7f7;
}

.mr-review-body .decision-card-icon,
.engineering-review-body .decision-card-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #ffffff;
    color: #174f78;
    box-shadow: inset 0 0 0 1px rgba(15, 35, 65, .08);
}

.mr-review-body .decision-card-icon svg,
.engineering-review-body .decision-card-icon svg {
    width: 18px;
    height: 18px;
}

.mr-review-body .review-decision-card.approve .decision-card-icon,
.engineering-review-body .review-decision-card.approve .decision-card-icon {
    color: #10814c;
}

.mr-review-body .review-decision-card.reject .decision-card-icon,
.engineering-review-body .review-decision-card.reject .decision-card-icon {
    color: #c02626;
}

.mr-review-body .review-decision-card strong,
.engineering-review-body .review-decision-card strong {
    color: #16283d;
    font-size: 14px;
}

.mr-review-body .review-decision-card small,
.engineering-review-body .review-decision-card small {
    color: #5f7185;
    line-height: 1.45;
}

.mr-review-body .review-decision-card input,
.engineering-review-body .review-decision-card input,
.engineering-review-body .review-decision-card textarea {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #d4e0eb;
    border-radius: 7px;
}

.mr-review-body .review-decision-card .btn,
.engineering-review-body .review-decision-card .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px !important;
    border-radius: 7px !important;
    font-size: 14px !important;
}

@media (max-width: 860px) {
    body:not(.print-view-body) .modern-table {
        min-width: 760px;
    }

    .mr-review-body .review-decision-panel,
    .engineering-review-body .review-decision-panel,
    .mr-review-body .review-buttons,
    .engineering-review-body .review-buttons {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* MR export-safe signature footer v50 */
.mr-document-signatures {
    height: auto;
    min-height: 92px;
    align-items: end;
    margin-top: 8px;
}

.mr-document-signature {
    align-items: end;
}

.mr-signature-line {
    min-height: 62px;
    padding: 0 4px 5px;
    overflow: visible;
}

.mr-checker-signature-list {
    min-height: 62px;
    overflow: visible;
}

.mr-checker-signature {
    min-height: 62px;
    padding-top: 34px;
    overflow: visible;
}

.mr-esign-image {
    bottom: 24px !important;
    height: 30px !important;
    max-height: 30px !important;
}

.mr-checker-esign {
    bottom: 26px !important;
    width: calc(100% - 4px) !important;
    height: 30px !important;
    max-height: 30px !important;
}

.mr-requester-esign,
.mr-engineering-esign {
    bottom: 25px !important;
}

.mr-checker-signature b {
    position: relative;
    z-index: 1;
    background: #fff;
    line-height: 1.08;
}

.mr-checker-signature small {
    position: relative;
    z-index: 1;
    background: #fff;
    line-height: 1.08;
}

.mr-engineering-signature-line {
    min-height: 62px;
    overflow: visible;
}

.po-source-approval {
    grid-template-columns: minmax(0, 1fr);
    min-height: 38px;
    padding: 4px 6px;
    border-bottom-color: #d8e4ec;
    background: #fbfdff;
}

.po-source-approval.approved {
    background: #f2fbf6;
}

.po-source-approval.rejected {
    background: #fff5f5;
}

.po-source-copy.po-source-copy-only {
    min-height: 30px;
    justify-content: center;
    padding-left: 0;
}

.po-source-copy.po-source-copy-only strong {
    font-size: 10.5px;
}

.po-source-copy.po-source-copy-only small,
.po-source-copy.po-source-copy-only time {
    font-size: 7.5px;
}

.project-checker-settings .card-heading {
    margin-bottom: 14px;
}

.project-checker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    padding: 0 22px;
}

.project-checker-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #d7e3ee;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 12px 28px rgba(15, 35, 65, .07);
}

.project-checker-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.project-checker-card-head span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.project-checker-card-head b {
    overflow-wrap: anywhere;
    color: #102a43;
    font-size: 14px;
}

.project-checker-card-head small {
    color: #64748b;
    font-size: 11px;
}

.project-checker-count {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #bfe1f6;
    border-radius: 999px;
    background: #eaf7ff;
    color: #155d86;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.project-checker-options {
    display: grid;
    gap: 7px;
}

.project-checker-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #dce6ef;
    border-radius: 7px;
    background: #fff;
    color: #22354a;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.project-checker-option:has(input:checked),
.project-checker-option.is-selected {
    border-color: #86c5e9;
    background: #f0f9ff;
    box-shadow: inset 3px 0 #1c83b7;
}

.project-checker-option input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    accent-color: #17699f;
}

.project-checker-option span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.project-checker-option b,
.project-checker-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-checker-option b {
    color: #172a3d;
    font-size: 12px;
}

.project-checker-option small {
    color: #66768a;
    font-size: 10px;
}

.project-checker-empty {
    padding: 14px;
    border: 1px dashed #cbd8e6;
    border-radius: 7px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.project-checker-save {
    justify-self: end;
    min-width: 132px;
    border-color: #b9d8ef !important;
    background: #eff8ff !important;
    color: #12547c !important;
}

@media (max-width: 720px) {
    .project-checker-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 14px;
    }

    .project-checker-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .project-checker-count,
    .project-checker-save {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* v46 live M.R-to-P.O item locks and cleaner approval review actions */
.mr-po-live-status {
    margin: 14px 16px 0;
    padding: 11px 13px;
    border: 1px solid #d6e5f6;
    border-radius: 8px;
    background: #f7fbff;
    color: #385571;
    font-size: 12px;
    font-weight: 800;
}

.mr-po-live-status.good {
    border-color: #b9e9cd;
    background: #f0fdf6;
    color: #12663d;
}

.mr-po-live-status.bad {
    border-color: #fecaca;
    background: #fff7f7;
    color: #a42020;
}

.mr-po-live-status.checking {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4f8f;
}

.mr-po-item-row.state-draft_locked {
    border-color: #f1c67d;
    background: #fff9ed;
    box-shadow: inset 4px 0 0 #d8901f;
}

.mr-po-item-row.state-draft_locked .mr-po-item-state {
    color: #8a560d;
    background: #fff2d3;
    border-color: #f0c36f;
}

.review-decision-panel {
    position: relative;
    overflow: hidden;
    border-radius: 8px !important;
    border-color: #d7e4f1 !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, .95), rgba(255, 255, 255, .98)) !important;
    box-shadow: 0 18px 42px rgba(17, 43, 77, .12) !important;
}

.review-decision-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #123f73, #20a4d8, #23a86b, #d9911f);
}

.review-decision-panel > * {
    position: relative;
    z-index: 1;
}

.review-decision-panel .eyebrow {
    color: #075985;
}

.desktop-review-decision .review-buttons,
.mr-review-body .review-buttons,
.engineering-review-body .review-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
}

.review-decision-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dbe7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 45, 80, .08);
}

.review-decision-card.approve {
    border-color: #aee7c8;
    background: #f2fff8;
}

.review-decision-card.reject {
    border-color: #fecaca;
    background: #fff7f7;
}

.decision-card-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(15, 35, 65, .08);
    border-radius: 8px;
    background: #ffffff;
    color: #123f73;
}

.decision-card-icon svg {
    width: 18px;
    height: 18px;
}

.review-decision-card.approve .decision-card-icon {
    color: #10814c;
    background: #ecfdf5;
    border-color: #b8e9cf;
}

.review-decision-card.reject .decision-card-icon {
    color: #b91c1c;
    background: #fff1f2;
    border-color: #fecaca;
}

.review-decision-card strong {
    color: #10233b;
    font-size: 15px;
    line-height: 1.25;
}

.review-decision-card small {
    color: #5b6d82;
    line-height: 1.45;
}

.review-decision-card input,
.review-decision-card textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d4e0eb;
    border-radius: 7px;
    background: #ffffff;
}

.review-decision-card input:focus,
.review-decision-card textarea:focus {
    border-color: #2f75ed;
    outline: 3px solid rgba(47, 117, 237, .14);
}

.review-decision-card .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 900;
}

.approve-button {
    border-color: #149553;
    background: #149553;
    color: #ffffff;
}

.reject-button {
    border-color: #d72828;
    background: #d72828;
    color: #ffffff;
}

.po-return-president-note {
    width: min(1120px, 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto 14px;
    padding: 13px 15px;
    border: 1px solid #f4c7c7;
    border-radius: 8px;
    background: #fff8f8;
    color: #7f1d1d;
}

.po-return-president-note > span {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 7px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.po-return-president-note div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.po-return-president-note strong {
    color: #7f1d1d;
}

.po-return-president-note small {
    color: #935454;
}

.mobile-review-action-buttons .review-decision-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 860px) {
    .desktop-review-decision .review-buttons,
    .mr-review-body .review-buttons,
    .engineering-review-body .review-buttons {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .po-return-president-note {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Final monitoring filters and table sizing v51 */
body:not(.print-view-body) .workflow-badge.draft,
body:not(.print-view-body) .workflow-badge.saved {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

body:not(.print-view-body) .draft-status-note {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
    font-size: 10px;
    font-weight: 900;
}

body:not(.print-view-body) .notification-filter-card {
    grid-template-columns: minmax(220px, 1fr) auto auto;
    margin: 0 0 16px;
}

body:not(.print-view-body) .filter-card .filter-search input,
body:not(.print-view-body) .reviewer-filter-card .filter-search input {
    min-width: 0;
}

body:not(.print-view-body) .delivery-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body:not(.print-view-body) .delivery-summary-grid a.overdue {
    border-left-color: #dc2626;
    background: #fff1f2;
}

body:not(.print-view-body) .delivery-summary-grid a.overdue.active {
    border-color: #fca5a5;
}

body:not(.print-view-body) .delivery-card.is-overdue {
    border-left: 5px solid #dc2626;
}

body:not(.print-view-body) .delivery-status-section.status-overdue .delivery-section-heading {
    border-color: #fecdd3;
    background: #fff7f8;
}

body:not(.print-view-body) .delivery-status-badge.overdue {
    color: #b42331;
    background: #ffe4e6;
}

@media (min-width: 901px) {
    body:not(.print-view-body) .table-wrap {
        min-height: 220px;
        max-height: min(62vh, 680px);
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #9db3c8 #eef4f9;
    }

    body:not(.print-view-body) .table-wrap::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    body:not(.print-view-body) .table-wrap::-webkit-scrollbar-track {
        background: #eef4f9;
        border-radius: 999px;
    }

    body:not(.print-view-body) .table-wrap::-webkit-scrollbar-thumb {
        border: 2px solid #eef4f9;
        border-radius: 999px;
        background: #9db3c8;
    }

    body:not(.print-view-body) .modern-table thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        box-shadow: 0 1px 0 #cbd8e6;
    }

    body:not(.print-view-body) .modern-table tbody tr {
        height: 58px;
    }

    body:not(.print-view-body) .modern-table td {
        max-width: 380px;
    }
}

@media (max-width: 900px) {
    body:not(.print-view-body) .delivery-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.print-view-body) .notification-filter-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    body:not(.print-view-body) .delivery-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Balanced app dark mode v54 */
html[data-theme="dark"] {
    color-scheme: dark;
    --navy-950: #050b14;
    --navy-900: #07111f;
    --navy-850: #0b1727;
    --navy-800: #10243a;
    --blue-700: #4f8dff;
    --blue-600: #5aa7ff;
    --cyan-500: #32d0c6;
    --ink: #edf5ff;
    --muted: #a8b7ca;
    --muted-light: #7f90a8;
    --line-soft: #25384f;
    --surface: #101d2e;
    --background: #08111f;
    --shadow: 0 20px 52px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] body {
    background: #08111f;
    color: #e6eef9;
}

html[data-theme="dark"] body.print-view-body {
    color-scheme: light;
    background: #f2f6fb;
    color: #111827;
}

html[data-theme="dark"] body:not(.print-view-body) {
    background:
        linear-gradient(180deg, #08111f 0%, #0c1626 44%, #101827 100%);
}

html[data-theme="dark"] .app-main {
    background:
        radial-gradient(circle at 82% 0%, rgba(20, 149, 83, .12), transparent 31%),
        linear-gradient(180deg, #091322 0%, #0c1727 100%);
}

html[data-theme="dark"] .page-header {
    background: linear-gradient(120deg, #071427 0%, #10314a 58%, #14515b 100%) !important;
    color: #f5f9ff;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .po-command-card,
html[data-theme="dark"] .notification-center-card,
html[data-theme="dark"] .delivery-card,
html[data-theme="dark"] .mr-entry-section,
html[data-theme="dark"] .profile-pill,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .reviewer-filter-card {
    border-color: #263a52 !important;
    background: linear-gradient(180deg, #111f31 0%, #0f1b2b 100%) !important;
    color: #eaf2fd;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .content-card h1,
html[data-theme="dark"] .content-card h2,
html[data-theme="dark"] .content-card h3,
html[data-theme="dark"] .po-command-card h2,
html[data-theme="dark"] .page-content h1,
html[data-theme="dark"] .page-content h2,
html[data-theme="dark"] .page-content h3 {
    color: #f2f7ff;
}

html[data-theme="dark"] .eyebrow {
    color: #7dd3fc;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .card-heading span,
html[data-theme="dark"] .notification-meta,
html[data-theme="dark"] .table-remarks {
    color: #a9b8cb;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .filter-card input,
html[data-theme="dark"] .filter-card select,
html[data-theme="dark"] .reviewer-filter-card input,
html[data-theme="dark"] .reviewer-filter-card select {
    border-color: #314762 !important;
    background: #0b1626 !important;
    color: #edf5ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #72839b;
}

html[data-theme="dark"] input[readonly],
html[data-theme="dark"] textarea[readonly] {
    background: #101b2b !important;
    color: #bac8da !important;
}

html[data-theme="dark"] .modern-table,
html[data-theme="dark"] body:not(.print-view-body) .modern-table {
    background: #101d2e !important;
    color: #eaf2fd;
}

html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] body:not(.print-view-body) .table-wrap {
    border-color: #263a52 !important;
    background: #0f1b2b !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28) !important;
    scrollbar-color: #49667f #101b2b;
}

html[data-theme="dark"] .modern-table th,
html[data-theme="dark"] body:not(.print-view-body) .modern-table th {
    border-color: #30465f !important;
    background: linear-gradient(180deg, #17283b 0%, #102033 100%) !important;
    color: #cfe7ff !important;
}

html[data-theme="dark"] .modern-table td,
html[data-theme="dark"] body:not(.print-view-body) .modern-table td {
    border-color: #24384f !important;
    background: #101d2e !important;
    color: #dfeaf7 !important;
}

html[data-theme="dark"] .modern-table tbody tr:nth-child(even) td {
    background: #0d1929 !important;
}

html[data-theme="dark"] .modern-table tbody tr:hover td {
    background: #142943 !important;
}

html[data-theme="dark"] .modern-table td b,
html[data-theme="dark"] .modern-table td strong {
    color: #f4f8ff !important;
}

html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .table-action,
html[data-theme="dark"] body:not(.print-view-body) .table-action {
    border-color: #35506d !important;
    background: #102033 !important;
    color: #cce8ff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] .table-action:hover {
    border-color: #4a89b9 !important;
    background: #17304b !important;
}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .save-action,
html[data-theme="dark"] body:not(.print-view-body) .btn.primary {
    background: linear-gradient(135deg, #2f6fed 0%, #1098ad 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(47, 111, 237, .24);
}

html[data-theme="dark"] .workflow-badge,
html[data-theme="dark"] .po-number-badge,
html[data-theme="dark"] .procurement-progress-badge,
html[data-theme="dark"] .delivery-status-badge {
    border-color: rgba(148, 197, 255, .18);
    box-shadow: none;
}

html[data-theme="dark"] .workflow-badge.approved,
html[data-theme="dark"] .procurement-progress-badge.complete,
html[data-theme="dark"] .delivery-status-badge.delivered {
    background: rgba(20, 149, 83, .18) !important;
    color: #80e6ad !important;
}

html[data-theme="dark"] .workflow-badge.pending,
html[data-theme="dark"] .workflow-badge.pending_review,
html[data-theme="dark"] .workflow-badge.partially_approved,
html[data-theme="dark"] .delivery-status-badge.pending {
    background: rgba(59, 130, 246, .18) !important;
    color: #9ecfff !important;
}

html[data-theme="dark"] .workflow-badge.draft,
html[data-theme="dark"] .workflow-badge.saved,
html[data-theme="dark"] .draft-status-note {
    background: rgba(217, 119, 6, .18) !important;
    color: #ffd28a !important;
    border-color: rgba(251, 191, 36, .28) !important;
}

html[data-theme="dark"] .workflow-badge.rejected,
html[data-theme="dark"] .workflow-badge.cancelled,
html[data-theme="dark"] .delivery-status-badge.overdue {
    background: rgba(220, 38, 38, .18) !important;
    color: #ffaaa5 !important;
}

html[data-theme="dark"] .sidebar {
    background:
        linear-gradient(180deg, rgba(19, 55, 77, .82) 0%, rgba(7, 17, 31, .98) 100%),
        #07111f !important;
    border-right-color: rgba(126, 184, 231, .16);
}

html[data-theme="dark"] .side-link,
html[data-theme="dark"] .sidebar-logout {
    color: #c5d4e8;
}

html[data-theme="dark"] .side-link.active {
    background: linear-gradient(135deg, #2f6fed, #1098ad) !important;
    color: #ffffff;
}

html[data-theme="dark"] .sidebar-user,
html[data-theme="dark"] .sidebar-brand,
html[data-theme="dark"] .offline-status-control,
html[data-theme="dark"] .sidebar-live-status,
html[data-theme="dark"] .pwa-install-button {
    border-color: rgba(148, 197, 255, .16) !important;
    background: rgba(255, 255, 255, .065) !important;
}

html[data-theme="dark"] .login-body {
    background:
        radial-gradient(circle at 78% 18%, rgba(20, 149, 83, .16), transparent 28%),
        linear-gradient(135deg, #06101d 0%, #0c1b2e 52%, #09232d 100%);
}

html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-card.modern {
    border-color: #2a4059;
    background: rgba(15, 29, 47, .94);
    color: #edf5ff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .login-card h2,
html[data-theme="dark"] .login-brand strong,
html[data-theme="dark"] .mobile-login-brand strong {
    color: #f6faff;
}

html[data-theme="dark"] .login-card p,
html[data-theme="dark"] .login-card label,
html[data-theme="dark"] .mprm-login-description {
    color: #aebed1;
}

html[data-theme="dark"] .theme-toggle {
    border: 1px solid rgba(125, 211, 252, .22);
    background: linear-gradient(135deg, rgba(21, 35, 55, .94), rgba(16, 63, 74, .82));
    color: #edf8ff;
}

.theme-toggle {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 50px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #c9d9e8;
    border-radius: 8px;
    background: #ffffff;
    color: #15324f;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 10px 22px rgba(15, 35, 65, .06);
}

.theme-toggle-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e0f2fe, #ecfeff);
    color: #0f5e91;
}

.theme-toggle-icon svg,
.theme-toggle [data-theme-toggle-icon] svg {
    width: 18px;
    height: 18px;
}

.theme-toggle-copy {
    display: grid;
    min-width: 0;
}

.theme-toggle b,
.theme-toggle small,
.theme-toggle > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-toggle b {
    font-size: 12px;
    font-weight: 900;
}

.theme-toggle small {
    color: #71829a;
    font-size: 9px;
    font-weight: 800;
}

.sidebar-theme-toggle {
    margin: 8px 8px;
}

.login-theme-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    width: auto;
    grid-template-columns: 32px auto;
    min-height: 40px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
}

.login-theme-toggle .theme-toggle-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
}

.login-card.modern {
    position: relative;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon {
    background: linear-gradient(135deg, rgba(125, 211, 252, .18), rgba(52, 211, 153, .17));
    color: #a7f3d0;
}

html[data-theme="dark"] .theme-toggle small {
    color: #97abc1;
}

body:not(.print-view-body).sidebar-collapsed .sidebar-theme-toggle {
    grid-template-columns: 38px;
    justify-content: center;
    width: 50px;
    padding: 6px;
}

body:not(.print-view-body).sidebar-collapsed .sidebar-theme-toggle .theme-toggle-copy {
    display: none;
}

@media (max-width: 720px) {
    .login-theme-toggle {
        top: 14px;
        right: 14px;
    }

    .login-theme-toggle > span:last-child {
        display: none;
    }

    .login-theme-toggle {
        grid-template-columns: 32px;
        padding: 4px;
    }
}

/* High-contrast dark mode repair v55 */
html[data-theme="dark"] {
    --dm-page: #07111f;
    --dm-page-2: #0a1626;
    --dm-surface: #101d2e;
    --dm-surface-2: #132338;
    --dm-surface-3: #172a42;
    --dm-field: #0b1626;
    --dm-line: #2e4560;
    --dm-line-strong: #41617f;
    --dm-text: #f4f8ff;
    --dm-text-soft: #d6e3f3;
    --dm-muted: #b4c5d8;
    --dm-blue: #78c7ff;
    --dm-green: #7ee2af;
    --dm-amber: #ffd47d;
    --dm-red: #ffaaa5;
}

html[data-theme="dark"] body:not(.print-view-body),
html[data-theme="dark"] body:not(.print-view-body) .app-main,
html[data-theme="dark"] body:not(.print-view-body) .page-content,
html[data-theme="dark"] body:not(.print-view-body) .reviewer-page-content,
html[data-theme="dark"] body:not(.print-view-body) .po-page-content,
html[data-theme="dark"] body:not(.print-view-body) .account-page-content,
html[data-theme="dark"] body:not(.print-view-body) .notification-page-content,
html[data-theme="dark"] body:not(.print-view-body) .catalog-page-content,
html[data-theme="dark"] body:not(.print-view-body) .email-delivery-page,
html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page {
    background: linear-gradient(180deg, var(--dm-page) 0%, var(--dm-page-2) 52%, #08111d 100%) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    h1, h2, h3, h4, h5, h6, strong, b,
    label, th, td, span, p, li, dt, dd,
    .card-heading h2,
    .page-header h1,
    .po-title-row h2,
    .mr-head h2,
    .review-decision-card strong,
    .notification-item h3
) {
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    small, em, .muted, .table-subtext, .table-remarks,
    .notification-meta, .notification-item p,
    .card-heading span, .profile-pill small,
    .requester-identity small, .operations-table td>small,
    .review-decision-card small, .checker-decision-card small,
    .mr-history-event small, .audit-summary,
    .role-dashboard-notification span,
    .role-dashboard-notification small,
    .delivery-president-pending
) {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .content-card,
    .dashboard-card,
    .stat-card,
    .po-command-card,
    .president-po-card,
    .notification-center-card,
    .notification-summary-card,
    .notification-item,
    .delivery-card,
    .delivery-summary-grid a,
    .delivery-status-section,
    .mr-entry-section,
    .material-item-card,
    .mr-checker-card,
    .checker-decision-card,
    .review-decision-panel,
    .review-decision-card,
    .review-mobile-summary,
    .review-mobile-item,
    .review-mobile-detail-grid article,
    .review-mobile-totals,
    .review-mobile-notes,
    .mobile-review-action-bar,
    .reviewer-phone-status,
    .reviewer-mobile-welcome,
    .reviewer-queue-card,
    .review-paper-label,
    .profile-pill,
    .filter-card,
    .reviewer-filter-card,
    .notification-filter-card,
    .operations-filter,
    .audit-filter-card,
    .audit-table-card,
    .email-delivery-tools,
    .email-delivery-table-card,
    .email-summary-tile,
    .backup-card,
    .account-panel,
    .account-access-summary,
    .account-forced-workspace,
    .catalog-form-card,
    .catalog-list-card,
    .supplier-list-section,
    .po-source-option,
    .direct-po-reason-card,
    .mr-history-event,
    .role-dashboard-notifications,
    .role-dashboard-notification,
    .monitoring-status-chip,
    .login-loading-card,
    .system-notice-fallback
) {
    border-color: var(--dm-line) !important;
    background: linear-gradient(180deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .po-paper,
    .po-form,
    .saved-po-document,
    .mr-paper,
    .saved-mr-document,
    .print-page-shell,
    .review-paper-scroll,
    .po-preview-stage
) {
    border-color: var(--dm-line-strong) !important;
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .po-paper .info-box,
    .po-paper .rowline,
    .po-paper .total-row,
    .po-paper .saved-signs,
    .mr-paper .mr-meta-grid,
    .mr-paper .mr-signs,
    .mr-paper .mr-engineering-validation,
    .mr-paper .mr-title-block,
    .mr-history-changes,
    .audit-change-table,
    .audit-change-row,
    .revision-diff-grid,
    .revision-version-list a
) {
    border-color: var(--dm-line) !important;
    background: #0c1728 !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .table-wrap,
    .wide-table-wrap,
    .assigned-table-wrap,
    .catalog-table-wrap,
    .detailed-audit-table-wrap,
    .role-dashboard-table-wrap
) {
    border-color: var(--dm-line) !important;
    background: var(--dm-surface) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .3) !important;
    scrollbar-color: #5f7f9d #0d1828 !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    table,
    .data,
    .modern-table,
    .assigned-table,
    .operations-table,
    .items,
    .mr-items,
    .mr-history-changes,
    .revision-items table,
    .audit-change-table
) {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .modern-table th,
    .assigned-table th,
    .operations-table th,
    .items th,
    .mr-items th,
    .mr-history-changes th,
    .revision-diff-head,
    .audit-change-head,
    thead th
) {
    border-color: var(--dm-line-strong) !important;
    background: linear-gradient(180deg, #213a55 0%, #162b43 100%) !important;
    color: #f8fbff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .modern-table td,
    .assigned-table td,
    .operations-table td,
    .items td,
    .mr-items td,
    .mr-history-changes td,
    .revision-diff-grid>div,
    .audit-change-row>*,
    tbody td
) {
    border-color: var(--dm-line) !important;
    background: var(--dm-surface) !important;
    color: var(--dm-text-soft) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .modern-table tbody tr:nth-child(even) td,
    .assigned-table tbody tr:nth-child(even) td,
    .items tbody tr:nth-child(even) td,
    .mr-items tbody tr:nth-child(even) td
) {
    background: #0d1929 !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .modern-table tbody tr:hover td,
    .assigned-table tbody tr:hover td,
    .operations-table tbody tr:hover td,
    .items tbody tr:hover td,
    .mr-items tbody tr:hover td
) {
    background: var(--dm-surface-3) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    input,
    select,
    textarea,
    .input-with-icon,
    .filter-search,
    .catalog-textarea-suggestions
) {
    border-color: var(--dm-line-strong) !important;
    background: var(--dm-field) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(input::placeholder, textarea::placeholder) {
    color: #9db0c5 !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(input[readonly], textarea[readonly], select:disabled) {
    background: #17273a !important;
    color: #d0dced !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(input:focus, select:focus, textarea:focus) {
    border-color: #8bd8ff !important;
    box-shadow: 0 0 0 3px rgba(120, 199, 255, .18) !important;
    outline: 0 !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .btn.secondary,
    .table-action,
    .secondary-action,
    .icon-button,
    .expand-button,
    .pagination a
) {
    border-color: var(--dm-line-strong) !important;
    background: #13283f !important;
    color: #dff2ff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .btn.primary,
    .save-action,
    .login-button,
    .pagination a.active
) {
    background: linear-gradient(135deg, #3678f2 0%, #10a8b2 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 14px 30px rgba(54, 120, 242, .28) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .po-number-badge,
    .soft-badge,
    .archive-badge,
    .reviewer-phone-badge,
    .accounting-badge,
    .procurement-progress-badge,
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .status-badge,
    .email-status,
    .audit-category-badge
) {
    border-color: rgba(148, 197, 255, .22) !important;
    background: rgba(120, 199, 255, .14) !important;
    color: #ccecff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .workflow-badge.approved,
    .decision-badge.approved,
    .status-badge[data-tone="success"],
    .delivery-status-badge.delivered,
    .accounting-badge.paid
) {
    background: rgba(126, 226, 175, .16) !important;
    color: #aaf2ce !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .workflow-badge.pending,
    .workflow-badge.pending_review,
    .workflow-badge.pending_engineering,
    .workflow-badge.partially_approved,
    .decision-badge.pending,
    .delivery-status-badge.pending,
    .accounting-badge.on_process
) {
    background: rgba(255, 212, 125, .16) !important;
    color: #ffe0a0 !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .workflow-badge.rejected,
    .workflow-badge.cancelled,
    .decision-badge.rejected,
    .delivery-status-badge.overdue,
    .delivery-summary-grid a.overdue,
    .checker-decision-card.rejected,
    .review-decision-card.reject
) {
    border-color: rgba(255, 170, 165, .28) !important;
    background: linear-gradient(180deg, #2f1b25 0%, #211623 100%) !important;
    color: #ffd4d1 !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .review-decision-card.approve,
    .checker-decision-card.approved,
    .operations-kpis article.green
) {
    border-color: rgba(126, 226, 175, .3) !important;
    background: linear-gradient(180deg, #12302d 0%, #0f2429 100%) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .operations-kpis article,
    .operations-kpis article.amber,
    .operations-kpis article.red,
    .email-summary-tile,
    .delivery-summary-grid a.pending,
    .delivery-status-section.status-pending,
    .delivery-status-section.status-overdue
) {
    border-color: var(--dm-line) !important;
    background: linear-gradient(180deg, #132338 0%, #0f1c2d 100%) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .requester-identity::before,
    .profile-avatar,
    .user-avatar,
    .stat-icon,
    .reviewer-mobile-avatar,
    .decision-card-icon,
    .notification-item-icon,
    .mobile-app-tab-icon,
    .side-icon
) {
    background: linear-gradient(135deg, #2f6fed, #12a7b0) !important;
    color: #ffffff !important;
    border-color: rgba(167, 218, 255, .22) !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .login-card.modern,
    .login-card,
    .mobile-login-brand,
    .login-hint,
    .mprm-login-card-footer
) {
    border-color: var(--dm-line) !important;
    background: linear-gradient(180deg, rgba(19, 35, 56, .96) 0%, rgba(12, 25, 41, .98) 100%) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .login-visual {
    background: linear-gradient(135deg, #06101d 0%, #0f2c45 62%, #0a3a40 100%) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .login-feature-row span,
html[data-theme="dark"] body:not(.print-view-body) .mprm-login-flow span {
    border-color: rgba(148, 197, 255, .22) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #e8f6ff !important;
}

html[data-theme="dark"] body:not(.print-view-body) :where(
    .NotiflixNotify,
    .swal2-popup,
    .decision-loading-panel,
    .live-notification-toast
) {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}

@media (max-width: 900px) {
    html[data-theme="dark"] body:not(.print-view-body) .modern-table tbody tr,
    html[data-theme="dark"] body:not(.print-view-body) .assigned-table tr,
    html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-table tr {
        border-color: var(--dm-line) !important;
        background: var(--dm-surface) !important;
    }

    html[data-theme="dark"] body:not(.print-view-body) .modern-table td::before,
    html[data-theme="dark"] body:not(.print-view-body) .assigned-table td::before,
    html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-table td::before {
        color: var(--dm-blue) !important;
    }
}

/* Pastel balanced dark mode polish v57 */
html[data-theme="dark"] {
    --dm-page: #07111f;
    --dm-page-2: #0a1524;
    --dm-panel: #101f33;
    --dm-panel-2: #132740;
    --dm-panel-3: #172d48;
    --dm-field: #081525;
    --dm-line: #35506d;
    --dm-line-soft: #263f5b;
    --dm-text: #f8fbff;
    --dm-copy: #dce8f6;
    --dm-muted: #b8c9dd;
    --dm-blue-ink: #9fd8ff;
    --dm-mint-ink: #a9f3d0;
    --dm-amber-ink: #ffe0a6;
    --dm-rose-ink: #ffc3c2;
    --dm-lavender-ink: #d6d1ff;
}

html[data-theme="dark"] body:not(.print-view-body),
html[data-theme="dark"] body:not(.print-view-body) .app-main,
html[data-theme="dark"] body:not(.print-view-body) .page-content,
html[data-theme="dark"] body:not(.print-view-body) .role-dashboard-page-content,
html[data-theme="dark"] body:not(.print-view-body) .dashboard-browser-main {
    background:
        radial-gradient(circle at 86% 8%, rgba(45, 212, 191, .08), transparent 26%),
        linear-gradient(180deg, var(--dm-page) 0%, var(--dm-page-2) 56%, #060e19 100%) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .hero-note.card-soft,
html[data-theme="dark"] body:not(.print-view-body) .page-content .card-soft,
html[data-theme="dark"] body:not(.print-view-body) .page-content .stats-grid .stat-card,
html[data-theme="dark"] body:not(.print-view-body) .role-dashboard .role-dashboard-counter,
html[data-theme="dark"] body:not(.print-view-body) .role-dashboard .role-dashboard-work,
html[data-theme="dark"] body:not(.print-view-body) .role-dashboard .role-dashboard-notifications,
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip,
html[data-theme="dark"] body:not(.print-view-body) .page-content .content-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .filter-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .reviewer-filter-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .operations-filter,
html[data-theme="dark"] body:not(.print-view-body) .page-content .notification-summary-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .notification-item,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-status-section,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-form,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-grid article,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-status-section,
html[data-theme="dark"] body:not(.print-view-body) .page-content .simple-po-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-upload-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-current-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-guidance-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-drop-zone,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-current-preview,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-name-preview,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-guidance-grid article,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-workspace,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-identity,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-settings,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-panel,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-access-summary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-project-list span {
    border-color: var(--dm-line-soft) !important;
    background:
        linear-gradient(180deg, rgba(23, 45, 72, .94) 0%, rgba(16, 31, 51, .98) 100%),
        var(--dm-panel) !important;
    background-color: var(--dm-panel) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .hero-note.card-soft,
html[data-theme="dark"] body:not(.print-view-body) .page-content .card-soft {
    border-color: rgba(162, 214, 255, .22) !important;
    background:
        linear-gradient(135deg, rgba(33, 54, 84, .96) 0%, rgba(16, 54, 68, .96) 100%),
        #102b3d !important;
    background-color: #102b3d !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .stats-grid .stat-card:nth-child(1),
html[data-theme="dark"] body:not(.print-view-body) .role-dashboard .role-dashboard-counter.tone-info,
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip:nth-child(1) {
    border-color: rgba(159, 216, 255, .32) !important;
    background:
        linear-gradient(135deg, rgba(31, 74, 115, .94), rgba(19, 42, 68, .98)),
        #132a44 !important;
    background-color: #132a44 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .stats-grid .stat-card:nth-child(2),
html[data-theme="dark"] body:not(.print-view-body) .role-dashboard .role-dashboard-counter.tone-warning,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-summary-grid a.pending {
    border-color: rgba(255, 224, 166, .32) !important;
    background:
        linear-gradient(135deg, rgba(76, 58, 24, .92), rgba(28, 42, 64, .98)),
        #2d2f3a !important;
    background-color: #2d2f3a !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .stats-grid .stat-card:nth-child(3),
html[data-theme="dark"] body:not(.print-view-body) .role-dashboard .role-dashboard-counter.tone-success,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-summary-grid a.delivered {
    border-color: rgba(169, 243, 208, .32) !important;
    background:
        linear-gradient(135deg, rgba(24, 72, 59, .92), rgba(18, 38, 54, .98)),
        #14342f !important;
    background-color: #14342f !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-summary-grid a.overdue,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-status-section.status-overdue,
html[data-theme="dark"] body:not(.print-view-body) .page-content .review-decision-card.reject {
    border-color: rgba(255, 195, 194, .34) !important;
    background:
        linear-gradient(135deg, rgba(67, 35, 49, .94), rgba(29, 30, 48, .98)),
        #322131 !important;
    background-color: #322131 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard .role-dashboard-action:not(.is-primary),
html[data-theme="dark"] body:not(.print-view-body) .page-header .header-tools .btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .po-command-actions .btn,
html[data-theme="dark"] body:not(.print-view-body) .page-content .btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .table-action,
html[data-theme="dark"] body:not(.print-view-body) .page-content button.table-action,
html[data-theme="dark"] body:not(.print-view-body) .page-content a.table-action {
    border-color: rgba(159, 216, 255, .34) !important;
    background:
        linear-gradient(135deg, rgba(30, 67, 101, .96), rgba(19, 58, 78, .96)),
        #173a53 !important;
    background-color: #173a53 !important;
    color: #eef9ff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .26) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard .role-dashboard-action.is-primary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .btn.primary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-save-button {
    border-color: rgba(143, 211, 255, .26) !important;
    background:
        linear-gradient(135deg, #2f6fed 0%, #16a8b8 100%),
        #1f6fb4 !important;
    background-color: #1f6fb4 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(47, 111, 237, .32) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .table-action.draft-action,
html[data-theme="dark"] body:not(.print-view-body) .page-content .btn.draft-submit {
    border-color: rgba(214, 209, 255, .36) !important;
    background:
        linear-gradient(135deg, rgba(67, 60, 112, .96), rgba(43, 51, 82, .96)),
        #3a315a !important;
    background-color: #3a315a !important;
    color: #f0edff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard .role-dashboard-section-head,
html[data-theme="dark"] body:not(.print-view-body) .page-content .content-card > .card-heading,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-panel-heading,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-section-heading {
    border-color: rgba(159, 216, 255, .2) !important;
    background:
        linear-gradient(135deg, rgba(24, 51, 80, .86), rgba(18, 67, 73, .62)),
        #132a44 !important;
    background-color: #132a44 !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-section-heading {
    margin: -18px -18px 0 !important;
    padding: 18px 22px !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-card-summary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-details-editor summary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-tabs {
    border-color: rgba(159, 216, 255, .22) !important;
    background:
        linear-gradient(135deg, rgba(21, 44, 70, .9), rgba(15, 34, 55, .96)),
        #10243a !important;
    background-color: #10243a !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .account-tabs [role="tab"] {
    border-color: transparent !important;
    background: transparent !important;
    color: #c8d9ec !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .account-tabs [role="tab"][aria-selected="true"] {
    border-color: rgba(159, 216, 255, .34) !important;
    background:
        linear-gradient(135deg, rgba(47, 111, 237, .2), rgba(22, 168, 184, .16)),
        #102a44 !important;
    background-color: #102a44 !important;
    color: #f8fbff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-grid article:nth-child(1) .accounting-summary-icon,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-icon.ready {
    border-color: rgba(159, 216, 255, .24) !important;
    background:
        linear-gradient(135deg, rgba(47, 111, 237, .25), rgba(22, 168, 184, .17)),
        #143d61 !important;
    background-color: #143d61 !important;
    color: #bde5ff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-grid article:nth-child(2) .accounting-summary-icon,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-icon.on_process {
    border-color: rgba(255, 224, 166, .24) !important;
    background:
        linear-gradient(135deg, rgba(255, 212, 125, .2), rgba(214, 209, 255, .12)),
        #3d3018 !important;
    background-color: #3d3018 !important;
    color: #ffe0a6 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-grid article:nth-child(3) .accounting-summary-icon,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-icon.paid {
    border-color: rgba(169, 243, 208, .24) !important;
    background:
        linear-gradient(135deg, rgba(20, 149, 83, .24), rgba(22, 168, 184, .13)),
        #143b31 !important;
    background-color: #143b31 !important;
    color: #a9f3d0 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .soft-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content .po-number-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-section-count,
html[data-theme="dark"] body:not(.print-view-body) .page-content .workflow-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-status-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-status {
    border-color: rgba(159, 216, 255, .28) !important;
    background:
        linear-gradient(135deg, rgba(31, 74, 115, .82), rgba(22, 72, 80, .68)),
        #173c4d !important;
    background-color: #173c4d !important;
    color: #dbf4ff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .workflow-badge.approved,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-status-badge.delivered,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-status.tone-success,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-badge.paid {
    border-color: rgba(169, 243, 208, .28) !important;
    background-color: #173c33 !important;
    color: #c8f8df !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .workflow-badge.pending,
html[data-theme="dark"] body:not(.print-view-body) .page-content .workflow-badge.pending_review,
html[data-theme="dark"] body:not(.print-view-body) .page-content .workflow-badge.partially_approved,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-status-badge.pending,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-status.tone-warning {
    border-color: rgba(255, 224, 166, .3) !important;
    background-color: #3a301c !important;
    color: #ffe3ac !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .workflow-badge.rejected,
html[data-theme="dark"] body:not(.print-view-body) .page-content .workflow-badge.cancelled,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-status-badge.overdue,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-status.tone-danger {
    border-color: rgba(255, 195, 194, .3) !important;
    background-color: #442331 !important;
    color: #ffd2cf !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .modern-table th,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-table th,
html[data-theme="dark"] body:not(.print-view-body) .page-content .simple-po-list .simple-po-card:first-child,
html[data-theme="dark"] body:not(.print-view-body) .page-content thead th {
    border-color: rgba(159, 216, 255, .22) !important;
    background:
        linear-gradient(180deg, rgba(31, 61, 94, .96), rgba(19, 42, 68, .98)),
        #132a44 !important;
    background-color: #132a44 !important;
    color: #f4fbff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .modern-table td,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-table td,
html[data-theme="dark"] body:not(.print-view-body) .page-content .simple-po-list article,
html[data-theme="dark"] body:not(.print-view-body) .page-content tbody td {
    border-color: rgba(113, 151, 190, .2) !important;
    background: #0f2033 !important;
    color: var(--dm-copy) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .modern-table tbody tr:nth-child(even) td,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-table tbody tr:nth-child(even) td,
html[data-theme="dark"] body:not(.print-view-body) .page-content tbody tr:nth-child(even) td {
    background: #12263c !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content input,
html[data-theme="dark"] body:not(.print-view-body) .page-content select,
html[data-theme="dark"] body:not(.print-view-body) .page-content textarea {
    border-color: rgba(131, 180, 225, .36) !important;
    background: #081525 !important;
    color: #f8fbff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content input::placeholder,
html[data-theme="dark"] body:not(.print-view-body) .page-content textarea::placeholder {
    color: #9fb5ca !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content h1,
html[data-theme="dark"] body:not(.print-view-body) .page-content h2,
html[data-theme="dark"] body:not(.print-view-body) .page-content h3,
html[data-theme="dark"] body:not(.print-view-body) .page-content h4,
html[data-theme="dark"] body:not(.print-view-body) .page-content strong,
html[data-theme="dark"] body:not(.print-view-body) .page-content b,
html[data-theme="dark"] body:not(.print-view-body) .page-content label,
html[data-theme="dark"] body:not(.print-view-body) .page-content th {
    color: var(--dm-text) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content p,
html[data-theme="dark"] body:not(.print-view-body) .page-content small,
html[data-theme="dark"] body:not(.print-view-body) .page-content .table-subtext,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-notification span,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-notification small,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-president-pending,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-identity dd,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-project-list span,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-current-preview.empty small,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-guidance-grid p,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-summary-grid p {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .eyebrow,
html[data-theme="dark"] body:not(.print-view-body) .page-content .card-heading span,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-panel-heading span {
    color: #9be4ff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-drop-zone {
    border-style: dashed !important;
    background:
        linear-gradient(135deg, rgba(31, 74, 115, .55), rgba(18, 72, 68, .42)),
        #10233a !important;
    background-color: #10233a !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-upload-icon,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-avatar,
html[data-theme="dark"] body:not(.print-view-body) .page-content .stat-icon,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-action > span {
    border-color: rgba(188, 229, 255, .2) !important;
    background:
        linear-gradient(135deg, #2f6fed, #16a8b8),
        #1f6fb4 !important;
    background-color: #1f6fb4 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-current-preview.empty,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-name-preview,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-project-list span {
    border-color: rgba(214, 209, 255, .22) !important;
    background:
        linear-gradient(135deg, rgba(43, 51, 82, .72), rgba(17, 42, 56, .78)),
        #14263d !important;
    background-color: #14263d !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-form label,
html[data-theme="dark"] body:not(.print-view-body) .page-content .esign-guidance-grid article,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-access-summary {
    border-color: rgba(159, 216, 255, .2) !important;
    background:
        linear-gradient(135deg, rgba(18, 42, 68, .82), rgba(19, 58, 65, .56)),
        #10243a !important;
    background-color: #10243a !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-form label > span,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-form label > small {
    color: var(--dm-muted) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .content-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .filter-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-status-section,
html[data-theme="dark"] body:not(.print-view-body) .page-content .accounting-status-section,
html[data-theme="dark"] body:not(.print-view-body) .page-content .account-workspace {
    border-radius: 18px !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .filter-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .reviewer-filter-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .operations-filter {
    padding: 18px !important;
    gap: 12px !important;
}

/* v57 compact M.R material cards and named readability repairs */
body:not(.print-view-body) .material-item-list {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 18px;
    align-items: start;
}

body:not(.print-view-body) .material-item-card {
    align-content: start;
    min-height: 0;
    padding: 16px;
}

body:not(.print-view-body) .material-item-card-head {
    margin-bottom: 2px;
}

body:not(.print-view-body) .material-item-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(118px, .65fr);
    gap: 12px 14px;
}

body:not(.print-view-body) .material-item-fields label {
    margin: 0;
}

body:not(.print-view-body) .material-description-field,
body:not(.print-view-body) .material-quantity-field,
body:not(.print-view-body) .material-date-field,
body:not(.print-view-body) .material-unit-field {
    grid-column: auto;
}

body:not(.print-view-body) .material-purpose-field {
    grid-column: 1 / -1;
}

body:not(.print-view-body) .material-item-card input,
body:not(.print-view-body) .material-item-card select {
    min-height: 42px;
}

body:not(.print-view-body) .mr-entry-number,
body:not(.print-view-body) .mr-entry-number b {
    color: #0f2f5f !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .mr-entry-number,
html[data-theme="dark"] body:not(.print-view-body) .page-content .mr-entry-number b {
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #0f2f5f !important;
}

body:not(.print-view-body) .page-header .header-tools .btn.secondary,
body:not(.print-view-body) .page-header .header-tools a.btn.secondary {
    background: #f8fbff !important;
    border-color: #cfe0f3 !important;
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-header .header-tools .btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-header .header-tools a.btn.secondary {
    background:
        linear-gradient(135deg, #f8fbff, #e8f3ff) !important;
    background-color: #f8fbff !important;
    border-color: rgba(188, 215, 239, .95) !important;
    color: #102033 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24) !important;
}

body:not(.print-view-body) .hero-note.card-soft .mini-info-row,
body:not(.print-view-body) .users-page .hero-note.card-soft .mini-info-row {
    background: #f7fbff !important;
    border: 1px solid #dbeafe !important;
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .hero-note.card-soft .mini-info-row,
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .hero-note.card-soft .mini-info-row,
html[data-theme="dark"] body:not(.print-view-body) .page-content .users-page .hero-note.card-soft .mini-info-row {
    background:
        linear-gradient(135deg, #f8fbff, #edf7ff) !important;
    background-color: #f8fbff !important;
    border-color: rgba(188, 215, 239, .95) !important;
    color: #102033 !important;
}

body:not(.print-view-body) .hero-note.card-soft .mini-info-row span,
body:not(.print-view-body) .hero-note.card-soft .mini-info-row b,
body:not(.print-view-body) .users-page .hero-note.card-soft .mini-info-row span,
body:not(.print-view-body) .users-page .hero-note.card-soft .mini-info-row b {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .hero-note.card-soft .mini-info-row span,
html[data-theme="dark"] body:not(.print-view-body) .page-content .hero-note.card-soft .mini-info-row b,
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .hero-note.card-soft .mini-info-row span,
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .hero-note.card-soft .mini-info-row b,
html[data-theme="dark"] body:not(.print-view-body) .page-content .users-page .hero-note.card-soft .mini-info-row span,
html[data-theme="dark"] body:not(.print-view-body) .page-content .users-page .hero-note.card-soft .mini-info-row b {
    color: #102033 !important;
}

body:not(.print-view-body) .po-command-card,
body:not(.print-view-body) .po-source-option.direct-source,
body:not(.print-view-body) .direct-po-reason-card,
body:not(.print-view-body) .mr-po-live-status,
body:not(.print-view-body) .monitoring-top-card,
body:not(.print-view-body) .role-preview,
body:not(.print-view-body) .delivery-president-pending,
body:not(.print-view-body) .president-po-top,
body:not(.print-view-body) .president-po-footer {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .po-command-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .po-source-option.direct-source,
html[data-theme="dark"] body:not(.print-view-body) .page-content .direct-po-reason-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-top-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-preview,
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-president-pending,
html[data-theme="dark"] body:not(.print-view-body) .page-content .president-po-top,
html[data-theme="dark"] body:not(.print-view-body) .page-content .president-po-footer {
    border-color: rgba(188, 215, 239, .95) !important;
    background:
        linear-gradient(135deg, #f8fbff 0%, #eef8ff 100%) !important;
    background-color: #f8fbff !important;
    color: #102033 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .2) !important;
}

body:not(.print-view-body) .po-command-card :is(h2, h3, p, span, strong, b, small),
body:not(.print-view-body) .po-source-option.direct-source :is(b, small, span),
body:not(.print-view-body) .direct-po-reason-card :is(label, span, b, p, small),
body:not(.print-view-body) .mr-po-live-status,
body:not(.print-view-body) .monitoring-top-card :is(.eyebrow, h2, h3, p, span, strong, b, small),
body:not(.print-view-body) .role-preview :is(span, b, small),
body:not(.print-view-body) .delivery-president-pending,
body:not(.print-view-body) .president-po-top :is(span, strong, b, small),
body:not(.print-view-body) .president-po-footer :is(span, strong, b, small) {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .po-command-card :is(h2, h3, p, span, strong, b, small),
html[data-theme="dark"] body:not(.print-view-body) .page-content .po-source-option.direct-source :is(b, small, span),
html[data-theme="dark"] body:not(.print-view-body) .page-content .direct-po-reason-card :is(label, span, b, p, small),
html[data-theme="dark"] body:not(.print-view-body) .page-content .mr-po-live-status,
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-top-card :is(.eyebrow, h2, h3, p, span, strong, b, small),
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-preview :is(span, b, small),
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-president-pending,
html[data-theme="dark"] body:not(.print-view-body) .page-content .president-po-top :is(span, strong, b, small),
html[data-theme="dark"] body:not(.print-view-body) .page-content .president-po-footer :is(span, strong, b, small) {
    color: #102033 !important;
}

body:not(.print-view-body) .mr-po-live-status.good,
html[data-theme="dark"] body:not(.print-view-body) .page-content .mr-po-live-status.good {
    border-color: #a7f3d0 !important;
    background: #ecfdf5 !important;
    background-color: #ecfdf5 !important;
    color: #064e3b !important;
}

body:not(.print-view-body) .mr-po-live-status.checking,
html[data-theme="dark"] body:not(.print-view-body) .page-content .mr-po-live-status.checking {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    color: #1e3a8a !important;
}

body:not(.print-view-body) .mr-po-live-status.bad,
html[data-theme="dark"] body:not(.print-view-body) .page-content .mr-po-live-status.bad {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    background-color: #fff1f2 !important;
    color: #881337 !important;
}

body:not(.print-view-body) .president-po-body {
    background: #10233a;
}

body:not(.print-view-body) .president-po-body :is(h3, p, span, small, b, strong) {
    color: #f8fbff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .president-po-body {
    background: #10233a !important;
    background-color: #10233a !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .president-po-body :is(h3, p, span, small, b, strong) {
    color: #f8fbff !important;
}

body:not(.print-view-body) .president-po-footer .decision-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content .president-po-footer .decision-badge {
    border-color: #b7ead1 !important;
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    color: #064e3b !important;
}

body:not(.print-view-body) .users-page .modern-table .role-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .modern-table .role-badge,
html[data-theme="dark"] body:not(.print-view-body) .page-content .users-page .modern-table .role-badge {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    color: #102033 !important;
}

body:not(.print-view-body) .users-page .hero-note.card-soft,
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .hero-note.card-soft,
html[data-theme="dark"] body:not(.print-view-body) .page-content .users-page .hero-note.card-soft {
    padding: clamp(24px, 2.5vw, 36px) !important;
}

body:not(.print-view-body) .users-page .hero-note.card-soft > p,
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .hero-note.card-soft > p,
html[data-theme="dark"] body:not(.print-view-body) .page-content .users-page .hero-note.card-soft > p {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .hero-note.card-soft,
html[data-theme="dark"] body:not(.print-view-body) .page-content .users-page .hero-note.card-soft {
    border-color: rgba(188, 215, 239, .95) !important;
    background:
        linear-gradient(135deg, #f8fbff 0%, #eff8ff 100%) !important;
    background-color: #f8fbff !important;
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-table td[data-label="Reference"],
html[data-theme="dark"] body:not(.print-view-body) .page-content .role-dashboard-table td[data-label="Reference"] a,
html[data-theme="dark"] body:not(.print-view-body) .page-content .operations-table td:first-child,
html[data-theme="dark"] body:not(.print-view-body) .page-content .operations-table td:first-child :is(a, b, strong, small, span),
html[data-theme="dark"] body:not(.print-view-body) .page-content .detailed-audit-table td[data-label="Reference"],
html[data-theme="dark"] body:not(.print-view-body) .page-content .detailed-audit-table td[data-label="Reference"] :is(a, b, strong, small, span),
html[data-theme="dark"] body:not(.print-view-body) .page-content .login-trail-table td:first-child,
html[data-theme="dark"] body:not(.print-view-body) .page-content .login-trail-table td:first-child :is(a, b, strong, small, span) {
    color: #f8fbff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .material-item-card {
    border-color: rgba(159, 216, 255, .22) !important;
    background:
        linear-gradient(135deg, rgba(19, 42, 68, .96), rgba(15, 39, 50, .96)) !important;
    background-color: #10243a !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .material-item-card-head strong,
html[data-theme="dark"] body:not(.print-view-body) .page-content .material-item-card label span {
    color: #f8fbff !important;
}

@media (max-width: 900px) {
    body:not(.print-view-body) .material-item-list {
        grid-template-columns: 1fr;
    }

    body:not(.print-view-body) .material-item-fields {
        grid-template-columns: 1fr;
    }

    body:not(.print-view-body) .material-description-field,
    body:not(.print-view-body) .material-quantity-field,
    body:not(.print-view-body) .material-date-field,
    body:not(.print-view-body) .material-unit-field,
    body:not(.print-view-body) .material-purpose-field {
        grid-column: 1 / -1;
    }
}

/* v58 pastel action/status polish and dark-mode print paper guard */
body:not(.print-view-body) .page-back-button,
body:not(.print-view-body) .page-header .header-tools .btn.secondary,
body:not(.print-view-body) .page-header .header-tools a.btn.secondary,
body:not(.print-view-body) .print-toolbar .btn.secondary,
body:not(.print-view-body) .print-toolbar a.btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-back-button,
html[data-theme="dark"] body:not(.print-view-body) .page-header .header-tools .btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-header .header-tools a.btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .print-toolbar .btn.secondary {
    border-color: #bfdbfe !important;
    background: #dbeafe !important;
    background-color: #dbeafe !important;
    color: #0f2f5f !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .14) !important;
}

body:not(.print-view-body) .page-back-button:hover,
body:not(.print-view-body) .page-header .header-tools .btn.secondary:hover,
body:not(.print-view-body) .page-header .header-tools a.btn.secondary:hover,
body:not(.print-view-body) .print-toolbar .btn.secondary:hover,
body:not(.print-view-body) .print-toolbar a.btn.secondary:hover,
html[data-theme="dark"] body:not(.print-view-body) .page-back-button:hover,
html[data-theme="dark"] body:not(.print-view-body) .page-header .header-tools .btn.secondary:hover,
html[data-theme="dark"] body:not(.print-view-body) .page-header .header-tools a.btn.secondary:hover,
html[data-theme="dark"] body:not(.print-view-body) .print-toolbar .btn.secondary:hover {
    border-color: #93c5fd !important;
    background: #bfdbfe !important;
    background-color: #bfdbfe !important;
    color: #0b2d57 !important;
}

body:not(.print-view-body) .table-action,
body:not(.print-view-body) .modern-table .btn.secondary,
body:not(.print-view-body) .assigned-table .btn.secondary,
body:not(.print-view-body) .data .btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .table-action,
html[data-theme="dark"] body:not(.print-view-body) .page-content button.table-action,
html[data-theme="dark"] body:not(.print-view-body) .page-content a.table-action,
html[data-theme="dark"] body:not(.print-view-body) .page-content .modern-table .btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .assigned-table .btn.secondary,
html[data-theme="dark"] body:not(.print-view-body) .page-content .data .btn.secondary {
    border-color: #bae6fd !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
    box-shadow: 0 10px 22px rgba(14, 116, 144, .12) !important;
}

body:not(.print-view-body) .table-action:hover,
body:not(.print-view-body) .modern-table .btn.secondary:hover,
body:not(.print-view-body) .assigned-table .btn.secondary:hover,
body:not(.print-view-body) .data .btn.secondary:hover,
html[data-theme="dark"] body:not(.print-view-body) .page-content .table-action:hover,
html[data-theme="dark"] body:not(.print-view-body) .page-content .modern-table .btn.secondary:hover,
html[data-theme="dark"] body:not(.print-view-body) .page-content .assigned-table .btn.secondary:hover,
html[data-theme="dark"] body:not(.print-view-body) .page-content .data .btn.secondary:hover {
    border-color: #7dd3fc !important;
    background: #bae6fd !important;
    background-color: #bae6fd !important;
    color: #075985 !important;
}

body:not(.print-view-body) .table-action.draft-action,
body:not(.print-view-body) .btn.draft-submit,
html[data-theme="dark"] body:not(.print-view-body) .page-content .table-action.draft-action,
html[data-theme="dark"] body:not(.print-view-body) .page-content .btn.draft-submit {
    border-color: #ddd6fe !important;
    background: #ede9fe !important;
    background-color: #ede9fe !important;
    color: #4c1d95 !important;
}

body:not(.print-view-body) :is(
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .accounting-badge,
    .role-dashboard-status,
    .status-badge,
    .source-badge,
    .po-number-badge,
    .soft-badge,
    .delivery-section-count,
    .procurement-progress-badge,
    .archive-badge,
    .reviewer-phone-badge
),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .accounting-badge,
    .role-dashboard-status,
    .status-badge,
    .source-badge,
    .po-number-badge,
    .soft-badge,
    .delivery-section-count,
    .procurement-progress-badge,
    .archive-badge,
    .reviewer-phone-badge
) {
    border-color: #bae6fd !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
    box-shadow: none !important;
}

body:not(.print-view-body) :is(.workflow-badge.approved, .decision-badge.approved, .delivery-status-badge.delivered, .role-dashboard-status.tone-success, .status-badge.active, .status-badge[data-tone="success"], .procurement-progress-badge.complete),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(.workflow-badge.approved, .decision-badge.approved, .delivery-status-badge.delivered, .role-dashboard-status.tone-success, .status-badge.active, .status-badge[data-tone="success"], .procurement-progress-badge.complete) {
    border-color: #bbf7d0 !important;
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    color: #065f46 !important;
}

body:not(.print-view-body) :is(.workflow-badge.pending, .workflow-badge.pending_review, .workflow-badge.pending_engineering, .workflow-badge.partially_approved, .decision-badge.pending, .delivery-status-badge.pending, .role-dashboard-status.tone-warning, .accounting-badge.on_process),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(.workflow-badge.pending, .workflow-badge.pending_review, .workflow-badge.pending_engineering, .workflow-badge.partially_approved, .decision-badge.pending, .delivery-status-badge.pending, .role-dashboard-status.tone-warning, .accounting-badge.on_process) {
    border-color: #fde68a !important;
    background: #fef3c7 !important;
    background-color: #fef3c7 !important;
    color: #78350f !important;
}

body:not(.print-view-body) :is(.workflow-badge.rejected, .workflow-badge.cancelled, .decision-badge.rejected, .delivery-status-badge.overdue, .role-dashboard-status.tone-danger, .status-badge.inactive),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(.workflow-badge.rejected, .workflow-badge.cancelled, .decision-badge.rejected, .delivery-status-badge.overdue, .role-dashboard-status.tone-danger, .status-badge.inactive) {
    border-color: #fecdd3 !important;
    background: #ffe4e6 !important;
    background-color: #ffe4e6 !important;
    color: #881337 !important;
}

body:not(.print-view-body) :is(.workflow-badge.draft, .workflow-badge.saved, .draft-status-note, .accounting-badge.ready),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(.workflow-badge.draft, .workflow-badge.saved, .draft-status-note, .accounting-badge.ready) {
    border-color: #bfdbfe !important;
    background: #dbeafe !important;
    background-color: #dbeafe !important;
    color: #1e3a8a !important;
}

body:not(.print-view-body) :is(.accounting-badge.paid, .accounting-badge.ready-for-accounting),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(.accounting-badge.paid, .accounting-badge.ready-for-accounting) {
    border-color: #bbf7d0 !important;
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    color: #065f46 !important;
}

body:not(.print-view-body) .unread-pill,
html[data-theme="dark"] body:not(.print-view-body) .page-content .unread-pill {
    border: 1px solid #fcd34d !important;
    background: #fef3c7 !important;
    background-color: #fef3c7 !important;
    color: #78350f !important;
    box-shadow: 0 8px 18px rgba(245, 158, 11, .14) !important;
}

body:not(.print-view-body) :is(.role-badge, .login-trail-table .role-badge, .users-page .modern-table .role-badge),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(.role-badge, .login-trail-table .role-badge, .users-page .modern-table .role-badge) {
    border-color: #c4b5fd !important;
    background: #ede9fe !important;
    background-color: #ede9fe !important;
    color: #4c1d95 !important;
}

body:not(.print-view-body) .review-paper-label {
    justify-content: center;
}

body:not(.print-view-body) .review-paper-label > div:first-child,
html[data-theme="dark"] body:not(.print-view-body) .page-content .review-paper-label > div:first-child {
    flex: 1 1 280px;
    align-items: center !important;
    max-width: 720px;
    padding: 10px 18px;
    border: 1px solid #bae6fd !important;
    border-radius: 999px;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
    text-align: center;
}

body:not(.print-view-body) .review-paper-label > div:first-child :is(span, small),
html[data-theme="dark"] body:not(.print-view-body) .page-content .review-paper-label > div:first-child :is(span, small) {
    color: #0c4a6e !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .account-rules-card,
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .account-rules-card,
body:not(.print-view-body) .account-rules-card {
    border-color: #a7f3d0 !important;
    background: #ecfdf5 !important;
    background-color: #ecfdf5 !important;
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .account-rules-card :is(h3, p, span, b, strong, small),
html[data-theme="dark"] body:not(.print-view-body) .page-content.users-page .account-rules-card :is(h3, p, span, b, strong, small),
body:not(.print-view-body) .account-rules-card :is(h3, p, span, b, strong, small) {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-summary-band {
    border-color: rgba(125, 211, 252, .24) !important;
    background: #28435c !important;
    background-color: #28435c !important;
}

html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-summary-band > div,
html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-context-grid span,
html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-change-head > *,
html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-change-row > * {
    border-color: rgba(159, 216, 255, .2) !important;
    background: #10243a !important;
    background-color: #10243a !important;
    color: #f8fbff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-summary-band span,
html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-context-grid b,
html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-format-value {
    color: #c8d9ec !important;
}

html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-summary-band strong,
html[data-theme="dark"] body:not(.print-view-body) .detailed-audit-page .audit-change-row b {
    color: #f8fbff !important;
}

body:not(.print-view-body) .po-settings-page :is(.po-number-input-wrap, .setting-warning, .setting-note, .sequence-summary-list > div),
html[data-theme="dark"] body:not(.print-view-body) .po-settings-page :is(.po-number-input-wrap, .setting-warning, .setting-note, .sequence-summary-list > div) {
    border-color: #bae6fd !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #102033 !important;
    box-shadow: 0 10px 24px rgba(14, 116, 144, .08) !important;
}

body:not(.print-view-body) .po-settings-page :is(.po-number-input-wrap, .setting-warning, .setting-note, .sequence-summary-list > div) :is(span, b, strong, p, small, label),
html[data-theme="dark"] body:not(.print-view-body) .po-settings-page :is(.po-number-input-wrap, .setting-warning, .setting-note, .sequence-summary-list > div) :is(span, b, strong, p, small, label) {
    color: #102033 !important;
}

body:not(.print-view-body) .po-settings-page .po-number-input-wrap input,
html[data-theme="dark"] body:not(.print-view-body) .po-settings-page .po-number-input-wrap input {
    border-color: #bfdbfe !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}

body:not(.print-view-body) .project-department-grid form,
body:not(.print-view-body) .permission-grid fieldset,
body:not(.print-view-body) .setting-list > div,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .project-department-grid form,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .permission-grid fieldset,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .setting-list > div {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    color: #102033 !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .08) !important;
}

body:not(.print-view-body) .project-checker-card,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .project-checker-card {
    border-color: #99f6e4 !important;
    background: #ccfbf1 !important;
    background-color: #ccfbf1 !important;
    color: #102033 !important;
    box-shadow: 0 12px 28px rgba(13, 148, 136, .1) !important;
}

body:not(.print-view-body) .project-checker-option,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .project-checker-option {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    color: #102033 !important;
}

body:not(.print-view-body) .project-checker-option:has(input:checked),
body:not(.print-view-body) .project-checker-option.is-selected,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .project-checker-option:has(input:checked),
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .project-checker-option.is-selected {
    border-color: #93c5fd !important;
    background: #dbeafe !important;
    background-color: #dbeafe !important;
    box-shadow: inset 4px 0 #60a5fa !important;
}

body:not(.print-view-body) .project-checker-count,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .project-checker-count {
    border-color: #bae6fd !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
}

body:not(.print-view-body) .project-checker-save,
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page .project-checker-save {
    border-color: #c4b5fd !important;
    background: #ede9fe !important;
    background-color: #ede9fe !important;
    color: #4c1d95 !important;
}

body:not(.print-view-body) .operations-settings-page :is(
    .project-department-grid form,
    .project-checker-card,
    .project-checker-card-head,
    .project-checker-option,
    .permission-grid fieldset,
    .setting-list > div
) :is(b, strong, span, small, label, legend, em, p),
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page :is(
    .project-department-grid form,
    .project-checker-card,
    .project-checker-card-head,
    .project-checker-option,
    .permission-grid fieldset,
    .setting-list > div
) :is(b, strong, span, small, label, legend, em, p) {
    color: #102033 !important;
}

body:not(.print-view-body) .operations-settings-page :is(.project-department-grid select, .permission-grid select, .project-checker-option input),
html[data-theme="dark"] body:not(.print-view-body) .operations-settings-page :is(.project-department-grid select, .permission-grid select, .project-checker-option input) {
    border-color: #bfdbfe !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}

@media (max-width: 720px) {
    html[data-theme="dark"] body:not(.print-view-body).sidebar-open .sidebar :is(.sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout, .pwa-install-button) {
        border-color: #bae6fd !important;
        background: #e0f2fe !important;
        background-color: #e0f2fe !important;
        color: #0f172a !important;
    }

    html[data-theme="dark"] body:not(.print-view-body).sidebar-open .sidebar :is(.sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout, .pwa-install-button) :is(b, strong, span, small) {
        color: #0f172a !important;
    }
}

html[data-theme="dark"] body.print-view-body {
    color-scheme: light !important;
    background: #f2f6fb !important;
    background-color: #f2f6fb !important;
    color: #111827 !important;
}

html[data-theme="dark"] body.print-view-body :is(.print-page-shell, .saved-po-document, .po-paper, .saved-mr-document, .mr-paper) {
    border-color: #d8e4ec !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
}

html[data-theme="dark"] body.print-view-body :is(.saved-po-document, .po-paper, .saved-mr-document, .mr-paper) :is(h1, h2, h3, h4, h5, h6, b, strong, span, p, small, label, th, td, div),
html[data-theme="dark"] body.print-view-body :is(.saved-po-document .info-box, .po-paper .info-box, .saved-mr-document .mr-meta-grid, .mr-paper .mr-meta-grid) {
    color: #111827 !important;
}

html[data-theme="dark"] body.print-view-body :is(.saved-po-document .info-box, .po-paper .info-box, .saved-mr-document .mr-meta-grid, .mr-paper .mr-meta-grid) {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

@media print {
    html[data-theme="dark"] body.print-view-body,
    html[data-theme="dark"] body.print-view-body :is(.print-page-shell, .saved-po-document, .po-paper, .saved-mr-document, .mr-paper) {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}

/* v59 dark-mode readability hotfix for pastel controls and white inset panels */
body:not(.print-view-body) .page-back-button,
html[data-theme="dark"] body:not(.print-view-body) .page-back-button,
html[data-theme="dark"] body:not(.print-view-body) .page-header .page-back-button {
    border-color: #bfdbfe !important;
    background: #dbeafe !important;
    background-color: #dbeafe !important;
    color: #0f172a !important;
}

body:not(.print-view-body) .page-back-button :is(span, i, svg, path),
html[data-theme="dark"] body:not(.print-view-body) .page-back-button :is(span, i, svg, path),
html[data-theme="dark"] body:not(.print-view-body) .page-header .page-back-button :is(span, i, svg, path) {
    color: #0f172a !important;
    stroke: #0f172a !important;
}

body:not(.print-view-body) :is(
    .table-action,
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .accounting-badge,
    .role-dashboard-status,
    .status-badge,
    .source-badge,
    .po-number-badge,
    .soft-badge,
    .delivery-section-count,
    .procurement-progress-badge,
    .archive-badge,
    .reviewer-phone-badge,
    .unread-pill
) :is(span, small, strong, b, em),
html[data-theme="dark"] body:not(.print-view-body) .page-content :is(
    .table-action,
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .accounting-badge,
    .role-dashboard-status,
    .status-badge,
    .source-badge,
    .po-number-badge,
    .soft-badge,
    .delivery-section-count,
    .procurement-progress-badge,
    .archive-badge,
    .reviewer-phone-badge,
    .unread-pill
) :is(span, small, strong, b, em) {
    color: inherit !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-source-summary,
html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-selection-shell {
    border-color: #bfdbfe !important;
    background: #f8fbff !important;
    background-color: #f8fbff !important;
    color: #102033 !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-selection-heading,
html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-selection-bar {
    border-color: #cfe3f7 !important;
    background: #eef7ff !important;
    background-color: #eef7ff !important;
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-item-list {
    background: #eaf3fd !important;
    background-color: #eaf3fd !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-item-row {
    border-color: #c7dbef !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-item-row.is-disabled {
    border-color: #d8e5f2 !important;
    background: #f1f7fd !important;
    background-color: #f1f7fd !important;
    color: #334155 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content :is(
    .mr-po-source-summary,
    .mr-po-source-stats span,
    .mr-po-selection-heading,
    .mr-po-live-status,
    .mr-po-item-row,
    .mr-po-selection-count
) :is(h2, p, span, strong, b, small) {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content :is(.mr-po-source-summary, .mr-po-selection-heading) .eyebrow {
    color: #0e7490 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-source-stats span {
    border-color: #cfe3f7 !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-source-stats b,
html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-selection-count b {
    color: #0f2f5f !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-selection-count {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-selection-tools .btn.secondary {
    border-color: #bae6fd !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-item-state {
    border: 1px solid #bae6fd !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content.mr-po-select-content .mr-po-item-check span {
    border-color: #8fb1d5 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-readonly-details {
    border-color: #cfe3f7 !important;
    background: #f8fbff !important;
    background-color: #f8fbff !important;
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-readonly-details :is(span, b, p, small, div),
html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-president-pending {
    color: #102033 !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-readonly-details span {
    color: #32536f !important;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .delivery-readonly-details > small {
    color: #42627d !important;
}

body:not(.print-view-body) .review-paper-label,
html[data-theme="dark"] body:not(.print-view-body) .page-content .review-paper-label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 720px) minmax(0, 1fr);
    align-items: center !important;
    gap: 18px !important;
}

body:not(.print-view-body) .review-paper-label > div:first-child,
html[data-theme="dark"] body:not(.print-view-body) .page-content .review-paper-label > div:first-child {
    grid-column: 2 !important;
    justify-self: center !important;
    width: 100% !important;
    flex: none !important;
}

body:not(.print-view-body) .review-paper-label .po-zoom-controls,
html[data-theme="dark"] body:not(.print-view-body) .page-content .review-paper-label .po-zoom-controls {
    grid-column: 3 !important;
    justify-self: end !important;
}

@media (max-width: 720px) {
    body:not(.print-view-body) .review-paper-label,
    html[data-theme="dark"] body:not(.print-view-body) .page-content .review-paper-label {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        flex-direction: column !important;
    }

    body:not(.print-view-body) .review-paper-label .po-zoom-controls,
    html[data-theme="dark"] body:not(.print-view-body) .page-content .review-paper-label .po-zoom-controls {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* v60: keep lower sidebar controls readable in both app themes. */
body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout),
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) {
    border-color: #bfdbfe !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0f172a !important;
}

body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) :is(b, strong, span, small),
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) :is(b, strong, span, small) {
    color: #0f172a !important;
}

body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-logout) :is(.pwa-install-icon, .theme-toggle-icon, .offline-status-icon, .side-icon),
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-logout) :is(.pwa-install-icon, .theme-toggle-icon, .offline-status-icon, .side-icon) {
    border-color: #bae6fd !important;
    background: #bae6fd !important;
    background-color: #bae6fd !important;
    color: #075985 !important;
}

body:not(.print-view-body) .sidebar > .offline-status-control .offline-status-count,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .offline-status-control .offline-status-count {
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    color: #14532d !important;
}

body:not(.print-view-body) .sidebar > .sidebar-live-status i,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .sidebar-live-status i {
    background: #22c55e !important;
    background-color: #22c55e !important;
}

@media print {
    /* v60: P.O Checked By entries are text details only, so export them without the old signature slot or clipping heights. */
    body.po-document-page .po-paper .signs,
    body.po-document-page .po-paper .saved-signs {
        height: auto !important;
        min-height: 18mm !important;
        max-height: none !important;
        gap: 1.4mm !important;
        overflow: visible !important;
    }

    body.po-document-page .po-paper .sig,
    body.po-document-page .po-paper .checker-saved-cell,
    body.po-document-page .po-paper .checker-signature-cell,
    body.po-document-page .po-paper .po-source-approvals-cell {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.po-document-page .po-paper .po-source-approval-grid {
        gap: .3mm !important;
        margin-top: .22mm !important;
        overflow: visible !important;
    }

    body.po-document-page .po-paper .po-source-approval {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 5.9mm !important;
        height: auto !important;
        max-height: none !important;
        gap: 0 !important;
        padding: .25mm .45mm !important;
        overflow: visible !important;
    }

    body.po-document-page .po-paper .po-source-copy,
    body.po-document-page .po-paper .po-source-copy-only {
        display: grid !important;
        grid-template-rows: auto auto auto !important;
        align-content: center !important;
        gap: .08mm !important;
        height: auto !important;
        min-height: 5mm !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.po-document-page .po-paper .po-source-copy strong {
        display: block !important;
        font-size: 4.85pt !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: 1 !important;
    }

    body.po-document-page .po-paper .po-source-copy small,
    body.po-document-page .po-paper .po-source-copy time {
        font-size: 3.25pt !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.po-document-page .po-paper .po-source-slip-note {
        margin-top: .22mm !important;
        font-size: 3.25pt !important;
        line-height: 1.05 !important;
    }
}

/* v63: shared sidebar polish with tighter utility sizing and softer separators. */
body:not(.print-view-body) .sidebar,
body:not(.print-view-body) .reviewer-portal-body .sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 150px),
        radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--role-accent-2) 34%, transparent), transparent 30%),
        linear-gradient(180deg, #193a52 0%, #102d42 48%, #0d2638 100%) !important;
    border-right: 1px solid rgba(186, 230, 253, .28) !important;
    box-shadow: 18px 0 44px rgba(8, 24, 38, .26) !important;
}

body:not(.print-view-body) .sidebar-brand,
body:not(.print-view-body) .sidebar-user {
    border-color: rgba(186, 230, 253, .22) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 10px 24px rgba(2, 8, 23, .12) !important;
}

body:not(.print-view-body) .sidebar-brand {
    border-radius: 18px !important;
}

body:not(.print-view-body) .sidebar-user {
    margin-bottom: 12px !important;
    border-radius: 17px !important;
}

body:not(.print-view-body) .sidebar-divider {
    display: block;
    flex: 0 0 auto;
    height: 1px;
    width: calc(100% - 18px);
    margin: 9px auto 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(186, 230, 253, .48), transparent);
}

body:not(.print-view-body) .sidebar-divider-utilities {
    margin-top: 12px;
    margin-bottom: 9px;
}

body:not(.print-view-body) .sidebar .nav-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 8px 10px !important;
    color: #b9d7ea !important;
    font-size: 10px !important;
    letter-spacing: .13em !important;
    line-height: 1.1;
}

body:not(.print-view-body) .sidebar .nav-section::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    min-width: 18px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(186, 230, 253, .34), transparent);
}

body:not(.print-view-body) .sidebar .sidebar-utility-label {
    flex: 0 0 auto;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

body:not(.print-view-body) .side-link,
body:not(.print-view-body) .sidebar-logout {
    min-height: 46px !important;
    margin: 4px 0 !important;
    border-radius: 13px !important;
    color: #e9f5ff !important;
    border: 1px solid transparent !important;
}

body:not(.print-view-body) .side-link:hover {
    color: #ffffff !important;
    background: rgba(224, 242, 254, .12) !important;
    border-color: rgba(186, 230, 253, .2) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body:not(.print-view-body) .side-link.active {
    color: #092033 !important;
    background: linear-gradient(135deg, #dbeafe, #a7f3d0) !important;
    border-color: rgba(186, 230, 253, .72) !important;
    box-shadow: 0 14px 28px rgba(14, 165, 233, .2), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

body:not(.print-view-body) .side-link.active > span:not(.side-icon):not(.notification-count),
body:not(.print-view-body) .side-link.active .side-link-label {
    color: #092033 !important;
}

body:not(.print-view-body) .side-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background: rgba(125, 211, 252, .16) !important;
    color: #a5f3fc !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body:not(.print-view-body) .side-link.active .side-icon {
    background: linear-gradient(135deg, #2f80ed, #13adc7) !important;
    color: #ffffff !important;
}

body:not(.print-view-body) .notification-count {
    background: #fecdd3 !important;
    color: #7f1d1d !important;
    box-shadow: 0 8px 16px rgba(248, 113, 113, .18) !important;
}

body:not(.print-view-body) .desktop-sidebar-toggle,
body:not(.print-view-body) .mobile-sidebar-close {
    border-color: rgba(186, 230, 253, .32) !important;
    background: rgba(219, 234, 254, .14) !important;
    color: #e0f2fe !important;
}

body:not(.print-view-body) .desktop-sidebar-toggle:hover,
body:not(.print-view-body) .mobile-sidebar-close:hover {
    background: rgba(219, 234, 254, .22) !important;
}

body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout),
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) {
    min-height: 44px !important;
    height: 44px !important;
    margin: 4px 8px !important;
    padding: 6px 9px !important;
    gap: 9px !important;
    border-radius: 11px !important;
    color: #102033 !important;
    box-shadow: 0 7px 16px rgba(2, 8, 23, .10), inset 0 1px 0 rgba(255,255,255,.8) !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
}

body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) :is(b, strong, span, small),
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) :is(b, strong, span, small) {
    color: #102033 !important;
}

body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) :is(b, strong),
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) :is(b, strong) {
    font-size: 12px !important;
    line-height: 1.08 !important;
}

body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) small,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) small {
    font-size: 9px !important;
    line-height: 1.08 !important;
}

body:not(.print-view-body) .sidebar > .pwa-install-sidebar,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .pwa-install-sidebar {
    border-color: #bfdbfe !important;
    background: #dbeafe !important;
    background-color: #dbeafe !important;
}

body:not(.print-view-body) .sidebar > .pwa-refresh-sidebar,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .pwa-refresh-sidebar {
    border-color: #bae6fd !important;
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
}

body:not(.print-view-body) .sidebar > .sidebar-theme-toggle,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .sidebar-theme-toggle {
    border-color: #bbf7d0 !important;
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
}

body:not(.print-view-body) .sidebar > .offline-status-control,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .offline-status-control {
    border-color: #a7f3d0 !important;
    background: #d1fae5 !important;
    background-color: #d1fae5 !important;
}

body:not(.print-view-body) .sidebar > .offline-status-control[data-connection-state="offline"],
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .offline-status-control[data-connection-state="offline"] {
    border-color: #fde68a !important;
    background: #fef3c7 !important;
    background-color: #fef3c7 !important;
}

body:not(.print-view-body) .sidebar > .offline-status-control[data-connection-state="attention"],
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .offline-status-control[data-connection-state="attention"] {
    border-color: #fecaca !important;
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
}

body:not(.print-view-body) .sidebar > .sidebar-live-status,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .sidebar-live-status {
    border-color: #fed7aa !important;
    background: #ffedd5 !important;
    background-color: #ffedd5 !important;
}

body:not(.print-view-body) .sidebar > .sidebar-logout,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .sidebar-logout {
    border-color: #ddd6fe !important;
    background: #ede9fe !important;
    background-color: #ede9fe !important;
}

body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-logout) :is(.pwa-install-icon, .theme-toggle-icon, .offline-status-icon, .side-icon),
html[data-theme="dark"] body:not(.print-view-body) .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-logout) :is(.pwa-install-icon, .theme-toggle-icon, .offline-status-icon, .side-icon) {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
    border-color: rgba(15, 23, 42, .08) !important;
    background: rgba(255,255,255,.72) !important;
    background-color: rgba(255,255,255,.72) !important;
    color: #075985 !important;
    font-size: 15px !important;
}

body:not(.print-view-body) .sidebar > .sidebar-live-status i,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .sidebar-live-status i {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    background: #22c55e !important;
    background-color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .14) !important;
}

body:not(.print-view-body) .sidebar > .offline-status-control .offline-status-count,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .offline-status-control .offline-status-count {
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #14532d !important;
    font-size: 10px !important;
}

body:not(.print-view-body) .sidebar > .offline-status-control .offline-sync-button,
html[data-theme="dark"] body:not(.print-view-body) .sidebar > .offline-status-control .offline-sync-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-color: rgba(15, 23, 42, .1) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}

body:not(.print-view-body) .sidebar > .offline-status-control {
    grid-template-columns: 30px minmax(0, 1fr) auto 30px !important;
}

body:not(.print-view-body) .sidebar > .sidebar-live-status {
    padding-left: 13px !important;
}

body:not(.print-view-body).sidebar-collapsed .sidebar .sidebar-divider {
    width: 42px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

body:not(.print-view-body).sidebar-collapsed .sidebar .nav-section,
body:not(.print-view-body).sidebar-collapsed .sidebar-utility-label {
    display: none !important;
}

body:not(.print-view-body).sidebar-collapsed .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) {
    width: 48px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body:not(.print-view-body).sidebar-collapsed .sidebar > :is(.pwa-install-button, .sidebar-theme-toggle, .offline-status-control, .sidebar-live-status, .sidebar-logout) :is(.pwa-install-copy, .theme-toggle-copy, .offline-status-copy, .offline-status-count, span:last-child) {
    display: none !important;
}

@media (max-width: 900px) {
    body:not(.print-view-body) .sidebar,
    body:not(.print-view-body) .reviewer-portal-body .sidebar,
    body:not(.print-view-body).sidebar-collapsed .sidebar {
        background:
            linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 150px),
            linear-gradient(180deg, #1d425d, #102d42 52%, #0c2538) !important;
    }

    body:not(.print-view-body) .sidebar-divider {
        width: calc(100% - 16px);
    }
}


/* ========================================================================== */
/* Supplier Account Number + TIN snapshot fields (schema v47)                 */
/* ========================================================================== */
.rowline.supplier-financial-row {
    align-items: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

.rowline.supplier-financial-row input[readonly] {
    cursor: default;
    color: inherit;
    opacity: 1;
}

@media print {
    .other-information-box .supplier-financial-row {
        margin-top: .4mm !important;
        margin-bottom: .4mm !important;
    }

    .other-information-box .supplier-financial-row b,
    .other-information-box .supplier-financial-row input {
        padding: 0 .6mm !important;
        line-height: 1.02 !important;
    }

    /* Two extra supplier detail rows need a little more vertical room. */
    .info-grid,
    .info-box {
        height: 44mm !important;
        min-height: 44mm !important;
        max-height: 44mm !important;
    }

    .items {
        height: 147mm !important;
    }

    .items tbody tr,
    .items td {
        height: 6.95mm !important;
        min-height: 6.95mm !important;
        max-height: 6.95mm !important;
    }
}

/* MPRM v51 — SUBCON M.R route and secure supporting-document workspace. */
.mr-subcon-choice {
    margin-top: 18px;
    border: 1px solid rgba(14, 116, 144, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(236, 254, 255, .82), rgba(239, 246, 255, .72));
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mr-subcon-choice.is-selected {
    border-color: rgba(14, 116, 144, .42);
    box-shadow: 0 12px 28px rgba(8, 145, 178, .10);
}
.mr-subcon-toggle-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 15px 16px;
    cursor: pointer;
}
.mr-subcon-choice.is-locked .mr-subcon-toggle-card { cursor: default; }
.mr-subcon-checkbox-shell {
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
}
.mr-subcon-checkbox-shell input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.mr-subcon-checkmark {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 2px solid #a9c3d4;
    border-radius: 12px;
    color: transparent;
    background: #fff;
    transition: all .18s ease;
}
.mr-subcon-checkbox-shell input:checked + .mr-subcon-checkmark {
    color: #fff;
    border-color: #0e7490;
    background: linear-gradient(135deg, #0e7490, #0891b2);
    box-shadow: 0 7px 16px rgba(8, 145, 178, .22);
}
.mr-subcon-checkbox-shell input:focus-visible + .mr-subcon-checkmark {
    outline: 3px solid rgba(14, 116, 144, .22);
    outline-offset: 3px;
}
.mr-subcon-checkmark svg { width: 20px; height: 20px; }
.mr-subcon-choice-copy { min-width: 0; flex: 1; }
.mr-subcon-choice-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #0f3850;
}
.mr-subcon-choice-title > svg { width: 18px; height: 18px; color: #0e7490; }
.mr-subcon-choice-title b { font-size: 15px; }
.mr-subcon-choice-title em {
    padding: 4px 8px;
    border-radius: 999px;
    color: #0e7490;
    background: rgba(8, 145, 178, .10);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.mr-subcon-choice-copy small {
    display: block;
    margin-top: 5px;
    color: #5e7586;
    font-size: 11px;
    line-height: 1.45;
}
.mr-subcon-lock-note {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-top: 1px solid rgba(14, 116, 144, .12);
    color: #607888;
    background: rgba(255, 255, 255, .5);
    font-size: 10px;
    font-weight: 700;
}
.mr-subcon-lock-note svg { width: 13px; height: 13px; }
.mr-route-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 999px;
    color: #31566d;
    background: #f6f9fc;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.mr-route-chip.is-subcon {
    color: #0e667a;
    border-color: rgba(8, 145, 178, .2);
    background: rgba(236, 254, 255, .92);
}
.mr-route-chip svg { width: 14px; height: 14px; }
.mr-subcon-documents { display: grid; gap: 14px; }
.mr-subcon-route-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(14, 116, 144, .16);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(236, 254, 255, .94), rgba(240, 249, 255, .94));
}
.mr-subcon-route-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #0e7490, #0891b2);
}
.mr-subcon-route-icon svg { width: 19px; height: 19px; }
.mr-subcon-route-notice strong { color: #103d50; font-size: 12px; }
.mr-subcon-route-notice p { margin: 3px 0 0; color: #607888; font-size: 10px; line-height: 1.45; }
.mr-attachment-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    color: #36566b;
    font-size: 11px;
}
.mr-attachment-section-label span {
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef5f9;
    font-size: 9px;
    font-weight: 800;
}
.mr-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.mr-attachment-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 68px;
    padding: 9px;
    border: 1px solid #dce7ee;
    border-radius: 14px;
    background: #fff;
    transition: opacity .18s ease, border-color .18s ease, background-color .18s ease;
}
.mr-attachment-card.is-marked-remove {
    opacity: .52;
    border-color: rgba(220, 38, 38, .25);
    background: #fff7f7;
}
.mr-attachment-preview {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    color: #335b72;
    background: #eef5f9;
    text-decoration: none;
}
.mr-attachment-preview img,
.mr-new-attachment-icon img { width: 100%; height: 100%; object-fit: cover; }
.mr-pdf-preview { display: grid; place-items: center; gap: 2px; color: #b91c1c; font-size: 9px; }
.mr-pdf-preview svg { width: 21px; height: 21px; }
.mr-attachment-copy,
.mr-new-attachment-copy { min-width: 0; }
.mr-attachment-copy strong,
.mr-new-attachment-copy strong {
    display: block;
    overflow: hidden;
    color: #1f4055;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mr-attachment-copy small,
.mr-new-attachment-copy small { display: block; margin-top: 3px; color: #718595; font-size: 9px; }
.mr-attachment-remove {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.mr-attachment-remove input { position: absolute; opacity: 0; pointer-events: none; }
.mr-attachment-remove span,
.mr-attachment-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 7px;
    border: 1px solid #e5edf2;
    border-radius: 9px;
    color: #6a7d8b;
    background: #f8fafc;
    font-size: 8px;
    font-weight: 800;
    text-decoration: none;
}
.mr-attachment-remove input:checked + span { color: #b91c1c; border-color: #fecaca; background: #fff1f2; }
.mr-attachment-remove svg { width: 11px; height: 11px; }
.mr-attachment-dropzone {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 94px;
    padding: 14px;
    border: 1.5px dashed #9cc5d2;
    border-radius: 17px;
    background: rgba(247, 252, 253, .9);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.mr-attachment-dropzone:hover,
.mr-attachment-dropzone.is-dragging {
    border-color: #0891b2;
    background: #ecfeff;
}
.mr-attachment-dropzone.is-dragging { transform: translateY(-1px); }
.mr-attachment-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.mr-attachment-drop-icon {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: #0e7490;
    background: rgba(8, 145, 178, .10);
}
.mr-attachment-drop-icon svg { width: 22px; height: 22px; }
.mr-attachment-drop-copy strong { display: block; color: #173f54; font-size: 12px; }
.mr-attachment-drop-copy small { display: block; margin-top: 4px; color: #6b8190; font-size: 9px; line-height: 1.4; }
.mr-new-attachment-list { display: grid; gap: 7px; }
.mr-new-attachment-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid #e0e9ee;
    border-radius: 12px;
    background: #fff;
}
.mr-new-attachment-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: #eef5f9;
}
.mr-new-attachment-remove {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #e7edf1;
    border-radius: 9px;
    color: #697c89;
    background: #fff;
    cursor: pointer;
}
.mr-new-attachment-remove:hover { color: #b91c1c; border-color: #fecaca; background: #fff1f2; }
.mr-new-attachment-remove svg { width: 14px; height: 14px; }
.mr-attachment-requirement {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 13px;
    color: #496777;
    background: #f5f9fb;
}
.mr-attachment-requirement > svg { width: 18px; height: 18px; color: #0e7490; }
.mr-attachment-requirement > span { min-width: 0; flex: 1; }
.mr-attachment-requirement b,
.mr-attachment-requirement small { display: block; }
.mr-attachment-requirement b { color: #294e62; font-size: 10px; }
.mr-attachment-requirement small { margin-top: 2px; font-size: 8px; }
.mr-attachment-requirement > strong { color: #0e7490; font-size: 10px; white-space: nowrap; }
.mr-engineering-subcon-files {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 16px;
    border: 1px solid rgba(8, 145, 178, .18);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 55, 78, .08);
}
.mr-engineering-subcon-files .mr-attachment-grid { margin-top: 12px; }
.mr-subcon-print-marker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 3px 8px;
    border: 1px solid #0e7490;
    border-radius: 999px;
    color: #0e7490;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

html[data-theme="dark"] .mr-subcon-choice,
html[data-theme="dark"] .mr-subcon-route-notice,
html[data-theme="dark"] .mr-attachment-dropzone,
html[data-theme="dark"] .mr-attachment-requirement {
    border-color: rgba(103, 232, 249, .16);
    background: rgba(15, 58, 76, .48);
}
html[data-theme="dark"] .mr-subcon-choice-title,
html[data-theme="dark"] .mr-subcon-route-notice strong,
html[data-theme="dark"] .mr-attachment-drop-copy strong,
html[data-theme="dark"] .mr-attachment-requirement b { color: #e7f8ff; }
html[data-theme="dark"] .mr-subcon-choice-copy small,
html[data-theme="dark"] .mr-subcon-route-notice p,
html[data-theme="dark"] .mr-attachment-drop-copy small,
html[data-theme="dark"] .mr-attachment-requirement { color: #a8c4d3; }
html[data-theme="dark"] .mr-attachment-card,
html[data-theme="dark"] .mr-new-attachment-card,
html[data-theme="dark"] .mr-engineering-subcon-files { border-color: rgba(167, 213, 235, .12); background: #112d40; }
html[data-theme="dark"] .mr-attachment-copy strong,
html[data-theme="dark"] .mr-new-attachment-copy strong { color: #e7f4fb; }

@media (max-width: 700px) {
    .mr-subcon-toggle-card { align-items: flex-start; padding: 13px; }
    .mr-subcon-choice-title { gap: 6px; }
    .mr-route-chip { padding: 6px 8px; }
    .mr-attachment-grid { grid-template-columns: 1fr; }
    .mr-attachment-dropzone { grid-template-columns: 42px minmax(0, 1fr); padding: 12px; }
    .mr-attachment-dropzone > .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
    .mr-subcon-route-notice { align-items: flex-start; }
    .mr-engineering-subcon-files { width: calc(100% - 20px); padding: 12px; }
}


/* MPRM V52 — deterministic attachment viewer and reviewer decision status. */
.review-decision-status {
    box-sizing: border-box;
    width: min(1180px, calc(100% - 28px));
    margin: 14px auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #d7e2ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}
.review-decision-status-icon {
    width: 46px;
    min-width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
}
.review-decision-status-icon svg { width: 23px; height: 23px; }
.review-decision-status-copy { min-width: 0; flex: 1 1 auto; }
.review-decision-status-copy > span {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .09em;
    color: #64748b;
}
.review-decision-status-copy strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
    color: #0f172a;
}
.review-decision-status-copy p {
    margin: 4px 0 0;
    color: #475569;
    font-size: 12px;
}
.review-decision-status-copy small {
    display: inline-block;
    margin: 5px 10px 0 0;
    color: #64748b;
    font-size: 10px;
}
.review-decision-status-copy .review-decision-remarks { display: block; }
.review-decision-status.is-approved { border-color: #bbf7d0; background: #f0fdf4; }
.review-decision-status.is-approved .review-decision-status-icon { color: #166534; background: #dcfce7; }
.review-decision-status.is-approved .review-decision-status-copy strong { color: #166534; }
.review-decision-status.is-rejected { border-color: #fecaca; background: #fef2f2; }
.review-decision-status.is-rejected .review-decision-status-icon { color: #b91c1c; background: #fee2e2; }
.review-decision-status.is-rejected .review-decision-status-copy strong { color: #b91c1c; }
.review-decision-status.is-pending { border-color: #bae6fd; background: #f0f9ff; }
.review-decision-status.is-pending .review-decision-status-icon { color: #075985; background: #e0f2fe; }
.review-decision-status.is-pending .review-decision-status-copy strong { color: #075985; }

.mr-attachment-viewer-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #e9f3fb;
    background: #071b2d;
}
.mr-attachment-viewer-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(190, 218, 240, .14);
    background: rgba(14, 44, 74, .97);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.mr-attachment-back {
    min-height: 44px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(190, 218, 240, .18);
    border-radius: 12px;
    color: #ffffff;
    background: rgba(255,255,255,.07);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}
.mr-attachment-back:hover { background: rgba(255,255,255,.12); }
.mr-attachment-back svg { width: 17px; height: 17px; }
.mr-attachment-viewer-title { min-width: 0; }
.mr-attachment-viewer-title > span { display: block; color: #8ec5e8; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.mr-attachment-viewer-title strong { display: block; overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mr-attachment-viewer-title small { display: block; margin-top: 2px; color: #a9c3d9; font-size: 10px; }
.mr-attachment-viewer-actions { display: flex; align-items: center; gap: 7px; }
.mr-attachment-viewer-stage {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 18px;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: center;
    overflow: auto;
}
.mr-attachment-image-frame {
    width: 100%;
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
}
.mr-attachment-image-frame img {
    display: block;
    max-width: min(1400px, 100%);
    max-height: calc(100vh - 118px);
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    background: #fff;
}
.mr-attachment-pdf-frame {
    width: min(1400px, 100%);
    min-height: calc(100vh - 118px);
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.mr-attachment-viewer-unsupported {
    margin: auto;
    padding: 32px;
    text-align: center;
    border: 1px solid rgba(190,218,240,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.05);
}
.mr-attachment-viewer-unsupported svg { width: 36px; height: 36px; }

@media (max-width: 700px) {
    .review-decision-status {
        width: calc(100% - 18px);
        margin: 9px auto;
        padding: 12px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 14px;
    }
    .review-decision-status-icon { width: 40px; min-width: 40px; height: 40px; border-radius: 12px; }
    .review-decision-status-copy strong { font-size: 14px; }
    .review-decision-status-copy p { font-size: 11px; }
    .mr-attachment-viewer-toolbar {
        position: sticky;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 9px;
        min-height: 70px;
        padding-bottom: 9px;
    }
    .mr-attachment-back { min-height: 42px; padding: 0 11px; }
    .mr-attachment-back span { display: none; }
    .mr-attachment-viewer-title strong { font-size: 12px; }
    .mr-attachment-viewer-title small { font-size: 9px; }
    .mr-attachment-viewer-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
    .mr-attachment-viewer-actions .btn { width: 100%; justify-content: center; }
    .mr-attachment-viewer-stage { padding: 8px; }
    .mr-attachment-image-frame img { max-height: calc(100vh - 150px); border-radius: 8px; }
    .mr-attachment-pdf-frame { min-height: calc(100vh - 150px); border-radius: 8px; }
}

/* MPRM V53 document-view application shell */
body.document-view-body {
    min-height: 100vh;
    background: #eaf0f6;
}
body.document-view-body .document-app-layout {
    min-height: 100vh;
}
body.document-view-body .document-view-main {
    min-width: 0;
    min-height: 100vh;
    padding-bottom: 36px;
}
body.document-view-body .document-view-main > .print-toolbar {
    top: 0;
    z-index: 45;
}
body.document-view-body .print-page-shell {
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 900px) {
    body.document-view-body .document-view-main {
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
    }
    body.document-view-body .print-toolbar {
        padding: 12px 14px;
    }
}
@media print {
    body.document-view-body .document-app-layout { display: block !important; }
    body.document-view-body .document-view-main {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* MPRM V53 global action controls */
body:not(.print-view-body) .table-action,
body:not(.print-view-body) button.table-action,
body:not(.print-view-body) a.table-action {
    box-sizing: border-box !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #24415f !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .07) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
body:not(.print-view-body) .table-action:hover {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: 0 7px 16px rgba(37, 99, 235, .12) !important;
    transform: translateY(-1px) !important;
}
body:not(.print-view-body) .table-action-icon {
    width: 17px;
    min-width: 17px;
    height: 17px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 17px;
}
body:not(.print-view-body) .table-action-icon svg,
body:not(.print-view-body) .table-action-icon [data-lucide] {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.2 !important;
}
body:not(.print-view-body) .table-action.is-view { border-color: #bae6fd !important; background: #f0f9ff !important; color: #075985 !important; }
body:not(.print-view-body) .table-action.is-edit { border-color: #ddd6fe !important; background: #f5f3ff !important; color: #5b21b6 !important; }
body:not(.print-view-body) .table-action.is-history { border-color: #cbd5e1 !important; background: #f8fafc !important; color: #475569 !important; }
body:not(.print-view-body) .table-action.is-primary { border-color: #bfdbfe !important; background: #dbeafe !important; color: #1d4ed8 !important; }
body:not(.print-view-body) .table-action.is-success { border-color: #bbf7d0 !important; background: #ecfdf5 !important; color: #047857 !important; }
body:not(.print-view-body) .table-action.is-warning { border-color: #fde68a !important; background: #fffbeb !important; color: #92400e !important; }
body:not(.print-view-body) .table-action.is-danger,
body:not(.print-view-body) .table-action.danger-link {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, .08) !important;
}
body:not(.print-view-body) .table-action-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
}
body:not(.print-view-body) .table-action-group form { margin: 0 !important; }
@media (max-width: 700px) {
    body:not(.print-view-body) .table-action-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 7px !important;
    }
    body:not(.print-view-body) .table-action-group form,
    body:not(.print-view-body) .table-action-group .table-action {
        width: 100% !important;
        min-width: 0 !important;
    }
}
@media (max-width: 390px) {
    body:not(.print-view-body) .table-action-group { grid-template-columns: 1fr !important; }
}

/* MPRM V53 status indicators */
body:not(.print-view-body) :is(
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .accounting-badge,
    .role-dashboard-status,
    .status-badge,
    .procurement-progress-badge,
    .archive-badge
) {
    box-sizing: border-box !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 5px 10px !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: .025em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
body:not(.print-view-body) :is(
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .accounting-badge,
    .role-dashboard-status,
    .status-badge,
    .procurement-progress-badge,
    .archive-badge
)::before {
    content: "";
    width: 7px;
    min-width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: .86;
}
body:not(.print-view-body) :is(.workflow-badge.approved, .decision-badge.approved, .delivery-status-badge.delivered, .role-dashboard-status.tone-success, .status-badge.active, .procurement-progress-badge.complete, .accounting-badge.paid) {
    border-color: #a7e7c1 !important; background: #ecfdf5 !important; color: #047857 !important;
}
body:not(.print-view-body) :is(.workflow-badge.pending, .workflow-badge.pending_review, .workflow-badge.pending_engineering, .workflow-badge.partially_approved, .decision-badge.pending, .delivery-status-badge.pending, .role-dashboard-status.tone-warning, .accounting-badge.on_process) {
    border-color: #f5d57a !important; background: #fffbeb !important; color: #92400e !important;
}
body:not(.print-view-body) :is(.workflow-badge.rejected, .workflow-badge.cancelled, .decision-badge.rejected, .delivery-status-badge.overdue, .role-dashboard-status.tone-danger, .status-badge.inactive) {
    border-color: #f8b4b4 !important; background: #fff1f2 !important; color: #b91c1c !important;
}
body:not(.print-view-body) :is(.workflow-badge.draft, .workflow-badge.saved, .accounting-badge.ready, .role-dashboard-status.tone-info) {
    border-color: #bfdbfe !important; background: #eff6ff !important; color: #1d4ed8 !important;
}
body:not(.print-view-body) .accounting-badge.waiting {
    border-color: #cbd5e1 !important; background: #f8fafc !important; color: #64748b !important;
}
html[data-theme="dark"] body:not(.print-view-body) :is(
    .workflow-badge,
    .decision-badge,
    .delivery-status-badge,
    .accounting-badge,
    .role-dashboard-status,
    .status-badge,
    .procurement-progress-badge,
    .archive-badge
) {
    box-shadow: none !important;
}

/* MPRM V55 — shared server-side pagination controls. */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line, #dbe3ea);
    border-radius: 14px;
    background: var(--surface, #fff);
}
.pagination-summary {
    font-size: 12px;
    color: var(--muted, #667085);
}
.pagination-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pagination-page {
    min-width: 36px;
    min-height: 36px;
    padding: 7px 10px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line, #dbe3ea);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}
.pagination-page:hover { background: rgba(47, 128, 237, .08); }
.pagination-page.active {
    border-color: #2f80ed;
    background: #2f80ed;
    color: #fff;
}
.pagination-page.disabled { opacity: .45; pointer-events: none; }
@media (max-width: 600px) {
    .pagination-bar { align-items: stretch; }
    .pagination-summary { width: 100%; }
    .pagination-links { width: 100%; justify-content: center; }
    .pagination-page { min-width: 40px; min-height: 40px; }
}

/* MPRM V56 authoritative tables and filters */
body:not(.print-view-body){
    --v56-table-line:#dce6ef;
    --v56-table-head:#f2f7fb;
    --v56-table-head-2:#eaf2f8;
    --v56-table-hover:#f0f8ff;
    --v56-filter-surface:#ffffff;
    --v56-filter-muted:#687b8d;
    --v56-control-line:#c8d7e4;
    --v56-control-focus:#2f80ed;
}
body:not(.print-view-body) .table-wrap{
    position:relative;
    border:1px solid var(--v56-table-line)!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 12px 32px rgba(24,52,75,.07)!important;
    scrollbar-width:thin;
    scrollbar-color:#9db5c9 #eef4f8;
}
body:not(.print-view-body) .modern-table,
body:not(.print-view-body) .role-dashboard-table{
    border-collapse:separate!important;
    border-spacing:0!important;
    background:#fff!important;
}
body:not(.print-view-body) .modern-table thead th,
body:not(.print-view-body) .role-dashboard-table thead th{
    min-height:46px;
    padding:12px 14px!important;
    border-bottom:1px solid #cbd9e5!important;
    background:linear-gradient(180deg,var(--v56-table-head) 0%,var(--v56-table-head-2) 100%)!important;
    color:#193a55!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    line-height:1.25!important;
    text-transform:uppercase!important;
    vertical-align:middle!important;
}
body:not(.print-view-body) .modern-table tbody td,
body:not(.print-view-body) .role-dashboard-table tbody td{
    padding:13px 14px!important;
    border-bottom:1px solid #e8eef4!important;
    color:#2a4054!important;
    background:#fff!important;
    font-size:11.5px!important;
    line-height:1.45!important;
    vertical-align:middle!important;
}
body:not(.print-view-body) .modern-table tbody tr:nth-child(even) td,
body:not(.print-view-body) .role-dashboard-table tbody tr:nth-child(even) td{background:#fbfdff!important}
body:not(.print-view-body) .modern-table tbody tr:hover td,
body:not(.print-view-body) .role-dashboard-table tbody tr:hover td{background:var(--v56-table-hover)!important}
body:not(.print-view-body) .modern-table tbody tr:last-child td,
body:not(.print-view-body) .role-dashboard-table tbody tr:last-child td{border-bottom:0!important}
body:not(.print-view-body) .modern-table td:first-child{font-weight:700}
body:not(.print-view-body) .modern-table .empty-row td,
body:not(.print-view-body) .modern-table .empty-table-cell{
    min-height:120px!important;
    padding:30px 18px!important;
    color:#738596!important;
    background:linear-gradient(180deg,#fff,#f9fbfd)!important;
    text-align:center!important;
    font-weight:750!important;
}

/* Search and filter surfaces share one visual language. */
body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter){
    box-sizing:border-box;
    gap:9px!important;
    padding:11px!important;
    border:1px solid #d8e4ed!important;
    border-radius:14px!important;
    background:var(--v56-filter-surface)!important;
    box-shadow:0 8px 24px rgba(24,52,75,.055)!important;
}
body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter) :is(input,select){
    box-sizing:border-box!important;
    min-height:42px!important;
    padding:8px 11px!important;
    border:1px solid var(--v56-control-line)!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#213c52!important;
    font-size:11px!important;
    line-height:1.2!important;
    box-shadow:inset 0 1px 2px rgba(20,45,63,.025)!important;
    transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease!important;
}
body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter) :is(input,select):hover{border-color:#9fbacd!important}
body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter) :is(input,select):focus{
    border-color:var(--v56-control-focus)!important;
    outline:0!important;
    box-shadow:0 0 0 3px rgba(47,128,237,.13)!important;
}
body:not(.print-view-body) .filter-search{position:relative!important;min-width:0}
body:not(.print-view-body) .filter-search::before{
    content:"⌕";
    position:absolute;
    z-index:2;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:#6b8294;
    font-size:17px;
    line-height:1;
    pointer-events:none;
}
body:not(.print-view-body) .filter-search>span{display:none!important}
body:not(.print-view-body) .filter-search input{width:100%!important;padding-left:38px!important}
body:not(.print-view-body) .catalog-filter-bar{grid-template-columns:minmax(220px,1fr) minmax(140px,.45fr) auto auto!important;align-items:center!important}
body:not(.print-view-body) .catalog-filter-bar input{min-width:0!important}
body:not(.print-view-body) .catalog-filter-bar :is(.btn,.table-action){min-height:42px!important;border-radius:10px!important}
body:not(.print-view-body) .pagination-bar{border-radius:13px!important;box-shadow:0 7px 20px rgba(24,52,75,.045)}

/* Supplier and Subcon action colors are explicit and do not inherit generic gradients. */
body:not(.print-view-body) .catalog-page .catalog-table .table-action{box-shadow:none!important}
body:not(.print-view-body) .catalog-page .table-action.is-edit,
body:not(.print-view-body) .catalog-page .catalog-action-edit{
    border-color:#bfdbfe!important;background:#eff6ff!important;color:#1d4ed8!important;
}
body:not(.print-view-body) .catalog-page .table-action.is-category,
body:not(.print-view-body) .catalog-page .catalog-action-category{
    border-color:#ddd6fe!important;background:#f5f3ff!important;color:#6d28d9!important;
}
body:not(.print-view-body) .catalog-page .table-action.is-archive,
body:not(.print-view-body) .catalog-page form[data-next="archive"] .catalog-action-toggle{
    border-color:#fecaca!important;background:#fff1f2!important;color:#b91c1c!important;
}
body:not(.print-view-body) .catalog-page .table-action.is-restore,
body:not(.print-view-body) .catalog-page form[data-next="restore"] .catalog-action-toggle{
    border-color:#bbf7d0!important;background:#ecfdf5!important;color:#047857!important;
}
body:not(.print-view-body) .catalog-page :is(.catalog-action-edit,.catalog-action-category,.catalog-action-toggle):hover{filter:brightness(.98);transform:translateY(-1px)!important}

/* Request type and requester attachment affordances. */
body:not(.print-view-body) .mr-request-type-badge{
    display:inline-flex;align-items:center;gap:7px;min-height:27px;padding:5px 9px;border:1px solid #d5dee8;border-radius:999px;background:#f8fafc;color:#526579;font-size:9px;font-weight:900;letter-spacing:.055em;white-space:nowrap;
}
body:not(.print-view-body) .mr-request-type-badge::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.78}
body:not(.print-view-body) .mr-request-type-badge.subcon{border-color:#c4b5fd;background:#f5f3ff;color:#6d28d9}
body:not(.print-view-body) .mr-request-type-files{display:block;margin-top:5px;color:#6b7280;font-size:9px;font-weight:700}
body:not(.print-view-body) .mr-requester-supporting-files{
    width:min(1120px,calc(100% - 24px));margin:18px auto 26px;padding:16px;border:1px solid #d9e5ee;border-radius:15px;background:#fff;box-shadow:0 10px 28px rgba(20,50,72,.07)
}
body:not(.print-view-body) .mr-requester-supporting-files-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
body:not(.print-view-body) .mr-requester-supporting-files-header h2{margin:2px 0 0;color:#18384f;font-size:15px}
body:not(.print-view-body) .mr-requester-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}
body:not(.print-view-body) .mr-requester-file-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:58px;padding:9px 10px;border:1px solid #dce7ef;border-radius:11px;background:#f9fcfe;text-decoration:none;color:#29475c}
body:not(.print-view-body) .mr-requester-file-card:hover{border-color:#9bc4df;background:#f0f8fd}
body:not(.print-view-body) .mr-requester-file-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#e9f5fb;color:#17699b}
body:not(.print-view-body) .mr-requester-file-icon svg{width:18px;height:18px}
body:not(.print-view-body) .mr-requester-file-copy{min-width:0;display:grid;gap:2px}
body:not(.print-view-body) .mr-requester-file-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.mr-requester-file-copy small{font-size:9px;color:#708395}
body:not(.print-view-body) .mr-requester-file-card>svg{width:15px;height:15px;color:#7890a3}

@media(min-width:701px){
    body:not(.print-view-body) .modern-table thead th{position:sticky;top:0;z-index:4}
}
@media(max-width:900px){
    body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter){padding:10px!important;border-radius:12px!important}
    body:not(.print-view-body) .catalog-filter-bar{grid-template-columns:1fr 1fr!important}
    body:not(.print-view-body) .catalog-filter-bar input{grid-column:1/-1!important}
}
@media(max-width:700px){
    body:not(.print-view-body) .table-wrap{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
    body:not(.print-view-body) .modern-table tbody{gap:11px!important}
    body:not(.print-view-body) .modern-table tbody tr{border:1px solid #dce7ef!important;border-radius:13px!important;box-shadow:0 8px 22px rgba(20,50,72,.055)!important}
    body:not(.print-view-body) .modern-table td{min-height:44px!important;padding:10px 12px!important;background:#fff!important}
    body:not(.print-view-body) .modern-table td:first-child{border-radius:13px 13px 0 0;background:#f4f8fb!important}
    body:not(.print-view-body) .modern-table td:last-child{border-radius:0 0 13px 13px}
    body:not(.print-view-body) .mr-requester-supporting-files{width:calc(100% - 18px);margin-top:12px;padding:12px;border-radius:13px}
    body:not(.print-view-body) .mr-requester-supporting-files-header{display:grid}.mr-requester-file-grid{grid-template-columns:1fr!important}
}
@media(max-width:520px){
    body:not(.print-view-body) .catalog-filter-bar{grid-template-columns:1fr!important}
    body:not(.print-view-body) .catalog-filter-bar input{grid-column:auto!important}
    body:not(.print-view-body) .catalog-filter-bar :is(.btn,a.btn){width:100%!important;justify-content:center!important}
}
html[data-theme="dark"] body:not(.print-view-body){--v56-table-line:#2a4057;--v56-table-head:#14283d;--v56-table-head-2:#102236;--v56-table-hover:#132b42;--v56-filter-surface:#0f1e31;--v56-control-line:#36516c}
html[data-theme="dark"] body:not(.print-view-body) .table-wrap{background:#0f1e31!important;border-color:#2b435a!important}
html[data-theme="dark"] body:not(.print-view-body) :is(.modern-table,.role-dashboard-table){background:#0f1e31!important}
html[data-theme="dark"] body:not(.print-view-body) :is(.modern-table,.role-dashboard-table) thead th{border-color:#304860!important;color:#e8f4ff!important}
html[data-theme="dark"] body:not(.print-view-body) :is(.modern-table,.role-dashboard-table) tbody td{border-color:#253b50!important;background:#0f1e31!important;color:#d9e8f5!important}
html[data-theme="dark"] body:not(.print-view-body) :is(.modern-table,.role-dashboard-table) tbody tr:nth-child(even) td{background:#112238!important}
html[data-theme="dark"] body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter){border-color:#2d455d!important;background:#0f1e31!important}
html[data-theme="dark"] body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter) :is(input,select){border-color:#36516c!important;background:#0a1727!important;color:#e7f2fc!important}
html[data-theme="dark"] body:not(.print-view-body) .mr-requester-supporting-files{border-color:#2d455d;background:#0f1e31}
html[data-theme="dark"] body:not(.print-view-body) .mr-requester-supporting-files-header h2{color:#e8f4ff}
html[data-theme="dark"] body:not(.print-view-body) .mr-requester-file-card{border-color:#2d455d;background:#112238;color:#d6e8f6}
body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.catalog-filter-bar,.operations-filter,.email-delivery-filter) :is(.btn,button.table-action,a.table-action){min-height:42px!important;border-radius:10px!important;align-self:center!important}
body:not(.print-view-body) :is(.filter-card,.reviewer-filter-card,.audit-filter-grid,.operations-filter,.email-delivery-filter) .btn.primary{box-shadow:0 6px 14px rgba(47,128,237,.12)!important}

/* ================================================================
   MPRM V57 — PWA floating Refresh / Update control
   ================================================================ */
.pwa-floating-refresh {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 1250;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 999px;
    background: #fff;
    color: #15315d;
    box-shadow: 0 14px 35px rgba(15, 35, 65, .18);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.pwa-floating-refresh:hover { transform: translateY(-1px); box-shadow: 0 16px 38px rgba(15, 35, 65, .22); }
.pwa-floating-refresh:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: 3px; }
.pwa-floating-refresh[hidden] { display: none !important; }
.pwa-floating-refresh:disabled { cursor: wait; opacity: .78; }
.pwa-floating-refresh-icon { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; font-size: 20px; line-height: 1; }
.pwa-floating-refresh-icon svg { width: 18px; height: 18px; }
.pwa-floating-refresh[data-refresh-state="loading"] .pwa-floating-refresh-icon { animation: metricconSpin .75s linear infinite; }
.pwa-floating-refresh[data-refresh-state="update-ready"] { border-color: #e5b64b; background: #fff8df; color: #7b5100; }

@media (max-width: 900px) {
    .pwa-floating-refresh {
        right: 14px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        min-height: 46px;
        padding: 10px 12px;
    }
}

@media (max-width: 420px) {
    .pwa-floating-refresh { right: 10px; }
    .pwa-floating-refresh-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

html[data-theme="dark"] .pwa-floating-refresh {
    border-color: #36516c;
    background: #102238;
    color: #e8f4ff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .32);
}
html[data-theme="dark"] .pwa-floating-refresh[data-refresh-state="update-ready"] {
    border-color: #8f6c24;
    background: #332810;
    color: #ffe8a3;
}

/* ================================================================
   MPRM V57 — authoritative mobile record tables
   Labels and values stay in normal flow; no fixed label columns.
   ================================================================ */
@media (max-width: 900px) {
    body:not(.print-view-body) .v57-record-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body:not(.print-view-body) .v57-record-table,
    body:not(.print-view-body) .v57-record-table tbody,
    body:not(.print-view-body) .v57-record-table tr,
    body:not(.print-view-body) .v57-record-table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body:not(.print-view-body) .v57-record-table {
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    body:not(.print-view-body) .v57-record-table thead {
        display: none !important;
    }

    body:not(.print-view-body) .v57-record-table tbody {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) {
        min-width: 0 !important;
        padding: 14px !important;
        overflow: hidden !important;
        border: 1px solid #e1e8f0 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(15, 35, 65, .06) !important;
    }

    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row):hover {
        transform: none !important;
    }

    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td,
    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row):nth-child(even) td,
    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row):hover td {
        min-width: 0 !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 4px !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f5 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #2a4054 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td::before {
        content: attr(data-label);
        position: static !important;
        inset: auto !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #72839a !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .06em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td > *,
    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td > b,
    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td > span,
    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td > small,
    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td > a,
    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td > form {
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: start !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body:not(.print-view-body) .v57-record-table .requester-identity,
    body:not(.print-view-body) .v57-record-table .remarks-preview,
    body:not(.print-view-body) .v57-record-table .procurement-progress-badge,
    body:not(.print-view-body) .v57-record-table .workflow-badge,
    body:not(.print-view-body) .v57-record-table .accounting-badge,
    body:not(.print-view-body) .v57-record-table .po-number-badge {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body:not(.print-view-body) .v57-record-table .table-action-group {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body:not(.print-view-body) .v57-record-table .table-action-group > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body:not(.print-view-body) .v57-record-table .table-action-group :is(.table-action, .btn, button) {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body:not(.print-view-body) .v57-record-table .empty-row {
        padding: 0 !important;
        border: 1px solid #e1e8f0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    body:not(.print-view-body) .v57-record-table .empty-row td,
    body:not(.print-view-body) .v57-record-table .empty-row:nth-child(even) td {
        min-height: 90px !important;
        display: grid !important;
        place-items: center !important;
        padding: 24px 16px !important;
        border: 0 !important;
        background: transparent !important;
        text-align: center !important;
    }

    body:not(.print-view-body) .v57-record-table .empty-row td::before {
        content: none !important;
    }
}

@media (max-width: 380px) {
    body:not(.print-view-body) .v57-record-table .table-action-group {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 900px) {
    html[data-theme="dark"] body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row),
    html[data-theme="dark"] body:not(.print-view-body) .v57-record-table .empty-row {
        border-color: #2d455d !important;
        background: #0f1e31 !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .22) !important;
    }

    html[data-theme="dark"] body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td,
    html[data-theme="dark"] body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row):nth-child(even) td,
    html[data-theme="dark"] body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row):hover td,
    html[data-theme="dark"] body:not(.print-view-body) .v57-record-table .empty-row td {
        border-color: #253b50 !important;
        background: transparent !important;
        color: #d9e8f5 !important;
    }

    html[data-theme="dark"] body:not(.print-view-body) .v57-record-table tbody tr:not(.empty-row) td::before {
        color: #9fb3c7 !important;
    }
}

/* ================================================================
   MPRM V57 — refined login experience
   ================================================================ */
.v57-login-shell .login-panel {
    background:
        radial-gradient(circle at 90% 8%, rgba(37, 99, 235, .07), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #f1f5fa 100%);
}

.v57-login-card {
    width: min(480px, 100%) !important;
    padding: 40px 38px 34px !important;
    border: 1px solid #dce6f0 !important;
    border-radius: 28px !important;
    box-shadow: 0 28px 80px rgba(15, 35, 65, .14) !important;
}

.v57-login-heading { padding-right: 72px; margin-bottom: 24px; }
.v57-login-heading .eyebrow { display: inline-flex; margin-bottom: 8px; }
.v57-login-heading h2 { margin: 0 0 7px; font-size: clamp(31px, 3vw, 39px); line-height: 1.02; }
.v57-login-heading p { margin: 0; color: #687b8d; font-size: 14px; line-height: 1.55; }

.v57-login-fields { display: grid; gap: 0; }
.v57-login-fields > label:not(.v57-remember-row) { margin: 14px 0 7px; color: #31475c; font-size: 12px; font-weight: 850; }
.v57-login-fields .input-with-icon {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 50px;
    overflow: visible;
    border: 1px solid #cfdce8;
    border-radius: 14px;
    background: #fbfdff;
    box-shadow: inset 0 1px 2px rgba(15, 35, 65, .02);
}
.v57-login-fields .input-with-icon:focus-within {
    border-color: #4d8bf5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.v57-login-fields .login-field-icon {
    align-self: stretch;
    display: grid;
    place-items: center;
    border-right: 1px solid #e4ebf2;
    color: #59708a;
}
.v57-login-fields .login-field-icon svg { width: 18px; height: 18px; }
.v57-login-fields .input-with-icon input {
    min-width: 0;
    min-height: 48px;
    padding: 12px 13px;
    color: #162c41;
    font-size: 14px;
}
.v57-login-fields .password-input-shell { grid-template-columns: 46px minmax(0, 1fr) 44px; }
.v57-login-fields .password-visibility-toggle {
    width: 40px;
    height: 40px;
    margin-right: 4px;
    align-self: center;
    border-radius: 10px;
}
.v57-remember-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 16px 0 4px !important;
    padding: 3px 0;
    color: #3d5268 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    cursor: pointer;
}
.v57-remember-row input {
    width: 19px;
    height: 19px;
    margin: 0;
    flex: 0 0 19px;
    accent-color: #2563eb;
}
.v57-login-fields .login-button {
    min-height: 50px;
    margin-top: 20px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .01em;
}
.v57-login-fields .pwa-install-login {
    width: 100%;
    min-height: 50px;
    margin-top: 10px;
    border-radius: 13px;
    justify-content: flex-start;
}
.v57-forgot-link { margin: 17px 0 0 !important; text-align: center; }
.v57-forgot-link a { font-size: 12px; font-weight: 800; }
.v57-login-card .inline-notice-fallback { margin: 0 0 15px; border-radius: 13px; }

@media (max-width: 760px) {
    .v57-login-shell {
        min-height: 100dvh;
        display: block !important;
        background: #f3f6fa !important;
    }
    .v57-login-shell .login-visual { display: none !important; }
    .v57-login-shell .login-panel {
        min-height: 100dvh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: max(18px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
    }
    .v57-login-card {
        width: min(100%, 460px) !important;
        margin: 0 auto;
        padding: 24px 20px 22px !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 45px rgba(15, 35, 65, .12) !important;
    }
    .v57-login-card .mobile-login-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-right: 52px;
        margin: 2px 0 22px;
    }
    .v57-login-card .mobile-login-brand img { width: 42px; height: 42px; object-fit: contain; }
    .v57-login-card .mobile-login-brand div { min-width: 0; display: grid; gap: 2px; }
    .v57-login-card .mobile-login-brand strong { font-size: 17px; letter-spacing: .04em; }
    .v57-login-card .mobile-login-brand small { color: #6b7d90; font-size: 10px; }
    .v57-login-heading { padding-right: 0; margin-bottom: 18px; }
    .v57-login-heading h2 { font-size: 30px; }
    .v57-login-fields .input-with-icon,
    .v57-login-fields .login-button,
    .v57-login-fields .pwa-install-login { min-height: 50px; }
}

@media (max-width: 360px) {
    .v57-login-shell .login-panel { padding-left: 10px; padding-right: 10px; }
    .v57-login-card { padding-left: 16px !important; padding-right: 16px !important; }
    .v57-login-heading h2 { font-size: 27px; }
}

html[data-theme="dark"] .v57-login-shell .login-panel {
    background:
        radial-gradient(circle at 90% 8%, rgba(60, 140, 255, .10), transparent 24%),
        linear-gradient(180deg, #07111f 0%, #0a1626 100%);
}
html[data-theme="dark"] .v57-login-card { border-color: #2e4560 !important; background: #101d2e !important; }
html[data-theme="dark"] .v57-login-heading p,
html[data-theme="dark"] .v57-login-card .mobile-login-brand small { color: #b4c5d8; }
html[data-theme="dark"] .v57-login-fields > label:not(.v57-remember-row),
html[data-theme="dark"] .v57-remember-row { color: #d6e3f3 !important; }
html[data-theme="dark"] .v57-login-fields .input-with-icon { border-color: #36516c; background: #0b1626; }
html[data-theme="dark"] .v57-login-fields .input-with-icon:focus-within { border-color: #78c7ff; background: #0d1a2b; box-shadow: 0 0 0 4px rgba(120, 199, 255, .12); }
html[data-theme="dark"] .v57-login-fields .login-field-icon { border-color: #2e4560; color: #9fc6e7; }
html[data-theme="dark"] .v57-login-fields .input-with-icon input { color: #f4f8ff; }

/* ================================================================
   MPRM V57 — Create M.R / Request Details hierarchy
   ================================================================ */
body:not(.print-view-body) .v57-request-reference {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    border-color: #c9dcf4;
    background: #f1f7ff;
    color: #315c88;
    box-shadow: none;
}
body:not(.print-view-body) .v57-request-reference b {
    color: #174d83;
    overflow-wrap: anywhere;
}

body:not(.print-view-body) .v57-request-details-grid {
    grid-template-columns: minmax(160px, .72fr) minmax(220px, 1fr) minmax(180px, .82fr);
    gap: 14px;
    align-items: start;
}
body:not(.print-view-body) .v57-request-details-grid > label { min-width: 0; }
body:not(.print-view-body) .v57-request-details-grid .v57-project-field { grid-column: span 2; }
body:not(.print-view-body) .v57-request-details-grid .v57-requested-by-field { grid-column: 1 / -1; }
body:not(.print-view-body) .v57-request-details-grid :is(input, select) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
body:not(.print-view-body) .v57-request-details-grid .v57-readonly-field {
    padding: 10px;
    border: 1px solid #e0e8f1;
    border-radius: 10px;
    background: rgba(246, 249, 252, .9);
}
body:not(.print-view-body) .v57-request-details-grid .v57-readonly-field > span::after {
    content: " · AUTO-FILLED";
    color: #8797a8;
    font-size: 9px;
    letter-spacing: .04em;
}
body:not(.print-view-body) .v57-request-details-grid .v57-readonly-field input[readonly],
body:not(.print-view-body) .v57-request-details-grid .v57-reference-field input[readonly] {
    border-color: #d9e4ee !important;
    background: #f5f8fc !important;
    color: #52647d !important;
    box-shadow: none !important;
}
body:not(.print-view-body) .v57-request-details-grid .v57-reference-field small {
    color: #72839a;
    line-height: 1.35;
}
body:not(.print-view-body) .mr-entry-section[data-section-tone="details"] .mr-subcon-choice {
    margin-top: 16px;
}

@media (max-width: 980px) and (min-width: 761px) {
    body:not(.print-view-body) .v57-request-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.print-view-body) .v57-request-details-grid .v57-project-field,
    body:not(.print-view-body) .v57-request-details-grid .v57-requested-by-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    body:not(.print-view-body) .v57-request-details-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }
    body:not(.print-view-body) .v57-request-details-grid > label,
    body:not(.print-view-body) .v57-request-details-grid .wide,
    body:not(.print-view-body) .v57-request-details-grid .v57-project-field,
    body:not(.print-view-body) .v57-request-details-grid .v57-requested-by-field {
        grid-column: auto !important;
        min-width: 0 !important;
    }
    body:not(.print-view-body) .v57-request-details-grid .v57-readonly-field { padding: 9px; }
    body:not(.print-view-body) .v57-request-reference {
        width: fit-content;
        max-width: 100%;
        padding: 7px 10px;
        white-space: normal;
    }
}

html[data-theme="dark"] body:not(.print-view-body) .v57-request-reference {
    border-color: #36516c;
    background: #13283d;
    color: #a9c9e8;
}
html[data-theme="dark"] body:not(.print-view-body) .v57-request-reference b { color: #dbeeff; }
html[data-theme="dark"] body:not(.print-view-body) .v57-request-details-grid .v57-readonly-field {
    border-color: #2d455d;
    background: #102238;
}
html[data-theme="dark"] body:not(.print-view-body) .v57-request-details-grid .v57-readonly-field > span::after { color: #8fa6bb; }
html[data-theme="dark"] body:not(.print-view-body) .v57-request-details-grid .v57-readonly-field input[readonly],
html[data-theme="dark"] body:not(.print-view-body) .v57-request-details-grid .v57-reference-field input[readonly] {
    border-color: #36516c !important;
    background: #0b1626 !important;
    color: #c5d7e8 !important;
}

/* ================================================================
   MPRM V57 — P.O Monitoring semantic pastel states
   ================================================================ */
.monitoring-status-chip.saved { background:#EEF3F8; border-color:#D9E2EC; color:#3F5266; }
.monitoring-status-chip.pending_review { background:#FFF4D6; border-color:#EFD89A; color:#7A5200; }
.monitoring-status-chip.partially_approved { background:#F2EDFF; border-color:#D7CBFA; color:#5D439A; }
.monitoring-status-chip.approved { background:#EAF8F1; border-color:#BFE4D1; color:#246B4D; }
.monitoring-status-chip.rejected { background:#FDECEC; border-color:#F1C6C8; color:#96343D; }
.monitoring-status-chip.cancelled { background:#EEF1F4; border-color:#D7DEE5; color:#52606D; opacity:1; }

.monitoring-status-chip.saved b { background:#DFE7EF; color:#334A60; }
.monitoring-status-chip.pending_review b { background:#F8E6B8; color:#734B00; }
.monitoring-status-chip.partially_approved b { background:#E5DDFB; color:#51398E; }
.monitoring-status-chip.approved b { background:#D5EFE2; color:#1F6547; }
.monitoring-status-chip.rejected b { background:#F6D8D9; color:#8D2C35; }
.monitoring-status-chip.cancelled b { background:#E0E5EA; color:#4D5965; }

body:not(.print-view-body) .monitoring-status-group .monitoring-group-heading {
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
}
body:not(.print-view-body) .monitoring-status-group.status-saved .monitoring-group-heading { background:#E7EEF5; border-color:#D4DEE8; }
body:not(.print-view-body) .monitoring-status-group.status-pending_review .monitoring-group-heading { background:#FCECC3; border-color:#E8D18E; }
body:not(.print-view-body) .monitoring-status-group.status-partially_approved .monitoring-group-heading { background:#E9E2FC; border-color:#D2C5F4; }
body:not(.print-view-body) .monitoring-status-group.status-approved .monitoring-group-heading { background:#DFF3E9; border-color:#B6DDC9; }
body:not(.print-view-body) .monitoring-status-group.status-rejected .monitoring-group-heading { background:#F9DEDF; border-color:#EDBFC2; }
body:not(.print-view-body) .monitoring-status-group.status-cancelled .monitoring-group-heading { background:#E5E9ED; border-color:#D2D9E0; }

body:not(.print-view-body) .monitoring-status-group.status-saved .monitoring-group-heading :is(h2,.eyebrow) { color:#3B5268; }
body:not(.print-view-body) .monitoring-status-group.status-pending_review .monitoring-group-heading :is(h2,.eyebrow) { color:#755000; }
body:not(.print-view-body) .monitoring-status-group.status-partially_approved .monitoring-group-heading :is(h2,.eyebrow) { color:#563E91; }
body:not(.print-view-body) .monitoring-status-group.status-approved .monitoring-group-heading :is(h2,.eyebrow) { color:#235F46; }
body:not(.print-view-body) .monitoring-status-group.status-rejected .monitoring-group-heading :is(h2,.eyebrow) { color:#8A333B; }
body:not(.print-view-body) .monitoring-status-group.status-cancelled .monitoring-group-heading :is(h2,.eyebrow) { color:#4F5D6B; }

html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.saved { background:#1A2B3D !important; border-color:#3C556C !important; color:#D8E8F6 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.pending_review { background:#342A14 !important; border-color:#735D28 !important; color:#FFE3A1 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.partially_approved { background:#27213D !important; border-color:#5B4E83 !important; color:#DED4FF !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.approved { background:#173027 !important; border-color:#386B56 !important; color:#B9F0D3 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.rejected { background:#362022 !important; border-color:#77474B !important; color:#FFD0D0 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.cancelled { background:#202A34 !important; border-color:#465666 !important; color:#D1DCE6 !important; opacity:1 !important; }

html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.saved b { background:#273B4F !important; color:#E2F0FC !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.pending_review b { background:#4A3A19 !important; color:#FFE8B0 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.partially_approved b { background:#382F55 !important; color:#E5DDFF !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.approved b { background:#214536 !important; color:#C7F7DD !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.rejected b { background:#4B2B2E !important; color:#FFD8D8 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-chip.cancelled b { background:#2D3945 !important; color:#E0E8F0 !important; }

html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-group.status-saved .monitoring-group-heading { background:#17293B !important; border-color:#344D64 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-group.status-pending_review .monitoring-group-heading { background:#302713 !important; border-color:#675423 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-group.status-partially_approved .monitoring-group-heading { background:#251F38 !important; border-color:#514671 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-group.status-approved .monitoring-group-heading { background:#142D24 !important; border-color:#315E4C !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-group.status-rejected .monitoring-group-heading { background:#321E20 !important; border-color:#694044 !important; }
html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-group.status-cancelled .monitoring-group-heading { background:#1D2731 !important; border-color:#3E4E5E !important; }

html[data-theme="dark"] body:not(.print-view-body) .page-content .monitoring-status-group .monitoring-group-heading :is(h2,.eyebrow) { color:#F1F6FC !important; }

/* ================================================================
   MPRM V57 — Delivery Monitoring refinement
   ================================================================ */
body:not(.print-view-body) .delivery-page-content {
    min-width: 0;
    overflow-x: clip;
}

body:not(.print-view-body) .v57-delivery-hero {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(135deg,#17385f 0%,#245b91 58%,#247d91 100%);
    box-shadow: 0 14px 34px rgba(22,61,105,.16);
}

body:not(.print-view-body) .v57-delivery-summary-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
}
body:not(.print-view-body) .v57-delivery-summary-grid > a {
    min-width: 0;
    min-height: 116px;
    padding: 17px 18px;
    border-left-width: 4px;
    border-radius: 17px;
    box-shadow: 0 5px 16px rgba(15,35,65,.05);
}
body:not(.print-view-body) .v57-delivery-summary-grid > a span,
body:not(.print-view-body) .v57-delivery-summary-grid > a small {
    overflow-wrap: anywhere;
}
body:not(.print-view-body) .v57-delivery-summary-grid > a strong {
    font-size: clamp(25px,2.1vw,30px);
}

body:not(.print-view-body) .v57-delivery-filter {
    min-width: 0;
    grid-template-columns: minmax(240px,1fr) minmax(170px,220px) auto auto;
    gap: 10px;
    align-items: center;
}
body:not(.print-view-body) .v57-delivery-filter > * {
    min-width: 0;
}

body:not(.print-view-body) .v57-delivery-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 7px 20px rgba(15,35,65,.055);
}
body:not(.print-view-body) .v57-delivery-card .delivery-card-summary {
    min-width: 0;
    flex-wrap: wrap;
}
body:not(.print-view-body) .v57-delivery-card .delivery-po-identity,
body:not(.print-view-body) .v57-delivery-card .delivery-po-identity > div,
body:not(.print-view-body) .v57-delivery-card .delivery-card-status {
    min-width: 0;
}
body:not(.print-view-body) .v57-delivery-card .delivery-po-identity h3,
body:not(.print-view-body) .v57-delivery-card .delivery-po-identity p,
body:not(.print-view-body) .v57-delivery-card .delivery-po-identity small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
body:not(.print-view-body) .v57-delivery-card .delivery-po-identity small {
    display: block;
    margin-top: 3px;
}
body:not(.print-view-body) .v57-delivery-card .delivery-card-status {
    flex-wrap: wrap;
}
body:not(.print-view-body) .v57-delivery-card :is(.table-action,.btn) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body:not(.print-view-body) .v57-delivery-card .delivery-details-editor summary {
    min-height: 46px;
    display: flex;
    align-items: center;
}

@media (max-width: 900px) {
    body:not(.print-view-body) .v57-delivery-filter {
        grid-template-columns: minmax(0,1fr) minmax(160px,.48fr);
    }
    body:not(.print-view-body) .v57-delivery-filter > :is(.btn,a.btn) {
        width: 100% !important;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-card-summary {
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    body:not(.print-view-body) .v57-delivery-hero {
        gap: 14px;
        padding: 20px;
        border-radius: 20px;
    }
    body:not(.print-view-body) .v57-delivery-hero h2 {
        font-size: clamp(24px,7vw,28px);
        line-height: 1.12;
    }
    body:not(.print-view-body) .v57-delivery-summary-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }
    body:not(.print-view-body) .v57-delivery-summary-grid > a {
        min-height: 112px;
        padding: 14px;
        border-radius: 15px;
    }
    body:not(.print-view-body) .v57-delivery-summary-grid > a span {
        font-size: 11px;
        line-height: 1.25;
    }
    body:not(.print-view-body) .v57-delivery-summary-grid > a small {
        font-size: 10px;
        line-height: 1.3;
    }
    body:not(.print-view-body) .v57-delivery-filter,
    body:not(.print-view-body) .v57-delivery-card .delivery-form,
    body:not(.print-view-body) .v57-delivery-card .delivery-readonly-details {
        grid-template-columns: minmax(0,1fr);
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-form > *,
    body:not(.print-view-body) .v57-delivery-card .delivery-readonly-details > * {
        grid-column: auto;
        min-width: 0;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-card-summary {
        gap: 15px;
        padding: 17px;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-po-identity,
    body:not(.print-view-body) .v57-delivery-card .delivery-card-status {
        width: 100%;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-card-status {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 9px 10px;
        align-items: center;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-card-status .delivery-status-badge {
        justify-self: start;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-card-status > strong {
        justify-self: end;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-card-status .table-action {
        grid-column: 1 / -1;
        width: 100% !important;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-form {
        padding: 17px;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-form-footer {
        width: 100%;
        align-items: stretch;
        gap: 10px;
    }
    body:not(.print-view-body) .v57-delivery-card .delivery-form-footer .btn {
        width: 100% !important;
    }
    body:not(.print-view-body) .delivery-status-section {
        padding: 12px;
        border-radius: 18px;
    }
    body:not(.print-view-body) .delivery-section-heading {
        gap: 10px;
        padding: 4px 2px 13px;
    }
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .v57-delivery-hero {
    border-color: #2a4865 !important;
    background: linear-gradient(135deg,#10253a 0%,#183d5d 60%,#165264 100%) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] body:not(.print-view-body) .page-content .v57-delivery-card {
    box-shadow: 0 7px 20px rgba(0,0,0,.18) !important;
}

/* ================================================================
   MPRM V57 — President decision waiting state
   ================================================================ */
.decision-badge.not_reviewed {
    color: #7A5200;
    background: #FFF4CC;
    border-color: #E9CD76;
}

html[data-theme="dark"] body:not(.print-view-body) .page-content .decision-badge.not_reviewed {
    color: #FFE3A1 !important;
    background: #342A14 !important;
    border-color: #735D28 !important;
}

/* Keep President NOT REVIEWED above older generic decision-badge !important rules. */
body:not(.print-view-body) .president-po-footer .decision-badge.not_reviewed {
    color: #7A5200 !important;
    background: #FFF4CC !important;
    background-color: #FFF4CC !important;
    border-color: #E9CD76 !important;
}

/* ================================================================
   MPRM V58 — President mobile app UX
   ================================================================ */
body:not(.print-view-body).v58-president-approvals,
body:not(.print-view-body).v58-president-all-pos {
    overflow-x: clip;
}

.v58-president-mobile-list,
.v58-president-all-mobile-list {
    display: none;
}

.v58-president-mobile-card,
.v58-president-card-head,
.v58-president-card-body,
.v58-president-card-supplier,
.v58-president-card-meta-grid,
.v58-president-card-created,
.v58-president-card-footer {
    min-width: 0;
}

.v58-president-mobile-card {
    overflow: hidden;
    border: 1px solid #e1e9f2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,35,65,.07);
}

.v58-president-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px;
    border-bottom: 1px solid #e8eef5;
    background: linear-gradient(180deg,#fbfdff,#f5f9fd);
}

.v58-president-card-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.v58-president-card-head span,
.v58-president-card-body > div > span,
.v58-president-card-meta-grid > div > span,
.v58-president-card-created > span {
    color: #7c8ba0;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.v58-president-card-head strong {
    color: #15315d;
    font-size: 19px;
    line-height: 1.1;
}

.v58-president-card-state {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid #d8e5f0;
    border-radius: 999px;
    color: #34536f;
    background: #eef6fb;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.v58-president-card-state.needs-review {
    color: #8a5a00;
    border-color: #ead49a;
    background: #fff6db;
}

.v58-president-card-body {
    display: grid;
    gap: 14px;
    padding: 15px;
}

.v58-president-card-date,
.v58-president-card-created {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.v58-president-card-date b,
.v58-president-card-created b {
    min-width: 0;
    color: #33475d;
    font-size: 12px;
    text-align: right;
    overflow-wrap: anywhere;
}

.v58-president-card-supplier {
    display: grid;
    gap: 5px;
    padding: 13px;
    border: 1px solid #e7edf4;
    border-radius: 14px;
    background: #f9fbfd;
}

.v58-president-card-supplier strong,
.v58-president-card-supplier p {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: normal;
}

.v58-president-card-supplier strong {
    color: #10213d;
    font-size: 14px;
    line-height: 1.35;
}

.v58-president-card-supplier p {
    margin: 0;
    color: #607087;
    font-size: 12px;
    line-height: 1.45;
}

.v58-president-card-meta-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.v58-president-card-meta-grid > div {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 11px;
    border: 1px solid #e8eef5;
    border-radius: 13px;
    background: #fff;
}

.v58-president-card-meta-grid > div > b,
.v58-president-card-meta-grid > div > small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.v58-president-card-meta-grid > div > small {
    color: #7c8ba0;
    font-size: 9px;
    line-height: 1.35;
}

.v58-president-card-footer {
    padding: 0 15px 15px;
}

.v58-president-primary-action {
    width: 100% !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

@media (max-width: 900px) {
    body:not(.print-view-body).v58-president-approvals,
    body:not(.print-view-body).v58-president-all-pos {
        background: #eef3f9;
    }

    .v58-president-approvals .reviewer-page-content,
    .v58-president-all-pos .reviewer-page-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 10px 10px calc(104px + env(safe-area-inset-bottom));
        overflow-x: clip;
    }

    .v58-president-desktop-hero {
        display: none !important;
    }

    .v58-president-welcome {
        margin: 0 0 10px;
        padding: 13px 14px;
        border-radius: 18px;
        box-shadow: 0 8px 22px rgba(15,35,65,.12);
    }

    .v58-president-welcome .reviewer-mobile-avatar {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
    }

    .v58-president-stats {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 9px;
        width: 100%;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .v58-president-stats .stat-card {
        min-width: 0 !important;
        width: auto;
        min-height: 96px;
        padding: 12px;
        border-radius: 16px;
    }

    .v58-president-stats .stat-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .v58-president-filter {
        position: static !important;
        top: auto !important;
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 8px;
        margin: 10px 0;
        padding: 10px;
        border-radius: 16px;
        box-shadow: 0 7px 20px rgba(15,35,65,.07);
    }

    .v58-president-filter .filter-search {
        grid-column: 1 / -1;
        min-width: 0;
        min-height: 44px;
    }

    .v58-president-filter :is(select,.btn) {
        width: 100% !important;
        min-width: 0;
        min-height: 44px;
    }

    .v58-president-queue {
        padding: 10px;
        border-radius: 18px;
        box-shadow: 0 7px 20px rgba(15,35,65,.06);
    }

    .v58-president-queue .card-heading {
        padding: 4px 3px 10px;
    }

    .v58-president-desktop-queue,
    .v58-president-all-desktop-grid {
        display: none !important;
    }

    .v58-president-mobile-list,
    .v58-president-all-mobile-list {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        gap: 10px;
    }

    .v58-president-mobile-card {
        width: 100%;
        min-width: 0;
        border-radius: 18px;
    }

    .v58-president-review .review-mobile-summary.v58-president-review-summary {
        width: auto;
        min-width: 0;
        margin-left: 10px;
        margin-right: 10px;
    }

    .v58-president-review .mobile-review-action-bar.v58-president-review-actions {
        left: 10px;
        right: 10px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        z-index: 240;
    }

    .v58-president-review .document-view-main {
        padding-bottom: calc(174px + env(safe-area-inset-bottom));
    }

    .v58-president-review .pwa-floating-refresh {
        bottom: calc(154px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 430px) {
    .v58-president-approvals .reviewer-page-content,
    .v58-president-all-pos .reviewer-page-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .v58-president-card-head {
        align-items: flex-start;
    }

    .v58-president-card-meta-grid,
    .v58-president-card-meta-grid.compact {
        grid-template-columns: minmax(0,1fr);
    }

    .v58-president-filter {
        grid-template-columns: minmax(0,1fr);
    }

    .v58-president-filter .filter-search {
        grid-column: auto;
    }

    .v58-president-review .mobile-review-action-bar.v58-president-review-actions {
        grid-template-columns: minmax(0,1fr);
        padding: 9px;
    }
}

@media (min-width: 901px) {
    .v58-president-mobile-list,
    .v58-president-all-mobile-list {
        display: none !important;
    }

    .v58-president-desktop-queue,
    .v58-president-all-desktop-grid {
        display: block;
    }

    .v58-president-all-desktop-grid {
        display: grid;
    }
}

html[data-theme="dark"] body:not(.print-view-body) .v58-president-mobile-card,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-meta-grid > div {
    border-color: #2d455d;
    background: #0f1e31;
}

html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-head {
    border-color: #2d455d;
    background: linear-gradient(180deg,#13263b,#0f1f32);
}

html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-supplier {
    border-color: #2d455d;
    background: #0a1727;
}

html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-supplier strong,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-date b,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-created b,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-head strong {
    color: #edf5fd;
}

html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-supplier p,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-head span,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-body > div > span,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-meta-grid > div > span,
html[data-theme="dark"] body:not(.print-view-body) .v58-president-card-created > span {
    color: #9fb4c8;
}


/* V58.1 Phone alerts refresh */
.notification-push-card {
    position: relative;
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    margin: 20px 0 24px;
    padding: 22px 24px;
    border: 1px solid rgba(37, 91, 215, .14);
    border-radius: 22px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 62%, #f3f8ff 100%);
    box-shadow: 0 14px 34px rgba(20, 60, 120, .08);
}
.notification-push-card::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -55px;
    top: -65px;
    border-radius: 50%;
    background: rgba(37, 91, 215, .07);
    pointer-events: none;
}
.notification-push-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 17px;
    background: #eaf2ff;
    color: #215bd7;
    font-size: 26px;
    box-shadow: inset 0 0 0 1px rgba(37,91,215,.08);
}
.notification-push-copy { min-width: 0; position: relative; z-index: 1; }
.notification-push-copy h2 { margin: 3px 0 5px; font-size: clamp(20px, 2.1vw, 27px); letter-spacing: -.025em; }
.notification-push-copy .notification-push-subtitle { margin: 0 0 5px; font-weight: 700; color: #5b6b80; }
.notification-push-copy small { max-width: 760px; color: #738197; line-height: 1.55; }
.notification-push-button {
    position: relative; z-index: 1;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(33,91,215,.18);
}
.notification-push-button:disabled { opacity: .78; box-shadow: none; }
html[data-theme="dark"] .notification-push-card {
    border-color: rgba(99,151,255,.18);
    background: linear-gradient(135deg, #0e2038 0%, #10253f 62%, #132b49 100%);
}
html[data-theme="dark"] .notification-push-icon { background: rgba(77,135,255,.14); color: #8db2ff; }
html[data-theme="dark"] .notification-push-copy .notification-push-subtitle { color: #c1d0e1; }
html[data-theme="dark"] .notification-push-copy small { color: #9cafc3; }
@media (max-width: 720px) {
    .notification-push-card { grid-template-columns: auto minmax(0,1fr); padding: 18px; gap: 14px; border-radius: 18px; }
    .notification-push-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; font-size: 23px; }
    .notification-push-copy h2 { font-size: 20px; }
    .notification-push-button { grid-column: 1 / -1; width: 100%; }
}

/* V58.2 Phone alerts redesigned */
.notification-push-card {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0,1fr) minmax(230px,280px);
    align-items: center;
    gap: 24px;
    margin: 22px 0 26px;
    padding: 26px 28px;
    overflow: hidden;
    border: 1px solid rgba(28, 88, 214, .12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 12%, rgba(46, 123, 255, .12), transparent 30%),
        linear-gradient(135deg, #f7fbff 0%, #ffffff 56%, #eef5ff 100%);
    box-shadow: 0 18px 46px rgba(22, 65, 125, .10);
}
.notification-push-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #2162db, #4e91ff);
}
.notification-push-card::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    right: -105px;
    bottom: -145px;
    border-radius: 50%;
    border: 1px solid rgba(39, 102, 220, .08);
    pointer-events: none;
}
.notification-push-visual {
    position: relative;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
}
.notification-push-icon {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(145deg, #e9f2ff, #dceaff);
    color: #1f60da;
    font-size: 30px;
    box-shadow: 0 10px 22px rgba(31,96,218,.15), inset 0 0 0 1px rgba(31,96,218,.08);
}
.notification-push-ripple {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 1px solid rgba(33, 98, 219, .14);
}
.notification-push-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 7px;
}
.notification-push-badge,
.notification-push-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.notification-push-badge { background: #edf4ff; color: #2b62c7; }
.notification-push-state { background: #f1f4f8; color: #687487; letter-spacing: .02em; text-transform: none; }
.notification-push-state[data-state="success"] { background: #eaf8f0; color: #21834f; }
.notification-push-state[data-state="warning"] { background: #fff7df; color: #9a7200; }
.notification-push-state[data-state="error"] { background: #fff0f0; color: #b33b3b; }
.notification-push-dot { width: 7px; height: 7px; border-radius: 50%; background: #5b8ee8; box-shadow: 0 0 0 4px rgba(91,142,232,.10); }
.notification-push-copy h2 { margin: 0 0 5px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.035em; }
.notification-push-copy .notification-push-subtitle { margin: 0 0 6px; font-weight: 800; color: #35465b; }
.notification-push-copy small { display: block; max-width: 800px; color: #718096; line-height: 1.55; }
.notification-push-benefits { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 14px; color: #5f7086; font-size: 12px; font-weight: 700; }
.notification-push-benefits span { white-space: nowrap; }
.notification-push-action { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.notification-push-button {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 19px;
    font-weight: 850;
    font-size: 14px;
    box-shadow: 0 12px 24px rgba(32,96,218,.22);
}
.notification-push-button:hover:not(:disabled) { transform: translateY(-1px); }
.notification-push-button:active:not(:disabled) { transform: translateY(0); }
.notification-push-button-icon { font-size: 17px; }
.notification-push-secure { align-self: center; color: #7b8797; font-size: 11px; font-weight: 700; }
.notification-push-secure span { margin-right: 3px; }
.notification-push-card.is-disabled .notification-push-button { box-shadow: none; }
html[data-theme="dark"] .notification-push-card {
    border-color: rgba(126,170,246,.18);
    background: radial-gradient(circle at 92% 12%, rgba(66,127,230,.16), transparent 31%), linear-gradient(135deg, #0e1d31 0%, #11243c 60%, #142b48 100%);
    box-shadow: 0 20px 48px rgba(0,0,0,.24);
}
html[data-theme="dark"] .notification-push-icon { background: linear-gradient(145deg, #18365e, #143150); color: #9ec0ff; box-shadow: inset 0 0 0 1px rgba(126,170,246,.14); }
html[data-theme="dark"] .notification-push-ripple { border-color: rgba(126,170,246,.16); }
html[data-theme="dark"] .notification-push-badge { background: rgba(95,147,239,.12); color: #a8c5ff; }
html[data-theme="dark"] .notification-push-state { background: rgba(255,255,255,.07); color: #aebbd0; }
html[data-theme="dark"] .notification-push-state[data-state="success"] { background: rgba(53,179,111,.12); color: #73d5a2; }
html[data-theme="dark"] .notification-push-state[data-state="warning"] { background: rgba(233,186,52,.12); color: #f2cf70; }
html[data-theme="dark"] .notification-push-state[data-state="error"] { background: rgba(221,92,92,.12); color: #ff9e9e; }
html[data-theme="dark"] .notification-push-copy .notification-push-subtitle { color: #d2dbea; }
html[data-theme="dark"] .notification-push-copy small,
html[data-theme="dark"] .notification-push-benefits,
html[data-theme="dark"] .notification-push-secure { color: #9cadc4; }
@media (max-width: 900px) {
    .notification-push-card { grid-template-columns: 68px minmax(0,1fr); gap: 18px; padding: 22px; }
    .notification-push-action { grid-column: 1 / -1; }
    .notification-push-visual, .notification-push-ripple { width: 68px; height: 68px; }
    .notification-push-icon { width: 56px; height: 56px; border-radius: 18px; font-size: 25px; }
}
@media (max-width: 560px) {
    .notification-push-card { grid-template-columns: 1fr; gap: 15px; padding: 20px 18px; border-radius: 21px; }
    .notification-push-visual { margin-bottom: 0; }
    .notification-push-topline { margin-bottom: 6px; }
    .notification-push-copy h2 { font-size: 21px; }
    .notification-push-benefits { gap: 6px 11px; }
    .notification-push-action { width: 100%; }
    .notification-push-button { min-height: 52px; }
}


/* V61 Cancelled P.O archive */
.cancelled-pos-hero {
    border-color: rgba(151, 52, 52, .18);
}
.cancelled-po-reason {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 42rem;
}
.cancelled-po-number {
    font-variant-numeric: tabular-nums;
}
.muted-text {
    color: var(--muted, #6b7280);
    font-size: .86rem;
}
@media (max-width: 760px) {
    .cancelled-pos-table thead {
        display: none;
    }
    .cancelled-pos-table,
    .cancelled-pos-table tbody,
    .cancelled-pos-table tr,
    .cancelled-pos-table td {
        display: block;
        width: 100%;
    }
    .cancelled-pos-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--border-color, #dfe5ec);
        border-radius: 16px;
        padding: 12px;
        background: var(--card-bg, #fff);
    }
    .cancelled-pos-table td {
        border: 0;
        padding: 8px 0;
    }
    .cancelled-pos-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted, #6b7280);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
}


/* V61.5 headless SUBCON uploads and requester cancellation */
.mr-entry-form.is-subcon-uploading .mr-attachment-dropzone {
    opacity: .68;
    pointer-events: none;
}
.subcon-upload-state-note {
    display: grid;
    gap: 4px;
    margin-top: 7px;
    min-width: 150px;
    color: var(--muted, #667085);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}
.subcon-upload-state-note [data-subcon-upload-count] {
    font-variant-numeric: tabular-nums;
}
.subcon-upload-state-note progress {
    display: block;
    width: 100%;
    height: 8px;
    accent-color: #2580cf;
}
.workflow-badge.uploading_documents {
    background: #fff0c7;
    color: #714d00;
}
.workflow-badge.upload_incomplete {
    background: #fde4e4;
    color: #962d2d;
}
.mr-upload-active-button {
    border-color: #b8d8f0 !important;
    background: #e8f4fc !important;
    color: #174d78 !important;
    cursor: default;
}
.side-link.is-upload-blocked {
    border: 1px solid rgba(249, 192, 79, .28);
    background: rgba(249, 192, 79, .10);
}
.cancel-mr-form {
    display: inline-flex;
    margin: 0;
}
.cancel-mr-form .danger-action {
    appearance: none;
    font: inherit;
    cursor: pointer;
}
.table-action.danger-action {
    border-color: #efb4b4;
    background: #fdeaea;
    color: #9c2d2d;
}
.table-action.danger-action:hover,
.table-action.danger-action:focus-visible {
    border-color: #dc7373;
    background: #f9d4d4;
    color: #761d1d;
}
[data-theme="dark"] .mr-upload-active-button {
    border-color: #48728e !important;
    background: #173c55 !important;
    color: #d8efff !important;
}
[data-theme="dark"] .table-action.danger-action {
    border-color: #8c5058;
    background: #40262c;
    color: #ffd9dc;
}

/* V61.5.2 server-backed controls for uploads whose device queue is unavailable */
.active-subcon-upload-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid #e8c66b;
    border-radius: 8px;
    background: #fff8df;
    color: #302508;
    box-shadow: 0 10px 28px rgba(120, 85, 8, .08);
}
.active-subcon-upload-card.is-focused {
    outline: 3px solid rgba(37, 128, 207, .24);
    outline-offset: 2px;
}
.active-subcon-upload-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ffe8a3;
    color: #765000;
}
.active-subcon-upload-icon svg {
    width: 22px;
    height: 22px;
}
.active-subcon-upload-copy {
    min-width: 0;
}
.active-subcon-upload-copy .eyebrow {
    color: #775500;
}
.active-subcon-upload-copy h2,
.active-subcon-upload-copy p {
    margin: 0;
    color: inherit;
}
.active-subcon-upload-copy h2 {
    margin-top: 3px;
    font-size: 1.05rem;
}
.active-subcon-upload-copy p {
    margin-top: 5px;
    max-width: 860px;
    font-size: .86rem;
    line-height: 1.5;
}
.active-subcon-upload-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    margin-top: 10px;
    color: #604a13;
    font-size: .76rem;
    font-weight: 700;
}
.active-subcon-upload-meter {
    width: min(260px, 100%);
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #eadfb9;
    box-shadow: inset 0 0 0 1px rgba(96, 74, 19, .08);
}
.active-subcon-upload-meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #287fc4, #55a9e9);
    transition: width .24s ease-out;
    will-change: width;
}
.active-subcon-upload-action {
    justify-self: end;
}
.active-subcon-upload-action .btn {
    white-space: nowrap;
}
[data-theme="dark"] .active-subcon-upload-card {
    border-color: #81682b;
    background: #2d291d;
    color: #fff4ce;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
[data-theme="dark"] .active-subcon-upload-icon {
    background: #4a3e1d;
    color: #ffe29a;
}
[data-theme="dark"] .active-subcon-upload-copy .eyebrow,
[data-theme="dark"] .active-subcon-upload-progress {
    color: #efd58f;
}
[data-theme="dark"] .active-subcon-upload-meter {
    background: #4d452d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
@media (max-width: 760px) {
    .active-subcon-upload-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        padding: 14px;
    }
    .active-subcon-upload-action {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
    .active-subcon-upload-action .btn {
        width: 100%;
        white-space: normal;
    }
}

/* V61.6: distinguish connection checks and server trouble from user-selected Offline Mode. */
body:not(.print-view-body) .offline-status-control[data-connection-state="checking"],
html[data-theme="dark"] body:not(.print-view-body) .offline-status-control[data-connection-state="checking"] {
    border-color: #bfdbfe !important;
    background: #dbeafe !important;
    color: #102033 !important;
}

body:not(.print-view-body) .offline-status-control[data-connection-state="unavailable"],
html[data-theme="dark"] body:not(.print-view-body) .offline-status-control[data-connection-state="unavailable"] {
    border-color: #f6cf70 !important;
    background: #fff1c7 !important;
    color: #3f2d08 !important;
}

body:not(.print-view-body) .offline-status-control[data-connection-state="checking"] .offline-status-icon,
html[data-theme="dark"] body:not(.print-view-body) .offline-status-control[data-connection-state="checking"] .offline-status-icon {
    border-color: #93c5fd !important;
    background: #bfdbfe !important;
    color: #075985 !important;
    animation: offline-status-spin 1s linear infinite;
}

body:not(.print-view-body) .offline-status-control[data-connection-state="unavailable"] .offline-status-icon,
html[data-theme="dark"] body:not(.print-view-body) .offline-status-control[data-connection-state="unavailable"] .offline-status-icon {
    border-color: #f4c64f !important;
    background: #fde7a3 !important;
    color: #795200 !important;
}


/* V62 Request Details density */
.mr-entry-section[data-section-tone="details"] { --v62-mr-details-gap: 10px; padding: 16px 18px; }
.mr-entry-section[data-section-tone="details"] .mr-entry-section-head { align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.mr-entry-section[data-section-tone="details"] .mr-entry-section-head .eyebrow { margin-bottom: 2px; }
.mr-entry-section[data-section-tone="details"] .mr-entry-section-head h2 { margin-top: 1px; font-size: clamp(18px, 2vw, 20px); }
.mr-entry-section[data-section-tone="details"] .mr-entry-number { padding: 6px 10px; }
.mr-entry-section[data-section-tone="details"] .mr-field-grid { gap: var(--v62-mr-details-gap) 12px; }
.mr-entry-section[data-section-tone="details"] .mr-field-grid label { gap: 5px; }
.mr-entry-section[data-section-tone="details"] .mr-field-grid input,
.mr-entry-section[data-section-tone="details"] .mr-field-grid select { min-height: 42px; }
.mr-entry-section[data-section-tone="details"] .mr-field-grid small { margin-top: -1px; line-height: 1.35; }
.mr-entry-section[data-section-tone="details"] .mr-subcon-choice { margin-top: 12px; }
@media (max-width: 760px) {
    .mr-entry-section[data-section-tone="details"] { padding: 14px; }
    .mr-entry-section[data-section-tone="details"] .mr-entry-section-head { gap: 7px; margin-bottom: 10px; }
    .mr-entry-section[data-section-tone="details"] .mr-field-grid { gap: 9px; }
}

/* V62 Delivery Monitoring list-first UI */
.delivery-list { display: grid; gap: 10px; max-height: min(68vh, 760px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 4px; }
.delivery-list::-webkit-scrollbar, .delivery-detail-body::-webkit-scrollbar { width: 9px; }
.delivery-list::-webkit-scrollbar-thumb, .delivery-detail-body::-webkit-scrollbar-thumb { background: #c3ccd8; border-radius: 999px; }
.v62-delivery-record { padding: 0; overflow: hidden; }
.delivery-record-trigger { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.delivery-record-trigger:hover, .delivery-record-trigger:focus-visible { background: #f8fafc; }
.delivery-po-number { font-weight: 900; color: #1d4ed8; white-space: nowrap; }
.delivery-record-main, .delivery-record-meta { display: grid; gap: 4px; min-width: 0; }
.delivery-record-main > span, .delivery-record-main > strong { overflow-wrap: anywhere; }
.delivery-record-meta { justify-items: end; }
.delivery-open-label { color: #2563eb; font-size: 12px; font-weight: 800; }
.delivery-record-actions { display: flex; justify-content: flex-end; padding: 0 16px 12px; }
.delivery-detail-dialog { width: min(760px, calc(100vw - 32px)); max-width: 760px; max-height: min(88vh, 860px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: #172033; box-shadow: 0 28px 80px rgba(15, 23, 42, .28); }
.delivery-detail-dialog::backdrop { background: rgba(15, 23, 42, .52); backdrop-filter: blur(2px); }
.delivery-detail-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: inherit; }
.delivery-detail-header { display: flex; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #e5e7eb; background: #fff; }
.delivery-detail-header h2 { margin: 2px 0 3px; }
.delivery-detail-header p { margin: 0; color: #64748b; }
.delivery-dialog-close { width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #dbe2ea; border-radius: 12px; background: #fff; cursor: pointer; font-size: 24px; line-height: 1; }
.delivery-detail-body { min-height: 0; overflow-y: auto; padding: 18px; }
.delivery-dialog-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
[data-theme="dark"] .delivery-detail-dialog, [data-theme="dark"] .delivery-detail-header, [data-theme="dark"] .delivery-dialog-close { background: #121a27; color: #eef2f7; border-color: #334155; }
[data-theme="dark"] .delivery-record-trigger:hover, [data-theme="dark"] .delivery-record-trigger:focus-visible { background: #172033; }
@media (max-width: 760px) {
    .delivery-list { max-height: 62vh; padding-right: 2px; }
    .delivery-record-trigger { grid-template-columns: 1fr; gap: 8px; padding: 13px 14px; }
    .delivery-record-meta { grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; }
    .delivery-record-actions { padding: 0 14px 12px; justify-content: flex-start; }
    .delivery-detail-dialog { width: calc(100vw - 12px); max-width: none; max-height: calc(100dvh - 12px); margin: 6px; border-radius: 18px; }
    .delivery-detail-header { position: sticky; top: 0; z-index: 2; padding: 14px; }
    .delivery-detail-body { padding: 14px; }
}

/* V62 authoritative mobile app UI */
@media (max-width: 900px) {
    :root { --v62-mobile-gutter: 14px; --v62-mobile-gap: 12px; --v62-mobile-radius: 16px; }
    body:not(.print-view-body) .app-main { min-width: 0; overflow-x: clip; }
    body:not(.print-view-body) .page-content { width: 100%; min-width: 0; gap: var(--v62-mobile-gap); padding: 12px var(--v62-mobile-gutter) calc(104px + env(safe-area-inset-bottom)); padding-bottom: calc(104px + env(safe-area-inset-bottom)); overflow-x: clip; }
    body:not(.print-view-body) .page-header { min-width: 0; gap: 8px; padding: 12px var(--v62-mobile-gutter); }
    body:not(.print-view-body) .page-header > *, body:not(.print-view-body) .page-content > * { min-width: 0; max-width: 100%; }
    body:not(.print-view-body) .page-header h1 { font-size: clamp(1.3rem, 5.8vw, 1.65rem); line-height: 1.15; overflow-wrap: anywhere; }
    body:not(.print-view-body) .page-header .eyebrow { font-size: .68rem; letter-spacing: .08em; }
    body:not(.print-view-body) .content-card, body:not(.print-view-body) .filter-card { min-width: 0; border-radius: var(--v62-mobile-radius); padding: 14px; }
    body:not(.print-view-body) .filter-card { gap: 10px; }
    body:not(.print-view-body) :is(input, select, textarea, button, .btn) { max-width: 100%; }
    body:not(.print-view-body) :is(.table-wrap, .table-responsive, .responsive-table-wrap) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body:not(.print-view-body) :is(td, th, p, strong, b, span) { overflow-wrap: anywhere; }
}
@media (max-width: 380px) { body:not(.print-view-body) .page-content, body:not(.print-view-body) .page-header { --v62-mobile-gutter: 12px; } }

/* V62.2.4 cancelled P.O lineage in M.R / P.O monitoring */
.procurement-progress-badge.cancelled {
    background: #fff1f2;
    color: #b42318;
    border: 1px solid #fecdd3;
}
.po-cancelled-history {
    display: block;
    margin-top: 4px;
    color: #b42318;
    font-weight: 700;
}
html[data-theme="dark"] .procurement-progress-badge.cancelled {
    background: rgba(190, 24, 93, .16);
    color: #fda4af;
    border-color: rgba(251, 113, 133, .35);
}
html[data-theme="dark"] .po-cancelled-history { color: #fda4af; }

/* MPRM v67 — master-data action controls use the same visual language as system buttons. */
body:not(.print-view-body) .catalog-page .catalog-table .table-action {
    box-shadow: 0 6px 14px rgba(37, 99, 235, .10) !important;
    border-radius: 10px !important;
    font-weight: 800;
}

body:not(.print-view-body) .catalog-page .catalog-table .catalog-action-edit,
body:not(.print-view-body) .catalog-page .catalog-action-category {
    color: #fff !important;
    border-color: var(--blue-700) !important;
    background: linear-gradient(135deg, var(--blue-700), var(--cyan-500)) !important;
}

body:not(.print-view-body) .catalog-page .catalog-action-edit:hover,
body:not(.print-view-body) .catalog-page .catalog-action-category:hover {
    filter: brightness(1.04) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important;
}

body:not(.print-view-body) .catalog-page .catalog-action-toggle {
    box-shadow: 0 6px 14px rgba(37, 99, 235, .08) !important;
}

body:not(.print-view-body) .catalog-page form[data-next="archive"] .catalog-action-toggle {
    color: #fff !important;
    border-color: #dc2626 !important;
    background: linear-gradient(135deg, #dc2626, #f97316) !important;
}

body:not(.print-view-body) .catalog-page form[data-next="restore"] .catalog-action-toggle {
    color: #fff !important;
    border-color: #149553 !important;
    background: linear-gradient(135deg, #149553, #10b981) !important;
}

/* MPRM v68 — catalog action buttons intentionally match the system's shared button colors. */
body:not(.print-view-body) .catalog-page .catalog-table .catalog-action-edit,
body:not(.print-view-body) .catalog-page .catalog-table .catalog-action-category,
body:not(.print-view-body) .catalog-page .catalog-table .catalog-action-toggle {
    color: #fff !important;
    border: 1px solid rgba(37, 99, 235, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #2563eb, #16a3c7) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important;
}

body:not(.print-view-body) .catalog-page .catalog-table .catalog-action-edit:hover,
body:not(.print-view-body) .catalog-page .catalog-table .catalog-action-category:hover,
body:not(.print-view-body) .catalog-page .catalog-table .catalog-action-toggle:hover {
    filter: brightness(1.03) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .24) !important;
}

/* Keep archive / restore states consistent with the system-wide action colors. */
body:not(.print-view-body) .catalog-page .catalog-table form[data-next="archive"] .catalog-action-toggle {
    border-color: rgba(220, 38, 38, .18) !important;
    background: linear-gradient(135deg, #dc2626, #f97316) !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .18) !important;
}

body:not(.print-view-body) .catalog-page .catalog-table form[data-next="restore"] .catalog-action-toggle {
    border-color: rgba(20, 149, 83, .18) !important;
    background: linear-gradient(135deg, #149553, #10b981) !important;
    box-shadow: 0 8px 18px rgba(20, 149, 83, .18) !important;
}

/* MPRM v69 — normalize P.O master-data action buttons.
   Keep all catalog actions visually consistent; no special pastel/gradient colors. */
body:not(.print-view-body) .catalog-page .catalog-table :is(
    .catalog-action-edit,
    .catalog-action-category,
    .catalog-action-toggle,
    .table-action.is-view,
    .table-action.is-edit,
    .table-action.is-history,
    .table-action.is-primary,
    .table-action.is-success,
    .table-action.is-warning,
    .table-action.is-danger,
    .table-action.danger-link
) {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 13px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #16a3c7) !important;
    border: 1px solid rgba(37, 99, 235, .18) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    filter: none !important;
    transform: none;
}

body:not(.print-view-body) .catalog-page .catalog-table :is(
    .catalog-action-edit,
    .catalog-action-category,
    .catalog-action-toggle,
    .table-action.is-view,
    .table-action.is-edit,
    .table-action.is-history,
    .table-action.is-primary,
    .table-action.is-success,
    .table-action.is-warning,
    .table-action.is-danger,
    .table-action.danger-link
):hover {
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #16a3c7) !important;
    border-color: rgba(37, 99, 235, .18) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .24) !important;
    filter: brightness(1.03) !important;
    transform: translateY(-1px) !important;
}


/* V69: PO catalog buttons aligned with the main system button theme */
body:not(.print-view-body) .catalog-form-card .table-action,
body:not(.print-view-body) .catalog-table .table-action {
    color: #19304f !important;
    background: #eef3f9 !important;
    border: 1px solid #d9e2ec !important;
    box-shadow: none !important;
    transition: .2s ease;
}

body:not(.print-view-body) .catalog-form-card .table-action:hover,
body:not(.print-view-body) .catalog-table .table-action:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--blue-700), var(--cyan-500)) !important;
    border-color: transparent !important;
}

body:not(.print-view-body) .catalog-table .catalog-action-edit {
    background: linear-gradient(135deg, var(--blue-700), var(--cyan-500)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* MPRM v70 - authoritative P.O catalog button treatment.
   The page class lives on body, so keep these selectors scoped to that element. */
body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) :is(
    #catalogClearButton,
    .catalog-filter-bar .btn,
    .catalog-action-edit,
    .catalog-action-category
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border: 1px solid rgba(36, 99, 235, .18) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #2463eb, #159bb9) !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(36, 99, 235, .17) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) :is(
    #catalogClearButton,
    .catalog-filter-bar .btn,
    .catalog-action-edit,
    .catalog-action-category
):hover {
    border-color: rgba(29, 85, 207, .22) !important;
    background: linear-gradient(135deg, #1d55cf, #11859f) !important;
    color: #fff !important;
    box-shadow: 0 10px 21px rgba(36, 99, 235, .23) !important;
    filter: none !important;
    transform: translateY(-1px) !important;
}

body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) :is(
    #catalogClearButton,
    .catalog-filter-bar .btn,
    .catalog-action-edit,
    .catalog-action-category,
    .catalog-action-toggle
):focus-visible {
    outline: 3px solid rgba(37, 99, 235, .24) !important;
    outline-offset: 2px !important;
}

body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) form[data-next="archive"] .catalog-action-toggle {
    min-height: 38px !important;
    padding: 8px 13px !important;
    border: 1px solid #fecaca !important;
    border-radius: 10px !important;
    background: #fff1f2 !important;
    color: #b42318 !important;
    box-shadow: 0 6px 14px rgba(185, 28, 28, .09) !important;
    font-weight: 800 !important;
}

body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) form[data-next="restore"] .catalog-action-toggle {
    min-height: 38px !important;
    padding: 8px 13px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 10px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    box-shadow: 0 6px 14px rgba(4, 120, 87, .09) !important;
    font-weight: 800 !important;
}

body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) form[data-next="archive"] .catalog-action-toggle:hover {
    border-color: #fca5a5 !important;
    background: #ffe4e6 !important;
    color: #991b1b !important;
}

body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) form[data-next="restore"] .catalog-action-toggle:hover {
    border-color: #86efac !important;
    background: #dcfce7 !important;
    color: #066a50 !important;
}

html[data-theme="dark"] body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) form[data-next="archive"] .catalog-action-toggle {
    border-color: #7f3943 !important;
    background: #351c27 !important;
    color: #fecdd3 !important;
}

html[data-theme="dark"] body:is(.catalog-page-suppliers, .catalog-page-payment-terms, .catalog-page-projects):not(.print-view-body) form[data-next="restore"] .catalog-action-toggle {
    border-color: #27644c !important;
    background: #15362d !important;
    color: #bbf7d0 !important;
}