html {
  width: 100%;
}

body {
  overflow-x: hidden !important;
}

body.show-spinner>main {
  overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner>* {
  opacity: 0;
}

body.show-spinner>footer.page-footer {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Spinner */
body.show-spinner::after {
  content: " ";
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  position: fixed;
  z-index: 1;
}

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

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

body{
  min-height: calc(100% - 79px);
}

:root{
  --bottom-menu-height: 64px;
  --top-safe-area: 0px;
  --bottom-safe-area: 0px;
  --top-bar-height: 50px;
  --top-menu-height: calc(var(--top-bar-height) + var(--top-safe-area));
  --content-top-offset: calc(var(--top-menu-height) + 25px);
}

@supports (padding-top: constant(safe-area-inset-top)){
  :root{
    --top-safe-area: constant(safe-area-inset-top);
    --bottom-safe-area: constant(safe-area-inset-bottom);
  }
}

@supports (padding-top: env(safe-area-inset-top)){
  :root{
    --top-safe-area: env(safe-area-inset-top, 0px);
    --bottom-safe-area: env(safe-area-inset-bottom, 0px);
  }
}

@supports (-webkit-touch-callout: none){
  @media (max-width: 575px) and (min-height: 780px) and (orientation: portrait){
    :root{
      --top-safe-area: max(env(safe-area-inset-top, 0px), 56px);
    }
  }
}

/* menu changes */
.navbar{
  box-sizing: border-box;
  height: var(--top-menu-height);
  min-height: var(--top-menu-height);
  padding: var(--top-safe-area) 0 0 0;
}

/* Toast notifications: push top-anchored toasts below the status bar / notch /
   camera safe area (viewport-fit=cover makes top:20px sit under it on iPhone). */
.jq-toast-wrap.top-right,
.jq-toast-wrap.top-left{
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}

.menu{
  padding-top: var(--top-menu-height);
  height: calc(100% - var(--top-menu-height) - var(--bottom-menu-height)) !important
}

.menu .main-menu{
  /* .main-menu is position:fixed, so height:100% resolves against the viewport,
     not .menu. With the ~top-menu-height top offset that overflowed below the
     viewport and pushed the last items behind the fixed footer. Subtract the
     top bar and the fixed bottom footer so the menu ends exactly at the footer. */
  height: calc(100% - var(--top-menu-height) - var(--bottom-menu-height)) !important;
}

.menu .main-menu .scroll{
  padding-bottom: 16px;
}

.logo{
  background-size: 100%;
}

.light .btn-outline-light{
  color: #2f3a42;
  border-color: rgba(47, 58, 66, 0.42);
  background-color: rgba(47, 58, 66, 0.03);
}

.light .btn-outline-light:hover,
.light .btn-outline-light:focus,
.light .btn-outline-light:not(:disabled):not(.disabled):active,
.light .show > .btn-outline-light.dropdown-toggle{
  color: #1f2930;
  border-color: rgba(47, 58, 66, 0.68);
  background-color: rgba(47, 58, 66, 0.12);
}

.light .btn-outline-light i{
  color: inherit;
}

/* main page according to new menu format */

main {
  margin-top: var(--content-top-offset);
  margin-right: 25px;
  margin-bottom: 20px;
}

/* list table changes */

.data-table-rows table td{
  padding: 0.4rem;
}

table.dataTable td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* page footer */

footer.page-footer{
  padding: 0;
  min-height: 64px;
  height: auto;
  /* Fixed, always visible at the bottom (was position:absolute). Theme-aware
     background so it stays opaque over scrolling content in dark & light. */
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 1020;
  background: var(--foreground-color, #ffffff);
  border-top: 1px solid var(--separator-color, #d7d7d7);
  box-shadow: 0 -1px 15px rgba(0, 0, 0, .04), 0 -1px 6px rgba(0, 0, 0, .04);
}

.dark footer.page-footer{
  box-shadow: 0 -1px 15px rgba(0, 0, 0, .1), 0 -1px 8px rgba(0, 0, 0, .1);
}

/* keep page content from hiding behind the fixed footer */
main{
  padding-bottom: 84px;
}

body.no-footer main{
  margin: 0 !important;
  padding-bottom: 0;
}

body.no-footer footer.page-footer{
  display: none;
}

footer.page-footer .footer-content,
footer.page-footer .container-fluid,
footer.page-footer .mobile-bottom-menu{
  min-height: 64px;
}

#app-container footer.page-footer .footer-content{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

footer.page-footer .container-fluid{
  padding-left: 8px;
  padding-right: 8px;
}

.mobile-bottom-menu{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

.bottom-menu-side,
.bottom-menu-center{
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.bottom-menu-left{
  justify-content: flex-start;
}

.bottom-menu-center{
  justify-content: center;
  gap: 6px;
}

.bottom-menu-right{
  justify-content: flex-end;
}

.bottom-menu-dropup{
  display: flex;
  min-width: 0;
}

.footer-connection-menu{
  min-width: 180px;
  margin-bottom: 8px;
}

.footer-connection-action.text-danger,
.footer-connection-action.text-danger i{
  color: #c43d4b;
}

.footer-connection-action.text-success,
.footer-connection-action.text-success i{
  color: #3e884f;
}

.bottom-menu-item{
  flex: 0 1 112px;
  min-width: 0;
  width: 112px;
  max-width: 100%;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--primary-color, #3a3a3a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 4px 4px;
  line-height: 1.05;
  text-align: center;
  border-radius: 0;
  transition: color .15s ease, background-color .15s ease;
}

.bottom-menu-item i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
  margin: 0 auto 3px;
  color: var(--primary-color, #3a3a3a);
  transition: color .15s ease;
}

.bottom-menu-item strong{
  display: block;
  width: 100%;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary-color, #3a3a3a);
  opacity: .78;
  transition: color .15s ease, opacity .15s ease;
}

.bottom-menu-item:hover,
.bottom-menu-item:active,
.bottom-menu-item:focus{
  color: var(--theme-color-1, #00365a);
  background: rgba(56, 104, 139, .08);
}

.bottom-menu-item:hover i,
.bottom-menu-item:active i,
.bottom-menu-item:focus i,
.bottom-menu-item:hover strong,
.bottom-menu-item:active strong,
.bottom-menu-item:focus strong{
  color: var(--theme-color-1, #00365a);
  opacity: 1;
}

.bottom-menu-item.text-danger i,
.bottom-menu-item.text-danger strong{
  color: #c43d4b;
}

.bottom-menu-item.text-success i,
.bottom-menu-item.text-success strong{
  color: #3e884f;
}

.navbar .user .user-menu-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
}

.navbar .user .name{
  display: none !important;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.navbar .user .user-initials{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--theme-color-1, #00365a);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0;
}

.navbar .user .user-menu-name{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575px){
  :root{
    --bottom-menu-height: calc(68px + var(--bottom-safe-area));
  }

  html,
  body{
    height: 100%;
    overflow: hidden !important;
  }

  main{
    box-sizing: border-box;
    height: calc(100dvh - var(--content-top-offset) - var(--bottom-menu-height));
    max-height: calc(100dvh - var(--content-top-offset) - var(--bottom-menu-height));
    /* !important is required: the Dore theme's mobile rule sets
       `main{margin-top:80px!important}`, which otherwise wins and starts the
       content 57px too high — hiding the top card row under the fixed navbar and
       leaving a matching gap above the fixed bottom menu. */
    margin-top: var(--content-top-offset) !important;
    margin-bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navbar .navbar-right{
    right: 8px;
  }

  .navbar .navbar-right .header-icon{
    width: 32px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  footer.page-footer{
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  footer.page-footer .footer-content,
  footer.page-footer .container-fluid,
  footer.page-footer .mobile-bottom-menu{
    min-height: 68px;
  }

  main{
    padding-bottom: 16px;
  }

  body.no-footer main{
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh;
    margin: 0 !important;
    padding-bottom: 0;
    overflow-y: auto;
  }

  body.no-footer footer.page-footer{
    display: none !important;
  }

  body.no-footer main > .container{
    min-height: 100dvh;
  }

  body.no-footer .loginImage{
    min-height: 100dvh;
    height: auto !important;
    margin: 0 !important;
    padding-top: 18px;
    padding-bottom: 18px;
    align-content: center;
  }

  body.no-footer .loginImage > .col-12{
    padding-left: 12px;
    padding-right: 12px;
  }

  body.no-footer .loginImage > .col-12:empty{
    display: none;
  }

  body.no-footer .loginImage img[alt="IEFISH Logo"]{
    max-width: 180px !important;
    margin-top: 0 !important;
    margin-bottom: 16px;
  }

  body.no-footer .auth-card{
    margin-bottom: 0;
  }

  body.no-footer .auth-ie{
    padding: 20px !important;
  }

  body.no-footer #LoginPage{
    min-height: 0 !important;
  }

  body.no-footer .logo-single{
    margin-bottom: 24px;
  }

  #app-container.menu-mobile .menu{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--top-menu-height);
    bottom: var(--bottom-menu-height);
    height: calc(100dvh - var(--top-menu-height) - var(--bottom-menu-height)) !important;
    padding-top: 0;
    pointer-events: none;
    z-index: 1010;
  }

  #app-container.menu-mobile.main-show-temporary .menu{
    pointer-events: auto;
  }

  #app-container.menu-mobile .menu .main-menu{
    left: 0;
    top: var(--top-menu-height);
    width: 100%;
    height: calc(100dvh - var(--top-menu-height) - var(--bottom-menu-height)) !important;
    padding: 18px 14px;
    transform: translateX(-100vw);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
  }

  #app-container.menu-mobile.main-show-temporary .menu .main-menu{
    transform: translateX(0);
  }

  #app-container.menu-mobile .menu .main-menu .scroll{
    height: auto;
    min-height: 100%;
    padding: 0;
    margin: 0;
  }

  #app-container.menu-mobile .menu .main-menu ul{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    margin: 0;
    padding: 0;
  }

  #app-container.menu-mobile .menu .main-menu ul li{
    min-width: 0;
    margin: 0;
  }

  #app-container.menu-mobile .menu .main-menu ul li a{
    height: 96px;
    min-height: 96px;
    padding: 10px 6px 8px;
    border: 1px solid rgba(143, 143, 143, 0.18);
    border-radius: 8px;
    background: rgba(143, 143, 143, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #app-container.menu-mobile .menu .main-menu ul li a:hover,
  #app-container.menu-mobile .menu .main-menu ul li a:focus,
  #app-container.menu-mobile .menu .main-menu ul li.active a{
    color: var(--theme-color-1, #00365a);
    border-color: rgba(56, 104, 139, 0.38);
    background: rgba(56, 104, 139, 0.12);
  }

  #app-container.menu-mobile .menu .main-menu ul li i{
    display: block;
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1;
  }

  #app-container.menu-mobile .menu .main-menu ul li span{
    display: block;
    width: 100%;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #app-container.menu-mobile .menu .main-menu ul li.active:after{
    display: none;
  }

  #app-container.menu-mobile .menu .sub-menu{
    display: none;
  }

  .bottom-menu-item{
    flex: 1 1 0;
    width: auto;
    min-height: 64px;
  }

  .bottom-menu-item i{
    width: 34px;
    height: 30px;
    font-size: 18px;
  }

  .mobile-bottom-menu{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .bottom-menu-center{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
  }

  .bottom-menu-left,
  .bottom-menu-right{
    display: none;
  }

  .bottom-menu-dropup{
    display: flex;
    min-width: 0;
  }

}

.logo-mobile {
  background-size: 100%;
}

.formButtonPosition{
  text-align: center;
}

/* Include buttons */
.form-group .btAddItem{
  padding: 2px 4px 2px 4px;
  border-radius: 8px;
}

.custom-scroll-list{
  max-height: 260px;
  overflow-y: scroll;
}

.searchStandardSelected{
  width: 100%;
}

.searchStandardSelected tbody tr td{
  cursor: pointer;
}

.searchStandard tbody tr td{
  cursor: pointer;
}

.w100{
  width: 100%;
}

.mg-left0{
  margin-left:0px
}

.menu .sub-menu {
  height: calc(100% - 45px)
}

.dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 192px !important;
}

.fileList {
  padding-top: 10px;
  max-height: 300px;
  overflow-y: scroll;
}

.fileSection {
  display: flex;
  align-items: center;
  justify-content: center;
}

.txCenter{
  text-align: center;
}

.fileSection p{
  width: 100%;
  height: 15px;
  text-align: center;
  margin: 0px;
}

.fileSection i{
  width: 100%;
  height: 15px;
  text-align: center;
  margin: 0px;
}

.fileSection button{
  padding: 4px 8px 4px 8px;
  margin-left: 2px;
}

.padding4 {
  padding: 4px 4px 4px 4px !important;
}

.card-body {
  padding: 16px 16px 16px 16px !important;
}

.dnone{
  display: none !important;
}

.pb-small{
  height: 112px
}

.mp-related{
  height: 215px;
}

/* for dark mode */
.dark .weight-visor{
  font-size: 50px;
  border: none !important;
  background-color: #1e2022;
  color: #d0d0d0 !important;
}

.light .weight-visor{
  font-size: 50px;
  border: none !important;
  background-color: #f8f9fa;
  color: #1e2022 !important;
}

/* Weight display locked to the scale (a weight equipment is configured and in
   live-scale mode). Kept subtle on purpose: this is the main readout, so it must
   not look disabled or dimmed — the plug button carries the real state cue. */
.weight-visor.weight-locked{
  cursor: not-allowed;
}

#bgDisplay .card-body > div{
  width: 100%;
  min-width: 0;
}

