/* Modern Typography with Figtree Font */
h1 {
    text-align: center;
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: rgb(41, 117, 213);
    letter-spacing: -0.025em;
}

h2 {
  text-align: left;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: rgb(41, 117, 213);
  letter-spacing: -0.02em;
}

h3 {
  text-align: left;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: rgb(41, 117, 213);
  letter-spacing: -0.015em;
}

h4 {
  text-align: center;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: rgb(41, 117, 213);
  letter-spacing: -0.02em;
}

h5 {
  text-align: left;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

h6 {
  text-align: left;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit; /* Use default text color, not blue */
}

p1 {
    text-align: center;
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
}

p2 {
    text-align: center;
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ef4444; /* Modern red */
}

p4 {
  text-align: left;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}

p5 {
  text-align: left;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
}

p6 {
  text-align: left;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.shake {
    animation: shake 0.2s ease-in-out 0s 2;
    box-shadow: 0 0 0.5em #ef4444;
}

@keyframes shake {
    0% {
      margin-left: 0rem;
    }
    25% {
      margin-left: 0.5rem;
    }
    75% {
      margin-left: -0.5rem;
    }
    100% {
      margin-left: 0rem;
    }
  }

.content {
  background-color: rgba(248, 251, 255, 0.6); /* Light blue tint using company color */
  box-shadow: inset 0 .5em 1.5em rgba(41, 117, 213, .05), inset 0 .125em .5em rgba(41, 117, 213, .03);
  overflow-x: auto;
  width: 100%;
  padding-top: 40px;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 40px;
  min-height: calc(100vh - 64px);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

main {
  height: 100% !important;
  width: 100% !important;
  max-height: 100% !important;
}

.linear-grad {
  background: transparent;
  background: -moz-linear-gradient(90deg, rgba(41,117,213,0.8) 0%, rgba(41,117,213,1) 50%, rgba(65,105,225,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(41,117,213,0.8) 0%, rgba(41,117,213,1) 50%, rgba(65,105,225,1) 100%);
  background: linear-gradient(90deg, rgba(41,117,213,0.8) 0%, rgba(41,117,213,1) 50%, rgba(65,105,225,1) 100%);
  background-repeat: no-repeat;
  border: 0px solid transparent;
}

.grow { 
  transition: var(--transition-fast); 
}

.rmaform-img-top {
  display: none;
}

/* HALF FULL SCREEN */
@media only screen and (max-width: 1600px) {
  .tradeform-customerinput {
    width: 75% !important;
  }
}

/* TABLET */
@media only screen and (max-width: 1200px) {
  .username {
    display: none !important;
  }
  .form-flex {
    flex-direction: column;
  }
  .form-class {
    width: 100% !important;
  }
  .database-flex {
    flex-direction: column;
  }
  .guide-flex {
    flex-direction: column;
  }

  .rmaform {
    width: 100% !important;
    height: 80% !important;
  }

  .rmaform-img-right {
    display: none;
  }

  .rmaform-img-top {
    display: flex;
  }

  .rmaform-body-top {
    height: 50% !important;
  }

  .rmaform-input {
    width: 60% !important;
  }

  .tradeform-customerinput {
    width: 100% !important;
  }

  .home-user-panel-tablet {
    flex-direction: column;
    align-items: start !important;
  }

  .home-user-panel-location {
    margin-top: 2.5rem !important;
  }

  .account-image-tablet {
    height: 100px !important;
    width: 100px !important;
  }

  .account-spacing-tablet {
    margin-right: 1rem !important;
  }

  .account-icon-tablet {
    font-size: 66.7px !important;
  }

  .account-spacing-location-tablet {
    margin-right: 1.25rem !important;
  }

}

/* PHONE */
@media only screen and (max-width: 600px) {
  .content {
    padding-top: 20px !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    padding-bottom: 20px !important;
  }
  .form-flex-mobile {
    flex-direction: column;
  }
  .form-class-mobile {
    width: 100% !important;
  }
  .database-flex-mobile {
    flex-direction: column;
  }
  .account-flex-mobile {
    flex-direction: column;
  }
  .dataTables_length label { 
    display: none;
  }

  .search-link {
    margin: 0rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .nav-container-small {
    width: 100% !important;
    max-width: 120px !important;
  }

  .user-small {
    margin-right: 0rem !important;
  }

  .dropdown-user-small {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .dropdown-user-small.dropdown-toggle::after {
    display: none !important;
  }

  .rmaform {
    width: 100% !important;
    height: 100% !important;
    min-height: 740px !important;
  }

  .rmaform-flex {
    height: calc(100vh - 104px) !important;
    min-height: 740px !important;
  }

  .rmaform-margin {
    margin-left: 5px !important;
    margin-right: 5px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
  }

  .rmaform-container {
    flex-wrap: nowrap;
    overflow: scroll;
    justify-content: start !important;
  }

  .rmaform-input {
    width: 100% !important;
  }

  .rmaform-submit-btn {
    text-align: center !important;
  }

  .rmaform-submit-btn-input {
    margin: 0 auto !important;
  }
  
  .tradeform-customernames {
    flex-direction: column;
  }

  .condition-card {
    padding: 5px !important;
  }

  .arrivalCard {
    height: 700px !important;
  }

  .enterpriseFormCard {
    height: 900px !important;
    margin: max(calc(0.5 * (100vh - 1044px)), 0px) auto !important;
  }

  .home-user-panel {
    flex-direction: column;
    align-items: center !important;
  }

  .home-user-panel-location {
    margin-top: 1.5rem !important;
  }

  .home-user-panel-text {
    text-align: center !important;
  }

  .home-user-panel-img {
    margin-right: 0 !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0.5rem !important;
  }

  .home-user-panel-img-secondary {
    margin-right: 0 !important;
  }

  .account-image-phone {
    height: 100px !important;
    width: 100px !important;
  }

  .account-spacing-phone {
    margin-right: 0.5rem !important;
  }

  .account-location-phone {
    margin-top: 1.5rem !important;
  }

}

.caseview {
  max-width: 100% !important;

}

.casecol {
  padding-left: 0 !important; 
  padding-right: 0 !important;
}

.rectangle {
  width: 10px;
  height: 76px;
  background-color: #10b981; /* Modern green */
  border-radius: 0.375rem;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.minioptions {
  display: none;
}

.guidebtn {
  background-color: transparent;
  border: none;
  color: var(--bs-body-color) !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
}

.guidebtn:hover {
  text-decoration: none;
  color: rgb(41, 117, 213) !important;
  transform: translateY(-1px);
  transition: var(--transition-fast);
}

@media only screen and (max-width: 1850px) {
  .options {
    display: none;
  }
  .minioptions {
    display: block;
  }
}

.paidBtn {
  color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  background-color: transparent !important;
  font-family: var(--font-primary);
  font-weight: 500;
}

.paidBtn:hover {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Ensure btn-outline-success paidBtn combination works */
.btn-outline-success.paidBtn {
  color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  background-color: transparent !important;
}

.btn-outline-success.paidBtn:hover {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

.paidBtn:focus {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

.btn-check:checked + .paidBtn {
  color: white !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.warrantyBtn {
  color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  background-color: transparent !important;
  font-family: var(--font-primary);
  font-weight: 500;
}

.warrantyBtn:hover {
  color: #fff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Force override bootstrap with maximum specificity */
label.btn.btn-outline-secondary.warrantyBtn {
  color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  background-color: transparent !important;
}

label.btn.btn-outline-secondary.warrantyBtn:hover {
  color: #ffffff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

label.btn.btn-outline-secondary.warrantyBtn:focus {
  color: #ffffff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25) !important;
}

label.btn.btn-outline-success.paidBtn {
  color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  background-color: transparent !important;
}

label.btn.btn-outline-success.paidBtn:hover {
  color: #ffffff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

label.btn.btn-outline-success.paidBtn:focus {
  color: #ffffff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

label.btn.btn-outline-danger:hover {
  color: #ffffff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

label.btn.btn-outline-danger:focus {
  color: #ffffff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25) !important;
}

.warrantyBtn:focus {
  color: #fff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
}

.btn-check:checked + .warrantyBtn {
  color: white !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Make sure the checked state works for combination classes */
.btn-check:checked + .btn-outline-success.paidBtn {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.updatetransition {
  width: 42px;
  display: grid;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  transition: all 0.5s ease-in-out;
}

.badge-success {
  color: white !important;
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}


.nav-underline .nav-link.active, .nav-underline .show > .nav-link {
  border-bottom-color: rgb(41, 117, 213) !important;
  font-weight: 600 !important;
  color: rgb(41, 117, 213) !important;
}

.nav-underline .nav-link:focus, .nav-underline .nav-link:hover {
  border-bottom-color: rgb(41, 117, 213) !important;
  color: rgb(41, 117, 213) !important;
  transition: var(--transition-fast);
}

[data-bs-theme=dark] .nav-underline .nav-link.active, 
[data-bs-theme=dark] .nav-underline .show > .nav-link {
  border-bottom-color: rgb(41, 117, 213) !important;
  color: rgb(41, 117, 213) !important;
}

[data-bs-theme=dark] .nav-underline .nav-link:focus, 
[data-bs-theme=dark] .nav-underline .nav-link:hover {
  border-bottom-color: rgb(41, 117, 213) !important;
  color: rgb(41, 117, 213) !important;
}

.grow-search { 
  transition: var(--transition-fast); 
}
  


.btn-check:checked + .btn-status {
  border-color: rgb(41, 117, 213) !important;
  background-color: rgba(41, 117, 213, 0.1);
  color: rgb(41, 117, 213) !important;
  font-weight: 600;
}

[data-bs-theme=dark] .btn-check:checked + .btn-status {
  border-color: rgb(41, 117, 213) !important;
  background-color: rgba(41, 117, 213, 0.2);
  color: rgb(41, 117, 213) !important;
}

/* Base btn-flag styles */
.btn-flag-1, .btn-flag-2 {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
}

/* Hover states */
.btn-flag-1:hover, .btn-flag-2:hover {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* Active/pressed states */
.btn-flag-1:active, .btn-flag-2:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* Checked states */
.btn-check:checked + .btn-flag-1 {
  color: #fff;
  background-color: rgb(41, 117, 213);
  border-color: rgb(41, 117, 213) !important;
  box-shadow: 0 4px 12px rgba(41,117,213,.3);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
}

[data-bs-theme=dark] .btn-check:checked + .btn-flag-1 {
  background-color: rgb(41, 117, 213);
  border-color: rgb(41, 117, 213) !important;
  box-shadow: 0 4px 12px rgba(41,117,213,.5);
  color: #fff;
}

.btn-check:checked + .btn-flag-2 {
  color: #fff;
  background-color: #ef4444; /* Modern red */
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
}

.ql-container {
  font-size: 16px;
  border-radius: 0 0 0.375rem 0.375rem !important;
}

.ql-toolbar {
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');

/* Modern CSS Custom Properties for Company Branding */
:root {
  --company-primary: rgb(41, 117, 213);
  --company-primary-hover: rgba(41, 117, 213, 0.8);
  --company-primary-light: rgba(41, 117, 213, 0.1);
  --company-primary-lighter: rgba(41, 117, 213, 0.05);
  --company-success: #10b981;
  --company-warning: #f59e0b;
  --company-danger: #ef4444;
  --company-purple: #8b5cf6;
  --font-primary: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Common shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 12px rgba(41, 117, 213, 0.3);
  
  /* Common transitions */
  --transition-fast: all 0.2s ease;
  --transition-normal: all 0.3s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Font and Base Styling */
body, * {
  font-family: var(--font-primary) !important;
}

body {
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.6;
}


.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
  margin: 4px 0 0;
  list-style: none;
  font-size: 16px;
  text-align: left;
  background-color: #fff;
  border: 1px solid rgba(41, 117, 213, 0.2);
  border-radius: 0.75rem;
  line-height: 1.5;
  background-clip: padding-box;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 8px 24px rgba(41, 117, 213, 0.12);
}

.ui-autocomplete > li > div {
  display: block;
  padding: 8px 20px;
  clear: both;
  font-weight: 500;
  font-size: 16px;
  color: #1f2937;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  white-space: nowrap;
  border-radius: 0.5rem;
  margin: 2px 8px;
  transition: var(--transition-fast);
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: rgb(41, 117, 213);
  background-color: rgba(41, 117, 213, 0.08);
  cursor: pointer;
  transform: translateX(2px);
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Removed - consolidated with comprehensive checked styles below */

/* Removed - consolidated with combined hover styles below */


/* Removed - consolidated with comprehensive checked styles below */

/* Removed - consolidated with combined hover styles below */

/* .btn-accessory-2 {
  border-color: rgba(0, 0, 0, .175);
} */

.btn-accessory-validate {
  border-color: #ef4444; /* Modern red */
  color: #ef4444;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
}

/* Bootstrap btn-check fix */
.btn-check {
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
}

/* Enable clicking on accessory buttons */
.btn-accessory-1, .btn-accessory-2 {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  /* Default light mode styles */
  background-color: #fff;
  border: 1px solid #dee2e6;
  color: #212529;
  transition: all 0.15s ease-in-out;
}

/* Dark mode base styles for accessory buttons */
[data-bs-theme=dark] .btn-accessory-1,
[data-bs-theme=dark] .btn-accessory-2 {
  background-color: var(--bs-dark, #212529);
  border-color: var(--bs-gray-600, #6c757d);
  color: var(--bs-light, #f8f9fa);
}

/* Ensure labels are clickable */
label.btn-accessory-1, label.btn-accessory-2 {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.btn-check + .btn-accessory-1:hover,
.btn-check + .btn-accessory-2:hover {
  border-color: rgb(41, 117, 213);
  background-color: rgba(41, 117, 213, 0.05);
  transform: translateY(-1px);
  transition: all 0.15s ease-in-out;
}

[data-bs-theme=dark] .btn-check + .btn-accessory-1:hover,
[data-bs-theme=dark] .btn-check + .btn-accessory-2:hover {
  border-color: rgb(41, 117, 213);
  background-color: rgba(41, 117, 213, 0.15);
  color: #fff;
  transform: translateY(-1px);
  transition: all 0.15s ease-in-out;
}

/* Focus styles for accessibility */
.btn-check:focus + .btn-accessory-1,
.btn-check:focus + .btn-accessory-2 {
  outline: 2px solid rgb(41, 117, 213);
  outline-offset: 2px;
}

[data-bs-theme=dark] .btn-check:focus + .btn-accessory-1,
[data-bs-theme=dark] .btn-check:focus + .btn-accessory-2 {
  outline: 2px solid rgb(41, 117, 213);
  outline-offset: 2px;
}

/* Fix: Ensure unchecked buttons show correct styling even when focused */
.btn-check:focus:not(:checked) + .btn-accessory-1,
.btn-check:focus:not(:checked) + .btn-accessory-2 {
  background-color: #fff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
  box-shadow: none !important;
  font-weight: normal !important;
  transform: none !important;
}

[data-bs-theme=dark] .btn-check:focus:not(:checked) + .btn-accessory-1,
[data-bs-theme=dark] .btn-check:focus:not(:checked) + .btn-accessory-2 {
  background-color: var(--bs-dark, #212529) !important;
  border-color: var(--bs-gray-600, #6c757d) !important;
  color: var(--bs-light, #f8f9fa) !important;
  box-shadow: none !important;
  font-weight: normal !important;
  transform: none !important;
}

/* Fix for nested elements blocking clicks */
.btn-accessory-1 *, .btn-accessory-2 * {
  pointer-events: none;
}

/* Ensure Bootstrap's btn-check functionality works - CHECKED STATE */
.btn-check:checked + .btn-accessory-1,
.btn-check:checked + .btn-accessory-2 {
  color: #fff !important;
  background-color: rgb(41, 117, 213) !important;
  border-color: rgb(41, 117, 213) !important;
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.3) !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600 !important;
  transform: translateY(-1px);
}

[data-bs-theme=dark] .btn-check:checked + .btn-accessory-1,
[data-bs-theme=dark] .btn-check:checked + .btn-accessory-2 {
  background-color: rgb(41, 117, 213) !important;
  border-color: rgb(41, 117, 213) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.4) !important;
  font-weight: 600 !important;
  transform: translateY(-1px);
}

/* Active state feedback - immediate click response */
.btn-accessory-1:active, .btn-accessory-2:active {
  transform: scale(0.98);
  background-color: rgba(41, 117, 213, 0.8) !important;
  border-color: rgb(41, 117, 213) !important;
}

/* Make sure buttons show immediate feedback when clicked */
label.btn-accessory-1:active,
label.btn-accessory-2:active {
  transform: scale(0.98);
  background-color: rgba(41, 117, 213, 0.8) !important;
  border-color: rgb(41, 117, 213) !important;
}

/* Debugging: Force checked state visibility with highest specificity */
input[type="checkbox"].btn-check:checked + label.btn-accessory-1,
input[type="checkbox"].btn-check:checked + label.btn-accessory-2 {
  background-color: rgb(41, 117, 213) !important;
  color: white !important;
  border-color: rgb(41, 117, 213) !important;
  box-shadow: 0 0 0 3px rgba(41, 117, 213, 0.25) !important;
  font-weight: 700 !important;
}

/* Override any Bootstrap button defaults that might interfere */
.btn-accessory-1.btn,
.btn-accessory-2.btn {
  background-image: none !important;
  text-decoration: none !important;
}

/* Additional check for dark mode debugging */
[data-bs-theme=dark] input[type="checkbox"].btn-check:checked + label.btn-accessory-1,
[data-bs-theme=dark] input[type="checkbox"].btn-check:checked + label.btn-accessory-2 {
  background-color: rgb(41, 117, 213) !important;
  color: white !important;
  border-color: rgb(41, 117, 213) !important;
  box-shadow: 0 0 0 3px rgba(41, 117, 213, 0.4) !important;
}


/* HOVER */
@media (hover: none) {
  .btn-check:hover + .btn-accessory-2 {
    border-color: transparent;
  }

  .btn-check:hover + .btn-accessory-1 {
    border-color: transparent;
  }
}




canvas {
  border: 1px solid rgba(41, 117, 213, 0.2); 
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.08);
}


.delete-dropdown:active {
  background-color: #ef4444 !important; /* Modern red */
  color: white !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
}

.edit-dropdown:active {
  background-color: rgb(41, 117, 213) !important;
  color: white !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
}

[data-bs-theme=dark] .edit-dropdown:active {
  background-color: rgb(41, 117, 213) !important;
  color: white !important;
}

.collect-dispatch-btn {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  border-width: 1px !important;
  border-radius: 0.375rem;
  border-style: solid;
}

.collect-dispatch-btn.active {
  color: rgb(41, 117, 213) !important;
  background-color: rgba(41, 117, 213, 0.1) !important;
  border-color: rgb(41, 117, 213) !important;
  border-width: 2px !important;
  border-radius: 0.5rem !important;
  border-style: solid !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.15);
}

[data-bs-theme=dark] .collect-dispatch-btn.active {
  border-color: rgb(41, 117, 213) !important;
  background-color: rgba(41, 117, 213, 0.2) !important;
  color: rgb(41, 117, 213) !important;
}

.collect-dispatch-btn:hover {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  border-width: 1px !important;
  border-radius: 0.375rem;
  border-style: solid;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.arrivalBtn {
  transition: all 0.5s ease-in-out;
}

.rma-submit-btn {
  color: rgb(41, 117, 213) !important;
  border-color: rgb(41, 117, 213) !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  border-radius: 0.75rem;
  transition: var(--transition-normal);
}

.rma-submit-btn:hover {
  color: #ffffff !important;
  border-color: rgb(41, 117, 213) !important;
  background-color: rgb(41, 117, 213) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(41, 117, 213, 0.3);
}

.rma-submit-btn:active {
  color: #ffffff !important;
  border-color: rgb(41, 117, 213) !important;
  background-color: rgb(41, 117, 213) !important;
  transform: translateY(0);
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: inherit;
}

.validate-service {
  border-color: #dc3545 !important;
}


.btn-transit:hover {
  border-color: rgb(41, 117, 213);
  border-width: 2px !important;
  border-radius: 0.5rem;
  border-style: solid;
  transform: translateY(-1px);
  transition: var(--transition-fast);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.btn-transit .btn-transit:focus {
  border-color: rgb(41, 117, 213);
  border-width: 2px !important;
  border-radius: 0.5rem;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(41, 117, 213, 0.15);
}

.btn-transit:active {
  border-color: rgb(41, 117, 213) !important;
  border-width: 2px !important;
  border-radius: 0.5rem;
  border-style: solid;
  background-color: rgba(41, 117, 213, 0.1);
}

.btn-transit:disabled {
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 0.375rem;
  border-style: solid;
}


.escalate-select-btn {
  color: #1f2937;
  border: 2px solid rgba(41, 117, 213, 0.2) !important;
  border-radius: 0.75rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232975d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  transition: var(--transition-fast);
}

.escalate-select-btn:hover {
  color: #1f2937;
  border: 2px solid rgba(41, 117, 213, 0.4);
  border-radius: 0.75rem;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.15);
}

.escalate-select-btn:active {
  color: #1f2937;
  border: 2px solid rgb(41, 117, 213) !important;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 3px rgba(41,117,213,.25);
  background-color: rgba(41, 117, 213, 0.05);
}

.escalate-select-btn.show {
  color: #1f2937;
  border: 2px solid rgba(41, 117, 213, 0.3);
  border-radius: 0.75rem;
}

.escalate-select-btn:focus {
  color: #1f2937;
  border: 2px solid rgb(41, 117, 213) !important;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 3px rgba(41,117,213,.25);
  outline: none;
}

.unsupported-range:disabled::-moz-range-thumb {
  background-color: rgb(41, 117, 213);
}

.unsupported-range:disabled::-webkit-slider-thumb {
  background-color: rgb(41, 117, 213);
}

.form-range::-moz-range-track {
  background-color: var(--bs-secondary-bg);
}

.form-range::-webkit-slider-runnable-track {
  background-color: var(--bs-secondary-bg);
}

.btn-store {
  background-color: rgb(41, 117, 213) !important;
  border-color: rgb(41, 117, 213) !important;
  border-radius: 88rem;
  font-size: 14px;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  box-shadow: var(--shadow-primary);
  transition: var(--transition-normal);
}


.card-home {
  /*border-color: transparent !important;*/
  border-radius: 0.7rem;
  /*border-width: 0;*/
  /*box-shadow: 2px 4px 12px #00000014;*/
}

.card-home:hover {
  /* Removing transform effect */
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  /*transform: scale3d(1.01,1.01,1.01) !important;*/
}

.card-img-home {
  border-radius: 10.2px 10.2px 0 0;
}

/*
.btn-home-primary {
  border-radius: 2rem;
}
*/

.icon-primary {
  color: rgb(41, 117, 213);
  transition: var(--transition-fast);
}

.dropdown-item:active .icon-primary {
  color: unset !important;
}

.series-dropdown {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232975d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-size: 16px 12px;
  background-repeat: no-repeat;
  background-position: right .75rem center;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border-radius: 0.75rem;
  border: 2px solid rgba(41, 117, 213, 0.2);
  transition: var(--transition-fast);
}

/*
* ENHANCED DARK MODE CSS - Eye-Friendly Design
*/

[data-bs-theme=dark] .link-dark {
  color: #e8eaed;
}

[data-bs-theme=dark] .nav-logo {
  content: url("/images/dji-d1-logo-dark.svg");
  filter: brightness(95%) contrast(1.1);
}

[data-bs-theme=dark] .card-img-home {
  filter: brightness(95%) contrast(1.05) saturate(0.95);
}

[data-bs-theme=dark] .form-img-dark {
  filter: brightness(95%) contrast(1.05) saturate(0.95);
}

[data-bs-theme=dark] .product-img-dark {
  filter: brightness(95%) contrast(1.05) saturate(0.95);
}

[data-bs-theme=dark] .form-icon-dark {
  filter: brightness(0) saturate(100%) invert(90%) sepia(8%) saturate(300%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

[data-bs-theme=dark] .icon-dark {
  filter: brightness(0) saturate(100%) invert(90%) sepia(8%) saturate(300%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

[data-bs-theme=dark] .indicator-dark {
  background-color: #e8eaed !important;
}

[data-bs-theme=dark] .ui-autocomplete {
  background-color: #2a2d31 !important;
  border: 1px solid #404449;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme=dark] .ui-state-hover,
.ui-state-active,
.ui-state-focus {
  color: #e8eaed;
  background-color: #3a3d42;
}

[data-bs-theme=dark] .ui-autocomplete > li > div {
  color: #e8eaed;
}

[data-bs-theme=dark] img[src="/images/default.svg"] {
  filter: brightness(0) saturate(100%) invert(90%) sepia(8%) saturate(300%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

[data-bs-theme=dark] .ql-toolbar.ql-snow {
  border-color: #404449;
  background-color: #2a2d31;
}

[data-bs-theme=dark] .ql-container.ql-snow {
  border-color: #404449;
  background-color: #1e2124;
}

[data-bs-theme=dark] .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #404449;
  background-color: #2a2d31;
}

[data-bs-theme=dark] .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #404449;
}

[data-bs-theme=dark] .ql-snow .ql-picker-options {
  background-color: #2a2d31;
}

[data-bs-theme=dark] .ql-snow .ql-picker {
  color: #e8eaed;
}

[data-bs-theme=dark] .ql-toolbar .ql-stroke {
  fill: none;
  stroke: #e8eaed;
}

[data-bs-theme=dark] .ql-toolbar .ql-fill {
  fill: #e8eaed;
  stroke: none;
}

[data-bs-theme=dark] .ql-toolbar .ql-picker {
  color: #e8eaed;
}

/* Additional Dark Mode Component Overrides */
[data-bs-theme=dark] .icon-primary {
  color: rgb(41, 117, 213) !important;
}

[data-bs-theme=dark] .escalate-select-btn {
  color: #e8eaed;
  border-color: rgba(41, 117, 213, 0.3) !important;
  background: #2a2d31 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232975d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-bs-theme=dark] .escalate-select-btn:hover {
  color: #e8eaed;
  border-color: rgba(41, 117, 213, 0.5);
  background: #2e3136 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.2);
}

[data-bs-theme=dark] .escalate-select-btn:focus,
[data-bs-theme=dark] .escalate-select-btn:active {
  color: #e8eaed;
  border-color: rgb(41, 117, 213) !important;
  background: #2e3136 !important;
  box-shadow: 0 0 0 3px rgba(41, 117, 213, 0.25);
}

[data-bs-theme=dark] .series-dropdown {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232975d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: #2a2d31;
  border-color: rgba(41, 117, 213, 0.3);
}

[data-bs-theme=dark] .rma-submit-btn {
  color: rgb(41, 117, 213) !important;
  border-color: rgb(41, 117, 213) !important;
}

[data-bs-theme=dark] .rma-submit-btn:hover,
[data-bs-theme=dark] .rma-submit-btn:active {
  color: #ffffff !important;
  border-color: rgb(41, 117, 213) !important;
  background: rgb(41, 117, 213) !important;
  box-shadow: 0 6px 20px rgba(41, 117, 213, 0.4);
}

[data-bs-theme=dark] .btn-store {
  background: rgb(41, 117, 213) !important;
  border-color: rgb(41, 117, 213) !important;
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.4);
}

[data-bs-theme=dark] .btn-transit:hover,
[data-bs-theme=dark] .btn-transit:focus,
[data-bs-theme=dark] .btn-transit:active {
  border-color: rgb(41, 117, 213);
  background-color: rgba(41, 117, 213, 0.1);
  transform: translateY(-1px);
}

[data-bs-theme=dark] .section-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(41, 117, 213, 0.4) 20%, rgba(41, 117, 213, 0.6) 50%, rgba(41, 117, 213, 0.4) 80%, transparent 100%);
  height: 2px;
}

[data-bs-theme=dark] .accordion-button:not(.collapsed) {
  background-color: rgba(58, 61, 66, 0.4);
  color: #e8eaed;
}

[data-bs-theme=dark] .nav-pills .nav-link.active {
  background-color: rgb(41, 117, 213);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.5);
  color: white;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
}

[data-bs-theme=dark] .nav-pills .nav-link:not(.active):hover {
  background-color: rgba(41, 117, 213, 0.12);
  border-color: rgba(41, 117, 213, 0.3);
  color: rgb(41, 117, 213);
  transform: translateY(-1px);
  transition: var(--transition-fast);
}

/* Navigation section titles */
.nav-section-title {
  padding: 0.5rem 1rem 0.25rem 1rem;
  margin-top: 0.5rem;
  list-style: none;
}

.nav-section-title small {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  opacity: 0.6;
  color: var(--bs-secondary-color);
}

[data-bs-theme=dark] .nav-section-title small {
  opacity: 0.5;
  color: var(--bs-secondary-color);
}

/* Navigation section divider */
.nav-section-divider {
  height: 0;
  margin: 0.5rem 0;
  list-style: none;
  border: none;
  opacity: 0;
}

/* Compact navigation links (less vertical spacing) */
.nav-link-compact {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

/* Sub-navigation items (indented slightly) */
.sub-nav-item {
  padding-left: 2.5rem !important;
}

/* Fix general dark mode button styling */
[data-bs-theme=dark] .btn:not(.btn-outline-primary):not(.btn-primary):not(.btn-success):not(.btn-danger) {
  background-color: #2a2d31 !important;
  border-color: rgba(255, 255, 255, 0.18);
  color: #e8eaed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-bs-theme=dark] .btn:not(.btn-outline-primary):not(.btn-primary):not(.btn-success):not(.btn-danger):hover {
  background-color: #2e3136 !important;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Fix dark mode btn-outline-primary */
[data-bs-theme=dark] .btn-outline-primary {
  color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  background-color: transparent !important;
}

[data-bs-theme=dark] .btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.4);
}

[data-bs-theme=dark] .btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(41, 117, 213, 0.25);
}

[data-bs-theme=dark] .btn-outline-primary:active,
[data-bs-theme=dark] .btn-outline-primary.active {
  color: #fff !important;
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
}

/* Dark mode success buttons */
[data-bs-theme=dark] .btn-outline-success {
  color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  background-color: transparent !important;
}

[data-bs-theme=dark] .btn-outline-success:hover,
[data-bs-theme=dark] .btn-outline-success:focus,
[data-bs-theme=dark] .btn-outline-success:active,
[data-bs-theme=dark] .btn-outline-success.active {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

/* Dark mode danger buttons */
[data-bs-theme=dark] .btn-outline-danger {
  color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  background-color: transparent !important;
}

[data-bs-theme=dark] .btn-outline-danger:hover,
[data-bs-theme=dark] .btn-outline-danger:focus,
[data-bs-theme=dark] .btn-outline-danger:active,
[data-bs-theme=dark] .btn-outline-danger.active {
  color: #fff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
}

/* Dark mode solid buttons */
[data-bs-theme=dark] .btn-success {
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  color: #fff !important;
}

[data-bs-theme=dark] .btn-danger {
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  color: #fff !important;
}

[data-bs-theme=dark] .btn-primary {
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  color: #fff !important;
}

[data-bs-theme=dark] .btn-primary:hover {
  background-color: var(--company-primary-hover) !important;
  border-color: var(--company-primary-hover) !important;
  color: #fff !important;
}

[data-bs-theme=dark] .btn-home-primary {
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.4);
}

[data-bs-theme=dark] .btn-home-primary:hover {
  background-color: var(--company-primary-hover) !important;
  border-color: var(--company-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(41, 117, 213, 0.5);
}

[data-bs-theme=dark] .btn:focus,
[data-bs-theme=dark] .card-home:focus-within {
    outline: 2px solid rgba(108, 177, 255, 0.6);
    outline-offset: 2px;
}

.quotation-option-btn {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  border-width: 1px !important;
  border-radius: 0.375rem;
  border-style: solid;
}

.quotation-option-btn:hover {
  color: var(--company-primary);
  border-color: var(--company-primary);
  border-width: 2px !important;
  border-radius: 0.5rem;
  border-style: solid;
  transform: translateY(-1px);
  transition: var(--transition-fast);
}

.quotation-option-btn:active {
  color: var(--company-primary);
  border-color: var(--company-primary) !important;
  border-width: 2px !important;
  border-radius: 0.5rem;
  border-style: solid;
  background-color: var(--company-primary-lighter);
}

.security-text {
  -webkit-text-security: circle;
}

/* Fix dropdown z-index to prevent going behind other elements */
.dropdown-menu {
  z-index: 99999 !important;
  position: absolute !important;
  transform: translateZ(0) !important;
}

.dropdown-menu.show {
  z-index: 99999 !important;
  position: absolute !important;
  transform: translateZ(0) !important;
}

/* Prevent cards from creating higher stacking contexts than dropdowns */
.card {
  z-index: auto !important;
}

.card-body {
  z-index: auto !important;
}

/* Force any col elements with cards to not interfere with dropdown z-index */
.col .card {
  z-index: auto !important;
  position: relative;
}

/* Specific fix for card with mb-3 class */
.card.mb-3 {
  z-index: auto !important;
  position: relative;
}

/* Enhanced Card Styling for Repair Form - Light Mode Improvements */
.card {
  border-radius: 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
  background: linear-gradient(145deg, #ffffff 0%, #fdfdfd 100%);
  position: relative;
  overflow: hidden;
}



.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(41, 117, 213, 0.2);
  transform: translateY(-2px);
}



.card-body {
  padding: 2rem;
  position: relative;
  z-index: 1;
}

/* Section Header Styling */
.card-title {
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem !important;
}

/* Enhanced spacing between major sections */
.card.mb-4 {
  margin-bottom: 1.5rem !important;
}

/* Enhanced Special styling for main content cards */
.repair-section-card {
  border-radius: 1.125rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible; /* Allow button interactions */
}



.repair-section-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: rgba(41, 117, 213, 0.25);
  /* Remove transform to prevent button interaction issues */
}



/* Enhanced Form sections with subtle background variation */
.form-section {
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.7) 0%, rgba(241, 245, 249, 0.5) 100%);
  border-radius: 0.875rem;
  padding: 1.75rem;
  margin-bottom: 1.75rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  transition: var(--transition-normal);
}

.form-section:hover {
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.7) 100%);
  border-color: rgba(41, 117, 213, 0.25);
  transform: translateY(-1px);
}

/* Enhanced quotation cards - Light Mode Improvements */
.quotation-card {
  border-radius: 1.125rem;
  border: 2px solid rgba(41, 117, 213, 0.15);
  background: linear-gradient(145deg, rgba(248, 250, 255, 0.8) 0%, rgba(240, 245, 255, 0.6) 100%);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: static; /* Remove relative positioning that creates stacking context */
  overflow: visible; /* Allow dropdowns to show */
  box-shadow: 0 4px 16px rgba(41, 117, 213, 0.1);
  margin-bottom: 1.25rem;
  backdrop-filter: blur(5px);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  isolation: isolate; /* Isolate stacking context */
}



.quotation-card:hover {
  box-shadow: 0 12px 35px rgba(41, 117, 213, 0.18);
  border-color: rgba(41, 117, 213, 0.35);
  transform: translateY(-3px);
}

/* Quotation card headers */
.quotation-card h3 {
  color: rgb(41, 117, 213);
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.02em;
}

/* Quotation card select buttons */
.quotation-card .btn-outline-primary {
  border-width: 2px;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: var(--transition-fast);
}

.quotation-card .btn-outline-primary:hover {
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}

/* Clean input styling */
.form-control, .form-select {
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  transition: var(--transition-fast);
  background-color: #ffffff;
  font-weight: 400;
  font-family: var(--font-primary);
}



.form-control:hover, .form-select:hover {
  border-color: #adb5bd;
}



.form-control:focus, .form-select:focus {
  border-color: var(--company-primary);
  box-shadow: 0 0 0 0.2rem rgba(41, 117, 213, 0.25);
  outline: 0;
}







textarea.form-control:hover {
  border-color: #adb5bd;
}

/* Notes textarea highlighting - Light red background only when content is present */
#customerNotes.has-content,
#invoiceNotes.has-content, 
#djireplacementNotes.has-content,
#transferNotes.has-content,
#replacementNotesInput.has-content,
#RONotes.has-content {
  background-color: rgba(255, 240, 240, 0.8) !important;
  border-color: rgba(220, 53, 69, 0.15) !important;
  transition: var(--transition-fast);
}

#customerNotes.has-content:hover,
#invoiceNotes.has-content:hover,
#djireplacementNotes.has-content:hover,
#transferNotes.has-content:hover,
#replacementNotesInput.has-content:hover,
#RONotes.has-content:hover {
  background-color: rgba(255, 235, 235, 0.9) !important;
  border-color: rgba(220, 53, 69, 0.25) !important;
}

#customerNotes.has-content:focus,
#invoiceNotes.has-content:focus,
#djireplacementNotes.has-content:focus,
#transferNotes.has-content:focus,
#replacementNotesInput.has-content:focus,
#RONotes.has-content:focus {
  background-color: rgba(255, 230, 230, 0.95) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}



/* Enhanced button styling - Light Mode Improvements */
.btn {
  border-radius: 0.625rem;
  font-weight: 600;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-sm);
  border-width: 1.5px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-primary);
}



/* Fix btn-outline-primary for all cases */
.btn-outline-primary {
  color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  background-color: transparent !important;
  font-family: var(--font-primary);
  font-weight: 500;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
}

.btn-outline-primary:hover {
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.25);
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(41, 117, 213, 0.25);
}

/* Enhanced Section dividers - Light Mode */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(41, 117, 213, 0.15) 20%, rgba(41, 117, 213, 0.4) 50%, rgba(41, 117, 213, 0.15) 80%, transparent 100%);
  margin: 1.5rem 0;
  border: none;
  border-radius: 1px;
  position: relative;
}

/* Enhanced collection/dispatch tabs */
.nav-pills .nav-link {
  border-radius: 0.75rem;
  font-weight: 500;
  transition: var(--transition-fast);
  border: 2px solid transparent;
}

.nav-pills .nav-link.active {
  background-color: rgb(41, 117, 213);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(41, 117, 213, 0.35);
  color: white;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
}

.nav-pills .nav-link:not(.active):hover {
  background-color: rgba(41, 117, 213, 0.08);
  border-color: rgba(41, 117, 213, 0.25);
  color: rgb(41, 117, 213);
  transform: translateY(-1px);
  transition: var(--transition-fast);
}

/* Status indicators enhancement */
.badge {
  border-radius: 0.5rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}

/* Enhanced Dark Mode - Warmer, Eye-Friendly Cards */
[data-bs-theme=dark] .card {
  background: #2a2d31 !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-bs-theme=dark] .repair-section-card {
  background: #2a2d31 !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-bs-theme=dark] .form-section {
  background: rgba(58, 61, 66, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme=dark] .quotation-card {
  background: rgba(42, 45, 49, 0.8) !important;
  border-color: rgba(41, 117, 213, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: visible; /* Allow dropdowns to show */
  z-index: 1; /* Low z-index so dropdowns can appear above */
}

[data-bs-theme=dark] .quotation-card:hover {
  background: rgba(46, 49, 54, 0.9) !important;
  border-color: rgba(41, 117, 213, 0.3);
}

[data-bs-theme=dark] .form-control, 
[data-bs-theme=dark] .form-select {
  background: #2a2d31 !important;
  border-color: rgba(255, 255, 255, 0.18);
  color: #e8eaed;
}



[data-bs-theme=dark] .form-control:hover, 
[data-bs-theme=dark] .form-select:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: #2e3136 !important;
}

[data-bs-theme=dark] .form-control:focus, 
[data-bs-theme=dark] .form-select:focus {
  background-color: #2e3136 !important;
  border-color: var(--company-primary);
  box-shadow: 0 0 0 0.2rem rgba(41, 117, 213, 0.25);
  color: #e8eaed;
}

[data-bs-theme=dark] textarea.form-control:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: #2e3136 !important;
}

[data-bs-theme=dark] textarea.form-control:focus {
  background-color: #2e3136 !important;
  border-color: var(--company-primary);
  box-shadow: 0 0 0 0.2rem rgba(41, 117, 213, 0.25);
  color: #e8eaed;
}

/* Dark mode Notes textarea highlighting - Lighter red background, only when content is present */
[data-bs-theme=dark] #customerNotes.has-content,
[data-bs-theme=dark] #invoiceNotes.has-content,
[data-bs-theme=dark] #djireplacementNotes.has-content,
[data-bs-theme=dark] #transferNotes.has-content,
[data-bs-theme=dark] #replacementNotesInput.has-content,
[data-bs-theme=dark] #RONotes.has-content {
  background-color: rgba(80, 50, 50, 0.6) !important;
  border-color: rgba(220, 53, 69, 0.25) !important;
  color: #e8eaed !important;
}

[data-bs-theme=dark] #customerNotes.has-content:hover,
[data-bs-theme=dark] #invoiceNotes.has-content:hover,
[data-bs-theme=dark] #djireplacementNotes.has-content:hover,
[data-bs-theme=dark] #transferNotes.has-content:hover,
[data-bs-theme=dark] #replacementNotesInput.has-content:hover,
[data-bs-theme=dark] #RONotes.has-content:hover {
  background-color: rgba(90, 55, 55, 0.7) !important;
  border-color: rgba(220, 53, 69, 0.35) !important;
}

[data-bs-theme=dark] #customerNotes.has-content:focus,
[data-bs-theme=dark] #invoiceNotes.has-content:focus,
[data-bs-theme=dark] #djireplacementNotes.has-content:focus,
[data-bs-theme=dark] #transferNotes.has-content:focus,
[data-bs-theme=dark] #replacementNotesInput.has-content:focus,
[data-bs-theme=dark] #RONotes.has-content:focus {
  background-color: rgba(95, 60, 60, 0.8) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2) !important;
  color: #e8eaed !important;
}

/* Enhanced top-of-page Notes alert styling - Better visibility with blue accent */
#notesAlert {
  background-color: rgba(13, 110, 253, 0.08) !important;
  border-color: rgba(13, 110, 253, 0.2) !important;
  border-left: 4px solid var(--company-primary) !important;
}

#notesAlert .bi-stickies {
  color: var(--company-primary) !important;
}

/* Dark mode for top notes alert */
[data-bs-theme=dark] #notesAlert {
  background-color: rgba(13, 110, 253, 0.15) !important;
  border-color: rgba(13, 110, 253, 0.3) !important;
  color: #e8eaed !important;
}

[data-bs-theme=dark] #notesAlert .bi-stickies {
  color: var(--company-primary) !important;
}

/* Enhanced status button styling */
.btn-status {
  border-radius: 0.75rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  transition: var(--transition-fast);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  color: var(--bs-body-color);
}

.btn-status:hover {
  border-color: rgba(13, 110, 253, 0.3);
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
  color: var(--bs-body-color);
}

[data-bs-theme=dark] .btn-status:hover {
  border-color: rgba(41, 117, 213, 0.3);
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.1);
}

.btn-check:checked + .btn-status {
  background: linear-gradient(135deg, #0d6efd 0%, #4a90e2 100%);
  border-color: #0d6efd;
  color: white !important;
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.3);
}

/* Fix any nested elements that might have blue text on blue background */
.btn-check:checked + .btn-status * {
  color: white !important;
}

.btn-check:checked + .btn-status h5,
.btn-check:checked + .btn-status h6,
.btn-check:checked + .btn-status p,
.btn-check:checked + .btn-status span,
.btn-check:checked + .btn-status div {
  color: white !important;
}

[data-bs-theme=dark] .btn-check:checked + .btn-status {
  background: linear-gradient(135deg, #2975d5 0%, #1e5ba8 100%);
  border-color: #2975d5;
  color: white !important;
  box-shadow: 0 6px 16px rgba(41, 117, 213, 0.3);
}

/* Fix dark mode nested elements that might have blue text on blue background */
[data-bs-theme=dark] .btn-check:checked + .btn-status * {
  color: white !important;
}

[data-bs-theme=dark] .btn-check:checked + .btn-status h5,
[data-bs-theme=dark] .btn-check:checked + .btn-status h6,
[data-bs-theme=dark] .btn-check:checked + .btn-status p,
[data-bs-theme=dark] .btn-check:checked + .btn-status span,
[data-bs-theme=dark] .btn-check:checked + .btn-status div {
  color: white !important;
}

/* Fix the small text color in status buttons */
.btn-status .text-secondary {
  color: rgba(108, 117, 125, 0.9) !important;
}

[data-bs-theme=dark] .text-secondary {
  color: rgba(193, 201, 209, 0.85) !important;
}

[data-bs-theme=dark] .text-muted {
  color: rgba(193, 201, 209, 0.75) !important;
}

.btn-check:checked + .btn-status .text-secondary {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Green styling for completed button to match progress bar - Higher specificity */
#completedRadio:checked + .btn-status {
  background: linear-gradient(135deg, #198754 0%, #1eb374 100%) !important;
  border-color: #198754 !important;
  color: white !important;
  box-shadow: 0 6px 16px rgba(25, 135, 84, 0.3) !important;
}

/* Ensure all child elements in completed button are white */
#completedRadio:checked + .btn-status * {
  color: white !important;
}

/* RMA Status Tracking layout fixes */
.status-tracking-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.status-tracking-row .casecol {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Better grid layout for status buttons */
@media (min-width: 1400px) {
    .status-tracking-row .casecol {
        flex: 0 0 12%; /* 8 columns per row with better spacing */
        max-width: 220px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .status-tracking-row .casecol {
        flex: 0 0 15.5%; /* 6 columns per row */
        max-width: 200px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .status-tracking-row .casecol {
        flex: 0 0 19%; /* 5 columns per row */
        max-width: 180px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .status-tracking-row .casecol {
        flex: 0 0 23%; /* 4 columns per row */
        max-width: 160px;
    }
}

/* RMA Status Tracking responsive fixes */
@media (max-width: 1400px) {
    .btn-status {
        width: 170px !important;
        height: 130px !important;
    }
    .btn-status h5 {
        font-size: 0.9rem;
    }
}

@media (max-width: 1200px) {
    .btn-status {
        width: 150px !important;
        height: 120px !important;
    }
    .btn-status h5 {
        font-size: 0.85rem;
    }
    .btn-status i {
        font-size: 20px !important;
    }
}

@media (max-width: 992px) {
    .btn-status {
        width: 140px !important;
        height: 110px !important;
    }
    .btn-status h5 {
        font-size: 0.8rem;
        padding-top: 0.5rem !important;
    }
    .btn-status i {
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    /* Stack status buttons vertically on mobile */
    .status-tracking-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .status-tracking-row .casecol {
        flex: 1;
        max-width: 100%;
    }
    
    .btn-status {
        width: 100% !important;
        max-width: 100%;
        height: 80px !important;
        margin: 0 auto 8px auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left !important;
    }
    
    .btn-status div {
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .btn-status i {
        font-size: 24px !important;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    .btn-status h5 {
        font-size: 1rem;
        margin: 0;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1.2;
    }
    
    .btn-status p1 {
        display: none; /* Hide date/time on mobile for cleaner look */
    }
}

@media (max-width: 576px) {
    .btn-status {
        height: 70px !important;
    }
    
    .btn-status h5 {
        font-size: 0.9rem;
    }
    .btn-status h6 {
        font-size: 0.9rem;
    }
    
    .btn-status i {
        font-size: 20px !important;
        margin-right: 12px;
    }
    
    /* Stack quotation cards on small screens */
    .quotation-card {
        margin-bottom: 1rem;
        margin-right: 0 !important;
    }
}

/* Additional responsive CSS for h6 and small elements in btn-status */
@media (max-width: 1400px) {
    .btn-status h6 {
        font-size: 0.9rem;
    }
}

@media (max-width: 1200px) {
    .btn-status h6 {
        font-size: 0.85rem;
    }
}

@media (max-width: 992px) {
    .btn-status h6 {
        font-size: 0.8rem;
        padding-top: 0.5rem !important;
    }
}

@media (max-width: 768px) {
    .btn-status h6 {
        font-size: 1rem;
        margin: 0;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1.2;
    }
    
    .btn-status small {
        display: none; /* Hide date/time on mobile for cleaner look */
    }
}

/* Enhanced progress bar styling - Light Mode Improvements */
.progress {
  border-radius: 0.75rem;
  background: linear-gradient(145deg, rgba(241, 245, 249, 0.8) 0%, rgba(226, 232, 240, 0.6) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.progress-bar {
  border-radius: 0.75rem;
}

/* Enhanced Blue gradient for in-progress cases */
.progress-bar.bg-primary {
  background: linear-gradient(135deg, rgb(41, 117, 213) 0%, #4a90e2 50%, #6366f1 100%);
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.3);
}

/* Enhanced Green gradient for completed cases */
.progress-bar.bg-success {
  background: linear-gradient(135deg, #198754 0%, #20c997 50%, #1eb374 100%);
  box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

/* Enhanced input group styling - Light Mode */
.input-group-text {
  border-radius: 0.625rem 0 0 0.625rem;
  border: 1.5px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.7) 100%);
  font-weight: 600;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Enhanced radio and checkbox styling */
.btn-check:checked + .btn-outline-primary {
  color: #fff !important;
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.3);
}

[data-bs-theme=dark] .btn-check:checked + .btn-outline-primary {
  color: #fff !important;
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  box-shadow: 0 2px 8px rgba(41, 117, 213, 0.4);
}

.btn-check:checked + .btn-outline-success {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

.btn-check:checked + .btn-outline-danger {
  color: #fff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
}

.btn-check:checked + .btn-outline-secondary {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

/* Force override all bootstrap outline button checked states */
input[type="radio"].btn-check:checked + .btn.btn-outline-secondary.warrantyBtn,
input[type="checkbox"].btn-check:checked + .btn.btn-outline-secondary.warrantyBtn {
  color: #ffffff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

input[type="radio"].btn-check:checked + .btn.btn-outline-success.paidBtn,
input[type="checkbox"].btn-check:checked + .btn.btn-outline-success.paidBtn {
  color: #ffffff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

input[type="radio"].btn-check:checked + .btn.btn-outline-danger,
input[type="checkbox"].btn-check:checked + .btn.btn-outline-danger {
  color: #ffffff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.btn-check:checked + .btn-outline-danger {
  color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  background-color: transparent !important;
  font-family: var(--font-primary);
  font-weight: 500;
}

.btn-outline-danger:hover {
  color: #fff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-outline-danger:focus {
  color: #fff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}

.btn-outline-danger:active,
.btn-outline-danger.active {
  color: #fff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
}

/* Solid button variants */
.btn-success {
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  color: #fff !important;
  font-family: var(--font-primary);
  font-weight: 600;
}

.btn-success:hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}

.btn-danger {
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  color: #fff !important;
  font-family: var(--font-primary);
  font-weight: 600;
}

.btn-danger:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* Enhanced collapse/accordion styling */
.collapse, .collapsing {
  transition: var(--transition-normal);
}

/* Enhanced form text/help text */
.form-text {
  font-size: 0.875rem;
  color: rgba(108, 117, 125, 0.8);
  margin-top: 0.375rem;
}

[data-bs-theme=dark] .form-text {
  color: rgba(193, 201, 209, 0.8);
}

/* Enhanced alert styling */
.alert {
  border-radius: 0.75rem;
  border: 1px solid rgba(41, 117, 213, 0.2);
  background: linear-gradient(135deg, rgba(41, 117, 213, 0.05) 0%, rgba(248, 250, 255, 0.8) 100%);
  backdrop-filter: blur(5px);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Enhanced dropdown styling */
.dropdown-menu {
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 99999 !important; /* Much higher z-index to override everything */
  position: absolute !important;
  transform: translateZ(0); /* Force hardware acceleration and new stacking context */
}

.dropdown-item {
  border-radius: 0.5rem;
  margin: 0.125rem 0.5rem;
  transition: background-color 0.15s ease;
  padding: 0.5rem 0.75rem;
  position: relative;
  overflow: hidden;
  max-width: calc(100% - 1rem);
  width: calc(100% - 1rem);
}

.dropdown-item:hover {
  background-color: rgba(13, 110, 253, 0.08);
}

/* Enhanced modal styling */
.modal-content {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem 1rem 0 0;
}

/* Enhanced table styling */
.table {
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.table th {
  background-color: rgba(13, 110, 253, 0.05);
  border-bottom: 2px solid rgba(13, 110, 253, 0.1);
  font-weight: 600;
}

.table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Dark mode enhancements for new elements */
[data-bs-theme=dark] .btn-status {
  background: rgba(52, 58, 64, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--bs-body-color);
}

[data-bs-theme=dark] .btn-status:hover {
  border-color: rgba(41, 117, 213, 0.5);
  color: var(--bs-body-color);
}

[data-bs-theme=dark] .btn-check:checked + .btn-status {
  background: linear-gradient(135deg, #2975d5 0%, #1e5ba8 100%) !important;
  border-color: #2975d5;
  color: white;
  box-shadow: 0 6px 20px rgba(41, 117, 213, 0.4);
}

[data-bs-theme=dark] .btn-status .text-secondary {
  color: rgba(193, 201, 209, 0.9) !important;
}

[data-bs-theme=dark] .btn-check:checked + .btn-status .text-secondary {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix h6 in dark mode btn-status */
[data-bs-theme=dark] .btn-status h6 {
  color: inherit !important;
}

/* Fix h5 in dark mode btn-status too */
[data-bs-theme=dark] .btn-status h5 {
  color: inherit !important;
}

/* Ensure radio button interactions work properly */
.btn-check {
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
  z-index: -1;
}

/* Ensure label buttons are clickable */
.btn-outline-secondary.warrantyBtn,
.btn-outline-success.paidBtn {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

/* Prevent nested elements from blocking clicks */
.btn-outline-secondary.warrantyBtn *,
.btn-outline-success.paidBtn * {
  pointer-events: none;
}

/* CONSOLIDATED BUTTON OVERRIDES */

/* CHECKED STATES - CONSOLIDATED */
.btn-check:checked + .btn-outline-secondary.warrantyBtn,
input.btn-check:checked + .btn-outline-secondary.warrantyBtn,
input[type="radio"].btn-check:checked + .btn-outline-secondary.warrantyBtn,
input[type="checkbox"].btn-check:checked + .btn-outline-secondary.warrantyBtn,
html body .btn-check:checked + .btn-outline-secondary.warrantyBtn {
  color: #ffffff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

.btn-check:checked + .btn-outline-success.paidBtn,
input.btn-check:checked + .btn-outline-success.paidBtn,
input[type="radio"].btn-check:checked + .btn-outline-success.paidBtn,
input[type="checkbox"].btn-check:checked + .btn-outline-success.paidBtn,
html body .btn-check:checked + .btn-outline-success.paidBtn {
  color: #ffffff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.btn-check:checked + .btn-outline-danger,
input.btn-check:checked + .btn-outline-danger,
input[type="radio"].btn-check:checked + .btn-outline-danger,
input[type="checkbox"].btn-check:checked + .btn-outline-danger,
html body .btn-check:checked + .btn-outline-danger {
  color: #ffffff !important;
  background-color: var(--company-danger) !important;
  border-color: var(--company-danger) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

/* SIMPLIFIED HIGH-SPECIFICITY OVERRIDES */
.btn-outline-secondary.warrantyBtn {
  color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  background-color: transparent !important;
}

.btn-outline-secondary.warrantyBtn:hover, .btn-outline-secondary.warrantyBtn:focus {
  color: #ffffff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

.btn-outline-success.paidBtn {
  color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  background-color: transparent !important;
}

.btn-outline-success.paidBtn:hover, .btn-outline-success.paidBtn:focus {
  color: #ffffff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

/* Dark mode green styling for completed button - Higher specificity */
[data-bs-theme=dark] #completedRadio:checked + .btn-status {
  background: linear-gradient(135deg, #198754 0%, #1eb374 100%) !important;
  border-color: #198754 !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4) !important;
}

/* Ensure all child elements in completed button are white in dark mode */
[data-bs-theme=dark] #completedRadio:checked + .btn-status * {
  color: white !important;
}

/* Dark mode btn-flag styles */
[data-bs-theme=dark] .btn-flag-1,
[data-bs-theme=dark] .btn-flag-2 {
  color: var(--bs-body-color);
  background: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .btn-flag-1:hover,
[data-bs-theme=dark] .btn-flag-2:hover {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color);
  box-shadow: 0 2px 4px rgba(255,255,255,.1);
}

[data-bs-theme=dark] .btn-check:checked + .btn-flag-1 {
  color: #fff !important;
  background: #2975d5 !important;
  border-color: #2975d5 !important;
  box-shadow: 0 2px 4px rgba(108,177,255,.4) !important;
}

[data-bs-theme=dark] .btn-check:checked + .btn-flag-2 {
  color: #fff !important;
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 2px 4px rgba(239,68,68,.4) !important;
}

[data-bs-theme=dark] .progress {
  background: linear-gradient(145deg, rgba(46, 49, 54, 0.8) 0%, rgba(58, 61, 66, 0.6) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme=dark] .input-group-text {
  background: linear-gradient(145deg, rgba(42, 45, 49, 0.9) 0%, rgba(46, 49, 54, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e8eaed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-bs-theme=dark] .alert {
  background: linear-gradient(135deg, rgba(41, 117, 213, 0.12) 0%, rgba(42, 45, 49, 0.9) 100%);
  border-color: rgba(41, 117, 213, 0.25);
  color: #e8eaed;
}

[data-bs-theme=dark] .dropdown-menu {
  background-color: #2a2d31;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 10000 !important; /* Ensure dropdowns appear above all content */
  position: absolute !important;
}

[data-bs-theme=dark] .dropdown-item:hover {
  background-color: rgba(41, 117, 213, 0.18);
  color: #e8eaed;
}

[data-bs-theme=dark] .table {
  background-color: rgba(42, 45, 49, 0.9);
}

/* ==========================================
   CLEAN MODERN HOME PAGE STYLES - 2025
   ========================================== */

/* Enhanced Card System - Light Mode Improvements */
.card-home {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.875rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    position: relative;
    overflow: hidden;
}



.card-home:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: rgba(13, 110, 253, 0.3);
}



/* Enhanced Modern Button Styling - Light Mode */
.btn-home-primary {
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    transition: var(--transition-normal);
    background-color: var(--company-primary);
    border: none;
    box-shadow: 0 4px 12px rgba(41, 117, 213, 0.25);
    font-family: var(--font-primary);
    letter-spacing: -0.01em;
}



.btn-home-primary:hover {
    box-shadow: 0 6px 20px rgba(41, 117, 213, 0.35);
    background-color: var(--company-primary-hover);
    transform: translateY(-2px);
}

/* Clean Typography */
.home-user-panel-text {
    font-weight: 500;
}

.home-user-panel-img {
    border: 2px solid rgba(13, 110, 253, 0.1);
    transition: var(--transition-normal);
}

.home-user-panel-img:hover {
    border-color: rgba(13, 110, 253, 0.3);
}

/* Dashboard Enhancements */
.counter {
    font-variant-numeric: tabular-nums;
    transition: var(--transition-normal);
}

.counter:hover {
    color: #0a58ca;
}

/* Clean Table Styling */
table {
    border-collapse: separate;
    border-spacing: 0;
}

table th {
    background: rgba(248, 249, 250, 0.8);
    border-bottom: 2px solid rgba(13, 110, 253, 0.1);
    font-weight: 600;
    padding: 1rem;
    font-size: 0.875rem;
}

table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

table tr:hover td {
    background: rgba(13, 110, 253, 0.02);
}

/* Modern Badge System */
.badge {
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

/* Icon Enhancements */
.bi {
    transition: var(--transition-normal);
}

/* Form Classes Enhancements */
.form-class {
    transition: var(--transition-normal);
}

.form-flex {
    gap: 2rem;
}

@media (max-width: 768px) {
    .form-flex {
        flex-direction: column;
        gap: 1rem;
    }
    
    .form-class {
        width: 100% !important;
    }
}

.form-class-mobile {
    transition: var(--transition-normal);
}

@media (max-width: 992px) {
    .form-class-mobile {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .form-flex-mobile {
        flex-direction: column;
    }
}

/* Hover Effects for Interactive Elements */
.dropdown-toggle:hover {
    background: rgba(13, 110, 253, 0.05);
    border-radius: 0.375rem;
}

.nav-link:hover {
    color: #0a58ca !important;
}

/* Simplified Content Area - Performance Optimized */
.content {
    background-color: rgba(248, 249, 250, 0.3);
}

/* Notification Enhancement */
#notificationIcon {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Loading States */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Enhanced Dark Mode - Eye-Friendly Home Styling */
[data-bs-theme=dark] .card-home {
  background: #2a2d31 !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-bs-theme=dark] .card-home:hover {
  border-color: rgba(41, 117, 213, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  background: #2e3136 !important;
}

[data-bs-theme=dark] table th {
  background: rgba(58, 61, 66, 0.9);
  color: #e8eaed;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme=dark] table tr:hover td {
  background: rgba(41, 117, 213, 0.12);
}

[data-bs-theme=dark] small {
  color: rgba(193, 201, 209, 0.8) !important;
}

[data-bs-theme=dark] .small {
  color: rgba(193, 201, 209, 0.8) !important;
}

[data-bs-theme=dark] ::placeholder {
  color: rgba(193, 201, 209, 0.6) !important;
}

[data-bs-theme=dark] .form-control::placeholder {
  color: rgba(193, 201, 209, 0.6) !important;
}

[data-bs-theme=dark] .form-select option {
  color: #e8eaed;
  background-color: #2a2d31;
}



[data-bs-theme=dark] .content {
  background: rgba(30, 33, 36, 0.3);
}

[data-bs-theme=dark] .home-user-panel-img {
  border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme=dark] .home-user-panel-img:hover {
  border-color: rgba(41, 117, 213, 0.4);
}

/* Focus States */
.btn:focus,
.card-home:focus-within {
    outline: 2px solid rgba(13, 110, 253, 0.5);
    outline-offset: 2px;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Mobile Enhancements */
@media (max-width: 576px) {
    .home-user-panel {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .home-user-panel-location {
        text-align: center;
        margin-top: 1rem;
    }
    
    .content {
        padding: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn-home-primary {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

[data-bs-theme=dark] .table th {
  background-color: rgba(58, 61, 66, 0.9);
  border-bottom-color: rgba(41, 117, 213, 0.2);
  color: #e8eaed;
}

[data-bs-theme=dark] .table td {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: #e8eaed;
}

/* Custom Offcanvas Width for Notifications */
#RMANotifications.offcanvas {
  width: 500px;
}

/* Responsive offcanvas width */
@media (max-width: 768px) {
  #RMANotifications.offcanvas {
    width: 90vw;
  }
}

/* Resolved notification styling */
.resolved-notification {
  opacity: 0.6;
  background-color: rgba(248, 249, 250, 0.5) !important;
}

.resolved-notification .card-body {
  color: #6c757d !important;
}

/* Dark mode resolved notification styling */
[data-bs-theme=dark] .resolved-notification {
  background-color: rgba(58, 61, 66, 0.4) !important;
}

[data-bs-theme=dark] .resolved-notification .card-body {
  color: #b8c1ca !important;
}

/* Spinning animation for scan button */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Enhanced Search Interface Styles */
.search-result {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.search-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0d6efd, #6610f2, #d63384, #dc3545);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-result:hover::before {
    opacity: 1;
}

.search-result:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(13, 110, 253, 0.3);
}

.search-result h5 a {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none !important;
    font-weight: 700;
}

.search-result h5 a:hover {
    background: linear-gradient(45deg, #0b5ed7, #5a0fb4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhanced copyable text styling */
.copyable-text {
    position: relative;
    transition: var(--transition-fast);
    border-radius: 4px;
    padding: 1px 3px;
}

.copyable-text:hover {
    background-color: var(--company-primary-light);
    color: var(--company-primary) !important;
    transform: scale(1.02);
}

.copyable-text:active {
    background-color: rgba(41, 117, 213, 0.2);
    transform: scale(0.98);
}

/* Enhanced search result card styling */
.search-result-card {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.search-result-card:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Enhanced progress bars */
.progress {
    border-radius: 50px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    border-radius: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Badge enhancements */
.badge {
    font-weight: 600;
    padding: 0.5em 0.8em;
    border-radius: 20px;
    font-size: 0.65em;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button enhancements */
.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition-normal);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary {
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  color: #fff !important;
  font-family: var(--font-primary);
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--company-primary-hover) !important;
  border-color: var(--company-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}

.btn-primary:focus {
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(41, 117, 213, 0.25);
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
  color: #fff !important;
}

.btn-outline-success {
  color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  background-color: transparent !important;
  font-family: var(--font-primary);
  font-weight: 500;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

.btn-outline-success:hover {
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-outline-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
}

/* Search input enhancements with circular gradient */
#customSearchInput {
    border-radius: 12px;
    border: 2px solid rgba(41, 117, 213, 0.2);
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
    transition: var(--transition-normal);
    box-shadow: 0 2px 4px rgba(41, 117, 213, 0.08);
    position: relative;
    overflow: hidden;
    font-family: var(--font-primary);
    font-weight: 500;
}

#customSearchInput::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(13, 110, 253, 0.5), transparent, rgba(13, 110, 253, 0.5), transparent);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    animation: rotate 3s linear infinite;
}

#customSearchInput:focus {
    border-color: var(--company-primary);
    box-shadow: 0 0 0 3px rgba(41, 117, 213, 0.15);
    transform: translateY(-2px);
    outline: none;
}

#customSearchInput:focus::before {
    opacity: 1;
}

/* Icon enhancements */
.bi {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* Loading animation enhancement */
.spinner-border {
    animation: spin 1s linear infinite, pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

/* Enhanced search results container */
.bg-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Smooth animations for search results */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-result {
    animation: slideInUp 0.6s ease-out;
}

/* Enhanced typography */
.fw-bold {
    font-weight: 700 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

/* Modal enhancements for search */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .search-result {
        margin-bottom: 1rem;
    }
    
    .search-result .row {
        --bs-gutter-x: 0.5rem;
    }
    
    .btn-group-vertical .btn {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
    
    #customSearchInput {
        font-size: 1rem;
    }
    
    .copyable-text {
        padding: 2px 4px;
    }
    
    .search-result-card {
        border-radius: 12px !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .search-result {
        background: linear-gradient(135deg, #2b2b2b 0%, #3c3c3c 100%);
        border-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    
    .search-result .text-dark {
        color: #ffffff !important;
    }
    
    .search-result .text-muted {
        color: #adb5bd !important;
    }
    
    .bg-light {
        background: linear-gradient(135deg, #2b2b2b 0%, #3c3c3c 100%) !important;
    }
    
    .copyable-text:hover {
        background-color: rgba(13, 110, 253, 0.2);
        color: #66b3ff !important;
    }
}

/* Enhanced Dark Mode Search Interface - Eye-Friendly */
[data-bs-theme=dark] .search-result {
    background: linear-gradient(135deg, #2a2d31 0%, #2e3136 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e8eaed !important;
}

[data-bs-theme=dark] .search-result-card {
    background: linear-gradient(135deg, #2a2d31 0%, #2e3136 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme=dark] .search-result-card:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(108, 177, 255, 0.25) !important;
    background: linear-gradient(135deg, #2e3136 0%, #34373c 100%) !important;
}

[data-bs-theme=dark] .search-result .text-dark {
    color: #e8eaed !important;
}

[data-bs-theme=dark] .search-result .text-muted {
    color: #b8c1ca !important;
}

[data-bs-theme=dark] .search-result .fw-semibold {
    color: #e8eaed !important;
}

[data-bs-theme=dark] .copyable-text:hover {
    background-color: rgba(41, 117, 213, 0.2) !important;
    color: #2975d5 !important;
}

[data-bs-theme=dark] .copyable-text:active {
    background-color: rgba(41, 117, 213, 0.3) !important;
}

[data-bs-theme=dark] .bg-light {
    background: linear-gradient(135deg, #3a3d42 0%, #404449 100%) !important;
    color: #e8eaed !important;
}

[data-bs-theme=dark] .modal-content {
    background-color: #2a2d31 !important;
    color: #e8eaed !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-bs-theme=dark] .modal-header {
    background: linear-gradient(135deg, #3a3d42 0%, #404449 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme=dark] #customSearchInput {
    background-color: #2a2d31 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #e8eaed !important;
}

[data-bs-theme=dark] #customSearchInput::before {
    background: conic-gradient(from 0deg, transparent, rgba(108, 177, 255, 0.6), transparent, rgba(108, 177, 255, 0.6), transparent);
}

[data-bs-theme=dark] #customSearchInput:focus {
    background-color: #2e3136 !important;
    border-color: transparent !important;
    color: #e8eaed !important;
}

[data-bs-theme=dark] .progress {
    background-color: rgba(58, 61, 66, 0.7) !important;
}

[data-bs-theme=dark] .card-title {
    color: #e8eaed !important;
}

/* Status input should display proper case, not uppercase */
#statusInput {
    text-transform: none !important;
}

/* Fix for dropdown menus in DataTables (from odb.html) */
.dataTables_wrapper .dropdown-menu {
    z-index: 9999 !important;
}

/* Additional fix for dropdown menu positioning */
.table .dropdown {
    position: static !important;
}

.table .dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
}

/* Fix card overflow issues */
.card {
    overflow: visible !important;
}

.card-body {
    overflow: visible !important;
}

/* Fix DataTables wrapper overflow */
.dataTables_wrapper {
    overflow: visible !important;
}

/* Ensure table container doesn't clip dropdowns */
#databasetablediv {
    overflow: visible !important;
}

/* Target DataTables specific classes */
.dataTable.no-footer {
    overflow: visible !important;
    margin-bottom: 40px !important;
}

/* Fix DataTables scrolling containers */
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollBody,
.dataTables_scrollFoot {
    overflow: visible !important;
}

/* Add space above pagination and info to prevent blocking dropdowns */
.dataTables_info {
    margin-top: 30px !important;
    padding-top: 10px !important;
}

.dataTables_paginate {
    margin-top: 30px !important;
    padding-top: 10px !important;
}

/* Also add space to the wrapper row containing both elements */
.dataTables_wrapper .row:last-child {
    margin-top: 30px !important;
    padding-top: 10px !important;
}

/* Ensure dropdowns appear above pagination */
.dropdown-menu {
    z-index: 9999 !important;
}

/* Fix table row positioning for dropdowns */
.dataTable tbody tr {
    position: relative !important;
}

/* Make sure dropdown parent has correct positioning */
.table tbody tr td:last-child {
    position: relative !important;
}

/* Fix for filtered/short tables */
.dataTables_wrapper .dataTables_scrollBody {
    overflow: visible !important;
}

/* Ensure the table wrapper has enough space */
.table-responsive {
    overflow: visible !important;
}

/* Fix for when table is very short after filtering */
.dataTables_wrapper {
    min-height: 400px !important;
    padding-bottom: 150px !important;
}

/* Ensure table container has minimum height */
#databasetablediv {
    min-height: 350px !important;
    padding-bottom: 150px !important;
}

/* Add space between table and pagination */
.dataTable {
    margin-bottom: 80px !important;
}

/* Force dropdown to use dropup when close to bottom */
.table .dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
    will-change: transform !important;
}

/* Bootstrap dropdown override - consolidated above with higher z-index */

/* Ensure dropdown containers don't interfere with z-index stacking */
.dropdown {
  position: relative;
  z-index: auto;
}

/* Prevent quotation cards from creating stacking context issues */
.quotation-card .dropdown-menu {
  z-index: 10001 !important; /* Even higher for quotation dropdowns */
}

/* Fix for quotation management dropdown specifically */
.form-section .dropdown-menu {
  z-index: 10002 !important; /* Higher than quotation cards */
}

/* Force form-section cards to have lower z-index than dropdowns */
.form-section {
  z-index: 1;
  position: relative;
}

/* Ensure all cards below dropdowns don't interfere */
.card.quotation-card {
  z-index: auto; /* Reset z-index completely */
  position: relative;
}

/* NUCLEAR DROPDOWN FIX - Force dropdowns to always appear on top */
.dropdown-menu.show {
  z-index: 99999 !important;
}

/* Specific fix for Bootstrap dropdown positioning */
.btn-group .dropdown-menu,
.dropdown .dropdown-menu {
  z-index: 99999 !important;
}

/* Subtle Search Highlighting - Just Blue Text */
.search-highlight {
    color: #0d6efd !important;
    font-weight: 600;
    transition: var(--transition-fast);
}

/* Works the same in both light and dark themes */
[data-bs-theme=dark] .search-highlight {
    color: #6ea8fe !important;
    font-weight: 600;
}

/* ===================================================================== */
/* APPLICATION PAGES SHARED STYLES (Collections, Arrivals, Dispatch) */
/* ===================================================================== */

/* Responsive carousel fixes for application pages */
@media (max-height: 800px) {
    .arrivalCard {
        height: auto !important;
        min-height: 500px !important;
    }
    
    #arrivalCarousel, #collectionCarousel, #dispatchCarousel {
        min-height: 500px !important;
    }
    
    .carousel-inner {
        min-height: 500px !important;
    }
}

@media (max-height: 600px) {
    .arrivalCard {
        min-height: 400px !important;
    }
    
    #arrivalCarousel, #collectionCarousel, #dispatchCarousel {
        min-height: 400px !important;
    }
    
    .carousel-inner {
        min-height: 400px !important;
    }
}

/* Ensure carousel items can scroll if needed */
.carousel-item {
    overflow-y: auto;
}

/* Make sure navigation buttons are always visible */
.carousel-item .d-flex.justify-content-between {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* ===================================================================== */
/* COLLECTIONS PAGE SPECIFIC STYLES */
/* ===================================================================== */

/* Collection status banner styling */
.collection-status-banner {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    transition: var(--transition-normal);
}

.collection-status-banner:hover {
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    transform: translateY(-1px);
}

/* Enhanced verification checkbox styling */
.verification-section .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25);
}

.verification-section .form-check-label {
    transition: var(--transition-fast);
}

.verification-section .form-check-input:checked + .form-check-label {
    color: #198754;
    font-weight: 600;
}

/* Customer selection dropdown enhancement */
.customer-selection .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Application summary card enhancements (used in collections, arrivals, dispatch) */
.application-summary-card {
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: var(--transition-normal);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.application-summary-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: rgba(13, 110, 253, 0.2);
}

/* Legacy alias for backwards compatibility */
.collection-summary-card {
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: var(--transition-normal);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.collection-summary-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: rgba(13, 110, 253, 0.2);
}

/* Enhanced Dark Mode Collections - Eye-Friendly */
[data-bs-theme=dark] .collection-status-banner {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3);
    color: #ffffff;
}

[data-bs-theme=dark] .application-summary-card,
[data-bs-theme=dark] .collection-summary-card {
    background-color: #2a2d31;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-bs-theme=dark] .verification-section .form-check-input:checked + .form-check-label {
    color: #6dd3ce;
}

/* ===================================================================== */
/* DOA PAGE SPECIFIC STYLES - Enhanced UI Components */
/* ===================================================================== */

/* Enhanced dropdown item styling for better visual feedback */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-radius: 4px;
    transform: translateX(2px);
    transition: var(--transition-fast);
}

.dropdown-item:active {
    background-color: var(--bs-primary) !important;
    color: white !important;
    transform: scale(0.98);
    transition: all 0.1s ease;
}

/* Special styling for email manager dropdown */
.dropdown-item[data-bs-target="#emailModal"]:hover {
    background: linear-gradient(45deg, var(--bs-primary-bg-subtle), var(--bs-info-bg-subtle)) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dropdown-item[data-bs-target="#emailModal"]:active {
    background: var(--bs-primary) !important;
    color: white !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Dark mode dropdown improvements */
[data-bs-theme=dark] .dropdown-item:hover,
[data-bs-theme=dark] .dropdown-item:focus {
    background-color: rgba(108, 177, 255, 0.15) !important;
    color: #e8eaed !important;
}

[data-bs-theme=dark] .dropdown-item:active {
    background-color: #2975d5 !important;
    color: #ffffff !important;
}

/* Dark mode email manager dropdown */
[data-bs-theme=dark] .dropdown-item[data-bs-target="#emailModal"]:hover {
    background: linear-gradient(45deg, rgba(108, 177, 255, 0.15), rgba(108, 177, 255, 0.25)) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

[data-bs-theme=dark] .dropdown-item[data-bs-target="#emailModal"]:active {
    background: #2975d5 !important;
    color: white !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

/* Special styling for update buttons */
.updatetransition {
    transition: all 0.3s ease-in-out;
}

.updatetransition:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Fix btn-outline-secondary */
.btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
  font-family: var(--font-primary);
  font-weight: 500;
}

.btn-outline-secondary:hover {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.btn-outline-secondary:focus {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Dark mode custom button variants */
[data-bs-theme=dark] .paidBtn {
  color: var(--company-success) !important;
  border-color: var(--company-success) !important;
  background-color: transparent !important;
}

[data-bs-theme=dark] .paidBtn:hover,
[data-bs-theme=dark] .paidBtn:focus {
  color: #fff !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

[data-bs-theme=dark] .btn-check:checked + .paidBtn {
  color: white !important;
  background-color: var(--company-success) !important;
  border-color: var(--company-success) !important;
}

[data-bs-theme=dark] .warrantyBtn {
  color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
  background-color: transparent !important;
}

[data-bs-theme=dark] .warrantyBtn:hover,
[data-bs-theme=dark] .warrantyBtn:focus {
  color: #fff !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
}

[data-bs-theme=dark] .btn-check:checked + .warrantyBtn {
  color: white !important;
  background-color: var(--company-purple) !important;
  border-color: var(--company-purple) !important;
}

/* Dark mode combination classes - simplified since they inherit from light mode */

/* Dark mode btn-outline-secondary */
[data-bs-theme=dark] .btn-outline-secondary {
  color: #adb5bd !important;
  border-color: #adb5bd !important;
  background-color: transparent !important;
}

[data-bs-theme=dark] .btn-outline-secondary:hover,
[data-bs-theme=dark] .btn-outline-secondary:focus,
[data-bs-theme=dark] .btn-outline-secondary:active,
[data-bs-theme=dark] .btn-outline-secondary.active {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

[data-bs-theme=dark] .btn-check:checked + .btn-outline-secondary {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Fix h6 inside btn-status buttons - override blue color from global h6 */
.btn-status h6 {
  color: inherit !important;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  margin: 0;
}

/* Fix h5 inside btn-status too */
.btn-status h5 {
  color: inherit !important;
}

/* ===== COMPACT SIDEBAR STYLES ===== */

/* Section titles for better organization */
.nav-section-title {
  padding: 0.5rem 0.75rem 0.25rem 0.75rem;
  margin-bottom: 0.25rem;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-section-title small {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #6c757d !important;
  display: block;
  text-transform: uppercase;
}

/* Section dividers */
.nav-section-divider {
  height: 0.75rem;
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  position: relative;
}

.nav-section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

/* Compact navigation links */
.nav-link-compact {
  padding: 0.45rem 0.75rem !important;
  font-size: 0.85rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  margin: 0 0.5rem 0.15rem 0.5rem;
}

.nav-link-compact:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

/* Standard navigation links */
.nav-link:not(.nav-link-compact) {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin: 0 0.5rem 0.2rem 0.5rem;
  transition: all 0.15s ease-in-out;
  font-size: 0.9rem;
}

.nav-link:not(.nav-link-compact):hover {
  background-color: rgba(0, 123, 255, 0.08);
}

/* External link indicators */
.nav-link .bi-box-arrow-up-right {
  font-size: 0.8rem;
  opacity: 0.6;
  transition: opacity 0.15s ease-in-out;
}

.nav-link:hover .bi-box-arrow-up-right {
  opacity: 1;
}

/* Better collapsible section styling */
.collapsible-header {
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collapsible-header:hover {
  background-color: rgba(0, 123, 255, 0.08);
}

/* Improved chevron positioning */
.chevron-icon {
  margin-left: auto;
  transition: transform 0.25s ease-in-out;
  font-size: 0.9rem;
  opacity: 0.7;
}

.collapsible-header[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

.collapsible-header:hover .chevron-icon {
  opacity: 1;
}

/* Sub navigation items styling */
.sub-nav-item {
  padding: 0.35rem 0.75rem 0.35rem 1.25rem !important;
  font-size: 0.8rem;
  opacity: 0.9;
  margin: 0 0.5rem 0.1rem 0.5rem;
}

.sub-nav-item:hover {
  opacity: 1;
  background-color: rgba(0, 123, 255, 0.06);
}

.sub-nav-item i {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Better active state styling */
.nav-link.active {
  background-color: var(--bs-primary) !important;
  color: white !important;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.nav-link.active i {
  color: white !important;
}

/* Improved sidebar footer */
.offcanvas-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(248, 249, 250, 0.8);
  backdrop-filter: blur(8px);
}

[data-bs-theme="dark"] .offcanvas-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(33, 37, 41, 0.8);
}

/* Dark mode support for sidebar improvements */
[data-bs-theme="dark"] .nav-section-title {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .nav-section-title small {
  color: #adb5bd !important;
  opacity: 1;
}

[data-bs-theme="dark"] .nav-section-divider::before {
  background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .nav-link-compact:hover,
[data-bs-theme="dark"] .nav-link:not(.nav-link-compact):hover {
  background-color: rgba(13, 110, 253, 0.15);
}

[data-bs-theme="dark"] .collapsible-header:hover {
  background-color: rgba(13, 110, 253, 0.12);
}

[data-bs-theme="dark"] .sub-nav-item:hover {
  background-color: rgba(13, 110, 253, 0.1);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .nav-link-compact {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.95rem;
  }
  
  .nav-section-title small {
    font-size: 0.8rem;
  }
}

/* ===== QUICK FUNCTIONS BAR STYLES ===== */

.quick-functions-bar {
  background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.quick-function-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.2s ease;
  height: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quick-function-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 123, 255, 0.3);
  text-decoration: none;
  color: inherit;
}

.quick-function-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
}

.quick-function-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.quick-function-text {
  flex-grow: 1;
  min-width: 0;
}

.quick-function-text h6 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #333;
}

.quick-function-text small {
  font-size: 0.75rem;
  color: #6c757d;
  line-height: 1.2;
}

.quick-function-arrow {
  font-size: 1rem;
  color: #adb5bd;
  opacity: 0.7;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.quick-function-card:hover .quick-function-arrow {
  opacity: 1;
  transform: translateX(3px);
  color: var(--bs-primary);
}

.quick-function-card:hover .quick-function-icon {
  transform: scale(1.05);
}

/* Dark mode support for quick functions */
[data-bs-theme="dark"] .quick-functions-bar {
  background: linear-gradient(135deg, rgba(33, 37, 41, 0.8) 0%, rgba(52, 58, 64, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .quick-function-card {
  background: rgba(52, 58, 64, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8f9fa;
}

[data-bs-theme="dark"] .quick-function-card:hover {
  background: rgba(52, 58, 64, 0.95);
  border-color: rgba(13, 110, 253, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .quick-function-text h6 {
  color: #f8f9fa;
}

[data-bs-theme="dark"] .quick-function-text small {
  color: #adb5bd;
}

[data-bs-theme="dark"] .quick-function-arrow {
  color: #6c757d;
}

[data-bs-theme="dark"] .quick-function-card:hover .quick-function-arrow {
  color: var(--bs-primary);
}

/* ===== NOTIFICATIONS PANEL DARK MODE FIXES ===== */

/* Fix notifications panel in dark mode */
[data-bs-theme="dark"] .offcanvas {
  background-color: var(--bs-dark) !important;
  color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .offcanvas-title {
  color: var(--bs-light) !important;
}

/* Fix tab navigation in both light and dark modes */
.nav-underline .nav-link {
  color: #222222 !important;
  border-bottom: 2px solid transparent;
}

.nav-underline .nav-link:hover {
  color: #222222 !important;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}

.nav-underline .nav-link.active {
  color: #ffffff !important;
  border-bottom-color: var(--bs-primary);
  background-color: rgba(13, 110, 253, 0.1);
}

/* Fix tab navigation in dark mode */
[data-bs-theme="dark"] .nav-underline .nav-link {
  color: #adb5bd !important;
  border-bottom: 2px solid transparent;
}

[data-bs-theme="dark"] .nav-underline .nav-link:hover {
  color: #f8f9fa !important;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .nav-underline .nav-link.active {
  color: #f8f9fa !important;
  border-bottom-color: var(--bs-primary);
  background-color: rgba(13, 110, 253, 0.1);
}

/* Fix button styling in notifications */
[data-bs-theme="dark"] .btn-outline-secondary {
  color: #adb5bd !important;
  border-color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Fix close button in dark mode */
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Tab content styling */
[data-bs-theme="dark"] .tab-content {
  color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .tab-pane {
  color: var(--bs-light) !important;
}

/* Responsive design for quick functions */
@media (max-width: 992px) {
  .quick-functions-bar {
    padding: 1.25rem;
  }
  
  .quick-function-content {
    gap: 0.5rem;
  }
  
  .quick-function-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .quick-functions-bar {
    padding: 1rem;
  }
  
  .quick-function-card {
    padding: 0.875rem;
  }
  
  .quick-function-text h6 {
    font-size: 0.85rem;
  }
  
  .quick-function-text small {
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .row.g-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
  
  .quick-function-content {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .quick-function-arrow {
    display: none;
  }
  
  .quick-function-icon {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}