/*
 * IBA INVOICE RECORDS — STANDALONE MOBILE UI
 * Version 12.3.0
 *
 * This file owns the Invoice Records mobile presentation.
 * It intentionally uses only iba-mob-* classes generated by app-mobile.js.
 * No legacy .im-po-* / .im-mobile-po-* card classes are used.
 *
 * Desktop Invoice Management is not styled here.
 */
@media (max-width: 900px) {

  /* ---------- MOBILE INVOICE RECORDS SHELL ---------- */
  #invoice-management-view #im-reporting {
    background: #071f3d !important;
    color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #invoice-management-view #im-reporting > .header,
  #invoice-management-view #im-reporting > #im-reporting-form,
  #invoice-management-view #im-reporting > .reporting-legend,
  #invoice-management-view #im-reporting > .grid-header,
  #invoice-management-view #im-reporting > #im-reporting-content,
  #invoice-management-view #im-reporting > #im-reporting-grand-total-container,
  #invoice-management-view #im-reporting .daily-report-section {
    display: none !important;
  }

  #invoice-management-view #im-reporting-mobile-view {
    display: block !important;
    width: 100% !important;
    min-height: calc(100vh - 58px) !important;
    box-sizing: border-box !important;
    padding: 12px 12px 104px !important;
    margin: 0 !important;
    background:
      linear-gradient(180deg, #0a294b 0, #071f3d 150px, #061a33 100%) !important;
    color: #ffffff !important;
    overflow: visible !important;
  }

  /* ---------- SEARCH PANEL ---------- */
  #im-mobile-inline-search-panel {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 15px !important;
    border: 1px solid rgba(89,154,214,.42) !important;
    border-radius: 18px !important;
    background: #08294d !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-title > i {
    color: #ff9d00 !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-edit-btn {
    margin-left: auto !important;
    min-width: 54px !important;
    min-height: 36px !important;
    padding: 7px 13px !important;
    border: 1px solid #ff9d00 !important;
    border-radius: 999px !important;
    background: #ff9d00 !important;
    color: #06203d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-collapsed-summary {
    display: none !important;
    margin-top: 11px !important;
    padding: 11px 13px !important;
    border: 1px solid rgba(89,154,214,.45) !important;
    border-radius: 12px !important;
    background: #061f3b !important;
  }

  #im-mobile-inline-search-panel.is-collapsed .im-mobile-inline-grid,
  #im-mobile-inline-search-panel.is-collapsed .im-mobile-inline-actions {
    display: none !important;
  }

  #im-mobile-inline-search-panel.is-collapsed .im-mobile-inline-collapsed-summary {
    display: block !important;
  }

  #im-mobile-inline-search-panel .summary-caption {
    display: block !important;
    margin-bottom: 4px !important;
    color: #a9c2dc !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-collapsed-summary strong {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 13px !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-grid label {
    display: block !important;
    margin: 0 0 5px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-grid input,
  #im-mobile-inline-search-panel .im-mobile-inline-grid select {
    width: 100% !important;
    min-height: 45px !important;
    box-sizing: border-box !important;
    border: 1px solid #477fae !important;
    border-radius: 11px !important;
    background: #f7faff !important;
    color: #071f3d !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 9px 11px !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-actions button {
    flex: 1 1 0 !important;
    min-height: 45px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-actions .primary-btn {
    background: #ff9d00 !important;
    border: 1px solid #ff9d00 !important;
    color: #06203d !important;
  }

  #im-mobile-inline-search-panel .im-mobile-inline-actions .secondary-btn {
    background: #0b3e70 !important;
    border: 1px solid #4a86bb !important;
    color: #ffffff !important;
  }

  /* ---------- PO CARD: ONE CLEAN NAVY SURFACE ---------- */
  #im-reporting-mobile-view .iba-mob-po {
    display: block !important;
    width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #im-reporting-mobile-view .iba-mob-po-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 18px 16px 16px !important;
    border: 1px solid #2f72a7 !important;
    border-radius: 20px !important;
    outline: none !important;
    background: #062a50 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
    text-align: left !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-po-card:hover,
  #im-reporting-mobile-view .iba-mob-po-card:focus,
  #im-reporting-mobile-view .iba-mob-po-card:focus-visible,
  #im-reporting-mobile-view .iba-mob-po-card:active {
    background: #0a3f70 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #ff9d00 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 2px rgba(255,157,0,.20), 0 8px 22px rgba(0,0,0,.24) !important;
  }

  #im-reporting-mobile-view .iba-mob-po-card *,
  #im-reporting-mobile-view .iba-mob-po-card *:hover,
  #im-reporting-mobile-view .iba-mob-po-card *:focus,
  #im-reporting-mobile-view .iba-mob-po-card *:active {
    text-shadow: none !important;
  }

  #im-reporting-mobile-view .iba-mob-po-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-bottom: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,.22) !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-label {
    display: block !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
  }

  #im-reporting-mobile-view .iba-mob-po-number {
    display: block !important;
    margin-top: 4px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  #im-reporting-mobile-view .iba-mob-po-count-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  #im-reporting-mobile-view .iba-mob-po-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 5px 13px !important;
    border: 2px solid #ff9d00 !important;
    border-radius: 999px !important;
    background: #092f59 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #im-reporting-mobile-view .iba-mob-po-chevron {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 19px !important;
  }

  #im-reporting-mobile-view .iba-mob-vendor {
    margin: 14px 0 11px !important;
    padding: 0 0 13px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.22) !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-vendor strong {
    display: block !important;
    margin-top: 5px !important;
    color: #ff9d00 !important;
    -webkit-text-fill-color: #ff9d00 !important;
    font-size: 21px !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
  }

  #im-reporting-mobile-view .iba-mob-site {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 7px 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 850 !important;
  }

  #im-reporting-mobile-view .iba-mob-site i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics > div {
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 10px 9px !important;
    box-sizing: border-box !important;
    border: 1px solid #3c76a6 !important;
    border-radius: 9px !important;
    background: #041f3b !important;
    color: #ffffff !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics .iba-mob-label {
    margin-bottom: 6px !important;
    color: #ffffff !important;
    font-size: 9px !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics strong {
    display: block !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics .iba-mob-balance {
    border-color: #ff9d00 !important;
    background: #041f3b !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics .iba-mob-balance .iba-mob-label,
  #im-reporting-mobile-view .iba-mob-metrics .iba-mob-balance strong {
    color: #ff9d00 !important;
    -webkit-text-fill-color: #ff9d00 !important;
  }

  /* ---------- INVOICE ENTRIES ---------- */
  #im-reporting-mobile-view .iba-mob-po-detail {
    display: block !important;
    margin: 0 !important;
    padding: 15px 4px 3px !important;
    background: transparent !important;
    color: #ffffff !important;
  }

  #im-reporting-mobile-view .iba-mob-po-detail.hidden-invoice-list {
    display: none !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-heading {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin: 0 2px 10px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-heading h3 {
    margin: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-heading span {
    color: #b9cce1 !important;
    -webkit-text-fill-color: #b9cce1 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-item {
    display: block !important;
    margin: 0 !important;
    padding: 14px 13px 12px !important;
    border: 1px solid #315f88 !important;
    border-left: 6px solid #ff9d00 !important;
    border-radius: 14px !important;
    background: #062a50 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-item:hover,
  #im-reporting-mobile-view .iba-mob-invoice-item:focus,
  #im-reporting-mobile-view .iba-mob-invoice-item:active {
    background: #0a3f70 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #4c83b5 !important;
    border-left-color: #ff9d00 !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-number {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
  }

  #im-reporting-mobile-view .iba-mob-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Status meaning stays semantic; theme does not recolor it. */
  #im-reporting-mobile-view .iba-mob-status.status-paid,
  #im-reporting-mobile-view .iba-mob-status.status-complete,
  #im-reporting-mobile-view .iba-mob-status.status-approved {
    background: #22c55e !important;
  }
  #im-reporting-mobile-view .iba-mob-status.status-in-process,
  #im-reporting-mobile-view .iba-mob-status.status-for-srv {
    background: #1687f5 !important;
  }
  #im-reporting-mobile-view .iba-mob-status.status-ceo-approval {
    background: #7046b8 !important;
  }
  #im-reporting-mobile-view .iba-mob-status.status-report {
    background: #ff9d00 !important;
    color: #06203d !important;
    -webkit-text-fill-color: #06203d !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 10px !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-meta span,
  #im-reporting-mobile-view .iba-mob-invoice-meta strong,
  #im-reporting-mobile-view .iba-mob-invoice-attention {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-meta i,
  #im-reporting-mobile-view .iba-mob-invoice-attention i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-attention {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 9px 0 6px !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 5px !important;
  }

  #im-reporting-mobile-view .iba-mob-invoice-actions > * {
    flex: 1 1 0 !important;
    min-height: 42px !important;
    border-radius: 9px !important;
    background: #0b3f73 !important;
    border: 1px solid #2269a0 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* ---------- MOBILE INVOICE MANAGEMENT NAV ---------- */
  #invoice-management-view #im-nav {
    background: #061b35 !important;
    border-color: #183d63 !important;
  }

  #invoice-management-view #im-nav :is(a, button, i, span) {
    color: #ffffff !important;
  }

  #invoice-management-view #im-nav .wd-nav-im-reporting-mobile a,
  #invoice-management-view #im-nav .wd-nav-activetask-mobile a {
    background: transparent !important;
    color: #ffffff !important;
  }

  #invoice-management-view #im-nav .wd-nav-im-reporting-mobile a.active,
  #invoice-management-view #im-nav .wd-nav-im-reporting-mobile a:active {
    background: #ff9d00 !important;
    border-color: #ff9d00 !important;
    color: #06203d !important;
  }

  #invoice-management-view #im-nav .wd-nav-im-reporting-mobile a.active i,
  #invoice-management-view #im-nav .wd-nav-im-reporting-mobile a.active span {
    color: #06203d !important;
  }

  /* Mobile module switcher: part of the new standalone mobile shell. */
  #invoice-management-view .mobile-module-switcher-wrap {
    background: #061b35 !important;
    border-color: #ff9d00 !important;
  }

  #invoice-management-view .mobile-module-switcher-label {
    color: #ffffff !important;
  }

  #invoice-management-view .mobile-module-switcher-select {
    background: #ffffff !important;
    color: #06203d !important;
    border-color: #ff9d00 !important;
  }
}

