/*
  Defensive shield for the shell header to prevent eSign Angular MFE style leakage.
  These rules use high specificity and !important to override global resets.
  Mirrors react-mfe-shell.css — same rules, both MFEs shielded identically.
*/

/* Target only standard text navigation links, avoiding icon-based links */
header#top.header-fixed .navbar-nav>li>a:not(.headericons):not(.profile):not(.notify) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    /* color: #737373 !important; */
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Lato', sans-serif !important;
    text-decoration: none !important;
    padding: 7px 7px 3px 7px !important;
    display: block !important;
    transition: none !important;
}

header#top.header-fixed .navbar-nav>li>a:hover {
    background: transparent !important;
    color: var(--text-color-block, #000000) !important;
    border-radius: 0px !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

header#top.header-fixed .navbar-nav>li>a:focus {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

header#top.header-fixed .navbar-nav>li>a.active {
    color: var(--text-color-block, #333) !important;
    border-radius: 0px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Ensure icon-based links (mail, refresh) are visible and correctly aligned */
header#top.header-fixed .navbar-nav>li>a.headericons,
header#top.header-fixed .navbar-nav>li>a.notify {
    display: inline-block !important;
    /* Restore inline alignment */
    padding: 0 10px !important;
    border: none !important;
    background: transparent !important;
}

/* Protect header images from global resets or hidden display */
header#top.header-fixed .navbar-nav img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: none !important;
}

/* Ensure Logo is not affected */
header#top.header-fixed .logo {
    border: none !important;
    box-shadow: none !important;
}

/* =============================================================
   eSign uses Shadow DOM — its styles cannot leak into dWaT chrome. Most of the
   previously-needed shield rules (forced flex parents, float restoration, ng-hide
   reinforcement, submenu hides) are removed because they were COMPENSATING for the
   leak. With no leak, dWaT's native CSS produces the correct layout naturally.
   Re-adding them now makes /ESign nav diverge visually from dashboard.

   Kept (pure defensive — does not affect layout):
   - .fa-filter / .season-filter hide: the icon + popup are already ng-hide="true"
     in dWaT markup; if anything ever flips that state on /ESign route, keep hidden.
   ============================================================= */
body.jiffy-esign-mfe-active header#top.header-fixed .fa-filter,
body.jiffy-esign-mfe-active header#top.header-fixed .season-filter {
    display: none !important;
}

/* Simple bounded esign panel. Internal scroll for templates / sent documents.
   Body still scrolls if header+submenu+esign+footer exceed viewport — both scrollbars
   allowed. Wobble was caused by index.html's scroll handler toggling .freezed-content
   class (which sets position:fixed on header) when scrollTop crosses 50px — that
   toggle reflows the page mid-scroll. Override with position:sticky so the header
   "freezes" smoothly without a class-flip reflow. */
body.jiffy-esign-mfe-active .esign-view,
body.jiffy-esign-mfe-active .esign-view > .container-fluid,
body.jiffy-esign-mfe-active esign-container {
    min-height: calc(100vh - 52px) !important;
}
body.jiffy-esign-mfe-active #esign-root {
    height: calc(100vh - 52px) !important;
    overflow-y: auto !important;
    background: #fff !important;
}
/* Sticky header — replaces the position:fixed toggle, no reflow on scroll */
body.jiffy-esign-mfe-active .sample,
body.jiffy-esign-mfe-active .sample.freezed-content {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

/* Stretch the Angular shadow host (direct child of #esign-root) to fill the
   full flex height — this makes Angular's :host{ height:100% } resolve correctly
   so both loaded content and the loading spinner fill the available viewport. */
body.jiffy-esign-mfe-active #esign-root > * {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

#esign-root .search_filter .input-group-btn .btn {
    background: var(--bs-primary) !important;
    color: #fff !important;
    padding: 0 !important;
    width: 36px !important;
    height: 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 4px !important;
    opacity: 1 !important;
}

ng2-pdf-viewer,
ng2-pdf-viewer .pdfViewer,
ng2-pdf-viewer .page,
ng2-pdf-viewer canvas {
  display: block !important;
  width: 100% !important;
}