/* ==========================================================================
   Leoncia POS — Senior-Citizen-Friendly Bootstrap 4 Override
   Load this AFTER bootstrap.min.css in your HTML/Thymeleaf layout.
   No Sass build step required.
   ==========================================================================
   Palette:
     Primary   #C77700  (warm amber - matches dark-shell accent)
     Secondary #5C6B73  (slate gray - neutral, not "disabled" looking)
     Success   #1E7A34  (forest green)
     Danger    #B3261E  (brick red)
     Warning   #B36B00  (deep amber - distinct from primary via darkness)
     Info      #0B6E7C  (teal-blue)
   All pass WCAG AA (4.5:1) against white popup backgrounds.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base readability tweaks
   -------------------------------------------------------------------------- */
body {
  font-size: 16px; /* Bootstrap default; bump to 18px below inside popups */
}

/* .modal-body,
.modal-content {
  font-size: 18px; larger text where seniors read/enter data
} */

.modal-content label {
  font-weight: 600; /* labels stand out from input values */
}

/* Larger, easier-to-hit form controls inside popups */
.modal-content .form-control {
  min-height: 40px;
  font-size: 16px;
}


.modal-content .input-group-append {
  max-height: 40px;
}


/* --------------------------------------------------------------------------
   2. PRIMARY — warm amber
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: #C77700;
  border-color: #C77700;
  color: #FFFFFF;
}
.btn-primary:hover {
  background-color: #A66300;
  border-color: #9A5D00;
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(199, 119, 0, 0.5);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: #9A5D00;
  border-color: #8E5600;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #C77700;
  border-color: #C77700;
  opacity: 0.55;
}
.text-primary { color: #C77700 !important; }
.bg-primary { background-color: #C77700 !important; }
.border-primary { border-color: #C77700 !important; }

/* --------------------------------------------------------------------------
   3. SECONDARY — slate gray (replaces default purple)
   -------------------------------------------------------------------------- */
.btn-secondary {
  background-color: #5C6B73;
  border-color: #5C6B73;
  color: #FFFFFF;
}
.btn-secondary:hover {
  background-color: #46525A;
  border-color: #414B52;
}
.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(92, 107, 115, 0.5);
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
  background-color: #414B52;
  border-color: #3B444A;
}
.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: #5C6B73;
  border-color: #5C6B73;
  opacity: 0.55;
}
.text-secondary { color: #5C6B73 !important; }
.bg-secondary { background-color: #5C6B73 !important; }
.border-secondary { border-color: #5C6B73 !important; }

/* --------------------------------------------------------------------------
   4. SUCCESS — forest green
   -------------------------------------------------------------------------- */
.btn-success {
  background-color: #1E7A34;
  border-color: #1E7A34;
  color: #FFFFFF;
}
.btn-success:hover {
  background-color: #176128;
  border-color: #145A24;
}
.btn-success:focus,
.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(30, 122, 52, 0.5);
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
  background-color: #145A24;
  border-color: #124E20;
}
.text-success { color: #1E7A34 !important; }
.bg-success { background-color: #1E7A34 !important; }
.border-success { border-color: #1E7A34 !important; }

/* --------------------------------------------------------------------------
   5. DANGER — brick red
   -------------------------------------------------------------------------- */
.btn-danger {
  background-color: #B3261E;
  border-color: #B3261E;
  color: #FFFFFF;
}
.btn-danger:hover {
  background-color: #941E18;
  border-color: #8A1C16;
}
.btn-danger:focus,
.btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(179, 38, 30, 0.5);
}
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
  background-color: #8A1C16;
  border-color: #801A14;
}
.text-danger { color: #B3261E !important; }
.bg-danger { background-color: #B3261E !important; }
.border-danger { border-color: #B3261E !important; }

/* --------------------------------------------------------------------------
   6. WARNING — deep amber (dark text kept for contrast, per Bootstrap norm)
   -------------------------------------------------------------------------- */
.btn-warning {
  background-color: #B36B00;
  border-color: #B36B00;
  color: #FFFFFF;
}
.btn-warning:hover {
  background-color: #955900;
  border-color: #8A5300;
}
.btn-warning:focus,
.btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(179, 107, 0, 0.5);
}
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active {
  background-color: #8A5300;
  border-color: #7E4C00;
}
.text-warning { color: #B36B00 !important; }
.bg-warning { background-color: #B36B00 !important; }
.border-warning { border-color: #B36B00 !important; }

/* --------------------------------------------------------------------------
   7. INFO — teal-blue
   -------------------------------------------------------------------------- */
.btn-info {
  background-color: #0B6E7C;
  border-color: #0B6E7C;
  color: #FFFFFF;
}
.btn-info:hover {
  background-color: #095964;
  border-color: #08525C;
}
.btn-info:focus,
.btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(11, 110, 124, 0.5);
}
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active {
  background-color: #08525C;
  border-color: #074A53;
}
.text-info { color: #0B6E7C !important; }
.bg-info { background-color: #0B6E7C !important; }
.border-info { border-color: #0B6E7C !important; }

/* --------------------------------------------------------------------------
   8. Focus visibility (accessibility) — thicker outline for all buttons
   -------------------------------------------------------------------------- */
.btn:focus,
.btn.focus,
.form-control:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   9. Large action button convenience class
   Use alongside .btn-lg where the primary/close action needs extra emphasis
   -------------------------------------------------------------------------- */
.btn-lg {
  font-size: 1.15rem;
  padding: 0.65rem 1.5rem;
}