/* ============================================================
   Box-E Theme — design tokens + global re-skin
   ------------------------------------------------------------
   To rebrand for a new client, override the brand block in :root.
   Neutrals and structure stay consistent across themes.
   ============================================================ */

:root {
  /* Brand — override per client */
  --boxe-primary:        #007bff;
  --boxe-primary-hover:  #0069d9;
  --boxe-primary-active: #0062cc;
  --boxe-on-primary:     #ffffff;
  --boxe-primary-tint:   rgba(0, 123, 255, 0.08);

  /* Box-E logo red — brand accent for animated buttons (sampled from Box-E_Logo_R.png) */
  --boxe-logo-red:       #e30613;
  --boxe-logo-red-deep:  #b30410;
  --boxe-logo-red-tint:  rgba(227, 6, 19, 0.10);
  --boxe-logo-red-glow:  rgba(227, 6, 19, 0.28);

  /* Neutrals — shared across themes */
  --boxe-bg:            #ffffff;
  --boxe-surface:       #ffffff;
  --boxe-surface-alt:   #f5f5f5;
  --boxe-surface-sunken:#fafafa;
  --boxe-text:          #1a1a1a;
  --boxe-text-muted:    #6a6a6a;
  --boxe-text-subtle:   #9a9a9a;
  --boxe-border:        #e2e2e2;
  --boxe-border-strong: #c4c4c4;

  /* Semantic state colors — not themed per client */
  --boxe-danger:  #c8102e;
  --boxe-warning: #d97706;
  --boxe-success: #16803c;
  --boxe-info:    #1e6fb8;

  /* Structure — house style, not themed per client */
  --boxe-radius:       2px;
  --boxe-radius-pill:  999px;
  --boxe-border-w:     1px;

  /* Mono stack for codes/IDs/numbers */
  --boxe-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
   Navbar base (#WebPageMainNavbar)
   ============================================================ */

nav#WebPageMainNavbar {
  border-bottom: var(--boxe-border-w) solid var(--boxe-border) !important;
  min-height: 52px;
  padding: 0 12px;
}

nav#WebPageMainNavbar .trucker-navbar-button {
  border-radius: var(--boxe-radius);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ============================================================
   Compact avatar-style user dropdown trigger
   The full email is moved into the dropdown as a header by JS in
   CommonNavBar.php; the trigger only shows an initial + chevron.
   ============================================================ */

nav#WebPageMainNavbar #navbarDropdownMenuLink {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  margin: 0 4px;
  border: var(--boxe-border-w) solid transparent;
  border-radius: var(--boxe-radius);
  font-size: 0;
  line-height: 1;
  color: var(--boxe-text);
  background: transparent;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink::after {
  display: none;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink .BoxeUserAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--boxe-primary-tint);
  color: var(--boxe-primary);
  border-radius: var(--boxe-radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink .BoxeUserChevron {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  color: var(--boxe-text-muted);
  margin-right: 2px;
  transition: transform 0.18s ease, color 0.12s ease;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink:hover,
nav#WebPageMainNavbar #navbarDropdownMenuLink:focus {
  background: var(--boxe-surface-alt);
  color: var(--boxe-text);
  text-decoration: none;
  outline: none;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink:hover .BoxeUserChevron,
nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] .BoxeUserChevron {
  color: var(--boxe-text);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] {
  background: var(--boxe-surface-alt);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] .BoxeUserChevron {
  transform: rotate(180deg);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] .BoxeUserAvatar {
  background: var(--boxe-primary);
  color: var(--boxe-on-primary);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink:focus-visible {
  outline: 2px solid var(--boxe-primary);
  outline-offset: 2px;
}

/* ============================================================
   Dropdown menu (#PersonalMenuDropOptions)
   ============================================================ */

nav#WebPageMainNavbar #PersonalMenuDropOptions {
  border-radius: var(--boxe-radius);
  border: var(--boxe-border-w) solid var(--boxe-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  min-width: 240px;
  padding: 4px 0;
  /* the admin menu is ~23 items: on a phone or a short laptop screen the bottom items fell off screen, unreachable.
     The menu opens ~50px from the top under the navbar, so it may use the rest of the screen and scrolls inside itself.
     dvh follows the mobile address bar, vh stays as fallback for browsers without dvh. */
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .BoxeUserMenuHeader {
  padding: 10px 16px 8px;
  border-bottom: var(--boxe-border-w) solid var(--boxe-border);
  margin-bottom: 4px;
  cursor: default;
  pointer-events: none;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .BoxeUserMenuHeader .BoxeUserMenuHeaderLabel {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boxe-text-muted);
  margin-bottom: 2px;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .BoxeUserMenuHeader .BoxeUserMenuHeaderName {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--boxe-text);
  word-break: break-all;
  line-height: 1.3;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--boxe-text);
  text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i {
  margin-left: 8px;
  width: 16px;
  font-size: 13px;
  text-align: center;
  color: var(--boxe-text-muted);
  transition: color 0.12s ease;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i.float-right {
  margin-top: 2px;
  margin-right: 4px;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i.NewNotificationCount,
nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i.NewMessages {
  width: auto;
  min-width: 18px;
  padding: 0 6px;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: var(--boxe-on-primary);
  background: var(--boxe-primary);
  border-radius: var(--boxe-radius);
  line-height: 1.5;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i .f06rem {
  display: none;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:hover,
nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:focus {
  background: var(--boxe-surface-alt);
  color: var(--boxe-primary);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:hover > i:not(.NewNotificationCount):not(.NewMessages),
nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:focus > i:not(.NewNotificationCount):not(.NewMessages) {
  color: var(--boxe-primary);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"] {
  color: var(--boxe-danger);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"] > i {
  color: var(--boxe-danger);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:not(:first-child) {
  margin-top: 4px;
  padding-top: 12px;
  border-top: var(--boxe-border-w) solid var(--boxe-border);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:first-child {
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: var(--boxe-border-w) solid var(--boxe-border);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:hover {
  background: var(--boxe-primary-tint);
  color: var(--boxe-danger);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:hover > i {
  color: var(--boxe-danger);
}

/* ============================================================
   Navbar responsive: intermediate widths
   - Hide labels (icons only) so buttons fit
   ============================================================ */

@media (max-width: 1399px) {
  nav#WebPageMainNavbar .nav-button-btn .navbar-icon-explanation {
    display: none;
  }
}

/* ============================================================
   Navbar responsive: mobile (< 768px)
   - Compact hamburger
   - Compact user dropdown trigger (no top margin, no li padding)
   - Hide optional power-user buttons entirely
   ============================================================ */

@media (max-width: 767px) {
  /* Hamburger */
  nav#WebPageMainNavbar #nav-icon1 {
    width: 24px;
    height: 20px;
    max-height: 20px;
    margin-right: 8px;
    padding: 0;
  }
  nav#WebPageMainNavbar #nav-icon1 span {
    height: 3px;
    max-height: 3px;
    border-radius: 2px;
  }
  nav#WebPageMainNavbar #nav-icon1 span:nth-child(1) { top: 0; }
  nav#WebPageMainNavbar #nav-icon1 span:nth-child(2) { top: 8px; }
  nav#WebPageMainNavbar #nav-icon1 span:nth-child(3) { top: 16px; }

  /* User dropdown trigger */
  nav#WebPageMainNavbar .navbar-nav.ml-auto {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
  }
  nav#WebPageMainNavbar .navbar-nav.ml-auto .nav-item.dropdown {
    padding: 0;
    line-height: 1;
  }
  nav#WebPageMainNavbar #navbarDropdownMenuLink {
    padding: 2px 6px 2px 2px;
    margin: 0 2px;
  }
  nav#WebPageMainNavbar #navbarDropdownMenuLink .BoxeUserAvatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  /* Hide optional power-user buttons */
  nav#WebPageMainNavbar .nav-button:has(#LocketsBtn),
  nav#WebPageMainNavbar .nav-button:has(#InitClipboardReaderBtn),
  nav#WebPageMainNavbar .nav-button:has(#ColorCodesBtn),
  nav#WebPageMainNavbar .nav-button.nav-colorcodes,
  nav#WebPageMainNavbar #LocketsBtn,
  nav#WebPageMainNavbar #InitClipboardReaderBtn,
  nav#WebPageMainNavbar #ColorCodesBtn {
    display: none !important;
  }
}

/* Hide OCR / driver-snapshot power-user buttons below 2000px;
   kept visible on the large desktops so we don't forget they exist */
@media (max-width: 1999.98px) {
  nav#WebPageMainNavbar .nav-button:has(#OCR_MODEL_BTN),
  nav#WebPageMainNavbar .nav-button:has(#DRIVER_SNAPSHOT_BTN),
  nav#WebPageMainNavbar #OCR_MODEL_BTN,
  nav#WebPageMainNavbar #DRIVER_SNAPSHOT_BTN {
    display: none !important;
  }
}

/* ============================================================
   Bootstrap button re-skin (only via the theme tokens; never hex)
   ============================================================ */

.btn {
  border-radius: var(--boxe-radius);
  font-weight: 500;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-primary {
  background-color: var(--boxe-primary);
  border-color: var(--boxe-primary);
  color: var(--boxe-on-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--boxe-primary-hover);
  border-color: var(--boxe-primary-hover);
  color: var(--boxe-on-primary);
  box-shadow: none;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--boxe-primary-active);
  border-color: var(--boxe-primary-active);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--boxe-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* ============================================================
   Form input focus — replace Bootstrap's blue with the theme primary
   ============================================================ */

.form-control:focus {
  border-color: var(--boxe-primary);
  box-shadow: 0 0 0 2px var(--boxe-primary-tint);
}

/* ============================================================
   SweetAlert2 close button — always neutral grey
   regardless of icon (success/error/warning/info)
   ============================================================ */

.swal2-container .swal2-styled {
  padding: 8px 22px !important;
  font-size: 14px !important;
  border-radius: var(--boxe-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  line-height: 1.5 !important;
  border: var(--boxe-border-w) solid transparent !important;
}

.swal2-container .swal2-confirm:not(.SND),
.swal2-container button.swal2-confirm:not(.SND),
.swal2-container .swal2-confirm:not(.SND):not(:disabled):not(.disabled):active,
.swal2-container .swal2-confirm:not(.SND):not(:disabled):not(.disabled).active {
  background-color: var(--boxe-surface-alt) !important;
  background-image: none !important;
  border: var(--boxe-border-w) solid var(--boxe-border-strong) !important;
  color: var(--boxe-text) !important;
  font-weight: 500 !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.swal2-container .swal2-confirm:not(.SND):hover,
.swal2-container button.swal2-confirm:not(.SND):hover,
.swal2-container .swal2-confirm:not(.SND):focus,
.swal2-container button.swal2-confirm:not(.SND):focus {
  background-color: var(--boxe-border) !important;
  border-color: var(--boxe-text-muted) !important;
  color: var(--boxe-text) !important;
}

.swal2-container .swal2-confirm.SND {
  background-color: #adff2f !important;
  background-image: none !important;
  border: var(--boxe-border-w) solid #228b22 !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.swal2-container .swal2-confirm.SND:hover,
.swal2-container .swal2-confirm.SND:focus {
  background-color: #95e028 !important;
  border-color: #1a6b1a !important;
  color: #1a1a1a !important;
}

/* ============================================================
   Reusable animated button (.BoxeBtn)
   Add to any button / .btn / .BoxeActionTile.
   Rest:  tactile keycap with a neutral base edge.
   Hover: grows slightly with a Box-E-red glow ring.
   Click: squishes down.
   Colour/border come from the host element; this adds shadow + motion.
   ============================================================ */

.BoxeBtn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
  will-change: transform, box-shadow;
  box-shadow: 0 3px 0 var(--boxe-border-strong), 0 4px 6px rgba(0, 0, 0, 0.10);
}
.BoxeBtn:hover,
.BoxeBtn:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 4px 12px var(--boxe-logo-red-glow), 0 0 0 3px var(--boxe-logo-red-tint);
}
.BoxeBtn:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 2px var(--boxe-logo-red-tint);
  transition-duration: 0.06s;
}

/* ============================================================
   Client Documentation — trigger button + count badge
   Sits alongside existing buttons in the estimate modal header.
   ============================================================ */

.client-docs-open-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--boxe-radius);
  background-color: var(--boxe-surface-alt);
  border: 1px solid var(--boxe-border-strong);
  color: var(--boxe-text);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
  vertical-align: middle;
}

.client-docs-open-btn:hover,
.client-docs-open-btn:focus {
  background-color: var(--boxe-border);
  border-color: var(--boxe-text-muted);
  color: var(--boxe-text);
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

.client-docs-open-btn:active {
  transform: translateY(0);
}

.client-docs-open-btn:focus-visible {
  outline: 2px solid var(--boxe-primary);
  outline-offset: 2px;
}

/* count badge — hidden when JS has not added .has-count */
.client-docs-open-btn .client-docs-count {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--boxe-radius-pill);
  background-color: var(--boxe-logo-red);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
  vertical-align: middle;
}

.client-docs-open-btn .client-docs-count.has-count {
  display: inline-block;
}

/* Unit estimate header: button group sits right of the container number.
   Bootstrap's .modal-header .close has margin-left:auto, so the title + this
   group stay on the left and the close button stays on the far right.
   Extra header buttons should be appended into #UnitEstimateHeaderBtns. */
#EstimateOverLay .modal-header #EstimateHeaderBtns {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.75rem;
  align-self: center;
}

/* ============================================================
   Client Documentation — viewer modal
   Scoped under #ClientDocsViewerModal so rules cannot leak into
   any other Bootstrap modal on the same page.
   ============================================================ */

#ClientDocsViewerModal .modal-header {
  background: var(--boxe-surface-alt);
  border-bottom: 1px solid var(--boxe-border);
  padding: 0.75rem 1rem;
}

#ClientDocsViewerModal .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--boxe-text);
}

#ClientDocsViewerModal .modal-body {
  padding: 0.75rem 1rem;
}

