/* ============================================================
   Mobile view
   All small-screen rules for this app live here, not in branding.css
   and not inline in components. Loaded after branding.css in index.html.
   See "Mobile view.md" for the patterns and the reasoning.
   ============================================================ */
/* ============================================================
   Mobile layout (<= 767px)
   Login screen, post-login chrome and the bottom-sheet select.
   ============================================================ */
@media (max-width: 991px) {
  /* --- Login ------------------------------------------------ */
  /* Stays absolute so it still covers the always-rendered loader row that
     sits behind it; display:block instead of flex lets a tall form scroll
     rather than being centred and clipped. */
  body .login {
    align-items: stretch;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 0;
  }

  /* Vertically centre only when the form is shorter than the screen. */
  .login .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 40px);
  }

  .login .container {
    padding: 24px 16px;
    width: 100%;
  }

  .login .row.d-flex.align-items-center {
    display: block !important;
  }

  .login h2 {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 20px;
    text-align: center;
  }

  .login .loginHifinLogo {
    height: 56px;
    margin-bottom: 20px;
  }

  /* Panel fills the width rather than sitting in a fixed 480px card. */
  .login-panel {
    border-radius: 16px !important;
    margin: 0 auto;
    max-width: 100%;
    padding: 20px 16px;
    width: 100%;
  }

  .login-panel h3 {
    font-size: 18px;
  }

  .login .login-form .form-group {
    margin-bottom: 14px;
  }

  /* Comfortable tap targets; 16px stops iOS zooming on focus. */
  .login .form-control,
  .login input[type="text"],
  .login input[type="password"] {
    font-size: 16px;
    height: 44px;
  }

  .login .btn.btn-login.btn-block {
    font-size: 15px;
    height: 46px;
  }

  .login .copyright {
    font-size: 10px;
    padding: 12px 0;
    position: relative;
    text-align: center;
  }

  /* --- Post-login chrome ------------------------------------ */
  /* Burger owns the top-left, so keep the header clear of it. */
  .page-header.navbar .page-top {
    padding-left: 52px;
  }

  .page-header.navbar {
    height: 48px;
  }

  .page-content {
    padding: 12px 10px !important;
  }

  .page-content-wrapper .page-content {
    margin-left: 0 !important;
    min-height: auto !important;
  }

  .portlet.light {
    padding: 12px !important;
  }

  .portlet-title .caption {
    font-size: 14px;
  }

  /* Wide tables scroll instead of forcing the page sideways. */
  .table-responsive,
  .dataTables_wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  .customs-toolbar {
    padding: 8px 0;
  }

  .btn-toolbar.pull-right,
  .btn-toolbarNew.pull-right {
    float: none !important;
  }
}

/* --- Bottom-sheet select (mobile combo popup) --------------- */
.mobile-sheet-backdrop {
  background: rgba(0, 0, 0, 0.45);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100000;
}

.mobile-sheet {
  background: #fff;
  border-radius: 16px 16px 0 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  max-height: 72vh;
  position: fixed;
  right: 0;
  z-index: 100001;
  animation: mobile-sheet-up 0.22s ease-out;
}

@keyframes mobile-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.mobile-sheet-grip {
  background: #d9d9d9;
  border-radius: 3px;
  height: 4px;
  margin: 10px auto 6px;
  width: 40px;
}

.mobile-sheet-header {
  align-items: center;
  border-bottom: 1px solid #eff0f2;
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 12px;
}

.mobile-sheet-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.mobile-sheet-close {
  background: none;
  border: none;
  color: #636363;
  font-size: 18px;
  padding: 0;
}

.mobile-sheet-list {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  padding: 6px 0 16px;
}

.mobile-sheet-option {
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  padding: 14px 16px;
}

.mobile-sheet-option.selected {
  color: var(--Maron, #8a1538);
  font-weight: 600;
}

/* Sidebar.jsx sets display inline on these at mount time, so a later resize
   (or device emulation) leaves the burger stuck hidden. Width should decide,
   not whatever the viewport happened to be on first render. */
@media (max-width: 992px) {
  .sidebar-mobile-navbar-btn {
    display: block !important;
  }

  #menu-toggler-sw {
    display: none !important;
  }
}

@media (min-width: 993px) {
  .sidebar-mobile-navbar-btn {
    display: none !important;
  }
}

/* --- Mobile splash ---------------------------------------- */
.mobile-splash {
  align-items: center;
  background: #fff var(--Login-Background) no-repeat center center;
  background-size: cover;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100002;
}

.mobile-splash.is-leaving {
  animation: mobile-splash-out 0.45s ease forwards;
}

@keyframes mobile-splash-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes mobile-splash-mark {
  0% { opacity: 0; transform: translateY(14px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mobile-splash-fade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes mobile-splash-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

.mobile-splash-mark {
  animation: mobile-splash-mark 0.6s ease-out both;
  height: 46px;
  max-width: 70vw;
}

.mobile-splash-title {
  animation: mobile-splash-fade 0.6s ease-out 0.25s both;
  color: #fff;
  font-family: "GeneralSansSemiBold", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 18px 24px 0;
  text-align: center;
}

.mobile-splash-track {
  animation: mobile-splash-fade 0.5s ease-out 0.45s both;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  height: 3px;
  margin-top: 22px;
  overflow: hidden;
  width: 120px;
}

.mobile-splash-bar {
  animation: mobile-splash-bar 1.1s ease-in-out infinite;
  background: #fff;
  border-radius: 2px;
  height: 100%;
  width: 30%;
}

.mobile-splash-powered {
  align-items: center;
  animation: mobile-splash-fade 0.6s ease-out 0.6s both;
  bottom: 34px;
  display: flex;
  gap: 8px;
  position: absolute;
}

.mobile-splash-powered span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
}

.mobile-splash-powered img {
  height: 18px;
}

/* Off-canvas menu: anchor it and drive the open state explicitly, so a stale
   inline margin cannot leave it stuck off-screen. */
/* The drawer's open/closed geometry is set inline from Sidebar.jsx — see the
   note there. Nothing here uses !important, so the JS always wins. */
@media (max-width: 992px) {
  #sidebar-mobile {
    overflow-y: auto;
    transition: transform 0.3s ease;
  }
}

.mobile-drawer-backdrop {
  background: rgba(0, 0, 0, 0.45);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

/* --- Lists as cards on mobile ------------------------------
   Datatable tags each cell with data-label from its column header, so a row
   can be re-flowed into a labelled card instead of a table that has to be
   scrolled sideways. */
@media (max-width: 991px) {
  .table-scrollable,
  .table-responsive {
    border: none !important;
    overflow-x: visible !important;
  }

  .table-scrollable > table > thead,
  .table-responsive > table > thead,
  table.table > thead {
    display: none;
  }

  table.table,
  table.table > tbody,
  table.table > tbody > tr,
  table.table > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  table.table > tbody > tr {
    background: #fff;
    border: 1px solid #eff0f2 !important;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    margin-bottom: 10px;
    padding: 6px 12px;
  }

  table.table > tbody > tr > td {
    border: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 0 !important;
    text-align: right;
    white-space: normal !important;
  }

  table.table > tbody > tr > td:last-child {
    border-bottom: none !important;
  }

  /* Column header, carried over as the field label. */
  table.table > tbody > tr > td[data-label]::before {
    color: #8f8f8f;
    content: attr(data-label);
    flex: 0 0 40%;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
  }

  /* Cells with no header text (checkbox, serial) do not need a label row. */
  table.table > tbody > tr > td[data-label=""]::before {
    display: none;
  }
}

/* Card field labels and the headline value. */
@media (max-width: 991px) {
  table.table > tbody > tr > td[data-label]::before {
    color: #1d1d1d;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
  }

  /* Headline field reads larger than the rest of the card. */
  table.table > tbody > tr > td.mobile-primary {
    align-items: baseline;
    border-bottom: 1px solid #eff0f2 !important;
    color: #1d1d1d;
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 10px !important;
  }

  table.table > tbody > tr > td.mobile-primary::before {
    font-size: 12px;
  }
}

/* --- Mobile header: bell + org avatar, right aligned -------- */
@media (max-width: 991px) {
  .page-header.navbar .top-menu {
    display: block !important;
    float: right;
  }

  .page-header.navbar .top-menu .navbar-nav {
    align-items: center;
    display: flex !important;
    float: right !important;
    gap: 4px;
    margin: 0 6px 0 0;
  }

  .page-header.navbar .top-menu .navbar-nav > li {
    float: none;
  }

  .page-header.navbar .top-menu .navbar-nav > li > a {
    padding: 6px 8px !important;
  }

  /* Name is redundant next to the avatar on a narrow bar. */
  .username-hide-on-mobile {
    display: none !important;
  }

  /* Organisation / user avatar, outlined so it reads as a control. */
  .page-header.navbar .top-menu .dropdown-user .img-circle {
    border: 1.5px solid var(--haifin-Primary-Color, #8a1538);
    border-radius: 50%;
    height: 30px;
    object-fit: cover;
    padding: 1px;
    width: 30px;
  }

  .page-header.navbar .top-menu .dropdown-notification .badge {
    font-size: 9px;
    line-height: 14px;
    min-width: 14px;
    padding: 0 3px;
  }

  /* --- Header dropdowns become bottom-up sheets ------------- */
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu {
    animation: mobile-sheet-up 0.22s ease-out;
    border: none !important;
    border-radius: 16px 16px 0 0 !important;
    bottom: 0 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2) !important;
    left: 0 !important;
    margin: 0 !important;
    max-height: 72vh;
    max-width: 100% !important;
    overflow-y: auto;
    padding: 8px 0 16px !important;
    position: fixed !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    z-index: 100001 !important;
  }

  /* Dim the page behind the sheet. */
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu::before {
    background: rgba(0, 0, 0, 0.45);
    bottom: 0;
    content: "";
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
  }

  /* Grip handle at the top of the sheet. */
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu::after {
    background: #d9d9d9;
    border-radius: 3px;
    content: "";
    display: block;
    height: 4px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: 8px;
    width: 40px;
  }

  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu > li {
    float: none;
    width: 100%;
  }

  /* Roomy rows with the icon leading the label. */
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu > li > a {
    align-items: center;
    display: flex !important;
    font-size: 15px;
    gap: 14px;
    padding: 15px 20px !important;
    white-space: normal;
  }

  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu > li > a i,
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu > li > a svg {
    font-size: 17px;
    height: 17px;
    width: 17px;
  }

  /* One separator, on the row itself. The theme also draws a border on these
     anchors, so a second rule here produced the pair of hairlines — the anchor
     border is cleared and the li carries the single line, edge to edge. */
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu > li > a {
    border: 0 !important;
  }

  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu > li + li {
    border-top: 1px solid #f0f1f3;
  }

  /* Metronic's pointer arrow makes no sense on a sheet. */
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu:has(> li)::marker,
  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu > .arrow {
    display: none !important;
  }

  /* Notification list fills the sheet width. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu .dropdown-menu-list {
    max-height: 52vh !important;
    width: 100% !important;
  }
}

/* --- Mobile header refinements ------------------------------ */
@media (max-width: 991px) {
  /* Sit hard against the right edge — no dead space. */
  .page-header.navbar .top-menu .navbar-nav {
    gap: 2px;
    margin-right: 0 !important;
    padding-right: 4px;
  }

  .page-header.navbar .top-menu .navbar-nav > li:last-child > a {
    padding-right: 4px !important;
  }

  /* Bigger, easier-to-hit bell. */
  .page-header.navbar .top-menu .dropdown-notification > a svg,
  .page-header.navbar .top-menu .dropdown-notification > a i {
    height: 24px !important;
    width: 24px !important;
    font-size: 22px !important;
  }

  /* Perfect circle, soft outline — a hard black ring reads badly. */
  .page-header.navbar .top-menu .dropdown-user .img-circle {
    aspect-ratio: 1 / 1;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
    flex: 0 0 32px;
    height: 32px !important;
    min-width: 32px;
    object-fit: cover;
    padding: 0 !important;
    width: 32px !important;
  }

  /* Notifications open as a right-hand drawer rather than a bottom sheet. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu {
    animation: mobile-drawer-in 0.25s ease-out !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.22) !important;
    height: 100vh;
    left: auto !important;
    max-height: 100vh;
    max-width: 380px !important;
    padding-top: 12px !important;
    right: 0 !important;
    top: 0 !important;
    width: 86vw !important;
  }

  /* No grip handle on the side drawer. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu::after {
    display: none;
  }

  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu .dropdown-menu-list {
    max-height: calc(100vh - 120px) !important;
  }
}

@keyframes mobile-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* --- Splash + login spacing refinements --------------------- */
/* Translucent white plate behind the mark so the logo reads against the
   photographic background. */
.mobile-splash-plate {
  align-items: center;
  animation: mobile-splash-mark 0.6s ease-out both;
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18);
  display: flex;
  justify-content: center;
  padding: 22px 30px;
}

.mobile-splash-plate .mobile-splash-mark {
  animation: none;
  height: 44px;
}

/* Larger Powered by lockup. */
.mobile-splash-powered span {
  font-size: 13px;
}

.mobile-splash-powered img {
  height: 30px;
}

@media (max-width: 991px) {
  /* Pull the heading up — the container was centring against a tall
     min-height and leaving dead space above it. */
  .login .container {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 8px;
  }

  body .login {
    padding-top: 8px;
  }

  .login h2 {
    margin-bottom: 14px;
    margin-top: 0;
  }

  /* Roomier login card. */
  .login-panel {
    padding: 26px 18px 30px;
  }

  .login .login-form .form-group {
    margin-bottom: 18px;
  }

  .login .form-control,
  .login input[type="text"],
  .login input[type="password"] {
    height: 46px;
  }
}

/* --- Locked screen ------------------------------------------ */
/* Centre the Assure mark at the top of the panel. */
.lock-body ~ *,
.login-form > .logo {
  text-align: center;
}

.login-form > .logo img {
  display: block;
  margin: 0 auto 10px;
}

/* Organisation lockup (partner logo + name) reads as the page's identity,
   so give it room and weight rather than letting it sit as a faint row. */
.lock-avatar-block {
  color: #1d1d1d;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.lock-avatar-block .lock-avatar {
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  display: block;
  height: 80px;
  margin: 0 auto 10px;
  object-fit: cover;
  width: 80px;
}

.lock-avatar-block p a {
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 991px) {
  .login-form > .logo img {
    width: 96px !important;
  }

  /* Partner logos stack and centre instead of floating left/right. */
  .login .col-md-6.pull-left,
  .login .col-md-6.pull-right {
    float: none !important;
    text-align: center;
    width: 100%;
  }

  .login .col-md-6.pull-left img,
  .login .col-md-6.pull-right img {
    display: inline-block;
    margin: 8px auto;
    max-width: 60vw;
  }

  .lock-body .lock-avatar-block {
    font-size: 16px;
  }
}

/* --- Top bar alignment + affordance ------------------------- */
@media (max-width: 991px) {
  /* Bell and avatar sat on different baselines because each anchor kept the
     theme's own padding/line-height. One flex row, one height, centred. */
  .page-header.navbar .top-menu .navbar-nav {
    align-items: center !important;
    display: flex !important;
    height: 48px;
  }

  .page-header.navbar .top-menu .navbar-nav > li,
  .page-header.navbar .top-menu .navbar-nav > li > a {
    align-items: center !important;
    display: flex !important;
    height: 48px;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* The chevron this rule used to draw is now a real element in Header.jsx
     (.hdrOrgCaret), which renders at every width and rotates on .open. Both
     together produced two arrows on mobile, so the pseudo-element is
     suppressed rather than removed — the selector stays as a signpost. */
  .page-header.navbar .top-menu .dropdown-user > a::after {
    content: none;
  }

  /* Notification drawer covers the screen on mobile. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu {
    max-width: 100vw !important;
    width: 100vw !important;
  }

  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu .dropdown-menu-list {
    max-height: calc(100vh - 130px) !important;
    width: 100% !important;
  }

  /* Header row: title left, close/actions right. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external {
    align-items: center;
    border-bottom: 1px solid #eff0f2;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
  }
}

/* --- Card headline + noise columns -------------------------- */
@media (max-width: 991px) {
  /* Row numbers add nothing to a card. */
  table.table > tbody > tr > td.mobile-noise {
    display: none !important;
  }

  /* Headline (Applicant Name and the like) leads the tile: label above,
     value large, no competing right-aligned column. */
  table.table > tbody > tr > td.mobile-primary {
    display: block !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    padding-top: 4px !important;
    text-align: left !important;
  }

  table.table > tbody > tr > td.mobile-primary::before {
    color: #8f8f8f;
    display: block;
    flex: none;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
    text-transform: uppercase;
  }
}

/* --- Notification detail inside the drawer ------------------ */
/* Desktop keeps the modal; this panel is mobile only. */
.notification-detail-mobile {
  display: none;
}

@media (max-width: 991px) {
  .notification-detail-mobile {
    display: block;
    padding: 4px 16px 16px;
  }

  /* With a detail open, the list steps aside. */
  .notification-detail-mobile ~ li {
    display: none !important;
  }

  .notification-detail-head {
    align-items: center;
    border-bottom: 1px solid #eff0f2;
    display: flex;
    gap: 12px;
    padding-bottom: 10px;
  }

  .notification-back {
    align-items: center;
    color: var(--haifin-Primary-Color, #8a1538) !important;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 4px;
    text-decoration: none !important;
  }

  .notification-detail-type {
    color: #1d1d1d;
    font-size: 14px;
    font-weight: 600;
  }

  .notification-detail-time {
    color: #8f8f8f;
    font-size: 11px;
    padding: 10px 0 4px;
  }

  .notification-detail-text {
    color: #1d1d1d;
    font-size: 14px;
    line-height: 21px;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    white-space: pre-wrap;
  }

  /* --- Card name/value weights ----------------------------- */
  /* Label bold, value regular. */
  table.table > tbody > tr > td {
    font-weight: 400 !important;
  }

  table.table > tbody > tr > td[data-label]::before {
    font-weight: 700 !important;
  }
}

/* --- Toolbar: title + action on line one, search on line two -- */
@media (max-width: 991px) {
  .customs-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 10px;
  }

  .customs-toolbar > .d-flex,
  .customs-toolbar .page-heading,
  .customs-toolbar h1 {
    flex: 1 1 auto;
    min-width: 0;
  }

  .customs-toolbar .page-heading {
    font-size: 17px;
  }

  /* Primary action stays on the first line, beside the title. */
  .customs-toolbar .btn-toolbar,
  .customs-toolbar .btn-toolbarNew,
  .customs-toolbar .toptoolbar {
    flex: 0 0 auto;
    float: none !important;
    margin: 0 !important;
    order: 2;
  }

  /* Search drops to its own full-width line. */
  .customs-toolbar .sideSearchBar,
  .customs-toolbar .searchBar,
  .customs-toolbar .input-group,
  .customs-toolbar input[type="search"],
  #searchINP {
    flex: 1 1 100%;
    order: 3;
    width: 100% !important;
  }

  /* --- Empty list ------------------------------------------- */
  /* One tall tile filling the visible area, message centred. */
  table.table > tbody > tr.no-records-row {
    align-items: center;
    display: flex !important;
    justify-content: center;
    min-height: calc(100vh - 230px);
    padding: 0;
  }

  table.table > tbody > tr.no-records-row > td {
    border: none !important;
    display: block !important;
    text-align: center !important;
    width: 100%;
  }

  table.table > tbody > tr.no-records-row > td::before {
    display: none !important;
  }

  table.table > tbody > tr.no-records-row > td span {
    color: #8f8f8f !important;
    font-size: 14px !important;
  }

  /* Nothing to page through when the list is empty. */
  .pagination-empty {
    display: none !important;
  }
}

/* --- Notification drawer header ----------------------------- */
@media (max-width: 991px) {
  /* Heading and Read All on one baseline. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external {
    align-items: center !important;
    gap: 10px;
  }

  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external h3 {
    align-items: center;
    color: #1d1d1d;
    display: flex;
    flex: 1 1 auto;
    font-size: 14px;
    gap: 6px;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Pending count reads as a badge. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external h3 .bold {
    background: rgba(138, 21, 56, 0.1);
    border-radius: 11px;
    color: var(--haifin-Primary-Color, #8a1538);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    padding: 1px 9px;
    white-space: nowrap;
  }

  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external > a {
    align-self: center;
    color: var(--haifin-Primary-Color, #8a1538) !important;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
  }

  /* Detail header uses the same alignment and spacing as the list header. */
  .notification-detail-head {
    justify-content: space-between;
    min-height: 32px;
  }

  .notification-detail-type {
    flex: 1 1 auto;
    text-align: right;
  }
}

/* --- Guarantee Associations toolbar ------------------------- */
/* This screen does not use .customs-toolbar: it is a flex row holding the
   title, a toggle and the search box. display:contents lifts the toggle and
   the search out of their wrapper so they can wrap independently — title and
   toggle on line one, search full width on line two. */
@media (max-width: 991px) {
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center {
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .col-md-12.px-0.d-flex.justify-content-between.align-items-center > .d-flex {
    display: contents;
  }

  .chart-title.align-left {
    flex: 1 1 auto;
    font-size: 16px;
    margin: 0 !important;
  }

  /* Toggle stays on the first line, beside the title. */
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .d-flex.align-items-center {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Search takes its own line. */
  .searchInptWrp {
    flex: 1 1 100%;
    margin-right: 0 !important;
    order: 5;
    width: 100%;
  }

  .searchInptWrp input {
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  /* --- Notification drawer: inset, with a close control ------ */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu {
    border-radius: 14px !important;
    bottom: 14px !important;
    height: auto !important;
    left: 14px !important;
    max-height: none !important;
    max-width: none !important;
    right: 14px !important;
    top: 14px !important;
    width: auto !important;
  }

  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu .dropdown-menu-list {
    max-height: calc(100vh - 190px) !important;
  }

  .notification-close {
    color: #8f8f8f !important;
    font-size: 18px;
    line-height: 1;
    padding: 4px !important;
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 2;
  }

  /* Room for the X above the heading row. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external {
    flex-wrap: wrap;
    padding-top: 34px !important;
    position: relative;
  }

  /* Heading and Read All share the same baseline row. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external h3 {
    flex: 1 1 auto;
  }

  .notification-readall {
    align-self: center !important;
    flex: 0 0 auto;
  }
}

/* --- Empty list: no trailing gap ---------------------------- */
@media (max-width: 991px) {
  /* Datatable sets margin-bottom inline (40px / 120px) on the table, which is
     what left a band of white under "No records found". */
  table.table,
  .table-scrollable > table,
  .table-responsive > table {
    margin-bottom: 0 !important;
  }

  .table-scrollable,
  .table-responsive,
  .dataTables_wrapper {
    margin-bottom: 0 !important;
  }

  /* The tile ends where the visible area ends — no more, no less. */
  table.table > tbody > tr.no-records-row {
    margin-bottom: 0;
    min-height: calc(100vh - 210px);
  }

  /* Portlet keeps no extra padding under an empty grid. */
  .portlet.light .portlet-body:last-child {
    padding-bottom: 0 !important;
  }
}

/* --- Drawer scrim + bell colour ----------------------------- */
@media (max-width: 991px) {
  /* The scrim used to be a ::before on the menu, but the menu scrolls
     (overflow-y: auto), which clipped it to the menu box. The parent li is
     not a scroll container, so it can host the full-viewport dim. */
  .page-header.navbar .top-menu .dropdown.open::before {
    background: rgba(0, 0, 0, 0.4);
    bottom: 0;
    content: "";
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100000;
  }

  .page-header.navbar .top-menu .dropdown.open > .dropdown-menu::before {
    display: none;
  }

  /* Keep the bell grey; nothing should darken it to black. */
  .page-header.navbar .top-menu .dropdown-notification > a svg path {
    fill: #636363 !important;
  }

  .page-header.navbar .top-menu .dropdown-notification > a i {
    color: #636363 !important;
  }

  .page-header.navbar .top-menu .dropdown-notification > a svg {
    fill: none !important;
  }
}

/* Bell keeps its colour after the dropdown has been opened and closed —
   Bootstrap leaves .open / :focus styling on the toggle. */
@media (max-width: 991px) {
  .page-header.navbar .top-menu .dropdown-notification > a,
  .page-header.navbar .top-menu .dropdown-notification > a:hover,
  .page-header.navbar .top-menu .dropdown-notification > a:focus,
  .page-header.navbar .top-menu .dropdown-notification > a:active,
  .page-header.navbar .top-menu .dropdown-notification.open > a {
    background: transparent !important;
    color: #636363 !important;
  }

  .page-header.navbar .top-menu .dropdown-notification > a:hover svg path,
  .page-header.navbar .top-menu .dropdown-notification > a:focus svg path,
  .page-header.navbar .top-menu .dropdown-notification > a:active svg path,
  .page-header.navbar .top-menu .dropdown-notification.open > a svg path {
    fill: #636363 !important;
  }
}

/* --- Locked screen: drop the Assure mark on mobile ---------- */
/* Scoped via :has(.lock-body) so only the Locked screen is affected — the
   login screen's own logo blocks are left alone. Screen real estate is tight
   and the organisation lockup below already carries the identity. */
@media (max-width: 991px) {
  .login-form:has(.lock-body) > .logo {
    display: none !important;
  }

  /* Fallback for engines without :has — keep it centred at least. */
  .login-form > .logo {
    text-align: center;
  }

  .login-form > .logo img {
    display: block;
    margin: 0 auto;
  }
}

/* --- Notification header: Read All beside the close X ------- */
@media (max-width: 991px) {
  /* Read All shares the top row with the X instead of hanging off the
     heading line, which read as misaligned. */
  .notification-readall {
    font-size: 13px;
    line-height: 18px;
    position: absolute;
    right: 40px;
    top: 12px;
  }

  .notification-close {
    line-height: 18px;
    padding: 0 !important;
    right: 14px;
    top: 12px;
  }

  /* Heading sits on its own line beneath that row. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external {
    align-items: flex-start !important;
    padding-top: 40px !important;
  }

  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external h3 {
    flex: 1 1 100%;
  }
}

/* --- Drawer submenus size to their content ------------------ */
/* The submenu <ul> carries an inline max-height of 80px, and the theme gives
   #sidebar-mobile .collapsing a fixed 85px — so a two-item submenu still
   reserved the height of four, leaving a gap under it. */
@media (max-width: 992px) {
  #sidebar-mobile .collapse.in,
  #sidebar-mobile .collapsing,
  #sidebar-mobile ul.collapse {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  #sidebar-mobile ul.list-unstyled.components {
    margin-bottom: 0 !important;
  }

  #sidebar-mobile ul.collapse > li > a {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
  }
}

/* --- Drawer: desktop colour treatment + footer -------------- */
@media (max-width: 992px) {
  #sidebar-mobile {
    display: flex !important;
    flex-direction: column;
  }

  #sidebar-mobile .sidebar-mobile-container {
    flex: 1 1 auto;
    /* Without this a flex item will not shrink below its content, so a long
       menu pushes over the pinned footer instead of scrolling. */
    min-height: 0;
    overflow-y: auto;
  }

  /* Match the desktop menu palette rather than the flat #333 default. */
  #sidebar-mobile ul.list-unstyled.components > li > a {
    align-items: center;
    color: #bcc5c9;
    display: flex;
    font-size: 14px;
    gap: 10px;
    padding: 13px 16px;
    text-decoration: none;
  }

  #sidebar-mobile ul.list-unstyled.components > li > a[aria-expanded="true"] {
    background: var(--haifin-Primary-Color, #8a1538);
    color: #fcfcfc;
  }

  #sidebar-mobile ul.collapse > li > a {
    color: #bcc5c9;
    font-size: 13px;
    padding-left: 40px !important;
  }

  #sidebar-mobile ul.collapse > li > a:hover,
  #sidebar-mobile ul.collapse > li > a:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  /* Portal label, relocated from the top bar where a phone has no room for
     it. Sits between the Menu heading and the menu itself, so it is the first
     thing in the drawer. Same tint and weight as the desktop .env-label, so it
     reads as the same element rather than a new one. */
  .sidebar-mobile-env {
    background: #fff8f8;
    border-radius: 7px;
    flex: 0 0 auto;
    margin: 12px;
    padding: 8px 10px;
    text-align: center;
  }

  .sidebar-mobile-env h3.env-text {
    color: #2c2c2c;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
  }

  /* Shown in the drawer at this width, so the top-bar copy is suppressed —
     otherwise the label would appear twice. */
  .page-header.navbar .top-menu .navbar-nav > li.env-label {
    display: none !important;
  }

  /* Footer line + copyright, as on desktop. */
  .sidebar-mobile-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    flex: 0 0 auto;
    font-size: 11px;
    padding: 14px 16px;
    text-align: center;
  }
}

/* --- Selected menu item, as on desktop ---------------------- */
@media (max-width: 992px) {
  /* Current page. */
  #sidebar-mobile ul.collapse > li.active-item > a {
    background: var(--haifin-Primary-Color, #8a1538);
    border-radius: 4px;
    color: #fff !important;
    font-weight: 600;
  }

  /* Section containing the current page. */
  #sidebar-mobile ul.list-unstyled.components > li.active-parent > a {
    color: #fff;
    font-weight: 600;
  }

  #sidebar-mobile ul.list-unstyled.components > li.active-parent > a i {
    color: var(--haifin-Primary-Color, #8a1538);
  }
}

/* --- Hover / press feedback, as on desktop ------------------ */
@media (max-width: 992px) {
  /* Touch has no hover, so :active carries the same treatment — the row
     responds while the finger is down. */
  #sidebar-mobile ul.list-unstyled.components > li > a:hover,
  #sidebar-mobile ul.list-unstyled.components > li > a:focus,
  #sidebar-mobile ul.list-unstyled.components > li > a:active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  #sidebar-mobile ul.collapse > li > a:hover,
  #sidebar-mobile ul.collapse > li > a:focus,
  #sidebar-mobile ul.collapse > li > a:active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  /* The selected row keeps its own colour on hover rather than washing out. */
  #sidebar-mobile ul.collapse > li.active-item > a:hover,
  #sidebar-mobile ul.collapse > li.active-item > a:focus,
  #sidebar-mobile ul.collapse > li.active-item > a:active {
    background: var(--haifin-Primary-Color, #8a1538);
    color: #fff !important;
  }

  #sidebar-mobile ul.list-unstyled.components > li > a,
  #sidebar-mobile ul.collapse > li > a {
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
}


/* --- Drawer palette taken from the desktop rules ------------
   branding.css: sub-menu links #BCC5C9; active/open/hover get
   background var(--Theme-Primary-Color) with #fff text; panel is
   var(--Theme-Secondary-Color). Note --haifin-Primary-Color is #000 in this
   theme, which is why using it earlier made the selection look black.
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  #sidebar-mobile {
    background: var(--Theme-Secondary-Color, #212121) !important;
  }

  #sidebar-mobile ul.list-unstyled.components > li > a {
    color: #bcc5c9 !important;
  }

  #sidebar-mobile ul.list-unstyled.components > li > a > i {
    color: var(--haifin-Primary-Color) !important;
  }

  /* Section header: current or hovered turns white. */
  #sidebar-mobile ul.list-unstyled.components > li.active-parent > a,
  #sidebar-mobile ul.list-unstyled.components > li > a:hover,
  #sidebar-mobile ul.list-unstyled.components > li > a:focus,
  #sidebar-mobile ul.list-unstyled.components > li > a:active,
  #sidebar-mobile ul.list-unstyled.components > li.active-parent > a > i,
  #sidebar-mobile ul.list-unstyled.components > li > a:hover > i {
    color: #fff !important;
  }

  #sidebar-mobile ul.list-unstyled.components > li > a[aria-expanded="true"] {
    background: transparent;
  }

  /* Submenu rows. */
  #sidebar-mobile ul.collapse > li > a {
    background: transparent;
    color: #bcc5c9 !important;
    font-size: 14px;
    font-weight: 500;
  }

  /* Selected and hovered use the theme primary, as on desktop. */
  #sidebar-mobile ul.collapse > li.active-item > a,
  #sidebar-mobile ul.collapse > li > a:hover,
  #sidebar-mobile ul.collapse > li > a:focus,
  #sidebar-mobile ul.collapse > li > a:active {
    background: var(--Theme-Primary-Color, #e00800) !important;
    color: #fff !important;
  }
}