.weight-bottom{
  height: 380px!important;
}

.print-label-menu{
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.print-label-toggle{
  min-width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px !important;
}

.print-label-toggle .print-label-caret{
  font-size: 9px;
}

.print-label-collapse{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 138px;
}

.print-label-actions{
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 4px;
  background: #1e2022;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

.light .print-label-actions{
  background: #ffffff;
}

.print-label-actions .btn{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 5px 9px !important;
  border-radius: 4px !important;
  text-align: left;
  white-space: nowrap;
}

.print-label-actions .btn i{
  width: 16px;
  text-align: center;
}

.bcode-visor{
  font-size: 20px;
  border: none !important;
  background-color: transparent;
  margin-bottom: 0px;
}

.bcode-visor:focus{
  background-color: transparent;
}

.oplist{
  height: 350px;
  overflow-y: scroll;
}

.mb-80{
  margin-bottom: 80px !important;
}

.pb-60{
  padding-bottom: 60px !important;
}

.sfield .lead {
  font-size: 0.8rem !important;
  line-height: 0.9rem !important;
  font-size: 15px !important;
}

.sop :hover {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
}

.displaySuccess {
  border-color:#9EC600;
  background-color:#9EC600;
  color: black
}

.displaySuccess .text-white{
  color: black !important;
}

.displaySuccess .form-control{
  background-color: #9EC600;
  color: black !important;
}

.displayError {
  border-color:#eb4034;
  background-color:#eb4034;
  color: white
}

.displayError .text-white{
  color: white !important;
}

.displayError .form-control{
  background-color: #eb4034;
  color: white !important;
}

/* Auto-print: the green weight is settling toward a stable reading and will
   print once it holds ~1s. Pulsing amber inset over the green card — feedback
   only, no layout shift; the class is cleared on print or when weight leaves range. */
.displayStabilizing{
  animation: ieStabilizePulse 0.9s ease-in-out infinite;
}

@keyframes ieStabilizePulse{
  0%, 100%{ box-shadow: inset 0 0 0 3px rgba(255, 136, 0, 0); }
  50%{ box-shadow: inset 0 0 0 3px rgba(255, 136, 0, 0.85); }
}

/* Rejeito point waiting for its second weight: the Rejeito reading landed and
   the Produto one is still pending. Same inset-pulse technique as above (no
   layout shift), amber→red so it reads as "act now" rather than "settling".
   Cleared when the Produto weight registers or the operator cancels. */
.ieRejeitoAwait{
  animation: ieRejeitoPulse 0.9s ease-in-out infinite;
}

@keyframes ieRejeitoPulse{
  0%, 100%{ box-shadow: inset 0 0 0 3px rgba(255, 136, 0, 0.85); }
  50%{ box-shadow: inset 0 0 0 3px rgba(220, 53, 69, 0.95); }
}

/* Two-stage rejeito point: the Rejeito and the Produto readings look
   identical on the weighing card, and an operator who weighs the Produto
   first loses the Rejeito silently — the note lands closed with no
   weight_end, which every yield surface reads as 0% rendimento. So the card
   says which of the two the scale is about to capture: the border carries
   the state, the strip carries the words. Steady, not pulsing — the pulse
   above means "act now", this means "you are here". Absent for every other
   process, where Início/Término need no explaining. */
#bgDisplay.ieStageRejeito{
  box-shadow: inset 0 0 0 3px rgba(255, 136, 0, 0.9);
}

#bgDisplay.ieStageProduto{
  box-shadow: inset 0 0 0 3px rgba(40, 167, 69, 0.9);
}

