@charset "UTF-8";
.btn-primary {
  background-color: #084084 !important;
  border-color: #084084 !important;
}
.card-primary.card-outline {
  border-top: 3px solid #084084 !important;
}
.btn-outline-dark:hover {
  background-color: #084084 !important;
}
.dropdown-item:hover {
  background-color: #084084 !important;
}
.btn-edit {
  background-color: #2F6235 !important;
  border-color: #2F6235 !important;
}
.btn-view {
  background-color: #C35F06 !important;
  border-color: #C35F06 !important;
}
.btn-history {
  background-color: #2F3E45 !important;
  border-color: #2F3E45 !important;
}
.btn-block-unblock {
  background-color: #275091 !important;
  border-color: #275091 !important;
}
.btn-approve {
  background-color: #2F6235 !important;
  border-color: #2F6235 !important;
}
.btn-reject {
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
}
.card-primary:not(.card-outline) > .card-header {
  background-color: #084084;
}
[class*=sidebar-dark-] .sidebar a {
  color: #fff;
}
.brand-link {
  background-color: #fff;
  color: #084084 !important;
}
.font-weight-light {
  font-weight: 600 !important;
}
[class*=sidebar-dark-] {
  background-color: #084084 !important;
}
.bg-gradient-success {
  background: #084084 linear-gradient(180deg, #084084, #7873be) repeat-x !important;
  color: #fff;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}
.info-box .info-box-icon {
  font-size: 2.875rem;
}
.history-label {
  color: #E27518;
  font-size: 16px;
  font-weight: bolder;
}
.custom-bootstrap-switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 30px;
}
.custom-switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}
.custom-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 30px;
  transition: 0.4s;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: white;
  font-size: 14px;
}
.custom-slider::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.custom-switch-input:checked + .custom-slider {
  background-color: #0e37aa;
}
.custom-switch-input:checked + .custom-slider::before {
  transform: translateX(38px);
}
/* Hide footer when Employee Print View is active */
app-employee-print-view ~ app-footer {
  display: none !important;
}
app-request-print-view ~ app-footer {
  display: none !important;
}
/* Save button (btn-primary) */
.btn-primary {
  background-color: #006400 !important;
  /* dark green */
  border-color: #006400 !important;
  color: #fff !important;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: #0b6623 !important;
  /* slightly lighter dark green */
}
.btn-primary:active {
  background-color: #004d00 !important;
  /* even darker on click */
}
/* Reset button (first btn-secondary) */
.col-md-2:nth-child(2) .btn-secondary {
  background-color: #ffc107 !important;
  /* yellow */
  border-color: #ffc107 !important;
  color: #000 !important;
  transition: background-color 0.2s ease;
}
.col-md-2:nth-child(2) .btn-secondary:hover {
  background-color: #e0a800 !important;
}
.col-md-2:nth-child(2) .btn-secondary:active {
  background-color: #b8860b !important;
  color: #fff !important;
}
/* Cancel button (second btn-secondary) */
.col-md-2:nth-child(3) .btn-secondary {
  background-color: #dc3545 !important;
  /* red */
  border-color: #dc3545 !important;
  color: #fff !important;
  transition: background-color 0.2s ease;
}
.col-md-2:nth-child(3) .btn-secondary:hover {
  background-color: #c82333 !important;
}
.col-md-2:nth-child(3) .btn-secondary:active {
  background-color: #7a141f !important;
}
/* ===== Target ONLY the bottom button row inside the card body =====
   This avoids changing any col-md-2 used earlier in the forms. */
.card .card-body > .row.mb-3 {
  display: flex;
  flex-wrap: wrap;
  /* allow wrapping when there's no space */
  gap: 10px;
  /* small gap between buttons (horizontal & vertical) */
  align-items: center;
  justify-content: flex-start;
  /* change to center if you want centered on wide screens */
  margin-bottom: 0;
  /* keep visual spacing consistent */
}
/* Make each col wrapper only as wide as its content (so color won't expand) */
.card .card-body > .row.mb-3 > .col-md-2 {
  flex: 0 0 auto;
  /* don't grow or shrink */
  width: auto;
  margin: 0;
  /* gap handled by gap */
  padding: 0;
  /* keep the existing column padding from interfering */
}
/* Prevent .btn-block (if present) from forcing full width in this row */
.card .card-body > .row.mb-3 .btn-block,
.card .card-body > .row.mb-3 .btn {
  display: inline-block;
  width: auto !important;
  min-width: 110px;
  /* consistent clickable target — tune as needed */
  text-align: center;
  white-space: nowrap;
  /* prevents label wrapping inside button */
}
/* Small screens: allow wrapping but keep buttons compact and centered */
@media (max-width: 420px) {
  .card .card-body > .row.mb-3 {
    justify-content: center;
    /* buttons centered on tiny screens */
  }

  .card .card-body > .row.mb-3 > .col-md-2 {
    /* keep buttons compact instead of full-bleed */
    width: auto;
    flex-basis: auto;
  }

  .card .card-body > .row.mb-3 .btn {
    min-width: 140px;
    /* still reasonable tappable size */
  }
}

/*# sourceMappingURL=styles.css.map*/