#ClientDocsViewerModal #ClientDocsViewerList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* empty-state text inside the list */
#ClientDocsViewerModal #ClientDocsViewerList > p,
#ClientDocsViewerModal #ClientDocsViewerList > .client-docs-viewer-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--boxe-text-muted);
  font-size: 0.875rem;
}

/* ---- viewer card: horizontal row ---- */
#ClientDocsViewerModal .client-docs-viewer-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: var(--boxe-surface);
  border: 1px solid var(--boxe-border);
  border-radius: var(--boxe-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

#ClientDocsViewerModal .client-docs-viewer-card:hover {
  border-color: var(--boxe-border-strong);
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

/* thumbnail — fixed square, left column */
#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--boxe-radius);
  border: 1px solid var(--boxe-border);
  background: var(--boxe-surface-alt);
  display: block;
}

/* meta — middle column, grows */
#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--boxe-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--boxe-text-muted);
  line-height: 1.45;
}

/* scope badge */
#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-scope {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: var(--boxe-radius-pill);
  background: var(--boxe-surface-alt);
  color: var(--boxe-text-muted);
  border: 1px solid var(--boxe-border);
  align-self: flex-start;
}

#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-scope.scope-global {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}

/* open button — right column, never shrinks */
#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-open {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: var(--boxe-radius);
  background-color: var(--boxe-logo-red);
  border: 1px solid var(--boxe-logo-red);
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-open:hover,
#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-open:focus {
  background-color: var(--boxe-logo-red-deep);
  border-color: var(--boxe-logo-red-deep);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  outline: none;
}

