/*
 * Generic Admin Portal - Bootstrap 5.3.5 Migration CSS
 * 
 * This CSS file contains the adaptations and equivalents
 * to aid with Bootstrap 3.4.x to Bootstrap 5.3.x Migration
 *
 */

/* Bootstrap 3 font size adjustments */
:root {
  font-family: 'Inter', sans-serif;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  --bs-body-font-size: 14px; /* Bootstrap 3 default was 14px vs BS5's 16px */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.428571429; /* Bootstrap 3 value */
  
  /* Button sizing variables */
  --bs-btn-width-auto: auto;
  --bs-btn-display: inline-block;
}

@supports (font-variation-settings: normal) {
   :root { font-family: 'Inter var', sans-serif; }
}

body {
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
}

/* Font size adjustments for common components */
.btn {
  font-size: 14px;
  padding: 6px 12px;  /* Bootstrap 3 default padding */
  width: var(--bs-btn-width-auto);
  display: var(--bs-btn-display);
  white-space: nowrap;
}

/* Override for buttons in modal footer to ensure proper display */
.modal-footer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

/* Fix form inside modal */
.modal-content form {
  margin-bottom: 0;
}

/* Fix form including modal-footer */
.modal-content > form {
  display: contents;
}

/* Ensure modal footer is full width */
.modal-footer {
  width: 100%;
}

/* Button styling in modal footer */
.modal-footer .btn {
  margin: 0 0.25rem;
  min-width: unset;
  width: auto !important;
  white-space: nowrap;
  display: inline-block;
}

/* Adjust button sizes to match Bootstrap 3 */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
}

/* Fix button row alignment */
.row .btn {
  margin-right: 5px;
  margin-bottom: 5px;
}

.form-control, .form-select {
  font-size: 14px;
}

.dropdown-menu {
  font-size: 14px;
  padding: 5px 0;
}

.dropdown-item {
  font-size: 14px;
  padding: 3px 20px;
}

.dropdown-header {
  font-size: 12px;
  padding: 3px 20px;
}

.nav-link {
  font-size: 14px;
  padding: 10px 15px;
}

.navbar {
  font-size: 14px;
  min-height: 60px;
}

/* Adjust table styling */
.table > :not(caption) > * > * {
  padding: 8px;
}

/* Alerts inside table cells */
.table td .alert {
  margin-bottom: 0;
  padding: 3px 8px;
  min-width: auto;
}

.form-check-input {
  width: 1.1em;
  height: 1.1em;
}

/*
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
*/

.card-title {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1.1;
  display: flex;
  align-items: center;
  min-height: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
}

.badge {
  font-size: 11px; /* Adjust badge font size */
}

legend {
  font-size: 21px;
}


/* Bootstrap 3 to 5 adaptations */
.panel {
  margin-bottom: 1rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.panel-heading {
  padding: 10px 15px;  /* Match Bootstrap 3 panel padding */
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
  align-items: center;
}

.panel-title {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 16px;
  color: inherit;
  line-height: 1.1;
}

.panel-body {
  padding: 15px;  /* Match Bootstrap 3 panel padding */
}

.panel-footer {
  padding: 10px 15px;  /* Match Bootstrap 3 panel padding */
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.panel-default {
  border-color: #dee2e6;
}

.panel-default > .panel-heading {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #dee2e6;
}

/* Well to card adaptation */
.well {
  padding: 1.25rem;
  background-color: #f8f9fa;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
}

/* Fix alerts height to match Bootstrap 3 */
.alert {
  padding: 8px 15px; /* Reduced top/bottom padding to match Bootstrap 3 */
  margin-bottom: 20px;
  line-height: 1.4; /* Tighter line height */
}

/* Fix vertical alignment of text and elements in alerts */
.alert p,
.alert h4,
.alert div {
  margin-top: 0;
  margin-bottom: 0;
}

/* Make sure icons are properly aligned */
.alert i.fa {
  vertical-align: text-bottom;
  margin-right: 5px;
}

/* Ensure paragraphs in alerts have proper spacing */
.alert p + p {
  margin-top: 5px;
}

/* Fix alerts in centered containers only */
.center-block .alert, 
center .alert {
  display: inline-block;
  width: auto;
  min-width: 350px;
  max-width: 90%;
}

/* Target centered alerts with more specificity */
div.col-md-12.center-block center .alert {
  display: inline-block;
  width: auto;
}

/* Ensure text is centered in centered alerts and fix spacing */
center .alert p {
  margin: 0;
}

/* Remove this as we now have a better implementation above */

/* Consistent padding across all alert types */
.alert-info, .alert-success, .alert-warning, .alert-danger {
  padding: 8px 15px;
}

/* Adjust alert with headings and handle vertical alignment */
.alert h4 {
  margin-top: 0;
  margin-bottom: 5px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

/* Special handling for h4 + strong + icon pattern in pagemessages.tpl */
.alert h4 strong {
  display: inline-flex;
  align-items: center;
}

.alert h4 strong i.fa {
  font-size: 18px;
  margin-right: 10px;
  vertical-align: middle;
}

/* Exception for large icons in alerts */
.alert h4 strong i.fa-2x {
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* Navbar dropdown styling */
/* Navbar brand vertical centering */
.navbar-brand {
  display: flex;
  align-items: center;
  height: 60px;
}

/* Business name brand vertical centering */
.brand {
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#userDropdown {
  color: rgba(255, 255, 255, 0.55);
  height: 60px;
  display: flex;
  align-items: center;
}

#userDropdown:hover {
  color: rgba(255, 255, 255, 0.85);
}


.navbar-dark .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Maintain label behaviors */
.label {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.label-default { background-color: #6c757d; color: #fff; }
.label-primary { background-color: #0d6efd; color: #fff; }
.label-success { background-color: #198754; color: #fff; }
.label-info { background-color: #0dcaf0; color: #fff; }
.label-warning { background-color: #ffc107; color: #212529; }
.label-danger { background-color: #dc3545; color: #fff; }

/* Grid system compatibility */
.col-md-offset-1 { margin-left: 8.33%; }
.col-md-offset-2 { margin-left: 16.66%; }
.col-md-offset-3 { margin-left: 25%; }
.col-md-offset-4 { margin-left: 33.33%; }
.col-md-offset-5 { margin-left: 41.66%; }

/* Float compatibility */
.pull-left { float: left !important; }
.pull-right { float: right !important; }

/* Center-block replacement */
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Button adaptations */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  background: transparent;
  border: 0;
  padding: 0.5rem;
}

/* Help maintain Bootstrap 3 form layout */
.form-horizontal .control-label {
  text-align: right;
  margin-bottom: 0;
  padding-top: 7px;
}

/* Inline form handling */
.form-inline, 
form.d-flex,
form.d-flex label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.form-inline .form-control,
form.d-flex .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}