/* ==========================
   Responsive Brand Logo
   ========================== */
.app-brand-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.text-muted{color:#949494;}
.margin-auto{margin:auto;}
.margin-vertical-auto{margin-top:auto;margin-bottom: auto;}
.add-user{color:blue !important;background: white;border: 1px dashed;}
.brand-logo {
  height: clamp(22px, 2.2vw + 10px, 44px); /* scales with viewport */
  width: auto;
  display: block;
}

.app-brand-text {
  font-size: clamp(16px, 1.1vw + 12px, 22px);
  line-height: 1.1;
}

@media (min-resolution: 2dppx) {
  .brand-logo {
    image-rendering: -webkit-optimize-contrast;
  }
}
.text-white{
  color:white;
}
.tr-warning{
  background: #ff000021;
}
.tr-success{
  background: #00ff001c;
}
.tr-green{
  background: #0cb30cb8;
}
.full-width{
  width: 100%;
}
.menu-link{
  color:white;
}
.subnav-icon{
  font-size:22px;
}
.apps-card{
  box-shadow:0 0.25rem 1.125rem rgba(75,70,92,0.1);
  background:white;
  border-radius:15px;
}
.icon-card{
  width: 128px;
}
.hide{display: none;}

.birdseye-pills{
  text-align: left;
}

.inactive-mc{
  background: #ff000029;
}
.variation-mc{
  background: #ffa50057;
}
/* ==========================
   Border Radius
   ========================== */

.br-0{border-radius:0px;} .br-10{border-radius:10px;} .br-20{border-radius:20px;} .br-30{border-radius:30px;} .br-40{border-radius:40px;} .br-50{border-radius:50px;} .br-60{border-radius:60px;}
.br-20-0-0-20{border-radius: 20px 0px 0px 20px;}
.br-20-20-0-0{border-radius: 20px 20px 0px 0px;}
.footer-button{border-radius:0px 0px 20px 20px;width:100%;}

.border-light-grey{border:1px solid #eaeaea;}

/* ==========================
   Directions
   ========================== */

.left{float:left;} .right{float:right;}
.utilisation-bar{background-color: #06db06 !important;}
.downtime-bar{background-color: #da9413 !important;}
.idle-bar{background-color: #db0303 !important;}
.card-img-operator {height: 140px;width: 110px;/object-fit: cover;border-radius: 20px 0 0 20px;}
.plant-selector {

  width: 200px;

  background: transparent !important;
  color: #fff;

  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 6px;

  padding: 6px 36px 6px 12px;   /* ← proper padding */

  font-size: 14px;
  line-height: 1.4;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;

}

/* dropdown arrow */
.plant-selector-wrapper {
  position: relative;
}

.plant-selector-wrapper::after {

  content: "\f078";
  font-family: "Font Awesome 6 Pro";

  position: absolute;

  right: 12px;
  top: 50%;

  transform: translateY(-50%);

  color: white;
  font-size: 12px;

  pointer-events: none;

}

.plant-selector:focus {

  outline: none;
  border-color: white;
  box-shadow: none;

}

.plant-selector option {

  color: black;

}
.menu-inner::-webkit-scrollbar {
  display: none;
}
.nav-pills .nav-link {
  padding: 6px 12px;
}
.nav-pills .nav-item .nav-link:not(.active):hover {
  padding: 6px 12px;
  border-radius: 20px;
}

/* ── Modal Form Elements — consistent sizing ── */
.modal .form-control,
.modal .form-select {
  padding: 8px 12px !important;
  font-size: 16px !important;
  min-height: 42px !important;
}
.modal .form-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
.modal .react-select__control {
  min-height: 42px !important;
  max-height: 42px !important;
  font-size: 16px !important;
  padding: 0 8px !important;
}
.modal .react-select__value-container {
  padding: 0 8px !important;
  font-size: 16px !important;
}
.modal .react-select__indicators {
  height: 42px !important;
}
.modal .react-select__placeholder {
  font-size: 16px !important;
}
.modal .react-select__single-value {
  font-size: 16px !important;
}
.modal .react-select__option {
  font-size: 16px !important;
}
.modal .react-select__input-container {
  font-size: 16px !important;
}
.modal .react-select__input {
  font-size: 16px !important;
}
.modal .react-select__menu {
  font-size: 16px !important;
}

/* ── Register Button (pill-shaped primary action in PageHeader) ── */
.btn-register {
  border-radius: 20px;
  padding: 8px 24px;
  font-weight: 600;
}
.btn-register i { font-weight: 900; }

/* ── TopMenu Links ── */
.topmenu-link {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.topmenu-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.topmenu-link.topmenu-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 600;
}