/* ==========================================================================
   FILE: style.css
   ORGANIZED WORKING COPY
   PURPOSE: Main system styling for login, dashboard, WorkDesk, Invoice Management, mobile views, and shared components.

   SAFETY NOTE:
   - CSS cascade order is preserved to avoid changing the visual behavior.
   - Cleanup applied: top map, trailing-space cleanup, blank-line cleanup.

   STYLE BLOCKS / EXISTING HEADERS FOUND:
     - Line     1: Keyframe animation for the background
     - Line     3: MODIFIED: Use new brand colors
     - Line    53: Fireworks bursts (in addition to confetti)
     - Line   174: Invoice Management: Batch Entry - Attention Picker (Per Row)
     - Line   197: +++ Custom Variables +++
     - Line   199: IBA Brand Palette
     - Line   206: IBA Tints (for backgrounds/hovers)
     - Line   212: Text Colors
     - Line   216: Old Variable Mapping
     - Line   223: Dashboard Theme Colors
     - Line   234: General Body Styles
     - Line   238: UI SIMPLIFICATION: HIDE "ADD NEW JOB" ENTRY POINTS IN REPORTING LIST VIEWS
     - Line   239: (The WorkDesk sidebar "Add New Job" remains available as the main entry.)
     - Line   246: +++ Plain Dark Blue Login Background +++
     - Line   252: Slightly richer backdrop for the glass card (desktop login + welcome)
     - Line   261: App Container for centered content
     - Line   264: Card Styling
     - Line   272: ++ REVERTED: Animated Card Style for Login/Welcome ++
     - Line   274: Crystal / glass card (login + welcome screen)
     - Line   280: Edge glow (subtle, readable)
     - Line   302: Show as border only
     - Line   327: ADD THIS NEW RULE
     - Line   335: END OF ADDITION
     - Line   337: ++ NEW: Style for input hint text ++
     - Line   346: Main Dashboard Styles
     - Line   347: MODIFIED: Changed text color for dark card
     - Line   356: MODIFIED: Themed Circle Buttons
     - Line   378: WORKDESK STYLES
     - Line   395: ++ MODIFIED (Req 1): Adjust main content when sidebar is present ++
     - Line   397: Make room for the sidebar
     - Line   408: ++ NEW: Table Count Display ++
     - Line   422: UPDATED Form & Input Styles
     - Line   436: ++ Vacation Style for Choices.js ++
     - Line   447: Dividers & Search Bars
     - Line   453: ++ NEW: Invoice Entry PO Search Container ++
     - Line   469: ++ NEW (Req 1): Style for Bottom PO Search Container ++
     - Line   477: max-width: 500px; REMOVED max-width to allow buttons to spread
     - Line   488: ++ FIX: Add spacing to buttons within the bottom search container ++
     - Line   493: Remove inherited styles if they cause issues
     - Line   501: Table Styles
     - Line   527: Download button color variants (used in Invoice Mgmt → Invoice Records reporting header)
     - Line   536: New style for clickable rows
     - Line   541: WORKDESK DASHBOARD STYLES
     - Line   549: MODIFIED: PO Details Container (Pink Theme)
     - Line   557: Matching Font Color
     - Line   562: Optional: Make the labels (PO No:, Site:) slightly darker/bolder
     - Line   581: REPORTING STYLES
     - Line   621: TAB STYLE (Workdesk + Inventory)
     - Line   623: Default colors (can be overridden per button using --tab-color/--tab-text)
     - Line   637: Hide Scrollbar (Clean Look)
     - Line   642: Hide Scrollbar for Chrome, Safari, Opera
     - Line   652: Extra left padding to clear the angled corner
     - Line   667: Folder-tab edge
     - Line   707: Make secondary text inside active tabs readable (e.g., [code] labels)
     - Line   712: Attention effect used on Active Task tabs
     - Line   752: Legend for Reporting Table
     - Line   775: ++ Invoice Reporting Form Layout ++
     - Line   794: Style for disabled navigation links
     - Line   805: INVOICE REPORT STYLES
     - Line   821: New Highlighting Rules
   ========================================================================== */

/* --- Keyframe animation for the background --- */
@keyframes glowing-border {
    /* MODIFIED: Use new brand colors */
    0% { border-color: var(--iba-secondary-teal); box-shadow: 0 0 2px var(--iba-secondary-teal), 0 0 5px var(--iba-secondary-teal), 0 0 10px var(--iba-secondary-teal), inset 0 0 0 2px rgba(0,0,0,0.5); }
    50% { border-color: var(--iba-secondary-gold); box-shadow: 0 0 2px var(--iba-secondary-gold), 0 0 5px var(--iba-secondary-gold), 0 0 10px var(--iba-secondary-gold), inset 0 0 0 2px rgba(0,0,0,0.5); }
    100% { border-color: var(--iba-secondary-teal); box-shadow: 0 0 2px var(--iba-secondary-teal), 0 0 5px var(--iba-secondary-teal), 0 0 10px var(--iba-secondary-teal), inset 0 0 0 2px rgba(0,0,0,0.5); }
}

/* ========================================================================== */
/* 11.7.4 — WorkDesk Ready for Payment: premium recent-paid history           */
/* ========================================================================== */
body.wd-paid-history-open {
    overflow: hidden;
}

#wd-paid-history-modal.hidden {
    display: none !important;
}

#wd-paid-history-modal {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 43, 42, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wd-paid-history-window {
    width: min(1040px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(183, 210, 214, 0.95);
    border-radius: 24px;
    background: #f8fbfc;
    box-shadow: 0 28px 70px rgba(7, 38, 38, 0.34);
    color: #173e46;
}

.wd-paid-history-header {
    position: relative;
    flex: 0 0 auto;
    padding: 18px 74px 22px 36px;
    color: #fff;
    background: linear-gradient(105deg, #073e56 0%, #0a5d69 64%, #147668 100%);
}

.wd-paid-history-window-label {
    width: max-content;
    padding-bottom: 8px;
    border-bottom: 3px solid #f2bd35;
    color: #c3dfe5;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.wd-paid-history-heading-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.wd-paid-history-heading-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2bd35;
    color: #073e56;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(242, 189, 53, 0.22);
}

.wd-paid-history-heading-row h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
    line-height: 1.1;
}

.wd-paid-history-heading-row p {
    margin: 6px 0 0;
    color: #cce3e6;
    font-size: 0.78rem;
}

.wd-paid-history-close {
    position: absolute;
    top: 24px;
    right: 26px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.18s ease, background 0.18s ease;
}

.wd-paid-history-close:hover,
.wd-paid-history-close:focus-visible {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(4deg) scale(1.04);
    outline: none;
}

.wd-paid-history-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 32px 24px;
}

.wd-paid-history-info {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border: 1px solid #a9d7f3;
    border-radius: 14px;
    background: #edf7ff;
    color: #10496b;
}

.wd-paid-history-info > span {
    color: #0e83c6;
    font-size: 1.55rem;
}

.wd-paid-history-info strong,
.wd-paid-history-info p {
    display: block;
    margin: 0;
}

.wd-paid-history-info strong {
    font-size: 0.78rem;
}

.wd-paid-history-info p {
    margin-top: 4px;
    color: #4d7183;
    font-size: 0.7rem;
}

.wd-paid-history-summary-card {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(210px, 1.35fr) minmax(190px, 1fr) minmax(130px, 0.68fr);
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding: 19px 24px 19px 28px;
    overflow: hidden;
    border: 1px solid #d4e2e1;
    border-radius: 17px;
    background: linear-gradient(135deg, #fff, #f2f8f6);
    box-shadow: 0 8px 20px rgba(23, 61, 57, 0.1);
}

.wd-paid-history-summary-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background: #f2bd35;
}

.wd-paid-history-summary-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e2f2ee;
    color: #117266;
    font-size: 1.35rem;
}

.wd-paid-history-po small,
.wd-paid-history-latest > small,
.wd-paid-history-latest-date small,
.wd-paid-history-field small {
    display: block;
    color: #748d8c;
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.wd-paid-history-po > strong {
    display: block;
    margin-top: 5px;
    color: #083e54;
    font-size: 1.55rem;
    line-height: 1.05;
}

.wd-paid-history-po > span {
    display: block;
    margin-top: 7px;
    color: #375d60;
    font-size: 0.78rem;
    font-weight: 800;
}

.wd-paid-history-count {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    padding: 6px 13px;
    border-radius: 999px;
    background: #e1f5eb;
    color: #117149;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.wd-paid-history-count i {
    font-size: 0.48rem;
    color: #16a064;
}

.wd-paid-history-latest > strong,
.wd-paid-history-latest-date > strong {
    display: block;
    margin-top: 7px;
    color: #0c4f5d;
    font-size: 1rem;
    font-weight: 900;
}

.wd-paid-history-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 11px;
}

.wd-paid-history-list-head strong {
    color: #496b6d;
    font-size: 0.71rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.wd-paid-history-list-head span {
    color: #6f8586;
    font-size: 0.7rem;
    font-weight: 800;
}

.wd-paid-history-list {
    position: relative;
    display: grid;
    gap: 11px;
}

.wd-paid-history-list::before {
    content: '';
    position: absolute;
    top: 36px;
    bottom: 36px;
    left: 18px;
    width: 3px;
    border-radius: 3px;
    background: #c8ddd8;
}

.wd-paid-history-row {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(160px, 1.25fr) minmax(140px, 0.95fr) minmax(120px, 0.78fr) minmax(115px, 0.72fr) 76px;
    align-items: center;
    gap: 15px;
    min-height: 74px;
    padding: 11px 18px 11px 12px;
    border: 1px solid #d9e6e4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 15px rgba(23, 61, 57, 0.09);
}

.wd-paid-history-check {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #13a16b;
    color: #fff;
    font-size: 0.58rem;
    box-sizing: content-box;
}

.wd-paid-history-field strong {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
    color: #294e52;
    font-size: 0.79rem;
}

.wd-paid-history-field.is-paid-date,
.wd-paid-history-field strong.is-paid-date {
    color: #117149;
}

.wd-paid-history-invoice strong {
    color: #0b4358;
    font-size: 0.85rem;
}

.wd-paid-history-badge {
    justify-self: end;
    min-width: 68px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #e0f6e9;
    color: #0b8451;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
}

.wd-paid-history-loading,
.wd-paid-history-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px;
    text-align: center;
}

.wd-paid-history-loading > span,
.wd-paid-history-empty > span {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #e3f3ef;
    color: #117266;
    font-size: 1.55rem;
}

.wd-paid-history-empty.is-error > span {
    background: #fff0e8;
    color: #c3502f;
}

.wd-paid-history-loading strong,
.wd-paid-history-empty strong {
    color: #103f4c;
    font-size: 1rem;
}

.wd-paid-history-loading p,
.wd-paid-history-empty p {
    max-width: 540px;
    margin: 8px 0 0;
    color: #6a8283;
    font-size: 0.78rem;
}

.wd-paid-history-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 32px;
    border-top: 1px solid #d8e4e5;
    background: #f8fbfc;
}

.wd-paid-history-footer-note {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wd-paid-history-footer-note > span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f2f5;
    color: #0b5b6c;
}

.wd-paid-history-footer-note strong,
.wd-paid-history-footer-note p {
    display: block;
    margin: 0;
}

.wd-paid-history-footer-note strong {
    color: #45696d;
    font-size: 0.66rem;
}

.wd-paid-history-footer-note p {
    margin-top: 3px;
    color: #7b9090;
    font-size: 0.62rem;
}

.wd-paid-history-footer-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wd-paid-history-secondary,
.wd-paid-history-primary {
    min-height: 44px;
    padding: 0 25px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.71rem;
    font-weight: 900;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wd-paid-history-secondary {
    border: 1px solid #cbdcdf;
    background: #fff;
    color: #385b61;
}

.wd-paid-history-primary {
    min-width: 235px;
    border: 1px solid #0d7468;
    background: #0d7468;
    color: #fff;
    box-shadow: 0 8px 18px rgba(13, 116, 104, 0.18);
}

.wd-paid-history-primary i {
    margin-right: 7px;
}

.wd-paid-history-secondary:hover,
.wd-paid-history-secondary:focus-visible,
.wd-paid-history-primary:hover,
.wd-paid-history-primary:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.wd-paid-history-primary:hover,
.wd-paid-history-primary:focus-visible {
    background: #08675d;
    box-shadow: 0 10px 22px rgba(13, 116, 104, 0.25);
}

@media (max-width: 900px) {
    #wd-paid-history-modal {
        align-items: flex-start;
        padding: 12px;
        overflow-y: auto;
    }

    .wd-paid-history-window {
        width: 100%;
        max-height: none;
        border-radius: 19px;
    }

    .wd-paid-history-header {
        padding: 17px 60px 20px 22px;
    }

    .wd-paid-history-body {
        overflow: visible;
        padding: 16px;
    }

    .wd-paid-history-summary-card {
        grid-template-columns: 50px 1fr;
        gap: 12px;
        padding: 18px 18px 18px 24px;
    }

    .wd-paid-history-latest,
    .wd-paid-history-latest-date {
        grid-column: 2;
    }

    .wd-paid-history-row {
        grid-template-columns: 28px 1fr auto;
        gap: 10px 12px;
        padding: 14px 13px 14px 10px;
    }

    .wd-paid-history-field {
        grid-column: 2;
    }

    .wd-paid-history-check {
        grid-row: 1 / span 4;
        align-self: start;
    }

    .wd-paid-history-badge {
        grid-column: 3;
        grid-row: 1;
    }

    .wd-paid-history-list::before {
        top: 30px;
        bottom: 30px;
        left: 17px;
    }

    .wd-paid-history-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 15px 16px 18px;
    }

    .wd-paid-history-footer-actions {
        width: 100%;
    }

    .wd-paid-history-secondary,
    .wd-paid-history-primary {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 16px;
    }
}

/* ========================================================================== */
/* 11.8.5 — Strict Invoice Dashboard visibility                               */
/* ========================================================================== */

/* Fail closed until the authenticated user's position has been checked. */
body:not(.iba-can-see-im-dashboard) #invoice-management-view#invoice-management-view#invoice-management-view :is(.im-nav-dashboard, #im-dashboard) {
    display: none !important;
}

/* ========================================================================== */
/* 11.8.4 — WorkDesk and Invoice Active Task navigation contrast              */
/* ========================================================================== */

/* The Active Task alert uses a light pulse card even while another page is
   selected. Keep its title and icon dark in every pulse state. */
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active {
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active :is(i, span:not(.notification-badge)),
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active :is(i, span:not(.notification-badge))::before {
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active .notification-badge {
    background: var(--iba-wd-orange) !important;
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active {
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active :is(i, span:not(.notification-badge)),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active :is(i, span:not(.notification-badge))::before {
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active .notification-badge {
    background: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ========================================================================== */
/* 11.8.3 — Inventory-only readability, records alignment, and UI cleanup     */
/* ========================================================================== */

/* A pulsing Inventory navigation item keeps a light alert surface even when
   it is not the selected page, so its foreground must stay dark. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active:not(.active) {
    background: var(--iba-inv-mint) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active:not(.active) :is(i, span:not(.notification-badge)) {
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.nav-pulse-active .notification-badge {
    background: var(--iba-inv-coral) !important;
    border-color: rgba(18, 48, 67, 0.18) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Material Stock, Active Task, and Job Records use a light metric capsule. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(#wd-material-stock, #wd-activetask, #wd-reporting) .wd-page-hero-metric {
    background: #f4fffd !important;
    border-color: var(--iba-inv-turquoise) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(#wd-material-stock, #wd-activetask, #wd-reporting) .wd-page-hero-metric :is(span, strong, small, i) {
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

/* Active/Completed folders: every surface and its nested count are explicit. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #inventory-job-records-stage-switch {
    background: rgba(244, 255, 253, 0.88) !important;
    border-color: rgba(102, 192, 184, 0.56) !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #inventory-job-records-stage-switch .inv-stage-btn {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #inventory-job-records-stage-switch .inv-stage-btn.active {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #inventory-job-records-stage-switch .inv-stage-btn .inv-stage-count {
    background: var(--iba-inv-mint) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #inventory-job-records-stage-switch .inv-stage-btn.active .inv-stage-count {
    background: #ffffff !important;
    border-color: rgba(18, 48, 67, 0.14) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Keep the Inventory In Transit report action wide enough for icon and label. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-inventory-intransit-report-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 112px !important;
    width: auto !important;
    padding: 0 16px !important;
    gap: 8px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-inventory-intransit-report-btn:is(:hover, :focus-visible) {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-inventory-intransit-report-btn i {
    flex: 0 0 auto !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* The Request Review filter is a compact control, not a full white banner. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-inv-request-review .inventory-request-review-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 12px 0 10px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-inv-request-review .inventory-request-review-toolbar label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px 7px 12px !important;
    border: 1px solid rgba(34, 100, 132, 0.24) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 850 !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-inv-request-review #inv-request-review-filter {
    min-width: 112px !important;
    height: 36px !important;
    margin: 0 !important;
    border-color: var(--iba-inv-turquoise) !important;
    background: #f4fffd !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-inv-request-review .inventory-request-review-status {
    color: var(--iba-inv-ocean) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Inventory Job Records has one compact action column; history owns details. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #job-records-table :is(.inv-actions-cell, .inv-group-actions-cell) {
    min-width: 138px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #job-records-table .inv-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(#wd-material-stock, #wd-activetask, #wd-reporting) .wd-page-hero-metric {
        width: 100% !important;
        text-align: left !important;
    }
}

/* 11.8.2 — Payments row removal uses the complete visible button hit area. */
#im-payments #im-payments-table .payment-remove-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    touch-action: manipulation;
}

#im-payments #im-payments-table .payment-remove-btn > *,
#im-payments #im-payments-table .payment-remove-btn::before,
#im-payments #im-payments-table .payment-remove-btn::after {
    pointer-events: none !important;
}

/* High-specificity modal icon/X inheritance: outranks later split CSS files. */
:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
) :is(button, a.action-btn) :is(i, span, strong, em, small, b),
:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
) :is(button, a.action-btn) :is(i, span)::before {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
) .modal-header .modal-close-btn,
#wd-forward-task-modal#wd-forward-task-modal .wd-forward-modal-x,
#inv-request-convert-modal#inv-request-convert-modal .inventory-request-convert-close {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
) .modal-header .modal-close-btn:is(:hover, :focus-visible),
#wd-forward-task-modal#wd-forward-task-modal .wd-forward-modal-x:is(:hover, :focus-visible),
#inv-request-convert-modal#inv-request-convert-modal .inventory-request-convert-close:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.54) !important;
    color: #ffffff !important;
}

@media (max-width: 560px) {
    .wd-paid-history-heading-row p {
        font-size: 0.7rem;
    }

    .wd-paid-history-summary-card {
        grid-template-columns: 1fr;
    }

    .wd-paid-history-summary-icon,
    .wd-paid-history-po,
    .wd-paid-history-latest,
    .wd-paid-history-latest-date {
        grid-column: 1;
    }

    .wd-paid-history-summary-icon {
        width: 44px;
        height: 44px;
    }

    .wd-paid-history-list-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .wd-paid-history-footer-actions {
        flex-direction: column-reverse;
    }

    .wd-paid-history-secondary,
    .wd-paid-history-primary {
        width: 100%;
        flex: none;
    }
}

/* ========================================================================
   11.6.4 — Exact Invoice Records result transfer + WorkDesk payment pocket
   ======================================================================== */
.im-pocket-transfer-trigger {
    background: linear-gradient(135deg, #0f766e, #0b5f57) !important;
    border-color: rgba(13, 148, 136, 0.42) !important;
    color: #ffffff !important;
}

.im-pocket-transfer-trigger:disabled {
    cursor: not-allowed !important;
    opacity: 0.48 !important;
    filter: grayscale(0.35);
}

body #im-pocket-transfer-modal > .modal-container.im-pocket-transfer-modal {
    width: min(1180px, calc(100vw - 34px));
    max-width: 1180px;
    height: min(88vh, 840px);
    max-height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#im-pocket-transfer-modal .modal-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.im-pocket-transfer-help {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    background: #f0f9ff;
    color: #0c4a6e;
    font-size: 0.88rem;
    line-height: 1.42;
}

.im-pocket-transfer-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.im-pocket-transfer-stats > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f0fdfa);
}

.im-pocket-transfer-stats span,
.im-pocket-transfer-stats strong {
    display: block;
}

.im-pocket-transfer-stats span {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.im-pocket-transfer-stats strong {
    margin-top: 3px;
    color: #0f4c5c;
    font-size: 1.08rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#im-pocket-transfer-modal .im-pocket-transfer-table-wrap {
    flex: 1 1 auto;
    min-height: 190px;
    margin: 0;
    overflow: auto;
    border: 1px solid #cbd5e1;
    border-radius: 13px;
    background: #ffffff;
}

.im-pocket-transfer-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: auto;
}

.im-pocket-transfer-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 9px;
    border-bottom: 1px solid #94a3b8;
    background: #0f4c5c;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-align: left;
    white-space: nowrap;
}

.im-pocket-transfer-table tbody td {
    padding: 9px;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
    font-size: 0.8rem;
    vertical-align: middle;
}

.im-pocket-transfer-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.im-pocket-transfer-table td.right-align,
.im-pocket-transfer-table th.right-align {
    text-align: right;
}

.im-pocket-transfer-remove {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fff1f2;
    color: #be123c;
    cursor: pointer;
}

.im-pocket-transfer-remove:hover,
.im-pocket-transfer-remove:focus-visible {
    border-color: #fb7185;
    background: #ffe4e6;
}

.im-pocket-transfer-empty {
    padding: 30px 18px !important;
    color: #64748b !important;
    text-align: center;
}

.im-pocket-transfer-status {
    min-height: 20px;
    margin: 0;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.im-pocket-transfer-status.is-success { color: #047857; }
.im-pocket-transfer-status.is-error { color: #b91c1c; }
.im-pocket-transfer-status.is-progress,
.im-pocket-transfer-status.is-working { color: #075985; }

#im-pocket-transfer-modal .im-pocket-transfer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#im-pocket-transfer-modal .im-pocket-transfer-footer > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#wd-dashboard .wd-dashboard-payment-section {
    border-color: rgba(5, 150, 105, 0.24);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.94));
}

#wd-dashboard .wd-dashboard-payment-grid {
    grid-template-columns: minmax(235px, 340px) !important;
    justify-content: flex-start;
}

#wd-dashboard .wd-payment-pocket-card {
    width: 100%;
    max-width: 340px;
}

#wd-dashboard .wd-active-status-card.tone-payment::after,
#wd-dashboard .wd-active-status-card.tone-payment .wd-status-icon {
    background: #059669 !important;
}

#wd-dashboard .wd-dashboard-payment-grid .wd-payment-pocket-card.active,
#wd-dashboard .wd-dashboard-payment-grid .wd-payment-pocket-card.active:hover,
#wd-dashboard .wd-dashboard-payment-grid .wd-payment-pocket-card.active:focus {
    border-color: rgba(5, 150, 105, 0.65) !important;
    background: linear-gradient(180deg, #ffffff, #ecfdf5) !important;
    box-shadow: 0 18px 38px rgba(5, 150, 105, 0.18), 0 0 0 3px rgba(16, 185, 129, 0.14) !important;
}

.wd-payment-pocket-board {
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.wd-payment-pocket-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 17px;
    background: linear-gradient(135deg, #064e3b, #0f766e);
    color: #ffffff;
}

.wd-payment-pocket-board-head > div:first-child {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 2px 9px;
}

.wd-payment-pocket-board-head span,
.wd-payment-pocket-board-head strong,
.wd-payment-pocket-board-head small {
    display: block;
}

.wd-payment-pocket-board-head > div:first-child small {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.78);
}

.wd-payment-pocket-board-head > div:last-child {
    text-align: right;
}

.wd-payment-pocket-board-head > div:last-child small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.wd-payment-pocket-table-wrap {
    margin: 0;
    overflow: auto;
}

.wd-payment-pocket-table {
    width: 100%;
    min-width: 930px;
    border-collapse: collapse;
}

.wd-payment-pocket-table th {
    padding: 10px 11px;
    border-bottom: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.wd-payment-pocket-table td {
    padding: 10px 11px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.79rem;
    vertical-align: middle;
}

.wd-payment-pocket-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.wd-payment-pocket-table .right-align {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wd-payment-pocket-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.69rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 780px) {
    body #im-pocket-transfer-modal > .modal-container.im-pocket-transfer-modal {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
    }

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

    #im-pocket-transfer-modal .im-pocket-transfer-footer,
    #im-pocket-transfer-modal .im-pocket-transfer-footer > div {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    #im-pocket-transfer-modal .im-pocket-transfer-footer button {
        width: 100%;
    }

    #wd-dashboard .wd-dashboard-payment-grid {
        grid-template-columns: 1fr !important;
    }

    #wd-dashboard .wd-payment-pocket-card {
        max-width: none;
    }

    .wd-payment-pocket-board-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .wd-payment-pocket-board-head > div:last-child {
        text-align: left;
    }
}

/* ==========================================================================
   11.6.1 — Payments Search: Full Result Scrolling
   Keep the search controls and action footer visible while the complete
   With Accounts result table uses one reliable internal scrollbar.
   ========================================================================== */
body #im-add-payment-modal > .modal-container.im-payment-search-modal {
    height: min(90vh, 900px) !important;
    height: min(90dvh, 900px) !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #im-add-payment-modal > .modal-container.im-payment-search-modal > .modal-header,
body #im-add-payment-modal > .modal-container.im-payment-search-modal > .modal-footer {
    flex: 0 0 auto !important;
}

body #im-add-payment-modal > .modal-container.im-payment-search-modal > .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #im-add-payment-modal > .modal-container.im-payment-search-modal > .modal-content > p,
body #im-add-payment-modal > .modal-container.im-payment-search-modal .im-payment-legacy-controls,
body #im-add-payment-modal > .modal-container.im-payment-search-modal .im-payment-search-row {
    flex: 0 0 auto !important;
}

body #im-add-payment-modal > .modal-container.im-payment-search-modal #im-payment-modal-results.im-payment-search-results {
    flex: 1 1 auto !important;
    min-height: 220px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: auto;
    scrollbar-color: rgba(17, 96, 69, .78) #e7f0ec;
}

body #im-add-payment-modal #im-payment-modal-results::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

body #im-add-payment-modal #im-payment-modal-results::-webkit-scrollbar-track {
    background: #e7f0ec;
    border-radius: 999px;
}

body #im-add-payment-modal #im-payment-modal-results::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 3px solid #e7f0ec;
    border-radius: 999px;
    background: linear-gradient(180deg, #1c7a59, #0b4b35);
}

body #im-add-payment-modal #im-payment-modal-results::-webkit-scrollbar-thumb:hover {
    background: #073d2b;
}

body #im-add-payment-modal #im-payment-modal-results .im-payment-result-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

@media (max-width: 680px) {
    body #im-add-payment-modal > .modal-container.im-payment-search-modal {
        width: calc(100vw - 16px) !important;
        height: 92vh !important;
        height: 92dvh !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
    }

    body #im-add-payment-modal > .modal-container.im-payment-search-modal #im-payment-modal-results.im-payment-search-results {
        min-height: 160px !important;
    }
}

/* ==========================================================================
   11.5.7 — Continuous Multi-Company Payment Search
   ========================================================================== */
#im-payments .im-hero-payments {
    margin-bottom: 16px;
}

#im-payments .im-payment-cart-total span,
#im-add-payment-modal .im-payment-selected-total span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#im-payments .im-payment-empty-state {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    border: 1px dashed rgba(15, 109, 141, .38);
    border-radius: 24px;
    color: #64748b;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,249,255,.78));
}

#im-payments .im-payment-empty-state i {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #e0f2fe;
    color: #03678c;
    font-size: 1.35rem;
}

#im-payments .im-payment-empty-state strong {
    color: #0f3550;
    font-size: 1.08rem;
}

#im-payments .im-payment-empty-state span {
    max-width: 580px;
    font-size: .88rem;
    line-height: 1.5;
}

#im-payments .im-payment-cart-table-wrap.hidden,
#im-payments .im-payment-empty-state.hidden {
    display: none !important;
}

#im-payments #im-payments-table {
    min-width: 1180px;
}

#im-payments #im-payments-table th:nth-child(1) { width: 12%; }
#im-payments #im-payments-table th:nth-child(2) { width: 9%; }
#im-payments #im-payments-table th:nth-child(3) { width: 20%; }
#im-payments #im-payments-table th:nth-child(4) { width: 13%; text-align: right; }
#im-payments #im-payments-table th:nth-child(5) { width: 14%; }
#im-payments #im-payments-table th:nth-child(6) { width: 13%; }
#im-payments #im-payments-table th:nth-child(7) { width: 11%; }
#im-payments #im-payments-table th:nth-child(8) { width: 5%; }

#im-payments #im-payments-table td:nth-child(1),
#im-payments #im-payments-table td:nth-child(2) {
    color: #074c6c;
    font-weight: 900;
}

#im-payments #im-payments-table td:nth-child(3) {
    color: #334155;
    font-weight: 750;
}

#im-payments #im-payments-table td:nth-child(4) {
    text-align: right;
}

#im-payments .im-payment-amount-input {
    width: 130px;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    text-align: right;
    color: #0f3550;
    background: #fffbea !important;
    border: 1px solid #f2c94c !important;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

#im-payments .im-payment-with-accounts-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #03678c;
    font-size: .8rem;
    font-weight: 850;
    white-space: nowrap;
}

#im-payments .im-payment-with-accounts-date.is-missing {
    color: #9a6700;
}

#im-payments .im-payment-paid-date-input {
    width: 142px;
    max-width: 100%;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid #8ec5b3 !important;
    border-radius: 10px;
    color: #0b4b35;
    background: #f0fdf7 !important;
    font-size: .8rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

#im-payments .im-payment-paid-date-input:disabled {
    opacity: 1;
    cursor: not-allowed;
    color: #52606b;
    background: #edf2f4 !important;
    border-color: #cbd5e1 !important;
}

#im-payments .im-payment-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    color: #5b3d00;
    background: #fef3c7;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
}

#im-payments .payment-remove-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #fecaca !important;
    border-radius: 11px !important;
    color: #b91c1c !important;
    background: #fff1f2 !important;
    box-shadow: none !important;
}

#im-payments .im-payment-checkout-bar {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: 18px;
    margin-top: 16px !important;
    padding: 16px 18px !important;
}

#im-payments .im-payment-cart-total strong,
#im-add-payment-modal .im-payment-selected-total strong {
    color: #073b5c;
    font-size: 1.45rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

#im-payments .im-payment-checkout-actions,
#im-add-payment-modal .im-payment-search-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#im-payments #im-save-payments-button {
    background: linear-gradient(135deg, #0f766e, #0b5d56) !important;
    color: #ffffff !important;
}

#im-payments #im-save-payments-button:disabled,
#im-payments #im-clear-payments-button:disabled {
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none !important;
}

#im-payments .im-payment-status-message {
    min-height: 22px;
    margin: 10px 4px 0;
    color: #475569;
    font-size: .83rem;
    font-weight: 750;
}

#im-payments .im-payment-status-message.is-working { color: #03678c; }
#im-payments .im-payment-status-message.is-success { color: #087443; }
#im-payments .im-payment-status-message.is-error { color: #b42318; }

#im-add-payment-modal .im-payment-search-modal {
    width: min(1040px, calc(100vw - 32px));
    max-width: 1040px;
    border-radius: 26px;
    overflow: hidden;
}

#im-add-payment-modal .im-payment-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 14px 0;
}

#im-add-payment-modal .im-payment-search-row input {
    width: 100%;
    min-height: 46px;
}

#im-add-payment-modal .im-payment-legacy-controls {
    margin: 12px 0 0;
    padding: 11px 13px;
    border: 1px solid #e9c46a;
    border-radius: 14px;
    color: #6f4d00;
    background: #fff9e8;
}

#im-add-payment-modal .im-payment-legacy-controls.hidden {
    display: none !important;
}

#im-add-payment-modal .im-payment-legacy-controls label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

#im-add-payment-modal .im-payment-legacy-controls input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #a46a00;
}

#im-add-payment-modal .im-payment-legacy-controls span,
#im-add-payment-modal .im-payment-legacy-controls strong,
#im-add-payment-modal .im-payment-legacy-controls small {
    display: block;
}

#im-add-payment-modal .im-payment-legacy-controls strong {
    font-size: .82rem;
}

#im-add-payment-modal .im-payment-legacy-controls small {
    margin-top: 2px;
    color: #8a650f;
    font-size: .72rem;
    line-height: 1.35;
}

#im-add-payment-modal .im-payment-search-results {
    max-height: 48vh;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
}

#im-add-payment-modal .im-payment-result-summary {
    position: sticky;
    left: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid #bae6fd;
    color: #07506a;
    background: #eaf8fd;
    font-size: .8rem;
    line-height: 1.35;
}

#im-add-payment-modal .im-payment-result-summary i {
    color: #0284c7;
}

#im-add-payment-modal .im-payment-result-summary strong {
    font-weight: 950;
}

#im-add-payment-modal .im-payment-add-success {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 24px;
    color: #08643d;
    background: linear-gradient(180deg, #f0fdf4, #ecfdf5);
    text-align: left;
}

#im-add-payment-modal .im-payment-add-success > i {
    flex: 0 0 auto;
    color: #16a34a;
    font-size: 1.8rem;
}

#im-add-payment-modal .im-payment-add-success strong,
#im-add-payment-modal .im-payment-add-success span {
    display: block;
}

#im-add-payment-modal .im-payment-add-success strong {
    margin-bottom: 4px;
    font-size: .95rem;
}

#im-add-payment-modal .im-payment-add-success span {
    color: #3f6f58;
    font-size: .82rem;
    line-height: 1.45;
}

#im-add-payment-modal .im-payment-result-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

#im-add-payment-modal .im-payment-result-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 9px;
    color: #facc15;
    background: #0f6045;
    font-size: .72rem;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

#im-add-payment-modal .im-payment-result-table td {
    padding: 10px 9px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: .82rem;
}

#im-add-payment-modal .im-payment-result-table tbody tr {
    cursor: pointer;
    background: #ffffff;
}

#im-add-payment-modal .im-payment-result-table tbody tr:hover {
    background: #eef8fb;
}

#im-add-payment-modal .im-payment-result-table tbody tr.im-payment-date-group,
#im-add-payment-modal .im-payment-result-table tbody tr.im-payment-date-group:hover {
    cursor: default;
    background: #dff3eb;
}

#im-add-payment-modal .im-payment-result-table tbody tr.im-payment-date-group.is-missing,
#im-add-payment-modal .im-payment-result-table tbody tr.im-payment-date-group.is-missing:hover {
    background: #fff4d6;
}

#im-add-payment-modal .im-payment-result-table .im-payment-date-group td {
    width: auto !important;
    padding: 8px 12px;
    border-top: 2px solid #b8dfd0;
    border-bottom: 1px solid #b8dfd0;
    color: #0b5d43;
    text-align: left !important;
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .015em;
}

#im-add-payment-modal .im-payment-result-table .im-payment-date-group.is-missing td {
    border-color: #edd58d;
    color: #7a5700;
}

#im-add-payment-modal .im-payment-result-table .im-payment-date-group i {
    margin-right: 6px;
}

#im-add-payment-modal .im-payment-result-table th:first-child,
#im-add-payment-modal .im-payment-result-table td:first-child {
    width: 42px;
    text-align: center;
}

#im-add-payment-modal .im-payment-search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 680px) {
    #im-payments .im-payment-checkout-bar,
    #im-add-payment-modal .im-payment-search-footer {
        align-items: stretch;
        flex-direction: column;
    }

    #im-payments .im-payment-checkout-actions,
    #im-add-payment-modal .im-payment-search-actions {
        width: 100%;
    }

    #im-payments .im-payment-checkout-actions button,
    #im-add-payment-modal .im-payment-search-actions button {
        flex: 1;
    }

    #im-add-payment-modal .im-payment-search-row {
        grid-template-columns: 1fr;
    }

}

/* ================================
   Celebration Banner Overlay (configurable)
   - Shows after successful login if enabled within date range
   - Banner style (no card)
   ================================ */

.celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    padding: 16px;
}

.celebration-overlay.hidden { display: none; }

.celebration-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.celebration-particles .confetti {
    position: absolute;
    width: 8px;
    height: 14px;
    border-radius: 3px;
    opacity: 0.9;
    transform: translateY(-10vh) rotate(0deg);
    animation: celebration-fall 4.8s linear forwards;
}

@keyframes celebration-fall {
    to {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0.2;
    }
}


/* Fireworks bursts (in addition to confetti) */
.celebration-particles .firework {
    position: absolute;
    width: 2px;
    height: 2px;
    pointer-events: none;
}

.celebration-particles .firework .spark {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--c, #ffffff);
    box-shadow: 0 0 10px var(--c, #ffffff);
    transform: translate(0, 0) scale(0.9);
    opacity: 1;
    animation: celebration-firework var(--dur, 1s) ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes celebration-firework {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; filter: blur(0px); }
    70%  { opacity: 1; }
    100% { transform: translate(var(--dx, 0px), var(--dy, -60px)) scale(0.2); opacity: 0; filter: blur(0.8px); }
}

.celebration-banner {
    margin-top: 8vh;
    width: min(92vw, 760px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

.celebration-emoji {
    font-size: 28px;
    line-height: 1;
}

.celebration-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.celebration-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.celebration-sub {
    font-size: 14px;
    opacity: 0.92;
}

.celebration-close-btn {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 22px;
    line-height: 34px;
}

.celebration-close-btn:hover { background: rgba(0, 0, 0, 0.35); }

.celebration-sound-hint {
    position: fixed;
    top: calc(8vh + 92px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.celebration-sound-hint.hidden { display: none; }

.small-muted {
    font-size: 12px;
    color: #777;
}

.danger-btn { background-color: #dc3545 !important; }
.danger-btn:hover { background-color: #c82333 !important; }

@media (max-width: 480px) {
    .celebration-banner {
        width: 96vw;
        border-radius: 18px;
        margin-top: 6vh;
        padding: 12px 12px;
    }
    .celebration-title { font-size: 18px; }
    .celebration-sub { font-size: 13px; }
    .celebration-close-btn { width: 34px; height: 34px; line-height: 32px; }
}


/* ========================================================================== */
/* Invoice Management: Batch Entry - Attention Picker (Per Row) */
/* ========================================================================== */

/* Hide the inline Choices dropdown for the per-row Attention field.
   We use a wider modal picker instead (much easier in a tight table). */
#im-batch-entry-table td.batch-attention-cell .choices {
    display: none !important;
}

#im-batch-entry-table td.batch-attention-cell {
    min-width: 160px;
}

#im-batch-entry-table .batch-attention-btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* +++ Custom Variables +++ */
:root {
    /* IBA Brand Palette */
    --iba-base-blue: #003A5C;      /* Pantone 301C */
    --iba-secondary-teal: #00748C; /* Pantone 3145C */
    --iba-secondary-periwinkle: #5A87D9; /* Pantone 2718C (from RGB) */
    --iba-secondary-terracotta: #C3502F; /* Pantone 7580C */
    --iba-secondary-gold: #B59A00;      /* Pantone 613C (from RGB) */

    /* IBA Tints (for backgrounds/hovers) */
    --iba-base-blue-dark: #002a48;  /* Darker shade for backgrounds */
    --iba-base-blue-light: #004b75; /* Lighter shade for hovers */
    --iba-base-tint-light: #d9e2e8; /* Very light blue for rows */
    --iba-base-tint-hover: #c4d4df; /* Hover for light rows */

    /* Text Colors */
    --text-on-base: #FFFFFF;
    --text-on-light: #333333;

    /* --- Old Variable Mapping --- */
    --invoice-blue: var(--iba-base-tint-light);
    --invoice2-blue: var(--iba-base-blue);
    --text-color-light: var(--text-on-base);
    --text-color-dark: var(--text-on-light);
    --sidebar-width: 300px;

    /* Dashboard Theme Colors */
    --db-bg: var(--iba-base-blue-dark);
    --db-card-bg: var(--iba-base-blue);
    --db-border: var(--iba-secondary-teal);
    --db-text-primary: var(--text-on-base);
    --db-text-secondary: #a8c5d9; /* Lightened tint of base */
    --db-accent-blue: var(--iba-secondary-periwinkle);
    --db-accent-purple: var(--iba-secondary-gold);
}


/* General Body Styles */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; color: var(--text-color-dark); background-color: #f4f7fa; }

/* -------------------------------------------------------------------------- */
/* UI SIMPLIFICATION: HIDE "ADD NEW JOB" ENTRY POINTS IN REPORTING LIST VIEWS */
/* (The WorkDesk sidebar "Add New Job" remains available as the main entry.) */
/* -------------------------------------------------------------------------- */
#wd-reporting .btn-open-standard-modal,
#wd-jobentry .btn-open-standard-modal {
    display: none !important;
}

/* +++ Plain Dark Blue Login Background +++ */
body.login-background {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Slightly richer backdrop for the glass card (desktop login + welcome) */
    background: radial-gradient(circle at 20% 15%, rgba(0, 180, 165, 0.18), rgba(0,0,0,0) 40%),
                radial-gradient(circle at 80% 85%, rgba(255, 193, 7, 0.16), rgba(0,0,0,0) 45%),
                radial-gradient(circle at 90% 20%, rgba(195, 80, 47, 0.14), rgba(0,0,0,0) 35%),
                var(--db-bg); /* Base */
    position: relative;
    overflow: hidden;
}

/* App Container for centered content */
#app-container { width: 100%; max-width: 500px; padding: 20px; box-sizing: border-box; }

/* Card Styling */
.form-container {
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    text-align: center;
}

/* ++ REVERTED: Animated Card Style for Login/Welcome ++ */
.animated-card {
    /* Crystal / glass card (login + welcome screen) */
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 24px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    /* Edge glow (subtle, readable) */
    position: relative;
    overflow: hidden;
}
.animated-card::before{
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 220, 0.85),
        rgba(255, 255, 255, 0.55),
        rgba(255, 200, 0, 0.80),
        rgba(0, 255, 220, 0.85)
    );
    background-size: 300% 100%;
    animation: ibaEdgeFlow 7s linear infinite;
    opacity: 0.55;
    pointer-events: none;

    /* Show as border only */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@keyframes ibaEdgeFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
.animated-card h2, .animated-card p, .animated-card strong {
    color: var(--text-color-light); /* White text for dark background */
}

h2 { margin-top: 0; margin-bottom: 10px; color: #1a1a1a; }
p { margin-bottom: 20px; color: #555; line-height: 1.5; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="month"], input[type="tel"], select, textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; transition: border-color 0.3s; box-sizing: border-box; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--iba-secondary-teal); } /* MODIFIED: Highlight color */
label { display: block; text-align: left; margin-bottom: 5px; font-weight: 600; color: #444; }
button { padding: 10px 20px; background-color: var(--iba-secondary-teal); color: var(--text-color-light); border: none; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; } /* MODIFIED: Button color */
button:hover { background-color: #005a6e; } /* MODIFIED: Darker teal */
.hidden { display: none !important; }
.error-message { color: var(--iba-secondary-terracotta); font-weight: 500; margin-top: 15px; min-height: 20px; } /* MODIFIED: Error color */
.success-message { color: #28a745; font-weight: 500; margin-top: 15px; min-height: 20px; }

/* --- ADD THIS NEW RULE --- */
.version-display {
    font-size: 0.8rem;
    color: #a0aec0; /* Lighter text */
    margin-top: 15px;
    margin-bottom: -10px; /* Pulls content below it up slightly */
    text-align: center;
}
/* --- END OF ADDITION --- */

/* ++ NEW: Style for input hint text ++ */
.input-note {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 15px;
}

/* Main Dashboard Styles */
/* MODIFIED: Changed text color for dark card */
.dashboard-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #4a5568; padding-bottom: 15px; margin-bottom: 30px; }
#user-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
#dashboard-username { font-size: 1.1rem; font-weight: 600; color: var(--text-color-light); } /* White text */
#datetime { font-size: 0.85rem; color: #a0aec0; margin-top: 4px; } /* Lighter text */
#logout-button { background-color: var(--iba-secondary-terracotta); color: var(--text-color-light); width: auto; padding: 8px 16px; font-size: 14px; font-weight: normal; } /* MODIFIED: Logout color */
#logout-button:hover { background-color: #a24227; } /* MODIFIED: Darker terracotta */
.dashboard-main { padding: 10px 0; }
.button-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
/* --- MODIFIED: Themed Circle Buttons --- */
.circle-button {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--iba-secondary-teal), var(--iba-base-blue)); /* MODIFIED: Gradient */
    color: var(--text-color-light);
    border: 4px solid var(--text-color-light);
    box-shadow: 0 5px 15px rgba(0, 116, 140, 0.4); /* MODIFIED: Teal shadow */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box; /* To keep buttons in one line */
}
.circle-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 116, 140, 0.5); background: linear-gradient(145deg, #008a9f, var(--iba-base-blue-light)); } /* MODIFIED: Hover gradient */

/* --- WORKDESK STYLES --- */
#workdesk-view, #invoice-management-view { display: flex; width: 100vw; height: 100vh; overflow: hidden; }
.workdesk-sidebar { width: 260px; background-color: var(--iba-base-blue); color: var(--text-color-light); display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; transition: width 0.3s ease; z-index: 10; } /* MODIFIED: Sidebar color */
.wd-user-profile { text-align: center; padding-bottom: 20px; }
.wd-user-avatar { width: 80px; height: 80px; border-radius: 50%; background-color: var(--iba-base-blue-light); display: flex; justify-content: center; align-items: center; margin: 0 auto 15px; font-size: 40px; color: var(--iba-secondary-periwinkle); } /* MODIFIED: Avatar colors */
#wd-username, #im-username { margin: 0 0 5px 0; font-size: 1.1rem; }
#wd-user-identifier, #im-user-identifier { margin: 0; font-size: 0.8rem; color: #b0b0b0; }
.wd-back-button { display: flex; align-items: center; gap: 15px; padding: 12px 15px; margin-top: 15px; border-top: 1px solid var(--iba-base-blue-light); text-decoration: none; background-color: var(--iba-base-blue-dark); color: var(--text-color-light); border-radius: 6px; font-weight: 600; transition: background-color 0.3s; } /* MODIFIED: Back button colors */
.wd-back-button:hover { background-color: var(--iba-base-blue-light); } /* MODIFIED: Hover color */
.workdesk-navigation { flex-grow: 1; margin-top: 20px; }
.workdesk-navigation ul, .workdesk-footer-nav ul { list-style: none; padding: 0; margin: 0; }
.workdesk-navigation a, .workdesk-footer-nav a { display: flex; align-items: center; gap: 15px; padding: 12px 15px; margin-bottom: 8px; text-decoration: none; color: #c0c0c0; border-radius: 6px; transition: background-color 0.3s, color 0.3s; }
.workdesk-navigation a:hover, .workdesk-footer-nav a:hover { background-color: var(--iba-base-blue-light); color: var(--text-color-light); } /* MODIFIED: Hover color */
.workdesk-navigation a.active { background-color: var(--iba-secondary-teal); color: var(--text-color-light); font-weight: 600; } /* MODIFIED: Active link color */
.workdesk-navigation a i, .workdesk-footer-nav a i { width: 20px; text-align: center; }
.workdesk-main { flex-grow: 1; background-color: #f4f7fa; padding: 25px 40px; overflow-y: auto; box-sizing: border-box; }

/* ++ MODIFIED (Req 1): Adjust main content when sidebar is present ++ */
.workdesk-main.with-sidebar {
    /* Make room for the sidebar */
    margin-right: var(--sidebar-width);
    transition: margin-right 0.3s ease;
}

#workdesk-datetime, #im-datetime { font-size: 0.9rem; color: #555; font-weight: 500; text-align: right; margin-bottom: 15px; }
.workdesk-section { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }

.workdesk-section h2 { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; }


/* ++ NEW: Table Count Display ++ */
.table-count-display {
    font-size: 1rem;
    font-weight: 500;
    color: #555;
    margin-left: 10px;
}
h2 .table-count-display { /* For Invoice Entry */
    font-size: 0.9em;
    font-weight: 500;
    color: #555;
    margin-left: 8px;
}

/* ** UPDATED Form & Input Styles ** */
.jobentry-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.form-column { display: flex; flex-direction: column; }
.form-column .form-group { margin-bottom: 20px; }
.form-buttons-container { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
.form-buttons-container button, .form-buttons-container a { width: auto; min-width: 100px; padding: 10px 15px; }
.secondary-btn { background-color: #6c757d; }
.secondary-btn:hover { background-color: #5a6268; }
input.highlight-field { border-color: var(--iba-secondary-gold); box-shadow: 0 0 0 0.2rem rgba(181, 154, 0, 0.25); } /* MODIFIED: Highlight color */
.choices { margin-bottom: 0; }
.choices__inner { font-size: 16px; border-radius: 4px; border: 1px solid #ccc; padding: 6px 7.5px; min-height: 45px; }
.choices.is-focused .choices__inner { border-color: var(--iba-secondary-teal); } /* MODIFIED: Highlight color */
.choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--iba-secondary-teal); } /* MODIFIED: Highlight color */

/* ++ Vacation Style for Choices.js ++ */
.choices__item[data-label*="(On Vacation)"] {
    color: #888;
    font-style: italic;
}
.choices__item[data-label*="(On Vacation)"]::after {
    content: "🏖️";
    margin-left: 8px;
}


/* Dividers & Search Bars */
.section-divider { border: none; border-top: 1px solid #e0e0e0; margin: 40px 0; }
.search-bar-local { position: relative; width: 100%; margin-bottom: 20px; }
.search-bar-local input { width: 100%; padding: 12px 12px 12px 40px; border-radius: 6px; border: 1px solid #ddd; font-size: 15px; }
.search-bar-local i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; }

/* ++ NEW: Invoice Entry PO Search Container ++ */
#im-po-search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    max-width: 500px;
}
#im-po-search-container .search-bar-local {
    margin-bottom: 0;
    flex-grow: 1; /* Allows input to take available space */
}
#im-po-search-container button {
    flex-shrink: 0; /* Prevents button from shrinking */
}

/* ++ NEW (Req 1): Style for Bottom PO Search Container ++ */
#im-po-search-container-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px; /* Add space above */
    padding-top: 20px; /* Add padding above */
    border-top: 1px solid #eee; /* Add separator line */
    /* max-width: 500px; */ /* REMOVED max-width to allow buttons to spread */
}
#im-po-search-container-bottom .search-bar-local {
    margin-bottom: 0;
    flex-grow: 1;
    max-width: 300px; /* Limit input width */
}
#im-po-search-container-bottom button {
    flex-shrink: 0;
}

/* ++ FIX: Add spacing to buttons within the bottom search container ++ */
#im-po-search-container-bottom .form-buttons-container {
    display: flex; /* Ensure buttons align horizontally */
    gap: 10px;    /* Add the same gap as the parent container */
    margin-left: 10px; /* Optional: Add space between Search PO btn and Add Invoice btn */
    /* Remove inherited styles if they cause issues */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    justify-content: flex-end; /* Align buttons to the right */
    flex-grow: 1; /* Allow button container to take remaining space */
}

/* Table Styles */
.table-wrapper { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 15px; border-bottom: 1px solid #e0e0e0; text-align: left; vertical-align: middle;} /* ++ Added vertical-align ++ */
thead th { background-color: #f8f9fa; font-weight: 600; color: var(--text-color-dark); }
tbody tr:hover { background-color: #f1f1f1; }
.respond-btn { background-color: #28a745; color: var(--text-color-light); padding: 5px 10px; font-size: 13px; font-weight: normal; }
.respond-btn:hover { background-color: #218838; }
.delete-btn {
    background-color: var(--iba-secondary-terracotta); /* MODIFIED: Delete color */
    padding: 5px 10px;
    font-size: 13px;
}
.delete-btn:hover {
    background-color: #a24227; /* MODIFIED: Darker terracotta */
}
.download-btn {
    background-color: #1e7e34;
}
.download-btn:hover {
    background-color: #155d27;
}
.download-btn i {
    margin-right: 8px;
}

/* Download button color variants (used in Invoice Mgmt → Invoice Records reporting header) */
.download-btn--periwinkle { background-color: var(--iba-secondary-periwinkle); }
.download-btn--periwinkle:hover { background-color: #3f6fc8; }

.download-btn--gold { background-color: var(--iba-secondary-gold); color: #212529; }
.download-btn--gold:hover { background-color: #9a8100; }

.download-btn--teal { background-color: var(--iba-secondary-teal); }
.download-btn--teal:hover { background-color: #005a6e; }
/* New style for clickable rows */
.clickable-pdf {
    cursor: pointer;
}

/* WORKDESK DASHBOARD STYLES */
.dashboard-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.summary-card { display: flex; align-items: center; background-color: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 5px solid var(--iba-secondary-teal); } /* MODIFIED: Border color */
.card-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-color-light); font-size: 24px; margin-right: 15px; }
.card-details { text-align: left; }
.card-value { font-size: 2rem; font-weight: bold; color: var(--text-color-dark); display: block; }
.card-label { font-size: 0.9rem; color: #555; }

/* MODIFIED: PO Details Container (Pink Theme) */
.im-po-details-container {
    background-color: #fff0f5; /* Light Fuschia/Lavender Blush */
    padding: 15px 20px;
    border: 1px solid #f8bbd0; /* Soft Pink Border */
    border-radius: 8px;
    margin-bottom: 20px;

    /* Matching Font Color */
    color: #880e4f; /* Deep Fuschia/Burgundy for readability */
    font-weight: 500;
}

/* Optional: Make the labels (PO No:, Site:) slightly darker/bolder */
.im-po-details-container strong {
    color: #4a0d28; /* Darker Burgundy */
    font-weight: 700;
}

.im-po-details-container h2 { display: none; }
.po-details-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 15px 40px;
}
.po-details-grid p {
    margin: 0;
    font-size: 0.95rem;
}

/* REPORTING STYLES */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}
.report-header h1 {
    margin: 0;
}
.daily-report-section {
    display: flex;
    align-items: center;
    gap: 10px;
}
.daily-report-section input[type="date"] {
    margin-bottom: 0;
    padding: 7px;
    width: auto;
    border-radius: 4px;
}
.daily-report-section .download-btn {
    padding: 8px 15px;
    font-weight: normal;
    font-size: 14px;
}

.report-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}


/* --- TAB STYLE (Workdesk + Inventory) --- */
.report-tabs{
    /* Default colors (can be overridden per button using --tab-color/--tab-text) */
    --tab-color-default: #d7dbe0;
    --tab-active-default: var(--iba-secondary-teal);

    display: flex;
    align-items: flex-end;
    gap: 0 !important; /* compact segmented tabs */
    padding: 8px 10px 10px !important;
    border-bottom: 2px solid #dfe3e8 !important;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    /* Hide Scrollbar (Clean Look) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* Hide Scrollbar for Chrome, Safari, Opera */
.report-tabs::-webkit-scrollbar { display: none; }

.report-tabs button{
    flex: 0 0 auto;
    position: relative;

    border: 1px solid rgba(0,0,0,0.10) !important;
    cursor: pointer;

    /* Extra left padding to clear the angled corner */
    padding: 10px 26px 9px 34px;
    margin: 0 0 -2px 0; /* sit on the bottom border (tab look) */
    border-radius: 10px 10px 0 0;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    color: var(--tab-text, #1f2937) !important;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.35)),
        var(--tab-color, var(--tab-color-default)) !important;

    /* Folder-tab edge */
    clip-path: polygon(0 100%, 0 28%, 18px 0, 100% 0, 100% 100%);

    box-shadow: 0 6px 14px rgba(0,0,0,0.12);

    z-index: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.report-tabs button:not(:first-child){
    margin-left: -10px; /* slight overlap */
    padding-left: 44px; /* keep text centered after overlap */
}

.report-tabs button:hover{
    z-index: 2;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.16);
    filter: brightness(1.01);
}

.report-tabs button.active{
    z-index: 3;
    transform: translateY(-2px);

    color: var(--tab-text, #ffffff) !important;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.30), rgba(0,0,0,0.08)),
        var(--tab-color, var(--tab-active-default)) !important;

    box-shadow: 0 14px 26px rgba(0,0,0,0.18);
}

.report-tabs button:disabled{
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

/* Make secondary text inside active tabs readable (e.g., [code] labels) */
.report-tabs button.active span:not(.notification-badge){
    color: rgba(255,255,255,0.92) !important;
}

/* Attention effect used on Active Task tabs */
@keyframes reportTabPulse {
    0%   { box-shadow: 0 14px 26px rgba(0,0,0,0.18); }
    50%  { box-shadow: 0 18px 34px rgba(0,0,0,0.24); }
    100% { box-shadow: 0 14px 26px rgba(0,0,0,0.18); }
}
.report-tabs button.blink-tab{
    animation: reportTabPulse 1.25s ease-in-out infinite;
}

@media (max-width: 480px) {
    .report-tabs{
        padding: 6px 8px 8px !important;
    }
    .report-tabs button{
        padding: 9px 18px 8px 28px;
        margin-bottom: -2px;
        font-size: 13px;
        clip-path: polygon(0 100%, 0 30%, 14px 0, 100% 0, 100% 100%);
    }
    .report-tabs button:not(:first-child){
        margin-left: -8px;
        padding-left: 36px;
    }
}

    .report-tabs button{
        padding: 9px 18px;
        margin-bottom: -16px;
        font-size: 13px;
    }
    .report-tabs button:not(:first-child){
        margin-left: -14px;
        padding-left: 32px;
    }
}
.print-btn { background-color: #17a2b8; padding: 8px 15px; }
.print-btn:hover { background-color: #138496; }
.print-btn i { margin-right: 8px; }

/* Legend for Reporting Table */
.reporting-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    font-size: 0.85rem;
}
.reporting-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reporting-legend .legend-color {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
}


/* ++ Invoice Reporting Form Layout ++ */
.search-and-filter-group, .report-buttons-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.search-and-filter-group { flex-grow: 1; }
.report-buttons-group { flex-shrink: 0; }
.search-and-filter-group .search-bar-local {
    margin-bottom: 0;
    min-width: 250px;
    flex-grow: 1;
}
.search-and-filter-group select, .search-and-filter-group input[type="date"], .search-and-filter-group input[type="month"] {
    margin-bottom: 0; /* Override default margin */
    padding: 11px;
}

/* Style for disabled navigation links */
.workdesk-navigation a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.workdesk-navigation a.disabled:hover {
    background-color: transparent;
    color: #c0c0c0;
}

/* --- INVOICE REPORT STYLES --- */
#im-reporting-content table thead th {
    background-color: var(--iba-base-blue); /* MODIFIED: Header color */
    color: var(--text-color-light);
}
.master-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.master-row:hover {
    background-color: #f5f5ff;
}
.master-row td {
    font-weight: 500;
}

/* New Highlighting Rules */
.master-row.highlight-partial {
    background-color: #d9eef2 !important; /* MODIFIED: Light Teal */
}
.master-row.highlight-partial:hover {
    background-color: #bfe5eb !important;
}
.master-row.highlight-fully-paid {
    background-color: #f7f3d9 !important; /* MODIFIED: Light Gold */
}
.master-row.highlight-fully-paid:hover {
    background-color: #f2ecc2 !important;
}

.expand-btn {
    width: 25px;
    height: 25px;
    background-color: var(--iba-base-blue); /* MODIFIED: Button color */
    color: var(--text-color-light);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}
.expand-btn:hover {
    background-color: var(--iba-base-blue-light); /* MODIFIED: Hover color */
}
.detail-row td {
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e0e0e0;
}
.detail-content {
    padding: 20px;
    background-color: #fdfdfd;
}
.detail-content h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--iba-base-blue); /* MODIFIED: Title color */
}
.nested-invoice-table {
    width: 100%;
    border: 1px solid #e0e0e0;
}
.nested-invoice-table thead th {
    background-color: #555;
    font-size: 0.9em;
}
.nested-invoice-table td {
    padding: 8px 15px;
}
.nested-invoice-table tfoot td {
    font-weight: 600;
    background-color: #ffffe0;
    font-size: 0.9em;
}
.nested-invoice-table td, .nested-invoice-table th {
    border-right: 1px solid #e0e0e0;
}
.nested-invoice-table td:last-child, .nested-invoice-table th:last-child {
    border-right: 0;
}

/* ++ NEW (Req 1): Nested invoice row click style ++ */
.nested-invoice-row {
    cursor: pointer;
}
.nested-invoice-row:hover {
    background-color: var(--iba-base-tint-light) !important; /* MODIFIED: Hover color */
}


/* New Action Button Styles */
.action-btn-group {
    display: flex;
    gap: 5px;
}
.action-btn {
    padding: 4px 8px;
    font-size: 12px;
    text-decoration: none;
    color: var(--text-color-light);
    border-radius: 4px;
    display: inline-block;
    text-align: center;
}
.invoice-pdf-btn { background-color: var(--iba-secondary-gold); color: #212529; } /* MODIFIED: Button color */
.srv-pdf-btn { background-color: var(--iba-secondary-teal); } /* MODIFIED: Button color */
.invoice-pdf-btn:hover { background-color: #9a8100; } /* MODIFIED: Hover color */
.srv-pdf-btn:hover { background-color: #005a6e; } /* MODIFIED: Hover color */

/* ++ Settings Page Styles ++ */
#settings-form input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.7;
}
.checkbox-group {
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0 10px 0 0;
    height: 18px;
    width: 18px;
}
.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}

/* ========================================= */
/* INVOICE MANAGEMENT DASHBOARD (FIXED ALIGNMENT) */
/* ========================================= */

/* 1. Dashboard Background */
#im-dashboard {
    background-color: transparent !important;
}

/* 2. Main Title */
#im-dashboard h1 {
    color: #003A5C !important;
    border-bottom: 1px solid #e0e0e0;
}

/* 3. Grid Layout */
.im-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Increased gap for better spacing */
}

/* 4. Chart Cards (Base Dark Style) */
.im-chart-card {
    background-color: #003A5C !important;
    color: #ffffff !important;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0, 58, 92, 0.2);
    border: none !important;
    display: flex;
    flex-direction: column;
}

/* 5. Headers */
.im-chart-card h2 {
    color: #ffffff !important;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2rem;
    padding-bottom: 10px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- CARD THEMES (Same as before) --- */
.im-chart-card:nth-child(1) h2 { border-bottom-color: #d81b60 !important; }
.im-chart-card:nth-child(1) .top5-value { color: #d81b60 !important; background-color: #ffffff !important; }

.im-chart-card:nth-child(2) h2 { border-bottom-color: #ffc107 !important; }
.im-chart-card:nth-child(2) .top5-value { color: #ffc107 !important; background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid #ffc107; }

.im-chart-card:nth-child(3) h2 { border-bottom-color: #28a745 !important; }
.im-chart-card:nth-child(3) .top5-value { color: #28a745 !important; background-color: #ffffff !important; }

/* Yearly Overview Card */
.im-chart-card.full-width-card { grid-column: 1 / -1; }
.im-chart-card:nth-child(4) h2 { border-bottom-color: #5A87D9 !important; }

/* 6. FIXED LIST ALIGNMENT (The Fix) */
.dashboard-top5-list {
    list-style: none !important; /* Remove bullets */
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.dashboard-top5-list li {
    display: flex !important;
    justify-content: space-between !important; /* Push Name Left, Value Right */
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    width: 100%;
}

.dashboard-top5-list li:last-child {
    border-bottom: none !important;
}

/* 7. Names & Values */
.dashboard-top5-list .top5-name {
    color: #ffffff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
    text-align: left;
}

.dashboard-top5-list .top5-value {
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent value from squishing */
}

/* 8. Controls (Fixed Width for Year Dropdown) */
.dashboard-chart-header select {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    /* THE FIX: Prevent stretching */
    width: auto !important;
    min-width: 100px !important; /* Just wide enough for the year */
    flex-grow: 0 !important;

    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 0;
    cursor: pointer;
}

/* Style the dropdown options to match dark theme */
.dashboard-chart-header select option {
    background-color: #003A5C;
    color: white;
}

/* 9. FIXED CHART HEIGHT (The Fix) */
.im-chart-container-full {
    height: 450px !important; /* Increased from 350px */
    width: 100% !important;
    position: relative;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .im-dashboard-grid {
        grid-template-columns: 1fr;
    }
}


/* --- BATCH INVOICE ENTRY TABLE STYLES --- */
#im-batch-entry-table {
    table-layout: auto; /* Allow table to adjust */
}
#im-batch-entry-table .batch-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 14px;
    margin-bottom: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 120px; /* Ensure inputs are not too small */
}
#im-batch-entry-table .batch-remove-btn {
    padding: 4px 8px;
    font-size: 1.2rem;
    line-height: 1;
}

/* ++ NEW (Req 4): Batch Note Search Styles ++ */
.batch-note-search-wrapper {
    min-width: 250px; /* Give dropdown some space */
    flex-grow: 1; /* Allow it to grow */
}
#im-batch-note-search-select {
    width: 100%; /* Make select fill the wrapper */
}
#im-batch-note-search-select + .choices { /* Target Choices.js container */
    margin-bottom: 0;
}
#im-batch-note-search-select + .choices .choices__inner {
    padding: 11px; /* Match other inputs */
    min-height: 46px; /* Match padding */
}


/* --- SUMMARY NOTE SCREEN STYLES --- */
#summary-note-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
#summary-note-controls .form-group {
    flex: 1;
    min-width: 250px;
}
#summary-note-controls label {
    font-size: 0.9rem;
}
#summary-note-controls input, #summary-note-controls select {
    margin-bottom: 0;
}

/* On-screen appearance of the preview box */
#summary-note-printable-area {
    border: 1px solid #ccc;
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
}

/* Hide print-only header ON SCREEN (This is safe to keep here) */
.sn-print-header { display: none; }

/* MODIFIED: Summary For Vendor Styling (On Screen) */
#summary-note-printable-area .sn-vendor-summary-title {
    margin: 0 0 15px 0;
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: var(--iba-base-blue);
    color: var(--text-color-light);
    border-radius: 5px;
}
#summary-note-printable-area .sn-vendor-summary-title p {
    margin: 0;
    color: inherit;
}
#summary-note-printable-area .sn-vendor-info {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.sn-payment-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    font-size: 1rem;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    margin-bottom: 20px;
}
.sn-payment-details div {
    flex: 1;
    padding-left: 10px;
}
.sn-payment-details div:first-child {
    padding-left: 0;
}

/* Table Styling (On Screen) */
.sn-table {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
}
.sn-table th, .sn-table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: left;
    font-size: 0.9rem;
}
.sn-table thead th {
    font-weight: bold;
    background-color: var(--iba-base-blue);
    color: var(--text-color-light);
}
.sn-table input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 3px;
    font-family: inherit;
    font-size: inherit;
}

.sn-footer{
  display: grid;
  grid-template-columns: 200px 1fr 170px;
  margin-top: 12px;
  font-weight: bold;
  align-items: stretch;            /* important */
}

.sn-footer > *{
  padding: 8px 12px;
  border-right: 2px solid #000;    /* divider */
  display: block;                  /* make it a full-height block */
  height: 100%;                    /* ensure it stretches */
  box-sizing: border-box;
}

.sn-footer > *:last-child{
  border-right: none;
  text-align: right;
  white-space: nowrap;
}

.sn-footer > *:nth-child(2){
  line-height: 1.35;
  word-break: break-word;
}


/* Hide print-only notes ON SCREEN */
.sn-print-notes-section {
    display: none;
}

.sn-signatures {
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
}
.sn-signatures div {
    flex: 1;
    text-align: center;
    border-top: 1px solid #000;
    padding-top: 10px;
    margin: 0 20px;
    max-width: 200px;
}


/* ++ NEW: MODAL STYLES ++ */
.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    /* Frosted background */
    background: rgba(10, 20, 30, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2000;
}

.modal-container {
    position: relative;
    overflow: hidden;

    /* Glass / crystal look */
    background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.38)) !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);

    padding: 22px;
    border-radius: 24px;
    width: 92%;
    max-width: 520px;

    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    color: #0f172a;
}

/* Subtle running edge glow for modals (same family as login/welcome) */
.modal-container::after{
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(0, 180, 165, 0.70),
        rgba(255, 255, 255, 0.40),
        rgba(255, 193, 7, 0.65),
        rgba(0, 180, 165, 0.70)
    );
    background-size: 300% 100%;
    animation: ibaEdgeFlow 10s linear infinite;
    opacity: 0.28;
    pointer-events: none;

    /* Show as border only */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Subtle crystal highlight */
.modal-container::before{
    content: "";
    position: absolute;
    /* Keep the highlight INSIDE the modal so it never renders as a
       "floating rectangle" even when a modal overrides overflow. */
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.45), rgba(255,255,255,0) 60%);
    transform: rotate(12deg);
    pointer-events: none;
}

.modal-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.18) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/* Force uniform glass header/footer even if some modals used inline backgrounds */
.modal-overlay .modal-container .modal-header,
.modal-overlay .modal-container .modal-footer {
    background: rgba(255,255,255,0.22) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}
.modal-overlay .modal-container .modal-content {
    background: transparent !important;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: inherit;
}
.modal-close-btn {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 12px;
    font-size: 1.4rem;
    cursor: pointer;
    color: rgba(15, 23, 42, 0.8);
    padding: 4px 12px;
    line-height: 1;
}
.modal-close-btn:hover{
    background: rgba(255,255,255,0.28);
}

.modal-content,
.modal-footer{
    position: relative; /* sit above the highlight */
}

.modal-footer {
    background: rgba(255,255,255,0.18) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    padding-top: 12px;
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Prevent inline "white" panels from killing the glass look */
.modal-overlay .modal-content {
    background: transparent !important;
}

/* ======================================================== */
/* Batch Entry Attention Picker: allow dropdown to expand     */
/* (Choices dropdown was getting clipped to 1 row)           */
/* ======================================================== */
#im-attention-picker-modal .modal-container {
    /* Let Choices dropdown escape the modal box */
    overflow: visible !important;
}

#im-attention-picker-modal .modal-container::before {
    /* Keep highlight clean even with overflow visible */
    transform: none !important;
    clip-path: inset(0 round 24px);
}

#im-attention-picker-modal .choices__list--dropdown {
    max-height: 260px !important;
    overflow-y: auto !important;
    z-index: 5000 !important;
}


/* ======================================================== */
/* SIMPLE .modal OVERLAY (used by Invoice Print Preview)     */
/* Keeps existing modal-overlay logic untouched              */
/* ======================================================== */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.modal.hidden {
    display: none !important;
}
.modal > .modal-content {
    position: relative;
    overflow: hidden;
    /* Match the main glass system used by .modal-container */
    background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.38));
    border: 1px solid rgba(255,255,255,0.55);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}

/* ++ NEW: Batch Global Controls ++ */
#im-batch-global-controls.search-and-filter-group {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    align-items: flex-end; /* Align items to bottom for label alignment */
}
#im-batch-global-controls .form-group {
    flex: 1;
    min-width: 200px;
    margin: 0;
}
#im-batch-global-controls .form-group:nth-child(2) { /* Status dropdown */
    min-width: 150px;
}
#im-batch-global-controls .form-group label {
    font-size: 0.9rem;
    margin-bottom: 3px;
}
/* Override default batch-input and select paddings for this section */
#im-batch-global-controls .batch-input,
#im-batch-global-controls select,
#im-batch-global-controls .choices__inner {
    padding: 11px;
    width: 100%;
    margin-bottom: 0;
}
#im-batch-global-controls .choices__inner {
    min-height: 46px; /* Match padding */
}

/* ++ NEW: Payment Section Styles ++ */
#im-payments-table .payment-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 14px;
    margin-bottom: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 120px;
}
#im-payments-table .payment-remove-btn {
    padding: 4px 8px;
    font-size: 1.2rem;
    line-height: 1;
}
#im-add-payment-button i {
    margin-right: 8px;
}
#im-save-payments-button i {
    margin-right: 8px;
}

/* ++ NEW: Finance Report Section Styles ++ */
#im-finance-results table { margin-bottom: 0; }
#im-finance-results table th { white-space: nowrap; }
#im-finance-results tbody tr td { vertical-align: middle; }

/* Styles from finance report styles.css, adapted */
#im-finance-results .po-summary-table { width: 100%; margin-bottom: 0; border-collapse: collapse; }
#im-finance-results .po-summary-table th, #im-finance-results .po-summary-table td { padding: 0.9rem 1rem; vertical-align: middle; }
#im-finance-results .po-summary-table thead th { background-color: var(--iba-base-blue); color: var(--text-color-light); font-weight: 600; text-align: left; border: none; font-size: 0.9rem; letter-spacing: 0.5px; } /* MODIFIED: Header color */
#im-finance-results .po-summary-table tbody td { background-color: #f8f9fa; border: 1px solid #dee2e6; border-top: none; font-size: 1rem; }
#im-finance-results .payment-details-wrapper { padding: 1rem 1.5rem; border: 1px solid #dee2e6; border-top: none; background-color: #fff; margin-bottom: 1.5rem; }
#im-finance-results .payment-details-header { font-weight: bold; margin-bottom: 0.75rem; font-size: 1.1rem; color: #343a40; }
#im-finance-results .payment-details-table { width: 100%; border-collapse: collapse; }
#im-finance-results .payment-details-table th { text-align: left; background-color: #e9ecef; color: #495057; padding: 0.75rem; border: 1px solid #dee2e6; font-size: 0.85rem; white-space: nowrap; }
#im-finance-results .payment-details-table td { padding: 0.75rem; border: 1px solid #dee2e6; vertical-align: middle; }
#im-finance-results .payment-details-table tbody tr:nth-of-type(odd) { background-color: #f8f9fa; }
#im-finance-results .payment-details-table td:nth-child(4), /* Cert Amount */
#im-finance-results .payment-details-table td:nth-child(5), /* Retention */
#im-finance-results .payment-details-table td:nth-child(6) { /* Payment */
    text-align: right; font-family: monospace;
}
/* ++ NEW: Finance Report TFOOT ++ */
#im-finance-results .payment-details-table tfoot td {
    font-weight: bold;
    background-color: #e0e0e0;
    text-align: right;
    font-family: monospace;
}
#im-finance-results .payment-details-table tfoot td:first-child {
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ++ END TFOOT ++ */
#im-finance-results .btn-info { /* Report button */
    background-color: var(--iba-secondary-teal); border-color: var(--iba-secondary-teal); color: var(--text-color-light); /* MODIFIED: Button color */
}
#im-finance-results .btn-info:hover {
    background-color: #005a6e; border-color: #005a6e; color: var(--text-color-light); /* MODIFIED: Hover color */
}
/* Enhanced Report Modal Styles (copied and prefixed where necessary) */
/* Keep the non-print styles for the modal as they were */
#im-finance-report-modal .report-header {
    border-bottom: 2px solid #000;
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: center; /* <<< ADDED THIS */
}
#im-finance-report-modal .report-header h3 { font-size: 24px; margin-bottom: 5px; font-weight: bold; }
#im-finance-report-modal .report-header h4 { font-size: 18px; margin: 10px 0; }
#im-finance-report-modal .report-details { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; }
#im-finance-report-modal .report-details-col { width: 48%; }
#im-finance-report-modal .report-details p, #im-finance-report-modal .report-summary p { margin-bottom: 8px; font-size: 14px; line-height: 1.4; }
#im-finance-report-modal .report-summary { background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 25px; border: 1px solid #dee2e6; display: flex; justify-content: space-between; }
#im-finance-report-modal .report-summary-col { width: 48%; }
#im-finance-report-modal .report-summary p { font-weight: bold; display: flex; justify-content: space-between; }
#im-finance-report-modal .report-summary p span { font-weight: normal; text-align: right; min-width: 150px; display: inline-block; }
#im-finance-report-modal table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
#im-finance-report-modal table th, #im-finance-report-modal table td { padding: 12px 10px; border: 1px solid #dee2e6; }
#im-finance-report-modal table thead th { background-color: var(--iba-base-blue-dark); color: var(--text-color-light); font-weight: bold; font-size: 14px; text-align: center; } /* MODIFIED: Header color */
#im-finance-report-modal table tfoot th { background-color: #e9ecef; color: #000; font-weight: bold; font-size: 15px; text-align: right; padding-right: 20px; }
#im-finance-report-modal table tfoot td { font-weight: bold; text-align: right; padding-right: 20px; font-size: 15px; }
#im-finance-report-modal .signatures { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 20px; }
#im-finance-report-modal .signature-box { text-align: center; width: 30%; }
#im-finance-report-modal .signature-line { border-top: 1px solid #000; margin-top: 40px; padding-top: 10px; display: inline-block; width: 80%; }
#im-finance-report-modal #im-reportTableBody td:nth-child(3), /* Cert Amount */
#im-finance-report-modal #im-reportTableBody td:nth-child(4), /* Retention */
#im-finance-report-modal #im-reportTableBody td:nth-child(5) { /* Payment */
    text-align: right; font-family: monospace; padding-right: 20px !important;
}
#im-finance-report-modal #im-reportTotalCertifiedAmount,
#im-finance-report-modal #im-reportTotalRetentionAmount,
#im-finance-report-modal #im-reportTotalPaymentAmount {
    text-align: right; font-family: monospace; font-weight: bold; font-size: 15px; padding-right: 20px !important;
}
#im-finance-report-modal #im-reportNotesSection { margin-top: 40px !important; }
#im-finance-report-modal #im-reportNotesSection h5 { font-weight: bold; margin-bottom: 10px !important; }
#im-finance-report-modal #im-reportNotesContent { white-space: pre-wrap !important; font-size: 12pt !important; padding: 10px !important; border: 1px solid #ddd !important; background: #f9f9f9 !important; min-height: 50px !important; }

/* ++ NEW (Req 1): Active Jobs Sidebar (Compact Style) ++ */
#im-show-active-jobs-btn {
    display: none; /* Hidden on desktop */
    float: right;
    padding: 6px 12px;
    font-size: 14px;
    margin-left: 10px;
}

.im-entry-sidebar {
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    background-color: var(--iba-base-blue); /* Keep your blue background */
    color: var(--text-color-light);
    border-left: 1px solid var(--iba-base-blue-light);
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 15px; /* Reduced padding slightly */
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.im-sidebar-header h3 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.1rem;
    text-align: center;
    color: white;
}

/* --- NEW: Sidebar List Container --- */
.im-sidebar-list, #im-entry-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
    /* Custom Scrollbar for the list */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

/* --- NEW: COMPACT CARD STYLE --- */
.im-sidebar-item {
    background-color: white; /* White card for contrast */
    padding: 8px 12px !important; /* Tight padding */
    margin-bottom: 8px !important;
    border-radius: 6px !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.im-sidebar-item:hover {
    background-color: #f0f8ff; /* Light blue on hover */
    transform: translateX(-3px); /* Slide effect */
}

/* Compact Text Styles */
.im-compact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.2;
    margin-bottom: 4px; /* Space between rows */
}

.im-compact-po {
    font-weight: 700;
    font-size: 0.9rem;
    color: #333; /* Dark text on white card */
}

.im-compact-amount {
    font-size: 0.85rem;
    color: #00748C; /* IBA Blue for money */
    font-weight: 700;
}

.im-compact-vendor {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.im-compact-status {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #eee;
    color: #555;
    font-weight: 600;
}

/* Green status for approved items */
.im-sidebar-item.status-approved .im-compact-status {
    background: #d4edda;
    color: #155724;
}

/* Green left border for approved items */
.im-sidebar-item.status-approved {
    border-left: 4px solid #28a745;
}

/* --- NEW: Search Input Style --- */
#im-sidebar-search {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}
#im-sidebar-search::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
#im-sidebar-search:focus {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
}

.im-sidebar-no-jobs {
    color: rgba(255,255,255,0.7);
    text-align: center;
    padding-top: 20px;
    font-style: italic;
}

/* =================================== */
/* FINAL CLEANED PRINT STYLES - V4     */
/* =================================== */
@media print {

    /* 1. GLOBAL PAGE RESET */
    /* We remove specific size here to allow switching between Portrait/Landscape */
    @page {
        margin: 0;
    }

    /* 2. DOCUMENT ROOT CONTROL (Kills Blank Page 2 on Summary Note) */
    html, body {
        width: 100% !important;
        height: 99% !important; /* Force height to be just under 100% to prevent spillover */
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important; /* Clip invisible content */
        background: white !important;
    }

    /* 3. HIDE EVERYTHING BY DEFAULT */
    body * {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    /* ============================================= */
    /* SECTION A: SUMMARY NOTE (PORTRAIT)            */
    /* ============================================= */

    /* Visibility Reset */
    #summary-note-printable-area:not(.hidden),
    #summary-note-printable-area:not(.hidden) * {
        visibility: visible !important;
        height: auto; /* Restore natural height */
        overflow: visible;
    }

    /* Main Container Layout */
    #summary-note-printable-area:not(.hidden) {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;

        /* Width logic: 96% allows 2% margin on each side to prevent cutoff */
        width: 96% !important;
        max-width: 96% !important;
        margin: 0 auto !important; /* Centers it */
        right: 0 !important;

        /* Padding for the content */
        padding-top: 10mm !important;
        padding-bottom: 0 !important;

        border: none !important;
        box-shadow: none !important;
        background: white !important;

        display: block !important;
        z-index: 9999 !important;

        /* Prevent page break immediately after */
        page-break-after: avoid !important;
    }

    /* Header Layout */
    #summary-note-printable-area:not(.hidden) .sn-print-header {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px !important;
        padding-bottom: 5px !important;
    }
    #summary-note-printable-area:not(.hidden) .sn-print-company {
        text-align: left;
    }
    #summary-note-printable-area:not(.hidden) .sn-print-company h2 {
        margin: 0 0 5px 0 !important;
        font-size: 12pt !important;
        font-weight: bold;
        line-height: 1.1;
    }
    #summary-note-printable-area:not(.hidden) .sn-print-title {
        text-align: right;
    }
    #summary-note-printable-area:not(.hidden) .sn-print-title h1 {
        margin: 0 0 5px 0 !important;
        font-size: 16pt !important;
        font-weight: bold;
    }
    #summary-note-printable-area:not(.hidden) .sn-print-title p {
        margin: 0 !important;
        font-size: 10pt !important;
    }

    /* QR Code Specifics */
    #summary-note-printable-area:not(.hidden) .sn-qr-container {
        display: block !important;
        margin-top: 5px !important;
        height: auto !important;
        visibility: visible !important;
    }

    #summary-note-printable-area:not(.hidden) #sn-prev-summary-qr {
        /* QR Code container size */
        width: 60px !important;
        height: 60px !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Make the actual image inside the QR div visible */
    #summary-note-printable-area:not(.hidden) #sn-prev-summary-qr img {
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
    }
    /* ---------------------------------------------------- */

    /* Vendor Title Box */
    #summary-note-printable-area:not(.hidden) .sn-vendor-summary-title {
        margin: 0 0 10px 0 !important;
        padding: 10px 5px !important;
        text-align: center !important;
        background-color: var(--iba-base-tint-light) !important;
        color: var(--text-color-light) !important;
        border-radius: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #summary-note-printable-area:not(.hidden) .sn-vendor-summary-title p {
        margin: 0 !important;
        font-size: 11pt !important;
        font-weight: bold !important;
        color: #46474d !important;
    }
    #summary-note-printable-area:not(.hidden) .sn-vendor-info {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    /* Payment Details Row */
    #summary-note-printable-area:not(.hidden) .sn-payment-details {
        font-size: 10pt !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #000 !important;
        margin-bottom: 15px !important;
        margin-top: 10px !important;
    }
    #summary-note-printable-area:not(.hidden) .sn-payment-details div {
        border-left: none !important;
        padding-left: 0 !important;
    }

    /* Table Styling */
    #summary-note-printable-area:not(.hidden) .sn-table {
        font-size: 9pt !important;
        page-break-inside: auto;
        table-layout: fixed !important;
        width: 100% !important;
        border: 1px solid #333 !important;
    }
    #summary-note-printable-area:not(.hidden) .sn-table thead th {
        background-color: var(--iba-base-blue) !important;
        color: var(--text-color-light) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        font-weight: bold !important;
        border: 1px solid #333 !important;
    }
    #summary-note-printable-area:not(.hidden) .sn-table td {
        border: 1px solid #333 !important;
        padding: 1px 6px !important;
    }

    /* Column Widths */
    #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(1),
    #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(1) { width: 8% !important; text-align: center !important; word-break: break-all; }
    #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(2),
    #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(2) { width: 8% !important; text-align: center !important; }
    #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(3),
    #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(3) { width: 8% !important; text-align: center !important; }
    #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(4),
    #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(4) { width: 44% !important; }
    #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(5),
    #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(5) { width: 16% !important; text-align: center !important; }
    #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(6),
    #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(6) { width: 16% !important; text-align: right !important; }

    #summary-note-printable-area:not(.hidden) .sn-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    #summary-note-printable-area:not(.hidden) .sn-table input {
        border: none !important;
        background: transparent !important;
        font-size: inherit !important;
        padding: 1px !important;
    }

    /* Footer */
    #summary-note-printable-area:not(.hidden) .sn-footer {
        font-size: 10pt !important;
        padding: 8px 0 !important;
        border-top: 2px solid #000 !important;
        margin-top: 0 !important;
        page-break-before: auto;
        page-break-inside: avoid;
    }

    /* Notes */
    #summary-note-printable-area:not(.hidden) .sn-print-notes-section {
        visibility: visible !important;
        margin-top: 20px !important;
        padding-top: 15px !important;
        border-top: 1px dashed #ccc !important;
        font-size: 9pt !important;
        color: #555 !important;
        page-break-before: auto;
        page-break-inside: avoid;
    }
    #summary-note-printable-area:not(.hidden) .sn-print-notes-section h4 {
        margin: 0 0 5px 0 !important;
        font-size: 10pt !important;
        font-weight: bold !important;
        color: #333 !important;
    }
    #summary-note-printable-area:not(.hidden) #sn-print-notes-content {
        margin: 0 !important;
        line-height: 1.4 !important;
        white-space: pre-wrap !important;
    }

    /* Signatures */
    #summary-note-printable-area:not(.hidden) .sn-signatures {
        margin-top: 60px !important;
        font-size: 10pt !important;
        page-break-before: auto;
        page-break-inside: avoid;
        justify-content: space-between !important;
    }
    #summary-note-printable-area:not(.hidden) .sn-signatures div {
        padding-top: 40px !important;
        margin: 0 !important;
        border-top: 1px solid #000 !important;
        width: 30% !important;
        text-align: center !important;
    }

    /* Hide Screen Elements & Other Reports */
    #summary-note-controls,
    .sn-print-notes-section[style*="display: none"],
    .no-print,
    #summary-note-printable-area:not(.hidden) ~ #im-finance-report-modal,
    #summary-note-printable-area:not(.hidden) ~ #im-reporting-printable-area {
        display: none !important;
        visibility: hidden !important;
    }

    /* ============================================= */
    /* SECTION B: FINANCE REPORT (PORTRAIT) - FIXED  */
    /* ============================================= */

    /* 1. Page Setup (Increased to prevent Right Cutoff) */
    @page {
        size: A4 portrait;
        margin: 10mm; /* 10mm is the safe standard for A4 printers */
    }

    /* 2. Show the Report Modal & Hide Backgrounds */
    #im-finance-report-modal:not(.hidden),
    #im-finance-report-modal:not(.hidden) .modal-container,
    #im-finance-report-modal:not(.hidden) .modal-content,
    #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area,
    #im-finance-report-modal:not(.hidden) * {
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 3. Position: Reset to flat page (Removes "Floating" effect) */
    #im-finance-report-modal:not(.hidden) {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        z-index: 99999 !important;

        /* Remove Shadow and Border for Print */
        box-shadow: none !important;
        border: none !important;
    }

    /* Target the container specifically to kill the card look */
    #im-finance-report-modal:not(.hidden) .modal-container {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Remove UI Buttons */
    #im-finance-report-modal .modal-header,
    #im-finance-report-modal .modal-footer,
    #im-finance-report-modal .modal-close-btn {
        display: none !important;
    }

    /* 5. HEADER STYLING (IBA LOGO) */
#im-finance-report-modal:not(.hidden) .report-header {
    border-bottom: 2px solid #000 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;

    /* ▼ CHANGE THIS TO LEFT ▼ */
    text-align: left !important;

    display: block !important;
}

/* Ensure Logo sizes correctly on A4 paper */
#im-finance-report-modal:not(.hidden) .report-header img {
    max-height: 60px !important; /* Good height for A4 header */
    width: auto !important;
    display: inline-block !important;
}

    /* 6. DETAILS GRID */
    #im-finance-report-modal:not(.hidden) .report-details {
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid #ccc !important;
        padding-bottom: 10px !important;
        font-size: 10pt !important;
    }
    #im-finance-report-modal:not(.hidden) .report-details-col {
        width: 48% !important;
    }
    #im-finance-report-modal:not(.hidden) p {
        margin: 2px 0 !important;
        line-height: 1.3 !important;
        color: #000 !important;
    }

    /* 7. SUMMARY BOX */
    #im-finance-report-modal:not(.hidden) .report-summary {
        background-color: #f4f4f4 !important; /* Light Grey Print Safe */
        border: 1px solid #ccc !important;
        padding: 8px !important;
        border-radius: 4px !important;
        margin-bottom: 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        font-size: 10pt !important;
    }
    #im-finance-report-modal:not(.hidden) .report-summary-col {
        width: 48% !important;
    }

    /* 8. TABLE STYLING (Fixed Width to prevent cutoff) */
    #im-finance-report-modal:not(.hidden) table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important; /* Smaller font fits better */
        margin-bottom: 20px !important;
        table-layout: fixed !important; /* STRICT COLUMN WIDTHS */
    }
    #im-finance-report-modal:not(.hidden) th,
    #im-finance-report-modal:not(.hidden) td {
        border: 1px solid #000 !important;
        padding: 5px 3px !important;
        word-wrap: break-word !important;
    }

    /* Header - Dark Grey */
    #im-finance-report-modal:not(.hidden) thead th {
    background-color: #333 !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;

    /* ▼ ADD OR CHANGE THIS LINE ▼ */
    font-size: 9pt !important;
    /* ▲ Adjust this value (e.g., 9pt, 11pt, 12px) to resize text ▲ */
    }

    /* Footer - Light Grey */
    #im-finance-report-modal:not(.hidden) tfoot td {
        background-color: #eee !important;
        font-weight: bold !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* PASTE THIS NEW BLOCK HERE */
    /* 8. Column Widths & Alignment (Adjusted) */

    /* Col 1: P/N (Reduced to ~50% -> 4%) */
    #im-finance-report-modal:not(.hidden) th:nth-child(1),
    #im-finance-report-modal:not(.hidden) td:nth-child(1) {
    width: 4% !important;
    white-space: nowrap !important;
    text-align: center !important;
    }

    /* Col 2: Cheque No. (Reduced to ~80% -> 12%) */
    #im-finance-report-modal:not(.hidden) th:nth-child(2),
    #im-finance-report-modal:not(.hidden) td:nth-child(2) {
    width: 12% !important;
    max-width: 100px !important;
    text-align: center !important;
    }

    /* Col 3, 4, 5: Certified, Retention, Payment (Increased by ~20% -> 22% each) */
    #im-finance-report-modal:not(.hidden) th:nth-child(3),
    #im-finance-report-modal:not(.hidden) td:nth-child(3),
    #im-finance-report-modal:not(.hidden) th:nth-child(4),
    #im-finance-report-modal:not(.hidden) td:nth-child(4),
    #im-finance-report-modal:not(.hidden) th:nth-child(5),
    #im-finance-report-modal:not(.hidden) td:nth-child(5) {
    width: 22% !important;
    text-align: right !important;
    font-family: monospace !important;
    }

    /* Col 6: Date (Takes remaining space) */
    #im-finance-report-modal:not(.hidden) th:nth-child(6),
    #im-finance-report-modal:not(.hidden) td:nth-child(6) {
    width: auto !important;
    }

    /* 9. SIGNATURES (Text Below Line) */
    #im-finance-report-modal:not(.hidden) .signatures {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 20px !important; /* Reduced margin since space is inside box now */
    page-break-inside: avoid !important;
    }

    #im-finance-report-modal:not(.hidden) .signature-box {
    width: 22% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column-reverse !important; /* FLIPS THE ORDER (Text moves to bottom) */
    align-items: center !important;
    }

    #im-finance-report-modal:not(.hidden) .signature-line {
    border-top: 1px solid #000 !important;
    margin-top: 50px !important; /* Adds space ABOVE the line for the actual signature */
    margin-bottom: 5px !important; /* Small gap between line and text */
    width: 100% !important;
    }

    #im-finance-report-modal:not(.hidden) .signature-box p {
    margin: 0 !important;
    font-weight: bold !important;
    font-size: 10pt !important;
    }

    /* 10. Hide Other Reports */
    #im-finance-report-modal:not(.hidden) ~ #summary-note-printable-area,
    #im-finance-report-modal:not(.hidden) ~ #im-reporting-printable-area {
        display: none !important;
    }

    /* ============================================= */
    /* SECTION C: LANDSCAPE REPORTS                  */
    /* ============================================= */

    @page landscape {
        size: A4 landscape;
        margin: 5mm;
    }

    /* 1. INVOICE RECORDS */
    #im-reporting-printable-area:not(.hidden),
    #im-reporting-printable-area:not(.hidden) * {
        visibility: visible !important;
        height: auto;
    }
    #im-reporting-printable-area:not(.hidden) {
        page: landscape;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10mm 0mm !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
        overflow: visible !important;
        display: block !important;
        z-index: 9999 !important;
        font-size: 9pt !important;
    }
    .print-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 10px; }
    .print-logo h1 { font-size: 14pt; margin: 0; }
    .print-title-section { text-align: right; }
    .print-title-section h2 { font-size: 16pt; margin: 0 0 5px 0; }
    .print-title-section p { font-size: 10pt; margin: 0; }
    .print-summary { margin-top: 20px; background: #f4f7fa; padding: 15px 5px; border: 1px solid #e0e0e0; border-radius: 5px; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .print-summary h3 { margin: 0 0 15px 0; text-align: center; font-size: 12pt; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
    .print-summary-grid { display: flex; justify-content: space-around; align-items: center; }
    .print-summary-grid div { text-align: center; }
    .print-summary-grid span { font-size: 10pt; color: #333; display: block; }
    .print-summary-grid strong { font-size: 14pt; color: #000; display: block; }
    #im-print-report-body { margin-top: 25px; }

    .print-po-container {
        border: 1px solid #aaa;
        border-radius: 5px;
        margin-bottom: 15px;
        page-break-inside: auto;
    }
    .print-po-header {
        background: var(--iba-base-blue);
        color: white;
        padding: 10px 5px;
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr;
        grid-template-rows: auto auto;
        gap: 5px 20px;
        border-radius: 5px 5px 0 0;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        page-break-after: avoid;
    }
    .po-header-item { font-size: 10pt; }
    .po-header-vendor { grid-column: 1 / span 2; }

    .print-invoice-table {
        width: 100%;
        border-collapse: collapse;
        page-break-inside: auto;
    }
    .print-invoice-table tbody tr { page-break-inside: avoid; }
    .print-invoice-table tfoot { page-break-inside: auto; display: table-footer-group; }
    .print-invoice-table th, .print-invoice-table td { border: 1px solid #ccc; padding: 6px 4px; text-align: left; }
    .print-invoice-table thead th { background: #e9ecef; font-size: 9pt; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .print-invoice-table tbody tr:nth-child(even) { background: #f9f9f9; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .print-invoice-table tfoot td { border-top: 2px solid #000; }
    .print-number { text-align: right !important; font-family: monospace; }
    .print-footer-label { text-align: right !important; font-weight: bold; }
    .print-footer { font-weight: bold; font-size: 10pt; }

    .print-footer-signatures { display: none !important; }

    /* Hide on-screen report elements */
    #im-reporting-form, #im-reporting-content, .report-header, .reporting-legend {
        display: none !important;
        visibility: hidden !important;
    }

    /* 2. WORKDESK REPORT */
    @page wd-job-records {
        size: A4 landscape;
        margin: 0;
    }

    body.workdesk-print-active * { visibility: hidden; }
    body.workdesk-print-active #reporting-printable-area.printing,
    body.workdesk-print-active #reporting-printable-area.printing * { visibility: visible !important; height: auto; }

    body.workdesk-print-active #reporting-printable-area.printing {
        page: wd-job-records;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10mm 5mm !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
        font-size: 9pt !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-header {
        display: block !important;
        visibility: visible !important;
        margin: 0 0 8mm 0 !important;
        padding: 0 0 5mm 0 !important;
        border-bottom: 2px solid #003a5c !important;
        color: #111827 !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-heading {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 12mm !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-heading h1 {
        margin: 0 !important;
        color: #003a5c !important;
        font-size: 15pt !important;
        line-height: 1.15 !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-heading p {
        margin: 2mm 0 0 0 !important;
        color: #475569 !important;
        font-size: 8.5pt !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-title {
        text-align: right !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-title h2 {
        margin: 0 !important;
        color: #111827 !important;
        font-size: 14pt !important;
        line-height: 1.15 !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-meta {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4mm !important;
        margin-top: 5mm !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-meta > div {
        padding: 3mm 4mm !important;
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-meta span {
        display: block !important;
        color: #64748b !important;
        font-size: 7pt !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .04em !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-job-records-print-meta strong {
        display: block !important;
        margin-top: 1mm !important;
        color: #0f172a !important;
        font-size: 9pt !important;
        overflow-wrap: anywhere !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .search-bar-local,
    body.workdesk-print-active #reporting-printable-area.printing .report-controls,
    body.workdesk-print-active #reporting-printable-area.printing .report-header,
    body.workdesk-print-active #reporting-printable-area.printing .report-tabs-container,
    body.workdesk-print-active #reporting-printable-area.printing .report-buttons-group {
        display: none !important;
        visibility: hidden !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .table-wrapper {
        overflow: visible !important;
        max-height: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 8pt !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing table th,
    body.workdesk-print-active #reporting-printable-area.printing table td {
        border: 1px solid #333 !important;
        padding: 4px 6px !important;
        text-align: left !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing table thead th {
        background-color: #f0f0f0 !important;
        font-weight: bold !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing table thead {
        display: table-header-group !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing .wd-row-action {
        display: none !important;
        visibility: hidden !important;
    }
    body.workdesk-print-active #reporting-printable-area.printing table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
}

/* =================================== */
/* END OF PRINT STYLES                 */
/* =================================== */

/* --- (FIX) Desktop/Mobile Table Column Visibility --- */
.mobile-optimized-table .mobile-only {
    display: none; /* Hide mobile-only th and td on desktop */
}
.mobile-optimized-table .desktop-only {
    display: table-cell; /* Show desktop-only th and td on desktop */
}

/* ++ NEW: Style for admin-clickable rows in Job Records ++ */
#reporting-table-body tr.admin-clickable-row {
    cursor: pointer;
}
#reporting-table-body tr.admin-clickable-row:hover {
    background-color: #f0f8ff; /* A light blue hover */
}


/* ++ NEW: Job Entry Navigation ++ */
.jobentry-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px; /* Replaces the h1's margin-bottom */
}
.jobentry-header-container h1 {
    margin: 0; /* Remove margin from h1 */
}
#jobentry-nav-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
#jobentry-nav-controls button {
    padding: 8px 12px;
    font-size: 14px;
}
#nav-job-counter {
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}

/* === THIS IS THE NEW STYLE === */
#active-task-filters {
    margin-bottom: 20px;
}
/* === END OF NEW STYLE === */

/* [Add this block before the @media query, around line 1755] */

/* === NEW: CALENDAR LEGEND STYLES === */
.wd-calendar-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    font-size: 0.85rem;
    flex-wrap: wrap; /* Added for mobile */
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
}
.legend-color-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}
.legend-color-dot.status-red {
    background-color: var(--iba-secondary-terracotta); /* Red */
}
.legend-color-dot.status-yellow {
    background-color: var(--iba-secondary-gold); /* Yellow */
}
.legend-color-dot.status-green {
    background-color: #28a745; /* Green */
}
.legend-admin-only {
    display: none; /* Hidden by default */
}
/* Show admin legend item if body has .is-admin class */
body.is-admin .legend-admin-only {
    display: flex;
}
/* === END OF LEGEND STYLES === */

/* === NEW: WORKDESK CALENDAR WIDGET === */
#wd-calendar-container {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}
#wd-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--iba-base-blue);
    color: white;
}
#wd-calendar-month-year {
    font-size: 1.3rem;
    font-weight: 600;
}
#wd-calendar-nav button {
    background: var(--iba-base-blue-light);
    color: white;
    border: none;
    font-size: 1rem;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
}
#wd-calendar-nav button:hover {
    background: var(--iba-secondary-teal);
}
#wd-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.wd-calendar-day-name {
    text-align: center;
    padding: 10px 5px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #555;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}
/* This is the CORRECT code */
.wd-calendar-day {
    min-height: 80px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 8px;
    font-size: 0.9rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}
.wd-calendar-day:nth-child(7n) {
    border-right: none;
}
.wd-calendar-day.other-month {
    color: #ccc;
    background-color: #fdfdfd;
    cursor: default;
}
.wd-calendar-day:not(.other-month):hover {
    background-color: #f0f8ff;
}
.wd-calendar-day.today {
    background-color: #fffde7;
    font-weight: bold;
}
.wd-calendar-day.selected {
    background-color: var(--iba-secondary-teal) !important;
    color: white;
    font-weight: bold;
}


/* MODIFIED: Replaced .task-dot with .task-count-badge */
.wd-calendar-day .task-count-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: var(--iba-secondary-terracotta);
    color: white;
    font-size: 1.0rem;  /* <-- Increased font size */
    font-weight: bold;
    border-radius: 50%;
    width: 30px;        /* <-- Increased width */
    height: 30px;       /* <-- Increased height */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.wd-calendar-day .task-count-badge.admin-view-only {
    background-color: #28a745; /* Green for "view-only" tasks */
}
.wd-calendar-day.selected .task-count-badge {
    background-color: white;
    color: var(--iba-secondary-terracotta);
    border: 3px solid var(--iba-secondary-terracotta); /* Thick red line */
    box-sizing: border-box; /* Ensures border is inside the 30px circle */
}

.wd-calendar-day .task-count-badge.status-pending-signature {
    background-color: var(--iba-secondary-gold); /* Yellow */
    color: #212529; /* Dark text on yellow */
}
.wd-calendar-day.selected .task-count-badge.status-pending-signature {
    background-color: white;
    color: var(--iba-secondary-gold);
    border: 3px solid var(--iba-secondary-gold); /* Thick yellow line */
    box-sizing: border-box;
}
.wd-calendar-day.selected .task-count-badge.admin-view-only {
    background-color: white;
    color: #28a745; /* Green text */
    border: 3px solid #28a745; /* Thick green line */
    box-sizing: border-box;
}
/* === NEW RULE FOR DESKTOP-ONLY 'ENTER/DOUBLE-CLICK' TOOLTIP === */
@media (min-width: 769px) {
    .wd-calendar-day:hover .task-count-badge::after {
        content: 'Dbl-click for Day View | Press Enter for Active Tasks'; /* <-- NEW TEXT */
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 5px;
        background-color: #333;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: normal;
        white-space: nowrap;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        pointer-events: none;
    }
}
/* === END OF NEW RULE === */

/* --- FIX FOR DESKTOP VIEW (Hides Mobile Elements) --- */
@media (min-width: 769px) {
  .dayview-mobile-header-new,
  .dayview-mobile-titles,
  .dayview-date-scroller {
    display: none !important;
  }

  /* This rule ensures the DESKTOP header is visible on desktop */
  #wd-dayview .dayview-header {
    display: flex !important;
  }
}

#wd-calendar-task-list {
    margin-top: 20px;
    display: none; /* <-- ADD THIS LINE */
}
#wd-calendar-task-list-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}
#wd-calendar-task-list-ul li {
    background-color: #f8f9fa;
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 8px;
    border-left: 4px solid var(--iba-secondary-periwinkle);
}
#wd-calendar-task-list-ul li.status-pending-signature {
    border-left-color: var(--iba-secondary-gold);
}
#wd-calendar-task-list-ul li.status-for-srv {
    border-left-color: var(--iba-secondary-terracotta);
}
#wd-calendar-task-list-ul li strong {
    /* This is now the main line, e.g., "PO: 12345 - QAR 1,000.00" */
    font-size: 1rem;
    color: #333;
    margin-bottom: 3px;
    display: block; /* Ensure it's on its own line */
}
#wd-calendar-task-list-ul li span {
    /* This is for sub-info like vendor name or status */
    font-size: 0.9rem;
    color: #555;
    display: block; /* Make each span its own line */
    margin-top: 2px;
}
/* === END OF CALENDAR WIDGET === */

/* ... (this rule should already be there) ... */
#wd-calendar-task-list-ul li span {
    font-size: 0.9rem;
    color: #555;
    display: block; /* Make each span its own line */
    margin-top: 2px;
}

/* === ADD THIS NEW RULE === */
#wd-calendar-task-list-ul li.clickable-task {
    cursor: pointer;
    transition: background-color 0.2s;
}
#wd-calendar-task-list-ul li.clickable-task:hover {
    background-color: #e6f7ff; /* Light blue hover */
}
/* === END OF NEW RULE === */

/* === NEW: YEAR VIEW CALENDAR STYLES === */
#wd-calendar-toggle-view {
    background: var(--iba-secondary-gold);
    color: #212529;
    border: none;
    font-size: 0.8rem; /* Make it small */
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px; /* Add spacing */
}
#wd-calendar-toggle-view:hover {
    background: #9a8100;
}

#wd-calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 months per row */
    gap: 1px;
    background-color: #eee; /* Grid lines */
    border: 1px solid #eee;
}
.wd-calendar-month-cell {
    background-color: #fff;
    padding: 20px 10px;
    text-align: center;
    font-weight: 600;
    color: #777;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}
.wd-calendar-month-cell:hover {
    background-color: #f0f8ff;
}
.wd-calendar-month-cell.has-tasks {
    background-color: #fef5f3; /* <-- NEW LIGHTER RED */
    color: #333;
    font-weight: bold;
}
.wd-calendar-month-cell.has-tasks .month-task-count {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--iba-secondary-terracotta); /* Default: Red */
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 1. Makes the month cell background light green */
.wd-calendar-month-cell.has-tasks.admin-view-only {
    background-color: #f6fcf9; /* <-- NEW LIGHTER GREEN */
}

/* 2. Makes the count badge solid green */
.wd-calendar-month-cell .month-task-count.admin-view-only {
    background-color: #28a745; /* Solid Green */
}
/* 4. Makes the month cell background light yellow */
.wd-calendar-month-cell.has-tasks.status-pending-signature {
    background-color: #fffde7; /* Light Yellow */
}

/* 5. Makes the count badge solid yellow */
.wd-calendar-month-cell .month-task-count.status-pending-signature {
    background-color: var(--iba-secondary-gold); /* Solid Yellow */
    color: #212529; /* Dark text */
}

/* 3. This is the tooltip rule */
.wd-calendar-month-cell.has-tasks:hover::after {
    content: 'Double-click to view month';
    position: absolute;
    bottom: 5px; /* Position at the bottom of the cell */
    left: 50%;
    transform: translateX(-50%); /* Center it */
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: normal;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    pointer-events: none; /* Prevents tooltip from blocking clicks */
}
/* === END OF YEAR VIEW STYLES === */

/* 12.1.8: Legacy Invoice Records mobile card styles moved to css/invoice-mobile.css. */

/* ... (this rule should already be there) ... */
@media (max-width: 768px) {
    /* ... (all your existing mobile styles) ... */

    /* === ADD THESE RULES INSIDE THE MOBILE MEDIA QUERY === */
    #im-reporting #im-reporting-content {
        display: none !important; /* Hide desktop table on mobile */
    }
    #im-reporting #im-reporting-mobile-view {
        display: block; /* Show new mobile UI */
    }
    /* === END OF ADDITION === */

/* --- NEW: Datetime and Version on Mobile --- */
#workdesk-view .workdesk-sidebar .sidebar-footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align text to the right */
}
#workdesk-view .workdesk-sidebar #workdesk-datetime {
    font-size: 0.8rem;
    color: #a0aec0; /* Match version text color */
    font-weight: 500;
}
#workdesk-view .workdesk-sidebar .sidebar-version-display {
    margin-top: 2px; /* Small space between */
    margin-bottom: 0;
    text-align: right;
}

/* --- FIX FOR MOBILE DATE SCROLLER --- */
@media (max-width: 768px) {
  #wd-dayview-date-scroller-inner {
    display: flex !important; /* This forces it to be horizontal */
    gap: 15px;
    padding: 0 5px;
  }
/* Show Logout in Bottom Nav */
    .workdesk-navigation li.mobile-only-nav-item {
    display: list-item !important;
}

    /* Optional: Hide the top-right header logout button since it's now at the bottom */
    #wd-dayview-mobile-logout-btn-new {
        display: none !important;
    }
}


/* MOBILE RESPONSIVE STYLES */
@media (max-width: 768px) {


    /* *** MODIFICATION: Move IM datetime to sidebar *** */
    #im-datetime {
        text-align: center;
        font-size: 0.8rem;
        color: #a0aec0; /* Match version text color */
        margin: 10px 0 -5px 0; /* Adjust spacing */
        order: 10; /* Move it after footer */
        display: block; /* Ensure it's visible */
    }

    .workdesk-main { padding: 15px; padding-bottom: 80px; display: flex; flex-direction: column; }
    .report-header {
        flex-direction: column;
        /* *** MODIFICATION: Align mobile report header left *** */
        align-items: flex-start;
        gap: 5px; /* Reduce gap */
    }
    /* *** MODIFICATION: Align mobile report header left *** */
    .report-header h1 {
        font-size: 1.5rem;
        margin: 0;
    }

    /* --- (NEW) Mobile Reporting Cleanup --- */
    #im-reporting .report-header .daily-report-section,
    #im-reporting .reporting-legend,
    #im-reporting .report-buttons-group #im-refresh-reporting-button,
    #im-reporting .report-buttons-group #im-reporting-print-btn,
    #im-reporting .report-buttons-group #im-reporting-download-csv-button {
        display: none !important;
    }
    /* --- (END NEW) --- */

    .report-controls { flex-direction: column; align-items: stretch; }
    .report-tabs { overflow-x: auto; white-space: nowrap; }
    #app-container, .form-container, .workdesk-section { padding: 15px; }
    .circle-button { width: 100px; height: 100px; font-size: 0.9rem; }
    .dashboard-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    #workdesk-view, #invoice-management-view { flex-direction: column; }
    .workdesk-sidebar { width: 100%; height: auto; flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 10; }
    .wd-user-profile { display: flex; align-items: center; gap: 12px; padding-bottom: 0; border-bottom: none; text-align: left; }
    .wd-user-avatar { width: 45px; height: 45px; margin: 0; font-size: 24px; }
    #wd-username, #im-username { font-size: 1rem; margin: 0; }
    #wd-user-identifier, #im-user-identifier, .workdesk-sidebar .workdesk-navigation, .workdesk-footer-nav .hidden, .workdesk-footer-nav a span { display: none; }

    /* --- (NEW) Hide elements in IM sidebar on mobile --- */
    #invoice-management-view .workdesk-sidebar .mobile-hide {
        display: none !important;
    }
    /* --- (END NEW) --- */

    .workdesk-footer-nav { margin: 0; }
    .workdesk-footer-nav ul { display: flex; }
    .workdesk-footer-nav a { padding: 8px; font-size: 18px; margin-bottom: 0; background-color: var(--iba-base-blue-light); } /* MODIFIED: Button color */
    .workdesk-footer-nav a:hover { background-color: var(--iba-base-blue-light); } /* MODIFIED: Hover color */


    /* --- (MODIFIED) Mobile WorkDesk Nav --- */
    .workdesk-navigation { display: block !important; position: fixed; bottom: 0; left: 0; width: 100%; height: 65px; background-color: #ffffff; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); z-index: 1000; margin-top: 0; flex-grow: 0; }
    .workdesk-navigation ul { display: flex; justify-content: space-around; align-items: center; height: 100%; }
    .workdesk-navigation li { flex-grow: 1; }
    /* Hide all links by default on mobile */
    #workdesk-view .workdesk-navigation li {
        display: none;
    }

    /* --- *** MODIFICATION: Show specific mobile links *** --- */

    /* 1. Dashboard (Day View) - HIDE THIS to clean up navigation */
    #workdesk-view .workdesk-navigation li.wd-nav-dashboard {
        display: none !important;
    }

    /* 2. Active Task (My Tasks / CEO Approvals) - Visible for EVERYONE */
    /* The content changes automatically based on role, but the button must be visible */
    #workdesk-view .workdesk-navigation li.wd-nav-activetask {
        display: list-item !important;
    }

    /* 2.5. Messages - Visible for EVERYONE */
    #workdesk-view .workdesk-navigation li.wd-nav-messages-mobile {
        display: list-item !important;
    }

    /* Inventory: Messages (mobile bottom bar) */
    #inventory-view .workdesk-navigation li.inv-nav-messages-mobile {
        display: list-item !important;
    }

    /* 3. Reporting - HIDDEN by default (for Regular Users) */
    #workdesk-view .workdesk-navigation li.wd-nav-im-reporting-mobile {
        display: none !important;
    }

    /* 4. Reporting - VISIBLE ONLY for Admins & CEO */
    /* This relies on the JS adding the 'is-admin' class to the body */
    body.is-admin #workdesk-view .workdesk-navigation li.wd-nav-im-reporting-mobile {
        display: list-item !important;
    }

    /* --- *** END OF MODIFICATION *** --- */

    /* Hide all desktop-only links on mobile */
    .desktop-only-li {
        display: none !important;
    }

    /* Show our mobile-only WorkDesk "Task Calendar" link */
    #invoice-management-view .workdesk-navigation li.wd-nav-dashboard-mobile {
        display: list-item;
    }

    /* Hide the desktop IM Reporting link on mobile */
    #invoice-management-view .workdesk-navigation li.im-nav-reporting {
        display: none;
    }

    /* Show the mobile IM Reporting link */
     #invoice-management-view .workdesk-navigation li.wd-nav-im-reporting-mobile {
        display: list-item;
    }
    /* --- *** END OF MOBILE NAV FIX *** --- */

    .workdesk-navigation a { flex-direction: column; justify-content: center; gap: 4px; height: 100%; font-size: 0.7rem; color: #555; margin-bottom: 0; padding: 5px 0; border-radius: 0; }
    .workdesk-navigation a:hover { background-color: #f4f7fa; color: var(--iba-secondary-teal); } /* MODIFIED: Hover color */
    .workdesk-navigation a.active { color: var(--iba-secondary-teal); background-color: transparent; font-weight: bold; border-top: 3px solid var(--iba-secondary-teal); border-radius: 0; padding-top: 2px; } /* MODIFIED: Active color */
    .workdesk-navigation a.active i { transform: scale(1.1); }
    .workdesk-navigation a i { font-size: 1.2rem; margin-bottom: 2px; }
    /* --- (END MODIFIED) Mobile WorkDesk Nav --- */

    .jobentry-form-2col { grid-template-columns: 1fr; }
    .form-buttons-container { justify-content: center; }

    /* ++ NEW: Dashboard mobile layout ++ */
    .im-dashboard-grid {
        grid-template-columns: 1fr; /* Stack all cards */
    }

    #dashboard-view .button-container .circle-button:not(#invoice-mgmt-button) {
        display: none;
    }

    /* === THIS RULE WAS COMMENTLED OUT / REMOVED === */
    /* #invoice-management-view .workdesk-navigation ul li:not(:has(a[data-section="im-reporting"])) {
        display: none;
    } */
    /* === END OF CHANGE === */

    /* --- *** START OF MOBILE NAV FIX *** --- */
    /* Hide mobile top bars per user request */
    #workdesk-view .workdesk-sidebar .wd-user-profile,
    #workdesk-view .workdesk-sidebar .wd-back-button,
    #workdesk-view .workdesk-sidebar .workdesk-footer-nav,
    #invoice-management-view .workdesk-sidebar .wd-user-profile,
    #invoice-management-view .workdesk-sidebar .wd-back-button,
    #invoice-management-view .workdesk-sidebar .workdesk-footer-nav {
        display: none;
    }
    /* --- *** END OF MOBILE NAV FIX *** --- */

    /* NEW: Ensure Finance Report specific elements stack correctly */
    #im-finance-report .search-and-filter-group { flex-direction: column; align-items: stretch; }

    /* NEW: Adjust 3-column grid for mobile */
    .form-grid-3col { grid-template-columns: 1fr 1fr; } /* Stack into 2 columns */

    /* ++ NEW (Req 1): Mobile styles for IM sidebar ++ */
    .workdesk-main.with-sidebar {
        margin-right: 0; /* No margin on mobile */
    }
    #im-show-active-jobs-btn {
        display: inline-block; /* Show the button */
    }
    .im-entry-sidebar {
        transform: translateX(100%); /* Hide sidebar off-screen */
        z-index: 1500; /* Ensure it's above content */
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    }
    .im-entry-sidebar.visible {
        transform: translateX(0); /* Slide in */
    }

    /* --- (MODIFIED) Mobile Optimized Table --- */
    .mobile-optimized-table thead {
        display: none; /* Hide desktop header */
    }
    .mobile-optimized-table .desktop-only {
        display: none !important; /* Hide ALL desktop elements (th and td) */
    }
    .mobile-optimized-table .mobile-only {
        display: block; /* Show mobile td (as blocks) */
    }

    .mobile-optimized-table tbody, .mobile-optimized-table tr, .mobile-optimized-table td {
        display: block;
        width: 100%;
    }
    .mobile-optimized-table tr {
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }
    .mobile-optimized-table td {
        padding-left: 50%; /* Make space for the label */
        position: relative;
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
    }
    .mobile-optimized-table tr:hover {
        background-color: transparent;
    }
    .mobile-optimized-table td:last-child {
        border-bottom: none;
    }
    /* This rule is now redundant but we leave it for clarity */
    .mobile-optimized-table td.desktop-only {
        display: none !important; /* Hide all desktop columns */
    }
    .mobile-optimized-table td.mobile-only {
        display: block; /* Show mobile-specific columns */
        font-size: 0.95rem;
        padding-top: 10px;
        padding-bottom: 10px;
        cursor: pointer;
    }
    .mobile-optimized-table td.mobile-only:hover {
        background-color: #f0f8ff;
    }
    .mobile-optimized-table td.mobile-only::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        color: #555;
    }
    /* Style the content inside mobile cells */
    .mobile-main-info {
        display: block;
        font-weight: 600;
        color: #333;
    }
    .mobile-sub-info {
        display: block;
        font-size: 0.9em;
        color: #666;
    }
    /* --- (END MODIFIED) Mobile Optimized Table --- */

}

}

/* +++ CACHE STATUS INDICATOR +++ */
.cache-status {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: right;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #28a745;
}

.cache-status.stale {
    border-left-color: #ffc107;
}

.cache-status.refreshing {
    border-left-color: #17a2b8;
}

/* Style for sidebar navigation separator */
/* --- *** START OF 2-REPORTING-LINKS FIX *** --- */
/* Hide mobile-only report link on desktop */
.wd-nav-im-reporting-mobile {
    display: none;
}
/* --- *** END OF 2-REPORTING-LINKS FIX *** --- */
.workdesk-navigation li.nav-section-divider {
    margin-top: 15px;
    padding-top: 15px;
    /* Use semi-transparent white for a clean look on the blue background */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* ++ NEW: 3-Column Grid Layout for Invoice Entry Form ++ */
.form-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
    gap: 15px 25px; /* Row gap and Column gap */
    align-items: end; /* Align items to the bottom */
}

.form-grid-3col .form-group {
    margin-bottom: 0; /* Remove default bottom margin inside grid */
}

/* Optional: Adjust Note textarea position if needed */
#im-new-invoice-form .form-group textarea#im-note {
   /* Adjustments can go here if needed */
}

/* ++ NEW: Modify Task Modal Styles ++ */
#modify-task-modal .choices__inner {
    /* Ensure modal dropdowns work */
    min-height: 45px;
    font-size: 16px;
    background-color: #fff;
    margin-bottom: 15px; /* Add margin to match other inputs */
}

/* ++ UPDATED: Action Button Styles in Tables ++ */
/* Remove old .respond-btn rule if it exists */
.table-wrapper .respond-btn {
    /* This class is no longer used, you can delete its rule */
}

.srv-done-btn, .modify-btn {
    padding: 5px 10px;
    font-size: 13px;
    font-weight: normal;
    margin-right: 5px; /* Add some spacing */
    border: none;
}
.srv-done-btn {
    background-color: #28a745; /* Green */
    color: var(--text-color-light);
}
.srv-done-btn:hover {
    background-color: #218838;
}
.srv-done-btn:disabled {
    background-color: #aaa;
    cursor: not-allowed;
    opacity: 0.7;
}
.modify-btn {
    background-color: var(--iba-secondary-gold); /* MODIFIED: Button color */
    color: #212529;
}
.modify-btn:hover {
    background-color: #9a8100; /* MODIFIED: Hover color */
}

/* ++ NEW: Notification Badge for Sidebar ++ */
.notification-badge {
    background-color: var(--iba-secondary-terracotta); /* MODIFIED: Badge color */
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: bold;
    position: relative;
    top: -2px;
    margin-left: 6px;
    display: inline-block;
}

/* ++ NEW: IM Dashboard Refresh Button ++ */
.dashboard-chart-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
#im-dashboard-refresh-btn {
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1;
    /* Make it blend in with the dark theme */
    background-color: var(--iba-base-blue-light);
    border: 1px solid var(--db-border);
}
#im-dashboard-refresh-btn:hover {
    background-color: var(--iba-secondary-teal);
}
/* Hide mobile-only dashboard link on desktop */
.wd-nav-dashboard-mobile {
    display: none;
}
/* === NEW: DAY VIEW STYLES === */
.dayview-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.dayview-header h1 {
    margin: 0;
}
#wd-dayview-back-btn {
    font-size: 1rem;
    padding: 8px 12px;
}
#wd-dayview-back-btn i {
    margin-right: 8px;
}

.dayview-task-card {
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-left: 5px solid var(--iba-secondary-teal);
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.dayview-task-card strong {
    font-size: 1.1rem;
    color: #333;
    display: block;
    margin-bottom: 8px;
}
.dayview-task-card .task-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 20px;
    font-size: 0.9rem;
}
.dayview-task-card .task-detail-item {
    color: #555;
}
.dayview-task-card .task-detail-item .label {
    font-weight: 600;
    color: #000;
}
.dayview-task-card .task-detail-item.status {
    font-weight: bold;
}
.dayview-task-card .task-detail-item.note {
    grid-column: 1 / -1; /* Make note span full width */
    font-style: italic;
    color: var(--iba-secondary-terracotta);
    margin-top: 8px;
}
/* 2. Style for title with tasks (no longer clickable) */
#wd-calendar-task-list h3[data-has-tasks="true"] {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
}
/* === NEW: Make Day View task cards clickable for admins === */
.dayview-task-card.admin-clickable-task {
    cursor: pointer;
}
.dayview-task-card.admin-clickable-task:hover {
    background-color: #e6f7ff; /* Light blue hover */
    border-color: #b3e0ff;
}
/* === END OF DAY VIEW STYLES === */

.dayview-header {
    justify-content: space-between; /* Make back button and nav split */
    flex-wrap: wrap; /* For mobile */
}
.dayview-date-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}
.dayview-date-nav h1 {
    margin: 0;
    font-size: 1.5rem; /* Make it a bit bigger */
    white-space: nowrap;
}
.dayview-date-nav button {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 5px 12px;
    flex-shrink: 0;
}
/* 12.1.8: Legacy Invoice Records status hover rules removed; mobile styling is isolated in css/invoice-mobile.css. */

/* === NEW: MOBILE DAY VIEW STYLES (Header, Title, Scroller) === */

/* --- FIX: Hide new mobile elements on desktop by default --- */
.dayview-mobile-header-new,
.dayview-mobile-titles,
.dayview-date-scroller {
    display: none;
}

/* --- FIX: Hide desktop DayView header on mobile --- */
@media (max-width: 768px) {
    #wd-dayview .dayview-header {
        display: none !important; /* <<< --- ADDED !important TO ENSURE IT HIDES */
    }

    /* Show new mobile elements on mobile */
    .dayview-mobile-header-new,
    .dayview-mobile-titles,
    .dayview-date-scroller {
        display: block; /* or flex */
    }

    /* 1. Mobile Top Bar */
    .dayview-mobile-header-new {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0; /* Padding only top/bottom */
        margin-bottom: 15px;
    }
    .dayview-mobile-icon-btn {
    background: none;
    border: none;
    font-size: 1.5rem; /* Larger icons */
    color: #888;
    cursor: pointer;
    padding: 5px;
    position: relative; /* <-- ADD THIS LINE */
}
/* --- NEW: Mobile Notification Badge Positioning --- */
#wd-mobile-notify-badge {
    position: absolute; /* Position the badge relative to the button */
    top: 2px;
    right: 2px;
    padding: 1px 5px; /* Make it a bit smaller */
    font-size: 0.65rem;
    line-height: 1.2;
}
    .dayview-mobile-icon-btn.dayview-mobile-logout {
        color: var(--iba-secondary-terracotta); /* Red for logout */
    }

    /* 2. Mobile Title */
    .dayview-mobile-titles {
        margin-bottom: 20px;
    }
    .dayview-mobile-titles h1 {
        font-size: 2rem;
        font-weight: 700;
        color: #333;
        margin: 0 0 5px 0;
    }
    .dayview-mobile-titles p {
        font-size: 1rem;
        color: #777;
        margin: 0;
    }

    /* 3. Date Scroller */
    .dayview-date-scroller {
        margin-bottom: 25px;
        overflow-x: auto;
        /* Hide scrollbar for a cleaner look */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .dayview-date-scroller::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    /* --- THIS IS THE FIX --- */
    /* The selector was `.dayview-date-scroller-inner` and should be `#dayview-date-scroller-inner` */
    #dayview-date-scroller-inner {
        display: flex;
        gap: 15px;
        padding: 0 5px; /* Small padding so ends don't touch edge */
    }
    /* --- END OF FIX --- */

    .day-scroller-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 65px;
        flex-shrink: 0;
        border-radius: 12px;
        background-color: #f0f4f8;
        color: #888;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .day-scroller-item .day-scroller-num {
        font-size: 1.2rem;
        color: #555;
    }
    .day-scroller-item .day-scroller-char {
        font-size: 0.9rem;
    }

    .day-scroller-item.active {
        background-color: var(--iba-base-blue); /* Use brand blue */
        color: white;
        transform: translateY(-5px);
        box-shadow: 0 4px 10px rgba(0, 58, 92, 0.3);
    }
    .day-scroller-item.active .day-scroller-num {
        color: white;
    }
}
/* === NEW: MOBILE DAY VIEW TASK CONTAINER === */

/* --- THIS IS THE FIX --- */
/* The blue container should be visible on desktop, but just be a normal container */
.dayview-task-container-blue {
    display: block;
}
/* --- END OF FIX --- */

@media (max-width: 768px) {
    /* Show the blue container on mobile */
    .dayview-task-container-blue {
        display: block;
        flex-grow: 1; /* Make it fill the remaining height */

        /* This is needed to contain the task cards */
        padding-bottom: 80px; /* Space for the bottom nav bar */
    }

    /* Style for the task list inside the blue container */
    #wd-dayview-task-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }


    .dayview-task-container-blue .dayview-task-card strong {
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 10px;
    }

    .dayview-task-container-blue .dayview-task-card .task-details-grid {
        grid-template-columns: 1fr; /* Stack details on mobile */
        gap: 5px;
        font-size: 0.95rem;
    }

    .dayview-task-container-blue .dayview-task-card .task-detail-item .label {
        font-weight: 600;
        color: #555; /* Darken label slightly */
        margin-right: 5px;
    }

    .dayview-task-container-blue .dayview-task-card .task-detail-item.status .label {
        color: #333;
    }

    .dayview-task-container-blue .dayview-task-card .task-detail-item.note {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #eee;
    }

    /* Make the <p> tag for "No tasks" white */
    .dayview-task-container-blue #wd-dayview-task-list p {
        text-align: center;
        padding-top: 20px;
    }
}
/* === NEW: IM REPORTING MOBILE SEARCH UI === */

/* 1. Search Button */
.im-mobile-search-btn {
  display: none; /* Hide on desktop */
  background-color: var(--iba-base-blue);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 1.1rem;
  padding: 0;
  margin-left: auto; /* Push to the right */
}
.im-mobile-search-btn:hover {
  background-color: var(--iba-base-blue-light);
}

/* 2. Search Modal */
/* *** MODIFICATION: Make modal smaller on mobile *** */
.im-search-modal-container {
  max-width: 450px;
  width: 95%;
  margin: auto;
  /* Position at the top for an app-like feel */
  position: fixed;
  top: 15px;
  left: 0;
  right: 0;
}
@media (max-width: 768px) {
    .im-search-modal-container {
        width: 90%; /* Make it 90% of screen width */
        max-width: 400px; /* Set a smaller max-width */
        top: 10px; /* Move closer to the top */
    }
    .im-search-modal-container .modal-content {
        padding-top: 0;
    }
    .im-search-modal-container .form-group {
        margin-bottom: 12px;
    }
    .im-search-modal-container .modal-footer button {
        padding: 8px 16px;
        font-size: 0.95rem;
    }
}
/* *** END OF MODIFICATION *** */

.im-search-modal-container .modal-content {
  padding-top: 5px;
}
.im-search-modal-container .form-group {
  margin-bottom: 15px;
}
.im-search-modal-container .form-group label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 5px;
  color: #444;
}
/* Ensure inputs inside modal are correct */
.im-search-modal-container input[type="text"],
.im-search-modal-container input[type="month"],
.im-search-modal-container select {
  margin-bottom: 0;
  font-size: 1rem;
  padding: 10px;
  background-color: #f4f7fa;
  border: 1px solid #ddd;
}
.im-search-modal-container .modal-footer button {
  width: auto;
  padding: 10px 20px;
  font-size: 1rem;
}


/* 3. Mobile-specific Overrides */
@media (max-width: 768px) {
  /* Show the new search button on mobile */
  #im-reporting .im-mobile-search-btn {
    display: block;
  }

  /* Hide the old desktop search form on mobile */
  #im-reporting #im-reporting-form {
    display: none !important;
  }
}
/* === NEW: IM REPORTING MOBILE CARD VIEW (LAYOUT) === */

/* 1. Empty State (when no results are found) */
.im-mobile-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #777;
}
.im-mobile-empty-state i {
  font-size: 3rem;
  color: #ccc;
  margin-bottom: 15px;
}
.im-mobile-empty-state h3 {
  font-size: 1.3rem;
  color: #333;
  margin: 0 0 5px 0;
}

/* 12.1.8: All Invoice Records mobile card/transaction styles live in css/invoice-mobile.css. */

/* --- NEW: Flip Phone Cover Screen Adjustments --- */
@media (max-width: 400px) {

    /* Make the modal take up almost the full screen */
    #im-mobile-search-modal .modal-container {
        width: 98%;
        max-width: 98%;
        top: 5px; /* Move even closer to the top */
    }

    /* Reduce all padding */
    #im-mobile-search-modal .modal-container {
        padding: 15px;
    }
    #im-mobile-search-modal .modal-header {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    #im-mobile-search-modal .modal-header h2 {
        font-size: 1.1rem;
    }
    #im-mobile-search-modal .modal-content {
        padding-top: 0;
    }

    /* Make form elements smaller */
    #im-mobile-search-modal .form-group {
        margin-bottom: 8px; /* Tighter spacing */
    }
    #im-mobile-search-modal .form-group label {
        font-size: 0.8rem;
        margin-bottom: 3px;
    }

    #im-mobile-search-modal input[type="text"],
    #im-mobile-search-modal input[type="month"],
    #im-mobile-search-modal select {
        font-size: 0.9rem;
        padding: 8px; /* Smaller padding */
    }

    /* Make footer and buttons smaller */
    #im-mobile-search-modal .modal-footer {
        padding-top: 10px;
        margin-top: 10px;
    }
    #im-mobile-search-modal .modal-footer button {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}
/* --- NEW: Flip Phone Cover Screen Height Adjustments --- */
@media (max-height: 450px) {

    /* Make the modal container take up the full height */
    #im-mobile-search-modal .modal-container {
        top: 0;
        bottom: 0;
        height: 100vh;
        max-height: 100vh;
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
        padding: 10px;
        box-sizing: border-box; /* Include padding in height */
    }

    /* Make the modal content scrollable */
    #im-mobile-search-modal .modal-content {
        overflow-y: auto; /* This is the key fix */
        flex-grow: 1; /* Allow content to fill space */
        padding-top: 0;
    }

    /* Shrink header and footer to save space */
    #im-mobile-search-modal .modal-header {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    #im-mobile-search-modal .modal-header h2 {
        font-size: 1.1rem;
    }
    #im-mobile-search-modal .modal-footer {
        padding-top: 8px;
        margin-top: 8px;
        flex-shrink: 0; /* Prevent footer from shrinking */
    }

    /* Make form elements even smaller */
    #im-mobile-search-modal .form-group {
        margin-bottom: 5px;
    }
    #im-mobile-search-modal .form-group label {
        font-size: 0.8rem;
        margin-bottom: 2px;
    }
    #im-mobile-search-modal input[type="text"],
    #im-mobile-search-modal input[type="month"],
    #im-mobile-search-modal select {
        font-size: 0.9rem;
        padding: 6px; /* Even smaller padding */
    }
    #im-mobile-search-modal .modal-footer button {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}
/* --- ADD THIS NEW RULE --- */
        .master-row.highlight-open-balance {
            background-color: #f7f9ff !important; /* Very light blue/periwinkle tint */
        }
        .master-row.highlight-open-balance:hover {
            background-color: #e8ecf4 !important; /* Darker tint for hover */
        }
        /* --- END OF ADDITION --- */
/* --- END OF Flip Phone Cover Screen Height Adjustments --- */
/* ADD THIS ENTIRE BLOCK TO THE END OF style.css */

/* 1. Hide Group column for CEO */
body.is-ceo .desktop-only.col-group {
    display: none;
}

/* 2. Style new WhatsApp button */
#send-ceo-approval-receipt-btn i {
    margin-right: 8px;
}

/* 3. Style CEO Approval Modal */
#ceo-modal-details {
    font-size: 0.95rem;
    color: #333;
}
#ceo-modal-details strong {
    color: #000;
}

/* 4. Style Receipt Template (when visible for PDF generation) */
#ceo-receipt-template .item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 5px;
}
#ceo-receipt-template .item-details {
    flex-basis: 70%;
    word-break: break-word;
}
#ceo-receipt-template .item-status {
    flex-basis: 30%;
    text-align: right;
    font-weight: bold;
}
#ceo-receipt-template .status-approved {
    color: #28a745;
}
#ceo-receipt-template .status-rejected {
    color: #D32F2F;
}
/* ADD THIS BLOCK TO THE END OF style.css */

/* 4. Style Receipt Template (when visible for PDF generation) */
#ceo-receipt-template .item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 5px;
}
#ceo-receipt-template .item-details {
    flex-basis: 70%;
    word-break: break-word;
}
#ceo-receipt-template .item-status {
    flex-basis: 30%;
    text-align: right;
    font-weight: bold;
}
#ceo-receipt-template .status-approved {
    color: #28a745;
}
#ceo-receipt-template .status-rejected {
    color: #D32F2F;
}

/* --- THIS IS THE FIX --- */
/* Add this to prevent the element from visibly "sliding" */
#ceo-receipt-template {
    transition: none !important;
}
/* --- END OF Flip Phone Cover Screen Adjustments --- */
/* ADD THIS ENTIRE BLOCK TO THE END OF style.css */

/* --- CEO Mobile UI Simplification (FIXED) --- */
@media (max-width: 768px) {

    /* 1. Make the sidebar wrapper visible again (so the Nav bar can exist) */
    body.is-ceo #workdesk-view .workdesk-sidebar {
        display: block !important;
        padding: 0 !important; /* Remove padding so it takes no space at top */
        height: 0 !important;  /* Collapse height */
        min-height: 0 !important;
        border: none !important;
        overflow: visible !important; /* Allow the fixed Nav to overflow out */
    }

    /* 2. Hide ALL children of the sidebar by default... */
    body.is-ceo #workdesk-view .workdesk-sidebar > * {
        display: none !important;
    }

    /* 3. ...EXCEPT the Navigation Bar, which we force to show */
    body.is-ceo #workdesk-view .workdesk-sidebar .workdesk-navigation {
        display: block !important;
        /* Ensure it sticks to bottom */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    /* 4. Restore padding to main content so it doesn't hide behind the nav */
    body.is-ceo .workdesk-main {
        padding: 15px !important;
        padding-bottom: 85px !important;
        height: auto !important;
    }

    /* 5. Hide the "Back to Calendar" button in Day View (Optional) */
    body.is-ceo #wd-dayview-mobile-menu-btn {
        display: none !important;
    }

    /* 6. Center the remaining Day View header items */
    body.is-ceo .dayview-mobile-header-new {
        justify-content: flex-end;
        padding: 10px 15px;
    }

    /* 7. Center the title */
    body.is-ceo .dayview-mobile-titles {
        text-align: center;
        padding: 0 15px;
    }
}
/* ========================================= */
/* MOBILE LOGIN STYLES */
/* ========================================= */
.mobile-login-container {
    display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
    /* Hide desktop login card */
    .desktop-only-login {
        display: none !important;
    }

    /* Show mobile login container */
    .mobile-login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center the card when there is space, but still allow scroll on smaller screens */
        justify-content: center;
        /* Use dynamic viewport units on mobile to avoid address-bar cropping */
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        width: 100vw;
        background: linear-gradient(135deg, #003A5C 0%, #00748C 100%);
        /* Reduce padding so content fits on smaller screens */
        padding: calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile Login Logo */
.iba-logo-anim {
    font-family: "Bookman Old Style", serif; /* CHANGED */
    /* Slightly smaller so it fits comfortably on most phones */
    font-size: 2.8rem;
    font-weight: 900;
    color: white;
    margin-bottom: 18px;
    letter-spacing: 4.5px;
    display: flex;
    gap: 10px;
}

    .iba-logo-anim span {
        opacity: 0;
        animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    .iba-logo-anim span:nth-child(1) { animation-delay: 0.2s; }
    .iba-logo-anim span:nth-child(2) { animation-delay: 0.4s; }
    .iba-logo-anim span:nth-child(3) { animation-delay: 0.6s; }

    @keyframes popIn {
        0% { opacity: 0; transform: scale(0.5); }
        100% { opacity: 1; transform: scale(1); }
    }

    .mobile-login-form-wrapper {
        width: 100%;
        max-width: 420px;
        /* Prevent edge-to-edge on very small devices */
        box-sizing: border-box;
        margin: 0 auto;
        text-align: center;

        /* Glass card (mobile login) */
        padding: 22px 18px;
        border-radius: 22px;
        background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
        border: 1px solid rgba(255,255,255,0.28);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        box-shadow: 0 20px 60px rgba(0,0,0,0.30);
    }

    .input-icon-wrap {
        position: relative;
        margin-bottom: 16px;
    }

    .input-icon-wrap i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #003A5C;
    }

    .mobile-login-form-wrapper input {
        width: 100%;
        padding: 13px 14px 13px 44px; /* Space for icon */
        border-radius: 30px;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        font-size: 1.02rem;
    }

    .mobile-login-btn {
        width: 100%;
        padding: 13px;
        border-radius: 30px;
        background: #C3502F; /* Terracotta */
        color: white;
        font-size: 1.1rem;
        font-weight: bold;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        margin-top: 10px;
    }

    .iba-web-link {
        display: block;
        margin-top: 24px;
        color: rgba(255,255,255,0.7);
        text-decoration: none;
        font-size: 0.9rem;
    }
}


/* Extra-tight tuning for narrow phones */
@media (max-width: 420px) {
    .mobile-login-container {
        padding: calc(14px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
    }
    .iba-logo-anim { font-size: 2.5rem; margin-bottom: 14px; letter-spacing: 3.8px; }
    .mobile-login-form-wrapper { padding: 20px 16px; border-radius: 20px; }
    .input-icon-wrap { margin-bottom: 14px; }
}


@media (max-width: 768px) and (max-height: 740px) {
    .iba-logo-anim { font-size: 2.8rem; margin-bottom: 18px; }
    .mobile-login-form-wrapper { padding: 20px 18px; border-radius: 22px; }
    .input-icon-wrap { margin-bottom: 14px; }
    .iba-web-link { margin-top: 16px; }
}

/* ========================================= */
/* MOBILE ACTIVE TASK CARD STYLES */
/* ========================================= */
@media (max-width: 768px) {
    /* Hide the table structure on mobile */
    .hidden-mobile { display: none !important; }
    .hidden-desktop { display: block !important; }

    /* Task Card Container */
    .mobile-task-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        margin-bottom: 15px;
        overflow: hidden;
        border: 1px solid #eee;
        transition: all 0.3s ease;
    }

    .mobile-card-header {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        cursor: pointer;
    }

    .mobile-card-header.active {
        background: #f9f9f9;
        border-bottom: 1px solid #eee;
    }

    .m-card-main h3 {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

    .m-card-sub {
        font-size: 0.85rem;
        color: #777;
        margin-top: 4px;
    }

    .m-card-amount {
        text-align: right;
    }

    .m-card-val {
        display: block;
        font-size: 1.1rem;
        font-weight: bold;
        color: #003A5C;
    }

    .m-card-ref {
        display: block;
        font-size: 0.8rem;
        color: #999;
    }

    /* Expanded Content */
    .mobile-card-body {
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease;
        background-color: #fcfcfc;
    }

    .mobile-card-body.open {
        padding: 20px;
        max-height: 500px; /* Arbitrary large number for expansion */
    }

    .m-action-group {
        margin-bottom: 15px;
    }

    .m-action-group label {
        font-size: 0.85rem;
        color: #555;
        margin-bottom: 5px;
        display: block;
    }

    .m-action-group input, .m-action-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        margin-bottom: 0;
    }

    .m-btn-row {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    .m-btn-approve, .m-btn-reject {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-weight: bold;
        font-size: 1rem;
        cursor: pointer;
        color: white;
    }

    .m-btn-approve { background-color: #28a745; }
    .m-btn-reject { background-color: #D32F2F; }

    .m-pdf-btn {
        display: block;
        text-align: center;
        background-color: #f0f0f0;
        color: #333;
        padding: 10px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        margin-bottom: 15px;
    }

    /* Floating WhatsApp Button */
    #mobile-receipt-action-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 15px;
        background: white;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 100;
        box-sizing: border-box;
    }

    .whatsapp-float-btn {
        width: 100%;
        background-color: #25D366;
        color: white;
        border: none;
        padding: 15px;
        border-radius: 30px;
        font-size: 1.1rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
}
/* --- CRITICAL FIX: Hide Mobile Active Task View on Desktop --- */
@media (min-width: 769px) {
    #active-task-mobile-view,
    #mobile-receipt-action-container,
    .mobile-task-card,
    #active-task-mobile-header { /* <--- ADDED THIS LINE */
        display: none !important;
    }
/* Ensure the generic helper class works as intended on desktop */
    .hidden-desktop {
        display: none !important;
    }
}
/* --- FIX: Reveal Navigation on Mobile --- */
@media (max-width: 768px) {
    /* 1. Show the Active Task link in the bottom navigation */
    #workdesk-view .workdesk-navigation li.wd-nav-activetask {
        display: list-item !important;
    }

    /* 2. Ensure the header sits correctly at the top */
    #active-task-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px; /* Added side padding */
    margin: -15px -15px 15px -15px; /* Negative margin to stretch full width */
    background-color: #fff; /* White background */
    border-bottom: 1px solid #e0e0e0; /* Clean separator line */

    /* REMOVED: position: sticky, top: 0, z-index */
    position: relative;
}

#active-task-mobile-header h1 {
    font-size: 1.3rem; /* Adjusted font size */
    font-weight: 700;
    color: var(--iba-base-blue);
    margin: 0;
}

.mobile-header-icon {
    font-size: 1.2rem;
    color: #555;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px; /* Larger touch target */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.mobile-header-icon:hover {
    background-color: #f0f0f0;
}

.mobile-header-icon.logout-icon {
    color: var(--iba-secondary-terracotta);
}
/* Hide the new mobile link on desktop */
.wd-nav-activetask-mobile {
    display: none;
}

@media (max-width: 768px) {
    /* Show the new link on mobile within Invoice Management */
    #invoice-management-view .workdesk-navigation li.wd-nav-activetask-mobile {
        display: list-item !important;
    }

    /* Messages (mobile bottom bar) */
    #invoice-management-view .workdesk-navigation li.im-nav-messages-mobile {
        display: list-item !important;
    }

    /* Ensure the 3 icons fit nicely */
    .workdesk-navigation ul {
        justify-content: space-between;
        padding: 0 10px; /* Add small padding to sides */
    }

    /* Optional: Make icons slightly smaller if 3 items feel crowded */
    .workdesk-navigation a {
        font-size: 0.65rem;
    }
    .workdesk-navigation a i {
        font-size: 1.1rem;
    }
}
/* --- FIX: Prevent Receipt Button from blocking Card Buttons --- */

/* 1. Add extra scroll space to the bottom of the list */
#active-task-mobile-view {
    /* This ensures the last card can be scrolled up past the button */
    padding-bottom: 160px !important;
}

/* 2. Move the button up so it sits ABOVE the bottom navigation bar */
    #mobile-receipt-action-container {
        bottom: 70px !important; /* 65px nav bar + 5px spacing */
        box-shadow: 0 -4px 15px rgba(0,0,0,0.15); /* Enhanced shadow for visibility */
    }

} /* <--- THIS CLOSING BRACKET WAS MISSING/MISPLACED! IT CLOSES THE MOBILE SECTION */


/* ========================================= */
/* INVOICE HISTORY MODAL STYLES (GLOBAL)     */
/* ========================================= */
#history-table th {
    background-color: #e9ecef;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}
#history-table td {
    font-size: 0.9rem;
    padding: 10px;
    vertical-align: top;
}
.history-duration {
    font-weight: bold;
    color: var(--iba-secondary-teal);
    font-size: 0.85rem;
}

/* FORCE History Button Green (Global) */
.history-btn {
    background-color: #28a745 !important; /* Force Green */
    color: white !important;
    border-radius: 4px;
    border: none !important;
    margin-left: 5px;
    padding: 5px 10px; /* Ensure consistent size */
}

.history-btn:hover {
    background-color: #218838 !important; /* Force Darker Green on Hover */
}

/* Ensure the icon inside is white */
.history-btn i {
    color: white !important;
}
/* Hide Mobile Logout on Desktop */
.mobile-only-nav-item {
    display: none;
}
/* Hide Mobile Messages on Desktop */
.wd-nav-messages-mobile,
.im-nav-messages-mobile,
.inv-nav-messages-mobile {
    display: none;
}
/* Dashboard Double-Click Tooltip */
#im-dashboard-nav-link {
    position: relative;
}

/* Only show this custom tooltip on Desktop */
@media (min-width: 769px) {
    #im-dashboard-nav-link:hover::after {
        content: "Double-click to load data";
        position: absolute;
        left: 100%; /* Position to the right of the link */
        top: 50%;
        transform: translateY(-50%);
        background-color: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 0.75rem;
        margin-left: 10px; /* Spacing from the button */
        z-index: 2000;
        pointer-events: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        opacity: 0;
        animation: fadeIn 0.3s forwards;
        animation-delay: 0.5s; /* Slight delay before showing */
    }
}

@keyframes fadeIn {
    to { opacity: 1; }
}
/* Add this to style.css */
.edit-inv-no-btn {
    background-color: #17a2b8 !important; /* Blue */
    color: white !important;
    border: none !important;
    border-radius: 4px;
    padding: 5px 8px;
    margin-right: 5px;
    cursor: pointer;
}
.edit-inv-no-btn:hover {
    background-color: #138496 !important;
}

/* ==========================================================================
   WAYBILL PRINT STYLES (DHL STYLE)
   ========================================================================== */
@media print {
    /* 1. Hide everything else */
    body.printing-waybill,
    body.printing-waybill * {
        visibility: hidden;
        overflow: visible !important;
    }

    /* 2. Show Template */
    body.printing-waybill #transfer-waybill-template,
    body.printing-waybill #transfer-waybill-template * {
        visibility: visible !important;
        height: auto !important;
    }

    /* 3. Position & Style */
    body.printing-waybill #transfer-waybill-template {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        background: white !important;
        display: block !important;
        z-index: 99999 !important;
        font-size: 12pt !important;

        /* FORCE COLORS TO PRINT */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Ensure grid lines print clearly */
    body.printing-waybill #transfer-waybill-template div {
        border-color: #000 !important;
    }
}

/* ==========================================================================
   WAYBILL BARCODE FIX & PRINT STYLES (Updated)
   ========================================================================== */
@media print {
    /* 1. Force Barcode Images to be Visible and have Height */
    body.printing-waybill img#wb-barcode-approver,
    body.printing-waybill img#wb-barcode-receiver {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 50px !important; /* Force height so it doesn't collapse */
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto 5px auto !important;
    }

    /* 2. Ensure the container holding the barcode is visible */
    body.printing-waybill #wb-receiver-esn-container {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* 3. Ensure Text under barcode is visible */
    body.printing-waybill #wb-esn-text,
    body.printing-waybill #wb-receiver-esn-text {
        color: #000 !important;
        text-shadow: none !important;
        visibility: visible !important;
    }
}
/* --- STOCK TABLE ACCORDION STYLES --- */
.ms-parent-row {
    cursor: pointer;
}

.ms-parent-row:hover {
    background-color: #f5f7fa;
}

.ms-expand-btn {
    background-color: #003A5C;
    color: white;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}
.ms-expand-btn:hover {
    background-color: #00748C;
}

.stock-child-row {
    background-color: #f8f9fa;
    border-left: 5px solid #003A5C; /* Visual indicator */
}

.stock-child-row.hidden {
    display: none;
}

.stock-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    background: white;
    border: 1px solid #ddd;
}
.stock-detail-table th, .stock-detail-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}
.stock-detail-table th {
    background-color: #e9ecef;
    text-align: left;
}
/* ========================================= */
/* INVOICE ENTRY FORM MAKEOVER               */
/* ========================================= */

/* 1. Transform Form into a Card (FIXED OVERFLOW) */
#im-new-invoice-form {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;

    /* CRITICAL FIX: Changed from 'hidden' to 'visible' */
    overflow: visible !important;

    margin-bottom: 30px;
    position: relative; /* Ensure z-index works if needed */
}


/* Invoice Entry Modal: avoid "card inside a card" look */
#im-invoice-entry-modal #im-new-invoice-form {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
#im-invoice-entry-modal .modal-content {
    padding-top: 0;
}

/* 2. The "Cool" Header (Fixed Colors & Corners) */
#im-new-invoice-form h2#im-form-title {
    background-color: #003A5C !important; /* Brand Blue Background */
    color: #ffffff !important;            /* Force White Text */
    padding: 15px 25px;
    margin: 0;

    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 3px solid #002a48;

    /* Rounded corners manually since we removed overflow:hidden */
    border-radius: 8px 8px 0 0;
}

/* 3. Hide the old divider line inside the form */
#im-new-invoice-form hr.section-divider {
    display: none;
}

/* 4. Add Padding to the Content Area */
#im-new-invoice-form .form-grid-3col,
#im-new-invoice-form #im-po-search-container-bottom {
    padding: 25px;
}

/* 5. Improve Button Container Spacing (Transparent Fix) */
#im-new-invoice-form .form-buttons-container {
    padding: 0;                 /* Remove extra padding */
    background-color: transparent !important; /* Remove Grey Background */
    border-top: none;           /* Remove border */
    margin-top: 0;

    /* Ensure it aligns with the search bar */
    display: flex;
    gap: 10px;
    align-items: center;
    flex-grow: 1;               /* Fill remaining space */
    justify-content: flex-end;  /* Push buttons to right */
}

/* ========================================= */
/* HIGHLIGHTS & MODAL HEADER THEME           */
/* ========================================= */

/* 1. Global Blue Highlight (Delicate Floating Style) */
.input-required-highlight {
    /* Make the border semi-transparent so it looks very thin */
    border: 1px solid rgba(0, 58, 92, 0.25) !important;

    /* Very light blue tint background */
    background-color: #f7fbff !important;

    /* Soft shadow underneath to give the 'floating' lift */
    box-shadow: 0 3px 6px rgba(0, 58, 92, 0.08) !important;

    /* Text Styling */
    color: #003A5C !important;
    font-weight: 600 !important;

    transition: all 0.3s ease;
}

/* On Click/Focus: Slightly darken the border to show it's active */
.input-required-highlight:focus {
    outline: none !important;
    border-color: #003A5C !important; /* Solid blue only when typing */
    background-color: #ffffff !important;
    box-shadow: 0 6px 12px rgba(0, 58, 92, 0.15) !important;
    transform: translateY(-1px);
}

/* Optional: Label text color */
.input-required-highlight + label::after {
    color: #003A5C;
    font-weight: bold;
}

/* 4. MULTI-COLUMN FREEZE (PO, Site, Vendor, Inv No) */

/* 4a. Common Logic for the first 4 columns */
#im-batch-entry-table th:nth-child(-n+4),
#im-batch-entry-table td:nth-child(-n+4) {
    position: sticky;
    z-index: 15;
    background-color: #f8f9fa;
    border-right: 1px solid #d1d9e6;
}

/* 4b. Header Specifics */
#im-batch-entry-table th:nth-child(-n+4) {
    z-index: 35;
    background-color: #003A5C;
    color: white;
}

/* 4c. Positioning (Recalculated for smaller Site column) */

/* Column 1: PO (Sticks to Left 0) */
#im-batch-entry-table th:nth-child(1), #im-batch-entry-table td:nth-child(1) {
    left: 0;
    min-width: 150px;
}

/* Column 2: Site (REDUCED WIDTH) */
#im-batch-entry-table th:nth-child(2), #im-batch-entry-table td:nth-child(2) {
    left: 150px;       /* Starts where Col 1 ends */
    min-width: 50px;   /* <--- CHANGED: Reduced from 130px to 90px */
}

/* Column 3: Vendor (Adjusted Left Position) */
#im-batch-entry-table th:nth-child(3), #im-batch-entry-table td:nth-child(3) {
    left: 240px;       /* <--- CHANGED: 150px (PO) + 90px (Site) = 240px */
    min-width: 130px;
}

/* Column 4: Inv No (Adjusted Left Position & Font Size) */
#im-batch-entry-table th:nth-child(4), #im-batch-entry-table td:nth-child(4) {
    left: 370px;       /* <--- CHANGED: 240px (Vendor Start) + 130px (Vendor Width) = 370px */
    min-width: 130px;
    border-right: 3px solid #003A5C;
}

/* Optional: Make text inside the Invoice Column (Col 4) smaller to fit "Existing:..." */
#im-batch-entry-table td:nth-child(4) input,
#im-batch-entry-table td:nth-child(4) select {
    font-size: 12px;   /* <--- Smaller font so long text fits */
    padding: 4px;      /* Tighter padding */
}

/* ========================================= */
/* BATCH ENTRY PAGE: FULL MAKEOVER           */
/* ========================================= */

/* 1. Main Page Header */
#im-batch-entry h1 {
    color: #003A5C;
    font-weight: 800;
    border-bottom: 3px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

#im-batch-entry p {
    color: #666;
    margin-bottom: 25px;
}

/* 2. Control Bars (Containers) - WITH Z-INDEX FIX */
#im-batch-po-add-container,
#im-batch-global-controls {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 25px;

    /* CRITICAL: Allow dropdowns to hang out */
    overflow: visible !important;
    position: relative !important;
}

/* 2a. STACKING ORDER (Fixes dropdown going behind) */
#im-batch-po-add-container {
    z-index: 50 !important; /* Top row must be higher */
}

#im-batch-global-controls {
    z-index: 40 !important; /* Bottom row must be lower */
}

/* 3. Input & Dropdown Styling */
#im-batch-po-add-container input,
#im-batch-global-controls input,
#im-batch-global-controls select {
    border: 1px solid #ccc;
    background-color: #f9fbfd;
    border-radius: 6px;
    padding: 0 15px;
    height: 45px;
    line-height: 45px;
    font-size: 0.95rem;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Choices.js Dropdowns - Inner Box */
#im-batch-po-add-container .choices .choices__inner,
#im-batch-global-controls .choices .choices__inner {
    border: 1px solid #ccc !important;
    background-color: #f9fbfd !important;
    border-radius: 6px !important;
    padding: 0 15px !important;

    /* Force Height & Alignment */
    min-height: 45px !important;
    height: 45px !important;

    display: flex !important;
    align-items: center !important;

    font-size: 0.95rem !important;
    color: #333 !important;
}

/* ==========================================================================
   FIX: ALIGN ATTENTION FIELD WITH OTHER INPUTS
   ========================================================================== */

/* 1. RESET THE CONTAINER (Crucial for Alignment) */
.choices {
    box-sizing: border-box !important; /* Include padding/border in width calculation */
    width: 100% !important;            /* Fit parent exactly */
    max-width: 100% !important;        /* DO NOT exceed parent width */
    margin: 0 !important;              /* Remove any default margins pushing it out */
    padding: 0 !important;             /* Remove specific padding on wrapper */
    display: block !important;
}

/* 2. MATCH THE INNER BOX TO STANDARD INPUTS */
.choices__inner {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 38px !important;       /* Standard height */
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: white !important;
    padding: 4px 10px !important;      /* Adjust internal spacing */
}

/* 3. ENSURE DROPDOWN DOESN'T SHIFT WIDTH */
.choices__list.choices__list--dropdown {
    width: 100% !important;            /* Exact match to container */
    margin-left: 0 !important;         /* No shifting left/right */
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Hover Effect (Optional but nice) */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #f2f9fb !important; /* Light teal hover */
    color: #00748C !important;
}

/* Fix Search Input Inside Dropdown */
.choices__list--dropdown .choices__input {
    background-color: #f9f9f9 !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
}

/* Focus State for All Inputs */
#im-batch-po-add-container input:focus,
#im-batch-global-controls input:focus,
#im-batch-global-controls select:focus,
#im-batch-po-add-container .choices.is-focused .choices__inner,
#im-batch-global-controls .choices.is-focused .choices__inner {
    outline: none !important;
    border-color: #003A5C !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 58, 92, 0.1) !important;
}

/* 4. Dropdown Labels */
#im-batch-global-controls label {
    color: #003A5C;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: block;
}

/* 5. Buttons */
#im-batch-entry button {
    height: 45px;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.5px;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

#im-batch-entry button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Button Colors */
#im-batch-add-po-button { background-color: #003A5C; color: white; }
#im-batch-save-button { background-color: #28a745; color: white; }
#im-refresh-batch-button { background-color: #ffffff; color: #555; border: 1px solid #ccc; }

/* ========================================= */
/* GLOBAL HEADER STANDARDIZATION (BOLD & BIG)*/
/* Matches the original Batch Entry Style    */
/* ========================================= */

.workdesk-section h1 {
    /* 1. Brand Blue Color */
    color: #003A5C !important;

    /* 2. Extra Bold & Large (Restored to the style you liked) */
    font-weight: 800 !important;      /* Extra Bold */
    font-size: 2rem !important;       /* Much Bigger */
    letter-spacing: 0.5px !important; /* Slight spacing for impact */

    /* 3. Thicker Divider Line */
    border-bottom: 3px solid #e0e0e0 !important; /* Thicker line */
    padding-bottom: 10px !important;
    margin-bottom: 25px !important;

    /* 4. Use the default font (Removed the system font override) */
    font-family: inherit !important;

    /* 5. Flex Alignment */
    display: flex;
    align-items: baseline; /* Align text by baseline */
    justify-content: space-between;
    gap: 15px;
    margin-top: 0;
}

/* Ensure the "Total Records" text stays small and grey */
.workdesk-section h1 span,
.table-count-display {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #6c757d !important;
    margin-left: 15px;
    letter-spacing: normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; /* Keep count text clean */
}

/* Force specific ID headers to follow suit */
#jobentry-form-title,
#wd-dayview-title,
#im-form-title,
#im-batch-entry h1 {
    font-weight: 800 !important;
    border-bottom: 3px solid #e0e0e0 !important;
    color: #003A5C !important;
}

/* ========================================= */
/* ICON ONLY BUTTONS (For Job Records)       */
/* ========================================= */
.icon-only-btn {
    width: 42px !important;        /* Fixed width */
    height: 40px !important;       /* Fixed height */
    padding: 0 !important;         /* Remove padding so icon centers */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem !important;  /* Slightly larger icon */
    border-radius: 4px;
}

.icon-only-btn i {
    margin-right: 0 !important;    /* Remove spacing usually reserved for text */
}


/* ============================================================= */
/* INVOICE ENTRY MODAL (IM) – Professional Form Layout            */
/* Scoped ONLY to: #im-invoice-entry-modal                        */
/* ============================================================= */

#im-invoice-entry-modal #im-new-invoice-form {
    /* The form is inside a modal; keep it flat and clean */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Grid layout: tidy spacing + better alignment */
#im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 16px 18px;
    align-items: start; /* labels + inputs align nicely */
}

/* Responsive: 2 cols on medium, 1 col on small */
@media (max-width: 980px) {
    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}
@media (max-width: 640px) {
    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Span helpers (set on the .form-group wrappers) */
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-span-2 { grid-column: span 2; }
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-span-3 { grid-column: 1 / -1; }

/* Form group spacing */
#im-invoice-entry-modal #im-new-invoice-form .form-group {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Labels: cleaner + consistent */
#im-invoice-entry-modal #im-new-invoice-form .form-group label {
    margin-bottom: 0 !important;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    color: #495057;
}

/* Required marker (clean + subtle) */
#im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > label::after {
    content: " *";
    color: #d93025;
    font-weight: 700;
}

/* Inputs / selects / textarea: modern field box */
#im-invoice-entry-modal #im-new-invoice-form input[type="text"],
#im-invoice-entry-modal #im-new-invoice-form input[type="number"],
#im-invoice-entry-modal #im-new-invoice-form input[type="date"],
#im-invoice-entry-modal #im-new-invoice-form select,
#im-invoice-entry-modal #im-new-invoice-form textarea {
    margin-bottom: 0 !important; /* kill the global margin-bottom */
    border-radius: 10px;
    border: 1px solid #d6dbe1;
    background: #f8fafc;
    padding: 11px 12px;
    min-height: 44px;
    font-size: 15px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Textarea: nicer default */
#im-invoice-entry-modal #im-new-invoice-form textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.35;
}

/* Focus state */
#im-invoice-entry-modal #im-new-invoice-form input:focus,
#im-invoice-entry-modal #im-new-invoice-form select:focus,
#im-invoice-entry-modal #im-new-invoice-form textarea:focus {
    background: #ffffff;
    border-color: var(--iba-secondary-teal);
    box-shadow: 0 0 0 3px rgba(0, 116, 140, 0.16);
    outline: none;
}

/* Choices.js dropdown (Attention): match field styling */
#im-invoice-entry-modal #im-new-invoice-form .choices__inner {
    margin-bottom: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #d6dbe1 !important;
    background: #f8fafc !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    display: flex;
    align-items: center;
}
#im-invoice-entry-modal #im-new-invoice-form .choices.is-focused .choices__inner {
    background: #ffffff !important;
    border-color: var(--iba-secondary-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 116, 140, 0.16) !important;
}

/* Action icon buttons inside "Invoice Name" / "SRV Name" */
#im-invoice-entry-modal #im-new-invoice-form .form-group a.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 10px !important;
    background-color: var(--iba-secondary-teal) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
#im-invoice-entry-modal #im-new-invoice-form .form-group a.secondary-btn:hover {
    filter: brightness(0.95);
}

/* Validation (visual only): clean red highlight */
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-invalid > label,
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-invalid label {
    color: #b3261e;
}
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-invalid input,
#im-invoice-entry-modal #im-new-invoice-form input.im-invalid,
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-invalid select,
#im-invoice-entry-modal #im-new-invoice-form select.im-invalid,
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-invalid textarea,
#im-invoice-entry-modal #im-new-invoice-form textarea.im-invalid {
    background: #fff5f5 !important;
    border-color: #d93025 !important;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12) !important;
}
#im-invoice-entry-modal #im-attention-group.im-invalid .choices__inner {
    background: #f0c0c4 !important;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12) !important;
}

/* Bottom area: PO search + action buttons */
#im-invoice-entry-modal #im-po-search-container-bottom {
    margin-top: 18px !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid #e9ecef !important;

    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
}
#im-invoice-entry-modal #im-po-search-container-bottom .search-bar-local {
    max-width: none !important;
    margin-bottom: 0 !important;
}
#im-invoice-entry-modal #im-po-search-button-bottom {
    height: 44px;
    border-radius: 10px;
    padding: 0 16px;
    font-weight: 600;
}

/* Action buttons row */
#im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container {
    grid-column: 1 / -1;
    margin-top: 6px !important;
    padding-top: 0 !important;
    border-top: none !important;

    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
#im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container button {
    height: 44px;
    border-radius: 10px;
    padding: 0 16px;
    font-weight: 700;
    min-width: 130px;
}

/* Primary buttons */
#im-invoice-entry-modal #im-add-invoice-button,
#im-invoice-entry-modal #im-update-invoice-button {
    background-color: var(--iba-secondary-teal);
    color: #fff;
    border: none;
}
#im-invoice-entry-modal #im-add-invoice-button:hover,
#im-invoice-entry-modal #im-update-invoice-button:hover {
    filter: brightness(0.95);
}

/* Secondary buttons (Clear / Back) */
#im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container .secondary-btn {
    background-color: #6c757d !important;
    color: #fff !important;
    border: none !important;
}
#im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container .secondary-btn:hover {
    filter: brightness(0.95);
}

/* Mobile: stack search + buttons nicely */
@media (max-width: 640px) {
    #im-invoice-entry-modal #im-po-search-container-bottom {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    #im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container {
        justify-content: stretch;
    }
    #im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container button {
        width: 100%;
        min-width: 0;
    }
}


/* ============================================================
   Invoice Entry Modal – Layout, Fields & Buttons Polish
   (Non-breaking: only affects #im-invoice-entry-modal scope)
   ============================================================ */

/* Grid layout: 3 columns on desktop, 2 on medium, 1 on small */
#im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
}

/* Make sure generic invoice form groups can shrink nicely */
#im-invoice-entry-modal #im-new-invoice-form .form-group {
    min-width: 0;
}

/* Span full width (for long text areas or notes) */
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-span-3 {
    grid-column: 1 / -1;
}

/* Optional two-column span if used anywhere */
#im-invoice-entry-modal #im-new-invoice-form .form-group.im-span-2 {
    grid-column: span 2;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Field boxes – full width & consistent sizing */
#im-invoice-entry-modal #im-new-invoice-form input[type="text"],
#im-invoice-entry-modal #im-new-invoice-form input[type="number"],
#im-invoice-entry-modal #im-new-invoice-form input[type="date"],
#im-invoice-entry-modal #im-new-invoice-form select,
#im-invoice-entry-modal #im-new-invoice-form textarea {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #d6dbe1;
    background: #f8fafc;
    padding: 10px 12px;
    min-height: 40px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Focus state – subtle teal outline */
#im-invoice-entry-modal #im-new-invoice-form input[type="text"]:focus,
#im-invoice-entry-modal #im-new-invoice-form input[type="number"]:focus,
#im-invoice-entry-modal #im-new-invoice-form input[type="date"]:focus,
#im-invoice-entry-modal #im-new-invoice-form select:focus,
#im-invoice-entry-modal #im-new-invoice-form textarea:focus {
    outline: none;
    border-color: #00748C;
    box-shadow: 0 0 0 1px rgba(0, 116, 140, 0.2);
    background: #ffffff;
}

/* Required marker – clean red star on label */
#im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > label::after {
    content: " *";
    color: #d93025;
    font-weight: 600;
}

/* Extra visual cue for required fields: subtle left border */
#im-invoice-entry-modal #im-new-invoice-form .form-group.is-required input,
#im-invoice-entry-modal #im-new-invoice-form .form-group.is-required select,
#im-invoice-entry-modal #im-new-invoice-form .form-group.is-required textarea {
    border-left: 3px solid rgba(217, 48, 37, 0.7);
}

/* Bottom PO search + buttons row – tidy & responsive */
#im-invoice-entry-modal #im-po-search-container-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 5px;
}

/* Make the search bar grow and keep buttons on the right */
#im-invoice-entry-modal #im-po-search-container-bottom .search-bar-local {
    flex: 1 1 260px;
}

/* Buttons box sticks to the right but wraps nicely on mobile */
#im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Mobile tweak – stack search + buttons vertically */
@media (max-width: 768px) {
    #im-invoice-entry-modal #im-po-search-container-bottom {
        flex-direction: column;
        align-items: stretch;
    }
    #im-invoice-entry-modal #im-po-search-container-bottom .form-buttons-container {
        justify-content: flex-start;
    }
}

/* Primary invoice action buttons – rounded & consistent */
#im-add-invoice-button,
#im-update-invoice-button {
    background-color: #00748C;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Secondary actions – light grey pills */
#im-clear-form-button,
#im-back-to-active-task-button {
    background-color: #e9ecef;
    color: #333333;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

/* Hover states */
#im-add-invoice-button:hover,
#im-update-invoice-button:hover {
    background-color: #005f6f;
}

#im-clear-form-button:hover,
#im-back-to-active-task-button:hover {
    background-color: #d6dce2;
}

/* Make sure any icons inside buttons are aligned */
#im-add-invoice-button i,
#im-update-invoice-button i {
    font-size: 14px;
}
/* ========================================= */
/* INVENTORY MODE (Corrected Visibility)     */
/* ========================================= */

/* 1. HIDE Distractions (Dashboard, Settings, Add Job Button) */
body.inventory-mode .wd-nav-dashboard,
body.inventory-mode .wd-nav-taskhistory,
body.inventory-mode #wd-sidebar-add-job-btn,
body.inventory-mode #workdesk-im-link-container,
body.inventory-mode a[data-section="wd-settings"],
body.inventory-mode .wd-nav-im-reporting-mobile {
    display: none !important;
}

/* 2. FORCE SHOW Inventory Tools */
/* Use !important to override any default hiding */
body.inventory-mode .wd-nav-material,    /* Material Stock */
body.inventory-mode .wd-nav-activetask,  /* Active Task */
body.inventory-mode .wd-nav-reporting    /* Job Records */
{
    display: block !important;
    visibility: visible !important;
}

/* 3. Add a separator for cleanliness */
body.inventory-mode .wd-nav-material {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 10px;
    padding-top: 10px;
}

/* 4. Hide Inventory Button on Mobile (Optional) */
@media (max-width: 768px) {
    /* Completely hide the Inventory button on mobile */
    #inventory-button {
        display: none !important;
    }
}
/* === COMPACT MODAL PO DETAILS === */
.im-po-details-compact {
    background-color: #e3f2fd; /* Light Blue background */
    border: 1px solid #90caf9;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.po-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
    gap: 5px 15px;
}

.po-compact-grid label {
    display: inline;
    font-weight: bold;
    color: #003A5C;
    margin-right: 5px;
    font-size: 0.85rem;
}

.po-compact-grid span {
    color: #333;
    font-weight: 500;
}

/* On mobile, stack them */
@media (max-width: 600px) {
    .po-compact-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================================= */
/* COMPACT MODAL V4 (Reduced Width/Length + PO Box)          */
/* ========================================================= */

/* 1. FORCE SMALL WIDTH (This reduces the length of fields) */
#im-invoice-entry-modal .modal-container {
    width: 500px !important;      /* Fixed narrow width */
    max-width: 95vw !important;   /* Mobile safe */
    padding: 15px !important;
}

/* 2. PO DETAILS BOX (The Blue Header) */
.im-po-details-compact {
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 15px;
    font-size: 0.8rem;
    display: block !important; /* Ensure it blocks if visible */
}

/* Grid for the Blue Box info */
.po-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columns */
    gap: 5px 10px;
}

.po-compact-grid div {
    display: flex; /* Keep label and value on same line */
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.po-compact-grid label {
    font-weight: 700;
    color: #003A5C;
    margin-right: 5px;
    margin-bottom: 0 !important;
    font-size: 0.75rem !important;
}

.po-compact-grid span {
    color: #333;
    font-weight: 500;
    font-size: 0.8rem;
}

/* 3. FORM GRID (2 Columns to fit narrow width) */
.form-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px; /* Tight gaps */
}

/* 4. COMPACT INPUTS */
#im-invoice-entry-modal input,
#im-invoice-entry-modal select,
#im-invoice-entry-modal .choices__inner {
    height: 36px !important;       /* Increased from 30px */
    min-height: 36px !important;   /* Increased from 30px */
    padding: 4px 8px !important;   /* Slightly more padding for comfort */
    font-size: 0.85rem !important;
    width: 100%;
}

#im-invoice-entry-modal label {
    font-size: 0.75rem !important;
    margin-bottom: 2px !important;
}

#im-invoice-entry-modal .form-group {
    margin-bottom: 6px !important;
}

/* Note Field stays separate */
#im-invoice-entry-modal textarea {
    height: 40px !important;
    min-height: 40px !important;
}

/* 5. Force Dropdowns UP */
#im-invoice-entry-modal .choices .choices__list--dropdown {
    bottom: 100% !important;
    top: auto !important;
}

/* 6. Bottom Search Bar */
#im-po-search-container-bottom {
    margin-top: 15px !important;
    padding-top: 10px !important;
    border-top: 1px solid #eee;
    justify-content: space-between;
}

#im-po-search-container-bottom .search-bar-local {
    flex: 0 1 180px !important; /* Short search bar */
    min-width: 100px !important;
}

#im-po-search-container-bottom button {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.8rem !important;
}
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}

/* --- MATERIAL STOCK SEARCH & BUTTON LAYOUT --- */

/* 1. The Main Container: Spans full width to push Left/Right groups apart */
#wd-material-stock #ms-search-container {
    display: flex !important;
    justify-content: space-between !important; /* Pushes Left/Right groups to edges */
    align-items: center !important;
    width: 100% !important; /* Must be 100% to fill the screen */
    height: 45px !important; /* Fixed height for perfect alignment */
    margin-bottom: 15px !important;
    gap: 20px !important;
}

/* 2. The Left Group (Search Bar + Clear Button) */
/* We target the first div inside the container */
#wd-material-stock #ms-search-container > div:first-child {
    display: flex !important;
    align-items: stretch !important; /* Force equal height */
    gap: 10px !important;
    flex-grow: 1 !important;
    max-width: 50% !important; /* Restricts search bar length (like your screenshot) */
    height: 100% !important;
}

/* 3. The Right Group (Action Buttons) */
/* We target the last div inside the container */
#wd-material-stock #ms-search-container > div:last-child {
    display: flex !important;
    gap: 5px !important;
    align-items: stretch !important;
    height: 100% !important;
}

/* 4. Inputs & Buttons Inside */
#wd-material-stock #ms-search-container input,
#wd-material-stock #ms-search-container button {
    height: 100% !important; /* Fill the 45px height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 5. Mobile Adjustments */
@media (max-width: 768px) {
    #wd-material-stock #ms-search-container {
        flex-direction: column !important; /* Stack them on phone */
        height: auto !important;
        gap: 10px !important;
    }
    #wd-material-stock #ms-search-container > div:first-child,
    #wd-material-stock #ms-search-container > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        height: 45px !important;
    }
}

/* ============================================================= */
/* MATERIAL STOCK REPORT PRINT STYLES (FIXED V8.8)               */
/* ============================================================= */
@media print {
    /* 1. Page Setup */
    @page {
        size: auto;
        margin: 5mm;
    }

    /* 2. THE SAFETY SWITCH: Only hide everything IF the Stock Report is OPEN */
    /* This fixes the "Blank Page" issue on Invoice Management */
    body:has(#ms-report-modal:not(.hidden)) * {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    /* 3. Make the Stock Report Visible (Only if it's open) */
    #ms-report-modal:not(.hidden),
    #ms-report-modal:not(.hidden) .modal-container,
    #ms-report-modal:not(.hidden) .modal-content,
    #ms-report-modal:not(.hidden) .modal-content * {
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 4. Position the Report */
    #ms-report-modal:not(.hidden) {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        z-index: 999999 !important;
        display: block !important;
    }

    #ms-report-modal:not(.hidden) .modal-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    #ms-report-modal:not(.hidden) .modal-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 5. Hide Interface Buttons (Close, Print, Excel) */
    #ms-report-modal .modal-header button,
    #ms-report-modal .modal-footer,
    #ms-report-modal .modal-close-btn {
        display: none !important;
    }

    #ms-report-modal:not(.hidden) .print-only-header { display: block !important; }

    /* 6. Header Styling */
    #ms-report-modal:not(.hidden) .modal-header h2 {
        color: #003A5C !important;
        font-size: 18pt !important;
        border-bottom: 2px solid #003A5C !important;
        padding-bottom: 10px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    /* 7. Table Layout */
    #ms-report-modal:not(.hidden) table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        page-break-inside: auto !important;
    }

    #ms-report-modal:not(.hidden) thead {
        display: table-header-group !important;
    }

    #ms-report-modal:not(.hidden) tr {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }

    #ms-report-modal:not(.hidden) th {
        background-color: #003A5C !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        padding: 8px 4px !important;
        font-size: 10pt !important;
        border: 1px solid #ccc !important;
        white-space: nowrap !important;
    }

    #ms-report-modal:not(.hidden) td {
        border: 1px solid #eee !important;
        border-bottom: 1px solid #ccc !important;
        padding: 6px 4px !important;
        font-size: 9pt !important;
        color: #000 !important;
        vertical-align: top !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 8. Column Widths */
    #ms-report-modal:not(.hidden) th:nth-child(1),
    #ms-report-modal:not(.hidden) td:nth-child(1) {
        width: 1% !important;
        white-space: nowrap !important;
    }

    #ms-report-modal:not(.hidden) th:nth-child(2),
    #ms-report-modal:not(.hidden) td:nth-child(2) {
        width: auto !important;
        max-width: 200px;
    }

    #ms-report-modal:not(.hidden) th:nth-child(3),
    #ms-report-modal:not(.hidden) td:nth-child(3) {
        width: 1% !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #ms-report-modal:not(.hidden) th:nth-child(4),
    #ms-report-modal:not(.hidden) td:nth-child(4) {
        width: auto !important;
        word-break: break-word !important;
    }
}
/* Indicate that the header can be dragged */
.modal-header {
    cursor: move;
}
/* ========================================= */
/* ACTIVE TASK HEARTBEAT ANIMATION           */
/* ========================================= */

@keyframes heartbeat-nav {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(195, 80, 47, 0.7); } /* Terracotta Color */
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(195, 80, 47, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(195, 80, 47, 0); }
}

/* The class we will toggle with JavaScript */
.nav-pulse-active {
    animation: heartbeat-nav 2s infinite !important;
    background-color: #fff0ed !important; /* Light Red Tint Background */
    color: #C3502F !important; /* Terracotta Text */
    font-weight: 800 !important;
    border-left: 4px solid #C3502F !important;
}

/* Ensure the icon animates too */
.nav-pulse-active i {
    color: #C3502F !important;
}

/* ========================================= */
/* COMPACT PRINT                             */
/* ========================================= */

@media print {
    /* 1. Minimize Page Margins to give the table more room */
    @page {
        margin: 0.5cm;
        size: auto;
    }

    /* 2. Force the container to fit the page width */
    body, table, .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 3. CRITICAL: Squeeze the columns */
    th, td {
        padding: 4px 2px !important; /* Drastically reduces space inside cells */
        font-size: 10px !important;  /* Reduces font size to fit more text */
        white-space: nowrap;         /* Keeps numbers on one line */
    }

    /* 4. Hide unnecessary elements if any (like sidebars/buttons) */
    .no-print {
        display: none !important;
    }
}

/* ========================================= */
/* APPROVED SIDEBAR ITEM STYLES (GREEN)      */
/* ========================================= */

.im-sidebar-item.status-approved {
    background-color: #e8f5e9 !important; /* Very Light Green Background */
    border-left: 4px solid #28a745 !important; /* Solid Green Left Border */
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2); /* Subtle Green Glow */
    transition: all 0.2s ease;
}

.im-sidebar-item.status-approved:hover {
    background-color: #d4edda !important; /* Slightly Darker Green on Hover */
    transform: translateY(-2px); /* Tiny lift effect */
}

/* Make the PO Number Text Dark Green */
.im-sidebar-item.status-approved .im-sidebar-po {
    color: #155724 !important;
    font-weight: 700;
}

/* Make the Vendor Name Darker for contrast */
.im-sidebar-item.status-approved .im-sidebar-vendor {
    color: #2f4f35 !important;
}

/* Style the checkmark icon */
.im-sidebar-item.status-approved i.fa-circle-check {
    font-size: 1rem;
    vertical-align: middle;
}
/* --- UNIQUE PINK STYLE FOR INVOICE ENTRY NAV --- */
/* Target specific link in Invoice Management Sidebar */
#im-nav li a[data-section="im-invoice-entry"] {
    color: #FF007F !important; /* Bright Pucha/Fuchsia Pink */
    background-color: rgba(255, 0, 127, 0.05); /* Very faint pink background */
    border-left: 4px solid #FF007F !important; /* Pink accent border */
    font-weight: 700; /* Make it bold */
    transition: all 0.3s ease;
}

/* Hover State - Cool Glow */
#im-nav li a[data-section="im-invoice-entry"]:hover {
    background: linear-gradient(45deg, #FF007F, #ff4081) !important; /* Pink Gradient */
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 0, 127, 0.4); /* Pink Glow Effect */
    transform: translateX(5px); /* Slight pop-out movement */
}

/* Active State (When you are on the page) */
#im-nav li a[data-section="im-invoice-entry"].active {
    background: #FF007F !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 0, 127, 0.3);
    border-left: 4px solid #b30059 !important; /* Darker pink border */
}

/* Force Icon to match text color */
#im-nav li a[data-section="im-invoice-entry"] i {
    color: inherit !important;
}

/* --- INVOICE MODAL TOOLBAR FIX --- */

.im-toolbar-row {
    display: flex;
    justify-content: space-between; /* Pushes Search to Left, Buttons to Right */
    align-items: center;
    width: 100%;
}

.im-compact-search {
    width: 180px !important; /* Forces the search bar to be short */
    height: 38px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 0 !important; /* Removes default margin */
}

.im-toolbar-buttons {
    display: flex;
    gap: 10px; /* Space between buttons */
}

.im-toolbar-buttons button {
    height: 38px;
    padding: 0 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important; /* Ensures buttons line up perfectly */
}

/* --- FIX: Make Active Jobs Sidebar Accessible Over Modal --- */

#im-entry-sidebar {
    /* 1. Raise it above the modal overlay (which is usually z-index 1000-9999) */
    z-index: 10005 !important;

    /* 2. Ensure it positions correctly to accept clicks */
    position: right;
}

/* Optional: Ensure the modal overlay sits just behind it */
.modal-overlay {
    z-index: 9999 !important;
}

/* ======================================================= */
/* NEW MODAL STYLING (Red Fields & Green Search)          */
/* ======================================================= */

/* --- 1. THE RED GROUP (Invoice Details, Status, Attention) --- */
#im-inv-no,
#im-inv-value,
#im-invoice-date,
#im-status,
#im-attention {
    border: 2px solid #dc3545 !important;    /* Red Border */
    background-color: rgba(220, 53, 69, 0.05) !important; /* Faint Red Background */
    color: #000;
    transition: all 0.3s ease;
}

/* Red Glow on Focus */
#im-inv-no:focus,
#im-inv-value:focus,
#im-invoice-date:focus,
#im-status:focus,
#im-attention:focus {
    background-color: rgba(220, 53, 69, 0.1) !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.25) !important; /* Red Glow */
    outline: none;
}


/* --- 2. THE DARK GREEN SEARCH BAR --- */
#im-po-search-input-bottom {
    border: 2px solid #006400 !important;    /* Dark Green Border */
    background-color: rgba(0, 100, 0, 0.05) !important; /* Very faint Green Background */
    color: #000;
    transition: all 0.3s ease;
}

/* Green Glow on Focus */
#im-po-search-input-bottom:focus {
    background-color: rgba(0, 100, 0, 0.1) !important;
    box-shadow: 0 0 10px rgba(0, 100, 0, 0.3) !important; /* Green Glow */
    outline: none;
}

/* ============================================================ */
/* FORCE ATTENTION DROPDOWN RED (Nuclear Option)                */
/* ============================================================ */

/* 1. Target the box using the Modal ID + Group ID (Very High Priority) */
#im-invoice-entry-modal #im-attention-group .choices__inner {
    border: 2px solid #FF0000 !important;       /* Bright Red */
    background-color: rgba(255, 0, 0, 0.05) !important; /* Red Tint */
    color: #000 !important;
    opacity: 1 !important;
}

/* 2. Target the search input text inside it */
#im-invoice-entry-modal #im-attention-group .choices__input {
    background-color: transparent !important;
    color: #000 !important;
}

/* 3. Ensure the dropdown icon is visible/colored */
#im-invoice-entry-modal #im-attention-group .choices::after {
    border-color: #FF0000 transparent transparent transparent !important;
    opacity: 1 !important;
}

/* 4. Keep it Red when Open/Focused */
#im-invoice-entry-modal #im-attention-group .choices.is-focused .choices__inner,
#im-invoice-entry-modal #im-attention-group .choices.is-open .choices__inner {
    border-color: #FF0000 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3) !important;
}

/* ======================================================= */
/* NEW FIELD COLORS (Yellow & Grey)                       */
/* ======================================================= */

/* --- 2. THE GREY GROUP (Rest of the fields: Release, Details, Note) --- */
#im-release-date,
#im-details,
#im-amount-paid,
#im-note,
#im-inv-name,
#im-srv-name,
#im-report-name,
#im-inv-entry-id {
    border: 2px solid #adb5bd !important;    /* Standard Grey */
    background-color: rgba(0, 0, 0, 0.02) !important; /* Very Faint Grey */
    color: #000;
    transition: all 0.3s ease;
}
/* --- MODERN INVOICE PAGE STYLES --- */


/* ------------------------------------------------------------------ */
/* Invoice Management → Invoice Records: Totals Footer Card (v6.4.2)    */
/* ------------------------------------------------------------------ */
.im-reporting-totals-card {
    background: #ffffff;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    margin-top: 14px;
}

.im-reporting-totals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.im-reporting-total-item {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f9fbfd;
    border: 1px solid #e1e5ea;
}

.im-reporting-total-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8898aa;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.im-reporting-total-value {
    font-size: 18px;
    font-weight: 800;
    color: #111;
}

.im-reporting-total-value.im-total-owed {
    color: #dc3545;
}

.im-reporting-total-value.im-total-ok {
    color: #28a745;
}

@media (max-width: 768px) {
    .im-reporting-totals-grid {
        grid-template-columns: 1fr;
    }
}
/* 1. The Container for Filters (The White Card) */
.invoice-controls-card {
    background: #ffffff;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* Soft Shadow */
    margin-bottom: 25px;
    border: 1px solid #f0f0f0;
}

/* 2. Grid Layout: Aligns items in a row */
.invoice-filter-grid {
    display: grid;
    /* Columns: Search (Wide) | Site | Status | Date | Buttons (Auto) */
    grid-template-columns: 2fr 1.2fr 1fr 1fr auto;
    gap: 15px;
    align-items: center;
}

/* 3. Modern Input & Select Fields */
.modern-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    background-color: #f9fbfd; /* Very light blue/gray */
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}

.modern-input:focus {
    background-color: #fff;
    border-color: #00748C; /* Your Brand Color */
    box-shadow: 0 0 0 3px rgba(0, 116, 140, 0.1);
    outline: none;
}

/* 4. Labels (Small & Uppercase) */
.filter-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8898aa;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

/* 5. Modern Buttons */
.modern-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
}

.btn-primary-modern {
    background: linear-gradient(135deg, #00748C, #005a6e);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 116, 140, 0.3);
}

.btn-secondary-modern {
    background: #fff;
    border: 1px solid #e1e5ea;
    color: #555;
}

.modern-btn:hover {
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* 6. Table Polish */
#im-invoices-table {
    border-collapse: separate;
    border-spacing: 0 8px; /* Space between rows */
}
#im-invoices-table thead th {
    border: none;
    background: transparent;
    color: #8898aa;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    padding: 15px;
}
#im-invoices-table tbody tr {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: transform 0.2s;
}
#im-invoices-table tbody tr:hover {
    transform: scale(1.005); /* Slight pop on hover */
    z-index: 2;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
#im-invoices-table td {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
#im-invoices-table td:first-child { border-left: 1px solid #f0f0f0; border-radius: 8px 0 0 8px; }
#im-invoices-table td:last-child { border-right: 1px solid #f0f0f0; border-radius: 0 8px 8px 0; }

/* Responsive adjustments for mobile */
@media (max-width: 992px) {
    .invoice-filter-grid {
        grid-template-columns: 1fr 1fr; /* 2 cols on tablet */
    }
}
@media (max-width: 576px) {
    .invoice-filter-grid {
        grid-template-columns: 1fr; /* 1 col on mobile */
    }
}

/* NOTE:
   The invoice reporting and summary note pages already have dedicated,
   well-tested print styles earlier in this file.
   Avoid adding global "hide everything" print overrides here, because they
   can cause other print views (e.g., Summary Note) to render as a blank page.
*/

/* ======================================================== */
/* INVOICE PRINT PREVIEW (MODAL) - SAFE PRINT STYLES         */
/* This supports printing from the "Print Preview" modal     */
/* without breaking Summary Note / Invoice Records printing  */
/* ======================================================== */
#im-print-modal-body table { width: 100%; border-collapse: collapse; font-size: 11px; }
#im-print-modal-body th { background: #eee !important; color: black !important; border: 1px solid #000; padding: 5px; }
#im-print-modal-body td { border: 1px solid #ccc; padding: 5px; color: black; }

@media print {
    /* Only activate these rules if the modal is actually open */
    #im-invoice-print-modal:not(.hidden),
    #im-invoice-print-modal:not(.hidden) * {
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    #im-invoice-print-modal:not(.hidden) {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        background: white !important;
        z-index: 999999 !important;
    }

    /* Hide modal chrome (buttons/close) when printing */
    #im-invoice-print-modal:not(.hidden) .modal-header,
    #im-invoice-print-modal:not(.hidden) .modal-footer {
        display: none !important;
    }

    /* Ensure table layout prints as a real table */
    #im-invoice-print-modal:not(.hidden) #im-print-modal-body table { display: table !important; }
    #im-invoice-print-modal:not(.hidden) #im-print-modal-body tr { display: table-row !important; }
    #im-invoice-print-modal:not(.hidden) #im-print-modal-body th,
    #im-invoice-print-modal:not(.hidden) #im-print-modal-body td { display: table-cell !important; }
}


/* When printable area is NOT hidden, hide the placeholder message */
#summary-note-printable-area:not(.hidden) + #summary-placeholder-msg {
    display: none !important;
}

/* --- EXACT FIT PRINT STYLES --- */
@media print {
    /* 1. Reset Page Margins to Minimum */
    @page {
        margin: 5mm; /* Minimum safe margin for most printers */
        size: auto;  /* Auto paper size */
    }

    /* 2. Hide Everything Else */
    body * {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    /* 3. Show Only the Summary Note */
    #summary-note-printable-area,
    #summary-note-printable-area * {
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 4. Position & Fit the Report EXACTLY */
    #summary-note-printable-area {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;   /* Stretch to full width */
        margin: 0 !important;     /* No extra margin */
        padding: 0 !important;    /* No extra padding inside */
        box-shadow: none !important;
        background: white !important;

        /* Optional: Force fit on one page if content is slightly long */
        page-break-inside: avoid;
    }

    /* 5. Hide the Sidebar Layout */
    #im-summary-note {
        display: block !important;
        height: auto !important;
        position: static !important;
    }
}

/* ==========================================================================
   Inventory Job Records: Group by Control ID (Collapsible)
   ========================================================================== */
.inventory-group-row {
    background: rgba(0, 58, 92, 0.06);
    font-weight: 700;
    cursor: pointer;
}
.inventory-group-row:hover {
    background: rgba(0, 58, 92, 0.10);
}
.inventory-group-row td {
    border-top: 2px solid rgba(0, 58, 92, 0.35);
}
.inventory-group-row .group-toggle-icon {
    display: inline-block;
    width: 16px;
    margin-right: 6px;
    color: #003A5C;
}
.inventory-group-row .group-count-badge {
    margin-left: 6px;
    color: #555;
    font-weight: 600;
}
.inventory-child-row td:first-child {
    padding-left: 28px;
}


/* ============================
   Inventory Active Tasks: Control ID grouping (accordion)
   ============================ */
.controlid-group-header {
  cursor: pointer;
}
.controlid-group-header:hover {
  filter: brightness(0.98);
}
.controlid-group-header .group-toggle-icon {
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}
.controlid-group-header.open .group-toggle-icon {
  transform: rotate(90deg);
}
.controlid-group-count {
  color: #666;
  font-weight: 600;
  margin-left: 6px;
}
.controlid-group-hint,
.controlid-group-total-label {
  color: #777;
  font-size: 0.85em;
}
.controlid-group-child .controlid-child-marker {
  display: inline-block;
  margin-right: 8px;
  color: #999;
}
.controlid-group-child td {
  border-top: none;
}


/* ======================================================== */
/* Live Chat Widget (Global)                                */
/* ======================================================== */
.live-chat-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999999;
    color: rgba(255,255,255,0.95);
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.95), rgba(16, 185, 129, 0.85));
    box-shadow: 0 18px 45px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.live-chat-fab:hover { transform: translateY(-1px); box-shadow: 0 22px 55px rgba(0,0,0,0.30); }
.live-chat-fab.hidden { display: none !important; }
.live-chat-fab.has-unread { animation: liveChatPulse 1.2s ease-in-out infinite; }

@keyframes liveChatPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.live-chat-unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(220, 38, 38, 0.95);
    border: 1px solid rgba(255,255,255,0.25);
}
.live-chat-unread-badge.hidden { display: none !important; }

.live-chat-panel {
    position: fixed;
    right: 22px;
    bottom: 90px;
    width: 360px;
    max-width: calc(100vw - 44px);
    height: 520px;
    max-height: calc(100vh - 140px);
    z-index: 999999;
    border-radius: 22px;
    overflow: hidden;
    /* Glass style */
    background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.25));
    border: 1px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 24px 70px rgba(0,0,0,0.30);
    display: flex;
    flex-direction: column;
}
.live-chat-panel.hidden { display: none !important; }

.live-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(12, 74, 110, 0.85);
    color: rgba(255,255,255,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.live-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.live-chat-header-actions { display: flex; gap: 8px; }
.live-chat-icon-btn {
    width: 34px;
    height: 30px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.95);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.live-chat-icon-btn:hover { background: rgba(255,255,255,0.18); }

.live-chat-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 10px;
    background: rgba(255,255,255,0.16);
    border-bottom: 1px solid rgba(15,23,42,0.10);
}
.live-chat-pill {
    border: 1px solid rgba(15,23,42,0.12);
    background: rgba(255,255,255,0.20);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    color: rgba(15,23,42,0.85);
}
.live-chat-pill:hover { background: rgba(255,255,255,0.30); }
.live-chat-room-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(15,23,42,0.60);
}

.live-chat-online-list {
    padding: 10px 12px;
    max-height: 180px;
    overflow: auto;
    background: rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(15,23,42,0.10);
}
.live-chat-online-list.hidden { display: none !important; }

.live-chat-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 14px;
}
.live-chat-user:hover { background: rgba(255,255,255,0.18); }
.live-chat-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 74, 110, 0.15);
    border: 1px solid rgba(12, 74, 110, 0.18);
    color: rgba(12, 74, 110, 0.85);
}
.live-chat-user-info { flex: 1; min-width: 0; }
.live-chat-user-name {
    font-weight: 800;
    font-size: 13px;
    color: rgba(15,23,42,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-chat-user-meta {
    font-size: 11px;
    color: rgba(15,23,42,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-chat-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.95);
    box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
}
.live-chat-me {
    margin-left: 6px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(12, 74, 110, 0.12);
    border: 1px solid rgba(12, 74, 110, 0.14);
    color: rgba(12,74,110,0.9);
    font-weight: 800;
}
.live-chat-empty {
    font-size: 12px;
    color: rgba(15,23,42,0.60);
    padding: 6px 2px;
}

.live-chat-messages {
    flex: 1;
    padding: 12px 12px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.live-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 92%;
    gap: 6px;
}
.live-chat-msg.me { margin-left: auto; align-items: flex-end; }
.live-chat-msg.them { margin-right: auto; align-items: flex-start; }

.live-chat-msg-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: rgba(15,23,42,0.55);
}
.live-chat-msg-who { font-weight: 800; color: rgba(15,23,42,0.70); }
.live-chat-msg-time { font-weight: 700; }

.live-chat-msg-bubble {
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,0.10);
    background: rgba(255,255,255,0.30);
    color: rgba(15,23,42,0.90);
    white-space: pre-wrap;
    word-break: break-word;
}
.live-chat-msg.me .live-chat-msg-bubble {
    background: rgba(12, 74, 110, 0.14);
    border-color: rgba(12, 74, 110, 0.18);
}

.live-chat-inputbar {
    display: flex;
    gap: 10px;
    padding: 12px 12px;
    background: rgba(255,255,255,0.18);
    border-top: 1px solid rgba(15,23,42,0.10);
}
.live-chat-inputbar input {
    flex: 1;
    border: 1px solid rgba(15,23,42,0.12);
    background: rgba(255,255,255,0.55);
    border-radius: 14px;
    padding: 10px 12px;
    outline: none;
    color: rgba(15,23,42,0.90);
}
.live-chat-inputbar input:focus {
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
    border-color: rgba(16,185,129,0.40);
}
.live-chat-inputbar button {
    width: 44px;
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 14px;
    background: rgba(12, 74, 110, 0.85);
    color: #fff;
    cursor: pointer;
}
.live-chat-inputbar button:hover { background: rgba(12, 74, 110, 0.95); }

@media (max-width: 480px) {
    .live-chat-panel {
        right: 12px;
        bottom: 76px;
        width: calc(100vw - 24px);
        height: min(520px, calc(100vh - 120px));
    }
    .live-chat-fab { right: 12px; bottom: 12px; }
}

/* --- v6.3.8: Version display in dashboard welcome card + mobile login --- */
.dashboard-version-display {
    font-size: 0.8rem;
    color: #a0aec0;
    margin-top: 4px;
}
.mobile-login-form-wrapper .version-display {
    margin-bottom: 0; /* avoid overlap with footer link on mobile */
}

/* --- v6.3.9: Cyberpunk login style (neon glow + glossy glass) --- */
.cyber-login-card {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible; /* allow outer glow */
}

/* Neon gradient border (works for both desktop login card and mobile wrapper) */
.cyber-login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 180, 0.95),
        rgba(0, 210, 255, 0.90),
        rgba(120, 70, 255, 0.90),
        rgba(0, 255, 180, 0.95)
    );
    background-size: 320% 100%;
    animation: ibaEdgeFlow 7s linear infinite;
    opacity: 0.85;
    pointer-events: none;

    /* Show as border only */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Outer glow around the card */
.cyber-login-card::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 180, 0.70),
        rgba(0, 210, 255, 0.65),
        rgba(120, 70, 255, 0.65),
        rgba(0, 255, 180, 0.70)
    );
    background-size: 320% 100%;
    animation: ibaEdgeFlow 7s linear infinite;
    filter: blur(18px);
    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
}

/* Stronger glossy glass effect for the DESKTOP login card only */
#login-view .desktop-only-login.cyber-login-card {
    background:
        radial-gradient(circle at 25% 18%, rgba(255,255,255,0.20), rgba(255,255,255,0) 48%),
        radial-gradient(circle at 80% 75%, rgba(0,255,220,0.12), rgba(0,0,0,0) 55%),
        linear-gradient(135deg, rgba(12, 14, 20, 0.55), rgba(12, 14, 20, 0.18));
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 30px 80px rgba(0,0,0,0.48);
}

/* Darker, cyber inputs + button (desktop login only) */
#login-view .desktop-only-login.cyber-login-card input {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    color: rgba(255,255,255,0.92);
}
#login-view .desktop-only-login.cyber-login-card input::placeholder {
    color: rgba(255,255,255,0.55);
}
#login-view .desktop-only-login.cyber-login-card input:focus {
    border-color: rgba(0, 255, 220, 0.70);
    box-shadow: 0 0 0 4px rgba(0, 255, 220, 0.12);
}

#login-view .desktop-only-login.cyber-login-card button {
    width: 100%;
    border-radius: 14px;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(0, 255, 210, 0.85), rgba(0, 140, 255, 0.85));
    box-shadow:
        0 10px 22px rgba(0, 255, 210, 0.10),
        0 10px 22px rgba(0, 140, 255, 0.10);
}
#login-view .desktop-only-login.cyber-login-card button:hover {
    filter: brightness(1.05);
}

/* --- v6.3.10: Cyberpunk theme for DASHBOARD welcome card (desktop & mobile) --- */
#dashboard-view .cyber-dashboard-card {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible; /* allow neon aura */

    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.16), rgba(255,255,255,0) 48%),
        radial-gradient(circle at 78% 72%, rgba(0,255,220,0.10), rgba(0,0,0,0) 56%),
        linear-gradient(135deg, rgba(10, 12, 18, 0.55), rgba(10, 12, 18, 0.22));

    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 26px 70px rgba(0,0,0,0.45);
}

#dashboard-view .cyber-dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 180, 0.92),
        rgba(0, 210, 255, 0.88),
        rgba(120, 70, 255, 0.88),
        rgba(0, 255, 180, 0.92)
    );
    background-size: 320% 100%;
    animation: ibaEdgeFlow 7s linear infinite;
    opacity: 0.78;
    pointer-events: none;

    /* Border-only mask */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

#dashboard-view .cyber-dashboard-card::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 180, 0.55),
        rgba(0, 210, 255, 0.52),
        rgba(120, 70, 255, 0.52),
        rgba(0, 255, 180, 0.55)
    );
    background-size: 320% 100%;
    animation: ibaEdgeFlow 7s linear infinite;
    filter: blur(20px);
    opacity: 0.32;
    z-index: -1;
    pointer-events: none;
}

/* =====================================================
   IM Help Center
   ===================================================== */
.im-help-results .im-help-card {
  background: #ffffff;
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.im-help-results .im-help-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.im-help-results .im-help-title h3 {
  margin: 0;
  font-size: 16px;
}

.im-help-results .im-help-badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  white-space: nowrap;
}

.im-help-results .im-help-snippet {
  color: #1f2937;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

.im-help-results .im-help-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.im-help-meta {
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e6e8ee;
  border-radius: 10px;
}


/* Help Center tabs */
.im-help-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.im-help-tab-btn {
  border: 1px solid #e6e8ee;
  background: #ffffff;
  color: #0f172a;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.im-help-tab-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.im-help-tab-panel.hidden {
  display: none;
}

.im-help-inline-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.im-help-muted {
  color: #64748b;
  font-size: 13px;
}

/* =========================================================
   Workdesk: Invoice Job Vendor Autocomplete (Fallback)
   - Keeps existing logic intact
   - Provides a visible suggestion dropdown even on browsers
     where <datalist> is unreliable.
   ========================================================= */

.vendor-suggest-box {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background: #ffffff;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 9999;
}

/* Render vendor suggestions into <body> to avoid clipping inside modals */
.vendor-suggest-portal {
  position: fixed;
  z-index: 10000;
}

.vendor-suggest-box.hidden {
  display: none;
}

.vendor-suggest-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.2;
}

.vendor-suggest-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.vendor-suggest-muted {
  padding: 8px 10px;
  color: #666;
  font-size: 0.85rem;
}

/* --- GITHUB INVOICE RECORDS UI --- */
.header-top { display: flex; justify-content: space-between; align-items: center; }
.header-title { display: flex; align-items: center; gap: 15px; }
.icon-wrapper { background: linear-gradient(135deg, #003A5C, #00748C); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 116, 140, 0.2); }

.search-box { position: relative; margin-bottom: 15px; width: 100%; }
.search-box i.search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 18px; }
.search-box input { width: 100%; padding: 18px 20px 18px 55px; border: 2px solid #e2e8f0; border-radius: 14px; font-size: 16px; box-sizing: border-box; transition: all 0.3s ease; background-color: #f8fafc; color: #1e293b; }
.search-box input:focus { outline: none; border-color: #00748C; background-color: #fff; box-shadow: 0 0 0 4px rgba(0, 116, 140, 0.1); }

.controls-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; background: #f8fafc; padding: 15px; border-radius: 14px; border: 1px solid #e2e8f0; }
.filter-group { display: flex; gap: 10px; flex: 1; min-width: 300px; flex-wrap: wrap; }
.filter-group select { flex: 1; min-width: 130px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; outline: none; height: 45px; }

.action-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.primary-btn, .secondary-btn, .print-btn { height: 45px; padding: 0 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; border: none; transition: 0.2s; }
.primary-btn { background-color: #00748C; color: white; }
.primary-btn:hover { background-color: #005a6e; }
.secondary-btn { background-color: #e2e8f0; color: #475569; }
.secondary-btn:hover { background-color: #cbd5e1; }

.print-actions { display: flex; gap: 8px; border-left: 2px solid #cbd5e1; padding-left: 10px; margin-left: 5px; }
.print-btn { background-color: #fff; border: 1px solid #cbd5e1; color: #334155; }
.print-btn:hover { background-color: #f1f5f9; border-color: #94a3b8; }
.wd-job-records-print-button:disabled {
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none;
}
.wd-job-records-print-header,
.wd-job-records-print-table-wrap {
    display: none;
}
.detailed-btn { color: #00748C; border-color: #00748C; }
.detailed-btn:hover { background-color: #f0f9ff; }

/* Grid Table */
.grid-header { display: flex; padding: 0 20px 12px 20px; border-bottom: 2px solid #e2e8f0; color: #64748b; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.grid-cell { flex: 1; padding-right: 10px; overflow: hidden; }
.grid-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.invoice-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; transition: all 0.2s ease; overflow: hidden; }
.invoice-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.master-grid-row { display: flex; align-items: center; padding: 16px 20px; cursor: pointer; background: transparent; }
.master-grid-row .grid-cell { font-size: 14px; font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 15px; }
.detail-grid-row { display: none; padding: 20px 20px 20px 70px; background-color: #f8fafc; border-top: 1px solid #e2e8f0; box-shadow: inset 0 3px 6px -3px rgba(0,0,0,0.05); }
.invoice-card.expanded .detail-grid-row { display: block; }
.invoice-card.expanded { border-color: #00748C; box-shadow: 0 4px 15px rgba(0, 116, 140, 0.1); margin: 5px 0; }

.status-badge { display: inline-flex; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.status-badge.Epicore { background: #dbeafe; color: #0284c7; }

/* Highlight Classes */
.highlight-open-balance { border-left: 4px solid #f59e0b !important; }
.highlight-partial { background-color: #d9eef2 !important; }
.highlight-fully-paid { background-color: #f7f3d9 !important; border-left: 4px solid #10b981 !important; }
.highlight-negative-balance { border-left: 4px solid #ef4444 !important; background-color: #fef2f2 !important; }

/* Grand Summary Output for Print */
.print-summary-box { display: flex; justify-content: flex-end; margin-top: 30px; page-break-inside: avoid; }
.print-summary-table { border-collapse: separate; border-spacing: 0; width: 340px; border: 1px solid #003A5C !important; border-radius: 8px; overflow: hidden; }
.print-summary-table td { padding: 10px 12px; font-size: 10px; color: #334155; border-bottom: 1px solid #e2e8f0; }
.print-summary-table td:first-child { font-weight: 800; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px;}
.print-summary-table td:last-child { text-align: right; font-family: monospace; font-size: 13px; font-weight: 800; }
.balance-row { background-color: #003A5C !important; color: #ffffff !important; }
.balance-row td { border-bottom: none; }

/* --- MODERN INNER TABLE STYLING --- */
.modern-inner-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #ffffff; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; margin-top: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.modern-inner-table thead { background-color: #f8fafc; }
.modern-inner-table th { padding: 12px 15px; text-align: left; color: #475569; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e2e8f0; }
.modern-inner-table th.right-align { text-align: right; }
.modern-inner-table td { padding: 12px 15px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.modern-inner-table tbody tr:hover td { background-color: #f8fafc; }
.modern-inner-table tbody tr:last-child td { border-bottom: none; }
.modern-inner-table tfoot td { background-color: #f8fafc; border-top: 2px solid #e2e8f0; font-size: 12px; }

/* Modernize Action Buttons Inside the Table */
.modern-action-group { display: flex; gap: 6px; align-items: center; }
.modern-action-group .action-btn { padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); text-decoration: none; cursor: pointer;}
.modern-action-group .action-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.1); }
.modern-action-group .edit-inv-no-btn { background-color: #e2e8f0; color: #475569; }
.modern-action-group .edit-inv-no-btn:hover { background-color: #cbd5e1; color: #1e293b; }
.modern-action-group .invoice-pdf-btn { background-color: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.modern-action-group .srv-pdf-btn { background-color: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.modern-action-group .history-btn { background-color: #f1f5f9; color: #64748b; }

/* ============================================================
   INVOICE RECORDS - FINAL FIX (DESKTOP & MOBILE)
   ============================================================ */

/* --- 1. DESKTOP VIEW STYLES --- */
.im-reporting-container {
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    margin-top: 20px;
    overflow-x: auto; /* Allows scrolling if it gets too wide */
}

.im-reporting-grid {
    display: flex;
    flex-direction: column;
    min-width: 1000px; /* Keeps it looking like a table on Desktop */
}

/* This creates the 8 columns for Desktop */
.im-reporting-grid-header,
.im-reporting-grid-row {
    display: grid !important;
    grid-template-columns: 80px 140px 110px 120px 120px 110px 140px 1fr !important;
    border-bottom: 1px solid #d0d7de;
}

.im-reporting-grid-cell {
    padding: 12px 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    border-right: 1px solid #f1f5f9;
}

/* Master PO Header (The dark blue one) */
.im-reporting-po-master {
    background-color: #f1f5f9 !important;
    font-weight: 800 !important;
    color: #003A5C !important;
}

/* Grand Total Box (Desktop) */
.summary-wrapper {
    background: linear-gradient(135deg, #003A5C 0%, #00748C 100%) !important;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 35px;
    margin: 30px 0;
    color: white !important;
    box-shadow: 0 10px 25px rgba(0, 58, 92, 0.2);
}

.summary-stats-group {
    display: flex;
    gap: 40px;
}

/* Add to style.css */
button[title="Inquire / Request Update via WhatsApp"] {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    padding: 5px;
}

button[title="Inquire / Request Update via WhatsApp"]:hover {
    transform: scale(1.1);
    /* Subtle glow matching your secondary teal */
    filter: drop-shadow(0 0 3px var(--iba-secondary-teal));
}

/* ==========================================================================
   THE EXACT SCREENSHOT MATCH (Ultra-Minimalist 4-Corner Cards)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. STACK THE SEARCH BAR PROPERLY */
    .im-reporting-filters, #im-reporting-filters {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .im-reporting-filters input,
    .im-reporting-filters select,
    .im-reporting-filters button {
        width: 100% !important;
        height: 48px !important;
        box-sizing: border-box !important;
    }

    /* Hide the junk buttons completely */
    button:has(i.fa-cloud-arrow-down), .fa-cloud-arrow-down,
    button[onclick*="efresh"], button[onclick*="ummary"], button[onclick*="etailed"] {
        display: none !important;
    }

    /* 2. HIDE DESKTOP HEADERS */
    html body div[id*="report"] table thead,
    html body div[id*="record"] table thead {
        display: none !important;
    }

    /* 3. BUILD THE EXACT 4-CORNER CARD FROM YOUR SCREENSHOT */
    html body div[id*="report"] table > tbody > tr:not(.detail-row),
    html body div[id*="record"] table > tbody > tr:not(.detail-row) {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "po amount"
            "date status" !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        align-items: center !important;
        row-gap: 6px !important;
        position: relative !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    }

    /* HIDE EVERY CELL BY DEFAULT SO NO JUNK SHOWS UP */
    html body div[id*="report"] table > tbody > tr:not(.detail-row) > td,
    html body div[id*="record"] table > tbody > tr:not(.detail-row) > td {
        display: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Strip all text labels (no "Status:", "Date:", etc.) */
    html body div[id*="report"] table > tbody > tr:not(.detail-row) > td::before,
    html body div[id*="record"] table > tbody > tr:not(.detail-row) > td::before {
        display: none !important;
    }

    /* Top Left: PO Number */
    html body div[id*="report"] table > tbody > tr:not(.detail-row) > td:nth-child(4),
    html body div[id*="record"] table > tbody > tr:not(.detail-row) > td:nth-child(4) {
        display: block !important;
        grid-area: po;
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #0f172a !important;
    }

    /* Bottom Left: Date */
    html body div[id*="report"] table > tbody > tr:not(.detail-row) > td:nth-child(2),
    html body div[id*="record"] table > tbody > tr:not(.detail-row) > td:nth-child(2) {
        display: block !important;
        grid-area: date;
        font-size: 13px !important;
        color: #64748b !important;
    }

    /* Top Right: Amount */
    html body div[id*="report"] table > tbody > tr:not(.detail-row) > td:nth-child(5),
    html body div[id*="record"] table > tbody > tr:not(.detail-row) > td:nth-child(5) {
        display: block !important;
        grid-area: amount;
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #0f172a !important;
        text-align: right !important;
    }

    /* Bottom Right: Status Pill */
    html body div[id*="report"] table > tbody > tr:not(.detail-row) > td:nth-child(1),
    html body div[id*="record"] table > tbody > tr:not(.detail-row) > td:nth-child(1) {
        display: flex !important;
        grid-area: status;
        justify-content: flex-end !important;
        align-items: center !important;
        padding-right: 24px !important; /* Leaves room for the arrow */
    }

    /* The Expand Arrow (Chevron > ) */
    html body div[id*="report"] table > tbody > tr:not(.detail-row) > td:last-child,
    html body div[id*="record"] table > tbody > tr:not(.detail-row) > td:last-child {
        display: flex !important;
        position: absolute !important;
        right: 16px !important;
        bottom: 16px !important; /* Aligns perfectly next to the status pill */
    }
}

/* Fix for Choices.js shrinking the search input area */
.choices[data-type*="select-one"] .choices__input {
    width: 100% !important;
    min-width: 150px !important;
    max-width: 100% !important;
    font-size: 14px !important; /* Keeps the text a readable size */
}

/* Ensures the container doesn't collapse */
.choices__inner {
    width: 100% !important;
    overflow: hidden !important;
}

/* =========================================================
   CLEAN BATCH INVOICE TABLE STYLING
   ========================================================= */
#im-batch-entry-table {
    border-collapse: collapse;
    width: 100%;
    background-color: #ffffff;
}

#im-batch-entry-table th {
    background-color: #003A5C !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    font-weight: 600;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap; /* Stops header text from stacking weirdly */
}

#im-batch-entry-table td {
    padding: 10px 15px !important;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: middle;
}

/* Subtle row background colors (zebra striping) for easy reading */
#im-batch-entry-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}
#im-batch-entry-table tbody tr:hover {
    background-color: #f1f5f9; /* Highlights the row you hover over */
}

/* Style the inputs inside the table so they are clean and uniform */
#im-batch-entry-table input,
#im-batch-entry-table select {
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 13px;
    transition: all 0.2s ease;
}

#im-batch-entry-table input:focus,
#im-batch-entry-table select:focus {
    border-color: #00748C;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 116, 140, 0.2);
}

/* Center the trash can icon */
#im-batch-entry-table td:last-child {
    text-align: center;
}

/* =========================================================
   FIX SQUISHED MODAL TABLE
   ========================================================= */
#im-batch-modal-results table {
    width: 100%;
    min-width: 900px; /* Forces table to stay wide and creates a scrollbar */
    border-collapse: collapse;
}

#im-batch-modal-results th,
#im-batch-modal-results td {
    padding: 12px 15px;
    white-space: nowrap; /* Stops text from wrapping and squishing vertically */
    border-bottom: 1px solid #eee;
}

/* Safely expand the Add Job and Invoice Entry modals */
#standard-job-modal .modal-container,
#im-invoice-entry-modal .modal-container {
    max-width: 800px !important;
    width: 50% !important;
}

/* =========================================================
   BATCH ENTRY CARD GRID LAYOUT
   ========================================================= */
.batch-cards-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between each invoice card */
}

.batch-invoice-card {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.batch-invoice-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* MAIN HEADER (Top Row) */
.batch-card-header {
    background: #f1f5f9; /* Light gray background */
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.batch-card-header .header-info {
    display: flex;
    gap: 20px;
    font-weight: 800;
    color: #003A5C;
    font-size: 1.05rem;
}

.batch-card-header .header-info span {
    background: white;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}

.batch-card-header .header-inputs {
    display: flex;
    align-items: center;
    gap: 15px;
}

.batch-card-header .compact-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-card-header .compact-input label {
    font-size: 0.85rem;
    color: #0f172a;
    font-weight: 700;
    margin: 0;
}

.batch-card-header .compact-input input {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-weight: bold;
}

/* SUB ENTRY (Bottom Grid) */
.batch-card-body {
    padding: 20px;
}

.batch-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Auto-arranges columns based on screen size */
    gap: 15px 20px;
}

.batch-input-grid label {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 5px;
    font-weight: 600;
    display: block;
}

.batch-input-grid input,
.batch-input-grid select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.batch-input-grid input:focus,
.batch-input-grid select:focus {
    background: #fff;
    border-color: #00748C;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 116, 140, 0.2);
}

/* ============================================================
   KILL THE DARK BACKGROUND SHADOW / BACKDROP BEHIND THE MODAL
   ============================================================ */

/* Makes the outer wrapper invisible without hiding the popup inside */
#im-invoice-entry-modal,
#im-invoice-entry-modal.modal-overlay,
.modal-backdrop {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   FIX: AUTO-ADJUST DASHBOARD CARD TO FIT BUTTONS
   ========================================================= */
/* 1. Tell the container to "shrink-wrap" around whatever is inside it */
#app-container {
    max-width: fit-content !important;
    margin: 0 auto; /* Keeps the whole thing centered on the screen */
}

/* 2. Lock the Login, Password, and Setup cards so they don't get too skinny */
#login-view .form-container,
#password-view .form-container,
#setup-view .form-container {
    width: 420px;
    max-width: 90vw;
    margin: 0 auto;
}

/* 3. On mobile screens, force the buttons to wrap into a grid so they don't break */
@media (max-width: 768px) {
    .welcome-screen-buttons > div {
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   HIGHLIGHT SPECIFIC FIELDS IN BATCH ENTRY (CARD LAYOUT)
   ========================================================= */

/* 1. INV NO. (Turns ALL inputs in the header yellow first) */
.batch-card-header input {
    background-color: #fffde7 !important;
    border: 2px solid #f6c23e !important;
    color: #000 !important;
}

/* Protect the 'Attention' dropdown search box from turning yellow */
.batch-card-header .choices__input {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Revert the 'Note' field (the last box) back to normal */
.batch-card-header .compact-input:last-of-type input,
.batch-card-header .compact-input:last-child input {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

/* 2. STATUS (WORKING PERFECTLY) */
.batch-card-header select {
    background-color: #fffde7 !important;
    border: 2px solid #f6c23e !important;
    color: #000 !important;
    font-weight: 700 !important;
}

/* 3. INVOICE VALUE (WORKING PERFECTLY) */
.batch-card-body .batch-input-grid > div:nth-child(5) input {
    background-color: #fffde7 !important;
    border: 2px solid #f6c23e !important;
    color: #000 !important;
    font-weight: 700 !important;
}

/* 4. AMOUNT PAID (WORKING PERFECTLY) */
.batch-card-body .batch-input-grid > div:nth-child(6) input {
    background-color: #fffde7 !important;
    border: 2px solid #f6c23e !important;
    color: #000 !important;
    font-weight: 700 !important;
}

/* 5. FOCUS STATES (Turns them clean white when you click to type) */
.batch-card-header input:focus,
.batch-card-header select:focus,
.batch-card-body .batch-input-grid > div:nth-child(5) input:focus,
.batch-card-body .batch-input-grid > div:nth-child(6) input:focus {
    background-color: #ffffff !important;
    border-color: #00748C !important;
    box-shadow: 0 0 0 3px rgba(0, 116, 140, 0.15) !important;
}

/* Material Stock - OneDrive / SharePoint item photo preview */
.ms-photo-card {
    width: 100%;
    min-height: 210px;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.ms-material-photo-img {
    width: 100%;
    max-height: 190px;
    object-fit: contain;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #eef1f4;
}

.ms-photo-placeholder,
.ms-photo-fallback {
    width: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px dashed #d8dee6;
}

.ms-photo-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Material Stock - PhotoIndex CSV Browser (v7.1.5) */
.ms-photo-browser-container {
    width: min(940px, 96vw);
    max-height: 92vh;
}

.ms-photo-browser-target {
    background: #f0f8ff;
    border: 1px solid #d7ebf8;
    color: #003A5C;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-weight: 700;
}

.ms-photo-browser-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.ms-photo-browser-top small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    line-height: 1.35;
}

.ms-photo-browser-preview {
    margin: 10px 0 12px;
}

.ms-photo-browser-empty-preview,
.ms-photo-browser-no-results {
    border: 1px dashed #d8dee6;
    background: #f8f9fa;
    color: #6c757d;
    border-radius: 8px;
    padding: 18px;
    text-align: center;
}

.ms-photo-browser-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e5e9ef;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
}

.ms-photo-browser-preview-card img {
    width: 120px;
    height: 90px;
    object-fit: contain;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    background: #f8f9fa;
}

.ms-photo-browser-preview-fallback {
    width: 120px;
    min-height: 70px;
    border: 1px dashed #d8dee6;
    border-radius: 8px;
    background: #f8f9fa;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    font-size: 0.8rem;
}

.ms-photo-browser-preview-name {
    flex: 1;
    font-weight: 800;
    color: #003A5C;
    word-break: break-word;
}

.ms-photo-browser-note {
    font-size: 0.82rem;
    color: #6c757d;
    background: #fff8e1;
    border: 1px solid #ffe8a1;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.ms-photo-browser-status {
    font-size: 0.82rem;
    margin: 6px 0 10px;
}

.ms-photo-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 310px;
    overflow-y: auto;
    padding-right: 4px;
}

.ms-photo-choice-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ms-photo-choice-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 58, 92, 0.12);
    border-color: #00748C;
}

.ms-photo-choice-card img {
    width: 100%;
    height: 92px;
    object-fit: contain;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #eef1f4;
}

.ms-photo-choice-card span {
    width: 100%;
    font-size: 0.78rem;
    color: #003A5C;
    font-weight: 700;
    word-break: break-word;
    line-height: 1.25;
}

.ms-photo-choice-fallback {
    width: 100%;
    height: 92px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px dashed #d8dee6;
    color: #9aa7b1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

@media (max-width: 700px) {
    .ms-photo-browser-top {
        grid-template-columns: 1fr;
    }

    .ms-photo-browser-preview-card {
        flex-direction: column;
        align-items: stretch;
    }

    .ms-photo-browser-preview-card img,
    .ms-photo-browser-preview-fallback {
        width: 100%;
        height: 150px;
    }
}


/* Material Stock - PhotoIndex CSV Browser clean UI (v7.1.5) */
.ms-photo-browser-top.clean {
    grid-template-columns: 1fr;
}

.ms-photo-browser-grid.clean-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px 2px 8px;
    margin-bottom: 10px;
}

.ms-photo-suggestion-btn {
    border: 1px solid #d9e4ea;
    background: #ffffff;
    color: #003A5C;
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.ms-photo-suggestion-btn:hover,
.ms-photo-suggestion-btn:focus {
    background: #eef9fb;
    border-color: #00748C;
    transform: translateY(-1px);
}

.ms-photo-browser-preview.clean-preview {
    margin: 10px 0 12px;
}

.ms-photo-browser-preview-card.clean {
    justify-content: center;
    min-height: 220px;
    padding: 12px;
}

.ms-photo-browser-preview-card.clean img {
    width: min(100%, 360px);
    height: 200px;
    object-fit: contain;
}

.ms-photo-browser-note.compact {
    margin-top: 8px;
}

@media (max-width: 700px) {
    .ms-photo-browser-preview-card.clean img,
    .ms-photo-browser-preview-card.clean .ms-photo-browser-preview-fallback {
        width: 100%;
        height: 190px;
    }
}


/* Material Stock - PhotoIndex CSV Dropdown Browser (v7.1.6) */
.ms-photo-browser-top.dropdown-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.ms-photo-browser-top.dropdown-mode input[list] {
    width: 100%;
}

.ms-photo-browser-grid.compact-dropdown-status {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ms-photo-browser-status {
    min-height: 18px;
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 8px 0 0;
}

/* Mobile Inventory Bulk Approval (v7.1.7) */
.mobile-bulk-approval-bar {
    margin: 10px 10px 14px 10px;
    padding: 12px;
    border: 1px solid #cfe8ef;
    border-radius: 12px;
    background: #f4fbfd;
    box-shadow: 0 2px 8px rgba(0, 58, 92, 0.08);
}

.mobile-bulk-approval-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mobile-bulk-select-all,
.mobile-bulk-item-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #003A5C;
    user-select: none;
}

.mobile-bulk-select-all input,
.mobile-bulk-item-check input {
    width: 18px;
    height: 18px;
    accent-color: #00748C;
}

.mobile-bulk-selected-count {
    font-size: 0.82rem;
    color: #60727d;
    font-weight: 700;
}

.mobile-bulk-approve-btn {
    width: 100%;
    border: none;
    border-radius: 9px;
    padding: 11px 12px;
    background: #28a745;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.mobile-bulk-approve-btn:disabled {
    background: #aeb8bd;
    cursor: not-allowed;
}

.mobile-bulk-approval-note {
    margin-top: 8px;
    font-size: 0.76rem;
    color: #6c757d;
    line-height: 1.3;
}

.mobile-bulk-item-check {
    align-self: flex-start;
    margin-right: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d5edf3;
    font-size: 0.78rem;
    white-space: nowrap;
}

.mobile-bulk-approved-card {
    border-color: #28a745 !important;
}

@media (max-width: 768px) {
    .mobile-task-card .mobile-card-header {
        align-items: flex-start;
    }
}


/* =========================================================
   7.2.5 – Invoice Entry modal viewport safety fix
   Keeps the Invoice Entry modal inside the visible screen.
   This is scoped only to #im-invoice-entry-modal.
   ========================================================= */
#im-invoice-entry-modal.modal-overlay:not(.hidden) {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 12px !important;
    box-sizing: border-box !important;
}

#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
    margin: 0 auto !important;
    max-height: calc(100dvh - 36px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

@supports not (height: 100dvh) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        max-height: calc(100vh - 36px) !important;
    }
}

#im-invoice-entry-modal .modal-header,
#im-invoice-entry-modal .modal-footer {
    flex: 0 0 auto !important;
}

#im-invoice-entry-modal .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    padding-right: 4px;
}

#im-invoice-entry-modal .modal-content::-webkit-scrollbar {
    width: 8px;
}
#im-invoice-entry-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.22);
    border-radius: 999px;
}

@media (max-height: 720px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        max-height: calc(100dvh - 20px) !important;
    }
}

@media (max-width: 768px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) {
        padding: 10px 8px !important;
    }
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        width: min(96vw, 800px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
}


/* ============================================================
   7.2.7 – Invoice Entry modal non-squeezed safety correction
   Scope: Invoice Entry modal only.
   Purpose: keep the modal from opening above the screen WITHOUT
   compressing the form/cards inside the modal.
   ============================================================ */
#im-invoice-entry-modal.modal-overlay:not(.hidden) {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 12px 24px !important;
    box-sizing: border-box !important;
}

/* Let the whole modal keep its normal form layout and allow the overlay to scroll. */
#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
    width: min(92vw, 920px) !important;
    max-width: 920px !important;
    max-height: none !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 auto 24px !important;
    overflow: visible !important;
    display: block !important;
}

/* Do not force the modal body into a tiny internal scroll box. */
#im-invoice-entry-modal .modal-content {
    flex: none !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

#im-invoice-entry-modal .modal-header,
#im-invoice-entry-modal .modal-footer {
    flex: none !important;
}

/* Keep the invoice form comfortable on desktop; responsive rules below still handle smaller screens. */
@media (min-width: 981px) {
    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
        grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        width: min(96vw, 760px) !important;
        max-width: 760px !important;
    }
    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) {
        padding: 10px 8px 18px !important;
    }
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        width: 96vw !important;
        max-width: 96vw !important;
    }
    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   7.2.8 – Invoice Entry modal fixed overlay correction
   Scope: Invoice Entry modal only.
   Purpose: keep the Invoice Entry modal as a real fixed popup,
   prevent it from being chopped by the page, and avoid squeezing
   the form/cards. The modal body scrolls only when the form is
   taller than the available screen height.
   ============================================================ */
#im-invoice-entry-modal.modal-overlay:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: transparent !important;
    z-index: 9999 !important;
}

@supports (height: 100dvh) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
}

#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
    position: relative !important;
    width: min(92vw, 980px) !important;
    max-width: 980px !important;
    max-height: calc(100vh - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    box-sizing: border-box !important;
}

@supports (height: 100dvh) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        max-height: calc(100dvh - 32px) !important;
    }
}

#im-invoice-entry-modal .modal-header,
#im-invoice-entry-modal .modal-footer {
    flex: 0 0 auto !important;
}

#im-invoice-entry-modal .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    padding-right: 6px !important;
}

#im-invoice-entry-modal .modal-content::-webkit-scrollbar {
    width: 8px;
}

#im-invoice-entry-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.22);
    border-radius: 999px;
}

@media (max-height: 700px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) {
        align-items: flex-start !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        max-height: calc(100vh - 20px) !important;
    }

    @supports (height: 100dvh) {
        #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
            max-height: calc(100dvh - 20px) !important;
        }
    }
}

@media (max-width: 980px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        width: min(96vw, 820px) !important;
        max-width: 820px !important;
    }
}

@media (max-width: 640px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) {
        padding: 8px !important;
        align-items: flex-start !important;
    }

    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: calc(100vh - 16px) !important;
    }

    @supports (height: 100dvh) {
        #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
            max-height: calc(100dvh - 16px) !important;
        }
    }
}


/* ============================================================
   7.2.9 – Invoice Entry modal draggable correction
   Scope: Invoice Entry modal only.
   Purpose: allow the user to manually reposition the Invoice Entry
   popup when browser zoom/sidebar layout makes the automatic position
   inconvenient. No invoice data logic is affected.
   ============================================================ */
#im-invoice-entry-modal.im-draggable-modal .modal-header.im-modal-drag-handle {
    cursor: move !important;
    user-select: none !important;
    touch-action: none !important;
}

#im-invoice-entry-modal.im-draggable-modal .modal-header.im-modal-drag-handle button,
#im-invoice-entry-modal.im-draggable-modal .modal-header.im-modal-drag-handle a,
#im-invoice-entry-modal.im-draggable-modal .modal-header.im-modal-drag-handle .modal-close-btn {
    cursor: pointer !important;
}

#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container.im-user-positioned {
    position: fixed !important;
    left: var(--im-modal-left, 24px) !important;
    top: var(--im-modal-top, 24px) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: var(--im-modal-width, min(92vw, 980px)) !important;
    max-width: calc(100vw - 16px) !important;
    transform: none !important;
}

body.im-modal-is-dragging {
    cursor: move !important;
    user-select: none !important;
}

@media (max-width: 640px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container.im-user-positioned {
        left: 8px !important;
        top: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}


/* =========================================================
   8.2.4 Invoice Entry Modal Pass-Through Fix
   Keep the 8.0.9/8.2.3 full-window floating modal, but allow
   the Invoice Management left navigation and Active Jobs side panel
   to stay clickable while the Invoice Entry modal is open.
   ========================================================= */
#im-invoice-entry-modal.modal-overlay:not(.hidden) {
    pointer-events: none !important;
}

#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container,
#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container * {
    pointer-events: auto;
}

/* Make sure the Invoice Entry Active Jobs panel remains an active layer. */
#invoice-management-view > .workdesk-sidebar {
    position: relative;
    z-index: 10006;
}

#im-entry-sidebar {
    position: fixed !important;
    z-index: 10007 !important;
    pointer-events: auto !important;
}

/* ========================================================================
   8.3.6 — WorkDesk Dashboard Active Task Control Center
   Replaces the unused calendar dashboard with a professional incomplete
   invoice task overview. View-only display.
   ======================================================================== */
.wd-control-center-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef6fb 52%, #fff8ef 100%);
    border: 1px solid rgba(15, 76, 117, 0.14);
    box-shadow: 0 14px 36px rgba(15, 46, 71, 0.08);
}

.wd-control-eyebrow {
    margin: 0 0 6px 0;
    color: var(--iba-secondary-terracotta, #C3502F);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 800;
}

.wd-control-center-hero h1 {
    margin: 0;
    color: var(--primary-blue, #003A5C);
    font-size: clamp(1.55rem, 2vw, 2.2rem);
    letter-spacing: -0.03em;
}

.wd-control-subtitle {
    margin: 8px 0 0 0;
    max-width: 780px;
    color: #526173;
    line-height: 1.45;
    font-size: 0.96rem;
}

.wd-dashboard-refresh-btn {
    white-space: nowrap;
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 800;
}

.wd-active-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.wd-active-status-card,
.wd-dashboard-loading-card,
.wd-dashboard-error-card {
    border: 1px solid rgba(15, 76, 117, 0.12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 46, 71, 0.07);
    padding: 16px;
    min-height: 92px;
}

.wd-active-status-card {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.wd-active-status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 46, 71, 0.11);
}

.wd-active-status-card.active {
    border-color: var(--primary-blue, #003A5C);
    box-shadow: 0 18px 38px rgba(0, 58, 92, 0.16);
    outline: 2px solid rgba(0, 58, 92, 0.08);
}

.wd-status-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: var(--primary-blue, #003A5C);
    font-size: 1rem;
}

.wd-active-status-card.all-card .wd-status-icon { background: #0f4c75; }
.wd-active-status-card.tone-pending .wd-status-icon { background: #f59e0b; }
.wd-active-status-card.tone-hold .wd-status-icon { background: #64748b; }
.wd-active-status-card.tone-srv .wd-status-icon { background: #db2777; }
.wd-active-status-card.tone-approval .wd-status-icon { background: #16a34a; }
.wd-active-status-card.tone-ipc .wd-status-icon { background: #7c3aed; }
.wd-active-status-card.tone-report .wd-status-icon { background: #2563eb; }

.wd-status-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wd-status-meta strong {
    color: #0f172a;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 900;
}

.wd-status-meta em {
    margin-top: 5px;
    color: #536173;
    font-style: normal;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.wd-dashboard-loading-card,
.wd-dashboard-error-card {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #526173;
    font-weight: 800;
}

.wd-dashboard-error-card { color: #b91c1c; }

.wd-active-dashboard-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 20px 20px 0 0;
    background: #ffffff;
    border: 1px solid rgba(15, 76, 117, 0.12);
    border-bottom: none;
    box-shadow: 0 10px 24px rgba(15, 46, 71, 0.05);
}

.wd-active-dashboard-toolbar h2 {
    margin: 0;
    color: var(--primary-blue, #003A5C);
    font-size: 1.25rem;
}

.wd-active-dashboard-toolbar p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.86rem;
}

.wd-active-dashboard-search-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: min(360px, 100%);
    padding: 0 13px;
    border: 1px solid rgba(15, 76, 117, 0.16);
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
}

.wd-active-dashboard-search-wrap input {
    width: 100%;
    height: 42px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.92rem;
    color: #0f172a;
}

.wd-active-dashboard-list {
    background: #ffffff;
    border: 1px solid rgba(15, 76, 117, 0.12);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 18px 38px rgba(15, 46, 71, 0.08);
    overflow: hidden;
}

.wd-dashboard-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.wd-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
}

.wd-dashboard-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    font-size: 0.72rem;
    font-weight: 900;
    border-bottom: 1px solid #e2e8f0;
    padding: 13px 14px;
    text-align: left;
    white-space: nowrap;
}

.wd-dashboard-table tbody td {
    padding: 14px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
    color: #1e293b;
    font-size: 0.88rem;
}

.wd-dashboard-table tbody tr:hover {
    background: #f8fbfd;
}

.wd-po-cell strong {
    color: var(--primary-blue, #003A5C);
    font-size: 0.96rem;
}

.wd-po-cell small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-weight: 700;
}

.wd-site-pill,
.wd-status-pill,
.wd-ipc-active,
.wd-ipc-empty {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: nowrap;
}

.wd-site-pill {
    background: #edf6fb;
    color: #0f4c75;
}

.wd-status-pill.tone-pending { background: #fff7ed; color: #c2410c; }
.wd-status-pill.tone-hold { background: #f1f5f9; color: #475569; }
.wd-status-pill.tone-srv { background: #fdf2f8; color: #be185d; }
.wd-status-pill.tone-approval { background: #ecfdf5; color: #15803d; }
.wd-status-pill.tone-ipc { background: #f5f3ff; color: #6d28d9; }
.wd-status-pill.tone-report { background: #eff6ff; color: #1d4ed8; }
.wd-status-pill.tone-default { background: #f8fafc; color: #334155; }

.wd-note-cell {
    max-width: 260px;
    white-space: normal;
    line-height: 1.35;
    color: #475569;
}

.wd-ipc-active {
    background: #f5f3ff;
    color: #6d28d9;
}

.wd-ipc-empty {
    background: #f8fafc;
    color: #94a3b8;
}

.wd-dashboard-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(15, 46, 71, 0.12);
}

.wd-dashboard-pdf-btn.invoice { background: #dc2626; }
.wd-dashboard-pdf-btn.report { background: #6d28d9; }
.wd-dashboard-pdf-btn:hover { filter: brightness(0.96); transform: translateY(-1px); }

.wd-pdf-empty,
.wd-muted {
    color: #94a3b8;
    font-weight: 800;
}

.wd-dashboard-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    padding: 28px;
    color: #64748b;
    font-weight: 800;
    text-align: center;
}

.wd-dashboard-empty-state.success {
    color: #15803d;
}

@media (max-width: 900px) {
    .wd-control-center-hero,
    .wd-active-dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .wd-dashboard-refresh-btn,
    .wd-active-dashboard-search-wrap {
        width: 100%;
    }

    .wd-active-dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .wd-active-status-card {
        min-height: 86px;
        padding: 13px;
    }

    .wd-status-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 12px;
    }

    .wd-status-meta strong {
        font-size: 1.45rem;
    }

    .wd-status-meta em {
        font-size: 0.78rem;
    }

    .wd-dashboard-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 12px;
        padding: 12px;
    }

    .wd-dashboard-table thead {
        display: none;
    }

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

    .wd-dashboard-table tbody tr {
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 8px 22px rgba(15, 46, 71, 0.07);
        overflow: hidden;
    }

    .wd-dashboard-table tbody td {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 13px;
        border-bottom: 1px solid #eef2f7;
        font-size: 0.86rem;
    }

    .wd-dashboard-table tbody td::before {
        content: attr(data-label);
        color: #64748b;
        font-weight: 900;
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.045em;
    }

    .wd-dashboard-table tbody td:last-child {
        border-bottom: none;
    }

    .wd-note-cell {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .wd-active-dashboard-cards {
        grid-template-columns: 1fr;
    }

    .wd-control-center-hero {
        padding: 18px;
        border-radius: 18px;
    }

    .wd-active-dashboard-toolbar {
        padding: 16px;
    }
}

/* ========================================================================
   8.3.8 — WorkDesk Dashboard Premium UI Polish
   Modern command-board layout. Display only; no workflow/write logic changed.
   ======================================================================== */
.wd-control-center-hero {
    position: relative;
    overflow: hidden;
    min-height: 154px;
    padding: 28px 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(195,80,47,0.18), transparent 36%),
        radial-gradient(circle at 12% 0%, rgba(24,119,154,0.20), transparent 34%),
        linear-gradient(135deg, #072b45 0%, #0b4869 48%, #f8fafc 49%, #ffffff 100%);
    border: 1px solid rgba(255,255,255,0.54);
    box-shadow: 0 24px 60px rgba(5, 28, 44, 0.17);
}

.wd-control-center-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.38;
    pointer-events: none;
}

.wd-control-center-hero > * {
    position: relative;
    z-index: 1;
}

.wd-control-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: #fdebd3;
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
}

.wd-control-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,0.16);
}

.wd-control-center-hero h1 {
    color: #ffffff;
    text-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.wd-control-subtitle {
    color: rgba(255,255,255,0.84);
    max-width: 680px;
    font-weight: 600;
}

.wd-dashboard-refresh-btn {
    border: none !important;
    background: rgba(255,255,255,0.96) !important;
    color: #073b5c !important;
    box-shadow: 0 16px 34px rgba(3, 29, 47, 0.18);
}

.wd-active-dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin: 20px 0 20px;
}

.wd-active-status-card,
.wd-dashboard-loading-card,
.wd-dashboard-error-card {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    border: 1px solid rgba(148,163,184,0.22);
    box-shadow: 0 18px 42px rgba(15, 46, 71, 0.09);
}

.wd-active-status-card::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148,163,184,0.22);
}

.wd-status-card-glow {
    position: absolute;
    right: -42px;
    top: -42px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(15,76,117,0.10);
    pointer-events: none;
}

.wd-active-status-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(15, 46, 71, 0.15);
}

.wd-active-status-card.active {
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border-color: rgba(0,58,92,0.44);
    box-shadow: 0 28px 66px rgba(0,58,92,0.21);
    outline: 3px solid rgba(0,58,92,0.07);
}

.wd-active-status-card.all-card::after,
.wd-active-status-card.all-card .wd-status-icon { background: #0f4c75; }
.wd-active-status-card.tone-pending::after,
.wd-active-status-card.tone-pending .wd-status-icon { background: #f59e0b; }
.wd-active-status-card.tone-hold::after,
.wd-active-status-card.tone-hold .wd-status-icon { background: #64748b; }
.wd-active-status-card.tone-srv::after,
.wd-active-status-card.tone-srv .wd-status-icon { background: #db2777; }
.wd-active-status-card.tone-approval::after,
.wd-active-status-card.tone-approval .wd-status-icon { background: #16a34a; }
.wd-active-status-card.tone-ipc::after,
.wd-active-status-card.tone-ipc .wd-status-icon { background: #7c3aed; }
.wd-active-status-card.tone-report::after,
.wd-active-status-card.tone-report .wd-status-icon { background: #2563eb; }
.wd-active-status-card.tone-default::after,
.wd-active-status-card.tone-default .wd-status-icon { background: #334155; }

.wd-status-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(15,46,71,0.18);
}

.wd-status-meta strong {
    font-size: 2.05rem;
    letter-spacing: -0.06em;
}

.wd-status-meta em {
    color: #1e293b;
    font-size: 0.9rem;
}

.wd-status-meta small {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 0.73rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.wd-status-arrow {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.84rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .16s ease, transform .16s ease;
}

.wd-active-status-card:hover .wd-status-arrow,
.wd-active-status-card.active .wd-status-arrow {
    opacity: 1;
    transform: translateX(0);
}

.wd-active-dashboard-toolbar {
    padding: 20px 22px;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    border-color: rgba(148,163,184,0.24);
    box-shadow: 0 16px 36px rgba(15, 46, 71, 0.07);
}

.wd-active-dashboard-toolbar h2 {
    font-size: 1.35rem;
    letter-spacing: -0.025em;
}

.wd-active-dashboard-toolbar p {
    color: #64748b;
    font-weight: 700;
}

.wd-active-dashboard-search-wrap {
    min-width: min(420px, 100%);
    height: 48px;
    padding: 0 16px;
    background: #ffffff;
    border-color: rgba(15,76,117,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 22px rgba(15,46,71,0.06);
}

.wd-active-dashboard-list {
    border-color: rgba(148,163,184,0.24);
    border-radius: 0 0 26px 26px;
    background: #f6f9fc;
    box-shadow: 0 26px 60px rgba(15,46,71,0.11);
}

.wd-task-board {
    padding: 18px;
}

.wd-task-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0b3d5b, #116684);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(6, 54, 84, 0.18);
}

.wd-task-board-head > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.wd-board-label {
    width: 100%;
    color: rgba(255,255,255,0.70);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.wd-task-board-head strong {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.06em;
}

.wd-task-board-head span:not(.wd-board-label) {
    color: rgba(255,255,255,0.84);
    font-weight: 800;
}

.wd-board-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.wd-task-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wd-task-card {
    --tone: #334155;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(148,163,184,0.24);
    border-radius: 24px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 16px 38px rgba(15,46,71,0.08);
    overflow: hidden;
    animation: wdCardRise .28s ease both;
    animation-delay: var(--wd-delay, 0ms);
}

@keyframes wdCardRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wd-task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(15,46,71,0.13);
}

.wd-task-card.tone-pending { --tone: #f59e0b; }
.wd-task-card.tone-hold { --tone: #64748b; }
.wd-task-card.tone-srv { --tone: #db2777; }
.wd-task-card.tone-approval { --tone: #16a34a; }
.wd-task-card.tone-ipc { --tone: #7c3aed; }
.wd-task-card.tone-report { --tone: #2563eb; }
.wd-task-card.tone-default { --tone: #334155; }

.wd-task-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--tone);
}

.wd-task-card::before {
    content: "";
    position: absolute;
    right: -54px;
    top: -54px;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: rgba(15,76,117,0.10);
    background: color-mix(in srgb, var(--tone) 16%, transparent);
    pointer-events: none;
}

.wd-task-main,
.wd-task-side {
    position: relative;
    z-index: 1;
}

.wd-task-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.wd-task-kicker,
.wd-task-meta-box label,
.wd-doc-label {
    display: block;
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.wd-task-identity h3 {
    margin: 2px 0 2px;
    color: #073b5c;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.055em;
}

.wd-task-subref {
    margin: 0;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.wd-task-status-block {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wd-task-vendor-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    color: #0f172a;
    font-weight: 900;
    font-size: .98rem;
}

.wd-task-vendor-line i {
    color: #0f4c75;
}

.wd-task-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
    margin-top: 14px;
}

.wd-task-meta-box {
    padding: 12px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.wd-task-meta-box.compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wd-task-note-text {
    margin-top: 6px;
    color: #334155;
    line-height: 1.45;
    font-size: .88rem;
    font-weight: 700;
}

.wd-task-footline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.wd-task-footline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wd-task-side {
    display: flex;
    align-items: stretch;
}

.wd-doc-zone {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
}

.wd-doc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
}

.wd-doc-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.wd-dashboard-pdf-btn {
    justify-content: center;
    min-height: 40px;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(15,46,71,0.14);
}

.wd-dashboard-pdf-btn.invoice {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.wd-dashboard-pdf-btn.report {
    background: linear-gradient(135deg, #8b5cf6, #5b21b6);
}

.wd-doc-actions .wd-pdf-empty {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f5f9;
    color: #94a3b8;
}

.wd-site-pill,
.wd-status-pill,
.wd-ipc-active,
.wd-ipc-empty {
    gap: 6px;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.wd-status-pill.tone-pending { background: #fff7ed; color: #c2410c; }
.wd-status-pill.tone-hold { background: #f1f5f9; color: #475569; }
.wd-status-pill.tone-srv { background: #fdf2f8; color: #be185d; }
.wd-status-pill.tone-approval { background: #ecfdf5; color: #15803d; }
.wd-status-pill.tone-ipc { background: #f5f3ff; color: #6d28d9; }
.wd-status-pill.tone-report { background: #eff6ff; color: #1d4ed8; }
.wd-status-pill.tone-default { background: #f8fafc; color: #334155; }

.wd-dashboard-empty-state {
    min-height: 230px;
    flex-direction: column;
    background: #ffffff;
}

.wd-dashboard-empty-state .wd-empty-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #f1f5f9;
    font-size: 1.35rem;
}

.wd-dashboard-empty-state strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 1rem;
}

.wd-dashboard-empty-state p {
    margin: 0;
    color: #64748b;
}

@media (max-width: 1100px) {
    .wd-task-card {
        grid-template-columns: 1fr;
    }

    .wd-task-side {
        display: block;
    }

    .wd-doc-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wd-doc-actions > * {
        flex: 1 1 150px;
    }
}

@media (max-width: 900px) {
    .wd-control-center-hero {
        min-height: 0;
        background:
            radial-gradient(circle at top right, rgba(195,80,47,0.16), transparent 40%),
            linear-gradient(135deg, #072b45 0%, #0b4869 100%);
    }

    .wd-task-board-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .wd-board-access-pill {
        white-space: normal;
    }

    .wd-task-meta-grid {
        grid-template-columns: 1fr;
    }

    .wd-task-topline {
        flex-direction: column;
    }

    .wd-task-status-block {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .wd-control-center-hero {
        padding: 20px;
        border-radius: 22px;
    }

    .wd-active-dashboard-cards {
        grid-template-columns: 1fr;
    }

    .wd-active-status-card {
        min-height: 104px;
    }

    .wd-task-board {
        padding: 12px;
    }

    .wd-task-card {
        padding: 16px 14px 16px 16px;
        border-radius: 20px;
    }

    .wd-task-identity h3 {
        font-size: 1.35rem;
    }

    .wd-doc-actions {
        flex-direction: column;
    }
}

/* ========================================================================
   8.3.9 — WorkDesk Dashboard Queue Fix + Header Contrast
   ======================================================================== */
.wd-control-center-hero h1 {
    color: #facc15 !important;
    text-shadow: 0 10px 24px rgba(0,0,0,0.36), 0 0 22px rgba(250,204,21,0.22);
}

.wd-control-center-hero .wd-control-subtitle {
    color: rgba(255,255,255,0.90);
}

.wd-active-status-card.tone-ipc::after,
.wd-active-status-card.tone-ipc .wd-status-icon {
    background: #7c3aed;
}

.wd-task-card.tone-ipc {
    --tone: #7c3aed;
}

.wd-status-card-glow {
    opacity: .95;
}


/* ========================================================================
   8.4.1 — WorkDesk Dashboard Note / IPC Width Balance
   Reduces the Note area weight and gives more readable width to IPC status.
   Display-only polish; no data or save logic changed.
   ======================================================================== */
.wd-task-meta-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.45fr);
}

.wd-task-ipc-box {
    min-width: 280px;
}

.wd-task-ipc-box .wd-ipc-active,
.wd-task-ipc-box .wd-ipc-empty {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

@media (max-width: 900px) {
    .wd-task-meta-grid {
        grid-template-columns: 1fr;
    }

    .wd-task-ipc-box {
        min-width: 0;
    }
}

/* ========================================================================
   8.4.2 — Active Task + Job Records Premium UI Polish
   Display polish only. No Firebase/write/workflow logic changed.
   ======================================================================== */
.wd-page-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 22px;
    padding: 25px 28px;
    margin-bottom: 20px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.58);
    box-shadow: 0 24px 58px rgba(5, 28, 44, 0.15);
}
.wd-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .34;
    pointer-events: none;
}
.wd-page-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -95px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(250,204,21,0.15);
    pointer-events: none;
}
.wd-page-hero-active {
    background:
        radial-gradient(circle at 90% 20%, rgba(250,204,21,0.16), transparent 30%),
        linear-gradient(135deg, #06283d 0%, #0b4e70 54%, #ffffff 55%, #f8fafc 100%);
}
.wd-page-hero-records {
    background:
        radial-gradient(circle at 90% 20%, rgba(124,58,237,0.15), transparent 30%),
        linear-gradient(135deg, #082f49 0%, #0f5f78 54%, #ffffff 55%, #f8fafc 100%);
}
.wd-page-hero > * { position: relative; z-index: 1; }
.wd-page-hero-main { max-width: 720px; }
.wd-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: #fde68a;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.wd-page-hero h1 {
    display: inline-block;
    margin: 0;
    color: #ffd43b;
    border: none;
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: .95;
    letter-spacing: -0.075em;
    -webkit-text-stroke: .65px rgba(3, 18, 30, .58);
    text-shadow:
        0 2px 0 rgba(3, 18, 30, .72),
        0 12px 30px rgba(0,0,0,.42),
        0 0 26px rgba(255, 212, 59, .34);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .20));
}
.wd-page-hero p {
    max-width: 680px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.86);
    font-size: .95rem;
    font-weight: 650;
}
.wd-page-hero-metric {
    min-width: 210px;
    align-self: center;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.76);
    box-shadow: 0 18px 40px rgba(15,46,71,.13);
    text-align: right;
}
.wd-page-hero-metric .table-count-display,
.wd-page-hero-metric span {
    display: block;
    margin: 0;
    color: #073b5c;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}
.wd-page-hero-metric small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.wd-premium-searchbar {
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 12px;
    border-radius: 24px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(148,163,184,.25);
    box-shadow: 0 16px 38px rgba(15,46,71,.08);
}
.wd-search-field {
    height: 48px;
    margin: 0 !important;
    border-radius: 17px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.wd-search-field input {
    height: 100%;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-weight: 750;
}
.wd-clear-chip {
    height: 48px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    white-space: nowrap;
    background: #eef2f7 !important;
    color: #334155 !important;
    border: 1px solid #dbe3ec !important;
    font-weight: 900 !important;
}
.wd-premium-tabs {
    margin-bottom: 16px !important;
    padding: 8px;
    border-radius: 22px;
    background: rgba(241,245,249,.88);
    border: 1px solid rgba(148,163,184,.18);
}
.wd-premium-tabs button,
#wd-reporting .report-tabs button,
#wd-activetask .report-tabs button {
    border-radius: 14px !important;
    min-height: 40px;
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 900;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.wd-premium-tabs button:hover,
#wd-reporting .report-tabs button:hover,
#wd-activetask .report-tabs button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15,46,71,.10);
}
.wd-premium-tabs button.active,
#wd-reporting .report-tabs button.active,
#wd-activetask .report-tabs button.active {
    background: linear-gradient(135deg, #073b5c, #0f6d8d) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.28) !important;
}

.wd-records-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 16px 38px rgba(15,46,71,.07);
}

.wd-mini-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
.wd-mini-metric {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 15px;
    border-radius: 19px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 14px 30px rgba(15,46,71,.07);
}
.wd-mini-metric::after {
    content: "";
    position: absolute;
    inset: auto 13px 10px 13px;
    height: 3px;
    border-radius: 999px;
    background: #0f4c75;
    opacity: .88;
}
.wd-mini-metric.tone-pending::after { background: #f59e0b; }
.wd-mini-metric.tone-hold::after { background: #64748b; }
.wd-mini-metric.tone-srv::after { background: #db2777; }
.wd-mini-metric.tone-approval::after { background: #16a34a; }
.wd-mini-metric.tone-ipc::after { background: #7c3aed; }
.wd-mini-metric.tone-report::after { background: #2563eb; }
.wd-mini-metric.tone-danger::after { background: #dc2626; }
.wd-mini-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #073b5c, #0f6d8d);
    box-shadow: 0 12px 22px rgba(15,46,71,.16);
}
.wd-mini-metric strong {
    display: block;
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -0.055em;
}
.wd-mini-metric small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: .70rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#wd-activetask .table-wrapper,
#wd-reporting #reporting-printable-area .table-wrapper {
    border-radius: 26px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 24px 60px rgba(15,46,71,.11);
}
.wd-modern-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    background: transparent !important;
}
.wd-modern-table thead th {
    padding: 12px 14px !important;
    border: none !important;
    color: #64748b !important;
    background: transparent !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.wd-modern-table tbody tr.wd-modern-row {
    position: relative;
    background: #ffffff;
    box-shadow: 0 13px 30px rgba(15,46,71,.07);
    transition: transform .16s ease, box-shadow .16s ease;
}
.wd-modern-table tbody tr.wd-modern-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(15,46,71,.13);
}
.wd-modern-table tbody tr.wd-modern-row td {
    padding: 14px 13px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155;
    vertical-align: middle !important;
}
.wd-modern-table tbody tr.wd-modern-row td:first-child {
    border-left: 6px solid #334155 !important;
    border-radius: 18px 0 0 18px;
}
.wd-modern-table tbody tr.wd-modern-row td:last-child {
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 18px 18px 0;
}
.wd-modern-table tbody tr.wd-modern-row.tone-pending td:first-child { border-left-color: #f59e0b !important; }
.wd-modern-table tbody tr.wd-modern-row.tone-hold td:first-child { border-left-color: #64748b !important; }
.wd-modern-table tbody tr.wd-modern-row.tone-srv td:first-child { border-left-color: #db2777 !important; }
.wd-modern-table tbody tr.wd-modern-row.tone-approval td:first-child { border-left-color: #16a34a !important; }
.wd-modern-table tbody tr.wd-modern-row.tone-ipc td:first-child { border-left-color: #7c3aed !important; }
.wd-modern-table tbody tr.wd-modern-row.tone-report td:first-child { border-left-color: #2563eb !important; }
.wd-modern-table tbody tr.wd-modern-row.tone-danger td:first-child { border-left-color: #dc2626 !important; }
.wd-modern-table tbody tr.wd-row-muted { opacity: .70; }
.wd-modern-table tbody tr.wd-row-urgent td { background: linear-gradient(180deg, #ffffff, #fffbeb); }

.wd-table-kicker,
.wd-ref-chip,
.wd-po-code,
.wd-site-badge,
.wd-date-chip,
.wd-user-chip,
.wd-attention-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}
.wd-table-kicker { background: #e0f2fe; color: #075985; }
.wd-po-code { background: #fff7ed; color: #c2410c; letter-spacing: .02em; }
.wd-ref-chip { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.wd-site-badge { background: #ecfdf5; color: #166534; }
.wd-date-chip { background: #f8fafc; color: #64748b; }
.wd-user-chip { background: #f5f3ff; color: #6d28d9; }
.wd-attention-chip { background: #fef3c7; color: #92400e; }
.wd-vendor-name {
    color: #073b5c;
    font-weight: 950;
    line-height: 1.15;
}
.wd-amount-cell {
    color: #0f172a !important;
    font-weight: 950;
    white-space: nowrap;
}
.wd-note-cell {
    max-width: 260px;
    color: #475569;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.35;
}
.wd-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.wd-status-badge.tone-pending { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.wd-status-badge.tone-hold { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.wd-status-badge.tone-srv { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.wd-status-badge.tone-approval { background: #ecfdf5; color: #15803d; border-color: #bbf7d0; }
.wd-status-badge.tone-ipc { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.wd-status-badge.tone-report { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.wd-status-badge.tone-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.wd-status-badge.tone-default { background: #f8fafc; color: #334155; border-color: #e2e8f0; }

.wd-row-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 8px 11px !important;
    margin: 2px 3px !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(15,46,71,.15);
    transition: transform .16s ease, filter .16s ease;
}
.wd-row-action:hover { transform: translateY(-1px); filter: brightness(.98); }
.wd-action-process { background: linear-gradient(135deg, #0f6d8d, #073b5c) !important; }
.wd-action-srv { background: linear-gradient(135deg, #db2777, #9d174d) !important; }
.wd-action-gold { background: linear-gradient(135deg, #f59e0b, #b45309) !important; }
.wd-action-approve { background: linear-gradient(135deg, #22c55e, #15803d) !important; }
.wd-action-reject { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }
.wd-action-history { background: linear-gradient(135deg, #38bdf8, #0369a1) !important; }
.wd-record-status-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.wd-modern-empty-row {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 34px 18px;
    border-radius: 22px;
    color: #64748b;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px dashed #cbd5e1;
}
.wd-modern-empty-row i {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #eff6ff;
    color: #0f6d8d;
    font-size: 1.45rem;
}
.wd-modern-empty-row strong {
    color: #0f172a;
    font-size: 1rem;
}
.wd-modern-empty-row span { color: #64748b; font-weight: 700; }

/* Mobile active task cards inherit the dashboard polish */
#active-task-mobile-view .mobile-task-card {
    border: 1px solid rgba(148,163,184,.24) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 34px rgba(15,46,71,.10) !important;
    overflow: hidden;
}
#active-task-mobile-view .mobile-card-header {
    padding: 16px !important;
    background: linear-gradient(135deg, #073b5c, #0f6d8d) !important;
    color: #ffffff !important;
    border-left: none !important;
}
#active-task-mobile-view .mobile-card-header h3,
#active-task-mobile-view .m-card-main h3 {
    color: #facc15 !important;
    letter-spacing: -0.03em;
}
#active-task-mobile-view .m-card-sub { color: rgba(255,255,255,.82) !important; }
#active-task-mobile-view .m-card-amount {
    min-width: 92px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.16);
}
#active-task-mobile-view .m-card-val { color: #ffffff !important; font-weight: 950; }
#active-task-mobile-view .m-card-ref { color: rgba(255,255,255,.75) !important; }
#active-task-mobile-view .mobile-card-body {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
}
#active-task-mobile-view .m-pdf-btn,
#active-task-mobile-view .m-btn-approve,
#active-task-mobile-view .m-btn-reject {
    border-radius: 14px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(15,46,71,.14);
}

@media (max-width: 980px) {
    .wd-page-hero {
        flex-direction: column;
        background: linear-gradient(135deg, #06283d, #0b4e70) !important;
    }
    .wd-page-hero-metric {
        align-self: stretch;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .wd-premium-searchbar {
        flex-wrap: wrap !important;
        border-radius: 20px;
    }
    .wd-clear-chip,
    .wd-search-field { width: 100% !important; }
    .wd-mini-metrics { grid-template-columns: 1fr 1fr; }
}


/* ========================================================================
   8.4.3 — Active Task + Job Records Title Contrast Fix
   Make the hero titles stand out from the blue header background.
   Display polish only. No data/workflow/Firebase logic changed.
   ======================================================================== */
#wd-activetask .wd-page-hero h1,
#wd-reporting .wd-page-hero h1 {
    color: #ffd43b !important;
    -webkit-text-stroke: .65px rgba(3, 18, 30, .62);
    text-shadow:
        0 2px 0 rgba(3, 18, 30, .76),
        0 12px 30px rgba(0,0,0,.42),
        0 0 28px rgba(255, 212, 59, .38) !important;
}
#wd-activetask .wd-page-eyebrow,
#wd-reporting .wd-page-eyebrow {
    color: #fff1a8 !important;
    background: rgba(3, 18, 30, .18);
}

/* ========================================================================
   8.4.4 — Active Task / Job Records / Inventory UI Cleanup
   Display-only cleanup: fixes hero title stacking, separates Inventory context,
   refreshes inventory metrics, and aligns Material Stock with premium UI.
   ======================================================================== */
#wd-activetask .wd-page-hero-main,
#wd-reporting .wd-page-hero-main,
#wd-material-stock .wd-page-hero-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#wd-activetask .wd-page-hero h1,
#wd-reporting .wd-page-hero h1,
#wd-material-stock .wd-page-hero h1 {
    display: block !important;
    width: 100%;
    margin-top: 2px !important;
}
#wd-activetask .wd-page-eyebrow,
#wd-reporting .wd-page-eyebrow,
#wd-material-stock .wd-page-eyebrow {
    flex: 0 0 auto;
}

.wd-page-hero-inventory {
    background:
        radial-gradient(circle at 88% 18%, rgba(52,211,153,0.18), transparent 31%),
        linear-gradient(135deg, #052e2b 0%, #0f766e 54%, #ffffff 55%, #f8fafc 100%) !important;
}
.wd-page-hero-records-inventory {
    background:
        radial-gradient(circle at 88% 18%, rgba(56,189,248,0.16), transparent 31%),
        linear-gradient(135deg, #06324a 0%, #047481 54%, #ffffff 55%, #f8fafc 100%) !important;
}
.wd-page-hero-material {
    background:
        radial-gradient(circle at 88% 18%, rgba(250,204,21,0.16), transparent 31%),
        linear-gradient(135deg, #053a36 0%, #0d766d 54%, #ffffff 55%, #f8fafc 100%) !important;
}
#wd-material-stock .wd-page-hero {
    margin-bottom: 18px;
}
#wd-material-stock .wd-page-hero h1 {
    color: #ffd43b !important;
    -webkit-text-stroke: .65px rgba(3, 18, 30, .62);
    text-shadow:
        0 2px 0 rgba(3, 18, 30, .76),
        0 12px 30px rgba(0,0,0,.42),
        0 0 28px rgba(255, 212, 59, .38) !important;
}
#wd-material-stock .wd-page-eyebrow {
    color: #fff1a8 !important;
    background: rgba(3, 18, 30, .18);
}

#wd-activetask .wd-page-hero-metric .table-count-display,
#wd-reporting .wd-page-hero-metric .table-count-display,
#wd-material-stock .wd-page-hero-metric .table-count-display {
    font-size: .96rem !important;
    white-space: normal;
}

#wd-activetask .wd-inventory-modern-table tbody tr.wd-inventory-row td,
#wd-activetask .wd-inventory-modern-table tbody tr.wd-inventory-group-row td {
    background: #ffffff;
}
#wd-activetask .wd-inventory-modern-table tbody tr.controlid-group-header {
    cursor: pointer;
}
#wd-activetask .wd-inventory-modern-table .controlid-group-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-weight: 900;
    font-size: .72rem;
}

/* 11.7.9 — Inventory Active Task premium single/multi arrangement */
#wd-activetask .wd-inventory-modern-table {
    border-collapse: separate;
    border-spacing: 0;
}

#wd-activetask .wd-inventory-section-row td {
    padding: 18px 10px 9px !important;
    border: 0 !important;
    background: transparent !important;
}

#wd-activetask .wd-inventory-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    color: #052e2b;
    text-transform: uppercase;
    letter-spacing: .035em;
}

#wd-activetask .wd-inventory-section-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 950;
}

#wd-activetask .wd-inventory-section-heading > span i {
    color: #0f766e;
}

#wd-activetask .wd-inventory-section-heading small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 750;
    text-transform: none;
    letter-spacing: 0;
}

#wd-activetask .wd-inventory-section-heading b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    margin-left: auto;
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    background: #0f766e;
    font-size: .72rem;
    font-weight: 950;
}

#wd-activetask .wd-inventory-section-row.is-multi .wd-inventory-section-heading {
    border-bottom: 2px solid rgba(15, 118, 110, .24);
}

#wd-activetask .wd-inventory-section-row.is-single .wd-inventory-section-heading {
    border-bottom: 2px solid rgba(14, 116, 144, .18);
}

#wd-activetask .wd-inventory-modern-table tbody tr.controlid-group-header td {
    padding: 5px 8px !important;
    border: 0 !important;
    background: transparent !important;
}

#wd-activetask .wd-inventory-batch-card {
    display: grid;
    grid-template-columns: 42px minmax(220px, .9fr) minmax(230px, 1.35fr) minmax(260px, 1.15fr) minmax(120px, .55fr);
    align-items: center;
    overflow: hidden;
    min-height: 82px;
    border: 1px solid rgba(14, 116, 144, .28);
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 8%, rgba(14, 165, 164, .12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f0fdfa 52%, #eff6ff 100%);
    box-shadow: 0 10px 26px rgba(2, 44, 55, .10);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#wd-activetask .controlid-group-header:hover .wd-inventory-batch-card,
#wd-activetask .controlid-group-header.open .wd-inventory-batch-card {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, .58);
    box-shadow: 0 15px 34px rgba(2, 44, 55, .15);
}

#wd-activetask .wd-inventory-batch-toggle {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(180deg, #064e4a, #0f766e);
}

#wd-activetask .wd-inventory-batch-toggle .group-toggle-icon {
    margin: 0;
    transition: transform .18s ease;
}

#wd-activetask .wd-inventory-batch-identity,
#wd-activetask .wd-inventory-batch-route,
#wd-activetask .wd-inventory-batch-progress,
#wd-activetask .wd-inventory-batch-status {
    min-width: 0;
    padding: 12px 16px;
}

#wd-activetask .wd-inventory-batch-identity {
    display: flex;
    align-items: center;
    gap: 11px;
}

#wd-activetask .wd-inventory-batch-identity strong {
    overflow: hidden;
    color: #062d44;
    font-size: .91rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wd-activetask .wd-inventory-multi-badge,
#wd-activetask .wd-inventory-single-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .035em;
    text-transform: uppercase;
}

#wd-activetask .wd-inventory-multi-badge {
    border: 1px solid rgba(212, 160, 23, .55);
    color: #8a5700;
    background: #fff8df;
}

#wd-activetask .wd-inventory-single-badge {
    margin-right: 9px;
    border: 1px solid rgba(14, 116, 144, .36);
    color: #075985;
    background: #f0f9ff;
}

#wd-activetask .wd-inventory-control-id {
    display: inline-block;
    vertical-align: middle;
    color: #062d44;
    font-size: .78rem;
    font-weight: 900;
}

#wd-activetask .wd-inventory-batch-route,
#wd-activetask .wd-inventory-movement {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #164e63;
    font-weight: 800;
}

#wd-activetask .wd-inventory-batch-route {
    border-left: 1px solid rgba(14, 116, 144, .15);
    border-right: 1px solid rgba(14, 116, 144, .15);
}

#wd-activetask .wd-inventory-batch-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #475569;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

#wd-activetask .wd-inventory-progress-track {
    overflow: hidden;
    height: 7px;
    margin: 7px 0 5px;
    border-radius: 999px;
    background: #dbe7ec;
}

#wd-activetask .wd-inventory-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

#wd-activetask .wd-inventory-batch-progress small {
    color: #0f766e;
    font-size: .66rem;
    font-weight: 900;
}

#wd-activetask .wd-inventory-batch-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

#wd-activetask .wd-inventory-batch-status span {
    padding: 6px 10px;
    border-radius: 999px;
    color: #ffffff;
    background: #0b4f6c;
    font-size: .67rem;
    font-weight: 950;
    text-transform: uppercase;
}

#wd-activetask .wd-inventory-batch-status small {
    color: #64748b;
    font-size: .64rem;
    font-weight: 750;
}

#wd-activetask .wd-inventory-modern-table tbody tr.controlid-group-child td {
    background: #fbfefd !important;
}

#wd-activetask .wd-inventory-modern-table tbody tr.controlid-group-child td:first-child {
    border-left: 4px solid rgba(15, 118, 110, .35);
}

#wd-activetask .wd-inventory-modern-table tbody tr.wd-inventory-completed-child td {
    color: #64748b !important;
    background: #f8fafc !important;
}

#wd-activetask .wd-inventory-item-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #0f766e;
    background: #e7f8f4;
    font-size: .68rem;
    font-weight: 950;
}

#wd-activetask .wd-inventory-product-name {
    color: #0f172a;
    font-size: .78rem;
    font-weight: 850;
}

#wd-activetask .wd-inventory-detail-text {
    color: #64748b;
    font-size: .73rem;
}

#wd-activetask .wd-inventory-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--inventory-status-color, #0f766e) 35%, white);
    border-radius: 999px;
    color: var(--inventory-status-color, #0f766e);
    background: color-mix(in srgb, var(--inventory-status-color, #0f766e) 8%, white);
    font-size: .66rem;
    font-weight: 950;
    text-transform: uppercase;
}

#wd-activetask .wd-inventory-action-btn {
    min-width: 108px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #064e4a, #0f766e);
    box-shadow: 0 6px 14px rgba(15, 118, 110, .22);
    cursor: pointer;
    font-size: .69rem;
    font-weight: 900;
    white-space: nowrap;
}

#wd-activetask .wd-inventory-action-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #073f3c, #0b675f);
}

#wd-activetask .wd-inventory-received-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16835d;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

#wd-activetask .wd-inventory-single-row td {
    border-top: 1px solid #dce8ec !important;
    border-bottom: 1px solid #dce8ec !important;
    background: #ffffff !important;
}

#wd-activetask .wd-inventory-single-row td:first-child {
    border-left: 4px solid #0e7490 !important;
}

@media (max-width: 1320px) {
    #wd-activetask .wd-inventory-batch-card {
        grid-template-columns: 40px minmax(190px, .8fr) minmax(190px, 1fr) minmax(220px, 1fr) minmax(105px, .5fr);
    }
    #wd-activetask .wd-inventory-batch-identity,
    #wd-activetask .wd-inventory-batch-route,
    #wd-activetask .wd-inventory-batch-progress,
    #wd-activetask .wd-inventory-batch-status {
        padding: 10px 11px;
    }
}

@media (max-width: 980px) {
    .wd-page-hero-inventory,
    .wd-page-hero-records-inventory,
    .wd-page-hero-material {
        background: linear-gradient(135deg, #052e2b, #0f766e) !important;
    }
}

/* ========================================================================
   8.4.5 — Invoice Management Dashboard Premium UI Upgrade
   Visual polish only. Existing dashboard data source and workflow logic preserved.
   ======================================================================== */
#im-dashboard {
    background: transparent !important;
}

#im-dashboard > h1 {
    display: none;
}

.im-premium-dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.im-dashboard-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    min-height: 170px;
    padding: 28px 30px;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 20%, rgba(250, 204, 21, 0.18), transparent 32%),
        radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.20), transparent 36%),
        linear-gradient(135deg, #05243a 0%, #0b4a66 49%, #f8fafc 50%, #ffffff 100%);
    border: 1px solid rgba(255,255,255,0.62);
    box-shadow: 0 26px 64px rgba(5, 28, 44, 0.18);
}

.im-dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.065) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .34;
    pointer-events: none;
}

.im-dashboard-hero::after {
    content: "";
    position: absolute;
    right: -92px;
    top: -105px;
    width: 285px;
    height: 285px;
    border-radius: 999px;
    background: rgba(250, 204, 21, .15);
    pointer-events: none;
}

.im-dashboard-hero > * {
    position: relative;
    z-index: 1;
}

.im-dashboard-hero-main {
    max-width: 780px;
}

.im-dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: #fde68a;
    border: 1px solid rgba(255,255,255,0.20);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .075em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.im-dashboard-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,.16);
}

.im-dashboard-hero h1 {
    display: inline-block;
    margin: 0;
    color: #ffd43b !important;
    border: none !important;
    font-size: clamp(2.05rem, 3vw, 3.2rem);
    line-height: .95;
    letter-spacing: -0.075em;
    -webkit-text-stroke: .65px rgba(3, 18, 30, .58);
    text-shadow:
        0 2px 0 rgba(3, 18, 30, .72),
        0 12px 30px rgba(0,0,0,.42),
        0 0 26px rgba(255, 212, 59, .34);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .20));
}

.im-dashboard-hero p {
    max-width: 700px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.88);
    font-size: .96rem;
    font-weight: 650;
    line-height: 1.55;
}

.im-dashboard-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 210px;
}

.im-dashboard-refresh-btn,
#im-dashboard-refresh-btn.im-dashboard-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 16px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    color: #073b5c !important;
    font-weight: 950 !important;
    box-shadow: 0 16px 34px rgba(3, 29, 47, .20);
    white-space: nowrap;
    cursor: pointer;
}

.im-dashboard-refresh-btn:hover,
#im-dashboard-refresh-btn.im-dashboard-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(3, 29, 47, .24);
}

.im-dashboard-summary-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.im-dashboard-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 16px 38px rgba(15,46,71,.08);
}

.im-dashboard-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #0f6d8d, #22c55e);
}

.im-dashboard-summary-card.committed::before { background: linear-gradient(90deg, #0f6d8d, #38bdf8); }
.im-dashboard-summary-card.delivered::before { background: linear-gradient(90deg, #16a34a, #86efac); }
.im-dashboard-summary-card.outstanding::before { background: linear-gradient(90deg, #f59e0b, #fde68a); }
.im-dashboard-summary-card.months::before { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }

.im-dashboard-summary-card span {
    display: block;
    color: #64748b;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.im-dashboard-summary-card strong {
    display: block;
    margin-top: 11px;
    color: #073b5c;
    font-size: clamp(1.25rem, 1.9vw, 1.8rem);
    line-height: 1.05;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.im-dashboard-summary-card small {
    display: block;
    margin-top: 9px;
    color: #6b7280;
    font-weight: 800;
}

.im-dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.im-dashboard-action-tile {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas: "icon title" "icon desc";
    gap: 3px 12px;
    align-items: center;
    min-height: 86px;
    padding: 15px;
    border-radius: 22px;
    border: 1px solid rgba(148,163,184,.24);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    box-shadow: 0 14px 34px rgba(15,46,71,.07);
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.im-dashboard-action-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 109, 141, .25);
    box-shadow: 0 20px 42px rgba(15,46,71,.12);
}

.im-dashboard-action-tile i {
    grid-area: icon;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #073b5c, #0f6d8d);
    box-shadow: 0 12px 24px rgba(15,109,141,.24);
}

.im-dashboard-action-tile span {
    grid-area: title;
    color: #0f172a;
    font-weight: 950;
    font-size: .96rem;
}

.im-dashboard-action-tile small {
    grid-area: desc;
    color: #64748b;
    font-weight: 750;
    line-height: 1.25;
}

.im-dashboard-premium-grid {
    gap: 16px !important;
}

.im-chart-card.im-premium-rank-card,
.im-chart-card.im-dashboard-flow-card {
    background: rgba(255,255,255,.97) !important;
    color: #0f172a !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    border-radius: 26px !important;
    padding: 20px !important;
    box-shadow: 0 18px 44px rgba(15,46,71,.08) !important;
}

.im-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.im-card-title-row h2,
.im-dashboard-flow-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #073b5c !important;
    border: none !important;
    font-size: 1.18rem !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
    font-weight: 950 !important;
}

.im-card-kicker {
    display: block;
    margin-bottom: 5px;
    color: #c3502f;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 950;
}

.im-card-title-row > i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #073b5c;
    background: #f1f5f9;
}

.im-premium-top5-list li {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(148,163,184,.20) !important;
}

.im-premium-top5-list li:last-child {
    border-bottom: none !important;
}

.im-top5-rank {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #073b5c;
    background: #e0f2fe;
    font-weight: 950;
}

.im-top5-main {
    min-width: 0;
}

.im-premium-top5-list .top5-name {
    display: block;
    color: #0f172a !important;
    font-weight: 900 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0 !important;
}

.im-top5-bar {
    height: 6px;
    margin-top: 7px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.im-top5-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f6d8d, #22c55e);
}

.im-premium-top5-list .top5-value {
    color: #073b5c !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 950 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
}

.im-dashboard-flow-header {
    align-items: flex-start !important;
    gap: 18px;
    margin-bottom: 12px;
}

.im-dashboard-flow-header p {
    margin: 7px 0 0;
    color: #64748b;
    font-weight: 750;
}

.im-dashboard-chart-controls select,
.dashboard-chart-header.im-dashboard-flow-header select {
    min-width: 120px !important;
    height: 42px;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #073b5c !important;
    border: 1px solid #dbe3ec !important;
    font-weight: 950 !important;
    padding: 0 12px !important;
}

.im-premium-chart-container {
    height: 430px !important;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148,163,184,.20);
}

.im-dashboard-standby-card,
.im-dashboard-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    text-align: center;
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 16px 38px rgba(15,46,71,.08);
    padding: 28px;
}

.im-dashboard-standby-card i,
.im-dashboard-error-state i,
.im-dashboard-chart-empty i {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #073b5c, #0f6d8d);
    font-size: 1.9rem;
    box-shadow: 0 18px 34px rgba(15,109,141,.25);
}

.im-dashboard-standby-card h2,
.im-dashboard-error-state h2 {
    margin: 16px 0 8px;
    color: #073b5c;
    font-size: 1.35rem;
    letter-spacing: -0.04em;
}

.im-dashboard-standby-card p,
.im-dashboard-error-state p {
    max-width: 620px;
    margin: 0;
    color: #64748b;
    font-weight: 750;
}

.im-dashboard-chart-empty {
    position: absolute;
    inset: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 850;
}

.im-dashboard-list-loading,
.im-dashboard-empty-line {
    display: block !important;
    color: #64748b !important;
    font-weight: 800;
    padding: 18px 0 !important;
}

@media (max-width: 1100px) {
    .im-dashboard-summary-row,
    .im-dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .im-dashboard-hero {
        flex-direction: column;
        padding: 22px;
        background:
            radial-gradient(circle at 90% 10%, rgba(250, 204, 21, 0.18), transparent 32%),
            linear-gradient(135deg, #05243a 0%, #0b4a66 100%);
    }
    .im-dashboard-hero-actions {
        justify-content: flex-start;
        min-width: 0;
    }
    .im-dashboard-summary-row,
    .im-dashboard-quick-actions,
    .im-dashboard-grid.im-dashboard-premium-grid {
        grid-template-columns: 1fr !important;
    }
    .im-dashboard-action-tile {
        min-height: 78px;
    }
    .im-premium-top5-list li {
        grid-template-columns: 30px minmax(0, 1fr) !important;
    }
    .im-premium-top5-list .top5-value {
        grid-column: 2 / 3;
        width: fit-content;
    }
    .im-dashboard-flow-header {
        flex-direction: column;
    }
    .im-premium-chart-container {
        height: 340px !important;
        padding: 8px;
    }
}


/* ========================================================================
   8.4.7 — Invoice Management Full Premium UI + Title Contrast Fix
   Visual polish only. No save/update/Firebase/payment workflow logic changed.
   ======================================================================== */

/* Fix unreadable dashboard title: give the gold title a dark glass plate. */
.im-dashboard-hero h1 {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 8px 16px 10px !important;
    border-radius: 18px !important;
    color: #ffd43b !important;
    background: linear-gradient(135deg, rgba(3, 18, 30, .82), rgba(7, 59, 92, .64)) !important;
    border: 1px solid rgba(250, 204, 21, .28) !important;
    letter-spacing: -0.04em !important;
    -webkit-text-stroke: .55px rgba(3, 18, 30, .72);
    text-shadow:
        0 2px 0 rgba(3, 18, 30, .76),
        0 12px 28px rgba(0,0,0,.42),
        0 0 24px rgba(255, 212, 59, .36) !important;
    box-shadow: 0 18px 40px rgba(3, 18, 30, .24), inset 0 1px 0 rgba(255,255,255,.10);
}

.im-dashboard-quick-actions {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

/* Shared Invoice Management premium hero language. */
#im-invoice-entry > h1,
#im-payments > h1,
#im-batch-entry > .header-top,
#im-summary-note > div:first-of-type,
#im-reporting > .header {
    position: relative;
    overflow: hidden;
    margin: 0 0 18px !important;
    padding: 24px 28px !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 89% 18%, rgba(250, 204, 21, .16), transparent 32%),
        linear-gradient(135deg, #05243a 0%, #0b4a66 54%, #ffffff 55%, #f8fafc 100%) !important;
    box-shadow: 0 24px 58px rgba(5, 28, 44, .15) !important;
}

#im-invoice-entry > h1::after,
#im-payments > h1::after,
#im-batch-entry > .header-top::after,
#im-summary-note > div:first-of-type::after,
#im-reporting > .header::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .34;
    pointer-events: none;
}

#im-invoice-entry > h1 > *,
#im-payments > h1 > *,
#im-batch-entry > .header-top > *,
#im-summary-note > div:first-of-type > *,
#im-reporting > .header > * {
    position: relative;
    z-index: 1;
}

#im-invoice-entry > h1,
#im-payments > h1 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #ffd43b !important;
    border-bottom: none !important;
    font-size: clamp(1.85rem, 2.8vw, 2.7rem) !important;
    line-height: .95 !important;
    letter-spacing: -0.055em !important;
    -webkit-text-stroke: .55px rgba(3, 18, 30, .68);
    text-shadow: 0 2px 0 rgba(3, 18, 30, .76), 0 12px 28px rgba(0,0,0,.40), 0 0 25px rgba(255,212,59,.34);
}

#im-invoice-entry > h1::before,
#im-payments > h1::before {
    content: "Invoice Management";
    width: 100%;
    color: #fff1a8;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .085em;
    text-transform: uppercase;
    text-shadow: none;
    -webkit-text-stroke: 0;
}
#im-payments > h1::before { content: "Accounts Payment Queue"; }

#im-invoice-entry > h1 #im-show-active-jobs-btn {
    margin-left: auto !important;
    border-radius: 999px !important;
    padding: 10px 15px !important;
    background: rgba(255,255,255,.96) !important;
    color: #073b5c !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 14px 30px rgba(3, 18, 30, .18);
    font-weight: 950 !important;
    text-shadow: none !important;
}

#im-batch-entry > .header-top {
    min-height: 138px;
    align-items: center !important;
    gap: 18px !important;
}
#im-batch-entry > .header-top .header-title,
#im-reporting > .header .header-title {
    flex-wrap: wrap;
    align-items: flex-start !important;
}
#im-batch-entry > .header-top .header-title > div:not(.icon-wrapper),
#im-reporting > .header .header-title > h1 {
    min-width: 0;
}
#im-batch-entry > .header-top h1,
#im-summary-note > div:first-of-type h1,
#im-reporting > .header h1 {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
    border: none !important;
    border-radius: 17px !important;
    color: #ffd43b !important;
    background: linear-gradient(135deg, rgba(3, 18, 30, .82), rgba(7, 59, 92, .64)) !important;
    font-size: clamp(1.55rem, 2.3vw, 2.25rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
    -webkit-text-stroke: .48px rgba(3, 18, 30, .72);
    text-shadow: 0 2px 0 rgba(3, 18, 30, .76), 0 11px 26px rgba(0,0,0,.40), 0 0 22px rgba(255,212,59,.34) !important;
}
#im-batch-entry > .header-top p,
#im-reporting > .header p {
    color: rgba(255,255,255,.88) !important;
    font-weight: 750 !important;
}
#im-batch-entry > .header-top .icon-wrapper,
#im-reporting > .header .icon-wrapper {
    width: 52px !important;
    height: 52px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    color: #073b5c !important;
    box-shadow: 0 16px 34px rgba(3, 18, 30, .20) !important;
}
#batch-count-display,
#reporting-count-display,
#payments-count-display,
#summary-note-count-display {
    border-radius: 999px !important;
    background: rgba(255,255,255,.95) !important;
    color: #073b5c !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    font-weight: 950 !important;
}

#im-summary-note > div:first-of-type {
    min-height: 110px !important;
    align-items: center !important;
}
#im-summary-note > div:first-of-type > div:first-child::before,
#im-reporting > .header .header-title::before,
#im-batch-entry > .header-top .header-title::before {
    content: "Invoice Management";
    display: block;
    width: 100%;
    margin-bottom: 8px;
    color: #fff1a8;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .085em;
    text-transform: uppercase;
}
#im-reporting > .header .header-title::before { content: "Records & Reports"; }
#im-batch-entry > .header-top .header-title::before { content: "Bulk Invoice Update"; }
#im-summary-note > div:first-of-type > div:first-child::before { content: "Payment Summary"; }

#im-reporting > .header .header-top,
#im-reporting > .header .daily-report-section,
#im-batch-entry > .header-top > div:last-child,
#im-summary-note > div:first-of-type > div:last-child {
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
#im-reporting > .header .daily-report-section button,
#im-batch-entry > .header-top button,
#im-summary-note > div:first-of-type button,
#im-payments #im-add-payment-button,
#im-payments #im-save-payments-button {
    border-radius: 14px !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 30px rgba(3, 18, 30, .16) !important;
}

/* Premium search/form/table containers in Invoice Management. */
#im-po-search-container,
#im-invoice-form-trigger,
#im-existing-invoices-container,
#im-batch-entry > div:nth-of-type(2),
#im-batch-global-controls,
#im-reporting-form,
#im-reporting .reporting-legend,
#im-payments .form-buttons-container,
#im-summary-note > div:nth-of-type(2) > div:first-child {
    border-radius: 24px !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 16px 38px rgba(15,46,71,.07) !important;
}
#im-po-search-container,
#im-batch-entry > div:nth-of-type(2),
#im-batch-global-controls,
#im-reporting-form {
    padding: 14px !important;
}
#im-invoice-form-trigger {
    padding: 12px !important;
}
#im-existing-invoices-container {
    padding: 18px !important;
    margin-top: 16px !important;
}
#im-invoice-entry input,
#im-invoice-entry select,
#im-batch-entry input,
#im-batch-entry select,
#im-reporting input,
#im-reporting select,
#im-summary-note input,
#im-summary-note select,
#im-summary-note textarea,
#im-payments input,
#im-payments select {
    border-radius: 13px !important;
    border-color: #dbe3ec !important;
}

#im-po-search-container .search-bar-local,
#im-reporting-form .search-box,
#im-batch-entry .search-bar-local {
    height: 48px;
    border-radius: 17px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
#im-po-search-container button,
#im-reporting-form button,
#im-batch-entry button,
#im-invoice-form-trigger button,
#im-payments button {
    border-radius: 14px !important;
    font-weight: 950 !important;
}

#im-reporting .grid-header,
#im-reporting .grid-body,
#im-payments .table-wrapper,
#im-existing-invoices-container .table-wrapper {
    border-radius: 26px !important;
    padding: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98)) !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 24px 60px rgba(15,46,71,.10) !important;
}
#im-reporting .grid-header {
    color: #64748b !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}
#im-payments table,
#im-existing-invoices-container table {
    border-collapse: separate !important;
    border-spacing: 0 9px !important;
    background: transparent !important;
}
#im-payments table thead th,
#im-existing-invoices-container table thead th {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}
#im-payments table tbody tr,
#im-existing-invoices-container table tbody tr {
    background: #ffffff !important;
    box-shadow: 0 13px 30px rgba(15,46,71,.07);
}
#im-payments table tbody td,
#im-existing-invoices-container table tbody td {
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
#im-payments table tbody td:first-child,
#im-existing-invoices-container table tbody td:first-child {
    border-left: 6px solid #0f6d8d !important;
    border-radius: 17px 0 0 17px;
}
#im-payments table tbody td:last-child,
#im-existing-invoices-container table tbody td:last-child {
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 17px 17px 0;
}

/* Invoice Entry modal receives the same premium shell without changing fields/logic. */
#im-invoice-entry-modal .modal-container {
    border-radius: 26px !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 32px 80px rgba(3, 18, 30, .26) !important;
    overflow: hidden;
}
#im-invoice-entry-modal .modal-header {
    background: linear-gradient(135deg, #05243a, #0b4a66) !important;
    color: #ffffff !important;
    border-bottom: none !important;
}
#im-invoice-entry-modal #im-form-title {
    color: #ffd43b !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em;
    text-shadow: 0 2px 0 rgba(3,18,30,.65);
}
#im-invoice-entry-modal .modal-content {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}
#im-invoice-entry-modal .form-grid-compact {
    gap: 14px !important;
}
#im-invoice-entry-modal .form-group {
    border-radius: 17px;
}

/* Summary Note: polish the workspace without disturbing the print layout. */
#im-summary-note > div:nth-of-type(2) {
    gap: 18px !important;
}
#im-summary-note > div:nth-of-type(2) > div:first-child {
    padding: 14px !important;
    border-right: none !important;
}
#im-summary-note > div:nth-of-type(2) > div:first-child > div:first-child {
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 14px 30px rgba(15,46,71,.06);
}
#im-summary-note > div:nth-of-type(2) > div:last-child {
    border-radius: 26px !important;
    border-left: none !important;
    background: linear-gradient(135deg, #e2e8f0, #f8fafc) !important;
}
#summary-note-generate-btn,
#summary-note-clear-btn,
#summary-note-update-btn,
#im-refresh-summary-button {
    border-radius: 15px !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 28px rgba(15,46,71,.12) !important;
}

@media (max-width: 980px) {
    #im-invoice-entry > h1,
    #im-payments > h1,
    #im-batch-entry > .header-top,
    #im-summary-note > div:first-of-type,
    #im-reporting > .header {
        background: linear-gradient(135deg, #05243a, #0b4a66) !important;
    }
    #im-batch-entry > .header-top,
    #im-reporting > .header .header-top,
    #im-summary-note > div:first-of-type {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #im-reporting > .header .daily-report-section,
    #im-batch-entry > .header-top > div:last-child,
    #im-summary-note > div:first-of-type > div:last-child {
        width: 100%;
        justify-content: flex-start !important;
    }
    #im-dashboard-hero h1,
    .im-dashboard-hero h1 {
        font-size: 2rem !important;
    }
    #im-summary-note {
        height: auto !important;
    }
    #im-summary-note > div:nth-of-type(2) {
        flex-direction: column !important;
        overflow: visible !important;
    }
    #im-summary-note > div:nth-of-type(2) > div:first-child,
    #im-summary-note > div:nth-of-type(2) > div:last-child {
        width: 100% !important;
        flex: none !important;
    }
}


/* ========================================================================
   8.4.7 — Invoice Dashboard Header Readability Fix
   Fix only the Invoice Management Dashboard hero. Other premium headers remain unchanged.
   ======================================================================== */
#im-dashboard .im-dashboard-hero,
#im-dashboard .im-dashboard-standby-hero {
    min-height: 170px !important;
    align-items: center !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(250, 204, 21, .22), transparent 31%),
        radial-gradient(circle at 7% 0%, rgba(34, 211, 238, .18), transparent 35%),
        linear-gradient(135deg, #05243a 0%, #083650 45%, #0b4a66 100%) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    box-shadow: 0 26px 64px rgba(5, 28, 44, .20) !important;
}

#im-dashboard .im-dashboard-hero::after,
#im-dashboard .im-dashboard-standby-hero::after {
    right: -74px !important;
    top: -84px !important;
    width: 245px !important;
    height: 245px !important;
    background: radial-gradient(circle, rgba(250,204,21,.28), rgba(250,204,21,.10) 58%, transparent 72%) !important;
}

#im-dashboard .im-dashboard-hero-main {
    max-width: 840px !important;
}

#im-dashboard .im-dashboard-hero h1 {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 9px 18px 11px !important;
    border-radius: 18px !important;
    background: rgba(3, 18, 30, .90) !important;
    border: 1px solid rgba(250, 204, 21, .46) !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
    filter: none !important;
}

#im-dashboard .im-dashboard-hero h1,
#im-dashboard .im-dashboard-hero h1 .im-command-title-text {
    color: #ffe66d !important;
    -webkit-text-fill-color: #ffe66d !important;
    -webkit-text-stroke: 0 !important;
    text-shadow:
        0 2px 0 rgba(3, 18, 30, .92),
        0 0 18px rgba(250, 204, 21, .44),
        0 10px 22px rgba(0, 0, 0, .35) !important;
    font-weight: 950 !important;
}

#im-dashboard .im-dashboard-eyebrow {
    background: rgba(255,255,255,.13) !important;
    color: #fff3bf !important;
    border-color: rgba(250, 204, 21, .30) !important;
}

#im-dashboard .im-dashboard-hero p {
    max-width: 760px !important;
    color: rgba(255,255,255,.94) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}

#im-dashboard .im-dashboard-hero-actions {
    align-items: center !important;
    justify-content: flex-end !important;
}

#im-dashboard .im-dashboard-refresh-btn,
#im-dashboard #im-dashboard-refresh-btn.im-dashboard-refresh-btn {
    background: linear-gradient(135deg, #ffffff, #fff7cc) !important;
    color: #073b5c !important;
    border: 1px solid rgba(250, 204, 21, .38) !important;
    box-shadow: 0 16px 36px rgba(3, 18, 30, .24) !important;
}

@media (max-width: 768px) {
    #im-dashboard .im-dashboard-hero,
    #im-dashboard .im-dashboard-standby-hero {
        min-height: auto !important;
        padding: 22px !important;
    }
    #im-dashboard .im-dashboard-hero h1 {
        font-size: 1.8rem !important;
        padding: 8px 13px 10px !important;
    }
    #im-dashboard .im-dashboard-hero-actions {
        justify-content: flex-start !important;
    }
}


/* ========================================================================
   8.4.9 — Invoice Dashboard Header Uniformity Fix
   Makes the Dashboard hero match the clean Invoice Records premium header.
   ======================================================================== */
#im-dashboard .im-dashboard-hero,
#im-dashboard .im-dashboard-standby-hero {
    min-height: 132px !important;
    padding: 24px 28px !important;
    align-items: center !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(250, 204, 21, .16), transparent 30%),
        linear-gradient(135deg, #05243a 0%, #0b4a66 72%, #ffffff 73%, #f8fafc 100%) !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    box-shadow: 0 24px 58px rgba(5, 28, 44, .15) !important;
}

#im-dashboard .im-dashboard-hero::before,
#im-dashboard .im-dashboard-standby-hero::before {
    opacity: .34 !important;
}

#im-dashboard .im-dashboard-hero::after,
#im-dashboard .im-dashboard-standby-hero::after {
    right: -78px !important;
    top: -86px !important;
    width: 235px !important;
    height: 235px !important;
    background: rgba(250, 204, 21, .14) !important;
}

#im-dashboard .im-dashboard-hero-main {
    max-width: 860px !important;
}

#im-dashboard .im-dashboard-eyebrow {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff1a8 !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .085em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
    backdrop-filter: none !important;
}

#im-dashboard .im-dashboard-eyebrow::before {
    display: none !important;
}

#im-dashboard .im-dashboard-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

#im-dashboard .im-dashboard-title-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    color: #073b5c !important;
    box-shadow: 0 16px 34px rgba(3, 18, 30, .20) !important;
}

#im-dashboard .im-dashboard-hero h1 {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    font-size: clamp(1.65rem, 2.4vw, 2.35rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
}

#im-dashboard .im-dashboard-hero h1,
#im-dashboard .im-dashboard-hero h1 .im-command-title-text {
    color: #ffd43b !important;
    -webkit-text-fill-color: #ffd43b !important;
    -webkit-text-stroke: .48px rgba(3, 18, 30, .72) !important;
    text-shadow:
        0 2px 0 rgba(3, 18, 30, .76),
        0 11px 26px rgba(0,0,0,.40),
        0 0 22px rgba(255,212,59,.34) !important;
    font-weight: 950 !important;
}

#im-dashboard .im-dashboard-hero p {
    margin: 11px 0 0 66px !important;
    max-width: 760px !important;
    color: rgba(255,255,255,.92) !important;
    font-weight: 750 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}

#im-dashboard .im-dashboard-refresh-btn,
#im-dashboard #im-dashboard-refresh-btn.im-dashboard-refresh-btn {
    background: rgba(255,255,255,.96) !important;
    color: #073b5c !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 14px 30px rgba(3, 18, 30, .18) !important;
}

@media (max-width: 768px) {
    #im-dashboard .im-dashboard-hero,
    #im-dashboard .im-dashboard-standby-hero {
        padding: 22px !important;
        min-height: auto !important;
        background: linear-gradient(135deg, #05243a 0%, #0b4a66 100%) !important;
    }
    #im-dashboard .im-dashboard-title-row {
        align-items: flex-start !important;
    }
    #im-dashboard .im-dashboard-title-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 16px !important;
    }
    #im-dashboard .im-dashboard-hero h1 {
        font-size: 1.8rem !important;
    }
    #im-dashboard .im-dashboard-hero p {
        margin-left: 0 !important;
    }
}


/* ========================================================================
   8.4.9 — Invoice Dashboard Title Size + Naming Fix
   Makes the dashboard hero title match the same strong size as Invoice Records.
   Display-only. No invoice/save/Firebase logic changed.
   ======================================================================== */
#im-dashboard .im-dashboard-title-row {
    align-items: center !important;
    gap: 16px !important;
}

#im-dashboard .im-dashboard-title-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
}

#im-dashboard .im-dashboard-hero h1,
#im-dashboard .im-dashboard-hero h1 .im-command-title-text {
    font-size: clamp(2rem, 3vw, 3.15rem) !important;
    line-height: .95 !important;
    letter-spacing: -0.075em !important;
    font-weight: 950 !important;
}

#im-dashboard .im-dashboard-hero p {
    margin-top: 12px !important;
}

@media (max-width: 768px) {
    #im-dashboard .im-dashboard-title-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }
    #im-dashboard .im-dashboard-hero h1,
    #im-dashboard .im-dashboard-hero h1 .im-command-title-text {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
        letter-spacing: -0.065em !important;
    }
}


/* 8.4.10 - Invoice search field border cleanup
   Keep one premium rounded outline only on the search wrapper.
   Removes the extra inner oval/line from Invoice Records, Invoice Entry, and Batch Entry search fields. */
#im-po-search-container .search-bar-local,
#im-reporting-form .search-box,
#im-batch-entry .search-bar-local {
    overflow: hidden !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px rgba(15,46,71,.05) !important;
}
#im-po-search-container .search-bar-local:focus-within,
#im-reporting-form .search-box:focus-within,
#im-batch-entry .search-bar-local:focus-within {
    border-color: #0f6d8d !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 4px rgba(15,109,141,.12), 0 12px 26px rgba(15,46,71,.08) !important;
}
#im-po-search-container .search-bar-local input,
#im-reporting-form .search-box input,
#im-batch-entry .search-bar-local input,
#im-batch-po-input {
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    color: #1e293b !important;
    font-weight: 750;
}
#im-po-search-container .search-bar-local input,
#im-batch-entry .search-bar-local input,
#im-batch-po-input {
    padding: 0 14px 0 42px !important;
}
#im-reporting-form .search-box input {
    padding: 0 18px 0 56px !important;
}
#im-po-search-container .search-bar-local input:focus,
#im-reporting-form .search-box input:focus,
#im-batch-entry .search-bar-local input:focus,
#im-batch-po-input:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
#im-po-search-container .search-bar-local i,
#im-reporting-form .search-box i,
#im-batch-entry .search-bar-local i {
    pointer-events: none;
    z-index: 2;
}


/* ========================================================================
   8.5.3 — Global Header Uniformity UI Fix
   Uses the WorkDesk Dashboard hero as the master pattern:
   small section label above, golden title below, description below, action/status at right.
   Display-only. No Firebase/read/write/save/workflow logic changed.
   ======================================================================== */
:root {
    --iba-hero-gold: #ffd43b;
    --iba-hero-gold-soft: #fff1a8;
    --iba-hero-blue-a: #06283d;
    --iba-hero-blue-b: #0b4e70;
    --iba-hero-line: rgba(255,255,255,.82);
}

/* Shared hero container: same structure as the WorkDesk Dashboard reference. */
.wd-page-hero,
.im-standard-hero,
#im-dashboard .im-dashboard-hero,
#im-dashboard .im-dashboard-standby-hero,
#im-batch-entry > .header-top,
#im-summary-note > div:first-of-type,
#im-reporting > .header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    min-height: 168px !important;
    padding: 28px 30px !important;
    margin: 0 0 20px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    box-shadow: 0 24px 58px rgba(5,28,44,.15) !important;
    background:
        radial-gradient(circle at 92% 14%, rgba(250,204,21,.16), transparent 30%),
        linear-gradient(135deg, var(--iba-hero-blue-a) 0%, var(--iba-hero-blue-b) 54%, #ffffff 55%, #f8fafc 100%) !important;
}

.wd-page-hero::before,
.im-standard-hero::before,
#im-dashboard .im-dashboard-hero::before,
#im-dashboard .im-dashboard-standby-hero::before,
#im-batch-entry > .header-top::after,
#im-summary-note > div:first-of-type::after,
#im-reporting > .header::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    opacity: .34 !important;
    pointer-events: none !important;
}

.wd-page-hero::after,
.im-standard-hero::after,
#im-dashboard .im-dashboard-hero::after,
#im-dashboard .im-dashboard-standby-hero::after {
    content: "" !important;
    position: absolute !important;
    right: -80px !important;
    top: -95px !important;
    width: 260px !important;
    height: 260px !important;
    border-radius: 50% !important;
    background: rgba(250,204,21,.14) !important;
    pointer-events: none !important;
}

.wd-page-hero > *,
.im-standard-hero > *,
#im-dashboard .im-dashboard-hero > *,
#im-dashboard .im-dashboard-standby-hero > *,
#im-batch-entry > .header-top > *,
#im-summary-note > div:first-of-type > *,
#im-reporting > .header > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Top label must be above the title, never beside it. */
.wd-page-hero-main,
.im-standard-hero-main,
#im-dashboard .im-dashboard-hero-main,
#im-batch-entry > .header-top .header-title,
#im-summary-note > div:first-of-type > div:first-child,
#im-reporting > .header .header-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    max-width: 760px !important;
    min-width: 0 !important;
}

.wd-page-eyebrow,
.im-standard-eyebrow,
#im-dashboard .im-dashboard-eyebrow,
#im-batch-entry > .header-top .header-title::before,
#im-summary-note > div:first-of-type > div:first-child::before,
#im-reporting > .header .header-title::before {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    color: var(--iba-hero-gold-soft) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
    -webkit-text-stroke: 0 !important;
    backdrop-filter: blur(8px) !important;
}

/* Remove title icons/cards so the page title follows the same layout as the reference dashboard. */
#im-dashboard .im-dashboard-title-icon,
#im-batch-entry > .header-top .icon-wrapper,
#im-reporting > .header .icon-wrapper {
    display: none !important;
}
#im-dashboard .im-dashboard-title-row {
    display: block !important;
    margin: 0 !important;
}

/* Golden title — no title plate, no dark card behind it. */
.wd-page-hero h1,
.im-standard-hero h1,
#im-dashboard .im-dashboard-hero h1,
#im-dashboard .im-dashboard-hero h1 .im-command-title-text,
#im-batch-entry > .header-top h1,
#im-summary-note > div:first-of-type h1,
#im-reporting > .header h1 {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    color: var(--iba-hero-gold) !important;
    -webkit-text-fill-color: var(--iba-hero-gold) !important;
    font-size: clamp(2rem, 3vw, 3.15rem) !important;
    line-height: .95 !important;
    letter-spacing: -0.075em !important;
    font-weight: 950 !important;
    -webkit-text-stroke: .65px rgba(3,18,30,.58) !important;
    text-shadow:
        0 2px 0 rgba(3,18,30,.72),
        0 12px 30px rgba(0,0,0,.42),
        0 0 26px rgba(255,212,59,.34) !important;
}

#im-batch-entry > .header-top .header-title::before { content: "Bulk Invoice Update" !important; }
#im-summary-note > div:first-of-type > div:first-child::before { content: "Payment Summary" !important; }
#im-reporting > .header .header-title::before { content: "Records & Reports" !important; }

/* Description line under the title. */
.wd-page-hero p,
.im-standard-hero p,
#im-dashboard .im-dashboard-hero p,
#im-dashboard .im-dashboard-standby-hero p,
#im-batch-entry > .header-top p,
#im-summary-note > div:first-of-type p,
#im-reporting > .header p {
    margin: 12px 0 0 !important;
    max-width: 680px !important;
    color: rgba(255,255,255,.88) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.20) !important;
}
#im-dashboard .im-dashboard-hero p,
#im-dashboard .im-dashboard-standby-hero p {
    margin-left: 0 !important;
}

/* The white line under the title is part of the master WorkDesk Dashboard style. */
.wd-page-hero-main h1::after,
.im-standard-hero h1::after,
#im-dashboard .im-dashboard-hero h1::after,
#im-batch-entry > .header-top h1::after,
#im-summary-note > div:first-of-type h1::after,
#im-reporting > .header h1::after {
    content: "" !important;
    display: block !important;
    width: min(545px, 100%) !important;
    height: 2px !important;
    margin-top: 12px !important;
    border-radius: 999px !important;
    background: var(--iba-hero-line) !important;
    box-shadow: none !important;
    position: static !important;
}

/* Keep right-side actions/metrics clean and consistent with the dashboard Refresh button. */
.wd-page-hero-metric,
.im-standard-hero-actions,
#im-dashboard .im-dashboard-hero-actions,
#im-batch-entry > .header-top > div:last-child,
#im-summary-note > div:first-of-type > div:last-child,
#im-reporting > .header .daily-report-section {
    position: relative !important;
    z-index: 2 !important;
    align-self: center !important;
    justify-content: flex-end !important;
}

.wd-page-hero-metric {
    min-width: 150px !important;
    padding: 13px 16px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 14px 30px rgba(3,18,30,.18) !important;
    text-align: center !important;
}

/* Section identity colors — structure is uniform, color identity can vary. */
.wd-page-hero-active,
.im-hero-invoice-entry {
    --iba-hero-blue-a: #06283d;
    --iba-hero-blue-b: #0b4e70;
}
.wd-page-hero-records {
    --iba-hero-blue-a: #082f49;
    --iba-hero-blue-b: #0f5f78;
}
.wd-page-hero-inventory,
.wd-page-hero-records-inventory {
    --iba-hero-blue-a: #052e2b;
    --iba-hero-blue-b: #0f766e;
}
.wd-page-hero-material {
    --iba-hero-blue-a: #053a36;
    --iba-hero-blue-b: #0d766d;
}
#im-dashboard .im-dashboard-hero,
#im-dashboard .im-dashboard-standby-hero,
#im-batch-entry > .header-top {
    --iba-hero-blue-a: #05243a;
    --iba-hero-blue-b: #0b4a66;
}
#im-reporting > .header { --iba-hero-blue-a: #073047; --iba-hero-blue-b: #0f5f78; }
.im-hero-payments { --iba-hero-blue-a: #3b2606; --iba-hero-blue-b: #7c4a03; }
#im-summary-note > div:first-of-type { --iba-hero-blue-a: #11325a; --iba-hero-blue-b: #275a8f; }

#im-dashboard .im-dashboard-hero h1,
#im-dashboard .im-dashboard-hero h1 .im-command-title-text {
    font-size: clamp(2rem, 3vw, 3.15rem) !important;
    letter-spacing: -0.075em !important;
}

#im-dashboard .im-dashboard-refresh-btn,
#im-dashboard #im-dashboard-refresh-btn.im-dashboard-refresh-btn,
#wd-active-dashboard-refresh,
.im-standard-hero-actions button,
#im-batch-entry > .header-top button,
#im-summary-note > div:first-of-type button,
#im-reporting > .header button {
    border-radius: 999px !important;
    font-weight: 950 !important;
}

@media (max-width: 980px) {
    .wd-page-hero,
    .im-standard-hero,
    #im-dashboard .im-dashboard-hero,
    #im-dashboard .im-dashboard-standby-hero,
    #im-batch-entry > .header-top,
    #im-summary-note > div:first-of-type,
    #im-reporting > .header {
        min-height: auto !important;
        padding: 22px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        background: linear-gradient(135deg, var(--iba-hero-blue-a) 0%, var(--iba-hero-blue-b) 100%) !important;
    }
    .wd-page-hero-metric,
    .im-standard-hero-actions,
    #im-dashboard .im-dashboard-hero-actions,
    #im-batch-entry > .header-top > div:last-child,
    #im-summary-note > div:first-of-type > div:last-child,
    #im-reporting > .header .daily-report-section {
        width: 100% !important;
        justify-content: flex-start !important;
        align-self: stretch !important;
    }
    .wd-page-hero h1,
    .im-standard-hero h1,
    #im-dashboard .im-dashboard-hero h1,
    #im-dashboard .im-dashboard-hero h1 .im-command-title-text,
    #im-batch-entry > .header-top h1,
    #im-summary-note > div:first-of-type h1,
    #im-reporting > .header h1 {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
    }
}


/* ========================================================================
   8.5.4 — Invoice Records Premium UI Cleanup
   Aligns Invoice Records with the WorkDesk-style hero structure and upgrades
   the search/filter/table area. Display-only; no Firebase/workflow logic.
   ======================================================================== */

/* Use the WorkDesk Dashboard hero structure: copy on the left, compact actions on the right. */
#im-reporting > .header {
    --iba-hero-blue-a: #073047;
    --iba-hero-blue-b: #0f5f78;
    display: block !important;
    min-height: 168px !important;
    padding: 28px 30px !important;
}

#im-reporting > .header .im-reporting-hero-layout {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
}

#im-reporting > .header .im-reporting-hero-copy {
    flex: 1 1 560px !important;
    max-width: 760px !important;
}

#im-reporting > .header .im-reporting-hero-copy::before {
    content: "Records & Reports" !important;
}

#im-reporting > .header .im-reporting-hero-subtitle {
    margin: 12px 0 0 !important;
    max-width: 640px !important;
}

#im-reporting > .header .im-reporting-hero-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-top: 12px !important;
}

#reporting-count-display.im-found-count-chip,
#reporting-count-display {
    display: none;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .14) !important;
    color: #fff1a8 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: none !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
    -webkit-text-stroke: 0 !important;
    vertical-align: middle !important;
}
#reporting-count-display:not(:empty) { display: inline-flex !important; }

/* Compact right-side action buttons so they align with the title without making the hero crowded. */
#im-reporting > .header .im-reporting-hero-actions,
#im-reporting > .header .daily-report-section {
    flex: 0 1 600px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

#im-reporting > .header .daily-report-section button {
    min-height: 38px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    background: rgba(255,255,255,.96) !important;
    color: #073047 !important;
    box-shadow: 0 14px 30px rgba(3,18,30,.16) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    text-shadow: none !important;
}
#im-reporting > .header .daily-report-section button i {
    font-size: .85rem !important;
}
#im-reporting > .header .daily-report-section button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 34px rgba(3,18,30,.22) !important;
    filter: brightness(.99) !important;
}
#im-reporting > .header .daily-report-section .download-btn--gold {
    background: linear-gradient(135deg, #fff3b0, #ffd43b) !important;
    color: #3b2f00 !important;
}
#im-reporting > .header .daily-report-section .download-btn--teal {
    background: linear-gradient(135deg, #d9fbff, #a7f3f7) !important;
    color: #073047 !important;
}
#im-reporting > .header .daily-report-section .download-btn--periwinkle {
    background: linear-gradient(135deg, #eef4ff, #dbeafe) !important;
    color: #073047 !important;
}
#im-reporting > .header .daily-report-section .im-export-excel-btn {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
    color: #14532d !important;
}
#im-reporting > .header .daily-report-section .im-reporting-refresh-mini {
    background: rgba(255,255,255,.96) !important;
    color: #073047 !important;
}

/* Modern search + filter command card. */
#im-reporting-form {
    margin-top: 18px !important;
    padding: 18px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(15,95,120,.08), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    border: 1px solid rgba(148,163,184,.26) !important;
    box-shadow: 0 22px 55px rgba(15,46,71,.08) !important;
}

#im-reporting-form .search-box {
    height: 54px !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ec !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 24px rgba(15,46,71,.05) !important;
    overflow: hidden !important;
}
#im-reporting-form .search-box input {
    height: 100% !important;
    font-size: .98rem !important;
    font-weight: 800 !important;
}
#im-reporting-form .search-box i.search-icon {
    color: #0f6d8d !important;
}

#im-reporting-form .controls-row {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
#im-reporting-form .filter-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(128px, 1fr)) !important;
    gap: 9px !important;
    min-width: 0 !important;
}
#im-reporting-form .filter-group select {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #dbe3ec !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(15,46,71,.04) !important;
}
#im-reporting-form .action-buttons,
#im-reporting-form .print-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
#im-reporting-form .action-buttons button,
#im-reporting-form .print-actions button {
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 22px rgba(15,46,71,.08) !important;
}
#im-reporting-form .primary-btn {
    background: linear-gradient(135deg, #0f6d8d, #0b4a66) !important;
    color: #ffffff !important;
}
#im-reporting-form .secondary-btn,
#im-reporting-form .print-btn {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #dbe3ec !important;
}
#im-reporting-form .detailed-btn {
    color: #0b4a66 !important;
    border-color: rgba(15,95,120,.26) !important;
}

/* Legend and results table/card polish. */
#im-reporting .reporting-legend {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    box-shadow: 0 14px 32px rgba(15,46,71,.06) !important;
}
#im-reporting .reporting-legend .legend-item {
    font-weight: 850 !important;
    color: #475569 !important;
}

#im-reporting .grid-header {
    margin-top: 18px !important;
    padding: 13px 18px !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: linear-gradient(135deg, #073047, #0f5f78) !important;
    color: #fff1a8 !important;
    box-shadow: 0 18px 38px rgba(15,46,71,.10) !important;
}
#im-reporting .grid-header .grid-cell {
    color: inherit !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
}
#im-reporting .grid-body {
    margin-top: 0 !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 0 0 24px 24px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    box-shadow: 0 24px 60px rgba(15,46,71,.10) !important;
}
#im-reporting .invoice-card {
    border-radius: 18px !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(15,46,71,.05) !important;
}
#im-reporting .invoice-card:hover {
    border-color: rgba(15,95,120,.34) !important;
    box-shadow: 0 16px 34px rgba(15,46,71,.10) !important;
    transform: translateY(-1px);
}
#im-reporting .master-grid-row {
    padding: 15px 18px !important;
}
#im-reporting .master-grid-row .grid-cell {
    font-size: .86rem !important;
    font-weight: 850 !important;
    color: #1e293b !important;
}
#im-reporting .detail-grid-row {
    border-top: 1px solid rgba(148,163,184,.18) !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
}
#im-reporting .loading-state {
    padding: 26px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-weight: 850 !important;
    border: 1px dashed rgba(148,163,184,.38) !important;
}

#im-reporting-grand-total-container {
    padding-right: 0 !important;
}
#im-reporting-grand-total-container .summary-wrapper,
#im-reporting .summary-wrapper {
    border-radius: 22px !important;
    background: linear-gradient(135deg, #073047, #0f5f78) !important;
    box-shadow: 0 24px 54px rgba(15,46,71,.16) !important;
}

@media (max-width: 1180px) {
    #im-reporting > .header .im-reporting-hero-layout {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #im-reporting > .header .im-reporting-hero-actions,
    #im-reporting > .header .daily-report-section {
        justify-content: flex-start !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 900px) {
    #im-reporting-form .controls-row {
        grid-template-columns: 1fr !important;
    }
    #im-reporting-form .filter-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #im-reporting-form .action-buttons,
    #im-reporting-form .print-actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 560px) {
    #im-reporting-form .filter-group {
        grid-template-columns: 1fr !important;
    }
    #im-reporting > .header .daily-report-section button span {
        display: none !important;
    }
    #im-reporting > .header .daily-report-section button {
        width: 40px !important;
        justify-content: center !important;
        padding: 0 !important;
    }
}


/* 12.8.3 — Payments search modal: keep the main Payments table visible.
   The modal remains open and the page stays dimmed, but the backdrop is no longer
   blurred so newly-added rows can be seen immediately behind the modal. */
body #im-add-payment-modal:not(.hidden) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(3, 18, 30, .22) !important;
}

/* ========================================================================
   8.5.5 — Modal + Batch Entry Premium UI Upgrade
   UI-only polish. Keeps all save/update/Firebase/workflow logic untouched.
   ======================================================================== */

:root {
    --iba-premium-hero-a: #05243a;
    --iba-premium-hero-b: #0b4a66;
    --iba-premium-gold: #ffd43b;
    --iba-premium-gold-soft: #fff1a8;
    --iba-premium-border: rgba(148, 163, 184, .24);
    --iba-premium-shadow: 0 24px 60px rgba(15, 46, 71, .12);
}

/* ---------- Global modal refresh: premium but still compact and readable ---------- */
.modal-overlay:not(.hidden) {
    background: rgba(3, 18, 30, .42) !important;
    backdrop-filter: blur(7px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(120%) !important;
    padding: 18px !important;
}

.modal-overlay .modal-container {
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 212, 59, .09), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,250,252,.965)) !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 26px !important;
    padding: 0 !important;
    box-shadow: 0 30px 90px rgba(3, 18, 30, .36), 0 0 0 1px rgba(15, 95, 120, .08) !important;
    color: #0f172a !important;
}

.modal-overlay .modal-container::before {
    inset: 0 !important;
    transform: none !important;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    opacity: .25 !important;
}

.modal-overlay .modal-container::after {
    opacity: .18 !important;
    background: linear-gradient(90deg, rgba(15, 95, 120, .65), rgba(255, 212, 59, .55), rgba(15, 95, 120, .65)) !important;
}

.modal-overlay .modal-container .modal-header,
.modal > .modal-content > .modal-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    border: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    background: linear-gradient(135deg, var(--iba-premium-hero-a), var(--iba-premium-hero-b)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.10) !important;
    overflow: hidden !important;
}

.modal-overlay .modal-container .modal-header::before,
.modal > .modal-content > .modal-header::before {
    content: "System Window";
    position: absolute;
    top: 8px;
    left: 22px;
    color: var(--iba-premium-gold-soft);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .105em;
    text-transform: uppercase;
    opacity: .95;
}

.modal-overlay .modal-container .modal-header::after,
.modal > .modal-content > .modal-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .28;
    pointer-events: none;
}

.modal-overlay .modal-container .modal-header h2,
.modal-overlay .modal-container .modal-header h3,
.modal > .modal-content > .modal-header h2,
.modal > .modal-content > .modal-header h3 {
    position: relative !important;
    z-index: 2 !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: var(--iba-premium-gold) !important;
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    -webkit-text-stroke: .35px rgba(3, 18, 30, .55);
    text-shadow: 0 2px 0 rgba(3, 18, 30, .68), 0 10px 24px rgba(0,0,0,.30), 0 0 20px rgba(255,212,59,.28) !important;
}

.modal-overlay .modal-container .modal-close-btn,
.modal > .modal-content > .modal-header .modal-close-btn {
    position: relative !important;
    z-index: 3 !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(3, 18, 30, .20) !important;
    line-height: 1 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

.modal-overlay .modal-container .modal-close-btn:hover,
.modal > .modal-content > .modal-header .modal-close-btn:hover {
    background: rgba(255,255,255,.25) !important;
    transform: translateY(-1px);
}

.modal-overlay .modal-container .modal-content,
.modal > .modal-content {
    background: transparent !important;
}

.modal-overlay .modal-container > .modal-content {
    padding: 20px 22px !important;
}

.modal-overlay .modal-container .modal-footer,
.modal > .modal-content > .modal-footer {
    margin: 0 !important;
    padding: 16px 22px !important;
    border-top: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 0 0 26px 26px !important;
    background: linear-gradient(180deg, rgba(248,250,252,.92), rgba(241,245,249,.96)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.modal-overlay .modal-container input,
.modal-overlay .modal-container select,
.modal-overlay .modal-container textarea,
.modal > .modal-content input,
.modal > .modal-content select,
.modal > .modal-content textarea {
    border-radius: 14px !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 18px rgba(15,46,71,.04) !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

.modal-overlay .modal-container input:focus,
.modal-overlay .modal-container select:focus,
.modal-overlay .modal-container textarea:focus,
.modal > .modal-content input:focus,
.modal > .modal-content select:focus,
.modal > .modal-content textarea:focus {
    outline: none !important;
    border-color: rgba(15, 95, 120, .65) !important;
    box-shadow: 0 0 0 4px rgba(15, 95, 120, .13), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.modal-overlay .modal-container label,
.modal > .modal-content label {
    color: #475569 !important;
    font-weight: 900 !important;
    font-size: .78rem !important;
    letter-spacing: .025em !important;
}

.modal-overlay .modal-container button,
.modal > .modal-content button {
    border-radius: 999px !important;
    font-weight: 950 !important;
}

.modal-overlay .modal-container .download-btn,
.modal > .modal-content .download-btn {
    background: linear-gradient(135deg, #0f6d8d, #0b4a66) !important;
    color: #ffffff !important;
    border: 1px solid rgba(15,95,120,.18) !important;
    box-shadow: 0 14px 28px rgba(15, 95, 120, .18) !important;
}

.modal-overlay .modal-container .secondary-btn,
.modal > .modal-content .secondary-btn {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #dbe3ec !important;
    box-shadow: 0 10px 22px rgba(15,46,71,.07) !important;
}

.modal-overlay .modal-container .delete-btn,
.modal > .modal-content .delete-btn {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 14px 28px rgba(220,38,38,.18) !important;
}

.modal-overlay .modal-container .search-and-filter-group,
.modal-overlay .modal-container .table-wrapper {
    border-radius: 20px !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 16px 36px rgba(15,46,71,.07) !important;
    padding: 12px !important;
}

#im-invoice-print-modal.modal > .modal-content {
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 90px rgba(3,18,30,.35) !important;
    border: 1px solid rgba(255,255,255,.65) !important;
}

/* ---------- Batch Entry premium command area ---------- */
#im-batch-entry > div:nth-of-type(2),
#im-batch-global-controls {
    background:
        radial-gradient(circle at 0% 0%, rgba(15, 95, 120, .075), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,250,252,.965)) !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    border-radius: 26px !important;
    padding: 16px !important;
    box-shadow: 0 22px 55px rgba(15,46,71,.08) !important;
}

#im-batch-entry > div:nth-of-type(2) {
    align-items: center !important;
}

#im-batch-entry .search-bar-local {
    height: 54px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ec !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 24px rgba(15,46,71,.05) !important;
    overflow: hidden !important;
}

#im-batch-entry .search-bar-local input,
#im-batch-po-input {
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .98rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

#im-batch-entry .search-bar-local i {
    color: #0f6d8d !important;
}

#im-batch-entry .search-bar-local:focus-within {
    border-color: rgba(15,95,120,.55) !important;
    box-shadow: 0 0 0 4px rgba(15,95,120,.12), 0 12px 26px rgba(15,46,71,.07) !important;
}

#im-batch-entry > div:nth-of-type(2) > div[style*="border-left"] {
    border-left: 1px solid rgba(148,163,184,.26) !important;
}

#im-batch-note-search-select + .choices,
.batch-note-search-wrapper .choices {
    min-height: 46px !important;
}
#im-batch-note-search-select + .choices .choices__inner,
.batch-note-search-wrapper .choices .choices__inner {
    min-height: 46px !important;
    border-radius: 16px !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15,46,71,.04) !important;
}

#im-batch-entry button {
    min-height: 40px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    font-size: .8rem !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(15,46,71,.08) !important;
}

#im-batch-add-po-button {
    background: linear-gradient(135deg, #dcfce7, #86efac) !important;
    color: #14532d !important;
}
#im-batch-search-existing-button,
#im-batch-search-by-status-button,
#im-batch-search-by-note-button {
    background: #ffffff !important;
    color: #073047 !important;
}
#im-batch-clear-button {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    color: #7f1d1d !important;
}
#im-batch-save-button {
    background: linear-gradient(135deg, #fff3b0, #ffd43b) !important;
    color: #3b2f00 !important;
    border: 1px solid rgba(255,212,59,.36) !important;
}
#im-refresh-batch-button {
    background: rgba(255,255,255,.96) !important;
    color: #073047 !important;
}

#im-batch-global-controls {
    gap: 14px !important;
    align-items: flex-end !important;
}
#im-batch-global-controls > div:first-child {
    width: 100% !important;
    margin: 0 0 2px !important;
    color: #0b4a66 !important;
    font-size: .78rem !important;
    letter-spacing: .075em !important;
}
#im-batch-global-controls .form-group {
    min-width: 220px !important;
}
#im-batch-global-controls label {
    color: #475569 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
}
#im-batch-global-controls input,
#im-batch-global-controls select,
#im-batch-global-controls .choices__inner {
    height: 44px !important;
    border-radius: 15px !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15,46,71,.04) !important;
}

/* ---------- Batch result cards/table polish ---------- */
#im-batch-table-body.batch-cards-container {
    padding: 10px 6px 20px 2px !important;
    gap: 14px !important;
    scrollbar-width: thin;
}

.batch-invoice-card {
    border: 1px solid rgba(148,163,184,.23) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.965)) !important;
    box-shadow: 0 18px 44px rgba(15,46,71,.08) !important;
    overflow: hidden !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.batch-invoice-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(15,95,120,.32) !important;
    box-shadow: 0 26px 60px rgba(15,46,71,.13) !important;
}

.batch-card-header {
    background: linear-gradient(135deg, #073047, #0f5f78) !important;
    border-bottom: 0 !important;
    padding: 15px 18px !important;
    color: #ffffff !important;
}

.batch-card-header .header-info {
    gap: 10px !important;
    color: #ffffff !important;
    font-size: .92rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.batch-card-header .header-info span {
    background: rgba(255,255,255,.13) !important;
    color: #fff1a8 !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.batch-card-header .header-inputs {
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.batch-card-header .compact-input {
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 8px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}

.batch-card-header .compact-input label {
    color: rgba(255,255,255,.88) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.batch-card-header input,
.batch-card-header select,
.batch-card-header .choices__inner {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    background: #fff8db !important;
    border: 1px solid rgba(255,212,59,.56) !important;
    color: #0f172a !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    box-shadow: none !important;
}

.batch-card-header .compact-input:last-of-type input,
.batch-card-header .compact-input:last-child input {
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(255,255,255,.72) !important;
}

.batch-card-body {
    padding: 18px !important;
}

.batch-input-grid {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)) !important;
    gap: 14px !important;
}

.batch-input-grid > div {
    padding: 12px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    box-shadow: 0 10px 24px rgba(15,46,71,.04) !important;
}

.batch-input-grid label {
    color: #64748b !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: 6px !important;
}

.batch-input-grid input,
.batch-input-grid select {
    height: 42px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #dbe3ec !important;
    color: #0f172a !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

.batch-card-body .batch-input-grid > div:nth-child(5) input,
.batch-card-body .batch-input-grid > div:nth-child(6) input {
    background: #fff8db !important;
    border-color: rgba(255,212,59,.56) !important;
    color: #111827 !important;
}

.batch-input-grid input:focus,
.batch-input-grid select:focus,
.batch-card-header input:focus,
.batch-card-header select:focus {
    background: #ffffff !important;
    border-color: rgba(15,95,120,.62) !important;
    box-shadow: 0 0 0 4px rgba(15,95,120,.12) !important;
    outline: none !important;
}

#im-batch-modal-results table,
#im-batch-modal-results .table-wrapper table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}
#im-batch-modal-results th {
    background: transparent !important;
    color: #64748b !important;
    border: 0 !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}
#im-batch-modal-results td {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 800 !important;
}
#im-batch-modal-results tr td:first-child { border-left: 1px solid #e2e8f0 !important; border-radius: 14px 0 0 14px !important; }
#im-batch-modal-results tr td:last-child { border-right: 1px solid #e2e8f0 !important; border-radius: 0 14px 14px 0 !important; }

@media (max-width: 900px) {
    #im-batch-entry > div:nth-of-type(2) > div[style*="border-left"] {
        border-left: 0 !important;
        border-top: 1px solid rgba(148,163,184,.22) !important;
        padding-left: 0 !important;
        padding-top: 12px !important;
        width: 100% !important;
    }
    .batch-note-search-wrapper { width: 100% !important; min-width: 0 !important; }
    .batch-card-header,
    .batch-card-header .header-inputs,
    .batch-card-header .compact-input {
        width: 100% !important;
    }
    .batch-card-header .compact-input {
        justify-content: space-between !important;
    }
}

@media (max-width: 620px) {
    .modal-overlay:not(.hidden) { padding: 10px !important; }
    .modal-overlay .modal-container { width: 96vw !important; max-height: 92vh !important; }
    .modal-overlay .modal-container > .modal-content { padding: 16px !important; }
    .modal-overlay .modal-container .modal-header { padding: 16px 18px !important; }
    .modal-overlay .modal-container .modal-footer { padding: 14px 16px !important; flex-wrap: wrap !important; }
    #im-batch-entry button { width: auto !important; }
    #im-batch-entry > div:nth-of-type(2) > div:not(.search-bar-local) { width: 100% !important; flex-wrap: wrap !important; }
    #im-batch-entry > div:nth-of-type(2) > div:not(.search-bar-local) button { flex: 1 1 140px !important; }
}

/* ========================================================================
   8.5.8 — History Timeline Premium UI Upgrade
   UI-only polish for Invoice/Inventory history viewing. No workflow or Firebase write changes.
   ======================================================================== */
#history-modal .history-modal-container {
    max-width: 940px !important;
    width: min(940px, calc(100vw - 26px)) !important;
    max-height: min(82vh, 720px) !important;
}
#history-modal .history-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
#history-modal .history-modal-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#history-modal #history-modal-expand-btn {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

#history-modal .history-modal-header::before {
    content: "STATUS TIMELINE" !important;
}

#history-modal .modal-content {
    padding: 18px 20px 20px !important;
}

#history-modal .history-loader {
    text-align: center !important;
    padding: 24px !important;
    margin-bottom: 12px !important;
    border-radius: 20px !important;
    border: 1px dashed rgba(15, 95, 120, .24) !important;
    background: linear-gradient(180deg, rgba(240, 249, 252, .94), rgba(255, 255, 255, .96)) !important;
    color: #0f4f67 !important;
    font-weight: 950 !important;
}

#history-modal .history-modal-summary {
    margin: 0 0 14px !important;
}

#history-modal .history-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .24);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 212, 59, .14), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96));
    box-shadow: 0 18px 42px rgba(15, 46, 71, .08);
}

#history-modal .history-summary-card > div:first-child {
    min-width: 180px;
}

#history-modal .history-summary-label {
    display: block;
    margin-bottom: 3px;
    color: #0f6d8d;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

#history-modal .history-summary-card strong {
    color: #0f172a;
    font-size: clamp(1rem, 1.7vw, 1.32rem);
    font-weight: 950;
    letter-spacing: -.035em;
}

#history-modal .history-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#history-modal .history-summary-metrics > span:not(.history-status-pill) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe3ec;
    color: #475569;
    font-size: .78rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(15, 46, 71, .06);
}

#history-modal .history-summary-metrics b {
    color: #0f4f67;
    font-weight: 950;
}

#history-modal .history-table-wrapper {
    padding: 0 !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 24px !important;
    overflow: auto !important;
    max-height: 320px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 20px 48px rgba(15, 46, 71, .09) !important;
}
#history-modal.history-modal-expanded {
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 12px !important;
}
#history-modal.history-modal-expanded .history-modal-container {
    width: min(1100px, calc(100vw - 24px)) !important;
    max-width: min(1100px, calc(100vw - 24px)) !important;
    height: 92vh !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
#history-modal.history-modal-expanded .history-modal-header,
#history-modal.history-modal-expanded .modal-footer {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
}
#history-modal.history-modal-expanded .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
#history-modal.history-modal-expanded .history-modal-summary {
    flex: 0 0 auto !important;
}
#history-modal.history-modal-expanded .history-table-wrapper,
#history-modal.history-modal-expanded .table-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
}

#history-modal .history-premium-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#history-modal .history-premium-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, #05243a, #0b4a66) !important;
    color: #f8fafc !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    border: 0 !important;
}

#history-modal .history-row td {
    padding: 13px 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .82) !important;
    background: rgba(255, 255, 255, .92) !important;
    vertical-align: middle !important;
}

#history-modal .history-row:hover td {
    background: linear-gradient(90deg, rgba(240, 249, 252, .96), rgba(255, 255, 255, .98)) !important;
}

#history-modal .history-row:last-child td {
    border-bottom: 0 !important;
}

#history-modal .history-status-cell {
    position: relative;
    padding-left: 14px;
}

#history-modal .history-status-cell::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 6px;
    height: calc(100% - 8px);
    min-height: 34px;
    border-radius: 999px;
    background: #0f6d8d;
    box-shadow: 0 0 0 4px rgba(15, 109, 141, .08);
}

#history-modal .history-row.history-status-complete .history-status-cell::before { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .10); }
#history-modal .history-row.history-status-approved .history-status-cell::before { background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .10); }
#history-modal .history-row.history-status-report .history-status-cell::before { background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, .10); }
#history-modal .history-row.history-status-warning .history-status-cell::before { background: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .10); }
#history-modal .history-row.history-status-process .history-status-cell::before { background: #0891b2; box-shadow: 0 0 0 4px rgba(8, 145, 178, .10); }
#history-modal .history-row.history-status-pending .history-status-cell::before { background: #eab308; box-shadow: 0 0 0 4px rgba(234, 179, 8, .12); }

#history-modal .history-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eef7fb;
    color: #0f4f67;
    border: 1px solid rgba(15, 95, 120, .16);
    font-size: .78rem;
    font-weight: 950;
    line-height: 1.1;
    box-shadow: 0 8px 18px rgba(15, 46, 71, .06);
}

#history-modal .history-status-pill.history-status-complete { background: #ecfdf5; color: #166534; border-color: rgba(22, 163, 74, .18); }
#history-modal .history-status-pill.history-status-approved { background: #eff6ff; color: #1d4ed8; border-color: rgba(37, 99, 235, .18); }
#history-modal .history-status-pill.history-status-report { background: #f5f3ff; color: #6d28d9; border-color: rgba(124, 58, 237, .18); }
#history-modal .history-status-pill.history-status-warning { background: #fff7ed; color: #c2410c; border-color: rgba(249, 115, 22, .20); }
#history-modal .history-status-pill.history-status-process { background: #ecfeff; color: #0e7490; border-color: rgba(8, 145, 178, .20); }
#history-modal .history-status-pill.history-status-pending { background: #fefce8; color: #854d0e; border-color: rgba(234, 179, 8, .22); }

#history-modal .history-note {
    margin-top: 8px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
}

#history-modal .history-date-chip,
#history-modal .history-user-chip,
#history-modal .history-duration-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe3ec;
    color: #334155;
    font-size: .8rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 46, 71, .05);
}

#history-modal .history-date-chip i,
#history-modal .history-user-chip i,
#history-modal .history-duration-chip i {
    color: #0f6d8d;
}

#history-modal .history-duration-chip {
    color: #0f4f67;
    background: linear-gradient(180deg, #ffffff, #f8fbfc);
}

#history-modal .history-qr-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 7px;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(124, 58, 237, .16) !important;
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    color: #ffffff !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 18px rgba(124, 58, 237, .18) !important;
}

#history-modal .history-empty-row td {
    padding: 22px !important;
    background: transparent !important;
    border: 0 !important;
}

#history-modal .history-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 8px;
    padding: 28px 18px;
    border-radius: 22px;
    border: 1px dashed rgba(15, 95, 120, .25);
    background: linear-gradient(180deg, rgba(240, 249, 252, .88), rgba(255, 255, 255, .96));
    color: #475569;
}

#history-modal .history-empty-state i {
    font-size: 1.6rem;
    color: #0f6d8d;
}

#history-modal .history-empty-state strong {
    color: #0f172a;
    font-weight: 950;
}

#history-modal .history-empty-state span {
    color: #64748b;
    font-weight: 800;
    font-size: .86rem;
}

#history-modal .history-empty-state.history-error i {
    color: #dc2626;
}

@media (max-width: 720px) {
    #history-modal .history-modal-container {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 24px) !important;
    }

    #history-modal .history-summary-card,
    #history-modal .history-summary-metrics {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }

    #history-modal .history-table-wrapper {
        border-radius: 20px !important;
    }

    #history-modal .history-premium-table thead {
        display: none;
    }

    #history-modal .history-premium-table,
    #history-modal .history-premium-table tbody,
    #history-modal .history-premium-table tr,
    #history-modal .history-premium-table td {
        display: block;
        width: 100%;
    }

    #history-modal .history-row {
        margin: 10px;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, .9);
        box-shadow: 0 14px 30px rgba(15, 46, 71, .07);
    }

    #history-modal .history-row td {
        border-bottom: 0 !important;
        padding: 10px 12px !important;
    }

    #history-modal .history-date-chip,
    #history-modal .history-user-chip,
    #history-modal .history-duration-chip {
        white-space: normal;
    }
}


/* ========================================================================== 
   8.6.0 — Desktop UI Premium Polish
   Scope: desktop side navigation, Invoice Entry, Invoice Records, Batch Entry
   UI-only overrides. Mobile view is intentionally left for the next phase.
   ========================================================================== */
@media (min-width: 769px) {
    :root {
        --iba-premium-navy: #082f4b;
        --iba-premium-navy-2: #0b4165;
        --iba-premium-cyan: #0f7894;
        --iba-premium-gold: #f5c84c;
        --iba-premium-soft: #f8fbff;
        --iba-premium-border: #dbe7f3;
        --iba-premium-text: #0f2537;
        --iba-premium-muted: #607386;
        --iba-premium-shadow: 0 18px 45px rgba(8, 47, 75, 0.12);
        --iba-premium-shadow-soft: 0 10px 25px rgba(15, 37, 55, 0.08);
    }

    /* ------------------------------------------------------------------
       Desktop side menu upgrade
       ------------------------------------------------------------------ */
    .workdesk-sidebar {
        background:
            radial-gradient(circle at top left, rgba(245, 200, 76, 0.14), transparent 34%),
            linear-gradient(180deg, #052a43 0%, #083654 52%, #061f32 100%) !important;
        border-right: 1px solid rgba(255,255,255,0.12) !important;
        box-shadow: 10px 0 35px rgba(2, 22, 36, 0.16) !important;
        padding: 18px 16px !important;
    }

    .wd-user-profile {
        padding: 16px 12px 18px !important;
        border-radius: 22px !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;
        border: 1px solid rgba(255,255,255,0.16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 28px rgba(0,0,0,0.12) !important;
        margin-bottom: 14px !important;
    }

    .wd-user-avatar {
        width: 68px !important;
        height: 68px !important;
        background: linear-gradient(135deg, rgba(245,200,76,0.95), rgba(255,236,153,0.78)) !important;
        color: #082f4b !important;
        border: 2px solid rgba(255,255,255,0.52) !important;
        box-shadow: 0 12px 22px rgba(0,0,0,0.2) !important;
        font-size: 30px !important;
    }

    #wd-username, #im-username {
        color: #ffffff !important;
        font-weight: 800 !important;
        letter-spacing: 0.2px !important;
    }

    #wd-user-identifier, #im-user-identifier {
        color: rgba(226, 240, 255, 0.72) !important;
        font-weight: 600 !important;
    }

    .wd-back-button {
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(255,255,255,0.13) !important;
        border-radius: 16px !important;
        color: #ffffff !important;
        margin-top: 10px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }

    .workdesk-navigation a,
    .workdesk-footer-nav a {
        border-radius: 16px !important;
        padding: 11px 13px !important;
        margin-bottom: 7px !important;
        color: rgba(232, 244, 255, 0.78) !important;
        font-weight: 700 !important;
        letter-spacing: 0.1px !important;
        border: 1px solid transparent !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .workdesk-navigation a::before,
    .workdesk-footer-nav a::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.09), transparent);
        opacity: 0;
        transition: opacity .18s ease;
        pointer-events: none;
    }

    .workdesk-navigation a:hover,
    .workdesk-footer-nav a:hover {
        background: rgba(255,255,255,0.10) !important;
        border-color: rgba(255,255,255,0.16) !important;
        color: #ffffff !important;
        transform: translateX(3px) !important;
    }

    .workdesk-navigation a:hover::before,
    .workdesk-footer-nav a:hover::before { opacity: 1; }

    .workdesk-navigation a.active {
        background: linear-gradient(135deg, rgba(245,200,76,0.98), rgba(255,232,131,0.90)) !important;
        color: #082f4b !important;
        border-color: rgba(255,255,255,0.45) !important;
        box-shadow: 0 12px 28px rgba(245, 200, 76, 0.25) !important;
        font-weight: 900 !important;
    }

    .workdesk-navigation a i,
    .workdesk-footer-nav a i {
        opacity: .95 !important;
        font-size: 1.02rem !important;
    }

    .workdesk-sidebar .version-display {
        color: rgba(255,255,255,0.56) !important;
        font-weight: 800 !important;
        letter-spacing: 0.4px !important;
    }

    /* ------------------------------------------------------------------
       Common premium form/table controls for Invoice Management desktop
       ------------------------------------------------------------------ */
    #invoice-management-view .workdesk-section {
        background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
        border: 1px solid rgba(219, 231, 243, 0.88) !important;
        box-shadow: 0 14px 35px rgba(8, 47, 75, 0.07) !important;
    }

    #invoice-management-view input,
    #invoice-management-view select,
    #invoice-management-view textarea,
    #invoice-management-view .choices__inner {
        border-radius: 14px !important;
        border: 1px solid #d7e4f0 !important;
        background-color: #ffffff !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 0 rgba(15,37,55,0.02) !important;
        color: var(--iba-premium-text) !important;
    }

    #invoice-management-view input:focus,
    #invoice-management-view select:focus,
    #invoice-management-view textarea:focus,
    #invoice-management-view .choices.is-focused .choices__inner {
        border-color: rgba(15,120,148,0.72) !important;
        box-shadow: 0 0 0 4px rgba(15,120,148,0.12) !important;
        outline: none !important;
    }

    #invoice-management-view button,
    #invoice-management-view .download-btn,
    #invoice-management-view .secondary-btn,
    #invoice-management-view .print-btn,
    #invoice-management-view .refresh-btn,
    #invoice-management-view .primary-btn,
    #invoice-management-view a.action-btn,
    #invoice-management-view button.action-btn {
        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        font-weight: 800 !important;
        letter-spacing: .15px !important;
        box-shadow: 0 8px 18px rgba(8,47,75,0.10) !important;
        transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
        text-decoration: none !important;
    }

    #invoice-management-view button:hover,
    #invoice-management-view .download-btn:hover,
    #invoice-management-view .secondary-btn:hover,
    #invoice-management-view .print-btn:hover,
    #invoice-management-view .refresh-btn:hover,
    #invoice-management-view .primary-btn:hover,
    #invoice-management-view a.action-btn:hover,
    #invoice-management-view button.action-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 12px 24px rgba(8,47,75,0.16) !important;
        filter: brightness(1.03) !important;
    }

    #invoice-management-view .action-btn,
    #invoice-management-view a.action-btn,
    #invoice-management-view button.action-btn {
        min-height: 30px !important;
        padding: 6px 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #0f7894, #0b5d73) !important;
    }

    #invoice-management-view .invoice-pdf-btn {
        background: linear-gradient(135deg, #2563eb, #0f7894) !important;
        color: #ffffff !important;
    }
    #invoice-management-view .srv-pdf-btn {
        background: linear-gradient(135deg, #0f7894, #0d9488) !important;
        color: #ffffff !important;
    }
    #invoice-management-view .history-btn {
        background: linear-gradient(135deg, #334155, #0f172a) !important;
        color: #ffffff !important;
    }
    #invoice-management-view .edit-inv-no-btn {
        background: linear-gradient(135deg, #f5c84c, #d99a11) !important;
        color: #082f4b !important;
    }
    #invoice-management-view .modern-action-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }

    /* ------------------------------------------------------------------
       Invoice Entry polish
       ------------------------------------------------------------------ */
    #im-po-search-container,
    #im-invoice-entry #im-po-search-container {
        max-width: none !important;
        padding: 14px !important;
        border-radius: 22px !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(240,248,255,0.94)) !important;
        border: 1px solid var(--iba-premium-border) !important;
        box-shadow: var(--iba-premium-shadow-soft) !important;
        margin: 16px 0 22px !important;
    }

    #im-po-search-container .search-bar-local input,
    #im-po-search-container .search-bar-local {
        margin-bottom: 0 !important;
    }

    #im-po-search-button,
    #im-open-invoice-form-btn,
    #im-refresh-entry-button,
    #im-po-clear-button {
        min-height: 42px !important;
        padding: 9px 16px !important;
    }

    #im-modal-po-details,
    #im-po-details-container-duplicate {
        border-radius: 22px !important;
        background: linear-gradient(135deg, #083654, #0f7894) !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        box-shadow: 0 16px 35px rgba(8,47,75,0.16) !important;
        color: #fff !important;
        overflow: hidden !important;
    }

    #im-modal-po-details label,
    #im-po-details-container-duplicate strong {
        color: rgba(255,255,255,0.74) !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: .4px !important;
        font-size: .72rem !important;
    }

    /* ------------------------------------------------------------------
       Invoice Entry: Existing Invoices + Active Jobs clean official style
       ------------------------------------------------------------------ */
    #im-existing-invoices-container {
        margin-top: 20px !important;
        padding: 14px 0 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #existing-invoices-count-display {
        border: none !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        color: #0f2f22 !important;
        font-size: 1.12rem !important;
        font-weight: 760 !important;
        letter-spacing: -0.015em !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #existing-invoices-count-display::before {
        content: "" !important;
        width: 7px !important;
        height: 22px !important;
        border-radius: 999px !important;
        display: inline-block !important;
        background: #116045 !important;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }

    #im-existing-invoices-container .table-wrapper {
        padding: 0 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        border: 1px solid #dfe9e5 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    #im-existing-invoices-container table {
        width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        background: #ffffff !important;
    }

    #im-existing-invoices-container table thead th {
        background: #116045 !important;
        color: #ffffff !important;
        font-size: .74rem !important;
        font-weight: 720 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
        padding: 10px 11px !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #im-existing-invoices-container table tbody tr {
        background: #ffffff !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #im-existing-invoices-container table tbody td {
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid #edf2f0 !important;
        padding: 10px 10px !important;
        box-shadow: none !important;
    }

    #im-existing-invoices-container table tbody td:first-child,
    #im-existing-invoices-container table tbody td:last-child {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }

    #im-invoices-table-footer td {
        background: #eaf7f1 !important;
        color: #0f5132 !important;
        border: 0 !important;
        border-top: 2px solid #116045 !important;
        padding: 11px 10px !important;
        font-weight: 760 !important;
        box-shadow: none !important;
    }

    #im-entry-sidebar {
        background:
            radial-gradient(circle at top right, rgba(245,200,76,0.14), transparent 30%),
            linear-gradient(180deg, #062b44 0%, #083654 55%, #061f32 100%) !important;
        border-left: 1px solid rgba(255,255,255,0.15) !important;
        box-shadow: -16px 0 35px rgba(8,47,75,0.18) !important;
        padding: 18px !important;
    }

    #im-entry-sidebar .im-sidebar-title,
    #active-jobs-sidebar-count-display {
        color: #f5c84c !important;
        font-size: 1rem !important;
        line-height: 1.25 !important;
        padding: 4px 2px 10px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        margin: 0 0 10px !important;
    }

    #im-sidebar-search {
        border-radius: 999px !important;
        padding: 10px 13px !important;
        background: rgba(255,255,255,0.10) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.22) !important;
        box-shadow: none !important;
    }

    .im-sidebar-item {
        background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
        border-radius: 18px !important;
        border: 1px solid rgba(219,231,243,0.95) !important;
        box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important;
        padding: 11px 12px !important;
    }

    .im-sidebar-item:hover {
        transform: translateX(-4px) translateY(-1px) !important;
        box-shadow: 0 14px 28px rgba(0,0,0,0.18) !important;
    }

    .im-compact-po { color: #082f4b !important; font-size: .95rem !important; }
    .im-compact-amount { color: #0f7894 !important; }
    .im-compact-status { border-radius: 999px !important; background: #e7f5fb !important; color: #0b5d73 !important; }

    /* ------------------------------------------------------------------
       Invoice Records premium table/card polish
       ------------------------------------------------------------------ */
    #im-reporting-form {
        margin-top: 18px !important;
        padding: 18px !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%) !important;
        border: 1px solid var(--iba-premium-border) !important;
        box-shadow: var(--iba-premium-shadow-soft) !important;
    }

    #im-reporting-form .search-box {
        background: #ffffff !important;
        border: 1px solid #d7e4f0 !important;
        border-radius: 999px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
        padding: 0 10px !important;
    }
    #im-reporting-form .search-box input {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 999px !important;
    }

    #im-reporting .controls-row,
    #im-reporting .filter-group,
    #im-reporting .action-buttons,
    #im-reporting .print-actions {
        gap: 10px !important;
    }

    #im-reporting .grid-header {
        display: grid !important;
        grid-template-columns: 42px 1.05fr 1fr 1.65fr 1fr 1fr 1fr !important;
        align-items: center !important;
        background: linear-gradient(135deg, #083654, #0b4b72) !important;
        color: #ffffff !important;
        border-radius: 18px !important;
        padding: 13px 15px !important;
        box-shadow: 0 12px 22px rgba(8,47,75,0.12) !important;
    }
    #im-reporting .grid-header .grid-cell {
        width: auto !important;
        color: #ffffff !important;
        font-weight: 900 !important;
        font-size: .73rem !important;
        letter-spacing: .55px !important;
        text-transform: uppercase !important;
    }

    #im-reporting-content {
        margin-top: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #im-reporting-content .invoice-card {
        border: 1px solid #dfeaf4 !important;
        border-radius: 22px !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
        box-shadow: 0 12px 28px rgba(8,47,75,0.08) !important;
        overflow: hidden !important;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
    }
    #im-reporting-content .invoice-card:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(15,120,148,0.32) !important;
        box-shadow: 0 18px 36px rgba(8,47,75,0.12) !important;
    }

    #im-reporting-content .master-grid-row {
        display: grid !important;
        grid-template-columns: 42px 1.05fr 1fr 1.65fr 1fr 1fr 1fr !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 15px 16px !important;
    }
    #im-reporting-content .master-grid-row .grid-cell {
        width: auto !important;
        color: var(--iba-premium-text) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #im-reporting-content .detail-grid-row {
        padding: 16px 18px 20px !important;
        background: linear-gradient(180deg, #f4f9ff, #edf6fb) !important;
        border-top: 1px solid #dbe7f3 !important;
    }
    #im-reporting-content .detail-grid-row > div {
        border-radius: 20px !important;
        border: 1px solid #d8e6f1 !important;
        box-shadow: 0 10px 24px rgba(8,47,75,0.08) !important;
    }
    #im-reporting-content .detail-grid-row h4 {
        color: #082f4b !important;
        font-size: 0.95rem !important;
    }

    #im-reporting-content .detail-grid-row table {
        border-collapse: separate !important;
        border-spacing: 0 7px !important;
    }
    #im-reporting-content .detail-grid-row thead tr {
        border: none !important;
    }
    #im-reporting-content .detail-grid-row thead th {
        background: #eff6ff !important;
        color: #38566b !important;
        border: none !important;
        padding: 10px 8px !important;
        text-transform: uppercase !important;
        letter-spacing: .45px !important;
        font-size: .68rem !important;
    }
    #im-reporting-content .nested-invoice-row {
        background: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 14px rgba(8,47,75,0.05) !important;
    }
    #im-reporting-content .nested-invoice-row:hover {
        background: #f8fcff !important;
        box-shadow: 0 10px 20px rgba(8,47,75,0.09) !important;
    }
    #im-reporting-content .nested-invoice-row td {
        border-top: 1px solid #edf3f8 !important;
        border-bottom: 1px solid #edf3f8 !important;
        padding: 10px 8px !important;
        vertical-align: middle !important;
    }
    #im-reporting-content .nested-invoice-row td:first-child { border-left: 1px solid #edf3f8 !important; border-radius: 15px 0 0 15px !important; }
    #im-reporting-content .nested-invoice-row td:last-child { border-right: 1px solid #edf3f8 !important; border-radius: 0 15px 15px 0 !important; }
    #im-reporting-content .status-badge {
        border-radius: 999px !important;
        background: linear-gradient(135deg, #e7f5fb, #dff2e8) !important;
        color: #0b5d73 !important;
        padding: 5px 10px !important;
        font-weight: 900 !important;
        display: inline-flex !important;
        border: 1px solid rgba(15,120,148,0.15) !important;
    }
    #im-reporting-content tfoot td {
        background: linear-gradient(135deg, #edf6fb, #f8fbff) !important;
        border-top: 1px solid #dbe7f3 !important;
        color: #082f4b !important;
    }

    .highlight-negative-balance { border-left: 5px solid #dc2626 !important; }
    .highlight-open-balance { border-left: 5px solid #f59e0b !important; }
    .highlight-partial { border-left: 5px solid #0f7894 !important; }
    .highlight-fully-paid { border-left: 5px solid #16a34a !important; }

    #im-reporting-grand-total-container .summary-wrapper {
        border-radius: 22px !important;
        box-shadow: 0 18px 38px rgba(8,47,75,0.18) !important;
        background: linear-gradient(135deg, #082f4b, #0f7894) !important;
    }

    /* ------------------------------------------------------------------
       Batch Entry desktop polish
       ------------------------------------------------------------------ */
    #im-batch-entry > .header-top {
        padding: 16px 18px !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, #083654, #0f7894) !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        box-shadow: var(--iba-premium-shadow) !important;
        color: #ffffff !important;
    }
    #im-batch-entry > .header-top h1,
    #im-batch-entry > .header-top p,
    #im-batch-entry > .header-top .header-title h1 {
        color: #ffffff !important;
    }
    #im-batch-entry > .header-top .icon-wrapper {
        background: linear-gradient(135deg, #f5c84c, #ffe38c) !important;
        color: #082f4b !important;
        box-shadow: 0 10px 22px rgba(245,200,76,0.22) !important;
    }
    #batch-count-display {
        background: rgba(255,255,255,0.12) !important;
        border: 1px solid rgba(255,255,255,0.22) !important;
        color: #f5c84c !important;
        border-radius: 999px !important;
    }

    #im-batch-entry > div[style*="position: relative"],
    #im-batch-global-controls {
        border-radius: 24px !important;
        background: linear-gradient(135deg, #ffffff, #f4f9ff) !important;
        border: 1px solid #dbe7f3 !important;
        box-shadow: var(--iba-premium-shadow-soft) !important;
    }

    #im-batch-table-body {
        padding: 6px 8px 10px 0 !important;
    }
    #im-batch-table-body .batch-invoice-card {
        border-radius: 22px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid #dbe7f3 !important;
        box-shadow: 0 12px 28px rgba(8,47,75,0.08) !important;
        margin-bottom: 14px !important;
    }
    #im-batch-table-body .batch-card-header {
        background: linear-gradient(135deg, #083654, #0f7894) !important;
        border-bottom: 3px solid #f5c84c !important;
        padding: 14px 16px !important;
    }
    #im-batch-table-body .batch-card-body {
        background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
        padding: 16px !important;
    }
    #im-batch-table-body .batch-input,
    #im-batch-table-body input,
    #im-batch-table-body select,
    #im-batch-table-body textarea {
        border-radius: 13px !important;
        border-color: #d7e4f0 !important;
    }
    #im-batch-table-body .batch-remove-btn {
        border-radius: 999px !important;
        background: linear-gradient(135deg, #dc2626, #991b1b) !important;
        color: #ffffff !important;
    }
}

/* ========================================================================== 
   8.6.0 — Desktop Contrast + Readability Polish
   Scope: Invoice Entry PO detail strip, side navigation pulse readability,
   compact spacing refinements. UI-only; no workflow/data logic changes.
   ========================================================================== */
@media (min-width: 769px) {
    /* Invoice Entry: keep the premium dark strip, but make PO/Site/Value/Vendor readable */
    #im-modal-po-details,
    #im-po-details-container-duplicate {
        background: linear-gradient(135deg, #062f49 0%, #08708a 58%, #0f7894 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.26) !important;
    }

    #im-modal-po-details .po-compact-grid,
    #im-po-details-container-duplicate .po-details-grid {
        color: #f8fdff !important;
    }

    #im-modal-po-details label,
    #im-po-details-container-duplicate strong,
    #im-modal-po-details .po-compact-grid label,
    #im-po-details-container-duplicate .po-details-grid strong {
        color: rgba(226, 244, 255, 0.96) !important;
        text-shadow: 0 1px 1px rgba(0,0,0,0.32) !important;
    }

    #im-modal-po-details .po-compact-grid span,
    #im-po-details-container-duplicate .po-details-grid span,
    #im-po-details-container-duplicate .po-details-grid p,
    #im-modal-po-details .im-po-no,
    #im-modal-po-details .im-po-site,
    #im-modal-po-details .im-po-value,
    #im-modal-po-details .im-po-vendor,
    #im-po-details-container-duplicate .po-value,
    #im-po-details-container-duplicate .po-site,
    #im-po-details-container-duplicate .po-vendor,
    #im-po-details-container-duplicate .po-number {
        color: #ffffff !important;
        font-weight: 900 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.42) !important;
    }

    #im-modal-po-details .im-po-value,
    #im-po-details-container-duplicate .po-value {
        color: #ffe08a !important;
    }

    #im-modal-po-details .im-po-no,
    #im-modal-po-details .im-po-site,
    #im-po-details-container-duplicate .po-number,
    #im-po-details-container-duplicate .po-site {
        color: #bff4ff !important;
    }

    #im-modal-po-details .im-po-vendor,
    #im-po-details-container-duplicate .po-vendor {
        color: #fff8d5 !important;
    }

    #im-modal-po-details .im-po-record,
    #im-po-details-container-duplicate .im-po-record {
        color: #ffeb3b !important;
        font-weight: 950 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
    }

    #im-modal-po-details .po-compact-grid > div[style*="border-top"],
    #im-po-details-container-duplicate .po-details-grid > div[style*="border-top"] {
        border-top-color: rgba(255, 255, 255, 0.36) !important;
    }

    /* Side navigation: keep the alert/heartbeat visible without hiding the label text */
    .workdesk-navigation a.nav-pulse-active,
    .workdesk-footer-nav a.nav-pulse-active {
        animation: none !important;
        background: linear-gradient(135deg, rgba(255, 240, 237, 0.98), rgba(255, 248, 235, 0.96)) !important;
        color: #7c2d12 !important;
        border: 1px solid rgba(195, 80, 47, 0.28) !important;
        border-left: 4px solid #C3502F !important;
        box-shadow: 0 12px 28px rgba(195, 80, 47, 0.15) !important;
        font-weight: 950 !important;
        text-shadow: none !important;
    }

    .workdesk-navigation a.nav-pulse-active i,
    .workdesk-footer-nav a.nav-pulse-active i,
    .workdesk-navigation a.nav-pulse-active span:not(.notification-badge),
    .workdesk-footer-nav a.nav-pulse-active span:not(.notification-badge) {
        color: #7c2d12 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    .workdesk-navigation a.nav-pulse-active:hover,
    .workdesk-footer-nav a.nav-pulse-active:hover {
        color: #7c2d12 !important;
        transform: translateX(3px) !important;
        filter: brightness(1.02) !important;
    }

    .workdesk-navigation a.nav-pulse-active .notification-badge,
    .workdesk-footer-nav a.nav-pulse-active .notification-badge {
        background: #C3502F !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.72) !important;
        box-shadow: 0 0 0 0 rgba(195, 80, 47, .48) !important;
        animation: ibaNavBadgePulse 1.55s ease-in-out infinite !important;
    }

    @keyframes ibaNavBadgePulse {
        0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(195, 80, 47, .50); }
        55%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(195, 80, 47, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(195, 80, 47, 0); }
    }

    /* Invoice Entry: reduce the large empty breathing space above Existing Invoices */
    #im-existing-invoices-container {
        margin-top: 16px !important;
        padding-top: 18px !important;
    }

    #im-invoice-form-trigger {
        margin-bottom: 8px !important;
    }

    /* Make PO strip inline action button easier to see inside dark teal strip */
    #im-modal-deletion-list-btn,
    #im-modal-po-details .secondary-btn,
    #im-po-details-container-duplicate .secondary-btn {
        background: linear-gradient(135deg, #f5c84c, #ffde75) !important;
        color: #082f4b !important;
        border: 1px solid rgba(255,255,255,0.34) !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
        font-weight: 950 !important;
    }
}


/* ========================================================================== 
   8.6.1 — Premium Modal UI Standardization
   Scope: desktop pop-up modals across Invoice, WorkDesk, and Inventory.
   Intent: clean premium look, not over-designed. UI-only overrides.
   ========================================================================== */
@media screen and (min-width: 769px) {
    .modal-overlay:not(.hidden) {
        background: rgba(3, 18, 30, 0.44) !important;
        backdrop-filter: blur(5px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(5px) saturate(115%) !important;
        padding: 22px !important;
    }

    /* Main modal shell: less glass, more premium office-card clarity */
    .modal-overlay .modal-container,
    .modal > .modal-content {
        background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%) !important;
        border: 1px solid rgba(12, 74, 110, 0.18) !important;
        border-radius: 24px !important;
        box-shadow: 0 30px 75px rgba(2, 19, 33, 0.34), 0 1px 0 rgba(255,255,255,0.78) inset !important;
        color: #0f2435 !important;
        padding: 0 !important;
    }

    /* Remove the old moving-edge effect from normal modals. History keeps its own premium timeline style. */
    .modal-overlay .modal-container::before,
    .modal-overlay .modal-container::after {
        opacity: 0 !important;
        animation: none !important;
    }

    /* Premium but restrained modal header */
    .modal-overlay .modal-container .modal-header,
    .modal > .modal-content .modal-header {
        min-height: 62px !important;
        margin: 0 !important;
        padding: 17px 22px 15px !important;
        background:
            radial-gradient(circle at 92% 18%, rgba(255, 213, 79, 0.18), transparent 30%),
            linear-gradient(135deg, #07334c 0%, #0b5570 100%) !important;
        border-bottom: 1px solid rgba(255, 207, 78, 0.28) !important;
        border-radius: 24px 24px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        box-shadow: 0 10px 24px rgba(7, 52, 79, 0.18) !important;
    }

    .modal-overlay .modal-container .modal-header h2,
    .modal > .modal-content .modal-header h2,
    #transfer-job-modal-title,
    #transfer-approval-modal-title,
    #standard-modal-title,
    #ms-modal-title,
    #history-modal-title,
    #im-form-title,
    .modal-header h2 {
        margin: 0 !important;
        color: #ffd34d !important;
        font-size: clamp(1.14rem, 1.05vw, 1.42rem) !important;
        font-weight: 950 !important;
        letter-spacing: .2px !important;
        text-shadow: 0 2px 3px rgba(0,0,0,.35) !important;
        line-height: 1.15 !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .modal-overlay .modal-container .modal-header h2::after,
    .modal-header h2::after {
        content: "";
        display: block;
        width: 86px;
        height: 2px;
        margin-top: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, #ffd34d, rgba(255,255,255,0.65), transparent);
    }

    .modal-overlay .modal-container .modal-close-btn,
    .modal > .modal-content .modal-close-btn {
        min-width: 38px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.13) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,.26) !important;
        box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
        font-size: 1.35rem !important;
        line-height: 1 !important;
        text-shadow: none !important;
    }

    .modal-overlay .modal-container .modal-close-btn:hover,
    .modal > .modal-content .modal-close-btn:hover {
        background: rgba(255,255,255,.22) !important;
        transform: translateY(-1px) !important;
    }

    .modal-overlay .modal-container .modal-content,
    .modal > .modal-content > .modal-content {
        background: transparent !important;
        padding: 20px 22px !important;
        color: #17324a !important;
    }

    /* Large modal bodies need clean scrolling without losing the premium shell */
    #ms-report-modal .modal-content,
    #ms-requestlist-modal .modal-content,
    #im-finance-report-modal .modal-content,
    #im-batch-search-modal .modal-content,
    #im-add-payment-modal .modal-content,
    #transfer-job-modal .modal-content,
    #standard-job-modal .modal-content {
        scrollbar-width: thin;
        scrollbar-color: rgba(12, 85, 112, .45) rgba(226, 238, 247, .9);
    }

    .modal-overlay .modal-container .modal-footer,
    .modal > .modal-content .modal-footer {
        margin: 0 !important;
        padding: 14px 22px 18px !important;
        background: linear-gradient(180deg, rgba(244,248,252,.88), rgba(232,241,248,.96)) !important;
        border-top: 1px solid rgba(12, 74, 110, 0.12) !important;
        border-radius: 0 0 24px 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    /* Forms inside modals: professional panels, readable labels, modern inputs */
    .modal-overlay .modal-container .form-group {
        margin-bottom: 13px !important;
    }

    .modal-overlay .modal-container label,
    .modal-overlay .modal-container .form-group label {
        color: #0b3d59 !important;
        font-weight: 850 !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: .36px !important;
        margin-bottom: 6px !important;
    }

    .modal-overlay .modal-container input:not([type="checkbox"]):not([type="radio"]),
    .modal-overlay .modal-container select,
    .modal-overlay .modal-container textarea,
    .modal-overlay .modal-container .choices__inner {
        min-height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(11, 61, 89, 0.16) !important;
        background: rgba(255,255,255,.92) !important;
        color: #102f45 !important;
        box-shadow: 0 5px 14px rgba(10, 58, 92, .055) !important;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
    }

    .modal-overlay .modal-container textarea {
        min-height: 78px !important;
        resize: vertical !important;
    }

    .modal-overlay .modal-container input:not([type="checkbox"]):not([type="radio"]):focus,
    .modal-overlay .modal-container select:focus,
    .modal-overlay .modal-container textarea:focus,
    .modal-overlay .modal-container .choices.is-focused .choices__inner {
        outline: none !important;
        border-color: rgba(0, 122, 150, .72) !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(0, 122, 150, .11), 0 8px 18px rgba(10, 58, 92, .10) !important;
    }

    .modal-overlay .modal-container input[readonly],
    .modal-overlay .modal-container textarea[readonly] {
        background: #eef6fb !important;
        color: #34546b !important;
        border-color: rgba(12,74,110,.12) !important;
        font-weight: 750 !important;
    }

    /* Soft cards for inline detail blocks that previously looked plain/old */
    #ceo-modal-details,
    #transfer-modal-details,
    #im-manual-po-details,
    .modal-overlay .modal-container div[style*="background: #f4f7fa"],
    .modal-overlay .modal-container div[style*="background:#f4f7fa"],
    .modal-overlay .modal-container div[style*="background: #f8f9fa"],
    .modal-overlay .modal-container div[style*="background:#f8f9fa"] {
        background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,248,252,.96)) !important;
        border: 1px solid rgba(12, 74, 110, .12) !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 24px rgba(2, 35, 54, .06) !important;
        color: #17324a !important;
    }

    /* Tables inside modals: same family as Active Task/History, but restrained */
    .modal-overlay .modal-container .table-wrapper,
    .modal-overlay .modal-container table {
        border-radius: 18px !important;
        overflow: hidden !important;
        border-color: rgba(12, 74, 110, .12) !important;
    }

    .modal-overlay .modal-container table thead,
    .modal-overlay .modal-container table thead tr,
    .modal-overlay .modal-container table thead th {
        background: linear-gradient(135deg, #07334c, #0b5570) !important;
        color: #ffffff !important;
        border-color: rgba(255,255,255,.08) !important;
        font-weight: 900 !important;
        letter-spacing: .25px !important;
    }

    .modal-overlay .modal-container table td {
        background: rgba(255,255,255,.92) !important;
        color: #20394c !important;
        border-color: rgba(12,74,110,.08) !important;
    }

    .modal-overlay .modal-container table tbody tr:hover td {
        background: #f2fbff !important;
    }

    /* Modal action buttons: compact premium pills, not oversized. */
    .modal-overlay .modal-container .modal-footer button,
    .modal-overlay .modal-container button.download-btn,
    .modal-overlay .modal-container button.print-btn,
    .modal-overlay .modal-container button.secondary-btn,
    .modal-overlay .modal-container button.delete-btn,
    .modal-overlay .modal-container .action-btn {
        min-height: 38px !important;
        border-radius: 999px !important;
        padding: 9px 16px !important;
        font-size: 12.5px !important;
        font-weight: 900 !important;
        letter-spacing: .15px !important;
        border: 1px solid rgba(12, 74, 110, .14) !important;
        box-shadow: 0 9px 18px rgba(7, 52, 79, .11) !important;
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
    }

    .modal-overlay .modal-container .modal-footer button:hover,
    .modal-overlay .modal-container button.download-btn:hover,
    .modal-overlay .modal-container button.print-btn:hover,
    .modal-overlay .modal-container button.secondary-btn:hover,
    .modal-overlay .modal-container button.delete-btn:hover,
    .modal-overlay .modal-container .action-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 12px 24px rgba(7, 52, 79, .16) !important;
    }

    .modal-overlay .modal-container button.download-btn,
    .modal-overlay .modal-container button.print-btn,
    .modal-overlay .modal-container .action-btn,
    .modal-overlay .modal-container button[id*="save"],
    .modal-overlay .modal-container button[id*="approve"],
    .modal-overlay .modal-container button[id*="add-selected"] {
        background: linear-gradient(135deg, #067c99, #0b5f7a) !important;
        color: #ffffff !important;
    }

    .modal-overlay .modal-container button.secondary-btn,
    .modal-overlay .modal-container .secondary-btn.modal-close-btn:not(.modal-header .modal-close-btn) {
        background: linear-gradient(135deg, #ffffff, #edf5fa) !important;
        color: #0b3d59 !important;
    }

    .modal-overlay .modal-container button.delete-btn,
    .modal-overlay .modal-container button[id*="reject"],
    .modal-overlay .modal-container button[id*="delete"] {
        background: linear-gradient(135deg, #d65a3b, #b43f27) !important;
        color: #ffffff !important;
        border-color: rgba(180, 63, 39, .22) !important;
    }

    /* Modal-specific polish: keep these common work areas tidy */
    #im-invoice-entry-modal .modal-container {
        max-width: min(1180px, 94vw) !important;
    }

    #im-invoice-entry-modal #im-new-invoice-form .form-grid-3col,
    #standard-job-modal .transfer-2col-grid,
    #transfer-job-modal .transfer-2col-grid {
        background: rgba(255,255,255,.58) !important;
        border: 1px solid rgba(12, 74, 110, .10) !important;
        border-radius: 20px !important;
        padding: 18px !important;
        box-shadow: 0 12px 26px rgba(2, 35, 54, .055) !important;
    }

    #transfer-job-modal .modal-container,
    #standard-job-modal .modal-container,
    #ms-report-modal .modal-container,
    #ms-requestlist-modal .modal-container,
    #im-batch-search-modal .modal-container,
    #im-add-payment-modal .modal-container,
    #im-finance-report-modal .modal-container {
        max-width: min(1080px, 95vw) !important;
    }

    #ms-report-modal .modal-container,
    #ms-requestlist-modal .modal-container {
        height: min(88vh, 860px) !important;
    }

    /* Required List / Stock Report printable panels: readable on screen while still print-safe */
    #ms-report-print-content,
    #ms-requestlist-modal .modal-content {
        background: transparent !important;
    }

    #ms-report-modal h2,
    #ms-requestlist-modal h2,
    #ms-new-material-modal h2,
    #transfer-job-modal h2,
    #standard-job-modal h2 {
        color: #ffd34d !important;
    }

    #tf-multi-list-container,
    #payment-modal-total-value,
    #im-batch-modal-results,
    #im-payment-modal-results {
        border-radius: 18px !important;
    }

    /* Radio mode selector in Inventory Transfer modal */
    #transfer-job-modal .modal-content > div:first-child {
        background: rgba(255,255,255,.68) !important;
        border: 1px solid rgba(12,74,110,.10) !important;
        border-radius: 16px !important;
        padding: 10px 12px !important;
        margin-bottom: 16px !important;
    }
}


/* =========================================================
   8.6.2 — Welcome Screen Premium UI Upgrade
   Navigation-only landing page; no extra Firebase reads.
   ========================================================= */
#dashboard-view {
    width: min(1180px, calc(100vw - 34px));
    margin: 0 auto;
}
#dashboard-view .cyber-dashboard-card {
    width: 100%;
    max-width: 1180px;
    min-height: 0;
    padding: 22px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 12%, rgba(251, 191, 36, 0.16), transparent 34%),
        radial-gradient(circle at 90% 18%, rgba(45, 212, 191, 0.14), transparent 32%),
        linear-gradient(135deg, rgba(4, 20, 42, 0.92), rgba(7, 47, 72, 0.86) 48%, rgba(9, 30, 54, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 34px 90px rgba(2, 6, 23, 0.48);
    overflow: hidden;
}
#dashboard-view .cyber-dashboard-card::before,
#dashboard-view .cyber-dashboard-card::after {
    opacity: 0.22;
}
#dashboard-view .dashboard-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 0 0 18px;
    margin: 0 0 22px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.14);
}
#dashboard-view #user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#dashboard-view #dashboard-username {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
#dashboard-view #dashboard-username::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fbbf24;
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(251, 191, 36, 0.24);
}
#dashboard-view .dashboard-version-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    margin: 0;
    border-radius: 999px;
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.13);
    border: 1px solid rgba(125, 211, 252, 0.20);
    font-weight: 800;
    font-size: 0.75rem;
}
#dashboard-view #logout-button {
    border-radius: 999px;
    padding: 9px 16px;
    color: #fff7ed;
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.92), rgba(234, 88, 12, 0.76));
    border: 1px solid rgba(251, 146, 60, 0.34);
    box-shadow: 0 12px 24px rgba(194, 65, 12, 0.18);
}
#dashboard-view #logout-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
.welcome-premium-main {
    position: relative;
    z-index: 1;
    padding: 0;
}
.welcome-premium-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 22px;
    align-items: stretch;
    padding: 26px;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.22)),
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.14), transparent 42%);
    border: 1px solid rgba(226, 232, 240, 0.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.welcome-premium-copy h1 {
    margin: 14px 0 8px;
    color: #fbbf24;
    font-size: clamp(2.35rem, 4vw, 4.4rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
    font-weight: 950;
    text-shadow: 0 4px 18px rgba(251, 191, 36, 0.16), 0 2px 0 rgba(15, 23, 42, 0.35);
}
.welcome-premium-copy p {
    max-width: 760px;
    margin: 0;
    color: #dbeafe;
    font-size: 1rem;
    line-height: 1.65;
}
.welcome-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.welcome-status-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e0f2fe;
    background: rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 0.82rem;
    font-weight: 750;
}
.welcome-status-row i { color: #fbbf24; }
.welcome-premium-panel {
    align-self: stretch;
    border-radius: 22px;
    padding: 20px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 156px;
}
.welcome-panel-label {
    width: fit-content;
    color: #082f49;
    background: #fbbf24;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.welcome-premium-panel strong {
    margin-top: 14px;
    color: #f8fafc;
    font-size: 1.45rem;
    line-height: 1.1;
}
.welcome-premium-panel p {
    margin: 8px 0 0;
    color: #bfdbfe;
    font-size: 0.92rem;
}
.welcome-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.welcome-module-card,
.welcome-module-card:visited {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 118px;
    padding: 18px;
    border-radius: 22px;
    text-decoration: none;
    text-align: left;
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.085);
    border: 1px solid rgba(226, 232, 240, 0.13);
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.20s ease, box-shadow 0.20s ease, border-color 0.20s ease, background 0.20s ease;
    overflow: hidden;
    cursor: pointer;
}
.welcome-module-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--welcome-accent, #38bdf8);
    opacity: 0.95;
}
.welcome-module-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
    border-color: color-mix(in srgb, var(--welcome-accent, #38bdf8) 50%, rgba(255,255,255,0.18));
    box-shadow: 0 22px 48px rgba(2, 6, 23, 0.28);
}
.welcome-module-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--welcome-accent, #38bdf8);
    background: rgba(2, 6, 23, 0.34);
    border: 1px solid color-mix(in srgb, var(--welcome-accent, #38bdf8) 38%, rgba(255,255,255,0.10));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--welcome-accent, #38bdf8) 10%, transparent);
}
.welcome-module-icon i { font-size: 1.35rem; }
.welcome-module-text strong {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.welcome-module-text em {
    display: block;
    color: #cbd5e1;
    font-style: normal;
    font-size: 0.82rem;
    line-height: 1.4;
}
.welcome-module-open {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    color: #e0f2fe;
    background: rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(226, 232, 240, 0.12);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}
.welcome-module-workdesk { --welcome-accent: #38bdf8; }
.welcome-module-invoice { --welcome-accent: #22c55e; }
.welcome-module-inventory { --welcome-accent: #c084fc; }
.welcome-module-requisition { --welcome-accent: #fbbf24; }
.welcome-module-finance { --welcome-accent: #2dd4bf; }
.welcome-module-po { --welcome-accent: #fb7185; }

@media (max-width: 1040px) {
    .welcome-module-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .welcome-premium-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    #dashboard-view { width: min(100vw - 18px, 100%); }
    #dashboard-view .cyber-dashboard-card { padding: 14px; border-radius: 24px; }
    #dashboard-view .dashboard-header { align-items: flex-start; }
    .welcome-premium-hero { padding: 20px; }
    .welcome-status-row span { width: 100%; justify-content: flex-start; }
    .welcome-module-grid { grid-template-columns: 1fr; }
    .welcome-module-card,
    .welcome-module-card:visited {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 104px;
    }
    .welcome-module-open {
        grid-column: 2;
        width: fit-content;
    }
}

/* =========================================================
   8.6.3 — Welcome copy cleanup + WorkDesk Job Modal Premium Fix
   UI-only. No workflow, save, Firebase, or inventory calculation changes.
   ========================================================= */
.welcome-person-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 760px;
    margin: 0 !important;
    color: #dbeafe !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
}
.welcome-person-line strong {
    color: #ffffff;
    font-weight: 950;
}
#welcome-current-date {
    color: #fde68a;
    font-weight: 850;
}
.welcome-quote-row {
    width: fit-content;
    max-width: 760px;
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 15px;
    border-radius: 18px;
    color: #f8fafc;
    background: rgba(2, 6, 23, 0.30);
    border: 1px solid rgba(251, 191, 36, 0.20);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.16), inset 0 1px 0 rgba(255,255,255,0.06);
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 750;
}
.welcome-quote-row i {
    margin-top: 2px;
    color: #fbbf24;
}
#welcome-panel-date {
    font-size: 1.28rem;
    line-height: 1.18;
}
#welcome-panel-sub {
    color: #dbeafe !important;
    font-weight: 750;
}
@media (max-width: 720px) {
    .welcome-quote-row {
        width: 100%;
    }
}

@media screen and (min-width: 769px) {
    /* WorkDesk Add/Edit Job Entry modal: first focused modal cleanup pass. */
    #standard-job-modal .modal-container {
        max-width: min(980px, 94vw) !important;
        background: #f5f9fc !important;
        border: 1px solid rgba(12, 74, 110, 0.16) !important;
        border-radius: 24px !important;
        box-shadow: 0 34px 80px rgba(2, 19, 33, 0.34), inset 0 1px 0 rgba(255,255,255,0.76) !important;
    }
    #standard-job-modal .modal-header {
        background:
            radial-gradient(circle at 92% 12%, rgba(251, 191, 36, 0.18), transparent 30%),
            linear-gradient(135deg, #07334c 0%, #0b5570 100%) !important;
        border-bottom: 1px solid rgba(251, 191, 36, 0.26) !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 18px 24px 16px !important;
    }
    #standard-job-modal #standard-modal-title {
        color: #ffd34d !important;
        font-size: clamp(1.28rem, 1.2vw, 1.58rem) !important;
        text-shadow: 0 2px 4px rgba(2, 6, 23, 0.36) !important;
    }
    #standard-job-modal .modal-content {
        background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%) !important;
        padding: 22px 24px 0 !important;
        color: #102f45 !important;
    }
    #standard-job-modal #jobentry-form {
        margin: 0 !important;
    }
    #standard-job-modal .transfer-2col-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    #standard-job-modal .transfer-col {
        background: #ffffff !important;
        border: 1px solid rgba(12, 74, 110, 0.12) !important;
        border-radius: 20px !important;
        padding: 18px !important;
        box-shadow: 0 14px 30px rgba(2, 35, 54, 0.065) !important;
    }
    #standard-job-modal .form-group {
        margin-bottom: 14px !important;
    }
    #standard-job-modal .form-group label,
    #standard-job-modal label {
        color: #0b3d59 !important;
        font-size: 0.75rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.055em !important;
        text-transform: uppercase !important;
        margin-bottom: 6px !important;
    }
    #standard-job-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #standard-job-modal select,
    #standard-job-modal textarea {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(11, 61, 89, 0.17) !important;
        background: #ffffff !important;
        color: #123247 !important;
        font-weight: 750 !important;
        box-shadow: 0 5px 14px rgba(10, 58, 92, 0.055) !important;
    }
    #standard-job-modal input::placeholder,
    #standard-job-modal textarea::placeholder {
        color: #7a93a5 !important;
        font-weight: 650 !important;
    }
    #standard-job-modal input:focus,
    #standard-job-modal select:focus,
    #standard-job-modal textarea:focus {
        outline: none !important;
        border-color: rgba(0, 122, 150, 0.78) !important;
        box-shadow: 0 0 0 4px rgba(0, 122, 150, 0.12), 0 8px 18px rgba(10, 58, 92, 0.10) !important;
    }
    #standard-job-modal #job-other-specify,
    #standard-job-modal #job-invoice-fields,
    #standard-job-modal .form-group[style*="background: #f8f9fa"] {
        background: #f1f8fc !important;
        border: 1px dashed rgba(7, 83, 112, 0.24) !important;
        border-radius: 18px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
        color: #123247 !important;
    }
    #standard-job-modal #job-invoice-fields {
        padding: 14px !important;
    }
    #standard-job-modal #job-invoice-fields div[style*="font-size: 0.75rem"],
    #standard-job-modal #job-attachment-label span {
        color: #4b6478 !important;
        font-weight: 750 !important;
    }
    #standard-job-modal #job-attachment-label {
        color: #075985 !important;
        font-weight: 900 !important;
    }
    #standard-job-modal #job-attachment-view-btn {
        min-width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        padding: 0 !important;
        background: linear-gradient(135deg, #6d28d9, #4b2f1e) !important;
        color: #ffffff !important;
        border: 1px solid rgba(76, 29, 149, 0.24) !important;
    }
    #standard-job-modal .modal-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 16px 24px 20px !important;
        background: linear-gradient(180deg, rgba(244, 248, 252, 0.92), rgba(232, 241, 248, 0.98)) !important;
        border-top: 1px solid rgba(12, 74, 110, 0.12) !important;
        border-radius: 0 0 24px 24px !important;
    }
    #standard-job-modal .modal-footer > div {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 9px !important;
    }
    #standard-job-modal .modal-footer button {
        min-height: 38px !important;
        border-radius: 999px !important;
        padding: 9px 16px !important;
        font-size: 12.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.02em !important;
        box-shadow: 0 9px 18px rgba(7, 52, 79, 0.12) !important;
        border: 1px solid rgba(12, 74, 110, 0.16) !important;
    }
    #standard-job-modal #add-job-button,
    #standard-job-modal #update-job-button {
        background: linear-gradient(135deg, #0f9f73, #047857) !important;
        color: #ffffff !important;
    }
    #standard-job-modal #delete-job-button {
        background: linear-gradient(135deg, #dc5b3e, #b43f27) !important;
        color: #ffffff !important;
    }
    #standard-job-modal #clear-job-button,
    #standard-job-modal .modal-footer .secondary-btn {
        background: linear-gradient(135deg, #ffffff, #edf5fa) !important;
        color: #0b3d59 !important;
    }
}
@media (max-width: 900px) {
    #standard-job-modal .transfer-2col-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   8.6.5 — Welcome Greeting Cleanup + Inventory Modal Premium Fix
   UI-only. No Firebase, save, stock movement, print, or workflow logic changes.
   ========================================================= */
.welcome-person-line #welcome-time-greeting {
    color: #fde68a !important;
    font-weight: 950 !important;
}
.welcome-person-line .welcome-date-inline {
    display: none !important;
}
#welcome-panel-sub {
    color: #cfe8f7 !important;
    font-weight: 760 !important;
}
#welcome-panel-sub.welcome-panel-time {
    margin-top: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: rgba(2, 6, 23, 0.24) !important;
    border: 1px solid rgba(251, 191, 36, 0.22) !important;
    color: #ffffff !important;
    font-size: 1.04rem !important;
    font-weight: 920 !important;
    letter-spacing: 0.02em !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

@media screen {
    /* Inventory modal family: clean premium, readable, and not overly flashy. */
    #transfer-job-modal .modal-container,
    #transfer-approval-modal .modal-container,
    #ms-new-material-modal .modal-container,
    #ms-photo-browser-modal .modal-container,
    #ms-add-stock-modal .modal-container,
    #ms-report-modal .modal-container,
    #ms-requestlist-modal .modal-container {
        background: #f5f9fc !important;
        border: 1px solid rgba(12, 74, 110, 0.16) !important;
        border-radius: 24px !important;
        box-shadow: 0 34px 82px rgba(2, 19, 33, 0.32), inset 0 1px 0 rgba(255,255,255,0.72) !important;
        overflow: hidden !important;
    }

    #transfer-job-modal .modal-header,
    #transfer-approval-modal .modal-header,
    #ms-new-material-modal .modal-header,
    #ms-photo-browser-modal .modal-header,
    #ms-add-stock-modal .modal-header,
    #ms-report-modal .modal-header,
    #ms-requestlist-modal .modal-header {
        background:
            radial-gradient(circle at 92% 8%, rgba(251, 191, 36, 0.18), transparent 28%),
            linear-gradient(135deg, #07334c 0%, #0b5570 100%) !important;
        color: #f8fafc !important;
        border-bottom: 1px solid rgba(251, 191, 36, 0.26) !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 18px 24px 16px !important;
    }

    #transfer-job-modal .modal-header h2,
    #transfer-approval-modal .modal-header h2,
    #ms-new-material-modal .modal-header h2,
    #ms-photo-browser-modal .modal-header h2,
    #ms-add-stock-modal .modal-header h2,
    #ms-report-modal .modal-header h2,
    #ms-requestlist-modal .modal-header h2 {
        color: #ffd34d !important;
        font-size: clamp(1.2rem, 1.1vw, 1.52rem) !important;
        font-weight: 950 !important;
        letter-spacing: -0.02em !important;
        text-shadow: 0 2px 4px rgba(2, 6, 23, 0.32) !important;
        margin: 0 !important;
    }

    #transfer-job-modal .modal-close-btn,
    #transfer-approval-modal .modal-close-btn,
    #ms-new-material-modal .modal-close-btn,
    #ms-photo-browser-modal .modal-close-btn,
    #ms-add-stock-modal .modal-close-btn,
    #ms-report-modal .modal-close-btn,
    #ms-requestlist-modal .modal-close-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        background: rgba(255,255,255,0.10) !important;
        color: #ffffff !important;
        font-size: 1.35rem !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }
    #transfer-job-modal .modal-close-btn:hover,
    #transfer-approval-modal .modal-close-btn:hover,
    #ms-new-material-modal .modal-close-btn:hover,
    #ms-photo-browser-modal .modal-close-btn:hover,
    #ms-add-stock-modal .modal-close-btn:hover,
    #ms-report-modal .modal-close-btn:hover,
    #ms-requestlist-modal .modal-close-btn:hover {
        background: rgba(239, 68, 68, 0.92) !important;
        color: #ffffff !important;
    }

    #transfer-job-modal .modal-content,
    #transfer-approval-modal .modal-content,
    #ms-new-material-modal .modal-content,
    #ms-photo-browser-modal .modal-content,
    #ms-add-stock-modal .modal-content,
    #ms-report-modal .modal-content,
    #ms-requestlist-modal .modal-content {
        background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%) !important;
        color: #102f45 !important;
        padding: 22px 24px !important;
    }

    #transfer-job-modal .modal-footer,
    #transfer-approval-modal .modal-footer,
    #ms-new-material-modal .modal-footer,
    #ms-photo-browser-modal .modal-footer,
    #ms-add-stock-modal .modal-footer,
    #ms-report-modal .modal-footer,
    #ms-requestlist-modal .modal-footer {
        background: #eef5fb !important;
        border-top: 1px solid rgba(12, 74, 110, 0.12) !important;
        padding: 16px 24px !important;
        gap: 10px !important;
    }

    #transfer-job-modal label,
    #transfer-approval-modal label,
    #ms-new-material-modal label,
    #ms-photo-browser-modal label,
    #ms-add-stock-modal label,
    #ms-report-modal label,
    #ms-requestlist-modal label,
    #transfer-job-modal strong,
    #transfer-approval-modal strong,
    #ms-new-material-modal strong,
    #ms-photo-browser-modal strong,
    #ms-add-stock-modal strong,
    #ms-report-modal strong,
    #ms-requestlist-modal strong {
        color: #0b3d59 !important;
    }

    #transfer-job-modal .form-group label,
    #transfer-approval-modal .form-group label,
    #ms-new-material-modal .form-group label,
    #ms-photo-browser-modal .form-group label,
    #ms-add-stock-modal .form-group label,
    #ms-report-modal .form-group label,
    #ms-requestlist-modal .form-group label {
        font-size: 0.74rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.055em !important;
        text-transform: uppercase !important;
        margin-bottom: 6px !important;
    }

    #transfer-job-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #transfer-job-modal select,
    #transfer-job-modal textarea,
    #transfer-approval-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #transfer-approval-modal select,
    #transfer-approval-modal textarea,
    #ms-new-material-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #ms-new-material-modal select,
    #ms-new-material-modal textarea,
    #ms-photo-browser-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #ms-photo-browser-modal select,
    #ms-photo-browser-modal textarea,
    #ms-add-stock-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #ms-add-stock-modal select,
    #ms-add-stock-modal textarea,
    #ms-requestlist-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #ms-requestlist-modal select,
    #ms-requestlist-modal textarea {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(11, 61, 89, 0.17) !important;
        background: #ffffff !important;
        color: #123247 !important;
        font-weight: 750 !important;
        padding: 10px 12px !important;
        box-shadow: 0 5px 14px rgba(10, 58, 92, 0.055) !important;
    }
    #transfer-job-modal input[readonly],
    #transfer-approval-modal input[readonly],
    #ms-new-material-modal input[readonly],
    #ms-add-stock-modal input[readonly] {
        background: #edf4fa !important;
        color: #24495f !important;
        cursor: default !important;
    }
    #transfer-job-modal input:focus,
    #transfer-job-modal select:focus,
    #transfer-job-modal textarea:focus,
    #transfer-approval-modal input:focus,
    #transfer-approval-modal select:focus,
    #transfer-approval-modal textarea:focus,
    #ms-new-material-modal input:focus,
    #ms-new-material-modal select:focus,
    #ms-new-material-modal textarea:focus,
    #ms-photo-browser-modal input:focus,
    #ms-photo-browser-modal select:focus,
    #ms-photo-browser-modal textarea:focus,
    #ms-add-stock-modal input:focus,
    #ms-add-stock-modal select:focus,
    #ms-add-stock-modal textarea:focus,
    #ms-requestlist-modal input:focus,
    #ms-requestlist-modal select:focus,
    #ms-requestlist-modal textarea:focus {
        outline: none !important;
        border-color: rgba(0, 122, 150, 0.78) !important;
        box-shadow: 0 0 0 4px rgba(0, 122, 150, 0.12), 0 8px 18px rgba(10, 58, 92, 0.10) !important;
    }

    #transfer-job-modal .transfer-2col-grid {
        gap: 18px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    #transfer-job-modal .transfer-col,
    #ms-new-material-modal #ms-stock-entry-row,
    #transfer-job-modal #tf-multi-list-container,
    #transfer-approval-modal #transfer-modal-details,
    #ms-photo-browser-modal .ms-photo-browser-top,
    #ms-photo-browser-modal .ms-photo-browser-note,
    #ms-photo-browser-modal .ms-photo-browser-preview,
    #ms-requestlist-modal .table-wrapper,
    #ms-report-modal .modal-content > div:not(.print-only-header):not(.print-footer) {
        background: #ffffff !important;
        border: 1px solid rgba(12, 74, 110, 0.12) !important;
        border-radius: 18px !important;
        box-shadow: 0 14px 30px rgba(2, 35, 54, 0.065) !important;
        color: #102f45 !important;
    }
    #transfer-job-modal .transfer-col {
        padding: 18px !important;
    }
    #transfer-job-modal #tf-multi-list-container {
        padding: 14px !important;
        margin-top: 18px !important;
        border-top: 0 !important;
    }
    #transfer-job-modal #tf-multi-list-container h4 {
        color: #0b3d59 !important;
        font-weight: 950 !important;
    }

    #transfer-job-modal table,
    #ms-requestlist-modal table,
    #ms-report-modal table,
    #tf-batch-table {
        background: #ffffff !important;
        color: #14364b !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }
    #transfer-job-modal thead,
    #transfer-job-modal thead tr,
    #ms-requestlist-modal thead,
    #ms-requestlist-modal thead tr,
    #ms-report-modal thead,
    #ms-report-modal thead tr,
    #tf-batch-table thead,
    #tf-batch-table thead tr {
        background: #07334c !important;
        color: #ffffff !important;
    }
    #transfer-job-modal th,
    #ms-requestlist-modal th,
    #ms-report-modal th,
    #tf-batch-table th {
        color: #ffffff !important;
        font-weight: 900 !important;
        border-bottom: 0 !important;
    }
    #transfer-job-modal td,
    #ms-requestlist-modal td,
    #ms-report-modal td,
    #tf-batch-table td {
        color: #14364b !important;
        border-bottom: 1px solid rgba(12, 74, 110, 0.09) !important;
    }

    #transfer-job-modal button,
    #transfer-approval-modal button,
    #ms-new-material-modal button,
    #ms-photo-browser-modal button,
    #ms-add-stock-modal button,
    #ms-report-modal button,
    #ms-requestlist-modal button {
        border-radius: 999px !important;
        font-weight: 850 !important;
    }
    #transfer-job-modal .download-btn,
    #transfer-approval-modal .download-btn,
    #ms-new-material-modal .download-btn,
    #ms-add-stock-modal .download-btn,
    #ms-report-modal .download-btn,
    #ms-requestlist-modal .download-btn,
    #ms-photo-browser-modal .primary-btn {
        background: linear-gradient(135deg, #0b5570, #007a96) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        box-shadow: 0 10px 20px rgba(0, 122, 150, 0.16) !important;
    }
    #transfer-job-modal .secondary-btn,
    #transfer-approval-modal .secondary-btn,
    #ms-new-material-modal .secondary-btn,
    #ms-photo-browser-modal .secondary-btn,
    #ms-add-stock-modal .secondary-btn,
    #ms-report-modal .secondary-btn,
    #ms-requestlist-modal .secondary-btn {
        background: #ffffff !important;
        color: #0b3d59 !important;
        border: 1px solid rgba(11, 61, 89, 0.16) !important;
        box-shadow: 0 8px 18px rgba(10, 58, 92, 0.08) !important;
    }
    #transfer-job-modal .delete-btn,
    #transfer-approval-modal .delete-btn,
    #ms-requestlist-modal .delete-btn {
        background: #fff1f2 !important;
        color: #be123c !important;
        border: 1px solid rgba(190, 18, 60, 0.18) !important;
        box-shadow: 0 8px 18px rgba(190, 18, 60, 0.08) !important;
    }
    #transfer-job-modal #tf-add-to-list-btn,
    #ms-requestlist-modal #ms-requestlist-add-manual-btn {
        background: #fffbeb !important;
        color: #92400e !important;
        border: 1px solid rgba(217, 119, 6, 0.20) !important;
    }
    #transfer-approval-modal #transfer-modal-approve-btn {
        background: linear-gradient(135deg, #047857, #10b981) !important;
        color: #ffffff !important;
    }

    #transfer-job-modal .modal-content [style*="color: white"],
    #transfer-approval-modal .modal-content [style*="color: white"],
    #ms-new-material-modal .modal-content [style*="color: white"],
    #ms-photo-browser-modal .modal-content [style*="color: white"],
    #ms-add-stock-modal .modal-content [style*="color: white"],
    #ms-report-modal .modal-content [style*="color: white"],
    #ms-requestlist-modal .modal-content [style*="color: white"] {
        color: #102f45 !important;
    }

    @media (max-width: 900px) {
        #transfer-job-modal .transfer-2col-grid {
            grid-template-columns: 1fr !important;
        }
        #transfer-job-modal .modal-content,
        #transfer-approval-modal .modal-content,
        #ms-new-material-modal .modal-content,
        #ms-photo-browser-modal .modal-content,
        #ms-add-stock-modal .modal-content,
        #ms-report-modal .modal-content,
        #ms-requestlist-modal .modal-content {
            padding: 18px !important;
        }
    }
}


/* =========================================================
   8.6.5 — Welcome + Inventory Modal Detail Polish
   UI-only. No Firebase, save, stock movement, print, invoice, or workflow logic changes.
   ========================================================= */
#welcome-panel-sub {
    display: none !important;
}
.welcome-premium-copy h1 {
    max-width: 780px !important;
    line-height: 1.02 !important;
}

/* WorkDesk job modal: keep footer Cancel readable and aligned. */
#standard-job-modal .modal-footer > .modal-close-btn,
#standard-job-modal .modal-footer button[onclick*="closeStandardJobModal"] {
    width: auto !important;
    min-width: 94px !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0b3d59, #123f5a) !important;
    color: #ffffff !important;
    border: 1px solid rgba(11, 61, 89, 0.30) !important;
    box-shadow: 0 10px 20px rgba(7, 52, 79, 0.16) !important;
}
#standard-job-modal .modal-footer > .modal-close-btn:hover,
#standard-job-modal .modal-footer button[onclick*="closeStandardJobModal"]:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-1px) !important;
}

/* Removed unused financial print buttons. Keep hidden if old cached HTML remains. */
#im-invoice-print-report-container,
#btn-invoice-entry-print-report,
#btn-admin-print-finance {
    display: none !important;
}

/* Text close buttons should not inherit the small square X button sizing. */
.modal-footer .modal-close-btn,
#ms-report-modal .modal-footer .modal-close-btn,
#ms-requestlist-modal .modal-footer .modal-close-btn,
#ms-new-material-modal .modal-footer .modal-close-btn,
#transfer-job-modal .modal-footer .modal-close-btn,
#transfer-approval-modal .modal-footer .modal-close-btn,
#ms-add-stock-modal .modal-footer .modal-close-btn {
    width: auto !important;
    min-width: 92px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 0.84rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Transfer / Restock / Usage mode selector: one line, compact, readable. */
#transfer-job-modal .modal-content > div:first-child {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 0 0 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(12, 74, 110, 0.12) !important;
}
#transfer-job-modal .modal-content > div:first-child label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: max-content !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(12, 74, 110, 0.12) !important;
    box-shadow: 0 7px 16px rgba(10, 58, 92, 0.055) !important;
    color: #0b3d59 !important;
}
#transfer-job-modal .modal-content > div:first-child label strong {
    white-space: nowrap !important;
    font-size: 0.86rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
#transfer-job-modal .modal-content > div:first-child input[type="radio"] {
    margin: 0 !important;
    accent-color: #0b5570 !important;
}

/* Register New Material: remove the repetitive white card layer for Opening Stock Site. */
#ms-new-material-modal #ms-stock-entry-row {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(12, 74, 110, 0.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 0 !important;
    margin-top: 16px !important;
    color: #102f45 !important;
}
#ms-new-material-modal #ms-stock-entry-row .form-group {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Required Materials List: match the premium modal pattern and left-align logo/title. */
#ms-requestlist-modal .modal-content > div:first-child {
    background:
        radial-gradient(circle at 96% 10%, rgba(251, 191, 36, 0.13), transparent 26%),
        linear-gradient(135deg, #eff8fc 0%, #e5f1f8 100%) !important;
    border: 1px solid rgba(12, 74, 110, 0.14) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    box-shadow: 0 12px 28px rgba(2, 35, 54, 0.06) !important;
}
#ms-requestlist-modal .modal-content > div:first-child > div:first-child {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
}
#ms-requestlist-modal #ms-requestlist-logo {
    height: 42px !important;
    width: auto !important;
    border-radius: 10px !important;
    flex: 0 0 auto !important;
    box-shadow: 0 8px 18px rgba(7, 52, 79, 0.10) !important;
}
#ms-requestlist-modal .modal-content > div:first-child div[style*="font-weight: 900"] {
    text-align: left !important;
    color: #0b3d59 !important;
    font-size: 1.02rem !important;
    line-height: 1.2 !important;
}
#ms-requestlist-modal .modal-content > div:first-child > div:last-child {
    color: #4b6478 !important;
    font-weight: 750 !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(12, 74, 110, 0.10) !important;
    border-radius: 999px !important;
    padding: 7px 11px !important;
}
#ms-requestlist-modal .modal-content > div:nth-child(2) {
    background: #ffffff !important;
    border: 1px solid rgba(12, 74, 110, 0.11) !important;
    border-radius: 16px !important;
    color: #314d60 !important;
    box-shadow: 0 10px 22px rgba(10, 58, 92, 0.045) !important;
}

/* Material Stock Report footer close button fix. */
#ms-report-modal .modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
#ms-report-modal .modal-footer .modal-close-btn {
    background: #ffffff !important;
    color: #0b3d59 !important;
    border: 1px solid rgba(11, 61, 89, 0.18) !important;
    box-shadow: 0 8px 18px rgba(10, 58, 92, 0.08) !important;
}

@media (max-width: 720px) {
    .welcome-premium-copy h1 {
        font-size: clamp(2rem, 10vw, 3.2rem) !important;
    }
    #transfer-job-modal .modal-content > div:first-child {
        gap: 8px !important;
    }
    #transfer-job-modal .modal-content > div:first-child label {
        padding: 7px 10px !important;
    }
    #ms-requestlist-modal .modal-content > div:first-child {
        align-items: flex-start !important;
    }
    #ms-requestlist-modal .modal-content > div:first-child > div:first-child {
        width: 100% !important;
    }
}

/* =================================================================================================
   8.6.7 — Invoice Dashboard Reference Note + Invoice Management Modal Premium Fix
   UI-only polish. No workflow logic changes.
================================================================================================= */
#im-dashboard .im-dashboard-quick-actions {
    display: none !important;
}

#im-dashboard .im-dashboard-reference-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 16px 0 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 52%, #ffffff 100%);
    border: 1px solid rgba(245, 158, 11, 0.28);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    color: #334155;
}

#im-dashboard .im-dashboard-reference-note .im-dashboard-reference-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b, #facc15);
    color: #1e293b;
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.25);
}

#im-dashboard .im-dashboard-reference-note strong {
    display: block;
    color: #0f172a;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}

#im-dashboard .im-dashboard-reference-note span {
    display: block;
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.5;
}

/* Invoice Management modal group — apply the better premium style only to IM popups that still looked old. */
#im-batch-search-modal .modal-container,
#im-attention-picker-modal .modal-container,
#im-add-payment-modal .modal-container,
#im-manual-po-modal .modal-container,
#im-finance-report-modal .modal-container,
#process-report-modal .modal-container {
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    box-shadow: 0 30px 75px rgba(15, 23, 42, 0.28) !important;
}

#im-batch-search-modal .modal-header,
#im-attention-picker-modal .modal-header,
#im-add-payment-modal .modal-header,
#im-manual-po-modal .modal-header,
#im-finance-report-modal .modal-header,
#process-report-modal .modal-header {
    min-height: 64px !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.22), transparent 34%),
        linear-gradient(135deg, #0f2f4a 0%, #103f60 54%, #08263d 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(250, 204, 21, 0.22) !important;
}

#im-batch-search-modal .modal-header h2,
#im-attention-picker-modal .modal-header h2,
#im-add-payment-modal .modal-header h2,
#im-manual-po-modal .modal-header h2,
#im-finance-report-modal .modal-header h2,
#process-report-modal .modal-header h2 {
    margin: 0 !important;
    color: #facc15 !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

#im-batch-search-modal .modal-close-btn,
#im-attention-picker-modal .modal-close-btn,
#im-add-payment-modal .modal-close-btn,
#im-manual-po-modal .modal-close-btn,
#im-finance-report-modal .modal-close-btn,
#process-report-modal .modal-close-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

#im-batch-search-modal .modal-close-btn:hover,
#im-attention-picker-modal .modal-close-btn:hover,
#im-add-payment-modal .modal-close-btn:hover,
#im-manual-po-modal .modal-close-btn:hover,
#im-finance-report-modal .modal-close-btn:hover,
#process-report-modal .modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.92) !important;
    border-color: rgba(239, 68, 68, 1) !important;
}

#im-batch-search-modal .modal-content,
#im-attention-picker-modal .modal-content,
#im-add-payment-modal .modal-content,
#im-manual-po-modal .modal-content,
#im-finance-report-modal .modal-content,
#process-report-modal .modal-content {
    padding: 22px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%) !important;
    color: #1e293b !important;
}

#im-batch-search-modal .modal-content p,
#im-attention-picker-modal .modal-content p,
#im-add-payment-modal .modal-content p,
#im-manual-po-modal .modal-content p,
#im-finance-report-modal .modal-content p,
#process-report-modal .modal-content p,
#im-batch-search-modal .modal-content small,
#im-attention-picker-modal .modal-content small,
#im-add-payment-modal .modal-content small,
#im-manual-po-modal .modal-content small,
#im-finance-report-modal .modal-content small,
#process-report-modal .modal-content small {
    color: #475569 !important;
}

#im-batch-search-modal .modal-content label,
#im-attention-picker-modal .modal-content label,
#im-add-payment-modal .modal-content label,
#im-manual-po-modal .modal-content label,
#im-finance-report-modal .modal-content label,
#process-report-modal .modal-content label {
    color: #0f3b57 !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

#im-batch-search-modal input,
#im-batch-search-modal select,
#im-batch-search-modal textarea,
#im-attention-picker-modal input,
#im-attention-picker-modal select,
#im-attention-picker-modal textarea,
#im-add-payment-modal input,
#im-add-payment-modal select,
#im-add-payment-modal textarea,
#im-manual-po-modal input,
#im-manual-po-modal select,
#im-manual-po-modal textarea,
#im-finance-report-modal input,
#im-finance-report-modal select,
#im-finance-report-modal textarea,
#process-report-modal input,
#process-report-modal select,
#process-report-modal textarea {
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.65) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#im-batch-search-modal input:focus,
#im-batch-search-modal select:focus,
#im-batch-search-modal textarea:focus,
#im-attention-picker-modal input:focus,
#im-attention-picker-modal select:focus,
#im-attention-picker-modal textarea:focus,
#im-add-payment-modal input:focus,
#im-add-payment-modal select:focus,
#im-add-payment-modal textarea:focus,
#im-manual-po-modal input:focus,
#im-manual-po-modal select:focus,
#im-manual-po-modal textarea:focus,
#im-finance-report-modal input:focus,
#im-finance-report-modal select:focus,
#im-finance-report-modal textarea:focus,
#process-report-modal input:focus,
#process-report-modal select:focus,
#process-report-modal textarea:focus {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14) !important;
    outline: none !important;
}

#im-batch-search-modal .search-and-filter-group,
#im-add-payment-modal .search-and-filter-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(203, 213, 225, 0.85) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

#im-batch-search-modal .search-and-filter-group input,
#im-add-payment-modal .search-and-filter-group input {
    margin: 0 !important;
    min-height: 42px !important;
}

#im-batch-search-modal .search-and-filter-group button,
#im-add-payment-modal .search-and-filter-group button,
#im-batch-search-modal .modal-footer button,
#im-attention-picker-modal .modal-footer button,
#im-add-payment-modal .modal-footer button,
#im-manual-po-modal .modal-footer button,
#im-finance-report-modal .modal-footer button,
#process-report-modal .modal-footer button {
    min-height: 40px !important;
    border-radius: 12px !important;
    padding: 9px 14px !important;
    font-size: 0.86rem !important;
    font-weight: 850 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
}

#im-batch-search-modal .modal-footer,
#im-attention-picker-modal .modal-footer,
#im-add-payment-modal .modal-footer,
#im-manual-po-modal .modal-footer,
#im-finance-report-modal .modal-footer,
#process-report-modal .modal-footer {
    padding: 14px 22px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(203, 213, 225, 0.9) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
}

#im-add-payment-modal .modal-footer {
    justify-content: space-between !important;
}

#im-add-payment-modal #payment-modal-total-value,
#im-add-payment-modal .modal-footer > div:first-child {
    color: #0f3b57 !important;
}

#im-batch-search-modal .table-wrapper,
#im-add-payment-modal .table-wrapper,
#im-finance-report-modal .table-wrapper {
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

#im-batch-search-modal table,
#im-add-payment-modal table,
#im-finance-report-modal table {
    background: #ffffff !important;
    color: #1e293b !important;
}

#im-batch-search-modal th,
#im-add-payment-modal th,
#im-finance-report-modal th {
    background: #0f3b57 !important;
    color: #f8fafc !important;
}

#im-batch-search-modal td,
#im-add-payment-modal td,
#im-finance-report-modal td {
    color: #334155 !important;
}

#im-batch-search-modal .secondary-btn,
#im-attention-picker-modal .secondary-btn,
#im-add-payment-modal .secondary-btn,
#im-manual-po-modal .secondary-btn,
#im-finance-report-modal .secondary-btn,
#process-report-modal .secondary-btn {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

#im-batch-search-modal .download-btn,
#im-attention-picker-modal .download-btn,
#im-add-payment-modal .download-btn,
#im-manual-po-modal .download-btn,
#im-finance-report-modal .download-btn,
#process-report-modal .download-btn {
    background: linear-gradient(135deg, #0f6d8d, #0ea5e9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(14, 165, 233, 0.55) !important;
    box-shadow: 0 10px 20px rgba(14, 116, 144, 0.20) !important;
}

@media (max-width: 768px) {
    #im-dashboard .im-dashboard-reference-note {
        flex-direction: column;
        padding: 14px;
    }
    #im-batch-search-modal .search-and-filter-group,
    #im-add-payment-modal .search-and-filter-group,
    #im-batch-search-modal .modal-footer,
    #im-attention-picker-modal .modal-footer,
    #im-add-payment-modal .modal-footer,
    #im-manual-po-modal .modal-footer,
    #im-finance-report-modal .modal-footer,
    #process-report-modal .modal-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}


/* ========================================================================== 
   8.6.9 — WorkDesk Module Color Coordination v2
   Scope: WorkDesk only.
   User review fix:
   - Darker professional WorkDesk blue tone (less baby-blue/light).
   - Explicit modal targeting because WorkDesk modals are outside #workdesk-view.
   - No Invoice Management or Inventory theme selectors are changed here.
   ========================================================================== */
:root {
    --wd-module-accent: #38bdf8;
    --wd-module-accent-strong: #0ea5e9;
    --wd-module-accent-soft: #bae6fd;
    --wd-module-blue-a: #082f49;
    --wd-module-blue-b: #0f3d5e;
    --wd-module-blue-c: #075985;
    --wd-module-blue-d: #0369a1;
    --wd-module-text-light: #f0f9ff;
    --wd-module-text-dark: #06263d;
}

/* WorkDesk sidebar/navigation only */
#workdesk-view .workdesk-sidebar {
    background:
        radial-gradient(circle at 14% 0%, rgba(56, 189, 248, 0.18), transparent 34%),
        radial-gradient(circle at 94% 20%, rgba(14, 165, 233, 0.14), transparent 36%),
        linear-gradient(180deg, var(--wd-module-blue-a) 0%, var(--wd-module-blue-b) 48%, var(--wd-module-blue-c) 100%) !important;
    border-right: 1px solid rgba(186, 230, 253, 0.18) !important;
    box-shadow: 12px 0 34px rgba(8, 47, 73, 0.28) !important;
}

#workdesk-view .wd-user-profile {
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.14), rgba(255, 255, 255, 0.06)) !important;
    border-color: rgba(186, 230, 253, 0.18) !important;
}

#workdesk-view .wd-user-avatar {
    background: linear-gradient(135deg, #e0f2fe, var(--wd-module-accent)) !important;
    color: var(--wd-module-text-dark) !important;
    border-color: rgba(255,255,255,0.56) !important;
    box-shadow: 0 12px 24px rgba(2, 44, 66, 0.34) !important;
}

#workdesk-view #wd-username,
#workdesk-view #wd-user-identifier,
#workdesk-view #workdesk-datetime,
#workdesk-view .sidebar-version-display {
    color: rgba(240, 249, 255, 0.92) !important;
}

#workdesk-view .wd-back-button,
#workdesk-view .workdesk-navigation a,
#workdesk-view .workdesk-footer-nav a {
    color: rgba(240, 249, 255, 0.88) !important;
    border-color: rgba(186, 230, 253, 0.12) !important;
}

#workdesk-view .wd-back-button,
#workdesk-view .workdesk-navigation a:hover,
#workdesk-view .workdesk-footer-nav a:hover {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #ffffff !important;
}

#workdesk-view .workdesk-navigation a.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.36), rgba(3, 105, 161, 0.40)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(186, 230, 253, 0.36) !important;
    box-shadow: 0 12px 26px rgba(8, 47, 73, 0.34) !important;
}

#workdesk-view #wd-sidebar-add-job-btn {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(8, 47, 73, 0.18)) !important;
    border: 1px solid rgba(186, 230, 253, 0.24) !important;
}

/* WorkDesk page/section headers */
#workdesk-view .wd-control-center-hero,
#workdesk-view .wd-page-hero,
#workdesk-view .wd-page-hero-active,
#workdesk-view .wd-page-hero-records {
    --iba-hero-blue-a: var(--wd-module-blue-a);
    --iba-hero-blue-b: var(--wd-module-blue-c);
    background:
        radial-gradient(circle at 88% 16%, rgba(56, 189, 248, 0.18), transparent 32%),
        radial-gradient(circle at 12% 0%, rgba(14, 165, 233, 0.20), transparent 36%),
        linear-gradient(135deg, var(--wd-module-blue-a) 0%, var(--wd-module-blue-b) 52%, var(--wd-module-blue-c) 100%) !important;
    border: 1px solid rgba(186, 230, 253, 0.30) !important;
    box-shadow: 0 24px 58px rgba(8, 47, 73, 0.24) !important;
}

#workdesk-view .wd-control-eyebrow,
#workdesk-view .wd-page-eyebrow {
    background: rgba(14, 165, 233, 0.14) !important;
    border-color: rgba(186, 230, 253, 0.24) !important;
    color: var(--wd-module-accent-soft) !important;
}

#workdesk-view .wd-control-eyebrow::before {
    background: var(--wd-module-accent) !important;
    box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.16) !important;
}

#workdesk-view .wd-control-center-hero h1,
#workdesk-view .wd-page-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 3px 12px rgba(2, 32, 51, 0.46) !important;
}

#workdesk-view .wd-control-subtitle,
#workdesk-view .wd-page-hero p {
    color: rgba(240, 249, 255, 0.90) !important;
}

#workdesk-view .wd-page-hero-main h1::after,
#workdesk-view .wd-page-hero h1::after {
    background: linear-gradient(90deg, var(--wd-module-accent), rgba(255,255,255,0.50), transparent) !important;
}

#workdesk-view .wd-page-hero-metric,
#workdesk-view #wd-active-dashboard-refresh {
    background: rgba(240, 249, 255, 0.96) !important;
    color: var(--wd-module-text-dark) !important;
    border-color: rgba(186, 230, 253, 0.62) !important;
}

#workdesk-view .workdesk-section {
    border-top: 4px solid rgba(14, 165, 233, 0.52) !important;
}

/* WorkDesk-related modal headers only.
   These modals live outside #workdesk-view in index.html, so we target them directly. */
#vacation-replacement-modal.wd-themed-modal .modal-header,
#calendar-task-modal.wd-themed-modal .modal-header,
#modify-task-modal.wd-themed-modal .modal-header,
#ceo-approval-modal.wd-themed-modal .modal-header,
#standard-job-modal.wd-themed-modal .modal-header,
#process-report-modal.wd-themed-modal .modal-header,
#vacation-replacement-modal .modal-header,
#calendar-task-modal .modal-header,
#modify-task-modal .modal-header,
#ceo-approval-modal .modal-header,
#standard-job-modal .modal-header,
#process-report-modal .modal-header {
    background:
        radial-gradient(circle at 92% 14%, rgba(56, 189, 248, 0.18), transparent 32%),
        linear-gradient(135deg, var(--wd-module-blue-a) 0%, var(--wd-module-blue-b) 58%, var(--wd-module-blue-c) 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(186, 230, 253, 0.26) !important;
    box-shadow: 0 12px 26px rgba(8, 47, 73, 0.28) !important;
}

#vacation-replacement-modal .modal-header h2,
#calendar-task-modal .modal-header h2,
#modify-task-modal .modal-header h2,
#ceo-approval-modal .modal-header h2,
#standard-job-modal .modal-header h2,
#standard-job-modal #standard-modal-title,
#process-report-modal .modal-header h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 2px 8px rgba(2, 32, 51, 0.48) !important;
}

#vacation-replacement-modal .modal-header h2::after,
#calendar-task-modal .modal-header h2::after,
#modify-task-modal .modal-header h2::after,
#ceo-approval-modal .modal-header h2::after,
#standard-job-modal .modal-header h2::after,
#process-report-modal .modal-header h2::after {
    background: linear-gradient(90deg, var(--wd-module-accent), rgba(255,255,255,0.58), transparent) !important;
}

#vacation-replacement-modal .modal-close-btn,
#calendar-task-modal .modal-close-btn,
#modify-task-modal .modal-close-btn,
#ceo-approval-modal .modal-close-btn,
#standard-job-modal .modal-close-btn,
#process-report-modal .modal-close-btn {
    background: rgba(240, 249, 255, 0.13) !important;
    border-color: rgba(240, 249, 255, 0.32) !important;
    color: #ffffff !important;
}

#vacation-replacement-modal .modal-close-btn:hover,
#calendar-task-modal .modal-close-btn:hover,
#modify-task-modal .modal-close-btn:hover,
#ceo-approval-modal .modal-close-btn:hover,
#standard-job-modal .modal-close-btn:hover,
#process-report-modal .modal-close-btn:hover {
    background: rgba(240, 249, 255, 0.22) !important;
}

/* WorkDesk mobile headers */
@media (max-width: 768px) {
    #workdesk-view #active-task-mobile-header,
    #workdesk-view .dayview-mobile-header-new {
        background: linear-gradient(135deg, var(--wd-module-blue-a), var(--wd-module-blue-c)) !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(186, 230, 253, 0.24) !important;
    }

    #workdesk-view #active-task-mobile-header h1,
    #workdesk-view .mobile-header-icon,
    #workdesk-view .dayview-mobile-icon-btn {
        color: #ffffff !important;
    }

    #workdesk-view .workdesk-navigation a.active {
        color: var(--wd-module-blue-c) !important;
        background: transparent !important;
        border-top-color: var(--wd-module-blue-c) !important;
        box-shadow: none !important;
    }
}

/* ========================================================================
   8.6.10 — WorkDesk Active Task contrast fix
   Fix unread/not-clicked Active Task tab titles and action buttons.
   UI-only. No Firebase/data/workflow logic changed.
   ======================================================================== */

#workdesk-view #wd-activetask #active-task-filters.report-tabs,
#wd-activetask #active-task-filters.report-tabs {
    background: rgba(226, 242, 252, 0.72) !important;
    border-bottom-color: rgba(8, 47, 73, 0.22) !important;
}

#workdesk-view #wd-activetask #active-task-filters.report-tabs button,
#wd-activetask #active-task-filters.report-tabs button {
    min-height: 42px !important;
    border: 1px solid rgba(8, 47, 73, 0.18) !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* Non-selected tabs without direct user action: clean light button + dark title. */
#workdesk-view #wd-activetask #active-task-filters.report-tabs button:not(.active):not(.blink-tab),
#wd-activetask #active-task-filters.report-tabs button:not(.active):not(.blink-tab) {
    --tab-color: #e8f4fb !important;
    --tab-text: #082f49 !important;
    color: #082f49 !important;
    background: linear-gradient(180deg, #ffffff 0%, #dff0fa 100%) !important;
    box-shadow: 0 8px 18px rgba(8, 47, 73, 0.10) !important;
}

/* Non-selected tabs with direct action keep their status color but use JS-calculated readable text. */
#workdesk-view #wd-activetask #active-task-filters.report-tabs button.blink-tab:not(.active),
#wd-activetask #active-task-filters.report-tabs button.blink-tab:not(.active) {
    color: var(--tab-text, #0f172a) !important;
    border-color: rgba(8, 47, 73, 0.26) !important;
    box-shadow: 0 10px 22px rgba(8, 47, 73, 0.16) !important;
}

#workdesk-view #wd-activetask #active-task-filters.report-tabs button.active,
#wd-activetask #active-task-filters.report-tabs button.active {
    background: linear-gradient(135deg, #06283d, #0b4e70) !important;
    color: #ffffff !important;
    border-color: rgba(186, 230, 253, 0.46) !important;
    box-shadow: 0 14px 30px rgba(8, 47, 73, 0.28) !important;
}

#workdesk-view #wd-activetask #active-task-filters.report-tabs button.active .notification-badge,
#wd-activetask #active-task-filters.report-tabs button.active .notification-badge {
    color: #ffffff !important;
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
}

#workdesk-view #wd-activetask .wd-row-action,
#wd-activetask .wd-row-action,
#active-task-mobile-view .m-btn-approve,
#active-task-mobile-view .m-btn-reject {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.26) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
}

#workdesk-view #wd-activetask .wd-action-process,
#wd-activetask .wd-action-process {
    background: linear-gradient(135deg, #075985, #06283d) !important;
}


/* ========================================================================
   8.6.11 — WorkDesk side navigation Active Task readability + pulse fix
   Fixes the unread Active Task item when nav-pulse-active is present.
   The previous WorkDesk theme used a stronger #workdesk-view selector that
   forced white text on the light alert tile. This override is intentionally
   more specific and placed at the end of the stylesheet.
   ======================================================================== */

@media (min-width: 769px) {
    #workdesk-view .workdesk-navigation a.nav-pulse-active,
    #workdesk-view .workdesk-footer-nav a.nav-pulse-active {
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
        color: #7c2d12 !important;
        border: 1px solid rgba(195, 80, 47, 0.38) !important;
        border-left: 4px solid #C3502F !important;
        box-shadow: 0 12px 28px rgba(195, 80, 47, 0.18) !important;
        text-shadow: none !important;
        font-weight: 950 !important;
        animation: heartbeat-nav 1.8s ease-in-out infinite !important;
    }

    #workdesk-view .workdesk-navigation a.nav-pulse-active i,
    #workdesk-view .workdesk-footer-nav a.nav-pulse-active i,
    #workdesk-view .workdesk-navigation a.nav-pulse-active span:not(.notification-badge),
    #workdesk-view .workdesk-footer-nav a.nav-pulse-active span:not(.notification-badge) {
        color: #7c2d12 !important;
        opacity: 1 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #7c2d12 !important;
    }

    #workdesk-view .workdesk-navigation a.nav-pulse-active:hover,
    #workdesk-view .workdesk-footer-nav a.nav-pulse-active:hover {
        background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
        color: #7c2d12 !important;
        transform: translateX(3px) !important;
        filter: none !important;
    }

    #workdesk-view .workdesk-navigation a.nav-pulse-active .notification-badge,
    #workdesk-view .workdesk-footer-nav a.nav-pulse-active .notification-badge {
        background: #C3502F !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.78) !important;
        box-shadow: 0 0 0 0 rgba(195, 80, 47, .50) !important;
        animation: ibaNavBadgePulse 1.45s ease-in-out infinite !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}


/* ========================================================================
   8.7.1 — Inventory Module Brown Theme Coordination
   Scope: Inventory module only.
   Purpose:
   - Use a softer professional brown Inventory identity after violet was too strong.
   - Override the WorkDesk blue theme only while body.inventory-mode is active.
   - Coordinate Inventory sidebar/navigation, page headers, mobile headers, and
     Inventory modal headers. No workflow/Firebase/data logic changed.
   ======================================================================== */
:root {
    --inv-module-accent: #d8a766;
    --inv-module-accent-strong: #9a6a3a;
    --inv-module-accent-soft: #f3dfc7;
    --inv-module-violet-a: #3a2619;
    --inv-module-violet-b: #5a3822;
    --inv-module-violet-c: #7a4b2b;
    --inv-module-violet-d: #9a6233;
    --inv-module-text-light: #fff7ed;
    --inv-module-text-dark: #3a2619;
}

/* Inventory uses the WorkDesk shell, so these selectors intentionally key off
   body.inventory-mode to avoid changing normal WorkDesk. */
body.inventory-mode #workdesk-view .workdesk-sidebar,
#inventory-view .workdesk-sidebar {
    background:
        radial-gradient(circle at 12% 0%, rgba(216, 167, 102, 0.18), transparent 34%),
        radial-gradient(circle at 95% 20%, rgba(154, 106, 58, 0.14), transparent 36%),
        linear-gradient(180deg, var(--inv-module-violet-a) 0%, var(--inv-module-violet-b) 50%, var(--inv-module-violet-c) 100%) !important;
    border-right: 1px solid rgba(243, 223, 199, 0.22) !important;
    box-shadow: 12px 0 34px rgba(58, 38, 25, 0.26) !important;
}

body.inventory-mode #workdesk-view .wd-user-profile,
#inventory-view .wd-user-profile {
    background: linear-gradient(145deg, rgba(154, 106, 58, 0.16), rgba(255, 255, 255, 0.07)) !important;
    border-color: rgba(243, 223, 199, 0.22) !important;
}

body.inventory-mode #workdesk-view .wd-user-avatar,
#inventory-view .wd-user-avatar {
    background: linear-gradient(135deg, #fff3e0, var(--inv-module-accent)) !important;
    color: var(--inv-module-text-dark) !important;
    border-color: rgba(255,255,255,0.56) !important;
    box-shadow: 0 12px 24px rgba(46, 16, 101, 0.34) !important;
}

body.inventory-mode #workdesk-view #wd-username,
body.inventory-mode #workdesk-view #wd-user-identifier,
body.inventory-mode #workdesk-view #workdesk-datetime,
body.inventory-mode #workdesk-view .sidebar-version-display,
#inventory-view #inv-username,
#inventory-view #inv-user-identifier,
#inventory-view .sidebar-version-display {
    color: rgba(255, 247, 237, 0.94) !important;
}

body.inventory-mode #workdesk-view .wd-back-button,
body.inventory-mode #workdesk-view .workdesk-navigation a,
body.inventory-mode #workdesk-view .workdesk-footer-nav a,
#inventory-view .wd-back-button,
#inventory-view .workdesk-navigation a,
#inventory-view .workdesk-footer-nav a {
    color: rgba(255, 247, 237, 0.90) !important;
    border-color: rgba(243, 223, 199, 0.14) !important;
}

body.inventory-mode #workdesk-view .wd-back-button,
body.inventory-mode #workdesk-view .workdesk-navigation a:hover,
body.inventory-mode #workdesk-view .workdesk-footer-nav a:hover,
#inventory-view .wd-back-button,
#inventory-view .workdesk-navigation a:hover,
#inventory-view .workdesk-footer-nav a:hover {
    background: rgba(154, 106, 58, 0.16) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view .workdesk-navigation a.active,
#inventory-view .workdesk-navigation a.active {
    background: linear-gradient(135deg, rgba(154, 106, 58, 0.34), rgba(122, 75, 43, 0.40)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(243, 223, 199, 0.38) !important;
    box-shadow: 0 12px 26px rgba(58, 38, 25, 0.30) !important;
}

body.inventory-mode .wd-nav-material {
    border-top-color: rgba(243, 223, 199, 0.18) !important;
}

/* Inventory unread/pulse nav item: readable brown alert instead of WorkDesk orange. */
@media (min-width: 769px) {
    body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active,
    body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active {
        background: linear-gradient(135deg, #fffaf3 0%, #fff3e0 100%) !important;
        color: #4b2f1e !important;
        border: 1px solid rgba(122, 75, 43, 0.32) !important;
        border-left: 4px solid #8a562e !important;
        box-shadow: 0 12px 28px rgba(122, 75, 43, 0.18) !important;
        text-shadow: none !important;
        font-weight: 950 !important;
        animation: heartbeat-nav 1.8s ease-in-out infinite !important;
    }

    body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active i,
    body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active i,
    body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active span:not(.notification-badge),
    body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active span:not(.notification-badge) {
        color: #4b2f1e !important;
        opacity: 1 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #4b2f1e !important;
    }

    body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active:hover,
    body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active:hover {
        background: linear-gradient(135deg, #fff3e0 0%, #f1dcc3 100%) !important;
        color: #4b2f1e !important;
        transform: translateX(3px) !important;
        filter: none !important;
    }

    body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active .notification-badge,
    body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active .notification-badge {
        background: #8a562e !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.78) !important;
        animation: ibaNavBadgePulse 1.45s ease-in-out infinite !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* Inventory page headers / hero blocks. */
body.inventory-mode #workdesk-view .wd-control-center-hero,
body.inventory-mode #workdesk-view .wd-page-hero,
body.inventory-mode #workdesk-view .wd-page-hero-active,
body.inventory-mode #workdesk-view .wd-page-hero-records,
body.inventory-mode #workdesk-view .wd-page-hero-records-inventory,
body.inventory-mode #workdesk-view .wd-page-hero-material,
#inventory-view .workdesk-section > h1 {
    --iba-hero-blue-a: var(--inv-module-violet-a);
    --iba-hero-blue-b: var(--inv-module-violet-c);
    background:
        radial-gradient(circle at 88% 16%, rgba(216, 167, 102, 0.18), transparent 32%),
        radial-gradient(circle at 12% 0%, rgba(154, 106, 58, 0.18), transparent 36%),
        linear-gradient(135deg, var(--inv-module-violet-a) 0%, var(--inv-module-violet-b) 52%, var(--inv-module-violet-c) 100%) !important;
    border: 1px solid rgba(243, 223, 199, 0.32) !important;
    box-shadow: 0 24px 58px rgba(58, 38, 25, 0.22) !important;
}

body.inventory-mode #workdesk-view .wd-page-hero-main h1,
body.inventory-mode #workdesk-view .wd-page-hero h1,
body.inventory-mode #workdesk-view .wd-control-center-hero h1,
body.inventory-mode #workdesk-view #wd-material-stock .wd-page-hero h1,
#inventory-view .workdesk-section > h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 3px 12px rgba(45, 27, 16, 0.50) !important;
}

body.inventory-mode #workdesk-view .wd-page-hero p,
body.inventory-mode #workdesk-view .wd-control-subtitle {
    color: rgba(255, 247, 237, 0.92) !important;
}

body.inventory-mode #workdesk-view .wd-page-eyebrow,
body.inventory-mode #workdesk-view .wd-control-eyebrow,
body.inventory-mode #workdesk-view #wd-material-stock .wd-page-eyebrow {
    background: rgba(154, 106, 58, 0.16) !important;
    border-color: rgba(243, 223, 199, 0.28) !important;
    color: var(--inv-module-accent-soft) !important;
}

body.inventory-mode #workdesk-view .wd-page-hero-main h1::after,
body.inventory-mode #workdesk-view .wd-page-hero h1::after {
    background: linear-gradient(90deg, var(--inv-module-accent), rgba(255,255,255,0.54), transparent) !important;
}

body.inventory-mode #workdesk-view .wd-page-hero-metric,
body.inventory-mode #workdesk-view #wd-active-dashboard-refresh {
    background: rgba(255, 250, 243, 0.97) !important;
    color: var(--inv-module-text-dark) !important;
    border-color: rgba(243, 223, 199, 0.70) !important;
}

body.inventory-mode #workdesk-view .workdesk-section {
    border-top: 4px solid rgba(154, 106, 58, 0.50) !important;
}

/* Inventory modal headers and key modal UI. These override older blue/violet/gold inventory modal styling. */
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(216, 167, 102, 0.22), transparent 30%),
        linear-gradient(135deg, var(--inv-module-violet-a) 0%, var(--inv-module-violet-b) 56%, var(--inv-module-violet-c) 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(243, 223, 199, 0.30) !important;
    box-shadow: 0 12px 26px rgba(58, 38, 25, 0.26) !important;
}

#transfer-job-modal .modal-header h2,
#transfer-approval-modal .modal-header h2,
#ms-new-material-modal .modal-header h2,
#ms-photo-browser-modal .modal-header h2,
#ms-add-stock-modal .modal-header h2,
#ms-report-modal .modal-header h2,
#ms-requestlist-modal .modal-header h2,
#transfer-job-modal-title,
#ms-modal-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 2px 8px rgba(45, 27, 16, 0.50) !important;
}

#transfer-job-modal .modal-header h2::after,
#transfer-approval-modal .modal-header h2::after,
#ms-new-material-modal .modal-header h2::after,
#ms-photo-browser-modal .modal-header h2::after,
#ms-add-stock-modal .modal-header h2::after,
#ms-report-modal .modal-header h2::after,
#ms-requestlist-modal .modal-header h2::after {
    background: linear-gradient(90deg, var(--inv-module-accent), rgba(255,255,255,0.58), transparent) !important;
}

#transfer-job-modal .modal-close-btn,
#transfer-approval-modal .modal-close-btn,
#ms-new-material-modal .modal-close-btn,
#ms-photo-browser-modal .modal-close-btn,
#ms-add-stock-modal .modal-close-btn,
#ms-report-modal .modal-close-btn,
#ms-requestlist-modal .modal-close-btn {
    background: rgba(255, 247, 237, 0.13) !important;
    border-color: rgba(255, 247, 237, 0.32) !important;
    color: #ffffff !important;
}

#transfer-job-modal .download-btn,
#transfer-approval-modal .download-btn,
#ms-new-material-modal .download-btn,
#ms-add-stock-modal .download-btn,
#ms-report-modal .download-btn,
#ms-requestlist-modal .download-btn,
#ms-photo-browser-modal .primary-btn,
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #tf-save-btn {
    background: linear-gradient(135deg, var(--inv-module-violet-b), var(--inv-module-violet-d)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(243, 223, 199, 0.28) !important;
    box-shadow: 0 10px 20px rgba(122, 75, 43, 0.16) !important;
}

#transfer-job-modal .secondary-btn,
#transfer-approval-modal .secondary-btn,
#ms-new-material-modal .secondary-btn,
#ms-photo-browser-modal .secondary-btn,
#ms-add-stock-modal .secondary-btn,
#ms-report-modal .secondary-btn,
#ms-requestlist-modal .secondary-btn {
    background: #ffffff !important;
    color: var(--inv-module-text-dark) !important;
    border: 1px solid rgba(122, 75, 43, 0.16) !important;
}

#transfer-job-modal label,
#transfer-approval-modal label,
#ms-new-material-modal label,
#ms-photo-browser-modal label,
#ms-add-stock-modal label,
#ms-report-modal label,
#ms-requestlist-modal label,
#transfer-job-modal strong,
#transfer-approval-modal strong,
#ms-new-material-modal strong,
#ms-photo-browser-modal strong,
#ms-add-stock-modal strong,
#ms-report-modal strong,
#ms-requestlist-modal strong {
    color: #4b2f1e !important;
}

#transfer-job-modal input:focus,
#transfer-job-modal select:focus,
#transfer-job-modal textarea:focus,
#transfer-approval-modal input:focus,
#transfer-approval-modal select:focus,
#transfer-approval-modal textarea:focus,
#ms-new-material-modal input:focus,
#ms-new-material-modal select:focus,
#ms-new-material-modal textarea:focus,
#ms-photo-browser-modal input:focus,
#ms-photo-browser-modal select:focus,
#ms-photo-browser-modal textarea:focus,
#ms-add-stock-modal input:focus,
#ms-add-stock-modal select:focus,
#ms-add-stock-modal textarea:focus,
#ms-requestlist-modal input:focus,
#ms-requestlist-modal select:focus,
#ms-requestlist-modal textarea:focus {
    border-color: rgba(154, 106, 58, 0.78) !important;
    box-shadow: 0 0 0 4px rgba(154, 106, 58, 0.14), 0 8px 18px rgba(58, 38, 25, 0.10) !important;
}

#transfer-job-modal thead,
#transfer-job-modal thead tr,
#ms-requestlist-modal thead,
#ms-requestlist-modal thead tr,
#ms-report-modal thead,
#ms-report-modal thead tr,
#tf-batch-table thead,
#tf-batch-table thead tr,
body.inventory-mode #workdesk-view #ms-table thead,
body.inventory-mode #workdesk-view #ms-table thead tr {
    background: var(--inv-module-violet-b) !important;
    color: #ffffff !important;
}

/* Mobile Inventory shell/header coordination. */
@media (max-width: 768px) {
    body.inventory-mode #workdesk-view #active-task-mobile-header,
    body.inventory-mode #workdesk-view .dayview-mobile-header-new,
    #inventory-view #active-task-mobile-header,
    #inventory-view .dayview-mobile-header-new {
        background: linear-gradient(135deg, var(--inv-module-violet-a), var(--inv-module-violet-c)) !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(243, 223, 199, 0.26) !important;
    }

    body.inventory-mode #workdesk-view #active-task-mobile-header h1,
    body.inventory-mode #workdesk-view .mobile-header-icon,
    body.inventory-mode #workdesk-view .dayview-mobile-icon-btn,
    #inventory-view #active-task-mobile-header h1,
    #inventory-view .mobile-header-icon,
    #inventory-view .dayview-mobile-icon-btn {
        color: #ffffff !important;
    }

    body.inventory-mode #workdesk-view .workdesk-navigation a.active,
    #inventory-view .workdesk-navigation a.active {
        color: var(--inv-module-violet-c) !important;
        background: transparent !important;
        border-top-color: var(--inv-module-violet-c) !important;
        box-shadow: none !important;
    }
}


/* ========================================================================
   8.7.1 — Inventory brown modal catch-all
   Purpose: make sure all Inventory modal headers/buttons follow the softer
   brown theme, including modal markup that sits outside the WorkDesk shell.
   ======================================================================== */
#ms-report-modal,
#ms-requestlist-modal,
#ms-new-material-modal,
#ms-photo-browser-modal,
#ms-add-stock-modal,
#transfer-job-modal,
#transfer-approval-modal {
    --inv-module-accent: #d8a766;
    --inv-module-accent-strong: #9a6a3a;
    --inv-module-accent-soft: #f3dfc7;
    --inv-module-violet-a: #3a2619;
    --inv-module-violet-b: #5a3822;
    --inv-module-violet-c: #7a4b2b;
    --inv-module-violet-d: #9a6233;
    --inv-module-text-light: #fff7ed;
    --inv-module-text-dark: #3a2619;
}

.inventory-themed-modal .modal-header,
#ms-report-modal > .modal-container > .modal-header,
#ms-requestlist-modal > .modal-container > .modal-header,
#ms-new-material-modal > .modal-container > .modal-header,
#ms-photo-browser-modal > .modal-container > .modal-header,
#ms-add-stock-modal > .modal-container > .modal-header,
#transfer-job-modal > .modal-container > .modal-header,
#transfer-approval-modal > .modal-container > .modal-header,
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(216, 167, 102, 0.20), transparent 30%),
        linear-gradient(135deg, #3a2619 0%, #5a3822 58%, #7a4b2b 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(243, 223, 199, 0.30) !important;
    box-shadow: 0 12px 26px rgba(58, 38, 25, 0.26) !important;
}

.inventory-themed-modal .modal-header *,
#ms-report-modal .modal-header *,
#ms-requestlist-modal .modal-header *,
#ms-new-material-modal .modal-header *,
#ms-photo-browser-modal .modal-header *,
#ms-add-stock-modal .modal-header *,
#transfer-job-modal .modal-header *,
#transfer-approval-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 2px 8px rgba(45, 27, 16, 0.50) !important;
}

.inventory-themed-modal .modal-close-btn,
#ms-report-modal .modal-close-btn,
#ms-requestlist-modal .modal-close-btn,
#ms-new-material-modal .modal-close-btn,
#ms-photo-browser-modal .modal-close-btn,
#ms-add-stock-modal .modal-close-btn,
#transfer-job-modal .modal-close-btn,
#transfer-approval-modal .modal-close-btn {
    background: rgba(255, 247, 237, 0.14) !important;
    color: #ffffff !important;
    border-color: rgba(255, 247, 237, 0.32) !important;
}

.inventory-themed-modal .download-btn,
.inventory-themed-modal .print-btn,
.inventory-themed-modal .primary-btn,
#ms-report-modal .download-btn,
#ms-report-modal .print-btn,
#ms-requestlist-modal .download-btn,
#ms-requestlist-modal .print-btn,
#ms-requestlist-modal #ms-requestlist-add-manual-btn,
#ms-new-material-modal .download-btn,
#ms-photo-browser-modal .primary-btn,
#ms-add-stock-modal .download-btn,
#transfer-job-modal .download-btn,
#transfer-approval-modal .download-btn,
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #tf-save-btn {
    background: linear-gradient(135deg, #5a3822, #8a562e) !important;
    color: #ffffff !important;
    border: 1px solid rgba(243, 223, 199, 0.28) !important;
    box-shadow: 0 10px 20px rgba(58, 38, 25, 0.16) !important;
}

.inventory-themed-modal .secondary-btn,
#ms-report-modal .secondary-btn,
#ms-requestlist-modal .secondary-btn,
#ms-new-material-modal .secondary-btn,
#ms-photo-browser-modal .secondary-btn,
#ms-add-stock-modal .secondary-btn,
#transfer-job-modal .secondary-btn,
#transfer-approval-modal .secondary-btn {
    background: #fffaf3 !important;
    color: #3a2619 !important;
    border: 1px solid rgba(122, 75, 43, 0.20) !important;
}

#transfer-job-modal label,
#transfer-approval-modal label,
#ms-new-material-modal label,
#ms-photo-browser-modal label,
#ms-add-stock-modal label,
#ms-report-modal label,
#ms-requestlist-modal label,
#transfer-job-modal strong,
#transfer-approval-modal strong,
#ms-new-material-modal strong,
#ms-photo-browser-modal strong,
#ms-add-stock-modal strong,
#ms-report-modal strong,
#ms-requestlist-modal strong {
    color: #4b2f1e !important;
}

#transfer-job-modal input:focus,
#transfer-job-modal select:focus,
#transfer-job-modal textarea:focus,
#transfer-approval-modal input:focus,
#transfer-approval-modal select:focus,
#transfer-approval-modal textarea:focus,
#ms-new-material-modal input:focus,
#ms-new-material-modal select:focus,
#ms-new-material-modal textarea:focus,
#ms-photo-browser-modal input:focus,
#ms-photo-browser-modal select:focus,
#ms-photo-browser-modal textarea:focus,
#ms-add-stock-modal input:focus,
#ms-add-stock-modal select:focus,
#ms-add-stock-modal textarea:focus,
#ms-report-modal input:focus,
#ms-report-modal select:focus,
#ms-report-modal textarea:focus,
#ms-requestlist-modal input:focus,
#ms-requestlist-modal select:focus,
#ms-requestlist-modal textarea:focus {
    border-color: rgba(154, 106, 58, 0.78) !important;
    box-shadow: 0 0 0 4px rgba(154, 106, 58, 0.14), 0 8px 18px rgba(58, 38, 25, 0.10) !important;
}

#transfer-job-modal thead,
#transfer-job-modal thead tr,
#ms-requestlist-modal thead,
#ms-requestlist-modal thead tr,
#ms-report-modal thead,
#ms-report-modal thead tr,
#tf-batch-table thead,
#tf-batch-table thead tr,
body.inventory-mode #workdesk-view #ms-table thead,
body.inventory-mode #workdesk-view #ms-table thead tr {
    background: #5a3822 !important;
    color: #ffffff !important;
}


/* ========================================================================
   8.7.2 — Inventory lighter brown + table/header contrast correction
   Scope: Inventory module only.
   Purpose:
   - Make the brown theme less heavy than 8.7.1.
   - Force Material Stock and Inventory modal table headers to use readable
     white text instead of inherited blue/gray text.
   - Strengthen Inventory modal header catch-all without touching WorkDesk or
     Invoice Management.
   ======================================================================== */
:root {
    --inv-module-accent: #e0b985;
    --inv-module-accent-strong: #9b6a3f;
    --inv-module-accent-soft: #f7ead9;
    --inv-module-violet-a: #5f3b24;
    --inv-module-violet-b: #755033;
    --inv-module-violet-c: #8b5e34;
    --inv-module-violet-d: #9b6a3f;
    --inv-module-text-light: #fffaf3;
    --inv-module-text-dark: #3f2718;
}

body.inventory-mode #workdesk-view .workdesk-sidebar,
#inventory-view .workdesk-sidebar {
    background:
        radial-gradient(circle at 12% 0%, rgba(224, 185, 133, 0.20), transparent 34%),
        radial-gradient(circle at 95% 20%, rgba(155, 106, 63, 0.16), transparent 36%),
        linear-gradient(180deg, #5f3b24 0%, #755033 50%, #8b5e34 100%) !important;
    border-right-color: rgba(247, 234, 217, 0.28) !important;
}

body.inventory-mode #workdesk-view .wd-control-center-hero,
body.inventory-mode #workdesk-view .wd-page-hero,
body.inventory-mode #workdesk-view .wd-page-hero-active,
body.inventory-mode #workdesk-view .wd-page-hero-records,
body.inventory-mode #workdesk-view .wd-page-hero-records-inventory,
body.inventory-mode #workdesk-view .wd-page-hero-material,
#inventory-view .workdesk-section > h1 {
    background:
        radial-gradient(circle at 88% 16%, rgba(224, 185, 133, 0.22), transparent 32%),
        radial-gradient(circle at 12% 0%, rgba(155, 106, 63, 0.18), transparent 36%),
        linear-gradient(135deg, #5f3b24 0%, #755033 55%, #8b5e34 100%) !important;
    border-color: rgba(247, 234, 217, 0.36) !important;
}

body.inventory-mode #workdesk-view .workdesk-navigation a.active,
#inventory-view .workdesk-navigation a.active {
    background: linear-gradient(135deg, rgba(139, 94, 52, 0.44), rgba(155, 106, 63, 0.50)) !important;
    color: #ffffff !important;
    border-color: rgba(247, 234, 217, 0.46) !important;
}

/* Inventory modal headers: lighter brown, readable white title and close icon. */
.inventory-themed-modal .modal-header,
#ms-report-modal > .modal-container > .modal-header,
#ms-requestlist-modal > .modal-container > .modal-header,
#ms-new-material-modal > .modal-container > .modal-header,
#ms-photo-browser-modal > .modal-container > .modal-header,
#ms-add-stock-modal > .modal-container > .modal-header,
#transfer-job-modal > .modal-container > .modal-header,
#transfer-approval-modal > .modal-container > .modal-header,
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(224, 185, 133, 0.24), transparent 30%),
        linear-gradient(135deg, #5f3b24 0%, #755033 58%, #8b5e34 100%) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(247, 234, 217, 0.38) !important;
}

.inventory-themed-modal .modal-header *,
#ms-report-modal .modal-header *,
#ms-requestlist-modal .modal-header *,
#ms-new-material-modal .modal-header *,
#ms-photo-browser-modal .modal-header *,
#ms-add-stock-modal .modal-header *,
#transfer-job-modal .modal-header *,
#transfer-approval-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 2px 8px rgba(45, 27, 16, 0.40) !important;
}

.inventory-themed-modal .download-btn,
.inventory-themed-modal .print-btn,
.inventory-themed-modal .primary-btn,
#ms-report-modal .download-btn,
#ms-report-modal .print-btn,
#ms-requestlist-modal .download-btn,
#ms-requestlist-modal .print-btn,
#ms-requestlist-modal #ms-requestlist-add-manual-btn,
#ms-new-material-modal .download-btn,
#ms-photo-browser-modal .primary-btn,
#ms-add-stock-modal .download-btn,
#transfer-job-modal .download-btn,
#transfer-approval-modal .download-btn,
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #tf-save-btn {
    background: linear-gradient(135deg, #755033, #9b6a3f) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(247, 234, 217, 0.34) !important;
}

/* Material Stock main table header: fix the blue/gray inherited text from older table styles. */
body.inventory-mode #workdesk-view #ms-table thead,
body.inventory-mode #workdesk-view #ms-table thead tr,
body.inventory-mode #workdesk-view #ms-table thead th,
body.inventory-mode #workdesk-view #ms-table thead td,
#inventory-view #ms-table thead,
#inventory-view #ms-table thead tr,
#inventory-view #ms-table thead th,
#inventory-view #ms-table thead td {
    background: #755033 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(247, 234, 217, 0.28) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.inventory-mode #workdesk-view #ms-table thead th,
#inventory-view #ms-table thead th {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
}

body.inventory-mode #workdesk-view #ms-table thead input[type="checkbox"],
#inventory-view #ms-table thead input[type="checkbox"] {
    accent-color: #9b6a3f !important;
}

/* Inventory modal / transaction table headers: same contrast rule as Material Stock. */
#transfer-job-modal thead,
#transfer-job-modal thead tr,
#transfer-job-modal thead th,
#transfer-job-modal thead td,
#transfer-approval-modal thead,
#transfer-approval-modal thead tr,
#transfer-approval-modal thead th,
#transfer-approval-modal thead td,
#ms-requestlist-modal thead,
#ms-requestlist-modal thead tr,
#ms-requestlist-modal thead th,
#ms-requestlist-modal thead td,
#ms-report-modal thead,
#ms-report-modal thead tr,
#ms-report-modal thead th,
#ms-report-modal thead td,
#tf-batch-table thead,
#tf-batch-table thead tr,
#tf-batch-table thead th,
#tf-batch-table thead td {
    background: #755033 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(247, 234, 217, 0.28) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

#transfer-job-modal thead th,
#transfer-approval-modal thead th,
#ms-requestlist-modal thead th,
#ms-report-modal thead th,
#tf-batch-table thead th {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
}


/* ========================================================================
   8.7.3 — Inventory #F54927 orange-red trial theme + contrast lock
   Scope: Inventory only.
   Notes:
   - Uses #F54927 as the module accent.
   - Darkens header/table backgrounds just enough so white text stays readable.
   - Keeps all Inventory modal/table header text forced to white.
   ======================================================================== */
:root {
    --inv-module-accent: #F54927;
    --inv-module-accent-strong: #c73518;
    --inv-module-accent-soft: #fff0ec;
    --inv-module-violet-a: #8f210f;
    --inv-module-violet-b: #b52a13;
    --inv-module-violet-c: #d63a1c;
    --inv-module-violet-d: #F54927;
    --inv-module-text-light: #ffffff;
    --inv-module-text-dark: #3b130b;
}

body.inventory-mode #workdesk-view .workdesk-sidebar,
#inventory-view .workdesk-sidebar {
    background:
        radial-gradient(circle at 12% 0%, rgba(245, 73, 39, 0.24), transparent 34%),
        radial-gradient(circle at 95% 20%, rgba(255, 240, 236, 0.12), transparent 36%),
        linear-gradient(180deg, #8f210f 0%, #b52a13 52%, #c73518 100%) !important;
    border-right-color: rgba(255, 240, 236, 0.30) !important;
}

body.inventory-mode #workdesk-view .workdesk-sidebar *,
#inventory-view .workdesk-sidebar * {
    text-shadow: none !important;
}

body.inventory-mode #workdesk-view .wd-control-center-hero,
body.inventory-mode #workdesk-view .wd-page-hero,
body.inventory-mode #workdesk-view .wd-page-hero-active,
body.inventory-mode #workdesk-view .wd-page-hero-records,
body.inventory-mode #workdesk-view .wd-page-hero-records-inventory,
body.inventory-mode #workdesk-view .wd-page-hero-material,
#inventory-view .workdesk-section > h1 {
    background:
        radial-gradient(circle at 88% 16%, rgba(245, 73, 39, 0.28), transparent 32%),
        radial-gradient(circle at 12% 0%, rgba(255, 240, 236, 0.14), transparent 36%),
        linear-gradient(135deg, #8f210f 0%, #b52a13 55%, #d63a1c 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 240, 236, 0.38) !important;
}

body.inventory-mode #workdesk-view .workdesk-navigation a.active,
#inventory-view .workdesk-navigation a.active {
    background: linear-gradient(135deg, rgba(245, 73, 39, 0.30), rgba(214, 58, 28, 0.48)) !important;
    color: #ffffff !important;
    border-color: rgba(255, 240, 236, 0.46) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 240, 236, 0.16), 0 10px 22px rgba(143, 33, 15, 0.22) !important;
}

body.inventory-mode #workdesk-view .workdesk-navigation a:not(.active),
#inventory-view .workdesk-navigation a:not(.active) {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.inventory-mode #workdesk-view .workdesk-navigation a:not(.active):hover,
#inventory-view .workdesk-navigation a:not(.active):hover {
    background: rgba(255, 240, 236, 0.12) !important;
    color: #ffffff !important;
}

/* Inventory modal headers: #F54927 accent, darker readable base. */
.inventory-themed-modal .modal-header,
#ms-report-modal > .modal-container > .modal-header,
#ms-requestlist-modal > .modal-container > .modal-header,
#ms-new-material-modal > .modal-container > .modal-header,
#ms-photo-browser-modal > .modal-container > .modal-header,
#ms-add-stock-modal > .modal-container > .modal-header,
#transfer-job-modal > .modal-container > .modal-header,
#transfer-approval-modal > .modal-container > .modal-header,
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(245, 73, 39, 0.34), transparent 30%),
        linear-gradient(135deg, #8f210f 0%, #b52a13 58%, #d63a1c 100%) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 240, 236, 0.40) !important;
    box-shadow: 0 12px 26px rgba(143, 33, 15, 0.24) !important;
}

.inventory-themed-modal .modal-header *,
#ms-report-modal .modal-header *,
#ms-requestlist-modal .modal-header *,
#ms-new-material-modal .modal-header *,
#ms-photo-browser-modal .modal-header *,
#ms-add-stock-modal .modal-header *,
#transfer-job-modal .modal-header *,
#transfer-approval-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 2px 8px rgba(59, 19, 11, 0.38) !important;
}

.inventory-themed-modal .modal-close-btn,
#ms-report-modal .modal-close-btn,
#ms-requestlist-modal .modal-close-btn,
#ms-new-material-modal .modal-close-btn,
#ms-photo-browser-modal .modal-close-btn,
#ms-add-stock-modal .modal-close-btn,
#transfer-job-modal .modal-close-btn,
#transfer-approval-modal .modal-close-btn {
    background: rgba(255, 240, 236, 0.16) !important;
    color: #ffffff !important;
    border-color: rgba(255, 240, 236, 0.36) !important;
}

.inventory-themed-modal .download-btn,
.inventory-themed-modal .print-btn,
.inventory-themed-modal .primary-btn,
#ms-report-modal .download-btn,
#ms-report-modal .print-btn,
#ms-requestlist-modal .download-btn,
#ms-requestlist-modal .print-btn,
#ms-requestlist-modal #ms-requestlist-add-manual-btn,
#ms-new-material-modal .download-btn,
#ms-photo-browser-modal .primary-btn,
#ms-add-stock-modal .download-btn,
#transfer-job-modal .download-btn,
#transfer-approval-modal .download-btn,
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #tf-save-btn {
    background: linear-gradient(135deg, #b52a13, #F54927) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 236, 0.36) !important;
    box-shadow: 0 10px 20px rgba(143, 33, 15, 0.18) !important;
}

.inventory-themed-modal .secondary-btn,
#ms-report-modal .secondary-btn,
#ms-requestlist-modal .secondary-btn,
#ms-new-material-modal .secondary-btn,
#ms-photo-browser-modal .secondary-btn,
#ms-add-stock-modal .secondary-btn,
#transfer-job-modal .secondary-btn,
#transfer-approval-modal .secondary-btn {
    background: #fff7f4 !important;
    color: #3b130b !important;
    -webkit-text-fill-color: #3b130b !important;
    border: 1px solid rgba(245, 73, 39, 0.24) !important;
}

#transfer-job-modal label,
#transfer-approval-modal label,
#ms-new-material-modal label,
#ms-photo-browser-modal label,
#ms-add-stock-modal label,
#ms-report-modal label,
#ms-requestlist-modal label,
#transfer-job-modal strong,
#transfer-approval-modal strong,
#ms-new-material-modal strong,
#ms-photo-browser-modal strong,
#ms-add-stock-modal strong,
#ms-report-modal strong,
#ms-requestlist-modal strong {
    color: #3b130b !important;
}

#transfer-job-modal input:focus,
#transfer-job-modal select:focus,
#transfer-job-modal textarea:focus,
#transfer-approval-modal input:focus,
#transfer-approval-modal select:focus,
#transfer-approval-modal textarea:focus,
#ms-new-material-modal input:focus,
#ms-new-material-modal select:focus,
#ms-new-material-modal textarea:focus,
#ms-photo-browser-modal input:focus,
#ms-photo-browser-modal select:focus,
#ms-photo-browser-modal textarea:focus,
#ms-add-stock-modal input:focus,
#ms-add-stock-modal select:focus,
#ms-add-stock-modal textarea:focus,
#ms-report-modal input:focus,
#ms-report-modal select:focus,
#ms-report-modal textarea:focus,
#ms-requestlist-modal input:focus,
#ms-requestlist-modal select:focus,
#ms-requestlist-modal textarea:focus {
    border-color: rgba(245, 73, 39, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(245, 73, 39, 0.14), 0 8px 18px rgba(143, 33, 15, 0.10) !important;
}

/* Inventory table headers: keep background darker than #F54927 for contrast. */
body.inventory-mode #workdesk-view #ms-table thead,
body.inventory-mode #workdesk-view #ms-table thead tr,
body.inventory-mode #workdesk-view #ms-table thead th,
body.inventory-mode #workdesk-view #ms-table thead td,
#inventory-view #ms-table thead,
#inventory-view #ms-table thead tr,
#inventory-view #ms-table thead th,
#inventory-view #ms-table thead td,
#transfer-job-modal thead,
#transfer-job-modal thead tr,
#transfer-job-modal thead th,
#transfer-job-modal thead td,
#transfer-approval-modal thead,
#transfer-approval-modal thead tr,
#transfer-approval-modal thead th,
#transfer-approval-modal thead td,
#ms-requestlist-modal thead,
#ms-requestlist-modal thead tr,
#ms-requestlist-modal thead th,
#ms-requestlist-modal thead td,
#ms-report-modal thead,
#ms-report-modal thead tr,
#ms-report-modal thead th,
#ms-report-modal thead td,
#tf-batch-table thead,
#tf-batch-table thead tr,
#tf-batch-table thead th,
#tf-batch-table thead td {
    background: #c73518 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 236, 0.30) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.inventory-mode #workdesk-view #ms-table thead th,
#inventory-view #ms-table thead th,
#transfer-job-modal thead th,
#transfer-approval-modal thead th,
#ms-requestlist-modal thead th,
#ms-report-modal thead th,
#tf-batch-table thead th {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
}

body.inventory-mode #workdesk-view #ms-table thead input[type="checkbox"],
#inventory-view #ms-table thead input[type="checkbox"] {
    accent-color: #F54927 !important;
}

@media (max-width: 768px) {
    body.inventory-mode #workdesk-view #active-task-mobile-header,
    body.inventory-mode #workdesk-view .dayview-mobile-header-new,
    #inventory-view #active-task-mobile-header,
    #inventory-view .dayview-mobile-header-new {
        background: linear-gradient(135deg, #8f210f, #d63a1c) !important;
        color: #ffffff !important;
        border-bottom-color: rgba(255, 240, 236, 0.36) !important;
    }

    body.inventory-mode #workdesk-view .workdesk-navigation a.active,
    #inventory-view .workdesk-navigation a.active {
        color: #F54927 !important;
        background: transparent !important;
        border-top-color: #F54927 !important;
        box-shadow: none !important;
    }
}

/* ========================================================================
   8.7.4 — Invoice #116045 Theme + Inventory #FF2E2E Theme
   Scope: UI only.
   Purpose:
   - Make Invoice Management use #116045.
   - Change Inventory from #F54927 to #FF2E2E.
   - Clean side menu card outlines: hidden at rest, visible on hover,
     and active/current menu item stays colored.
   ======================================================================== */
:root {
    --im-module-accent: #116045;
    --im-module-accent-dark: #073524;
    --im-module-accent-mid: #0b4b35;
    --im-module-accent-soft: #eaf8f1;
    --im-module-accent-line: #4fd29a;

    --inv-module-accent: #FF2E2E;
    --inv-module-accent-strong: #c91818;
    --inv-module-accent-soft: #fff0f0;
    --inv-module-violet-a: #8d1111;
    --inv-module-violet-b: #b91616;
    --inv-module-violet-c: #e02020;
    --inv-module-violet-d: #FF2E2E;
    --inv-module-text-light: #ffffff;
    --inv-module-text-dark: #3d0808;
}

/* ========================= INVOICE MANAGEMENT: #116045 ========================= */
#invoice-management-view {
    --iba-hero-blue-a: #073524;
    --iba-hero-blue-b: #116045;
    --iba-hero-gold: #dff7ec;
    --iba-hero-gold-soft: #d8fae9;
    --iba-premium-navy: #073524;
    --iba-premium-navy-2: #116045;
    --iba-premium-cyan: #1a8b63;
}

#invoice-management-view > .workdesk-sidebar {
    background:
        radial-gradient(circle at 12% 0%, rgba(79, 210, 154, 0.18), transparent 34%),
        radial-gradient(circle at 95% 18%, rgba(255,255,255,0.10), transparent 34%),
        linear-gradient(180deg, #073524 0%, #0b4b35 54%, #116045 100%) !important;
    border-right: 1px solid rgba(216, 250, 233, 0.18) !important;
    box-shadow: 12px 0 34px rgba(7, 53, 36, 0.22) !important;
}

#invoice-management-view .wd-user-profile {
    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)) !important;
    border-color: rgba(216, 250, 233, 0.18) !important;
}

#invoice-management-view .wd-user-avatar {
    background: linear-gradient(135deg, #eaf8f1, #9ff0c9) !important;
    color: #073524 !important;
    border-color: rgba(255,255,255,0.55) !important;
}

#invoice-management-view #im-username,
#invoice-management-view #im-user-identifier,
#invoice-management-view #im-datetime,
#invoice-management-view .sidebar-version-display {
    color: rgba(234, 248, 241, 0.94) !important;
    text-shadow: none !important;
}

/* Invoice side menu: no visible rounded card line until hover/active. */
#invoice-management-view .wd-back-button,
#invoice-management-view .workdesk-navigation a,
#invoice-management-view .workdesk-footer-nav a {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: 4px solid transparent !important;
    box-shadow: none !important;
    color: rgba(234, 248, 241, 0.90) !important;
    text-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease !important;
}

#invoice-management-view .wd-back-button:hover,
#invoice-management-view .workdesk-navigation a:hover,
#invoice-management-view .workdesk-footer-nav a:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(216, 250, 233, 0.30) !important;
    border-left-color: var(--im-module-accent-line) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(216, 250, 233, 0.08) !important;
    transform: translateX(3px) !important;
}

#invoice-management-view .workdesk-navigation a.active,
#invoice-management-view .workdesk-footer-nav a.active,
#invoice-management-view #im-nav a.active,
#invoice-management-view a[aria-current="page"] {
    background: linear-gradient(135deg, #f1fff7 0%, #d8fae9 100%) !important;
    color: #073524 !important;
    -webkit-text-fill-color: #073524 !important;
    border-color: rgba(216, 250, 233, 0.68) !important;
    border-left-color: #4fd29a !important;
    box-shadow: 0 12px 25px rgba(7, 53, 36, 0.22) !important;
    font-weight: 950 !important;
}

#invoice-management-view .workdesk-navigation a.active i,
#invoice-management-view .workdesk-footer-nav a.active i,
#invoice-management-view .workdesk-navigation a.active span:not(.notification-badge),
#invoice-management-view .workdesk-footer-nav a.active span:not(.notification-badge) {
    color: #073524 !important;
    -webkit-text-fill-color: #073524 !important;
}

/* Remove the old special pink Invoice Entry nav style so the whole IM menu is green-coordinated. */
#invoice-management-view #im-nav li a[data-section="im-invoice-entry"] {
    color: rgba(234, 248, 241, 0.90) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: 4px solid transparent !important;
    box-shadow: none !important;
}
#invoice-management-view #im-nav li a[data-section="im-invoice-entry"]:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.30) !important;
    border-left-color: #4fd29a !important;
    box-shadow: inset 0 0 0 1px rgba(216, 250, 233, 0.08) !important;
}
#invoice-management-view #im-nav li a[data-section="im-invoice-entry"].active {
    background: linear-gradient(135deg, #f1fff7 0%, #d8fae9 100%) !important;
    color: #073524 !important;
    -webkit-text-fill-color: #073524 !important;
    border-color: rgba(216, 250, 233, 0.68) !important;
    border-left-color: #4fd29a !important;
    box-shadow: 0 12px 25px rgba(7, 53, 36, 0.22) !important;
}

/* Invoice Active Task alert in the side menu stays readable and visible. */
#invoice-management-view .workdesk-navigation a.nav-pulse-active,
#invoice-management-view .workdesk-footer-nav a.nav-pulse-active {
    background: linear-gradient(135deg, #fffaf0 0%, #fff4d6 100%) !important;
    color: #5a2b0a !important;
    -webkit-text-fill-color: #5a2b0a !important;
    border: 1px solid rgba(245, 158, 11, 0.36) !important;
    border-left: 4px solid #f59e0b !important;
    box-shadow: 0 12px 25px rgba(245, 158, 11, 0.18) !important;
    animation: heartbeat-nav 1.8s ease-in-out infinite !important;
}
#invoice-management-view .workdesk-navigation a.nav-pulse-active i,
#invoice-management-view .workdesk-footer-nav a.nav-pulse-active i,
#invoice-management-view .workdesk-navigation a.nav-pulse-active span:not(.notification-badge),
#invoice-management-view .workdesk-footer-nav a.nav-pulse-active span:not(.notification-badge) {
    color: #5a2b0a !important;
    -webkit-text-fill-color: #5a2b0a !important;
    opacity: 1 !important;
}
#invoice-management-view .notification-badge {
    background: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Invoice page/header coordination. */
#invoice-management-view .im-standard-hero,
#invoice-management-view #im-dashboard .im-dashboard-hero,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero,
#invoice-management-view #im-batch-entry > .header-top,
#invoice-management-view #im-summary-note > div:first-of-type,
#invoice-management-view #im-reporting > .header {
    background:
        radial-gradient(circle at 90% 12%, rgba(79, 210, 154, 0.20), transparent 31%),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,0.10), transparent 34%),
        linear-gradient(135deg, #073524 0%, #116045 55%, #eaf8f1 56%, #f8fffb 100%) !important;
    border-color: rgba(17, 96, 69, 0.18) !important;
    box-shadow: 0 24px 58px rgba(7, 53, 36, 0.13) !important;
}
#invoice-management-view .im-standard-eyebrow,
#invoice-management-view #im-dashboard .im-dashboard-eyebrow,
#invoice-management-view #im-batch-entry > .header-top .header-title::before,
#invoice-management-view #im-summary-note > div:first-of-type > div:first-child::before,
#invoice-management-view #im-reporting > .header .header-title::before {
    color: #d8fae9 !important;
    border-color: rgba(216, 250, 233, 0.24) !important;
}
#invoice-management-view .im-standard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero h1,
#invoice-management-view #im-batch-entry > .header-top h1,
#invoice-management-view #im-summary-note > div:first-of-type h1,
#invoice-management-view #im-reporting > .header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(7, 53, 36, 0.38) !important;
}
#invoice-management-view .im-standard-hero p,
#invoice-management-view #im-reporting > .header .im-reporting-hero-subtitle,
#invoice-management-view #im-dashboard .im-dashboard-hero p,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero p {
    color: rgba(234, 248, 241, 0.92) !important;
}

/* Invoice Entry right Active Jobs side panel. */
#im-entry-sidebar {
    background:
        radial-gradient(circle at top right, rgba(79, 210, 154, 0.18), transparent 32%),
        linear-gradient(180deg, #073524 0%, #0b4b35 55%, #116045 100%) !important;
    border-left: 1px solid rgba(216, 250, 233, 0.18) !important;
    box-shadow: -16px 0 35px rgba(7, 53, 36, 0.22) !important;
}
#im-entry-sidebar .im-sidebar-title,
#active-jobs-sidebar-count-display {
    color: #d8fae9 !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(216, 250, 233, 0.16) !important;
}
#im-sidebar-search {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.22) !important;
}
#im-sidebar-search::placeholder { color: rgba(234, 248, 241, 0.72) !important; }
.im-sidebar-item {
    border: 1px solid transparent !important;
    border-left: 4px solid transparent !important;
    box-shadow: 0 8px 18px rgba(7, 53, 36, 0.10) !important;
}
.im-sidebar-item:hover {
    border-color: rgba(17, 96, 69, 0.22) !important;
    border-left-color: #116045 !important;
    box-shadow: 0 12px 25px rgba(7, 53, 36, 0.16) !important;
}
.im-sidebar-item.active,
.im-sidebar-item.selected {
    border-color: rgba(17, 96, 69, 0.34) !important;
    border-left-color: #116045 !important;
    background: #eaf8f1 !important;
}
.im-compact-po,
.im-sidebar-po { color: #073524 !important; }
.im-compact-amount { color: #116045 !important; }
.im-compact-status { background: #d8fae9 !important; color: #073524 !important; }

/* Invoice Management modals and tables. */
#im-invoice-entry-modal .modal-header,
#im-mobile-search-modal .modal-header,
#im-batch-search-modal .modal-header,
#im-attention-picker-modal .modal-header,
#im-add-payment-modal .modal-header,
#im-manual-po-modal .modal-header,
#im-finance-report-modal .modal-header,
#im-invoice-print-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(79, 210, 154, 0.25), transparent 30%),
        linear-gradient(135deg, #073524 0%, #0b4b35 56%, #116045 100%) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(216, 250, 233, 0.28) !important;
}
#im-invoice-entry-modal .modal-header *,
#im-mobile-search-modal .modal-header *,
#im-batch-search-modal .modal-header *,
#im-attention-picker-modal .modal-header *,
#im-add-payment-modal .modal-header *,
#im-manual-po-modal .modal-header *,
#im-finance-report-modal .modal-header *,
#im-invoice-print-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
#im-invoice-entry-modal .modal-close-btn,
#im-mobile-search-modal .modal-close-btn,
#im-batch-search-modal .modal-close-btn,
#im-attention-picker-modal .modal-close-btn,
#im-add-payment-modal .modal-close-btn,
#im-manual-po-modal .modal-close-btn,
#im-finance-report-modal .modal-close-btn {
    background: rgba(255,255,255,0.14) !important;
    color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.28) !important;
}
#invoice-management-view table thead,
#invoice-management-view table thead tr,
#invoice-management-view table thead th,
#im-invoice-entry-modal table thead,
#im-invoice-entry-modal table thead tr,
#im-invoice-entry-modal table thead th,
#im-batch-search-modal table thead,
#im-batch-search-modal table thead tr,
#im-batch-search-modal table thead th,
#im-add-payment-modal table thead,
#im-add-payment-modal table thead tr,
#im-add-payment-modal table thead th,
#im-finance-report-modal table thead,
#im-finance-report-modal table thead tr,
#im-finance-report-modal table thead th {
    background: #0b4b35 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.20) !important;
}
#invoice-management-view .download-btn,
#invoice-management-view .primary-btn,
#im-invoice-entry-modal .download-btn,
#im-batch-search-modal .download-btn,
#im-attention-picker-modal .download-btn,
#im-add-payment-modal .download-btn,
#im-manual-po-modal .download-btn,
#im-finance-report-modal .download-btn {
    background: linear-gradient(135deg, #0b4b35, #116045) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.24) !important;
}
#invoice-management-view input:focus,
#invoice-management-view select:focus,
#invoice-management-view textarea:focus,
#im-invoice-entry-modal input:focus,
#im-invoice-entry-modal select:focus,
#im-invoice-entry-modal textarea:focus,
#im-mobile-search-modal input:focus,
#im-mobile-search-modal select:focus,
#im-mobile-search-modal textarea:focus,
#im-batch-search-modal input:focus,
#im-batch-search-modal select:focus,
#im-batch-search-modal textarea:focus,
#im-add-payment-modal input:focus,
#im-add-payment-modal select:focus,
#im-add-payment-modal textarea:focus,
#im-finance-report-modal input:focus,
#im-finance-report-modal select:focus,
#im-finance-report-modal textarea:focus {
    border-color: rgba(17, 96, 69, 0.76) !important;
    box-shadow: 0 0 0 4px rgba(17, 96, 69, 0.13) !important;
}

@media (max-width: 768px) {
    #invoice-management-view #active-task-mobile-header,
    #invoice-management-view .dayview-mobile-header-new,
    #invoice-management-view .mobile-app-header {
        background: linear-gradient(135deg, #073524, #116045) !important;
        color: #ffffff !important;
    }
}

/* ============================= INVENTORY: #FF2E2E ============================= */
body.inventory-mode #workdesk-view .workdesk-sidebar,
#inventory-view .workdesk-sidebar {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 46, 46, 0.23), transparent 34%),
        radial-gradient(circle at 95% 20%, rgba(255,255,255,0.12), transparent 36%),
        linear-gradient(180deg, #8d1111 0%, #b91616 52%, #e02020 100%) !important;
    border-right-color: rgba(255, 240, 240, 0.30) !important;
    box-shadow: 12px 0 34px rgba(141, 17, 17, 0.24) !important;
}

/* Inventory side menu: hidden outline at rest, red outline on hover, active item stays visible. */
body.inventory-mode #workdesk-view .wd-back-button,
body.inventory-mode #workdesk-view .workdesk-navigation a,
body.inventory-mode #workdesk-view .workdesk-footer-nav a,
#inventory-view .wd-back-button,
#inventory-view .workdesk-navigation a,
#inventory-view .workdesk-footer-nav a {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: 4px solid transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.92) !important;
    text-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease !important;
}
body.inventory-mode #workdesk-view .wd-back-button:hover,
body.inventory-mode #workdesk-view .workdesk-navigation a:hover,
body.inventory-mode #workdesk-view .workdesk-footer-nav a:hover,
#inventory-view .wd-back-button:hover,
#inventory-view .workdesk-navigation a:hover,
#inventory-view .workdesk-footer-nav a:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255, 240, 240, 0.32) !important;
    border-left-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
    transform: translateX(3px) !important;
}
body.inventory-mode #workdesk-view .workdesk-navigation a.active,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.active,
#inventory-view .workdesk-navigation a.active,
#inventory-view .workdesk-footer-nav a.active {
    background: linear-gradient(135deg, #fff7f7 0%, #ffe2e2 100%) !important;
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    border-color: rgba(255, 240, 240, 0.70) !important;
    border-left-color: #FF2E2E !important;
    box-shadow: 0 12px 25px rgba(141, 17, 17, 0.24) !important;
    font-weight: 950 !important;
}
body.inventory-mode #workdesk-view .workdesk-navigation a.active i,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.active i,
body.inventory-mode #workdesk-view .workdesk-navigation a.active span:not(.notification-badge),
body.inventory-mode #workdesk-view .workdesk-footer-nav a.active span:not(.notification-badge),
#inventory-view .workdesk-navigation a.active i,
#inventory-view .workdesk-footer-nav a.active i,
#inventory-view .workdesk-navigation a.active span:not(.notification-badge),
#inventory-view .workdesk-footer-nav a.active span:not(.notification-badge) {
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
}

/* Inventory pulse/alert remains readable. */
body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active {
    background: linear-gradient(135deg, #fff7f7 0%, #ffe2e2 100%) !important;
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    border: 1px solid rgba(255, 46, 46, 0.34) !important;
    border-left: 4px solid #FF2E2E !important;
    box-shadow: 0 12px 25px rgba(141, 17, 17, 0.18) !important;
    animation: heartbeat-nav 1.8s ease-in-out infinite !important;
}
body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active i,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active i,
body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active span:not(.notification-badge),
body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active span:not(.notification-badge) {
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    opacity: 1 !important;
}

body.inventory-mode #workdesk-view .wd-control-center-hero,
body.inventory-mode #workdesk-view .wd-page-hero,
body.inventory-mode #workdesk-view .wd-page-hero-active,
body.inventory-mode #workdesk-view .wd-page-hero-records,
body.inventory-mode #workdesk-view .wd-page-hero-records-inventory,
body.inventory-mode #workdesk-view .wd-page-hero-material,
#inventory-view .workdesk-section > h1 {
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 46, 46, 0.28), transparent 32%),
        radial-gradient(circle at 12% 0%, rgba(255,255,255,0.14), transparent 36%),
        linear-gradient(135deg, #8d1111 0%, #b91616 55%, #e02020 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 240, 240, 0.38) !important;
    box-shadow: 0 24px 58px rgba(141, 17, 17, 0.20) !important;
}
body.inventory-mode #workdesk-view .wd-page-hero-main h1,
body.inventory-mode #workdesk-view .wd-page-hero h1,
body.inventory-mode #workdesk-view .wd-control-center-hero h1,
body.inventory-mode #workdesk-view #wd-material-stock .wd-page-hero h1,
#inventory-view .workdesk-section > h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(61, 8, 8, 0.38) !important;
}
body.inventory-mode #workdesk-view .wd-page-eyebrow,
body.inventory-mode #workdesk-view .wd-control-eyebrow,
body.inventory-mode #workdesk-view #wd-material-stock .wd-page-eyebrow {
    color: #ffe2e2 !important;
    border-color: rgba(255, 240, 240, 0.28) !important;
}

/* Inventory modal headers/buttons/tables in #FF2E2E with safe contrast. */
.inventory-themed-modal .modal-header,
#ms-report-modal > .modal-container > .modal-header,
#ms-requestlist-modal > .modal-container > .modal-header,
#ms-new-material-modal > .modal-container > .modal-header,
#ms-photo-browser-modal > .modal-container > .modal-header,
#ms-add-stock-modal > .modal-container > .modal-header,
#transfer-job-modal > .modal-container > .modal-header,
#transfer-approval-modal > .modal-container > .modal-header,
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 46, 46, 0.34), transparent 30%),
        linear-gradient(135deg, #8d1111 0%, #b91616 58%, #e02020 100%) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 240, 240, 0.40) !important;
    box-shadow: 0 12px 26px rgba(141, 17, 17, 0.24) !important;
}
.inventory-themed-modal .modal-header *,
#ms-report-modal .modal-header *,
#ms-requestlist-modal .modal-header *,
#ms-new-material-modal .modal-header *,
#ms-photo-browser-modal .modal-header *,
#ms-add-stock-modal .modal-header *,
#transfer-job-modal .modal-header *,
#transfer-approval-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
.inventory-themed-modal .download-btn,
.inventory-themed-modal .print-btn,
.inventory-themed-modal .primary-btn,
#ms-report-modal .download-btn,
#ms-report-modal .print-btn,
#ms-requestlist-modal .download-btn,
#ms-requestlist-modal .print-btn,
#ms-requestlist-modal #ms-requestlist-add-manual-btn,
#ms-new-material-modal .download-btn,
#ms-photo-browser-modal .primary-btn,
#ms-add-stock-modal .download-btn,
#transfer-job-modal .download-btn,
#transfer-approval-modal .download-btn,
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #tf-save-btn {
    background: linear-gradient(135deg, #b91616, #FF2E2E) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 240, 0.36) !important;
    box-shadow: 0 10px 20px rgba(141, 17, 17, 0.18) !important;
}
.inventory-themed-modal .secondary-btn,
#ms-report-modal .secondary-btn,
#ms-requestlist-modal .secondary-btn,
#ms-new-material-modal .secondary-btn,
#ms-photo-browser-modal .secondary-btn,
#ms-add-stock-modal .secondary-btn,
#transfer-job-modal .secondary-btn,
#transfer-approval-modal .secondary-btn {
    background: #fff7f7 !important;
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    border: 1px solid rgba(255, 46, 46, 0.24) !important;
}
body.inventory-mode #workdesk-view #ms-table thead,
body.inventory-mode #workdesk-view #ms-table thead tr,
body.inventory-mode #workdesk-view #ms-table thead th,
body.inventory-mode #workdesk-view #ms-table thead td,
#inventory-view #ms-table thead,
#inventory-view #ms-table thead tr,
#inventory-view #ms-table thead th,
#inventory-view #ms-table thead td,
#transfer-job-modal thead,
#transfer-job-modal thead tr,
#transfer-job-modal thead th,
#transfer-job-modal thead td,
#transfer-approval-modal thead,
#transfer-approval-modal thead tr,
#transfer-approval-modal thead th,
#transfer-approval-modal thead td,
#ms-requestlist-modal thead,
#ms-requestlist-modal thead tr,
#ms-requestlist-modal thead th,
#ms-requestlist-modal thead td,
#ms-report-modal thead,
#ms-report-modal thead tr,
#ms-report-modal thead th,
#ms-report-modal thead td,
#tf-batch-table thead,
#tf-batch-table thead tr,
#tf-batch-table thead th,
#tf-batch-table thead td {
    background: #b91616 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 240, 0.30) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
body.inventory-mode #workdesk-view #ms-table thead input[type="checkbox"],
#inventory-view #ms-table thead input[type="checkbox"] {
    accent-color: #FF2E2E !important;
}
@media (max-width: 768px) {
    body.inventory-mode #workdesk-view #active-task-mobile-header,
    body.inventory-mode #workdesk-view .dayview-mobile-header-new,
    #inventory-view #active-task-mobile-header,
    #inventory-view .dayview-mobile-header-new {
        background: linear-gradient(135deg, #8d1111, #FF2E2E) !important;
        color: #ffffff !important;
        border-bottom-color: rgba(255, 240, 240, 0.36) !important;
    }
    body.inventory-mode #workdesk-view .workdesk-navigation a.active,
    body.inventory-mode #workdesk-view .workdesk-footer-nav a.active,
    #inventory-view .workdesk-navigation a.active,
    #inventory-view .workdesk-footer-nav a.active {
        color: #FF2E2E !important;
        -webkit-text-fill-color: #FF2E2E !important;
        background: transparent !important;
        border-top-color: #FF2E2E !important;
        border-left-color: transparent !important;
        box-shadow: none !important;
    }
}


/* ========================================================================
   8.7.5 — WorkDesk side menu hover/active coordination
   Scope: WorkDesk only.
   Purpose:
   - Match the new Invoice/Inventory sidebar behavior.
   - Normal menu items have no visible rounded card outline.
   - Hover shows the rounded card/border using WorkDesk blue.
   - Current/active menu item stays visibly colored for location awareness.
   - Active Task pulse remains readable and blinking.
   ======================================================================== */
body:not(.inventory-mode) #workdesk-view {
    --wd-menu-accent: #38bdf8;
    --wd-menu-accent-strong: #0ea5e9;
    --wd-menu-soft: #e0f2fe;
    --wd-menu-soft-2: #bae6fd;
    --wd-menu-dark: #082f49;
    --wd-menu-dark-2: #075985;
}

/* WorkDesk side menu: hidden card line at rest. */
body:not(.inventory-mode) #workdesk-view .wd-back-button,
body:not(.inventory-mode) #workdesk-view .workdesk-navigation a,
body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a,
body:not(.inventory-mode) #workdesk-view #wd-sidebar-add-job-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: 4px solid transparent !important;
    box-shadow: none !important;
    color: rgba(240, 249, 255, 0.90) !important;
    -webkit-text-fill-color: rgba(240, 249, 255, 0.90) !important;
    text-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease !important;
}

/* WorkDesk side menu: card line appears on hover. */
body:not(.inventory-mode) #workdesk-view .wd-back-button:hover,
body:not(.inventory-mode) #workdesk-view .workdesk-navigation a:hover,
body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a:hover,
body:not(.inventory-mode) #workdesk-view #wd-sidebar-add-job-btn:hover {
    background: rgba(255,255,255,0.11) !important;
    border-color: rgba(186, 230, 253, 0.34) !important;
    border-left-color: var(--wd-menu-accent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.10) !important;
    transform: translateX(3px) !important;
}

/* WorkDesk current/active side menu item stays colored. */
body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.active,
body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.active,
body:not(.inventory-mode) #workdesk-view a[aria-current="page"] {
    background: linear-gradient(135deg, var(--wd-menu-soft) 0%, var(--wd-menu-soft-2) 100%) !important;
    color: var(--wd-menu-dark) !important;
    -webkit-text-fill-color: var(--wd-menu-dark) !important;
    border-color: rgba(186, 230, 253, 0.68) !important;
    border-left-color: var(--wd-menu-accent-strong) !important;
    box-shadow: 0 12px 25px rgba(8, 47, 73, 0.24) !important;
    font-weight: 950 !important;
}

body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.active i,
body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.active i,
body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.active span:not(.notification-badge),
body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.active span:not(.notification-badge) {
    color: var(--wd-menu-dark) !important;
    -webkit-text-fill-color: var(--wd-menu-dark) !important;
    opacity: 1 !important;
}

/* Keep Add New Job readable but no permanent visible outline. */
body:not(.inventory-mode) #workdesk-view #wd-sidebar-add-job-btn {
    font-weight: 950 !important;
}
body:not(.inventory-mode) #workdesk-view #wd-sidebar-add-job-btn i {
    color: var(--wd-menu-accent) !important;
    -webkit-text-fill-color: var(--wd-menu-accent) !important;
}
body:not(.inventory-mode) #workdesk-view #wd-sidebar-add-job-btn:hover i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* WorkDesk Active Task alert takes priority over normal active/hover rules. */
@media (min-width: 769px) {
    body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.nav-pulse-active,
    body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.nav-pulse-active {
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
        color: #7c2d12 !important;
        -webkit-text-fill-color: #7c2d12 !important;
        border: 1px solid rgba(195, 80, 47, 0.38) !important;
        border-left: 4px solid #C3502F !important;
        box-shadow: 0 12px 28px rgba(195, 80, 47, 0.18) !important;
        text-shadow: none !important;
        font-weight: 950 !important;
        animation: heartbeat-nav 1.8s ease-in-out infinite !important;
    }
    body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.nav-pulse-active i,
    body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.nav-pulse-active i,
    body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.nav-pulse-active span:not(.notification-badge),
    body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.nav-pulse-active span:not(.notification-badge) {
        color: #7c2d12 !important;
        -webkit-text-fill-color: #7c2d12 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }
    body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.nav-pulse-active:hover,
    body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.nav-pulse-active:hover {
        background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
        color: #7c2d12 !important;
        -webkit-text-fill-color: #7c2d12 !important;
        transform: translateX(3px) !important;
        filter: none !important;
    }
    body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.nav-pulse-active .notification-badge,
    body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.nav-pulse-active .notification-badge {
        background: #C3502F !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.78) !important;
        box-shadow: 0 0 0 0 rgba(195, 80, 47, .50) !important;
        animation: ibaNavBadgePulse 1.45s ease-in-out infinite !important;
        text-shadow: none !important;
    }
}

@media (max-width: 768px) {
    body:not(.inventory-mode) #workdesk-view .workdesk-navigation a.active,
    body:not(.inventory-mode) #workdesk-view .workdesk-footer-nav a.active {
        color: var(--wd-menu-dark-2) !important;
        -webkit-text-fill-color: var(--wd-menu-dark-2) !important;
        background: transparent !important;
        border-top-color: var(--wd-menu-dark-2) !important;
        border-left-color: transparent !important;
        box-shadow: none !important;
    }
}


/* ========================================================================
   8.7.6 — Invoice navy cleanup + Welcome panel cleanup
   Scope: UI only.
   Purpose:
   - Remove remaining Invoice Management navy/teal traces and align to #116045.
   - Keep Invoice side-menu hover/active behavior from 8.7.4.
   - Remove rounded card/pill look from Welcome time and daily quote.
   - Center Today/date/time block.
   ======================================================================== */
#invoice-management-view {
    --primary-blue: #116045 !important;
    --iba-base-blue: #116045 !important;
    --iba-base-blue-dark: #073524 !important;
    --iba-base-blue-light: #0b4b35 !important;
    --iba-secondary-teal: #116045 !important;
    --invoice2-blue: #116045 !important;
}

/* Invoice remaining navy/blue surface cleanup */
#invoice-management-view .workdesk-section h1:not(.im-dashboard-hero h1):not(.im-standard-hero h1),
#invoice-management-view .header-title,
#invoice-management-view .header-title h1,
#invoice-management-view #im-batch-entry h1,
#invoice-management-view #im-summary-note h1,
#invoice-management-view .im-page-title,
#invoice-management-view .im-section-title,
#invoice-management-view .im-form-title,
#invoice-management-view .im-compact-po,
#invoice-management-view .im-sidebar-po,
#invoice-management-view .m-card-val,
#invoice-management-view label,
#invoice-management-view .form-group label,
#invoice-management-view .po-compact-grid label,
#invoice-management-view #im-batch-global-controls label,
#invoice-management-view #active-jobs-sidebar-count-display,
#invoice-management-view .im-sidebar-title {
    color: #116045 !important;
    -webkit-text-fill-color: #116045 !important;
}

/* Do not recolor text that sits inside dark green hero/sidebar/header areas. */
#invoice-management-view .im-standard-hero *,
#invoice-management-view #im-dashboard .im-dashboard-hero *,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero *,
#invoice-management-view > .workdesk-sidebar *,
#im-invoice-entry-modal .modal-header *,
#im-mobile-search-modal .modal-header *,
#im-batch-search-modal .modal-header *,
#im-attention-picker-modal .modal-header *,
#im-add-payment-modal .modal-header *,
#im-manual-po-modal .modal-header *,
#im-finance-report-modal .modal-header *,
#im-invoice-print-modal .modal-header * {
    -webkit-text-fill-color: inherit !important;
}

#invoice-management-view #im-po-search-button,
#invoice-management-view #im-open-invoice-form-btn,
#invoice-management-view #im-batch-add-po-button,
#invoice-management-view #im-batch-save-button,
#invoice-management-view #im-batch-modal-search-btn,
#invoice-management-view #im-batch-modal-add-selected-btn,
#invoice-management-view #im-payment-modal-search-btn,
#invoice-management-view #im-payment-modal-add-selected-btn,
#invoice-management-view #im-manual-po-confirm-btn,
#invoice-management-view #summary-note-generate-btn,
#invoice-management-view #im-add-invoice-button,
#invoice-management-view #im-update-invoice-button,
#invoice-management-view .action-btn,
#invoice-management-view .primary-btn,
#invoice-management-view .download-btn,
#invoice-management-view .invoice-pdf-btn,
#invoice-management-view .srv-pdf-btn,
#im-invoice-entry-modal .action-btn,
#im-invoice-entry-modal .primary-btn,
#im-invoice-entry-modal .download-btn,
#im-invoice-entry-modal #im-add-invoice-button,
#im-invoice-entry-modal #im-update-invoice-button,
#im-batch-search-modal .download-btn,
#im-attention-picker-modal .download-btn,
#im-add-payment-modal .download-btn,
#im-manual-po-modal .download-btn,
#im-finance-report-modal .download-btn,
#im-invoice-print-modal .download-btn {
    background: linear-gradient(135deg, #0b4b35, #116045) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.26) !important;
    box-shadow: 0 10px 20px rgba(7, 53, 36, 0.16) !important;
}

#invoice-management-view button:hover,
#im-invoice-entry-modal button:hover,
#im-batch-search-modal button:hover,
#im-attention-picker-modal button:hover,
#im-add-payment-modal button:hover,
#im-manual-po-modal button:hover,
#im-finance-report-modal button:hover,
#im-invoice-print-modal button:hover {
    filter: brightness(1.04) !important;
}

/* Small invoice modal navigation controls that had inline navy/teal. */
#im-invoice-entry-modal #im-nav-prev,
#im-invoice-entry-modal #im-nav-next {
    background: #f8fffb !important;
    color: #116045 !important;
    -webkit-text-fill-color: #116045 !important;
    border: 1px solid rgba(17, 96, 69, 0.26) !important;
    box-shadow: none !important;
}
#im-invoice-entry-modal #im-nav-counter {
    background: #eaf8f1 !important;
    color: #116045 !important;
    -webkit-text-fill-color: #116045 !important;
    border: 1px solid rgba(17, 96, 69, 0.16) !important;
}

/* Invoice compact PO panels and inline detail boxes. */
#invoice-management-view .im-po-details-compact,
#invoice-management-view .po-compact-grid,
#invoice-management-view .im-sidebar-item.active,
#invoice-management-view .im-sidebar-item.selected,
#invoice-management-view .im-compact-status,
#invoice-management-view .icon-wrapper,
#im-invoice-entry-modal .icon-wrapper {
    background: #eaf8f1 !important;
    color: #116045 !important;
    -webkit-text-fill-color: #116045 !important;
    border-color: rgba(17, 96, 69, 0.20) !important;
}
#invoice-management-view .im-po-record,
#invoice-management-view .im-compact-amount,
#invoice-management-view .amount-value,
#invoice-management-view .balance-row,
#invoice-management-view .payment-amount,
#invoice-management-view .history-duration {
    color: #116045 !important;
    -webkit-text-fill-color: #116045 !important;
}

/* Invoice forms/table headers and sticky batch-entry columns. */
#invoice-management-view table thead,
#invoice-management-view table thead tr,
#invoice-management-view table thead th,
#invoice-management-view #im-batch-entry-table th:nth-child(-n+4),
#invoice-management-view #im-batch-entry-table thead th,
#invoice-management-view .nested-invoice-table thead th,
#im-invoice-entry-modal table thead,
#im-invoice-entry-modal table thead tr,
#im-invoice-entry-modal table thead th,
#im-batch-search-modal table thead,
#im-batch-search-modal table thead tr,
#im-batch-search-modal table thead th,
#im-add-payment-modal table thead,
#im-add-payment-modal table thead tr,
#im-add-payment-modal table thead th,
#im-finance-report-modal table thead,
#im-finance-report-modal table thead tr,
#im-finance-report-modal table thead th,
#history-table thead,
#history-table thead tr,
#history-table thead th {
    background: #0b4b35 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.24) !important;
}
#invoice-management-view #im-batch-entry-table th:nth-child(4),
#invoice-management-view #im-batch-entry-table td:nth-child(4) {
    border-right-color: #116045 !important;
}

#invoice-management-view input:focus,
#invoice-management-view select:focus,
#invoice-management-view textarea:focus,
#invoice-management-view .choices.is-focused .choices__inner,
#im-invoice-entry-modal input:focus,
#im-invoice-entry-modal select:focus,
#im-invoice-entry-modal textarea:focus,
#im-invoice-entry-modal .choices.is-focused .choices__inner,
#im-batch-search-modal input:focus,
#im-batch-search-modal select:focus,
#im-batch-search-modal textarea:focus,
#im-add-payment-modal input:focus,
#im-add-payment-modal select:focus,
#im-add-payment-modal textarea:focus {
    border-color: #116045 !important;
    box-shadow: 0 0 0 4px rgba(17, 96, 69, 0.13) !important;
}
#invoice-management-view .choices__list--dropdown .choices__item--selectable.is-highlighted,
#im-invoice-entry-modal .choices__list--dropdown .choices__item--selectable.is-highlighted,
#im-batch-search-modal .choices__list--dropdown .choices__item--selectable.is-highlighted,
#im-add-payment-modal .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #eaf8f1 !important;
    color: #116045 !important;
    -webkit-text-fill-color: #116045 !important;
}

/* Invoice Summary Note: force the old inline teal styling to green. */
#invoice-management-view #summary-note-current-input {
    background: #f2fff8 !important;
    border-color: #116045 !important;
}
#invoice-management-view #summary-note-current-input + *,
#invoice-management-view #summary-note-current-input ~ *,
#invoice-management-view #im-summary-note i.fa-pen,
#invoice-management-view #im-summary-note h3 {
    color: #116045 !important;
    -webkit-text-fill-color: #116045 !important;
}

/* Welcome screen: remove rounded card/pill look for quote and time/date panel. */
.welcome-premium-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 4px !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
}
.welcome-panel-label {
    width: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #fbbf24 !important;
    text-align: center !important;
}
#welcome-panel-date {
    margin-top: 10px !important;
    display: block !important;
    text-align: center !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
#welcome-panel-sub,
#welcome-panel-sub.welcome-panel-time {
    margin: 6px 0 0 !important;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #dbeafe !important;
    -webkit-text-fill-color: #dbeafe !important;
    text-align: center !important;
}
.welcome-quote-row {
    width: auto !important;
    max-width: 760px !important;
    padding: 0 !important;
    margin-top: 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #eaf2ff !important;
    -webkit-text-fill-color: #eaf2ff !important;
}
.welcome-quote-row i {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
}
@media (max-width: 720px) {
    .welcome-premium-panel {
        min-height: 0 !important;
        padding-top: 0 !important;
    }
    .welcome-quote-row {
        justify-content: center !important;
        text-align: center !important;
    }
}


/* ========================================================================
   8.7.7 — Inventory remaining navy/blue cleanup
   Scope: Inventory UI only.
   Purpose:
   - Remove leftover navy/teal/blue accents from Inventory pages and modals.
   - Keep Inventory aligned to #FF2E2E with readable white/dark-red contrast.
   - Override older generic modal/table rules and inline button colors.
   ======================================================================== */
body.inventory-mode #workdesk-view,
#inventory-view,
.inventory-themed-modal {
    --primary-blue: #FF2E2E !important;
    --iba-base-blue: #FF2E2E !important;
    --iba-base-blue-dark: #8d1111 !important;
    --iba-base-blue-light: #b91616 !important;
    --iba-secondary-teal: #FF2E2E !important;
    --inv-module-accent: #FF2E2E !important;
    --inv-module-accent-deep: #8d1111 !important;
    --inv-module-accent-mid: #b91616 !important;
    --inv-module-accent-soft: #fff1f1 !important;
}

/* Welcome module color follows the final chosen module colors. */
.welcome-module-invoice { --welcome-accent: #116045 !important; }
.welcome-module-inventory { --welcome-accent: #FF2E2E !important; }

/* Inventory tables: catch Material Stock, Active Task, Job Records, and modal tables. */
body.inventory-mode #workdesk-view table thead,
body.inventory-mode #workdesk-view table thead tr,
body.inventory-mode #workdesk-view table thead th,
#inventory-view table thead,
#inventory-view table thead tr,
#inventory-view table thead th,
.inventory-themed-modal table thead,
.inventory-themed-modal table thead tr,
.inventory-themed-modal table thead th,
#ms-report-modal table thead,
#ms-report-modal table thead tr,
#ms-report-modal table thead th,
#ms-requestlist-modal table thead,
#ms-requestlist-modal table thead tr,
#ms-requestlist-modal table thead th,
#transfer-job-modal table thead,
#transfer-job-modal table thead tr,
#transfer-job-modal table thead th,
#transfer-approval-modal table thead,
#transfer-approval-modal table thead tr,
#transfer-approval-modal table thead th {
    background: #b91616 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 240, 0.30) !important;
    text-shadow: none !important;
}

/* Inventory table wrappers and sticky/action borders that were still picking up navy. */
body.inventory-mode #workdesk-view .table-wrapper,
body.inventory-mode #workdesk-view .ms-premium-tablewrap,
body.inventory-mode #workdesk-view .wd-premium-searchbar,
body.inventory-mode #workdesk-view .ms-premium-searchbar,
body.inventory-mode #workdesk-view .ms-premium-toolbar,
body.inventory-mode #workdesk-view .report-controls,
#inventory-view .table-wrapper,
.inventory-themed-modal .table-wrapper {
    border-color: rgba(255, 46, 46, 0.16) !important;
    box-shadow: 0 12px 28px rgba(141, 17, 17, 0.08) !important;
}

body.inventory-mode #workdesk-view #job-records-table th,
body.inventory-mode #workdesk-view #ms-table th,
body.inventory-mode #workdesk-view .wd-modern-table th,
body.inventory-mode #workdesk-view .wd-inventory-modern-table th {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Inventory page accent cards/icons/badges that used old brand navy. */
body.inventory-mode #workdesk-view .icon-wrapper,
body.inventory-mode #workdesk-view .wd-status-icon,
body.inventory-mode #workdesk-view .wd-mini-metric::after,
body.inventory-mode #workdesk-view .wd-active-status-card .wd-status-icon,
#inventory-view .icon-wrapper {
    background: linear-gradient(135deg, #b91616, #FF2E2E) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.inventory-mode #workdesk-view .wd-page-hero-metric,
body.inventory-mode #workdesk-view .table-count-display,
body.inventory-mode #workdesk-view .wd-mini-metric strong,
body.inventory-mode #workdesk-view .wd-status-pill,
body.inventory-mode #workdesk-view .wd-status-badge {
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    border-color: rgba(255, 46, 46, 0.18) !important;
}

/* Buttons on Inventory pages: override inline blue/purple/teal styles. */
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-requestlist-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #wd-inventory-intransit-report-btn,
body.inventory-mode #workdesk-view button[onclick*="openTransferModal"],
body.inventory-mode #workdesk-view .download-btn:not(.secondary-btn),
body.inventory-mode #workdesk-view .print-btn,
body.inventory-mode #workdesk-view .primary-btn,
#inventory-view .download-btn:not(.secondary-btn),
#inventory-view .print-btn,
#inventory-view .primary-btn {
    background: linear-gradient(135deg, #b91616, #FF2E2E) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 240, 0.30) !important;
    box-shadow: 0 10px 20px rgba(141, 17, 17, 0.16) !important;
}
body.inventory-mode #workdesk-view #ms-template-btn,
body.inventory-mode #workdesk-view #ms-upload-csv-btn,
body.inventory-mode #workdesk-view #ms-refresh-btn,
body.inventory-mode #workdesk-view .secondary-btn:not(.modal-close-btn):not(.delete-btn),
#inventory-view .secondary-btn:not(.modal-close-btn):not(.delete-btn) {
    background: #fff7f7 !important;
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    border: 1px solid rgba(255, 46, 46, 0.22) !important;
}

/* Inventory modals: headers, shell, footers, inner blocks, and controls. */
.inventory-themed-modal .modal-container,
#ms-report-modal .modal-container,
#ms-requestlist-modal .modal-container,
#ms-new-material-modal .modal-container,
#ms-photo-browser-modal .modal-container,
#ms-add-stock-modal .modal-container,
#transfer-job-modal .modal-container,
#transfer-approval-modal .modal-container {
    background: linear-gradient(180deg, #fffafa 0%, #fff1f1 100%) !important;
    border-color: rgba(255, 46, 46, 0.18) !important;
    box-shadow: 0 30px 75px rgba(61, 8, 8, 0.26), 0 1px 0 rgba(255,255,255,0.80) inset !important;
    color: #2f1414 !important;
}
.inventory-themed-modal .modal-header,
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.14), transparent 30%),
        linear-gradient(135deg, #8d1111 0%, #b91616 58%, #FF2E2E 100%) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 240, 240, 0.40) !important;
    box-shadow: 0 12px 26px rgba(141, 17, 17, 0.24) !important;
}
.inventory-themed-modal .modal-header *,
#ms-report-modal .modal-header *,
#ms-requestlist-modal .modal-header *,
#ms-new-material-modal .modal-header *,
#ms-photo-browser-modal .modal-header *,
#ms-add-stock-modal .modal-header *,
#transfer-job-modal .modal-header *,
#transfer-approval-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}
.inventory-themed-modal .modal-content,
#ms-report-modal .modal-content,
#ms-requestlist-modal .modal-content,
#ms-new-material-modal .modal-content,
#ms-photo-browser-modal .modal-content,
#ms-add-stock-modal .modal-content,
#transfer-job-modal .modal-content,
#transfer-approval-modal .modal-content {
    background: linear-gradient(180deg, #fffafa 0%, #fff6f6 100%) !important;
    color: #2f1414 !important;
    scrollbar-color: rgba(185, 22, 22, 0.45) rgba(255, 226, 226, 0.92) !important;
}
.inventory-themed-modal .modal-footer,
#ms-report-modal .modal-footer,
#ms-requestlist-modal .modal-footer,
#ms-new-material-modal .modal-footer,
#ms-photo-browser-modal .modal-footer,
#ms-add-stock-modal .modal-footer,
#transfer-job-modal .modal-footer,
#transfer-approval-modal .modal-footer {
    background: linear-gradient(180deg, #fff7f7 0%, #ffecec 100%) !important;
    border-top-color: rgba(255, 46, 46, 0.16) !important;
}

.inventory-themed-modal label,
.inventory-themed-modal .form-group label,
#transfer-job-modal label,
#transfer-job-modal .form-group label,
#transfer-approval-modal label,
#transfer-approval-modal .form-group label,
#ms-new-material-modal label,
#ms-add-stock-modal label,
#ms-photo-browser-modal label,
#ms-report-modal strong,
#ms-requestlist-modal strong {
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
}
.inventory-themed-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.inventory-themed-modal select,
.inventory-themed-modal textarea,
.inventory-themed-modal .choices__inner,
#transfer-job-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#transfer-job-modal select,
#transfer-job-modal textarea,
#transfer-approval-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#transfer-approval-modal select,
#transfer-approval-modal textarea,
#ms-new-material-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#ms-new-material-modal select,
#ms-new-material-modal textarea,
#ms-add-stock-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#ms-add-stock-modal select,
#ms-add-stock-modal textarea {
    color: #2f1414 !important;
    -webkit-text-fill-color: #2f1414 !important;
    border-color: rgba(141, 17, 17, 0.18) !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(141, 17, 17, 0.06) !important;
}
.inventory-themed-modal input:focus,
.inventory-themed-modal select:focus,
.inventory-themed-modal textarea:focus,
.inventory-themed-modal .choices.is-focused .choices__inner,
#transfer-job-modal input:focus,
#transfer-job-modal select:focus,
#transfer-job-modal textarea:focus,
#transfer-approval-modal input:focus,
#transfer-approval-modal select:focus,
#transfer-approval-modal textarea:focus,
#ms-new-material-modal input:focus,
#ms-new-material-modal select:focus,
#ms-new-material-modal textarea:focus,
#ms-add-stock-modal input:focus,
#ms-add-stock-modal select:focus,
#ms-add-stock-modal textarea:focus {
    border-color: #FF2E2E !important;
    box-shadow: 0 0 0 4px rgba(255, 46, 46, 0.13), 0 8px 18px rgba(141, 17, 17, 0.10) !important;
}

/* Inventory modal detail cards/section boxes that used navy borders or blue text. */
#transfer-job-modal .transfer-2col-grid,
#standard-job-modal.inventory-themed-modal .transfer-2col-grid,
#transfer-job-modal .transfer-col,
#transfer-job-modal #tf-multi-list-container,
#transfer-job-modal .modal-content > div:first-child,
#transfer-approval-modal #transfer-modal-details,
#ms-new-material-modal #ms-stock-entry-row,
#ms-requestlist-modal .modal-content > div[style],
#ms-report-modal .modal-content > div[style] {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(255, 46, 46, 0.16) !important;
    box-shadow: 0 10px 24px rgba(141, 17, 17, 0.06) !important;
    color: #2f1414 !important;
}
#transfer-job-modal .transfer-col h4,
#transfer-job-modal #tf-multi-list-container h4,
#ms-requestlist-modal .modal-content div[style*="color:#003A5C"],
#ms-requestlist-modal .modal-content div[style*="color: #003A5C"],
#ms-report-modal .modal-content h1,
#ms-report-modal .modal-content div[style*="border-bottom: 2px solid #003A5C"] {
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    border-color: #FF2E2E !important;
}

/* Inventory modal/footer buttons: override inline blue/green/purple button colors. */
.inventory-themed-modal .download-btn,
.inventory-themed-modal .print-btn,
.inventory-themed-modal .primary-btn,
.inventory-themed-modal button[id*="save"],
.inventory-themed-modal button[id*="approve"],
.inventory-themed-modal button[id*="print"],
.inventory-themed-modal button[id*="excel"],
#ms-report-modal #ms-modal-print-btn,
#ms-report-modal #ms-modal-excel-btn,
#ms-requestlist-modal #ms-requestlist-add-manual-btn,
#ms-requestlist-modal #ms-requestlist-print-btn,
#ms-new-material-modal #ms-save-material-btn,
#ms-add-stock-modal #ms-add-stock-save-btn,
#transfer-job-modal #tf-save-btn,
#transfer-approval-modal #transfer-modal-approve-btn {
    background: linear-gradient(135deg, #b91616, #FF2E2E) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 240, 0.34) !important;
    box-shadow: 0 10px 20px rgba(141, 17, 17, 0.18) !important;
}
.inventory-themed-modal .secondary-btn:not(.delete-btn),
.inventory-themed-modal .modal-close-btn:not(.modal-header .modal-close-btn) {
    background: #fff7f7 !important;
    color: #8d1111 !important;
    -webkit-text-fill-color: #8d1111 !important;
    border: 1px solid rgba(255, 46, 46, 0.24) !important;
}
.inventory-themed-modal .delete-btn,
.inventory-themed-modal button[id*="reject"],
.inventory-themed-modal button[id*="clear"],
.inventory-themed-modal button[id*="delete"] {
    background: linear-gradient(135deg, #991b1b, #dc2626) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 768px) {
    body.inventory-mode #workdesk-view .mobile-app-header,
    body.inventory-mode #workdesk-view #active-task-mobile-header,
    body.inventory-mode #workdesk-view .dayview-mobile-header-new,
    #inventory-view .mobile-app-header,
    #inventory-view #active-task-mobile-header,
    #inventory-view .dayview-mobile-header-new {
        background: linear-gradient(135deg, #8d1111, #FF2E2E) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-bottom-color: rgba(255, 240, 240, 0.36) !important;
    }
}

/* ========================================================================
   8.7.8 — Final contrast/theme cleanup + Invoice Entry floating modal restore
   Scope: UI-only.
   - Inventory: stronger button/font contrast on #FF2E2E theme.
   - Invoice Management: remove remaining Invoice Records blue/teal/navy accents.
   - Invoice hero: same full-color vibe as WorkDesk/Inventory; no half light split.
   - Invoice Entry modal: restore transparent/pass-through floating popup behavior.
   ======================================================================== */
:root {
    --im-theme-green: #116045;
    --im-theme-green-deep: #073524;
    --im-theme-green-mid: #0b4b35;
    --im-theme-green-soft: #eaf8f1;
    --inv-theme-red: #FF2E2E;
    --inv-theme-red-deep: #8d1111;
    --inv-theme-red-mid: #b91616;
    --inv-theme-red-soft: #fff1f1;
}

/* ---------------- INVOICE MANAGEMENT: remove remaining blue in Invoice Records ---------------- */
#invoice-management-view {
    --primary-blue: var(--im-theme-green) !important;
    --iba-base-blue: var(--im-theme-green) !important;
    --iba-base-blue-dark: var(--im-theme-green-deep) !important;
    --iba-base-blue-light: var(--im-theme-green-mid) !important;
    --iba-secondary-teal: var(--im-theme-green) !important;
    --iba-hero-blue-a: var(--im-theme-green-deep) !important;
    --iba-hero-blue-b: var(--im-theme-green) !important;
}

/* Same hero vibe as WorkDesk/Inventory: full green gradient, no half-light block. */
#invoice-management-view .im-standard-hero,
#invoice-management-view #im-dashboard .im-dashboard-hero,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero,
#invoice-management-view #im-batch-entry > .header-top,
#invoice-management-view #im-summary-note > div:first-of-type,
#invoice-management-view #im-reporting > .header {
    background:
        radial-gradient(circle at 12% 0%, rgba(79, 210, 154, 0.20), transparent 34%),
        radial-gradient(circle at 95% 18%, rgba(255, 255, 255, 0.13), transparent 36%),
        linear-gradient(135deg, var(--im-theme-green-deep) 0%, var(--im-theme-green-mid) 54%, var(--im-theme-green) 100%) !important;
    border-color: rgba(216, 250, 233, 0.24) !important;
    box-shadow: 0 24px 58px rgba(7, 53, 36, 0.18) !important;
    color: #ffffff !important;
}
#invoice-management-view .im-standard-hero *,
#invoice-management-view #im-dashboard .im-dashboard-hero *,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero *,
#invoice-management-view #im-batch-entry > .header-top *,
#invoice-management-view #im-summary-note > div:first-of-type *,
#invoice-management-view #im-reporting > .header * {
    text-shadow: none !important;
}
#invoice-management-view .im-standard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero h1,
#invoice-management-view #im-batch-entry > .header-top h1,
#invoice-management-view #im-summary-note > div:first-of-type h1,
#invoice-management-view #im-reporting > .header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(7, 53, 36, 0.38) !important;
}
#invoice-management-view .im-standard-hero p,
#invoice-management-view #im-dashboard .im-dashboard-hero p,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero p,
#invoice-management-view #im-reporting > .header .im-reporting-hero-subtitle {
    color: rgba(234, 248, 241, 0.94) !important;
    -webkit-text-fill-color: rgba(234, 248, 241, 0.94) !important;
}
#invoice-management-view .im-standard-eyebrow,
#invoice-management-view #im-dashboard .im-dashboard-eyebrow,
#invoice-management-view #im-batch-entry > .header-top .header-title::before,
#invoice-management-view #im-summary-note > div:first-of-type > div:first-child::before,
#invoice-management-view #im-reporting > .header .header-title::before,
#invoice-management-view #im-reporting > .header .im-reporting-hero-copy::before {
    color: #d8fae9 !important;
    -webkit-text-fill-color: #d8fae9 !important;
    border-color: rgba(216, 250, 233, 0.26) !important;
}

/* Invoice Records command/search area: green accents, no blue/teal. */
#im-reporting-form {
    background:
        radial-gradient(circle at 0% 0%, rgba(17, 96, 69, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,255,251,.96)) !important;
    border-color: rgba(17, 96, 69, 0.18) !important;
    box-shadow: 0 22px 55px rgba(7, 53, 36, 0.08) !important;
}
#im-reporting-form .search-box {
    border-color: rgba(17, 96, 69, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 24px rgba(7,53,36,.05) !important;
}
#im-reporting-form .search-box i.search-icon,
#im-reporting-form .detailed-btn,
#im-reporting-form .filter-group select:focus,
#im-reporting .reporting-legend .legend-item strong {
    color: var(--im-theme-green) !important;
    -webkit-text-fill-color: var(--im-theme-green) !important;
}
#im-reporting-form .filter-group select,
#im-reporting-form input,
#im-reporting-form select {
    border-color: rgba(17, 96, 69, 0.16) !important;
}
#im-reporting .grid-header,
#im-reporting-content table thead,
#im-reporting-content table thead tr,
#im-reporting-content table thead th,
#invoice-management-view #im-reporting table thead,
#invoice-management-view #im-reporting table thead tr,
#invoice-management-view #im-reporting table thead th {
    background: linear-gradient(135deg, var(--im-theme-green-deep), var(--im-theme-green), var(--im-theme-green-mid)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.24) !important;
    box-shadow: 0 18px 38px rgba(7, 53, 36, 0.12) !important;
}
#im-reporting .grid-header .grid-cell,
#im-reporting-content table thead th *,
#invoice-management-view #im-reporting table thead th * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
#im-reporting .invoice-card:hover,
#im-reporting .master-grid-row:hover,
#im-reporting .invoice-card.is-open,
#im-reporting .invoice-card.selected {
    border-color: rgba(17, 96, 69, 0.34) !important;
    box-shadow: 0 16px 34px rgba(7, 53, 36, 0.10) !important;
}
#im-reporting .master-grid-row .grid-cell,
#im-reporting .detail-grid-row,
#im-reporting .loading-state {
    color: #123326 !important;
    -webkit-text-fill-color: #123326 !important;
}
#im-reporting .table-count-display,
#reporting-count-display.im-found-count-chip,
#reporting-count-display {
    border-color: rgba(216, 250, 233, 0.26) !important;
}

/* Invoice buttons: readable, green coordinated, no blue leftovers. */
#invoice-management-view button,
#invoice-management-view .download-btn,
#invoice-management-view .print-btn,
#invoice-management-view .primary-btn,
#invoice-management-view .secondary-btn,
#invoice-management-view .refresh-btn,
#im-invoice-entry-modal button,
#im-batch-search-modal button,
#im-add-payment-modal button,
#im-manual-po-modal button,
#im-mobile-search-modal button,
#im-finance-report-modal button {
    text-shadow: none !important;
    font-weight: 900 !important;
}
#invoice-management-view .download-btn:not(.download-btn--gold),
#invoice-management-view .primary-btn,
#invoice-management-view #im-reporting-search-btn,
#invoice-management-view #im-reporting-download-btn,
#invoice-management-view #im-download-excel-custom-btn,
#invoice-management-view .im-export-excel-btn,
#im-invoice-entry-modal .download-btn,
#im-invoice-entry-modal .primary-btn,
#im-batch-search-modal .download-btn,
#im-add-payment-modal .download-btn,
#im-manual-po-modal .download-btn,
#im-mobile-search-modal .download-btn,
#im-finance-report-modal .download-btn {
    background: linear-gradient(135deg, var(--im-theme-green-mid), var(--im-theme-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.24) !important;
    box-shadow: 0 12px 24px rgba(7, 53, 36, 0.16) !important;
}
#invoice-management-view .secondary-btn,
#invoice-management-view .print-btn,
#invoice-management-view .refresh-btn,
#invoice-management-view #im-reporting-clear-button,
#invoice-management-view #printSummaryBtn,
#invoice-management-view #printDetailedBtn,
#invoice-management-view #im-refresh-reporting-button,
#im-invoice-entry-modal .secondary-btn,
#im-batch-search-modal .secondary-btn,
#im-add-payment-modal .secondary-btn,
#im-manual-po-modal .secondary-btn,
#im-mobile-search-modal .secondary-btn,
#im-finance-report-modal .secondary-btn {
    background: #f2fff8 !important;
    color: var(--im-theme-green-deep) !important;
    -webkit-text-fill-color: var(--im-theme-green-deep) !important;
    border: 1px solid rgba(17, 96, 69, 0.22) !important;
    box-shadow: 0 10px 22px rgba(7, 53, 36, 0.08) !important;
}
#invoice-management-view .download-btn--gold {
    background: linear-gradient(135deg, #fff3b0, #ffd43b) !important;
    color: #3b2f00 !important;
    -webkit-text-fill-color: #3b2f00 !important;
    border-color: rgba(255, 212, 59, 0.35) !important;
}
#invoice-management-view button i,
#invoice-management-view button span,
#invoice-management-view .download-btn i,
#invoice-management-view .download-btn span,
#invoice-management-view .print-btn i,
#invoice-management-view .print-btn span,
#invoice-management-view .primary-btn i,
#invoice-management-view .primary-btn span,
#invoice-management-view .secondary-btn i,
#invoice-management-view .secondary-btn span,
#im-invoice-entry-modal button i,
#im-invoice-entry-modal button span,
#im-batch-search-modal button i,
#im-batch-search-modal button span,
#im-add-payment-modal button i,
#im-add-payment-modal button span,
#im-mobile-search-modal button i,
#im-mobile-search-modal button span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
}

/* Invoice modal headers should be green with white readable title/text. */
#im-invoice-entry-modal .modal-header,
#im-mobile-search-modal .modal-header,
#im-batch-search-modal .modal-header,
#im-attention-picker-modal .modal-header,
#im-add-payment-modal .modal-header,
#im-manual-po-modal .modal-header,
#im-finance-report-modal .modal-header,
#im-invoice-print-modal .modal-header,
#process-report-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(79, 210, 154, 0.24), transparent 30%),
        linear-gradient(135deg, var(--im-theme-green-deep), var(--im-theme-green-mid), var(--im-theme-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-bottom-color: rgba(216, 250, 233, 0.28) !important;
}
#im-invoice-entry-modal .modal-header *,
#im-mobile-search-modal .modal-header *,
#im-batch-search-modal .modal-header *,
#im-attention-picker-modal .modal-header *,
#im-add-payment-modal .modal-header *,
#im-manual-po-modal .modal-header *,
#im-finance-report-modal .modal-header *,
#im-invoice-print-modal .modal-header *,
#process-report-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* ---------------- INVENTORY: button/header contrast on #FF2E2E ---------------- */
body.inventory-mode #workdesk-view button,
body.inventory-mode #workdesk-view .download-btn,
body.inventory-mode #workdesk-view .print-btn,
body.inventory-mode #workdesk-view .primary-btn,
body.inventory-mode #workdesk-view .secondary-btn,
body.inventory-mode #workdesk-view .refresh-btn,
#inventory-view button,
#inventory-view .download-btn,
#inventory-view .print-btn,
#inventory-view .primary-btn,
#inventory-view .secondary-btn,
#inventory-view .refresh-btn,
.inventory-themed-modal button,
#ms-report-modal button,
#ms-requestlist-modal button,
#ms-new-material-modal button,
#ms-photo-browser-modal button,
#ms-add-stock-modal button,
#transfer-job-modal button,
#transfer-approval-modal button {
    text-shadow: none !important;
    font-weight: 900 !important;
}
body.inventory-mode #workdesk-view .download-btn:not(.secondary-btn):not(.delete-btn),
body.inventory-mode #workdesk-view .print-btn:not(.secondary-btn):not(.delete-btn),
body.inventory-mode #workdesk-view .primary-btn:not(.secondary-btn):not(.delete-btn),
body.inventory-mode #workdesk-view button[id*="save"],
body.inventory-mode #workdesk-view button[id*="approve"],
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #ms-open-requestlist-btn,
body.inventory-mode #workdesk-view #wd-inventory-intransit-report-btn,
#inventory-view .download-btn:not(.secondary-btn):not(.delete-btn),
#inventory-view .print-btn:not(.secondary-btn):not(.delete-btn),
#inventory-view .primary-btn:not(.secondary-btn):not(.delete-btn),
.inventory-themed-modal .download-btn:not(.secondary-btn):not(.delete-btn),
.inventory-themed-modal .print-btn:not(.secondary-btn):not(.delete-btn),
.inventory-themed-modal .primary-btn:not(.secondary-btn):not(.delete-btn),
#ms-report-modal .download-btn:not(.secondary-btn):not(.delete-btn),
#ms-report-modal .print-btn:not(.secondary-btn):not(.delete-btn),
#ms-requestlist-modal .download-btn:not(.secondary-btn):not(.delete-btn),
#ms-requestlist-modal .print-btn:not(.secondary-btn):not(.delete-btn),
#ms-requestlist-modal #ms-requestlist-add-manual-btn,
#ms-new-material-modal .download-btn:not(.secondary-btn):not(.delete-btn),
#ms-photo-browser-modal .primary-btn:not(.secondary-btn):not(.delete-btn),
#ms-add-stock-modal .download-btn:not(.secondary-btn):not(.delete-btn),
#transfer-job-modal .download-btn:not(.secondary-btn):not(.delete-btn),
#transfer-approval-modal .download-btn:not(.secondary-btn):not(.delete-btn) {
    background: linear-gradient(135deg, var(--inv-theme-red-deep), var(--inv-theme-red-mid), var(--inv-theme-red)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 240, 240, 0.34) !important;
    box-shadow: 0 12px 24px rgba(141, 17, 17, 0.18) !important;
}
body.inventory-mode #workdesk-view .secondary-btn:not(.delete-btn),
body.inventory-mode #workdesk-view .refresh-btn,
body.inventory-mode #workdesk-view #ms-template-btn,
body.inventory-mode #workdesk-view #ms-upload-csv-btn,
body.inventory-mode #workdesk-view #ms-refresh-btn,
#inventory-view .secondary-btn:not(.delete-btn),
#inventory-view .refresh-btn,
.inventory-themed-modal .secondary-btn:not(.delete-btn),
.inventory-themed-modal .modal-close-btn:not(.modal-header .modal-close-btn),
#ms-report-modal .secondary-btn:not(.delete-btn),
#ms-requestlist-modal .secondary-btn:not(.delete-btn),
#ms-new-material-modal .secondary-btn:not(.delete-btn),
#ms-photo-browser-modal .secondary-btn:not(.delete-btn),
#ms-add-stock-modal .secondary-btn:not(.delete-btn),
#transfer-job-modal .secondary-btn:not(.delete-btn),
#transfer-approval-modal .secondary-btn:not(.delete-btn) {
    background: #fff7f7 !important;
    color: var(--inv-theme-red-deep) !important;
    -webkit-text-fill-color: var(--inv-theme-red-deep) !important;
    border: 1px solid rgba(255, 46, 46, 0.25) !important;
    box-shadow: 0 10px 22px rgba(141, 17, 17, 0.08) !important;
}
body.inventory-mode #workdesk-view .delete-btn,
body.inventory-mode #workdesk-view button[id*="reject"],
body.inventory-mode #workdesk-view button[id*="delete"],
#inventory-view .delete-btn,
#inventory-view button[id*="reject"],
#inventory-view button[id*="delete"],
.inventory-themed-modal .delete-btn,
.inventory-themed-modal button[id*="reject"],
.inventory-themed-modal button[id*="delete"] {
    background: linear-gradient(135deg, #991b1b, #dc2626) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.inventory-mode #workdesk-view button i,
body.inventory-mode #workdesk-view button span,
body.inventory-mode #workdesk-view .download-btn i,
body.inventory-mode #workdesk-view .download-btn span,
body.inventory-mode #workdesk-view .print-btn i,
body.inventory-mode #workdesk-view .print-btn span,
body.inventory-mode #workdesk-view .primary-btn i,
body.inventory-mode #workdesk-view .primary-btn span,
body.inventory-mode #workdesk-view .secondary-btn i,
body.inventory-mode #workdesk-view .secondary-btn span,
#inventory-view button i,
#inventory-view button span,
.inventory-themed-modal button i,
.inventory-themed-modal button span,
#ms-report-modal button i,
#ms-report-modal button span,
#ms-requestlist-modal button i,
#ms-requestlist-modal button span,
#ms-new-material-modal button i,
#ms-new-material-modal button span,
#ms-photo-browser-modal button i,
#ms-photo-browser-modal button span,
#ms-add-stock-modal button i,
#ms-add-stock-modal button span,
#transfer-job-modal button i,
#transfer-job-modal button span,
#transfer-approval-modal button i,
#transfer-approval-modal button span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
}
body.inventory-mode #workdesk-view table thead th,
#inventory-view table thead th,
.inventory-themed-modal table thead th,
#ms-report-modal table thead th,
#ms-requestlist-modal table thead th,
#ms-new-material-modal table thead th,
#ms-photo-browser-modal table thead th,
#ms-add-stock-modal table thead th,
#transfer-job-modal table thead th,
#transfer-approval-modal table thead th {
    background: var(--inv-theme-red-mid) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}
.inventory-themed-modal .modal-header .modal-close-btn,
#ms-report-modal .modal-header .modal-close-btn,
#ms-requestlist-modal .modal-header .modal-close-btn,
#ms-new-material-modal .modal-header .modal-close-btn,
#ms-photo-browser-modal .modal-header .modal-close-btn,
#ms-add-stock-modal .modal-header .modal-close-btn,
#transfer-job-modal .modal-header .modal-close-btn,
#transfer-approval-modal .modal-header .modal-close-btn {
    background: rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255,255,255,0.42) !important;
}

/* ---------------- Invoice Entry modal: restore floating, transparent, pass-through behavior ---------------- */
#im-invoice-entry-modal,
#im-invoice-entry-modal.modal-overlay,
#im-invoice-entry-modal.modal-overlay:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}
@supports (height: 100dvh) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
}
#im-invoice-entry-modal.modal-overlay.hidden {
    display: none !important;
}
#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
    pointer-events: auto !important;
    position: relative !important;
    width: min(94vw, 1180px) !important;
    max-width: min(94vw, 1180px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    box-sizing: border-box !important;
}
@supports (height: 100dvh) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        max-height: calc(100dvh - 32px) !important;
    }
}
#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container.im-user-positioned {
    position: fixed !important;
    left: var(--im-modal-left, 24px) !important;
    top: var(--im-modal-top, 24px) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: var(--im-modal-width, min(94vw, 1180px)) !important;
    max-width: none !important;
    transform: none !important;
}
#im-invoice-entry-modal .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}
#invoice-management-view > .workdesk-sidebar {
    position: relative !important;
    z-index: 10006 !important;
    pointer-events: auto !important;
}
#im-entry-sidebar {
    position: fixed !important;
    z-index: 10007 !important;
    pointer-events: auto !important;
}
body.im-modal-is-dragging * {
    user-select: none !important;
}

/* ========================================================================
   8.7.9 — Invoice Management consistency reset
   Scope: Invoice Management UI only.
   Purpose:
   - Remove card-on-card layering from Invoice Entry / Existing Invoices.
   - Remove remaining blue/navy from Invoice Records and result summary.
   - Make headers match WorkDesk/Inventory full-gradient vibe using #116045.
   - Fix green-on-green / low-contrast font and button issues.
   - Remove rounded title/chip lines unless they are actual buttons.
   ======================================================================== */
:root {
    --im-879-green: #116045;
    --im-879-green-dark: #073524;
    --im-879-green-mid: #0b4b35;
    --im-879-green-light: #eaf8f1;
    --im-879-green-border: rgba(17, 96, 69, 0.22);
    --im-879-text: #17352a;
    --im-879-muted: #5f726b;
}

/* -------------------------- Invoice header consistency -------------------------- */
#invoice-management-view .im-standard-hero,
#invoice-management-view #im-dashboard .im-dashboard-hero,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero,
#invoice-management-view #im-batch-entry > .header-top,
#invoice-management-view #im-summary-note > div:first-of-type,
#invoice-management-view #im-reporting > .header,
#invoice-management-view #im-reporting > .header .header-top {
    background:
        radial-gradient(circle at 12% 0%, rgba(107, 225, 166, 0.22), transparent 34%),
        radial-gradient(circle at 94% 18%, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(135deg, var(--im-879-green-dark) 0%, var(--im-879-green-mid) 52%, var(--im-879-green) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(216, 250, 233, 0.24) !important;
    border-radius: 26px !important;
    box-shadow: 0 24px 58px rgba(7, 53, 36, 0.18) !important;
}
#invoice-management-view .im-standard-hero *,
#invoice-management-view #im-dashboard .im-dashboard-hero *,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero *,
#invoice-management-view #im-batch-entry > .header-top *,
#invoice-management-view #im-summary-note > div:first-of-type *,
#invoice-management-view #im-reporting > .header *,
#invoice-management-view #im-reporting > .header .header-top * {
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
#invoice-management-view .im-standard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero h1,
#invoice-management-view #im-batch-entry > .header-top h1,
#invoice-management-view #im-summary-note > div:first-of-type h1,
#invoice-management-view #im-reporting > .header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
}
#invoice-management-view .im-standard-hero p,
#invoice-management-view #im-dashboard .im-dashboard-hero p,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero p,
#invoice-management-view #im-reporting > .header p,
#invoice-management-view #im-reporting > .header .im-reporting-hero-subtitle,
#invoice-management-view #im-reporting > .header .im-reporting-hero-subtitle strong {
    color: rgba(234, 248, 241, 0.96) !important;
    -webkit-text-fill-color: rgba(234, 248, 241, 0.96) !important;
}

/* Remove the rounded outline/pill habit from title helper text and counters. */
#invoice-management-view .im-standard-eyebrow,
#invoice-management-view #im-dashboard .im-dashboard-eyebrow,
#invoice-management-view #im-batch-entry > .header-top .header-title::before,
#invoice-management-view #im-summary-note > div:first-of-type > div:first-child::before,
#invoice-management-view #im-reporting > .header .header-title::before,
#invoice-management-view #im-reporting > .header .im-reporting-hero-copy::before,
#invoice-management-view .table-count-display,
#invoice-management-view h2 .table-count-display,
#invoice-management-view #reporting-count-display,
#invoice-management-view #reporting-count-display.im-found-count-chip {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: none !important;
}
#invoice-management-view .im-standard-eyebrow,
#invoice-management-view #im-dashboard .im-dashboard-eyebrow,
#invoice-management-view #im-batch-entry > .header-top .header-title::before,
#invoice-management-view #im-summary-note > div:first-of-type > div:first-child::before,
#invoice-management-view #im-reporting > .header .header-title::before,
#invoice-management-view #im-reporting > .header .im-reporting-hero-copy::before {
    color: rgba(216, 250, 233, 0.96) !important;
    -webkit-text-fill-color: rgba(216, 250, 233, 0.96) !important;
    font-weight: 850 !important;
    letter-spacing: 0.06em !important;
}
#invoice-management-view #reporting-count-display,
#invoice-management-view #reporting-count-display.im-found-count-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}
#invoice-management-view #reporting-count-display:empty,
#invoice-management-view #reporting-count-display.im-found-count-chip:empty {
    display: none !important;
}

/* ---------------------- Invoice Entry: remove card-on-card look ---------------------- */
#invoice-management-view #im-invoice-entry {
    background: #ffffff !important;
    border: 1px solid rgba(17, 96, 69, 0.10) !important;
    box-shadow: 0 14px 34px rgba(7, 53, 36, 0.06) !important;
}
#invoice-management-view #im-po-search-container,
#invoice-management-view #im-invoice-entry #im-po-search-container,
#invoice-management-view #im-reporting-form {
    background: #ffffff !important;
    border: 1px solid rgba(17, 96, 69, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(7, 53, 36, 0.06) !important;
}
#invoice-management-view #im-po-search-container .search-bar-local,
#invoice-management-view #im-po-search-container .search-bar-local input,
#invoice-management-view #im-reporting-form .search-box,
#invoice-management-view #im-reporting-form input,
#invoice-management-view #im-reporting-form select {
    background: #ffffff !important;
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
    border-color: rgba(17, 96, 69, 0.18) !important;
}
#invoice-management-view #im-po-search-container .search-bar-local i,
#invoice-management-view #im-reporting-form .search-box i.search-icon {
    color: var(--im-879-green) !important;
    -webkit-text-fill-color: var(--im-879-green) !important;
}

/* One clean PO detail strip only. Hide the duplicate PO card under Existing Invoices. */
#invoice-management-view #im-po-details-container-duplicate,
#invoice-management-view #im-po-details-container-duplicate.im-po-details-container {
    display: none !important;
}
#invoice-management-view #im-modal-po-details.im-po-details-compact,
#invoice-management-view #im-modal-po-details .po-compact-grid {
    background: #f7fffb !important;
    border: 1px solid rgba(17, 96, 69, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
}
#invoice-management-view #im-modal-po-details.im-po-details-compact {
    padding: 10px 12px !important;
    margin: 12px 0 14px !important;
}
#invoice-management-view #im-modal-po-details .po-compact-grid {
    border: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
    gap: 8px 14px !important;
}
#invoice-management-view #im-modal-po-details .po-compact-grid > div,
#invoice-management-view #im-modal-po-details .po-compact-grid > div[style] {
    background: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}
#invoice-management-view #im-modal-po-details label,
#invoice-management-view #im-modal-po-details .po-compact-grid label,
#invoice-management-view #im-modal-po-details strong {
    color: var(--im-879-green) !important;
    -webkit-text-fill-color: var(--im-879-green) !important;
    font-weight: 900 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#invoice-management-view #im-modal-po-details span,
#invoice-management-view #im-modal-po-details .po-compact-grid span,
#invoice-management-view #im-modal-po-details .im-po-record,
#invoice-management-view #im-modal-po-details .im-po-no,
#invoice-management-view #im-modal-po-details .im-po-site,
#invoice-management-view #im-modal-po-details .im-po-value,
#invoice-management-view #im-modal-po-details .im-po-vendor {
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
    font-weight: 750 !important;
}

/* Existing Invoices: one section, one table. No card inside card inside card. */
#invoice-management-view #im-existing-invoices-container {
    margin-top: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#invoice-management-view #im-existing-invoices-container .section-divider {
    margin: 22px 0 16px !important;
    border-top: 1px solid rgba(17, 96, 69, 0.16) !important;
}
#invoice-management-view #existing-invoices-count-display {
    display: block !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--im-879-green-dark) !important;
    -webkit-text-fill-color: var(--im-879-green-dark) !important;
    font-size: 1.14rem !important;
    font-weight: 900 !important;
}
#invoice-management-view #existing-invoices-count-display::before,
#invoice-management-view #existing-invoices-count-display::after {
    content: none !important;
    display: none !important;
}
#invoice-management-view #im-existing-invoices-container .table-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(17, 96, 69, 0.16) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: auto !important;
}
#invoice-management-view #im-existing-invoices-container table,
#invoice-management-view #im-invoices-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
}
#invoice-management-view #im-existing-invoices-container table thead,
#invoice-management-view #im-existing-invoices-container table thead tr,
#invoice-management-view #im-existing-invoices-container table thead th,
#invoice-management-view #im-invoices-table thead,
#invoice-management-view #im-invoices-table thead tr,
#invoice-management-view #im-invoices-table thead th {
    background: var(--im-879-green-mid) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.22) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
#invoice-management-view #im-existing-invoices-container table tbody tr,
#invoice-management-view #im-invoices-table tbody tr {
    background: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}
#invoice-management-view #im-existing-invoices-container table tbody tr:hover,
#invoice-management-view #im-invoices-table tbody tr:hover {
    background: #f4fbf7 !important;
    transform: none !important;
    box-shadow: none !important;
}
#invoice-management-view #im-existing-invoices-container table td,
#invoice-management-view #im-invoices-table td {
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
    border: 1px solid rgba(17, 96, 69, 0.10) !important;
    border-left-width: 1px !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#invoice-management-view #im-invoices-table-footer,
#invoice-management-view #im-invoices-table-footer tr,
#invoice-management-view #im-invoices-table-footer td,
#invoice-management-view #im-invoices-total-value,
#invoice-management-view #im-invoices-total-paid {
    background: var(--im-879-green-mid) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
    border-color: rgba(216, 250, 233, 0.22) !important;
}

/* ----------------------------- Modal readability ----------------------------- */
#im-invoice-entry-modal .modal-container {
    background: #ffffff !important;
    border: 1px solid rgba(17, 96, 69, 0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 26px 70px rgba(7, 53, 36, 0.22) !important;
    gap: 0 !important;
    padding: 0 !important;
}
#im-invoice-entry-modal .modal-header,
#im-mobile-search-modal .modal-header,
#im-batch-search-modal .modal-header,
#im-attention-picker-modal .modal-header,
#im-add-payment-modal .modal-header,
#im-manual-po-modal .modal-header,
#im-finance-report-modal .modal-header,
#im-invoice-print-modal .modal-header,
#process-report-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(107, 225, 166, 0.24), transparent 30%),
        linear-gradient(135deg, var(--im-879-green-dark), var(--im-879-green-mid), var(--im-879-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-bottom: 1px solid rgba(216, 250, 233, 0.26) !important;
}
#im-invoice-entry-modal .modal-header *,
#im-mobile-search-modal .modal-header *,
#im-batch-search-modal .modal-header *,
#im-attention-picker-modal .modal-header *,
#im-add-payment-modal .modal-header *,
#im-manual-po-modal .modal-header *,
#im-finance-report-modal .modal-header *,
#im-invoice-print-modal .modal-header *,
#process-report-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
#im-invoice-entry-modal .modal-footer {
    background: #f7fffb !important;
    border-top: 1px solid rgba(17, 96, 69, 0.14) !important;
}
#im-invoice-entry-modal .modal-footer strong {
    color: var(--im-879-green) !important;
    -webkit-text-fill-color: var(--im-879-green) !important;
}
#im-invoice-entry-modal .modal-footer span {
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
}
#im-invoice-entry-modal label,
#invoice-management-view #im-invoice-entry label {
    color: var(--im-879-green-dark) !important;
    -webkit-text-fill-color: var(--im-879-green-dark) !important;
    font-weight: 850 !important;
}
#im-invoice-entry-modal input,
#im-invoice-entry-modal select,
#im-invoice-entry-modal textarea,
#im-invoice-entry-modal .choices__inner {
    background: #ffffff !important;
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
    border-color: rgba(17, 96, 69, 0.18) !important;
    box-shadow: none !important;
}
#im-invoice-entry-modal input:focus,
#im-invoice-entry-modal select:focus,
#im-invoice-entry-modal textarea:focus,
#im-invoice-entry-modal .choices.is-focused .choices__inner {
    border-color: var(--im-879-green) !important;
    box-shadow: 0 0 0 4px rgba(17, 96, 69, 0.12) !important;
}

/* Every Invoice button gets a readable text/background pair. */
#invoice-management-view button,
#invoice-management-view .download-btn,
#invoice-management-view .print-btn,
#invoice-management-view .primary-btn,
#invoice-management-view .secondary-btn,
#invoice-management-view .refresh-btn,
#invoice-management-view .action-btn,
#im-invoice-entry-modal button,
#im-invoice-entry-modal .action-btn,
#im-batch-search-modal button,
#im-add-payment-modal button,
#im-manual-po-modal button,
#im-mobile-search-modal button,
#im-finance-report-modal button {
    text-shadow: none !important;
    font-weight: 850 !important;
}
#invoice-management-view .primary-btn,
#invoice-management-view .download-btn:not(.download-btn--gold),
#invoice-management-view .action-btn:not(.edit-inv-no-btn):not(.history-btn),
#invoice-management-view #im-po-search-button,
#invoice-management-view #im-open-invoice-form-btn,
#invoice-management-view #im-reporting-search-btn,
#invoice-management-view #im-reporting-download-btn,
#invoice-management-view #im-download-excel-custom-btn,
#im-invoice-entry-modal #im-add-invoice-button,
#im-invoice-entry-modal #im-update-invoice-button,
#im-invoice-entry-modal #im-modal-deletion-list-btn,
#im-invoice-entry-modal #im-btn-view-invoice,
#im-invoice-entry-modal #im-btn-view-srv,
#im-invoice-entry-modal .download-btn,
#im-invoice-entry-modal .primary-btn {
    background: linear-gradient(135deg, var(--im-879-green-mid), var(--im-879-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(216, 250, 233, 0.24) !important;
    box-shadow: 0 10px 20px rgba(7, 53, 36, 0.14) !important;
}
#invoice-management-view .secondary-btn,
#invoice-management-view .print-btn,
#invoice-management-view .refresh-btn,
#invoice-management-view #im-reporting-clear-button,
#invoice-management-view #printSummaryBtn,
#invoice-management-view #printDetailedBtn,
#invoice-management-view #im-refresh-reporting-button,
#invoice-management-view #im-refresh-entry-button,
#invoice-management-view #im-po-clear-button,
#im-invoice-entry-modal .secondary-btn:not(#im-add-invoice-button):not(#im-update-invoice-button):not(#im-modal-deletion-list-btn):not(#im-delete-invoice-btn),
#im-invoice-entry-modal #btn-open-report-drive,
#im-invoice-entry-modal #im-po-search-button-bottom,
#im-invoice-entry-modal #im-clear-form-button,
#im-invoice-entry-modal #im-back-to-active-task-button,
#im-invoice-entry-modal .modal-close-btn,
#im-batch-search-modal .secondary-btn,
#im-add-payment-modal .secondary-btn,
#im-manual-po-modal .secondary-btn,
#im-mobile-search-modal .secondary-btn,
#im-finance-report-modal .secondary-btn {
    background: #f2fff8 !important;
    color: var(--im-879-green-dark) !important;
    -webkit-text-fill-color: var(--im-879-green-dark) !important;
    border: 1px solid rgba(17, 96, 69, 0.22) !important;
    box-shadow: none !important;
}
#invoice-management-view .download-btn--gold {
    background: linear-gradient(135deg, #fff3b0, #ffd43b) !important;
    color: #3b2f00 !important;
    -webkit-text-fill-color: #3b2f00 !important;
    border-color: rgba(255, 212, 59, 0.34) !important;
}
#invoice-management-view .delete-btn,
#invoice-management-view button[id*="delete"],
#im-invoice-entry-modal #im-delete-invoice-btn,
#im-invoice-entry-modal button[id*="delete"] {
    background: linear-gradient(135deg, #991b1b, #dc2626) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
}
#invoice-management-view button i,
#invoice-management-view button span,
#invoice-management-view .download-btn i,
#invoice-management-view .download-btn span,
#invoice-management-view .print-btn i,
#invoice-management-view .print-btn span,
#invoice-management-view .action-btn,
#invoice-management-view .action-btn i,
#im-invoice-entry-modal button i,
#im-invoice-entry-modal button span,
#im-invoice-entry-modal .action-btn,
#im-invoice-entry-modal .action-btn i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
}

/* ------------------------- Invoice Records: green, readable ------------------------- */
#invoice-management-view #im-reporting .daily-report-section button,
#invoice-management-view #im-reporting > .header .daily-report-section button {
    border-radius: 999px !important;
    border: 1px solid rgba(216, 250, 233, 0.62) !important;
    box-shadow: 0 12px 25px rgba(7, 53, 36, 0.18) !important;
}
#invoice-management-view #im-reporting .download-btn--periwinkle,
#invoice-management-view #im-reporting .download-btn--teal,
#invoice-management-view #im-reporting .im-export-excel-btn,
#invoice-management-view #im-reporting .im-reporting-refresh-mini {
    background: rgba(255,255,255,0.96) !important;
    color: var(--im-879-green-dark) !important;
    -webkit-text-fill-color: var(--im-879-green-dark) !important;
}
#invoice-management-view #im-reporting .grid-header,
#invoice-management-view #im-reporting .im-reporting-grid-header,
#invoice-management-view #im-reporting-content table thead,
#invoice-management-view #im-reporting-content table thead tr,
#invoice-management-view #im-reporting-content table thead th {
    background: linear-gradient(135deg, var(--im-879-green-dark), var(--im-879-green-mid), var(--im-879-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(216, 250, 233, 0.22) !important;
    box-shadow: none !important;
}
#invoice-management-view #im-reporting .grid-header .grid-cell,
#invoice-management-view #im-reporting .im-reporting-grid-header *,
#invoice-management-view #im-reporting-content table thead th * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
#invoice-management-view #im-reporting .grid-body,
#invoice-management-view #im-reporting-content {
    background: #ffffff !important;
    border-color: rgba(17, 96, 69, 0.14) !important;
    box-shadow: 0 14px 34px rgba(7, 53, 36, 0.06) !important;
}
#invoice-management-view #im-reporting .invoice-card,
#invoice-management-view #im-reporting-content .invoice-card,
#invoice-management-view #im-reporting .master-grid-row,
#invoice-management-view #im-reporting-content .master-grid-row {
    background: #ffffff !important;
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
    border-color: rgba(17, 96, 69, 0.12) !important;
    box-shadow: none !important;
}
#invoice-management-view #im-reporting .invoice-card:hover,
#invoice-management-view #im-reporting-content .invoice-card:hover,
#invoice-management-view #im-reporting .invoice-card.expanded {
    border-color: rgba(17, 96, 69, 0.32) !important;
    box-shadow: 0 12px 26px rgba(7, 53, 36, 0.08) !important;
    transform: none !important;
}
#invoice-management-view #im-reporting .master-grid-row .grid-cell,
#invoice-management-view #im-reporting-content .master-grid-row .grid-cell,
#invoice-management-view #im-reporting .detail-grid-row,
#invoice-management-view #im-reporting .loading-state {
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
}
#invoice-management-view #im-reporting .detail-grid-row {
    background: #f7fffb !important;
    border-top-color: rgba(17, 96, 69, 0.12) !important;
}
#invoice-management-view #im-reporting .im-reporting-po-master,
#invoice-management-view #im-reporting-content .im-reporting-po-master {
    background: #eaf8f1 !important;
    color: var(--im-879-green-dark) !important;
    -webkit-text-fill-color: var(--im-879-green-dark) !important;
}
#invoice-management-view #im-reporting .reporting-legend {
    background: #ffffff !important;
    border: 1px solid rgba(17, 96, 69, 0.14) !important;
    box-shadow: none !important;
}
#invoice-management-view #im-reporting .reporting-legend .legend-item {
    color: var(--im-879-text) !important;
    -webkit-text-fill-color: var(--im-879-text) !important;
}
#invoice-management-view #im-reporting .reporting-legend .legend-item:nth-child(1) .legend-color {
    background-color: #d8fae9 !important;
}
#invoice-management-view #im-reporting .reporting-legend .legend-item:nth-child(2) .legend-color {
    background-color: #fff3b0 !important;
}

/* Bottom search result summary / grand total: remove old blue and avoid green-on-green text. */
#invoice-management-view #im-reporting-grand-total-container {
    padding-right: 0 !important;
}
#invoice-management-view #im-reporting-grand-total-container .summary-wrapper,
#invoice-management-view #im-reporting .summary-wrapper,
#invoice-management-view .summary-wrapper {
    background: linear-gradient(135deg, var(--im-879-green-dark) 0%, var(--im-879-green-mid) 50%, var(--im-879-green) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(216, 250, 233, 0.22) !important;
    box-shadow: 0 14px 34px rgba(7, 53, 36, 0.16) !important;
}
#invoice-management-view #im-reporting-grand-total-container .summary-wrapper *,
#invoice-management-view #im-reporting .summary-wrapper *,
#invoice-management-view .summary-wrapper * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}
#invoice-management-view #im-reporting-total-inv-value,
#invoice-management-view #im-reporting-total-paid-value,
#invoice-management-view #im-reporting-total-balance-value,
#invoice-management-view .im-reporting-total-value,
#invoice-management-view .im-reporting-total-label,
#invoice-management-view .im-reporting-totals-card,
#invoice-management-view .im-reporting-total-item {
    border-color: rgba(17, 96, 69, 0.14) !important;
}
#invoice-management-view .im-reporting-totals-card {
    background: #ffffff !important;
    box-shadow: none !important;
}
#invoice-management-view .im-reporting-total-label {
    color: var(--im-879-muted) !important;
    -webkit-text-fill-color: var(--im-879-muted) !important;
}
#invoice-management-view .im-reporting-total-value {
    color: var(--im-879-green-dark) !important;
    -webkit-text-fill-color: var(--im-879-green-dark) !important;
}

@media (max-width: 768px) {
    #invoice-management-view #im-modal-po-details .po-compact-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    #invoice-management-view #im-reporting-form .controls-row,
    #invoice-management-view #im-reporting-form .filter-group {
        grid-template-columns: 1fr !important;
    }
}


/* ========================================================================
   8.8.0 — Invoice Management WorkDesk-header clone + contrast cleanup
   Scope: Invoice Management only.
   Goal:
   - Make every Invoice Management section header follow the clean WorkDesk
     dashboard/action-center hero style: one full header, small eyebrow label,
     large title, thin underline, description, actions on the right.
   - Remove the extra rounded inner line/card inside Invoice Records header.
   - Remove remaining blue/navy modal headers from Invoice Entry, History, and
     Batch Search modals.
   - Fix button/table/footer contrast, especially Existing Invoices totals.
   ======================================================================== */
:root {
    --im-880-green: #116045;
    --im-880-green-mid: #0d4f39;
    --im-880-green-dark: #063322;
    --im-880-green-deep: #042418;
    --im-880-green-soft: #eaf8f1;
    --im-880-line: rgba(255, 255, 255, .86);
    --im-880-text: #123326;
    --im-880-muted: #5f756c;
    --im-880-border: rgba(17, 96, 69, .16);
}

/* ===== Invoice Management section headers: clone WorkDesk hero style ===== */
#invoice-management-view .im-standard-hero,
#invoice-management-view #im-dashboard .im-dashboard-hero,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero,
#invoice-management-view #im-batch-entry > .header-top,
#invoice-management-view #im-summary-note > div:first-of-type,
#invoice-management-view #im-reporting > .header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 160px !important;
    padding: 28px 30px !important;
    margin: 0 0 20px 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    box-shadow: 0 18px 46px rgba(6, 51, 34, .16) !important;
    background:
        radial-gradient(circle at 96% 12%, rgba(255, 255, 255, .18), transparent 30%),
        radial-gradient(circle at 4% 0%, rgba(67, 222, 156, .16), transparent 34%),
        linear-gradient(135deg, var(--im-880-green-dark) 0%, var(--im-880-green-mid) 54%, var(--im-880-green) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#invoice-management-view .im-standard-hero::before,
#invoice-management-view #im-dashboard .im-dashboard-hero::before,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero::before,
#invoice-management-view #im-batch-entry > .header-top::before,
#invoice-management-view #im-summary-note > div:first-of-type::before,
#invoice-management-view #im-reporting > .header::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.052) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    opacity: .42 !important;
    pointer-events: none !important;
}

#invoice-management-view .im-standard-hero::after,
#invoice-management-view #im-dashboard .im-dashboard-hero::after,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero::after,
#invoice-management-view #im-batch-entry > .header-top::after,
#invoice-management-view #im-summary-note > div:first-of-type::after,
#invoice-management-view #im-reporting > .header::after {
    content: "" !important;
    position: absolute !important;
    right: -78px !important;
    top: -92px !important;
    width: 260px !important;
    height: 260px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .13) !important;
    pointer-events: none !important;
}

#invoice-management-view .im-standard-hero > *,
#invoice-management-view #im-dashboard .im-dashboard-hero > *,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero > *,
#invoice-management-view #im-batch-entry > .header-top > *,
#invoice-management-view #im-summary-note > div:first-of-type > *,
#invoice-management-view #im-reporting > .header > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Invoice Records previously had a second rounded card inside the header. Remove it. */
#invoice-management-view #im-reporting > .header .header-top,
#invoice-management-view #im-reporting > .header .im-reporting-hero-layout {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
}
#invoice-management-view #im-reporting > .header .header-top::before,
#invoice-management-view #im-reporting > .header .header-top::after,
#invoice-management-view #im-reporting > .header .im-reporting-hero-layout::before,
#invoice-management-view #im-reporting > .header .im-reporting-hero-layout::after {
    display: none !important;
    content: none !important;
}

/* Left copy stack: small label, title, underline, description. */
#invoice-management-view .im-standard-hero-main,
#invoice-management-view #im-dashboard .im-dashboard-hero-main,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero-main,
#invoice-management-view #im-batch-entry > .header-top .header-title,
#invoice-management-view #im-summary-note > div:first-of-type > div:first-child,
#invoice-management-view #im-reporting > .header .header-title,
#invoice-management-view #im-reporting > .header .im-reporting-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    max-width: 760px !important;
    min-width: 0 !important;
}

#invoice-management-view .im-standard-eyebrow,
#invoice-management-view #im-dashboard .im-dashboard-eyebrow,
#invoice-management-view #im-batch-entry > .header-top .header-title::before,
#invoice-management-view #im-summary-note > div:first-of-type > div:first-child::before,
#invoice-management-view #im-reporting > .header .header-title::before,
#invoice-management-view #im-reporting > .header .im-reporting-hero-copy::before {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(235, 255, 245, .98) !important;
    -webkit-text-fill-color: rgba(235, 255, 245, .98) !important;
    font-size: .76rem !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}
#invoice-management-view #im-batch-entry > .header-top .header-title::before { content: "BULK INVOICE ENTRY" !important; }
#invoice-management-view #im-summary-note > div:first-of-type > div:first-child::before { content: "SUMMARY NOTE MANAGER" !important; }
#invoice-management-view #im-reporting > .header .im-reporting-hero-copy::before,
#invoice-management-view #im-reporting > .header .header-title::before { content: "RECORDS & REPORTS" !important; }

#invoice-management-view #im-batch-entry > .header-top .icon-wrapper,
#invoice-management-view #im-reporting > .header .icon-wrapper,
#invoice-management-view #im-dashboard .im-dashboard-title-icon {
    display: none !important;
}

#invoice-management-view .im-standard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-hero h1,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero h1,
#invoice-management-view #im-batch-entry > .header-top h1,
#invoice-management-view #im-summary-note > div:first-of-type h1,
#invoice-management-view #im-reporting > .header h1 {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(2rem, 3.1vw, 3rem) !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
    font-weight: 950 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
}

#invoice-management-view .im-standard-hero h1::after,
#invoice-management-view #im-dashboard .im-dashboard-hero h1::after,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero h1::after,
#invoice-management-view #im-batch-entry > .header-top h1::after,
#invoice-management-view #im-summary-note > div:first-of-type h1::after,
#invoice-management-view #im-reporting > .header h1::after {
    content: "" !important;
    display: block !important;
    width: min(300px, 100%) !important;
    height: 2px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    background: var(--im-880-line) !important;
    box-shadow: none !important;
    position: static !important;
}

#invoice-management-view .im-standard-hero p,
#invoice-management-view #im-dashboard .im-dashboard-hero p,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero p,
#invoice-management-view #im-batch-entry > .header-top p,
#invoice-management-view #im-summary-note > div:first-of-type p,
#invoice-management-view #im-reporting > .header p,
#invoice-management-view #im-reporting > .header .im-reporting-hero-subtitle,
#invoice-management-view #im-reporting > .header .im-reporting-hero-subtitle strong {
    margin: 12px 0 0 0 !important;
    max-width: 720px !important;
    color: rgba(255,255,255,.92) !important;
    -webkit-text-fill-color: rgba(255,255,255,.92) !important;
    font-size: .95rem !important;
    font-weight: 750 !important;
    line-height: 1.55 !important;
    text-shadow: none !important;
}

/* Header right-side buttons: no blue, readable, rounded like WorkDesk hero controls. */
#invoice-management-view .im-standard-hero-actions,
#invoice-management-view #im-batch-entry > .header-top > div:last-child,
#invoice-management-view #im-summary-note > div:first-of-type > div:last-child,
#invoice-management-view #im-reporting > .header .daily-report-section,
#invoice-management-view #im-reporting > .header .im-reporting-hero-actions {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-self: center !important;
}
#invoice-management-view .im-standard-hero-actions button,
#invoice-management-view #im-batch-entry > .header-top button,
#invoice-management-view #im-summary-note > div:first-of-type button,
#invoice-management-view #im-reporting > .header button {
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--im-880-green-dark) !important;
    -webkit-text-fill-color: var(--im-880-green-dark) !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(6, 51, 34, .18) !important;
    text-shadow: none !important;
}
#invoice-management-view #im-reporting > .header .download-btn--gold {
    background: linear-gradient(135deg, #fff4b8, #ffd84a) !important;
    color: #3b2f00 !important;
    -webkit-text-fill-color: #3b2f00 !important;
    border-color: rgba(255,255,255,.72) !important;
}

/* Found count should be plain text under the title, not a pill/card. */
#invoice-management-view #reporting-count-display,
#invoice-management-view #reporting-count-display.im-found-count-chip,
#invoice-management-view .table-count-display,
#invoice-management-view h2 .table-count-display {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}
#invoice-management-view #reporting-count-display:empty,
#invoice-management-view #reporting-count-display.im-found-count-chip:empty { display: none !important; }

/* ===== Modal headers: remove remaining navy/blue from Invoice Management modals ===== */
#im-invoice-entry-modal .modal-header,
#im-mobile-search-modal .modal-header,
#im-batch-search-modal .modal-header,
#im-attention-picker-modal .modal-header,
#im-add-payment-modal .modal-header,
#im-manual-po-modal .modal-header,
#im-finance-report-modal .modal-header,
#im-invoice-print-modal .modal-header,
#history-modal .modal-header,
#history-modal .history-modal-header,
#process-report-modal .modal-header {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 96% 14%, rgba(255,255,255,.16), transparent 32%),
        linear-gradient(135deg, var(--im-880-green-dark), var(--im-880-green-mid), var(--im-880-green)) !important;
    border-bottom: 1px solid rgba(255,255,255,.22) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}
#im-invoice-entry-modal .modal-header *,
#im-mobile-search-modal .modal-header *,
#im-batch-search-modal .modal-header *,
#im-attention-picker-modal .modal-header *,
#im-add-payment-modal .modal-header *,
#im-manual-po-modal .modal-header *,
#im-finance-report-modal .modal-header *,
#im-invoice-print-modal .modal-header *,
#history-modal .modal-header *,
#history-modal .history-modal-header *,
#process-report-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
#im-invoice-entry-modal .modal-header h2,
#im-mobile-search-modal .modal-header h2,
#im-batch-search-modal .modal-header h2,
#history-modal .modal-header h2,
#history-modal .history-modal-header h2,
#process-report-modal .modal-header h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}
#im-invoice-entry-modal .modal-header h2::after,
#im-mobile-search-modal .modal-header h2::after,
#im-batch-search-modal .modal-header h2::after,
#history-modal .modal-header h2::after,
#history-modal .history-modal-header h2::after {
    content: "" !important;
    display: block !important;
    width: min(260px, 100%) !important;
    height: 2px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
}
#im-invoice-entry-modal .modal-header .modal-close-btn,
#im-mobile-search-modal .modal-header .modal-close-btn,
#im-batch-search-modal .modal-header .modal-close-btn,
#im-attention-picker-modal .modal-header .modal-close-btn,
#history-modal .modal-header .modal-close-btn,
#process-report-modal .modal-header .modal-close-btn {
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}
#im-invoice-entry-modal #im-nav-prev,
#im-invoice-entry-modal #im-nav-next,
#im-invoice-entry-modal #im-nav-counter {
    background: rgba(255,255,255,.96) !important;
    color: var(--im-880-green-dark) !important;
    -webkit-text-fill-color: var(--im-880-green-dark) !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
}

/* ===== Invoice Entry body: reduce card-on-card feeling ===== */
#invoice-management-view #im-po-search-container,
#invoice-management-view #im-modal-po-details,
#invoice-management-view #im-existing-invoices-container,
#invoice-management-view #im-po-details-container-duplicate,
#invoice-management-view #im-reporting-form,
#im-batch-search-modal .search-and-filter-group,
#im-batch-search-modal #im-batch-modal-results {
    background: #ffffff !important;
    border: 1px solid var(--im-880-border) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}
#invoice-management-view #im-po-details-container-duplicate,
#invoice-management-view #im-po-details-container-duplicate.im-po-details-container {
    display: none !important;
}
#invoice-management-view #im-modal-po-details,
#invoice-management-view #im-modal-po-details .po-compact-grid,
#invoice-management-view #im-modal-po-details .po-compact-grid > div,
#invoice-management-view #im-modal-po-details .po-compact-grid > div[style] {
    background: #f8fffb !important;
    color: var(--im-880-text) !important;
    -webkit-text-fill-color: var(--im-880-text) !important;
    border-color: rgba(17,96,69,.14) !important;
    box-shadow: none !important;
}
#invoice-management-view #im-modal-po-details label,
#invoice-management-view #im-modal-po-details strong,
#invoice-management-view #im-modal-po-details .im-po-record {
    color: var(--im-880-green-dark) !important;
    -webkit-text-fill-color: var(--im-880-green-dark) !important;
}

/* ===== Existing Invoices table: rounded corners + readable total row ===== */
#invoice-management-view #im-existing-invoices-container .table-wrapper {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(17, 96, 69, .14) !important;
    background: #ffffff !important;
    padding: 10px !important;
    box-shadow: none !important;
}
#invoice-management-view #im-existing-invoices-container table,
#invoice-management-view #im-invoices-table,
#invoice-management-view #im-reporting-content table,
#history-modal table,
#im-batch-search-modal table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
#invoice-management-view #im-existing-invoices-container table thead th,
#invoice-management-view #im-invoices-table thead th,
#invoice-management-view #im-reporting-content table thead th,
#history-modal table thead th,
#im-batch-search-modal table thead th {
    background: linear-gradient(135deg, var(--im-880-green-dark), var(--im-880-green-mid)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255,255,255,.12) !important;
    text-shadow: none !important;
}
#invoice-management-view #im-existing-invoices-container table thead th:first-child,
#invoice-management-view #im-invoices-table thead th:first-child,
#invoice-management-view #im-reporting-content table thead th:first-child,
#history-modal table thead th:first-child,
#im-batch-search-modal table thead th:first-child { border-top-left-radius: 12px !important; }
#invoice-management-view #im-existing-invoices-container table thead th:last-child,
#invoice-management-view #im-invoices-table thead th:last-child,
#invoice-management-view #im-reporting-content table thead th:last-child,
#history-modal table thead th:last-child,
#im-batch-search-modal table thead th:last-child { border-top-right-radius: 12px !important; }

#invoice-management-view #im-existing-invoices-container table tfoot,
#invoice-management-view #im-existing-invoices-container table tfoot tr,
#invoice-management-view #im-existing-invoices-container table tfoot td,
#invoice-management-view #im-invoices-table-footer,
#invoice-management-view #im-invoices-table-footer tr,
#invoice-management-view #im-invoices-table-footer td,
#invoice-management-view #im-invoices-table tfoot,
#invoice-management-view #im-invoices-table tfoot tr,
#invoice-management-view #im-invoices-table tfoot td {
    background: linear-gradient(135deg, var(--im-880-green-dark), var(--im-880-green-mid)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
    text-shadow: none !important;
    border-color: rgba(255,255,255,.12) !important;
}
#invoice-management-view #im-existing-invoices-container table tfoot *,
#invoice-management-view #im-invoices-table-footer *,
#invoice-management-view #im-invoices-total-value,
#invoice-management-view #im-invoices-total-paid {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
#invoice-management-view #im-existing-invoices-container table tfoot tr:last-child td:first-child,
#invoice-management-view #im-invoices-table-footer tr:last-child td:first-child { border-bottom-left-radius: 12px !important; }
#invoice-management-view #im-existing-invoices-container table tfoot tr:last-child td:last-child,
#invoice-management-view #im-invoices-table-footer tr:last-child td:last-child { border-bottom-right-radius: 12px !important; }

/* ===== Invoice Management buttons: contrast rule, no blue leftovers ===== */
#invoice-management-view button,
#invoice-management-view .download-btn,
#invoice-management-view .print-btn,
#invoice-management-view .primary-btn,
#invoice-management-view .secondary-btn,
#invoice-management-view .refresh-btn,
#invoice-management-view .action-btn,
#im-invoice-entry-modal button,
#im-batch-search-modal button,
#im-mobile-search-modal button,
#history-modal button {
    font-weight: 900 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
#invoice-management-view .primary-btn,
#invoice-management-view .download-btn:not(.download-btn--gold),
#invoice-management-view #im-po-search-button,
#invoice-management-view #im-open-invoice-form-btn,
#invoice-management-view #im-batch-add-po-button,
#invoice-management-view #im-batch-search-by-status-button,
#invoice-management-view #im-batch-search-by-note-button,
#invoice-management-view #im-batch-save-button,
#invoice-management-view #im-reporting-search-btn,
#invoice-management-view #im-reporting-download-btn,
#invoice-management-view #im-download-excel-custom-btn,
#im-invoice-entry-modal #im-add-invoice-button,
#im-invoice-entry-modal #im-update-invoice-button,
#im-invoice-entry-modal #im-modal-deletion-list-btn,
#im-invoice-entry-modal #im-btn-view-invoice,
#im-invoice-entry-modal #im-btn-view-srv,
#im-invoice-entry-modal .download-btn,
#im-batch-search-modal #im-batch-modal-search-btn,
#im-batch-search-modal #im-batch-modal-add-selected-btn,
#history-modal .primary-btn {
    background: linear-gradient(135deg, var(--im-880-green-mid), var(--im-880-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(17,96,69,.20) !important;
    box-shadow: 0 10px 22px rgba(6, 51, 34, .16) !important;
}
#invoice-management-view .secondary-btn:not(.download-btn--gold),
#invoice-management-view .print-btn,
#invoice-management-view .refresh-btn,
#invoice-management-view #im-reporting-clear-button,
#invoice-management-view #printSummaryBtn,
#invoice-management-view #printDetailedBtn,
#invoice-management-view #im-refresh-reporting-button,
#invoice-management-view #im-refresh-entry-button,
#invoice-management-view #im-po-clear-button,
#im-invoice-entry-modal .secondary-btn:not(#im-add-invoice-button):not(#im-update-invoice-button):not(#im-modal-deletion-list-btn):not(#im-delete-invoice-btn),
#im-invoice-entry-modal #btn-open-report-drive,
#im-invoice-entry-modal #im-po-search-button-bottom,
#im-invoice-entry-modal #im-clear-form-button,
#im-invoice-entry-modal #im-back-to-active-task-button,
#im-batch-search-modal .secondary-btn,
#im-mobile-search-modal .secondary-btn,
#history-modal .secondary-btn {
    background: #f2fff8 !important;
    color: var(--im-880-green-dark) !important;
    -webkit-text-fill-color: var(--im-880-green-dark) !important;
    border: 1px solid rgba(17, 96, 69, .22) !important;
    box-shadow: 0 8px 18px rgba(6, 51, 34, .08) !important;
}
#invoice-management-view .download-btn--gold {
    background: linear-gradient(135deg, #fff4b8, #ffd43b) !important;
    color: #3b2f00 !important;
    -webkit-text-fill-color: #3b2f00 !important;
    border-color: rgba(255, 212, 59, .45) !important;
}
#invoice-management-view .delete-btn,
#invoice-management-view button[id*="delete"],
#im-invoice-entry-modal #im-delete-invoice-btn,
#im-invoice-entry-modal button[id*="delete"],
#history-modal button[id*="delete"] {
    background: linear-gradient(135deg, #991b1b, #dc2626) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}
#invoice-management-view button *,
#invoice-management-view .download-btn *,
#invoice-management-view .print-btn *,
#invoice-management-view .primary-btn *,
#invoice-management-view .secondary-btn *,
#invoice-management-view .action-btn *,
#im-invoice-entry-modal button *,
#im-batch-search-modal button *,
#im-mobile-search-modal button *,
#history-modal button * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
}

/* ===== Forms/search/result summary: remove blue focus/summary leftovers ===== */
#invoice-management-view input:focus,
#invoice-management-view select:focus,
#invoice-management-view textarea:focus,
#im-invoice-entry-modal input:focus,
#im-invoice-entry-modal select:focus,
#im-invoice-entry-modal textarea:focus,
#im-batch-search-modal input:focus,
#im-mobile-search-modal input:focus,
#im-mobile-search-modal select:focus {
    border-color: var(--im-880-green) !important;
    box-shadow: 0 0 0 3px rgba(17,96,69,.12) !important;
    outline: none !important;
}
#invoice-management-view #im-reporting-grand-total-container .summary-wrapper,
#invoice-management-view #im-reporting .summary-wrapper,
#invoice-management-view .summary-wrapper {
    background: linear-gradient(135deg, var(--im-880-green-dark), var(--im-880-green-mid), var(--im-880-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: 0 14px 30px rgba(6, 51, 34, .14) !important;
}
#invoice-management-view #im-reporting-grand-total-container .summary-wrapper *,
#invoice-management-view #im-reporting .summary-wrapper *,
#invoice-management-view .summary-wrapper * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

@media (max-width: 980px) {
    #invoice-management-view .im-standard-hero,
    #invoice-management-view #im-dashboard .im-dashboard-hero,
    #invoice-management-view #im-dashboard .im-dashboard-standby-hero,
    #invoice-management-view #im-batch-entry > .header-top,
    #invoice-management-view #im-summary-note > div:first-of-type,
    #invoice-management-view #im-reporting > .header,
    #invoice-management-view #im-reporting > .header .header-top,
    #invoice-management-view #im-reporting > .header .im-reporting-hero-layout {
        min-height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    #invoice-management-view .im-standard-hero-actions,
    #invoice-management-view #im-batch-entry > .header-top > div:last-child,
    #invoice-management-view #im-summary-note > div:first-of-type > div:last-child,
    #invoice-management-view #im-reporting > .header .daily-report-section,
    #invoice-management-view #im-reporting > .header .im-reporting-hero-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        align-self: stretch !important;
    }
}


/* ========================================================================
   8.8.1 — Invoice Management modal/header final green override
   Scope: Invoice Management only.
   Fixes requested after 8.8.0:
   - Search PO / Batch Search / Invoice Entry / History modal headers still blue
   - History table header still blue
   - Footer Close button became too small/round and text overflowed
   - Keep WorkDesk-style underline effect, but using Invoice green theme
   ======================================================================== */
:root {
    --im-881-green: #116045;
    --im-881-green-mid: #0d4f39;
    --im-881-green-dark: #063322;
    --im-881-green-deep: #042418;
    --im-881-green-line: rgba(196, 255, 221, .96);
    --im-881-green-line-soft: rgba(196, 255, 221, .72);
    --im-881-green-soft: #edf9f3;
}

/* WorkDesk-style section-title underline, but green/white toned for Invoice. */
#invoice-management-view .im-standard-hero h1::after,
#invoice-management-view #im-dashboard .im-dashboard-hero h1::after,
#invoice-management-view #im-dashboard .im-dashboard-standby-hero h1::after,
#invoice-management-view #im-batch-entry > .header-top h1::after,
#invoice-management-view #im-summary-note > div:first-of-type h1::after,
#invoice-management-view #im-reporting > .header h1::after,
#invoice-management-view #im-reporting > .header .header-title h1::after,
#invoice-management-view #im-reporting > .header .im-reporting-hero-copy h1::after {
    content: "" !important;
    display: block !important;
    width: min(300px, 100%) !important;
    height: 2px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--im-881-green-line), rgba(255,255,255,.58), rgba(255,255,255,0)) !important;
    box-shadow: none !important;
    border: 0 !important;
    position: static !important;
}

/* HARD OVERRIDE: every Invoice Management modal header must be green, not navy/blue. */
body #im-invoice-entry-modal > .modal-container > .modal-header,
body #im-invoice-entry-modal .modal-container > .modal-header,
body #im-mobile-search-modal > .modal-container > .modal-header,
body #im-mobile-search-modal .modal-container > .modal-header,
body #im-batch-search-modal > .modal-container > .modal-header,
body #im-batch-search-modal .modal-container > .modal-header,
body #im-attention-picker-modal > .modal-container > .modal-header,
body #im-attention-picker-modal .modal-container > .modal-header,
body #im-add-payment-modal > .modal-container > .modal-header,
body #im-add-payment-modal .modal-container > .modal-header,
body #im-manual-po-modal > .modal-container > .modal-header,
body #im-manual-po-modal .modal-container > .modal-header,
body #im-finance-report-modal > .modal-container > .modal-header,
body #im-finance-report-modal .modal-container > .modal-header,
body #im-invoice-print-modal .modal-header,
body #history-modal > .modal-container > .modal-header,
body #history-modal .modal-container > .modal-header,
body #history-modal .history-modal-header,
body #process-report-modal > .modal-container > .modal-header,
body #process-report-modal .modal-container > .modal-header {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 72px !important;
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background:
        radial-gradient(circle at 96% 10%, rgba(255,255,255,.18), transparent 34%),
        radial-gradient(circle at 4% 0%, rgba(85, 235, 169, .15), transparent 34%),
        linear-gradient(135deg, var(--im-881-green-deep) 0%, var(--im-881-green-dark) 52%, var(--im-881-green) 100%) !important;
    background-color: var(--im-881-green) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(196,255,221,.34) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}
body #im-invoice-entry-modal > .modal-container > .modal-header::before,
body #im-invoice-entry-modal .modal-container > .modal-header::before,
body #im-mobile-search-modal .modal-container > .modal-header::before,
body #im-batch-search-modal .modal-container > .modal-header::before,
body #im-attention-picker-modal .modal-container > .modal-header::before,
body #im-add-payment-modal .modal-container > .modal-header::before,
body #im-manual-po-modal .modal-container > .modal-header::before,
body #im-finance-report-modal .modal-container > .modal-header::before,
body #history-modal .modal-container > .modal-header::before,
body #process-report-modal .modal-container > .modal-header::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    pointer-events: none !important;
}
body #im-invoice-entry-modal .modal-header *,
body #im-mobile-search-modal .modal-header *,
body #im-batch-search-modal .modal-header *,
body #im-attention-picker-modal .modal-header *,
body #im-add-payment-modal .modal-header *,
body #im-manual-po-modal .modal-header *,
body #im-finance-report-modal .modal-header *,
body #im-invoice-print-modal .modal-header *,
body #history-modal .modal-header *,
body #history-modal .history-modal-header *,
body #process-report-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Modal title underline: clone the WorkDesk clean line, not the old blue/cyan line. */
body #im-invoice-entry-modal .modal-header h1,
body #im-invoice-entry-modal .modal-header h2,
body #im-mobile-search-modal .modal-header h1,
body #im-mobile-search-modal .modal-header h2,
body #im-batch-search-modal .modal-header h1,
body #im-batch-search-modal .modal-header h2,
body #im-attention-picker-modal .modal-header h1,
body #im-attention-picker-modal .modal-header h2,
body #im-add-payment-modal .modal-header h1,
body #im-add-payment-modal .modal-header h2,
body #im-manual-po-modal .modal-header h1,
body #im-manual-po-modal .modal-header h2,
body #im-finance-report-modal .modal-header h1,
body #im-finance-report-modal .modal-header h2,
body #history-modal .modal-header h1,
body #history-modal .modal-header h2,
body #process-report-modal .modal-header h1,
body #process-report-modal .modal-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
    letter-spacing: -.025em !important;
    line-height: 1.06 !important;
}
body #im-invoice-entry-modal .modal-header h1::after,
body #im-invoice-entry-modal .modal-header h2::after,
body #im-mobile-search-modal .modal-header h1::after,
body #im-mobile-search-modal .modal-header h2::after,
body #im-batch-search-modal .modal-header h1::after,
body #im-batch-search-modal .modal-header h2::after,
body #im-attention-picker-modal .modal-header h1::after,
body #im-attention-picker-modal .modal-header h2::after,
body #im-add-payment-modal .modal-header h1::after,
body #im-add-payment-modal .modal-header h2::after,
body #im-manual-po-modal .modal-header h1::after,
body #im-manual-po-modal .modal-header h2::after,
body #im-finance-report-modal .modal-header h1::after,
body #im-finance-report-modal .modal-header h2::after,
body #history-modal .modal-header h1::after,
body #history-modal .modal-header h2::after,
body #process-report-modal .modal-header h1::after,
body #process-report-modal .modal-header h2::after {
    content: "" !important;
    display: block !important;
    width: min(260px, 100%) !important;
    height: 2px !important;
    margin-top: 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--im-881-green-line), rgba(255,255,255,.55), rgba(255,255,255,0)) !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
}

/* Invoice Entry inner form title was another old blue header layer. Make it green or flat. */
body #im-invoice-entry-modal #im-new-invoice-form h2#im-form-title,
body #im-invoice-entry-modal h2#im-form-title {
    background:
        linear-gradient(135deg, var(--im-881-green-dark), var(--im-881-green)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-bottom: 1px solid rgba(196,255,221,.30) !important;
    text-shadow: none !important;
}
body #im-invoice-entry-modal #im-new-invoice-form h2#im-form-title::after,
body #im-invoice-entry-modal h2#im-form-title::after {
    content: "" !important;
    display: block !important;
    width: min(220px, 100%) !important;
    height: 2px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--im-881-green-line), rgba(255,255,255,0)) !important;
}

/* Header X buttons stay square/circle icon buttons. Footer Close/Cancel buttons must NOT inherit this small size. */
body #im-invoice-entry-modal .modal-header .modal-close-btn,
body #im-mobile-search-modal .modal-header .modal-close-btn,
body #im-batch-search-modal .modal-header .modal-close-btn,
body #im-attention-picker-modal .modal-header .modal-close-btn,
body #im-add-payment-modal .modal-header .modal-close-btn,
body #im-manual-po-modal .modal-header .modal-close-btn,
body #im-finance-report-modal .modal-header .modal-close-btn,
body #history-modal .modal-header .modal-close-btn,
body #process-report-modal .modal-header .modal-close-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
body #im-invoice-entry-modal .modal-footer .modal-close-btn,
body #im-mobile-search-modal .modal-footer .modal-close-btn,
body #im-batch-search-modal .modal-footer .modal-close-btn,
body #im-attention-picker-modal .modal-footer .modal-close-btn,
body #im-add-payment-modal .modal-footer .modal-close-btn,
body #im-manual-po-modal .modal-footer .modal-close-btn,
body #im-finance-report-modal .modal-footer .modal-close-btn,
body #history-modal .modal-footer .modal-close-btn,
body #process-report-modal .modal-footer .modal-close-btn {
    width: auto !important;
    height: auto !important;
    min-width: 92px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    background: #f2fff8 !important;
    color: var(--im-881-green-dark) !important;
    -webkit-text-fill-color: var(--im-881-green-dark) !important;
    border: 1px solid rgba(17,96,69,.22) !important;
    font-size: .9rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(6,51,34,.08) !important;
}

/* History modal table header: old premium history CSS used blue; force Invoice green. */
body #history-modal table#history-table.history-premium-table thead th,
body #history-modal .history-premium-table thead th,
body #history-modal .history-table-wrapper table thead th,
body #history-modal #history-table thead th {
    background: linear-gradient(135deg, var(--im-881-green-dark), var(--im-881-green)) !important;
    background-color: var(--im-881-green) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    text-shadow: none !important;
}
body #history-modal .history-table-wrapper {
    border-color: rgba(17,96,69,.18) !important;
    box-shadow: 0 20px 48px rgba(6,51,34,.09) !important;
}
body #history-modal .history-loader,
body #history-modal .history-summary-label,
body #history-modal .history-summary-metrics b,
body #history-modal .history-note {
    color: var(--im-881-green-dark) !important;
    -webkit-text-fill-color: var(--im-881-green-dark) !important;
}
body #history-modal .history-status-cell::before,
body #history-modal .history-row.history-status-process .history-status-cell::before {
    background: var(--im-881-green) !important;
    box-shadow: 0 0 0 4px rgba(17,96,69,.10) !important;
}

/* Batch/Search PO modal result headers and scrollbars: remove remaining blue/cyan. */
body #im-batch-search-modal #im-batch-modal-results th,
body #im-batch-search-modal #im-batch-modal-results table thead th,
body #im-batch-search-modal table thead th,
body #im-add-payment-modal table thead th,
body #im-mobile-search-modal table thead th {
    background: linear-gradient(135deg, var(--im-881-green-dark), var(--im-881-green)) !important;
    background-color: var(--im-881-green) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    text-shadow: none !important;
}
body #im-batch-search-modal ::-webkit-scrollbar-thumb,
body #im-mobile-search-modal ::-webkit-scrollbar-thumb,
body #im-invoice-entry-modal ::-webkit-scrollbar-thumb,
body #history-modal ::-webkit-scrollbar-thumb {
    background: rgba(17,96,69,.55) !important;
    border-radius: 999px !important;
}
body #im-batch-search-modal ::-webkit-scrollbar-thumb:hover,
body #im-mobile-search-modal ::-webkit-scrollbar-thumb:hover,
body #im-invoice-entry-modal ::-webkit-scrollbar-thumb:hover,
body #history-modal ::-webkit-scrollbar-thumb:hover {
    background: var(--im-881-green) !important;
}

/* Blue/cyan focus leftovers inside invoice modal/search forms. */
body #im-invoice-entry-modal input:focus,
body #im-invoice-entry-modal select:focus,
body #im-invoice-entry-modal textarea:focus,
body #im-invoice-entry-modal .choices.is-focused .choices__inner,
body #im-invoice-entry-modal .choices.is-open .choices__inner,
body #im-batch-search-modal input:focus,
body #im-batch-search-modal select:focus,
body #im-mobile-search-modal input:focus,
body #im-mobile-search-modal select:focus,
body #history-modal input:focus,
body #history-modal select:focus {
    border-color: var(--im-881-green) !important;
    box-shadow: 0 0 0 3px rgba(17,96,69,.14) !important;
    outline: none !important;
}

/* ========================================================================
   8.8.2 — Inventory Maroon Theme + Material Stock Button/Table Fix
   Scope: Inventory UI only.
   Purpose:
   - Change Inventory identity from bright red to maroon #4d0000.
   - Fix Material Stock toolbar buttons so disabled/enabled states stay readable.
   - Round Material Stock table header corners and keep white header text.
   - Keep Invoice Management and WorkDesk untouched.
   ======================================================================== */
:root {
    --inv-module-accent: #4d0000 !important;
    --inv-module-accent-strong: #650000 !important;
    --inv-module-accent-soft: #fff1f1 !important;
    --inv-module-violet-a: #2b0000 !important;
    --inv-module-violet-b: #4d0000 !important;
    --inv-module-violet-c: #650000 !important;
    --inv-module-violet-d: #7a1111 !important;
    --inv-module-text-light: #ffffff !important;
    --inv-module-text-dark: #2b0000 !important;
    --inv-theme-red: #4d0000 !important;
    --inv-theme-red-deep: #2b0000 !important;
    --inv-theme-red-mid: #4d0000 !important;
    --inv-theme-red-soft: #fff1f1 !important;
}

body.inventory-mode #workdesk-view,
#inventory-view,
.inventory-themed-modal,
#ms-report-modal,
#ms-requestlist-modal,
#ms-new-material-modal,
#ms-photo-browser-modal,
#ms-add-stock-modal,
#transfer-job-modal,
#transfer-approval-modal {
    --primary-blue: #4d0000 !important;
    --iba-base-blue: #4d0000 !important;
    --iba-base-blue-dark: #2b0000 !important;
    --iba-base-blue-light: #650000 !important;
    --iba-secondary-teal: #4d0000 !important;
    --inv-module-accent: #4d0000 !important;
    --inv-module-accent-deep: #2b0000 !important;
    --inv-module-accent-mid: #650000 !important;
    --inv-module-accent-soft: #fff1f1 !important;
    --inv-theme-red: #4d0000 !important;
    --inv-theme-red-deep: #2b0000 !important;
    --inv-theme-red-mid: #4d0000 !important;
    --inv-theme-red-soft: #fff1f1 !important;
}

.welcome-module-inventory { --welcome-accent: #4d0000 !important; }

/* Inventory shell/sidebar: maroon, not bright red. */
body.inventory-mode #workdesk-view .workdesk-sidebar,
#inventory-view .workdesk-sidebar {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.12), transparent 34%),
        radial-gradient(circle at 95% 20%, rgba(122, 17, 17, 0.28), transparent 36%),
        linear-gradient(180deg, #2b0000 0%, #4d0000 54%, #650000 100%) !important;
    border-right-color: rgba(255, 241, 241, 0.25) !important;
    box-shadow: 12px 0 34px rgba(43, 0, 0, 0.28) !important;
}

body.inventory-mode #workdesk-view .wd-control-center-hero,
body.inventory-mode #workdesk-view .wd-page-hero,
body.inventory-mode #workdesk-view .wd-page-hero-active,
body.inventory-mode #workdesk-view .wd-page-hero-records,
body.inventory-mode #workdesk-view .wd-page-hero-records-inventory,
body.inventory-mode #workdesk-view .wd-page-hero-material,
#inventory-view .workdesk-section > h1 {
    background:
        radial-gradient(circle at 88% 16%, rgba(122, 17, 17, 0.30), transparent 32%),
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.13), transparent 36%),
        linear-gradient(135deg, #2b0000 0%, #4d0000 55%, #650000 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 241, 241, 0.30) !important;
    box-shadow: 0 24px 58px rgba(43, 0, 0, 0.22) !important;
}

body.inventory-mode #workdesk-view .wd-page-hero-main h1,
body.inventory-mode #workdesk-view .wd-page-hero h1,
body.inventory-mode #workdesk-view .wd-control-center-hero h1,
body.inventory-mode #workdesk-view #wd-material-stock .wd-page-hero h1,
#inventory-view .workdesk-section > h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(20, 0, 0, 0.40) !important;
}

body.inventory-mode #workdesk-view .wd-page-eyebrow,
body.inventory-mode #workdesk-view .wd-control-eyebrow,
body.inventory-mode #workdesk-view #wd-material-stock .wd-page-eyebrow {
    color: #ffe3e3 !important;
    border-color: rgba(255, 241, 241, 0.28) !important;
}

body.inventory-mode #workdesk-view .wd-page-hero-main h1::after,
body.inventory-mode #workdesk-view .wd-page-hero h1::after {
    background: linear-gradient(90deg, #ffffff, rgba(255, 227, 227, 0.70), transparent) !important;
}

/* Inventory side menu hover/active stays clean but maroon-coordinated. */
body.inventory-mode #workdesk-view .workdesk-navigation a.active,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.active,
#inventory-view .workdesk-navigation a.active,
#inventory-view .workdesk-footer-nav a.active {
    background: linear-gradient(135deg, #fff8f8 0%, #ffe3e3 100%) !important;
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
    border-color: rgba(255, 241, 241, 0.72) !important;
    border-left-color: #4d0000 !important;
    box-shadow: 0 12px 25px rgba(43, 0, 0, 0.24) !important;
}
body.inventory-mode #workdesk-view .workdesk-navigation a.active i,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.active i,
body.inventory-mode #workdesk-view .workdesk-navigation a.active span:not(.notification-badge),
body.inventory-mode #workdesk-view .workdesk-footer-nav a.active span:not(.notification-badge),
#inventory-view .workdesk-navigation a.active i,
#inventory-view .workdesk-footer-nav a.active i,
#inventory-view .workdesk-navigation a.active span:not(.notification-badge),
#inventory-view .workdesk-footer-nav a.active span:not(.notification-badge) {
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
}

body.inventory-mode #workdesk-view .workdesk-navigation a:hover,
body.inventory-mode #workdesk-view .workdesk-footer-nav a:hover,
#inventory-view .workdesk-navigation a:hover,
#inventory-view .workdesk-footer-nav a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 241, 241, 0.32) !important;
    border-left-color: #ffffff !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active {
    background: linear-gradient(135deg, #fff8f8 0%, #ffe3e3 100%) !important;
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
    border: 1px solid rgba(77, 0, 0, 0.34) !important;
    border-left: 4px solid #4d0000 !important;
    box-shadow: 0 12px 25px rgba(43, 0, 0, 0.18) !important;
}
body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active i,
body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active i,
body.inventory-mode #workdesk-view .workdesk-navigation a.nav-pulse-active span:not(.notification-badge),
body.inventory-mode #workdesk-view .workdesk-footer-nav a.nav-pulse-active span:not(.notification-badge) {
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
}

/* Material Stock toolbar/search buttons: readable enabled and disabled states. */
body.inventory-mode #workdesk-view #wd-material-stock .ms-premium-searchbar,
body.inventory-mode #workdesk-view #wd-material-stock .wd-premium-searchbar,
body.inventory-mode #workdesk-view #ms-search-container {
    border-color: rgba(77, 0, 0, 0.14) !important;
    box-shadow: 0 12px 28px rgba(43, 0, 0, 0.07) !important;
}

body.inventory-mode #workdesk-view #wd-material-stock button,
body.inventory-mode #workdesk-view #ms-search-container button,
body.inventory-mode #workdesk-view button[onclick*="openTransferModal"],
#inventory-view #wd-material-stock button,
#inventory-view #ms-search-container button,
#inventory-view button[onclick*="openTransferModal"] {
    border-radius: 14px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.inventory-mode #workdesk-view button[onclick*="openTransferModal"]:not(:disabled),
body.inventory-mode #workdesk-view #ms-add-new-btn,
body.inventory-mode #workdesk-view #ms-open-requestlist-btn,
body.inventory-mode #workdesk-view #ms-open-report-modal-btn,
body.inventory-mode #workdesk-view #wd-inventory-intransit-report-btn,
#inventory-view button[onclick*="openTransferModal"]:not(:disabled),
#inventory-view #ms-add-new-btn,
#inventory-view #ms-open-requestlist-btn,
#inventory-view #ms-open-report-modal-btn,
#inventory-view #wd-inventory-intransit-report-btn {
    background: linear-gradient(135deg, #4d0000, #650000) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 241, 241, 0.36) !important;
    box-shadow: 0 10px 20px rgba(43, 0, 0, 0.18) !important;
}

body.inventory-mode #workdesk-view #ms-template-btn,
body.inventory-mode #workdesk-view #ms-upload-csv-btn,
body.inventory-mode #workdesk-view #ms-refresh-btn,
body.inventory-mode #workdesk-view #ms-search-container .secondary-btn,
body.inventory-mode #workdesk-view #ms-search-container button:not([onclick*="openTransferModal"]):not(:disabled),
#inventory-view #ms-template-btn,
#inventory-view #ms-upload-csv-btn,
#inventory-view #ms-refresh-btn,
#inventory-view #ms-search-container .secondary-btn,
#inventory-view #ms-search-container button:not([onclick*="openTransferModal"]):not(:disabled) {
    background: #fffafa !important;
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
    border: 1px solid rgba(77, 0, 0, 0.20) !important;
    box-shadow: 0 8px 18px rgba(43, 0, 0, 0.07) !important;
}

body.inventory-mode #workdesk-view button:disabled,
body.inventory-mode #workdesk-view button[disabled],
#inventory-view button:disabled,
#inventory-view button[disabled] {
    background: #f4eded !important;
    color: #6b2b2b !important;
    -webkit-text-fill-color: #6b2b2b !important;
    border: 1px solid rgba(77, 0, 0, 0.18) !important;
    box-shadow: none !important;
    opacity: 0.82 !important;
    cursor: not-allowed !important;
}
body.inventory-mode #workdesk-view button:disabled i,
body.inventory-mode #workdesk-view button:disabled span,
body.inventory-mode #workdesk-view button[disabled] i,
body.inventory-mode #workdesk-view button[disabled] span,
#inventory-view button:disabled i,
#inventory-view button:disabled span,
#inventory-view button[disabled] i,
#inventory-view button[disabled] span {
    color: #6b2b2b !important;
    -webkit-text-fill-color: #6b2b2b !important;
    opacity: 1 !important;
}

body.inventory-mode #workdesk-view button i,
body.inventory-mode #workdesk-view button span,
#inventory-view button i,
#inventory-view button span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
}

/* Material Stock table header: maroon, readable, and slightly rounded. */
body.inventory-mode #workdesk-view #ms-table,
#inventory-view #ms-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

body.inventory-mode #workdesk-view #ms-table thead,
body.inventory-mode #workdesk-view #ms-table thead tr,
body.inventory-mode #workdesk-view #ms-table thead th,
body.inventory-mode #workdesk-view #ms-table thead td,
#inventory-view #ms-table thead,
#inventory-view #ms-table thead tr,
#inventory-view #ms-table thead th,
#inventory-view #ms-table thead td {
    background: #4d0000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 241, 241, 0.28) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.inventory-mode #workdesk-view #ms-table thead th:first-child,
#inventory-view #ms-table thead th:first-child {
    border-top-left-radius: 12px !important;
}
body.inventory-mode #workdesk-view #ms-table thead th:last-child,
#inventory-view #ms-table thead th:last-child {
    border-top-right-radius: 12px !important;
}
body.inventory-mode #workdesk-view #ms-table thead input[type="checkbox"],
#inventory-view #ms-table thead input[type="checkbox"] {
    accent-color: #4d0000 !important;
}

body.inventory-mode #workdesk-view .table-wrapper,
body.inventory-mode #workdesk-view .ms-premium-tablewrap,
#inventory-view .table-wrapper,
#inventory-view .ms-premium-tablewrap {
    border-color: rgba(77, 0, 0, 0.14) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 28px rgba(43, 0, 0, 0.08) !important;
}

/* Inventory modal/table/theme catch-all: maroon replaces previous bright red. */
.inventory-themed-modal .modal-header,
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header {
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.14), transparent 30%),
        linear-gradient(135deg, #2b0000 0%, #4d0000 58%, #650000 100%) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 241, 241, 0.36) !important;
    box-shadow: 0 12px 26px rgba(43, 0, 0, 0.26) !important;
}
.inventory-themed-modal .modal-header *,
#ms-report-modal .modal-header *,
#ms-requestlist-modal .modal-header *,
#ms-new-material-modal .modal-header *,
#ms-photo-browser-modal .modal-header *,
#ms-add-stock-modal .modal-header *,
#transfer-job-modal .modal-header *,
#transfer-approval-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

.inventory-themed-modal table thead,
.inventory-themed-modal table thead tr,
.inventory-themed-modal table thead th,
#ms-report-modal table thead,
#ms-report-modal table thead tr,
#ms-report-modal table thead th,
#ms-requestlist-modal table thead,
#ms-requestlist-modal table thead tr,
#ms-requestlist-modal table thead th,
#transfer-job-modal table thead,
#transfer-job-modal table thead tr,
#transfer-job-modal table thead th,
#transfer-approval-modal table thead,
#transfer-approval-modal table thead tr,
#transfer-approval-modal table thead th {
    background: #4d0000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 241, 241, 0.28) !important;
}

.inventory-themed-modal .download-btn,
.inventory-themed-modal .print-btn,
.inventory-themed-modal .primary-btn,
.inventory-themed-modal button[id*="save"],
.inventory-themed-modal button[id*="approve"],
.inventory-themed-modal button[id*="print"],
.inventory-themed-modal button[id*="excel"],
#ms-report-modal #ms-modal-print-btn,
#ms-report-modal #ms-modal-excel-btn,
#ms-requestlist-modal #ms-requestlist-add-manual-btn,
#ms-requestlist-modal #ms-requestlist-print-btn,
#ms-new-material-modal #ms-save-material-btn,
#ms-add-stock-modal #ms-add-stock-save-btn,
#transfer-job-modal #tf-save-btn,
#transfer-approval-modal #transfer-modal-approve-btn {
    background: linear-gradient(135deg, #4d0000, #650000) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 241, 241, 0.34) !important;
    box-shadow: 0 10px 20px rgba(43, 0, 0, 0.18) !important;
}

.inventory-themed-modal .secondary-btn:not(.delete-btn),
.inventory-themed-modal .modal-close-btn:not(.modal-header .modal-close-btn),
#ms-report-modal .secondary-btn:not(.delete-btn),
#ms-requestlist-modal .secondary-btn:not(.delete-btn),
#ms-new-material-modal .secondary-btn:not(.delete-btn),
#ms-photo-browser-modal .secondary-btn:not(.delete-btn),
#ms-add-stock-modal .secondary-btn:not(.delete-btn),
#transfer-job-modal .secondary-btn:not(.delete-btn),
#transfer-approval-modal .secondary-btn:not(.delete-btn) {
    background: #fffafa !important;
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
    border: 1px solid rgba(77, 0, 0, 0.22) !important;
}

.inventory-themed-modal label,
.inventory-themed-modal .form-group label,
#transfer-job-modal label,
#transfer-job-modal .form-group label,
#transfer-approval-modal label,
#transfer-approval-modal .form-group label,
#ms-new-material-modal label,
#ms-add-stock-modal label,
#ms-photo-browser-modal label,
#ms-report-modal strong,
#ms-requestlist-modal strong {
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
}

.inventory-themed-modal input:focus,
.inventory-themed-modal select:focus,
.inventory-themed-modal textarea:focus,
.inventory-themed-modal .choices.is-focused .choices__inner,
#transfer-job-modal input:focus,
#transfer-job-modal select:focus,
#transfer-job-modal textarea:focus,
#transfer-approval-modal input:focus,
#transfer-approval-modal select:focus,
#transfer-approval-modal textarea:focus,
#ms-new-material-modal input:focus,
#ms-new-material-modal select:focus,
#ms-new-material-modal textarea:focus,
#ms-add-stock-modal input:focus,
#ms-add-stock-modal select:focus,
#ms-add-stock-modal textarea:focus,
body.inventory-mode #workdesk-view input:focus,
body.inventory-mode #workdesk-view select:focus,
body.inventory-mode #workdesk-view textarea:focus {
    border-color: #4d0000 !important;
    box-shadow: 0 0 0 4px rgba(77, 0, 0, 0.12), 0 8px 18px rgba(43, 0, 0, 0.10) !important;
}

@media (max-width: 768px) {
    body.inventory-mode #workdesk-view .mobile-app-header,
    body.inventory-mode #workdesk-view #active-task-mobile-header,
    body.inventory-mode #workdesk-view .dayview-mobile-header-new,
    #inventory-view .mobile-app-header,
    #inventory-view #active-task-mobile-header,
    #inventory-view .dayview-mobile-header-new {
        background: linear-gradient(135deg, #2b0000, #4d0000) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-bottom-color: rgba(255, 241, 241, 0.36) !important;
    }
}


/* =========================================================
   8.8.3 INVENTORY MATERIAL STOCK BUTTON + TABLE HEADER FIX
   - Fix Transfer / Restock / Usage pastel unreadable buttons.
   - Round Inventory Active Task and Job Records table headers.
   ========================================================= */

body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container .ms-stock-action-btn,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button.ms-stock-action-btn,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"],
body.inventory-mode #workdesk-view #ms-transfer-action-btn,
body.inventory-mode #workdesk-view #ms-restock-action-btn,
body.inventory-mode #workdesk-view #ms-usage-action-btn,
#inventory-view #wd-material-stock #ms-search-container .ms-stock-action-btn,
#inventory-view #wd-material-stock #ms-search-container button.ms-stock-action-btn,
#inventory-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"],
#inventory-view #ms-transfer-action-btn,
#inventory-view #ms-restock-action-btn,
#inventory-view #ms-usage-action-btn {
    background: linear-gradient(135deg, #4d0000 0%, #650000 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(77, 0, 0, 0.36) !important;
    border-radius: 14px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 8px 18px rgba(77, 0, 0, 0.16) !important;
    text-shadow: none !important;
}

body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container .ms-stock-action-btn i,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container .ms-stock-action-btn span,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"] i,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"] span,
#inventory-view #wd-material-stock #ms-search-container .ms-stock-action-btn i,
#inventory-view #wd-material-stock #ms-search-container .ms-stock-action-btn span,
#inventory-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"] i,
#inventory-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"] span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Disabled state still readable: not pale text on pastel background. */
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container .ms-stock-action-btn:disabled,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container .ms-stock-action-btn[disabled],
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"]:disabled,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"][disabled],
#inventory-view #wd-material-stock #ms-search-container .ms-stock-action-btn:disabled,
#inventory-view #wd-material-stock #ms-search-container .ms-stock-action-btn[disabled],
#inventory-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"]:disabled,
#inventory-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"][disabled] {
    background: #f4eeee !important;
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
    border: 1px solid rgba(77, 0, 0, 0.24) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container .ms-stock-action-btn:disabled i,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container .ms-stock-action-btn[disabled] i,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"]:disabled i,
body.inventory-mode #workdesk-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"][disabled] i,
#inventory-view #wd-material-stock #ms-search-container .ms-stock-action-btn:disabled i,
#inventory-view #wd-material-stock #ms-search-container .ms-stock-action-btn[disabled] i,
#inventory-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"]:disabled i,
#inventory-view #wd-material-stock #ms-search-container button[onclick*="openTransferModal"][disabled] i {
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
    opacity: 1 !important;
}

body.inventory-mode #workdesk-view #wd-material-stock #ms-search-clear-btn,
#inventory-view #wd-material-stock #ms-search-clear-btn {
    border-radius: 14px !important;
    background: #fffafa !important;
    color: #4d0000 !important;
    -webkit-text-fill-color: #4d0000 !important;
    border: 1px solid rgba(77, 0, 0, 0.20) !important;
    font-weight: 950 !important;
}

/* Rounded Inventory table headers: Material Stock, Active Task, and Job Records. */
body.inventory-mode #workdesk-view #wd-material-stock table,
body.inventory-mode #workdesk-view #wd-activetask .table-wrapper table,
body.inventory-mode #workdesk-view #wd-reporting #job-records-table,
#inventory-view #wd-material-stock table,
#inventory-view #wd-activetask .table-wrapper table,
#inventory-view #wd-reporting #job-records-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

body.inventory-mode #workdesk-view #wd-activetask .table-wrapper,
body.inventory-mode #workdesk-view #wd-reporting .table-wrapper,
#inventory-view #wd-activetask .table-wrapper,
#inventory-view #wd-reporting .table-wrapper {
    border-radius: 18px !important;
    overflow: hidden !important;
}

body.inventory-mode #workdesk-view #wd-activetask table thead,
body.inventory-mode #workdesk-view #wd-activetask table thead tr,
body.inventory-mode #workdesk-view #wd-activetask table thead th,
body.inventory-mode #workdesk-view #wd-reporting #job-records-table thead,
body.inventory-mode #workdesk-view #wd-reporting #job-records-table thead tr,
body.inventory-mode #workdesk-view #wd-reporting #job-records-table thead th,
#inventory-view #wd-activetask table thead,
#inventory-view #wd-activetask table thead tr,
#inventory-view #wd-activetask table thead th,
#inventory-view #wd-reporting #job-records-table thead,
#inventory-view #wd-reporting #job-records-table thead tr,
#inventory-view #wd-reporting #job-records-table thead th {
    background: #4d0000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 241, 241, 0.24) !important;
    text-shadow: none !important;
}

body.inventory-mode #workdesk-view #wd-material-stock table thead th:first-child,
body.inventory-mode #workdesk-view #wd-activetask table thead th:first-child,
body.inventory-mode #workdesk-view #wd-reporting #job-records-table thead th:first-child,
#inventory-view #wd-material-stock table thead th:first-child,
#inventory-view #wd-activetask table thead th:first-child,
#inventory-view #wd-reporting #job-records-table thead th:first-child {
    border-top-left-radius: 14px !important;
}

body.inventory-mode #workdesk-view #wd-material-stock table thead th:last-child,
body.inventory-mode #workdesk-view #wd-activetask table thead th:last-child,
body.inventory-mode #workdesk-view #wd-reporting #job-records-table thead th:last-child,
#inventory-view #wd-material-stock table thead th:last-child,
#inventory-view #wd-activetask table thead th:last-child,
#inventory-view #wd-reporting #job-records-table thead th:last-child {
    border-top-right-radius: 14px !important;
}

/* =========================================================
   8.8.4 INVENTORY MAROON SYNC — MODALS, BUTTONS, TABS
   Scope: Inventory UI only.
   Purpose:
   - Force Inventory modal headers/buttons to maroon #4d0000.
   - Fix Material Stock Transfer/Restock/Usage disabled contrast.
   - Sync Inventory Job Records tabs and Active Task tabs to maroon.
   - Sync Inventory Request Review title/header/buttons to maroon.
   ========================================================= */
:root {
    --inv-maroon: #4d0000;
    --inv-maroon-deep: #2b0000;
    --inv-maroon-mid: #650000;
    --inv-maroon-soft: #fff1f1;
    --inv-maroon-border: rgba(77, 0, 0, 0.22);
}

/* Material Stock action buttons: target by ID so old disabled pastel rules cannot win. */
#ms-transfer-action-btn,
#ms-restock-action-btn,
#ms-usage-action-btn,
body.inventory-mode #workdesk-view #ms-transfer-action-btn,
body.inventory-mode #workdesk-view #ms-restock-action-btn,
body.inventory-mode #workdesk-view #ms-usage-action-btn {
    background: linear-gradient(135deg, var(--inv-maroon) 0%, var(--inv-maroon-mid) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(77, 0, 0, 0.42) !important;
    border-radius: 14px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    font-weight: 950 !important;
    box-shadow: 0 8px 18px rgba(77, 0, 0, 0.18) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
}
#ms-transfer-action-btn *,
#ms-restock-action-btn *,
#ms-usage-action-btn * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
    filter: none !important;
}
#ms-transfer-action-btn:disabled,
#ms-transfer-action-btn[disabled],
#ms-restock-action-btn:disabled,
#ms-restock-action-btn[disabled],
#ms-usage-action-btn:disabled,
#ms-usage-action-btn[disabled],
body.inventory-mode #workdesk-view #ms-transfer-action-btn:disabled,
body.inventory-mode #workdesk-view #ms-restock-action-btn:disabled,
body.inventory-mode #workdesk-view #ms-usage-action-btn:disabled {
    background: linear-gradient(135deg, #fff8f8 0%, #f3e6e6 100%) !important;
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
    border: 1px solid rgba(77, 0, 0, 0.32) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    filter: none !important;
}
#ms-transfer-action-btn:disabled *,
#ms-transfer-action-btn[disabled] *,
#ms-restock-action-btn:disabled *,
#ms-restock-action-btn[disabled] *,
#ms-usage-action-btn:disabled *,
#ms-usage-action-btn[disabled] * {
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
    opacity: 1 !important;
}

/* Inventory modal headers: direct IDs, not dependent only on body.inventory-mode. */
#ms-report-modal .modal-header,
#ms-requestlist-modal .modal-header,
#ms-new-material-modal .modal-header,
#ms-photo-browser-modal .modal-header,
#ms-add-stock-modal .modal-header,
#transfer-job-modal .modal-header,
#transfer-approval-modal .modal-header,
.inventory-themed-modal .modal-header {
    background:
        radial-gradient(circle at 92% 8%, rgba(255,255,255,0.16), transparent 30%),
        linear-gradient(135deg, var(--inv-maroon-deep) 0%, var(--inv-maroon) 58%, var(--inv-maroon-mid) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 241, 241, 0.30) !important;
    box-shadow: 0 12px 26px rgba(43, 0, 0, 0.22) !important;
}
#ms-report-modal .modal-header *,
#ms-requestlist-modal .modal-header *,
#ms-new-material-modal .modal-header *,
#ms-photo-browser-modal .modal-header *,
#ms-add-stock-modal .modal-header *,
#transfer-job-modal .modal-header *,
#transfer-approval-modal .modal-header *,
.inventory-themed-modal .modal-header * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Inventory modal content/forms/tables/button sync. */
#ms-report-modal .modal-container,
#ms-requestlist-modal .modal-container,
#ms-new-material-modal .modal-container,
#ms-photo-browser-modal .modal-container,
#ms-add-stock-modal .modal-container,
#transfer-job-modal .modal-container,
#transfer-approval-modal .modal-container,
.inventory-themed-modal .modal-container {
    border-color: rgba(77, 0, 0, 0.18) !important;
    box-shadow: 0 30px 75px rgba(43, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.80) !important;
}
#ms-report-modal table thead,
#ms-report-modal table thead tr,
#ms-report-modal table thead th,
#ms-requestlist-modal table thead,
#ms-requestlist-modal table thead tr,
#ms-requestlist-modal table thead th,
#transfer-job-modal table thead,
#transfer-job-modal table thead tr,
#transfer-job-modal table thead th,
#transfer-approval-modal table thead,
#transfer-approval-modal table thead tr,
#transfer-approval-modal table thead th,
.inventory-themed-modal table thead,
.inventory-themed-modal table thead tr,
.inventory-themed-modal table thead th {
    background: var(--inv-maroon) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 241, 241, 0.25) !important;
}
#ms-report-modal table,
#ms-requestlist-modal table,
#transfer-job-modal table,
#transfer-approval-modal table,
.inventory-themed-modal table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
#ms-report-modal .modal-footer button,
#ms-requestlist-modal .modal-footer button,
#ms-new-material-modal .modal-footer button,
#ms-photo-browser-modal .modal-footer button,
#ms-add-stock-modal .modal-footer button,
#transfer-job-modal .modal-footer button,
#transfer-approval-modal .modal-footer button,
.inventory-themed-modal .modal-footer button,
.inventory-themed-modal .primary-btn,
.inventory-themed-modal .download-btn,
.inventory-themed-modal .print-btn,
.inventory-themed-modal button[id*="save"],
.inventory-themed-modal button[id*="print"],
.inventory-themed-modal button[id*="excel"],
#tf-save-btn,
#transfer-modal-approve-btn,
#ms-save-material-btn,
#ms-modal-print-btn,
#ms-modal-excel-btn,
#ms-requestlist-print-btn,
#ms-requestlist-add-manual-btn {
    background: linear-gradient(135deg, var(--inv-maroon) 0%, var(--inv-maroon-mid) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 241, 241, 0.36) !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 20px rgba(43, 0, 0, 0.16) !important;
}
.inventory-themed-modal .secondary-btn:not(.delete-btn),
#transfer-job-modal .secondary-btn:not(.delete-btn),
#transfer-approval-modal .secondary-btn:not(.delete-btn),
#ms-new-material-modal .secondary-btn:not(.delete-btn),
#ms-report-modal .secondary-btn:not(.delete-btn),
#ms-requestlist-modal .secondary-btn:not(.delete-btn) {
    background: #fff8f8 !important;
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
    border: 1px solid rgba(77, 0, 0, 0.24) !important;
    box-shadow: 0 8px 18px rgba(43, 0, 0, 0.06) !important;
}
.inventory-themed-modal .delete-btn,
.inventory-themed-modal button[id*="delete"],
.inventory-themed-modal button[id*="reject"] {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
#transfer-job-modal label,
#transfer-approval-modal label,
#ms-new-material-modal label,
#ms-add-stock-modal label,
#ms-photo-browser-modal label,
#ms-report-modal strong,
#ms-requestlist-modal strong,
.inventory-themed-modal label,
.inventory-themed-modal strong {
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
}
#transfer-job-modal input:focus,
#transfer-job-modal select:focus,
#transfer-job-modal textarea:focus,
#transfer-approval-modal input:focus,
#transfer-approval-modal select:focus,
#transfer-approval-modal textarea:focus,
#ms-new-material-modal input:focus,
#ms-new-material-modal select:focus,
#ms-new-material-modal textarea:focus,
#ms-add-stock-modal input:focus,
#ms-add-stock-modal select:focus,
#ms-add-stock-modal textarea:focus,
.inventory-themed-modal input:focus,
.inventory-themed-modal select:focus,
.inventory-themed-modal textarea:focus {
    border-color: var(--inv-maroon) !important;
    box-shadow: 0 0 0 4px rgba(77,0,0,0.12), 0 8px 18px rgba(43,0,0,0.10) !important;
    outline: none !important;
}

/* Inventory Job Records stage switch: Active Jobs / Completed Closed. */
body.inventory-mode #inventory-job-records-stage-switch,
#inventory-job-records-stage-switch {
    background: rgba(255, 248, 248, 0.92) !important;
    border: 1px solid rgba(77, 0, 0, 0.16) !important;
    border-radius: 18px !important;
    padding: 8px !important;
    box-shadow: 0 10px 24px rgba(43, 0, 0, 0.06) !important;
}
body.inventory-mode .inv-stage-btn,
#inventory-job-records-stage-switch .inv-stage-btn {
    background: #fffafa !important;
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
    border: 1px solid rgba(77, 0, 0, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
body.inventory-mode .inv-stage-btn.active,
#inventory-job-records-stage-switch .inv-stage-btn.active {
    background: linear-gradient(135deg, var(--inv-maroon) 0%, var(--inv-maroon-mid) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(77, 0, 0, 0.45) !important;
    box-shadow: 0 10px 22px rgba(43, 0, 0, 0.18) !important;
}
body.inventory-mode .inv-stage-btn.active *,
#inventory-job-records-stage-switch .inv-stage-btn.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.inventory-mode .inv-stage-count,
#inventory-job-records-stage-switch .inv-stage-count {
    background: #fff1f1 !important;
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
}
body.inventory-mode .inv-stage-btn.active .inv-stage-count,
#inventory-job-records-stage-switch .inv-stage-btn.active .inv-stage-count {
    background: #ffffff !important;
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
}

/* Inventory Active Task tabs: maroon only while in inventory mode. */
body.inventory-mode #wd-activetask #active-task-filters.report-tabs {
    background: rgba(255, 248, 248, 0.92) !important;
    border: 1px solid rgba(77, 0, 0, 0.16) !important;
    border-radius: 18px !important;
}
body.inventory-mode #wd-activetask #active-task-filters.report-tabs button:not(.active),
body.inventory-mode #wd-activetask #active-task-filters.report-tabs button.blink-tab:not(.active) {
    background: #fffafa !important;
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
    border: 1px solid rgba(77, 0, 0, 0.20) !important;
    box-shadow: 0 8px 18px rgba(43, 0, 0, 0.06) !important;
}
body.inventory-mode #wd-activetask #active-task-filters.report-tabs button.active {
    background: linear-gradient(135deg, var(--inv-maroon) 0%, var(--inv-maroon-mid) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(77, 0, 0, 0.45) !important;
    box-shadow: 0 12px 26px rgba(43, 0, 0, 0.20) !important;
}
body.inventory-mode #wd-activetask #active-task-filters.report-tabs button.active *,
body.inventory-mode #wd-activetask #active-task-filters.report-tabs button.active .notification-badge {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Inventory Request Review section title/header/buttons. */
body.inventory-mode #wd-inv-request-review .inventory-request-review-head,
#wd-inv-request-review .inventory-request-review-head {
    background:
        radial-gradient(circle at 88% 16%, rgba(122,17,17,0.26), transparent 32%),
        linear-gradient(135deg, var(--inv-maroon-deep) 0%, var(--inv-maroon) 58%, var(--inv-maroon-mid) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 241, 241, 0.24) !important;
    border-radius: 24px !important;
    padding: 22px 26px !important;
    box-shadow: 0 22px 48px rgba(43, 0, 0, 0.18) !important;
}
body.inventory-mode #wd-inv-request-review .inventory-request-review-head h1,
#wd-inv-request-review .inventory-request-review-head h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(20,0,0,0.35) !important;
}
body.inventory-mode #wd-inv-request-review .inventory-request-review-head p,
#wd-inv-request-review .inventory-request-review-head p {
    color: #ffe3e3 !important;
    -webkit-text-fill-color: #ffe3e3 !important;
}
body.inventory-mode #wd-inv-request-review #inv-request-review-refresh,
#wd-inv-request-review #inv-request-review-refresh,
body.inventory-mode #wd-inv-request-review .primary-btn,
#wd-inv-request-review .primary-btn {
    background: #ffffff !important;
    color: var(--inv-maroon) !important;
    -webkit-text-fill-color: var(--inv-maroon) !important;
    border: 1px solid rgba(255, 241, 241, 0.45) !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
}
body.inventory-mode #wd-inv-request-review .inventory-request-review-toolbar,
#wd-inv-request-review .inventory-request-review-toolbar,
body.inventory-mode #wd-inv-request-review .inventory-request-review-list,
#wd-inv-request-review .inventory-request-review-list {
    border-color: rgba(77, 0, 0, 0.16) !important;
    background: #fffafa !important;
}
body.inventory-mode #wd-inv-request-review .inventory-request-review-card,
#wd-inv-request-review .inventory-request-review-card {
    border-color: rgba(77, 0, 0, 0.16) !important;
    box-shadow: 0 10px 24px rgba(43, 0, 0, 0.06) !important;
}



/* =========================================================
   9.0.6 DESKTOP WELCOME LAUNCHER - PREMIUM SQUARE TILES
   Scope: desktop welcome screen only. Mobile tile styles remain in css/mobile.css.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-module-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        padding: 18px !important;
        border-radius: 28px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        text-align: center !important;
        color: #ffffff !important;
        background:
            radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.22), transparent 28%),
            linear-gradient(145deg,
                color-mix(in srgb, var(--welcome-accent, #38bdf8) 92%, #ffffff 8%) 0%,
                color-mix(in srgb, var(--welcome-accent, #38bdf8) 70%, #020617 30%) 100%) !important;
        border: 1px solid color-mix(in srgb, var(--welcome-accent, #38bdf8) 36%, rgba(255,255,255,0.26)) !important;
        box-shadow:
            0 18px 38px rgba(2, 6, 23, 0.24),
            inset 0 1px 0 rgba(255,255,255,0.20) !important;
        overflow: hidden !important;
    }

    #dashboard-view .welcome-module-card::before {
        display: none !important;
    }

    #dashboard-view .welcome-module-card::after {
        content: "";
        position: absolute;
        right: -34px;
        bottom: -34px;
        width: 92px;
        height: 92px;
        border-radius: 999px;
        background: rgba(255,255,255,0.14);
        pointer-events: none;
    }

    #dashboard-view .welcome-module-card:hover {
        transform: translateY(-5px) !important;
        box-shadow:
            0 26px 58px rgba(2, 6, 23, 0.34),
            inset 0 1px 0 rgba(255,255,255,0.24) !important;
        filter: saturate(1.05) brightness(1.04);
    }

    #dashboard-view .welcome-module-icon {
        width: 62px !important;
        height: 62px !important;
        border-radius: 22px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.16) !important;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 1.65rem !important;
    }

    #dashboard-view .welcome-module-text {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #dashboard-view .welcome-module-text strong {
        margin: 0 !important;
        color: #ffffff !important;
        font-size: clamp(0.92rem, 1.1vw, 1.15rem) !important;
        line-height: 1.18 !important;
        font-weight: 950 !important;
        letter-spacing: -0.02em !important;
        text-shadow: 0 2px 10px rgba(2, 6, 23, 0.30) !important;
        overflow-wrap: anywhere;
    }

    #dashboard-view .welcome-module-text em,
    #dashboard-view .welcome-module-open {
        display: none !important;
    }

    #dashboard-view .welcome-module-workdesk { --welcome-accent: #0e5f86 !important; }
    #dashboard-view .welcome-module-invoice { --welcome-accent: #116045 !important; }
    #dashboard-view .welcome-module-inventory { --welcome-accent: #4d0000 !important; }
    #dashboard-view .welcome-module-requisition { --welcome-accent: #b98205 !important; }
    #dashboard-view .welcome-module-finance { --welcome-accent: #0f766e !important; }
    #dashboard-view .welcome-module-po { --welcome-accent: #9f1239 !important; }
}

/* =========================================================
   9.0.7 DESKTOP WELCOME LAUNCHER - BALANCED TILE GRID
   Scope: desktop welcome screen only.
   Goal: same size tiles; 6 modules = 3 + 3, 4 modules = one row of 4.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-module-grid {
        --welcome-tile-size: clamp(150px, 13.2vw, 190px);
        display: grid !important;
        grid-template-columns: repeat(auto-fit, var(--welcome-tile-size)) !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: stretch !important;
        gap: 22px !important;
        width: min(100%, 860px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Six visible modules should sit as 3 tiles above / 3 tiles below. */
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)) {
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 44px)) !important;
    }

    /* Five visible modules: balanced 3 above / 2 below. */
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 44px)) !important;
    }

    /* Four visible modules should stay as one clean row of four. */
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 4) + 66px)) !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }

    #dashboard-view .welcome-module-text strong {
        max-width: 100% !important;
        text-align: center !important;
    }
}

/* =========================================================
   9.0.8 DESKTOP WELCOME - BETTER BALANCE
   Scope: desktop welcome screen only.
   Goal: reduce the oversized welcome title/hero so module tiles can be larger
   and look properly balanced in the available space.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-premium-hero {
        grid-template-columns: minmax(0, 1fr) 250px !important;
        gap: 18px !important;
        padding: 22px 26px !important;
        align-items: center !important;
        min-height: 238px !important;
    }

    #dashboard-view .welcome-premium-copy {
        min-width: 0 !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 920px !important;
        margin: 14px auto 10px !important;
        font-size: clamp(2.35rem, 3.35vw, 3.85rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -0.045em !important;
        text-align: center !important;
    }

    #dashboard-view .welcome-eyebrow {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #dashboard-view .welcome-person-line {
        justify-content: center !important;
        margin-top: 8px !important;
    }

    #dashboard-view .welcome-quote-row {
        justify-content: center !important;
        margin: 12px auto 0 !important;
        text-align: center !important;
    }

    #dashboard-view .welcome-premium-panel {
        min-height: 130px !important;
        padding: 8px 4px !important;
    }

    #dashboard-view .welcome-module-grid {
        --welcome-tile-size: clamp(185px, 15vw, 220px) !important;
        gap: 24px !important;
        margin-top: 20px !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 48px)) !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        width: min(100%, calc((var(--welcome-tile-size) * 4) + 72px)) !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 68px !important;
        height: 68px !important;
        border-radius: 24px !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 1.82rem !important;
    }

    #dashboard-view .welcome-module-text strong {
        font-size: clamp(1.04rem, 1.18vw, 1.24rem) !important;
        line-height: 1.15 !important;
    }
}

@media (min-width: 721px) and (max-height: 780px) {
    #dashboard-view .welcome-premium-hero {
        min-height: 210px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        font-size: clamp(2.05rem, 3vw, 3.3rem) !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }

    #dashboard-view .welcome-module-grid {
        --welcome-tile-size: clamp(170px, 14vw, 205px) !important;
        margin-top: 18px !important;
    }
}

/* =========================================================
   9.0.9 DESKTOP WELCOME - WIDER BALANCED TILE GRID
   Scope: desktop welcome screen only.
   Goal: use the available left/right space better so module tiles do not look too small.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-premium-hero {
        min-height: 205px !important;
        padding: 18px 24px !important;
        margin-bottom: 10px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 780px !important;
        font-size: clamp(2.05rem, 3vw, 3.35rem) !important;
        line-height: 1.02 !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }

    #dashboard-view .welcome-person-line {
        margin-top: 6px !important;
    }

    #dashboard-view .welcome-quote-row {
        margin-top: 9px !important;
    }

    #dashboard-view .welcome-premium-panel {
        min-height: 112px !important;
    }

    #dashboard-view .welcome-module-grid {
        --welcome-tile-size: clamp(230px, 20vw, 285px) !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 72px)) !important;
        max-width: 100% !important;
        gap: 36px !important;
        margin-top: 18px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: clamp(205px, 16vw, 250px) !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 4) + 108px)) !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        border-radius: 30px !important;
        gap: 18px !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 78px !important;
        height: 78px !important;
        border-radius: 26px !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 2.05rem !important;
    }

    #dashboard-view .welcome-module-text strong {
        font-size: clamp(1.18rem, 1.35vw, 1.42rem) !important;
        line-height: 1.12 !important;
    }
}

@media (min-width: 721px) and (max-width: 1180px) {
    #dashboard-view .welcome-module-grid {
        --welcome-tile-size: clamp(205px, 23vw, 250px) !important;
        gap: 28px !important;
    }
}

@media (min-width: 721px) and (max-height: 780px) {
    #dashboard-view .welcome-premium-hero {
        min-height: 185px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        font-size: clamp(1.95rem, 2.8vw, 3.05rem) !important;
        margin-top: 8px !important;
        margin-bottom: 7px !important;
    }

    #dashboard-view .welcome-module-grid {
        --welcome-tile-size: clamp(210px, 18vw, 260px) !important;
        gap: 30px !important;
        margin-top: 14px !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: clamp(190px, 15vw, 230px) !important;
    }
}

/* =========================================================
   9.1.1 DESKTOP WELCOME - COMPACT BALANCED APP TILES
   Scope: desktop welcome screen only.
   Goal: keep the welcome title proportional and keep module tiles around
   compact app-box size instead of oversized cards.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-premium-hero {
        min-height: 170px !important;
        padding: 16px 22px !important;
        margin-bottom: 8px !important;
        grid-template-columns: minmax(0, 1fr) 220px !important;
        gap: 16px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 660px !important;
        font-size: clamp(1.9rem, 2.65vw, 2.9rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.035em !important;
        margin: 8px auto 6px !important;
    }

    #dashboard-view .welcome-eyebrow {
        transform: scale(0.92) !important;
        transform-origin: center !important;
    }

    #dashboard-view .welcome-person-line {
        margin-top: 5px !important;
        font-size: 0.86rem !important;
    }

    #dashboard-view .welcome-quote-row {
        margin-top: 7px !important;
        font-size: 0.84rem !important;
    }

    #dashboard-view .welcome-date-stack {
        transform: scale(0.92) !important;
        transform-origin: center right !important;
    }

    #dashboard-view .welcome-premium-panel {
        min-height: 92px !important;
        padding: 4px 4px 10px !important;
    }

    #dashboard-view .welcome-module-grid {
        --welcome-tile-size: clamp(118px, 8.7vw, 138px) !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 44px)) !important;
        gap: 22px !important;
        margin-top: 14px !important;
        justify-content: center !important;
        justify-items: center !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)) {
        --welcome-tile-size: clamp(118px, 8.7vw, 138px) !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 44px)) !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: clamp(112px, 7.4vw, 132px) !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 4) + 66px)) !important;
        gap: 22px !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        padding: 12px !important;
        border-radius: 24px !important;
        gap: 9px !important;
    }

    #dashboard-view .welcome-module-card::after {
        right: -28px !important;
        bottom: -28px !important;
        width: 70px !important;
        height: 70px !important;
    }

    #dashboard-view .welcome-module-card:hover {
        transform: translateY(-3px) !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 17px !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 1.28rem !important;
    }

    #dashboard-view .welcome-module-text strong {
        font-size: clamp(0.82rem, 0.85vw, 0.95rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.015em !important;
    }
}

@media (min-width: 721px) and (max-height: 780px) {
    #dashboard-view .welcome-premium-hero {
        min-height: 152px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        font-size: clamp(1.7rem, 2.3vw, 2.45rem) !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: clamp(108px, 8vw, 126px) !important;
        gap: 18px !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: clamp(104px, 7vw, 122px) !important;
    }
}

/* =========================================================
   9.1.1 DESKTOP WELCOME - SAMPLE-STYLE COMPACT BALANCE
   Scope: desktop welcome screen only.
   Goal: follow the user's sample: smaller welcome title, compact
   app tiles around 1-inch visual size, balanced 3 + 3 layout.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-premium-hero {
        min-height: 138px !important;
        padding: 12px 18px !important;
        margin: 10px 0 12px !important;
        grid-template-columns: minmax(0, 1fr) 190px !important;
        gap: 12px !important;
        border-radius: 22px !important;
    }

    #dashboard-view .welcome-premium-copy {
        gap: 0 !important;
        justify-content: center !important;
    }

    #dashboard-view .welcome-eyebrow {
        transform: scale(0.82) !important;
        transform-origin: center !important;
        margin-bottom: 2px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 560px !important;
        font-size: clamp(1.55rem, 2.05vw, 2.28rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.04em !important;
        margin: 4px auto 4px !important;
        text-wrap: balance !important;
    }

    #dashboard-view .welcome-person-line {
        margin-top: 2px !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
    }

    #dashboard-view .welcome-quote-row {
        margin-top: 4px !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
    }

    #dashboard-view .welcome-date-stack {
        transform: scale(0.82) !important;
        transform-origin: center right !important;
    }

    #dashboard-view .welcome-premium-panel {
        min-height: 72px !important;
        padding: 2px 4px 12px !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: clamp(92px, 6.6vw, 108px) !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 34px)) !important;
        gap: 17px !important;
        margin-top: 10px !important;
        margin-bottom: 4px !important;
        justify-content: center !important;
        justify-items: center !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: clamp(88px, 6vw, 104px) !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 4) + 51px)) !important;
        gap: 17px !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        padding: 9px !important;
        border-radius: 19px !important;
        gap: 6px !important;
    }

    #dashboard-view .welcome-module-card::after {
        right: -24px !important;
        bottom: -24px !important;
        width: 56px !important;
        height: 56px !important;
        opacity: 0.42 !important;
    }

    #dashboard-view .welcome-module-card::before {
        width: 56px !important;
        height: 56px !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
        margin-bottom: 2px !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 1.02rem !important;
    }

    #dashboard-view .welcome-module-text strong {
        font-size: clamp(0.68rem, 0.72vw, 0.8rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.01em !important;
    }
}

@media (min-width: 721px) and (max-height: 780px) {
    #dashboard-view .welcome-premium-hero {
        min-height: 122px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        font-size: clamp(1.35rem, 1.75vw, 1.95rem) !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: clamp(84px, 6vw, 96px) !important;
        gap: 14px !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + 28px)) !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: clamp(82px, 5.5vw, 94px) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 4) + 42px)) !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 34px !important;
        height: 34px !important;
    }

    #dashboard-view .welcome-module-text strong {
        font-size: 0.66rem !important;
    }
}


/* =========================================================
   9.1.2 DESKTOP WELCOME - COMPACT HERO WIDTH ALIGNMENT
   Scope: desktop welcome screen only.
   Goal: keep the welcome hero card from spanning the full page width;
   align it visually with the compact app-tile launcher area.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-premium-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #dashboard-view .welcome-premium-hero {
        width: min(100%, 680px) !important;
        max-width: 680px !important;
        margin: 10px auto 12px !important;
        grid-template-columns: minmax(0, 1fr) 150px !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        min-height: 132px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 430px !important;
        font-size: clamp(1.45rem, 2vw, 2.05rem) !important;
        line-height: 1.05 !important;
        margin: 4px auto 4px !important;
    }

    #dashboard-view .welcome-eyebrow {
        transform: scale(0.78) !important;
        margin-bottom: 0 !important;
    }

    #dashboard-view .welcome-person-line {
        font-size: 0.76rem !important;
        line-height: 1.08 !important;
    }

    #dashboard-view .welcome-quote-row {
        font-size: 0.74rem !important;
        line-height: 1.08 !important;
    }

    #dashboard-view .welcome-premium-panel {
        min-height: 68px !important;
        padding: 4px 6px !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        background: transparent !important;
        border-color: transparent !important;
    }

    #dashboard-view .welcome-panel-label {
        margin-inline: auto !important;
    }

    #dashboard-view #welcome-panel-date {
        font-size: 0.98rem !important;
        line-height: 1.12 !important;
        text-align: center !important;
    }

    #dashboard-view #welcome-panel-sub,
    #dashboard-view #welcome-panel-sub.welcome-panel-time {
        font-size: 0.82rem !important;
        text-align: center !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 721px) and (max-height: 780px) {
    #dashboard-view .welcome-premium-hero {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        min-height: 112px !important;
        padding: 9px 14px !important;
        grid-template-columns: minmax(0, 1fr) 136px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 390px !important;
        font-size: clamp(1.28rem, 1.68vw, 1.75rem) !important;
    }
}

/* =========================================================
   9.1.4 DESKTOP WELCOME - COMPACT SHELL + HEADER CLOCK
   Scope: desktop welcome screen only.
   Goal: stop the outer welcome card from stretching too wide.
   Move Today/date/time into the top header row with version/logout,
   then keep the welcome hero and app tiles inside a compact launcher shell.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view {
        width: min(760px, calc(100vw - 44px)) !important;
        max-width: 760px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .cyber-dashboard-card {
        width: 100% !important;
        max-width: 760px !important;
        min-height: 0 !important;
        padding: 18px 20px 22px !important;
        border-radius: 26px !important;
    }

    #dashboard-view .dashboard-header {
        display: grid !important;
        grid-template-columns: auto minmax(220px, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        padding-bottom: 12px !important;
        margin-bottom: 18px !important;
    }

    #dashboard-view #user-info {
        justify-self: start !important;
    }

    #dashboard-view .welcome-header-clock {
        justify-self: center !important;
        align-self: center !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: grid !important;
        grid-template-columns: auto auto auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        color: #eaf6ff !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label {
        margin: 0 !important;
        padding: 4px 8px !important;
        border-radius: 999px !important;
        color: #082f49 !important;
        background: #fbbf24 !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        letter-spacing: 0.08em !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date {
        margin: 0 !important;
        color: #f8fafc !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        margin: 0 !important;
        color: #dbeafe !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    #dashboard-view #logout-button {
        justify-self: end !important;
    }

    #dashboard-view .welcome-premium-main {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #dashboard-view .welcome-premium-hero {
        width: 100% !important;
        max-width: 620px !important;
        min-height: 118px !important;
        display: block !important;
        grid-template-columns: none !important;
        margin: 0 auto 14px !important;
        padding: 13px 18px !important;
        border-radius: 21px !important;
    }

    #dashboard-view .welcome-premium-copy {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #dashboard-view .welcome-eyebrow {
        transform: none !important;
        margin-bottom: 5px !important;
        padding: 5px 10px !important;
        font-size: 0.66rem !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 520px !important;
        font-size: clamp(1.42rem, 2.2vw, 2.05rem) !important;
        line-height: 1.04 !important;
        margin: 2px auto 4px !important;
        letter-spacing: -0.04em !important;
        text-wrap: balance !important;
    }

    #dashboard-view .welcome-person-line {
        font-size: 0.76rem !important;
        line-height: 1.08 !important;
        margin: 0 auto 3px !important;
    }

    #dashboard-view .welcome-quote-row {
        font-size: 0.73rem !important;
        line-height: 1.08 !important;
        margin: 2px auto 0 !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 102px !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: auto !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 32px) !important;
        gap: 16px !important;
        margin: 8px auto 0 !important;
        justify-content: center !important;
        justify-items: center !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 100px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        max-width: calc((var(--welcome-tile-size) * 4) + 48px) !important;
        gap: 16px !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        padding: 9px !important;
        border-radius: 18px !important;
    }
}

@media (min-width: 721px) and (max-width: 900px) {
    #dashboard-view {
        width: min(720px, calc(100vw - 30px)) !important;
    }

    #dashboard-view .cyber-dashboard-card {
        max-width: 720px !important;
    }

    #dashboard-view .dashboard-header {
        grid-template-columns: auto 1fr auto !important;
        gap: 10px !important;
    }

    #dashboard-view .welcome-header-clock {
        gap: 7px !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub {
        font-size: 0.76rem !important;
    }
}

/* =========================================================
   9.1.4 DESKTOP WELCOME - COMPACT OUTER SHELL / NO INNER HERO CARD
   Scope: desktop welcome screen only.
   Goal: make the whole welcome launcher fit the compact tile area better.
   The date/time stays in the top row. The welcome text no longer sits inside
   a wide inner card; it becomes a clean centered text block above the tiles.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view {
        width: min(590px, calc(100vw - 44px)) !important;
        max-width: 590px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .cyber-dashboard-card {
        width: 100% !important;
        max-width: 590px !important;
        min-height: 0 !important;
        padding: 15px 18px 20px !important;
        border-radius: 24px !important;
    }

    #dashboard-view .dashboard-header {
        grid-template-columns: auto minmax(260px, 1fr) auto !important;
        gap: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 16px !important;
    }

    #dashboard-view .welcome-header-clock {
        gap: 8px !important;
        transform: none !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label {
        padding: 4px 7px !important;
        font-size: 0.62rem !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date {
        font-size: 0.78rem !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        font-size: 0.74rem !important;
    }

    #dashboard-view .welcome-premium-main {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #dashboard-view .welcome-premium-hero {
        width: 100% !important;
        max-width: 430px !important;
        min-height: 0 !important;
        margin: 0 auto 12px !important;
        padding: 0 4px 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    #dashboard-view .welcome-premium-hero::before,
    #dashboard-view .welcome-premium-hero::after {
        display: none !important;
        content: none !important;
    }

    #dashboard-view .welcome-premium-copy {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #dashboard-view .welcome-eyebrow {
        margin: 0 auto 6px !important;
        padding: 4px 10px !important;
        font-size: 0.61rem !important;
        border-radius: 999px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 410px !important;
        font-size: clamp(1.48rem, 2.35vw, 1.82rem) !important;
        line-height: 1.02 !important;
        margin: 0 auto 4px !important;
        letter-spacing: -0.045em !important;
        text-wrap: balance !important;
    }

    #dashboard-view .welcome-person-line {
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        margin: 0 auto 3px !important;
    }

    #dashboard-view .welcome-quote-row {
        font-size: 0.66rem !important;
        line-height: 1.05 !important;
        margin: 1px auto 0 !important;
        max-width: 380px !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 94px !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        width: auto !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 32px) !important;
        gap: 16px !important;
        margin: 6px auto 0 !important;
        justify-content: center !important;
        justify-items: center !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 92px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        max-width: calc((var(--welcome-tile-size) * 4) + 48px) !important;
        gap: 16px !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        padding: 8px !important;
        border-radius: 17px !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 14px !important;
        margin-bottom: 6px !important;
    }

    #dashboard-view .welcome-module-text strong {
        font-size: 0.72rem !important;
        line-height: 0.95 !important;
        max-width: 82px !important;
    }
}

@media (min-width: 721px) and (max-width: 850px) {
    #dashboard-view {
        width: min(560px, calc(100vw - 30px)) !important;
    }

    #dashboard-view .cyber-dashboard-card {
        max-width: 560px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #dashboard-view .dashboard-header {
        grid-template-columns: auto 1fr auto !important;
        gap: 8px !important;
    }

    #dashboard-view .welcome-header-clock {
        gap: 6px !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub {
        font-size: 0.7rem !important;
    }
}

/* =========================================================
   9.1.5 DESKTOP WELCOME - TIGHTER PREMIUM LAUNCHER SHELL
   Scope: desktop welcome screen only.
   Goal: reduce the outer card width to match the compact title + app tile grid.
   Keep the date/time in the top row, but remove the large empty left/right space.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view {
        width: min(470px, calc(100vw - 44px)) !important;
        max-width: 470px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .cyber-dashboard-card {
        width: 100% !important;
        max-width: 470px !important;
        min-height: 0 !important;
        padding: 14px 16px 18px !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    #dashboard-view .dashboard-header {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 8px !important;
        padding-bottom: 9px !important;
        margin-bottom: 14px !important;
    }

    #dashboard-view .dashboard-brand {
        min-width: 0 !important;
        gap: 7px !important;
    }

    #dashboard-view .dashboard-user-avatar,
    #dashboard-view #dashboard-user-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
    }

    #dashboard-view .dashboard-version {
        padding: 5px 9px !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-header-clock {
        justify-content: center !important;
        gap: 7px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label {
        padding: 3px 7px !important;
        font-size: 0.58rem !important;
        line-height: 1 !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        font-size: 0.70rem !important;
        line-height: 1 !important;
        letter-spacing: -0.015em !important;
    }

    #dashboard-view #logout-button {
        padding: 9px 15px !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-premium-main {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .welcome-premium-hero {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #dashboard-view .welcome-eyebrow {
        padding: 4px 9px !important;
        font-size: 0.58rem !important;
        margin-bottom: 6px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 350px !important;
        font-size: clamp(1.36rem, 1.95vw, 1.64rem) !important;
        line-height: 1.03 !important;
        margin: 0 auto 4px !important;
        letter-spacing: -0.045em !important;
    }

    #dashboard-view .welcome-person-line {
        font-size: 0.64rem !important;
        margin: 0 auto 3px !important;
    }

    #dashboard-view .welcome-quote-row {
        font-size: 0.62rem !important;
        max-width: 340px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 92px !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        gap: 14px !important;
        width: auto !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 28px) !important;
        margin: 8px auto 0 !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 90px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        max-width: calc((var(--welcome-tile-size) * 4) + 42px) !important;
        gap: 14px !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        border-radius: 17px !important;
        padding: 8px !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 13px !important;
        margin-bottom: 6px !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 1.02rem !important;
    }

    #dashboard-view .welcome-module-text strong {
        max-width: 78px !important;
        font-size: 0.68rem !important;
        line-height: 0.96 !important;
    }
}

@media (min-width: 721px) and (max-width: 820px) {
    #dashboard-view {
        width: min(450px, calc(100vw - 30px)) !important;
        max-width: 450px !important;
    }

    #dashboard-view .cyber-dashboard-card {
        max-width: 450px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        font-size: 0.66rem !important;
    }

    #dashboard-view #logout-button {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* =========================================================
   9.1.7 DESKTOP WELCOME - CLOCK BELOW TILES + TIGHTER SHELL
   Scope: desktop welcome screen only.
   User direction: move Today/date/time below the module buttons, bottom-right,
   and keep the main launcher compact instead of stretched wide.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view {
        width: min(410px, calc(100vw - 44px)) !important;
        max-width: 410px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .cyber-dashboard-card {
        position: relative !important;
        width: 100% !important;
        max-width: 410px !important;
        min-height: 0 !important;
        padding: 13px 14px 46px !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    #dashboard-view .dashboard-header {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 8px !important;
        padding-bottom: 9px !important;
        margin-bottom: 12px !important;
    }

    #dashboard-view .dashboard-brand {
        min-width: 0 !important;
        gap: 7px !important;
    }

    #dashboard-view .dashboard-user-avatar,
    #dashboard-view #dashboard-user-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
    }

    #dashboard-view .dashboard-version {
        padding: 5px 9px !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #dashboard-view #logout-button {
        justify-self: end !important;
        padding: 9px 15px !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-header-clock {
        position: absolute !important;
        right: 14px !important;
        bottom: 12px !important;
        z-index: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 28px) !important;
        padding: 5px 8px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: rgba(5, 27, 44, 0.42) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label {
        padding: 3px 7px !important;
        font-size: 0.56rem !important;
        line-height: 1 !important;
        border-radius: 999px !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        display: inline-block !important;
        margin: 0 !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-premium-main {
        width: 100% !important;
        max-width: 342px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .welcome-premium-hero {
        width: 100% !important;
        max-width: 342px !important;
        margin: 0 auto 11px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #dashboard-view .welcome-eyebrow {
        padding: 4px 9px !important;
        font-size: 0.56rem !important;
        margin-bottom: 6px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 326px !important;
        font-size: clamp(1.28rem, 1.75vw, 1.50rem) !important;
        line-height: 1.03 !important;
        margin: 0 auto 4px !important;
        letter-spacing: -0.045em !important;
    }

    #dashboard-view .welcome-person-line {
        font-size: 0.62rem !important;
        margin: 0 auto 3px !important;
    }

    #dashboard-view .welcome-quote-row {
        font-size: 0.60rem !important;
        max-width: 316px !important;
        margin: 0 auto !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 90px !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        gap: 14px !important;
        width: auto !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 28px) !important;
        margin: 8px auto 0 !important;
        justify-content: center !important;
        justify-items: center !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 88px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        max-width: calc((var(--welcome-tile-size) * 4) + 42px) !important;
        gap: 14px !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        border-radius: 17px !important;
        padding: 8px !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 13px !important;
        margin-bottom: 6px !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 1.00rem !important;
    }

    #dashboard-view .welcome-module-text strong {
        max-width: 78px !important;
        font-size: 0.67rem !important;
        line-height: 0.96 !important;
    }
}

@media (min-width: 721px) and (max-width: 820px) {
    #dashboard-view {
        width: min(400px, calc(100vw - 30px)) !important;
        max-width: 400px !important;
    }

    #dashboard-view .cyber-dashboard-card {
        max-width: 400px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        font-size: 0.62rem !important;
    }

    #dashboard-view #logout-button {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   9.1.7 DESKTOP WELCOME - CLOCK TRUE BOTTOM RIGHT FIX
   Scope: desktop welcome screen only.
   Fix: dashboard header was position:relative, so the clock was anchoring
   to the top header instead of the card bottom. Keep clock below tiles,
   bottom-right aligned with the logout side.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .cyber-dashboard-card {
        position: relative !important;
        padding-bottom: 50px !important;
    }

    #dashboard-view .dashboard-header {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        grid-template-columns: none !important;
    }

    #dashboard-view #user-info {
        flex: 0 0 auto !important;
    }

    #dashboard-view #logout-button {
        margin-left: auto !important;
        justify-self: auto !important;
        flex: 0 0 auto !important;
    }

    #dashboard-view .welcome-header-clock {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        right: 14px !important;
        bottom: 12px !important;
        transform: none !important;
        z-index: 5 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 28px) !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: rgba(5, 27, 44, 0.30) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: none !important;
        gap: 7px !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label,
    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        position: static !important;
        display: inline-block !important;
        margin: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label {
        padding: 3px 7px !important;
        font-size: 0.56rem !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        font-size: 0.62rem !important;
    }
}

/* =========================================================
   9.1.9 DESKTOP WELCOME - INTERNAL BALANCE REFINEMENT
   Scope: desktop welcome screen only.
   Direction: keep the outer card size, make the inside feel natural:
   title in two lines, greeting/quote below, 20% larger tiles with spacing,
   and date/time centered underneath the module buttons.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .cyber-dashboard-card {
        max-width: 410px !important;
        padding: 13px 16px 18px !important;
        min-height: 0 !important;
    }

    #dashboard-view .dashboard-header {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    #dashboard-view .welcome-premium-main {
        width: 100% !important;
        max-width: 372px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #dashboard-view .welcome-premium-hero {
        width: 100% !important;
        max-width: 356px !important;
        margin: 0 auto 14px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #dashboard-view .welcome-premium-copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    #dashboard-view .welcome-eyebrow {
        margin-bottom: 8px !important;
    }

    #dashboard-view .welcome-premium-copy h1 {
        max-width: 320px !important;
        margin: 0 auto 6px !important;
        font-size: clamp(1.38rem, 1.85vw, 1.62rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -0.045em !important;
        text-align: center !important;
    }

    #dashboard-view .welcome-premium-copy h1 span {
        display: block !important;
    }

    #dashboard-view .welcome-person-line {
        width: 100% !important;
        max-width: 318px !important;
        margin: 0 auto 4px !important;
        padding-left: 18px !important;
        text-align: left !important;
        font-size: 0.66rem !important;
        line-height: 1.1 !important;
    }

    #dashboard-view .welcome-quote-row {
        width: 100% !important;
        max-width: 318px !important;
        margin: 0 auto !important;
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 108px !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        gap: 18px !important;
        width: auto !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 36px) !important;
        margin: 0 auto !important;
        justify-content: center !important;
        justify-items: center !important;
    }

    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 104px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        gap: 16px !important;
        max-width: calc((var(--welcome-tile-size) * 4) + 48px) !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        border-radius: 18px !important;
        padding: 10px !important;
    }

    #dashboard-view .welcome-module-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
        margin-bottom: 8px !important;
    }

    #dashboard-view .welcome-module-icon i {
        font-size: 1.10rem !important;
    }

    #dashboard-view .welcome-module-text strong {
        max-width: 92px !important;
        font-size: 0.76rem !important;
        line-height: 0.98 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #dashboard-view .welcome-header-clock {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 14px auto 0 !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: rgba(5, 27, 44, 0.26) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label,
    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        position: static !important;
        display: inline-block !important;
        margin: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label {
        padding: 3px 7px !important;
        font-size: 0.56rem !important;
    }

    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        font-size: 0.64rem !important;
    }
}

@media (min-width: 721px) and (max-width: 820px) {
    #dashboard-view .welcome-premium-main {
        max-width: 360px !important;
    }

    #dashboard-view .welcome-module-grid,
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 104px !important;
        gap: 14px !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 28px) !important;
    }

    #dashboard-view .welcome-module-card,
    #dashboard-view .welcome-module-card:visited {
        padding: 9px !important;
    }
}


/* =========================================================
   9.1.9 DESKTOP WELCOME - GREETING / QUOTE BALANCE
   Scope: desktop welcome screen only.
   - Keep title in two lines.
   - Add breathing room above greeting.
   - Greeting is centered as a block but text is indented left.
   - Quote is centered and uses opening + closing quotation marks.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-premium-copy h1 {
        margin-bottom: 12px !important;
    }

    #dashboard-view .welcome-person-line {
        width: 100% !important;
        max-width: 318px !important;
        margin: 0 auto 7px !important;
        padding-left: 42px !important;
        text-align: left !important;
        font-size: 0.67rem !important;
        line-height: 1.18 !important;
    }

    #dashboard-view .welcome-quote-row {
        width: 100% !important;
        max-width: 336px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        text-align: center !important;
        font-size: 0.62rem !important;
        line-height: 1.18 !important;
    }

    #dashboard-view .welcome-quote-row i {
        display: none !important;
    }

    #dashboard-view .welcome-quote-mark {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffc400 !important;
        font-size: 0.90rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-shadow: 0 1px 8px rgba(255, 196, 0, 0.28) !important;
    }

    #dashboard-view #welcome-daily-quote {
        display: inline !important;
        color: rgba(255,255,255,0.96) !important;
        text-align: center !important;
    }
}


/* =========================================================
   9.2.0 DESKTOP WELCOME - GREETING LEFT ALIGN FIX
   Scope: desktop welcome screen only.
   User direction: "Good morning, [user]" should sit on the left side,
   not centered. Keep quote centered below it.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .welcome-person-line {
        align-self: flex-start !important;
        width: auto !important;
        max-width: 336px !important;
        margin: 0 0 7px 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    #dashboard-view .welcome-quote-row {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        justify-content: center !important;
    }
}


/* 9.2.1 - Greeting moved to top header center */
@media (min-width:721px){
 #dashboard-view .dashboard-header{display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;}
 #dashboard-view .welcome-header-greeting{justify-self:center!important;align-self:center!important;margin:0!important;padding:0!important;font-size:.72rem!important;line-height:1!important;font-weight:800!important;text-align:center!important;white-space:nowrap!important;color:#fff!important;}
 #dashboard-view .welcome-header-greeting strong{color:#fff!important;}
 #dashboard-view .welcome-premium-copy{padding-top:2px!important;}
}


/* =========================================================
   9.2.2 DESKTOP WELCOME - GREETING TRUE HEADER CENTER FIX
   Move the Good morning line out of the Welcome title block and keep it
   centered in the same top row as version/logout.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .dashboard-header {
        display: grid !important;
        grid-template-columns: minmax(160px, auto) 1fr minmax(92px, auto) !important;
        align-items: center !important;
        column-gap: 14px !important;
    }

    #dashboard-view .dashboard-header #user-info {
        justify-self: start !important;
        min-width: 0 !important;
    }

    #dashboard-view .dashboard-header #logout-button {
        justify-self: end !important;
        margin: 0 !important;
    }

    #dashboard-view .welcome-header-greeting,
    #dashboard-view .dashboard-header .welcome-person-line {
        grid-column: 2 !important;
        justify-self: center !important;
        align-self: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        color: rgba(255,255,255,.96) !important;
        font-size: .82rem !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        letter-spacing: .01em !important;
    }

    #dashboard-view .welcome-header-greeting strong,
    #dashboard-view .dashboard-header .welcome-person-line strong {
        color: #fff !important;
        font-weight: 900 !important;
    }

    #dashboard-view .welcome-premium-copy > .welcome-person-line:not(.welcome-header-greeting) {
        display: none !important;
    }
}

/* =========================================================
   9.2.3 DESKTOP WELCOME - GREETING ONE-LINE HEADER FIX
   Scope: desktop welcome header only.
   Fix: keep "Good morning, Irwin" on one straight line and remove the
   unwanted flex gap before the comma/name.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .dashboard-header {
        grid-template-columns: minmax(150px, auto) minmax(220px, 1fr) minmax(92px, auto) !important;
    }

    #dashboard-view .welcome-header-greeting,
    #dashboard-view .dashboard-header .welcome-person-line {
        min-width: 220px !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        line-height: 1 !important;
    }

    #dashboard-view .welcome-header-greeting .welcome-greeting-inline {
        display: inline-block !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    #dashboard-view .welcome-header-greeting #welcome-time-greeting,
    #dashboard-view .welcome-header-greeting #welcome-person-name,
    #dashboard-view .welcome-header-greeting strong {
        display: inline !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   9.2.4 DESKTOP WELCOME - HEADER FIT / LOGOUT VISIBLE FIX
   Scope: desktop welcome header only.
   Fix: previous greeting one-line rule used a wide center column, pushing
   Logout outside the compact welcome card. Keep greeting one line while
   letting the top row fit inside the card.
   ========================================================= */
@media (min-width: 721px) {
    #dashboard-view .dashboard-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 8px !important;
        overflow: visible !important;
    }

    #dashboard-view .dashboard-header #user-info,
    #dashboard-view .dashboard-brand {
        justify-self: start !important;
        min-width: 0 !important;
        max-width: max-content !important;
        flex: 0 0 auto !important;
    }

    #dashboard-view .welcome-header-greeting,
    #dashboard-view .dashboard-header .welcome-person-line {
        grid-column: 2 !important;
        justify-self: center !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    #dashboard-view .welcome-header-greeting .welcome-greeting-inline {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    #dashboard-view .dashboard-header #logout-button,
    #dashboard-view #logout-button {
        grid-column: 3 !important;
        justify-self: end !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 8px 13px !important;
        min-width: 0 !important;
        max-width: max-content !important;
        min-height: 36px !important;
        font-size: 0.76rem !important;
        white-space: nowrap !important;
        transform: none !important;
    }
}

/* === 9.2.7 WorkDesk Active Task personal queue cleanup ===
   Dashboard remains the overview/control board. Active Task no longer repeats
   dashboard-style summary cards/count blocks. */
#wd-activetask .wd-page-hero-active .wd-page-hero-metric,
#wd-activetask #active-task-summary-strip {
    display: none !important;
}
#wd-activetask .wd-page-hero-active {
    grid-template-columns: 1fr !important;
}


/* ========================================================================
   9.2.7 — WorkDesk Active Task: Remove Yellow Row Highlight
   The Dashboard keeps its overview rules. Active Task entries stay clean and
   readable without the yellow "highlighter" wash on personal attention rows.
   ======================================================================== */
#wd-activetask .wd-modern-table tbody tr.wd-modern-row td,
#wd-activetask .wd-modern-table tbody tr.wd-modern-row.wd-row-urgent td,
#wd-activetask .wd-modern-table tbody tr.wd-modern-row.wd-row-calm td {
    background: #ffffff !important;
}

#wd-activetask .wd-modern-table tbody tr.wd-modern-row:hover td,
#wd-activetask .wd-modern-table tbody tr.wd-modern-row.wd-row-urgent:hover td,
#wd-activetask .wd-modern-table tbody tr.wd-modern-row.wd-row-calm:hover td {
    background: #f8fafc !important;
}

#wd-activetask .wd-modern-table tbody tr.wd-row-muted td {
    background: #ffffff !important;
}

/* ========================================================================
   9.2.7 — WorkDesk Active Task Softer Typography
   Active Task stays personal by Attention name. Dashboard keeps full overview.
   These rules reduce the heavy all-bold feeling inside Active Task only.
   ======================================================================== */
#wd-activetask .wd-modern-table thead th {
    font-weight: 700 !important;
    letter-spacing: .055em !important;
}

#wd-activetask .wd-table-kicker,
#wd-activetask .wd-ref-chip,
#wd-activetask .wd-po-code,
#wd-activetask .wd-site-badge,
#wd-activetask .wd-date-chip,
#wd-activetask .wd-user-chip,
#wd-activetask .wd-attention-chip {
    font-weight: 650 !important;
}

#wd-activetask .wd-vendor-name {
    font-weight: 700 !important;
}

#wd-activetask .wd-amount-cell {
    font-weight: 700 !important;
}

#wd-activetask .wd-note-cell {
    font-weight: 500 !important;
}

#wd-activetask .wd-status-badge {
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

#wd-activetask .wd-row-action {
    font-weight: 700 !important;
}

#wd-activetask .wd-modern-empty-row strong {
    font-weight: 700 !important;
}

#wd-activetask .wd-modern-empty-row span {
    font-weight: 500 !important;
}

#active-task-filters .filter-btn,
#wd-activetask #active-task-filters button {
    font-weight: 700 !important;
}

/* 9.2.8 WorkDesk Dashboard split: Personal Tasks + All Active Tasks */
#wd-dashboard .wd-active-dashboard-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#wd-dashboard .wd-dashboard-card-section {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(15, 76, 117, 0.12);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

#wd-dashboard .wd-dashboard-card-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    color: #0f2742;
}

#wd-dashboard .wd-dashboard-card-section-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#wd-dashboard .wd-dashboard-card-section-head small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: right;
}

#wd-dashboard .wd-dashboard-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
    gap: 12px;
}

#wd-dashboard .wd-dashboard-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

#wd-dashboard .wd-person-task-card::after,
#wd-dashboard .wd-person-task-card .wd-status-icon {
    background: #0f4c75;
}

#wd-dashboard .wd-dashboard-mini-empty {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(15, 76, 117, 0.22);
    color: #64748b;
    background: rgba(248, 250, 252, 0.92);
    font-weight: 500;
}

#wd-dashboard .wd-task-footline span i.fa-user-check {
    color: #0f4c75;
}

@media (max-width: 780px) {
    #wd-dashboard .wd-dashboard-card-section {
        padding: 12px;
        border-radius: 15px;
    }

    #wd-dashboard .wd-dashboard-card-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    #wd-dashboard .wd-dashboard-card-grid,
    #wd-dashboard .wd-dashboard-status-grid {
        grid-template-columns: 1fr;
    }
}

/* 9.3.1 WorkDesk Dashboard card readability polish */
#wd-dashboard .wd-active-status-card {
    min-width: 0;
}

#wd-dashboard .wd-status-meta {
    min-width: 0;
    overflow: hidden;
}

#wd-dashboard .wd-status-meta em {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.15;
    font-weight: 700;
}

#wd-dashboard .wd-status-meta small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    font-weight: 600;
}

#wd-dashboard .wd-dashboard-person-grid,
#wd-dashboard .wd-dashboard-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#wd-dashboard .wd-active-status-card.tone-srv::after,
#wd-dashboard .wd-active-status-card.tone-srv .wd-status-icon {
    background: #db2777;
}

/* 9.3.1 WorkDesk Dashboard: personal cards mirror Active Task + readable status cards */
#wd-dashboard .wd-dashboard-card-section-head small {
    white-space: normal;
    line-height: 1.25;
}

#wd-dashboard .wd-dashboard-card-grid,
#wd-dashboard .wd-dashboard-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)) !important;
}

#wd-dashboard .wd-active-status-card {
    min-height: 88px;
    padding: 12px 12px !important;
}

#wd-dashboard .wd-status-meta em,
#wd-dashboard .wd-status-meta small {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

#wd-dashboard .wd-status-meta em {
    font-size: 0.78rem !important;
    letter-spacing: 0.005em !important;
}

#wd-dashboard .wd-status-meta small {
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
}

#wd-dashboard .wd-status-arrow {
    flex: 0 0 auto;
}


/* 9.3.2 WorkDesk dashboard cleanup: readable cards + remove Job Records extra metric strip */
#wd-dashboard .wd-active-status-card {
    min-height: 104px !important;
    padding: 14px 14px 24px !important;
    align-items: center;
}

#wd-dashboard .wd-active-status-card::after {
    bottom: 7px !important;
    left: 16px !important;
    right: 16px !important;
    height: 3px !important;
    z-index: 0;
    pointer-events: none;
}

#wd-dashboard .wd-status-icon,
#wd-dashboard .wd-status-meta,
#wd-dashboard .wd-status-arrow {
    position: relative;
    z-index: 1;
}

#wd-dashboard .wd-status-meta em {
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.12 !important;
}

#wd-dashboard .wd-status-meta small {
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.12 !important;
}

#wd-dashboard .wd-dashboard-person-grid {
    grid-template-columns: minmax(220px, 320px) !important;
}

#job-records-summary-strip,
#wd-reporting #job-records-summary-strip {
    display: none !important;
}

#wd-reporting .wd-page-hero-metric {
    display: none !important;
}


/* 9.3.6 WorkDesk dashboard card readability: prevent status words from splitting and keep underline clear */
.wd-active-status-card {
    padding-bottom: 22px !important;
}
.wd-active-status-card::after {
    bottom: 8px !important;
    left: 18px !important;
    right: 18px !important;
    height: 3px !important;
}
.wd-status-meta,
.wd-status-meta em,
.wd-status-meta small {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}
.wd-status-meta em {
    white-space: normal !important;
    line-height: 1.12 !important;
    max-width: 118px;
}
.wd-status-meta small {
    line-height: 1.12 !important;
}


/* 9.3.8 WorkDesk Dashboard: personal task cards side-by-side */
#wd-dashboard .wd-dashboard-person-section .wd-dashboard-person-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px)) !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 14px !important;
}

#wd-dashboard .wd-dashboard-person-section .wd-person-task-card {
    width: 100% !important;
    max-width: 280px !important;
    min-height: 104px !important;
}

#wd-dashboard .wd-dashboard-person-section .wd-dashboard-mini-empty {
    grid-column: 1 / -1;
}

@media (max-width: 780px) {
    #wd-dashboard .wd-dashboard-person-section .wd-dashboard-person-grid {
        grid-template-columns: 1fr !important;
    }

    #wd-dashboard .wd-dashboard-person-section .wd-person-task-card {
        max-width: none !important;
    }
}

/* =========================================================
   9.4.3 — Desktop Welcome Module Icon Cleanup
   UI-only. Removes the extra mini-card behind module icons.
   ========================================================= */
@media screen and (min-width: 769px) {
    .welcome-module-card,
    .welcome-module-card:visited {
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        gap: 13px !important;
    }

    .welcome-module-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--welcome-accent, #38bdf8) !important;
    }

    .welcome-module-icon i {
        font-size: 1.42rem !important;
        line-height: 1 !important;
    }
}


/* =========================================================
   9.4.4 — Desktop Welcome Transparent Mini-Card Removal
   UI-only. Removes remaining transparent rounded backgrounds from
   module icons, version badge, and date/time area on desktop welcome.
   ========================================================= */
@media screen and (min-width: 769px) {
    /* Module icons: icon only, no inner mini-card/background/ring. */
    #dashboard-view .welcome-module-card .welcome-module-icon,
    #dashboard-view .welcome-module-card:visited .welcome-module-icon,
    #dashboard-view .welcome-module-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        color: var(--welcome-accent, #38bdf8) !important;
    }

    #dashboard-view .welcome-module-card .welcome-module-icon::before,
    #dashboard-view .welcome-module-card .welcome-module-icon::after,
    #dashboard-view .welcome-module-icon::before,
    #dashboard-view .welcome-module-icon::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #dashboard-view .welcome-module-card .welcome-module-icon i,
    #dashboard-view .welcome-module-icon i {
        font-size: 1.42rem !important;
        line-height: 1 !important;
        color: inherit !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Version: plain text only, no rounded badge/card. */
    #dashboard-view .dashboard-version-display,
    #dashboard-view #dashboard-version-display {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin-left: 8px !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #bae6fd !important;
        -webkit-text-fill-color: #bae6fd !important;
        font-weight: 850 !important;
    }

    /* Date/time: plain inline text area, no pill/card behind it. */
    #dashboard-view .welcome-header-clock,
    #dashboard-view .welcome-premium-panel.welcome-header-clock {
        padding: 0 !important;
        margin: 12px auto 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    #dashboard-view .welcome-header-clock .welcome-panel-label,
    #dashboard-view .welcome-header-clock #welcome-panel-date,
    #dashboard-view .welcome-header-clock #welcome-panel-sub,
    #dashboard-view .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   9.4.5 — Desktop Welcome Icon Visibility Fix
   UI-only. Keeps mini icon cards removed, but restores strong
   icon visibility with plain icon-only styling.
   ========================================================= */
@media screen and (min-width: 769px) {
    #dashboard-view .welcome-module-card .welcome-module-icon,
    #dashboard-view .welcome-module-card:visited .welcome-module-icon,
    #dashboard-view .welcome-module-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        text-shadow:
            0 2px 7px rgba(2, 6, 23, 0.55),
            0 0 12px color-mix(in srgb, var(--welcome-accent, #38bdf8) 62%, transparent) !important;
    }

    #dashboard-view .welcome-module-card .welcome-module-icon i,
    #dashboard-view .welcome-module-card:visited .welcome-module-icon i,
    #dashboard-view .welcome-module-icon i {
        display: inline-block !important;
        font-size: 1.36rem !important;
        line-height: 1 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        transform: translateY(0) !important;
    }
}

/* ========================================================================== 
   9.5.3 — Premium Settings Area Refresh
   Scope: WorkDesk > Account Settings only. Logic and field IDs unchanged.
   ========================================================================== */
#wd-settings.premium-settings-section {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 40px;
}

#wd-settings .settings-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 30px;
    margin-bottom: 24px;
    border-radius: 24px;
    color: #ffffff;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 55, 0.28), transparent 34%),
        linear-gradient(135deg, #06233a 0%, #003a5c 54%, #011827 100%);
    box-shadow: 0 20px 45px rgba(0, 58, 92, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

#wd-settings .settings-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.18), transparent 36%, transparent 70%, rgba(255,255,255,0.08));
    pointer-events: none;
}

#wd-settings .settings-hero-icon,
#wd-settings .settings-card-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#wd-settings .settings-hero-icon {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    font-size: 22px;
    color: #f3d36b;
    z-index: 1;
}

#wd-settings .settings-hero-text {
    z-index: 1;
    min-width: 0;
}

#wd-settings .settings-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f3d36b;
}

#wd-settings .settings-hero h1 {
    margin: 0;
    color: #ffffff !important;
    border: 0 !important;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.1;
}

#wd-settings .settings-hero p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    max-width: 700px;
    font-size: 14px;
}

#wd-settings .settings-hero-badge {
    z-index: 1;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

#wd-settings .premium-settings-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#wd-settings .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

#wd-settings .settings-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

#wd-settings .settings-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

#wd-settings .settings-card-header.compact {
    margin-bottom: 0;
}

#wd-settings .settings-card-icon {
    background: linear-gradient(135deg, rgba(0, 58, 92, 0.10), rgba(212, 175, 55, 0.18));
    color: #003a5c;
    border: 1px solid rgba(0, 58, 92, 0.10);
    font-size: 20px;
}

#wd-settings .settings-card h2 {
    margin: 0;
    color: #0f2740;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.02em;
}

#wd-settings .settings-card p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

#wd-settings .settings-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#wd-settings .settings-span-2,
#wd-settings .settings-vacation-panel {
    grid-column: 1 / -1;
}

#wd-settings .form-group {
    margin-bottom: 0;
}

#wd-settings .form-group label {
    margin-bottom: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
}

#wd-settings input,
#wd-settings select {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#wd-settings input:focus,
#wd-settings select:focus {
    border-color: #0b5f8a;
    box-shadow: 0 0 0 4px rgba(0, 58, 92, 0.10);
    outline: none;
}

#wd-settings input[readonly] {
    background: linear-gradient(180deg, #f1f5f9, #e9eef5);
    border-color: #d6dee8;
    color: #536171;
    cursor: not-allowed;
    opacity: 1;
}

#wd-settings .input-note,
#wd-settings .small-muted {
    color: #7a8798 !important;
    font-size: 12px !important;
    margin-top: 6px !important;
}

#wd-settings .settings-toggle-row {
    margin-top: 2px;
}

#wd-settings .settings-toggle {
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

#wd-settings .settings-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    accent-color: #003a5c;
}

#wd-settings .settings-toggle label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    color: #0f172a;
    font-weight: 850;
}

#wd-settings .settings-toggle label small {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

#wd-settings .settings-vacation-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 2px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(0, 58, 92, 0.045), rgba(212, 175, 55, 0.07));
    border: 1px solid rgba(0, 58, 92, 0.10);
}

#wd-settings .settings-vacation-panel.hidden {
    display: none !important;
}

#wd-settings .settings-audio-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#wd-settings .settings-audio-btn {
    min-width: 180px;
    justify-content: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f2740;
    border: 1px solid #dbe3ef;
}

#wd-settings .settings-audio-btn:hover {
    background: #e2e8f0;
}

#wd-settings .settings-celebration-card {
    border-color: rgba(212, 175, 55, 0.28);
    background:
        radial-gradient(circle at top right, rgba(212, 175, 55, 0.15), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255, 252, 242, 0.96));
}

#wd-settings .settings-celebration-card.hidden {
    display: none !important;
}

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

#wd-settings .settings-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

#wd-settings .celebration-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

#wd-settings .main-settings-actions {
    justify-content: flex-start;
    padding: 6px 2px 0;
}

#wd-settings .main-settings-actions button,
#wd-settings #celebration-save-btn {
    min-height: 44px;
    border-radius: 12px;
    padding: 0 18px;
    background: linear-gradient(135deg, #003a5c, #0b5f8a);
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 22px rgba(0, 58, 92, 0.18);
}

#wd-settings .main-settings-actions button:hover,
#wd-settings #celebration-save-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

#wd-settings .celebration-actions .secondary-btn,
#wd-settings .celebration-actions .danger-btn {
    min-height: 42px;
    border-radius: 12px;
}

#wd-settings .settings-message-line {
    margin: 4px 2px 0;
    text-align: left !important;
}


/* ========================================================================== 
   10.4.3 — WorkDesk Settings: System Feature Controls polish
   Scope: Manual PO / Vacation Mode card only. No workflow logic changes.
   ========================================================================== */
#wd-settings .settings-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #0b5f8a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#wd-settings .settings-system-controls-card {
    overflow: hidden;
    border-color: rgba(0, 58, 92, 0.14);
    background:
        radial-gradient(circle at top right, rgba(212, 175, 55, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247, 250, 252, 0.97));
}

#wd-settings .settings-system-controls-card.hidden {
    display: none !important;
}

#wd-settings .im-admin-control-surface {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#wd-settings .im-admin-mode-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fafc, #eef6fb);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

#wd-settings .im-admin-mode-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0b5f8a;
    border: 1px solid rgba(11, 95, 138, .14);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

#wd-settings .im-admin-mini-label {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

#wd-settings .im-admin-mode-copy strong {
    display: block;
    color: #0f2740;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.02em;
}

#wd-settings .im-admin-mode-copy p {
    margin-top: 4px !important;
    color: #64748b !important;
}

#wd-settings .im-admin-status-pill {
    min-width: 64px;
    padding: 8px 12px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    border: 1px solid transparent;
}

#wd-settings .im-admin-status-pill.is-off {
    background: #ecfdf5;
    color: #166534;
    border-color: rgba(22, 163, 74, .18);
}

#wd-settings .im-admin-status-pill.is-on {
    background: #fff7ed;
    color: #c2410c;
    border-color: rgba(249, 115, 22, .22);
}

#wd-settings .im-admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

#wd-settings .im-admin-toggle-copy {
    min-width: 0;
}

#wd-settings .im-admin-toggle-copy strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

#wd-settings .im-admin-toggle-copy span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.45;
}

#wd-settings .im-admin-switch {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

#wd-settings .im-admin-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-height: 1px;
    margin: 0;
    pointer-events: none;
}

#wd-settings .im-admin-switch-track {
    width: 58px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: #cbd5e1;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .18);
    transition: background .2s ease, box-shadow .2s ease;
}

#wd-settings .im-admin-switch-knob {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
    transition: transform .2s ease;
}

#wd-settings .im-admin-switch input[type="checkbox"]:checked + .im-admin-switch-track {
    background: linear-gradient(135deg, #c2410c, #f97316);
    box-shadow: inset 0 1px 3px rgba(124, 45, 18, .28), 0 8px 18px rgba(249, 115, 22, .18);
}

#wd-settings .im-admin-switch input[type="checkbox"]:checked + .im-admin-switch-track .im-admin-switch-knob {
    transform: translateX(26px);
}

#wd-settings .im-admin-switch input[type="checkbox"]:focus-visible + .im-admin-switch-track {
    outline: 3px solid rgba(11, 95, 138, .22);
    outline-offset: 3px;
}

#wd-settings .im-admin-control-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#wd-settings .im-admin-rule {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 14px;
    border-radius: 16px;
    background: rgba(248, 250, 252, .86);
    border: 1px solid rgba(148, 163, 184, .24);
    color: #475569;
    font-size: 12.5px;
    line-height: 1.45;
}

#wd-settings .im-admin-rule i {
    margin-top: 2px;
    color: #0b5f8a;
}

#wd-settings .im-admin-rule strong {
    color: #0f2740;
}

#wd-settings .settings-system-controls-card.is-vacation-mode .im-admin-mode-panel {
    background: linear-gradient(135deg, #fff7ed, #fff1df);
    border-color: rgba(249, 115, 22, .18);
}

#wd-settings .settings-system-controls-card.is-vacation-mode .im-admin-mode-icon {
    color: #c2410c;
    border-color: rgba(249, 115, 22, .18);
}

@media (max-width: 700px) {
    #wd-settings .im-admin-mode-panel,
    #wd-settings .im-admin-toggle-row,
    #wd-settings .im-admin-control-rules {
        grid-template-columns: 1fr;
    }

    #wd-settings .im-admin-mode-panel {
        align-items: flex-start;
    }

    #wd-settings .im-admin-toggle-row {
        flex-direction: column;
        align-items: stretch;
    }

    #wd-settings .im-admin-switch {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    #wd-settings .settings-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    #wd-settings .settings-hero-badge {
        margin-left: 0;
    }

    #wd-settings .settings-grid,
    #wd-settings .settings-grid.inner-grid {
        grid-template-columns: 1fr;
    }

    #wd-settings .settings-audio-card {
        align-items: stretch;
        flex-direction: column;
    }

    #wd-settings .settings-audio-btn {
        width: 100%;
    }
}

@media (max-width: 620px) {
    #wd-settings.premium-settings-section {
        padding: 0 2px 30px;
    }

    #wd-settings .settings-card,
    #wd-settings .settings-hero {
        border-radius: 18px;
        padding: 18px;
    }

    #wd-settings .settings-fields-grid,
    #wd-settings .settings-vacation-panel {
        grid-template-columns: 1fr;
    }

    #wd-settings .settings-card-header {
        gap: 12px;
    }

    #wd-settings .settings-hero-icon,
    #wd-settings .settings-card-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 15px;
    }
}


/* ========================================================================
   9.5.4 — Desktop Invoice Records Premium Clean UI
   Desktop-only visual refresh for Invoice Management > Invoice Records.
   Keeps mobile layout untouched and preserves all current IDs/JS behavior.
   Typography is intentionally lighter: bold is reserved for titles/actions only.
   ======================================================================== */
@media (min-width: 901px) {
    #im-reporting {
        --imr-ink: #1f2937;
        --imr-muted: #64748b;
        --imr-line: rgba(148, 163, 184, .24);
        --imr-soft: #f8fafc;
        --imr-card: rgba(255, 255, 255, .96);
        --imr-blue: #0b4a66;
        --imr-blue-2: #0f6d8d;
        --imr-gold: #f7c948;
        color: var(--imr-ink) !important;
    }

    #im-reporting strong {
        font-weight: 600 !important;
    }

    /* Softer, calmer hero. */
    #im-reporting > .header {
        min-height: 142px !important;
        padding: 24px 28px !important;
        border-radius: 28px !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(247, 201, 72, .22), transparent 30%),
            linear-gradient(135deg, #06273d 0%, #0b4a66 54%, #0f6d8d 100%) !important;
        box-shadow: 0 20px 46px rgba(15, 46, 71, .14) !important;
        overflow: hidden !important;
    }

    #im-reporting > .header .im-reporting-hero-layout {
        gap: 22px !important;
        align-items: center !important;
    }

    #im-reporting > .header .im-reporting-hero-copy::before {
        margin-bottom: 8px !important;
        color: rgba(255, 255, 255, .72) !important;
        font-size: .72rem !important;
        font-weight: 500 !important;
        letter-spacing: .16em !important;
        text-transform: uppercase !important;
    }

    #im-reporting > .header h1 {
        margin: 0 !important;
        font-size: clamp(2.05rem, 3vw, 3.1rem) !important;
        font-weight: 700 !important;
        letter-spacing: -.04em !important;
        line-height: 1.02 !important;
    }

    #im-reporting > .header .im-reporting-hero-subtitle,
    #im-reporting > .header p {
        max-width: 650px !important;
        margin-top: 10px !important;
        color: rgba(255, 255, 255, .78) !important;
        font-size: .98rem !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
    }

    #im-reporting > .header .im-reporting-hero-meta {
        margin-top: 12px !important;
    }

    #reporting-count-display.im-found-count-chip,
    #reporting-count-display {
        padding: 6px 11px !important;
        color: #fff5bf !important;
        font-size: .74rem !important;
        font-weight: 500 !important;
        letter-spacing: .02em !important;
        background: rgba(255, 255, 255, .12) !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
    }

    #im-reporting > .header .im-reporting-hero-actions,
    #im-reporting > .header .daily-report-section {
        flex: 0 1 610px !important;
        gap: 8px !important;
    }

    #im-reporting > .header .daily-report-section button {
        min-height: 38px !important;
        padding: 9px 13px !important;
        border-radius: 999px !important;
        color: #0b3448 !important;
        font-size: .76rem !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        background: rgba(255, 255, 255, .94) !important;
        border: 1px solid rgba(255, 255, 255, .62) !important;
        box-shadow: 0 10px 22px rgba(3, 18, 30, .13) !important;
    }

    #im-reporting > .header .daily-report-section button i {
        opacity: .86 !important;
    }

    #im-reporting > .header .daily-report-section button:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 14px 28px rgba(3, 18, 30, .18) !important;
    }

    #im-reporting > .header .daily-report-section .download-btn--gold,
    #im-reporting > .header .daily-report-section .download-btn--teal,
    #im-reporting > .header .daily-report-section .download-btn--periwinkle,
    #im-reporting > .header .daily-report-section .im-export-excel-btn,
    #im-reporting > .header .daily-report-section .im-reporting-refresh-mini {
        background: rgba(255, 255, 255, .94) !important;
        color: #0b3448 !important;
    }

    #im-reporting > .header .daily-report-section .download-btn--gold i { color: #b7791f !important; }
    #im-reporting > .header .daily-report-section .download-btn--teal i { color: #0f6d8d !important; }
    #im-reporting > .header .daily-report-section .download-btn--periwinkle i { color: #4f46e5 !important; }
    #im-reporting > .header .daily-report-section .im-export-excel-btn i { color: #15803d !important; }
    #im-reporting > .header .daily-report-section .im-reporting-refresh-mini i { color: #0b4a66 !important; }

    /* One calm command panel instead of multiple heavy cards. */
    #im-reporting-form {
        margin-top: 18px !important;
        padding: 16px !important;
        border-radius: 24px !important;
        background: var(--imr-card) !important;
        border: 1px solid var(--imr-line) !important;
        box-shadow: 0 18px 42px rgba(15, 46, 71, .07) !important;
    }

    #im-reporting-form .search-box {
        height: 52px !important;
        margin: 0 0 12px !important;
        border-radius: 16px !important;
        background: #fff !important;
        border: 1px solid rgba(203, 213, 225, .9) !important;
        box-shadow: none !important;
    }

    #im-reporting-form .search-box input {
        color: #1f2937 !important;
        font-size: .96rem !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    #im-reporting-form .search-box input::placeholder {
        color: #94a3b8 !important;
        font-weight: 400 !important;
    }

    #im-reporting-form .search-box i.search-icon {
        color: var(--imr-blue-2) !important;
        opacity: .84 !important;
    }

    #im-reporting-form .controls-row {
        grid-template-columns: minmax(360px, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    #im-reporting-form .filter-group {
        grid-template-columns: repeat(4, minmax(135px, 1fr)) !important;
        gap: 8px !important;
    }

    #im-reporting-form .filter-group select {
        height: 40px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        color: #334155 !important;
        background-color: #fff !important;
        border: 1px solid rgba(203, 213, 225, .9) !important;
        box-shadow: none !important;
        font-size: .82rem !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    #im-reporting-form .filter-group select:focus,
    #im-reporting-form .search-box:focus-within {
        border-color: rgba(15, 109, 141, .46) !important;
        box-shadow: 0 0 0 3px rgba(15, 109, 141, .10) !important;
    }

    #im-reporting-form .action-buttons,
    #im-reporting-form .print-actions {
        gap: 7px !important;
    }

    #im-reporting-form .action-buttons button,
    #im-reporting-form .print-actions button {
        height: 39px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
    }

    #im-reporting-form .primary-btn {
        background: linear-gradient(135deg, var(--imr-blue-2), var(--imr-blue)) !important;
        color: #fff !important;
        border: 1px solid rgba(15, 109, 141, .38) !important;
    }

    #im-reporting-form .secondary-btn,
    #im-reporting-form .print-btn {
        background: #fff !important;
        color: #475569 !important;
        border: 1px solid rgba(203, 213, 225, .9) !important;
    }

    #im-reporting-form .detailed-btn {
        color: var(--imr-blue) !important;
        border-color: rgba(15, 109, 141, .28) !important;
    }

    #im-reporting-form button i {
        opacity: .86 !important;
    }

    /* Small, quiet legend. */
    #im-reporting .reporting-legend {
        width: fit-content !important;
        max-width: 100% !important;
        margin: 12px 0 10px auto !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .78) !important;
        border: 1px solid rgba(203, 213, 225, .72) !important;
        box-shadow: none !important;
        gap: 12px !important;
    }

    #im-reporting .reporting-legend .legend-item {
        color: #64748b !important;
        font-size: .76rem !important;
        font-weight: 400 !important;
    }

    #im-reporting .reporting-legend .legend-color {
        width: 9px !important;
        height: 9px !important;
        border-radius: 999px !important;
    }

    /* Fresh table container: lighter header, calmer records. */
    #im-reporting .grid-header {
        margin-top: 10px !important;
        padding: 12px 16px !important;
        border: 1px solid var(--imr-line) !important;
        border-bottom: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
        color: #64748b !important;
        box-shadow: 0 12px 28px rgba(15, 46, 71, .05) !important;
    }

    #im-reporting .grid-header .grid-cell {
        color: #64748b !important;
        font-size: .72rem !important;
        font-weight: 600 !important;
        letter-spacing: .055em !important;
        text-transform: uppercase !important;
    }

    #im-reporting .grid-body {
        margin-top: 0 !important;
        gap: 8px !important;
        padding: 12px !important;
        border: 1px solid var(--imr-line) !important;
        border-radius: 0 0 22px 22px !important;
        background: rgba(255, 255, 255, .88) !important;
        box-shadow: 0 18px 42px rgba(15, 46, 71, .07) !important;
    }

    #im-reporting .invoice-card {
        border-radius: 16px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        background: #fff !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    #im-reporting .invoice-card:hover {
        border-color: rgba(15, 109, 141, .34) !important;
        box-shadow: 0 10px 24px rgba(15, 46, 71, .06) !important;
        transform: translateY(-1px) !important;
    }

    #im-reporting .master-grid-row {
        padding: 13px 16px !important;
        min-height: 54px !important;
    }

    #im-reporting .master-grid-row .grid-cell,
    #im-reporting .detail-grid-row .grid-cell,
    #im-reporting .invoice-card td,
    #im-reporting .invoice-card span,
    #im-reporting .invoice-card p {
        color: #334155 !important;
        font-size: .84rem !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
    }

    #im-reporting .master-grid-row .grid-cell:nth-child(2),
    #im-reporting .master-grid-row .grid-cell:nth-child(4) {
        font-weight: 600 !important;
        color: #1e293b !important;
    }

    #im-reporting .detail-grid-row {
        border-top: 1px solid rgba(226, 232, 240, .95) !important;
        background: #fbfdff !important;
    }

    #im-reporting .loading-state {
        padding: 30px !important;
        border-radius: 16px !important;
        background: #fff !important;
        color: #64748b !important;
        font-size: .92rem !important;
        font-weight: 400 !important;
        border: 1px dashed rgba(148, 163, 184, .42) !important;
    }

    #im-reporting-grand-total-container {
        margin-top: 16px !important;
        margin-bottom: 18px !important;
        padding-right: 0 !important;
    }

    #im-reporting-grand-total-container .summary-wrapper,
    #im-reporting .summary-wrapper {
        border-radius: 18px !important;
        background: linear-gradient(135deg, #06273d, #0b4a66) !important;
        box-shadow: 0 16px 34px rgba(15, 46, 71, .12) !important;
    }

    #im-reporting-grand-total-container .summary-wrapper *,
    #im-reporting .summary-wrapper * {
        font-weight: 500 !important;
    }

    #im-reporting-grand-total-container .summary-wrapper strong,
    #im-reporting .summary-wrapper strong {
        font-weight: 650 !important;
    }
}

/* =====================================================================
   9.5.5 — Desktop Invoice Records Compact Premium Correction
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: restore slim PO rows and truly clean the expanded invoice entries.
   Mobile is intentionally untouched.
   ===================================================================== */
@media (min-width: 769px) {
    /* Keep the outer records area clean, but slim again. */
    #im-reporting .grid-header {
        margin-top: 8px !important;
        padding: 8px 14px !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 8px 20px rgba(15, 46, 71, .045) !important;
    }

    #im-reporting .grid-header .grid-cell {
        font-size: .69rem !important;
        font-weight: 560 !important;
        letter-spacing: .045em !important;
        color: #667085 !important;
    }

    #im-reporting .grid-body {
        padding: 8px !important;
        gap: 6px !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 12px 30px rgba(15, 46, 71, .055) !important;
    }

    #im-reporting .invoice-card {
        border-radius: 12px !important;
        border-color: rgba(226, 232, 240, .9) !important;
        box-shadow: none !important;
    }

    #im-reporting .invoice-card:hover {
        transform: none !important;
        box-shadow: 0 6px 18px rgba(15, 46, 71, .045) !important;
    }

    /* This is the PO summary row: return it to the slim height you prefer. */
    #im-reporting .master-grid-row {
        padding: 7px 14px !important;
        min-height: 38px !important;
        align-items: center !important;
        background: #ffffff !important;
    }

    #im-reporting .master-grid-row .grid-cell {
        font-size: .79rem !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        color: #344054 !important;
    }

    #im-reporting .master-grid-row .grid-cell:first-child {
        color: #0f6d8d !important;
        font-size: .75rem !important;
    }

    #im-reporting .master-grid-row .grid-cell:nth-child(2) {
        font-weight: 600 !important;
        color: #0f172a !important;
    }

    #im-reporting .master-grid-row .grid-cell:nth-child(4) {
        font-weight: 500 !important;
        color: #1f2937 !important;
    }

    #im-reporting .master-grid-row .grid-cell:nth-child(5),
    #im-reporting .master-grid-row .grid-cell:nth-child(6),
    #im-reporting .master-grid-row .grid-cell:nth-child(7) {
        font-size: .78rem !important;
        font-weight: 500 !important;
    }

    /* Expanded area: remove the bulky card-inside-card feel. */
    #im-reporting .detail-grid-row {
        padding: 8px 12px 10px 12px !important;
        background: linear-gradient(180deg, #fbfdff, #f8fafc) !important;
        border-top: 1px solid rgba(226, 232, 240, .86) !important;
    }

    #im-reporting .detail-grid-row > div {
        padding: 10px 12px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(226, 232, 240, .96) !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    #im-reporting .detail-grid-row h4 {
        margin: 0 0 8px 0 !important;
        padding: 0 0 7px 0 !important;
        border-bottom: 1px solid rgba(226, 232, 240, .8) !important;
        color: #1f2937 !important;
        font-size: .82rem !important;
        font-weight: 560 !important;
        letter-spacing: 0 !important;
    }

    #im-reporting .detail-grid-row table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: .76rem !important;
        color: #344054 !important;
    }

    #im-reporting .detail-grid-row thead tr {
        border-bottom: 1px solid rgba(203, 213, 225, .9) !important;
        color: #667085 !important;
        background: #fff !important;
    }

    #im-reporting .detail-grid-row th {
        padding: 6px 5px !important;
        font-size: .66rem !important;
        font-weight: 560 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
        color: #667085 !important;
        white-space: nowrap !important;
    }

    #im-reporting .detail-grid-row td {
        padding: 6px 5px !important;
        font-size: .76rem !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        color: #344054 !important;
        border-bottom: 1px solid rgba(241, 245, 249, .96) !important;
    }

    #im-reporting .detail-grid-row tbody tr:hover td {
        background: #f8fbfd !important;
    }

    #im-reporting .detail-grid-row td:nth-child(1),
    #im-reporting .detail-grid-row td:nth-child(6),
    #im-reporting .detail-grid-row td:nth-child(8) {
        color: #667085 !important;
        font-weight: 400 !important;
    }

    #im-reporting .detail-grid-row td:nth-child(2) {
        color: #0f6d8d !important;
        font-weight: 560 !important;
    }

    #im-reporting .detail-grid-row td:nth-child(4),
    #im-reporting .detail-grid-row td:nth-child(5) {
        font-weight: 500 !important;
        color: #1f2937 !important;
    }

    #im-reporting .detail-grid-row .status-badge {
        padding: 2px 7px !important;
        border-radius: 999px !important;
        font-size: .66rem !important;
        font-weight: 500 !important;
        background: #eef2f7 !important;
        color: #344054 !important;
    }

    #im-reporting .detail-grid-row .actions button,
    #im-reporting .detail-grid-row td.actions button {
        min-height: 26px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        font-size: .68rem !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

    #im-reporting .detail-grid-row tfoot tr {
        border-top: 1px solid rgba(203, 213, 225, .9) !important;
        background: #f8fafc !important;
    }

    #im-reporting .detail-grid-row tfoot td {
        padding: 8px 5px !important;
        font-size: .76rem !important;
        font-weight: 560 !important;
        color: #1f2937 !important;
        border-bottom: 0 !important;
    }

    #im-reporting .detail-grid-row tfoot strong,
    #im-reporting .detail-grid-row strong {
        font-weight: 560 !important;
    }

    /* Prevent old inline/template emphasis from making every small field too bold. */
    #im-reporting .invoice-card td[style],
    #im-reporting .invoice-card th[style],
    #im-reporting .invoice-card span[style],
    #im-reporting .invoice-card div[style] {
        letter-spacing: 0 !important;
    }
}

/* =====================================================================
   9.5.6 — Desktop Invoice Records Expanded Entries Clean Fix
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: remove the card-inside-card feel, simplify inner invoice header,
            keep slim PO rows, and highlight the edit invoice number button.
   Mobile is intentionally untouched.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .master-grid-row {
        padding: 7px 14px !important;
        min-height: 38px !important;
        align-items: center !important;
    }

    #invoice-management-view #im-reporting .detail-grid-row.im-invoice-entries-clean {
        padding: 8px 14px 12px 54px !important;
        background: #fbfdff !important;
        border-top: 1px solid #edf2f7 !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting .detail-grid-row.im-invoice-entries-clean > div:not(.im-invoice-entries-heading) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    #invoice-management-view #im-reporting .im-invoice-entries-heading {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 6px 0 !important;
        padding: 0 0 6px 0 !important;
        border-bottom: 1px solid #edf2f7 !important;
        color: #344054 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-invoice-entries-heading span {
        font-size: .78rem !important;
        font-weight: 560 !important;
        color: #1f2937 !important;
        letter-spacing: 0 !important;
    }

    #invoice-management-view #im-reporting .im-invoice-entries-heading em {
        font-size: .72rem !important;
        font-weight: 400 !important;
        font-style: normal !important;
        color: #667085 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table {
        width: 100% !important;
        border-collapse: collapse !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: .75rem !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table th {
        padding: 5px 5px 6px 5px !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #e5eaf0 !important;
        box-shadow: none !important;
        color: #667085 !important;
        font-size: .66rem !important;
        font-weight: 540 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table td {
        padding: 5px 5px !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #344054 !important;
        font-size: .75rem !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tbody tr:hover td {
        background: #f8fbfd !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table td:nth-child(2) {
        color: #0f6d8d !important;
        font-weight: 560 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table td:nth-child(4),
    #invoice-management-view #im-reporting .im-nested-invoice-table td:nth-child(5) {
        font-weight: 500 !important;
        color: #1f2937 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table .status-badge {
        background: #eef2f7 !important;
        color: #344054 !important;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        font-size: .65rem !important;
        font-weight: 500 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot tr {
        background: #f8fafc !important;
        border-top: 1px solid #e5eaf0 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot td {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        font-weight: 540 !important;
        color: #1f2937 !important;
        border-bottom: 0 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table strong {
        font-weight: 560 !important;
    }

    #invoice-management-view #im-reporting .im-record-actions,
    #invoice-management-view #im-reporting .modern-action-group.im-record-actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    #invoice-management-view #im-reporting .im-enter-inv-btn,
    #invoice-management-view #im-reporting .edit-inv-no-btn.im-enter-inv-btn {
        background: linear-gradient(135deg, #0f8f5f, #08784f) !important;
        border: 1px solid rgba(6, 95, 70, .36) !important;
        color: #ffd84d !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        min-width: 28px !important;
        min-height: 26px !important;
    }

    #invoice-management-view #im-reporting .im-enter-inv-btn i,
    #invoice-management-view #im-reporting .edit-inv-no-btn.im-enter-inv-btn i {
        color: #ffd84d !important;
    }

    #invoice-management-view #im-reporting .im-enter-inv-btn:hover {
        background: linear-gradient(135deg, #0c7f54, #066342) !important;
        transform: translateY(-1px) !important;
    }
}


/* =====================================================================
   9.5.7 — Desktop Invoice Records Entries Title + Edit Icon Polish
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: keep the expanded entries title flat, make PO number clear/red,
            and make the Enter New Invoice Number icon visibly yellow.
   Mobile is intentionally untouched.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .detail-grid-row.im-invoice-entries-flat {
        padding: 7px 14px 10px 54px !important;
        background: #fbfdff !important;
        border-top: 1px solid #eef2f7 !important;
        box-shadow: none !important;
    }

    /* Keep the entries title as plain text, not another card/container. */
    #invoice-management-view #im-reporting .detail-grid-row.im-invoice-entries-flat > .im-invoice-entries-heading,
    #invoice-management-view #im-reporting p.im-invoice-entries-heading {
        display: block !important;
        margin: 0 0 6px 0 !important;
        padding: 0 0 4px 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #344054 !important;
        font-size: .78rem !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    #invoice-management-view #im-reporting p.im-invoice-entries-heading span {
        color: #344054 !important;
        font-size: .78rem !important;
        font-weight: 500 !important;
    }

    #invoice-management-view #im-reporting p.im-invoice-entries-heading strong {
        margin-left: 8px !important;
        color: #b42318 !important;
        font-size: .79rem !important;
        font-weight: 700 !important;
        letter-spacing: .01em !important;
    }

    /* Simpler nested header: no card, no boxed columns, no heavy vertical borders. */
    #invoice-management-view #im-reporting .im-nested-invoice-table,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead,
    #invoice-management-view #im-reporting .im-nested-invoice-table tr,
    #invoice-management-view #im-reporting .im-nested-invoice-table th,
    #invoice-management-view #im-reporting .im-nested-invoice-table td {
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table th {
        background: transparent !important;
        border-top: 0 !important;
        border-bottom: 1px solid #e5eaf0 !important;
        color: #667085 !important;
        font-weight: 540 !important;
    }

    /* Stronger override for the green edit-invoice-number button/icon. */
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn,
    #invoice-management-view #im-reporting .modern-action-group.im-record-actions button.edit-inv-no-btn.im-enter-inv-btn {
        background: linear-gradient(135deg, #08784f, #05603a) !important;
        border: 1px solid rgba(5, 96, 58, .48) !important;
        color: #ffda1f !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn i,
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn .im-enter-inv-icon,
    #invoice-management-view #im-reporting .modern-action-group.im-record-actions button.edit-inv-no-btn.im-enter-inv-btn i {
        color: #ffda1f !important;
        text-shadow: 0 1px 2px rgba(0,0,0,.38) !important;
        -webkit-text-stroke: .35px rgba(15, 23, 42, .24) !important;
    }
}


/* =====================================================================
   9.5.8 — Desktop Invoice Records Entries Header Placement + Icon Color
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: move the "Invoice Entries / PO" label into the nested table header,
            remove the extra underline/card feel, and force the edit icon yellow.
   Mobile is intentionally untouched.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .detail-grid-row.im-invoice-entries-flat {
        padding: 6px 14px 10px 54px !important;
        background: #fbfdff !important;
        border-top: 1px solid #eef2f7 !important;
        box-shadow: none !important;
    }

    /* Old heading is no longer used, but keep it fully flat if any cached row still has it. */
    #invoice-management-view #im-reporting p.im-invoice-entries-heading {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table {
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead th {
        background: transparent !important;
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    /* The title now sits inside the table header area instead of a separate card/underlined block. */
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th {
        padding: 3px 5px 6px 5px !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        color: #344054 !important;
        font-size: .78rem !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        line-height: 1.25 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th span {
        color: #344054 !important;
        font-size: .78rem !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th strong {
        margin-left: 8px !important;
        color: #b42318 !important;
        -webkit-text-fill-color: #b42318 !important;
        font-size: .80rem !important;
        font-weight: 800 !important;
        letter-spacing: .005em !important;
        text-transform: none !important;
    }

    /* Keep only the clean divider under the column names, above the first invoice row. */
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-columns-row th {
        padding: 5px 5px 6px 5px !important;
        border-top: 0 !important;
        border-bottom: 1px solid #e5eaf0 !important;
        background: transparent !important;
        color: #667085 !important;
        font-size: .66rem !important;
        font-weight: 540 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
    }

    /* Hard override for Font Awesome icon, including SVG-replaced icons. */
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn,
    #invoice-management-view #im-reporting .modern-action-group.im-record-actions button.edit-inv-no-btn.im-enter-inv-btn {
        background: linear-gradient(135deg, #08784f, #05603a) !important;
        border: 1px solid rgba(5, 96, 58, .48) !important;
        color: #ffda1f !important;
        -webkit-text-fill-color: #ffda1f !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn *,
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn i,
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn i::before,
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn .im-enter-inv-icon,
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn svg,
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn svg *,
    #invoice-management-view #im-reporting button.edit-inv-no-btn.im-enter-inv-btn path {
        color: #ffda1f !important;
        -webkit-text-fill-color: #ffda1f !important;
        fill: #ffda1f !important;
        stroke: none !important;
        opacity: 1 !important;
    }
}

/* =====================================================================
   9.5.9 — Desktop Invoice Records Final Entry Header + Action Cleanup
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: make Invoice Entries text visible, keep PO number bold red,
            remove the extra printer Report action, and replace the
            broken summary icon with a clean text mark.
   Mobile is intentionally untouched.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th {
        padding: 2px 5px 3px 5px !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #263238 !important;
        -webkit-text-fill-color: #263238 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th span {
        color: #263238 !important;
        -webkit-text-fill-color: #263238 !important;
        font-size: .79rem !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th strong {
        margin-left: 8px !important;
        color: #b42318 !important;
        -webkit-text-fill-color: #b42318 !important;
        font-size: .82rem !important;
        font-weight: 850 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-columns-row th {
        padding-top: 3px !important;
        border-top: 0 !important;
    }

    #invoice-management-view #im-reporting .im-summary-icon-fallback {
        font-family: Arial, sans-serif !important;
        box-shadow: none !important;
    }
}


/* =====================================================================
   9.6.0 — Desktop Invoice Records Nested Header Visibility Fix
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: make the nested Invoice Entries column headers clearly visible
            without adding heavy boxes, shadows, or bold styling everywhere.
   Mobile is intentionally untouched.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th span {
        color: #263238 !important;
        -webkit-text-fill-color: #263238 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th strong {
        color: #b42318 !important;
        -webkit-text-fill-color: #b42318 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-columns-row th,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-columns-row th * {
        color: #475467 !important;
        -webkit-text-fill-color: #475467 !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #f8fbfd !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-columns-row th {
        padding: 5px 5px 6px 5px !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #d9e2ec !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
    }
}


/* =====================================================================
   9.6.2 — Desktop Invoice Records Entry Title Left Correction
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: place the Invoice Entries / PO title slightly to the LEFT of
            the nested column headers, so it reads as a section label and
            not as another aligned table column. Mobile untouched.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th {
        padding: 4px 5px 4px 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th .im-entries-title-label,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th .im-entries-title-po {
        display: inline-block !important;
        transform: translateX(-18px) !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th span,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th .im-entries-title-label {
        color: #263238 !important;
        -webkit-text-fill-color: #263238 !important;
        font-weight: 700 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th strong,
    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row th .im-entries-title-po {
        color: #b42318 !important;
        -webkit-text-fill-color: #b42318 !important;
        font-weight: 850 !important;
    }
}



/* =====================================================================
   9.6.3 — Desktop Invoice Records Entry Title Clipping Fix
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: stop the Invoice Entries title from being clipped after the
            left-correction patch. The title is now a simple section label
            above the nested table, not a shifted table header cell.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .detail-grid-row.im-invoice-entries-flat {
        overflow: visible !important;
    }

    #invoice-management-view #im-reporting .im-entries-title-strip {
        display: block !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: visible !important;
        transform: none !important;
    }

    #invoice-management-view #im-reporting .im-entries-title-strip .im-entries-title-label {
        color: #263238 !important;
        -webkit-text-fill-color: #263238 !important;
        font-weight: 700 !important;
        font-size: .79rem !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    #invoice-management-view #im-reporting .im-entries-title-strip .im-entries-title-po {
        margin-left: 8px !important;
        color: #b42318 !important;
        -webkit-text-fill-color: #b42318 !important;
        font-weight: 850 !important;
        font-size: .82rem !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row {
        display: none !important;
    }
}


/* =====================================================================
   9.6.4 — Desktop Invoice Records Entry Title Safe Left Alignment
   Scope: desktop Invoice Management → Invoice Records only.
   Purpose: move the "Invoice Entries / PO" section label safely to the
            left of the nested table headers without clipping the text.
   Mobile is intentionally untouched.
   ===================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .detail-grid-row.im-invoice-entries-flat {
        padding-left: 36px !important;
        overflow: visible !important;
    }

    #invoice-management-view #im-reporting .im-entries-title-strip {
        margin-left: 0 !important;
        padding-left: 0 !important;
        transform: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table {
        margin-left: 18px !important;
        width: calc(100% - 18px) !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table thead tr.im-entries-title-row {
        display: none !important;
    }
}


/* =========================================================
   9.6.6 — Desktop Welcome Uniform 50% Scale Correction
   UI-only. Replaces the broken 9.6.5 per-element enlargement.
   Goal: enlarge the existing compact desktop welcome screen evenly,
   without clipping tile text or forcing the title into single-word lines.
   Mobile/login/workflows untouched.
   ========================================================= */
@media screen and (min-width: 769px) {
    #dashboard-view:not(.hidden) {
        width: min(615px, calc(100vw - 44px)) !important;
        max-width: 615px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
    }

    #dashboard-view:not(.hidden) .cyber-dashboard-card {
        width: 100% !important;
        max-width: 615px !important;
        min-height: 0 !important;
        padding: 20px 21px 69px !important;
        border-radius: 36px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #dashboard-view:not(.hidden) .dashboard-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
        margin-bottom: 18px !important;
    }

    #dashboard-view:not(.hidden) #user-info {
        gap: 10px !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    #dashboard-view:not(.hidden) #dashboard-username::before {
        width: 51px !important;
        height: 51px !important;
        border-radius: 17px !important;
        font-size: 1.15rem !important;
    }

    #dashboard-view:not(.hidden) .dashboard-version-display {
        height: 42px !important;
        padding: 0 15px !important;
        font-size: 1.05rem !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-greeting,
    #dashboard-view:not(.hidden) .welcome-person-line {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 0.93rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    #dashboard-view:not(.hidden) #logout-button {
        flex: 0 0 auto !important;
        padding: 13px 22px !important;
        min-height: 42px !important;
        border-radius: 999px !important;
        font-size: 1.05rem !important;
        white-space: nowrap !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-main {
        width: 100% !important;
        max-width: 555px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-hero {
        width: 100% !important;
        max-width: 555px !important;
        margin: 0 auto 18px !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy {
        width: 100% !important;
        max-width: 555px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-eyebrow {
        padding: 6px 14px !important;
        margin: 0 auto 12px !important;
        border-radius: 999px !important;
        font-size: 0.84rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.10em !important;
        white-space: nowrap !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 {
        width: 100% !important;
        max-width: 540px !important;
        margin: 0 auto 10px !important;
        font-size: clamp(2.05rem, 4.1vw, 3.15rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.045em !important;
        text-align: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 span {
        display: block !important;
        white-space: normal !important;
    }

    #dashboard-view:not(.hidden) .welcome-quote-row {
        width: auto !important;
        max-width: 470px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 8px !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.90rem !important;
        line-height: 1.35 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-grid,
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 135px !important;
        display: grid !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        gap: 21px !important;
        width: auto !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 42px) !important;
        margin: 22px auto 0 !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 126px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        gap: 16px !important;
        max-width: calc((var(--welcome-tile-size) * 4) + 48px) !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-card,
    #dashboard-view:not(.hidden) .welcome-module-card:visited {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-icon {
        flex: 0 0 auto !important;
        width: 51px !important;
        height: 51px !important;
        border-radius: 18px !important;
        margin: 0 !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-icon i {
        font-size: 1.5rem !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-text {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        text-align: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-text strong {
        display: block !important;
        width: 100% !important;
        max-width: 112px !important;
        margin: 0 auto !important;
        color: #ffffff !important;
        font-size: 0.98rem !important;
        line-height: 1.03 !important;
        font-weight: 850 !important;
        letter-spacing: -0.02em !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-text em,
    #dashboard-view:not(.hidden) .welcome-module-open {
        display: none !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-clock {
        position: absolute !important;
        left: 21px !important;
        right: 21px !important;
        bottom: 17px !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-clock .welcome-panel-label {
        padding: 0 !important;
        color: rgba(148, 163, 184, 0.38) !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        letter-spacing: 0.10em !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-clock #welcome-panel-date,
    #dashboard-view:not(.hidden) .welcome-header-clock #welcome-panel-sub,
    #dashboard-view:not(.hidden) .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        display: inline-block !important;
        margin: 0 !important;
        font-size: 0.96rem !important;
        line-height: 1 !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   9.6.7 — Desktop Welcome Proportional Layout Correction
   UI-only. Desktop welcome screen only.
   Layout order: Welcome to / IBA System Management / quote / buttons / date-time.
   Fixes forced word-by-word title wrapping from the 50% scale attempt.
   Mobile/login/workflows untouched.
   ========================================================= */
@media screen and (min-width: 769px) {
    #dashboard-view:not(.hidden) {
        width: min(760px, calc(100vw - 44px)) !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
    }

    #dashboard-view:not(.hidden) .cyber-dashboard-card {
        width: 100% !important;
        max-width: 760px !important;
        min-height: 0 !important;
        padding: 22px 28px 26px !important;
        border-radius: 36px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #dashboard-view:not(.hidden) .dashboard-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
        padding-bottom: 16px !important;
        margin-bottom: 22px !important;
    }

    #dashboard-view:not(.hidden) #user-info {
        justify-self: start !important;
        min-width: 0 !important;
        flex: none !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-greeting,
    #dashboard-view:not(.hidden) .dashboard-header .welcome-person-line {
        grid-column: 2 !important;
        justify-self: center !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.95rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        flex: none !important;
    }

    #dashboard-view:not(.hidden) #logout-button {
        grid-column: 3 !important;
        justify-self: end !important;
        flex: none !important;
        padding: 12px 20px !important;
        min-height: 42px !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-main {
        width: 100% !important;
        max-width: 704px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-hero {
        width: 100% !important;
        max-width: 704px !important;
        margin: 0 auto 24px !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        overflow: visible !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-hero::before,
    #dashboard-view:not(.hidden) .welcome-premium-hero::after {
        display: none !important;
        content: none !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy {
        width: 100% !important;
        max-width: 704px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        overflow: visible !important;
    }

    #dashboard-view:not(.hidden) .welcome-eyebrow {
        padding: 6px 16px !important;
        margin: 0 auto 16px !important;
        border-radius: 999px !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.10em !important;
        white-space: nowrap !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 {
        width: 100% !important;
        max-width: 704px !important;
        margin: 0 auto 18px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        text-align: center !important;
        letter-spacing: -0.045em !important;
        line-height: 1 !important;
        overflow: visible !important;
        text-wrap: normal !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 span {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 0.98 !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 span:first-child {
        font-size: clamp(2.25rem, 4.2vw, 3.05rem) !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 span:nth-child(2) {
        font-size: clamp(2.28rem, 4.45vw, 3.28rem) !important;
    }

    #dashboard-view:not(.hidden) .welcome-quote-row {
        width: auto !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-grid,
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 150px !important;
        display: grid !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        gap: 24px !important;
        width: auto !important;
        max-width: calc((var(--welcome-tile-size) * 3) + 48px) !important;
        margin: 0 auto !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 138px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        gap: 18px !important;
        max-width: calc((var(--welcome-tile-size) * 4) + 54px) !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-card,
    #dashboard-view:not(.hidden) .welcome-module-card:visited {
        width: var(--welcome-tile-size) !important;
        height: var(--welcome-tile-size) !important;
        min-width: var(--welcome-tile-size) !important;
        max-width: var(--welcome-tile-size) !important;
        min-height: var(--welcome-tile-size) !important;
        max-height: var(--welcome-tile-size) !important;
        padding: 14px !important;
        border-radius: 25px !important;
        gap: 11px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-icon {
        flex: 0 0 auto !important;
        width: 54px !important;
        height: 54px !important;
        border-radius: 19px !important;
        margin: 0 !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-icon i {
        font-size: 1.55rem !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-text,
    #dashboard-view:not(.hidden) .welcome-module-text strong {
        width: 100% !important;
        max-width: 122px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-text strong {
        color: #ffffff !important;
        font-size: 1rem !important;
        line-height: 1.05 !important;
        font-weight: 850 !important;
        letter-spacing: -0.02em !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-clock {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 24px auto 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-clock .welcome-panel-label {
        padding: 0 !important;
        color: rgba(148, 163, 184, 0.42) !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        letter-spacing: 0.10em !important;
    }

    #dashboard-view:not(.hidden) .welcome-header-clock #welcome-panel-date,
    #dashboard-view:not(.hidden) .welcome-header-clock #welcome-panel-sub,
    #dashboard-view:not(.hidden) .welcome-header-clock #welcome-panel-sub.welcome-panel-time {
        position: static !important;
        display: inline-block !important;
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 860px) {
    #dashboard-view:not(.hidden) {
        width: min(700px, calc(100vw - 30px)) !important;
        max-width: 700px !important;
    }

    #dashboard-view:not(.hidden) .cyber-dashboard-card {
        max-width: 700px !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 span:first-child {
        font-size: clamp(2.05rem, 4vw, 2.72rem) !important;
    }

    #dashboard-view:not(.hidden) .welcome-premium-copy h1 span:nth-child(2) {
        font-size: clamp(2.05rem, 4.1vw, 2.9rem) !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 126px !important;
        gap: 16px !important;
    }
}

/* =========================================================
   9.6.8 — Desktop Welcome Today Label Yellow
   UI-only. Desktop welcome screen only.
   Makes the bottom "Today" label yellow while keeping date/time unchanged.
   Mobile/login/workflows untouched.
   ========================================================= */
@media screen and (min-width: 769px) {
    #dashboard-view:not(.hidden) .welcome-header-clock .welcome-panel-label {
        color: #facc15 !important;
        opacity: 1 !important;
        text-shadow: 0 0 12px rgba(250, 204, 21, 0.35) !important;
    }
}


/* =========================================================
   9.6.9 — Desktop Welcome Module Button Spacing Balance
   UI-only. Desktop welcome screen only.
   Adds wider, even horizontal separation between module buttons.
   Mobile/login/Firebase/workflows untouched.
   ========================================================= */
@media screen and (min-width: 769px) {
    #dashboard-view:not(.hidden) .welcome-premium-main,
    #dashboard-view:not(.hidden) .welcome-premium-hero,
    #dashboard-view:not(.hidden) .welcome-premium-copy {
        max-width: 820px !important;
    }

    /* 5/6-button layout: widen the 3-column grid so WorkDesk moves left,
       Inventory/PO move right, and the middle column stays balanced. */
    #dashboard-view:not(.hidden) .welcome-module-grid,
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 150px !important;
        --welcome-tile-gap-x: 86px !important;
        --welcome-tile-gap-y: 28px !important;
        grid-template-columns: repeat(3, var(--welcome-tile-size)) !important;
        column-gap: var(--welcome-tile-gap-x) !important;
        row-gap: var(--welcome-tile-gap-y) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 3) + (var(--welcome-tile-gap-x) * 2))) !important;
        max-width: min(100%, calc((var(--welcome-tile-size) * 3) + (var(--welcome-tile-gap-x) * 2))) !important;
        justify-content: center !important;
        justify-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 4-button layout for users who only see WorkDesk / Invoice / Inventory / Requisition. */
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 138px !important;
        --welcome-tile-gap-x: 68px !important;
        --welcome-tile-gap-y: 24px !important;
        grid-template-columns: repeat(4, var(--welcome-tile-size)) !important;
        column-gap: var(--welcome-tile-gap-x) !important;
        row-gap: var(--welcome-tile-gap-y) !important;
        width: min(100%, calc((var(--welcome-tile-size) * 4) + (var(--welcome-tile-gap-x) * 3))) !important;
        max-width: min(100%, calc((var(--welcome-tile-size) * 4) + (var(--welcome-tile-gap-x) * 3))) !important;
    }
}

/* Keep the layout safe on narrower desktop windows. */
@media screen and (min-width: 769px) and (max-width: 860px) {
    #dashboard-view:not(.hidden) .welcome-premium-main,
    #dashboard-view:not(.hidden) .welcome-premium-hero,
    #dashboard-view:not(.hidden) .welcome-premium-copy {
        max-width: 760px !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-grid,
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(6)),
    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(5)):not(:has(> .welcome-module-card:nth-child(6))) {
        --welcome-tile-size: 126px !important;
        --welcome-tile-gap-x: 54px !important;
        --welcome-tile-gap-y: 22px !important;
    }

    #dashboard-view:not(.hidden) .welcome-module-grid:has(> .welcome-module-card:nth-child(4)):not(:has(> .welcome-module-card:nth-child(5))) {
        --welcome-tile-size: 126px !important;
        --welcome-tile-gap-x: 34px !important;
        --welcome-tile-gap-y: 20px !important;
    }
}


/* ============================================================
   9.7.0 – Invoice Entry Modal Required Field + Footer Polish
   Scope: Desktop Invoice Management > Invoice Entry modal only.
   Purpose: restore a clear required-field highlight line and make
   the bottom footer solid/consistent before and after adding invoices.
   No Firebase, save, search, or workflow logic changed.
   ============================================================ */
@media (min-width: 769px) {
    /* Required fields: clear premium highlight line, stronger than older global modal overrides. */
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > input,
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > select,
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > textarea,
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required .choices__inner {
        border-left: 5px solid #f5b400 !important;
        background: linear-gradient(90deg, rgba(245, 180, 0, 0.18) 0 12px, #ffffff 12px) !important;
        box-shadow: inset 1px 0 0 rgba(245, 180, 0, 0.34), 0 0 0 1px rgba(17, 96, 69, 0.14) !important;
    }

    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > input:focus,
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > select:focus,
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > textarea:focus,
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required .choices.is-focused .choices__inner,
    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required .choices.is-open .choices__inner {
        border-left-color: #ffcc19 !important;
        background: linear-gradient(90deg, rgba(255, 204, 25, 0.24) 0 12px, #ffffff 12px) !important;
        box-shadow: inset 1px 0 0 rgba(255, 204, 25, 0.42), 0 0 0 4px rgba(17, 96, 69, 0.12) !important;
    }

    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > label {
        color: #0f5132 !important;
        -webkit-text-fill-color: #0f5132 !important;
    }

    body #im-invoice-entry-modal #im-new-invoice-form .form-group.is-required > label::after {
        content: "  Required" !important;
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 6px !important;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        background: rgba(245, 180, 0, 0.16) !important;
        color: #9a5b00 !important;
        -webkit-text-fill-color: #9a5b00 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        vertical-align: middle !important;
    }

    /* Attention uses Choices.js, so make the internal rendered input inherit the clean look. */
    body #im-invoice-entry-modal #im-attention-group.form-group.is-required .choices__input,
    body #im-invoice-entry-modal #im-attention-group.form-group.is-required .choices__list--single {
        background: transparent !important;
    }

    /* Footer: keep one solid premium footer state whether the form is blank, editing, or newly added. */
    body #im-invoice-entry-modal .modal-footer {
        opacity: 1 !important;
        background: linear-gradient(180deg, #f8fffc 0%, #eefaf4 100%) !important;
        border-top: 1px solid rgba(17, 96, 69, 0.18) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 -8px 22px rgba(6, 51, 34, 0.05) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #0f2f22 !important;
        -webkit-text-fill-color: initial !important;
    }

    body #im-invoice-entry-modal .modal-footer strong {
        color: #116045 !important;
        -webkit-text-fill-color: #116045 !important;
        font-weight: 800 !important;
    }

    body #im-invoice-entry-modal .modal-footer span {
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        font-weight: 650 !important;
    }
}


/* ============================================================
   9.7.1 – Invoice Entry Modal Soft Placeholder + Table Cleanup
   Scope: Desktop Invoice Management > Invoice Entry only.
   Purpose: make placeholder/helper text subtle, remove the duplicate
   Active Jobs title line, and keep Existing Invoices table header/footer
   clean without competing card/shadow/column-line styling.
   No Firebase, save, search, report, or workflow logic changed.
   ============================================================ */
@media (min-width: 769px) {
    body #im-invoice-entry-modal #im-new-invoice-form input::placeholder,
    body #im-invoice-entry-modal #im-new-invoice-form textarea::placeholder {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
        font-style: italic !important;
        font-weight: 400 !important;
        opacity: 1 !important;
        letter-spacing: normal !important;
    }

    body #im-invoice-entry-modal #im-new-invoice-form input::-webkit-input-placeholder,
    body #im-invoice-entry-modal #im-new-invoice-form textarea::-webkit-input-placeholder {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
        font-style: italic !important;
        font-weight: 400 !important;
        opacity: 1 !important;
    }

    body #im-invoice-entry-modal #im-new-invoice-form input::-moz-placeholder,
    body #im-invoice-entry-modal #im-new-invoice-form textarea::-moz-placeholder {
        color: #94a3b8 !important;
        font-style: italic !important;
        font-weight: 400 !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   9.7.1 OFFICIAL FINAL RULE — Invoice Entry Visual Cleanup
   This final scoped rule wins over older duplicate invoice-entry table/sidebar
   styling without changing any Firebase, save, search, or workflow logic.
   Desktop Invoice Entry only.
   ============================================================ */
@media (min-width: 769px) {
    /* Soft helper/placeholder text inside the Invoice Entry modal fields. */
    body #im-invoice-entry-modal #im-new-invoice-form input::placeholder,
    body #im-invoice-entry-modal #im-new-invoice-form textarea::placeholder,
    body #im-invoice-entry-modal #im-new-invoice-form input::-webkit-input-placeholder,
    body #im-invoice-entry-modal #im-new-invoice-form textarea::-webkit-input-placeholder {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
        font-style: italic !important;
        font-weight: 400 !important;
        opacity: 1 !important;
        letter-spacing: normal !important;
    }

    body #im-invoice-entry-modal #im-new-invoice-form input::-moz-placeholder,
    body #im-invoice-entry-modal #im-new-invoice-form textarea::-moz-placeholder {
        color: #94a3b8 !important;
        font-style: italic !important;
        font-weight: 400 !important;
        opacity: 1 !important;
    }

    /* Active Jobs right panel: remove the second boxed/line feeling from the title. */
    body #invoice-management-view #im-entry-sidebar #active-jobs-sidebar-count-display,
    body #invoice-management-view #im-entry-sidebar .im-sidebar-title,
    body #im-entry-sidebar #active-jobs-sidebar-count-display,
    body #im-entry-sidebar .im-sidebar-title {
        color: #f5c84c !important;
        -webkit-text-fill-color: #f5c84c !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 4px 2px 10px !important;
        margin: 0 0 10px !important;
        font-weight: 760 !important;
    }

    /* Existing Invoices: one clean section, no card-over-card effect. */
    body #invoice-management-view #im-existing-invoices-container,
    body #im-existing-invoices-container {
        margin-top: 18px !important;
        padding: 10px 0 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body #invoice-management-view #im-existing-invoices-container .section-divider,
    body #im-existing-invoices-container .section-divider {
        margin: 18px 0 14px !important;
        border: 0 !important;
        border-top: 1px solid rgba(17, 96, 69, 0.13) !important;
    }

    body #invoice-management-view #existing-invoices-count-display,
    body #existing-invoices-count-display {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: #0f2f22 !important;
        -webkit-text-fill-color: #0f2f22 !important;
        font-size: 1.12rem !important;
        font-weight: 760 !important;
        letter-spacing: -0.015em !important;
    }

    body #invoice-management-view #existing-invoices-count-display::before,
    body #existing-invoices-count-display::before {
        content: "" !important;
        display: inline-block !important;
        width: 7px !important;
        height: 22px !important;
        border-radius: 999px !important;
        background: #116045 !important;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }

    body #invoice-management-view #existing-invoices-count-display::after,
    body #existing-invoices-count-display::after {
        content: none !important;
        display: none !important;
    }

    body #invoice-management-view #im-existing-invoices-container .table-wrapper,
    body #im-existing-invoices-container .table-wrapper {
        padding: 0 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #dfe9e5 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body #invoice-management-view #im-existing-invoices-container table,
    body #invoice-management-view #im-invoices-table,
    body #im-existing-invoices-container table {
        width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
    }

    body #invoice-management-view #im-existing-invoices-container table thead,
    body #invoice-management-view #im-existing-invoices-container table thead tr,
    body #invoice-management-view #im-existing-invoices-container table thead th,
    body #invoice-management-view #im-invoices-table thead,
    body #invoice-management-view #im-invoices-table thead tr,
    body #invoice-management-view #im-invoices-table thead th,
    body #im-existing-invoices-container table thead th {
        background: #116045 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        font-size: .74rem !important;
        font-weight: 720 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
        padding: 10px 11px !important;
        border-radius: 0 !important;
    }

    body #invoice-management-view #im-existing-invoices-container table tbody tr,
    body #invoice-management-view #im-invoices-table tbody tr,
    body #im-existing-invoices-container table tbody tr {
        background: #ffffff !important;
        box-shadow: none !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    body #invoice-management-view #im-existing-invoices-container table tbody tr:hover,
    body #invoice-management-view #im-invoices-table tbody tr:hover,
    body #im-existing-invoices-container table tbody tr:hover {
        background: #f7fbf9 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body #invoice-management-view #im-existing-invoices-container table tbody td,
    body #invoice-management-view #im-invoices-table tbody td,
    body #im-existing-invoices-container table tbody td {
        background: transparent !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid #edf2f0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 10px 10px !important;
    }

    body #invoice-management-view #im-existing-invoices-container table tfoot,
    body #invoice-management-view #im-existing-invoices-container table tfoot tr,
    body #invoice-management-view #im-existing-invoices-container table tfoot td,
    body #invoice-management-view #im-invoices-table-footer,
    body #invoice-management-view #im-invoices-table-footer tr,
    body #invoice-management-view #im-invoices-table-footer td,
    body #im-existing-invoices-container table tfoot,
    body #im-existing-invoices-container table tfoot tr,
    body #im-existing-invoices-container table tfoot td,
    body #im-invoices-table-footer,
    body #im-invoices-table-footer tr,
    body #im-invoices-table-footer td {
        background: #eaf7f1 !important;
        color: #0f5132 !important;
        -webkit-text-fill-color: #0f5132 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-top: 2px solid #116045 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        font-weight: 760 !important;
        padding: 11px 10px !important;
    }

    body #invoice-management-view #im-invoices-table-footer *,
    body #invoice-management-view #im-invoices-total-value,
    body #invoice-management-view #im-invoices-total-paid,
    body #im-invoices-table-footer *,
    body #im-invoices-total-value,
    body #im-invoices-total-paid {
        color: #0f5132 !important;
        -webkit-text-fill-color: #0f5132 !important;
        opacity: 1 !important;
        text-shadow: none !important;
        font-weight: 760 !important;
    }
}

/* 9.7.3 — WorkDesk queue date tabs
   Replaces per-row waiting chips with a cleaner date-tab view for New Entry / For SRV priority. */
.wd-task-board-date-tabs {
    padding: 18px;
}

.wd-date-tabs-wrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 4px 2px 14px;
    margin: 0 0 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.wd-date-tab {
    min-width: 118px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 17px;
    background: rgba(255,255,255,0.86);
    color: #334155;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "day count"
        "age age";
    align-items: center;
    gap: 3px 9px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    text-align: left;
}

.wd-date-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 116, 144, 0.35);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
}

.wd-date-tab.active {
    background: linear-gradient(135deg, #0f4c75, #15778b);
    border-color: rgba(15, 76, 117, 0.45);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 76, 117, 0.22);
}

.wd-date-tab-day {
    grid-area: day;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}

.wd-date-tab-count {
    grid-area: count;
    min-width: 30px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef6f8;
    color: #0f4c75;
    font-weight: 850;
    font-size: .82rem;
}

.wd-date-tab.active .wd-date-tab-count {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}

.wd-date-tab small {
    grid-area: age;
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.wd-date-tab.active small {
    color: rgba(255,255,255,0.78);
}

.wd-date-tabs-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 2px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
}

.wd-date-tabs-note i {
    color: #0f4c75;
}

.wd-task-footline {
    align-items: center;
    gap: 8px 10px;
    font-weight: 600;
}

.wd-task-footline span {
    color: #64748b;
    font-weight: 600;
}

.wd-task-footline span i {
    color: #94a3b8;
}

.wd-queue-time {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155 !important;
}

.wd-queue-time i {
    color: #0f4c75 !important;
}

@media (max-width: 768px) {
    .wd-date-tabs-wrap {
        gap: 8px;
        padding-bottom: 10px;
    }

    .wd-date-tab {
        min-width: 104px;
        padding: 10px 11px;
    }

    .wd-date-tabs-note {
        border-radius: 14px;
        align-items: flex-start;
        line-height: 1.35;
    }
}


/* ========================================================================
   9.7.4 — Batch Entry urgent readability / dropdown contrast fix
   Scope: Invoice Management > Batch Entry only.
   Purpose: Some later green-theme rules left inputs/selects inheriting light/white
   text-fill colors. Keep the premium card style but force all editable fields,
   dropdown values, Choices.js dropdowns, and options to use readable dark text.
   No Firebase, save, search, or workflow logic changed.
   ======================================================================== */
#invoice-management-view #im-batch-entry .batch-invoice-card input,
#invoice-management-view #im-batch-entry .batch-invoice-card select,
#invoice-management-view #im-batch-entry .batch-invoice-card textarea,
#invoice-management-view #im-batch-entry .batch-input,
#invoice-management-view #im-batch-entry #im-batch-po-input,
#invoice-management-view #im-batch-entry #im-batch-global-controls input,
#invoice-management-view #im-batch-entry #im-batch-global-controls select,
#invoice-management-view #im-batch-entry #im-batch-global-controls .choices__inner,
#invoice-management-view #im-batch-entry .batch-note-search-wrapper .choices__inner,
#invoice-management-view #im-batch-entry .choices__input,
#invoice-management-view #im-batch-entry .choices__input--cloned {
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
    caret-color: #116045 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Header row labels stay white because the header itself is dark green. */
#invoice-management-view #im-batch-entry .batch-card-header label,
#invoice-management-view #im-batch-entry .batch-card-header .compact-input label {
    color: rgba(255,255,255,.94) !important;
    -webkit-text-fill-color: rgba(255,255,255,.94) !important;
    text-shadow: none !important;
}

/* Header editable fields must stay readable even inside the green header. */
#invoice-management-view #im-batch-entry .batch-card-header input,
#invoice-management-view #im-batch-entry .batch-card-header select,
#invoice-management-view #im-batch-entry .batch-card-header .batch-attention-btn,
#invoice-management-view #im-batch-entry .batch-card-header .choices__inner,
#invoice-management-view #im-batch-entry .batch-card-header .choices__item {
    color: #073524 !important;
    -webkit-text-fill-color: #073524 !important;
    background-color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Keep important Batch Entry fields softly highlighted, but with readable text. */
#invoice-management-view #im-batch-entry .batch-card-header input[name="invNumber"],
#invoice-management-view #im-batch-entry .batch-card-header select[name="status"],
#invoice-management-view #im-batch-entry .batch-card-body .batch-input-grid > div:nth-child(5) input,
#invoice-management-view #im-batch-entry .batch-card-body .batch-input-grid > div:nth-child(6) input {
    background-color: #fff8db !important;
    border-color: rgba(246,194,62,.72) !important;
    color: #2f2400 !important;
    -webkit-text-fill-color: #2f2400 !important;
}

/* Normal lower-row labels and field values: clean, readable, not heavy-white. */
#invoice-management-view #im-batch-entry .batch-card-body label,
#invoice-management-view #im-batch-entry .batch-input-grid label {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    font-weight: 650 !important;
    text-shadow: none !important;
}
#invoice-management-view #im-batch-entry .batch-card-body input,
#invoice-management-view #im-batch-entry .batch-card-body select,
#invoice-management-view #im-batch-entry .batch-input-grid input,
#invoice-management-view #im-batch-entry .batch-input-grid select {
    background-color: #ffffff !important;
    border-color: #d6e2dc !important;
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
    font-weight: 650 !important;
}

/* Native dropdown menu options must not inherit white text. */
#invoice-management-view #im-batch-entry select option,
#invoice-management-view #im-batch-entry select optgroup,
#im-batch-search-modal select option,
#im-batch-search-modal select optgroup,
#im-attention-picker-modal select option,
#im-attention-picker-modal select optgroup {
    background: #ffffff !important;
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
}

/* Choices.js dropdowns used by Batch Entry note/attention pickers. */
#invoice-management-view #im-batch-entry .choices,
#invoice-management-view #im-batch-entry .choices *,
#im-attention-picker-modal .choices,
#im-attention-picker-modal .choices * {
    text-shadow: none !important;
}
#invoice-management-view #im-batch-entry .choices__inner,
#invoice-management-view #im-batch-entry .choices__list--single .choices__item,
#invoice-management-view #im-batch-entry .choices__list--multiple .choices__item,
#invoice-management-view #im-batch-entry .choices__list--dropdown,
#invoice-management-view #im-batch-entry .choices__list--dropdown .choices__item,
#invoice-management-view #im-batch-entry .choices__list[aria-expanded] .choices__item,
#im-attention-picker-modal .choices__inner,
#im-attention-picker-modal .choices__list--single .choices__item,
#im-attention-picker-modal .choices__list--multiple .choices__item,
#im-attention-picker-modal .choices__list--dropdown,
#im-attention-picker-modal .choices__list--dropdown .choices__item,
#im-attention-picker-modal .choices__list[aria-expanded] .choices__item {
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
}
#invoice-management-view #im-batch-entry .choices__list--dropdown .choices__item--highlighted,
#invoice-management-view #im-batch-entry .choices__list[aria-expanded] .choices__item--highlighted,
#im-attention-picker-modal .choices__list--dropdown .choices__item--highlighted,
#im-attention-picker-modal .choices__list[aria-expanded] .choices__item--highlighted {
    background-color: #eaf8f1 !important;
    color: #073524 !important;
    -webkit-text-fill-color: #073524 !important;
}

/* Search Batch modal text readability. */
#im-batch-search-modal input,
#im-batch-search-modal select,
#im-batch-search-modal textarea,
#im-batch-search-modal table td,
#im-batch-search-modal table td * {
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
    text-shadow: none !important;
}
#im-batch-search-modal table th,
#im-batch-search-modal table th * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ========================================================================
   9.7.5 — Batch Entry Global Attention single-border cleanup
   Scope: Invoice Management > Batch Entry > Global Overrides only.
   Purpose: The Set All Attention To Choices field was showing a second
   rectangular border because the native/select wrapper and Choices inner field
   were both being styled. Keep only one official visible field border.
   ======================================================================== */
#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}

#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices::before,
#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices::after {
    box-shadow: none !important;
}

#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices .choices__inner {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 42px 0 22px !important;
    border: 1px solid #cdd8e3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15,46,71,.04) !important;
    display: flex !important;
    align-items: center !important;
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
    overflow: hidden !important;
}

#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices .choices__list--single,
#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices .choices__item {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
    font-weight: 500 !important;
}

#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices .choices__input,
#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices .choices__input--cloned {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #10251c !important;
    -webkit-text-fill-color: #10251c !important;
}

#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices.is-focused .choices__inner,
#invoice-management-view #im-batch-entry #im-batch-global-controls #im-batch-global-attention + .choices.is-open .choices__inner {
    border-color: #116045 !important;
    box-shadow: 0 0 0 4px rgba(17,96,69,.10), 0 8px 18px rgba(15,46,71,.04) !important;
}

/* ========================================================================
   9.7.8 — Invoice Records expanded entries total alignment restore
   Scope: Desktop Invoice Management > Invoice Records > expanded Invoice Entries.
   Purpose: keep the TOTAL footer visible while restoring the previous correct
   table alignment. This replaces the 9.7.7 footer rule; do not add another
   competing footer design below this block.
   Mobile is intentionally untouched.
   ======================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer {
        display: table-footer-group !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer tr.im-entries-total-row {
        display: table-row !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #0f6248 !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer td {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 7px 6px !important;
        border: 0 !important;
        background: #0f6248 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: .75rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-shadow: none !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer td strong {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-weight: 800 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer .im-entries-total-label {
        text-align: right !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer .im-entries-total-value,
    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer .im-entries-total-balance {
        text-align: right !important;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer .im-entries-total-balance {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-weight: 800 !important;
    }

    #invoice-management-view #im-reporting .im-nested-invoice-table tfoot.im-entries-total-footer .im-entries-total-spacer {
        background: #0f6248 !important;
    }
}

/* ========================================================================
   9.7.9 — WorkDesk Job Records cleaner typography + Active Task date tabs
   Scope: Desktop WorkDesk Job Records and Desktop Active Task only.
   Purpose: reduce heavy all-bold visual weight, make History icon-only, and
   add Dashboard-style queue date tabs to Active Task without extra Firebase reads.
   ======================================================================== */
@media (min-width: 769px) {
    #wd-reporting .wd-records-modern-table thead th {
        font-weight: 720 !important;
        letter-spacing: .052em !important;
        color: #52606d !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    #wd-reporting .wd-records-modern-table tbody tr.wd-modern-row {
        box-shadow: 0 8px 20px rgba(15, 46, 71, 0.055) !important;
    }

    #wd-reporting .wd-records-modern-table tbody tr.wd-modern-row:hover {
        box-shadow: 0 13px 28px rgba(15, 46, 71, 0.09) !important;
    }

    #wd-reporting .wd-records-modern-table tbody tr.wd-modern-row td {
        color: #273846 !important;
        font-weight: 500 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #wd-reporting .wd-records-modern-table .wd-table-kicker,
    #wd-reporting .wd-records-modern-table .wd-ref-chip,
    #wd-reporting .wd-records-modern-table .wd-po-code,
    #wd-reporting .wd-records-modern-table .wd-site-badge,
    #wd-reporting .wd-records-modern-table .wd-date-chip,
    #wd-reporting .wd-records-modern-table .wd-user-chip,
    #wd-reporting .wd-records-modern-table .wd-attention-chip {
        font-weight: 620 !important;
        font-size: .76rem !important;
        box-shadow: none !important;
    }

    #wd-reporting .wd-records-modern-table .wd-vendor-name {
        font-weight: 680 !important;
        color: #0b3b50 !important;
    }

    #wd-reporting .wd-records-modern-table .wd-amount-cell {
        font-weight: 680 !important;
        color: #132f3f !important;
    }

    #wd-reporting .wd-records-modern-table .wd-status-badge {
        font-weight: 680 !important;
        letter-spacing: .01em !important;
    }

    #wd-reporting .wd-records-modern-table .wd-record-status-cell {
        gap: 6px !important;
    }

    #wd-reporting .wd-records-modern-table .wd-history-icon-only,
    #wd-reporting .wd-records-modern-table .wd-action-history.wd-history-icon-only {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        gap: 0 !important;
        font-size: .82rem !important;
    }

    #wd-reporting .wd-records-modern-table .wd-history-icon-only i {
        margin: 0 !important;
        font-size: .82rem !important;
    }

    #wd-activetask #active-task-date-tabs.wd-active-date-tabs {
        margin: 2px 0 14px;
        padding: 12px 14px 6px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92));
        box-shadow: 0 16px 34px rgba(15, 46, 71, 0.06);
    }

    #wd-activetask .wd-active-date-tabs-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 2px 8px;
    }

    #wd-activetask .wd-active-date-tabs-head span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #0f4c75;
        font-weight: 700;
        letter-spacing: .01em;
    }

    #wd-activetask .wd-active-date-tabs-head small {
        color: #64748b;
        font-size: .78rem;
        font-weight: 500;
        text-align: right;
    }

    #wd-activetask #active-task-date-tabs .wd-date-tabs-wrap {
        padding: 2px 1px 8px;
        margin-bottom: 0;
    }

    #wd-activetask #active-task-date-tabs .wd-date-tab {
        min-width: 112px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
    }

    #wd-activetask #active-task-date-tabs .wd-date-tab-day {
        font-weight: 720;
    }

    #wd-activetask #active-task-date-tabs .wd-date-tab-count {
        font-weight: 760;
    }

    #wd-activetask #active-task-date-tabs .wd-date-tab small {
        font-weight: 520;
    }
}

/* ========================================================================== 
   9.8.1 — Invoice Entry PO Original File Attention Marker
   Scope: Invoice Entry PO Record indicator + modal folder action only.
   Purpose: make "Original PO in File" obvious without adding duplicate styles.
   ========================================================================== */
@media (min-width: 769px) {
    #invoice-management-view #im-modal-po-details .im-po-record.im-po-record-status {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: max-content !important;
        max-width: 100% !important;
        min-height: 24px !important;
        padding: 4px 10px !important;
        border-radius: 999px !important;
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        font-weight: 850 !important;
        letter-spacing: 0.01em !important;
        text-transform: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
        -webkit-text-fill-color: currentColor !important;
        white-space: nowrap !important;
    }

    #invoice-management-view #im-modal-po-details .im-po-record.im-po-record-status i {
        font-size: 0.86rem !important;
        line-height: 1 !important;
        color: currentColor !important;
        -webkit-text-fill-color: currentColor !important;
        fill: currentColor !important;
    }

    #invoice-management-view #im-modal-po-details .im-po-record-status-found {
        background: #fff1f2 !important;
        border: 1px solid rgba(220, 38, 38, 0.38) !important;
        color: #b91c1c !important;
        -webkit-text-fill-color: #b91c1c !important;
    }

    #invoice-management-view #im-modal-po-details .im-po-record-status-checking {
        background: #fffbeb !important;
        border: 1px solid rgba(245, 158, 11, 0.34) !important;
        color: #92400e !important;
        -webkit-text-fill-color: #92400e !important;
    }

    #invoice-management-view #im-modal-po-details .im-po-record-status-none {
        background: #f8fafc !important;
        border: 1px solid rgba(100, 116, 139, 0.24) !important;
        color: #64748b !important;
        -webkit-text-fill-color: #64748b !important;
        font-weight: 760 !important;
    }

    #invoice-management-view #im-modal-po-details .im-po-record-status-error {
        background: #fff7ed !important;
        border: 1px solid rgba(234, 88, 12, 0.36) !important;
        color: #c2410c !important;
        -webkit-text-fill-color: #c2410c !important;
    }

    #invoice-management-view #im-po-collect-btn.im-po-collect-btn,
    #im-invoice-entry-modal #im-modal-deletion-list-btn.im-po-file-action-btn.im-po-file-action-btn--active {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: 30px !important;
        padding: 6px 12px !important;
        margin-left: 10px !important;
        border: 1px solid rgba(153, 27, 27, 0.22) !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #dc2626, #991b1b) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 0.76rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        box-shadow: 0 10px 22px rgba(153, 27, 27, 0.16) !important;
        cursor: pointer !important;
    }

    #im-invoice-entry-modal #im-modal-deletion-list-btn.im-po-file-action-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        color: #64748b !important;
        -webkit-text-fill-color: #64748b !important;
        border: 1px solid rgba(100, 116, 139, 0.18) !important;
        box-shadow: none !important;
    }

    #invoice-management-view #im-po-collect-btn.im-po-collect-btn i,
    #im-invoice-entry-modal #im-modal-deletion-list-btn.im-po-file-action-btn.im-po-file-action-btn--active i {
        color: #facc15 !important;
        -webkit-text-fill-color: #facc15 !important;
        fill: #facc15 !important;
        font-size: 0.95rem !important;
    }

    #invoice-management-view #im-po-collect-btn.im-po-collect-btn:hover,
    #im-invoice-entry-modal #im-modal-deletion-list-btn.im-po-file-action-btn.im-po-file-action-btn--active:hover {
        filter: brightness(1.03) !important;
        transform: translateY(-1px) !important;
    }
}

/* ========================================================================
   9.9.1 — WorkDesk All Active Corkboard Preview by Site
   Scope: WorkDesk Dashboard > All Active Tasks only.
   Purpose: My Personal Tasks keeps date tabs. All Active becomes a quick
   site-grouped preview board with clean yellow pinned notes.
   ======================================================================== */
#wd-dashboard .wd-cork-board {
    padding: 18px;
    border-radius: 0 0 26px 26px;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.18), transparent 20%),
        radial-gradient(circle at 76% 18%, rgba(255, 244, 200, 0.10), transparent 24%),
        radial-gradient(circle at 24% 78%, rgba(78, 49, 26, 0.12) 0 1px, transparent 1.4px),
        radial-gradient(circle at 68% 38%, rgba(92, 58, 31, 0.11) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 62%, rgba(255, 240, 201, 0.10) 0 1px, transparent 1.6px),
        radial-gradient(circle at 40% 30%, rgba(255, 248, 214, 0.10) 0 0.9px, transparent 1.3px),
        repeating-linear-gradient(12deg, rgba(255,255,255,0.035) 0 2px, rgba(0,0,0,0) 2px 14px),
        repeating-linear-gradient(102deg, rgba(83, 51, 25, 0.10) 0 1px, rgba(0,0,0,0) 1px 13px),
        linear-gradient(135deg, #ba7c3f 0%, #946032 38%, #774928 72%, #653d23 100%);
    background-size: auto, auto, 48px 48px, 62px 62px, 74px 74px, 56px 56px, auto, auto, auto;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 0 0 1px rgba(86, 51, 23, 0.12);
}

#wd-dashboard .wd-cork-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 12px;
    border-radius: 20px;
    color: #ffffff;
    background: rgba(69, 38, 18, 0.52);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 18px 34px rgba(58, 32, 15, 0.18);
    backdrop-filter: blur(4px);
}

#wd-dashboard .wd-cork-board-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#wd-dashboard .wd-cork-board-head strong {
    color: #ffffff;
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 780;
}

#wd-dashboard .wd-cork-board-head span:not(.wd-board-label) {
    color: rgba(255,255,255,0.80);
    font-size: .86rem;
    font-weight: 520;
}

#wd-dashboard .wd-cork-board .wd-board-label {
    color: #fde68a;
    font-weight: 760;
}

#wd-dashboard .wd-cork-board-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 251, 235, 0.90);
    border: 1px solid rgba(253, 230, 138, 0.88);
    color: #7c4a14;
    font-size: .82rem;
    font-weight: 560;
    box-shadow: 0 10px 24px rgba(58, 32, 15, 0.08);
}

#wd-dashboard .wd-cork-board-note i {
    color: #ca8a04;
}

#wd-dashboard .wd-cork-site-section {
    margin-top: 16px;
}

#wd-dashboard .wd-cork-site-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 15px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: 0 12px 26px rgba(58, 32, 15, 0.12);
}

#wd-dashboard .wd-cork-site-head div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#wd-dashboard .wd-cork-site-kicker {
    color: #92400e;
    font-size: .68rem;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .11em;
}

#wd-dashboard .wd-cork-site-head strong {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 760;
}

#wd-dashboard .wd-cork-site-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

#wd-dashboard .wd-cork-note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 16px;
}

#wd-dashboard .wd-cork-note {
    --tone: #0f4c75;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 315px;
    padding: 22px 15px 15px;
    border-radius: 18px 18px 20px 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.34), transparent 42%),
        linear-gradient(180deg, #fff7ba 0%, #ffe77f 100%);
    border: 1px solid rgba(234, 179, 8, 0.42);
    box-shadow:
        0 18px 30px rgba(58, 32, 15, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.70);
    color: #334155;
    overflow: hidden;
    transform: rotate(var(--note-tilt, 0deg));
    animation: wdCardRise .25s ease both;
    animation-delay: var(--note-delay, 0ms);
}

#wd-dashboard .wd-cork-note:hover {
    transform: translateY(-2px) rotate(var(--note-tilt, 0deg));
    box-shadow:
        0 24px 42px rgba(58, 32, 15, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.74);
}

#wd-dashboard .wd-cork-note::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: color-mix(in srgb, var(--tone) 72%, #facc15);
    opacity: .82;
}

#wd-dashboard .wd-note-pin {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 34% 28%, #ffd7d1 0 18%, #ff6d55 29%, #e9362d 57%, #a91218 100%);
    border: 1px solid rgba(128, 18, 18, 0.32);
    box-shadow:
        0 2px 3px rgba(100, 20, 20, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.30);
    z-index: 4;
    overflow: visible;
}

#wd-dashboard .wd-note-pin::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 0 0 7px 7px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #b9161b 0%, #7e0d11 100%);
    box-shadow: none;
    z-index: -1;
}

#wd-dashboard .wd-note-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 20px;
    width: 25px;
    height: 4px;
    border-radius: 999px;
    transform-origin: left center;
    transform: translateX(-2px) rotate(38deg);
    background: linear-gradient(90deg, #8b949e 0%, #f3f4f6 28%, #c7b779 63%, #6f623a 100%);
    box-shadow: 10px 7px 0 0 rgba(163, 127, 55, 0.18);
    z-index: -2;
}

#wd-dashboard .wd-note-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#wd-dashboard .wd-note-kicker,
#wd-dashboard .wd-note-detail-grid small,
#wd-dashboard .wd-note-current-note small {
    display: block;
    color: #8a6a17;
    font-size: .66rem;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: .075em;
}

#wd-dashboard .wd-note-head h3 {
    margin: 2px 0 0;
    color: #1e293b;
    font-size: 1.34rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 820;
}

#wd-dashboard .wd-cork-note .wd-status-pill {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,0.48);
    box-shadow: 0 6px 14px rgba(15,23,42,0.08);
    font-size: .72rem;
    font-weight: 760;
    white-space: nowrap;
}

#wd-dashboard .wd-note-vendor {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #334155;
    font-size: .9rem;
    font-weight: 650;
}

#wd-dashboard .wd-note-vendor i {
    color: #0f4c75;
}

#wd-dashboard .wd-note-vendor span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wd-dashboard .wd-note-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#wd-dashboard .wd-note-detail-grid span {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 12px;
    background: rgba(255,255,255,0.42);
    border: 1px solid rgba(180, 83, 9, 0.12);
}

#wd-dashboard .wd-note-detail-grid strong {
    display: block;
    margin-top: 2px;
    color: #1f2937;
    font-size: .82rem;
    font-weight: 690;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#wd-dashboard .wd-note-current-note {
    flex: 1 1 auto;
    padding: 9px 10px;
    border-radius: 13px;
    background: rgba(255,255,255,0.35);
    border-left: 3px solid rgba(180, 83, 9, 0.42);
}

#wd-dashboard .wd-note-current-note p {
    margin: 4px 0 0;
    color: #374151;
    font-size: .85rem;
    line-height: 1.35;
    font-weight: 560;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#wd-dashboard .wd-note-responsible {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: #475569;
    font-size: .76rem;
    font-weight: 620;
}

#wd-dashboard .wd-note-responsible span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.42);
}

#wd-dashboard .wd-note-responsible i {
    color: #0f4c75;
}

#wd-dashboard .wd-note-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

#wd-dashboard .wd-note-actions .wd-dashboard-pdf-btn,
#wd-dashboard .wd-note-actions .wd-pdf-empty {
    flex: 1 1 0;
    min-height: 34px;
    border-radius: 11px;
    font-size: .76rem;
    box-shadow: 0 8px 16px rgba(58, 32, 15, 0.12);
}

#wd-dashboard .wd-note-actions .wd-pdf-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.36);
    color: #9ca3af;
}

@media (max-width: 768px) {
    #wd-dashboard .wd-cork-board {
        padding: 12px;
        border-radius: 0 0 20px 20px;
    }

    #wd-dashboard .wd-cork-board-head {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 16px;
    }

    #wd-dashboard .wd-cork-board-note {
        border-radius: 14px;
        align-items: flex-start;
        line-height: 1.35;
    }

    #wd-dashboard .wd-cork-note-grid {
        grid-template-columns: 1fr;
    }

    #wd-dashboard .wd-cork-note {
        transform: none;
        min-height: auto;
    }

    #wd-dashboard .wd-cork-note:hover {
        transform: translateY(-1px);
    }
}

/* 9.9.2 — WorkDesk All Active site selector + accounting amount polish */
@media (min-width: 769px) {
  #wd-dashboard .wd-cork-board-site-filtered .wd-cork-board-note {
    margin-bottom: 14px;
  }

  #wd-dashboard .wd-cork-site-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
  }

  #wd-dashboard .wd-cork-site-card {
    position: relative;
    border: 1px solid rgba(146, 64, 14, 0.18);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff7cc 0%, #fff2a6 58%, #fce58d 100%);
    box-shadow: 0 12px 24px rgba(92, 64, 20, 0.12), inset 0 1px 0 rgba(255,255,255,0.72);
    padding: 14px 14px 12px;
    min-height: 118px;
    cursor: pointer;
    text-align: left;
    color: #3b2f1b;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }

  #wd-dashboard .wd-cork-site-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(92, 64, 20, 0.16), inset 0 1px 0 rgba(255,255,255,0.78);
    border-color: rgba(146, 64, 14, 0.35);
  }

  #wd-dashboard .wd-cork-site-card.active {
    border-color: rgba(190, 24, 24, 0.55);
    box-shadow: 0 18px 34px rgba(127, 29, 29, 0.16), inset 0 0 0 2px rgba(220, 38, 38, 0.20);
  }

  #wd-dashboard .wd-site-card-pin {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: #facc15;
    box-shadow: 0 5px 10px rgba(127, 29, 29, 0.28);
    font-size: 0.75rem;
  }

  #wd-dashboard .wd-site-card-no {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #7f1d1d;
    line-height: 1.05;
    padding-right: 28px;
  }

  #wd-dashboard .wd-site-card-name {
    display: block;
    margin-top: 5px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #5c4014;
    line-height: 1.25;
    min-height: 32px;
  }

  #wd-dashboard .wd-site-card-count {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    color: #7c2d12;
    font-size: 0.76rem;
    font-weight: 700;
  }

  #wd-dashboard .wd-cork-site-card small {
    display: block;
    margin-top: 7px;
    color: rgba(92, 64, 20, 0.78);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #wd-dashboard .wd-cork-site-section.active-site {
    margin-top: 0;
  }

  #wd-dashboard .wd-cork-site-head em {
    display: block;
    margin-top: 2px;
    color: #6b7280;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
  }

  #wd-dashboard .wd-note-detail-grid strong {
    font-variant-numeric: tabular-nums;
  }
}

/* ========================================================================
   9.9.5 — WorkDesk My Personal Corkboard Notes + Status Note Box
   Scope: WorkDesk Dashboard only.
   Purpose: Keep My Personal date tabs, but present tasks as pinned yellow notes.
   Status is shown below Current note using the same clean note-box style.
   ======================================================================== */
#wd-dashboard .wd-personal-cork-queue .wd-personal-cork-board {
    margin-top: 14px;
    border-radius: 22px;
}

#wd-dashboard .wd-personal-cork-note-grid {
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}

#wd-dashboard .wd-note-current-status {
    padding: 9px 10px;
    border-radius: 13px;
    background: rgba(255,255,255,0.35);
    border-left: 3px solid color-mix(in srgb, var(--tone, #0f4c75) 64%, #facc15);
}

#wd-dashboard .wd-note-current-status small {
    display: block;
    color: #8a6a17;
    font-size: .66rem;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: .075em;
}

#wd-dashboard .wd-note-current-status p {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 0;
    color: #1f2937;
    font-size: .86rem;
    line-height: 1.35;
    font-weight: 680;
}

#wd-dashboard .wd-note-current-status i {
    color: color-mix(in srgb, var(--tone, #0f4c75) 84%, #111827);
}

#wd-dashboard .wd-note-detail-grid span:has(small + strong:empty) {
    display: none;
}

@media (max-width: 768px) {
    #wd-dashboard .wd-personal-cork-queue .wd-personal-cork-board {
        margin-top: 12px;
        border-radius: 18px;
    }
}

/* ========================================================================
   9.9.8 — WorkDesk corkboard pending age + modal/history scope cleanup
   Scope: WorkDesk only unless history modal explicitly receives a scope class.
   ======================================================================== */
#wd-dashboard .wd-note-age {
    position: relative;
}

#wd-dashboard .wd-note-age strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#wd-dashboard .wd-note-age strong::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

#wd-dashboard .wd-note-age-fresh strong::before {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.13);
}

#wd-dashboard .wd-note-age-watch strong::before {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

#wd-dashboard .wd-note-age-alert strong::before {
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.17);
}

#wd-dashboard .wd-note-age-critical {
    background: rgba(254, 226, 226, 0.58) !important;
    border-color: rgba(220, 38, 38, 0.30) !important;
}

#wd-dashboard .wd-note-age-critical small,
#wd-dashboard .wd-note-age-critical strong {
    color: #991b1b !important;
}

#wd-dashboard .wd-note-age-critical strong::before {
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* Modify Task modal cancel button: keep footer action buttons as normal buttons.
   Do not use .modal-close-btn here because the header X button styling makes it
   a small circle and can overlap the word Cancel. */
#modify-task-modal .modal-footer .wd-modal-cancel-btn {
    width: auto !important;
    min-width: 104px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#modify-task-modal .modal-footer .wd-modal-cancel-btn:hover {
    background: #eef2f7 !important;
    color: #0f172a !important;
    transform: translateY(-1px);
}

#modify-task-modal .modal-footer .wd-modal-cancel-btn::before,
#modify-task-modal .modal-footer .wd-modal-cancel-btn::after {
    content: none !important;
    display: none !important;
}

/* WorkDesk history controls should not inherit Invoice Management green. */
#workdesk-view .history-btn,
#workdesk-view .wd-action-history {
    background: linear-gradient(135deg, #e0f2fe, #f8fafc) !important;
    color: #075985 !important;
    border: 1px solid rgba(14, 165, 233, 0.26) !important;
    box-shadow: 0 8px 16px rgba(14, 116, 144, 0.10) !important;
}

#workdesk-view .history-btn:hover,
#workdesk-view .wd-action-history:hover {
    background: linear-gradient(135deg, #bae6fd, #eff6ff) !important;
    color: #0c4a6e !important;
}

#workdesk-view .history-btn i,
#workdesk-view .wd-action-history i {
    color: #0284c7 !important;
    -webkit-text-fill-color: #0284c7 !important;
}

/* Shared history modal: theme only when a module explicitly sets a scope class. */
#history-modal.history-scope-workdesk .history-modal-header,
#history-modal.history-scope-workdesk .modal-header {
    background:
        radial-gradient(circle at 92% 14%, rgba(56, 189, 248, 0.18), transparent 32%),
        linear-gradient(135deg, #075985 0%, #0369a1 58%, #0f172a 100%) !important;
    border-bottom-color: rgba(186, 230, 253, 0.26) !important;
}

#history-modal.history-scope-invoice .history-modal-header,
#history-modal.history-scope-invoice .modal-header {
    background:
        radial-gradient(circle at 92% 14%, rgba(34, 197, 94, 0.16), transparent 32%),
        linear-gradient(135deg, #064e3b 0%, #047857 58%, #052e2b 100%) !important;
    border-bottom-color: rgba(187, 247, 208, 0.28) !important;
}

#history-modal.history-scope-inventory .history-modal-header,
#history-modal.history-scope-inventory .modal-header {
    background:
        radial-gradient(circle at 92% 14%, rgba(168, 85, 247, 0.16), transparent 32%),
        linear-gradient(135deg, #4c1d95 0%, #6d28d9 58%, #1e1b4b 100%) !important;
    border-bottom-color: rgba(221, 214, 254, 0.28) !important;
}

/* ========================================================================
   9.9.9 / 10.0.1 — WorkDesk corkboard maturity attention color
   Scope: WorkDesk Dashboard corkboard notes only.
   Purpose: Use Pending For age as the attention signal with clear traffic colors:
   0-2 days green, 3-7 days yellow-green, 8+ days yellow, 30+ days red.
   ======================================================================== */
#wd-dashboard .wd-cork-note.pending-fresh::after {
    background: linear-gradient(90deg, #15803d, #22c55e) !important;
    opacity: .88;
}

#wd-dashboard .wd-cork-note.pending-watch::after {
    background: linear-gradient(90deg, #84cc16, #d9f99d) !important;
    opacity: .94;
}

#wd-dashboard .wd-cork-note.pending-alert::after {
    background: linear-gradient(90deg, #facc15, #fde68a) !important;
    opacity: .96;
}

#wd-dashboard .wd-cork-note.pending-critical {
    border-color: rgba(220, 38, 38, 0.74) !important;
    box-shadow:
        0 20px 36px rgba(127, 29, 29, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

#wd-dashboard .wd-cork-note.pending-critical::after {
    background: linear-gradient(90deg, #991b1b, #dc2626) !important;
    opacity: 1;
    animation: wdCriticalTopStripPulse 1.15s ease-in-out infinite;
}

#wd-dashboard .wd-cork-note.pending-critical .wd-note-age {
    animation: wdCriticalAgeBlink 1.15s ease-in-out infinite;
}

#wd-dashboard .wd-note-site-ref {
    color: #075985 !important;
    font-weight: 760 !important;
    background: rgba(224, 242, 254, 0.55);
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 999px;
    padding: 4px 8px;
}

#wd-dashboard .wd-note-site-ref i {
    color: #0284c7 !important;
}

#wd-dashboard .wd-note-site-ref strong {
    color: #0c4a6e !important;
    font-weight: 840 !important;
    letter-spacing: -0.01em;
}

@keyframes wdCriticalTopStripPulse {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 0 rgba(220, 38, 38, 0); }
    50% { filter: brightness(1.22); box-shadow: 0 0 18px rgba(220, 38, 38, .42); }
}

@keyframes wdCriticalAgeBlink {
    0%, 100% { background: rgba(254, 226, 226, 0.58); transform: translateZ(0); }
    50% { background: rgba(254, 202, 202, 0.92); transform: translateZ(0) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
    #wd-dashboard .wd-cork-note.pending-critical::after,
    #wd-dashboard .wd-cork-note.pending-critical .wd-note-age {
        animation: none !important;
    }
}


/* ========================================================================
   10.0.1 — WorkDesk All Active site card traffic-light pin attention
   Scope: WorkDesk Dashboard All Active site selector only.
   Purpose: Let users know which site needs urgent review before opening it.
   Pin colors: 0-2 green, 3-7 yellow-green, 8+ yellow, 30+ red blinking.
   ======================================================================== */
#wd-dashboard .wd-cork-site-card .wd-site-card-pin {
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}

#wd-dashboard .wd-cork-site-card.site-age-fresh .wd-site-card-pin {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 13px rgba(22, 163, 74, 0.28) !important;
}

#wd-dashboard .wd-cork-site-card.site-age-watch .wd-site-card-pin {
    background: linear-gradient(135deg, #84cc16, #d9f99d) !important;
    color: #2f4f00 !important;
    box-shadow: 0 6px 13px rgba(132, 204, 22, 0.32) !important;
}

#wd-dashboard .wd-cork-site-card.site-age-alert .wd-site-card-pin {
    background: linear-gradient(135deg, #facc15, #fde68a) !important;
    color: #5f3100 !important;
    box-shadow: 0 6px 14px rgba(250, 204, 21, 0.34) !important;
}

#wd-dashboard .wd-cork-site-card.site-age-critical .wd-site-card-pin {
    background: radial-gradient(circle at 30% 25%, #f87171 0%, #dc2626 48%, #991b1b 100%) !important;
    color: #fff7c2 !important;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14), 0 8px 18px rgba(127, 29, 29, 0.42) !important;
    animation: wdSiteCriticalPinBlink 1.12s ease-in-out infinite;
}

#wd-dashboard .wd-cork-site-card.site-age-critical {
    border-color: rgba(220, 38, 38, 0.52) !important;
    box-shadow: 0 14px 28px rgba(127, 29, 29, 0.18) !important;
}

#wd-dashboard .wd-cork-site-card.site-age-critical .wd-site-card-no {
    color: #991b1b !important;
}

#wd-dashboard .wd-cork-site-card.site-age-critical.active {
    box-shadow: 0 16px 34px rgba(127, 29, 29, 0.24), inset 0 0 0 2px rgba(220, 38, 38, 0.28) !important;
}

@keyframes wdSiteCriticalPinBlink {
    0%, 100% { filter: brightness(1); transform: rotate(-7deg) scale(1); }
    50% { filter: brightness(1.26); transform: rotate(-7deg) scale(1.08); box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.20), 0 0 20px rgba(220, 38, 38, 0.50); }
}

@media (prefers-reduced-motion: reduce) {
    #wd-dashboard .wd-cork-site-card.site-age-critical .wd-site-card-pin {
        animation: none !important;
    }
}

/* ========================================================================== */
/* 10.0.4 — Mobile Messages keyboard/input visibility fix                     */
/* Scope: Messages / Live Chat mobile only. Keeps desktop chat unchanged.      */
/* ========================================================================== */
:root {
    --dm-visual-height: 100dvh;
    --dm-keyboard-offset: 0px;
}

@media (max-width: 820px) {
    #dm-modal .dm-card.dm-mobile {
        height: var(--dm-visual-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: var(--dm-visual-height, 100dvh) !important;
    }

    #dm-modal .dm-card.dm-mobile .dm-body,
    #dm-modal .dm-card.dm-mobile .dm-chat {
        min-height: 0 !important;
        height: auto !important;
    }

    #dm-modal .dm-card.dm-mobile .dm-chat {
        display: flex !important;
        flex-direction: column !important;
    }

    #dm-modal .dm-card.dm-mobile.dm-mobile-list .dm-chat {
        display: none !important;
    }

    #dm-modal .dm-card.dm-mobile .dm-message-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px !important;
    }

    #dm-modal .dm-card.dm-mobile .dm-compose {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 45 !important;
        flex: 0 0 auto !important;
        background: rgba(18, 18, 24, 0.98) !important;
        border-top: 1px solid rgba(255,255,255,0.16) !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -10px 26px rgba(0,0,0,0.28) !important;
    }

    #dm-modal .dm-card.dm-mobile .dm-compose input,
    #dm-modal .dm-card.dm-mobile #dm-input {
        display: block !important;
        min-width: 0 !important;
        height: 44px !important;
        margin: 0 !important;
        color: #0f172a !important;
        background: #ffffff !important;
        border: 1px solid rgba(148, 163, 184, 0.75) !important;
        caret-color: #0f766e !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        -webkit-text-fill-color: #0f172a !important;
    }

    #dm-modal .dm-card.dm-mobile .dm-compose input::placeholder {
        color: rgba(71, 85, 105, 0.70) !important;
        -webkit-text-fill-color: rgba(71, 85, 105, 0.70) !important;
    }

    .live-chat-panel {
        right: 8px !important;
        left: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 18px !important;
    }

    .live-chat-messages {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .live-chat-inputbar {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        flex: 0 0 auto !important;
        background: rgba(255,255,255,0.96) !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -8px 24px rgba(15,23,42,0.16) !important;
    }

    .live-chat-inputbar input {
        height: 44px !important;
        margin: 0 !important;
        color: #0f172a !important;
        background: #ffffff !important;
        -webkit-text-fill-color: #0f172a !important;
        caret-color: #0f766e !important;
        font-size: 16px !important;
    }
}


/* ========================================================================
   10.0.5 — Mobile Invoice Active Task scope + PDF button contrast
   Scope: Mobile Invoice / Task active task only.
   Purpose: keep inventory maroon tabs from bleeding into invoice mobile tasks,
   and make the View Invoice PDF button readable on light backgrounds.
   ======================================================================== */
@media (max-width: 768px) {
    body:not(.inventory-mobile-theme-active) #wd-activetask #active-task-filters.inventory-task-filters-maroon {
        background: #eff8ff !important;
        border-color: rgba(14, 116, 144, 0.18) !important;
    }

    body:not(.inventory-mobile-theme-active) #wd-activetask #active-task-filters.report-tabs button:not(.active),
    body:not(.inventory-mobile-theme-active) #wd-activetask #active-task-filters.report-tabs button.blink-tab:not(.active) {
        background: #ffffff !important;
        background-image: none !important;
        color: #075985 !important;
        -webkit-text-fill-color: #075985 !important;
        border: 1px solid rgba(14, 116, 144, 0.22) !important;
        text-shadow: none !important;
    }

    body:not(.inventory-mobile-theme-active) #wd-activetask #active-task-filters.report-tabs button.active,
    body:not(.inventory-mobile-theme-active) #wd-activetask #active-task-filters.report-tabs button.blink-tab.active {
        background: linear-gradient(135deg, #075985, #0f6d8d) !important;
        background-image: linear-gradient(135deg, #075985, #0f6d8d) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: rgba(14, 116, 144, 0.42) !important;
        text-shadow: none !important;
    }

    #active-task-mobile-view .m-pdf-btn,
    body:not(.inventory-mobile-theme-active) #active-task-mobile-view .m-pdf-btn {
        background: #eef4f8 !important;
        background-image: none !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        text-shadow: none !important;
        border: 1px solid rgba(15, 46, 71, 0.14) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 8px 18px rgba(15,46,71,.08) !important;
    }

    #active-task-mobile-view .m-pdf-btn i,
    body:not(.inventory-mobile-theme-active) #active-task-mobile-view .m-pdf-btn i {
        color: #0f6d8d !important;
        -webkit-text-fill-color: #0f6d8d !important;
        text-shadow: none !important;
    }
}

/* 10.0.9 — WorkDesk Job Records Current Note column */
.wd-record-note-cell {
    max-width: 260px;
    white-space: normal;
    line-height: 1.35;
    color: #334155;
    font-size: 0.86rem;
}
.wd-muted-dash {
    color: #94a3b8;
}

/* ========================================================================
   10.1.8 — WorkDesk Job Entry modal field containment fix
   Scope: Add/Edit Job Entry modal only.
   Purpose: keep Current Note textarea and Attachment row inside their cards.
   No Firebase, save, routing, dashboard, job-record, or workflow logic changes.
   ======================================================================== */
#standard-job-modal,
#standard-job-modal * {
    box-sizing: border-box !important;
}

#standard-job-modal .modal-container,
#standard-job-modal .modal-content,
#standard-job-modal #jobentry-form,
#standard-job-modal .transfer-2col-grid,
#standard-job-modal .transfer-col,
#standard-job-modal .form-group {
    min-width: 0 !important;
}

#standard-job-modal .transfer-col {
    overflow: hidden !important;
}

#standard-job-modal #job-attachment-label {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

#standard-job-modal #job-attachment-label + div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#standard-job-modal #job-attachment {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
}

#standard-job-modal #job-attachment-view-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    max-width: 42px !important;
}

#standard-job-modal .wd-current-note-field {
    width: 100% !important;
    max-width: 100% !important;
}

#standard-job-modal #job-current-note {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 96px !important;
    height: 96px !important;
    max-height: 190px !important;
    resize: vertical !important;
    overflow: auto !important;
    line-height: 1.35 !important;
    padding: 10px 12px !important;
}

#standard-job-modal .wd-field-helper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 7px !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
}

@media screen and (max-width: 768px) {
    #standard-job-modal #job-current-note {
        min-height: 110px !important;
        height: 110px !important;
    }

    #standard-job-modal #job-attachment-label + div {
        gap: 7px !important;
    }
}

/* ========================================================================
   10.1.9 — WorkDesk Job Entry Current Note vertical clipping fix
   Scope: Add/Edit Job Entry modal only.
   Purpose: allow the right card to grow vertically so the Current Note textarea
            is not clipped at the bottom while keeping horizontal containment.
   No Firebase, save, routing, dashboard, job-record, or workflow logic changes.
   ======================================================================== */
#standard-job-modal .modal-content {
    padding-bottom: 18px !important;
}

#standard-job-modal .transfer-2col-grid {
    align-items: start !important;
}

#standard-job-modal .transfer-col {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: 20px !important;
}

#standard-job-modal .wd-current-note-field {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#standard-job-modal #job-current-note {
    min-height: 118px !important;
    height: 118px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    resize: vertical !important;
}

#standard-job-modal .wd-current-note-field + .wd-field-helper,
#standard-job-modal .wd-current-note-field .wd-field-helper {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 768px) {
    #standard-job-modal .modal-content {
        padding-bottom: 20px !important;
    }

    #standard-job-modal .transfer-col {
        padding-bottom: 18px !important;
    }

    #standard-job-modal #job-current-note {
        min-height: 126px !important;
        height: 126px !important;
    }
}

/* ========================================================================
   10.2.0 — WorkDesk Job Entry modal balanced card layout
   Scope: Add/Edit Job Entry modal only.
   Purpose: remove the extra helper text, avoid the modal-content scrollbar on
            desktop, and make the right card visually align with the left card
            without overflowing fields outside their card boundaries.
   No Firebase, save, routing, dashboard, job-record, or workflow logic changes.
   ======================================================================== */
#standard-job-modal .modal-container {
    max-height: none !important;
}

#standard-job-modal .modal-content {
    overflow: visible !important;
    max-height: none !important;
    padding-bottom: 12px !important;
}

#standard-job-modal .transfer-2col-grid {
    align-items: stretch !important;
    gap: 16px !important;
}

#standard-job-modal .transfer-col {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 10px !important;
}

#standard-job-modal .form-group {
    margin-bottom: 8px !important;
}

#standard-job-modal .wd-current-note-field {
    margin-bottom: 0 !important;
}

/* Remove the explanatory helper under Current Note as requested. */
#standard-job-modal .wd-current-note-field + .wd-field-helper,
#standard-job-modal .wd-current-note-field .wd-field-helper {
    display: none !important;
}

/* Keep Current Note compact and inside the right card; no forced large textarea. */
#standard-job-modal #job-current-note {
    min-height: 84px !important;
    height: 84px !important;
    max-height: 120px !important;
    resize: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-bottom: 0 !important;
    line-height: 1.35 !important;
}

/* Attachment row stays compact inside the left card. */
#standard-job-modal #job-attachment-label + div {
    margin-bottom: 0 !important;
}

#standard-job-modal #job-attachment,
#standard-job-modal #job-attachment-view-btn {
    align-self: stretch !important;
}

@media screen and (max-width: 768px) {
    #standard-job-modal .modal-container {
        max-height: 94vh !important;
    }

    #standard-job-modal .modal-content {
        overflow-y: auto !important;
        max-height: calc(94vh - 150px) !important;
        padding-bottom: 14px !important;
    }

    #standard-job-modal .transfer-2col-grid {
        align-items: stretch !important;
    }

    #standard-job-modal #job-current-note {
        min-height: 96px !important;
        height: 96px !important;
        max-height: 150px !important;
    }
}


/* ========================================================================
   10.2.4 — WorkDesk Job Entry Attention dropdown scroll/visibility fix
   Scope: Add/Edit Job Entry modal only.
   Purpose: allow Choices.js Attention dropdown to open and scroll fully inside
            the modal. The previous card containment used overflow:hidden on
            the column, which could clip the dropdown and make lower QS/Senior
            QS names unreachable.
   No Firebase, workflow, IPC, Dashboard, Job Records, or save logic changes.
   ======================================================================== */
#standard-job-modal .transfer-2col-grid,
#standard-job-modal .transfer-col,
#standard-job-modal .form-group {
    overflow: visible !important;
}

/* Keep the card visually contained while allowing dropdown menus to float. */
#standard-job-modal .transfer-col {
    position: relative !important;
    z-index: 1 !important;
}

#standard-job-modal .transfer-col:has(#job-attention) {
    z-index: 50 !important;
}

#standard-job-modal .choices {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

#standard-job-modal .choices.is-open,
#standard-job-modal .choices.is-focused {
    z-index: 9999 !important;
}

#standard-job-modal .choices__inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#standard-job-modal .choices__list--dropdown,
#standard-job-modal .choices__list[aria-expanded] {
    z-index: 10000 !important;
    max-height: 300px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

#standard-job-modal .choices__list--dropdown .choices__list,
#standard-job-modal .choices__list[aria-expanded] .choices__list {
    max-height: 292px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

#standard-job-modal .choices__list--dropdown .choices__item,
#standard-job-modal .choices__list[aria-expanded] .choices__item {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* Keep inputs/textareas from overflowing even though the card overflow is visible. */
#standard-job-modal input,
#standard-job-modal select,
#standard-job-modal textarea,
#standard-job-modal .choices,
#standard-job-modal .choices__inner {
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
    #standard-job-modal .choices__list--dropdown,
    #standard-job-modal .choices__list[aria-expanded] {
        max-height: 260px !important;
    }

    #standard-job-modal .choices__list--dropdown .choices__list,
    #standard-job-modal .choices__list[aria-expanded] .choices__list {
        max-height: 252px !important;
    }
}

/* 10.4.6 — Dashboard task forward-to-message button */
#wd-dashboard .wd-note-actions .wd-forward-task-btn {
    flex: 1 1 0;
    min-height: 34px;
    border: 0;
    border-radius: 11px;
    font-size: .76rem;
    font-weight: 850;
    color: #0f172a;
    background: linear-gradient(135deg, #f8d66d, #f5b841);
    box-shadow: 0 8px 16px rgba(58, 32, 15, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

#wd-dashboard .wd-note-actions .wd-forward-task-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 10px 18px rgba(58, 32, 15, 0.16);
}

#wd-dashboard .wd-note-actions .wd-forward-task-btn:disabled {
    cursor: wait;
    opacity: .72;
    transform: none;
}

/* 10.4.7 — Forward task preview modal + recipient selector */
.wd-forward-modal.hidden { display: none !important; }
.wd-forward-modal {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.wd-forward-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wd-forward-modal-card {
    position: relative;
    width: min(620px, calc(100vw - 32px));
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    border: 1px solid rgba(148, 163, 184, .35);
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
    overflow: hidden;
    color: #0f172a;
}
.wd-forward-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(135deg, rgba(15, 83, 64, .08), rgba(245, 184, 65, .10));
}
.wd-forward-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #116149;
}
.wd-forward-modal-head h3 {
    margin: 6px 0 0;
    font-size: 1.15rem;
    font-weight: 950;
    color: #0f172a;
}
.wd-forward-modal-x {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(15, 23, 42, .07);
    color: #334155;
    cursor: pointer;
}
.wd-forward-modal-x:hover { background: rgba(15, 23, 42, .12); }
.wd-forward-modal-body {
    padding: 18px 22px 8px;
    display: grid;
    gap: 14px;
}
.wd-forward-field {
    display: grid;
    gap: 7px;
    font-weight: 850;
    font-size: .82rem;
    color: #334155;
}
.wd-forward-field select,
.wd-forward-field textarea {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, .45);
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    padding: 11px 12px;
    font: inherit;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
.wd-forward-field textarea {
    resize: vertical;
    min-height: 150px;
    line-height: 1.48;
    white-space: pre-wrap;
}
.wd-forward-recipient-note {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(241, 245, 249, .9);
    color: #475569;
    font-size: .8rem;
    font-weight: 750;
}
.wd-forward-recipient-note i { color: #116149; }
.wd-forward-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 20px;
}
.wd-forward-cancel,
.wd-forward-send {
    min-height: 40px;
    border: 0;
    border-radius: 13px;
    padding: 0 16px;
    font-weight: 900;
    cursor: pointer;
}
.wd-forward-cancel {
    background: rgba(100, 116, 139, .12);
    color: #334155;
}
.wd-forward-send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #116149, #0f513c);
    color: #fff;
    box-shadow: 0 12px 26px rgba(17, 97, 73, .24);
}
.wd-forward-send:disabled { opacity: .7; cursor: wait; }
#wd-dashboard .wd-note-actions .wd-forward-task-btn.sent {
    background: linear-gradient(135deg, #bbf7d0, #86efac);
}
#wd-dashboard .wd-site-first-empty {
    margin-top: 16px;
}
@media screen and (max-width: 640px) {
    .wd-forward-modal { align-items: flex-end; padding: 0; }
    .wd-forward-modal-card { width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh; overflow-y: auto; }
    .wd-forward-modal-actions { flex-direction: column-reverse; }
    .wd-forward-cancel, .wd-forward-send { width: 100%; justify-content: center; }
}

/* 10.5.2 — Invoice Entry quick status actions */
.im-quick-status-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
    border: 1px solid rgba(17, 96, 69, 0.18);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(17, 96, 69, 0.08), rgba(255, 255, 255, 0.92));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.im-quick-status-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #116045;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 4px;
}

.im-quick-status-btn {
    height: 30px;
    border: 1px solid rgba(17, 96, 69, 0.26);
    background: #ffffff;
    color: #116045;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.im-quick-status-btn:hover,
.im-quick-status-btn:focus {
    background: #116045;
    color: #fff8d6;
    box-shadow: 0 8px 18px rgba(17, 96, 69, 0.22);
    transform: translateY(-1px);
    outline: none;
}

.im-quick-status-btn.is-active {
    background: #116045;
    color: #ffd966;
    border-color: #116045;
    box-shadow: inset 0 0 0 1px rgba(255, 217, 102, 0.28), 0 8px 18px rgba(17, 96, 69, 0.18);
}

.im-quick-status-final {
    border-color: rgba(183, 121, 31, 0.5);
    color: #8a5a11;
    background: #fff9e8;
}

.im-quick-status-final:hover,
.im-quick-status-final:focus,
.im-quick-status-final.is-active {
    background: #7a4e00;
    color: #ffe08a;
    border-color: #7a4e00;
}

@media (max-width: 900px) {
    .im-quick-status-footer {
        order: 3;
        width: 100%;
        border-radius: 14px;
        justify-content: flex-start;
    }
    .im-quick-status-btn {
        flex: 1 1 auto;
    }
}

/* 10.5.3 — Invoice Entry quick status cleanup + simple Batch PO modal */
.im-quick-status-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.im-quick-status-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0 4px 0 0 !important;
}

.im-quick-status-btn {
    height: 22px !important;
    min-height: 22px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #116045 !important;
    border-radius: 4px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    box-shadow: none !important;
    transform: none !important;
}

.im-quick-status-btn:hover,
.im-quick-status-btn:focus,
.im-quick-status-btn.is-active {
    background: #116045 !important;
    color: #fff8d6 !important;
    border-color: #116045 !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

.im-quick-status-final {
    background: #fff8e1 !important;
    color: #8a5a11 !important;
    border-color: #d6b85a !important;
}

.im-quick-status-final:hover,
.im-quick-status-final:focus,
.im-quick-status-final.is-active {
    background: #8a5a11 !important;
    color: #fff4c2 !important;
    border-color: #8a5a11 !important;
}

@media (max-width: 900px) {
    .im-quick-status-footer {
        order: 3 !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .im-quick-status-btn {
        flex: 0 0 auto !important;
    }
}

body #im-batch-search-modal .modal-container {
    border: 1px solid #dbe4ef !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10) !important;
    overflow: hidden !important;
}

body #im-batch-search-modal .modal-content {
    background: #ffffff !important;
}

body #im-batch-search-modal #im-batch-modal-results {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* 12.6.6 — Existing Invoice modal: restore normal mouse-wheel scrolling. */
body #im-batch-search-modal #im-batch-modal-results {
    max-height: 40vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

body #im-batch-search-modal .batch-modal-result-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
}

body #im-batch-search-modal .batch-modal-result-summary small {
    flex-basis: 100%;
    color: #64748b;
    font-size: 11px;
}

body #im-batch-search-modal .batch-modal-standby,
body #im-batch-search-modal .batch-modal-empty {
    margin: 0;
    padding: 16px;
    color: #475569;
    text-align: center;
}

body #im-batch-search-modal #im-batch-modal-results table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
}

body #im-batch-search-modal #im-batch-modal-results th {
    background: #0f5132 !important;
    color: #ffe08a !important;
    border: 0 !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    text-align: left !important;
}

body #im-batch-search-modal #im-batch-modal-results td {
    border-bottom: 1px solid #edf2f7 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    color: #1f2937 !important;
    background: transparent !important;
}

body #im-batch-search-modal #im-batch-modal-results tr.batch-modal-result-row {
    cursor: pointer !important;
    transition: background-color 0.12s ease !important;
}

body #im-batch-search-modal #im-batch-modal-results tr.batch-modal-result-row:hover {
    background: #f0fdf4 !important;
}

body #im-batch-search-modal #im-batch-modal-results tr.batch-modal-result-row:focus {
    outline: 1px solid #116045 !important;
    outline-offset: -1px !important;
    background: #f0fdf4 !important;
}

body #im-batch-search-modal #im-batch-modal-results tr.batch-modal-result-row.is-selected {
    background: #fff7d6 !important;
}

body #im-batch-search-modal #im-batch-modal-results tr.batch-modal-result-row.is-selected td:first-child {
    box-shadow: inset 4px 0 0 #b7791f !important;
}

body #im-batch-search-modal .batch-modal-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #eef6f1;
    color: #116045;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

body #im-batch-search-modal .batch-modal-note-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   10.5.4 — Batch Entry existing-invoice search modal cleanup
   Keep the modal simple and readable; remove card-like table borders/shadows.
   ========================================================= */
body #im-batch-search-modal .modal-container {
    border: 1px solid #d8dee8 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body #im-batch-search-modal #im-batch-modal-results {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
body #im-batch-search-modal #im-batch-modal-results table,
body #im-batch-search-modal #im-batch-modal-results .table-wrapper table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
}
body #im-batch-search-modal #im-batch-modal-results thead th,
body #im-batch-search-modal #im-batch-modal-results table thead th,
body #im-batch-search-modal #im-batch-modal-results th {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    padding: 8px 10px !important;
}
body #im-batch-search-modal #im-batch-modal-results td,
body #im-batch-search-modal #im-batch-modal-results tr td:first-child,
body #im-batch-search-modal #im-batch-modal-results tr td:last-child {
    background: #ffffff !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
body #im-batch-search-modal #im-batch-modal-results tr.batch-modal-result-row.is-selected td:first-child {
    box-shadow: inset 4px 0 0 #b7791f !important;
}

/* ========================================================================
   10.5.7 — Batch Entry Search and Add Existing Invoices header hard fix
   Scope: only the result table inside #im-batch-search-modal.
   The JS also applies the same style directly to avoid cache/cascade issues.
   ======================================================================== */
#im-batch-search-modal #im-batch-modal-results table.batch-existing-invoices-table thead,
#im-batch-search-modal #im-batch-modal-results table.batch-existing-invoices-table thead tr,
#im-batch-search-modal #im-batch-modal-results table.batch-existing-invoices-table thead th,
#im-batch-search-modal #im-batch-modal-results > table.batch-existing-invoices-table thead,
#im-batch-search-modal #im-batch-modal-results > table.batch-existing-invoices-table thead tr,
#im-batch-search-modal #im-batch-modal-results > table.batch-existing-invoices-table thead th {
    background: #0b4b35 !important;
    background-color: #0b4b35 !important;
    background-image: none !important;
    color: #facc15 !important;
    -webkit-text-fill-color: #facc15 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    border-color: rgba(255,255,255,.20) !important;
}

#im-batch-search-modal #im-batch-modal-results table.batch-existing-invoices-table thead th {
    padding: 9px 10px !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
}


/* ========================================================================
   10.6.4 — WorkDesk All Active site cards + realistic cork board cleanup
   Scope: WorkDesk Dashboard > All Active Tasks only.
   Purpose: Site cards stay fixed-size and do not stretch. The cork board
   appears only after a site is selected. Pinned task notes keep a more
   realistic cork-board/yellow-paper feel with no duplicate Selected Site card.
   ======================================================================== */
#wd-dashboard .wd-site-selector-panel {
    margin: 14px 0 16px;
    padding: 14px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 10%, rgba(22, 163, 74, 0.10), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(240,253,244,0.92));
    border: 1px solid rgba(22, 101, 52, 0.14);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

#wd-dashboard .wd-site-selector-panel .wd-cork-site-selector,
#wd-dashboard .wd-cork-site-selector {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(148px, 166px)) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
}

#wd-dashboard .wd-cork-site-card {
    width: 100% !important;
    min-height: 104px !important;
    padding: 12px 12px 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(21, 128, 61, 0.20) !important;
    background:
        radial-gradient(circle at 92% 9%, rgba(34,197,94,0.16), transparent 26%),
        linear-gradient(145deg, #ffffff 0%, #f0fdf4 58%, #dcfce7 100%) !important;
    color: #123524 !important;
    box-shadow: 0 10px 20px rgba(15, 81, 50, 0.08), inset 0 1px 0 rgba(255,255,255,0.84) !important;
}

#wd-dashboard .wd-cork-site-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(22, 101, 52, 0.34) !important;
    box-shadow: 0 16px 28px rgba(15, 81, 50, 0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

#wd-dashboard .wd-cork-site-card.active {
    border-color: rgba(4, 120, 87, 0.66) !important;
    background:
        radial-gradient(circle at 92% 9%, rgba(250,204,21,0.30), transparent 28%),
        linear-gradient(145deg, #ecfdf5 0%, #bbf7d0 100%) !important;
    box-shadow: 0 18px 32px rgba(4, 120, 87, 0.18), inset 0 0 0 2px rgba(4, 120, 87, 0.18) !important;
}

#wd-dashboard .wd-cork-site-card .wd-site-card-no {
    color: #065f46 !important;
    font-size: 1.22rem !important;
    line-height: 1.05 !important;
}

#wd-dashboard .wd-cork-site-card .wd-site-card-name {
    color: #166534 !important;
    min-height: 28px !important;
    font-size: 0.8rem !important;
}

#wd-dashboard .wd-cork-site-card .wd-site-card-count {
    background: rgba(255,255,255,0.74) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.18) !important;
}

#wd-dashboard .wd-cork-site-card small {
    color: rgba(6, 95, 70, 0.76) !important;
}

#wd-dashboard .wd-cork-notes-board {
    margin-top: 12px;
    padding: 20px;
    border-radius: 26px;
    border: 10px solid rgba(94, 53, 25, 0.50);
    background:
        radial-gradient(circle at 12px 18px, rgba(255,255,255,0.13) 0 1px, transparent 2px),
        radial-gradient(circle at 44px 38px, rgba(69,38,18,0.18) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 84px 20px, rgba(255,236,179,0.10) 0 1px, transparent 2px),
        linear-gradient(135deg, #b7793c 0%, #8a572d 48%, #6f4526 100%);
    background-size: 58px 58px, 72px 72px, 96px 96px, auto;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.13),
        inset 0 18px 38px rgba(255,255,255,0.07),
        0 24px 46px rgba(58, 32, 15, 0.18);
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note-grid {
    grid-template-columns: repeat(auto-fill, minmax(265px, 300px));
    justify-content: start;
    align-items: stretch;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note {
    border-radius: 8px 16px 16px 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.42), transparent 34%),
        linear-gradient(180deg, #fff8b8 0%, #ffe778 100%);
    box-shadow:
        0 2px 1px rgba(255,255,255,0.55) inset,
        0 19px 32px rgba(58, 32, 15, 0.26),
        4px 5px 0 rgba(123, 70, 26, 0.10);
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 34px;
    height: 34px;
    border-radius: 18px 0 8px 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(234,179,8,0.18));
    box-shadow: -5px -5px 12px rgba(123, 70, 26, 0.08);
    pointer-events: none;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin {
    top: 6px;
    width: 18px;
    height: 18px;
    background:
        radial-gradient(circle at 35% 28%, #ffffff 0 10%, #ff7373 18%, #dc2626 48%, #7f1d1d 100%);
    box-shadow:
        0 2px 0 rgba(255,255,255,0.55) inset,
        0 3px 0 rgba(127, 29, 29, 0.28),
        0 8px 14px rgba(69, 38, 18, 0.34);
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 2px;
    height: 15px;
    transform: translateX(-50%) rotate(7deg);
    border-radius: 999px;
    background: rgba(75, 45, 23, 0.28);
    filter: blur(0.2px);
    z-index: -1;
}

#wd-dashboard .wd-cork-site-head,
#wd-dashboard .wd-cork-site-section.active-site .wd-cork-site-head {
    display: none !important;
}

@media (max-width: 768px) {
    #wd-dashboard .wd-site-selector-panel {
        padding: 12px;
        border-radius: 18px;
    }

    #wd-dashboard .wd-site-selector-panel .wd-cork-site-selector,
    #wd-dashboard .wd-cork-site-selector {
        grid-template-columns: repeat(auto-fill, minmax(136px, 158px)) !important;
        gap: 9px !important;
    }

    #wd-dashboard .wd-cork-site-card {
        min-height: 98px !important;
        padding: 11px !important;
    }

    #wd-dashboard .wd-cork-notes-board {
        padding: 14px;
        border-width: 6px;
        border-radius: 20px;
    }

    #wd-dashboard .wd-cork-notes-board .wd-cork-note-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================
   10.6.5 — WorkDesk cork board depth + note shadow refinement
   Scope: WorkDesk Dashboard > All Active selected-site cork board only.
   Purpose: Make the yellow pinned notes visually lift away from the cork
   board and add a richer cork texture without changing task/workflow logic.
   ======================================================================== */
#wd-dashboard .wd-cork-notes-board {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 9px 11px, rgba(255, 238, 194, 0.22) 0 1px, transparent 2.4px),
        radial-gradient(circle at 35px 27px, rgba(56, 31, 14, 0.24) 0 1.6px, transparent 3px),
        radial-gradient(circle at 78px 44px, rgba(255, 255, 255, 0.12) 0 1.1px, transparent 2.6px),
        radial-gradient(circle at 115px 18px, rgba(68, 39, 18, 0.18) 0 2px, transparent 3.3px),
        repeating-linear-gradient(22deg, rgba(255,255,255,0.040) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(112deg, rgba(59, 31, 14, 0.070) 0 1px, transparent 1px 8px),
        linear-gradient(135deg, #c98b4c 0%, #a76a35 38%, #83502a 70%, #6d4224 100%) !important;
    background-size: 44px 44px, 66px 66px, 88px 88px, 124px 124px, auto, auto, auto !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.14),
        inset 0 22px 46px rgba(255, 244, 214, 0.08),
        inset 0 -28px 48px rgba(50, 25, 9, 0.16),
        0 26px 50px rgba(58, 32, 15, 0.20) !important;
}

#wd-dashboard .wd-cork-notes-board::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .48;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.12), transparent 17%),
        radial-gradient(circle at 72% 18%, rgba(65,34,14,.14), transparent 18%),
        radial-gradient(circle at 36% 78%, rgba(55,29,13,.12), transparent 20%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note-grid {
    position: relative !important;
    z-index: 1 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note {
    border: 1px solid rgba(132, 86, 19, 0.16) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.56), rgba(255,255,255,0.10) 31%, transparent 48%),
        linear-gradient(180deg, #fff9be 0%, #ffef8a 54%, #ffe173 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.70) inset,
        0 9px 10px rgba(66, 38, 17, 0.18),
        0 22px 32px rgba(52, 28, 12, 0.24),
        7px 9px 0 rgba(79, 46, 18, 0.10) !important;
    filter: drop-shadow(0 18px 14px rgba(48, 27, 12, 0.20));
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.74) inset,
        0 12px 16px rgba(66, 38, 17, 0.20),
        0 30px 44px rgba(52, 28, 12, 0.28),
        8px 10px 0 rgba(79, 46, 18, 0.12) !important;
    filter: drop-shadow(0 22px 18px rgba(48, 27, 12, 0.24));
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note::before {
    width: 38px !important;
    height: 38px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.52), rgba(229, 168, 16, 0.20)) !important;
    box-shadow: -7px -7px 14px rgba(115, 69, 22, 0.12) !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin {
    box-shadow:
        0 2px 0 rgba(255,255,255,0.60) inset,
        0 4px 0 rgba(127, 29, 29, 0.30),
        0 9px 14px rgba(47, 24, 11, 0.42),
        0 15px 24px rgba(47, 24, 11, 0.20) !important;
}


/* ========================================================================
   10.6.6 — WorkDesk cork note comfort cleanup
   Scope: WorkDesk Dashboard > All Active selected-site cork board only.
   Purpose: Remove the blurry/red pin effect and soften note shadows so the
   pinned notes are easier on the eyes while keeping the cork-board layout.
   ======================================================================== */
#wd-dashboard .wd-cork-notes-board .wd-note-pin,
#wd-dashboard .wd-cork-notes-board .wd-note-pin::before,
#wd-dashboard .wd-cork-notes-board .wd-note-pin::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    filter: none !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note {
    filter: none !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.62) inset,
        0 8px 14px rgba(52, 28, 12, 0.16),
        4px 5px 0 rgba(79, 46, 18, 0.055) !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note:hover {
    filter: none !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.66) inset,
        0 10px 18px rgba(52, 28, 12, 0.18),
        5px 6px 0 rgba(79, 46, 18, 0.065) !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note::before {
    box-shadow: -4px -4px 9px rgba(115, 69, 22, 0.08) !important;
}

#wd-dashboard .wd-cork-notes-board::before {
    opacity: .30 !important;
}


/* ========================================================================
   10.6.7 — WorkDesk cork note crisp red pin restore
   Scope: WorkDesk Dashboard > All Active selected-site cork board only.
   Purpose: Restore the red push pin, remove the blurry/double pin effects,
   and slightly increase the yellow note lift/shadow without changing logic.
   ======================================================================== */
#wd-dashboard .wd-cork-notes-board .wd-note-pin {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 7px !important;
    left: 50% !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    transform: translateX(-50%) !important;
    background: #dc2626 !important;
    border: 1px solid rgba(127, 29, 29, 0.70) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.50) inset,
        0 2px 0 rgba(127,29,29,0.65),
        0 4px 5px rgba(58,32,15,0.20) !important;
    filter: none !important;
    z-index: 4 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::before {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 3px !important;
    left: 4px !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.72) !important;
    box-shadow: none !important;
    filter: none !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    filter: none !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note {
    filter: none !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.66) inset,
        0 10px 18px rgba(52, 28, 12, 0.20),
        0 18px 28px rgba(52, 28, 12, 0.16),
        6px 7px 0 rgba(79, 46, 18, 0.075) !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note:hover {
    filter: none !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.70) inset,
        0 12px 22px rgba(52, 28, 12, 0.22),
        0 22px 34px rgba(52, 28, 12, 0.18),
        7px 8px 0 rgba(79, 46, 18, 0.085) !important;
}

/* ========================================================================
   10.7.0 — WorkDesk cork-board real push-pin body override
   Scope: WorkDesk Dashboard > All Active selected-site cork board only.
   Purpose: The earlier note-pin body was being overridden by the later
   cork-notes-board selector, leaving only a round red dot. This final scoped
   override makes the red pin neck/body and angled needle visible while
   keeping the pin crisp and comfortable.
   ======================================================================== */
#wd-dashboard .wd-cork-notes-board .wd-note-pin {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    background: radial-gradient(circle at 34% 27%, #ffd5cf 0 19%, #ff725c 29%, #ea4335 56%, #a51318 100%) !important;
    border: 1px solid rgba(132, 17, 17, 0.38) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 2px 3px rgba(127,29,29,0.20) !important;
    filter: none !important;
    z-index: 7 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::before {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 14px !important;
    width: 11px !important;
    height: 15px !important;
    border-radius: 7px 7px 8px 8px !important;
    transform: translateX(-50%) rotate(-8deg) !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18), transparent 36%),
        linear-gradient(180deg, #c91f26 0%, #861116 78%, #5f0b0f 100%) !important;
    border: 0 !important;
    box-shadow:
        0 2px 3px rgba(92,18,18,0.18),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
    filter: none !important;
    z-index: 6 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::after {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 27px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    transform-origin: left center !important;
    transform: translateX(-4%) rotate(36deg) !important;
    background: linear-gradient(90deg, #747c86 0%, #f4f4f5 34%, #b8aa6d 68%, #706036 100%) !important;
    box-shadow: 7px 5px 0 0 rgba(170,130,55,0.18) !important;
    filter: none !important;
    z-index: 5 !important;
}


/* ========================================================================
   10.7.1 — WorkDesk cork-board push-pin layer cleanup
   Scope: WorkDesk Dashboard > All Active selected-site cork board only.
   Purpose: Put the round red head visually on top of the neck, keep the neck
   under the head, and remove the extra double shadow so only one soft needle
   shadow remains.
   ======================================================================== */
#wd-dashboard .wd-cork-notes-board .wd-note-pin {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    width: 21px !important;
    height: 21px !important;
    border-radius: 50% !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    isolation: isolate !important;
    background: radial-gradient(circle at 34% 27%, #ffd7d1 0 18%, #ff735f 30%, #e53935 56%, #a50f16 100%) !important;
    border: 1px solid rgba(132, 17, 17, 0.36) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.54) inset,
        0 2px 3px rgba(83, 21, 16, 0.18) !important;
    filter: none !important;
    z-index: 9 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::before {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 16px !important;
    width: 11px !important;
    height: 14px !important;
    border-radius: 7px 7px 8px 8px !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.14), transparent 38%),
        linear-gradient(180deg, #c91f26 0%, #871115 78%, #5f0b0f 100%) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
    filter: none !important;
    z-index: -1 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::after {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 29px !important;
    width: 23px !important;
    height: 3px !important;
    border-radius: 999px !important;
    transform-origin: left center !important;
    transform: translateX(-4%) rotate(36deg) !important;
    background: linear-gradient(90deg, #747c86 0%, #f4f4f5 34%, #b8aa6d 68%, #706036 100%) !important;
    box-shadow: 8px 6px 0 0 rgba(170, 130, 55, 0.18) !important;
    filter: none !important;
    z-index: -2 !important;
}



/* 10.7.2 — Final clean push-pin layering for WorkDesk cork-board notes */
#wd-dashboard .wd-cork-notes-board .wd-note-pin,
#wd-dashboard .wd-cork-board .wd-note-pin {
    top: 7px !important;
    width: 20px !important;
    height: 20px !important;
    overflow: visible !important;
    z-index: 4 !important;
    box-shadow:
        0 2px 3px rgba(100, 20, 20, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::before,
#wd-dashboard .wd-cork-board .wd-note-pin::before {
    top: 14px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 0 0 7px 7px !important;
    background: linear-gradient(180deg, #b9161b 0%, #7e0d11 100%) !important;
    box-shadow: none !important;
    z-index: -1 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::after,
#wd-dashboard .wd-cork-board .wd-note-pin::after {
    top: 20px !important;
    width: 25px !important;
    height: 4px !important;
    transform: translateX(-2px) rotate(38deg) !important;
    background: linear-gradient(90deg, #8b949e 0%, #f3f4f6 28%, #c7b779 63%, #6f623a 100%) !important;
    box-shadow: 10px 7px 0 0 rgba(163, 127, 55, 0.18) !important;
    z-index: -2 !important;
}


/* 10.7.3 — Replace broken multi-piece cork-board pin with one clean SVG pin */
#wd-dashboard .wd-cork-notes-board .wd-note-pin,
#wd-dashboard .wd-cork-board .wd-note-pin {
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    width: 52px !important;
    height: 64px !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translateX(-50%) !important;
    background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2078%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CradialGradient%20id=%22head%22%20cx=%2234%25%22%20cy=%2227%25%22%20r=%2272%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%25%22%20stop-color=%22%23ffd8d2%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%2224%25%22%20stop-color=%22%23ff7059%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%2258%25%22%20stop-color=%22%23e7342b%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%22100%25%22%20stop-color=%22%23a30f16%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%20%20%3ClinearGradient%20id=%22neck%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%25%22%20stop-color=%22%23c91620%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%22100%25%22%20stop-color=%22%23760a10%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id=%22needle%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%25%22%20stop-color=%22%23f1f5f9%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%2242%25%22%20stop-color=%22%239ca3af%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%22100%25%22%20stop-color=%22%2362552f%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%0A%20%20%3C!--%20one%20soft%20shadow%20only%20--%3E%0A%20%20%3Cpath%20d=%22M37%2049%20L57%2070%22%20stroke=%22%23b99b4c%22%20stroke-width=%226%22%20stroke-linecap=%22round%22%20opacity=%22.22%22/%3E%0A%0A%20%20%3C!--%20needle%20--%3E%0A%20%20%3Cpath%20d=%22M32%2042%20L51%2064%22%20stroke=%22url(%23needle)%22%20stroke-width=%225%22%20stroke-linecap=%22round%22/%3E%0A%0A%20%20%3C!--%20neck/body%20under%20the%20head%20--%3E%0A%20%20%3Crect%20x=%2225%22%20y=%2229%22%20width=%2214%22%20height=%2220%22%20rx=%227%22%20fill=%22url(%23neck)%22/%3E%0A%0A%20%20%3C!--%20round%20head%20drawn%20last%20so%20it%20sits%20above%20the%20neck%20--%3E%0A%20%20%3Ccircle%20cx=%2232%22%20cy=%2223%22%20r=%2218%22%20fill=%22url(%23head)%22%20stroke=%22%238f1016%22%20stroke-width=%221.5%22/%3E%0A%20%20%3Ccircle%20cx=%2225%22%20cy=%2216%22%20r=%225.5%22%20fill=%22%23fff%22%20opacity=%22.62%22/%3E%0A%20%20%3Cpath%20d=%22M17%2022%20C18%2010%2028%204%2039%207%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20opacity=%22.32%22%20stroke-linecap=%22round%22/%3E%0A%3C/svg%3E") center / contain no-repeat !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 6 !important;
}

#wd-dashboard .wd-cork-notes-board .wd-note-pin::before,
#wd-dashboard .wd-cork-notes-board .wd-note-pin::after,
#wd-dashboard .wd-cork-board .wd-note-pin::before,
#wd-dashboard .wd-cork-board .wd-note-pin::after {
    content: none !important;
    display: none !important;
}

/* ========================================================================
   10.7.9 — Batch Entry PO search modal clear background
   Purpose: Let the existing Batch Entry rows remain readable behind the
   Search/Add Existing Invoices modal. UI-only; no workflow or data change.
   ======================================================================== */
body #im-batch-search-modal.modal-overlay:not(.hidden) {
    background: rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media screen and (min-width: 769px) {
    body #im-batch-search-modal.modal-overlay:not(.hidden) {
        background: rgba(15, 23, 42, 0.06) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body #im-batch-search-modal .modal-container {
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22) !important;
    }
}



/* ========================================================================
   10.8.6 — WorkDesk Dashboard selected site/vendor card focus
   Scope: WorkDesk Dashboard > All Active Tasks card selector.
   Purpose: Keep the clicked site/vendor card visibly selected while the cork board
   below is showing. This is UI-only; no Firebase/read/workflow logic changed.
   ======================================================================== */
@keyframes wdSelectedDashboardCardPulse {
    0%, 100% {
        box-shadow:
            0 20px 36px rgba(4, 120, 87, 0.22),
            0 0 0 3px rgba(250, 204, 21, 0.55),
            0 0 0 7px rgba(34, 197, 94, 0.20),
            inset 0 0 0 2px rgba(4, 120, 87, 0.22);
    }
    50% {
        box-shadow:
            0 24px 42px rgba(4, 120, 87, 0.30),
            0 0 0 5px rgba(250, 204, 21, 0.78),
            0 0 0 11px rgba(34, 197, 94, 0.30),
            inset 0 0 0 2px rgba(4, 120, 87, 0.30);
    }
}

#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active) {
    opacity: 0.46 !important;
    filter: grayscale(0.12) saturate(0.72) !important;
    transform: scale(0.96) !important;
}

#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active):hover {
    opacity: 0.82 !important;
    filter: none !important;
    transform: translateY(-2px) scale(0.98) !important;
}

#wd-dashboard .wd-cork-site-card.active {
    position: relative !important;
    z-index: 4 !important;
    transform: translateY(-3px) scale(1.035) !important;
    border-color: rgba(217, 119, 6, 0.90) !important;
    background:
        radial-gradient(circle at 92% 9%, rgba(250,204,21,0.46), transparent 30%),
        linear-gradient(145deg, #fffbeb 0%, #bbf7d0 100%) !important;
    animation: wdSelectedDashboardCardPulse 1.25s ease-in-out infinite !important;
}

#wd-dashboard .wd-cork-site-card.active::after {
    content: "Selected";
    position: absolute;
    top: -9px;
    left: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f59e0b;
    color: #3b2600;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 14px rgba(120, 53, 15, 0.22);
}

#wd-dashboard .wd-cork-site-card.active .wd-site-card-pin {
    animation: wdSelectedDashboardCardPulse 1.25s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    #wd-dashboard .wd-cork-site-card.active,
    #wd-dashboard .wd-cork-site-card.active .wd-site-card-pin {
        animation: none !important;
    }
}


/* 10.8.7 — Dashboard selected status-card focus + compact cork-board action buttons */
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active) {
    opacity: 0.50 !important;
    filter: grayscale(0.10) saturate(0.78) !important;
    transform: scale(0.965) !important;
}

#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active):hover {
    opacity: 0.88 !important;
    filter: none !important;
    transform: translateY(-2px) scale(0.985) !important;
}

#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active {
    position: relative !important;
    z-index: 3 !important;
    transform: translateY(-4px) scale(1.035) !important;
    border-color: rgba(37, 99, 235, 0.58) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(147,197,253,0.42), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
    box-shadow:
        0 26px 58px rgba(37, 99, 235, 0.22),
        0 0 0 3px rgba(37, 99, 235, 0.16),
        0 0 0 8px rgba(14, 165, 233, 0.08) !important;
    animation: wdSelectedStatusCategoryPulse 1.35s ease-in-out infinite !important;
}

#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active .wd-status-card-glow {
    background: rgba(59, 130, 246, 0.22) !important;
}

@keyframes wdSelectedStatusCategoryPulse {
    0%, 100% {
        box-shadow:
            0 24px 52px rgba(37, 99, 235, 0.20),
            0 0 0 3px rgba(37, 99, 235, 0.16),
            0 0 0 8px rgba(14, 165, 233, 0.08);
    }
    50% {
        box-shadow:
            0 30px 66px rgba(37, 99, 235, 0.30),
            0 0 0 5px rgba(37, 99, 235, 0.24),
            0 0 0 13px rgba(14, 165, 233, 0.13);
    }
}

#wd-dashboard .wd-note-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: auto !important;
}

#wd-dashboard .wd-note-actions .wd-dashboard-pdf-btn,
#wd-dashboard .wd-note-actions .wd-forward-task-btn,
#wd-dashboard .wd-note-actions .wd-pdf-empty {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    font-size: .70rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

#wd-dashboard .wd-note-actions .wd-dashboard-pdf-btn i,
#wd-dashboard .wd-note-actions .wd-forward-task-btn i {
    margin-right: 3px !important;
}

#wd-dashboard .wd-note-actions .wd-dashboard-pdf-btn.srv {
    background: linear-gradient(135deg, #ecfdf5, #a7f3d0) !important;
    color: #065f46 !important;
}

@media (max-width: 480px) {
    #wd-dashboard .wd-note-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active {
        animation: none !important;
    }
}


/* 10.8.8 — Stop yellow cork-board note blinking
   Keep selected status/site/vendor card highlight, but do not animate the yellow notes themselves. */
#wd-dashboard .wd-cork-notes-board .wd-cork-note,
#wd-dashboard .wd-cork-notes-board .wd-cork-note::before,
#wd-dashboard .wd-cork-notes-board .wd-cork-note::after,
#wd-dashboard .wd-cork-notes-board .wd-cork-note .wd-note-age,
#wd-dashboard .wd-cork-notes-board .wd-cork-note .wd-note-pin {
    animation: none !important;
}


/* 10.8.9 — Stop cork-board yellow note hover vibration
   Reason: hover lift/translate can move the note away from the cursor edge,
   causing enter/leave flicker. Keep notes stable; only selected cards pulse. */
#wd-dashboard .wd-cork-notes-board .wd-cork-note,
#wd-dashboard .wd-cork-board .wd-cork-note {
    will-change: auto !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note:hover,
#wd-dashboard .wd-cork-board .wd-cork-note:hover {
    transform: rotate(var(--note-tilt, 0deg)) !important;
    animation: none !important;
}

#wd-dashboard .wd-cork-notes-board .wd-cork-note:hover .wd-note-pin,
#wd-dashboard .wd-cork-board .wd-cork-note:hover .wd-note-pin {
    animation: none !important;
}

/* 10.9.0 — Stop Dashboard card hover vibration
   Scope: WorkDesk Dashboard main status cards and site/vendor selector cards.
   Keep selected glow/pulse, but remove hover lift/scale movement that causes edge flicker. */
#wd-dashboard .wd-active-status-card,
#wd-dashboard .wd-cork-site-card {
    will-change: auto !important;
}

#wd-dashboard .wd-active-status-card:hover,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card:hover,
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active):hover,
#wd-dashboard .wd-cork-site-card:hover,
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active):hover {
    transform: none !important;
}

#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active),
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active) {
    transform: none !important;
}

#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active,
#wd-dashboard .wd-cork-site-card.active {
    transform: none !important;
}

@media (hover: hover) {
    #wd-dashboard .wd-active-status-card:hover,
    #wd-dashboard .wd-cork-site-card:hover {
        transition-property: box-shadow, border-color, background, opacity, filter !important;
    }
}

/* 10.9.1 — Fully stabilize Dashboard card hover states
   Reason: dimmed/non-selected cards were still visually flickering/vibrating on hover
   because hover opacity/filter/transition rules were still changing while selected context was active.
   Keep selected card glow, but make every dashboard card physically and visually stable on hover. */
#wd-dashboard .wd-active-status-card,
#wd-dashboard .wd-active-status-card:hover,
#wd-dashboard .wd-active-status-card:focus,
#wd-dashboard .wd-active-status-card:active,
#wd-dashboard .wd-cork-site-card,
#wd-dashboard .wd-cork-site-card:hover,
#wd-dashboard .wd-cork-site-card:focus,
#wd-dashboard .wd-cork-site-card:active {
    transform: none !important;
    will-change: auto !important;
}

#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card,
#wd-dashboard .wd-site-selector-panel .wd-cork-site-card,
#wd-dashboard .wd-cork-site-selector .wd-cork-site-card {
    transition-property: box-shadow, border-color, background, background-color, color !important;
    transition-duration: 0.16s !important;
}

/* Keep non-selected cards stable while a category/site/vendor is selected.
   No hover brighten/lift/scale. They stay dimmed but readable. */
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active),
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active):hover,
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active):focus,
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active),
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active):hover,
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active):focus {
    opacity: 0.58 !important;
    filter: grayscale(0.08) saturate(0.82) !important;
    transform: none !important;
    animation: none !important;
}

/* Selected cards remain highlighted, but without physical movement. */
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active:hover,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active:focus,
#wd-dashboard .wd-cork-site-card.active,
#wd-dashboard .wd-cork-site-card.active:hover,
#wd-dashboard .wd-cork-site-card.active:focus {
    transform: none !important;
}

/* Some browsers still apply old transform transitions from earlier rules.
   Hard-disable transform transition on Dashboard selector cards only. */
#wd-dashboard .wd-active-status-card,
#wd-dashboard .wd-cork-site-card {
    transition-property: box-shadow, border-color, background, background-color, opacity, filter, color !important;
}



/* 10.9.2 — Dashboard card click stability cleanup
   Reason: pulsing/hover animations made hovered cards blink and sometimes required multiple clicks.
   Keep the selected card obvious, but make all Dashboard selector cards physically/visually stable. */
#wd-dashboard .wd-active-status-card,
#wd-dashboard .wd-active-status-card:hover,
#wd-dashboard .wd-active-status-card:focus,
#wd-dashboard .wd-active-status-card:active,
#wd-dashboard .wd-cork-site-card,
#wd-dashboard .wd-cork-site-card:hover,
#wd-dashboard .wd-cork-site-card:focus,
#wd-dashboard .wd-cork-site-card:active {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    cursor: pointer !important;
}

#wd-dashboard .wd-active-status-card *,
#wd-dashboard .wd-cork-site-card * {
    animation: none !important;
    transition: none !important;
}

/* Decorative layers must never catch/steal the click. */
#wd-dashboard .wd-active-status-card::before,
#wd-dashboard .wd-active-status-card::after,
#wd-dashboard .wd-active-status-card .wd-status-card-glow,
#wd-dashboard .wd-cork-site-card::before,
#wd-dashboard .wd-cork-site-card::after,
#wd-dashboard .wd-cork-site-card .wd-site-card-pin {
    pointer-events: none !important;
}

/* Non-selected cards: stay dimmed and stable, even when hovered. */
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active),
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active):hover,
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active):focus,
#wd-dashboard .wd-dashboard-status-grid:has(.wd-active-status-card.active) .wd-active-status-card:not(.active):active,
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active),
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active):hover,
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active):focus,
#wd-dashboard .wd-site-selector-panel.has-selection .wd-cork-site-card:not(.active):active {
    opacity: 0.62 !important;
    filter: grayscale(0.08) saturate(0.82) !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

/* Selected cards: static highlight only, no blinking/pulse. */
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active:hover,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active:focus,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.active:active {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    border-color: rgba(37, 99, 235, 0.72) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(147,197,253,0.36), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
    box-shadow:
        0 22px 46px rgba(37, 99, 235, 0.22),
        0 0 0 3px rgba(37, 99, 235, 0.20),
        0 0 0 8px rgba(14, 165, 233, 0.10) !important;
}

#wd-dashboard .wd-cork-site-card.active,
#wd-dashboard .wd-cork-site-card.active:hover,
#wd-dashboard .wd-cork-site-card.active:focus,
#wd-dashboard .wd-cork-site-card.active:active {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    border-color: rgba(217, 119, 6, 0.90) !important;
    background:
        radial-gradient(circle at 92% 9%, rgba(250,204,21,0.40), transparent 30%),
        linear-gradient(145deg, #fffbeb 0%, #bbf7d0 100%) !important;
    box-shadow:
        0 18px 36px rgba(4, 120, 87, 0.20),
        0 0 0 3px rgba(250, 204, 21, 0.55),
        0 0 0 7px rgba(34, 197, 94, 0.18) !important;
}

/* 10.9.3 — WorkDesk Dashboard full-card click target
   Reason: clicking directly on the icon, count, title, or small helper text could feel
   inconsistent because the child element received the pointer target instead of the card.
   Make the inner decoration/text transparent to pointer events so every click lands on
   the parent dashboard card button. */
#wd-dashboard button.wd-active-status-card,
#wd-dashboard button.wd-cork-site-card {
    cursor: pointer !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

#wd-dashboard button.wd-active-status-card *,
#wd-dashboard button.wd-cork-site-card * {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

#wd-dashboard button.wd-active-status-card::before,
#wd-dashboard button.wd-active-status-card::after,
#wd-dashboard button.wd-cork-site-card::before,
#wd-dashboard button.wd-cork-site-card::after {
    pointer-events: none !important;
}



/* 10.9.7 — Invoice Entry modal footer compact spacing cleanup
   Left: PO/Site/Vendor aligned with the form fields.
   Center: Quick Status actions.
   Right: Close button separated at the far edge. */
#im-invoice-entry-modal .modal-footer.im-entry-modal-footer {
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) minmax(390px, max-content) minmax(96px, 1fr) !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    min-height: 0 !important;
    padding: 12px 20px 12px 24px !important;
    background: linear-gradient(180deg, #f7fffb 0%, #eef9f4 100%) !important;
    border-top: 1px solid rgba(17, 96, 69, 0.14) !important;
}

#im-invoice-entry-modal .im-footer-po-summary {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px 0 !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    text-align: left !important;
    margin: 0 !important;
}

#im-invoice-entry-modal .im-footer-po-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding-right: 12px !important;
    margin-right: 11px !important;
    white-space: nowrap !important;
}

#im-invoice-entry-modal .im-footer-po-item:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 1px !important;
    height: 13px !important;
    transform: translateY(-50%) !important;
    background: rgba(17, 96, 69, 0.22) !important;
}

#im-invoice-entry-modal .im-footer-po-item strong {
    color: #116045 !important;
    font-weight: 900 !important;
}

#im-invoice-entry-modal .im-footer-po-item span {
    color: #0f172a !important;
    font-weight: 800 !important;
    min-width: 0 !important;
}

#im-invoice-entry-modal .im-footer-po-vendor {
    max-width: min(240px, 100%) !important;
}

#im-invoice-entry-modal .im-footer-po-vendor .im-po-vendor {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-footer {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: min(410px, 100%) !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    margin: 0 !important;
}

#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    min-width: 0 !important;
}

#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-btn {
    height: 29px !important;
    min-height: 29px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(17, 96, 69, 0.22) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #116045 !important;
    font-size: 10.8px !important;
    font-weight: 900 !important;
    line-height: 27px !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
    transform: none !important;
    white-space: nowrap !important;
}

#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-btn:hover,
#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-btn:focus,
#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-btn.is-active {
    background: #116045 !important;
    color: #fff8d6 !important;
    border-color: #116045 !important;
    box-shadow: 0 7px 16px rgba(17, 96, 69, 0.18) !important;
    transform: none !important;
    outline: none !important;
}

#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-final {
    background: #fff8e6 !important;
    color: #8a5a11 !important;
    border-color: rgba(190, 132, 32, 0.38) !important;
}

#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-final:hover,
#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-final:focus,
#im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-final.is-active {
    background: #8a5a11 !important;
    color: #fff4c2 !important;
    border-color: #8a5a11 !important;
}

#im-invoice-entry-modal .im-footer-close-area {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 96px !important;
    padding-left: 16px !important;
    margin-left: 0 !important;
    border-left: 1px solid rgba(17, 96, 69, 0.18) !important;
}

#im-invoice-entry-modal .im-footer-close-btn {
    margin: 0 !important;
    height: 34px !important;
    min-width: 82px !important;
    border-radius: 14px !important;
    padding: 0 18px !important;
    font-weight: 900 !important;
    box-shadow: 0 5px 14px rgba(17, 96, 69, 0.10) !important;
}

@media (max-width: 1100px) {
    #im-invoice-entry-modal .modal-footer.im-entry-modal-footer {
        grid-template-columns: minmax(270px, 1fr) minmax(365px, max-content) minmax(92px, 1fr) !important;
        column-gap: 14px !important;
        padding-left: 24px !important;
    }

    #im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-footer {
        width: min(385px, 100%) !important;
    }

    #im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-buttons {
        justify-content: center !important;
        gap: 7px !important;
    }

    #im-invoice-entry-modal .im-footer-po-vendor {
        max-width: 210px !important;
    }
}

@media (max-width: 900px) {
    #im-invoice-entry-modal .modal-footer.im-entry-modal-footer {
        grid-template-columns: 1fr auto !important;
        align-items: start !important;
        padding: 12px 18px !important;
    }

    #im-invoice-entry-modal .im-footer-po-summary {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #im-invoice-entry-modal .im-footer-close-area {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-footer {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    #im-invoice-entry-modal .modal-footer.im-entry-modal-footer {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }

    #im-invoice-entry-modal .im-footer-po-summary,
    #im-invoice-entry-modal .im-footer-close-area,
    #im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-footer {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    #im-invoice-entry-modal .im-footer-close-area {
        justify-self: stretch !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        border-left: 0 !important;
        min-width: 0 !important;
    }

    #im-invoice-entry-modal .im-footer-close-btn {
        width: 100% !important;
    }

    #im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-footer {
        justify-self: stretch !important;
        width: 100% !important;
    }

    #im-invoice-entry-modal .im-entry-modal-footer .im-quick-status-btn {
        flex: 1 1 auto !important;
    }
}

/* 10.9.8 — Invoice Entry modal Quick Access side panel
   Purpose: move the Quick Status actions out of the footer so PO/Site/Vendor,
   quick status buttons, and Close no longer fight for the same horizontal row. */
#im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
    width: min(94vw, 1120px) !important;
    max-width: 1120px !important;
}

#im-invoice-entry-modal .im-entry-body-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 168px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

#im-invoice-entry-modal .im-entry-body-shell > .modal-content.im-entry-main-pane {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px 14px 24px !important;
    border-right: 1px solid rgba(17, 96, 69, 0.12) !important;
}

#im-invoice-entry-modal .im-entry-quick-panel {
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 18px 12px !important;
    background: linear-gradient(180deg, #f7fffb 0%, #eef9f4 100%) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-footer {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
}

#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #116045 !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
}

#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-buttons {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-width: 0 !important;
}

#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-btn {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(17, 96, 69, 0.22) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #116045 !important;
    font-size: 10.8px !important;
    font-weight: 900 !important;
    line-height: 32px !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06) !important;
    transform: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-btn:hover,
#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-btn:focus,
#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-btn.is-active {
    background: #116045 !important;
    color: #fff8d6 !important;
    border-color: #116045 !important;
    box-shadow: 0 8px 18px rgba(17, 96, 69, 0.18) !important;
    transform: none !important;
    outline: none !important;
}

#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-final {
    background: #fff8e6 !important;
    color: #8a5a11 !important;
    border-color: rgba(190, 132, 32, 0.38) !important;
}

#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-final:hover,
#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-final:focus,
#im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-final.is-active {
    background: #8a5a11 !important;
    color: #fff4c2 !important;
    border-color: #8a5a11 !important;
}

#im-invoice-entry-modal .modal-footer.im-entry-modal-footer {
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 8px !important;
    min-height: 0 !important;
    padding: 10px 20px 10px 24px !important;
    background: linear-gradient(180deg, #f7fffb 0%, #eef9f4 100%) !important;
    border-top: 1px solid rgba(17, 96, 69, 0.14) !important;
}

#im-invoice-entry-modal .im-footer-po-summary {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    text-align: left !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#im-invoice-entry-modal .im-footer-po-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding-right: 12px !important;
    margin-right: 11px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

#im-invoice-entry-modal .im-footer-po-vendor {
    flex: 1 1 auto !important;
    max-width: none !important;
    overflow: hidden !important;
}

#im-invoice-entry-modal .im-footer-po-vendor .im-po-vendor {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

#im-invoice-entry-modal .im-footer-close-area {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 96px !important;
    padding-left: 16px !important;
    margin-left: 0 !important;
    border-left: 1px solid rgba(17, 96, 69, 0.18) !important;
}

#im-invoice-entry-modal .im-footer-close-btn {
    margin: 0 !important;
    height: 34px !important;
    min-width: 82px !important;
    border-radius: 14px !important;
    padding: 0 18px !important;
    font-weight: 900 !important;
    box-shadow: 0 5px 14px rgba(17, 96, 69, 0.10) !important;
}

@media (max-width: 980px) {
    #im-invoice-entry-modal.modal-overlay:not(.hidden) .modal-container {
        width: min(96vw, 900px) !important;
        max-width: 900px !important;
    }

    #im-invoice-entry-modal .im-entry-body-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: visible !important;
    }

    #im-invoice-entry-modal .im-entry-body-shell > .modal-content.im-entry-main-pane {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(17, 96, 69, 0.12) !important;
    }

    #im-invoice-entry-modal .im-entry-quick-panel {
        padding: 12px 18px !important;
    }

    #im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-footer {
        align-items: center !important;
        gap: 8px !important;
    }

    #im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    #im-invoice-entry-modal .im-entry-quick-panel .im-quick-status-btn {
        width: auto !important;
        min-width: 112px !important;
        height: 31px !important;
        min-height: 31px !important;
        line-height: 29px !important;
    }
}

@media (max-width: 680px) {
    #im-invoice-entry-modal .modal-footer.im-entry-modal-footer {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }

    #im-invoice-entry-modal .im-footer-po-summary,
    #im-invoice-entry-modal .im-footer-close-area {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    #im-invoice-entry-modal .im-footer-po-summary {
        flex-wrap: wrap !important;
        gap: 6px 0 !important;
    }

    #im-invoice-entry-modal .im-footer-close-area {
        justify-self: stretch !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        border-left: 0 !important;
        min-width: 0 !important;
    }

    #im-invoice-entry-modal .im-footer-close-btn {
        width: 100% !important;
    }
}

/* 11.0.0 — WorkDesk Dashboard search clear + category result context
   Scope: WorkDesk Dashboard only.
   Purpose: add a clean Clear action and show which All Active categories belong
   to the current global-search result/site while greying out unrelated cards. */
#wd-dashboard .wd-active-dashboard-search-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: min(470px, 100%) !important;
}

#wd-dashboard .wd-active-dashboard-search-row .wd-active-dashboard-search-wrap {
    flex: 1 1 320px !important;
    min-width: min(340px, 100%) !important;
}

#wd-dashboard .wd-active-dashboard-clear-btn {
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(15, 76, 117, 0.16) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #0f4c75 !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(15, 46, 71, 0.06) !important;
}

#wd-dashboard .wd-active-dashboard-clear-btn:hover,
#wd-dashboard .wd-active-dashboard-clear-btn:focus {
    border-color: rgba(15, 76, 117, 0.30) !important;
    box-shadow: 0 10px 22px rgba(15, 46, 71, 0.10) !important;
    outline: none !important;
}

/* 11.7.5: shown only when an exact PO is absent from the complete accessible
   payment pocket. The archive is not read until the user clicks this button. */
#wd-dashboard .wd-paid-history-trigger.hidden {
    display: none !important;
}

#wd-dashboard .wd-paid-history-trigger {
    height: 42px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(13, 116, 104, 0.42) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0d7468 0%, #08675d 100%) !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 9px 20px rgba(13, 116, 104, 0.20) !important;
}

#wd-dashboard .wd-paid-history-trigger:hover,
#wd-dashboard .wd-paid-history-trigger:focus-visible {
    transform: translateY(-1px) !important;
    border-color: rgba(245, 200, 76, 0.95) !important;
    box-shadow: 0 12px 25px rgba(13, 116, 104, 0.28), 0 0 0 3px rgba(245, 200, 76, 0.16) !important;
    outline: none !important;
}

#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-muted,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-muted:hover,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-muted:focus,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-muted:active {
    opacity: 0.36 !important;
    filter: grayscale(0.22) saturate(0.62) !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-match,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-match:hover,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-match:focus,
#wd-dashboard .wd-dashboard-status-grid .wd-active-status-card.wd-search-category-match:active {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    border-color: rgba(37, 99, 235, 0.76) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(147,197,253,0.36), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
    box-shadow:
        0 22px 46px rgba(37, 99, 235, 0.22),
        0 0 0 3px rgba(37, 99, 235, 0.20),
        0 0 0 8px rgba(14, 165, 233, 0.10) !important;
}

@media (max-width: 900px) {
    #wd-dashboard .wd-active-dashboard-search-row {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
    }

    #wd-dashboard .wd-active-dashboard-search-row .wd-active-dashboard-search-wrap {
        min-width: 0 !important;
    }
}

@media (max-width: 520px) {
    #wd-dashboard .wd-active-dashboard-search-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #wd-dashboard .wd-active-dashboard-clear-btn,
    #wd-dashboard .wd-paid-history-trigger {
        width: 100% !important;
    }
}

/* =========================================================
   IBA 11.0.1 - System Version Update Notice
   UI only: popup/banner when a newer version is live.
   ========================================================= */
.iba-system-update-notice {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(420px, calc(100vw - 32px));
    padding: 16px 16px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 205, 91, 0.55);
    background: linear-gradient(135deg, rgba(8, 40, 64, 0.98), rgba(14, 80, 72, 0.98));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    color: #fff;
    font-family: inherit;
}

.iba-system-update-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 205, 91, 0.18);
    color: #ffd35f;
    font-size: 23px;
    font-weight: 900;
    box-shadow: 0 0 0 1px rgba(255, 211, 95, 0.28) inset;
}

.iba-system-update-body {
    min-width: 0;
    flex: 1;
}

.iba-system-update-title {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: #ffd35f;
    margin-bottom: 4px;
}

.iba-system-update-text {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 7px;
}

.iba-system-update-version {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 12px;
}

.iba-system-update-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.iba-system-update-actions button {
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
}

.iba-system-update-later {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

.iba-system-update-now {
    background: linear-gradient(135deg, #ffd35f, #ffb627);
    color: #16324a;
    box-shadow: 0 8px 18px rgba(255, 182, 39, 0.28);
}

.iba-system-update-actions button:hover {
    filter: brightness(1.04);
}

@media (max-width: 640px) {
    .iba-system-update-notice {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        border-radius: 16px;
    }
}

/* =========================================================
   IBA 11.4.6 - Temporary Portal Domain Migration Notice
   UI only: login notice + persistent migration countdown.
   ========================================================= */
.iba-domain-migration-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000005;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 20, 32, 0.76);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.iba-domain-migration-overlay.is-visible {
    display: flex;
}

body.iba-domain-migration-dialog-open {
    overflow: hidden;
}

.iba-domain-migration-dialog {
    position: relative;
    width: min(660px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 30px;
    border: 1px solid rgba(255, 205, 91, 0.62);
    border-radius: 26px;
    background:
        radial-gradient(circle at 88% 2%, rgba(255, 205, 91, 0.19), transparent 35%),
        linear-gradient(145deg, #07324a 0%, #07524c 100%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    color: #ffffff;
    text-align: center;
}

.iba-domain-migration-alert-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border: 1px solid rgba(255, 211, 95, 0.46);
    border-radius: 20px;
    background: rgba(255, 211, 95, 0.15);
    color: #ffd35f;
    font-size: 31px;
    box-shadow: 0 0 30px rgba(255, 197, 52, 0.13);
}

.iba-domain-migration-kicker {
    margin-bottom: 6px;
    color: #ffd35f;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.iba-domain-migration-dialog h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 900;
    line-height: 1.13;
}

.iba-domain-migration-intro {
    margin: 12px 0 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.5;
}

.iba-domain-migration-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}

.iba-domain-migration-domain {
    min-width: 0;
    padding: 14px 12px;
    border-radius: 16px;
    text-align: left;
}

.iba-domain-migration-domain span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.iba-domain-migration-domain strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.25;
}

.iba-domain-migration-domain-old {
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
}

.iba-domain-migration-domain-new {
    border: 1px solid rgba(255, 211, 95, 0.48);
    background: rgba(255, 211, 95, 0.13);
    color: #ffe08a;
}

.iba-domain-migration-arrow {
    color: #ffd35f;
    font-size: 22px;
}

.iba-domain-migration-guidance {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.58;
}

.iba-domain-migration-guidance code {
    padding: 2px 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffe08a;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 800;
}

.iba-domain-migration-example {
    margin: 18px 0;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.13);
    text-align: left;
}

.iba-domain-migration-example > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.iba-domain-migration-example div {
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.55;
}

.iba-domain-migration-example div:last-child {
    color: #ffe08a;
}

.iba-domain-migration-understand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    min-height: 46px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd35f, #ffb627);
    box-shadow: 0 10px 24px rgba(255, 182, 39, 0.25);
    color: #16324a;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
}

.iba-domain-migration-understand:hover {
    filter: brightness(1.05);
}

.iba-domain-migration-understand:focus-visible,
.iba-domain-migration-countdown:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.iba-domain-migration-countdown {
    position: fixed;
    top: 18px;
    left: 50%;
    right: auto;
    z-index: 999990;
    display: none;
    align-items: center;
    gap: 10px;
    width: min(300px, calc(100vw - 36px));
    padding: 10px 13px;
    border: 1px solid rgba(255, 198, 54, 0.72);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(6, 43, 64, 0.97), rgba(7, 84, 75, 0.97));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.27);
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transform: translateX(-50%);
    animation: iba-domain-migration-pulse 1.7s ease-in-out infinite;
}

.iba-domain-migration-countdown.is-visible {
    display: flex;
}

.iba-domain-migration-countdown-icon {
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255, 211, 95, 0.16);
    color: #ffd35f;
    font-size: 21px;
}

.iba-domain-migration-countdown-copy {
    display: block;
    min-width: 0;
    flex: 1;
}

.iba-domain-migration-countdown-label {
    display: block;
    margin-bottom: 2px;
    color: #ffd35f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.iba-domain-migration-countdown-time {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: #ffffff;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.iba-domain-migration-countdown-time small {
    margin-right: 2px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 8px;
    font-weight: 800;
}

.iba-domain-migration-countdown-domain {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iba-domain-migration-countdown.is-migration-live {
    border-color: rgba(98, 224, 166, 0.82);
    animation-name: iba-domain-migration-live-pulse;
}

.iba-domain-migration-countdown.is-migration-live .iba-domain-migration-countdown-icon,
.iba-domain-migration-countdown.is-migration-live .iba-domain-migration-countdown-label {
    color: #8ef0bf;
}

@keyframes iba-domain-migration-pulse {
    0%, 100% {
        border-color: rgba(255, 198, 54, 0.6);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.27), 0 0 0 rgba(255, 190, 46, 0);
    }
    50% {
        border-color: rgba(255, 86, 73, 0.92);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.27), 0 0 22px rgba(255, 77, 64, 0.42);
    }
}

@keyframes iba-domain-migration-live-pulse {
    0%, 100% {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.27), 0 0 0 rgba(74, 222, 128, 0);
    }
    50% {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.27), 0 0 22px rgba(74, 222, 128, 0.4);
    }
}

@media (max-width: 700px) {
    .iba-domain-migration-overlay {
        align-items: flex-start;
        padding: 14px;
        overflow-y: auto;
    }

    .iba-domain-migration-dialog {
        width: 100%;
        max-height: none;
        margin: 12px 0;
        padding: 22px 17px;
        border-radius: 21px;
    }

    .iba-domain-migration-alert-icon {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 26px;
    }

    .iba-domain-migration-dialog h2 {
        font-size: 25px;
    }

    .iba-domain-migration-intro {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .iba-domain-migration-route {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .iba-domain-migration-arrow {
        transform: rotate(90deg);
        font-size: 18px;
    }

    .iba-domain-migration-domain {
        padding: 11px 12px;
        text-align: center;
    }

    .iba-domain-migration-guidance {
        font-size: 13px;
    }

    .iba-domain-migration-example {
        margin: 14px 0;
    }

    .iba-domain-migration-understand {
        width: 100%;
    }

    .iba-domain-migration-countdown {
        top: 64px;
        left: 50%;
        right: auto;
        width: min(420px, calc(100vw - 20px));
        min-height: 58px;
        padding: 8px 12px;
        border-radius: 15px;
        transform: translateX(-50%);
    }

    .iba-domain-migration-countdown-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iba-domain-migration-countdown {
        animation: none;
    }
}

/* ========================================================================
   11.5.1 — WorkDesk Job Records dedicated print-table repair
   The screen table keeps its premium responsive layout. Printing uses a
   separate plain table so mobile/card rules cannot collapse report rows.
   ======================================================================== */
@media print {
    html.workdesk-print-active,
    html.workdesk-print-active body {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    html.workdesk-print-active body #app-container,
    html.workdesk-print-active body #workdesk-view,
    html.workdesk-print-active body #workdesk-view .workdesk-main,
    html.workdesk-print-active body #workdesk-content-area,
    html.workdesk-print-active body #wd-reporting,
    html.workdesk-print-active body #reporting-printable-area.printing,
    html.workdesk-print-active body #reporting-printable-area.printing * {
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    html.workdesk-print-active body #app-container,
    html.workdesk-print-active body #workdesk-view,
    html.workdesk-print-active body #workdesk-view .workdesk-main,
    html.workdesk-print-active body #workdesk-content-area,
    html.workdesk-print-active body #wd-reporting {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    html.workdesk-print-active body #workdesk-view > .workdesk-sidebar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing {
        page: auto !important;
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #111827 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing > .table-wrapper,
    html.workdesk-print-active body #reporting-printable-area.printing > .table-wrapper * {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-header {
        display: block !important;
        margin: 0 0 4mm 0 !important;
        padding: 0 0 3mm 0 !important;
        border-bottom: 1.5px solid #003a5c !important;
        page-break-inside: avoid !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
        align-items: end !important;
        gap: 8mm !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-heading > div {
        min-width: 0 !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-heading h1 {
        margin: 0 !important;
        color: #003a5c !important;
        font-size: 13pt !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-heading p {
        margin: 1.2mm 0 0 0 !important;
        color: #475569 !important;
        font-size: 7.5pt !important;
        line-height: 1.2 !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-title {
        max-width: none !important;
        text-align: right !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-title h2 {
        margin: 0 !important;
        color: #111827 !important;
        font-size: 12pt !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 3mm !important;
        margin-top: 3mm !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-meta.has-search {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-meta > div {
        display: block !important;
        min-width: 0 !important;
        padding: 2mm 2.5mm !important;
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-meta:not(.has-search) #wd-job-records-print-search-item {
        display: none !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-meta span {
        display: block !important;
        color: #64748b !important;
        font-size: 6.5pt !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .035em !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-meta strong {
        display: block !important;
        margin-top: .7mm !important;
        color: #0f172a !important;
        font-size: 8pt !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    html.workdesk-print-active body #reporting-printable-area.printing .wd-job-records-print-table-wrap {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 6.6pt !important;
        line-height: 1.2 !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-job { width: 7% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-ref { width: 5.5% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-site { width: 4% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-po { width: 6% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-vendor { width: 15% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-amount { width: 7% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-entered-by { width: 7.5% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-entered-date { width: 8% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-attention { width: 9% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-responded-date { width: 8% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-note { width: 15% !important; }
    html.workdesk-print-active body #wd-job-records-print-table col.wd-print-col-status { width: 8% !important; }

    html.workdesk-print-active body #wd-job-records-print-table thead {
        display: table-header-group !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table tbody {
        display: table-row-group !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table tr {
        display: table-row !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table th,
    html.workdesk-print-active body #wd-job-records-print-table td {
        display: table-cell !important;
        height: auto !important;
        padding: 1.4mm 1mm !important;
        border: .6px solid #64748b !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #111827 !important;
        font: inherit !important;
        text-align: left !important;
        vertical-align: top !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table thead th {
        padding: 1.6mm 1mm !important;
        background: #e2e8f0 !important;
        color: #0f172a !important;
        font-size: 6.2pt !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table tbody tr:nth-child(even) td {
        background: #f8fafc !important;
    }

    html.workdesk-print-active body #wd-job-records-print-table th:nth-child(6),
    html.workdesk-print-active body #wd-job-records-print-table td:nth-child(6) {
        text-align: right !important;
    }
}

/* ========================================================================
   11.6.5 — Invoice Records exact-result Mark as Paid + Payments scrolling
   ======================================================================== */
.im-mark-paid-trigger {
    background: linear-gradient(135deg, #b45309, #92400e) !important;
    border-color: rgba(180, 83, 9, 0.48) !important;
    color: #ffffff !important;
}

.im-mark-paid-trigger:disabled {
    cursor: not-allowed !important;
    opacity: 0.48 !important;
    filter: grayscale(0.35);
}

body #im-mark-paid-modal > .modal-container.im-mark-paid-modal {
    width: min(1240px, calc(100vw - 34px)) !important;
    max-width: 1240px !important;
    height: min(88vh, 860px) !important;
    max-height: calc(100vh - 28px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#im-mark-paid-modal .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow: hidden !important;
}

#im-mark-paid-modal .im-mark-paid-help {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #7c2d12;
}

#im-mark-paid-modal .im-mark-paid-table-wrap {
    flex: 1 1 0 !important;
    min-height: 190px !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable;
}

#im-mark-paid-modal .im-mark-paid-table {
    width: 100% !important;
    min-width: 1120px !important;
    border-collapse: collapse !important;
    overflow: visible !important;
}

#im-mark-paid-modal .im-mark-paid-table thead th {
    background: #92400e !important;
}

#im-mark-paid-modal .im-mark-paid-table tbody td:nth-child(7) strong {
    color: #047857;
    white-space: nowrap;
}

#im-mark-paid-modal .im-pocket-transfer-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

#im-mark-paid-modal .im-pocket-transfer-footer > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

#im-mark-paid-modal .im-mark-paid-confirm-btn {
    background: linear-gradient(135deg, #b45309, #92400e) !important;
}

/* The general premium-modal table rule uses overflow:hidden. These final,
   payment-specific rules restore one real scroll owner for every result row. */
body #im-add-payment-modal.modal-overlay:not(.hidden) {
    overflow: hidden !important;
}

body #im-add-payment-modal.modal-overlay:not(.hidden) > .modal-container.im-payment-search-modal {
    width: min(1120px, calc(100vw - 28px)) !important;
    max-width: 1120px !important;
    height: min(94vh, 940px) !important;
    height: min(94dvh, 940px) !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #im-add-payment-modal.modal-overlay:not(.hidden) > .modal-container.im-payment-search-modal > .modal-header,
body #im-add-payment-modal.modal-overlay:not(.hidden) > .modal-container.im-payment-search-modal > .modal-footer {
    flex: 0 0 auto !important;
}

body #im-add-payment-modal.modal-overlay:not(.hidden) > .modal-container.im-payment-search-modal > .modal-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #im-add-payment-modal.modal-overlay:not(.hidden) #im-payment-modal-results.im-payment-search-results.table-wrapper {
    display: block !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 220px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable both-edges;
}

body #im-add-payment-modal.modal-overlay:not(.hidden) #im-payment-modal-results .im-payment-result-table {
    overflow: visible !important;
}

@media (max-width: 780px) {
    body #im-mark-paid-modal > .modal-container.im-mark-paid-modal {
        width: calc(100vw - 16px) !important;
        height: calc(100vh - 16px) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    #im-mark-paid-modal .im-pocket-transfer-footer,
    #im-mark-paid-modal .im-pocket-transfer-footer > div {
        width: 100% !important;
        align-items: stretch !important;
        flex-direction: column !important;
    }

    #im-mark-paid-modal .im-pocket-transfer-footer button {
        width: 100% !important;
    }

    body #im-add-payment-modal.modal-overlay:not(.hidden) > .modal-container.im-payment-search-modal {
        width: calc(100vw - 12px) !important;
        height: calc(100vh - 12px) !important;
        height: calc(100dvh - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }

    body #im-add-payment-modal.modal-overlay:not(.hidden) #im-payment-modal-results.im-payment-search-results.table-wrapper {
        min-height: 160px !important;
    }
}

/* ========================================================================
   11.6.6 — WorkDesk payment-pocket site filter + SRV access
   ======================================================================== */
#wd-dashboard .wd-payment-pocket-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid #dbe4ea;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}

#wd-dashboard .wd-payment-pocket-tools label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #0f4c3a;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

#wd-dashboard .wd-payment-pocket-tools select {
    min-width: 220px;
    height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid #94a3b8;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

#wd-dashboard .wd-payment-pocket-tools select:focus {
    border-color: #0f766e;
    outline: 3px solid rgba(15, 118, 110, 0.14);
}

#wd-dashboard .wd-payment-pocket-tools small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

#wd-dashboard .wd-payment-pocket-table {
    min-width: 1080px;
}

#wd-dashboard .wd-payment-pocket-table .wd-dashboard-pdf-btn.srv {
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #059669, #047857);
    color: #ffffff !important;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

#wd-dashboard .wd-payment-pocket-table button.wd-dashboard-pdf-btn.srv:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

#wd-dashboard .wd-payment-pocket-no-match {
    padding: 30px 18px !important;
    color: #64748b !important;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 700px) {
    #wd-dashboard .wd-payment-pocket-tools {
        align-items: stretch;
        flex-direction: column;
    }

    #wd-dashboard .wd-payment-pocket-tools select {
        width: 100%;
        min-width: 0;
    }
}

/* ========================================================================
   11.6.7 — Prepare Payment Pocket Transfer full internal scrolling
   This targets only #im-pocket-transfer-modal. Mark as Paid is untouched.
   ======================================================================== */
body #im-pocket-transfer-modal.modal-overlay:not(.hidden) {
    overflow: hidden !important;
}

body #im-pocket-transfer-modal.modal-overlay:not(.hidden) > .modal-container.im-pocket-transfer-modal {
    width: min(1180px, calc(100vw - 28px)) !important;
    max-width: 1180px !important;
    height: min(92vh, 900px) !important;
    height: min(92dvh, 900px) !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #im-pocket-transfer-modal.modal-overlay:not(.hidden) > .modal-container.im-pocket-transfer-modal > .modal-header,
body #im-pocket-transfer-modal.modal-overlay:not(.hidden) > .modal-container.im-pocket-transfer-modal > .modal-footer {
    flex: 0 0 auto !important;
}

body #im-pocket-transfer-modal.modal-overlay:not(.hidden) > .modal-container.im-pocket-transfer-modal > .modal-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #im-pocket-transfer-modal.modal-overlay:not(.hidden) .im-pocket-transfer-help,
body #im-pocket-transfer-modal.modal-overlay:not(.hidden) .im-pocket-transfer-stats,
body #im-pocket-transfer-modal.modal-overlay:not(.hidden) .im-pocket-transfer-status {
    flex: 0 0 auto !important;
}

body #im-pocket-transfer-modal.modal-overlay:not(.hidden) .im-pocket-transfer-table-wrap.table-wrapper {
    display: block !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 190px !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable both-edges;
}

body #im-pocket-transfer-modal.modal-overlay:not(.hidden) .im-pocket-transfer-table {
    min-width: 980px !important;
    overflow: visible !important;
}

@media (max-width: 780px) {
    body #im-pocket-transfer-modal.modal-overlay:not(.hidden) > .modal-container.im-pocket-transfer-modal {
        width: calc(100vw - 12px) !important;
        height: calc(100vh - 12px) !important;
        height: calc(100dvh - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }

    body #im-pocket-transfer-modal.modal-overlay:not(.hidden) .im-pocket-transfer-table-wrap.table-wrapper {
        min-height: 150px !important;
    }
}

/* ========================================================================
   11.6.8 — Ready for Payment WorkDesk theme alignment + compact Site filter
   ======================================================================== */
#wd-dashboard .wd-dashboard-payment-section {
    border-color: rgba(15, 76, 117, 0.14) !important;
    background:
        radial-gradient(circle at 96% 8%, rgba(15, 76, 117, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.86) !important;
}

#wd-dashboard .wd-active-status-card.tone-payment::after,
#wd-dashboard .wd-active-status-card.tone-payment .wd-status-icon {
    background: linear-gradient(135deg, #003a5c, #0f4c75) !important;
}

#wd-dashboard .wd-dashboard-payment-grid .wd-payment-pocket-card.active,
#wd-dashboard .wd-dashboard-payment-grid .wd-payment-pocket-card.active:hover,
#wd-dashboard .wd-dashboard-payment-grid .wd-payment-pocket-card.active:focus {
    border-color: rgba(0, 58, 92, 0.48) !important;
    background: linear-gradient(180deg, #ffffff, #f1f7fb) !important;
    box-shadow: 0 18px 38px rgba(0, 58, 92, 0.16), 0 0 0 3px rgba(15, 76, 117, 0.10) !important;
}

#wd-dashboard .wd-payment-pocket-board {
    border-color: rgba(15, 76, 117, 0.22) !important;
    box-shadow: 0 18px 38px rgba(0, 58, 92, 0.09) !important;
}

#wd-dashboard .wd-payment-pocket-board-head {
    border-bottom: 3px solid #e5b93f !important;
    background: linear-gradient(135deg, #003a5c 0%, #0f4c75 62%, #176b87 100%) !important;
}

#wd-dashboard .wd-payment-pocket-tools {
    border-bottom-color: #d7e3eb !important;
    background: linear-gradient(180deg, #f8fbfd, #edf4f8) !important;
}

#wd-dashboard .wd-payment-pocket-tools label {
    color: #003a5c !important;
}

#wd-dashboard .wd-payment-pocket-tools select {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    border-color: #9bb5c5 !important;
    color: #0f2742 !important;
}

#wd-dashboard .wd-payment-pocket-tools select:focus {
    border-color: #0f4c75 !important;
    outline-color: rgba(15, 76, 117, 0.14) !important;
}

#wd-dashboard .wd-payment-pocket-table th {
    border-bottom-color: #c7d7e2 !important;
    background: #edf4f8 !important;
    color: #0f2742 !important;
}

#wd-dashboard .wd-payment-pocket-status {
    border-color: #b8d2e2 !important;
    background: #edf6fb !important;
    color: #003a5c !important;
}

/* 11.7.7 — Controlled row-level payment action */
#wd-dashboard .wd-payment-pocket-action-cell {
    text-align: center;
    white-space: nowrap;
}

#wd-dashboard .wd-payment-pocket-mark-paid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid #0b6170;
    border-radius: 9px;
    background: linear-gradient(135deg, #075985, #0f766e);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.71rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 7px 15px rgba(7, 89, 133, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#wd-dashboard .wd-payment-pocket-mark-paid:hover,
#wd-dashboard .wd-payment-pocket-mark-paid:focus-visible {
    filter: brightness(1.06);
    outline: 3px solid rgba(229, 185, 63, 0.28);
    outline-offset: 2px;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(7, 89, 133, 0.24);
}

#wd-dashboard .wd-payment-pocket-mark-paid:disabled {
    cursor: wait;
    filter: grayscale(0.2);
    opacity: 0.7;
    transform: none;
}

#wd-dashboard .wd-payment-pocket-table:has(.wd-payment-pocket-mark-paid) {
    min-width: 1180px;
}

@media (max-width: 700px) {
    #wd-dashboard .wd-payment-pocket-tools select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* ========================================================================
   11.6.9 — Align Invoice Value heading with its amount column
   ======================================================================== */
#wd-dashboard .wd-payment-pocket-table thead th:nth-child(5) {
    text-align: right !important;
}

/* ========================================================================
   11.7.0 — Screen-safe Invoice History + Ready Payment period controls
   ======================================================================== */
body #history-modal.modal-overlay:not(.hidden) {
    overflow: hidden !important;
}

body #history-modal.modal-overlay:not(.hidden) > .modal-container.history-modal-container {
    width: min(940px, calc(100vw - 28px)) !important;
    max-width: 940px !important;
    height: min(92vh, 900px) !important;
    height: min(92dvh, 900px) !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #history-modal.modal-overlay:not(.hidden) > .history-modal-container > .modal-header,
body #history-modal.modal-overlay:not(.hidden) > .history-modal-container > .modal-footer {
    flex: 0 0 auto !important;
}

body #history-modal.modal-overlay:not(.hidden) > .history-modal-container > .modal-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body #history-modal.modal-overlay:not(.hidden) .history-loader,
body #history-modal.modal-overlay:not(.hidden) .history-modal-summary {
    flex: 0 0 auto !important;
}

body #history-modal.modal-overlay:not(.hidden) .history-table-wrapper.table-wrapper {
    display: block !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 150px !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable;
}

body #history-modal.modal-overlay:not(.hidden) .history-premium-table {
    overflow: visible !important;
}

#wd-dashboard .wd-payment-pocket-board {
    scroll-margin-top: 16px;
}

#wd-dashboard .wd-payment-pocket-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#wd-dashboard .wd-payment-pocket-filter-note {
    flex: 1 1 auto;
    min-width: 150px;
}

#wd-dashboard .wd-payment-pocket-year-group {
    flex: 0 0 auto;
    margin-left: auto;
}

#wd-dashboard #wd-payment-pocket-year-filter {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
}

#wd-dashboard .wd-payment-pocket-month-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid #d7e3eb;
    background: #f8fbfd;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

#wd-dashboard .wd-payment-pocket-month-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid #b9ccd8;
    border-radius: 999px;
    background: #ffffff;
    color: #365269;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 58, 92, 0.06);
}

#wd-dashboard .wd-payment-pocket-month-tab:hover,
#wd-dashboard .wd-payment-pocket-month-tab:focus-visible {
    border-color: #0f4c75;
    color: #003a5c;
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 76, 117, 0.11);
}

#wd-dashboard .wd-payment-pocket-month-tab.active {
    border-color: #0f4c75;
    background: linear-gradient(135deg, #003a5c, #0f4c75);
    color: #ffffff;
    box-shadow: 0 9px 18px rgba(0, 58, 92, 0.18);
}

@media (max-width: 700px) {
    body #history-modal.modal-overlay:not(.hidden) > .modal-container.history-modal-container {
        width: calc(100vw - 12px) !important;
        height: calc(100vh - 12px) !important;
        height: calc(100dvh - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }

    body #history-modal.modal-overlay:not(.hidden) .history-table-wrapper.table-wrapper {
        min-height: 130px !important;
    }

    #wd-dashboard .wd-payment-pocket-filter-group {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        width: 100%;
    }

    #wd-dashboard .wd-payment-pocket-year-group {
        margin-left: 0;
    }

    #wd-dashboard .wd-payment-pocket-tools select,
    #wd-dashboard #wd-payment-pocket-year-filter {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #wd-dashboard .wd-payment-pocket-filter-note {
        width: 100%;
        min-width: 0;
        padding-left: 72px;
    }

    #wd-dashboard .wd-payment-pocket-month-tabs {
        padding-inline: 12px;
    }
}

@media (max-width: 460px) {
    #wd-dashboard .wd-payment-pocket-filter-group {
        grid-template-columns: 1fr;
    }

    #wd-dashboard .wd-payment-pocket-filter-note {
        padding-left: 0;
    }
}

/* 12.8.23 — Compact vs Maximize must actually change height */
body #history-modal.modal-overlay:not(.hidden) > .modal-container.history-modal-container {
    height: auto !important;
    max-height: min(82vh, 720px) !important;
}
body #history-modal.modal-overlay:not(.hidden) .history-table-wrapper.table-wrapper {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: 320px !important;
}
body #history-modal.modal-overlay.history-modal-expanded:not(.hidden) > .modal-container.history-modal-container {
    height: 92vh !important;
    max-height: 92vh !important;
}
body #history-modal.modal-overlay.history-modal-expanded:not(.hidden) > .history-modal-container > .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
body #history-modal.modal-overlay.history-modal-expanded:not(.hidden) .history-table-wrapper.table-wrapper {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 520px !important;
    max-height: none !important;
}

/* ========================================================================== */
/* 11.8.0 — Module identity palettes (colour-only override)                   */
/* WorkDesk: orange / navy / blue / ice                                      */
/* Inventory: coral / ocean / turquoise / mint                               */
/* Invoice Management: teal / navy / peach / neutral                         */
/* ========================================================================== */

:root {
    --iba-wd-orange: #fd5f00;
    --iba-wd-navy: #002049;
    --iba-wd-blue: #015692;
    --iba-wd-ice: #d9faff;

    --iba-inv-coral: #f96263;
    --iba-inv-ocean: #226484;
    --iba-inv-turquoise: #66c0b8;
    --iba-inv-mint: #cffdf9;

    --iba-im-teal: #0d7e85;
    --iba-im-navy: #14293f;
    --iba-im-peach: #feb088;
    --iba-im-neutral: #eef0f4;
}

/* -------------------------------------------------------------------------- */
/* WorkDesk                                                                   */
/* -------------------------------------------------------------------------- */

body:not(.inventory-mode) #workdesk-view,
body:not(.inventory-mode) #workdesk-view .workdesk-main,
body:not(.inventory-mode) #workdesk-view .workdesk-section {
    background-color: var(--iba-wd-ice) !important;
    color: var(--iba-wd-navy) !important;
}

body:not(.inventory-mode) #workdesk-view .workdesk-sidebar {
    background: linear-gradient(180deg, var(--iba-wd-navy) 0%, var(--iba-wd-blue) 100%) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
    box-shadow: 12px 0 30px rgba(0, 32, 73, 0.18) !important;
}

body:not(.inventory-mode) #workdesk-view .workdesk-sidebar :is(.wd-user-profile, .wd-user-name, .wd-user-position, .workdesk-footer-nav, .version-display),
body:not(.inventory-mode) #workdesk-view .workdesk-sidebar i {
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view .wd-user-avatar {
    background: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-ice) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
body:not(.inventory-mode) #workdesk-view .wd-back-button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a:hover,
body:not(.inventory-mode) #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a:focus-visible,
body:not(.inventory-mode) #workdesk-view .wd-back-button:hover {
    background-color: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-ice) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active,
body:not(.inventory-mode) #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a {
    background-color: var(--iba-wd-ice) !important;
    border-color: var(--iba-wd-orange) !important;
    color: var(--iba-wd-navy) !important;
    box-shadow: inset 5px 0 0 var(--iba-wd-orange), 0 8px 20px rgba(0, 32, 73, 0.2) !important;
}

body:not(.inventory-mode) #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active i,
body:not(.inventory-mode) #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a i {
    color: var(--iba-wd-orange) !important;
}

body:not(.inventory-mode) #workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active) {
    background: linear-gradient(135deg, var(--iba-wd-navy) 0%, var(--iba-wd-blue) 100%) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(0, 32, 73, 0.2) !important;
}

body:not(.inventory-mode) #workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active) :is(h1, h2, h3, p, span, strong, i) {
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(.wd-control-eyebrow, .wd-page-eyebrow) {
    background-color: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(.wd-active-dashboard-cards, .wd-active-dashboard-list, .wd-active-dashboard-toolbar, .wd-premium-searchbar, .wd-records-controls, .wd-mini-metrics, .settings-card, .dashboard-card, .wd-dashboard-card, .wd-task-card, .task-card, .report-controls, .table-wrapper, .calendar-container) {
    background-color: #ffffff !important;
    border-color: rgba(1, 86, 146, 0.28) !important;
    color: var(--iba-wd-navy) !important;
    box-shadow: 0 12px 26px rgba(0, 32, 73, 0.09) !important;
}

body:not(.inventory-mode) #workdesk-view :is(h1, h2, h3, h4, h5, .section-title, .card-title, .wd-section-title) {
    color: var(--iba-wd-navy) !important;
}

body:not(.inventory-mode) #workdesk-view :is(.wd-dashboard-card, .wd-task-card, .task-card, .summary-card, .metric-card):hover,
body:not(.inventory-mode) #workdesk-view :is(.wd-dashboard-card, .wd-task-card, .task-card, .summary-card, .metric-card).active,
body:not(.inventory-mode) #workdesk-view :is(.wd-dashboard-card, .wd-task-card, .task-card, .summary-card, .metric-card).selected {
    border-color: var(--iba-wd-orange) !important;
    box-shadow: 0 14px 30px rgba(253, 95, 0, 0.18) !important;
}

body:not(.inventory-mode) #workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn) {
    background-color: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn):hover,
body:not(.inventory-mode) #workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn):focus-visible {
    background-color: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(.notification-badge, .badge, .count-badge, .wd-status-pill, .status-badge) {
    background-color: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view :is(input, select, textarea, .choices__inner) {
    background-color: #ffffff !important;
    border-color: rgba(1, 86, 146, 0.4) !important;
    color: var(--iba-wd-navy) !important;
}

body:not(.inventory-mode) #workdesk-view :is(input, select, textarea, .choices__inner):focus,
body:not(.inventory-mode) #workdesk-view .choices.is-focused .choices__inner {
    border-color: var(--iba-wd-orange) !important;
    box-shadow: 0 0 0 3px rgba(253, 95, 0, 0.16) !important;
}

body:not(.inventory-mode) #workdesk-view table thead,
body:not(.inventory-mode) #workdesk-view table thead tr,
body:not(.inventory-mode) #workdesk-view table thead th {
    background-color: var(--iba-wd-navy) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view table tbody tr:nth-child(even) td {
    background-color: rgba(217, 250, 255, 0.48) !important;
}

body:not(.inventory-mode) #workdesk-view table tbody tr:hover td {
    background-color: var(--iba-wd-ice) !important;
    color: var(--iba-wd-navy) !important;
}

body:not(.inventory-mode) #workdesk-view :is(.report-tab, .wd-premium-tabs button, .wd-active-date-tabs button, .wd-payment-pocket-month-tab) {
    background-color: #ffffff !important;
    border-color: var(--iba-wd-blue) !important;
    color: var(--iba-wd-blue) !important;
}

body:not(.inventory-mode) #workdesk-view :is(.report-tab, .wd-premium-tabs button, .wd-active-date-tabs button, .wd-payment-pocket-month-tab).active {
    background-color: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

/* WorkDesk modal and popup surfaces. */
.wd-themed-modal > .modal-container,
#wd-paid-history-modal > .modal-container,
#history-modal.history-scope-workdesk > .modal-container {
    background-color: var(--iba-wd-ice) !important;
    border-color: var(--iba-wd-blue) !important;
    color: var(--iba-wd-navy) !important;
    box-shadow: 0 28px 70px rgba(0, 32, 73, 0.34) !important;
}

.wd-themed-modal :is(.modal-header, .history-modal-header),
#wd-paid-history-modal :is(.modal-header, .history-modal-header),
#history-modal.history-scope-workdesk :is(.modal-header, .history-modal-header) {
    background: linear-gradient(135deg, var(--iba-wd-navy), var(--iba-wd-blue)) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

.wd-themed-modal :is(.modal-header, .history-modal-header) :is(h1, h2, h3, p, span, i, button),
#wd-paid-history-modal :is(.modal-header, .history-modal-header) :is(h1, h2, h3, p, span, i, button),
#history-modal.history-scope-workdesk :is(.modal-header, .history-modal-header) :is(h1, h2, h3, p, span, i, button) {
    color: #ffffff !important;
}

.wd-themed-modal :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary),
#wd-paid-history-modal :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary),
#history-modal.history-scope-workdesk :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary) {
    background-color: #ffffff !important;
    border-color: rgba(1, 86, 146, 0.3) !important;
    color: var(--iba-wd-navy) !important;
}

.wd-themed-modal table thead th,
#wd-paid-history-modal table thead th,
#history-modal.history-scope-workdesk table thead th {
    background-color: var(--iba-wd-navy) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

.wd-themed-modal :is(input, select, textarea, .choices__inner),
#wd-paid-history-modal :is(input, select, textarea, .choices__inner),
#history-modal.history-scope-workdesk :is(input, select, textarea, .choices__inner) {
    background-color: #ffffff !important;
    border-color: var(--iba-wd-blue) !important;
    color: var(--iba-wd-navy) !important;
}

.wd-themed-modal :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn),
#wd-paid-history-modal :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn),
#history-modal.history-scope-workdesk :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn) {
    background-color: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

.wd-themed-modal :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn):hover,
#wd-paid-history-modal :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn):hover,
#history-modal.history-scope-workdesk :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn):hover {
    background-color: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
}

/* Dynamically created WorkDesk forwarding popup. */
#wd-forward-task-modal .wd-forward-modal-card {
    background-color: var(--iba-wd-ice) !important;
    border-color: var(--iba-wd-blue) !important;
    color: var(--iba-wd-navy) !important;
    box-shadow: 0 28px 70px rgba(0, 32, 73, 0.34) !important;
}

#wd-forward-task-modal .wd-forward-modal-head {
    background: linear-gradient(135deg, var(--iba-wd-navy), var(--iba-wd-blue)) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

#wd-forward-task-modal .wd-forward-modal-head :is(h1, h2, h3, span, i, button) {
    color: #ffffff !important;
}

#wd-forward-task-modal :is(.wd-forward-modal-body, .wd-forward-modal-actions) {
    background-color: #ffffff !important;
    border-color: rgba(1, 86, 146, 0.3) !important;
    color: var(--iba-wd-navy) !important;
}

#wd-forward-task-modal :is(select, textarea) {
    background-color: #ffffff !important;
    border-color: var(--iba-wd-blue) !important;
    color: var(--iba-wd-navy) !important;
}

#wd-forward-task-modal :is(.wd-forward-cancel, .wd-forward-send) {
    background-color: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

#wd-forward-task-modal :is(.wd-forward-cancel, .wd-forward-send):hover {
    background-color: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
}

/* -------------------------------------------------------------------------- */
/* Inventory — deliberately blue + coral (not the Invoice teal palette)       */
/* -------------------------------------------------------------------------- */

body.inventory-mode #workdesk-view,
body.inventory-mode #workdesk-view .workdesk-main,
body.inventory-mode #workdesk-view .workdesk-section,
#inventory-view,
#inventory-view .workdesk-main,
#inventory-view .workdesk-section {
    background-color: var(--iba-inv-mint) !important;
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view .workdesk-sidebar,
#inventory-view .workdesk-sidebar {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
    box-shadow: 12px 0 30px rgba(34, 100, 132, 0.22) !important;
}

body.inventory-mode #workdesk-view .workdesk-sidebar :is(.wd-user-profile, .wd-user-name, .wd-user-position, .workdesk-footer-nav, .version-display, i),
#inventory-view .workdesk-sidebar :is(.wd-user-profile, .wd-user-name, .wd-user-position, .workdesk-footer-nav, .version-display, i) {
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view .wd-user-avatar,
#inventory-view .wd-user-avatar {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-mint) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
body.inventory-mode #workdesk-view .wd-back-button,
#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
#inventory-view .wd-back-button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a:hover,
body.inventory-mode #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a:focus-visible,
#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a:hover,
#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a:focus-visible {
    background-color: var(--iba-inv-turquoise) !important;
    border-color: var(--iba-inv-mint) !important;
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active,
body.inventory-mode #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a,
#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active,
#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a {
    background-color: #ffffff !important;
    border-color: var(--iba-inv-coral) !important;
    color: var(--iba-inv-ocean) !important;
    box-shadow: inset 5px 0 0 var(--iba-inv-coral), 0 8px 20px rgba(34, 100, 132, 0.2) !important;
}

body.inventory-mode #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active i,
body.inventory-mode #workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a i,
#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active i,
#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a i {
    color: var(--iba-inv-coral) !important;
}

body.inventory-mode #workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active),
#inventory-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(34, 100, 132, 0.22) !important;
}

body.inventory-mode #workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active) :is(h1, h2, h3, p, span, strong, i),
#inventory-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active) :is(h1, h2, h3, p, span, strong, i) {
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(.wd-control-eyebrow, .wd-page-eyebrow),
#inventory-view :is(.wd-control-eyebrow, .wd-page-eyebrow) {
    background-color: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(.wd-active-dashboard-cards, .wd-active-dashboard-list, .wd-active-dashboard-toolbar, .wd-premium-searchbar, .wd-records-controls, .wd-mini-metrics, .settings-card, .dashboard-card, .wd-dashboard-card, .wd-task-card, .task-card, .report-controls, .table-wrapper, .calendar-container, .wd-inventory-batch-card),
#inventory-view :is(.wd-active-dashboard-cards, .wd-active-dashboard-list, .wd-active-dashboard-toolbar, .wd-premium-searchbar, .wd-records-controls, .wd-mini-metrics, .settings-card, .dashboard-card, .wd-dashboard-card, .wd-task-card, .task-card, .report-controls, .table-wrapper, .calendar-container, .wd-inventory-batch-card) {
    background-color: #ffffff !important;
    border-color: rgba(34, 100, 132, 0.28) !important;
    color: var(--iba-inv-ocean) !important;
    box-shadow: 0 12px 26px rgba(34, 100, 132, 0.11) !important;
}

body.inventory-mode #workdesk-view :is(h1, h2, h3, h4, h5, .section-title, .card-title, .wd-section-title, .wd-inventory-section-heading),
#inventory-view :is(h1, h2, h3, h4, h5, .section-title, .card-title, .wd-section-title, .wd-inventory-section-heading) {
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view :is(.wd-dashboard-card, .wd-task-card, .task-card, .summary-card, .metric-card, .wd-inventory-batch-card):hover,
body.inventory-mode #workdesk-view :is(.wd-dashboard-card, .wd-task-card, .task-card, .summary-card, .metric-card, .wd-inventory-batch-card).active,
#inventory-view :is(.wd-dashboard-card, .wd-task-card, .task-card, .summary-card, .metric-card, .wd-inventory-batch-card):hover,
#inventory-view :is(.wd-dashboard-card, .wd-task-card, .task-card, .summary-card, .metric-card, .wd-inventory-batch-card).active {
    border-color: var(--iba-inv-coral) !important;
    box-shadow: 0 14px 30px rgba(249, 98, 99, 0.2) !important;
}

body.inventory-mode #workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn),
#inventory-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn) {
    background-color: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn):hover,
body.inventory-mode #workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn):focus-visible,
#inventory-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn):hover,
#inventory-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.modal-close):not(.danger-btn):focus-visible {
    background-color: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(.notification-badge, .badge, .count-badge, .wd-status-pill, .status-badge, .wd-inventory-multi-badge),
#inventory-view :is(.notification-badge, .badge, .count-badge, .wd-status-pill, .status-badge, .wd-inventory-multi-badge) {
    background-color: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(.wd-inventory-single-badge, .wd-inventory-status-pill),
#inventory-view :is(.wd-inventory-single-badge, .wd-inventory-status-pill) {
    background-color: var(--iba-inv-mint) !important;
    border-color: var(--iba-inv-turquoise) !important;
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view :is(.wd-inventory-progress-track, .progress-track),
#inventory-view :is(.wd-inventory-progress-track, .progress-track) {
    background-color: var(--iba-inv-mint) !important;
    border-color: var(--iba-inv-turquoise) !important;
}

body.inventory-mode #workdesk-view :is(.wd-inventory-progress-fill, .progress-fill, .wd-inventory-progress-track > span),
#inventory-view :is(.wd-inventory-progress-fill, .progress-fill, .wd-inventory-progress-track > span) {
    background-color: var(--iba-inv-turquoise) !important;
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view :is(.wd-inventory-action-btn, .inventory-confirm-received-btn, .confirm-received-btn),
#inventory-view :is(.wd-inventory-action-btn, .inventory-confirm-received-btn, .confirm-received-btn) {
    background-color: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view :is(input, select, textarea, .choices__inner),
#inventory-view :is(input, select, textarea, .choices__inner) {
    background-color: #ffffff !important;
    border-color: rgba(34, 100, 132, 0.42) !important;
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view :is(input, select, textarea, .choices__inner):focus,
body.inventory-mode #workdesk-view .choices.is-focused .choices__inner,
#inventory-view :is(input, select, textarea, .choices__inner):focus,
#inventory-view .choices.is-focused .choices__inner {
    border-color: var(--iba-inv-coral) !important;
    box-shadow: 0 0 0 3px rgba(102, 192, 184, 0.28) !important;
}

body.inventory-mode #workdesk-view table thead,
body.inventory-mode #workdesk-view table thead tr,
body.inventory-mode #workdesk-view table thead th,
#inventory-view table thead,
#inventory-view table thead tr,
#inventory-view table thead th {
    background-color: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-turquoise) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view table tbody tr:nth-child(even) td,
#inventory-view table tbody tr:nth-child(even) td {
    background-color: rgba(207, 253, 249, 0.55) !important;
}

body.inventory-mode #workdesk-view table tbody tr:hover td,
#inventory-view table tbody tr:hover td {
    background-color: var(--iba-inv-mint) !important;
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view :is(.report-tab, .wd-premium-tabs button, .wd-active-date-tabs button),
#inventory-view :is(.report-tab, .wd-premium-tabs button, .wd-active-date-tabs button) {
    background-color: #ffffff !important;
    border-color: var(--iba-inv-ocean) !important;
    color: var(--iba-inv-ocean) !important;
}

body.inventory-mode #workdesk-view :is(.report-tab, .wd-premium-tabs button, .wd-active-date-tabs button).active,
#inventory-view :is(.report-tab, .wd-premium-tabs button, .wd-active-date-tabs button).active {
    background-color: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

/* Inventory modal and popup surfaces, including dynamically created requests. */
.inventory-themed-modal > .modal-container,
body.inventory-mode .modal-overlay:not(.wd-themed-modal) > .modal-container,
#history-modal.history-scope-inventory > .modal-container {
    background-color: var(--iba-inv-mint) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: var(--iba-inv-ocean) !important;
    box-shadow: 0 28px 70px rgba(34, 100, 132, 0.36) !important;
}

.inventory-themed-modal :is(.modal-header, .history-modal-header),
body.inventory-mode .modal-overlay:not(.wd-themed-modal) :is(.modal-header, .history-modal-header),
#history-modal.history-scope-inventory :is(.modal-header, .history-modal-header) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

.inventory-themed-modal :is(.modal-header, .history-modal-header) :is(h1, h2, h3, p, span, i, button),
body.inventory-mode .modal-overlay:not(.wd-themed-modal) :is(.modal-header, .history-modal-header) :is(h1, h2, h3, p, span, i, button),
#history-modal.history-scope-inventory :is(.modal-header, .history-modal-header) :is(h1, h2, h3, p, span, i, button) {
    color: #ffffff !important;
}

.inventory-themed-modal :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary),
body.inventory-mode .modal-overlay:not(.wd-themed-modal) :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary),
#history-modal.history-scope-inventory :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary) {
    background-color: #ffffff !important;
    border-color: rgba(34, 100, 132, 0.3) !important;
    color: var(--iba-inv-ocean) !important;
}

.inventory-themed-modal table thead th,
body.inventory-mode .modal-overlay:not(.wd-themed-modal) table thead th,
#history-modal.history-scope-inventory table thead th {
    background-color: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-turquoise) !important;
    color: #ffffff !important;
}

.inventory-themed-modal :is(input, select, textarea, .choices__inner),
body.inventory-mode .modal-overlay:not(.wd-themed-modal) :is(input, select, textarea, .choices__inner),
#history-modal.history-scope-inventory :is(input, select, textarea, .choices__inner) {
    background-color: #ffffff !important;
    border-color: var(--iba-inv-ocean) !important;
    color: var(--iba-inv-ocean) !important;
}

.inventory-themed-modal :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn),
body.inventory-mode .modal-overlay:not(.wd-themed-modal) :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn),
#history-modal.history-scope-inventory :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn) {
    background-color: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
}

.inventory-themed-modal :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn):hover,
body.inventory-mode .modal-overlay:not(.wd-themed-modal) :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn):hover,
#history-modal.history-scope-inventory :is(.primary-btn, .secondary-btn, .action-btn, .modal-confirm-btn):hover {
    background-color: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
}

/* Dynamically created Inventory request-conversion popup. */
#inv-request-convert-modal .inventory-request-convert-modal {
    background-color: var(--iba-inv-mint) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: var(--iba-inv-ocean) !important;
    box-shadow: 0 28px 70px rgba(34, 100, 132, 0.36) !important;
}

#inv-request-convert-modal .inventory-request-convert-head {
    background-color: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

#inv-request-convert-modal .inventory-request-convert-head :is(h1, h2, h3, p, span, i, button) {
    color: #ffffff !important;
}

#inv-request-convert-modal :is(.inventory-request-convert-body, .inventory-request-convert-footer, .inventory-request-convert-route, .inventory-request-convert-lines) {
    background-color: #ffffff !important;
    border-color: rgba(34, 100, 132, 0.3) !important;
    color: var(--iba-inv-ocean) !important;
}

#inv-request-convert-modal :is(input, select, textarea) {
    background-color: #ffffff !important;
    border-color: var(--iba-inv-ocean) !important;
    color: var(--iba-inv-ocean) !important;
}

#inv-request-convert-modal :is(.primary-btn, .secondary-btn) {
    background-color: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
}

#inv-request-convert-modal :is(.primary-btn, .secondary-btn):hover {
    background-color: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
}

/* -------------------------------------------------------------------------- */
/* Invoice Management — deliberately teal + navy + peach                      */
/* -------------------------------------------------------------------------- */

#invoice-management-view,
#invoice-management-view .workdesk-main,
#invoice-management-view .workdesk-section {
    background-color: var(--iba-im-neutral) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view .workdesk-sidebar {
    background: linear-gradient(180deg, var(--iba-im-navy) 0%, var(--iba-im-teal) 100%) !important;
    border-color: var(--iba-im-peach) !important;
    color: #ffffff !important;
    box-shadow: 12px 0 30px rgba(20, 41, 63, 0.2) !important;
}

#invoice-management-view .workdesk-sidebar :is(.wd-user-profile, .wd-user-name, .wd-user-position, .workdesk-footer-nav, .version-display, i) {
    color: #ffffff !important;
}

#invoice-management-view .wd-user-avatar {
    background: var(--iba-im-peach) !important;
    border-color: #ffffff !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
#invoice-management-view .wd-back-button,
#invoice-management-view .im-nav-group-toggle {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a:hover,
#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a:focus-visible,
#invoice-management-view .im-nav-group-toggle:hover,
#invoice-management-view .im-nav-group-toggle:focus-visible {
    background-color: var(--iba-im-teal) !important;
    border-color: var(--iba-im-peach) !important;
    color: #ffffff !important;
}

#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active,
#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a,
#invoice-management-view .im-nav-group.is-open > .im-nav-group-toggle {
    background-color: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
    box-shadow: inset 5px 0 0 #ffffff, 0 8px 20px rgba(20, 41, 63, 0.2) !important;
}

#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a.active i,
#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) li.active > a i,
#invoice-management-view .im-nav-group.is-open > .im-nav-group-toggle i {
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(.im-standard-hero, .im-reporting-header, .reporting-header, .wd-page-hero, .dashboard-header) {
    background: linear-gradient(135deg, var(--iba-im-teal) 0%, var(--iba-im-navy) 100%) !important;
    border-color: var(--iba-im-peach) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(20, 41, 63, 0.2) !important;
}

#invoice-management-view :is(.im-standard-hero, .im-reporting-header, .reporting-header, .wd-page-hero, .dashboard-header) :is(h1, h2, h3, p, span, strong, i) {
    color: #ffffff !important;
}

#invoice-management-view :is(.im-standard-eyebrow, .im-found-count-chip) {
    background-color: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(.dashboard-card, .im-dashboard-card, .im-card, .im-admin-control-surface, .im-payment-empty-state, .im-payment-checkout-bar, .im-entry-main-pane, .im-entry-quick-panel, .im-entry-sidebar, .im-summary-card, .settings-card, .report-controls, .table-wrapper, .search-and-filter-group, .daily-report-section, .help-content, .im-help-tab-panel) {
    background-color: #ffffff !important;
    border-color: rgba(13, 126, 133, 0.28) !important;
    color: var(--iba-im-navy) !important;
    box-shadow: 0 12px 26px rgba(20, 41, 63, 0.09) !important;
}

#invoice-management-view :is(h1, h2, h3, h4, h5, .section-title, .card-title, .im-sidebar-title) {
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(.dashboard-card, .im-dashboard-card, .im-card, .im-summary-card):hover,
#invoice-management-view :is(.dashboard-card, .im-dashboard-card, .im-card, .im-summary-card).active,
#invoice-management-view :is(.dashboard-card, .im-dashboard-card, .im-card, .im-summary-card).selected {
    border-color: var(--iba-im-peach) !important;
    box-shadow: 0 14px 30px rgba(254, 176, 136, 0.3) !important;
}

#invoice-management-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .refresh-btn, .print-btn):not(.modal-close):not(.danger-btn) {
    background-color: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

#invoice-management-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .refresh-btn, .print-btn):not(.modal-close):not(.danger-btn):hover,
#invoice-management-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .refresh-btn, .print-btn):not(.modal-close):not(.danger-btn):focus-visible,
#invoice-management-view :is(.im-help-tab-btn, .im-quick-status-btn).active,
#invoice-management-view :is(.im-help-tab-btn, .im-quick-status-btn).is-active {
    background-color: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(.notification-badge, .badge, .count-badge, .status-badge, .im-admin-status-pill, .im-payment-status-badge) {
    background-color: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(input, select, textarea, .choices__inner) {
    background-color: #ffffff !important;
    border-color: rgba(13, 126, 133, 0.42) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(input, select, textarea, .choices__inner):focus,
#invoice-management-view .choices.is-focused .choices__inner {
    border-color: var(--iba-im-peach) !important;
    box-shadow: 0 0 0 3px rgba(254, 176, 136, 0.28) !important;
}

#invoice-management-view table thead,
#invoice-management-view table thead tr,
#invoice-management-view table thead th {
    background-color: var(--iba-im-navy) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

#invoice-management-view table tbody tr:nth-child(even) td {
    background-color: rgba(238, 240, 244, 0.75) !important;
}

#invoice-management-view table tbody tr:hover td {
    background-color: rgba(254, 176, 136, 0.26) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(.report-tab, .im-help-tab-btn, .im-quick-status-btn, .summary-note-tab) {
    background-color: #ffffff !important;
    border-color: var(--iba-im-teal) !important;
    color: var(--iba-im-teal) !important;
}

#invoice-management-view :is(.report-tab, .im-help-tab-btn, .im-quick-status-btn, .summary-note-tab).active,
#invoice-management-view :is(.report-tab, .im-help-tab-btn, .im-quick-status-btn, .summary-note-tab).is-active {
    background-color: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view :is(.im-payment-cart-total, .total-row, tfoot, .im-footer-po-summary) {
    background-color: rgba(254, 176, 136, 0.32) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

/* Every Invoice Management modal/popup, including mobile search and history. */
:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) > .modal-container {
    background-color: var(--iba-im-neutral) !important;
    border-color: var(--iba-im-teal) !important;
    color: var(--iba-im-navy) !important;
    box-shadow: 0 28px 70px rgba(20, 41, 63, 0.36) !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.modal-header, .history-modal-header) {
    background: linear-gradient(135deg, var(--iba-im-teal), var(--iba-im-navy)) !important;
    border-color: var(--iba-im-peach) !important;
    color: #ffffff !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.modal-header, .history-modal-header) :is(h1, h2, h3, p, span, i, button) {
    color: #ffffff !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary, .im-entry-quick-panel, .im-pocket-transfer-help, .im-pocket-transfer-stats, .im-payment-search-results) {
    background-color: #ffffff !important;
    border-color: rgba(13, 126, 133, 0.3) !important;
    color: var(--iba-im-navy) !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) table thead th {
    background-color: var(--iba-im-navy) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(input, select, textarea, .choices__inner) {
    background-color: #ffffff !important;
    border-color: var(--iba-im-teal) !important;
    color: var(--iba-im-navy) !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.primary-btn, .secondary-btn, .action-btn, .download-btn, .modal-confirm-btn, .im-quick-status-btn) {
    background-color: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.primary-btn, .secondary-btn, .action-btn, .download-btn, .modal-confirm-btn, .im-quick-status-btn):hover,
#im-invoice-entry-modal .im-quick-status-btn.is-active {
    background-color: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

#im-invoice-entry-modal :is(.im-entry-modal-footer, .im-footer-po-summary),
#im-add-payment-modal :is(.im-payment-cart-total, .im-payment-search-summary),
#im-pocket-transfer-modal :is(.im-pocket-transfer-stats, .im-pocket-transfer-status),
#im-mark-paid-modal :is(.im-pocket-transfer-stats, .im-pocket-transfer-status) {
    background-color: rgba(254, 176, 136, 0.32) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

/* Dynamically created attention chooser used by Invoice Entry and Batch Entry. */
#dynamic-candidate-picker > div {
    background-color: var(--iba-im-neutral) !important;
    border-color: var(--iba-im-teal) !important;
    color: var(--iba-im-navy) !important;
    box-shadow: 0 28px 70px rgba(20, 41, 63, 0.36) !important;
}

#dynamic-candidate-picker > div > div:first-child {
    background: linear-gradient(135deg, var(--iba-im-teal), var(--iba-im-navy)) !important;
    border-color: var(--iba-im-peach) !important;
    color: #ffffff !important;
}

#dynamic-candidate-picker > div > div:first-child :is(h1, h2, h3, span, i, button) {
    color: #ffffff !important;
}

#dynamic-candidate-picker > div > div:nth-child(2) {
    background-color: #ffffff !important;
    border-color: rgba(13, 126, 133, 0.3) !important;
    color: var(--iba-im-navy) !important;
}

#dynamic-candidate-picker > div > div:nth-child(2) p {
    color: var(--iba-im-navy) !important;
}

#dynamic-candidate-picker > div > div:nth-child(2) button {
    background-color: var(--iba-im-peach) !important;
    border-color: var(--iba-im-teal) !important;
}

#dynamic-candidate-picker > div > div:last-child button {
    background-color: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile: preserve each module identity across compact bars and menus.        */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    body:not(.inventory-mode) #workdesk-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header) {
        background-color: var(--iba-wd-navy) !important;
        border-color: var(--iba-wd-orange) !important;
        color: #ffffff !important;
    }

    body:not(.inventory-mode) #workdesk-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header) :is(a, button, i, span) {
        color: #ffffff !important;
    }

    body:not(.inventory-mode) #workdesk-view :is(.mobile-bottom-nav, .mobile-nav) :is(a, button).active {
        background-color: var(--iba-wd-orange) !important;
        border-color: var(--iba-wd-orange) !important;
        color: #ffffff !important;
    }

    body.inventory-mode #workdesk-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header),
    #inventory-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header) {
        background-color: var(--iba-inv-ocean) !important;
        border-color: var(--iba-inv-coral) !important;
        color: #ffffff !important;
    }

    body.inventory-mode #workdesk-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header) :is(a, button, i, span),
    #inventory-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header) :is(a, button, i, span) {
        color: #ffffff !important;
    }

    body.inventory-mode #workdesk-view :is(.mobile-bottom-nav, .mobile-nav) :is(a, button).active,
    #inventory-view :is(.mobile-bottom-nav, .mobile-nav) :is(a, button).active {
        background-color: var(--iba-inv-coral) !important;
        border-color: var(--iba-inv-coral) !important;
        color: #ffffff !important;
    }

    #invoice-management-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header, .im-mobile-header) {
        background-color: var(--iba-im-navy) !important;
        border-color: var(--iba-im-peach) !important;
        color: #ffffff !important;
    }

    #invoice-management-view :is(.mobile-header, .mobile-topbar, .mobile-bottom-nav, .mobile-nav, .workdesk-mobile-header, .im-mobile-header) :is(a, button, i, span) {
        color: #ffffff !important;
    }

    #invoice-management-view :is(.mobile-bottom-nav, .mobile-nav) :is(a, button).active {
        background-color: var(--iba-im-peach) !important;
        border-color: var(--iba-im-peach) !important;
        color: var(--iba-im-navy) !important;
    }

    .wd-themed-modal > .modal-container {
        border-color: var(--iba-wd-orange) !important;
    }

    .inventory-themed-modal > .modal-container,
    body.inventory-mode .modal-overlay:not(.wd-themed-modal) > .modal-container {
        border-color: var(--iba-inv-coral) !important;
    }

    :is(
        #im-invoice-entry-modal,
        #im-batch-search-modal,
        #im-attention-picker-modal,
        #im-add-payment-modal,
        #im-pocket-transfer-modal,
        #im-mark-paid-modal,
        #im-manual-po-modal,
        #im-finance-report-modal,
        #im-mobile-search-modal,
        #im-invoice-print-modal,
        #history-modal.history-scope-invoice
    ) > .modal-container {
        border-color: var(--iba-im-peach) !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 11.8.0 final cascade guard                                                 */
/* Older releases contain highly specific module colours. These scoped       */
/* variables and repeated-root selectors ensure no legacy red/green palette   */
/* can outrank the approved 11.8.0 identity.                                  */
/* -------------------------------------------------------------------------- */

body:not(.inventory-mode) #workdesk-view {
    --wd-module-blue-a: var(--iba-wd-navy) !important;
    --wd-module-blue-b: var(--iba-wd-navy) !important;
    --wd-module-blue-c: var(--iba-wd-blue) !important;
    --wd-module-blue-d: var(--iba-wd-blue) !important;
    --wd-module-accent: var(--iba-wd-orange) !important;
    --wd-module-accent-strong: var(--iba-wd-orange) !important;
    --wd-module-accent-soft: var(--iba-wd-ice) !important;
    --wd-module-text-dark: var(--iba-wd-navy) !important;
    --wd-module-text-light: #ffffff !important;
    --wd-menu-dark: var(--iba-wd-navy) !important;
    --wd-menu-dark-2: var(--iba-wd-blue) !important;
    --wd-menu-accent: var(--iba-wd-orange) !important;
    --wd-menu-accent-strong: var(--iba-wd-orange) !important;
    --wd-menu-soft: var(--iba-wd-ice) !important;
    --wd-menu-soft-2: #ffffff !important;
    --primary-blue: var(--iba-wd-blue) !important;
    --iba-premium-navy: var(--iba-wd-navy) !important;
    --iba-premium-navy-2: var(--iba-wd-blue) !important;
    --iba-premium-cyan: var(--iba-wd-ice) !important;
    --iba-premium-gold: var(--iba-wd-orange) !important;
    --iba-premium-gold-soft: var(--iba-wd-ice) !important;
    --iba-premium-soft: var(--iba-wd-ice) !important;
    --iba-premium-text: var(--iba-wd-navy) !important;
}

body.inventory-mode #workdesk-view,
#inventory-view {
    --inv-module-accent: var(--iba-inv-coral) !important;
    --inv-module-accent-strong: var(--iba-inv-coral) !important;
    --inv-module-accent-deep: var(--iba-inv-ocean) !important;
    --inv-module-accent-mid: var(--iba-inv-turquoise) !important;
    --inv-module-accent-soft: var(--iba-inv-mint) !important;
    --inv-module-violet-a: var(--iba-inv-ocean) !important;
    --inv-module-violet-b: var(--iba-inv-ocean) !important;
    --inv-module-violet-c: var(--iba-inv-turquoise) !important;
    --inv-module-violet-d: var(--iba-inv-coral) !important;
    --inv-module-text-dark: var(--iba-inv-ocean) !important;
    --inv-module-text-light: #ffffff !important;
    --inv-theme-red: var(--iba-inv-coral) !important;
    --inv-theme-red-deep: var(--iba-inv-ocean) !important;
    --inv-theme-red-mid: var(--iba-inv-turquoise) !important;
    --inv-theme-red-soft: var(--iba-inv-mint) !important;
    --inv-maroon: var(--iba-inv-ocean) !important;
    --inv-maroon-deep: var(--iba-inv-ocean) !important;
    --inv-maroon-mid: var(--iba-inv-turquoise) !important;
    --inv-maroon-soft: var(--iba-inv-mint) !important;
    --inv-maroon-border: var(--iba-inv-coral) !important;
    --primary-blue: var(--iba-inv-ocean) !important;
}

#invoice-management-view {
    --im-theme-green: var(--iba-im-teal) !important;
    --im-theme-green-deep: var(--iba-im-navy) !important;
    --im-theme-green-mid: var(--iba-im-teal) !important;
    --im-theme-green-soft: var(--iba-im-neutral) !important;
    --im-module-accent: var(--iba-im-peach) !important;
    --im-module-accent-dark: var(--iba-im-navy) !important;
    --im-module-accent-mid: var(--iba-im-teal) !important;
    --im-module-accent-soft: var(--iba-im-neutral) !important;
    --im-module-accent-line: var(--iba-im-peach) !important;
    --im-879-green: var(--iba-im-teal) !important;
    --im-879-green-dark: var(--iba-im-navy) !important;
    --im-879-green-mid: var(--iba-im-teal) !important;
    --im-879-green-light: var(--iba-im-neutral) !important;
    --im-879-green-border: var(--iba-im-peach) !important;
    --im-880-green: var(--iba-im-teal) !important;
    --im-880-green-dark: var(--iba-im-navy) !important;
    --im-880-green-deep: var(--iba-im-navy) !important;
    --im-880-green-mid: var(--iba-im-teal) !important;
    --im-880-green-soft: var(--iba-im-neutral) !important;
    --im-880-line: var(--iba-im-peach) !important;
    --im-880-text: var(--iba-im-navy) !important;
    --im-881-green: var(--iba-im-teal) !important;
    --im-881-green-dark: var(--iba-im-navy) !important;
    --im-881-green-deep: var(--iba-im-navy) !important;
    --im-881-green-mid: var(--iba-im-teal) !important;
    --im-881-green-soft: var(--iba-im-neutral) !important;
    --im-881-green-line: var(--iba-im-peach) !important;
    --im-881-green-line-soft: var(--iba-im-neutral) !important;
    --primary-blue: var(--iba-im-teal) !important;
    --iba-base-blue: var(--iba-im-teal) !important;
    --iba-base-blue-dark: var(--iba-im-navy) !important;
    --iba-base-blue-light: var(--iba-im-teal) !important;
    --iba-secondary-teal: var(--iba-im-teal) !important;
    --iba-hero-blue-a: var(--iba-im-teal) !important;
    --iba-hero-blue-b: var(--iba-im-navy) !important;
    --iba-hero-gold: var(--iba-im-peach) !important;
    --iba-hero-gold-soft: var(--iba-im-neutral) !important;
}

body:not(.inventory-mode) #workdesk-view,
body:not(.inventory-mode) #workdesk-view *,
body.inventory-mode #workdesk-view,
body.inventory-mode #workdesk-view *,
#inventory-view,
#inventory-view *,
#invoice-management-view,
#invoice-management-view * {
    -webkit-text-fill-color: currentColor !important;
}

.wd-themed-modal,
.wd-themed-modal *,
#wd-paid-history-modal,
#wd-paid-history-modal *,
.inventory-themed-modal,
.inventory-themed-modal *,
#inv-request-convert-modal,
#inv-request-convert-modal *,
#wd-forward-task-modal,
#wd-forward-task-modal *,
#dynamic-candidate-picker,
#dynamic-candidate-picker *,
:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal
),
:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal
) * {
    -webkit-text-fill-color: currentColor !important;
}

/* WorkDesk high-specificity colour enforcement. */
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view .workdesk-sidebar {
    background: linear-gradient(180deg, var(--iba-wd-navy), var(--iba-wd-blue)) !important;
    border-color: var(--iba-wd-orange) !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active) {
    background: linear-gradient(135deg, var(--iba-wd-navy), var(--iba-wd-blue)) !important;
    border-color: var(--iba-wd-orange) !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.danger-btn):not(.delete-btn) {
    background: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.danger-btn):not(.delete-btn):is(:hover, :focus-visible, .active, .is-active) {
    background: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view table thead :is(tr, th),
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view table thead {
    background: var(--iba-wd-navy) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

/* Inventory high-specificity colour enforcement. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view .workdesk-sidebar,
#inventory-view#inventory-view#inventory-view#inventory-view .workdesk-sidebar {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-coral) !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active),
#inventory-view#inventory-view#inventory-view#inventory-view :is(.wd-control-center-hero, .wd-page-hero, .wd-page-hero-material, .wd-page-hero-records, .wd-page-hero-active) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-coral) !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.danger-btn):not(.delete-btn),
#inventory-view#inventory-view#inventory-view#inventory-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.danger-btn):not(.delete-btn) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.danger-btn):not(.delete-btn):is(:hover, :focus-visible, .active, .is-active),
#inventory-view#inventory-view#inventory-view#inventory-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn):not(.danger-btn):not(.delete-btn):is(:hover, :focus-visible, .active, .is-active),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.wd-inventory-action-btn, .inventory-confirm-received-btn, .confirm-received-btn),
#inventory-view#inventory-view#inventory-view#inventory-view :is(.wd-inventory-action-btn, .inventory-confirm-received-btn, .confirm-received-btn) {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view table thead :is(tr, th),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view table thead,
#inventory-view#inventory-view#inventory-view#inventory-view table thead :is(tr, th),
#inventory-view#inventory-view#inventory-view#inventory-view table thead {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-turquoise) !important;
    color: #ffffff !important;
}

/* Invoice Management high-specificity colour enforcement. */
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view .workdesk-sidebar {
    background: linear-gradient(180deg, var(--iba-im-navy), var(--iba-im-teal)) !important;
    border-color: var(--iba-im-peach) !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.im-standard-hero, .im-reporting-header, .reporting-header, .wd-page-hero, .dashboard-header) {
    background: linear-gradient(135deg, var(--iba-im-teal), var(--iba-im-navy)) !important;
    border-color: var(--iba-im-peach) !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .refresh-btn, .print-btn):not(.danger-btn):not(.delete-btn) {
    background: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, .primary-btn, .secondary-btn, .action-btn, .download-btn, .refresh-btn, .print-btn):not(.danger-btn):not(.delete-btn):is(:hover, :focus-visible, .active, .is-active) {
    background: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view .im-nav-group-toggle {
    background: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view .im-nav-group.is-open > .im-nav-group-toggle {
    background: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view table thead :is(tr, th),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view table thead {
    background: var(--iba-im-navy) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

/* Modal high-specificity enforcement for legacy per-ID rules. */
:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) :is(.modal-header, .history-modal-header) {
    background: linear-gradient(135deg, var(--iba-wd-navy), var(--iba-wd-blue)) !important;
    border-color: var(--iba-wd-orange) !important;
    color: #ffffff !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) > .modal-container {
    background: var(--iba-wd-ice) !important;
    border-color: var(--iba-wd-blue) !important;
    color: var(--iba-wd-navy) !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary) {
    background: #ffffff !important;
    border-color: rgba(1, 86, 146, 0.3) !important;
    color: var(--iba-wd-navy) !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) :is(input, select, textarea, .choices__inner) {
    background: #ffffff !important;
    border-color: var(--iba-wd-blue) !important;
    color: var(--iba-wd-navy) !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) :is(.primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn, .modal-footer .modal-close-btn):not(.danger-btn):not(.delete-btn) {
    background: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) table thead :is(tr, th) {
    background: var(--iba-wd-navy) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) :is(.modal-header, .history-modal-header) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
}

:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) > .modal-container {
    background: var(--iba-inv-mint) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: var(--iba-inv-ocean) !important;
}

:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary) {
    background: #ffffff !important;
    border-color: rgba(34, 100, 132, 0.3) !important;
    color: var(--iba-inv-ocean) !important;
}

:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) :is(input, select, textarea, .choices__inner) {
    background: #ffffff !important;
    border-color: var(--iba-inv-ocean) !important;
    color: var(--iba-inv-ocean) !important;
}

:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) :is(.primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn, button[id*="save"], button[id*="approve"], button[id*="print"], button[id*="excel"]):not(.danger-btn):not(.delete-btn) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
}

:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) table thead :is(tr, th) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-turquoise) !important;
    color: #ffffff !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.modal-header, .history-modal-header) {
    background: linear-gradient(135deg, var(--iba-im-teal), var(--iba-im-navy)) !important;
    border-color: var(--iba-im-peach) !important;
    color: #ffffff !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) > .modal-container {
    background: var(--iba-im-neutral) !important;
    border-color: var(--iba-im-teal) !important;
    color: var(--iba-im-navy) !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.modal-content, .modal-footer, .table-wrapper, .history-modal-summary, .im-entry-quick-panel, .im-pocket-transfer-help, .im-pocket-transfer-stats, .im-payment-search-results) {
    background: #ffffff !important;
    border-color: rgba(13, 126, 133, 0.3) !important;
    color: var(--iba-im-navy) !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(input, select, textarea, .choices__inner) {
    background: #ffffff !important;
    border-color: var(--iba-im-teal) !important;
    color: var(--iba-im-navy) !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.primary-btn, .secondary-btn, .action-btn, .download-btn, .print-btn, .im-quick-status-btn):not(.danger-btn):not(.delete-btn) {
    background: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) table thead :is(tr, th) {
    background: var(--iba-im-navy) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
}

/* Actual compact/mobile surfaces used by the three modules. */
@media (max-width: 900px) {
    body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view :is(#active-task-mobile-header, .dayview-mobile-header-new, .mobile-app-header, .mobile-card-header.active) {
        background: linear-gradient(135deg, var(--iba-wd-navy), var(--iba-wd-blue)) !important;
        border-color: var(--iba-wd-orange) !important;
        color: #ffffff !important;
    }

    body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view :is(.mobile-task-card, .mobile-card-body, .mobile-module-switcher-select) {
        background-color: #ffffff !important;
        border-color: var(--iba-wd-blue) !important;
        color: var(--iba-wd-navy) !important;
    }

    body.inventory-mode #workdesk-view#workdesk-view#workdesk-view :is(#active-task-mobile-header, .dayview-mobile-header-new, .mobile-app-header, .mobile-card-header.active),
    #inventory-view#inventory-view#inventory-view :is(#active-task-mobile-header, .dayview-mobile-header-new, .mobile-app-header, .mobile-card-header.active) {
        background: var(--iba-inv-ocean) !important;
        border-color: var(--iba-inv-coral) !important;
        color: #ffffff !important;
    }

    body.inventory-mode #workdesk-view#workdesk-view#workdesk-view :is(.mobile-task-card, .mobile-card-body, .mobile-module-switcher-select),
    #inventory-view#inventory-view#inventory-view :is(.mobile-task-card, .mobile-card-body, .mobile-module-switcher-select) {
        background-color: #ffffff !important;
        border-color: var(--iba-inv-turquoise) !important;
        color: var(--iba-inv-ocean) !important;
    }

    #invoice-management-view#invoice-management-view#invoice-management-view :is(#active-task-mobile-header, .dayview-mobile-header-new, .mobile-app-header, .im-mobile-header, .mobile-card-header.active) {
        background: linear-gradient(135deg, var(--iba-im-teal), var(--iba-im-navy)) !important;
        border-color: var(--iba-im-peach) !important;
        color: #ffffff !important;
    }

    #invoice-management-view#invoice-management-view#invoice-management-view :is(.mobile-task-card, .mobile-card-body, .mobile-module-switcher-select) {
        background-color: #ffffff !important;
        border-color: var(--iba-im-teal) !important;
        color: var(--iba-im-navy) !important;
    }
}

/* ========================================================================== */
/* 11.8.1 — System-wide adaptive contrast correction                          */
/* Dark surface = light content. Light/highlight surface = dark content.      */
/* Colour-only: no layout, workflow, data, permission, or Firebase changes.   */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Shared interactive-content inheritance                                    */
/* Prevent old fixed icon/span colours from blending into a changed button.   */
/* -------------------------------------------------------------------------- */

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(button, a.action-btn, [role="button"]),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, a.action-btn, [role="button"]) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]) :is(i, span, strong, em, small, b),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]) :is(i, span, strong, em, small, b),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(button, a.action-btn, [role="button"]) :is(i, span, strong, em, small, b),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, a.action-btn, [role="button"]) :is(i, span, strong, em, small, b) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]) :is(i, span)::before,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]) :is(i, span)::before,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(button, a.action-btn, [role="button"]) :is(i, span)::before,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, a.action-btn, [role="button"]) :is(i, span)::before {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]) :is(svg, svg path, svg use),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]) :is(svg, svg path, svg use),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(button, a.action-btn, [role="button"]) :is(svg, svg path, svg use),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, a.action-btn, [role="button"]) :is(svg, svg path, svg use) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* WorkDesk light/highlight states use dark navy content. */
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]):is(:hover, :focus-visible, .active, .selected, .is-active, [aria-selected="true"], [aria-pressed="true"]) {
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Inventory light/highlight states use the dark ocean family. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]):is(:hover, :focus-visible, .active, .selected, .is-active, [aria-selected="true"], [aria-pressed="true"]),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(button, a.action-btn, [role="button"]):is(:hover, :focus-visible, .active, .selected, .is-active, [aria-selected="true"], [aria-pressed="true"]) {
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Invoice light/highlight states use Invoice navy content. */
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, a.action-btn, [role="button"]):is(:hover, :focus-visible, .active, .selected, .is-active, [aria-selected="true"], [aria-pressed="true"]) {
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Disabled controls keep their readable foreground. */
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]):disabled,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(button, a.action-btn, [role="button"]):disabled,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(button, a.action-btn, [role="button"]):disabled,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(button, a.action-btn, [role="button"]):disabled {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 0.68 !important;
}

/* -------------------------------------------------------------------------- */
/* WorkDesk contrast                                                          */
/* -------------------------------------------------------------------------- */

/* Sidebar navigation follows the same dark/light foreground rule. */
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view .wd-back-button {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a :is(i, span),
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view .wd-back-button :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) :is(a.active, li.active > a) {
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) .notification-badge {
    background: var(--iba-wd-orange) !important;
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Dashboard cards: blue is dark; orange is the light selected/highlight. */
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card {
    background: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card :is(.wd-status-meta, .wd-status-meta strong, .wd-status-meta em, .wd-status-meta small, .wd-status-arrow, .wd-status-arrow i) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card .wd-status-meta small {
    color: var(--iba-wd-ice) !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card .wd-status-icon,
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card .wd-status-icon i,
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card .wd-status-icon i::before {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card:is(:hover, :focus-visible, .active, .selected, .is-active, .wd-search-category-match) {
    background: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-dashboard .wd-active-status-card:is(:hover, :focus-visible, .active, .selected, .is-active, .wd-search-category-match) :is(.wd-status-meta, .wd-status-meta strong, .wd-status-meta em, .wd-status-meta small, .wd-status-arrow, .wd-status-arrow i) {
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* History/restore arrows and all compact round actions inherit their button. */
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.history-btn, .wd-action-history, .wd-history-icon-only, .wd-row-action) {
    background: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.history-btn, .wd-action-history, .wd-history-icon-only, .wd-row-action) :is(i, span),
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.history-btn, .wd-action-history, .wd-history-icon-only, .wd-row-action) :is(i, span)::before {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.history-btn, .wd-action-history, .wd-history-icon-only, .wd-row-action):is(:hover, :focus-visible, .active, .selected) {
    background: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: var(--iba-wd-navy) !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-payment-pocket-board-head) :is(h1, h2, h3, h4, p, span, strong, small, i),
body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view table thead :is(th, span, strong, i) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

/* -------------------------------------------------------------------------- */
/* Inventory contrast                                                         */
/* -------------------------------------------------------------------------- */

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view .wd-back-button,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view .wd-back-button {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a :is(i, span),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view .wd-back-button :is(i, span),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a :is(i, span),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view .wd-back-button :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) a:hover,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view .wd-back-button:hover,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) a:hover,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view .wd-back-button:hover,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) :is(a.active, li.active > a),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) :is(a.active, li.active > a) {
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.workdesk-navigation, .workdesk-footer-nav) .notification-badge,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(.workdesk-navigation, .workdesk-footer-nav) .notification-badge {
    background: var(--iba-inv-coral) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Material family strip removes the legacy maroon family completely. */
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock #ms-category-tabs,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock .ms-family-strip,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock #ms-category-tabs,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock .ms-family-strip {
    background: #ffffff !important;
    border-color: var(--iba-inv-turquoise) !important;
    box-shadow: 0 10px 24px rgba(34, 100, 132, 0.10) !important;
    scrollbar-color: var(--iba-inv-turquoise) transparent !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock #ms-category-tabs .ms-family-chip,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock .ms-family-strip .ms-family-chip,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock #ms-category-tabs .ms-family-chip,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock .ms-family-strip .ms-family-chip {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock #ms-category-tabs .ms-family-chip .ms-family-name,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock .ms-family-strip .ms-family-chip .ms-family-name,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock #ms-category-tabs .ms-family-chip .ms-family-name,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock .ms-family-strip .ms-family-chip .ms-family-name {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock #ms-category-tabs .ms-family-chip .ms-family-code,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock .ms-family-strip .ms-family-chip .ms-family-code,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock #ms-category-tabs .ms-family-chip .ms-family-code,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock .ms-family-strip .ms-family-chip .ms-family-code {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock #ms-category-tabs .ms-family-chip:is(:hover, :focus-visible, .active),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock .ms-family-strip .ms-family-chip:is(:hover, :focus-visible, .active),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock #ms-category-tabs .ms-family-chip:is(:hover, :focus-visible, .active),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock .ms-family-strip .ms-family-chip:is(:hover, :focus-visible, .active) {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 10px 22px rgba(249, 98, 99, 0.22) !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock #ms-category-tabs .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-name,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock .ms-family-strip .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-name,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock #ms-category-tabs .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-name,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock .ms-family-strip .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-name {
    color: #123043 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock #ms-category-tabs .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-code,
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view #wd-material-stock .ms-family-strip .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-code,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock #ms-category-tabs .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-code,
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view #wd-material-stock .ms-family-strip .ms-family-chip:is(:hover, :focus-visible, .active) .ms-family-code {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.wd-control-center-hero, .wd-page-hero, .wd-payment-pocket-board-head) :is(h1, h2, h3, h4, p, span, strong, small, i),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view :is(.wd-control-center-hero, .wd-page-hero, .wd-payment-pocket-board-head) :is(h1, h2, h3, h4, p, span, strong, small, i),
body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view#workdesk-view table thead :is(th, span, strong, i),
#inventory-view#inventory-view#inventory-view#inventory-view#inventory-view table thead :is(th, span, strong, i) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

/* -------------------------------------------------------------------------- */
/* Invoice Management contrast                                                */
/* -------------------------------------------------------------------------- */

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.wd-back-button, .im-nav-group-toggle) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) a :is(i, span),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.wd-back-button, .im-nav-group-toggle) :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) :is(a.active, li.active > a),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view .im-nav-group.is-open > .im-nav-group-toggle {
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.workdesk-navigation, .workdesk-footer-nav) .notification-badge {
    background: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Remove the accidental white card surrounding the Invoice Records actions. */
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting > .header :is(.daily-report-section.im-reporting-hero-actions, .im-reporting-hero-actions) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.im-standard-hero, #im-reporting > .header, .im-reporting-header, .dashboard-header) :is(h1, h2, h3, h4, p, span, strong, small, i),
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view table thead :is(th, span, strong, i) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Expanded Invoice Entries table: complete teal/navy/peach identity. */
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .detail-grid-row.im-invoice-entries-clean {
    background: var(--iba-im-neutral) !important;
    border-color: rgba(13, 126, 133, 0.24) !important;
    color: var(--iba-im-navy) !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-entries-title-strip,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-entries-title-strip .im-entries-title-label {
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-entries-title-strip .im-entries-title-po {
    color: var(--iba-im-teal) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table thead,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table thead tr,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table thead th {
    background: var(--iba-im-navy) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table tbody td {
    background: #ffffff !important;
    border-color: rgba(13, 126, 133, 0.18) !important;
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table tbody tr:nth-child(even) td {
    background: var(--iba-im-neutral) !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table tbody tr:hover td {
    background: rgba(254, 176, 136, 0.28) !important;
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table .status-badge {
    background: rgba(254, 176, 136, 0.36) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table tfoot,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table tfoot tr,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table tfoot td,
#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-nested-invoice-table tfoot :is(strong, span, b) {
    background: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-record-actions :is(button, a.action-btn) {
    background: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-content .im-record-actions :is(button, a.action-btn):is(:hover, :focus-visible, .active) {
    background: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-grand-total-container .summary-wrapper {
    background: linear-gradient(135deg, var(--iba-im-teal), var(--iba-im-navy)) !important;
    border-color: var(--iba-im-peach) !important;
    color: #ffffff !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-grand-total-container .summary-wrapper :is(span, strong, small, i) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view #im-reporting #im-reporting-grand-total-container .summary-wrapper .summary-stat-item:last-child span:last-child {
    color: var(--iba-im-peach) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* -------------------------------------------------------------------------- */
/* Modal/footer Close and action-button contrast                              */
/* -------------------------------------------------------------------------- */

/* WorkDesk modal buttons. */
:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) :is(.modal-footer button, .modal-content button, .primary-btn, .secondary-btn, .action-btn) {
    background: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
):is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #history-modal.history-scope-workdesk
) :is(.modal-footer button, .modal-content button, .primary-btn, .secondary-btn, .action-btn):is(:hover, :focus-visible, .active) {
    background: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: var(--iba-wd-navy) !important;
}

/* Inventory modal buttons. */
:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) :is(.modal-footer button, .modal-content button, .primary-btn, .secondary-btn, .action-btn) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
):is(
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #history-modal.history-scope-inventory
) :is(.modal-footer button, .modal-content button, .primary-btn, .secondary-btn, .action-btn):is(:hover, :focus-visible, .active) {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #123043 !important;
}

/* Invoice Management modal buttons. */
:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.modal-footer button, .modal-content button, .primary-btn, .secondary-btn, .action-btn, .download-btn) {
    background: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
):is(
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal.history-scope-invoice
) :is(.modal-footer button, .modal-content button, .primary-btn, .secondary-btn, .action-btn, .download-btn):is(:hover, :focus-visible, .active) {
    background: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

/* All modal button children inherit the resolved parent foreground. */
:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
) :is(button, a.action-btn) :is(i, span, strong, em, small, b),
:is(
    #vacation-replacement-modal,
    #calendar-task-modal,
    #modify-task-modal,
    #ceo-approval-modal,
    #standard-job-modal,
    #process-report-modal,
    #wd-paid-history-modal,
    #ms-report-modal,
    #ms-requestlist-modal,
    #ms-new-material-modal,
    #ms-photo-browser-modal,
    #ms-add-stock-modal,
    #transfer-job-modal,
    #transfer-approval-modal,
    #im-invoice-entry-modal,
    #im-batch-search-modal,
    #im-attention-picker-modal,
    #im-add-payment-modal,
    #im-pocket-transfer-modal,
    #im-mark-paid-modal,
    #im-manual-po-modal,
    #im-finance-report-modal,
    #im-mobile-search-modal,
    #im-invoice-print-modal,
    #history-modal
) :is(button, a.action-btn) :is(i, span)::before {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Header X buttons remain light on their dark module header at every state. */
:is(.wd-themed-modal, .inventory-themed-modal, #im-invoice-entry-modal, #im-batch-search-modal, #im-attention-picker-modal, #im-add-payment-modal, #im-pocket-transfer-modal, #im-mark-paid-modal, #im-manual-po-modal, #im-finance-report-modal, #im-mobile-search-modal, #history-modal) .modal-header .modal-close-btn {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

:is(.wd-themed-modal, .inventory-themed-modal, #im-invoice-entry-modal, #im-batch-search-modal, #im-attention-picker-modal, #im-add-payment-modal, #im-pocket-transfer-modal, #im-mark-paid-modal, #im-manual-po-modal, #im-finance-report-modal, #im-mobile-search-modal, #history-modal) .modal-header .modal-close-btn:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.54) !important;
    color: #ffffff !important;
}

/* Dynamic module popups use the same foreground inheritance rule. */
#wd-forward-task-modal#wd-forward-task-modal :is(button, .wd-forward-send, .wd-forward-cancel) {
    background: var(--iba-wd-blue) !important;
    border-color: var(--iba-wd-blue) !important;
    color: #ffffff !important;
}

#wd-forward-task-modal#wd-forward-task-modal :is(button, .wd-forward-send, .wd-forward-cancel):is(:hover, :focus-visible) {
    background: var(--iba-wd-orange) !important;
    border-color: var(--iba-wd-orange) !important;
    color: var(--iba-wd-navy) !important;
}

#inv-request-convert-modal#inv-request-convert-modal :is(button, .primary-btn, .secondary-btn) {
    background: var(--iba-inv-ocean) !important;
    border-color: var(--iba-inv-ocean) !important;
    color: #ffffff !important;
}

#inv-request-convert-modal#inv-request-convert-modal :is(button, .primary-btn, .secondary-btn):is(:hover, :focus-visible) {
    background: var(--iba-inv-coral) !important;
    border-color: var(--iba-inv-coral) !important;
    color: #123043 !important;
}

#dynamic-candidate-picker#dynamic-candidate-picker button {
    background: var(--iba-im-teal) !important;
    border-color: var(--iba-im-teal) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

#dynamic-candidate-picker#dynamic-candidate-picker button:is(:hover, :focus-visible) {
    background: var(--iba-im-peach) !important;
    border-color: var(--iba-im-peach) !important;
    color: var(--iba-im-navy) !important;
}

/* Mobile controls use the same adaptive text/icon logic. */
@media (max-width: 900px) {
    body:not(.inventory-mode) #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.mobile-app-header, #active-task-mobile-header, .dayview-mobile-header-new) :is(button, i, span),
    body.inventory-mode #workdesk-view#workdesk-view#workdesk-view#workdesk-view :is(.mobile-app-header, #active-task-mobile-header, .dayview-mobile-header-new) :is(button, i, span),
    #inventory-view#inventory-view#inventory-view#inventory-view :is(.mobile-app-header, #active-task-mobile-header, .dayview-mobile-header-new) :is(button, i, span),
    #invoice-management-view#invoice-management-view#invoice-management-view#invoice-management-view :is(.mobile-app-header, #active-task-mobile-header, .dayview-mobile-header-new, .im-mobile-header) :is(button, i, span) {
        color: #ffffff !important;
        -webkit-text-fill-color: currentColor !important;
    }
}

/* 11.8.7 — Material Stock rows keep horizontal separation only.
   Remove the legacy per-cell shading/dividers that formed vertical bands. */
body.inventory-mode #workdesk-view#workdesk-view #wd-material-stock #ms-table tbody td,
#inventory-view#inventory-view #wd-material-stock #ms-table tbody td {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* 11.8.7 — Queue Date badge contrast follows the badge surface, not the card. */
body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-activetask .wd-date-tab .wd-date-tab-count {
    background: #eef8fb !important;
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-activetask .wd-date-tab.active .wd-date-tab-count {
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* 11.8.7 — Mobile bottom navigation: every unselected destination remains visible. */
@media (max-width: 900px) {
    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation,
    body.inventory-mode #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation,
    body.iba-mobile-ui #invoice-management-view#invoice-management-view #im-nav.workdesk-navigation {
        background: #ffffff !important;
        border-top-color: rgba(20, 41, 63, 0.16) !important;
    }

    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation a {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--iba-wd-navy) !important;
        -webkit-text-fill-color: currentColor !important;
        opacity: 1 !important;
    }

    body.inventory-mode #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation a {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--iba-inv-ocean) !important;
        -webkit-text-fill-color: currentColor !important;
        opacity: 1 !important;
    }

    body.iba-mobile-ui #invoice-management-view#invoice-management-view #im-nav.workdesk-navigation a {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--iba-im-navy) !important;
        -webkit-text-fill-color: currentColor !important;
        opacity: 1 !important;
    }

    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation a :is(i, span),
    body.inventory-mode #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation a :is(i, span),
    body.iba-mobile-ui #invoice-management-view#invoice-management-view #im-nav.workdesk-navigation a :is(i, span) {
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
        opacity: 1 !important;
    }

    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation a.active {
        background: var(--iba-wd-orange) !important;
        border-color: var(--iba-wd-orange) !important;
        color: var(--iba-wd-navy) !important;
    }

    body.inventory-mode #workdesk-view#workdesk-view #workdesk-nav.workdesk-navigation a.active {
        background: var(--iba-inv-coral) !important;
        border-color: var(--iba-inv-coral) !important;
        color: #123043 !important;
    }

    body.iba-mobile-ui #invoice-management-view#invoice-management-view #im-nav.workdesk-navigation a.active {
        background: var(--iba-im-peach) !important;
        border-color: var(--iba-im-peach) !important;
        color: var(--iba-im-navy) !important;
    }

    /* Active Task mobile heading is a clean title row, not a second solid bar. */
    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #active-task-mobile-header,
    body.inventory-mode #workdesk-view#workdesk-view #active-task-mobile-header,
    body.iba-mobile-ui #invoice-management-view#invoice-management-view #active-task-mobile-header {
        margin: 0 0 12px !important;
        padding: 8px 2px 9px !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #active-task-mobile-header {
        border-bottom: 2px solid var(--iba-wd-blue) !important;
        color: var(--iba-wd-navy) !important;
    }

    body.inventory-mode #workdesk-view#workdesk-view #active-task-mobile-header {
        border-bottom: 2px solid var(--iba-inv-turquoise) !important;
        color: var(--iba-inv-ocean) !important;
    }

    body.iba-mobile-ui #invoice-management-view#invoice-management-view #active-task-mobile-header {
        border-bottom: 2px solid var(--iba-im-teal) !important;
        color: var(--iba-im-navy) !important;
    }

    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #active-task-mobile-header h1,
    body.inventory-mode #workdesk-view#workdesk-view #active-task-mobile-header h1,
    body.iba-mobile-ui #invoice-management-view#invoice-management-view #active-task-mobile-header h1 {
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
        text-shadow: none !important;
    }

    body.iba-mobile-ui:not(.inventory-mode) #workdesk-view#workdesk-view #active-task-mobile-header .mobile-header-icon,
    body.inventory-mode #workdesk-view#workdesk-view #active-task-mobile-header .mobile-header-icon,
    body.iba-mobile-ui #invoice-management-view#invoice-management-view #active-task-mobile-header .mobile-header-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
    }
}

/* 11.8.7 — Payment total stays clean on the white checkout bar. */
#invoice-management-view#invoice-management-view #im-payments .im-payment-checkout-bar .im-payment-cart-total,
#invoice-management-view#invoice-management-view #im-payments .im-payment-checkout-bar .im-payment-cart-total :is(span, strong) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 11.8.7 — WorkDesk Dashboard search uses one clean outer focus ring only. */
body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-dashboard .wd-active-dashboard-search-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(1, 86, 146, 0.28) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(0, 32, 73, 0.06) !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-dashboard .wd-active-dashboard-search-wrap:focus-within {
    border-color: var(--iba-wd-blue) !important;
    box-shadow: 0 0 0 3px rgba(1, 86, 146, 0.14), 0 10px 22px rgba(0, 32, 73, 0.09) !important;
}

body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-dashboard .wd-active-dashboard-search-wrap #wd-active-dashboard-search,
body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-dashboard .wd-active-dashboard-search-wrap #wd-active-dashboard-search:focus,
body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-dashboard .wd-active-dashboard-search-wrap #wd-active-dashboard-search:active,
body:not(.inventory-mode) #workdesk-view#workdesk-view #wd-dashboard .wd-active-dashboard-search-wrap #wd-active-dashboard-search:not(:placeholder-shown) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--iba-wd-navy) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ========================================================================
   12.0.7 — WorkDesk three-stage process board
   Approved arrangement: Preliminary -> Approval -> Finance.
   Existing status cards only; no new workflow status is introduced.
   ======================================================================== */
#wd-dashboard .wd-process-section {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(15, 76, 117, 0.10) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055) !important;
    padding: 12px 14px 14px !important;
}

#wd-dashboard .wd-process-section-head {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-bottom: 13px !important;
    padding: 0 2px 9px !important;
    border-bottom: 1px solid rgba(15, 76, 117, 0.22) !important;
}

#wd-dashboard .wd-process-section-head span {
    font-size: 1rem !important;
    font-weight: 900 !important;
    color: #174a76 !important;
    gap: 8px !important;
}

#wd-dashboard .wd-process-section-head small {
    margin-left: auto !important;
    max-width: 48% !important;
    color: #64748b !important;
}

#wd-dashboard .wd-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ffffff !important;
    background: #1768a0 !important;
    font-size: 0.78rem;
    line-height: 1;
}

#wd-dashboard .wd-preliminary-section .wd-process-section-head {
    border-bottom-color: rgba(234, 88, 12, 0.35) !important;
}
#wd-dashboard .wd-preliminary-section .wd-process-section-head span,
#wd-dashboard .wd-preliminary-section .wd-process-section-head i {
    color: #d9480f !important;
}
#wd-dashboard .wd-preliminary-section .wd-process-number { background: #ef6c00 !important; }

#wd-dashboard .wd-approval-section .wd-process-section-head {
    border-bottom-color: rgba(22, 163, 74, 0.34) !important;
}
#wd-dashboard .wd-approval-section .wd-process-section-head span,
#wd-dashboard .wd-approval-section .wd-process-section-head i {
    color: #247a45 !important;
}
#wd-dashboard .wd-approval-section .wd-process-number { background: #2f8b57 !important; }

#wd-dashboard .wd-finance-section .wd-process-section-head {
    border-bottom-color: rgba(15, 118, 165, 0.34) !important;
}
#wd-dashboard .wd-finance-section .wd-process-section-head span,
#wd-dashboard .wd-finance-section .wd-process-section-head i {
    color: #1768a0 !important;
}
#wd-dashboard .wd-finance-section .wd-process-number { background: #1768a0 !important; }

#wd-dashboard .wd-process-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#wd-dashboard .wd-process-grid .wd-active-status-card {
    min-width: 0 !important;
    min-height: 88px !important;
    padding: 11px 12px !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(15, 46, 71, 0.11) !important;
    color: #ffffff !important;
    background: #075b94 !important;
}

#wd-dashboard .wd-process-grid .wd-active-status-card:hover,
#wd-dashboard .wd-process-grid .wd-active-status-card:focus-visible {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 24px rgba(15, 46, 71, 0.16) !important;
}

#wd-dashboard .wd-process-grid .wd-active-status-card :is(.wd-status-meta, .wd-status-meta strong, .wd-status-meta em, .wd-status-meta small, .wd-status-arrow, .wd-status-arrow i, .wd-status-icon, .wd-status-icon i) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Exact card colors from the approved three-group mockup. */
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="For SRV"] {
    background: #e83f5b !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="Pending"] {
    background: #f08a00 !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="On Hold"] {
    background: #ef4f2f !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="IPC Application"] {
    background: #7a4bb3 !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="IPC Processed"] {
    background: #285f9f !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="For Approval"] {
    background: #4f8e2f !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="In Process"] {
    background: #0f5f9b !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="CEO Approval"] {
    background: #7547a9 !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="For Summary"] {
    background: #17639d !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="Report"] {
    background: #3f4c98 !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="With Accounts"] {
    background: #168398 !important;
}
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="Paid"] {
    background: #2f8b57 !important;
}

#wd-dashboard .wd-process-grid .wd-active-status-card .wd-status-icon {
    background: rgba(0, 31, 61, 0.28) !important;
}

#wd-dashboard .wd-process-grid .wd-active-status-card:is(:hover, :focus-visible, .active, .selected, .is-active, .wd-search-category-match) {
    filter: brightness(1.035) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    outline: 2px solid rgba(255, 255, 255, 0.22) !important;
}

#wd-dashboard .wd-finance-grid .wd-finance-card {
    grid-column: span 2 !important;
}

#wd-dashboard .wd-finance-grid .wd-payment-paid-card {
    grid-column: span 2 !important;
}

#wd-dashboard .wd-paid-dashboard-history-panel {
    margin-top: 0 !important;
}

@media (max-width: 1180px) {
    #wd-dashboard .wd-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #wd-dashboard .wd-finance-grid .wd-finance-card,
    #wd-dashboard .wd-finance-grid .wd-payment-paid-card {
        grid-column: span 1 !important;
    }
}

@media (max-width: 780px) {
    #wd-dashboard .wd-process-section-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    #wd-dashboard .wd-process-section-head small {
        margin-left: 36px !important;
        max-width: none !important;
        text-align: left !important;
    }
    #wd-dashboard .wd-process-grid {
        grid-template-columns: 1fr !important;
    }
    #wd-dashboard .wd-finance-grid .wd-finance-card,
    #wd-dashboard .wd-finance-grid .wd-payment-paid-card {
        grid-column: span 1 !important;
    }
}

/* ========================================================================
   12.0.9 — WorkDesk approved visual arrangement refinement ONLY
   No workflow, data, Firebase, counts, click handlers, or card logic changed.
   ======================================================================== */
#wd-dashboard .wd-process-section {
    border: 1px solid rgba(15, 76, 117, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 22px rgba(15, 46, 71, 0.055) !important;
    padding: 14px 16px 17px !important;
    margin: 0 0 16px !important;
}

#wd-dashboard .wd-process-section-head {
    min-height: 34px !important;
    margin-bottom: 14px !important;
    padding: 0 2px 10px !important;
    border-bottom-width: 2px !important;
}

#wd-dashboard .wd-process-section-head span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1.02rem !important;
    letter-spacing: 0.01em !important;
}

#wd-dashboard .wd-process-section-head small {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    opacity: 0.82 !important;
}

/* Match the approved mockup: five preliminary cards per desktop row,
   leaving the sixth (For Approval) naturally on the next row. */
#wd-dashboard .wd-process-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

#wd-dashboard .wd-process-grid .wd-active-status-card {
    min-height: 104px !important;
    border-radius: 14px !important;
    padding: 13px 14px !important;
    box-shadow: 0 8px 18px rgba(15, 46, 71, 0.10) !important;
}

#wd-dashboard .wd-process-grid .wd-status-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.16) !important;
    box-shadow: none !important;
}

#wd-dashboard .wd-process-grid .wd-status-meta strong {
    font-size: 2rem !important;
    line-height: 1 !important;
}

#wd-dashboard .wd-process-grid .wd-status-meta em {
    font-size: 0.91rem !important;
    font-weight: 900 !important;
}

#wd-dashboard .wd-process-grid .wd-status-meta small {
    font-size: 0.70rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
}

/* Approved card palette — keep the same colors across all three groups. */
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="For SRV"] { background: #e83f5b !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="Pending"] { background: #f08a00 !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="On Hold"] { background: #ef4f2f !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="IPC Application"] { background: #7a4bb3 !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="IPC Processed"] { background: #285f9f !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="For Approval"] { background: #4f8e2f !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="In Process"] { background: #0f5f9b !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="CEO Approval"] { background: #7547a9 !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="For Summary"] { background: #17639d !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="Report"] { background: #3f4c98 !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="With Accounts"] { background: #168398 !important; }
#wd-dashboard .wd-process-grid .wd-active-status-card[data-dashboard-label="Paid"] { background: #2f8b57 !important; }

#wd-dashboard .wd-finance-grid .wd-finance-card,
#wd-dashboard .wd-finance-grid .wd-payment-paid-card {
    grid-column: span 2 !important;
}

@media (max-width: 1180px) {
    #wd-dashboard .wd-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #wd-dashboard .wd-finance-grid .wd-finance-card,
    #wd-dashboard .wd-finance-grid .wd-payment-paid-card {
        grid-column: span 1 !important;
    }
}

@media (max-width: 780px) {
    #wd-dashboard .wd-process-section {
        padding: 12px !important;
        border-radius: 14px !important;
    }
    #wd-dashboard .wd-process-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ========================================================================
   12.3.5 — HELP CENTER UI REFRESH
   Visual-only. Keeps all existing Help Center IDs, tabs, search handlers,
   Firebase/KB logic, admin functions and guide/FAQ rendering unchanged.
   ======================================================================== */

#invoice-management-view #im-help {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 28px 40px !important;
  box-sizing: border-box !important;
  background: #f4f7fa !important;
  color: #102a43 !important;
  border-top: 3px solid #138f95 !important;
  min-height: calc(100vh - 70px) !important;
}

#invoice-management-view #im-help > h1 {
  margin: 0 !important;
  padding: 0 0 12px !important;
  color: #073b5c !important;
  font-size: clamp(28px, 2.2vw, 38px) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  border-bottom: 2px solid #f4a261 !important;
}

#invoice-management-view #im-help > h1::after {
  content: "  Your central place for guides, FAQs and system help";
  display: block !important;
  margin-top: 7px !important;
  color: #718096 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#invoice-management-view #im-help > p {
  max-width: 1100px !important;
  margin: 15px 0 18px !important;
  color: #52606d !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Top navigation tabs */
#invoice-management-view #im-help .im-help-tabs {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

#invoice-management-view #im-help .im-help-tab-btn {
  min-height: 48px !important;
  border: 1px solid #d7e0e8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #073b5c !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  box-shadow: 0 2px 8px rgba(16,42,67,.06) !important;
  transition: none !important;
}

#invoice-management-view #im-help .im-help-tab-btn:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(16,42,67,.06) !important;
}

#invoice-management-view #im-help .im-help-tab-btn.active {
  background: #073b5c !important;
  border-color: #073b5c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(7,59,92,.16) !important;
}

/* Every tab panel uses the available width. */
#invoice-management-view #im-help .im-help-tab-panel {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#invoice-management-view #im-help .im-help-tab-panel[style*="max-width"] {
  max-width: none !important;
}

/* Ask/search workspace */
#invoice-management-view #im-help #im-help-tab-ask {
  display: block !important;
}

#invoice-management-view #im-help .search-and-filter-group {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 0 0 16px !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 18px rgba(16,42,67,.07) !important;
  box-sizing: border-box !important;
}

#invoice-management-view #im-help .search-bar-local {
  min-height: 46px !important;
  margin: 0 !important;
  border: 1px solid #b8c7d6 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
}

#invoice-management-view #im-help .search-bar-local input {
  color: #102a43 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#invoice-management-view #im-help #im-help-search-btn,
#invoice-management-view #im-help #im-help-faq-search-btn {
  min-width: 105px !important;
  border-radius: 11px !important;
  background: #138f95 !important;
  border-color: #138f95 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

#invoice-management-view #im-help #im-help-clear-btn,
#invoice-management-view #im-help #im-help-faq-clear-btn {
  min-width: 90px !important;
  border-radius: 11px !important;
  background: #073b5c !important;
  border-color: #073b5c !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

#invoice-management-view #im-help .im-help-meta {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  border-left: 4px solid #f4a261 !important;
  border-radius: 12px !important;
  color: #52606d !important;
  margin-bottom: 14px !important;
}

/* Results become a proper responsive card grid. */
#invoice-management-view #im-help .im-help-results {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#invoice-management-view #im-help .im-help-results > .im-help-card {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 14px rgba(16,42,67,.06) !important;
  color: #102a43 !important;
}

#invoice-management-view #im-help .im-help-results > .im-help-card:first-child {
  border-top: 4px solid #138f95 !important;
}

#invoice-management-view #im-help .im-help-title h3 {
  color: #073b5c !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

#invoice-management-view #im-help .im-help-snippet {
  color: #52606d !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

#invoice-management-view #im-help .im-help-badge {
  background: #eef5f7 !important;
  color: #0b6670 !important;
  border: 1px solid #cde1e4 !important;
  font-weight: 800 !important;
}

/* Guides/FAQ intro cards */
#invoice-management-view #im-help .form-container {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(16,42,67,.06) !important;
}

/* Admin remains functional but uses the same visual language. */
#invoice-management-view #im-help #im-help-admin {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(16,42,67,.06) !important;
}

#invoice-management-view #im-help .im-help-inline-actions {
  gap: 8px !important;
}

/* Back-to-module bar */
#invoice-management-view #im-help #im-help-backbar {
  padding: 0 0 12px !important;
  margin: 0 !important;
}

#invoice-management-view #im-help #im-help-back-btn {
  border-radius: 10px !important;
  background: #073b5c !important;
  color: #ffffff !important;
  border-color: #073b5c !important;
  font-weight: 800 !important;
}

/* Desktop: avoid the old narrow white Help canvas. */
@media (min-width: 1100px) {
  #invoice-management-view #im-help .im-help-results {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 850px) {
  #invoice-management-view #im-help {
    padding: 16px 14px 30px !important;
  }

  #invoice-management-view #im-help .im-help-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #invoice-management-view #im-help .search-and-filter-group {
    grid-template-columns: 1fr 1fr !important;
  }

  #invoice-management-view #im-help .search-bar-local {
    grid-column: 1 / -1 !important;
  }

  #invoice-management-view #im-help .im-help-results {
    grid-template-columns: 1fr !important;
  }

  #invoice-management-view #im-help > h1 {
    font-size: 28px !important;
  }
}


/* ========================================================================
   12.3.6 — HELP CENTER PREMIUM WORKSPACE
   UI ONLY. Existing Help Center IDs, handlers, Firebase/KB logic and admin
   functionality remain unchanged.
   ======================================================================== */

#invoice-management-view #im-help {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 64px) !important;
  box-sizing: border-box !important;
  padding: 28px 34px 44px !important;
  margin: 0 !important;
  background: #f5f7f9 !important;
  color: #17212b !important;
  border-top: 0 !important;
}

/* Remove the old "back" navigation entirely. The main sidebar already owns
   module navigation, so Help should be a destination, not a second router. */
#invoice-management-view #im-help #im-help-backbar,
#invoice-management-view #im-nav-workdesk {
  display: none !important;
}

/* ---------- Header ---------- */
#invoice-management-view #im-help > h1 {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #116045 !important;
  font-size: clamp(30px, 2.4vw, 42px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

#invoice-management-view #im-help > h1::before {
  content: "SUPPORT & KNOWLEDGE" !important;
  display: block !important;
  margin-bottom: 8px !important;
  color: #e28a25 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

#invoice-management-view #im-help > h1::after {
  content: "Find answers, guides and system knowledge in one place." !important;
  display: block !important;
  margin-top: 9px !important;
  color: #66737f !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#invoice-management-view #im-help > p {
  max-width: 900px !important;
  margin: 8px 0 22px !important;
  color: #7a8792 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* ---------- Help navigation ---------- */
#invoice-management-view #im-help .im-help-tabs {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
  padding: 5px !important;
  background: #e9eef1 !important;
  border: 1px solid #d8e0e5 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

#invoice-management-view #im-help .im-help-tab-btn {
  flex: 1 1 0 !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #52616d !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
  transition: none !important;
}

#invoice-management-view #im-help .im-help-tab-btn:hover {
  background: #ffffff !important;
  color: #116045 !important;
  box-shadow: none !important;
  transform: none !important;
}

#invoice-management-view #im-help .im-help-tab-btn.active {
  background: #116045 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 3px 10px rgba(17,96,69,.16) !important;
}

/* ---------- Ask workspace ---------- */
#invoice-management-view #im-help .search-and-filter-group {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 110px 90px !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid #d9e1e6 !important;
  border-radius: 15px !important;
  box-shadow: 0 6px 20px rgba(25,45,60,.06) !important;
}

#invoice-management-view #im-help .search-bar-local {
  min-height: 48px !important;
  margin: 0 !important;
  border: 1px solid #ccd7dd !important;
  border-radius: 11px !important;
  background: #fdfefe !important;
  box-shadow: none !important;
}

#invoice-management-view #im-help .search-bar-local input {
  color: #1d2b35 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

#invoice-management-view #im-help #im-help-search-btn,
#invoice-management-view #im-help #im-help-faq-search-btn {
  min-width: 0 !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #116045 !important;
  color: #ffffff !important;
  font-weight: 850 !important;
}

#invoice-management-view #im-help #im-help-clear-btn,
#invoice-management-view #im-help #im-help-faq-clear-btn {
  min-width: 0 !important;
  min-height: 46px !important;
  border: 1px solid #d5dee3 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #52616d !important;
  font-weight: 800 !important;
}

/* Results: spacious, executive card grid. */
#invoice-management-view #im-help .im-help-results {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#invoice-management-view #im-help .im-help-results > .im-help-card {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  background: #ffffff !important;
  border: 1px solid #dbe3e8 !important;
  border-radius: 15px !important;
  box-shadow: 0 5px 18px rgba(25,45,60,.055) !important;
  color: #26343e !important;
}

#invoice-management-view #im-help .im-help-results > .im-help-card:first-child {
  border-top: 3px solid #e28a25 !important;
}

#invoice-management-view #im-help .im-help-title h3 {
  color: #173a32 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

#invoice-management-view #im-help .im-help-snippet {
  color: #5f6d77 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#invoice-management-view #im-help .im-help-badge {
  background: #eef6f2 !important;
  color: #116045 !important;
  border: 1px solid #d4e8de !important;
  font-weight: 850 !important;
}

/* Metadata/status strip */
#invoice-management-view #im-help .im-help-meta {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 0 16px !important;
  padding: 10px 13px !important;
  background: #ffffff !important;
  border: 1px solid #dbe3e8 !important;
  border-left: 3px solid #e28a25 !important;
  border-radius: 10px !important;
  color: #65737e !important;
}

/* Guides / FAQ intro surfaces */
#invoice-management-view #im-help .form-container {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe3e8 !important;
  border-radius: 15px !important;
  box-shadow: 0 5px 18px rgba(25,45,60,.055) !important;
}

/* Admin workspace */
#invoice-management-view #im-help #im-help-admin {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe3e8 !important;
  border-radius: 15px !important;
  box-shadow: 0 5px 18px rgba(25,45,60,.055) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #invoice-management-view #im-help .im-help-results {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #invoice-management-view #im-help {
    padding: 18px 14px 28px !important;
  }

  #invoice-management-view #im-help .im-help-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #invoice-management-view #im-help .search-and-filter-group {
    grid-template-columns: 1fr 1fr !important;
  }

  #invoice-management-view #im-help .search-bar-local {
    grid-column: 1 / -1 !important;
  }

  #invoice-management-view #im-help .im-help-results {
    grid-template-columns: 1fr !important;
  }

  #invoice-management-view #im-help > h1 {
    font-size: 30px !important;
  }
}


/* ========================================================================
   12.4.3 — HELP CENTER VISUAL OVERHAUL
   Existing Help IDs and app-help.js are preserved. No module logic changed.
   ======================================================================== */
#im-help {
  --help-navy:#062f57; --help-blue:#155b92; --help-green:#116045;
  --help-orange:#e28a25; --help-bg:#f4f7f8; --help-text:#20313d;
  --help-muted:#6b7a84; --help-border:#d8e1e6;
  width:100%!important; max-width:none!important; min-height:calc(100vh - 64px)!important;
  box-sizing:border-box!important; margin:0!important; padding:30px 36px 42px!important;
  background:var(--help-bg)!important; color:var(--help-text)!important;
}
#im-help * { box-sizing:border-box!important; }
#im-help .hidden { display:none!important; }
#im-help #im-help-backbar { display:none!important; }

#im-help .im-help-header {
  display:flex!important; align-items:flex-start!important; justify-content:space-between!important;
  gap:24px!important; padding:0 0 20px!important; border-bottom:1px solid var(--help-border)!important;
}
#im-help .im-help-eyebrow { margin-bottom:8px!important; color:var(--help-green)!important; font-size:10px!important; font-weight:950!important; letter-spacing:.18em!important; }
#im-help #im-help-title { margin:0!important; color:var(--help-navy)!important; font-size:clamp(34px,3vw,46px)!important; line-height:1!important; font-weight:950!important; letter-spacing:-.045em!important; }
#im-help .im-help-header-copy>p { margin:9px 0 0!important; max-width:760px!important; color:var(--help-muted)!important; font-size:13px!important; line-height:1.5!important; font-weight:600!important; }
#im-help #im-help-admin-tab-btn { min-height:42px!important; padding:10px 15px!important; border:0!important; border-radius:11px!important; background:var(--help-green)!important; color:#fff!important; font-weight:900!important; }

#im-help .im-help-search-hero {
  margin-top:18px!important; padding:20px!important; background:#fff!important;
  border:1px solid var(--help-border)!important; border-radius:17px!important;
  box-shadow:0 8px 24px rgba(20,42,58,.06)!important;
}
#im-help .im-help-search-hero-copy { display:flex!important; align-items:center!important; gap:14px!important; margin-bottom:15px!important; }
#im-help .im-help-search-icon {
  flex:0 0 48px!important; width:48px!important; height:48px!important; display:grid!important; place-items:center!important;
  border-radius:14px!important; background:#edf7f4!important; color:var(--help-green)!important; font-size:20px!important;
}
#im-help .im-help-search-hero-copy h2 { margin:0!important; color:var(--help-navy)!important; font-size:22px!important; line-height:1.15!important; font-weight:950!important; }
#im-help .im-help-search-hero-copy p { margin:5px 0 0!important; color:var(--help-muted)!important; font-size:12px!important; font-weight:600!important; }
#im-help .im-help-search-row { display:grid!important; grid-template-columns:minmax(0,1fr) 108px 88px!important; gap:10px!important; align-items:center!important; }
#im-help .im-help-search-field { width:100%!important; min-height:50px!important; margin:0!important; background:#f9fbfc!important; border:1px solid #cbd8df!important; border-radius:11px!important; box-shadow:none!important; }
#im-help .im-help-search-field input { color:#173142!important; font-size:14px!important; font-weight:650!important; }
#im-help #im-help-search-btn { min-height:50px!important; border:0!important; border-radius:11px!important; background:var(--help-green)!important; color:#fff!important; font-weight:900!important; }
#im-help #im-help-clear-btn { min-height:50px!important; border:1px solid #cbd8df!important; border-radius:11px!important; background:#fff!important; color:#52616d!important; font-weight:850!important; }

#im-help .im-help-action-grid { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px!important; margin-top:18px!important; }
#im-help .im-help-action-card {
  min-width:0!important; min-height:116px!important; display:flex!important; align-items:flex-start!important; gap:14px!important;
  padding:19px!important; border:1px solid var(--help-border)!important; border-top:4px solid var(--help-green)!important;
  border-radius:16px!important; background:#fff!important; color:var(--help-navy)!important; text-align:left!important;
  box-shadow:0 6px 18px rgba(20,42,58,.05)!important; transform:none!important;
}
#im-help .guides-card { border-top-color:var(--help-blue)!important; }
#im-help .faqs-card { border-top-color:var(--help-orange)!important; }
#im-help .im-help-action-card.active { background:#f0f7f4!important; border-color:#cfe3da!important; }
#im-help .im-help-action-icon {
  flex:0 0 42px!important; width:42px!important; height:42px!important; display:grid!important; place-items:center!important;
  border-radius:12px!important; background:#edf7f4!important; color:var(--help-green)!important; font-size:18px!important;
}
#im-help .guides-card .im-help-action-icon { background:#edf4fb!important; color:var(--help-blue)!important; }
#im-help .faqs-card .im-help-action-icon { background:#fff3e7!important; color:var(--help-orange)!important; }
#im-help .im-help-action-copy { min-width:0!important; display:flex!important; flex-direction:column!important; }
#im-help .im-help-action-copy strong { color:var(--help-navy)!important; font-size:15px!important; line-height:1.25!important; font-weight:950!important; }
#im-help .im-help-action-copy small { margin-top:5px!important; color:var(--help-muted)!important; font-size:11px!important; line-height:1.45!important; font-weight:650!important; }
#im-help .im-help-action-copy b { margin-top:9px!important; color:var(--help-green)!important; font-size:10px!important; font-weight:900!important; }

#im-help .im-help-featured-panel {
  margin-top:18px!important; padding:17px!important; background:#fff!important;
  border:1px solid var(--help-border)!important; border-radius:15px!important;
  box-shadow:0 6px 18px rgba(20,42,58,.045)!important;
}
#im-help .im-help-section-heading { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin-bottom:12px!important; }
#im-help .im-help-section-heading span:first-child { display:block!important; color:var(--help-green)!important; font-size:9px!important; font-weight:950!important; letter-spacing:.14em!important; }
#im-help .im-help-section-heading h3 { margin:3px 0 0!important; color:var(--help-navy)!important; font-size:17px!important; font-weight:950!important; }
#im-help .im-help-section-note { color:#7b8992!important; font-size:10px!important; font-weight:700!important; }
#im-help .im-help-featured-grid { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:10px!important; }
#im-help .im-help-featured-card {
  min-width:0!important; display:flex!important; align-items:center!important; gap:10px!important; padding:13px!important;
  border:1px solid #d8e3e8!important; border-radius:12px!important; background:#f9fbfc!important;
  color:var(--help-navy)!important; text-align:left!important; box-shadow:none!important;
}
#im-help .im-help-featured-card>i {
  flex:0 0 31px!important; width:31px!important; height:31px!important; display:grid!important; place-items:center!important;
  border-radius:9px!important; background:#edf7f4!important; color:var(--help-green)!important;
}
#im-help .im-help-featured-card span { min-width:0!important; }
#im-help .im-help-featured-card strong { display:block!important; color:var(--help-navy)!important; font-size:11px!important; font-weight:900!important; }
#im-help .im-help-featured-card small { display:block!important; margin-top:3px!important; color:var(--help-muted)!important; font-size:9px!important; line-height:1.35!important; font-weight:650!important; }

#im-help .im-help-tab-panel { width:100%!important; max-width:none!important; margin-top:18px!important; }
#im-help .im-help-tab-panel> .form-container,
#im-help #im-help-admin { width:100%!important; max-width:none!important; }
#im-help .im-help-results { width:100%!important; max-width:none!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px!important; }
#im-help .im-help-card { min-width:0!important; margin:0!important; padding:18px!important; background:#fff!important; border:1px solid var(--help-border)!important; border-radius:14px!important; box-shadow:0 5px 16px rgba(20,42,58,.045)!important; }
#im-help .im-help-title h3 { color:var(--help-navy)!important; font-size:16px!important; font-weight:950!important; }
#im-help .im-help-snippet { color:#60717d!important; font-size:13px!important; line-height:1.6!important; }
#im-help .im-help-badge { background:#edf7f4!important; border:1px solid #d3e7dd!important; color:var(--help-green)!important; }

/* Legacy tab-strip cannot appear because the new cards are the tab controls. */
#im-help>.im-help-tabs { display:none!important; }

@media (max-width:1100px) {
  #im-help .im-help-featured-grid,#im-help .im-help-results { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media (max-width:760px) {
  #im-help { padding:20px 14px 30px!important; }
  #im-help .im-help-header { flex-direction:column!important; }
  #im-help .im-help-search-row { grid-template-columns:1fr 1fr!important; }
  #im-help .im-help-search-field { grid-column:1/-1!important; }
  #im-help .im-help-action-grid,#im-help .im-help-featured-grid,#im-help .im-help-results { grid-template-columns:1fr!important; }
}


/* ========================================================================
   12.4.4 — HELP CENTER CLEAN SURFACE
   Fixes the remaining "container inside container" appearance.
   Functional panels stay connected, but inactive panels are truly hidden.
   The Ask panel itself is transparent until results exist.
   ======================================================================== */

/* The tab panels are functional containers, not visual cards. */
#im-help .im-help-tab-panel.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* The Ask panel should not create another white card beneath the main
   Help Center search surface. */
#im-help #im-help-tab-ask {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The metadata strip is populated only after a result exists. The legacy
   inline display:none must win over the old Invoice Management skin. */
#im-help #im-help-meta[style*="display:none"],
#im-help #im-help-meta[style*="display: none"] {
  display: none !important;
}

/* Result metadata becomes a compact information line when it is actually
   populated by the search logic. */
#im-help #im-help-meta:not([style*="display:none"]):not([style*="display: none"]) {
  width: 100% !important;
  margin: 14px 0 10px !important;
  padding: 9px 12px !important;
  background: #ffffff !important;
  border: 1px solid #d8e1e6 !important;
  border-left: 3px solid #e28a25 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Do not paint the inactive/functional panel backgrounds. */
#im-help .im-help-tab-panel,
#im-help .im-help-tab-panel > .form-container {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* FAQ/Guide search surfaces only receive a card when that tab is actually
   selected. */
#im-help #im-help-tab-faqs:not(.hidden) .search-and-filter-group,
#im-help #im-help-tab-guides:not(.hidden) > .form-container,
#im-help #im-help-tab-admin:not(.hidden) #im-help-admin {
  background: #ffffff !important;
  border: 1px solid #d8e1e6 !important;
  border-radius: 15px !important;
  box-shadow: 0 6px 18px rgba(20,42,58,.05) !important;
}

/* Keep the landing page's own search hero as the only search container. */
#im-help .im-help-search-hero {
  position: relative !important;
  z-index: 2 !important;
}


/* ========================================================================
   12.4.5 — HELP HOME PANEL ISOLATION
   The existing Help JS uses .hidden, but the legacy stylesheet can repaint
   functional panels. Use the active tab card as the authoritative visual
   state so only the selected functional panel can appear.
   ======================================================================== */

/* On the Help landing page, only Ask's result panel is allowed to occupy
   space. Guides/FAQs/Admin remain available to the existing JS but are
   visually collapsed until their matching action card becomes active. */
#im-help #im-help-tab-guides,
#im-help #im-help-tab-faqs,
#im-help #im-help-tab-admin {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Reveal exactly one functional panel when its existing tab button is active.
   :has() is supported by the modern Chromium browsers used by the system. */
#im-help:has(.guides-card.active) #im-help-tab-guides {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 18px !important;
  overflow: visible !important;
  border: 0 !important;
}

#im-help:has(.faqs-card.active) #im-help-tab-faqs {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 18px !important;
  overflow: visible !important;
  border: 0 !important;
}

#im-help:has(#im-help-admin-tab-btn.active) #im-help-tab-admin {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 18px !important;
  overflow: visible !important;
}

/* Ask remains the default landing workspace, but it has no extra legacy
   search container because the new hero is the search UI. */
#im-help #im-help-tab-ask {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If Ask is active, force all other legacy panels closed. */
#im-help:has(.ask-card.active) #im-help-tab-guides,
#im-help:has(.ask-card.active) #im-help-tab-faqs,
#im-help:has(.ask-card.active) #im-help-tab-admin {
  display: none !important;
}

/* Explicit contrast for all Help text so legacy global button/card rules
   cannot produce white text on a white surface. */
#im-help .im-help-search-hero,
#im-help .im-help-featured-panel,
#im-help .im-help-tab-panel,
#im-help .im-help-tab-panel .form-container,
#im-help .im-help-tab-panel .search-and-filter-group {
  color: #20313d !important;
}

#im-help .im-help-tab-panel h1,
#im-help .im-help-tab-panel h2,
#im-help .im-help-tab-panel h3,
#im-help .im-help-tab-panel h4,
#im-help .im-help-tab-panel p,
#im-help .im-help-tab-panel label,
#im-help .im-help-tab-panel span,
#im-help .im-help-tab-panel strong {
  color: #20313d !important;
}

#im-help .im-help-tab-panel input {
  color: #173142 !important;
  background: #f9fbfc !important;
}

#im-help .im-help-tab-panel button {
  color: #ffffff !important;
  background: #116045 !important;
}

#im-help .im-help-tab-panel .secondary-btn {
  color: #20313d !important;
  background: #ffffff !important;
  border-color: #cbd8df !important;
}


/* ========================================================================
   12.4.6 — HELP CENTER ICON CONTRAST
   Keep icon tiles white, but force the actual Font Awesome glyphs dark.
   Prevent inherited global button/icon rules from making the glyph white.
   ======================================================================== */

/* Action-card icon containers */
#im-help .im-help-action-card .im-help-action-icon {
  background: #ffffff !important;
  color: #062f57 !important;
  border: 0 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
#im-help .im-help-action-card .im-help-action-icon i,
#im-help .im-help-action-card .im-help-action-icon svg {
  color: #062f57 !important;
  fill: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Preserve the section identity without sacrificing contrast */
#im-help .guides-card .im-help-action-icon,
#im-help .guides-card .im-help-action-icon i,
#im-help .guides-card .im-help-action-icon svg {
  color: #155b92 !important;
}
#im-help .faqs-card .im-help-action-icon,
#im-help .faqs-card .im-help-action-icon i,
#im-help .faqs-card .im-help-action-icon svg {
  color: #062f57 !important;
}

/* Featured Help icon tiles */
#im-help .im-help-featured-card > i {
  display: grid !important;
  place-items: center !important;
  background: #ffffff !important;
  color: #062f57 !important;
  border: 0 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
#im-help .im-help-featured-card > i::before {
  color: #062f57 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#im-help .im-help-featured-card:hover > i,
#im-help .im-help-featured-card:focus-visible > i {
  background: #ffffff !important;
  color: #062f57 !important;
}
#im-help .im-help-featured-card:hover > i::before,
#im-help .im-help-featured-card:focus-visible > i::before {
  color: #062f57 !important;
}

/* Search icon tile */
#im-help .im-help-search-icon,
#im-help .im-help-search-icon i,
#im-help .im-help-search-icon svg {
  color: #116045 !important;
  opacity: 1 !important;
}

/* Never let the global button hover rule recolor Help icons */
#im-help button:hover .im-help-action-icon,
#im-help button:focus-visible .im-help-action-icon {
  color: #062f57 !important;
  background: #ffffff !important;
}
#im-help button:hover .im-help-action-icon i,
#im-help button:focus-visible .im-help-action-icon i,
#im-help button:hover .im-help-action-icon svg,
#im-help button:focus-visible .im-help-action-icon svg {
  color: #062f57 !important;
}


/* ========================================================================
   12.4.7 — HELP CENTER FINAL SEARCH / ICON ISOLATION
   1) Remove the visual "container under the search field".
   2) Hide legacy FAQ/Guide/Admin panels with higher specificity than the
      old Invoice Management stylesheet.
   3) Force Font Awesome glyph fill/text color so icons are visible without
      hover.
   ======================================================================== */

/* The landing search is now a clean workspace: no second white card/line
   underneath the actual search field. */
#invoice-management-view #im-help .im-help-search-hero {
  margin-top: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#invoice-management-view #im-help .im-help-search-hero-copy {
  margin-bottom: 12px !important;
}

#invoice-management-view #im-help .im-help-search-row {
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid #d8e1e6 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(20,42,58,.05) !important;
}

#invoice-management-view #im-help .im-help-search-field {
  min-height: 48px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #cbd8df !important;
  border-radius: 10px !important;
  background: #f9fbfc !important;
  box-shadow: none !important;
}

#invoice-management-view #im-help .im-help-search-field input {
  height: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 14px 0 42px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #173142 !important;
  -webkit-text-fill-color: #173142 !important;
}

/* Eliminate the nested/inner oval effect if any legacy pseudo-element or
   generic input rule attempts to draw another outline. */
#invoice-management-view #im-help .im-help-search-field::before,
#invoice-management-view #im-help .im-help-search-field::after,
#invoice-management-view #im-help .im-help-search-field input::before,
#invoice-management-view #im-help .im-help-search-field input::after {
  display: none !important;
  content: none !important;
}

/* These legacy panels have two-ID selectors in the old stylesheet, so use
   the same specificity here. They must not occupy space on the landing
   screen. */
#invoice-management-view #im-help #im-help-tab-guides,
#invoice-management-view #im-help #im-help-tab-faqs,
#invoice-management-view #im-help #im-help-tab-admin {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* When the actual JS opens a panel, the active tab class is allowed to
   reopen that exact panel. */
#invoice-management-view #im-help:has(.guides-card.active) #im-help-tab-guides,
#invoice-management-view #im-help:has(.faqs-card.active) #im-help-tab-faqs,
#invoice-management-view #im-help:has(#im-help-admin-tab-btn.active) #im-help-tab-admin {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 18px !important;
  padding: initial !important;
  overflow: visible !important;
}

/* Icon contrast: force both the Font Awesome element and its generated
   glyph. Hover must not be required to make the icon visible. */
#invoice-management-view #im-help .im-help-action-card .im-help-action-icon,
#invoice-management-view #im-help .im-help-action-card .im-help-action-icon i,
#invoice-management-view #im-help .im-help-action-card .im-help-action-icon::before,
#invoice-management-view #im-help .im-help-action-card .im-help-action-icon i::before {
  background: #ffffff !important;
  color: #062f57 !important;
  -webkit-text-fill-color: #062f57 !important;
  fill: #062f57 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

#invoice-management-view #im-help .guides-card .im-help-action-icon,
#invoice-management-view #im-help .guides-card .im-help-action-icon i,
#invoice-management-view #im-help .guides-card .im-help-action-icon::before,
#invoice-management-view #im-help .guides-card .im-help-action-icon i::before {
  color: #155b92 !important;
  -webkit-text-fill-color: #155b92 !important;
  fill: #155b92 !important;
}

#invoice-management-view #im-help .im-help-featured-card > i,
#invoice-management-view #im-help .im-help-featured-card > i::before {
  background: #ffffff !important;
  color: #062f57 !important;
  -webkit-text-fill-color: #062f57 !important;
  fill: #062f57 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Global button hover/focus rules cannot recolor the Help icons. */
#invoice-management-view #im-help .im-help-action-card:hover .im-help-action-icon,
#invoice-management-view #im-help .im-help-action-card:focus .im-help-action-icon,
#invoice-management-view #im-help .im-help-featured-card:hover > i,
#invoice-management-view #im-help .im-help-featured-card:focus > i {
  background: #ffffff !important;
  color: #062f57 !important;
  -webkit-text-fill-color: #062f57 !important;
}




/* ========================================================================
   12.7.7 — Invoice Records expanded PO five-part summary
   Scope: ONLY the five-metric summary directly under each expanded
   Invoice Records > Invoice Entries table.
   Purpose: one clean white card per metric, dark readable text, and no
   selection/inner colored highlight effect.
   ======================================================================== */
#invoice-management-view #im-reporting .im-nested-invoice-table tr.im-records-summary-row td.im-records-summary-cell {
    padding: 10px !important;
    border: 0 !important;
    border-top: 0 !important;
    background: #0f858c !important;
    color: #102a43 !important;
    -webkit-text-fill-color: #102a43 !important;
    box-shadow: none !important;
}

#invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-image: none !important;
}

#invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary .im-records-summary-item {
    min-width: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid #d6e1e7 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(15, 41, 63, 0.10) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    color: #102a43 !important;
    -webkit-text-fill-color: #102a43 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

#invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary .im-records-summary-item,
#invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary .im-records-summary-item * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary .im-records-summary-item .im-records-summary-label {
    color: #27445c !important;
    -webkit-text-fill-color: #27445c !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

#invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary .im-records-summary-item .im-records-summary-value {
    color: #0b2239 !important;
    -webkit-text-fill-color: #0b2239 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    white-space: nowrap !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Prevent browser selection highlight from making the summary look like
   teal text boxes if the user happens to drag across the page. */
#invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary ::selection {
    background: transparent !important;
    color: inherit !important;
}

@media (max-width: 1050px) {
    #invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    #invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary {
        grid-template-columns: 1fr !important;
    }
    #invoice-management-view #im-reporting .im-nested-invoice-table .im-records-summary .im-records-summary-item {
        padding: 8px 10px !important;
    }
}


/* 12.8.2 — Payments: popup global Paid Date + vendor/date payment groups */
#im-add-payment-modal .im-payment-search-row {
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto) auto;
    align-items: end;
}
#im-add-payment-modal .im-payment-global-date-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 190px;
}
#im-add-payment-modal .im-payment-global-date-wrap label {
    font-size: 0.78rem;
    font-weight: 750;
    color: #3d4b45;
    margin: 0;
}
#im-add-payment-modal #im-payment-modal-global-date {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #cbd8d2;
    border-radius: 10px;
    background: #fff;
}
#im-payments #im-payments-table .im-payment-vendor-group-row td {
    padding: 9px 12px;
    background: #edf5f1;
    border-top: 2px solid #b9d2c7;
    border-bottom: 1px solid #d6e5de;
}
#im-payments .im-payment-vendor-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.88rem;
}
#im-payments .im-payment-vendor-group-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
#im-payments .im-payment-vendor-group-heading i { opacity: .7; }
#im-payments .im-payment-vendor-group-heading span {
    font-weight: 600;
    opacity: .72;
    margin-left: 6px;
}
#im-payments .im-payment-vendor-group-heading > div:last-child {
    white-space: nowrap;
}
@media (max-width: 760px) {
    #im-add-payment-modal .im-payment-search-row { grid-template-columns: 1fr; }
    #im-add-payment-modal .im-payment-global-date-wrap { min-width: 0; }
    #im-payments .im-payment-vendor-group-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
}