.stage-hint{
  border-radius: .35rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .35rem;
  padding: .28rem .6rem;
  text-align: center;
  text-transform: uppercase;
}

.stage-hint.stage-rejeito{ background-color: rgba(255, 136, 0, 0.95); }
.stage-hint.stage-produto{ background-color: rgba(40, 167, 69, 0.95); }

.dark .opCheck {
  background-color: #1e2022;
  border-radius: .75rem;
  padding: .4rem;
}

.light .opCheck {
  background-color: #f8f9fa;
  border-radius: .75rem;
  padding: .4rem;
}

#palletCode{
  font-size: 1.1rem;
}

.text-success{
  color: #9EC600 !important;
}

.fieldData{
  cursor: pointer;
}

/* Hover highlights.
   These were reversed: light mode painted a near-black #1e2022 behind the
   theme's dark #3a3a3a text (1.44:1 contrast — the hovered row became
   unreadable), while dark mode painted a near-white #e2e6ea behind light text
   (1.25:1 once .dark .table-hover forces #fff). Both are now a translucent
   tint of the theme's own background, so the tint never fights the text colour
   and the same rule works on cards, list items and table rows alike.
   Light 9.63:1, dark 4.50:1 (14.56:1 with the forced white). */
.fieldData :hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.dark .fieldData :hover {
  background-color: rgba(255, 255, 255, 0.07);
}