/* --- Notification header: Read All and X side by side -------- */
@media (max-width: 991px) {
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external {
    align-items: center !important;
    display: flex;
    flex-wrap: wrap;
    padding-top: 12px !important;
  }

  /* Row one: Read All then the close button, both right-aligned. */
  .notification-readall {
    margin-left: auto !important;
    margin-right: 10px !important;
    order: 1;
    position: static !important;
  }

  /* Circular button so the X reads as a control. */
  .notification-close {
    align-items: center;
    background: #f4f4f4;
    border-radius: 50%;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    order: 2;
    position: static !important;
    width: 30px;
  }

  /* Row two: the heading. */
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external h3 {
    flex: 1 1 100%;
    margin-top: 10px !important;
    order: 3;
  }
}


/* --- Stacking order, one place ------------------------------
   burger 10002 < drawer 100050 < modal 100060/61 < date picker 100080 <
   select sheet 100090/91. A sheet opened from inside a modal must sit above
   that modal, otherwise it renders behind it and looks like nothing happened.
   ------------------------------------------------------------ */
.mobile-sheet-backdrop {
  z-index: 100090 !important;
}

.mobile-sheet {
  z-index: 100091 !important;
}

@media (max-width: 991px) {
  .react-datepicker-popper,
  .react-datepicker,
  .datepicker.dropdown-menu,
  .bootstrap-datetimepicker-widget.dropdown-menu {
    z-index: 100080 !important;
  }
}

/* --- Notification header, final layout ----------------------
   One row: heading far left, then Read All, then the close button hard
   right. Earlier rules pushed the heading onto its own line, which put the X
   on the left of the row above it.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    padding: 14px 16px !important;
  }

  .page-header.navbar .top-menu .dropdown-notification.open > .dropdown-menu > .external h3 {
    flex: 1 1 auto !important;
    margin: 0 !important;
    order: 1 !important;
    text-align: left;
  }

  .notification-readall {
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 2 !important;
    position: static !important;
  }

  .notification-close {
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 3 !important;
    position: static !important;
  }
}


/* --- Drawer icons and stable rows ---------------------------
   The icon colour came from --haifin-Primary-Color, which is #000000 in this
   theme — black on the dark panel, so icons only appeared once a state rule
   turned them white. Light by default, white when current.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  #sidebar-mobile ul.list-unstyled.components > li > a > i,
  #sidebar-mobile ul.list-unstyled.components > li > a i {
    color: #bcc5c9 !important;
    min-width: 18px;
    text-align: center;
  }

  #sidebar-mobile ul.list-unstyled.components > li.active-parent > a > i,
  #sidebar-mobile ul.list-unstyled.components > li > a:hover > i,
  #sidebar-mobile ul.list-unstyled.components > li > a:focus > i,
  #sidebar-mobile ul.list-unstyled.components > li > a:active > i {
    color: #fff !important;
  }

  /* Rows jumped on tap because the active/hover state changed font-weight,
     which re-measures the text. Keep the weight fixed and let colour alone
     carry the state. */
  #sidebar-mobile ul.list-unstyled.components > li > a,
  #sidebar-mobile ul.list-unstyled.components > li.active-parent > a,
  #sidebar-mobile ul.collapse > li > a,
  #sidebar-mobile ul.collapse > li.active-item > a {
    border: none !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  /* Bell sized to sit level with the organisation logo beside it. */
  .page-header.navbar .top-menu .dropdown-notification > a svg,
  .page-header.navbar .top-menu .dropdown-notification > a i {
    height: 30px !important;
    width: 30px !important;
    font-size: 26px !important;
  }
}

/* --- Stop the submenu shifting on tap -----------------------
   Two causes: Bootstrap animates .collapse/.collapsing height, and the rows
   had no fixed height so any state change re-measured them.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  #sidebar-mobile .collapse,
  #sidebar-mobile .collapsing,
  #sidebar-mobile ul.collapse {
    transition: none !important;
  }

  #sidebar-mobile ul.collapse > li {
    margin: 0 !important;
  }

  #sidebar-mobile ul.collapse > li > a {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    line-height: 20px !important;
    min-height: 42px;
    padding-bottom: 11px !important;
    padding-top: 11px !important;
  }

  /* Selected row must not change any box property — colour only. */
  #sidebar-mobile ul.collapse > li.active-item > a {
    border-radius: 0 !important;
    line-height: 20px !important;
    min-height: 42px;
    padding-bottom: 11px !important;
    padding-left: 40px !important;
    padding-top: 11px !important;
  }

  #sidebar-mobile ul.list-unstyled.components > li > a {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    line-height: 20px !important;
    min-height: 46px;
    padding-bottom: 13px !important;
    padding-top: 13px !important;
  }
}

/* --- Close button is a mobile-only control ------------------
   The X is rendered unconditionally in Header.jsx; on desktop the dropdown
   closes by clicking away, so it should not appear there.
   ------------------------------------------------------------ */
.notification-close {
  display: none !important;
}

@media (max-width: 991px) {
  .notification-close {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
  }
}

/* ============================================================
   Modals on mobile — single source of truth
   One inset panel with a dimmed page behind, its body the only scroller,
   fields stacked full width. Stacking: burger 10002 < drawer 100050 <
   modal 100060/61 < date picker 100080 < select sheet 100090/91.
   ============================================================ */
@media (max-width: 991px) {
  .ReactModal__Overlay {
    background-color: rgba(19, 19, 19, 0.55) !important;
    z-index: 100060 !important;
  }

  .ReactModal__Content {
    border-radius: 14px !important;
    bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    left: 16px !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    overflow: hidden !important;
    right: 16px !important;
    top: 16px !important;
    transform: none !important;
    width: auto !important;
    z-index: 100061 !important;
  }

  /* The card fills the panel; its body is the single scrolling area. */
  .ReactModal__Content > .portlet,
  .ReactModal__Content > div > .portlet {
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .ReactModal__Content .portlet-title {
    flex: 0 0 auto;
  }

  .ReactModal__Content .portlet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Paired fields stack: Department, Maker, Checker, Comments. */
  .ReactModal__Content .col-md-6,
  .ReactModal__Content .col-md-4,
  .ReactModal__Content .col-md-3 {
    float: none !important;
    width: 100% !important;
  }

  .ReactModal__Content .form-control,
  .ReactModal__Content input[type="text"],
  .ReactModal__Content select,
  .ReactModal__Content textarea {
    font-size: 16px;
    width: 100% !important;
  }

  /* Burger must not float over an open panel. */
  body.ReactModal__Body--open .sidebar-mobile-navbar-btn {
    display: none !important;
  }

  /* Date pickers and select sheets must clear the panel. */
  .react-datepicker-popper,
  .react-datepicker,
  .datepicker.dropdown-menu,
  .bootstrap-datetimepicker-widget.dropdown-menu {
    border-radius: 16px 16px 0 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    position: fixed !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: 100080 !important;
  }
}

.mobile-sheet-backdrop { z-index: 100090 !important; }
.mobile-sheet { z-index: 100091 !important; }

/* --- Maker / Checker stack, and sheet first option ---------- */
@media (max-width: 991px) {
  /* Checker sits under Maker; side by side it is unreadable on a phone. */
  .ReactModal__Content .user-wrapper,
  .ReactModal__Content .user-wrapper ul,
  .guarantee-modal .user-wrapper,
  .guarantee-modal .user-wrapper ul {
    display: block !important;
    float: none !important;
    width: 100% !important;
  }

  .ReactModal__Content .user-wrapper ul li,
  .guarantee-modal .user-wrapper ul li {
    display: block !important;
    float: none !important;
    margin-bottom: 8px;
    width: 100% !important;
  }

  .ReactModal__Content .sub-head {
    margin-top: 12px;
  }
}

/* The first row sat under the grip and header, clipping its text. */
.mobile-sheet-list {
  padding-top: 2px;
}

.mobile-sheet-option:first-child {
  padding-top: 16px;
}

.mobile-sheet-option {
  align-items: center;
  line-height: 20px;
  min-height: 48px;
}

/* --- Guarantee Associations header, explicit order ----------
   Line 1: title. Line 2: Show New Guarantees + toggle, then Assign to
   Selected. Search follows on its own line. display:contents lifts the
   wrapper's children so they can be ordered independently.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    row-gap: 10px;
  }

  .col-md-12.px-0.d-flex.justify-content-between.align-items-center > .d-flex {
    display: contents !important;
  }

  /* Line 1 — title on its own. */
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center > .chart-title {
    flex: 1 1 100% !important;
    font-size: 16px;
    margin: 0 !important;
    order: 1 !important;
  }

  /* Line 2 — toggle group, then the Assign button. */
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .d-flex.align-items-center {
    flex: 0 0 auto !important;
    font-size: 12px;
    order: 2 !important;
    white-space: nowrap;
  }

  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .btn.btn-Primary {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    order: 3 !important;
    white-space: nowrap;
  }

  /* Line 3 — search. */
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .searchInptWrp {
    flex: 1 1 100% !important;
    margin-right: 0 !important;
    order: 4 !important;
    width: 100% !important;
  }
}

/* --- Assign modal: the row is d-flex ------------------------
   Maker/Checker sit in <div class="row d-flex"> with col-md-6 children.
   Because that row is a flex container, width:100% alone cannot stack them —
   the direction has to change.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .ReactModal__Content .row.d-flex,
  .guarantee-modal .row.d-flex {
    display: block !important;
  }

  .ReactModal__Content .row.d-flex > [class*="col-md-"],
  .guarantee-modal .row.d-flex > [class*="col-md-"] {
    display: block !important;
    margin-bottom: 14px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  /* Floating field label was clipped by the input block. */
  .ReactModal__Content .input-block {
    overflow: visible !important;
    padding-top: 6px;
  }

  .ReactModal__Content .input-block .placeholder,
  .guarantee-modal .input-block .placeholder {
    display: block !important;
    line-height: 16px !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: static !important;
    white-space: normal !important;
  }

  /* The department list itself stays a normal control height. */
  .ReactModal__Content .input-block select[multiple] {
    height: 44px !important;
    margin-top: 4px;
  }
}

/* --- Empty grid fills the page ------------------------------
   A fixed min-height could not know how tall each screen's header was (this
   page has three header lines). Make the chain from portlet down to tbody a
   flex column so the empty row simply takes the remaining space.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .page-content .portlet.light {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 110px);
  }

  .page-content .portlet.light > .portlet-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .page-content .table-scrollable,
  .page-content .table-responsive,
  .page-content .dataTables_wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .page-content table.table {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .page-content table.table > tbody {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  /* Takes whatever is left, down to the bottom of the page. */
  .page-content table.table > tbody > tr.no-records-row {
    flex: 1 1 auto;
    min-height: 160px;
  }
}

/* ============================================================
   Assign modal — final override
   Panel sizes to its content and is bottom-anchored, so there is no empty
   band and only one scroller. Supersedes the fixed-height rules above.
   ============================================================ */
