/*
===============================================================================
COMPONENT STYLES
===============================================================================
Table of Contents:
1. Cards
2. Navigation (Navbar & Nav Pills)
3. Buttons
4. Bootstrap Select
5. Bootstrap Datepicker
6. Forms (Checkboxes, Radios, Inputs)
7. Tables
8. Modals
9. Toast Notifications
10. Alerts
11. Popovers
12. Loading Overlay
13. Unified Input Group (Tag Search)
===============================================================================
*/

/* =============================================================================
   1. CARDS
   ============================================================================= */

.card {
  background: var(--color-white);
}

.card-title {
  color: var(--color-brand-dark);
}

/* =============================================================================
   2. NAVIGATION (NAVBAR & NAV PILLS)
   ============================================================================= */

/* Navbar */
.navbar-collapse.collapse.show {
  background-color: var(--color-brand-dark) !important;
}

.dropdown-item:hover,
.dropdown-item:active {
  background-color: var(--color-gray-ultralight) !important;
  color: var(--color-gray) !important;
}

/* Nav Pills */
.nav-pills > li > a {
  background-color: var(--color-gray-extralight) !important;
  color: var(--color-brand) !important;
  border-radius: 0 !important;
  font-weight: var(--fw-semibold);
}

.nav-pills .nav-link.active {
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
}

.nav-pills > li:first-child > a {
  border-top-left-radius: .375rem !important;
  border-bottom-left-radius: .375rem !important;
}

.nav-pills > li:last-child > a {
  border-top-right-radius: .375rem !important;
  border-bottom-right-radius: .375rem !important;
}

/* =============================================================================
   3. BUTTONS
   ============================================================================= */

/* Base Button Styles */
.btn {
  padding: .5rem !important;
  border: none;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.08);
}

.btn-primary,
.btn-outline-primary,
.btn-text-primary,
.btn-secondary,
.btn-outline-secondary,
.btn-text-secondary,
.btn-warning {
  border-width: 2px;
  border-style: solid;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}

/* Button Sizes */
.btn-sm {
  padding: .25rem .5rem !important;
  font-size: var(--cds-size-font-sm) !important;
}

/* Primary Button */
.btn-primary {
  border-color: var(--color-brand) !important;
  border-style: solid !important;
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
}

  .btn-primary:hover {
    background: var(--color-brand-800) !important;
  }

  .btn-primary:active {
    background: var(--color-brand-dark) !important;
  }

  .btn-primary:focus {
    background-color: var(--color-brand-800) !important;
    border-color: var(--color-white) !important;
    box-shadow: 0 0 0 4px var(--color-blue-400) !important;
  }

  .btn-primary:disabled {
    background-color: var(--color-gray-300) !important;
    border-color: var(--color-gray-300) !important;
    color: var(--color-white) !important;
  }

/* Outline Primary Button */
.btn-outline-primary {
  border-color: var(--color-brand) !important;
  color: var(--color-brand) !important;
}

  .btn-outline-primary:hover {
    border-color: var(--color-brand-800) !important;
    background-color: var(--color-brand-50) !important;
    color: var(--color-brand-800) !important;
  }

  .btn-outline-primary:active,
  .btn-outline-primary.show {
    border-color: var(--color-brand-dark) !important;
    color: var(--color-brand-dark) !important;
    background-color: var(--color-brand-50) !important;
  }

  .btn-outline-primary:focus {
    border-color: var(--color-white) !important;
    color: var(--color-white) !important;
    background-color: var(--color-brand) !important;
    box-shadow: 0 0 0 4px var(--color-blue-400) !important;
  }

  .btn-outline-primary:disabled {
    color: var(--color-gray-light) !important;
    border-color: var(--color-gray-light) !important;
    background-color: var(--color-white) !important;
  }

/* Text Primary Button */
.btn-text-primary {
  border: none !important;
  color: var(--color-brand) !important;
  box-shadow: none;
}

  .btn-text-primary:hover {
    background-color: var(--color-brand-50) !important;
  }

  .btn-text-primary:active {
    background-color: var(--color-brand-100) !important;
    color: var(--color-brand-dark) !important;
  }

  .btn-text-primary:focus {
    border-color: var(--color-brand) !important;
    color: var(--color-brand-dark) !important;
    box-shadow: 0 0 0 4px var(--color-blue-400) !important;
  }

  .btn-text-primary:disabled {
    color: var(--color-gray-light) !important;
    background-color: transparent !important;
  }