.dark .clicable:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 0.5rem;
  cursor: pointer;
}

.light .clicable:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Striped rows set their own background on the <tr>, so a hovered clickable row
   needs the tint on its cells to be visible over the stripe. */
.light .table-hover tbody tr.clicable:hover > td,
.light .table-hover tbody tr.clicable:hover > th {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .table-hover tbody tr.clicable:hover > td,
.dark .table-hover tbody tr.clicable:hover > th {
  background-color: rgba(255, 255, 255, 0.07);
}

.dark .unitSelected{
  color: white;
}

.light .unitSelected{
  color: black;
}

.light .text-color-custom{
  color: black;
}

.dark .text-color-custom{
  color: white;
}

.lop{
  cursor: pointer;
  border: 1px solid #1e2022;
  border-radius: 8px;
  padding: 4px 8px 4px 8px;
  margin: 2px;
}

.lop.selected{
  background-color: rgb(56, 103, 138);;
  color: white;
}

.spallet{
  cursor: pointer;
}

.scrollable {
  width: 100%;
  border-collapse: collapse;
}

.scrollable thead, 
.scrollable tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* evita desalinhamento */
}

/* .scrollable thead {
  background: #3195a5;
} */

.scrollable tbody {
  display: block;
  max-height: 300px; /* altura do corpo visível */
  overflow-y: auto;
  overflow-x: hidden;
}