@media (max-width: 991px) {
  .ReactModal__Content {
    bottom: 16px !important;
    height: auto !important;
    max-height: calc(100vh - 32px) !important;
    top: auto !important;
  }

  /* Card and body size to content; the body scrolls only when it must. */
  .ReactModal__Content > .portlet,
  .ReactModal__Content > div > .portlet {
    height: auto !important;
    max-height: calc(100vh - 32px) !important;
  }

  .ReactModal__Content .portlet-body {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
  }

  /* Maker / Checker headings sized for a phone. */
  .guarantee-modal .sub-head,
  .ReactModal__Content .sub-head {
    font-size: 13px !important;
    line-height: 18px !important;
    margin: 0 0 6px !important;
  }

  /* User lists: no fixed height, no inner scrollbar unless long. */
  .guarantee-modal .user-wrapper,
  .ReactModal__Content .user-wrapper {
    height: auto !important;
    max-height: 130px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 6px 10px !important;
  }

  .guarantee-modal .user-wrapper ul li,
  .ReactModal__Content .user-wrapper ul li {
    font-size: 13px !important;
    line-height: 20px !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    word-break: break-word;
  }

  /* Comments label sits above its box, not underneath. */
  .ReactModal__Content .modal-inner textarea {
    margin-top: 4px !important;
    min-height: 80px !important;
  }

  .ReactModal__Content .modal-inner .input-block > span.placeholder {
    margin-bottom: 2px !important;
    order: -1;
  }

  .ReactModal__Content .modal-inner .input-block {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Rows keep tight, even spacing so the panel does not grow needlessly. */
  .ReactModal__Content .modal-inner > .row {
    margin-bottom: 12px !important;
  }
}

/* ============================================================
   Assign modal — fixes from the rendered screenshot
   Content was shifted left and clipped ("Maker" showing as "aker") with a
   horizontal scrollbar: Bootstrap's .row carries margin: 0 -15px, and with
   the column padding zeroed there was nothing to absorb it.
   ============================================================ */
@media (max-width: 991px) {
  .ReactModal__Content .row,
  .ReactModal__Content .row.d-flex,
  .guarantee-modal .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ReactModal__Content [class*="col-md-"],
  .ReactModal__Content [class*="col-sm-"],
  .ReactModal__Content [class*="col-xs-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Nothing inside the panel scrolls sideways. */
  .ReactModal__Content,
  .ReactModal__Content .portlet-body,
  .ReactModal__Content .modal-inner {
    overflow-x: hidden !important;
  }

  .ReactModal__Content .modal-inner {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* TextareaUI renders <textarea> then its label; put the label first. */
  .ReactModal__Content .input-block {
    display: flex !important;
    flex-direction: column !important;
  }

  /* select belongs here too. This block turns the field into a column with the
     label first (order: 1); a control left at the default order: 0 is placed
     BEFORE it, which is why every <select> in these dialogs had its label
     underneath while inputs and textareas did not. */
  .ReactModal__Content .input-block > textarea,
  .ReactModal__Content .input-block > input,
  .ReactModal__Content .input-block > select {
    order: 2;
  }

  .ReactModal__Content .input-block > .placeholder {
    margin-bottom: 4px !important;
    order: 1;
    position: static !important;
  }

  .ReactModal__Content .input-block > .inputTick,
  .ReactModal__Content .input-block > .inputIcon,
  .ReactModal__Content .input-block > .error-message {
    order: 3;
  }
}

/* ============================================================
   Modal panel uses the full height
   Earlier it was bottom-anchored and sized to content to kill an empty band;
   that left the page half used. Pin top and bottom instead and let the body
   flex into the space, so the panel is full height with one scroller.
   ============================================================ */
@media (max-width: 991px) {
  .ReactModal__Content {
    bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    top: 16px !important;
  }

  .ReactModal__Content > .portlet,
  .ReactModal__Content > div > .portlet {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .ReactModal__Content .portlet-title {
    flex: 0 0 auto !important;
  }

  /* The only scrolling region, filling whatever is left. */
  .ReactModal__Content .portlet-body {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .ReactModal__Content .modal-inner {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Lists can breathe now there is height to use. */
  .guarantee-modal .user-wrapper,
  .ReactModal__Content .user-wrapper {
    max-height: 180px !important;
  }
}

/* ============================================================
   Modal as a true full-height sheet
   Top-aligned, edge to edge — no inset band above or below.
   ============================================================ */
@media (max-width: 991px) {
  .ReactModal__Content {
    border-radius: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
  }

  .ReactModal__Content > .portlet,
  .ReactModal__Content > div > .portlet {
    border-radius: 0 !important;
  }

  /* Tighten the gap between the title and the first field. */
  .ReactModal__Content .portlet-title {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    padding-bottom: 10px !important;
    padding-top: 12px !important;
  }

  .ReactModal__Content .portlet-body {
    padding-top: 10px !important;
  }

  .ReactModal__Content .modal-inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .ReactModal__Content .modal-inner > .row:first-child {
    margin-top: 0 !important;
  }

  .ReactModal__Content .input-block:first-child {
    margin-top: 0 !important;
  }

  /* The department box is only a display of the current choice — the sheet
     does the selecting — so drop the native selection highlight. */
  .ReactModal__Content select[multiple] {
    background-color: #fff !important;
    height: 44px !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  .ReactModal__Content select[multiple] option {
    background: #fff !important;
    color: #1d1d1d !important;
    padding: 0 !important;
  }

  .ReactModal__Content select[multiple] option:checked,
  .ReactModal__Content select[multiple] option:hover {
    background: #fff !important;
    color: var(--Theme-Primary-Color, #8a1538) !important;
    font-weight: 600;
  }
}

/* --- Screen header buttons all sit right --------------------
   The header lifts its wrapper with display:contents and orders the children
   explicitly. Any button without an order defaults to 0 and jumps ahead of
   the title — which is what put projectSetup's + on the left.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .addBtn,
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .filterBtn,
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center > button,
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .btn {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    order: 3 !important;
  }

  /* Once one button has pushed right, the rest follow it. */
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .addBtn ~ .addBtn,
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .btn ~ .btn,
  .col-md-12.px-0.d-flex.justify-content-between.align-items-center .addBtn ~ .btn {
    margin-left: 8px !important;
  }

  /* Same treatment for the generic toolbar used by other screens. */
  .customs-toolbar .addBtn,
  .customs-toolbar .btn,
  .customs-toolbar .toptoolbar {
    margin-left: auto !important;
    order: 2 !important;
  }
}

/* ============================================================
   Modal panel: inset with the page showing through
   Supersedes the edge-to-edge rules above — margin on all four sides and a
   translucent grey behind, matching the notification drawer.
   ============================================================ */
@media (max-width: 991px) {
  .ReactModal__Overlay {
    background-color: rgba(19, 19, 19, 0.55) !important;
  }

  .ReactModal__Content {
    border-radius: 14px !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    top: 16px !important;
  }

  .ReactModal__Content > .portlet,
  .ReactModal__Content > div > .portlet {
    border-radius: 14px !important;
    overflow: hidden !important;
  }
}

.mobile-sheet-empty {
  color: #8f8f8f;
  font-size: 13px;
  padding: 22px 16px;
  text-align: center;
}

/* ============================================================
   Panel actions pinned bottom-right
   Buttons stay at the foot of the panel, right aligned, and out of the
   scrolling region so they are always reachable.
   ============================================================ */
@media (max-width: 991px) {
  .ReactModal__Content .btns.d-flex,
  .ReactModal__Content .modal-footer,
  .ReactModal__Content .portlet-body > .btns,
  .ReactModal__Content .btn-toolbar {
    align-items: center !important;
    background: #fff;
    border-top: 1px solid #eff0f2;
    bottom: 0;
    display: flex !important;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    position: sticky;
    z-index: 2;
  }

  /* Sized to their labels, not stretched across the panel. */
  .ReactModal__Content .btns.d-flex .btn,
  .ReactModal__Content .modal-footer .btn,
  .ReactModal__Content .btn-toolbar .btn {
    flex: 0 0 auto !important;
    min-width: 96px;
    width: auto !important;
  }

  /* Room beneath the last field so the bar never covers content. */
  .ReactModal__Content .modal-inner > .row:last-child {
    margin-bottom: 6px !important;
  }
}

/* ============================================================
   Bottom sheet: explicit colours
   The sheet inherited text colour from wherever it rendered — inside a dark
   or themed context that made the options invisible. Nothing here inherits.
   ============================================================ */
.mobile-sheet {
  background: #fff !important;
  color: #1d1d1d !important;
}

.mobile-sheet-title {
  color: #1d1d1d !important;
}

.mobile-sheet-list {
  background: #fff !important;
}

.mobile-sheet-option {
  background: #fff !important;
  color: #1d1d1d !important;
  font-size: 15px !important;
}

.mobile-sheet-option span,
.mobile-sheet-option i {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-sheet-option.selected,
.mobile-sheet-option.selected span,
.mobile-sheet-option.selected i {
  color: var(--Theme-Primary-Color, #8a1538) !important;
  font-weight: 600 !important;
}

.mobile-sheet-option:active {
  background: #f6f6f6 !important;
}

.mobile-sheet-close {
  color: #636363 !important;
}

/* --- Native date inputs on mobile ---------------------------
   These are <input type="date">; the phone opens its own picker (a sheet on
   iOS and Android), so there is no popover to restyle — only the field.
   16px avoids the iOS zoom-on-focus.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    font-size: 16px !important;
    height: 44px !important;
    min-height: 44px;
    width: 100% !important;
  }

  /* Keep the value and the picker button on one line. */
  .input-block input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }

  .input-block input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    padding: 0 2px;
  }
}

/* --- Selected values read as chosen, not as errors -----------
   --Theme-Primary-Color is #e00800 in this skin. It suits the menu's active
   row, but on a form field red means "invalid", so selected values use dark
   bold text with the tick carrying the accent.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .ReactModal__Content select[multiple] option:checked,
  .ReactModal__Content select[multiple] option:hover,
  .ReactModal__Content select option:checked {
    background: #f4f4f4 !important;
    color: #1d1d1d !important;
    font-weight: 600 !important;
  }
}

.mobile-sheet-option.selected,
.mobile-sheet-option.selected span {
  color: #1d1d1d !important;
  font-weight: 600 !important;
}

.mobile-sheet-option.selected {
  background: #f6f6f6 !important;
}

.mobile-sheet-option.selected i {
  color: var(--Theme-Primary-Color, #8a1538) !important;
}

/* --- Selected values: plain text, no emphasis colour --------- */
@media (max-width: 991px) {
  .ReactModal__Content select[multiple] option,
  .ReactModal__Content select[multiple] option:checked,
  .ReactModal__Content select[multiple] option:hover,
  .ReactModal__Content select option,
  .ReactModal__Content select option:checked {
    background: #fff !important;
    color: #1d1d1d !important;
    font-weight: 400 !important;
  }
}

.mobile-sheet-option,
.mobile-sheet-option span,
.mobile-sheet-option.selected,
.mobile-sheet-option.selected span {
  color: #1d1d1d !important;
  font-weight: 400 !important;
}

.mobile-sheet-option.selected {
  background: #fff !important;
}

/* Only the tick marks the choice. */
.mobile-sheet-option.selected i {
  color: #1d1d1d !important;
}

/* --- Panel buttons: always bottom right --------------------- */
@media (max-width: 991px) {
  .ReactModal__Content .btns,
  .ReactModal__Content .btns.d-flex,
  .ReactModal__Content .modal-footer,
  .ReactModal__Content .btn-toolbar {
    justify-content: flex-end !important;
    margin-left: auto !important;
    text-align: right !important;
    width: 100% !important;
  }

  .ReactModal__Content .btns > *,
  .ReactModal__Content .modal-footer > * {
    float: none !important;
  }
}

/* --- Reserve icon space so late fonts cannot shift the menu --
   Font Awesome comes from a CDN. Until it loads each <i> is zero-width, then
   the glyph arrives and pushes the label right — the "dancing" on tap. Fixed
   dimensions mean the row is laid out the same before and after.
   ------------------------------------------------------------ */
#sidebar-mobile i,
#sidebar-mobile .fa,
.sidebar-mobile-container i,
.sidebar-mobile-container .fa {
  box-sizing: content-box;
  display: inline-block !important;
  flex: 0 0 18px;
  font-size: 15px;
  height: 18px;
  line-height: 18px !important;
  min-width: 18px !important;
  text-align: center !important;
  width: 18px !important;
}

@media (max-width: 991px) {
  /* Labels start at a fixed offset whether or not the glyph has arrived. */
  #sidebar-mobile ul.list-unstyled.components > li > a {
    gap: 10px !important;
  }

  #sidebar-mobile ul.collapse > li > a {
    padding-left: 40px !important;
    transition: none !important;
  }

  /* No width animation on the panel contents. */
  #sidebar-mobile * {
    transition-property: background-color, color !important;
  }
}

/* ============================================================
   Compact record cards + detail drawer
   The card carries the first few fields only, so more records fit; the eye
   opens the full record as name/value pairs.
   ============================================================ */
@media (max-width: 991px) {
  /* Fields beyond the headline set live in the drawer. */
  table.table > tbody > tr > td.mobile-extra {
    display: none !important;
  }

  table.table > tbody > tr > td.mobile-primary {
    align-items: baseline;
    display: flex !important;
    justify-content: space-between;
    padding-right: 34px !important;
    position: relative;
  }

  /* Eye control, top-right of each card. */
  .mobile-row-detail {
    align-items: center;
    background: #f4f4f4;
    border-radius: 50%;
    color: #636363 !important;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 2px;
    width: 28px;
  }

  .mobile-row-detail i {
    font-size: 13px;
  }
}

/* Drawer with the full record. */
.mobile-record-backdrop {
  background: rgba(0, 0, 0, 0.45);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100095;
}

.mobile-record-panel {
  background: #fff;
  bottom: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100096;
  animation: mobile-drawer-in 0.25s ease-out;
}

.mobile-record-head {
  align-items: center;
  border-bottom: 1px solid #eff0f2;
  color: #1d1d1d;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: space-between;
  padding: 14px 16px;
}

.mobile-record-head a {
  color: #636363 !important;
  font-size: 17px;
}

.mobile-record-body {
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 16px 20px;
}

.mobile-record-row {
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 11px 0;
}

.mobile-record-label {
  color: #1d1d1d;
  flex: 0 0 42%;
  font-size: 12px;
  font-weight: 700;
}

.mobile-record-value {
  color: #383838;
  flex: 1 1 auto;
  font-size: 13px;
  text-align: right;
  word-break: break-word;
}

/* --- Date sheet --------------------------------------------- */
.mobile-date-sheet {
  padding-bottom: 10px;
}

.mobile-date-nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 10px 16px 6px;
}

.mobile-date-nav span {
  color: #1d1d1d;
  font-size: 14px;
  font-weight: 600;
}

.mobile-date-nav button {
  background: #f4f4f4;
  border: none;
  border-radius: 50%;
  color: #636363;
  height: 30px;
  width: 30px;
}

.mobile-date-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 12px 8px;
}

.mobile-date-dow {
  color: #8f8f8f;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 0;
  text-align: center;
}

.mobile-date-cell {
  align-items: center;
  border-radius: 50%;
  color: #1d1d1d;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 38px;
  justify-content: center;
}

.mobile-date-cell.is-blank {
  pointer-events: none;
}

.mobile-date-cell.is-today {
  box-shadow: inset 0 0 0 1px #d9d9d9;
}

.mobile-date-cell.is-selected {
  background: var(--Theme-Secondary-Color, #212121);
  color: #fff;
  font-weight: 600;
}

.mobile-date-actions {
  border-top: 1px solid #eff0f2;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 10px 16px 4px;
}

.mobile-date-actions button {
  background: #fff;
  border: 1px solid #eff0f2;
  border-radius: 6px;
  color: #383838;
  font-size: 13px;
  padding: 7px 16px;
}

/* ============================================================
   Record cards — final, supersedes the earlier card rules
   Every visible field is a label/value pair: label bold on the left, value
   on the right. The eye sits at the card's top-right and opens the full
   record. Hidden fields live only in that drawer.
   ============================================================ */
@media (max-width: 991px) {
  table.table > tbody > tr {
    padding: 10px 12px 8px !important;
    position: relative !important;
  }

  /* Uniform label/value rows. */
  table.table > tbody > tr > td {
    align-items: baseline !important;
    display: flex !important;
    gap: 12px;
    justify-content: space-between !important;
    padding: 7px 0 !important;
    text-align: right !important;
  }

  table.table > tbody > tr > td[data-label]::before {
    color: #1d1d1d !important;
    content: attr(data-label);
    flex: 0 0 45%;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: none !important;
  }

  /* Headline row: same shape, slightly larger value, room for the eye. */
  table.table > tbody > tr > td.mobile-primary {
    display: flex !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding-right: 38px !important;
  }

  table.table > tbody > tr > td.mobile-primary::before {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Eye anchored to the card, not to a cell. */
  .mobile-row-detail {
    position: absolute !important;
    right: 10px !important;
    top: 8px !important;
  }

  /* Serial number and hidden id never appear on a card. */
  table.table > tbody > tr > td.mobile-noise,
  table.table > tbody > tr > td.mobile-extra {
    display: none !important;
  }
}

/* The record drawer runs the full height. */
.mobile-record-panel {
  height: 100vh;
  max-width: 420px;
}

/* --- Grid header never shows on cards -----------------------
   Each card prints its own labels from data-label, so the column header row
   is redundant. Stated with !important because the table is switched to a
   flex column elsewhere and the theme also styles thead.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  table.table > thead,
  table.gridTable > thead,
  .table-scrollable > table > thead,
  .table-responsive > table > thead,
  .dataTables_wrapper table > thead,
  table.table thead.flip-content {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
}

/* --- BG listing: phone layout -------------------------------
   Line 1: currency + filter
   Line 2: refresh dial + graph/data toggle
   Then:   graph tiles, or (in data view) search, tabs and records.
   Source order in BGListingContainer is the desktop order, so the pieces are
   reordered here with flex `order` rather than duplicated in the JSX. */
@media (max-width: 991px) {
  .bgToolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: flex-start !important;
    /* Keeps the filter button and the toggle off the screen edge. */
    padding-left: 12px;
    padding-right: 12px;
  }

  .bgToolbar .currency-converter {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
  }

  .bgToolbar .customDropdownWrp {
    flex: 0 0 auto;
    order: 2;
    padding-right: 0 !important;
  }

  /* Second line: the refresh dial sits left, the toggle is pushed right by
     its auto margin. flex-basis is auto (not 100%) so both fit on one line. */
  .bgToolbar .bgRefresh {
    flex: 0 0 auto;
    /* Eats the free space on this line, so whatever follows — pager and
       toggle in the graph view, toggle alone in the data view — stays pinned
       to the right edge. */
    margin-right: auto !important;
    order: 4;
  }

  /* Explicit, distinct order values across the toolbar:
     1 currency · 2 filter · 3 line break · 4 timer · 5 pager · 6 toggle.
     Ties would fall back to source order, which is the desktop order. */

  /* Forces a line break between the filter and the timer. The pseudo-element
     must sit on the flex container (where it is itself a flex item) — on a
     child it would just be content inside that child and break nothing.
     `order` slots it between the two groups. */
  .bgToolbar::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 3;
  }

  /* "Refreshing In:" and "seconds" are dropped; the dial plus "sec" says it
     in the space available. */
  .bgToolbar .bgRefreshLabel,
  .bgToolbar .bgRefreshUnit {
    display: none;
  }

  .bgToolbar .bgRefreshUnitShort {
    color: #636363;
    display: inline;
    font-size: 12px;
    margin-left: 4px;
  }

  /* Bigger, to sit level with the controls beside it. */
  .bgToolbar .circularProgressBar {
    height: 34px;
    width: 34px;
  }

  /* Charts stack one per row. */
  .bgGraphSection > [class*="col-"] {
    margin-bottom: 14px;
    width: 100%;
  }

  /* One view at a time. */
  .bgGraphSection,
  .bgDataSection {
    display: none !important;
  }

  .bgGraphSection.isMobileActive,
  .bgDataSection.isMobileActive {
    display: flex !important;
    flex-wrap: wrap;
  }

  /* Data view: search on its own line above the tabs. */
  .bgDataSection > [class*="col-"] {
    width: 100%;
  }

  .bgDataSection .bgTabsCol {
    order: 2;
    overflow-x: auto;
  }

  .bgDataSection > .col-md-6 {
    order: 1;
  }
}

/* The toggle is a phone affordance; both views are visible on desktop. */
@media (min-width: 992px) {
  .bgViewToggle {
    display: none !important;
  }

  .bgRefreshUnitShort {
    display: none !important;
  }
}

/* Graph / data toggle buttons. */
.bgViewToggle {
  display: inline-flex;
  border: 1px solid #d4d5da;
  border-radius: 8px;
  overflow: hidden;
}

.bgViewBtn {
  align-items: center;
  background: #fff;
  border: 0;
  color: #636363;
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

.bgViewBtn + .bgViewBtn {
  border-left: 1px solid #d4d5da;
}

.bgViewBtn.isActive {
  background: var(--haifin-Primary-Gradient, #8a1538);
  color: #fff;
}

/* Currency picker on a phone: a native control, styled to match the filter
   button beside it. MobileSelectSheet turns it into a bottom-up sheet. */
@media (max-width: 991px) {
  select.bgCurrencyNative {
    background: #fff;
    border: 1px solid #d4d5da;
    border-radius: 8px;
    color: #212121;
    font-size: 13px;
    height: 34px;
    outline: none;
    padding: 4px 8px;
    width: 100%;
  }
}

/* --- BG listing graph view: one chart at a time --------------- */
@media (max-width: 991px) {
  /* Sits inline on the toolbar's second line, immediately before the view
     toggle. The free space is absorbed by the refresh dial's auto right margin
     (below) rather than by an auto margin here — the pager is unmounted in the
     data view, and anything anchored to it would take the right alignment away
     with it. */
  .bgToolbar .bgChartPager {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    order: 5;
  }

  .bgToolbar .bgViewToggle {
    margin-left: 8px;
    order: 6;
  }

  .bgChartPager button {
    background: #fff;
    border: 1px solid #d4d5da;
    border-radius: 6px;
    color: #2c2c2c;
    cursor: pointer;
    font-size: 15px;
    height: 34px;
    line-height: 1;
    width: 28px;
  }

  .bgChartPager button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .bgChartPager span {
    color: #636363;
    font-size: 11px;
    min-width: 42px;
    text-align: center;
    white-space: nowrap;
  }

  /* Only the selected chart is shown, and it takes the width. */
  .bgGraphSection.isMobileActive > [class*="col-"] {
    display: none;
    width: 100%;
  }

  .bgGraphSection.isMobileActive.bgChartAt0 > [class*="col-"]:nth-of-type(1),
  .bgGraphSection.isMobileActive.bgChartAt1 > [class*="col-"]:nth-of-type(2) {
    display: block;
  }
}

/* The pager is a phone affordance; desktop shows every chart at once. */
@media (min-width: 992px) {
  .bgChartPager {
    display: none !important;
  }
}

/* ---- phone: the visible chart fills what is left of the screen ----
   Only one tile shows at a time here (the pager picks it), so the plot takes
   the height rather than sitting as a short wide strip with dead space beneath.

   The height is stated outright on .chart-body rather than grown with flex:
   .chart-plot and .chartWrp below resolve their percentage heights against it,
   and both Chart.js (which measures its container) and the d3 plot (which
   measures .chart-body) need a definite number to draw into. The 300px
   allowance covers the page header, the toolbar row and the tile's own header
   and totals line; the floor keeps it well past the 220px desktop plot even on
   a short screen. */
@media (max-width: 991px) {
  .bgGraphSection.isMobileActive .chart-portlet .chart-body {
    height: calc(100vh - 300px);
    min-height: 360px;
  }

  /* The pie sits above its legend rather than beside it, so the circle gets
     the full width and the full height instead of sharing the row. */
  .bgGraphSection.isMobileActive .chart-portlet .chart-plot {
    align-items: stretch;
    flex-direction: column;
    height: 100%;
  }

  /* Chart.js draws to this box's size, so it needs a real height — not auto. */
  .bgGraphSection.isMobileActive .chart-portlet .chartWrp {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    width: 100%;
  }

  .bgGraphSection.isMobileActive .chart-portlet .chartLegends {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 2px 14px;
    justify-content: center;
    margin: 6px 0 0;
    padding: 0;
  }

  .bgGraphSection.isMobileActive > [class*="col-"] {
    margin-bottom: 0;
  }
}

/* Only the words go on a phone — the switch stays, since it is the one way to
   flip the plot between count and amount. The tile header has no room for the
   caption beside the title and the two buttons. */
@media (max-width: 991px) {
  .chart-portlet .chart-portlet-header > .d-flex > span {
    display: none !important;
  }
}

/* Phone chart header: the title gets whatever the controls do not need.
   The switch and the two buttons hold their size and sit together at the right
   edge; the heading takes the rest and wraps rather than being squeezed. */
@media (max-width: 991px) {
  .chart-portlet .chart-portlet-header {
    gap: 6px;
    padding: 7px 8px;
  }

  .chart-portlet .chart-portlet-header .chart-title {
    flex: 1 1 auto;
    line-height: 1.2;
    min-width: 0;
  }

  .chart-portlet .chart-portlet-header > .d-flex {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* A touch smaller, so the control group leaves more of the row to the
     heading without losing the switch itself. */
  .chart-portlet .chart-portlet-header .react-switch {
    transform: scale(0.85);
    transform-origin: right center;
  }
}

/* ============================ phone card view ============================
   One guarantee at a time, in place of the grid. */
@media (max-width: 991px) {
  .bgCardDeck {
    display: none;
    padding: 0 12px;
  }

  .bgCardDeck.isMobileActive {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bgCardFootNote {
    color: #9a9a9a;
    font-size: 12px;
    margin: 0;
    padding: 6px 0 18px;
    text-align: center;
  }

  /* Nothing left to fetch: set apart with a rule either side so it reads as
     the end of the list rather than another status line. */
  .bgCardFootNote.isEnd {
    align-items: center;
    color: #8a8a8a;
    display: flex;
    font-size: 12px;
    gap: 10px;
    justify-content: center;
    letter-spacing: 0.02em;
  }

  .bgCardFootNote.isEnd::before,
  .bgCardFootNote.isEnd::after {
    background: #e6e7ea;
    content: "";
    flex: 0 1 56px;
    height: 1px;
  }

  /* Just a readout now — the deck scrolls, so there is nothing to step. */
  .bgToolbar .bgCardCount {
    align-items: center;
    display: flex;
  }

  .bgCard {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(16, 18, 27, 0.06);
    padding: 14px 14px 10px;
  }

  .bgCard .bgCardApplicant {
    color: var(--haifin-Primary-Color, #2c2c2c);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 0 0 8px;
  }

  .bgCard .bgCardRow {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }

  .bgCard .bgCardRef {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bgCard .bgCardAmount {
    color: var(--haifin-Primary-Gradient, #8a1538);
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Labels sit quiet, values carry the weight — the same read across every
     line of the card. */
  .bgCard em,
  .bgCard .bgCardRef em {
    color: #8a8a8a;
    font-size: 12px;
    font-style: normal;
  }

  .bgCard b {
    color: #2c2c2c;
    font-size: 13px;
    font-weight: 600;
  }

  .bgCard .bgCardBank {
    align-items: center;
    border-bottom: 1px solid #f1f2f5;
    display: flex;
    gap: 8px;
    margin: 10px 0 10px;
    padding-bottom: 10px;
  }

  .bgCard .bgCardBank img {
    height: 24px;
    width: 24px;
  }

  .bgCard .bgCardBank span {
    color: #2c2c2c;
    font-size: 13px;
    font-weight: 600;
  }

  /* Two columns of fields; the last action spans both. */
  .bgCard .bgCardGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  /* Exact halves rather than a 46% basis that grows with its content — equal
     columns are what let the icons and labels line up down the card. */
  .bgCard .bgCardField {
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
  }

  .bgCard .bgCardFieldWide {
    flex-basis: 100%;
    max-width: 100%;
  }

  /* Label over value, with the icon spanning both — labels differ in length
     ("Guarantee Type :" against "Issue Date :"), so keeping them on the same
     line as the value left every row starting at a different place. Stacked,
     the icons, the labels and the values each line up down the column, and the
     value gets the full column width instead of the scraps. */
  .bgCard .bgCardField {
    align-items: start;
    column-gap: 6px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    row-gap: 1px;
  }

  .bgCard .bgCardField .bgCardIcon {
    align-self: center;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .bgCard .bgCardField em {
    grid-column: 2;
    grid-row: 1;
    line-height: 1.3;
    white-space: nowrap;
  }

  .bgCard .bgCardField b {
    grid-column: 2;
    grid-row: 2;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bgCard .bgCardIcon {
    color: #b6879a;
    flex: 0 0 auto;
  }

  .bgCard .bgCardField b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Action bar: expiry on the left, actions on the right, both bigger than
     their desktop equivalents so they are comfortable to tap. */
  .bgCard .bgCardFoot {
    align-items: center;
    border-top: 1px solid #f1f2f5;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 8px;
  }

  .bgCard .bgCardExpiry {
    font-size: 12px;
  }

  .bgCard .bgCardActions {
    align-items: center;
    display: flex;
    gap: 2px;
  }

  .bgCard .bgCardAction {
    align-items: center;
    border-radius: 8px;
    color: #333;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
  }

  .bgCardEmpty {
    color: #9a9a9a;
    margin: 0;
    padding: 40px 0;
    text-align: center;
  }

  /* ---- tabs as square boxes ----
     Three destinations shown as equal boxes rather than a tab strip that has
     to scroll sideways on a phone. */
  /* Tabs renders two nested wrappers before the list; both are flex items of
     .bgTabsCol and would otherwise shrink to their content. */
  .bgDataSection .bgTabsCol > div,
  .bgDataSection .bgTabsCol .ui-regulartabs {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .bgDataSection .bgTabsCol .nav-tabs {
    border: 0;
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .bgDataSection .bgTabsCol .nav-tabs > li {
    flex: 1 1 0;
    float: none;
    margin: 0;
    min-width: 0;
  }

  /* Glyph above the label inside each square box. */
  .bgDataSection .bgTabsCol .nav-tabs > li > a .tabLabel {
    align-items: center;
    flex-direction: column;
    gap: 4px;
  }

  .bgDataSection .bgTabsCol .nav-tabs > li > a {
    align-items: center;
    background: #fff;
    border: 1px solid #e6e7ea !important;
    border-radius: 10px;
    color: #636363;
    display: flex;
    font-size: 11px;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    min-height: 68px;
    padding: 9px 6px;
    text-align: center;
    white-space: normal;
  }

  /* Hover is a tint with maroon type — distinct from the filled selected box,
     so the two never read as the same state. */
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:hover,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:focus {
    background: #f7f1f3 !important;
    border-color: #e2ccd4 !important;
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }

  /* Selected: filled, with the label held white against it. The theme sets its
     own colour on .nav-tabs>li.active>a and on the anchor's hover/focus, so
     every one of those states is named here or the text drops back to a dark
     colour on a dark box and disappears. */
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a:hover,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a:focus,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a:active {
    background: var(--haifin-Primary-Gradient, #8a1538) !important;
    border-color: var(--haifin-Primary-Gradient, #8a1538) !important;
    color: #fff !important;
    font-weight: 600;
    /* branding.css paints the selected tab's label by clipping the gradient to
       the glyphs — background-clip: text with -webkit-text-fill-color:
       transparent. Inside a filled box that leaves the label invisible, and
       `color` alone cannot bring it back: the fill colour wins wherever it is
       set. Both have to be undone here.
       The icon was unaffected, since currentColor follows `color`, which is why
       only the words went missing. */
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* The strip no longer scrolls, so the overflow set for the tab layout goes.
     The margin lifts the boxes clear of the search row above them. */
  .bgDataSection .bgTabsCol {
    margin-top: 12px;
    overflow-x: visible;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ---- search / export spacing ----
     The two were butted together against the right edge. */
  .bgDataSection .searchInptWrp {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bgDataSection .col-md-6 > .d-flex {
    gap: 10px;
    padding-right: 6px;
  }

  .bgDataSection .customDropdownWrp {
    flex: 0 0 auto;
  }
}

/* ---- touch feedback ----
   A phone has no hover, so the toolbar and card controls answer the press
   itself. Kept to a tint and a slight settle so nothing shifts the layout. */
@media (max-width: 991px) {
  .bgToolbar .bgChartPager button,
  .bgToolbar .bgViewBtn,
  .bgToolbar .customDropdownWrp .filterBtn,
  .bgCard .bgCardAction,
  .bgDataSection .customDropdownWrp .filterBtn {
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
      transform 0.1s ease;
  }

  .bgToolbar .bgChartPager button:hover,
  .bgToolbar .customDropdownWrp .filterBtn:hover,
  .bgDataSection .customDropdownWrp .filterBtn:hover {
    background: #f7f1f3;
    border-color: #e2ccd4;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }

  .bgToolbar .bgChartPager button:active,
  .bgToolbar .bgViewBtn:active,
  .bgToolbar .customDropdownWrp .filterBtn:active,
  .bgCard .bgCardAction:active,
  .bgDataSection .customDropdownWrp .filterBtn:active {
    background: #f0e6ea;
    transform: scale(0.94);
  }

  .bgToolbar .bgViewBtn:hover {
    background: #f7f1f3;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }

  /* The pressed state must not win over the selected one. */
  .bgToolbar .bgViewBtn.isActive:hover,
  .bgToolbar .bgViewBtn.isActive:active {
    background: var(--haifin-Primary-Gradient, #8a1538);
    color: #fff;
  }
}

/* ---- selected tab legibility, every screen ----
   branding.css paints the selected tab's label by clipping the theme gradient
   to the glyphs (background-clip: text with -webkit-text-fill-color:
   transparent). At phone sizes that renders thin and washed out, and `color`
   has no effect while the fill colour is set — so the clip is undone here and
   the label takes a solid theme colour. The BG listing's square boxes carry
   their own !important rules and are unaffected by this. */
@media (max-width: 991px) {
  .ui-regulartabs .nav-tabs li.active > a,
  .ui-regulartabs .nav-tabs li.active > a:hover,
  .ui-regulartabs .nav-tabs li.active > a:focus {
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }
}

/* ---- hover states ---- */
@media (max-width: 991px) {
  /* The card answers a hover on its border and lift, not its fill — a tinted
     card would fight the values printed on it. */
  .bgCard {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .bgCard:hover {
    border-color: #e2ccd4;
    box-shadow: 0 4px 16px rgba(138, 21, 56, 0.12);
  }

  /* The export and approve buttons in the data toolbar. */
  .bgDataSection .btn:hover,
  .bgDataSection .customDropdownWrp button:hover {
    filter: brightness(0.94);
  }
}

/* ---- selected tab box: label and glyph both forced ----
   The label sits in nested spans (.tabLabel > span) added for the icon layout.
   -webkit-text-fill-color inherits, so setting it on the anchor should be
   enough — but branding.css also targets descendants of the active tab in
   places, so every level is named here rather than relying on inheritance.
   This block is last in the file, so it settles any tie. */
@media (max-width: 991px) {
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a:hover,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a:focus,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a:active,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a .tabLabel,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a .tabLabel span,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a .tabIcon {
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Only the anchor paints the box; the spans inside stay clear of it. */
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a .tabLabel,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a .tabLabel span,
  .bgDataSection .bgTabsCol .nav-tabs > li.active > a .tabIcon {
    background: none !important;
  }

  /* Unselected boxes: dark type on white, so both states read clearly. */
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a .tabLabel,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a .tabLabel span {
    color: #4a4a4a !important;
    -webkit-text-fill-color: #4a4a4a !important;
  }

  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:hover,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:hover .tabLabel,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:hover .tabLabel span,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:focus,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:focus .tabLabel,
  .bgDataSection .bgTabsCol .nav-tabs > li:not(.active) > a:focus .tabLabel span {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
    -webkit-text-fill-color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }
}

/* ---- card deck: loading and empty states ----
   Centred in what is left of the screen rather than sitting against the
   toolbar, so a tab change reads as the list being fetched. */
@media (max-width: 991px) {
  .bgCardDeck .bgCardState {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    min-height: calc(100vh - 300px);
    padding: 20px 0;
    text-align: center;
  }

  .bgCardDeck .bgCardState p {
    color: #8a8a8a;
    font-size: 14px;
    margin: 0;
  }

  .bgCardDeck .bgCardStateIcon {
    color: #d3bcc5;
  }

  .bgCardSpinner svg {
    animation: bgCardSpin 0.9s linear infinite;
    display: block;
  }

  /* A gap in the ring is what makes the rotation visible — a full circle would
     look static however fast it turned. */
  .bgCardSpinnerArc {
    stroke-dasharray: 34 92;
  }
}

@keyframes bgCardSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- card action buttons ----
   A framed square that lights up under the pointer, with the glyph taking the
   theme colour and its label shown above it. */
@media (max-width: 991px) {
  .bgCard .bgCardAction {
    border: 1px solid transparent;
    outline: none;
    position: relative;
    /* No lingering highlight after a tap: the browser leaves focus on an
       anchor once it has been clicked, which kept the button lit long after
       the action had run. */
    -webkit-tap-highlight-color: transparent;
  }

  .bgCard .bgCardAction:focus:not(:focus-visible) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #333 !important;
  }

  .bgCard .bgCardAction:focus:not(:focus-visible) .bgCardActionGlyph {
    background-color: #636363 !important;
  }

  .bgCard .bgCardAction:focus:not(:focus-visible)::after {
    opacity: 0 !important;
  }

  .bgCard .bgCardActionGlyph {
    background-color: #636363;
    display: block;
    height: 20px;
    width: 20px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    transition: background-color 0.15s ease;
  }

  /* !important throughout: the theme carries a broad set of anchor rules and
     these were being lost to one of them. The declarations are scoped tightly
     enough (.bgCard .bgCardAction) that forcing them affects nothing else. */
  .bgCard .bgCardAction:hover,
  .bgCard .bgCardAction:focus-visible,
  .bgCard .bgCardAction:active {
    background: #f4e7ec !important;
    background-color: #f4e7ec !important;
    border-color: #dcbcc8 !important;
    box-shadow: 0 1px 4px rgba(138, 21, 56, 0.12) !important;
  }

  .bgCard .bgCardAction:hover .bgCardActionGlyph,
  .bgCard .bgCardAction:focus-visible .bgCardActionGlyph,
  .bgCard .bgCardAction:active .bgCardActionGlyph {
    background-color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }

  /* Font-icon actions (iconType other than "svg") take the colour directly. */
  .bgCard .bgCardAction:hover,
  .bgCard .bgCardAction:focus-visible,
  .bgCard .bgCardAction:active {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }

  /* Tooltip built from the action's own label. The native title tooltip is
     slow to appear and cannot be positioned; this sits directly above the
     button and follows the theme. */
  .bgCard .bgCardAction::after {
    background: #2c2c2c;
    border-radius: 5px;
    bottom: calc(100% + 6px);
    color: #fff;
    content: attr(data-label);
    font-size: 11px;
    left: 50%;
    line-height: 1.4;
    opacity: 0;
    padding: 4px 8px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    z-index: 5;
  }

  .bgCard .bgCardAction:hover::after,
  .bgCard .bgCardAction:focus-visible::after,
  .bgCard .bgCardAction:active::after {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* The row would clip the tooltip otherwise. */
  .bgCard .bgCardActions,
  .bgCard .bgCardFoot {
    overflow: visible;
  }
}

/* ============================ modals on a phone ==========================
   Presented as a right-hand drawer, matching the filter panel, rather than a
   centred dialog.

   Two things force the sizing here. ModalBox hands react-modal a fixed pixel
   width (650 for Claim Request, 850 for Blockchain Detail) as an INLINE style
   on the content element, and inline styles only yield to !important. Beneath
   that, branding.css pins the panel itself:
     .claimModal { width: 700px }
     .UploadMultiBG.portlet.light { max-height: 640px }
   so even a full-width modal still held a 700px form and overflowed sideways.
   Both are unpinned below. */
@media (max-width: 991px) {
  /* Inset from every edge, so the dimmed page shows as a margin around the
     panel rather than the panel covering the screen edge to edge. The gap is
     the overlay itself — react-modal paints rgba(19,19,19,0.70) behind this —
     so nothing extra is needed to make it transparent. */
  .ReactModal__Content {
    border-radius: 14px !important;
    bottom: 12px !important;
    height: auto !important;
    left: 12px !important;
    max-height: none !important;
    max-width: none !important;
    right: 12px !important;
    top: 12px !important;
    transform: none !important;
    width: auto !important;
    box-shadow: 0 12px 40px rgba(16, 18, 27, 0.28) !important;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
    /* Wiped in from the right edge. The entrance uses clip-path rather than a
       transform because the inline transform can only be cleared with
       !important, and an !important declaration would then outrank the
       animation and freeze it. */
    animation: bgModalDrawerIn 240ms cubic-bezier(0.22, 0.68, 0.36, 1);
  }

  /* Wider than a phone: a right-hand panel, still inset on all four sides. */
  @media (min-width: 576px) {
    .ReactModal__Content {
      left: auto !important;
      right: 14px !important;
      width: 460px !important;
    }
  }

  /* The panel inside fills the drawer and scrolls as one piece — the fixed
     width and capped height above are what broke the layout. */
  .ReactModal__Content .portlet,
  .ReactModal__Content .claimModal,
  .ReactModal__Content .UploadMultiBG.portlet.light,
  .ReactModal__Content .BGDoc.portlet.light {
    border-radius: 0 !important;
    height: auto !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    min-height: 100%;
    min-width: 0 !important;
    overflow-y: visible !important;
    /* The container's radius clips this; its own corners stay square. */
    padding: 0 !important;
    width: 100% !important;
  }

  /* Heading: a proper header bar pinned to the top of the drawer, so the title
     stays put while the form scrolls under it. */
  .ReactModal__Content .portlet-title {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #ececef;
    display: flex !important;
    justify-content: space-between;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    position: sticky;
    top: 0;
    z-index: 3;
  }

  /* The circular badge floats at top: -40px, which is clipped off the top of
     the drawer; the heading glyph below stands in for it. */
  .ReactModal__Content .iconWrp {
    display: none !important;
  }

  .ReactModal__Content .portletTitleIcon {
    background-color: var(--haifin-Primary-Gradient, #8a1538);
    display: inline-block !important;
    flex: 0 0 auto;
    height: 20px;
    margin-right: 9px;
    vertical-align: middle;
    width: 20px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  .ReactModal__Content .portlet-title h3 {
    align-items: center;
    display: flex;
    color: var(--haifin-Primary-Color, #2c2c2c);
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ReactModal__Content .portlet-body,
  .ReactModal__Content .form-body {
    padding: 12px 14px 14px !important;
  }

  /* ---- compact the form ----
     The screens use .mb-4 (1.5rem) between every control, plus the portlet's
     own row spacing. Stacked into one column that adds up to a lot of empty
     drawer. */
  .ReactModal__Content .mb-4 {
    margin-bottom: 10px !important;
  }

  .ReactModal__Content .mb-3 {
    margin-bottom: 8px !important;
  }

  .ReactModal__Content .row {
    margin-bottom: 0 !important;
  }

  .ReactModal__Content .input-block {
    margin-bottom: 0 !important;
  }

  .ReactModal__Content .claim-modal-error {
    font-size: 11px;
    margin: 2px 0 0 !important;
  }

  /* Nothing inside may push the drawer wider than the screen. */
  .ReactModal__Content * {
    max-width: 100%;
  }

  /* Bootstrap 3's col-md-* already stack below 992px; the gutters do not. */
  .ReactModal__Content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ReactModal__Content .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }

  /* Touch-sized fields. 16px on the value is deliberate: iOS Safari zooms the
     page in on focus for anything smaller. */
  .ReactModal__Content .input-block input,
  .ReactModal__Content .input-block select,
  .ReactModal__Content .input-block textarea,
  .ReactModal__Content input.form-control,
  .ReactModal__Content select.form-control {
    font-size: 16px !important;
    min-height: 46px;
    width: 100% !important;
  }

  .ReactModal__Content .input-block textarea {
    min-height: 90px;
  }

  /* The action row sits at the foot with full-width buttons — a right-aligned
     pair is awkward to reach one-handed. */
  /* Both actions on one line at the foot of the drawer, right-aligned to the
     same edge the fields end at — no bleed to the drawer's edges — and held
     there while the form above them scrolls. */
  .ReactModal__Content .btns {
    align-items: center;
    background: #fff;
    border-top: 1px solid #ececef;
    bottom: 0;
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-end !important;
    margin: 14px 0 0 !important;
    padding: 12px 0 !important;
    position: sticky;
    z-index: 3;
  }

  .ReactModal__Content .btns .btn {
    flex: 0 0 auto;
    margin: 0 !important;
    min-height: 42px;
    min-width: 104px;
    width: auto;
  }

  .ReactModal__Content .dropzone {
    padding: 16px 10px !important;
  }
}

@keyframes bgModalDrawerIn {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ---- blockchain detail, inside the phone drawer ----
   The panel is already handled by the modal rules above; what breaks here is
   the content: hashes are single unbroken 64-character strings, and the card
   lays property / value / action out as one row. */
@media (max-width: 991px) {
  .ReactModal__Content .blockchain-wrp .card ul {
    margin: 0;
    padding: 0;
  }

  /* Label above value rather than beside it — there is no width for both. */
  .ReactModal__Content .blockchain-wrp .card li {
    border-bottom: 1px solid #f1f2f5;
    display: block;
    padding: 9px 0;
  }

  .ReactModal__Content .blockchain-wrp .card li:last-child {
    border-bottom: 0;
  }

  .ReactModal__Content .blockchain-wrp .property {
    color: #8a8a8a;
    display: block;
    font-size: 12px;
    margin-bottom: 2px;
    width: auto !important;
  }

  /* A hash has no spaces to break on, so it needs telling explicitly or it
     forces the whole drawer wider than the screen. */
  .ReactModal__Content .blockchain-wrp .value {
    display: block;
    font-size: 12px;
    overflow-wrap: anywhere;
    width: auto !important;
    word-break: break-all;
  }

  .ReactModal__Content .blockchain-wrp .action {
    display: inline-block;
    margin-top: 3px;
    width: auto !important;
  }

  .ReactModal__Content .blockchain-wrp .row > [class*="col-"] {
    width: 100%;
  }

  .ReactModal__Content .blockchain-wrp .blockchain-img {
    margin-bottom: 10px;
  }

  /* Any grid inside a modal scrolls sideways in its own box rather than
     stretching the panel. The max-width: 100% catch-all above would otherwise
     crush the columns together. */
  .ReactModal__Content table {
    max-width: none;
    width: max-content;
  }

  .ReactModal__Content .sdg_tbl_wrp,
  .ReactModal__Content .table-responsive,
  .ReactModal__Content .table-scroll {
    max-width: 100%;
    overflow-x: auto;
  }
}


/* ======================= guarantee detail screen, phone =================== */
@media (max-width: 991px) {
  /* ---- header card ----
     The decorative bank mark goes entirely: it identifies nothing and was the
     reason Issuer and Status did not fit on the bar. What is left is Guarantee
     Ref No, the issuer's own mark with its name, and the status. */
  .bgDetail .card.sticky .bank_bg_ref_img {
    display: none !important;
  }

  .bgDetail .card.sticky .issuerMark {
    gap: 6px;
    min-width: 0;
  }

  .bgDetail .card.sticky .issuerName {
    font-size: 12px !important;
    max-width: none;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* nowrap here too: the row itself was held to one line, but the ref and the
     issuer were still wrapping against each other inside this box, which put
     the issuer on a second line and the status alongside empty space. */
  .bgDetail .card.sticky .textWrp {
    flex-wrap: nowrap !important;
    gap: 0 14px;
    min-width: 0;
  }

  .bgDetail .card.sticky .logoTextWrp {
    gap: 8px;
    min-width: 0;
  }

  .bgDetail .card.sticky .logoText {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The ref gives way first: it is the longest value and the least harmed by
     truncation, so the issuer keeps the room its name needs. */
  .bgDetail .card.sticky .logoTextWrp {
    flex: 0 1 auto;
    min-width: 64px;
  }

  .bgDetail .card.sticky .logoText > span:not([class*='-activity']) {
    font-size: 10px !important;
  }

  .bgDetail .card.sticky .logoText p {
    font-size: 12px !important;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bgDetail .card.sticky .logoText img {
    max-height: 22px;
    width: auto;
  }

  /* The copy button goes: the ref is truncated here anyway, so copying from it
     is of little use, and it was taking room the value needed. */
  .bgDetail .card.sticky .copy-image {
    display: none !important;
  }

  /* Bootstrap's .row / .col gutters were holding the ref off the left edge —
     the bank mark that used to sit there is gone, so the indent has nothing
     left to explain it. */
  .bgDetail .card.sticky .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bgDetail .card.sticky .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .bgDetail .card.sticky .logoTextWrp {
    gap: 0;
    padding-left: 0;
  }

  .bgDetail .card.sticky {
    padding: 10px 12px !important;
  }

  /* ---- tabs as square boxes ----
     Same treatment as the listing's data view: equal boxes with the glyph over
     the label, rather than a strip that scrolls sideways. */
  .bgDetail .ui-regulartabs .nav-tabs {
    border: 0;
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .bgDetail .ui-regulartabs .nav-tabs > li {
    flex: 1 1 0;
    float: none;
    margin: 0 !important;
    min-width: 0;
  }

  .bgDetail .ui-regulartabs .nav-tabs > li > a {
    align-items: center;
    background: #fff;
    border: 1px solid #e6e7ea !important;
    border-radius: 10px;
    color: #4a4a4a;
    display: flex;
    font-size: 11px;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    min-height: 68px;
    padding: 9px 6px;
    text-align: center;
    white-space: normal;
  }

  .bgDetail .ui-regulartabs .nav-tabs > li > a .tabLabel {
    align-items: center;
    flex-direction: column;
    gap: 4px;
  }

  .bgDetail .ui-regulartabs .nav-tabs > li:not(.active) > a:hover,
  .bgDetail .ui-regulartabs .nav-tabs > li:not(.active) > a:focus {
    background: #f7f1f3 !important;
    border-color: #e2ccd4 !important;
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
    -webkit-text-fill-color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }

  /* branding.css paints the selected label by clipping the theme gradient to
     the glyphs, which is invisible on a filled box — see the listing tabs for
     the same fix. */
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a,
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a:hover,
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a:focus,
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a .tabLabel,
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a .tabLabel span,
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a .tabIcon {
    background: var(--haifin-Primary-Gradient, #8a1538) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    border-color: var(--haifin-Primary-Gradient, #8a1538) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600;
  }

  .bgDetail .ui-regulartabs .nav-tabs > li.active > a .tabLabel,
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a .tabLabel span,
  .bgDetail .ui-regulartabs .nav-tabs > li.active > a .tabIcon {
    background: none !important;
  }

  /* ---- action row ----
     Lifted above the tabs so Back and the actions sit directly under the
     header card, right-aligned, instead of competing with the tab boxes for
     the same line. */
  .bgDetail > .d-flex {
    flex-wrap: wrap;
  }

  /* ---- header tile: two lines ----
     Line 1 is the guarantee ref and the issuer; line 2 is the status with the
     back arrow and options menu on the right.

     Those buttons live in a node that is a sibling of the card, not a child,
     so they cannot be nested into it without moving the markup. Instead the
     card reserves a band at its foot and the button row is pulled up into it —
     the two numbers below are a matched pair and must stay in step. */
  /* nowrap, not wrap: with wrapping allowed the status was dropping to a line
     of its own as soon as the ref number was long. Held on one line, the ref
     shrinks and ellipsises instead — which is what the chain of min-width: 0
     below permits. */
  .bgDetail .card.sticky .col-md-12 {
    flex-wrap: nowrap !important;
  }

  /* Ref, issuer and status share the first line; the second is left to the
     back arrow and the options menu. .textWrp shrinks to make room — without
     min-width: 0 a flex item will not go below its content width, and the
     status would be pushed off the end. */
  .bgDetail .card.sticky .textWrp {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    width: auto;
  }

  /* Every level between the row and the text has to be allowed to shrink, or
     the widest value sets a floor the whole bar cannot go below. */
  .bgDetail .card.sticky .logoTextWrp,
  .bgDetail .card.sticky .logoText,
  .bgDetail .card.sticky .logoText > div,
  .bgDetail .card.sticky .issuerMark {
    min-width: 0;
  }


  /* One copy at a time. The tabs row is the slot on a phone as well as on
     desktop: it is the only one present on every tab and for every record
     status,
  so the buttons sit in the same place whether the guarantee is
     processed,
  awaiting approval or awaiting action. */
  /* The Applicant Details tile is where these live whenever that tile is on
     screen. The tabs row renders its own copy only on the tabs that have no
     such tile — the container decides which {
    display: flex !important;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  /* The row holding the tabs and the buttons wraps so the buttons take the
     line above. */
  .bgDetail > .d-flex {
    flex-wrap: wrap;
  }

  .bgDetail > .d-flex > div:first-child,
  .bgDetail > .d-flex > .ui-regulartabs {
    width: 100%;
  }





  .bgDetail > .d-flex > .ui-regulartabs,
  .bgDetail > .d-flex > div:first-child {
    width: 100%;
  }

  /* Back reads as an arrow; the word is dropped for the room. */
  .bgDetail .bgBackBtn .bgBackLabel {
    display: none;
  }

  .bgDetail .bgBackBtn {
    align-items: center;
    display: inline-flex !important;
    justify-content: center;
    min-width: 0 !important;
    padding: 0 !important;
    width: 40px;
  }

  /* Further actions collapse to an ellipsis. */
  .bgDetail .furtherActions {
    font-size: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 40px;
  }

  /* An action-list mark rather than the "more" ellipsis: this button opens a
     list of things you can do to the record, not an overflow of hidden UI.
     Written as mask longhands — the shorthand's position/size form is parsed
     inconsistently and silently drops the whole declaration when it is not. */
  .bgDetail .furtherActions::before {
    background-color: currentColor;
    color: inherit;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3 8h11M18.5 8H21M3 16h5M12.5 16H21'/%3E%3Ccircle cx='16' cy='8' r='2.2' fill='%23fff'/%3E%3Ccircle cx='10' cy='16' r='2.2' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 20px 20px;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3 8h11M18.5 8H21M3 16h5M12.5 16H21'/%3E%3Ccircle cx='16' cy='8' r='2.2' fill='%23fff'/%3E%3Ccircle cx='10' cy='16' r='2.2' fill='%23fff'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 20px 20px;
  }

  .bgDetail .furtherActions .fa-chevron-down {
    display: none;
  }

  .bgDetail .btn {
    min-height: 40px;
  }
}

/* ---- guarantee detail: sections as tiles, fields two to a row ----
   Each section becomes its own card so the screen reads as a stack of tiles
   rather than one long sheet, and each field puts its label over its value so
   two of them fit across. Field.jsx renders label and value as col-md-5 /
   col-md-7, which already stack below 992px — what did not happen is two
   fields sharing a row, since each carries .w-100. */
@media (max-width: 991px) {
  .bgDetail .detail.card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .bgDetail .detail.card > div > .row {
    margin: 0 !important;
  }

  .bgDetail .detail.card > div > .row > [class*="col-md-"] {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    margin-bottom: 12px;
    padding: 12px !important;
    width: 100%;
  }

  /* The section heading spans the tile. */
  .bgDetail .detail.card > div > .row > [class*="col-md-"] > .d-flex,
  .bgDetail .detail.card > div > .row > [class*="col-md-"] > h3 {
    grid-column: 1 / -1;
    margin-bottom: 10px !important;
    width: 100%;
  }

  .bgDetail .detail.card h3 {
    font-size: 14px !important;
  }

  /* Auto-fit rather than a fixed half: two fields share a row when both fit a
     150px column, and a field that cannot takes the row to itself. .w-100 has
     to be overridden for either to be possible. */
  .bgDetail .detail.card > div > .row > [class*="col-md-"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 12px;
  }

  .bgDetail .detail.card .bb {
    border-bottom: 1px solid #f4f5f7;
    min-width: 0;
    padding: 7px 0;
    width: auto !important;
  }

  .bgDetail .detail.card .bb .row {
    display: block !important;
    margin: 0 !important;
  }

  .bgDetail .detail.card .bb .row > [class*="col-md-"] {
    padding: 0 !important;
    width: 100%;
  }

  /* Label quiet on top, value beneath it. */
  .bgDetail .detail.card .bb .col-md-5,
  .bgDetail .detail.card .bb .col-md-5 h5 {
    color: #8a8a8a !important;
    font-size: 11px !important;
    line-height: 1.3;
  }

  .bgDetail .detail.card .bb .col-md-7,
  .bgDetail .detail.card .bb .col-md-7 span {
    color: #2c2c2c !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

/* ---- further actions as a bottom sheet ----
   Bootstrap opens this menu by putting .open on the .dropdown wrapper, so that
   is the hook. A dropdown anchored under a 40px button has nowhere to go on a
   phone; the same list reads far better rising from the bottom edge, matching
   the select sheets elsewhere in the app. */
@media (max-width: 991px) {
  .bgDetail .dropdown.dropdown-user.open::before {
    background: rgba(19, 19, 19, 0.5);
    bottom: 0;
    content: "";
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100090;
  }

  .bgDetail .dropdown.dropdown-user.open > .dropdown-menu {
    animation: bgActionSheetUp 220ms cubic-bezier(0.22, 0.68, 0.36, 1);
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    bottom: 0 !important;
    box-shadow: 0 -8px 30px rgba(16, 18, 27, 0.24) !important;
    left: 0 !important;
    margin: 0 !important;
    max-height: 70vh;
    max-width: none !important;
    overflow-y: auto;
    padding: 16px 0 18px !important;
    position: fixed !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    z-index: 100091;
  }

  /* The grab bar that says this is a sheet. */
  .bgDetail .dropdown.dropdown-user.open > .dropdown-menu::before {
    background: #dcdde1;
    border-radius: 2px;
    content: "";
    display: block;
    height: 4px;
    margin: -6px auto 12px;
    width: 38px;
  }

  .bgDetail .dropdown-menu .further-action-dropdown {
    align-items: center;
    display: flex;
    font-size: 15px;
    gap: 12px;
    min-height: 50px;
    padding: 0 20px !important;
  }

  .bgDetail .dropdown-menu .further-action-dropdown .country-image {
    height: 20px;
    width: 20px;
  }

  .bgDetail .dropdown-menu > a:active .further-action-dropdown {
    background: #f4e7ec;
  }
}

@keyframes bgActionSheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ---- header bar: three aligned cells with rules between them ----
   GUARANTEE REF NO | ISSUER | STATUS — each a caps label over its value, the
   labels on one line and the values on the next.

   The divider goes on ".textWrp > .logoText" as a direct child so it lands on
   the issuer cell and not on the ref's own inner .logoText, which sits one
   level deeper inside .logoTextWrp. */
@media (max-width: 991px) {
  .bgDetail .card.sticky .col-md-12,
  .bgDetail .card.sticky .textWrp {
    align-items: stretch !important;
  }

  .bgDetail .card.sticky .logoTextWrp,
  .bgDetail .card.sticky .textWrp > .logoText {
    align-content: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Caps labels, all on the same line. */
  .bgDetail .card.sticky .logoText > span:not([class*='-activity']),
  .bgDetail .card.sticky .statusCell::before {
    color: #9a9a9a !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-bottom: 2px;
    text-transform: uppercase;
  }



  /* Values sit on the second line, mark beside text where there is one. */
  .bgDetail .card.sticky .logoText > div,
  .bgDetail .card.sticky .issuerMark {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
  }

  /* The status's icon and word form that same value row. */
  /* A rule before each cell after the first. */
  .bgDetail .card.sticky .textWrp > .logoText,
  .bgDetail .card.sticky .statusCell {
    border-left: 1px solid #eceef1 !important;
    margin-left: 12px !important;
    padding-left: 12px !important;
  }
}

/* ---- Bank Guarantee Details as one tile ----
   This section is a .row.BG-detail holding three full-width columns: the
   heading, the field grid, and the Guarantee Text / Presentation Instructions
   block. The generic rule above turns each direct column into its own tile,
   which split this section into three. Here the row itself is the tile and its
   columns go back to being plain containers, so the heading, the fields and
   the text all sit inside one card. */
@media (max-width: 991px) {
  .bgDetail .detail.card > div > .row.BG-detail {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    display: block;
    margin-bottom: 12px;
    padding: 12px !important;
  }

  .bgDetail .detail.card > div > .row.BG-detail > [class*="col-md-"] {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    margin-bottom: 0;
    padding: 0 !important;
    width: 100%;
  }

  /* The field grid inside keeps two to a row. Here the repeating unit is the
     col-md-6 wrapper, not .bb as it is in the other sections. */
  .bgDetail .detail.card .row.BG-detail .row {
    display: grid;
    gap: 0 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0 !important;
  }

  .bgDetail .detail.card .row.BG-detail .row > [class*="col-md-"] {
    max-width: none;
    min-width: 0;
    padding: 0 !important;
    text-align: left;
    width: auto;
  }

  /* .bb is already inside a half-width column here, so it must not halve
     again — it fills the column it sits in. */
  .bgDetail .detail.card .row.BG-detail .bb {
    max-width: none;
    width: 100% !important;
  }

  /* The text block spans the tile. */
  .bgDetail .detail.card .row.BG-detail > .col-md-12:last-child .row {
    display: block;
  }
}

/* ---- guarantee text: language toggle ----
   Stands in for the English / Arabic headings on a narrow screen, where only
   one pane fits at a time. */
@media (max-width: 991px) {
  .bgDetail .gtLangToggle {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
  }

  .bgDetail .gtLangToggle button {
    align-items: center;
    background: #fff;
    border: 1px solid #e6e7ea;
    border-radius: 8px;
    color: #636363;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: 0.04em;
    min-height: 34px;
    padding: 0 12px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .bgDetail .gtLangToggle button.isActive {
    background: var(--haifin-Primary-Gradient, #8a1538);
    border-color: var(--haifin-Primary-Gradient, #8a1538);
    color: #fff;
  }

  .bgDetail .gtLangToggle button:not(.isActive):hover {
    background: #f7f1f3;
    border-color: #e2ccd4;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }

  .bgDetail .gtLangPane .guaranteeTextReadOnlyBody {
    max-height: none;
  }

  /* The action buttons keep to the right of the tile heading. */

}

/* ---- header bar: the status cell ----
   Laid out as a grid rather than flex. As a column flex box the caption's
   flex-basis: 100% resolved against the HEIGHT, which took the whole box and
   pushed the mark and the value out of sight. A grid states the two rows
   outright: caption across the top, mark and value side by side beneath.

   branding.css gives this block a tinted panel (25px padding, 94px tall) for
   the desktop layout, so that is unwound here — only the mark keeps colour. */
@media (max-width: 991px) {
  .bgDetail .card.sticky .statusCell {
    align-items: start;
    background: transparent !important;
    border: 0;
    column-gap: 5px;
    display: grid !important;
    flex: 0 0 auto;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap;
  }

  .bgDetail .card.sticky .statusCell::before {
    content: "Status";
    grid-column: 1 / -1;
    grid-row: 1;
    /* Matches the .logoText > span caption exactly, or the label sits a pixel
       or two off the ones beside it. */
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-bottom: 2px;
    text-transform: uppercase;
  }

  .bgDetail .card.sticky .statusCell svg {
    align-self: center;
    grid-column: 1;
    grid-row: 2;
    height: 12px;
    width: 12px;
  }

  .bgDetail .card.sticky .statusCell p {
    color: #2c2c2c !important;
    font-size: 12px !important;
    font-weight: 600;
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 0;
    white-space: nowrap;
  }
}

/* ---- header bar: labels on one row, values on the next ----
   The three cells are not siblings — the ref and the issuer sit inside
   .textWrp while the status is beside it — so a single grid cannot span all
   three and align their rows for us.

   What makes the rows line up instead is a fixed height on every caption: with
   the label boxes identical, each value starts at the same y no matter how the
   cell above it is built. Stated last in the file so nothing overrides it. */
@media (max-width: 991px) {
  .bgDetail .card.sticky .col-md-12 {
    align-items: start !important;
    display: flex !important;
  }

  .bgDetail .card.sticky .textWrp,
  .bgDetail .card.sticky .logoTextWrp,
  .bgDetail .card.sticky .textWrp > .logoText,
  .bgDetail .card.sticky .statusCell {
    align-self: start;
  }

  /* The caption row: same box in every cell. */
  .bgDetail .card.sticky .logoText > span:not([class*='-activity']),
  .bgDetail .card.sticky .statusCell::before {
    color: #1c1c1c !important;
    display: block;
    font-size: 9px !important;
    font-weight: 600 !important;
    height: 13px;
    letter-spacing: 0.05em;
    line-height: 13px !important;
    margin: 0 0 3px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* The value row: same box too, so the three values sit level. */
  .bgDetail .card.sticky .logoText > div,
  .bgDetail .card.sticky .logoText > p,
  .bgDetail .card.sticky .issuerMark {
    align-items: center;
    display: flex;
    gap: 6px;
    line-height: 16px;
    margin: 0;
    min-height: 16px;
    min-width: 0;
  }

  .bgDetail .card.sticky .statusCell svg,
  .bgDetail .card.sticky .statusCell p {
    line-height: 16px;
    min-height: 16px;
  }

  .bgDetail .card.sticky .statusCell p {
    align-self: center;
  }
}

/* ---- Bank Guarantee Details: the amount leads ----
   It is the number the record is about, so it takes a row to itself and is set
   large. The cell hook comes from the field's own key. */
@media (max-width: 991px) {
  .bgDetail .detail.card .fieldCell-amount,
  .bgDetail .detail.card .fieldCell-bankName {
    grid-column: 1 / -1;
  }

  .bgDetail .detail.card .fieldCell-amount .col-md-7,
  .bgDetail .detail.card .fieldCell-amount .col-md-7 span {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  /* The amount sits in its own panel, centred — a tinted band in the theme
     family so it reads as the headline figure of the record rather than
     another row in the list. */
  .bgDetail .detail.card .fieldCell-amount .bb {
    background: #fbf1f4;
    border: 1px solid #f0dde4;
    border-bottom: 1px solid #f0dde4;
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 10px 12px;
    text-align: center;
  }

  .bgDetail .detail.card .fieldCell-amount .col-md-5,
  .bgDetail .detail.card .fieldCell-amount .col-md-5 h5,
  .bgDetail .detail.card .fieldCell-amount .col-md-7,
  .bgDetail .detail.card .fieldCell-amount .col-md-7 span,
  .bgDetail .detail.card .fieldCell-amount .row {
    text-align: center !important;
  }

  .bgDetail .detail.card .fieldCell-amount .col-md-7 span {
    display: block;
    width: 100%;
  }

  /* The amount's caption reads as a heading on its panel, not as one of the
     quiet field labels, so it takes the text colour. */
  .bgDetail .detail.card .fieldCell-amount .col-md-5,
  .bgDetail .detail.card .fieldCell-amount .col-md-5 *,
  .bgDetail .detail.card .fieldCell-amount .col-md-5 h5 {
    color: #1c1c1c !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}

/* ---- header bar, rebuilt as one grid ----
   The three cells are nested unevenly — the ref and the issuer sit inside
   .textWrp, the status is its own sibling — and every attempt to line them up
   by matching heights failed because the two levels do not share a baseline.

   display: contents on .textWrp dissolves that wrapper, so all three cells
   become items of the SAME grid. One row of columns, aligned to the top, each
   free to shrink. That is what actually makes the captions sit on one line and
   the values on the next.

   Stated last in the file so it settles every earlier attempt. */
@media (max-width: 991px) {
  .bgDetail .card.sticky .col-md-12 {
    align-items: start !important;
    display: grid !important;
    /* Ref, issuer, status. The issuer gets the widest share — it carries the
       longest value — and the status sits at the far end. Extra cells on a
       pending record fall into the auto columns after these three. */
    grid-auto-columns: minmax(0, auto);
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, auto);
    justify-content: flex-start !important;
  }

  .bgDetail .card.sticky .textWrp {
    display: contents !important;
  }

  .bgDetail .card.sticky .logoTextWrp,
  .bgDetail .card.sticky .textWrp > .logoText,
  .bgDetail .card.sticky .statusCell {
    align-self: start;
    flex: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden;
    width: auto !important;
  }

  /* A rule between the columns, on every cell but the first. */
  .bgDetail .card.sticky .textWrp > .logoText,
  .bgDetail .card.sticky .statusCell {
    border-left: 1px solid #e6e7ea !important;
    padding-left: 12px !important;
  }

  .bgDetail .card.sticky .logoTextWrp {
    padding-right: 12px !important;
  }

  .bgDetail .card.sticky .textWrp > .logoText {
    margin-right: 12px !important;
  }

  /* The status is a label over "mark + word", packed left — the 1fr second
     column was stretching and leaving the gap between them. */
  .bgDetail .card.sticky .statusCell {
    column-gap: 5px;
    display: grid !important;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-self: end;
  }

  /* Mark and name together. The mark is held small so the name still gets the
     column — it was the 96px cap on the name, not the logo, that was the
     problem before. */
  .bgDetail .card.sticky .issuerMark img {
    display: inline-block;
    flex: 0 0 auto;
    height: 16px;
    max-height: 16px;
    object-fit: contain;
    width: auto;
  }

  /* Values truncate rather than push their column wider. */
  .bgDetail .card.sticky .logoText p,
  .bgDetail .card.sticky .issuerName {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bgDetail .card.sticky .issuerMark img {
    flex: 0 0 auto;
  }
}

/* ============================ document cards ============================= */
@media (max-width: 991px) {
  .docDeckHead {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }

  .docDeckHead h3 {
    font-size: 14px !important;
  }

  .docCount {
    background: #f4e7ec;
    border-radius: 10px;
    color: var(--haifin-Primary-Gradient, #8a1538);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-width: 20px;
    padding: 4px 7px;
    text-align: center;
  }

  .docCard {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px;
  }

  .docCardType {
    color: #1c1c1c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
  }

  .docCardRow {
    display: flex;
    gap: 12px;
    justify-content: space-between;
  }

  .docCardField {
    display: block;
    min-width: 0;
  }

  .docCardFieldRight {
    text-align: right;
  }

  .docCardField em {
    color: #8a8a8a;
    display: block;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .docCardField b {
    color: #2c2c2c;
    display: block;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .docCardName {
    border-top: 1px solid #f4f5f7;
    margin-top: 9px;
    padding-top: 9px;
  }

  .docCardFoot {
    border-top: 1px solid #f4f5f7;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 9px;
  }

  .docCardBtn {
    align-items: center;
    background: #fff;
    border: 1px solid #e6e7ea;
    border-radius: 8px;
    color: #4a4a4a;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .docCardBtn:hover,
  .docCardBtn:active {
    background: #f4e7ec;
    border-color: #dcbcc8;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }

  .docCardBtn[disabled] {
    cursor: default;
    opacity: 0.65;
  }

  .docCardBtn.isDone {
    background: #eefaf3;
    border-color: #bfe6d2;
    color: #00854b;
  }

  .docDeckEmpty {
    color: #9a9a9a;
    margin: 0;
    padding: 24px 0;
    text-align: center;
  }

  /* ---- preview drawer ---- */
  .docPreviewScrim {
    background: rgba(19, 19, 19, 0.55);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100080;
  }

  .docPreviewDrawer {
    animation: docDrawerIn 240ms cubic-bezier(0.22, 0.68, 0.36, 1);
    background: #fff;
    border-radius: 14px;
    bottom: 12px;
    box-shadow: 0 12px 40px rgba(16, 18, 27, 0.28);
    display: flex;
    flex-direction: column;
    left: 12px;
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 100081;
  }

  .docPreviewHead {
    align-items: flex-start;
    border-bottom: 1px solid #ececef;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 14px;
  }

  .docPreviewTitle {
    min-width: 0;
  }

  .docPreviewTitle span {
    color: #8a8a8a;
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .docPreviewTitle b {
    color: #1c1c1c;
    display: block;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .docPreviewClose {
    background: transparent;
    border: 0;
    color: #636363;
    font-size: 24px;
    line-height: 1;
    padding: 0 4px;
  }

  /* min-height: 0 lets this shrink so the frame inside can scroll. */
  .docPreviewBody {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .docFrame {
    border: 0;
    height: 100%;
    width: 100%;
  }

  .docImageWrap {
    display: flex;
    padding: 12px;
    width: 100%;
  }

  .docImageWrap img {
    height: auto;
    margin: auto;
    max-width: 100%;
  }

  .docPreviewFoot {
    border-top: 1px solid #ececef;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 10px 14px;
  }

  .docPreviewFoot .btn {
    min-height: 42px;
    min-width: 104px;
  }

  .docState {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    margin: auto;
    padding: 24px;
    text-align: center;
  }

  .docStateIcon {
    color: #d3bcc5;
  }

  .docStateMissing .docStateIcon {
    color: #d98b8b;
  }

  .docStateTitle {
    color: #1c1c1c;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }

  .docStateText {
    color: #8a8a8a;
    font-size: 13px;
    margin: 0;
    max-width: 280px;
  }

  .docStateBtn {
    margin-top: 6px;
    min-height: 42px;
    min-width: 120px;
  }

  .docSpinner svg {
    animation: bgCardSpin 0.9s linear infinite;
    display: block;
  }

  .docSpinnerArc {
    stroke-dasharray: 34 92;
  }
}

@keyframes docDrawerIn {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


/* ---- detail action buttons: one treatment ----
   Back was inheriting the dark "saveDraft" fill while the actions button was
   white and outlined; side by side they read as two different kinds of
   control. Both are icon buttons of equal weight. */
@media (max-width: 991px) {
}

/* ---- guarantee text: the toggle sits over the text box ----
   The pane is the tile; EN·AR float in its top-right corner rather than taking
   a row above it, and the box is given the same frame, radius and padding as
   every other tile on the screen. */
@media (max-width: 991px) {
  .bgDetail .gtLangPane {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  .bgDetail .gtLangToggleOverlay {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    margin: 0;
    padding: 3px;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2;
  }

  .bgDetail .gtLangToggleOverlay button {
    min-height: 28px;
    padding: 0 9px;
  }

  /* Room at the top so the first line of text is not under the toggle. */
  .bgDetail .gtLangPane .guaranteeTextReadOnlyBody {
    border: 0 !important;
    margin: 0 !important;
    max-height: 320px;
    overflow-y: auto;
    padding: 44px 12px 12px !important;
  }

  /* The tab strip above it takes the icons too. */
  .bgDetail .ui-regulartabs .nav-tabs > li > a .tabIcon {
    flex: 0 0 auto;
  }
}

/* ---- select event sits above the text tabs ----
   The markup puts the event picker beside the Guarantee Text / Presentation
   Instructions tabs, on a row sized for desktop; the picker carries an inline
   width: 45% that has to be overridden. On a phone it takes its own full-width
   line above them.

   Both children are targeted structurally: Tabs renders a div, and the picker's
   wrapper is the one after it. When the picker is absent (it only shows on the
   Latest Profile tab) the rules land on the tabs alone and change nothing. */
@media (max-width: 991px) {
  .bgDetail .row.BG-detail .d-flex.justify-content-between.mb-1 {
    flex-wrap: wrap !important;
  }

  .bgDetail .row.BG-detail .d-flex.justify-content-between.mb-1 > div:last-child {
    margin-bottom: 10px;
    order: -1;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .bgDetail .row.BG-detail .d-flex.justify-content-between.mb-1 > div:first-child {
    width: 100%;
  }

  .bgDetail .tc-event-selector,
  .bgDetail .tc-event-selector select,
  .bgDetail .tc-event-selector .input-block {
    width: 100% !important;
  }

  .bgDetail .tc-event-selector select {
    font-size: 16px !important;
    min-height: 44px;
  }
}

/* ---- presentation instructions: same tile as everything else ----
   The body renders inside .guaranteeTextReadOnly in a col-md-12; on a phone it
   takes the full width and the tile frame the rest of the screen uses. */
@media (max-width: 991px) {
  .bgDetail .guaranteeTextReadOnly {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
  }

  .bgDetail .guaranteeTextReadOnly .guaranteeTextReadOnlyBody {
    border: 0 !important;
    margin: 0 !important;
    max-height: 320px;
    overflow-y: auto;
    padding: 12px !important;
    width: 100% !important;
  }

  /* The row that holds it stops constraining the width. */
  .bgDetail .row.BG-detail .col-md-12 > .row > .col-md-12 {
    padding: 0 !important;
    width: 100%;
  }
}

/* Breathing room under the text panes, which otherwise sit flush against the
   foot of the tile that holds them. */
@media (max-width: 991px) {
  .bgDetail .gtLangPane,
  .bgDetail .guaranteeTextReadOnly {
    margin-bottom: 14px !important;
  }

  .bgDetail .row.BG-detail > .col-md-12:last-child {
    padding-bottom: 4px !important;
  }
}

/* ---- text tabs row and the panes beneath ---- */
@media (max-width: 991px) {
  /* The event picker takes its own line above the tabs. Its wrapper carries an
     inline width: 45%, which only !important can undo. */
  .bgDetail .tcTextTabsRow {
    flex-wrap: wrap !important;
  }

  .bgDetail .tcTextTabsRow .tcEventSelectorWrap {
    margin-bottom: 10px;
    order: -1;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .bgDetail .tcTextTabsRow > div:not(.tcEventSelectorWrap) {
    width: 100%;
  }

  /* The pane's own row must not inherit the field grid — that is what put the
     text box in the second column and left the left half empty. */
  .bgDetail .detail.card .row.BG-detail .tcTextPaneRow {
    display: block !important;
    margin: 0 !important;
  }

  .bgDetail .detail.card .row.BG-detail .tcTextPaneRow > [class*="col-md-"] {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

/* ---- text tabs: equal boxes, equal pane ----
   "Guarantee Text" wraps to two lines and "Presentation Instructions" to
   three, so the boxes came out different heights. Stretching the row and
   giving the anchors a floor makes them match whatever the longer label needs.
   The pane below is pinned to one height too, so switching tabs does not
   resize the tile under your finger. */
@media (max-width: 991px) {
  .bgDetail .tcTextTabsRow .ui-regulartabs .nav-tabs {
    align-items: stretch;
  }

  .bgDetail .tcTextTabsRow .ui-regulartabs .nav-tabs > li {
    display: flex;
  }

  .bgDetail .tcTextTabsRow .ui-regulartabs .nav-tabs > li > a {
    height: 100%;
    min-height: 74px;
    width: 100%;
  }

  .bgDetail .gtLangPane .guaranteeTextReadOnlyBody,
  .bgDetail .guaranteeTextReadOnly .guaranteeTextReadOnlyBody {
    height: 320px;
    max-height: 320px;
    min-height: 320px;
    overflow-y: auto;
  }
}

/* ---- event picker: a fixed box ----
   Its height was following its own content — the selected option's text is a
   different length per tab, and the floating placeholder label sits inside the
   same block — so switching tabs resized the control and moved everything under
   it. Height is stated outright, and the value is held on one line. */
@media (max-width: 991px) {
  .bgDetail .tcEventSelectorWrap {
    align-self: flex-start;
    flex: 0 0 auto;
  }

  .bgDetail .tcEventSelectorWrap .input-block {
    height: 48px;
    margin: 0 !important;
    min-height: 48px;
  }

  .bgDetail .tcEventSelectorWrap select {
    height: 48px !important;
    min-height: 48px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100% !important;
  }

  .bgDetail .tcEventSelectorWrap .placeholder {
    white-space: nowrap;
  }
}

/* ---- timeline: one pane at a time ----
   Desktop puts the list and the event detail side by side. There is no width
   for both here, so the detail takes the screen in the list's place and the
   back button returns to it. */
@media (max-width: 991px) {
  .bgDetail .tlPanes {
    flex-wrap: wrap;
  }

  .bgDetail .tlPanes > [class*="col-md-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }

  .bgDetail .tlPanes.tlDetailOpen > .col-md-4 {
    display: none;
  }

  .bgDetail .tlBackBtn {
    align-items: center;
    background: #fff;
    border: 1px solid #e6e7ea;
    border-radius: 9px;
    color: #4a4a4a;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    margin-right: 10px;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    width: 36px;
  }

  .bgDetail .tlBackBtn:hover,
  .bgDetail .tlBackBtn:active {
    background: #f4e7ec;
    border-color: #dcbcc8;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }

  /* The heading takes the space the button leaves. */
  .bgDetail .eventDetail > .d-flex > h3 {
    flex: 1 1 auto;
    font-size: 15px !important;
    min-width: 0;
  }
}

/* Desktop keeps both panes, so it needs no way back. */
@media (min-width: 992px) {
  .bgDetail .tlBackBtn {
    display: none !important;
  }
}

/* ---- the two text panes end up the same height ----
   Both were given height: 320px, but the guarantee-text pane carries 44px of
   top padding for the language toggle floating over it while the presentation
   pane carries 12px. Under content-box sizing that padding is added to the
   height, so the two boxes differed by exactly that much. */
@media (max-width: 991px) {
  .bgDetail .gtLangPane .guaranteeTextReadOnlyBody,
  .bgDetail .guaranteeTextReadOnly .guaranteeTextReadOnlyBody {
    box-sizing: border-box;
  }
}

/* ---- timeline: clear of the controls above it ----
   The heading row and its export control sit directly on top of the timeline
   content, which on a phone reads as one crowded block. */
@media (max-width: 991px) {
  .bgDetail .tlPanes,
  .bgDetail .timelinetable {
    margin-top: 16px !important;
  }

  /* The "Timeline & Documents" row and its buttons. */
  .bgDetail .eventDetail {
    padding-top: 4px;
  }

  /* The event's own fields and the beneficiary action block sit clear of the
     header row above them. */
  .bgDetail .eventDetail > .d-flex {
    margin-bottom: 14px !important;
  }

  .bgDetail .StepProgress {
    margin-top: 4px;
    padding-top: 0;
  }
}

/* ---- timeline: framed like the profile tiles ----
   The Guarantee Details tab reads as a stack of white cards; the timeline was
   the one tab still rendering flat on the page background. Both panes and the
   blocks inside the event detail take the same frame, so the whole screen is
   consistent. */
@media (max-width: 991px) {
  .bgDetail .tlPanes > .col-md-4,
  .bgDetail .tlPanes > .col-md-8 {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px !important;
  }

  /* The step list sits inside its card rather than against the page. */
  .bgDetail .tlPanes .StepProgress {
    margin: 0;
    padding-left: 4px;
  }

  /* Sections within the event detail — remarks, documents, the beneficiary
     action block — each get their own panel. */
  .bgDetail .eventDetail > .row > [class*="col-md-"],
  .bgDetail .eventDetail .eventDetailSection {
    background: #ffffff;
    border: 1px solid #eceef1;
    border-radius: 9px;
    margin-bottom: 10px;
    padding: 10px !important;
    width: 100%;
  }

  .bgDetail .eventDetail h3 {
    font-size: 14px !important;
  }

  /* The timeline grid, when that view is showing, is framed too. */
  .bgDetail .timelinetable {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    overflow-x: auto;
    padding: 8px !important;
  }
}

/* ---- timeline section: heading, controls and content in one tile ----
   The heading row was sitting on the page background above a framed pane; the
   whole section is one card now, and the panes inside it drop their own frame
   so there is not a border inside a border. */
@media (max-width: 991px) {
  .bgDetail .tlSection {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    padding: 12px !important;
  }

  .bgDetail .tlSection .tlSectionHead {
    border-bottom: 1px solid #f1f2f5;
    gap: 10px;
    margin-bottom: 12px !important;
    padding-bottom: 10px;
  }

  .bgDetail .tlSection .tlSectionHead h3 {
    flex: 1 1 auto;
    font-size: 15px !important;
    min-width: 0;
  }

  .bgDetail .tlSection .bgEntry {
    flex: 0 0 auto;
    gap: 4px;
  }

  /* The labelled switch goes; the icon button below stands in for it. */
  .bgDetail .tlSection .switchWrp {
    display: none !important;
  }

  .bgDetail .tlViewToggle {
    align-items: center;
    background: #fff;
    border: 1px solid #e6e7ea;
    border-radius: 9px;
    color: #4a4a4a;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    width: 36px;
  }

  .bgDetail .tlViewToggle:hover,
  .bgDetail .tlViewToggle:active {
    background: #f4e7ec;
    border-color: #dcbcc8;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }

  /* The export controls line up with it. */
  .bgDetail .tlSection .bgEntry > svg {
    flex: 0 0 auto;
    height: 20px;
    margin: 0 0 0 6px !important;
    width: 20px;
  }

  /* Already inside the section card. */
  .bgDetail .tlSection .tlPanes > .col-md-4,
  .bgDetail .tlSection .tlPanes > .col-md-8,
  .bgDetail .tlSection .timelinetable {
    background: transparent;
    border: 0;
    margin-bottom: 0;
    padding: 0 !important;
  }

  .bgDetail .tlSection .tlPanes,
  .bgDetail .tlSection .timelinetable {
    margin-top: 0 !important;
  }
}

/* The icon toggle is a phone affordance; desktop keeps the labelled switch. */
@media (min-width: 992px) {
  .tlViewToggle {
    display: none !important;
  }
}

/* ---- event details: laid out like the profile tiles ----
   The fields are inline-styled flex rows of eventName / eventValue spans, each
   pinned to width: 185 for the desktop column. Inline widths only yield to
   !important. Turned into a two-column grid — labels down the left, values down
   the right — inside the same panel treatment the profile sections use. */
@media (max-width: 991px) {
  .bgDetail .eventDetail .eventName,
  .bgDetail .eventDetail .eventValue {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Label over value, two to a row when both fit and one when they do not —
     the same treatment the profile sections use. Each span is its own grid
     cell, so a label and the value under it land in the same column: the
     spans come in label, value, label, value order, and a two-column grid
     with row-major flow would put a label beside a value instead. Column flow
     with two explicit rows is what pairs them correctly. */
  /* One tile holds every field. The rows inside it keep their pairing but
     carry no frame of their own — a border per row read as a stack of separate
     cards rather than one panel of values. */
  .bgDetail .eventFieldGrid {
    background: #ffffff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    padding: 4px 12px 10px;
  }

  .bgDetail .eventFieldGrid > div[style*="flex"] {
    background: transparent;
    border: 0;
    border-radius: 0;
    column-gap: 14px;
    display: grid !important;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    margin-bottom: 0;
    padding: 8px 0;
    row-gap: 2px;
  }

  .bgDetail .eventDetail .eventName {
    color: #8a8a8a;
    font-size: 11px;
    grid-row: 1;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bgDetail .eventDetail .eventValue {
    color: #2c2c2c;
    font-size: 13px;
    font-weight: 600;
    grid-row: 2;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

/* ---- beneficiary action: its own tile ----
   The label sits on the first line and the states wrap onto the second, each
   keeping its own colour and mark. On desktop this is one long row that runs
   off the side of a phone. */
@media (max-width: 991px) {
  .bgDetail .col-md-5.justify-end.hasLegend {
    align-items: flex-start !important;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
    margin-bottom: 12px;
    padding: 10px 12px !important;
    width: 100%;
  }

  .bgDetail .approvalStatusTitle {
    color: #1c1c1c;
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: 100%;
  }

  .bgDetail .beneficiary-sub-heading {
    flex: 0 0 auto;
    margin-right: 0 !important;
  }

  .bgDetail .beneficiary-sub-heading > span {
    align-items: center;
    border-radius: 8px;
    display: inline-flex !important;
    font-size: 12px;
    gap: 5px;
    line-height: 1.2;
    padding: 5px 9px !important;
    white-space: nowrap;
  }
}

/* The rolling figure keeps a steady width while it counts, so the words after
   it do not shuffle sideways on every tick. */
@media (max-width: 991px) {
  .bgDetail .rollingNumber {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    min-width: 1.6em;
    text-align: right;
  }

  /* Clear of the back / actions row above it, but sitting close to the
     timeline tile beneath — the two belong together, the buttons do not. */
  .bgDetail .col-md-5.justify-end.hasLegend {
    margin-bottom: 6px !important;
    margin-top: 14px;
  }

  .bgDetail .tlSection {
    margin-top: 0 !important;
  }
}

/* ---- event documents: name in bold with links beneath ----
   These sit inside the event detail panel, so they carry no frame of their
   own — a card inside a card reads as clutter. */
@media (max-width: 991px) {
  .bgDetail .docRowList {
    margin-top: 4px;
  }

  .bgDetail .docRow {
    border-bottom: 1px solid #f4f5f7;
    padding: 10px 0;
  }

  .bgDetail .docRow:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
  }

  .bgDetail .docRowName {
    color: #1c1c1c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin: 0;
    text-transform: uppercase;
  }

  /* The file itself, quieter than the type above it. */
  .bgDetail .docRowFile {
    color: #8a8a8a;
    font-size: 11px;
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The buttons are the shared .docCardBtn; here they sit left under the name
     rather than right-aligned across a card, and need no rule above them. */
  .bgDetail .docRowFoot {
    border-top: 0;
    justify-content: flex-start;
    margin-top: 8px;
    padding-top: 0;
  }
}

/* ---- event detail: no frame of its own ----
   branding.css gives .eventDetail a border, 15px padding, a fixed 435.69px
   height and its own scrollbar — a desktop panel sized to sit beside the
   timeline. Inside the phone layout that border draws a line around content
   that is already in a card, and the fixed height gives it a second scroll
   region inside the page. All of it goes; the page scrolls instead. */
@media (max-width: 991px) {
  .bgDetail .eventDetail {
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
    padding: 0 !important;
  }

  /* The event's documents get the same white tile as the field block. */
  .bgDetail .eventDetail .docRowList {
    background: #ffffff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    margin-top: 10px;
    padding: 4px 12px 10px;
  }

  /* Its heading row sits above that tile, not inside it. */
  .bgDetail .eventDetail .docRowList + div,
  .bgDetail .eventDetail .bgEntry {
    flex: 0 0 auto;
  }
}

/* ---- event tile: the last line, and the document rows ---- */
@media (max-width: 991px) {
  /* The field rows carry borderBottom: "1px solid lightgray" as an INLINE
     style in the JSX, which is why clearing it in CSS had no effect — inline
     wins over everything but !important. */
  .bgDetail .eventFieldGrid > div[style*="flex"],
  .bgDetail .eventDetail div[style*="border"] {
    border-bottom: 0 !important;
  }

  /* Actions sit at the right of each document row. */
  .bgDetail .docRowFoot {
    justify-content: flex-end;
  }

  /* The file's own name reads as the document, so it carries the weight; the
     type above it is the quieter caption. */
  .bgDetail .docRowName {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
  }

  .bgDetail .docRowFile {
    color: #1c1c1c !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: 1px;
  }
}

/* ============================ document requests ========================== */
@media (max-width: 991px) {
  .bgDetail .drSection {
    display: flex;
    flex-direction: column;
    /* The tab content fills what is left of the screen, so the empty state has
       a height to centre itself in. */
    min-height: calc(100vh - 320px);
  }

  .bgDetail .reqCardDeck {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .bgDetail .reqCard {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    padding: 12px;
  }

  .bgDetail .reqCardTop {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }

  .bgDetail .reqCard em {
    color: #8a8a8a;
    display: block;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .bgDetail .reqCard b {
    color: #1c1c1c;
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .bgDetail .reqCardId {
    min-width: 0;
  }

  .bgDetail .reqCardTypes {
    margin-top: 9px;
  }

  .bgDetail .reqCardTypes b {
    font-weight: 600;
  }

  .bgDetail .reqCardStatus {
    background: #f1f2f5;
    border-radius: 8px;
    color: #4a4a4a;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    white-space: nowrap;
  }

  .bgDetail .reqCardStatus.isOk {
    background: #eefaf3;
    color: #00854b;
  }

  .bgDetail .reqCardStatus.isWarn {
    background: #fff6e5;
    color: #96650a;
  }

  .bgDetail .reqCardStatus.isBad {
    background: #ffeceb;
    color: #b62319;
  }

  .bgDetail .reqCardFoot {
    border-top: 1px solid #f4f5f7;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 9px;
  }

  .bgDetail .reqCardAction {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4a4a4a;
    display: flex;
    height: 36px;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: 36px;
  }

  .bgDetail .reqCardAction:hover,
  .bgDetail .reqCardAction:active {
    background: #f4e7ec;
    border-color: #dcbcc8;
  }

  .bgDetail .reqDeckFoot {
    color: #9a9a9a;
    font-size: 12px;
    margin: 0;
    padding: 8px 0 18px;
    text-align: center;
  }

  /* Nothing to show: a tile like the others, centred in the height the
     section reserves above. */
  .bgDetail .reqEmpty {
    align-items: center;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
  }

  .bgDetail .reqEmptyIcon {
    color: #d3bcc5;
  }

  .bgDetail .reqEmptyTitle {
    color: #1c1c1c;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
  }

  .bgDetail .reqEmptyText {
    color: #8a8a8a;
    font-size: 13px;
    margin: 0;
    max-width: 280px;
  }
}

/* ---- documents get their own tile in Guarantee Details ----
   They were sharing the Bank Guarantee card, which made that tile very long
   and buried them under the guarantee text. */
@media (max-width: 991px) {
  .bgDetail .bgDocsBlock {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    margin-top: 12px !important;
    padding: 12px !important;
  }

  .bgDetail .bgDocsBlock .docCard {
    border-color: #f1f2f5;
  }
}

/* ---- event chip: readable ----
   branding.css sets these at 9px in white on saturated grounds — white on the
   #e2c94f yellow in particular is barely legible. On a phone they take a light
   tint of the same hue with dark text of that hue, at a size that can be read. */
@media (max-width: 991px) {
  .bgDetail .card.sticky span[class*="-activity"] {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    padding: 3px 8px !important;
  }

  .bgDetail .card.sticky span.green-activity {
    background: #e4f6ed !important;
    color: #00693c !important;
  }

  .bgDetail .card.sticky span.brown-activity {
    background: #f6efe7 !important;
    color: #8a5a20 !important;
  }

  .bgDetail .card.sticky span.purple-activity {
    background: #f0eaf9 !important;
    color: #5b3a9b !important;
  }

  .bgDetail .card.sticky span.blue-activity {
    background: #e8f0fb !important;
    color: #1f5296 !important;
  }

  .bgDetail .card.sticky span.yellow-activity {
    background: #fdf5da !important;
    color: #8a6d0b !important;
  }

  .bgDetail .card.sticky span.red-activity {
    background: #ffeceb !important;
    color: #b62319 !important;
  }

  .bgDetail .card.sticky span.grey-activity {
    background: #f1f2f5 !important;
    color: #4a4a4a !important;
  }
}

/* ---- approve / reject as compact marks ----
   Sized down and pushed right so the tile's heading keeps its line. */
@media (max-width: 991px) {
  .bgDetail .raIconBtn {
    align-items: center;
    display: inline-flex !important;
    height: 34px;
    justify-content: center;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    width: 34px;
  }

  .bgDetail .raMark {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  .bgDetail .raMark svg {
    height: 17px;
    width: 17px;
  }

  /* The heading beside them keeps whatever is left, and does not wrap. */
  .bgDetail .detail.card > div > .row > [class*="col-md-"] > .d-flex > h3 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---- one action button, one sheet ----
   The dropdown and the row of workflow buttons are both replaced on a phone:
   everything the record can do is in the sheet, so only Back and this button
   remain on the bar. */
@media (max-width: 991px) {

  .bgDetail .raSheetBtn {
    align-items: center;
    background: #fff;
    border: 1px solid #e6e7ea;
    border-radius: 10px;
    color: #4a4a4a;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    width: 40px;
  }

  .bgDetail .raSheetBtn:hover,
  .bgDetail .raSheetBtn:active {
    background: #f4e7ec;
    border-color: #dcbcc8;
    color: var(--haifin-Primary-Gradient, #8a1538);
  }

  .raSheetScrim {
    background: rgba(19, 19, 19, 0.5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100090;
  }

  .raSheet {
    animation: bgActionSheetUp 220ms cubic-bezier(0.22, 0.68, 0.36, 1);
    background: #fff;
    border-radius: 16px 16px 0 0;
    bottom: 0;
    box-shadow: 0 -8px 30px rgba(16, 18, 27, 0.24);
    left: 0;
    max-height: 78vh;
    overflow-y: auto;
    padding: 10px 0 16px;
    position: fixed;
    right: 0;
    z-index: 100091;
  }

  .raSheetGrip {
    background: #dcdde1;
    border-radius: 2px;
    display: block;
    height: 4px;
    margin: 0 auto 10px;
    width: 38px;
  }

  .raSheetTitle {
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
    padding: 0 20px;
    text-transform: uppercase;
  }

  .raSheetItem {
    align-items: center;
    background: transparent;
    border: 0;
    color: #1c1c1c;
    display: flex;
    font-size: 15px;
    gap: 12px;
    min-height: 52px;
    padding: 0 20px;
    text-align: left;
    width: 100%;
  }

  .raSheetItem img {
    height: 20px;
    width: 20px;
  }

  .raSheetItem:active {
    background: #f4e7ec;
  }

  /* Reject, cancel and delete read as the destructive choices. */
  .raSheetItem.isDanger {
    color: #b62319;
  }

  .raSheetEmpty {
    color: #9a9a9a;
    margin: 0;
    padding: 24px 20px;
    text-align: center;
  }

  .raSheetCancel {
    background: #f4f5f7;
    border: 0;
    border-radius: 10px;
    color: #4a4a4a;
    font-size: 15px;
    font-weight: 600;
    margin: 10px 16px 0;
    min-height: 48px;
    width: calc(100% - 32px);
  }
}

/* ---- modified fields draw the eye ----
   On an amendment or reissue the changed fields carry their previous value,
   which the desktop marks with a small info icon. That icon is easy to miss on
   a phone, so the label cycles through the theme colour a few times and then
   settles — enough to be noticed, not enough to keep flashing while read. */
@media (max-width: 991px) {
  /* The label holds still in the theme colour; only the marker beside it
     pulses. A moving label is hard to read, and the mark alone is enough to
     say the field changed. */
  .bgDetail .isModifiedField .col-md-5,
  .bgDetail .isModifiedField .col-md-5 h5 {
    animation: none;
    border-radius: 4px;
  }

  .bgDetail .isModifiedField .modifiedNoteBtn {
    animation: fieldChangedMark 2s ease-in-out infinite;
  }



  /* The icon needs a tappable target, and the note it opens must not be
     clipped by the field cell it sits in. */
  .bgDetail .isModifiedField .modifiedNoteBtn {
    font-size: 16px !important;
    padding: 4px;
  }

  .bgDetail .isModifiedField,
  .bgDetail .isModifiedField .row,
  .bgDetail .isModifiedField .col-md-7 {
    overflow: visible !important;
  }

  .bgDetail .modifiedNote {
    max-width: 62vw;
  }
}

/* Colour, never opacity: the change sheet is rendered inside this label, and
   an ancestor's opacity applies to every descendant — including a fixed-
   position child — so an opacity pulse made the whole sheet fade in and out.
   Two tones of the theme colour keep the label in the palette while still
   drawing the eye. */
@keyframes fieldChanged {
  0%,
  100% {
    color: #c2778c;
  }
  50% {
    color: var(--haifin-Primary-Gradient, #8a1538);
  }
}

@keyframes fieldChangedBg {
  0%,
  100% {
    background: transparent;
  }
  50% {
    background: #fbeff3;
  }
}

/* The marker stays in the theme colour throughout; only its weight and size
   move, so it reads as one mark rather than shifting hue as it pulses. */
@keyframes fieldChangedMark {
  0%,
  100% {
    color: #c2778c;
    transform: scale(1);
  }
  50% {
    color: var(--haifin-Primary-Gradient, #8a1538);
    transform: scale(1.18);
  }
}

/* Back and the action button sit at the right of the tile heading on every
   tab, not only where the Applicant Details slot renders them. */
@media (max-width: 991px) {

}

/* The event chip must not be clipped by its cell, and its column can be
   narrower than the others since the value is short. */
@media (max-width: 991px) {
  .bgDetail .card.sticky .col-md-12 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, auto);
  }

  .bgDetail .card.sticky .textWrp > .logoText {
    overflow: visible;
  }

  .bgDetail .card.sticky span[class*="-activity"] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The Event chip is a span directly inside .logoText, the same place the
   caption sits — so it needs its own box rather than the caption's. */
@media (max-width: 991px) {
  .bgDetail .card.sticky .logoText > span[class*="-activity"] {
    height: auto !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 3px 8px !important;
  }
}

/* ---- the changed-field marker sits on the label ----
   The value line is where the eye lands and where long text wraps; the icon
   belongs beside the caption that names the field. It is moved with grid
   placement rather than by relocating the markup, so the desktop layout —
   where it reads correctly next to the value — is untouched. */
@media (max-width: 991px) {
  /* Beside the label here; the copy next to the value stands down. */
  .bgDetail .modifiedNoteWrap.onValue {
    display: none;
  }

  .bgDetail .modifiedNoteWrap.onLabel {
    display: inline-block;
    margin-left: 6px;
  }

  .bgDetail .isModifiedField .col-md-5 h5 {
    align-items: center;
    display: flex;
  }

  /* The note opens from the icon at the right, so it hangs to the left of it
     rather than off the edge of the screen. */
  .bgDetail .isModifiedField .modifiedNote {
    left: auto;
    right: 0;
  }
}

/* ---- changed values as a bottom sheet ----
   The same markup the desktop anchors under the icon is pinned to the bottom
   edge here, with a scrim behind it, so a long value has room and the panel is
   never clipped by the tile it was opened from. */
@media (max-width: 991px) {
  .bgDetail .modifiedNoteScrim {
    background: rgba(19, 19, 19, 0.45);
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100090;
  }

  .bgDetail .isModifiedField .modifiedNote,
  .bgDetail .modifiedNote {
    animation: bgActionSheetUp 220ms cubic-bezier(0.22, 0.68, 0.36, 1);
    border: 0;
    border-radius: 16px 16px 0 0;
    bottom: 0;
    box-shadow: 0 -8px 30px rgba(16, 18, 27, 0.24);
    left: 0;
    margin: 0;
    max-width: none;
    padding: 10px 20px 22px;
    position: fixed;
    right: 0;
    top: auto;
    z-index: 100091;
  }

  .bgDetail .modifiedNoteGrip {
    background: #dcdde1;
    border-radius: 2px;
    display: block;
    height: 4px;
    margin: 0 auto 12px;
    width: 38px;
  }

  /* The field name is the sheet's subject and carries the weight; a rule
     separates it from "Changes", which is only a caption for the two values
     below. */
  .bgDetail .modifiedNoteField {
    border-bottom: 1px solid #ececef;
    color: var(--haifin-Primary-Gradient, #8a1538);
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 10px;
    padding-bottom: 10px;
    text-align: left;
  }

  .bgDetail .modifiedNoteHead {
    color: #8a8a8a;
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .bgDetail .modifiedNoteRow {
    background: #fbfbfc;
    border: 1px solid #f1f2f5;
    border-radius: 9px;
    padding: 9px 12px;
  }

  .bgDetail .modifiedNoteRow + .modifiedNoteRow {
    border-top: 1px solid #f1f2f5;
    margin-top: 8px;
    padding-top: 9px;
  }

  .bgDetail .modifiedNote b {
    font-size: 14px;
  }
}

/* Nothing to show on this tab: the row takes no space at all. */
@media (max-width: 991px) {
  .bgDetail .col-md-5.justify-end.isEmptyLegend {
    display: none !important;
  }
}

/* ---- back and action sit level with each other ----
   Back is a themed Button and the action button is a plain one; they inherit
   different line-heights and vertical-aligns, so their boxes were a couple of
   pixels apart even at the same height. Both are given the same box outright
   and the row centres them. */
@media (max-width: 991px) {

  /* Only the two real buttons are given a box. The `> *` this replaced also
     sized every wrapper in the row — the span around Back,
  the dropdown's
     container {
    align-items: center;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 40px !important;
    justify-content: center;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 40px !important;
    vertical-align: middle;
    width: 40px !important;
  }

  /* The heading beside them centres on the same axis. */
  .bgDetail .detail.card > div > .row > [class*="col-md-"] > .d-flex {
    align-items: center;
  }
}

/* The heading row holds the title, an optional "Multiple Applicants" link and
   the buttons. justify-content: space-between spreads all three, which left the
   buttons mid-row whenever the link was present — the auto margin pins them to
   the right edge whether the link is there or not. */
@media (max-width: 991px) {



  .bgDetail .detail.card .multipleApplicantTitle {
    margin-left: 10px;
  }
}

/* ---- the in-tile buttons pin right whatever the row around them ----
   The earlier rule was scoped through .detail.card > div > .row > col, which
   the pending records' markup does not match — their Applicant Details heading
   sits at a different depth. This targets the slot itself, and covers both
   cases: order + auto margin when its parent is a flex row, and fit-content +
   auto margin when it is a plain block. */
@media (max-width: 991px) {

  /* Any heading row that holds the slot lays out as a row and centres it.
     The text-tabs row carries the same three classes but must keep wrapping —
     its event picker takes a line of its own — so it is excluded. */
  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow) {
    align-items: center;
    flex-wrap: nowrap;
  }
}

/* ---- the changes sheet escapes the label column's typography ----
   The field labels are set by `.bb .col-md-5, .bb .col-md-5 *` at 11px grey
   with !important. The marker now renders inside that label, so the sheet it
   opens is a descendant of it and was inheriting those rules — which is why
   its heading stayed small and grey. Everything the sheet draws is restated
   here, and the last block in the file wins any tie. */
@media (max-width: 991px) {
  /* Clears the label column's caps and tracking from the sheet's body. The
     heading opts back in below — order matters, since these carry the same
     weight. */
  .bgDetail .modifiedNote,
  .bgDetail .modifiedNote * {
    letter-spacing: normal !important;
    text-transform: none !important;
  }

  .bgDetail .modifiedNote .modifiedNoteField {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
  }

  .bgDetail .modifiedNote .modifiedNoteHead {
    color: #8a8a8a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .bgDetail .modifiedNote .modifiedNoteRow em {
    color: #8a8a8a !important;
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .bgDetail .modifiedNote .modifiedNoteRow b {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .bgDetail .modifiedNote .wasValue {
    color: #8a8a8a !important;
  }

  .bgDetail .modifiedNote .nowValue {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }

  /* A marker worth aiming at with a thumb. */
  .bgDetail .modifiedNoteWrap.onLabel .modifiedNoteBtn {
    font-size: 19px !important;
    padding: 3px;
  }
}

/* ---- the tile heading pushes its buttons to the edge ----
   The earlier attempt relied on `margin-left: auto` alone, but the row had been
   set to justify-content: flex-start, so with a heading that does not grow
   every child simply sat at the left. Giving the heading the free space is what
   actually moves the buttons — and it works at any depth, which the previous
   structural selector did not. */
@media (max-width: 991px) {
  /* No auto margin here. In a flex row an auto margin absorbs ALL the free
     space before flex-grow gets any — so this rule was starving the very
     growth it sat next to, leaving the title at its content width and the
     buttons parked right beside it. flex-grow alone, from a zero basis, gives
     the title the whole line and pushes the buttons to the edge. */
  .bgDetail .detail.card h3.m-0 {
    flex: 1 1 0% !important;
    margin-right: 0 !important;
    min-width: 0;
  }

}

/* The text panes take the tile's full width; nothing above may constrain them. */
@media (max-width: 991px) {
  .bgDetail .tcTextTabsRow {
    flex-wrap: wrap !important;
    width: 100%;
  }

  .bgDetail .gtLangPane,
  .bgDetail .guaranteeTextReadOnly,
  .bgDetail .tcTextPaneRow,
  .bgDetail .tcTextPaneRow > [class*="col-md-"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ---- every amount field gets the headline panel ----
   Only fieldCell-amount was styled, so Outstanding Amount — and any other
   amount the record carries — fell back to an ordinary field. Matching on the
   key fragment covers them all without needing to know each name: the class is
   built from the field's own key, so anything ending in "Amount" matches. */
@media (max-width: 991px) {
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] {
    grid-column: 1 / -1;
  }

  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .bb {
    background: #fbf1f4;
    border: 1px solid #f0dde4;
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 12px;
    text-align: center;
    width: 100% !important;
  }

  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .row,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-5,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-7 {
    text-align: center !important;
  }

  /* h5, not *: the blanket selector also caught the change marker sitting in
     this label, and an !important colour on it beats a keyframe — which is why
     the marker neither pulsed nor showed at its own size. */
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-5,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-5 h5 {
    color: #1c1c1c !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    justify-content: center;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-7,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-7 span {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
    display: block;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
    width: 100%;
  }
}

/* ---- the tile heading spans the whole tile ----
   The section tiles are a grid of auto-fit columns. The heading row was given
   grid-column: 1 / -1 through a structural selector that does not match at
   every depth, so on some tabs it sat inside a single ~150px track: the title
   truncated to "APPLICANT D…" and the buttons ended up beside it instead of at
   the tile's right edge. Targeted by its own classes, it spans regardless of
   how deep it sits. */
@media (max-width: 991px) {
  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow),
  .bgDetail .detail.card > div > .row > [class*="col-md-"] > h3 {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  /* With the row full width there is room for the whole title. */
  .bgDetail .detail.card h3.m-0 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Last word on the tile heading: the title takes the free space, the buttons
   take the edge. Stated together so no later rule can separate them. */
@media (max-width: 991px) {
  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow) {
    display: flex !important;
    justify-content: space-between !important;
  }

  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow) > h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* ---- one marker per field, on the label ----
   The amount panel styles `.col-md-7 span`, which is a longer selector than
   the rule hiding the value-side copy — so on amount fields both markers were
   drawn, each opening its own sheet. Forced here, last in the file. */
@media (max-width: 991px) {
  .bgDetail .modifiedNoteWrap.onValue {
    display: none !important;
  }

  .bgDetail .modifiedNoteWrap.onLabel {
    display: inline-flex !important;
  }
}

/* ---- the label marker: visible, sized, pulsing ----
   Stated without !important on colour so the keyframes can drive it — an
   important colour would freeze the pulse on its first frame. */
@media (max-width: 991px) {
  .bgDetail .modifiedNoteWrap.onLabel .modifiedNoteBtn {
    animation: fieldChangedMark 2s ease-in-out infinite;
    cursor: pointer;
    font-size: 19px !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    padding: 3px;
    text-transform: none !important;
  }

  /* On the amount panel the label centres, so the marker rides beside it. */
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-5 h5 {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: center;
  }
}

/* ---- a changed field's label carries the theme colour ----
   Stated after the amount panel's own label rule, which pins its caption to
   #1c1c1c with !important — without this, an amount that had changed showed a
   pulsing marker beside a black label. */
@media (max-width: 991px) {
  .bgDetail .isModifiedField .col-md-5,
  .bgDetail .isModifiedField .col-md-5 h5,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .isModifiedField .col-md-5 h5 {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }
}

/* ---- tile heading: full width, buttons at the edge ----
   The section tiles are an auto-fit grid, so a heading that does not span sits
   in one ~150px track — which is what kept the title truncated and the buttons
   beside it. Both the span and the alignment are stated here, last in the
   file, so nothing further down can undo either. */
@media (max-width: 991px) {
  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow) {
    align-items: center !important;
    display: flex !important;
    /* The tiles are an auto-fit grid; without this the heading sits inside a
       single ~150px track, which is what truncated the title and left the
       buttons stranded beside it. */
    grid-column: 1 / -1 !important;
    /* space-between, not flex-start: this is what the markup's own class asks
       for, and it holds the last child at the right edge whether or not the
       title grows. flex-start was my override and it is what put everything on
       the left. */
    justify-content: space-between !important;
    width: 100% !important;
  }

  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow) > h3 {
    flex: 1 1 0% !important;
    margin-right: 0 !important;
    min-width: 0 !important;
  }
}

/* The guarantee-text container is a column flex box with an inline
   flex-direction; nothing may centre or shrink its children. */
@media (max-width: 991px) {
  .bgDetail .row.BG-detail .mt-5.d-flex.justify-content-between {
    align-items: stretch !important;
    width: 100% !important;
  }

  .bgDetail .row.BG-detail .mt-5.d-flex.justify-content-between > * {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* The sheet is opaque and still, whatever the label it was opened from is
   doing — it sits inside that label in the DOM, so it has to opt out of the
   animation rather than inherit it. */
@media (max-width: 991px) {
  .bgDetail .modifiedNote,
  .bgDetail .modifiedNote * {
    animation: none !important;
    opacity: 1 !important;
  }

  .bgDetail .modifiedNote {
    background: #ffffff !important;
  }

  .bgDetail .modifiedNoteScrim {
    animation: none !important;
  }
}

/* ---- document rows: the name leads in bold ----
   The type ("CLAIM ADVICE") is what identifies the document at a glance, so it
   carries the weight; the file beneath it is the supporting detail. Stated
   last, with !important, because two earlier passes set these two lines the
   opposite way round. */
@media (max-width: 991px) {
  .bgDetail .docRowName {
    color: #1c1c1c !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
  }

  .bgDetail .docRowFile {
    color: #8a8a8a !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
  }

  /* The full document cards use the same order of emphasis. */
  .bgDetail .docCardType {
    color: #1c1c1c !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }
}

/* Only the marker moves. */
@media (max-width: 991px) {
  .bgDetail .isModifiedField .col-md-5,
  .bgDetail .isModifiedField .col-md-5 h5,
  .bgDetail .isModifiedField {
    animation: none !important;
  }

  .bgDetail .modifiedNoteWrap.onLabel .modifiedNoteBtn {
    animation: fieldChangedMark 2s ease-in-out infinite !important;
  }
}

/* ---- action dialogs: sized to their content ----
   Pinned top and bottom, a short confirmation stretched to the full screen and
   left a field of white under its two buttons. Anchored to the bottom with an
   auto height instead, it grows only as far as it needs and a long form still
   fills the screen. */
@media (max-width: 991px) {
  .ReactModal__Content {
    bottom: 12px !important;
    height: auto !important;
    max-height: calc(100% - 24px) !important;
    top: auto !important;
  }

  /* A rule under the action's name, before the form starts. */
  .ReactModal__Content .portlet-title {
    border-bottom: 1px solid #ececef !important;
  }

  .ReactModal__Content .portlet-body,
  .ReactModal__Content .form-body {
    padding-top: 16px !important;
  }
}

/* ---- the changes sheet does not inherit the amount panel ----
   The marker sits inside the field's label, and on an amount that label is
   centred with an !important text-align — which the sheet was inheriting,
   along with its colour. Everything the sheet draws is pinned here, including
   -webkit-text-fill-color: where that is set anywhere up the tree it beats
   `color`, and the heading would render in whatever it inherited. */
@media (max-width: 991px) {
  .bgDetail .modifiedNote,
  .bgDetail .modifiedNote * {
    text-align: left !important;
  }

  .bgDetail .modifiedNote .modifiedNoteField {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
    -webkit-text-fill-color: var(--haifin-Primary-Gradient, #8a1538) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  .bgDetail .modifiedNote .modifiedNoteHead,
  .bgDetail .modifiedNote .modifiedNoteRow em {
    -webkit-text-fill-color: #8a8a8a !important;
  }

  .bgDetail .modifiedNote .wasValue {
    -webkit-text-fill-color: #8a8a8a !important;
  }

  .bgDetail .modifiedNote .nowValue {
    -webkit-text-fill-color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }

  .bgDetail .modifiedNote .modifiedNoteRow b {
    -webkit-text-fill-color: currentColor;
  }
}

/* ---- action dialogs: a themed rule, and room to write ---- */
@media (max-width: 991px) {
  .ReactModal__Content .portlet-title {
    border-bottom: 1px solid #ececef !important;
  }

  /* Comments is the whole point of these dialogs; it was a third the height of
     the empty space beneath it. */
  .ReactModal__Content textarea,
  .ReactModal__Content .input-block textarea {
    font-size: 16px !important;
    min-height: 160px !important;
    resize: vertical;
  }
}

/* ---- confirmation dialogs: the rule, and the gap above the form ----
   branding.css:7520 removes this border outright:
     .UploadMultiBG.portlet.light.confirmation-modal .portlet-title
       { border: 0 !important }
   which outranks a plainer selector however important it is — so the same
   chain is repeated here to win. The 25px padding on that panel is what put
   the field so far below the heading. */
@media (max-width: 991px) {
  .ReactModal__Content .UploadMultiBG.portlet.light.confirmation-modal .portlet-title {
    border: 0 !important;
    /* The same hairline the Extend or Pay dialog draws — a heavy themed rule
       made these confirmations look like a different kind of dialog. */
    border-bottom: 1px solid #ececef !important;
    margin-bottom: 0 !important;
    padding: 12px 14px !important;
  }

  .ReactModal__Content .UploadMultiBG.portlet.light.confirmation-modal .form-body,
  .ReactModal__Content .UploadMultiBG.portlet.light.confirmation-modal .portlet-body {
    padding: 14px !important;
  }

  /* The icon badge these dialogs float above the panel is what the 25px of
     head room was reserved for; it is hidden here, so the room goes too. */
  .ReactModal__Content .confirmation-modal .iconWrp {
    display: none !important;
  }

  .ReactModal__Content .confirmation-modal .form-body > *:first-child {
    margin-top: 0 !important;
  }
}

/* ---- organisation menu sheet: crisper ----
   Rows read as a list of choices: a settled icon, a clear label, and one
   hairline between them that runs the full width of the sheet. */
@media (max-width: 991px) {
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu {
    border: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 34px rgba(16, 18, 27, 0.22) !important;
    overflow: hidden;
    padding: 8px 0 max(10px, env(safe-area-inset-bottom)) !important;
  }

  /* A grab bar, as on the other sheets. */
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu::before {
    background: #dcdde1 !important;
    border: 0 !important;
    border-radius: 2px !important;
    content: "" !important;
    display: block !important;
    height: 4px !important;
    left: 50% !important;
    margin: 2px 0 10px -19px !important;
    position: relative !important;
    top: 0 !important;
    width: 38px !important;
  }

  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a {
    color: #1c1c1c !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    min-height: 54px;
    padding: 0 20px !important;
  }

  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a:active {
    background: #f4e7ec !important;
  }

  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a i,
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a svg {
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
    flex: 0 0 auto;
    font-size: 18px !important;
    height: 18px !important;
    width: 18px !important;
  }

  /* The separator spans the sheet rather than stopping short. */
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li + li {
    border-top: 1px solid #f0f1f3 !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

/* ---- section tiles: flex, not grid ----
   These tiles were an auto-fit grid, and the heading row spanned them only if
   `grid-column: 1 / -1` reached it. Every attempt to make that stick failed —
   the heading kept rendering inside one ~150px track, which truncated the
   title and stranded the buttons beside it.

   Flex removes the dependency: `flex: 0 0 100%` on the heading always takes a
   line of its own, whatever else is in the tile, and the fields keep the same
   two-up-when-they-fit behaviour through `flex: 1 1 150px`. Last in the file,
   so this is the layout that applies. */
@media (max-width: 991px) {
  /* :not(.BG-detail) — the Bank Guarantee section is a tile in its own right
     with its own inner grid, and it was laying out correctly. Only the
     Applicant / Obligor / Beneficiary tiles need this. */
  .bgDetail .detail.card > div > .row:not(.BG-detail) > [class*="col-md-"] {
    align-content: flex-start;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 12px;
  }

  /* The heading takes a full line: title left, buttons hard right. */
  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow) {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 100% !important;
    justify-content: space-between !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .bgDetail .detail.card .d-flex.align-items-center.justify-content-between:not(.tcTextTabsRow) > h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Fields: two to a line where both fit 150px, one where they do not. Scoped
     away from the Bank Guarantee section, where each .bb already fills a
     col-md-6 wrapper and would otherwise halve again. */
  .bgDetail .detail.card > div > .row:not(.BG-detail) .bb {
    flex: 1 1 150px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* An amount keeps its own full-width panel wherever it appears. */
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] {
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ---- top bar: everything on one axis ----
   The burger is a floated anchor from the Metronic theme with its own top
   margin, while the tools on the right are flex items centred in the bar — so
   the two sat at different heights. The bar becomes one flex row and the
   burger is centred in it like everything else. */
@media (max-width: 991px) {
  .page-header.navbar .page-header-inner {
    align-items: center;
    display: flex;
    min-height: 60px;
  }

  .page-header.navbar .menu-toggler.responsive-toggler {
    align-items: center;
    display: flex !important;
    float: none !important;
    height: 44px;
    justify-content: center;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    width: 44px;
  }

  /* The tools group takes the rest of the line and stays centred with it. */
  .page-header.navbar .page-top {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  .page-header.navbar .top-menu .navbar-nav.pull-right {
    align-items: center;
    display: flex;
    margin: 0 !important;
  }

  .page-header.navbar .top-menu .navbar-nav.pull-right > li,
  .page-header.navbar .top-menu .navbar-nav.pull-right > li > .dropdown-toggle {
    align-items: center;
    display: flex;
    float: none;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

  .page-header.navbar .top-menu .navbar-nav.pull-right > li > .dropdown-toggle > img.img-circle {
    margin: 0 !important;
    vertical-align: middle;
  }
}

/* The Bank Guarantee section keeps its own structure: the row is the tile, its
   columns are plain blocks, and the field grid inside them is the auto-fit
   grid that was already working. */
@media (max-width: 991px) {
  .bgDetail .detail.card > div > .row.BG-detail > [class*="col-md-"] {
    display: block !important;
    width: 100% !important;
  }

  /* Only the section's own field grid — a direct child of its column. Field.jsx
     also renders a .row inside every .bb for the label and value, and the
     broader selector was turning those into two columns: the caption ended up
     beside the figure instead of above it. */
  .bgDetail .detail.card .row.BG-detail > [class*="col-md-"] > .row {
    display: grid !important;
    gap: 0 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* A field's own row always stacks: label over value. */
  .bgDetail .detail.card .bb .row {
    display: block !important;
    grid-template-columns: none !important;
  }

  .bgDetail .detail.card .bb .row > [class*="col-md-"] {
    width: 100% !important;
  }

  .bgDetail .detail.card .row.BG-detail .tcTextPaneRow {
    display: block !important;
  }

  .bgDetail .detail.card .row.BG-detail .bb {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* The heading takes a line of its own inside the flex tile, and its title
   truncates rather than wrapping. */
@media (max-width: 991px) {
  .bgDetail .tileHead {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .bgDetail .tileHead > h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Outstanding Amount and every other amount: label and figure both centred
     in their panel. */
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .bb,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .row,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-5,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-5 h5,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-7,
  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-7 span {
    text-align: center !important;
  }

  .bgDetail .detail.card [class*="fieldCell-"][class*="mount"] .col-md-5 h5 {
    justify-content: center !important;
  }
}

/* Nothing in this heading may take the free space with an auto margin — the
   title grows into it, and the buttons sit at the end of the line. */
@media (max-width: 991px) {
  .bgDetail .tileHead > h3,
  .bgDetail .tileHead > .multipleApplicantTitle {
    margin-right: 0 !important;
  }

  .bgDetail .tileHead > h3 {
    flex: 1 1 0% !important;
  }
}

/* The action slot holds only two 40px buttons, so it is sized to them and sits
   at the end of the line — it was stretching as a flex item and taking a share
   of the row it had no use for. */
@media (max-width: 991px) {
}

/* The burger sits a touch high against the tools on the right: its glyph is
   drawn as a background image on the anchor, and the theme anchors that image
   to the top of the box. Centring the image and nudging the box down puts it
   on the same line as the bell and the avatar. */
@media (max-width: 991px) {
  .page-header.navbar .menu-toggler.responsive-toggler {
    background-position: center center !important;
    position: relative;
    top: 3px;
  }
}

/* Wrappers in the action row carry no width of their own: the buttons inside
   them are what take space, and any wrapper whose button is hidden collapses
   rather than holding an empty slot. */
@media (max-width: 991px) {
}

/* ============================================================================
   RECORD ACTIONS — the single definition
   ============================================================================
   Twenty-two competing rules for these two buttons had accumulated across this
   file, each written to correct the last. They are all gone; this is the whole
   behaviour on a phone.

   What renders inside .bgRecordActions:
     - Back, as <span class="mr-2"><button class="btn … bgBackBtn">
     - the sheet button, a bare <button class="raSheetBtn">
     - on a pending record only: Approve / Reject / Delete, each in its own
       span.mr-2 wrapper, and the further-actions dropdown
   Everything after the first two belongs in the action sheet, so it is hidden
   here — and the wrappers must collapse with it, or each leaves a gap. That is
   what made the row 232px wide on Awaiting Approval and Awaiting Action while
   Processed looked almost right: the pending states simply have more children.
   ========================================================================= */
@media (max-width: 991px) {
  /* The slot is exactly as wide as its buttons and sits at the end of the
     heading row. No auto margins: in a flex row they would absorb the free
     space the title needs to grow into. */
  .bgDetail .bgRecordActionsSlot {
    align-self: center;
    flex: 0 0 auto;
    margin: 0 0 0 12px;
    width: max-content;
  }

  .bgDetail .bgRecordActions {
    align-items: center;
    display: flex;
    gap: 8px;
    width: max-content;
  }

  /* Wrappers carry no width; the buttons inside them do. */
  .bgDetail .bgRecordActions > span,
  .bgDetail .bgRecordActions > div {
    display: contents;
  }

  /* The two that stay. */
  .bgDetail .bgRecordActions .bgBackBtn,
  .bgDetail .bgRecordActions .raSheetBtn {
    align-items: center;
    background: #fff !important;
    border: 1px solid #e6e7ea !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #4a4a4a !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 40px !important;
    justify-content: center;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    width: 40px !important;
  }

  .bgDetail .bgRecordActions .bgBackBtn:active,
  .bgDetail .bgRecordActions .raSheetBtn:active {
    background: #f4e7ec !important;
    border-color: #dcbcc8 !important;
    color: var(--haifin-Primary-Gradient, #8a1538) !important;
  }

  .bgDetail .bgRecordActions .bgBackLabel {
    display: none;
  }

  .bgDetail .bgRecordActions svg {
    display: block;
  }

  /* Everything else in the row lives in the sheet instead. */
  .bgDetail .bgRecordActions .btn:not(.bgBackBtn):not(.raSheetBtn),
  .bgDetail .bgRecordActions .dropdown,
  .bgDetail .bgRecordActions .furtherActions,
  .bgDetail .bgRecordActions .deleteBtn {
    display: none !important;
  }

  /* One copy on screen: the tile's, wherever that tile is drawn. */
  .bgDetail .bgRecordActionsBesideTabs {
    display: none !important;
  }

  .bgDetail .bgRecordActionsInTile {
    display: flex !important;
  }
}

/* ---- login: fits the screen, footer intact ----
   The container reserves calc(100vh - 40px) on top of the page's own 20px
   padding, which is taller than the viewport — so the page always scrolled and
   the footer sat past the bottom edge, clipped. Sizing the container to the
   space that is actually left, and letting it shrink below that, removes both
   the scroll and the clipping. */
@media (max-width: 991px) {
  body .login {
    overflow-y: auto;
    padding: 12px 0;
  }

  .login .container {
    justify-content: center;
    min-height: calc(100vh - 24px);
    padding: 16px 16px 20px;
  }

  /* The "Powered by" lockup and the install button share the last line and
     neither may overflow it. */
  .loginFootRow {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    row-gap: 10px;
  }

  .loginFootRow .poweredBy {
    justify-content: flex-start;
    margin-top: 0 !important;
    min-width: 0;
  }

  .loginFootRow .poweredBy img {
    margin-left: 10px;
    padding-left: 10px;
  }

  .pwaInstallBtn {
    flex: 0 0 auto;
  }

  /* The copyright line is part of the page, not something to scroll to. */
  .login .copy-right {
    padding: 10px 16px 4px;
    position: static;
    text-align: center;
  }
}

/* Same on a phone: alone it centres, paired it sits at the left of the row. */
@media (max-width: 991px) {
  .loginFootRow.isAlone {
    justify-content: center;
  }

  .loginFootRow.isAlone .poweredBy {
    justify-content: center !important;
    width: 100%;
  }
}

/* ---- organisation sheet: icons on one column ----
   The three glyphs are inline SVGs with different intrinsic sizes and
   viewBoxes (14x14, 13x15, …). Forcing a square box scales each differently
   and centres the drawing inside it, so their visual left edges never lined
   up. A grid gives the icon a fixed column and the label a fixed start,
   whatever the glyph's own proportions. */
@media (max-width: 991px) {
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a {
    align-items: center;
    display: grid !important;
    gap: 0 14px;
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a > svg,
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a > i {
    grid-column: 1;
    height: 18px !important;
    justify-self: center;
    margin: 0 !important;
    width: 18px !important;
  }

  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a > svg + *,
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li > a > i + * {
    grid-column: 2;
  }
}

/* In the drawer the footer is the last item of a flex column, so it does not
   need pinning — and pinned, it sat under the queue tile. */
@media (max-width: 991px) {
  .sidebar-mobile-copyright {
    bottom: auto !important;
    margin-top: auto;
    position: static !important;
    width: 100% !important;
  }

  #sidebar-mobile .sidebarQueue {
    flex: 0 0 auto;
    margin: 14px 16px;
  }

  /* The drawer lays out as a column: menu, then the tile, then the line. */
  #sidebar-mobile nav,
  .sidebar-mobile-shell {
    display: flex;
    flex-direction: column;
  }
}

/* ---- organisation sheet: who is signed in ---- */
@media (max-width: 991px) {
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li.hdrOrgWho {
    align-items: center;
    border-bottom: 1px solid #ececef;
    display: flex !important;
    gap: 12px;
    margin-bottom: 4px;
    padding: 4px 20px 14px;
  }

  .hdrOrgWhoLogo {
    border: 1px solid #eceef1;
    border-radius: 50%;
    flex: 0 0 auto;
    height: 42px;
    object-fit: contain;
    padding: 2px;
    width: 42px;
  }

  .hdrOrgWhoText {
    display: block;
    min-width: 0;
  }

  .hdrOrgWhoText b {
    color: #1c1c1c;
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hdrOrgWhoText em {
    color: #8a8a8a;
    display: block;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.02em;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hdrOrgWhoText .hdrOrgWhoId {
    font-variant-numeric: tabular-nums;
  }

  /* Room for three lines rather than two. */
  .page-header.navbar .top-menu .dropdown-user.open > .dropdown-menu > li.hdrOrgWho {
    align-items: flex-start;
    padding-bottom: 16px;
  }

  .hdrOrgWhoLogo {
    margin-top: 2px;
  }
}