/* Secondary Button */
.btn-secondary {
  background-color: var(--color-gray-extralight) !important;
  color: var(--color-brand) !important;
  border-color: var(--color-gray-extralight) !important;
}

  .btn-secondary:hover {
    background-color: var(--color-gray-light) !important;
    border-color: var(--color-gray-light) !important;
    color: var(--color-brand-800) !important;
  }

  .btn-secondary:focus {
    background: var(--color-gray-light) !important;
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 0 4px var(--color-blue-400) !important;
  }

  .btn-secondary:active {
    background-color: var(--color-gray-300) !important;
    border-color: var(--color-gray-300) !important;
    color: var(--color-brand-dark) !important;
  }

  .btn-secondary:disabled {
    background-color: var(--color-gray-light) !important;
    border-color: var(--color-gray-light) !important;
    color: var(--color-gray-400) !important;
  }

/* Outline Secondary Button */
.btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--color-gray-extralight) !important;
  color: var(--color-brand) !important;
}

  .btn-outline-secondary:hover {
    background-color: var(--color-gray-extralight) !important;
    border-color: var(--color-gray-light) !important;
    color: var(--color-gray) !important;
  }

  .btn-outline-secondary:active {
    background-color: var(--color-gray-extralight) !important;
    border-color: var(--color-gray-300) !important;
    color: var(--color-gray-dark) !important;
  }

  .btn-outline-secondary:focus {
    background-color: var(--color-gray-extralight) !important;
    border-color: var(--color-gray-light) !important;
    color: var(--color-gray) !important;
    box-shadow: 0 0 0 4px var(--color-blue-400) !important;
  }

  .btn-outline-secondary:disabled {
    color: var(--color-gray-light) !important;
  }

/* Text Secondary Button */
.btn-text-secondary {
  color: var(--color-brand) !important;
}

  .btn-text-secondary:hover {
    background-color: var(--color-gray-extralight) !important;
    border-color: var(--color-gray-extralight) !important;
    color: var(--color-brand-800) !important;
  }

  .btn-text-secondary:active {
    background-color: var(--color-gray-light) !important;
    border-color: var(--color-gray-light) !important;
    color: var(--color-gray-dark) !important;
  }

  .btn-text-secondary:focus {
    background-color: var(--color-gray-ultralight) !important;
    color: var(--color-gray-dark) !important;
    box-shadow: 0 0 0 4px var(--color-blue-400) !important;
  }

.btn-warning {
    background-color: var(--color-yellow-700) !important;
    border-color: var(--color-yellow-700) !important;
    color: var(--color-white) !important;
}

/* Light Button */
.btn-light {
  background-color: var(--color-gray-light) !important;
  border-color: var(--color-gray-light) !important;
  color: var(--color-gray) !important;
}

  .btn-light:hover {
    background-color: var(--color-gray-300) !important;
    border-color: var(--color-gray-300) !important;
  }

/* =============================================================================
   4. BOOTSTRAP SELECT
   ============================================================================= */

.form-select {
  background-color: var(--color-gray-light) !important;
}

.dropdown-menu.show .dropdown-item.active,
.dropdown-menu.show .dropdown-item:hover,
.dropdown-menu.show .dropdown-item:focus {
  background-color: var(--color-gray-extralight) !important;
}

.dropdown-menu.show .disabled.active .dropdown-item.active {
  background-color: var(--color-white) !important;
}    

.bootstrap-select .dropdown-menu li > a.disabled {
  color: var(--color-gray-light) !important;
}

/* =============================================================================
   5. BOOTSTRAP DATEPICKER
   ============================================================================= */

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  cursor: not-allowed;
}

.datepicker table tr td.active.day {
  background-color: var(--color-gray) !important;
  background-image: none;
}

.datepicker table tr td.today.day {
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
  background-image: none;
}

.datepicker table tr td.selected.range-start.day,
.datepicker table tr td.selected.range-end.day {
  background-color: var(--color-gray) !important;
  background-image: none;
}

/* =============================================================================
   6. FORMS (CHECKBOXES, RADIOS, INPUTS)
   ============================================================================= */

/* Placeholders */
input::placeholder,
textarea::placeholder {
  color: var(--bs-color-gray-ultralight);
}

/* Checkboxes */
.form-check-input {
  border-color: var(--color-gray-300) !important;
}

  .form-check-input:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
  }

/* =============================================================================
   7. TABLES
   ============================================================================= */

.table > :not(caption) > * > * {
  color: var(--color-gray);
}

.table > thead > tr {
  border-bottom-color: var(--cds-color-border-tertiary) !important;
}

.table.table-borderless > thead > tr {
  border-bottom: 1px solid var(--cds-color-border-tertiary) !important;
}

.table.table-borderless > tfoot > tr {
  border-top: 1px solid var(--cds-color-border-tertiary) !important;
}

