@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

.ipg-decisions .ipg-correction { background:#3975df; border-color:#3975df; color:#fff; }
.ipg-action-help { padding:9px 12px; border-top:1px solid var(--line); background:#f8f9fb; color:#667286; font-size:10px; line-height:1.45; }
.ipg-action-help b { color:#26334b; }
.ipg-publication-checks { margin:14px 0; border:1px solid #dce1e8; border-radius:8px; padding:10px; }
.ipg-publication-checks legend { font-size:10px; font-weight:800; letter-spacing:.7px; color:#788396; text-transform:uppercase; }
.ipg-publication-checks label { display:flex!important; align-items:center; gap:8px; margin:7px 0!important; text-transform:none!important; }
.ipg-publication-checks input { width:16px!important; height:16px!important; margin:0!important; }
.ipg-publication-list { background:#f8f9fb; padding:9px!important; border-radius:7px; }

/* Publisher password login */
.ipg-login-shell{min-height:720px;background:#eef1f5;padding:25px}
.ipg-login-tabs{width:min(430px,100%);margin:0 auto 10px;display:flex;gap:6px;background:#fff;border:1px solid #dce1e8;border-radius:10px;padding:5px}
.ipg-login-tabs button{flex:1;border:0;background:transparent;border-radius:7px;padding:10px 8px;font-size:11px;font-weight:800;color:#687487;cursor:pointer}
.ipg-login-tabs button.active{background:#17253e;color:#fff}
.ipg-login-shell .ipg-otp-shell{min-height:auto;background:transparent;padding:0}
.ipg-publisher-account-status{margin:8px 0 12px!important;padding:9px 11px;background:#f5f7fa;border:1px solid #e1e5eb;border-radius:7px;font-size:11px;color:#596579}
.ipg-publisher-account-status em{font-style:normal;color:#238657;font-weight:800}
.ipg-publisher-card>div:first-child button{margin-left:4px}

/* =========================================================
   DONE AND DUSTED UI POLISH — PUBLISHER ADMIN + LOGIN
   ========================================================= */

/* ---------- Publisher / publication administration ---------- */
.ipg-publisher-card {
    width: 100%;
    overflow: hidden;
}

/* The publication administration block is a vertical container.
   Older generic .ipg-publisher-card > div rules must not turn it into a flex row. */
.ipg-publisher-card > .ipg-publication-admin {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
}

.ipg-publication-admin-head {
    min-height: 42px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7ebf1;
}

.ipg-publication-admin-head strong {
    font-size: 12px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.ipg-publication-admin-head button {
    margin: 0 !important;
}

.ipg-publication-item {
    display: block !important;
    width: 100%;
    padding: 16px 2px 14px;
}

.ipg-publication-item-head {
    width: 100%;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ipg-publication-item-head > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.ipg-publication-item-head > span:last-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.ipg-publication-item-head strong {
    font-size: 13px;
    line-height: 1.3;
    word-break: break-word;
}

.ipg-publication-item-head small {
    margin-top: 4px;
    font-size: 10px;
}

.ipg-publication-item button,
.ipg-edition-row button {
    height: 30px;
    min-width: 0;
    padding: 0 9px;
    border: 1px solid #d5dce6;
    border-radius: 7px;
    background: #fff;
    color: #34435c;
    font-size: 10px;
    font-weight: 800;
    line-height: 28px;
    white-space: nowrap;
}

.ipg-publication-item button:hover,
.ipg-edition-row button:hover {
    border-color: #b9c5d5;
    background: #f7f9fc;
}

.ipg-publication-item button.ipg-delete,
.ipg-edition-row button.ipg-delete {
    color: #c53645 !important;
    border-color: #efcbd0 !important;
    background: #fff8f9 !important;
}

.ipg-edition-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 9px;
    margin: 13px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.ipg-edition-row {
    min-width: 0;
    min-height: 76px;
    padding: 11px 12px !important;
    border: 1px solid #e0e5ed;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(23,32,51,.035);
}

.ipg-edition-row > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.ipg-edition-row > span:last-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}

.ipg-edition-row strong {
    font-size: 11px;
    line-height: 1.35;
    word-break: break-word;
}

.ipg-edition-row small {
    max-width: 180px;
    line-height: 1.35;
}

.ipg-active-badge {
    margin-right: 2px !important;
    white-space: nowrap;
}

.ipg-publisher-card > p:not(.ipg-publisher-account-status) {
    margin: 0;
}

/* ---------- Login page ---------- */
/* Author CSS must not override the native [hidden] behavior. */
.ipg-login-shell [hidden] {
    display: none !important;
}

.ipg-login-shell {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(145deg, #f5f7fa 0%, #eef2f7 100%);
    padding: 42px 20px 55px;
    border-radius: 2px;
}

.ipg-login-tabs {
    width: min(520px, 100%);
    margin: 0 auto 12px;
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid #dbe1e9;
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 6px 20px rgba(23,32,51,.06);
}

.ipg-login-tabs button {
    flex: 1 1 0;
    min-height: 42px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15px;
    color: #687487;
    cursor: pointer;
    transition: .18s ease;
}

.ipg-login-tabs button:hover {
    background: #f4f6fa;
    color: #26334b;
}

.ipg-login-tabs button.active {
    background: #17253e;
    color: #fff;
    box-shadow: 0 3px 8px rgba(23,37,62,.18);
}

.ipg-login-shell .ipg-otp-shell {
    width: min(520px, 100%);
    min-height: 0;
    display: block;
    background: transparent;
    padding: 0;
}

.ipg-login-shell .ipg-otp-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 30px 34px 32px;
    border: 1px solid #dbe1e9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(23,32,51,.10);
}

.ipg-login-shell .ipg-otp-brand {
    margin-bottom: 22px;
}

.ipg-login-shell .ipg-otp-card h2 {
    margin: 0 0 7px;
    font-size: 24px;
    line-height: 1.2;
}

.ipg-login-shell .ipg-otp-card > p {
    margin: 0 0 22px;
    max-width: 440px;
    color: #6d7889;
    font-size: 12px;
    line-height: 1.55;
}

.ipg-login-shell .ipg-otp-card label {
    margin: 14px 0 11px;
}

.ipg-login-shell .ipg-otp-card input,
.ipg-login-shell .ipg-otp-card select {
    height: 46px;
    margin-top: 6px;
    font-size: 12px;
    border-color: #d2dae5;
    background: #fff;
}

.ipg-login-shell .ipg-otp-card input:focus,
.ipg-login-shell .ipg-otp-card select:focus {
    border-color: #F5BB35 !important;
    box-shadow: 0 0 0 3px rgba(245,187,53,.14) !important;
    outline: none;
}

.ipg-login-shell .ipg-otp-card .ipg-primary {
    height: 46px;
    margin-top: 13px;
    font-size: 12px;
}

.ipg-login-shell .ipg-otp-card #ipg-password-login-message,
.ipg-login-shell .ipg-otp-card #ipg-otp-message {
    min-height: 20px;
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.45;
}

.ipg-login-shell .ipg-otp-card .ipg-otp-back {
    font-size: 11px;
}

.ipg-login-shell .ipg-otp-card input:-webkit-autofill {
    -webkit-text-fill-color: #26334b;
    box-shadow: 0 0 0 1000px #fff inset;
}

/* Password setup page */
.ipg-password-setup {
    min-height: 620px;
    display: grid;
    place-items: center;
    padding: 45px 20px;
    background: linear-gradient(145deg, #f5f7fa 0%, #eef2f7 100%);
}

.ipg-password-setup .ipg-otp-card {
    width: min(520px, 100%);
    padding: 32px 34px;
    border: 1px solid #dbe1e9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(23,32,51,.10);
}

@media (max-width: 800px) {
    .ipg-publication-item-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ipg-publication-item-head > span:last-child {
        justify-content: flex-start;
    }

    .ipg-edition-list {
        grid-template-columns: 1fr;
    }

    .ipg-edition-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .ipg-edition-row > span:last-child {
        justify-content: flex-start;
    }

    .ipg-login-shell {
        min-height: 560px;
        padding: 25px 14px 35px;
    }

    .ipg-login-shell .ipg-otp-card {
        padding: 25px 22px 27px;
    }
}

@media (max-width: 520px) {
    .ipg-login-tabs button {
        font-size: 10px;
    }

    .ipg-login-shell .ipg-otp-card h2 {
        font-size: 21px;
    }
}


/* =========================================================
   DONE AND DUSTED — POPPINS MODERN UI
   Integrated into the final v100 stylesheet.
   Existing functionality/styles are preserved; these rules
   provide typography and visual polish on top of the UI.
   ========================================================= */

.ipg-app,
.ipg-app button,
.ipg-app input,
.ipg-app select,
.ipg-app textarea,
.ipg-app table,
.ipg-app th,
.ipg-app td {
    font-family: "Poppins", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography hierarchy */
.ipg-app h1,
.ipg-app h2,
.ipg-app h3,
.ipg-app h4,
.ipg-app h5,
.ipg-app h6,
.ipg-app strong,
.ipg-app b {
    font-weight: 600;
}

.ipg-app p,
.ipg-app span,
.ipg-app td,
.ipg-app input,
.ipg-app select,
.ipg-app textarea {
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

.ipg-app small,
.ipg-app .ipg-muted,
.ipg-app .ipg-help,
.ipg-app .ipg-description {
    font-weight: 300;
    font-family: "Poppins", sans-serif;
}

.ipg-app button,
.ipg-app label,
.ipg-app .ipg-nav-item,
.ipg-app .ipg-tab,
.ipg-app .ipg-badge,
.ipg-app .ipg-status,
.ipg-app .ipg-pill {
    font-weight: 500;
    font-family: "Poppins", sans-serif;
}

/* Cleaner headings */
.ipg-app h1,
.ipg-app h2,
.ipg-app h3,
.ipg-app h4 {
    color: #172033;
    letter-spacing: -0.2px;
    font-family: "Poppins", sans-serif;
}

/* Modern cards */
.ipg-app .ipg-card,
.ipg-app .ipg-panel,
.ipg-app .ipg-box,
.ipg-app .ipg-publisher-card,
.ipg-app .ipg-edition-card,
.ipg-app .ipg-section-card {
    border-radius: 14px;
    border-color: #e6e9ef;
    box-shadow: 0 5px 20px rgba(16, 24, 40, .045);
}

.ipg-app .ipg-publisher-card,
.ipg-app .ipg-edition-card,
.ipg-app .ipg-section-card {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ipg-app .ipg-publisher-card:hover,
.ipg-app .ipg-edition-card:hover,
.ipg-app .ipg-section-card:hover {
    border-color: #d7dce5;
    box-shadow: 0 9px 28px rgba(16, 24, 40, .065);
}

/* Modern form controls */
.ipg-app input:not([type="checkbox"]):not([type="radio"]),
.ipg-app select,
.ipg-app textarea {
    border: 1px solid #d9dee8;
    border-radius: 9px;
    background: #fff;
    color: #172033;
    font-size: 13px;
    font-weight: 400;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ipg-app input:not([type="checkbox"]):not([type="radio"])::placeholder,
.ipg-app textarea::placeholder {
    color: #a4acba;
    font-weight: 300;
}

.ipg-app input:not([type="checkbox"]):not([type="radio"]):focus,
.ipg-app select:focus,
.ipg-app textarea:focus {
    border-color: #6477ff;
    box-shadow: 0 0 0 3px rgba(100, 119, 255, .10);
    outline: 0;
}

/* Buttons */
.ipg-app button {
    font-size: 12px;
    font-weight: 500;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.ipg-app button:active {
    transform: translateY(1px);
}

.ipg-app .ipg-primary {
    border-radius: 9px;
    font-weight: 600;
    box-shadow: 0 5px 14px rgba(23, 32, 51, .12);
}

.ipg-app .ipg-primary:hover {
    box-shadow: 0 8px 20px rgba(23, 32, 51, .16);
}

/* Publisher header/card polish */
.ipg-app .ipg-publisher-card h3 {
    font-size: 18px;
    font-weight: 600;
}

.ipg-app .ipg-publisher-card p {
    font-size: 12px;
    line-height: 1.6;
}

.ipg-app .ipg-publisher-card small {
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Banner / summary areas */
.ipg-app .ipg-banner {
    border-radius: 14px;
    border-color: #e5e9f0;
    background: #f8f9fc;
}

.ipg-app .ipg-banner h3 {
    font-weight: 600;
}

.ipg-app .ipg-banner p {
    font-weight: 300;
    line-height: 1.65;
}

/* Status badges */
.ipg-app .ipg-email-status,
.ipg-app .ipg-badge,
.ipg-app .ipg-status,
.ipg-app .ipg-pill {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
}

/* Login UI */
.ipg-login-shell,
.ipg-login-shell input,
.ipg-login-shell select,
.ipg-login-shell button,
.ipg-login-shell label {
    font-family: "Poppins", sans-serif;
}

.ipg-login-shell .ipg-login-tabs {
    border-radius: 11px;
    background: #f2f4f7;
    border-color: #e1e5eb;
}

.ipg-login-shell .ipg-login-tabs button {
    font-weight: 500;
}

.ipg-login-shell .ipg-login-tabs button.active {
    font-weight: 600;
}

/* Table readability */
.ipg-app table th {
    font-weight: 600;
    letter-spacing: .3px;
}

.ipg-app table td {
    font-weight: 400;
}

/* Empty states */
.ipg-app .ipg-empty strong {
    font-weight: 600;
}

.ipg-app .ipg-empty span {
    font-weight: 300;
}

/* Responsive */
@media (max-width: 900px) {
    .ipg-app h1 { font-size: 26px; }
    .ipg-app h2 { font-size: 21px; }
    .ipg-app h3 { font-size: 17px; }
}

@media (max-width: 600px) {
    .ipg-app h1 { font-size: 23px; }
    .ipg-app h2 { font-size: 19px; }
    .ipg-app h3 { font-size: 16px; }

    .ipg-app button {
        font-size: 11px;
    }

    .ipg-app input:not([type="checkbox"]):not([type="radio"]),
    .ipg-app select,
    .ipg-app textarea {
        font-size: 12px;
    }
}

/* =========================================================
   ACCOUNT MENU / PROFILE / LOGOUT
   ========================================================= */
.ipg-profile-wrap{position:relative;margin-top:12px;z-index:20}.ipg-profile{width:100%;display:flex;align-items:center;gap:10px;padding:9px 6px;border:1px solid transparent;border-radius:10px;background:transparent;color:#fff;text-align:left}.ipg-profile:hover,.ipg-profile[aria-expanded="true"]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}.ipg-profile>b,.ipg-profile-menu-head>b{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:#52617b;color:#fff;font-size:11px;font-weight:600}.ipg-profile span{min-width:0;flex:1}.ipg-profile strong,.ipg-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ipg-profile strong{font-size:11px;font-weight:600;color:#fff}.ipg-profile small{margin-top:2px;color:#8e9ab0;font-size:9px;font-weight:400}.ipg-profile>i{font-style:normal;color:#9ca9bc;font-size:14px;transition:transform .18s ease}.ipg-profile[aria-expanded="true"]>i{transform:rotate(180deg)}.ipg-profile-menu{position:absolute;left:0;bottom:calc(100% + 8px);width:270px;padding:8px;border:1px solid #dfe4ec;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(16,24,40,.18);z-index:100000}.ipg-profile-menu-head{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #edf0f4;margin-bottom:5px}.ipg-profile-menu-head>b{background:#172033}.ipg-profile-menu-head span{min-width:0}.ipg-profile-menu-head strong,.ipg-profile-menu-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ipg-profile-menu-head strong{font-size:12px;color:#172033;font-weight:600}.ipg-profile-menu-head small{margin-top:2px;font-size:9px;color:#8a94a5;font-weight:400}.ipg-profile-menu>button{width:100%;display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;border:0;border-radius:7px;background:#fff;color:#344054;text-align:left;font-size:11px;font-weight:500}.ipg-profile-menu>button:hover{background:#f5f7fa}.ipg-profile-menu>button span{width:18px;color:#667085;font-size:14px}.ipg-profile-menu>button:last-child{color:#b42318}.ipg-profile-menu>button:last-child span{color:#b42318}.ipg-profile-modal{width:min(470px,100%)}.ipg-profile-summary{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid #e5e9f0;border-radius:11px;background:#f8f9fb;margin-bottom:15px}.ipg-profile-summary>b{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#172033;color:#fff;font-size:14px;font-weight:600}.ipg-profile-summary strong,.ipg-profile-summary span{display:block}.ipg-profile-summary strong{font-size:14px;font-weight:600;color:#172033}.ipg-profile-summary span{margin-top:3px;font-size:10px;color:#667085;font-weight:400}.ipg-profile-details{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e6eaf0;border-radius:10px;overflow:hidden}.ipg-profile-details>div{padding:12px 13px;border-bottom:1px solid #edf0f4}.ipg-profile-details>div:nth-child(odd){border-right:1px solid #edf0f4}.ipg-profile-details>div:nth-last-child(-n+2){border-bottom:0}.ipg-profile-details small,.ipg-profile-details strong{display:block}.ipg-profile-details small{font-size:9px;text-transform:uppercase;letter-spacing:.55px;color:#98a2b3;font-weight:500}.ipg-profile-details strong{margin-top:4px;font-size:11px;color:#344054;font-weight:500;overflow-wrap:anywhere}.ipg-profile-modal .ipg-modal-actions{margin-top:17px}.ipg-profile-modal .ipg-modal-actions .ipg-primary{background:#172033;border-color:#172033}.ipg-profile-modal .ipg-modal-actions .ipg-primary:hover{background:#27334b}

@media(max-width:800px){.ipg-profile-wrap{display:none}}
@media(max-width:760px){.ipg-profile-details{grid-template-columns:1fr}.ipg-profile-details>div:nth-child(odd){border-right:0}.ipg-profile-details>div:nth-last-child(-n+2){border-bottom:1px solid #edf0f4}.ipg-profile-details>div:last-child{border-bottom:0}}

/* =========================================================
   DONE AND DUSTED — GLOBAL POPUP TYPOGRAPHY FIX
   All modal/popup forms live outside .ipg-app in some flows,
   so the Poppins font must be applied directly to the modal.
   Form text is standardized to 12px for readability.
   ========================================================= */

.ipg-modal-wrap,
.ipg-modal-wrap *,
.ipg-publisher-setup-modal,
.ipg-publisher-setup-modal *,
.ipg-profile-modal-wrap,
.ipg-profile-modal-wrap * {
    font-family: "Poppins", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Modal body / normal text */
.ipg-modal-wrap .ipg-modal,
.ipg-modal-wrap .ipg-modal p,
.ipg-modal-wrap .ipg-modal span,
.ipg-modal-wrap .ipg-modal div,
.ipg-modal-wrap .ipg-modal label,
.ipg-modal-wrap .ipg-modal input,
.ipg-modal-wrap .ipg-modal select,
.ipg-modal-wrap .ipg-modal textarea,
.ipg-modal-wrap .ipg-modal option,
.ipg-modal-wrap .ipg-modal button,
.ipg-modal-wrap .ipg-modal small,
.ipg-modal-wrap .ipg-modal strong,
.ipg-modal-wrap .ipg-modal b,
.ipg-modal-wrap .ipg-modal-actions,
.ipg-modal-wrap .ipg-modal-actions button,
.ipg-modal-wrap .ipg-ai-note,
.ipg-modal-wrap .ipg-ai-note strong,
.ipg-modal-wrap .ipg-ai-note small {
    font-size: 12px;
}

/* Form labels */
.ipg-modal-wrap .ipg-modal label {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .25px !important;
    text-transform: none !important;
    line-height: 1.45;
}

/* Inputs / selects / textareas */
.ipg-modal-wrap .ipg-modal input,
.ipg-modal-wrap .ipg-modal select,
.ipg-modal-wrap .ipg-modal textarea {
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5;
}

.ipg-modal-wrap .ipg-modal input::placeholder,
.ipg-modal-wrap .ipg-modal textarea::placeholder {
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #98a2b3;
}

.ipg-modal-wrap .ipg-modal select option {
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Modal title */
.ipg-modal-wrap .ipg-modal-title small {
    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .8px !important;
}

.ipg-modal-wrap .ipg-modal-title h3 {
    font-family: "Poppins", sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

/* Modal action buttons */
.ipg-modal-wrap .ipg-modal-actions button {
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Info / analyzer note */
.ipg-modal-wrap .ipg-ai-note strong {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.ipg-modal-wrap .ipg-ai-note small {
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 1.55;
}

/* Profile popup */
.ipg-profile-modal-wrap .ipg-profile-summary strong {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.ipg-profile-modal-wrap .ipg-profile-summary span,
.ipg-profile-modal-wrap .ipg-profile-details strong {
    font-size: 12px !important;
    font-weight: 400 !important;
}

.ipg-profile-modal-wrap .ipg-profile-details small {
    font-size: 11px !important;
    font-weight: 500 !important;
}

.ipg-profile-modal-wrap .ipg-modal-actions button {
    font-size: 12px !important;
}

/* Keep the close icon visually distinct */
.ipg-modal-wrap .ipg-modal-title > button {
    font-family: "Poppins", sans-serif !important;
    font-size: 25px !important;
    font-weight: 600 !important;
}

/* Publisher setup popup */
.ipg-publisher-setup-modal .ipg-modal label,
.ipg-publisher-setup-modal .ipg-modal input,
.ipg-publisher-setup-modal .ipg-modal select,
.ipg-publisher-setup-modal .ipg-modal textarea {
    font-size: 12px !important;
}

/* =========================================================
   DONE AND DUSTED — PASSWORD VISIBILITY + ADMIN UI REFRESH
   ========================================================= */

/* Password fields */
.ipg-password-field {
    position: relative;
    display: block;
    width: 100%;
}

.ipg-password-field > input[type="password"],
.ipg-password-field > input[type="text"] {
    padding-right: 44px !important;
}

.ipg-password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #F5BB35 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.ipg-password-toggle:hover {
    background: rgba(245,187,53,.10) !important;
    color: #F5BB35 !important;
}

.ipg-password-toggle svg { width: 18px !important; height: 18px !important; display: block !important; }

/* Publisher administration action controls */
.ipg-publisher-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.ipg-action-with-icon,
.ipg-icon-text-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

.ipg-ui-icon,
.ipg-icon-text-btn > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
}

.ipg-icon-text-btn > span:first-child {
    width: 16px;
    height: 16px;
}

.ipg-icon-only {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 15px !important;
}

.ipg-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

/* Better publisher cards */
.ipg-publisher-card {
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .055) !important;
}

.ipg-publisher-head {
    align-items: flex-start !important;
    gap: 18px !important;
}

.ipg-publisher-head > span:first-child {
    min-width: 0;
    flex: 1;
}

.ipg-publisher-head h3 {
    margin-bottom: 4px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.ipg-publication-admin {
    margin-top: 18px !important;
    border: 1px solid #e4e8ef !important;
    border-radius: 13px !important;
    background: #fbfcfe !important;
    overflow: hidden !important;
}

.ipg-publication-admin-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 13px 14px !important;
    background: #f6f8fb !important;
    border-bottom: 1px solid #e5e9ef !important;
    color: #344054 !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.ipg-publication-item {
    margin: 12px !important;
    padding: 14px !important;
    border: 1px solid #e2e7ef !important;
    border-radius: 11px !important;
    background: #fff !important;
}

.ipg-publication-item-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.ipg-publication-item-head > span:last-child,
.ipg-edition-row > span:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

.ipg-edition-list {
    display: grid !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.ipg-edition-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 11px 12px !important;
    border: 1px solid #e8ebf0 !important;
    border-radius: 9px !important;
    background: #fafbfc !important;
}

.ipg-edition-row strong,
.ipg-publication-item-head strong {
    font-weight: 600 !important;
    color: #172033 !important;
}

.ipg-edition-row small,
.ipg-publication-item-head small {
    display: block !important;
    margin-top: 3px !important;
    color: #98a2b3 !important;
    font-size: 10px !important;
    font-weight: 300 !important;
}

.ipg-staff-list {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e7eaf0 !important;
}

.ipg-staff-head {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 9px !important;
}

.ipg-staff-head strong {
    font-weight: 600 !important;
}

.ipg-staff-head small {
    color: #98a2b3 !important;
    font-weight: 400 !important;
}

.ipg-staff-list > p {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

.ipg-staff-list > p > span {
    text-align: right;
    color: #667085 !important;
}

/* Page plans & mastheads */
.ipg-plan-title {
    margin-bottom: 18px !important;
    padding: 18px 20px !important;
    border: 1px solid #e2e7ef !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #ffffff, #f8f9fc) !important;
    box-shadow: 0 6px 22px rgba(16,24,40,.04) !important;
}

.ipg-plan-title > b {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #17253e !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.ipg-plan-title h3 {
    margin-bottom: 3px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.ipg-plan-title p {
    margin: 0 !important;
    color: #98a2b3 !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

.ipg-plan-grid {
    gap: 18px !important;
}

.ipg-table-card,
.ipg-mast-card {
    border-radius: 14px !important;
    border-color: #e2e7ef !important;
    box-shadow: 0 7px 24px rgba(16,24,40,.045) !important;
    overflow: hidden !important;
}

.ipg-card-title {
    padding: 16px 18px !important;
    background: #f8f9fb !important;
    border-bottom: 1px solid #e7eaf0 !important;
}

.ipg-card-title h3 {
    margin-top: 3px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.ipg-card-title small,
.ipg-mast-card > div:first-child small {
    color: #98a2b3 !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}

.ipg-table-head.ipg-section-grid {
    padding: 11px 15px !important;
    background: #fff !important;
    color: #98a2b3 !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}

.ipg-table-row.ipg-section-grid {
    min-height: 65px !important;
    padding: 10px 15px !important;
    transition: background .15s ease !important;
}

.ipg-table-row.ipg-section-grid:hover {
    background: #fafbfc !important;
}

.ipg-section-name {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.ipg-table-row.ipg-section-grid > span small {
    display: block !important;
    margin-top: 3px !important;
    color: #98a2b3 !important;
    font-size: 9px !important;
    font-weight: 300 !important;
}

.ipg-mast-card {
    padding: 18px !important;
    background: #fff !important;
}

.ipg-mast-card h3 {
    margin-top: 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.ipg-logo-preview {
    margin: 14px 0 !important;
    min-height: 150px !important;
    border: 1px solid #e0d8c9 !important;
    border-radius: 9px !important;
    background: #fffdf8 !important;
    box-shadow: inset 0 0 0 5px #fff !important;
}

.ipg-mast-card dl {
    margin: 0 !important;
    border-top: 1px solid #e8ebf0 !important;
}

.ipg-mast-card dl > div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 15px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
}

.ipg-mast-card dt {
    color: #667085 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
}

.ipg-mast-card dd {
    margin: 0 !important;
    color: #172033 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-align: right !important;
}

.ipg-plan-empty {
    grid-column: 1 / -1 !important;
    margin: 14px !important;
}

@media (max-width: 900px) {
    .ipg-publisher-head,
    .ipg-publication-item-head,
    .ipg-edition-row,
    .ipg-staff-list > p {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .ipg-publisher-actions,
    .ipg-publication-item-head > span:last-child,
    .ipg-edition-row > span:last-child,
    .ipg-staff-list > p > span {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

/* =========================================================
   DONE AND DUSTED — PUBLISHERS & USERS FINAL UI
   Fixes narrow/vertical publisher text and modernizes the
   publisher, publication, edition and staff controls.
   ========================================================= */

.ipg-app .ipg-publisher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 18px !important;
}

.ipg-app .ipg-publisher-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
    overflow: visible !important;
    background: #fff !important;
}

/* IMPORTANT: identity gets the full row; actions sit underneath.
   This prevents publisher names/emails from becoming one-letter columns. */
.ipg-app .ipg-publisher-head {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 13px !important;
}

.ipg-app .ipg-publisher-head > span:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

.ipg-app .ipg-publisher-head > span:first-child small,
.ipg-app .ipg-publisher-head > span:first-child h3,
.ipg-app .ipg-publisher-head > span:first-child p {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.ipg-app .ipg-publisher-head > span:first-child small {
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
}

.ipg-app .ipg-publisher-head > span:first-child h3 {
    margin: 0 0 4px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

.ipg-app .ipg-publisher-head > span:first-child p {
    margin: 0 !important;
    line-height: 1.45 !important;
    color: #667085 !important;
}

.ipg-app .ipg-publisher-actions {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
}

/* All action buttons get real horizontal breathing room. */
.ipg-app .ipg-publisher-actions button,
.ipg-app .ipg-action-with-icon,
.ipg-app .ipg-icon-text-btn,
.ipg-app .ipg-publication-admin-head button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.ipg-app .ipg-publisher-actions button i,
.ipg-app .ipg-action-with-icon i,
.ipg-app .ipg-icon-text-btn i,
.ipg-app .ipg-publication-admin-head button i {
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* Primary publisher actions */
.ipg-app .ipg-publisher-actions .ipg-warning {
    background: #fffaf0 !important;
    border: 1px solid #efc15a !important;
    color: #9a6800 !important;
}

.ipg-app .ipg-publisher-actions .ipg-warning:hover {
    background: #fff4d8 !important;
    border-color: #e7aa2c !important;
}

.ipg-app .ipg-publisher-actions .ipg-success {
    background: #f2fbf5 !important;
    border: 1px solid #a9d9bd !important;
    color: #207347 !important;
}

.ipg-app .ipg-publisher-actions .ipg-delete,
.ipg-app .ipg-publication-item .ipg-delete,
.ipg-app .ipg-edition-row .ipg-delete {
    background: #fff8f9 !important;
    border: 1px solid #efc5cb !important;
    color: #bd3042 !important;
}

.ipg-app .ipg-publisher-account-status {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 15px 0 14px !important;
    padding: 10px 12px !important;
    min-height: 40px !important;
    border-radius: 9px !important;
}

.ipg-app .ipg-publication-admin {
    margin-top: 0 !important;
    border-radius: 12px !important;
}

.ipg-app .ipg-publication-admin-head {
    min-height: 48px !important;
    padding: 10px 13px !important;
}

.ipg-app .ipg-publication-admin-head strong {
    font-size: 11px !important;
    letter-spacing: .8px !important;
}

.ipg-app .ipg-publication-item {
    margin: 11px !important;
    padding: 14px !important;
    border-radius: 10px !important;
}

.ipg-app .ipg-publication-item-head {
    width: 100% !important;
    min-width: 0 !important;
}

.ipg-app .ipg-publication-item-head > span:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.ipg-app .ipg-publication-item-head > span:first-child strong {
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.ipg-app .ipg-publication-item-head > span:last-child {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

.ipg-app .ipg-edition-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

.ipg-app .ipg-edition-row {
    min-width: 0 !important;
}

.ipg-app .ipg-edition-row > span:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.ipg-app .ipg-edition-row > span:first-child strong,
.ipg-app .ipg-edition-row > span:first-child small {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.ipg-app .ipg-staff-list > p {
    min-width: 0 !important;
}

.ipg-app .ipg-staff-list > p > strong {
    flex: 0 0 auto !important;
    min-width: 90px !important;
}

.ipg-app .ipg-staff-list > p > span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-wrap: anywhere !important;
}

/* Summary banner: stronger contrast and clearer statistics. */
.ipg-app .ipg-banner {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #17253e 0%, #22395e 100%) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(23,37,62,.10) !important;
}

.ipg-app .ipg-banner h3 {
    color: #fff !important;
    margin-bottom: 5px !important;
}

.ipg-app .ipg-banner p {
    color: #c5cfdf !important;
}

.ipg-app .ipg-banner > b {
    min-width: 72px !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 600 !important;
}

.ipg-app .ipg-banner > b small {
    color: #c5cfdf !important;
    font-size: 9px !important;
    font-weight: 400 !important;
}

/* Use Font Awesome icons consistently in action controls. */
.ipg-app .ipg-action-with-icon i,
.ipg-app .ipg-icon-text-btn i,
.ipg-app .ipg-publisher-actions i {
    color: currentColor !important;
}

@media (max-width: 1100px) {
    .ipg-app .ipg-publisher-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .ipg-app .ipg-publisher-card {
        padding: 16px !important;
    }

    .ipg-app .ipg-publication-item-head,
    .ipg-app .ipg-edition-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .ipg-app .ipg-publication-item-head > span:last-child,
    .ipg-app .ipg-edition-row > span:last-child {
        justify-content: flex-start !important;
    }

    .ipg-app .ipg-staff-list > p {
        display: block !important;
    }

    .ipg-app .ipg-staff-list > p > strong,
    .ipg-app .ipg-staff-list > p > span {
        display: block !important;
        text-align: left !important;
        min-width: 0 !important;
    }
}


/* Global Font Awesome action language - consistent across Done and Dusted */
.ipg-app button.ipg-action-with-icon,
.ipg-app button.ipg-icon-text-btn,
.ipg-app button.ipg-edit,
.ipg-app button.ipg-delete {
    min-height: 34px !important;
    min-width: auto !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}
.ipg-app button.ipg-action-with-icon i,
.ipg-app button.ipg-icon-text-btn i,
.ipg-app button.ipg-edit i,
.ipg-app button.ipg-delete i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}
.ipg-app button.ipg-edit,
.ipg-app button.ipg-action-with-icon {
    color: #17253e !important;
    border: 1px solid #d5ddea !important;
    background: #fff !important;
}
.ipg-app button.ipg-edit:hover,
.ipg-app button.ipg-action-with-icon:hover {
    border-color: #f5bb35 !important;
    background: #fffaf0 !important;
    color: #17253e !important;
}
.ipg-app button.ipg-delete {
    color: #d43b4a !important;
    border: 1px solid #f0b9c0 !important;
    background: #fff !important;
}
.ipg-app button.ipg-delete:hover {
    background: #fff4f5 !important;
    border-color: #e27a86 !important;
    color: #b42332 !important;
}
.ipg-app .ipg-icon-only {
    width: auto !important;
    min-width: 34px !important;
    padding: 0 10px !important;
}
.ipg-app .ipg-row-actions {
    gap: 7px !important;
    flex-wrap: wrap !important;
}
/* Keep action icons on the LEFT of their labels everywhere. */
.ipg-app button > i.fa-solid,
.ipg-app button > i.fa-regular,
.ipg-app button > i.fa-brands {
    order: -1 !important;
}

/* =========================================================
   DONE AND DUSTED — PAGE INSPECTION WORKSPACE V2
   Modern Configure → Upload → Inspect → Review layout.
   Scoped to the inspection workspace so other plugin screens
   keep their existing behaviour.
   ========================================================= */
.ipg-app .ipg-inspection-workspace{
    grid-template-columns:minmax(0,1fr) 360px !important;
    background:#eef2f6;
}
.ipg-app .ipg-header-inspection{
    display:flex !important;
    align-items:stretch !important;
    background:#fff;
    border-left:1px solid #e3e8ef;
    border-right:1px solid #e3e8ef;
    border-bottom:1px solid #e3e8ef;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 14px rgba(23,32,51,.05);
}
.ipg-app .ipg-header-inspection .ipg-result-head{
    flex:1;
    min-width:260px;
    padding:14px 18px !important;
    border:0 !important;
    background:#fff;
}
.ipg-app .ipg-header-inspection .ipg-summary{
    width:min(520px,48%);
    flex:0 0 min(520px,48%);
    border:0 !important;
    border-left:1px solid #e5e9ef !important;
}
.ipg-app .ipg-header-inspection .ipg-score{
    width:56px;height:56px;flex-basis:56px;
}
.ipg-app .ipg-inspection-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:12px 15px 0;
    padding:10px;
    background:#fff;
    border:1px solid #dde3eb;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(23,32,51,.04);
}
.ipg-app .ipg-step{
    position:relative;
    min-width:0;
    display:grid;
    grid-template-columns:30px 1fr;
    column-gap:9px;
    align-items:center;
    padding:8px 10px;
    border-radius:9px;
    color:#7b8798;
}
.ipg-app .ipg-step:not(:last-child)::after{
    content:'→';
    position:absolute;
    right:-7px;
    top:15px;
    color:#c0c8d3;
    font-weight:700;
}
.ipg-app .ipg-step b{
    grid-row:span 2;
    width:30px;height:30px;
    display:grid;place-items:center;
    border-radius:50%;
    background:#edf1f6;
    color:#68758a;
    font-size:11px;
}
.ipg-app .ipg-step span{font-size:11px;font-weight:800;color:#46536a;line-height:1.2}
.ipg-app .ipg-step small{font-size:9px;color:#9aa4b2;line-height:1.25}
.ipg-app .ipg-step.active{background:#fff8e9}
.ipg-app .ipg-step.active b{background:#F5BB35;color:#fff}
.ipg-app .ipg-step.active span{color:#172033}
.ipg-app .ipg-context.ipg-inspection-context,
.ipg-app .ipg-context{
    grid-template-columns:1.2fr 1.05fr 1fr 1.15fr .8fr .9fr .95fr minmax(245px,1.3fr) !important;
    padding:14px 15px !important;
    background:#f8fafc !important;
    border:0 !important;
    gap:10px !important;
    align-items:end !important;
}
.ipg-app .ipg-context::before{
    content:'INSPECTION SETUP';
    grid-column:1/-1;
    font-size:10px;
    letter-spacing:1.2px;
    font-weight:800;
    color:#718096;
    margin-bottom:-2px;
}
.ipg-app .ipg-context label{
    min-width:0;
}
.ipg-app .ipg-context input,
.ipg-app .ipg-context select{
    height:38px !important;
    border-radius:8px !important;
    background:#fff !important;
    font-size:11px !important;
}
.ipg-app .ipg-file{
    height:50px !important;
    min-width:0;
    border:1px dashed #e8a51f !important;
    background:#fffaf0 !important;
    padding:6px 9px !important;
}
.ipg-app .ipg-file>span{
    background:#F5BB35 !important;
    color:#fff !important;
}
.ipg-app .ipg-file i{color:#E7921D !important}
.ipg-app .ipg-inspection-workspace .ipg-stage{
    min-width:0;
    background:#e5e9ee !important;
    padding:58px 20px 20px !important;
    border-right:1px solid #d7dde5;
}
.ipg-app .ipg-inspection-workspace .ipg-stage-tools{
    position:sticky !important;
    top:0 !important;
    z-index:20;
    left:auto !important;
    right:auto !important;
    margin:-44px -4px 12px;
    padding:8px 10px;
    min-height:38px;
    background:rgba(255,255,255,.96);
    border:1px solid #dce2ea;
    border-radius:9px;
    box-shadow:0 4px 12px rgba(23,32,51,.07);
    backdrop-filter:blur(6px);
}
.ipg-app .ipg-inspection-workspace .ipg-preview-title{
    display:flex;align-items:center;gap:9px;
}
.ipg-app .ipg-inspection-workspace .ipg-preview-title strong{color:#26334b;font-size:10px}
.ipg-app .ipg-inspection-workspace .ipg-preview-status{color:#8a95a5;font-size:10px;font-weight:500;letter-spacing:0}
.ipg-app .ipg-inspection-workspace .ipg-zoom-tools{
    display:flex;align-items:center;gap:6px;
}
.ipg-app .ipg-inspection-workspace .ipg-zoom-tools button{
    width:30px;height:30px;border:1px solid #d2d9e2;background:#fff;border-radius:7px;color:#34425a;font-weight:800;
}
.ipg-app .ipg-inspection-workspace .ipg-zoom-tools .ipg-pan-toggle.active{
    background:#fff5dc;border-color:#F5BB35;color:#C47A08;
}
.ipg-app .ipg-inspection-workspace .ipg-page-meta{
    margin:0 0 9px !important;
    padding:0 2px;
    width:min(430px,80%) !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results{
    width:auto !important;
    min-width:0;
    border-left:0 !important;
    background:#fff !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-queue-header{
    min-height:54px;
    padding:10px 13px !important;
    background:#fff !important;
    border-bottom:1px solid #e2e7ee !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-queue-header strong{
    color:#26334b;
    font-size:11px;
    letter-spacing:.8px;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-queue-count{
    margin-left:auto;
    min-width:26px;height:26px;
    display:grid;place-items:center;
    border-radius:50%;
    background:#17253e;color:#fff;font-size:10px;font-weight:800;
}
.ipg-app .ipg-inspection-workspace .ipg-issues-toggle-arrow{
    width:30px !important;height:30px !important;
    border:1px solid #dbe1e9 !important;
    background:#fff !important;
    border-radius:50% !important;
    color:#34425a !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-tabs{
    display:flex !important;
    overflow-x:auto;
    scrollbar-width:thin;
    padding:9px 10px !important;
    gap:6px !important;
    background:#f8fafc !important;
    border-bottom:1px solid #e5e9ef !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-tabs button{
    flex:0 0 auto;
    min-height:31px;
    padding:0 10px !important;
    border:1px solid #d9dfe7 !important;
    background:#fff !important;
    color:#667286 !important;
    border-radius:16px !important;
    font-size:10px !important;
    font-weight:700 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-tabs button.active{
    background:#17253e !important;
    border-color:#17253e !important;
    color:#fff !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-tabs button b{
    margin-left:4px;
    opacity:.85;
}
.ipg-app .ipg-inspection-workspace .ipg-issues{
    background:#f7f9fb;
    padding:9px;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-group{
    margin-bottom:7px;
    border:1px solid #e0e5ec;
    border-radius:9px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 2px 7px rgba(23,32,51,.035);
}
.ipg-app .ipg-inspection-workspace .ipg-issue{
    width:100%;
    min-height:58px;
    padding:9px 10px !important;
    background:#fff !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue:hover,
.ipg-app .ipg-inspection-workspace .ipg-issue.active{
    background:#fffaf0 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-detail{
    background:#fbfcfe !important;
}
.ipg-app .ipg-inspection-workspace .ipg-empty{
    min-height:300px;
    background:#fff;
    border:1px dashed #dce2ea;
    border-radius:10px;
    margin:2px;
}
.ipg-app .ipg-inspection-workspace .ipg-empty>i:not(.ipg-spinner){
    width:54px;height:54px;
    display:grid;place-items:center;
    border-radius:50%;
    background:#fff5dc;
    color:#F5BB35;
    font-size:26px;
    padding:0 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-top-annotated{
    border:1px solid #d8dee7;
    background:#fff;
    border-radius:6px;
    color:#47546a;
    padding:5px 8px;
    font-size:10px;
    font-weight:700;
}
.ipg-app .ipg-inspection-workspace .ipg-top-annotated:hover{
    border-color:#F5BB35;
    color:#B66D05;
    background:#fffaf0;
}
@media(max-width:1200px){
    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
    .ipg-app .ipg-file{grid-column:auto !important}
}
@media(max-width:900px){
    .ipg-app .ipg-header-inspection{display:block !important}
    .ipg-app .ipg-header-inspection .ipg-summary{width:100%;max-width:none;border-left:0 !important;border-top:1px solid #e5e9ef !important}
    .ipg-app .ipg-inspection-steps{grid-template-columns:repeat(2,1fr)}
    .ipg-app .ipg-step:nth-child(2)::after{display:none}
    .ipg-app .ipg-step:nth-child(4)::after{display:none}
    .ipg-app .ipg-inspection-workspace{grid-template-columns:1fr !important;height:auto !important}
    .ipg-app .ipg-inspection-workspace .ipg-stage{min-height:650px}
    .ipg-app .ipg-inspection-workspace .ipg-results{min-height:560px}
}
@media(max-width:600px){
    .ipg-app .ipg-inspection-steps{grid-template-columns:1fr;padding:8px}
    .ipg-app .ipg-step:not(:last-child)::after{display:none}
    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context{grid-template-columns:1fr 1fr !important}
    .ipg-app .ipg-context::before{grid-column:1/-1}
    .ipg-app .ipg-file{grid-column:1/-1 !important}
    .ipg-app .ipg-inspection-workspace .ipg-stage{padding-left:10px !important;padding-right:10px !important}
    .ipg-app .ipg-inspection-workspace .ipg-stage-tools{margin-left:0;margin-right:0}
    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools small{display:none}
}

/* =========================================================
   PAGE INSPECTION V2.1 — WORKFLOW / QUEUE / PREVIEW FIXES
   ========================================================= */
.ipg-app .ipg-inspection-steps .ipg-step{
    cursor:pointer;
    user-select:none;
    transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.ipg-app .ipg-inspection-steps .ipg-step:hover{background:#f8fafc;transform:translateY(-1px)}
.ipg-app .ipg-inspection-steps .ipg-step.active{background:#fff8e9;box-shadow:inset 0 0 0 1px rgba(245,187,53,.18)}
.ipg-app .ipg-inspection-steps .ipg-step.done b{background:#e7f7ee;color:#188751}
.ipg-app .ipg-inspection-steps .ipg-step.done span{color:#2c6249}
.ipg-app .ipg-inspection-steps .ipg-step:focus-visible{outline:2px solid #F5BB35;outline-offset:2px}

/* Preview toolbar is not sticky: this removes the large blank offset above the PDF. */
.ipg-app .ipg-inspection-workspace .ipg-stage{
    position:relative !important;
    padding:26px 20px 20px !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
}
.ipg-app .ipg-inspection-workspace .ipg-stage::before{top:7px !important;left:18px !important}
.ipg-app .ipg-inspection-workspace .ipg-stage-tools{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    margin:0 0 8px !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    z-index:5 !important;
    backdrop-filter:none !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page-meta{margin:0 0 8px !important;padding:0 2px !important}
.ipg-app .ipg-inspection-workspace .ipg-stage .ipg-page{margin-top:0 !important}

/* Reliable Issue Queue toggle in open and collapsed states. */
.ipg-app .ipg-inspection-workspace .ipg-results{position:relative !important;overflow:hidden !important;min-width:0 !important}
.ipg-app .ipg-inspection-workspace .ipg-issue-queue-header{position:relative !important;overflow:visible !important;z-index:20 !important}
.ipg-app .ipg-inspection-workspace .ipg-issue-queue-header .ipg-issues-toggle-arrow{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    flex:0 0 30px !important;
    z-index:50 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-queue-header .ipg-issues-toggle-arrow:hover{transform:scale(1.06) !important}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed{width:56px !important;min-width:56px !important}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header{
    width:56px !important;height:100% !important;min-height:100% !important;
    padding:12px 0 !important;flex-direction:column !important;
    justify-content:flex-start !important;align-items:center !important;gap:10px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header>strong{display:none !important}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header .ipg-issue-queue-count{order:1 !important;margin:0 !important}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header .ipg-issues-toggle-arrow{order:2 !important;margin:0 !important}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-results-body{display:none !important}


/* =========================================================
   PAGE INSPECTION — QUEUE RAIL + LARGER PDF WORKSPACE FIX
   ========================================================= */
/* When the Issue Queue is collapsed, reclaim its entire grid
   track so the PDF workspace actually becomes wider. */
.ipg-app .ipg-inspection-workspace.ipg-issues-collapsed{
    grid-template-columns:minmax(0,1fr) 56px !important;
}

/* Keep the queue toggle attached to the LEFT edge of the
   right-hand queue, so it never looks like it belongs to the PDF. */
.ipg-app .ipg-inspection-workspace .ipg-results .ipg-issue-queue-header{
    position:relative !important;
    overflow:visible !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results .ipg-issues-toggle-arrow{
    position:absolute !important;
    left:-15px !important;
    top:12px !important;
    inset-inline-start:-15px !important;
    inset-inline-end:auto !important;
    transform:none !important;
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
    z-index:100 !important;
    display:grid !important;
    place-items:center !important;
    box-shadow:0 3px 10px rgba(23,32,51,.10) !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results .ipg-issues-toggle-arrow:hover{
    transform:scale(1.05) !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results:not(.is-collapsed) .ipg-issue-queue-header{
    padding-left:22px !important;
}

/* Collapsed queue: keep the count and toggle together in the
   narrow right rail instead of pushing the toggle to the wrong side. */
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header{
    width:56px !important;
    height:100% !important;
    min-height:100% !important;
    padding:12px 0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    position:relative !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header .ipg-issue-queue-count{
    order:1 !important;
    margin:0 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header .ipg-issues-toggle-arrow{
    order:2 !important;
    top:48px !important;
    left:-15px !important;
    margin:0 !important;
}

/* Larger PDF preview. The JS now renders the page at 560px at 100%
   instead of the old 430px, while still allowing horizontal scrolling
   when zoomed. */
.ipg-app .ipg-inspection-workspace .ipg-stage{
    align-items:flex-start !important;
    justify-content:flex-start !important;
}
.ipg-app .ipg-inspection-workspace .ipg-stage .ipg-page-meta{
    width:560px !important;
    max-width:none !important;
}
.ipg-app .ipg-inspection-workspace .ipg-stage .ipg-page{
    margin-left:auto !important;
    margin-right:auto !important;
}

/* When the queue is collapsed, give the preview even more visual room. */
.ipg-app .ipg-inspection-workspace.ipg-issues-collapsed .ipg-stage{
    padding-left:32px !important;
    padding-right:32px !important;
}

@media (max-width:800px){
    .ipg-app .ipg-inspection-workspace.ipg-issues-collapsed{
        grid-template-columns:1fr !important;
    }
    .ipg-app .ipg-inspection-workspace .ipg-results .ipg-issues-toggle-arrow{
        left:8px !important;
        top:12px !important;
    }
    .ipg-app .ipg-inspection-workspace .ipg-stage .ipg-page-meta{
        width:min(560px,94vw) !important;
    }
}


/* =========================================================
   PAGE INSPECTION — ZOOM / ISSUE QUEUE / DECISION BAR FIX
   ========================================================= */
/* Let the queue toggle extend into the PDF side without being clipped. */
.ipg-app .ipg-inspection-workspace{
    overflow:visible !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results{
    overflow:visible !important;
    position:relative !important;
    z-index:30 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body{
    overflow:hidden !important;
    min-width:0 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-queue-header{
    overflow:visible !important;
    position:relative !important;
    z-index:60 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results .ipg-issues-toggle-arrow{
    z-index:1000 !important;
    isolation:isolate !important;
}

/* The PDF must grow with zoom. Do not allow the old 430px max-width
   rules to cap the inline zoom width. */
.ipg-app .ipg-inspection-workspace .ipg-stage .ipg-page{
    max-width:none !important;
    flex:0 0 auto !important;
}
.ipg-app .ipg-inspection-workspace .ipg-stage .ipg-page > img,
.ipg-app .ipg-inspection-workspace .ipg-stage .ipg-page > iframe{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
}

/* Clean, compact decision footer for the Issue Queue. */
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) !important;
    gap:7px !important;
    padding:10px !important;
    min-height:62px !important;
    align-items:stretch !important;
    overflow:visible !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions button{
    min-width:0 !important;
    width:100% !important;
    min-height:40px !important;
    height:auto !important;
    padding:6px 7px !important;
    border-radius:8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:normal !important;
    line-height:1.15 !important;
    font-size:9.5px !important;
    font-weight:800 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions button i{
    flex:0 0 auto !important;
    font-size:11px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions .ipg-reject{
    background:#fff1f3 !important;
    border:1px solid #efb8c0 !important;
    color:#c52f43 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions .ipg-correction{
    background:#fff4d9 !important;
    border:1px solid #efc66d !important;
    color:#8c6209 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions .ipg-approve{
    background:#e8f7ef !important;
    border:1px solid #9ed9b9 !important;
    color:#18794e !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions button:disabled{
    opacity:.55 !important;
    cursor:not-allowed !important;
}
@media (max-width:900px){
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions{
        grid-template-columns:1fr !important;
    }
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions button{
        min-height:38px !important;
    }
}

/* =========================================================
   PAGE INSPECTION — FINAL UI TUNING
   ========================================================= */
/* 1. Remove the separate INSPECTION SETUP heading strip. */
.ipg-app .ipg-context.ipg-inspection-context::before,
.ipg-app .ipg-context::before{
    content:none !important;
    display:none !important;
}
.ipg-app .ipg-context.ipg-inspection-context,
.ipg-app .ipg-context{
    padding-top:10px !important;
}

/* 2. Previous / Next page navigation uses the Done and Dusted gold palette. */
.ipg-app .ipg-inspection-workspace .ipg-page-nav{
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page-nav button{
    border:0 !important;
    background:transparent !important;
    color:#E7921D !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:700 !important;
    padding:4px 7px !important;
    border-radius:6px !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page-nav button:hover:not(:disabled),
.ipg-app .ipg-inspection-workspace .ipg-page-nav button:focus-visible:not(:disabled){
    color:#F5BB35 !important;
    background:#fff7e6 !important;
    text-decoration:none !important;
    outline:none !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page-nav button:disabled{
    color:#cbd1d9 !important;
    opacity:.55 !important;
    cursor:not-allowed !important;
}

/* 3. Compact workflow stepper. */
.ipg-app .ipg-inspection-steps{
    margin-top:8px !important;
    padding:6px 8px !important;
    gap:6px !important;
    min-height:58px !important;
}
.ipg-app .ipg-inspection-steps .ipg-step{
    grid-template-columns:27px 1fr !important;
    column-gap:8px !important;
    padding:6px 8px !important;
    min-height:44px !important;
}
.ipg-app .ipg-inspection-steps .ipg-step b{
    width:27px !important;
    height:27px !important;
    font-size:10px !important;
}
.ipg-app .ipg-inspection-steps .ipg-step:not(:last-child)::after{
    top:14px !important;
    right:-5px !important;
}
.ipg-app .ipg-inspection-steps .ipg-step span{
    font-size:11px !important;
}
.ipg-app .ipg-inspection-steps .ipg-step small{
    font-size:11px !important;
}


/* =========================================================
   UI25 — RULE LIBRARY + ISSUE QUEUE POLISH
   ========================================================= */
/* Rule Library: give Status and action controls enough room so the
   toggle and Font Awesome Edit/Delete buttons never collapse. */
.ipg-app .ipg-table-card .ipg-rule-grid{
    grid-template-columns:minmax(320px,2.35fr) .78fr 1fr .78fr 72px 152px !important;
    min-width:0 !important;
}
.ipg-app .ipg-table-card .ipg-rule-grid > button.ipg-toggle{
    width:42px !important;
    height:22px !important;
    min-width:42px !important;
    padding:3px !important;
    margin:0 auto !important;
    border:1px solid #cbd2dc !important;
    border-radius:999px !important;
    background:#d8dde5 !important;
    display:block !important;
    box-sizing:border-box !important;
}
.ipg-app .ipg-table-card .ipg-rule-grid > button.ipg-toggle i{
    width:16px !important;
    height:16px !important;
    margin:0 !important;
    border-radius:50% !important;
    background:#fff !important;
    display:block !important;
    transition:transform .2s ease !important;
    box-shadow:0 1px 3px rgba(23,32,51,.16) !important;
}
.ipg-app .ipg-table-card .ipg-rule-grid > button.ipg-toggle.on{
    background:#F5BB35 !important;
    border-color:#E7921D !important;
}
.ipg-app .ipg-table-card .ipg-rule-grid > button.ipg-toggle.on i{
    transform:translateX(18px) !important;
}
.ipg-app .ipg-table-card .ipg-rule-grid > div:last-child{
    min-width:0 !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:7px !important;
    white-space:nowrap !important;
}
.ipg-app .ipg-table-card .ipg-rule-grid > div:last-child .ipg-icon-text-btn{
    min-width:64px !important;
    width:auto !important;
    flex:0 0 auto !important;
    padding:0 10px !important;
    white-space:nowrap !important;
}
.ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(5){
    text-align:center !important;
}
@media(max-width:1100px){
    .ipg-app .ipg-table-card .ipg-rule-grid{
        min-width:1020px !important;
        grid-template-columns:320px 105px 135px 100px 72px 152px !important;
    }
}

/* Issue Queue: remove the blue active strip/gutter. Use the Done and
   Dusted yellow as the active indicator instead. */
.ipg-app .ipg-inspection-workspace .ipg-issue.active{
    box-shadow:inset 3px 0 #F5BB35 !important;
    border-left:0 !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue-group.is-open{
    border-color:#e2e6ec !important;
}
.ipg-app .ipg-inspection-workspace .ipg-issue.active:hover{
    background:#fffaf0 !important;
}

/* Branded evidence placeholder. Actual evidence crops remain visible
   whenever an inspection crop exists; this is used only as fallback. */
.ipg-app .ipg-default-evidence{
    margin:10px 0 12px !important;
    min-height:145px !important;
    border:1px solid #e2e6ec !important;
    border-radius:10px !important;
    background:linear-gradient(145deg,#f8fafc 0%,#fffaf0 100%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    overflow:hidden !important;
}
.ipg-app .ipg-default-evidence-inner{
    padding:20px !important;
}
.ipg-app .ipg-default-evidence-logo{
    width:48px !important;
    height:48px !important;
    margin:0 auto 9px !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,#E7921D 0%,#F5BB35 100%) !important;
    color:#fff !important;
    display:grid !important;
    place-items:center !important;
    font-size:13px !important;
    font-weight:800 !important;
}
.ipg-app .ipg-default-evidence-title{
    display:block !important;
    color:#17253e !important;
    font-size:11px !important;
    font-weight:700 !important;
}
.ipg-app .ipg-default-evidence-subtitle{
    display:block !important;
    margin-top:3px !important;
    color:#8a95a5 !important;
    font-size:9px !important;
}

/* =========================================================
   DONE AND DUSTED — ISSUE QUEUE BRAND ACCENTS UI26.1
   ========================================================= */
/* Selected issue: replace the old blue left rail with Done and Dusted yellow. */
.ipg-app .ipg-inspection-workspace .ipg-issue.active,
.ipg-app .ipg-inspection-workspace .ipg-issue.active:hover {
    box-shadow: inset 3px 0 #F5BB35 !important;
    border-left-color: #F5BB35 !important;
}

/* Issue-detail evidence number: replace the blue numbered circle with brand yellow. */
.ipg-app .ipg-inspection-workspace .ipg-evidence > b {
    background: #F5BB35 !important;
    color: #172033 !important;
    border-color: #fff !important;
    box-shadow: 0 2px 6px rgba(23,32,51,.22) !important;
}

/* PDF page issue pins: keep numbered markers consistent with the brand. */
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-pin,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-pin.ipg-warning,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-pin.ipg-info {
    background: #F5BB35 !important;
    color: #172033 !important;
    border-color: #fff !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-pin:hover,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-pin.selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F5BB35 !important;
}

/* Issue leaders remain tied to percentage page coordinates at every zoom level. */
.ipg-app .ipg-inspection-workspace .ipg-page{overflow:visible!important}
.ipg-app .ipg-pointer-layer{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;overflow:visible}
.ipg-app .ipg-pointer{fill:none;stroke:#d33c4c;stroke-width:.32;vector-effect:non-scaling-stroke;opacity:.8}
.ipg-app .ipg-pointer.ipg-warning{stroke:#dc8b13}.ipg-app .ipg-pointer.ipg-info{stroke:#3975df}


/* =========================================================
   DONE AND DUSTED — FINAL INSPECTION WORKSPACE CLEANUP UI26.2
   ========================================================= */
/* Remove the decorative PAGE WORKSPACE label completely. */
.ipg-app .ipg-inspection-workspace .ipg-stage::before,
.ipg-app .ipg-stage::before {
    content: none !important;
    display: none !important;
}

/* Exact workspace spacing requested: no top padding, 20px sides/bottom. */
.ipg-app .ipg-inspection-workspace .ipg-stage {
    padding: 0px 20px 20px !important;
}
/* =========================================================
   DONE AND DUSTED
   READING THEME - SAMPLE PAGE PREVIEW
   ========================================================= */

.ipg-app .ipg-reading-photo {
	position: relative;
	height: 28%;
	overflow: hidden;
	border: 1px solid #b9b4aa;

	/* Reading theme image */
	background-image: url('../images/sample-reading-theme.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Remove the old newspaper placeholder graphic */
.ipg-app .ipg-reading-photo::before {
	display: none !important;
}

/* Soft professional overlay */
.ipg-app .ipg-photo-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.03) 0%,
			rgba(0,0,0,.08) 100%
		);

	pointer-events: none;
}

/* Red + white inspection markers */
.ipg-app .ipg-photo-markers {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 17%;
	height: 18%;
	pointer-events: none;
}

.ipg-app .ipg-photo-markers span,
.ipg-app .ipg-photo-markers i {
	position: absolute;
	bottom: 0;

	width: 3%;
	height: 70%;

	display: block;

	background: #a41720;

	z-index: 3;
}

.ipg-app .ipg-photo-markers span {
	left: 42%;
}

.ipg-app .ipg-photo-markers i {
	left: 59%;
	background: #ffffff;
}

/* Caption */
.ipg-app .ipg-sample-caption {
	display: block;
	margin: 1% 0;

	font-family:
		Georgia,
		'Times New Roman',
		serif;

	font-size: 2.2%;
	font-weight: 600;
	letter-spacing: .1px;
	color: #151515;
}

/* Reading theme text visibility + layout fix */
.ipg-app .ipg-paper {font-size:12px!important;line-height:1.35;color:#151515!important;background:#fff!important;}
.ipg-app .ipg-paper .ipg-folio {font-size:11px!important;line-height:1.2!important;}
.ipg-app .ipg-paper .ipg-mast {height:8%!important;}
.ipg-app .ipg-paper .ipg-mast span {font-size:15px!important;}
.ipg-app .ipg-paper .ipg-mast b {font-size:11px!important;}
.ipg-app .ipg-paper .ipg-mast i {font-size:8px!important;font-style:normal!important;}
.ipg-app .ipg-paper h1 {display:block!important;font-size:24px!important;font-family: "Poppins", sans-serif;line-height:1.05!important;margin:15px 0 7px!important;color:#151515!important;text-align:center!important;letter-spacing:-.4px!important;}
.ipg-app .ipg-paper .ipg-dek {display:block!important;color:#555!important;margin:0 auto 13px!important;width:86%!important;text-align:center!important; font-family: "Poppins", sans-serif;}
.ipg-app .ipg-paper .ipg-reading-photo {height:28%!important;min-height:120px!important;background-position:center!important;}
.ipg-app .ipg-paper .ipg-sample-caption {display:block!important;font-weight:600;color:#151515!important;margin:7px 0 10px!important;font-family: "Poppins", sans-serif; }
.ipg-app .ipg-paper .ipg-columns {column-count:3!important;column-gap:14px!important;height:25%!important;overflow:hidden!important;color:#222!important;text-align:justify!important;}
.ipg-app .ipg-paper .ipg-columns p {font-size:8px!important;margin:0 0 10px!important;}
.ipg-app .ipg-paper .ipg-columns b {font-size:9px!important;}
.ipg-app .ipg-paper .ipg-briefs {font-size:8px!important;line-height:1.35!important;}
.ipg-app .ipg-paper .ipg-briefs b,.ipg-app .ipg-paper .ipg-briefs span {font-size:8px!important;}
/* Preview photo already includes inspection markers in the bundled screenshot crop. */
.ipg-app .ipg-reading-photo .ipg-photo-markers {display:none!important;}


/* =========================================================
   READING THEME — POLISHED SAMPLE PAGE UI
   UI26.2 visual refinement
   ========================================================= */
.ipg-app .ipg-paper{
    color:#20252d !important;
    background:#fffdf9 !important;
    font-size:12px !important;
    line-height:1.4 !important;
    padding:3.8% 4.8% !important;
}

.ipg-app .ipg-paper .ipg-folio{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    border-bottom:1px solid #30343a !important;
    padding:0 0 7px !important;
    margin:0 !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.8px !important;
    color:#31363d !important;
    font-family: "Poppins", sans-serif;
}
.ipg-app .ipg-paper .ipg-folio b{font-size:10px !important;color:#171b21 !important;font-family: "Poppins", sans-serif;}

.ipg-app .ipg-paper .ipg-mast{
    height:auto !important;
    min-height:42px !important;
    display:grid !important;
    grid-template-columns:1.5fr .5fr 1.5fr !important;
    align-items:center !important;
    border-bottom:3px solid #a51419 !important;
    margin:0 !important;
    padding:3px 0 5px !important;
}
.ipg-app .ipg-paper .ipg-mast span{
    font-size:15px !important;
    font-weight:700 !important;
    color:#17191d !important;
    font-family: "Poppins", sans-serif;
}
.ipg-app .ipg-paper .ipg-mast b{
    text-align:center !important;
    font-size:8px !important;
    letter-spacing:1.5px !important;
    color:#9b1a20 !important;
    font-family: "Poppins", sans-serif;
}
.ipg-app .ipg-paper .ipg-mast i{
    text-align:right !important;
    font-size:9px !important;
    font-style:normal !important;
    letter-spacing:.7px !important;
    color:#777d85 !important;
    font-family: "Poppins", sans-serif;
}

.ipg-app .ipg-paper h1{
    display:block !important;
    margin:18px 0 6px !important;
    font-size:24px !important;
    line-height:1.02 !important;
    font-weight:700 !important;
    letter-spacing:-.45px !important;
    color:#16181c !important;
    text-align:center !important;
}
.ipg-app .ipg-paper .ipg-dek{
    display:block !important;
    width:90% !important;
    margin:0 auto 13px !important;
    font-size:12px !important;
    line-height:16px !important;
    font-style:normal !important;
    color:#70757d !important;
    text-align:center !important;
    font-family: "Poppins", sans-serif;
}

.ipg-app .ipg-paper .ipg-reading-photo{
    height:27% !important;
    min-height:126px !important;
    border:1px solid #b8b4ac !important;
    border-radius:0 !important;
    background-size:cover !important;
    background-position:center !important;
    box-shadow:0 3px 10px rgba(25,29,35,.10) !important;
}
.ipg-app .ipg-paper .ipg-photo-overlay{
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.10)) !important;
}
.ipg-app .ipg-paper .ipg-photo-markers{display:none !important;}

.ipg-app .ipg-paper .ipg-sample-caption{
    display:block !important;
    margin:7px 0 11px !important;
    padding-bottom:7px !important;
    border-bottom:1px solid #d7d9dc !important;
    font-size:12px !important;
    line-height:16px !important;
    font-weight:600 !important;
    letter-spacing:.7px !important;
    color:#34383e !important;
    font-family: "Poppins", sans-serif;
}

.ipg-app .ipg-paper .ipg-columns{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    column-count:initial !important;
    column-gap:0 !important;
    height:auto !important;
    overflow:visible !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:16px !important;
    color:#4f555d !important;
    text-align:left !important;
}
.ipg-app .ipg-paper .ipg-columns p{
    margin:0 !important;
    padding:0 10px !important;
    border-right:1px solid #e1e2e4 !important;
    font-size:11px !important;
    font-family: "Poppins", sans-serif;
}
.ipg-app .ipg-paper .ipg-columns p:first-child{padding-left:0 !important;font-family: "Poppins", sans-serif;}
.ipg-app .ipg-paper .ipg-columns p:last-child{
    padding-right:0 !important;
    border-right:0 !important;
    font-family: "Poppins", sans-serif;
}
.ipg-app .ipg-paper .ipg-columns b{
    display:inline-block !important;
    margin-bottom:3px !important;
    font-size:12px !important;
    line-height:18px !important;
    color:#22262c !important;
    font-family: "Poppins", sans-serif;
}

.ipg-app .ipg-paper .ipg-briefs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-top:22px !important;
    padding-top:12px !important;
    border-top:2px solid #a51419 !important;
    font-family: "Poppins", sans-serif
}
.ipg-app .ipg-paper .ipg-briefs>b{
    display:block !important;
    padding:0 !important;
    font-size:12px !important;
    line-height:1.25 !important;
    letter-spacing:.7px !important;
    color:#a51419 !important;
    font-family: "Poppins", sans-serif
}
.ipg-app .ipg-paper .ipg-briefs span{
    display:block !important;
    margin-top:3px !important;
    font-size:10px !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    font-weight:400 !important;
    color:#656b73 !important;
    font-family: "Poppins", sans-serif
}


/* =========================================================
   UI26.3 — STEPPER ARROW RELIABILITY FIX
   Replace font-glyph arrows with a CSS-drawn chevron.
   This avoids missing/incorrect glyphs caused by font loading,
   inherited fonts, or browser rendering.
   ========================================================= */

.ipg-app .ipg-inspection-steps {
    overflow: visible !important;
}

.ipg-app .ipg-inspection-steps .ipg-step {
    position: relative !important;
    overflow: visible !important;
}

/* Never depend on the "→" character/font for the connector. */
.ipg-app .ipg-inspection-steps .ipg-step:not(:last-child)::after {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    right: -8px !important;

    width: 7px !important;
    height: 7px !important;

    margin-top: -4px !important;

    border-top: 2px solid #aeb8c6 !important;
    border-right: 2px solid #aeb8c6 !important;

    background: transparent !important;

    transform: rotate(45deg) !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: none !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
}

/* Keep each connector above the neighbouring step. */
.ipg-app .ipg-inspection-steps .ipg-step:nth-child(1) {
    z-index: 4 !important;
}

.ipg-app .ipg-inspection-steps .ipg-step:nth-child(2) {
    z-index: 3 !important;
}

.ipg-app .ipg-inspection-steps .ipg-step:nth-child(3) {
    z-index: 2 !important;
}

.ipg-app .ipg-inspection-steps .ipg-step:nth-child(4) {
    z-index: 1 !important;
}

/* Slightly stronger connector for the active workflow. */
.ipg-app .ipg-inspection-steps .ipg-step.active:not(:last-child)::after,
.ipg-app .ipg-inspection-steps .ipg-step.done:not(:last-child)::after {
    border-color: #a5afbd !important;
}

/* Responsive layouts: hide connectors when the steps wrap. */
@media (max-width: 900px) {
    .ipg-app .ipg-inspection-steps .ipg-step:nth-child(2)::after,
    .ipg-app .ipg-inspection-steps .ipg-step:nth-child(4)::after {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .ipg-app .ipg-inspection-steps .ipg-step:not(:last-child)::after {
        display: none !important;
    }
}
/* =========================================================
   FIX — PAGE PREVIEW TOOLBAR STAYS FIXED DURING ZOOM/PAN
   ========================================================= */

.ipg-app .ipg-inspection-workspace .ipg-stage {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/*
 * Keep PAGE PREVIEW toolbar fixed inside the visible stage.
 * The PDF/page below it is still allowed to scroll horizontally.
 */
.ipg-app .ipg-inspection-workspace .ipg-stage-tools {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    min-width: 100% !important;

    margin: 0 0 10px 0 !important;

    z-index: 100 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    flex: 0 0 auto !important;

    background: rgba(255,255,255,.97) !important;
    border: 1px solid #dce2ea !important;
    border-radius: 9px !important;

    box-shadow: 0 4px 12px rgba(23,32,51,.07) !important;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/*
 * Prevent the toolbar contents themselves from being affected
 * by the zoomed page width.
 */
.ipg-app .ipg-inspection-workspace .ipg-stage-tools .ipg-preview-title {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.ipg-app .ipg-inspection-workspace .ipg-stage-tools .ipg-zoom-tools {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/*
 * Keep the toolbar visible while the PDF is panned.
 */
.ipg-app .ipg-inspection-workspace .ipg-stage.is-zoomed .ipg-stage-tools {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
}

/* =========================================================
   UI26.4 — FINAL RESPONSIVE LAYOUT LAYER
   =========================================================
   This layer is intentionally last so it wins over the older UI
   tuning rules above. It keeps the existing desktop design while
   preventing viewport overflow on tablets and phones.
*/

.ipg-app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
}

.ipg-app .ipg-shell,
.ipg-app .ipg-workspace,
.ipg-app .ipg-desk,
.ipg-app .ipg-context,
.ipg-app .ipg-header-inspection,
.ipg-app .ipg-table-card,
.ipg-app .ipg-modal-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
}

.ipg-app img,
.ipg-app iframe,
.ipg-app video,
.ipg-app canvas,
.ipg-app svg {
    max-width: 100%;
}

.ipg-app button,
.ipg-app input,
.ipg-app select,
.ipg-app textarea {
    max-width: 100%;
}

/* ---------- Desktop / large tablet ---------- */
@media (max-width: 1200px) {
    .ipg-app .ipg-side {
        width: 184px !important;
        flex-basis: 184px !important;
    }

    .ipg-app .ipg-desk:not(.ipg-inspection-workspace) {
        grid-template-columns: minmax(0, 1fr) 340px !important;
    }

    .ipg-app .ipg-inspection-workspace {
        grid-template-columns: minmax(0, 1fr) 340px !important;
    }

    .ipg-app .ipg-top {
        min-height: 76px !important;
        height: auto !important;
    }

    .ipg-app .ipg-top-title,
    .ipg-app .ipg-top-actions,
    .ipg-app .ipg-header-inspection {
        min-width: 0 !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head {
        min-width: 0 !important;
    }

    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .ipg-app .ipg-file {
        min-width: 0 !important;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .ipg-app .ipg-top {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }

    .ipg-app .ipg-top-title {
        flex: 1 1 220px !important;
    }

    .ipg-app .ipg-top-actions {
        flex: 0 1 auto !important;
        margin-left: auto !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .ipg-app .ipg-header-inspection {
        flex: 1 1 100% !important;
        order: 3 !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        flex: 0 1 50% !important;
        width: 50% !important;
    }

    .ipg-app .ipg-inspection-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ipg-app .ipg-step:nth-child(2)::after,
    .ipg-app .ipg-step:nth-child(4)::after {
        display: none !important;
    }

    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ipg-app .ipg-file {
        grid-column: span 1 !important;
    }
}

/* ---------- Narrow tablet / large phone ---------- */
@media (max-width: 900px) {
    .ipg-app .ipg-shell {
        display: block !important;
        min-height: 0 !important;
    }

    .ipg-app .ipg-side {
        width: 100% !important;
        flex-basis: auto !important;
        min-height: 60px !important;
        height: auto !important;
        padding: 8px 12px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .ipg-app .ipg-brand {
        padding: 0 !important;
        margin: 0 auto 0 0 !important;
        min-width: 0 !important;
    }

    .ipg-app .ipg-brand > div {
        min-width: 0 !important;
    }

    .ipg-app .ipg-brand strong {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ipg-app .ipg-brand small,
    .ipg-app .ipg-publication,
    .ipg-app .ipg-side-spacer,
    .ipg-app .ipg-engine,
    .ipg-app .ipg-profile-wrap {
        display: none !important;
    }

    .ipg-app .ipg-side nav {
        display: flex !important;
        flex: 0 0 auto !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .ipg-app .ipg-side nav button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .ipg-app .ipg-side nav button .ipg-nav-label {
        display: none !important;
    }

    .ipg-app .ipg-sidebar-toggle {
        display: none !important;
    }

    .ipg-app .ipg-workspace {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ipg-app .ipg-top {
        width: 100% !important;
    }

    .ipg-app .ipg-header-inspection {
        width: 100% !important;
        display: block !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head,
    .ipg-app .ipg-header-inspection .ipg-summary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        border-left: 0 !important;
        border-top: 1px solid #e5e9ef !important;
    }

    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ipg-app .ipg-desk,
    .ipg-app .ipg-inspection-workspace,
    .ipg-app .ipg-desk.ipg-issues-collapsed,
    .ipg-app .ipg-inspection-workspace.ipg-issues-collapsed {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage {
        width: 100% !important;
        min-height: 540px !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results,
    .ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed {
        display: block !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 10px 13px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header > strong {
        display: block !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header .ipg-issue-queue-count {
        order: 0 !important;
        margin-left: auto !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-issue-queue-header .ipg-issues-toggle-arrow {
        position: static !important;
        order: 0 !important;
        margin-left: 0 !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results.is-collapsed .ipg-results-body {
        display: none !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results:not(.is-collapsed) .ipg-issues-toggle-arrow {
        left: auto !important;
        right: 8px !important;
        top: 12px !important;
        inset-inline-start: auto !important;
        inset-inline-end: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results:not(.is-collapsed) .ipg-issue-queue-header {
        padding-right: 50px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results-body {
        max-height: none !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-issues {
        max-height: 520px !important;
    }

    .ipg-app .ipg-table-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ipg-app .ipg-table-head,
    .ipg-app .ipg-table-row {
        min-width: 760px !important;
    }
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
    .ipg-app .ipg-side {
        padding: 7px 9px !important;
    }

    .ipg-app .ipg-brand > b {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    .ipg-app .ipg-brand strong {
        font-size: 14px !important;
    }

    .ipg-app .ipg-side nav button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .ipg-app .ipg-top {
        padding: 11px 12px !important;
    }

    .ipg-app .ipg-top-title {
        flex: 1 1 100% !important;
    }

    .ipg-app .ipg-top-title h2 {
        font-size: 20px !important;
    }

    .ipg-app .ipg-top-actions {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: stretch !important;
    }

    .ipg-app .ipg-top-actions > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .ipg-app .ipg-top-actions .ipg-secondary,
    .ipg-app .ipg-top-actions .ipg-primary {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context {
        grid-template-columns: 1fr !important;
        padding: 10px 12px !important;
        gap: 9px !important;
    }

    .ipg-app .ipg-file {
        grid-column: auto !important;
    }

    .ipg-app .ipg-inspection-steps {
        grid-template-columns: 1fr !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding: 6px !important;
    }

    .ipg-app .ipg-inspection-steps .ipg-step {
        min-height: 42px !important;
    }

    .ipg-app .ipg-inspection-steps .ipg-step:not(:last-child)::after {
        display: none !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage {
        min-height: 470px !important;
        padding: 10px !important;
        align-items: center !important;
    }

    /* The toolbar wraps instead of squeezing the title and zoom controls. */
    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        padding: 7px 8px !important;
        flex-wrap: wrap !important;
        row-gap: 6px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: space-between !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        font-size: 9px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        max-width: 58% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools {
        width: 100% !important;
        justify-content: flex-end !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools button {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools small {
        display: none !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta {
        width: 100% !important;
        max-width: 560px !important;
        min-width: 0 !important;
        font-size: 10px !important;
        flex: 0 0 auto !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results .ipg-issue-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results .ipg-issue-tabs button {
        flex: 0 0 auto !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-decisions button {
        min-height: 40px !important;
        font-size: 10px !important;
    }

    .ipg-app .ipg-preflight-head {
        display: block !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding: 16px !important;
    }

    .ipg-app .ipg-preflight-score {
        margin-top: 12px !important;
        justify-content: start !important;
    }

    .ipg-app .ipg-preflight-grid {
        margin-left: 10px !important;
        margin-right: 10px !important;
        grid-template-columns: 1fr !important;
    }

    .ipg-app .ipg-rule-grid,
    .ipg-app .ipg-section-grid,
    .ipg-app .ipg-history-grid,
    .ipg-app .ipg-summary-grid {
        min-width: 700px !important;
    }

    .ipg-app .ipg-modal-wrap {
        padding: 10px !important;
    }

    .ipg-app .ipg-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }

    .ipg-app .ipg-profile-modal {
        width: 100% !important;
    }

    .ipg-app .ipg-profile-details {
        grid-template-columns: 1fr !important;
    }

    .ipg-app .ipg-profile-details > div:nth-child(odd) {
        border-right: 0 !important;
    }

    .ipg-app .ipg-profile-details > div {
        border-bottom: 1px solid #edf0f4 !important;
    }

    .ipg-app .ipg-profile-details > div:last-child {
        border-bottom: 0 !important;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 420px) {
    .ipg-app .ipg-brand strong {
        font-size: 13px !important;
    }

    .ipg-app .ipg-side nav {
        gap: 2px !important;
    }

    .ipg-app .ipg-side nav button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head {
        padding: 11px 12px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        min-width: 0 !important;
        width: 25% !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary b {
        font-size: 13px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary span {
        font-size: 9px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage {
        min-height: 420px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title {
        gap: 5px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        font-size: 8px !important;
    }

    .ipg-app .ipg-file {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .ipg-app .ipg-file > div {
        min-width: 0 !important;
    }

    .ipg-app .ipg-file strong,
    .ipg-app .ipg-file small {
        max-width: 190px !important;
    }
}

/* =========================================================
   UI26.5 — RESPONSIVE FINAL POLISH
   Fixes:
   1) mobile/tablet account + Logout access
   2) inspection quality score circle sizing/alignment
   3) PAGE PREVIEW toolbar/header wrapping
   4) preview metadata and zoom controls on narrow screens
   5) prevent horizontal clipping while keeping zoom/pan usable
   ========================================================= */

/* ---------- Account / Logout on tablet + phone ---------- */
@media (max-width: 900px) {
    .ipg-app .ipg-side {
        position: relative !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }

    /* Keep the account control available on small screens. */
    .ipg-app .ipg-profile-wrap {
        display: block !important;
        position: relative !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }

    .ipg-app .ipg-profile {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 9px !important;
    }

    .ipg-app .ipg-profile > b {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        font-size: 10px !important;
    }

    .ipg-app .ipg-profile > span,
    .ipg-app .ipg-profile > i {
        display: none !important;
    }

    .ipg-app .ipg-profile-menu {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: min(270px, calc(100vw - 20px)) !important;
    }

    /* Let the navigation scroll instead of pushing the account button out. */
    .ipg-app .ipg-side nav {
        min-width: 0 !important;
        max-width: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .ipg-app .ipg-side nav::-webkit-scrollbar {
        display: none !important;
    }

    .ipg-app .ipg-side nav button {
        flex: 0 0 40px !important;
    }
}

/* ---------- Inspection result / quality score ---------- */
.ipg-app .ipg-header-inspection .ipg-result-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.ipg-app .ipg-header-inspection .ipg-result-head > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.ipg-app .ipg-header-inspection .ipg-result-head h3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ipg-app .ipg-header-inspection .ipg-score {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    flex: 0 0 60px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    border: 4px solid #efb8c0 !important;
    border-top-color: #d43d4c !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    overflow: visible !important;
    margin-left: auto !important;
    background: #fff !important;
}

.ipg-app .ipg-header-inspection .ipg-score b {
    font-size: 17px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.ipg-app .ipg-header-inspection .ipg-score small {
    margin-top: 4px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    letter-spacing: .8px !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .ipg-app .ipg-header-inspection {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 14px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid #e5e9ef !important;
        display: flex !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ---------- PAGE PREVIEW toolbar ---------- */
.ipg-app .ipg-inspection-workspace .ipg-stage-tools {
    box-sizing: border-box !important;
    overflow: visible !important;
}

.ipg-app .ipg-inspection-workspace .ipg-preview-title {
    min-width: 0 !important;
}

.ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
    white-space: nowrap !important;
}

.ipg-app .ipg-inspection-workspace .ipg-preview-status {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 6px 8px !important;
        padding: 7px 9px !important;
        margin: 0 0 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        font-size: 10px !important;
        flex: 0 0 auto !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        flex: 1 1 auto !important;
        max-width: none !important;
        text-align: right !important;
        font-size: 9px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        gap: 5px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools b {
        min-width: 42px !important;
        font-size: 10px !important;
        text-align: center !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        flex: 0 0 30px !important;
    }
}

/* ---------- Preview metadata ---------- */
@media (max-width: 900px) {
    .ipg-app .ipg-inspection-workspace .ipg-page-meta {
        width: 100% !important;
        max-width: 560px !important;
        min-width: 0 !important;
        padding: 0 2px !important;
        margin: 0 auto 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        line-height: 1.25 !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-nav {
        display: flex !important;
        gap: 5px !important;
        flex: 0 0 auto !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-nav button {
        min-height: 24px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 600px) {
    .ipg-app .ipg-header-inspection .ipg-result-head {
        padding: 11px 12px !important;
        gap: 9px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head small {
        font-size: 9px !important;
        letter-spacing: 1px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head h3 {
        font-size: 12px !important;
        margin-top: 4px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-score {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        flex-basis: 58px !important;
        border-width: 4px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-score b {
        font-size: 16px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        min-height: 58px !important;
        height: auto !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        padding: 8px 3px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary b {
        font-size: 13px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary span {
        font-size: 8px !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage {
        padding: 8px !important;
        min-height: 440px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        padding: 7px 8px !important;
        border-radius: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        font-size: 9px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        font-size: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page {
        width: min(560px, 100%) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 420px) {
    .ipg-app .ipg-side {
        gap: 6px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .ipg-app .ipg-brand > b {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    .ipg-app .ipg-side nav button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .ipg-app .ipg-profile-wrap,
    .ipg-app .ipg-profile {
        width: 36px !important;
        min-width: 36px !important;
        flex-basis: 36px !important;
    }

    .ipg-app .ipg-profile {
        height: 36px !important;
    }

    .ipg-app .ipg-profile > b {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-score {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        flex-basis: 56px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools {
        justify-content: space-between !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools button {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px !important;
        flex-basis: 29px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools b {
        min-width: 38px !important;
    }
}

/* =========================================================
   UI26.6 — RESPONSIVE CORRECTION PASS
   Based on tablet/phone screenshots:
   - collapse the desktop 3-column inspection layout earlier
   - keep account/profile + Logout reachable on tablets
   - reserve real vertical space for inspection summary/quality score
   - give PAGE PREVIEW / Annotated PDF / zoom controls separate rows
   ========================================================= */

/* ---------- Tablet landscape: 1024px and below ---------- */
@media (max-width: 1024px) {
    .ipg-app .ipg-shell {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .ipg-app .ipg-side {
        width: 100% !important;
        flex: none !important;
        min-height: 58px !important;
        height: auto !important;
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-brand {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        margin: 0 auto 0 0 !important;
        padding: 0 !important;
    }

    .ipg-app .ipg-brand > div {
        min-width: 0 !important;
    }

    .ipg-app .ipg-brand strong {
        white-space: nowrap !important;
    }

    .ipg-app .ipg-brand small,
    .ipg-app .ipg-publication,
    .ipg-app .ipg-side-spacer,
    .ipg-app .ipg-engine {
        display: none !important;
    }

    .ipg-app .ipg-side nav {
        display: flex !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ipg-app .ipg-side nav::-webkit-scrollbar {
        display: none !important;
    }

    .ipg-app .ipg-side nav button {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .ipg-app .ipg-side nav button .ipg-nav-label {
        display: none !important;
    }

    /* Keep the user button in the header row. */
    .ipg-app .ipg-profile-wrap {
        display: block !important;
        position: relative !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        margin: 0 !important;
        z-index: 10000 !important;
    }

    .ipg-app .ipg-profile {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .ipg-app .ipg-profile > b {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
    }

    .ipg-app .ipg-profile > span,
    .ipg-app .ipg-profile > i {
        display: none !important;
    }

    .ipg-app .ipg-profile-menu {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: min(270px, calc(100vw - 18px)) !important;
        z-index: 100000 !important;
    }

    .ipg-app .ipg-workspace {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Do not keep the desktop preview + issue queue side-by-side at 968px. */
    .ipg-app .ipg-inspection-workspace,
    .ipg-app .ipg-desk.ipg-inspection-workspace,
    .ipg-app .ipg-inspection-workspace.ipg-issues-collapsed {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 470px !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-results {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Two-column context and workflow at tablet widths. */
    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ipg-app .ipg-file {
        grid-column: 1 / -1 !important;
    }

    .ipg-app .ipg-inspection-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ipg-app .ipg-header-inspection {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 76px !important;
        box-sizing: border-box !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 58px !important;
        border-left: 0 !important;
        border-top: 1px solid #e5e9ef !important;
    }
}

/* ---------- Preview toolbar: never squeeze title + annotated button + zoom ---------- */
@media (max-width: 1024px) {
    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        gap: 6px 8px !important;
        padding: 7px 9px !important;
        margin: 0 0 8px !important;
        z-index: 100 !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools button {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools b {
        flex: 0 0 42px !important;
        min-width: 42px !important;
        text-align: center !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-top-annotated {
        max-width: 100% !important;
        white-space: nowrap !important;
    }
}

/* ---------- Phones: Annotated PDF gets its own row ---------- */
@media (max-width: 600px) {
    .ipg-app .ipg-inspection-workspace .ipg-stage {
        min-height: 440px !important;
        padding: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 5px !important;
        padding: 7px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        font-size: 9px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        max-width: none !important;
        font-size: 8px !important;
    }

    /* When an Annotated PDF button exists, do not force it beside the title. */
    .ipg-app .ipg-inspection-workspace .ipg-preview-title:has(.ipg-top-annotated) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title:has(.ipg-top-annotated) .ipg-preview-status {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-top-annotated {
        width: auto !important;
        max-width: 100% !important;
        min-height: 26px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools small {
        display: none !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta {
        width: 100% !important;
        max-width: 560px !important;
        min-width: 0 !important;
        margin-top: 3px !important;
        margin-bottom: 7px !important;
        font-size: 9px !important;
    }

    /* Keep the score completely inside the result header. */
    .ipg-app .ipg-header-inspection .ipg-result-head {
        min-height: 76px !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head > div:first-child {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .ipg-app .ipg-header-inspection .ipg-score {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        flex: 0 0 54px !important;
        border-width: 4px !important;
        margin: 0 0 0 auto !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        min-height: 56px !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        width: auto !important;
        min-width: 0 !important;
        padding: 8px 2px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary b {
        line-height: 1.1 !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 420px) {
    .ipg-app .ipg-side {
        padding: 6px 7px !important;
        gap: 5px !important;
    }

    .ipg-app .ipg-brand > b {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    .ipg-app .ipg-brand strong {
        font-size: 12px !important;
    }

    .ipg-app .ipg-side nav {
        gap: 2px !important;
    }

    .ipg-app .ipg-side nav button {
        flex-basis: 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .ipg-app .ipg-profile-wrap,
    .ipg-app .ipg-profile {
        width: 34px !important;
        min-width: 34px !important;
        flex-basis: 34px !important;
    }

    .ipg-app .ipg-profile {
        height: 34px !important;
    }

    .ipg-app .ipg-profile > b {
        width: 26px !important;
        height: 26px !important;
        flex-basis: 26px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        padding: 6px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        font-size: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        font-size: 7px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-top-annotated {
        min-height: 24px !important;
        font-size: 7px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools button {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools b {
        min-width: 36px !important;
        flex-basis: 36px !important;
        font-size: 9px !important;
    }
}

/* =========================================================
   UI26.7 — FINAL MOBILE NAV + INSPECTION POLISH
   Based on 412px / 360px / tablet screenshots.
   - Put the complete icon navigation on its own mobile row.
   - Keep the account/profile control on the top row.
   - Prevent inspection metrics from becoming a cramped 4-column strip.
   - Keep context fields visually separated from the inspection summary.
   ========================================================= */

/* Phones: header becomes two clean rows so every navigation item is reachable. */
@media (max-width: 600px) {
    .ipg-app .ipg-side {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: 36px auto !important;
        align-items: center !important;
        column-gap: 6px !important;
        row-gap: 7px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 7px 8px 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-sidebar-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }

    .ipg-app .ipg-brand {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .ipg-app .ipg-brand > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .ipg-app .ipg-brand strong {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-profile-wrap {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        flex: none !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .ipg-app .ipg-profile {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    /* The complete navigation gets a dedicated second row. Nothing is hidden
       and nothing depends on horizontal scrolling at phone widths. */
    .ipg-app .ipg-side nav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 3px !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ipg-app .ipg-side nav button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    .ipg-app .ipg-side nav button .ipg-nav-label {
        display: none !important;
    }

    .ipg-app .ipg-side nav button .ipg-nav-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* Never allow hidden desktop sidebar content to reserve mobile width. */
    .ipg-app .ipg-side .ipg-publication,
    .ipg-app .ipg-side .ipg-side-spacer,
    .ipg-app .ipg-side .ipg-engine {
        display: none !important;
    }

    /* Give the four inspection counters readable 2 x 2 cells on phones. */
    .ipg-app .ipg-header-inspection .ipg-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        min-height: 86px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        min-height: 43px !important;
        padding: 7px 5px !important;
        box-sizing: border-box !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary span {
        display: block !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head {
        margin-bottom: 0 !important;
    }

    /* Keep the first context row visually separate from the result counters. */
    .ipg-app .ipg-context {
        margin-top: 8px !important;
        row-gap: 8px !important;
    }
}

/* Very small phones: nine navigation items still fit in one row. */
@media (max-width: 420px) {
    .ipg-app .ipg-side {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        column-gap: 5px !important;
        row-gap: 6px !important;
        padding: 6px 7px 7px !important;
    }

    .ipg-app .ipg-sidebar-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
    }

    .ipg-app .ipg-profile-wrap,
    .ipg-app .ipg-profile {
        width: 32px !important;
        min-width: 32px !important;
    }

    .ipg-app .ipg-profile {
        height: 32px !important;
    }

    .ipg-app .ipg-side nav {
        gap: 2px !important;
    }

    .ipg-app .ipg-side nav button {
        height: 31px !important;
        border-radius: 7px !important;
    }

    .ipg-app .ipg-side nav button .ipg-nav-icon {
        font-size: 12px !important;
    }

    .ipg-app .ipg-brand strong {
        font-size: 11px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        min-height: 82px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        min-height: 41px !important;
        padding: 6px 4px !important;
    }
}

/* =========================================================
   UI26.8 — MOBILE PREVIEW CONTENT + TOOLBAR FINAL FIX
   - Prevent the sample newspaper columns from colliding on phones.
   - Give PAGE PREVIEW toolbar a predictable mobile height/layout.
   - Keep the real preview page at 100% width without internal overflow.
   ========================================================= */

/* The sample page is HTML, not an image, so its internal newspaper layout
 * also needs its own responsive rules.  Three narrow columns become unreadable
 * on a phone and were causing the text overlap visible in mobile screenshots.
 */
@media (max-width: 600px) {
    .ipg-app .ipg-paper {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 4% 5% !important;
    }

    .ipg-app .ipg-paper .ipg-folio {
        min-width: 0 !important;
        padding-bottom: 5px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .ipg-app .ipg-paper .ipg-folio span,
    .ipg-app .ipg-paper .ipg-folio b {
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-paper .ipg-mast {
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(26px, .55fr) minmax(0, 1.45fr) !important;
        min-height: 30px !important;
        padding: 3px 0 4px !important;
        border-bottom-width: 2px !important;
        overflow: hidden !important;
    }

    .ipg-app .ipg-paper .ipg-mast span,
    .ipg-app .ipg-paper .ipg-mast b,
    .ipg-app .ipg-paper .ipg-mast i {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-paper .ipg-mast span {
        font-size: 10px !important;
    }

    .ipg-app .ipg-paper .ipg-mast b {
        font-size: 6px !important;
        letter-spacing: .8px !important;
    }

    .ipg-app .ipg-paper .ipg-mast i {
        font-size: 6px !important;
        letter-spacing: .3px !important;
    }

    .ipg-app .ipg-paper h1 {
        font-size: 18px !important;
        line-height: 1.02 !important;
        margin: 11px 0 5px !important;
        letter-spacing: -.25px !important;
    }

    .ipg-app .ipg-paper .ipg-dek {
        width: 92% !important;
        font-size: 8px !important;
        line-height: 11px !important;
        margin-bottom: 9px !important;
    }

    .ipg-app .ipg-paper .ipg-reading-photo {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 8 !important;
        background-size: cover !important;
    }

    .ipg-app .ipg-paper .ipg-sample-caption {
        margin: 5px 0 7px !important;
        padding-bottom: 5px !important;
        font-size: 8px !important;
        line-height: 11px !important;
        letter-spacing: .3px !important;
    }

    /* One readable column on phones.  min-width:0 is important because grid
     * children otherwise preserve their intrinsic text width and overlap.
     */
    .ipg-app .ipg-paper .ipg-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 7px !important;
        margin: 0 !important;
        overflow: visible !important;
        font-size: 8px !important;
        line-height: 11px !important;
    }

    .ipg-app .ipg-paper .ipg-columns p,
    .ipg-app .ipg-paper .ipg-columns p:first-child,
    .ipg-app .ipg-paper .ipg-columns p:last-child {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 0 7px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e1e2e4 !important;
        font-size: 8px !important;
        line-height: 11px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .ipg-app .ipg-paper .ipg-columns p:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .ipg-app .ipg-paper .ipg-columns b {
        display: inline !important;
        font-size: 9px !important;
        line-height: 12px !important;
    }

    .ipg-app .ipg-paper .ipg-briefs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 6px !important;
        margin-top: 9px !important;
        padding-top: 7px !important;
    }

    .ipg-app .ipg-paper .ipg-briefs > b {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        font-size: 8px !important;
        line-height: 11px !important;
    }

    .ipg-app .ipg-paper .ipg-briefs span {
        font-size: 7px !important;
        line-height: 10px !important;
    }

    /* Mobile PAGE PREVIEW toolbar: title/status and controls get deliberate
     * vertical space instead of being compressed into a thin strip.
     */
    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 66px !important;
        box-sizing: border-box !important;
        padding: 7px 8px !important;
        margin: 0 0 6px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 22px !important;
        gap: 6px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        flex: 0 0 auto !important;
        font-size: 9px !important;
        line-height: 12px !important;
        letter-spacing: .6px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 8px !important;
        line-height: 11px !important;
        text-align: right !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title:has(.ipg-top-annotated) {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 0 !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title:has(.ipg-top-annotated) .ipg-preview-status {
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-top-annotated {
        max-width: 100% !important;
        min-height: 25px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
        line-height: 11px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 31px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools button {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools b {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        font-size: 10px !important;
        line-height: 30px !important;
        text-align: center !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools small {
        display: none !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta {
        width: 100% !important;
        max-width: 560px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 2px auto 7px !important;
        padding: 0 2px !important;
        font-size: 8px !important;
        line-height: 12px !important;
        gap: 5px !important;
    }
}

/* 393/360px phones: make the toolbar and sample page even more robust. */
@media (max-width: 420px) {
    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        min-height: 64px !important;
        padding: 6px 7px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-title strong {
        font-size: 8px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-preview-status {
        font-size: 7px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools {
        gap: 5px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools button {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-zoom-tools b {
        width: 38px !important;
        min-width: 38px !important;
        flex-basis: 38px !important;
        line-height: 28px !important;
        font-size: 9px !important;
    }
}

/*
 * UI26.9 — MOBILE PREVIEW ALIGNMENT FINAL
 *
 * The preview page may zoom beyond the phone width, but its toolbar and
 * metadata/navigation must remain viewport-sized.  Keep these controls as
 * one aligned block directly above the preview page.
 */
@media (max-width: 600px) {
    .ipg-app .ipg-inspection-workspace .ipg-stage-tools {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 8px 8px 4px 4px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta,
    .ipg-app .ipg-inspection-workspace .ipg-page-meta.ipg-page-meta-top {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        min-height: 24px !important;
        margin: 0 0 7px !important;
        padding: 3px 8px 4px !important;
        background: #fff !important;
        border-top: 1px solid #edf0f4 !important;
        border-radius: 0 0 7px 7px !important;
        color: #7b8593 !important;
        font-size: 8px !important;
        line-height: 12px !important;
        overflow: hidden !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta > span {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta > span:last-child,
    .ipg-app .ipg-inspection-workspace .ipg-page-meta .ipg-page-nav {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta .ipg-page-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta .ipg-page-nav button {
        min-width: 42px !important;
        min-height: 20px !important;
        padding: 2px 4px !important;
        font-size: 8px !important;
        line-height: 12px !important;
    }

    /* Never let a zoomed page change the width of the controls above it. */
    .ipg-app .ipg-inspection-workspace .ipg-stage.is-zoomed .ipg-page-meta {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 420px) {
    .ipg-app .ipg-inspection-workspace .ipg-page-meta,
    .ipg-app .ipg-inspection-workspace .ipg-page-meta.ipg-page-meta-top {
        min-height: 22px !important;
        padding: 2px 7px 3px !important;
        margin-bottom: 6px !important;
        font-size: 7px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-meta .ipg-page-nav button {
        min-width: 38px !important;
        min-height: 19px !important;
        font-size: 7px !important;
        padding: 2px 3px !important;
    }
}

/* =========================================================
   UI27.0 — MOBILE RULE LIBRARY COMPACT ROWS
   Keep Rule Library usable on phones. The previous 1020px
   horizontal grid was useful for desktop/tablet tables, but it
   leaves a very large empty area after Edit/Delete on phones.
   ========================================================= */
@media (max-width: 600px) {
    .ipg-app .ipg-table-card:has(.ipg-rule-grid) {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Rule-library header: keep it compact and readable. */
    .ipg-app .ipg-table-head.ipg-rule-grid {
        min-width: 0 !important;
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 44px 112px !important;
        column-gap: 7px !important;
        padding: 8px 10px !important;
    }

    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(1) {
        grid-column: 1 !important;
    }
    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(2),
    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(3),
    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(4) {
        display: none !important;
    }
    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(5) {
        grid-column: 2 !important;
        text-align: center !important;
    }
    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(6) {
        grid-column: 3 !important;
        text-align: left !important;
    }

    /* Each rule becomes a compact mobile card instead of a 1020px row. */
    .ipg-app .ipg-table-row.ipg-rule-grid {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        grid-template-columns: minmax(0, 1fr) 44px 112px !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 7px !important;
        row-gap: 5px !important;
        padding: 9px 10px !important;
        align-items: center !important;
    }

    /* Rule name/description occupies the full first line. */
    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child > span {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child strong,
    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child small {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* Category, scope and severity stay visible but compact on line two. */
    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(2),
    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(3),
    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(4) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 9px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        color: #6b7280 !important;
    }
    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(4) {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    /* Status toggle stays in its own narrow column. */
    .ipg-app .ipg-table-row.ipg-rule-grid > button.ipg-toggle {
        grid-column: 2 !important;
        grid-row: 3 !important;
        justify-self: center !important;
        margin: 0 !important;
    }

    /* Edit/Delete buttons sit immediately after the toggle with no
       desktop-sized empty action column. */
    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child {
        grid-column: 3 !important;
        grid-row: 3 !important;
        width: 112px !important;
        min-width: 0 !important;
        max-width: 112px !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child .ipg-icon-text-btn {
        min-width: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        height: 28px !important;
        padding: 0 7px !important;
        gap: 4px !important;
        font-size: 9px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child .ipg-icon-text-btn i {
        font-size: 9px !important;
    }
}

@media (max-width: 380px) {
    .ipg-app .ipg-table-head.ipg-rule-grid,
    .ipg-app .ipg-table-row.ipg-rule-grid {
        grid-template-columns: minmax(0, 1fr) 40px 104px !important;
        column-gap: 5px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child {
        width: 104px !important;
        max-width: 104px !important;
        gap: 4px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child .ipg-icon-text-btn {
        padding: 0 6px !important;
        font-size: 8.5px !important;
    }
}

/* =========================================================
   UI27.1 — MOBILE INSPECTION HEADER FLOW FIX
   The base v020 stylesheet gives .ipg-top a fixed height of 76px.
   On phones the inspection result contains both the score and the
   four counters, so that fixed height causes the counters to spill
   into/over the first Publication + Edition fields. Keep the mobile
   header in normal document flow and give every section its own space.
   ========================================================= */
@media (max-width: 1024px) {
    .ipg-app .ipg-top {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-header-inspection {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head,
    .ipg-app .ipg-header-inspection .ipg-summary {
        position: relative !important;
        box-sizing: border-box !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .ipg-app .ipg-context {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
    }
}

@media (max-width: 600px) {
    .ipg-app .ipg-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 9px 10px 0 !important;
    }

    .ipg-app .ipg-top-title {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        padding: 0 2px 7px !important;
        box-sizing: border-box !important;
    }

    .ipg-app .ipg-top-title h2 {
        margin: 2px 0 0 !important;
    }

    .ipg-app .ipg-top-actions {
        width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
        box-sizing: border-box !important;
        order: 2 !important;
    }

    .ipg-app .ipg-header-inspection {
        width: 100% !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .ipg-app .ipg-header-inspection .ipg-result-head {
        width: 100% !important;
        min-height: 68px !important;
        height: auto !important;
        padding: 9px 11px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        width: 100% !important;
        height: auto !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        width: auto !important;
        min-width: 0 !important;
        min-height: 58px !important;
        height: auto !important;
        padding: 7px 3px !important;
        box-sizing: border-box !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary b {
        display: block !important;
        line-height: 1.05 !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary span {
        display: block !important;
        margin-top: 4px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .ipg-app .ipg-context,
    .ipg-app .ipg-context.ipg-inspection-context {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

@media (max-width: 420px) {
    .ipg-app .ipg-header-inspection .ipg-result-head {
        min-height: 66px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary {
        min-height: 56px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary > div {
        min-height: 56px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary b {
        font-size: 12px !important;
    }

    .ipg-app .ipg-header-inspection .ipg-summary span {
        font-size: 8px !important;
    }
}


/* =========================================================
   UI27.2 — FINAL RULE LIBRARY MOBILE TABLE FIX
   On small screens the rule table must fit the actual card width.
   The previous compact grid still reserved a desktop-style action
   column, which clipped Delete on narrow phones. Use a true mobile
   card/grid and icon-only actions so every control stays inside.
   ========================================================= */
@media (max-width: 600px) {
    .ipg-app .ipg-table-card:has(.ipg-rule-grid) {
        overflow: hidden !important;
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .ipg-app .ipg-table-head.ipg-rule-grid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 42px 78px !important;
        column-gap: 5px !important;
        padding: 8px 9px !important;
    }

    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(2),
    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(3),
    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(4) {
        display: none !important;
    }

    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(1) {
        grid-column: 1 !important;
    }

    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(5) {
        grid-column: 2 !important;
        text-align: center !important;
        display: flex;
    }

    .ipg-app .ipg-table-head.ipg-rule-grid > span:nth-child(6) {
        grid-column: 3 !important;
        text-align: center !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 42px 78px !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 5px !important;
        row-gap: 5px !important;
        padding: 9px !important;
        overflow: hidden !important;
        align-items: center !important;
    }

    /* Rule name + description always get the full first row. */
    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child > span {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child strong,
    .ipg-app .ipg-table-row.ipg-rule-grid > div:first-child small {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* Keep category / scope / severity visible without widening the row. */
    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        color: #6b7280 !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(4) {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(2),
    .ipg-app .ipg-table-row.ipg-rule-grid > span:nth-child(3) {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 8.5px !important;
    }

    /* Toggle sits in the middle column on the action row. */
    .ipg-app .ipg-table-row.ipg-rule-grid > button.ipg-toggle {
        grid-column: 2 !important;
        grid-row: 3 !important;
        justify-self: center !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 19px !important;
        margin: 0 !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > button.ipg-toggle i {
        width: 13px !important;
        height: 13px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > button.ipg-toggle.on i {
        transform: translateX(13px) !important;
    }

    /* Actions are deliberately compact on phones. */
    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child {
        grid-column: 3 !important;
        grid-row: 3 !important;
        width: 78px !important;
        min-width: 0 !important;
        max-width: 78px !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child .ipg-icon-text-btn {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        height: 27px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        overflow: hidden !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child .ipg-icon-text-btn span {
        display: none !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child .ipg-icon-text-btn i {
        display: block !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 380px) {
    .ipg-app .ipg-table-head.ipg-rule-grid,
    .ipg-app .ipg-table-row.ipg-rule-grid {
        grid-template-columns: minmax(0, 1fr) 38px 72px !important;
        column-gap: 4px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > button.ipg-toggle {
        width: 32px !important;
        min-width: 32px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child {
        width: 72px !important;
        max-width: 72px !important;
        gap: 3px !important;
    }

    .ipg-app .ipg-table-row.ipg-rule-grid > div:last-child .ipg-icon-text-btn {
        width: 33px !important;
        min-width: 33px !important;
        max-width: 33px !important;
    }
}
/* Program-language selector inside the existing account menu. */
.ipg-app .ipg-ui-language{display:block;padding:8px 10px 10px;color:#667085;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #edf0f4}.ipg-app .ipg-ui-language select{display:block;width:100%;height:32px;margin-top:5px;border:1px solid #d8dee8;border-radius:7px;background:#fff;color:#344054;padding:0 8px;font-size:11px;text-transform:none}

/* Staff password login credential status */
.ipg-login-shell .ipg-auth-field{position:relative;width:100%;display:block}
.ipg-login-shell .ipg-auth-field>input{width:100%;padding-right:48px}
.ipg-login-shell .ipg-auth-field .ipg-password-field{width:100%}
.ipg-login-shell .ipg-auth-field .ipg-password-field>input{padding-right:48px}
.ipg-auth-status{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900;line-height:1;z-index:5;pointer-events:none}
.ipg-auth-status.is-valid{background:#16a56a}
.ipg-auth-status.is-invalid{background:#d9364f}
.ipg-login-shell #ipg-staff-publication:disabled{background:#f6f7f9;color:#9aa4b3;cursor:not-allowed}
.ipg-login-shell #ipg-staff-submit:disabled{opacity:.55;cursor:not-allowed}
.ipg-login-shell #ipg-staff-login-message.success{color:#16855a}
.ipg-login-shell #ipg-staff-login-message.error{color:#d9364f}

/* Password reset links on Publisher / Staff sign-in */
.ipg-login-shell .ipg-forgot-password{
  display:block;
  width:auto;
  margin:10px auto 0;
  padding:0;
  border:0;
  background:transparent;
  color:#172943;
  font:600 12px/1.4 inherit;
  cursor:pointer;
  text-decoration:none;
}
.ipg-login-shell .ipg-forgot-password:hover,
.ipg-login-shell .ipg-forgot-password:focus{color:#f5a515;text-decoration:underline;outline:none}
.ipg-login-shell .ipg-forgot-password:disabled{opacity:.55;cursor:wait}

/* Staff credential indicators and password eye must occupy separate positions. */
.ipg-login-shell .ipg-auth-field .ipg-password-field{position:relative;display:block;width:100%}
.ipg-login-shell .ipg-auth-field .ipg-password-field>input{padding-right:82px !important}
.ipg-login-shell .ipg-auth-field .ipg-password-toggle{right:10px !important;z-index:6}
.ipg-login-shell .ipg-auth-field #ipg-staff-password-status{right:44px !important;z-index:7}
.ipg-login-shell .ipg-auth-field #ipg-staff-email-status{right:10px !important;z-index:7}
.ipg-login-shell .ipg-auth-field>input#ipg-staff-email{padding-right:48px !important}
.ipg-login-shell .ipg-auth-field>input#ipg-staff-password{padding-right:82px !important}
.ipg-login-shell .ipg-staff-forgot-password{margin-top:8px;margin-bottom:14px}

/* =========================================================
   DONE AND DUSTED v1.3.9 — PUBLISHER COLLAPSE + STAFF FORGOT
   ========================================================= */

/* Publisher card expand/collapse control */
.ipg-app .ipg-publisher-collapse {
    background: linear-gradient(90deg, #E7921D 0%, #F5BB35 100%) !important;
    border: 1px solid #F5BB35 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important;
}

.ipg-app .ipg-publisher-collapse:hover {
    background: linear-gradient(90deg, #E7921D 0%, #F5BB35 100%) !important;
    border: 1px solid #F5BB35 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(23, 32, 51, .16) !important;
}

.ipg-app .ipg-publisher-collapse:focus {
    border: 1px solid #F5BB35 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(23, 32, 51, .16) !important;
    outline: none !important;
}

/* Keep Forgot password at the bottom of the Staff login form,
   matching the Publisher login placement. */
.ipg-login-shell .ipg-staff-forgot-password {
    display: block !important;
    width: fit-content !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #172033 !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.ipg-login-shell .ipg-staff-forgot-password:hover {
    color: #172033 !important;
    text-decoration: underline !important;
    box-shadow: none !important;
}


/* =========================================================
   DONE AND DUSTED v1.3.14 — ISSUE EVIDENCE CLARITY
   ---------------------------------------------------------
   1) Marker boxes must never paint over the source PDF text.
   2) Selected markers keep only their outline/focus ring.
   3) Issue-queue evidence is displayed larger for readable text.
   ========================================================= */
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker:hover,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.selected,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.ipg-warning,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.ipg-warning:hover,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.ipg-warning.selected,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.ipg-info,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.ipg-info:hover,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.ipg-info.selected {
    background: transparent !important;
    background-color: transparent !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker {
    border-width: 2px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.selected {
    box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 4px currentColor !important;
}

.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence,
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-image,
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-text {
    max-height: 320px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence img,
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-image img,
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-text img {
    max-height: 320px !important;
    image-rendering: auto !important;
}
@media (max-width: 800px) {
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence,
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-image,
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-text,
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence img,
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-image img,
    .ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-text img {
        max-height: 260px !important;
    }
}


/* =========================================================
   DONE AND DUSTED v1.3.15 — ISSUE MARKER / TEXT EVIDENCE FIX
   1) One marker border only; no focus ring or browser outline.
   2) Text evidence fills the Issue Queue width for readability.
   3) High-resolution text crops are shown without forced stretching.
   ========================================================= */
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker:hover,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker:focus,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker:focus-visible,
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.selected {
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker {
    border-width: 2px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-page .ipg-marker.selected {
    border-width: 2px !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-text {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 380px !important;
    overflow: hidden !important;
    background: #fff !important;
}
.ipg-app .ipg-inspection-workspace .ipg-results-body .ipg-evidence.ipg-evidence-text img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 360px !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}

/* =========================================================
 * PAGE PREVIEW NAVIGATION — MATCH ANNOTATED PDF BUTTON
 * Previous / Next use the same visual language as Annotated PDF.
 * ========================================================= */
.ipg-app .ipg-inspection-workspace .ipg-page-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ipg-app .ipg-inspection-workspace .ipg-page-nav button {
    min-width: 88px !important;
    height: 32px !important;
    padding: 7px 10px !important;
    border: 1px solid #f5bb35 !important;
    border-radius: 7px !important;
    background: linear-gradient(90deg, #e7921d 0%, #f5bb35 100%) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 8px rgba(23, 32, 51, .08) !important;
    cursor: pointer !important;
    transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease !important;
}

.ipg-app .ipg-inspection-workspace .ipg-page-nav button:not(:disabled):hover {
    color: #fff !important;
    background: linear-gradient(90deg, #e7921d 0%, #f5bb35 100%) !important;
    box-shadow: 0 6px 14px rgba(23, 32, 51, .14) !important;
    transform: translateY(-1px) !important;
}

.ipg-app .ipg-inspection-workspace .ipg-page-nav button:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.ipg-app .ipg-inspection-workspace .ipg-page-nav button:focus-visible {
    outline: 2px solid #e7921d !important;
    outline-offset: 2px !important;
}

@media (max-width: 800px) {
    .ipg-app .ipg-inspection-workspace .ipg-page-nav {
        gap: 5px !important;
    }

    .ipg-app .ipg-inspection-workspace .ipg-page-nav button {
        min-width: 68px !important;
        height: 30px !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 420px) {
    .ipg-app .ipg-inspection-workspace .ipg-page-nav button {
        min-width: 62px !important;
        height: 28px !important;
        padding: 5px 7px !important;
        font-size: 8px !important;
    }
}