.scrollable th, 
.scrollable td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.lscroll {
  display: flex;
  flex-wrap: nowrap;
  min-height: 130px;     /* impede quebra de linha */
  overflow-x: auto;       /* ativa scroll horizontal */
  gap: 1rem;              /* espaçamento entre cards */
  padding-bottom: 8px;  /* thumb | track */
}

.dark .lscroll {
  scrollbar-width: thin;        /* fino */
  scrollbar-color: #444 #111; 
}

.lscroll::-webkit-scrollbar {
    height: 8px;                  /* altura da barra horizontal */
}

.lscroll::-webkit-scrollbar-track {
    background: #111;             /* fundo da trilha (tema escuro) */
    border-radius: 8px;
}

.lscroll::-webkit-scrollbar-thumb {
    background: #444;             /* cor da barra */
    border-radius: 8px;
}

.lscroll::-webkit-scrollbar-thumb:hover {
    background: #666;             /* cor ao passar o mouse */
}

.lscroll > .col,
.lscroll> div {
  flex: 0 0 auto;         /* evita que se expandam */
  width: 300px !important;          /* define largura de cada card */
}

#listOperators {
  font-size: 12pt;
}

.filterTable{
  cursor: pointer;
}

#listSectors .active{
  border-color: #3195a5;
  border-width: 2px;
}