.table.caption-top > caption {
  color: var(--color-gray);
}

/* =============================================================================
   8. MODALS
   ============================================================================= */
.modal-content {
  box-shadow: var(--cds-elevation-shadow-overlay) !important;
}

.modal-header {
  border-bottom-color: var(--color-gray-extralight) !important;
}

  .modal-header > .modal-title {
    font-weight: var(--fw-semibold) !important;
    line-height: var(--cds-size-line-height-6) !important;
    font-size: var(--cds-size-font-lg) !important;
    color: var(--cds-color-text-heading) !important;
  }

.btn-close {
  color: var(--color-gray-500) !important;
}

.modal-footer {
  background-color: var(--cds-color-background-secondary) !important;
}

/* =============================================================================
   9. TOAST NOTIFICATIONS
   ============================================================================= */

/* Toast Variants */
.toast-success {
  background-color: var(--color-green) !important;
  color: var(--color-gray) !important;
  font-weight: var(--fw-semibold);
}

.toast-info {
  background-color: var(--color-blue) !important;
  color: var(--color-gray) !important;
  font-weight: var(--fw-semibold);
}

.toast-warning {
  background-color: var(--color-yellow-700) !important;
  color: var(--color-gray) !important;
}

.toast-error {
  background-color: var(--color-red) !important;
  color: var(--color-white) !important;
}

/* =============================================================================
   10. ALERTS
   ============================================================================= */

.alert.alert-info {
  background-color: var(--color-blue-ultralight) !important;
  color: var(--color-blue-dark) !important;
  border-left: 2px solid var(--color-blue-dark) !important;
}

/* =============================================================================
   11. POPOVERS
   ============================================================================= */

.popover {
  font-family: var(--cds-text-font-family-brand);
  color: var(--color-gray) !important;
}

.popover-header {
  font-weight: var(--fw-bold) !important;
  border-bottom-color: var(--color-gray-extralight) !important;
}

/* =============================================================================
   12. LOADING OVERLAY
   ============================================================================= */

.loadingoverlay {
  justify-content: unset !important;
  padding-top: 20%;
  text-align: center;
}

/* =============================================================================
   13. UNIFIED INPUT GROUP (TAG SEARCH)
   ============================================================================= */

.input-group-unified {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-color: var(--color-white);
  border-top: 1px solid var(--color-gray-ultralight) !important;
  border-radius: .25rem;
  overflow: hidden;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
}

  .input-group-unified:hover {
    border: 1px solid var(--color-brand) !important;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08) !important;
  }

  .input-group-unified:focus-within {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
  }

  /* Remove all default borders and styling from children */
  .input-group-unified .form-control,
  .input-group-unified .btn {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    border-radius: 0 !important;
    outline: none !important;
    height: 40px;
    line-height: 1.5;
    padding: .5rem .75rem;
    margin: 0;
  }

  /* Input fields */
  .input-group-unified > .form-control {
    flex: 1 1 auto;
    min-width: 0;
  }

    .input-group-unified > .form-control:focus {
      background: transparent;
      outline: none;
      box-shadow: none !important;
    }

    /* Override modal and hover styles for unified input group */
    .input-group-unified > .form-control,
    .modal-body .input-group-unified > .form-control,
    .input-group-unified > .form-control:hover,
    .modal-body .input-group-unified > .form-control:hover {
      border-top: none !important;
    }

/* Subtle dividers between controls */
.input-divider {
  width: 1px;
  background: #e9ecef;
  align-self: stretch;
  margin: .5rem 0;
  flex-shrink: 0;
}

/* Button styling */
.input-group-unified .btn {
  width: 60px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  background: transparent;
  transition: color 0.2s ease;
  cursor: pointer;
}

  .input-group-unified .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Ensure icon is centered */
  .input-group-unified .btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important;
  }

/* =============================================================================
   MEDIA QUERIES
   ============================================================================= */

/* Mobile */
@media (max-width: 767.98px) {
  #toast-container.toast-top-full-width {
    top: 71px !important;
  }

  .loadingoverlay {
    padding-top: 60%;
  }

  .loadingoverlay_text {
    padding-top: 1rem;
    font-size: 2rem !important;
  }
}

/* Specifically for iPhones */
@media only screen and (max-width: 767.98px) {
  .loadingoverlay {
    padding-top: 45%;
  }
}

/* Tablet Landscape */
@media (max-width: 991.98px) and (orientation: landscape) {
  .loadingoverlay {
    padding-top: 35%;
  }

  .loadingoverlay_text {
    padding-top: 1rem;
    font-size: 1.5rem !important;
  }
}

/* =============================================================================
   END OF STYLESHEET
   ============================================================================= */