.loading_wrap {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    /* Flexbox keeps the logo and spinner perfectly centered (horizontally and
       vertically) regardless of their size — no fragile left/transform offsets. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .loader_logo {
    height: 100px;
    width: auto;
    margin-bottom: 30px;
  }

  .loader_logo img {
    height: 100px;
    width: auto;
    object-fit: contain;
  }

  .loading {
    border: 3px solid rgba(var(--brand-primary-rgb, 23, 84, 156), 0.2);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border-top-color: var(--brand-primary, #17549C);
    animation: loader 1s ease-in-out infinite;
    -webkit-animation: loader 1s ease-in-out infinite;
  }

  @keyframes loader {
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-webkit-keyframes loader {
    to {
      -webkit-transform: rotate(360deg);
    }
  }

/* ============================================================================
   Mobile responsiveness overrides (phones / narrow tablets).
   Scoped to <=767.98px only — the desktop layout is completely unaffected.
   These complement the b-table `responsive` wrappers by stopping fixed-width
   inline styles and wide controls from forcing the whole PAGE to scroll sideways.
   Deliberately surgical: broad rules like `.d-flex { flex-wrap: wrap }` were tried
   and rejected because they reflow hundreds of unrelated layouts.
   ============================================================================ */
@media (max-width: 767.98px) {

  /* The page itself must never scroll horizontally — only inner wide content may. */
  .main-content,
  .main-content-wrap {
    overflow-x: hidden;
  }

  /* Wide tables scroll inside their own container instead of stretching the page. */
  .main-content .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Form controls take the available width rather than a fixed pixel width that
     overflows a narrow screen. Applies to the control itself, not its container. */
  .main-content .form-control,
  .main-content .custom-select,
  .main-content input[type="text"],
  .main-content input[type="date"],
  .main-content input[type="number"],
  .main-content input[type="search"],
  .main-content select,
  .main-content textarea {
    max-width: 100%;
  }

  /* Only the genuinely page-breaking inline min-widths are neutralised — matched by
     value, so small structural min-widths (icons, badges, table cells) are untouched. */
  .main-content [style*="min-width: 350px"],
  .main-content [style*="min-width:350px"],
  .main-content [style*="min-width: 300px"],
  .main-content [style*="min-width:300px"],
  .main-content [style*="min-width: 250px"],
  .main-content [style*="min-width:250px"],
  .main-content [style*="min-width: 200px"],
  .main-content [style*="min-width:200px"] {
    min-width: 0 !important;
  }

  /* Likewise only wide fixed widths collapse to full width. */
  .main-content [style*="width: 350px"],
  .main-content [style*="width:350px"],
  .main-content [style*="width: 300px"],
  .main-content [style*="width:300px"],
  .main-content [style*="width: 250px"],
  .main-content [style*="width:250px"],
  .main-content [style*="width: 200px"],
  .main-content [style*="width:200px"],
  .main-content [style*="width: 150px"],
  .main-content [style*="width:150px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Filter/action toolbars wrap instead of overflowing. Restricted to toolbars that sit
     directly inside a card header or body — nested flex layouts keep their own behaviour. */
  .main-content .card-header > .d-flex,
  .main-content .card-body > .d-flex,
  .main-content .card-title + .d-flex {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}