@media (max-width: 380px) {
  #im-reporting-mobile-view .iba-mob-po-card {
    padding: 16px 13px 14px !important;
  }

  #im-reporting-mobile-view .iba-mob-po-number {
    font-size: 25px !important;
  }

  #im-reporting-mobile-view .iba-mob-vendor strong {
    font-size: 18px !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics {
    gap: 5px !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics > div {
    padding: 8px 6px !important;
  }

  #im-reporting-mobile-view .iba-mob-metrics strong {
    font-size: 12px !important;
  }
}



/* ========================================================================
   12.3.1 — FINAL MOBILE INVOICE RECORDS UI
   The v2 namespace is intentionally independent of legacy mobile Invoice CSS.
   Visual design: DEEP NAVY + ORANGE + WHITE.
   ======================================================================== */
@media (max-width: 900px) {

  /* Mobile Invoice Records canvas: no giant blue/teal wrapper behind entries. */
  #invoice-management-view #im-reporting-mobile-view {
    background: #f3f6fa !important;
    background-color: #f3f6fa !important;
    background-image: none !important;
    color: #06203d !important;
    padding-bottom: 18px !important;
  }

  /* Search surface */
  #invoice-management-view #im-reporting-mobile-view .iba-mob-v2-search-panel,
  #invoice-management-view #im-reporting-mobile-view .iba-mob-v2-search-card {
    background: #06203d !important;
    background-color: #06203d !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 18px !important;
  }

  /* PO wrapper is transparent; the button is the complete rounded card. */
  #im-reporting-mobile-view .iba-mob-v2-po {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 18px 17px !important;
    box-sizing: border-box !important;

    /* The ONLY PO background. */
    background: #06203d !important;
    background-color: #06203d !important;
    background-image: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #315f91 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    outline: none !important;
    box-shadow: 0 6px 18px rgba(4,25,50,.16) !important;
    text-align: left !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-card:hover,
  #im-reporting-mobile-view .iba-mob-v2-po-card:focus,
  #im-reporting-mobile-view .iba-mob-v2-po-card:focus-visible,
  #im-reporting-mobile-view .iba-mob-v2-po-card:active {
    background: #0a3158 !important;
    background-color: #0a3158 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #ff9d00 !important;
    border-radius: 22px !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-card > * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.20) !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-label {
    display: block !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-number {
    display: block !important;
    margin-top: 5px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-count-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 5px 15px !important;
    border: 2px solid #ff9d00 !important;
    border-radius: 999px !important;
    background: #0a3158 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-chevron {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 19px !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-vendor {
    margin: 15px 0 12px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.20) !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-vendor strong {
    display: block !important;
    margin-top: 6px !important;
    color: #ff9d00 !important;
    -webkit-text-fill-color: #ff9d00 !important;
    font-size: 21px !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-site {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-site i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 11px !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-metrics > div {
    min-width: 0 !important;
    min-height: 74px !important;
    padding: 11px 9px !important;
    box-sizing: border-box !important;
    border: 1px solid #315f91 !important;
    border-radius: 9px !important;
    background: #041c36 !important;
    background-color: #041c36 !important;
    color: #ffffff !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-metrics .iba-mob-v2-label {
    margin-bottom: 6px !important;
    color: #ffffff !important;
    font-size: 9px !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-metrics strong {
    display: block !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-metrics .iba-mob-v2-balance {
    border-color: #ff9d00 !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-metrics .iba-mob-v2-balance .iba-mob-v2-label,
  #im-reporting-mobile-view .iba-mob-v2-metrics .iba-mob-v2-balance strong {
    color: #ff9d00 !important;
    -webkit-text-fill-color: #ff9d00 !important;
  }

  /* Invoice list area: light canvas, navy cards only. */
  #im-reporting-mobile-view .iba-mob-v2-po-detail {
    display: block !important;
    margin: 0 !important;
    padding: 15px 0 2px !important;
    background: transparent !important;
    color: #06203d !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-po-detail.hidden-invoice-list {
    display: none !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-heading {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin: 0 3px 10px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-heading h3,
  #im-reporting-mobile-view .iba-mob-v2-invoice-heading span {
    color: #06203d !important;
    -webkit-text-fill-color: #06203d !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-list > li {
    position: relative !important;
    margin: 0 0 10px !important;
    padding: 16px 13px 12px 15px !important;
    background: #06203d !important;
    background-color: #06203d !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #315f91 !important;
    border-left: 7px solid #ff9d00 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(4,25,50,.12) !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-list > li:hover,
  #im-reporting-mobile-view .iba-mob-v2-invoice-list > li:active {
    background: #0a3158 !important;
    background-color: #0a3158 !important;
    color: #ffffff !important;
    border-left-color: #ff9d00 !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-list > li * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-list > li .iba-mob-v2-status {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #im-reporting-mobile-view .iba-mob-v2-invoice-list > li .iba-mob-v2-invoice-actions > * {
    background: #0b3f73 !important;
    background-color: #0b3f73 !important;
    border: 1px solid #2269a0 !important;
    color: #ffffff !important;
  }

  /* Do not allow the mobile page shell to paint a navy slab behind the cards. */
  #invoice-management-view .im-mobile-reporting,
  #invoice-management-view .im-mobile-reporting-container,
  #invoice-management-view #im-reporting-mobile-view > * {
    background-image: none !important;
  }
}

@media (max-width: 380px) {
  #im-reporting-mobile-view .iba-mob-v2-po-card {
    padding: 17px 14px 15px !important;
  }
  #im-reporting-mobile-view .iba-mob-v2-po-number {
    font-size: 27px !important;
  }
  #im-reporting-mobile-view .iba-mob-v2-vendor strong {
    font-size: 18px !important;
  }
  #im-reporting-mobile-view .iba-mob-v2-metrics {
    gap: 6px !important;
  }
  #im-reporting-mobile-view .iba-mob-v2-metrics > div {
    padding: 9px 6px !important;
  }
  #im-reporting-mobile-view .iba-mob-v2-metrics strong {
    font-size: 12px !important;
  }
}