.fishIcon{
  font-size: 48pt;
  color: #3195a5;
}

.adjusted{
  color: #ddd;
  background-image: linear-gradient(to right top, #38688b, #427599, #46789b);;
}

.adjusted .progressbar-text{
  color: white !important;
}

.table-fixed-header thead th {
    position: sticky;
    top: 0;
    /* background: #fff; */
    z-index: 5;
}

.table-fixed-header tbody {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
}

.table-fixed-header thead,
.table-fixed-header tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.dark .radial {
  --size: 60px;
  --thickness: 6px;
  --color: #007bff;;
  --bg: #8f8f8f;

  text-align: center;
  padding-top: 20px;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #343a40 79%, transparent 80% 100%),
    conic-gradient(var(--color) calc(var(--value) * 1%), var(--bg) 0);
  position: relative;
}

.light .radial {
  --size: 60px;
  --thickness: 6px;
  --color: #007bff;
  --bg: #ddd;

  text-align: center;
  padding-top: 20px;
  color: #1e2022;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(var(--color) calc(var(--value) * 1%), var(--bg) 0);
  position: relative;
}

.radial::before {
  content: calc(var(--value) * 1%) "%";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.jq-toast-wrap,
.jq-toast-single {
    position: fixed !important;
    z-index: 999999 !important;
}


#picking-List{
  overflow-y: auto;
  min-height: 200px;
}

.dark .dropdown-item {
  color: #ffffff !important;
}

.highlight-date{
  background: #28a745 !important;
  color: #fff !important;
  border-radius: 50%;
}

/* Nav search bar — light/dark mode */
#navSearchBar {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.dark #navSearchBar {
  background: #1e2022;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.dark #navSearchBar .form-control {
  background-color: #232223;
  color: #8f8f8f;
  border-color: #424242;
}

/* Dark mode — Table hover text */
.dark .table-hover tbody tr:hover {
  color: #fff !important;
}

/* Dark mode — Select2 overrides */
.dark .select2-container--bootstrap .select2-selection,
.dark .select2-container--bootstrap .select2-selection--single,
.dark .select2-container--bootstrap .select2-selection--multiple {
  background-color: #232223 !important;
  color: #8f8f8f !important;
  border-color: #424242 !important;
}

.dark .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  background: #1e2022 !important;
  color: #8f8f8f !important;
  border-color: #424242 !important;
}

.dark .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  background: #232223 !important;
  color: #8f8f8f !important;
}

.dark .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  color: #8f8f8f !important;
}

.dark .select2-container--bootstrap .select2-dropdown {
  background-color: #232223 !important;
  border-color: #424242 !important;
}

.dark .select2-container--bootstrap .select2-results__option {
  color: #8f8f8f !important;
}

.dark .select2-container--bootstrap .select2-results__option--highlighted {
  background-color: #38688b !important;
  color: #d0d0d0 !important;
}

.dark .select2-container--bootstrap .select2-selection__choice__remove:hover {
  color: #38688b !important;
}

#disablecameraRead{
  margin-top: 0px!important;
}

.t-right{
  text-align: right !important;
}

#resumeInventoryTable{
  cursor: pointer;
}

.evolution-table th, .evolution-table td {
  white-space: nowrap;
  padding: 4px;
}

.evolution-table .col-period{
  max-width: 40px;
}

.display-table-scroll{
  overflow-x: scroll;
}

.tac{
  text-align: center !important;
}

.tar{
  text-align: right !important;
}

.inventory-item {
  cursor: pointer;
}

.btn span.btn-label {
  display: inline-block;
}

