/* Custom Primary Color - Purple */
:root {
  --bs-primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
  --bs-primary-bg-subtle: #e9d5ff;
  --bs-primary-border-subtle: #d8b4fe;
  --bs-btn-bg: #7c3aed;
  --bs-btn-border-color: #7c3aed;
  --bs-btn-hover-bg: #6d28d9;
  --bs-btn-hover-border-color: #6d28d9;
  --bs-btn-active-bg: #5b21b6;
  --bs-btn-active-border-color: #5b21b6;
}

/* Override Bootstrap Primary Color Classes */
.btn-primary {
  background-color: #7c3aed !important;
  border-color: #7c3aed !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #6d28d9 !important;
  border-color: #6d28d9 !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #5b21b6 !important;
  border-color: #5b21b6 !important;
}

.btn-outline-primary {
  color: #7c3aed !important;
  border-color: #7c3aed !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #7c3aed !important;
  border-color: #7c3aed !important;
  color: white !important;
}

.badge.bg-primary {
  background-color: #7c3aed !important;
}

.text-primary {
  color: #7c3aed !important;
}

.border-primary {
  border-color: #7c3aed !important;
}

.bg-primary {
  background-color: #7c3aed !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: #6d28d9 !important;
}

/* Custom Success Color - Teal */
/* Original Bootstrap success color: #198754 (green) */
:root {
  --bs-success: #14b8a6;
  --bs-success-rgb: 20, 184, 166;
  --bs-success-bg-subtle: #ccfbf1;
  --bs-success-border-subtle: #99f6e4;
}

/* Override Bootstrap Success Color Classes */
.btn-success {
  background-color: #14b8a6 !important;
  border-color: #14b8a6 !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #0d9488 !important;
  border-color: #0d9488 !important;
}

.btn-success:active,
.btn-success.active {
  background-color: #0f766e !important;
  border-color: #0f766e !important;
}

.btn-outline-success {
  color: #14b8a6 !important;
  border-color: #14b8a6 !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: #14b8a6 !important;
  border-color: #14b8a6 !important;
  color: white !important;
}

.badge.bg-success {
  background-color: #14b8a6 !important;
}

.text-success {
  color: #14b8a6 !important;
}

.border-success {
  border-color: #14b8a6 !important;
}

.bg-success {
  background-color: #14b8a6 !important;
}

.alert-success {
  background-color: #ccfbf1 !important;
  border-color: #99f6e4 !important;
  color: #0f766e !important;
}

a.text-success:hover,
a.text-success:focus {
  color: #0d9488 !important;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #7c3aed;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  /* Make button groups stack vertically on very small screens */
  .btn-group {
    display: flex;
    flex-wrap: nowrap;
  }

  /* Reduce button padding on mobile */
  .btn-sm {
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
  }

  /* Make cards full width with minimal padding */
  .card {
    margin-bottom: 1rem;
  }

  /* Reduce container padding on mobile */
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Make table text smaller on mobile */
  .table-responsive table {
    font-size: 0.875rem;
  }

  /* Better spacing for badges on mobile */
  .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
  }
}

/* Tablet responsiveness */
@media (min-width: 768px) and (max-width: 991px) {
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
  }
}

/* Ensure tables scroll smoothly on all mobile devices */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

/* Better button group wrapping */
.btn-group {
  white-space: nowrap;
}

/* Responsive off-canvas */
@media (max-width: 767px) {
  .offcanvas.offcanvas-end {
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  .offcanvas.offcanvas-end {
    width: 80% !important;
    max-width: 800px;
  }
}

/* Fix btn-group when buttons are inside forms */
/* This fixes the issue where Bootstrap's selectors break when forms are in the group */
.btn-group > form {
  display: inline-block;
}

/* Remove border-radius from buttons in middle of group (including those in forms) */
.btn-group > .btn:not(:first-child):not(:last-child),
.btn-group > form:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

/* First button keeps left rounded corners */
.btn-group > .btn:first-child:not(:last-child),
.btn-group > form:first-child:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Last button keeps right rounded corners */
.btn-group > .btn:last-child:not(:first-child),
.btn-group > form:last-child:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Fix borders between buttons (including those in forms) */
.btn-group > .btn:not(:last-child),
.btn-group > form:not(:last-child) > .btn {
  border-right: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > form:not(:first-child) > .btn {
  margin-left: -1px;
}