#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-open:active {
  transform: translateY(0);
}

#ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-open:focus-visible {
  outline: 2px solid var(--boxe-logo-red);
  outline-offset: 2px;
}

/* ---- responsive stacking on small screens ---- */
@media (max-width: 575px) {
  #ClientDocsViewerModal .client-docs-viewer-card {
    flex-wrap: wrap;
  }
  #ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
  #ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-meta {
    flex: 1 1 calc(100% - 72px);
  }
  #ClientDocsViewerModal .client-docs-viewer-card .client-docs-viewer-open {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ============================================================
   Client document preview (bootbox via showClientDocument)
   ============================================================ */
.PdfContentModal .client-doc-preview-media {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

.PdfContentModal .client-doc-preview-fallback {
  padding: 1.5rem;
  text-align: center;
}

/* The pdfjs-express WebViewer mounts an iframe inside #clientDocPreviewer / #pdfPreviewer.
   Without an explicit height chain the iframe falls back to its ~150px default and the
   viewer shows up as a short strip inside the 80vh modal body. */
.PdfContentModal .modal-body {
  display: flex;
  flex-direction: column;
}

.PdfContentModal .modal-body > .bootbox-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.PdfContentModal .modal-body > .bootbox-body > #clientDocPreviewer,
.PdfContentModal .modal-body > .bootbox-body > #pdfPreviewer {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.PdfContentModal .modal-body > .bootbox-body > #clientDocPreviewer > iframe,
.PdfContentModal .modal-body > .bootbox-body > #pdfPreviewer > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1199.98px) {
  .PdfContentModal .modal-dialog {
    margin: 0.25rem;
  }
  .PdfContentModal .modal-body {
    height: 88vh;
  }
}

.glyphicon.RemainingContainerInBufferIcon {
  color: #e69138;
  margin-left: 4px;
}

.swal2-popup .NovaRemainingResultTbl {
  font-size: 0.85rem;
  text-align: left;
}

.swal2-popup .NovaRemainingResultTbl td.NovaRemainingErrorCell {
  color: #b02a37;
  word-break: break-word;
}