.btn :is(span.spinner-border, span.visually-hidden) {
  display: none;
}

.btn:disabled span.btn-label {
  display: none;
}

.btn:disabled :is(span.spinner-border, span.visually-hidden){
  display: inline-block;
}

@keyframes alert-pulse {
  0% { background-color: transparent; }
  50% { background-color: rgba(255, 68, 68, 0.2); } /* Using your ERROR_COLOR with transparency */
  100% { background-color: transparent; }
}

.tab-blink {
  animation: alert-pulse 1s infinite;
  border-radius: 4px;
  color: #FF4444 !important; /* ERROR_COLOR */
}
  
.loginImage{
  background-image: url('../img/login/bq.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 100dvh;
}

.login-card-header{
  gap: 12px;
}

#changeServer{
  min-height: 36px;
}

.login-server-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  white-space: nowrap;
}

.login-server-toggle i{
  font-size: 16px;
  line-height: 1;
}

.login-server-options{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.login-server-option{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--separator-color, rgba(143, 143, 143, .24));
  border-radius: 8px;
  cursor: pointer;
  background: rgba(143, 143, 143, .04);
}

.login-server-option input{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.login-server-option span{
  font-weight: 600;
  line-height: 1.15;
}

.login-server-option.is-selected{
  border-color: var(--theme-color-1, #38688b);
  background: rgba(56, 104, 139, .12);
}

@media (max-width: 575px){
  .login-card-header{
    align-items: flex-start !important;
  }

  .login-server-options{
    grid-template-columns: 1fr;
  }

  .login-server-toggle{
    width: 100%;
    justify-content: center;
  }
}

body.no-footer{
  min-height: 100dvh;
  border-radius: 0 !important;
  overflow-x: hidden;
}

body.no-footer main{
  min-height: 100dvh;
  border-radius: 0 !important;
}

body.no-footer .loginImage{
  border-radius: 0 !important;
}

.auth-ie{
  width: 100% !important;
  padding: 30px !important;
}

.custom-process-spacing{
  padding-top: 8px!important;
}

/* Overlay que cobre a tela toda */
.confirm-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgba(255, 255, 255, 1);

  display: flex;
  align-items: center;
  justify-content: center;

  /* estado fechado (default) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease;
}

/* estado aberto */
.confirm-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* box central */
.success-box {
  text-align: center;
  transform: scale(.96);
  opacity: 0;
  transition: transform .25s ease, opacity .25s eae;
}

/* anima a caixa quando abrir */
.confirm-overlay.is-open .success-box {
  transform: scale(1);
  opacity: 1;
}

/* Tooltips are informational only — never let them capture pointer events.
   Bootstrap tooltips render at z-index 1070 and, on touch, stay shown after a
   tap; combined with the theme's `.tooltip{top:-145px!important}` shift they can
   land invisibly over a control (e.g. the "Não conforme" N/C switch) and
   swallow the next click. pointer-events:none lets the click pass through to
   the button underneath. */
.tooltip{
  pointer-events: none !important;
}

.weight-bg{
  background: url(../img/login/plane.jpg);
}

/* vídeo */
.success-video {
  width: 120px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

#AlertData{
  font-size: large;
}

.btext {
  font-weight: bold;
}

.red-border {
  border: 2px solid #eb4034;
  border-radius: 8px;
}

#ncnonCompliantText{
  color: #f0aea9 !important;
  font-weight: bold;
}

/* Warehouse heatmap — buckets for days-to-due on occupied address cells.
   heat-1 = most urgent (overdue / due today), heat-5 = longest until expiry. */
.warehouse-heat-1 { background-color: #ff548f; color: #fff; }
.warehouse-heat-2 { background-color: #9061c2; color: #fff; }
.warehouse-heat-3 { background-color: #be80ff; color: #1a1a1a; }
.warehouse-heat-4 { background-color: #63d3ff; color: #1a1a1a; }
.warehouse-heat-5 { background-color: #02779e; color: #fff; }
.warehouse-heat-none { background-color: #c8c8c8; color: #1a1a1a; }
.warehouse-heat-1 small,
.warehouse-heat-2 small,
.warehouse-heat-5 small { color: #f3f3f3; }