/* Bootstrap 4 class aliases for Bootstrap 5 */
.form-group { margin-bottom: 1rem; }
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
  box-sizing: border-box;
  padding-right: 5px;
  padding-left: 5px;
  min-width: 0;
}
@media (min-width: 768px) {
  .form-row > .col-md-6 {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
}
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.input-group {
  flex-wrap: nowrap;
}
.input-group-prepend,
.input-group-append {
  display: flex;
}
.input-group-prepend .btn,
.input-group-append .btn,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  border-radius: 0;
}
.custom-select,
.custom-file-input { display: block; width: 100%; }
.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }
.custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; }
.custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; }
.badge-pill { border-radius: 50rem; }
.badge-primary { color: #fff; background-color: #007bff; }
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-success { color: #fff; background-color: #28a745; }
.badge-danger { color: #fff; background-color: #dc3545; }
.badge-warning { color: #212529; background-color: #ffc107; }
.badge-info { color: #fff; background-color: #17a2b8; }
.badge-light { color: #212529; background-color: #f8f9fa; }
.badge-dark { color: #fff; background-color: #343a40; }
.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
.close:hover { color: #000; text-decoration: none; opacity: .75; }
.sr-only,
.sr-only-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.float-left { float: left !important; }
.float-right { float: right !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-italic { font-style: italic !important; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.ml-lg-2 { }
@media (min-width: 992px) {
  .ml-lg-2 { margin-left: 0.5rem !important; }
  .mr-lg-2 { margin-right: 0.5rem !important; }
}

/* Bootstrap 4: underline links only on hover */
:root {
  --bs-link-decoration: none;
  --bs-link-hover-decoration: underline;
}
a {
  text-decoration: none !important;
}
a:hover {
  text-decoration: underline !important;
}
a.btn,
a.btn:hover,
a.nav-link,
a.nav-link:hover,
a.navbar-brand,
a.navbar-brand:hover,
a.dropdown-item,
a.dropdown-item:hover,
a.page-link,
a.page-link:hover,
a.badge,
a.badge:hover,
.navbar-sidenav a:hover {
  text-decoration: none !important;
}

/* Bootstrap 4 breadcrumb padding (BS5 defaults to 0) */
.breadcrumb {
  --bs-breadcrumb-padding-x: 1rem;
  --bs-breadcrumb-padding-y: 0.75rem;
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-border-radius: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  border-radius: 0.25rem;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: none;
  padding-right: 0.5rem;
}

/* Restore Bootstrap 4 spacing that BS5 reduced or dropped */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  padding-right: 15px;
  padding-left: 15px;
}
.row {
  --bs-gutter-x: 30px;
}
.card-body {
  padding: 1.25rem;
}
.card-header,
.card-footer {
  padding: 0.75rem 1.25rem;
}
label {
  margin-bottom: 0.5rem;
}
.form-control,
.form-select,
.custom-select,
.input-group-text {
  padding: 0.375rem 0.75rem;
}

/* BS4 select.form-control — restore dropdown chevron (BS5 only styles .form-select) */
select.form-control,
.custom-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}
select.form-control[multiple],
select.form-control[size]:not([size="1"]),
.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}

/*
 * Bootstrap 4 disabled / readonly form controls.
 * BS5 only styles :disabled (not [readonly]) and portal theme !important
 * overrides can hide the disabled look on buttons and validated inputs.
 */
.form-control:disabled,
.form-control[disabled],
select.form-control:disabled,
textarea.form-control:disabled,
.custom-select:disabled {
  background-color: #e9ecef !important;
  opacity: 1 !important;
  color: #495057;
  -webkit-text-fill-color: #495057;
  cursor: not-allowed;
}
.form-control[readonly],
.form-control.readonly {
  background-color: #e9ecef !important;
  opacity: 1 !important;
}
.form-control:disabled.is-valid,
.form-control[disabled].is-valid,
.form-control:disabled.valid,
.form-control[disabled].valid,
.was-validated .form-control:disabled:valid,
.was-validated .form-control[disabled]:valid,
.form-control[readonly].is-valid,
.form-control[readonly].valid {
  background-color: #e9ecef !important;
  background-image: none !important;
  border-color: #ced4da !important;
  box-shadow: none !important;
}
.form-check-input:disabled,
.custom-control-input:disabled,
.custom-control-input[disabled] {
  opacity: 0.5;
}
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label,
.custom-control-input:disabled ~ .custom-control-label,
.custom-control-input[disabled] ~ .custom-control-label {
  opacity: 0.65;
}

.portal .btn:disabled,
.portal .btn.disabled,
.portal fieldset:disabled .btn {
  opacity: 0.65 !important;
  pointer-events: none;
}
.portal .btn-primary:disabled,
.portal .btn-primary.disabled,
.portal fieldset:disabled .btn-primary {
  background-color: #00A8BE !important;
  border-color: #00A8BE !important;
  color: #fff !important;
}
.portal .btn-secondary:disabled,
.portal .btn-secondary.disabled,
.portal fieldset:disabled .btn-secondary {
  background-color: #fff !important;
  border-color: #EB5757 !important;
  color: #EB5757 !important;
}
.portal .btn-outline-secondary:disabled,
.portal .btn-outline-secondary.disabled {
  color: #6c757d !important;
  background-color: transparent !important;
  border-color: #6c757d !important;
}

.alert {
  padding: 0.75rem 1.25rem;
}
.modal-header,
.modal-body,
.modal-footer {
  padding: 1rem;
}
.list-group-item {
  padding: 0.75rem 1.25rem;
}
.dropdown-item {
  padding: 0.25rem 1.5rem;
}
.nav-link {
  padding: 0.5rem 1rem;
}
.page-link {
  padding: 0.5rem 0.75rem;
}

/* Table cells: BS4 used 0.75rem; keep left padding aligned with page content */
.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
}
/* Vertical padding only — do not use `.portal table td` (also matches date-filter layout tables). */
.table > :not(caption) > * > *,
table.dataTable th,
table.dataTable td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  box-shadow: none;
  vertical-align: middle;
}
.table-bordered > :not(caption) > * > * {
  border-width: 1px;
}

/*
 * dataTables.bootstrap4.css removes most cell borders (border-left/right/bottom: 0).
 * Restore thin grid lines on portal tables.
 */
.portal table.table-bordered,
.portal table.table-bordered.dataTable {
  border-collapse: collapse !important;
  border: 1px solid #dee2e6;
}
.portal table.table-bordered th,
.portal table.table-bordered td,
.portal table.table-bordered.dataTable th,
.portal table.table-bordered.dataTable td {
  border: 1px solid #dee2e6 !important;
}
.portal table.table-bordered thead th,
.portal table.table-bordered.dataTable thead th {
  border-color: #00A8BE !important;
}

/* Space between adjacent buttons (Approve/Reject, Search/Reset, etc.) */
.portal .btn + .btn {
  margin-left: 0.75rem;
}
.portal div.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.portal div.dt-buttons .btn + .btn {
  margin-left: 0;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc {
  padding-right: 2rem;
}

/* Bootstrap 4 btn-block (removed in BS5) */
.btn-block {
  display: block;
  width: 100%;
}

/*
 * BS4 columns used max-width. BS5 only sets width, so .form-control { width: 100% }
 * makes inputs with col-md-6 stretch full width.
 */
/* Narrow colon column in label : value rows (not in BS5 grid) */
.row > .col-0,
.col-0 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.col-1 { max-width: 8.33333333%; }
.col-2 { max-width: 16.66666667%; }
.col-3 { max-width: 25%; }
.col-4 { max-width: 33.33333333%; }
.col-5 { max-width: 41.66666667%; }
.col-6 { max-width: 50%; }
.col-7 { max-width: 58.33333333%; }
.col-8 { max-width: 66.66666667%; }
.col-9 { max-width: 75%; }
.col-10 { max-width: 83.33333333%; }
.col-11 { max-width: 91.66666667%; }
.col-12 { max-width: 100%; }
@media (min-width: 576px) {
  .col-sm-1 { max-width: 8.33333333%; }
  .col-sm-2 { max-width: 16.66666667%; }
  .col-sm-3 { max-width: 25%; }
  .col-sm-4 { max-width: 33.33333333%; }
  .col-sm-5 { max-width: 41.66666667%; }
  .col-sm-6 { max-width: 50%; }
  .col-sm-7 { max-width: 58.33333333%; }
  .col-sm-8 { max-width: 66.66666667%; }
  .col-sm-9 { max-width: 75%; }
  .col-sm-10 { max-width: 83.33333333%; }
  .col-sm-11 { max-width: 91.66666667%; }
  .col-sm-12 { max-width: 100%; }
}
@media (min-width: 768px) {
  .col-md-1 { max-width: 8.33333333%; }
  .col-md-2 { max-width: 16.66666667%; }
  .col-md-3 { max-width: 25%; }
  .col-md-4 { max-width: 33.33333333%; }
  .col-md-5 { max-width: 41.66666667%; }
  .col-md-6 { max-width: 50%; }
  .col-md-7 { max-width: 58.33333333%; }
  .col-md-8 { max-width: 66.66666667%; }
  .col-md-9 { max-width: 75%; }
  .col-md-10 { max-width: 83.33333333%; }
  .col-md-11 { max-width: 91.66666667%; }
  .col-md-12 { max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-1 { max-width: 8.33333333%; }
  .col-lg-2 { max-width: 16.66666667%; }
  .col-lg-3 { max-width: 25%; }
  .col-lg-4 { max-width: 33.33333333%; }
  .col-lg-5 { max-width: 41.66666667%; }
  .col-lg-6 { max-width: 50%; }
  .col-lg-7 { max-width: 58.33333333%; }
  .col-lg-8 { max-width: 66.66666667%; }
  .col-lg-9 { max-width: 75%; }
  .col-lg-10 { max-width: 83.33333333%; }
  .col-lg-11 { max-width: 91.66666667%; }
  .col-lg-12 { max-width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl-1 { max-width: 8.33333333%; }
  .col-xl-2 { max-width: 16.66666667%; }
  .col-xl-3 { max-width: 25%; }
  .col-xl-4 { max-width: 33.33333333%; }
  .col-xl-5 { max-width: 41.66666667%; }
  .col-xl-6 { max-width: 50%; }
  .col-xl-7 { max-width: 58.33333333%; }
  .col-xl-8 { max-width: 66.66666667%; }
  .col-xl-9 { max-width: 75%; }
  .col-xl-10 { max-width: 83.33333333%; }
  .col-xl-11 { max-width: 91.66666667%; }
  .col-xl-12 { max-width: 100%; }
}