/* ================================================================
   12.3.2 — REMOVE LEGACY SEARCH-BUTTON BACKDROP
   The Clear/Search controls must sit directly on the light mobile
   canvas. Only the buttons themselves are teal.
   ================================================================ */
@media (max-width: 900px) {
  #invoice-management-view #im-reporting-mobile-view .iba-mob-v2-search-panel,
  #invoice-management-view #im-reporting-mobile-view .iba-mob-v2-search-card,
  #invoice-management-view #im-reporting-mobile-view .iba-mob-v2-search-actions,
  #invoice-management-view #im-reporting-mobile-view .iba-mob-v2-search-form,
  #invoice-management-view #im-reporting-mobile-view .iba-mob-v2-inline-search {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Search controls remain teal, not the surrounding area. */
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-actions button,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-btn,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-clear-btn {
    background: #138f95 !important;
    background-color: #138f95 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
  }

  /* The current-search field remains a clean white/light field. */
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-field,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-current-search {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #06203d !important;
    -webkit-text-fill-color: #06203d !important;
  }
}


/* ================================================================
   12.3.3 — REMOVE SEARCH PANEL NAVY BACKGROUND
   The search controls sit directly on the light mobile canvas.
   Only the actual controls/cards receive their own backgrounds.
   ================================================================ */
@media (max-width: 900px) {
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-panel,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-card,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-form,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-actions,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-inline-search {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    color: #06203d !important;
    -webkit-text-fill-color: #06203d !important;
  }

  /* Search title row */
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-panel h3,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-card h3 {
    color: #06203d !important;
    -webkit-text-fill-color: #06203d !important;
  }

  /* Current-search field remains a clean white rounded field. */
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-current-search,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-field {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #06203d !important;
    -webkit-text-fill-color: #06203d !important;
    border: 1px solid #cbd6e2 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* Keep Edit as the teal action button. */
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-panel button,
  #invoice-management-view #im-reporting-mobile-view
    .iba-mob-v2-search-card button {
    background: #138f95 !important;
    background-color: #138f95 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}