@charset "UTF-8";
/* === Sass Modules === */
/* === Functions === */
/* === Typography Variables === */
/* Font sizes with clamp() for better responsiveness - Fashion style */
/* === Display headings - Adjusted for Fashion style === */
/* === Color System === */
/* === Component Styling === */
/* === Spacing - Responsive with clamp === */
/* === Dark Mode Variables === */
/* === Grid System === */
/* === Spacing System === */
/* === Form Validation === */
/* === Form Styling === */
/* === Shadow System === */
/* === Border Variables === */
/* === Base Styles === */
:root {
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-secondary: #1e293b;
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-info: #0284c7;
  --bs-info-rgb: 2, 132, 199;
  --bs-warning: #ca8a04;
  --bs-warning-rgb: 202, 138, 4;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-light: #f8fafc;
  --bs-dark: #0f172a;
  --bs-dark-rgb: 15, 23, 42;
  --bs-body-bg: #ffffff;
  --bs-body-color: #0f172a;
  --bs-body-font-family: Inter, Helvetica, Arial, sans-serif;
  --bs-font-sans-serif: Inter, Helvetica, Arial, sans-serif;
  --bs-font-monospace: Source Code Pro, monospace;
  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.125rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.75rem;
  --bs-border-radius-pill: 9999px;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --bs-container-padding-x: 0.75rem;
  --bs-spacer-0: 0;
  --bs-spacer-1: 0.25rem;
  --bs-spacer-2: 0.5rem;
  --bs-spacer-3: 0.75rem;
  --bs-spacer-4: 1rem;
  --bs-spacer-5: 1.5rem;
  --bs-spacer-6: 2rem;
  --bs-spacer-8: 3rem;
  --bs-spacer-10: 4rem;
  --bs-spacer-12: 5rem;
  --bs-spacer-16: 8rem;
}

:root {
  --bs-box-shadow: 0 4px 6px -1px rgba(2, 6, 23, 0.1), 0 2px 4px -2px rgba(2, 6, 23, 0.1);
  --bs-box-shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px -1px rgba(2, 6, 23, 0.1);
  --bs-box-shadow-lg: 0 20px 25px -5px rgba(2, 6, 23, 0.1), 0 8px 10px -6px rgba(2, 6, 23, 0.1);
  --bs-box-shadow-inset: inset 0 1px 1px rgba(2, 6, 23, 0.05);
  --bs-border-color: #e2e8f0;
  --bs-border-color-translucent: rgba(15, 23, 42, 0.1);
  --bs-border-color-dark: #475569;
}

/* ===================================================
   ELEMENT BASE STYLES
=================================================== */
body {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  line-height: 1.6;
  transition-property: background-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* ===================================================
   DARK MODE ADJUSTMENTS
=================================================== */
[data-bs-theme=dark] {
  --bs-primary: #0d9488;
  --bs-primary-rgb: 13, 148, 136;
  --bs-body-bg: #020617;
  --bs-body-color: #cbd5e1;
  --bs-dark: #020617;
  --bs-border-color: rgba(248, 250, 252, 0.2);
  --bs-border-color-translucent: rgba(248, 250, 252, 0.15);
  --bs-border-color-dark: rgba(248, 250, 252, 0.2);
  --bs-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
                   0 3px 6px rgba(0, 0, 0, 0.14);
  --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2),
                     0 1px 2px rgba(0, 0, 0, 0.14);
  --bs-box-shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.2),
                     0 8px 12px rgba(0, 0, 0, 0.14);
}
[data-bs-theme=dark] .bg-light {
  background-color: #0f172a !important;
}
[data-bs-theme=dark] .bg-white {
  background-color: #0f172a !important;
}
[data-bs-theme=dark] .bg-body {
  background-color: #020617 !important;
}
[data-bs-theme=dark] .bg-body-secondary {
  background-color: #0f172a !important;
}
[data-bs-theme=dark] .bg-body-tertiary {
  background-color: #1e293b !important;
}

/* ===================================================
   GRID SYSTEM OVERRIDES
=================================================== */
/* === Containers === */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  padding-right: var(--bs-container-padding-x);
  padding-left: var(--bs-container-padding-x);
}

/* === Row Gaps === */
.row-gap-sm {
  --bs-gutter-y: 0.75rem;
}

.row-gap-md {
  --bs-gutter-y: 1.5rem;
}

.row-gap-lg {
  --bs-gutter-y: 2rem;
}

/* === Custom containers === */
.container-narrow {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-container-padding-x);
  padding-right: var(--bs-container-padding-x);
}

.container-tight {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-container-padding-x);
  padding-right: var(--bs-container-padding-x);
}

/* === Icon Containers === */
.rounded-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rounded-icon.rounded-icon-sm {
  width: 2rem;
  height: 2rem;
}
.rounded-icon.rounded-icon-sm > i, .rounded-icon.rounded-icon-sm > .bi, .rounded-icon.rounded-icon-sm > svg {
  font-size: 0.875rem;
}
.rounded-icon.rounded-icon-lg {
  width: 4rem;
  height: 4rem;
}
.rounded-icon.rounded-icon-lg > i, .rounded-icon.rounded-icon-lg > .bi, .rounded-icon.rounded-icon-lg > svg {
  font-size: 1.5rem;
}
.rounded-icon.rounded-icon-xl {
  width: 5.5rem;
  height: 5.5rem;
}
.rounded-icon.rounded-icon-xl > i, .rounded-icon.rounded-icon-xl > .bi, .rounded-icon.rounded-icon-xl > svg {
  font-size: 2rem;
}
.rounded-icon > i, .rounded-icon > .bi, .rounded-icon > svg {
  margin: 0;
}

/* === Square Icon Containers === */
.square-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.square-icon.square-icon-sm {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
}
.square-icon.square-icon-sm > i, .square-icon.square-icon-sm > .bi, .square-icon.square-icon-sm > svg {
  font-size: 0.875rem;
}
.square-icon.square-icon-lg {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
}
.square-icon.square-icon-lg > i, .square-icon.square-icon-lg > .bi, .square-icon.square-icon-lg > svg {
  font-size: 1.5rem;
}
.square-icon.square-icon-xl {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1rem;
}
.square-icon.square-icon-xl > i, .square-icon.square-icon-xl > .bi, .square-icon.square-icon-xl > svg {
  font-size: 2rem;
}
.square-icon > i, .square-icon > .bi, .square-icon > svg {
  margin: 0;
}

/* === Automatic Icon Colors in Containers === */
.bg-primary-soft > i,
.bg-primary-soft > .bi,
.bg-primary-soft > svg {
  color: #0f766e;
}

.bg-success-soft > i,
.bg-success-soft > .bi,
.bg-success-soft > svg {
  color: #16a34a;
}

.bg-info-soft > i,
.bg-info-soft > .bi,
.bg-info-soft > svg {
  color: #0284c7;
}

.bg-warning-soft > i,
.bg-warning-soft > .bi,
.bg-warning-soft > svg {
  color: #ca8a04;
}

.bg-danger-soft > i,
.bg-danger-soft > .bi,
.bg-danger-soft > svg {
  color: #dc2626;
}

.bg-secondary-soft > i,
.bg-secondary-soft > .bi,
.bg-secondary-soft > svg {
  color: #1e293b;
}

/* === Bordered Icon Containers === */
.bordered-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bordered-icon.bordered-icon-sm {
  width: 2rem;
  height: 2rem;
  border-width: 1.5px;
}
.bordered-icon.bordered-icon-sm > i, .bordered-icon.bordered-icon-sm > .bi, .bordered-icon.bordered-icon-sm > svg {
  font-size: 0.875rem;
}
.bordered-icon.bordered-icon-lg {
  width: 4rem;
  height: 4rem;
  border-width: 2.5px;
}
.bordered-icon.bordered-icon-lg > i, .bordered-icon.bordered-icon-lg > .bi, .bordered-icon.bordered-icon-lg > svg {
  font-size: 1.5rem;
}
.bordered-icon > i, .bordered-icon > .bi, .bordered-icon > svg {
  margin: 0;
}

.bordered-icon-primary {
  color: #0f766e;
  border-color: #0f766e;
}

.bordered-icon-secondary {
  color: #1e293b;
  border-color: #1e293b;
}

.bordered-icon-success {
  color: #16a34a;
  border-color: #16a34a;
}

.bordered-icon-info {
  color: #0284c7;
  border-color: #0284c7;
}

.bordered-icon-warning {
  color: #ca8a04;
  border-color: #ca8a04;
}

.bordered-icon-danger {
  color: #dc2626;
  border-color: #dc2626;
}

/* === Floating Icon Containers === */
.floating-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  background-color: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
}
.floating-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.floating-icon.floating-icon-sm {
  width: 2rem;
  height: 2rem;
}
.floating-icon.floating-icon-sm > i, .floating-icon.floating-icon-sm > .bi, .floating-icon.floating-icon-sm > svg {
  font-size: 0.875rem;
}
.floating-icon.floating-icon-lg {
  width: 4rem;
  height: 4rem;
}
.floating-icon.floating-icon-lg > i, .floating-icon.floating-icon-lg > .bi, .floating-icon.floating-icon-lg > svg {
  font-size: 1.5rem;
}
.floating-icon > i, .floating-icon > .bi, .floating-icon > svg {
  margin: 0;
}

[data-bs-theme=dark] .floating-icon {
  background-color: #0f172a;
}

/* === Badge Icon Containers === */
.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #0f766e;
  color: #fff;
}
.badge-icon.badge-icon-xs {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.625rem;
}
.badge-icon.badge-icon-sm {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8125rem;
}
.badge-icon > i, .badge-icon > .bi, .badge-icon > svg {
  margin: 0;
}

.badge-icon-primary {
  background-color: #0f766e;
}

.badge-icon-secondary {
  background-color: #1e293b;
}

.badge-icon-success {
  background-color: #16a34a;
}

.badge-icon-info {
  background-color: #0284c7;
}

.badge-icon-warning {
  background-color: #ca8a04;
}

.badge-icon-danger {
  background-color: #dc2626;
}

/* === Soft Colored Borders === */
.border-primary-soft {
  border-color: rgba(15, 118, 110, 0.3) !important;
}

.border-secondary-soft {
  border-color: rgba(30, 41, 59, 0.3) !important;
}

.border-success-soft {
  border-color: rgba(22, 163, 74, 0.3) !important;
}

.border-info-soft {
  border-color: rgba(2, 132, 199, 0.3) !important;
}

.border-warning-soft {
  border-color: rgba(202, 138, 4, 0.3) !important;
}

.border-danger-soft {
  border-color: rgba(220, 38, 38, 0.3) !important;
}

.border-light-soft {
  border-color: rgba(248, 250, 252, 0.3) !important;
}

.border-dark-soft {
  border-color: rgba(15, 23, 42, 0.3) !important;
}

/* === Dark Mode Soft Colored Borders === */
[data-bs-theme=dark] .border-primary-soft {
  border-color: rgba(13, 148, 136, 0.3) !important;
}
[data-bs-theme=dark] .border-secondary-soft {
  border-color: rgba(30, 41, 59, 0.3) !important;
}
[data-bs-theme=dark] .border-success-soft {
  border-color: rgba(22, 163, 74, 0.3) !important;
}
[data-bs-theme=dark] .border-info-soft {
  border-color: rgba(2, 132, 199, 0.3) !important;
}
[data-bs-theme=dark] .border-warning-soft {
  border-color: rgba(202, 138, 4, 0.3) !important;
}
[data-bs-theme=dark] .border-danger-soft {
  border-color: rgba(220, 38, 38, 0.3) !important;
}
[data-bs-theme=dark] .border-light-soft {
  border-color: rgba(15, 23, 42, 0.3) !important;
}
[data-bs-theme=dark] .border-dark-soft {
  border-color: rgba(2, 6, 23, 0.4) !important;
}

/* === Button Border Variables === */
:root {
  --bs-btn-border-color: #e2e8f0;
  --bs-btn-active-border-color: #475569;
  --bs-btn-disabled-border-color: rgba(226, 232, 240, 0.65);
  --bs-btn-primary-border-color: #0f766e;
  --bs-btn-primary-active-border-color: #115e59;
  --bs-btn-primary-disabled-border-color: rgba(15, 118, 110, 0.65);
  --bs-btn-secondary-border-color: #1e293b;
  --bs-btn-secondary-active-border-color: rgb(12.808988764, 17.5056179775, 25.191011236);
  --bs-btn-secondary-disabled-border-color: rgba(30, 41, 59, 0.65);
  --bs-btn-success-border-color: #16a34a;
  --bs-btn-success-active-border-color: rgb(15.9351351351, 118.0648648649, 53.6);
  --bs-btn-success-disabled-border-color: rgba(22, 163, 74, 0.65);
  --bs-btn-info-border-color: #0284c7;
  --bs-btn-info-active-border-color: rgb(1.4925373134, 98.5074626866, 148.5074626866);
  --bs-btn-info-disabled-border-color: rgba(2, 132, 199, 0.65);
  --bs-btn-warning-border-color: #ca8a04;
  --bs-btn-warning-active-border-color: rgb(151.9902912621, 103.8349514563, 3.0097087379);
  --bs-btn-warning-disabled-border-color: rgba(202, 138, 4, 0.65);
  --bs-btn-danger-border-color: #dc2626;
  --bs-btn-danger-active-border-color: rgb(178.25, 28.75, 28.75);
  --bs-btn-danger-disabled-border-color: rgba(220, 38, 38, 0.65);
  --bs-btn-light-border-color: #f8fafc;
  --bs-btn-light-active-border-color: rgb(223.15, 232.25, 241.35);
  --bs-btn-light-disabled-border-color: rgba(248, 250, 252, 0.65);
  --bs-btn-dark-border-color: #0f172a;
  --bs-btn-dark-active-border-color: rgb(1.5789473684, 2.4210526316, 4.4210526316);
  --bs-btn-dark-disabled-border-color: rgba(15, 23, 42, 0.65);
}

/* === Dark Mode Button Border Variables === */
[data-bs-theme=dark] {
  --bs-btn-border-color: rgba(248, 250, 252, 0.2);
  --bs-btn-active-border-color: rgba(248, 250, 252, 0.2);
  --bs-btn-disabled-border-color: rgba(248, 250, 252, 0.65);
  --bs-btn-primary-border-color: #0d9488;
  --bs-btn-primary-active-border-color: rgb(17.5, 161, 145.25);
  --bs-btn-primary-disabled-border-color: rgba(13, 148, 136, 0.65);
  --bs-btn-light-border-color: #0f172a;
  --bs-btn-light-active-border-color: rgb(21.404494382, 29.2528089888, 42.095505618);
  --bs-btn-light-disabled-border-color: rgba(15, 23, 42, 0.65);
  --bs-btn-dark-border-color: #020617;
  --bs-btn-dark-active-border-color: hsl(228.5714285714, 84%, -5.0980392157%);
  --bs-btn-dark-disabled-border-color: rgba(2, 6, 23, 0.65);
}

/* === Badge Size Variations === */
.badge-sm {
  padding: 0.2em 0.4em;
  font-size: 75%;
}

.badge-lg {
  padding: 0.35em 0.6em;
  font-size: 110%;
}

/* === Gradient Backgrounds === */
.bg-transparent {
  background-color: transparent !important;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #0f766e 0%, rgb(6.3721804511, 50.1278195489, 46.7293233083) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, #1e293b 0%, rgb(4.2134831461, 5.7584269663, 8.2865168539) 100%);
}

.bg-gradient-success {
  background: linear-gradient(135deg, #16a34a 0%, rgb(12.9027027027, 95.5972972973, 43.4) 100%);
}

.bg-gradient-info {
  background: linear-gradient(135deg, #0284c7 0%, rgb(1.4925373134, 98.5074626866, 148.5074626866) 100%);
}

.bg-gradient-warning {
  background: linear-gradient(135deg, #ca8a04 0%, rgb(126.9854368932, 86.7524271845, 2.5145631068) 100%);
}

.bg-gradient-danger {
  background: linear-gradient(135deg, #dc2626 0%, rgb(156.2916666667, 25.2083333333, 25.2083333333) 100%);
}

.bg-gradient-light {
  background: linear-gradient(135deg, #f8fafc 0%, rgb(219.44, 229.6, 239.76) 100%);
}

.bg-gradient-dark {
  background: linear-gradient(135deg, #0f172a 0%, hsl(222.2222222222, 47.3684210526%, -3.8235294118%) 100%);
}

/* === Diagonal Gradients === */
.bg-gradient-primary-diagonal {
  background: linear-gradient(45deg, #0f766e 0%, rgb(6.3721804511, 42.587406015, 50.1278195489) 100%);
}

.bg-gradient-dark-diagonal {
  background: linear-gradient(45deg, #0f172a 0%, hsl(217.2222222222, 47.3684210526%, -3.8235294118%) 100%);
}

.bg-gradient-primary-to-secondary {
  background: linear-gradient(135deg, #0f766e 0%, #1e293b 100%);
}

.bg-gradient-primary-to-info {
  background: linear-gradient(135deg, #0f766e 0%, #0284c7 100%);
}

/* === Dark Mode Gradients === */
[data-bs-theme=dark] .bg-gradient-primary {
  background: linear-gradient(135deg, #0d9488 0%, rgb(6.8229813665, 77.6770186335, 71.3788819876) 100%);
}
[data-bs-theme=dark] .bg-gradient-light {
  background: linear-gradient(135deg, #0f172a 0%, rgb(4.2631578947, 6.5368421053, 11.9368421053) 100%);
}
[data-bs-theme=dark] .bg-gradient-dark {
  background: linear-gradient(135deg, #020617 0%, hsl(228.5714285714, 84%, -10.0980392157%) 100%);
}
[data-bs-theme=dark] .bg-gradient-primary-diagonal {
  background: linear-gradient(45deg, #0d9488 0%, rgb(6.8229813665, 66.2616459627, 77.6770186335) 100%);
}
[data-bs-theme=dark] .bg-gradient-dark-diagonal {
  background: linear-gradient(45deg, #020617 0%, hsl(223.5714285714, 84%, -10.0980392157%) 100%);
}

/* === Pagination Theming === */
.pagination {
  --bs-pagination-color: #0f766e;
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: #e2e8f0;
  --bs-pagination-hover-color: #0f766e;
  --bs-pagination-hover-bg: rgba(15, 118, 110, 0.08);
  --bs-pagination-hover-border-color: #0f766e;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #0f766e;
  --bs-pagination-active-border-color: #0f766e;
  --bs-pagination-disabled-color: #334155;
  --bs-pagination-disabled-bg: #f8fafc;
  --bs-pagination-disabled-border-color: #e2e8f0;
}
.pagination .page-link {
  color: var(--bs-pagination-color);
  background-color: var(--bs-pagination-bg);
  border: 1px solid var(--bs-pagination-border-color);
  transition: all 0.15s;
  font-weight: 500;
  padding: 0.5rem 1rem;
}
.pagination .page-link:hover {
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.pagination .page-item.active .page-link {
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
}
.pagination .page-item.disabled .page-link {
  color: var(--bs-pagination-disabled-color);
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
  opacity: 0.7;
}

/* === Pagination Dark Mode === */
[data-bs-theme=dark] .pagination {
  --bs-pagination-color: #0d9488;
  --bs-pagination-bg: #0f172a;
  --bs-pagination-border-color: rgba(248, 250, 252, 0.2);
  --bs-pagination-hover-color: #0d9488;
  --bs-pagination-hover-bg: rgba(13, 148, 136, 0.1);
  --bs-pagination-hover-border-color: #0d9488;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #0d9488;
  --bs-pagination-active-border-color: #0d9488;
  --bs-pagination-disabled-color: #cbd5e1;
  --bs-pagination-disabled-bg: #0f172a;
  --bs-pagination-disabled-border-color: rgba(248, 250, 252, 0.2);
}

/* === Rounded Pagination === */
.pagination-rounded .page-link {
  border-radius: 2rem !important;
}

/* === Themed Vertical Nav === */
.nav.flex-column {
  background: none;
  border-radius: 0.75rem;
  padding: 0.5rem 0;
}
.nav.flex-column .nav-link {
  color: #334155;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.nav.flex-column .nav-link:hover, .nav.flex-column .nav-link:focus {
  background: rgba(15, 118, 110, 0.07);
  color: #0f766e;
}
.nav.flex-column .nav-link.active, .nav.flex-column .nav-link[aria-current=page] {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
  font-weight: 600;
}
.nav.flex-column .nav-link i, .nav.flex-column .nav-link .bi {
  color: inherit;
  transition: color 0.15s;
}
.nav.flex-column .nav-link .badge {
  margin-left: auto;
  font-size: 0.85em;
}

/* === Dark Mode for Vertical Nav === */
[data-bs-theme=dark] .nav.flex-column .nav-link {
  color: #cbd5e1;
}
[data-bs-theme=dark] .nav.flex-column .nav-link:hover, [data-bs-theme=dark] .nav.flex-column .nav-link:focus {
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}
[data-bs-theme=dark] .nav.flex-column .nav-link.active, [data-bs-theme=dark] .nav.flex-column .nav-link[aria-current=page] {
  background: rgba(13, 148, 136, 0.18);
  color: #0d9488;
}

.bg-neutral {
  background-color: #f1f5f9 !important;
}

.bg-neutral-soft {
  background-color: rgba(241, 245, 249, 0.1) !important;
}

.bg-muted {
  background-color: #e2e8f0 !important;
}

.bg-muted-soft {
  background-color: rgba(226, 232, 240, 0.1) !important;
}

.bg-subtle {
  background-color: #f8fafc !important;
}

.bg-subtle-soft {
  background-color: rgba(248, 250, 252, 0.1) !important;
}

[data-bs-theme=dark] .bg-neutral {
  background-color: #1e293b !important;
}
[data-bs-theme=dark] .bg-neutral-soft {
  background-color: rgba(30, 41, 59, 0.14) !important;
}
[data-bs-theme=dark] .bg-muted {
  background-color: #334155 !important;
}
[data-bs-theme=dark] .bg-muted-soft {
  background-color: rgba(51, 65, 85, 0.14) !important;
}
[data-bs-theme=dark] .bg-subtle {
  background-color: #0f172a !important;
}
[data-bs-theme=dark] .bg-subtle-soft {
  background-color: rgba(15, 23, 42, 0.14) !important;
}

/* === Base Button Styles === */
.btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-font-family: Inter, Helvetica, Arial, sans-serif;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: #0f172a;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: 0.25rem;
  --bs-btn-box-shadow: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px -1px rgba(2, 6, 23, 0.1);
  --bs-btn-hover-box-shadow: 0 10px 15px -3px rgba(2, 6, 23, 0.1), 0 4px 6px -4px rgba(2, 6, 23, 0.1);
  --bs-btn-active-box-shadow: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px -1px rgba(2, 6, 23, 0.1);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--bs-btn-focus-shadow-rgb), 0.1);
  --bs-btn-letter-spacing: 0;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  letter-spacing: var(--bs-btn-letter-spacing) !important;
  transition: color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out, box-shadow 200ms ease-in-out;
}
.btn:hover:not(:disabled):not(.btn-link) {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: var(--bs-btn-hover-box-shadow);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:active {
  color: var(--bs-btn-active-color) !important;
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  box-shadow: var(--bs-btn-active-box-shadow) !important;
  z-index: 2;
}
.btn.active, .btn.show, .btn-check:checked + .btn {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  box-shadow: var(--bs-btn-active-box-shadow);
}
.btn.active:focus-visible, .btn.show:focus-visible, .btn-check:checked + .btn:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
  pointer-events: none;
  box-shadow: none;
}
.btn > i,
.btn > .bi,
.btn > svg {
  margin-right: 0.375rem;
  vertical-align: -0.125em;
}
.btn > .icon-right,
.btn > .icon-end {
  margin-right: 0;
  margin-left: 0.375rem;
}

/* === Button Size Variants === */
.btn-lg {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-letter-spacing: -0.025em;
}
.btn-lg > i, .btn-lg > .bi, .btn-lg > svg {
  margin-right: 0.5rem;
}
.btn-lg > .icon-right, .btn-lg > .icon-end {
  margin-right: 0;
  margin-left: 0.5rem;
}

.btn-sm {
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --bs-btn-border-radius: 0.125rem;
}
.btn-sm > i, .btn-sm > .bi, .btn-sm > svg {
  margin-right: 0.25rem;
}
.btn-sm > .icon-right, .btn-sm > .icon-end {
  margin-right: 0;
  margin-left: 0.25rem;
}

/* === Standard Button Variants === */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #0f766e;
  --bs-btn-border-color: #0f766e;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #0d9488;
  --bs-btn-hover-border-color: #0d9488;
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #115e59;
  --bs-btn-active-border-color: #115e59;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: rgba(15, 118, 110, 0.6);
  --bs-btn-disabled-border-color: rgba(15, 118, 110, 0.6);
}

.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #1e293b;
  --bs-btn-border-color: #1e293b;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgb(21.404494382, 29.2528089888, 42.095505618);
  --bs-btn-hover-border-color: rgb(21.404494382, 29.2528089888, 42.095505618);
  --bs-btn-focus-shadow-rgb: 30, 41, 59;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgb(12.808988764, 17.5056179775, 25.191011236);
  --bs-btn-active-border-color: rgb(12.808988764, 17.5056179775, 25.191011236);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: rgba(30, 41, 59, 0.6);
  --bs-btn-disabled-border-color: rgba(30, 41, 59, 0.6);
}

.btn-success {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #16a34a;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgb(18.9675675676, 140.5324324324, 63.8);
  --bs-btn-hover-border-color: rgb(18.9675675676, 140.5324324324, 63.8);
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgb(15.9351351351, 118.0648648649, 53.6);
  --bs-btn-active-border-color: rgb(15.9351351351, 118.0648648649, 53.6);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: rgba(22, 163, 74, 0.6);
  --bs-btn-disabled-border-color: rgba(22, 163, 74, 0.6);
}

.btn-info {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #0284c7;
  --bs-btn-border-color: #0284c7;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgb(1.7462686567, 115.2537313433, 173.7537313433);
  --bs-btn-hover-border-color: rgb(1.7462686567, 115.2537313433, 173.7537313433);
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgb(1.4925373134, 98.5074626866, 148.5074626866);
  --bs-btn-active-border-color: rgb(1.4925373134, 98.5074626866, 148.5074626866);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: rgba(2, 132, 199, 0.6);
  --bs-btn-disabled-border-color: rgba(2, 132, 199, 0.6);
}

.btn-warning {
  --bs-btn-color: #0f172a;
  --bs-btn-bg: #ca8a04;
  --bs-btn-border-color: #ca8a04;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: rgb(176.9951456311, 120.9174757282, 3.5048543689);
  --bs-btn-hover-border-color: rgb(176.9951456311, 120.9174757282, 3.5048543689);
  --bs-btn-focus-shadow-rgb: 202, 138, 4;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: rgb(151.9902912621, 103.8349514563, 3.0097087379);
  --bs-btn-active-border-color: rgb(151.9902912621, 103.8349514563, 3.0097087379);
  --bs-btn-disabled-color: #0f172a;
  --bs-btn-disabled-bg: rgba(202, 138, 4, 0.6);
  --bs-btn-disabled-border-color: rgba(202, 138, 4, 0.6);
}

.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgb(200.2083333333, 32.2916666667, 32.2916666667);
  --bs-btn-hover-border-color: rgb(200.2083333333, 32.2916666667, 32.2916666667);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgb(178.25, 28.75, 28.75);
  --bs-btn-active-border-color: rgb(178.25, 28.75, 28.75);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: rgba(220, 38, 38, 0.6);
  --bs-btn-disabled-border-color: rgba(220, 38, 38, 0.6);
}

.btn-light {
  --bs-btn-color: #0f172a;
  --bs-btn-bg: #f8fafc;
  --bs-btn-border-color: #f8fafc;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #f1f5f9;
  --bs-btn-hover-border-color: #f1f5f9;
  --bs-btn-focus-shadow-rgb: 248, 250, 252;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: rgb(223.15, 232.25, 241.35);
  --bs-btn-active-border-color: rgb(223.15, 232.25, 241.35);
  --bs-btn-disabled-color: #0f172a;
  --bs-btn-disabled-bg: rgba(248, 250, 252, 0.6);
  --bs-btn-disabled-border-color: rgba(248, 250, 252, 0.6);
}

.btn-dark {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #0f172a;
  --bs-btn-border-color: #0f172a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgb(8.2894736842, 12.7105263158, 23.2105263158);
  --bs-btn-hover-border-color: rgb(8.2894736842, 12.7105263158, 23.2105263158);
  --bs-btn-focus-shadow-rgb: 15, 23, 42;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgb(1.5789473684, 2.4210526316, 4.4210526316);
  --bs-btn-active-border-color: rgb(1.5789473684, 2.4210526316, 4.4210526316);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: rgba(15, 23, 42, 0.6);
  --bs-btn-disabled-border-color: rgba(15, 23, 42, 0.6);
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: #0f766e;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #0d9488;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #115e59;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: rgba(15, 118, 110, 0.6);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: none;
  --bs-btn-hover-box-shadow: none;
  --bs-btn-active-box-shadow: none;
  text-decoration: none;
}
.btn-link:hover {
  text-decoration: underline;
}

/* === Outline Button Variants === */
.btn-outline-primary {
  --bs-btn-color: #0f766e;
  --bs-btn-border-color: #0f766e;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #0f766e;
  --bs-btn-hover-border-color: #0f766e;
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #0f766e;
  --bs-btn-active-border-color: #0f766e;
  --bs-btn-disabled-color: #0f766e;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0f766e;
}

.btn-outline-secondary {
  --bs-btn-color: #1e293b;
  --bs-btn-border-color: #1e293b;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #1e293b;
  --bs-btn-hover-border-color: #1e293b;
  --bs-btn-focus-shadow-rgb: 30, 41, 59;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #1e293b;
  --bs-btn-active-border-color: #1e293b;
  --bs-btn-disabled-color: #1e293b;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #1e293b;
}

.btn-outline-success {
  --bs-btn-color: #16a34a;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #16a34a;
  --bs-btn-hover-border-color: #16a34a;
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #16a34a;
  --bs-btn-active-border-color: #16a34a;
  --bs-btn-disabled-color: #16a34a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #16a34a;
}

.btn-outline-info {
  --bs-btn-color: #0284c7;
  --bs-btn-border-color: #0284c7;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #0284c7;
  --bs-btn-hover-border-color: #0284c7;
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #0284c7;
  --bs-btn-active-border-color: #0284c7;
  --bs-btn-disabled-color: #0284c7;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0284c7;
}

.btn-outline-warning {
  --bs-btn-color: #ca8a04;
  --bs-btn-border-color: #ca8a04;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #ca8a04;
  --bs-btn-hover-border-color: #ca8a04;
  --bs-btn-focus-shadow-rgb: 202, 138, 4;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #ca8a04;
  --bs-btn-active-border-color: #ca8a04;
  --bs-btn-disabled-color: #ca8a04;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ca8a04;
}

.btn-outline-danger {
  --bs-btn-color: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color: #dc2626;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #dc2626;
  --bs-btn-active-border-color: #dc2626;
  --bs-btn-disabled-color: #dc2626;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc2626;
}

.btn-outline-light {
  --bs-btn-color: #0f172a;
  --bs-btn-border-color: #f8fafc;
  --bs-btn-bg: #ffffff;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #f8fafc;
  --bs-btn-hover-border-color: #f8fafc;
  --bs-btn-focus-shadow-rgb: 248, 250, 252;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #f8fafc;
  --bs-btn-active-border-color: #f8fafc;
  --bs-btn-disabled-color: #0f172a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8fafc;
}

.btn-outline-dark {
  --bs-btn-color: #0f172a;
  --bs-btn-border-color: #0f172a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #0f172a;
  --bs-btn-hover-border-color: #0f172a;
  --bs-btn-focus-shadow-rgb: 15, 23, 42;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #0f172a;
  --bs-btn-active-border-color: #0f172a;
  --bs-btn-disabled-color: #0f172a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0f172a;
}

/* === Button Styles for Icon-Only Buttons === */
.btn-icon {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.5rem;
  aspect-ratio: 1/1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-icon.btn-sm {
  --bs-btn-padding-x: 0.375rem;
  --bs-btn-padding-y: 0.375rem;
}
.btn-icon.btn-lg {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.75rem;
}
.btn-icon > i, .btn-icon > .bi, .btn-icon > svg {
  margin-right: 0;
  margin-left: 0;
}

/* === Pill Button Styles === */
.btn-pill {
  --bs-btn-border-radius: 50rem;
}

/* === Button Group Styles === */
.btn-group {
  /* Fix để button không bị overlap border khi hover/focus */
  /* Fix border radius cho button group */
}
.btn-group .btn {
  position: relative;
}
.btn-group .btn:active {
  z-index: 3;
  box-shadow: var(--bs-btn-active-box-shadow) !important;
}
.btn-group .btn:hover, .btn-group .btn:focus {
  z-index: 1;
}
.btn-group .btn.active {
  z-index: 2;
}
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:focus {
  z-index: 3;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > .btn:not(:first-child) {
  margin-left: -1px;
}

/* === Special styles for Radio Button Group === */
.btn-group-toggle .btn-check:checked + .btn-outline-primary {
  /* Override active state với theme variables */
  --bs-btn-active-bg: #0f766e;
  --bs-btn-active-border-color: #0f766e;
  --bs-btn-active-color: #ffffff;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px -1px rgba(2, 6, 23, 0.1);
  z-index: 2;
}
.btn-group-toggle .btn-check + .btn-outline-primary:hover {
  /* Override hover state cho button chưa được check */
  --bs-btn-hover-bg: rgba(15, 118, 110, 0.08);
  --bs-btn-hover-color: #0f766e;
  --bs-btn-hover-border-color: #0f766e;
}
.btn-group-toggle .btn-check:checked + .btn-outline-secondary {
  --bs-btn-active-bg: #1e293b;
  --bs-btn-active-border-color: #1e293b;
  --bs-btn-active-color: #ffffff;
}
.btn-group-toggle .btn-check + .btn-outline-secondary:hover {
  --bs-btn-hover-bg: rgba(30, 41, 59, 0.08);
  --bs-btn-hover-color: #1e293b;
  --bs-btn-hover-border-color: #1e293b;
}
.btn-group-toggle .btn-check:checked + .btn-outline-success {
  --bs-btn-active-bg: #16a34a;
  --bs-btn-active-border-color: #16a34a;
  --bs-btn-active-color: #ffffff;
}
.btn-group-toggle .btn-check + .btn-outline-success:hover {
  --bs-btn-hover-bg: rgba(22, 163, 74, 0.08);
  --bs-btn-hover-color: #16a34a;
  --bs-btn-hover-border-color: #16a34a;
}
.btn-group-toggle .btn-check:checked + .btn-outline-info {
  --bs-btn-active-bg: #0284c7;
  --bs-btn-active-border-color: #0284c7;
  --bs-btn-active-color: #ffffff;
}
.btn-group-toggle .btn-check + .btn-outline-info:hover {
  --bs-btn-hover-bg: rgba(2, 132, 199, 0.08);
  --bs-btn-hover-color: #0284c7;
  --bs-btn-hover-border-color: #0284c7;
}
.btn-group-toggle .btn-check:checked + .btn-outline-warning {
  --bs-btn-active-bg: #ca8a04;
  --bs-btn-active-border-color: #ca8a04;
  --bs-btn-active-color: #0f172a;
}
.btn-group-toggle .btn-check + .btn-outline-warning:hover {
  --bs-btn-hover-bg: rgba(202, 138, 4, 0.08);
  --bs-btn-hover-color: #ca8a04;
  --bs-btn-hover-border-color: #ca8a04;
}
.btn-group-toggle .btn-check:checked + .btn-outline-danger {
  --bs-btn-active-bg: #dc2626;
  --bs-btn-active-border-color: #dc2626;
  --bs-btn-active-color: #ffffff;
}
.btn-group-toggle .btn-check + .btn-outline-danger:hover {
  --bs-btn-hover-bg: rgba(220, 38, 38, 0.08);
  --bs-btn-hover-color: #dc2626;
  --bs-btn-hover-border-color: #dc2626;
}
.btn-group-toggle .btn-check:checked + .btn-outline-light {
  --bs-btn-active-bg: #f8fafc;
  --bs-btn-active-border-color: #f8fafc;
  --bs-btn-active-color: #0f172a;
}
.btn-group-toggle .btn-check + .btn-outline-light:hover {
  --bs-btn-hover-bg: rgba(248, 250, 252, 0.08);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-border-color: #f8fafc;
}
.btn-group-toggle .btn-check:checked + .btn-outline-dark {
  --bs-btn-active-bg: #0f172a;
  --bs-btn-active-border-color: #0f172a;
  --bs-btn-active-color: #ffffff;
}
.btn-group-toggle .btn-check + .btn-outline-dark:hover {
  --bs-btn-hover-bg: rgba(15, 23, 42, 0.08);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-border-color: #0f172a;
}

/* === Soft Buttons Using CSS Variables === */
.btn-primary-soft {
  --bs-btn-color: #0f766e;
  --bs-btn-bg: rgba(15, 118, 110, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #0f766e;
  --bs-btn-hover-bg: rgba(15, 118, 110, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
  --bs-btn-active-color: #0f766e;
  --bs-btn-active-bg: rgba(15, 118, 110, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(111, 172.8, 168);
  --bs-btn-disabled-bg: rgba(15, 118, 110, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-secondary-soft {
  --bs-btn-color: #1e293b;
  --bs-btn-bg: rgba(30, 41, 59, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #1e293b;
  --bs-btn-hover-bg: rgba(30, 41, 59, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 30, 41, 59;
  --bs-btn-active-color: #1e293b;
  --bs-btn-active-bg: rgba(30, 41, 59, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(120, 126.6, 137.4);
  --bs-btn-disabled-bg: rgba(30, 41, 59, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-success-soft {
  --bs-btn-color: #16a34a;
  --bs-btn-bg: rgba(22, 163, 74, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #16a34a;
  --bs-btn-hover-bg: rgba(22, 163, 74, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: #16a34a;
  --bs-btn-active-bg: rgba(22, 163, 74, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(115.2, 199.8, 146.4);
  --bs-btn-disabled-bg: rgba(22, 163, 74, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-info-soft {
  --bs-btn-color: #0284c7;
  --bs-btn-bg: rgba(2, 132, 199, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #0284c7;
  --bs-btn-hover-bg: rgba(2, 132, 199, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
  --bs-btn-active-color: #0284c7;
  --bs-btn-active-bg: rgba(2, 132, 199, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(103.2, 181.2, 221.4);
  --bs-btn-disabled-bg: rgba(2, 132, 199, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-warning-soft {
  --bs-btn-color: #ca8a04;
  --bs-btn-bg: rgba(202, 138, 4, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ca8a04;
  --bs-btn-hover-bg: rgba(202, 138, 4, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 202, 138, 4;
  --bs-btn-active-color: #ca8a04;
  --bs-btn-active-bg: rgba(202, 138, 4, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(223.2, 184.8, 104.4);
  --bs-btn-disabled-bg: rgba(202, 138, 4, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-danger-soft {
  --bs-btn-color: #dc2626;
  --bs-btn-bg: rgba(220, 38, 38, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #dc2626;
  --bs-btn-hover-bg: rgba(220, 38, 38, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-color: #dc2626;
  --bs-btn-active-bg: rgba(220, 38, 38, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(234, 124.8, 124.8);
  --bs-btn-disabled-bg: rgba(220, 38, 38, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-light-soft {
  --bs-btn-color: #f8fafc;
  --bs-btn-bg: rgba(248, 250, 252, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-hover-bg: rgba(248, 250, 252, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 248, 250, 252;
  --bs-btn-active-color: #f8fafc;
  --bs-btn-active-bg: rgba(248, 250, 252, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(154.8, 159.2, 168);
  --bs-btn-disabled-bg: rgba(248, 250, 252, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-dark-soft {
  --bs-btn-color: #0f172a;
  --bs-btn-bg: rgba(15, 23, 42, 0.15);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: rgba(15, 23, 42, 0.25);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 15, 23, 42;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: rgba(15, 23, 42, 0.3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(111, 115.8, 127.2);
  --bs-btn-disabled-bg: rgba(15, 23, 42, 0.1);
  --bs-btn-disabled-border-color: transparent;
}

/* === Rounded Circle Button Fix === */
.btn.rounded-circle {
  --bs-btn-border-radius: 50%;
  aspect-ratio: 1/1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.rounded-circle.btn-sm {
  width: 2rem;
  height: 2rem;
}
.btn.rounded-circle.btn-lg {
  width: 3.5rem;
  height: 3.5rem;
}
.btn.rounded-circle:not(.btn-sm):not(.btn-lg) {
  width: 2.75rem;
  height: 2.75rem;
}
.btn.rounded-circle > i, .btn.rounded-circle > .bi, .btn.rounded-circle > svg {
  margin-right: 0;
  margin-left: 0;
}

/* === Dark Mode Button CSS Variables === */
[data-bs-theme=dark] {
  /* Standard buttons in dark mode */
  /* Outline buttons in dark mode */
  /* Radio button group in dark mode */
  /* Soft buttons in dark mode */
}
[data-bs-theme=dark] .btn-primary {
  --bs-btn-bg: #0d9488;
  --bs-btn-border-color: #0d9488;
  --bs-btn-hover-bg: #14b8a6;
  --bs-btn-hover-border-color: #14b8a6;
  --bs-btn-active-bg: rgb(17.5, 161, 145.25);
  --bs-btn-active-border-color: rgb(17.5, 161, 145.25);
  --bs-btn-disabled-bg: rgba(13, 148, 136, 0.6);
  --bs-btn-disabled-border-color: rgba(13, 148, 136, 0.6);
}
[data-bs-theme=dark] .btn-light {
  --bs-btn-bg: #0f172a;
  --bs-btn-border-color: #0f172a;
  --bs-btn-color: #f8fafc;
  --bs-btn-hover-bg: #1e293b;
  --bs-btn-hover-border-color: #1e293b;
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-active-bg: rgb(21.404494382, 29.2528089888, 42.095505618);
  --bs-btn-active-border-color: rgb(21.404494382, 29.2528089888, 42.095505618);
  --bs-btn-active-color: #f8fafc;
}
[data-bs-theme=dark] .btn-dark {
  --bs-btn-bg: #020617;
  --bs-btn-border-color: #020617;
  --bs-btn-color: #f8fafc;
  --bs-btn-hover-bg: hsl(228.5714285714, 84%, -0.0980392157%);
  --bs-btn-hover-border-color: hsl(228.5714285714, 84%, -0.0980392157%);
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-active-bg: hsl(228.5714285714, 84%, -5.0980392157%);
  --bs-btn-active-border-color: hsl(228.5714285714, 84%, -5.0980392157%);
  --bs-btn-active-color: #f8fafc;
}
[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: #0d9488;
  --bs-btn-border-color: #0d9488;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #0d9488;
  --bs-btn-hover-border-color: #0d9488;
  --bs-btn-focus-shadow-rgb: 13, 148, 136;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #0d9488;
  --bs-btn-active-border-color: #0d9488;
  --bs-btn-disabled-color: #0d9488;
  --bs-btn-disabled-border-color: #0d9488;
}
[data-bs-theme=dark] .btn-outline-light {
  --bs-btn-color: #f8fafc;
  --bs-btn-border-color: #0f172a;
  --bs-btn-bg: #0f172a;
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-hover-bg: #0f172a;
  --bs-btn-hover-border-color: #0f172a;
  --bs-btn-active-color: #f8fafc;
  --bs-btn-active-bg: #0f172a;
  --bs-btn-active-border-color: #0f172a;
}
[data-bs-theme=dark] .btn-outline-dark {
  --bs-btn-color: #f8fafc;
  --bs-btn-border-color: #020617;
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-hover-bg: #020617;
  --bs-btn-hover-border-color: #020617;
  --bs-btn-active-color: #f8fafc;
  --bs-btn-active-bg: #020617;
  --bs-btn-active-border-color: #020617;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-primary {
  --bs-btn-active-bg: #0d9488;
  --bs-btn-active-border-color: #0d9488;
  --bs-btn-active-color: #0f172a;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px -1px rgba(2, 6, 23, 0.1);
  z-index: 2;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check + .btn-outline-primary:hover {
  --bs-btn-hover-bg: rgba(13, 148, 136, 0.15);
  --bs-btn-hover-color: #0d9488;
  --bs-btn-hover-border-color: #0d9488;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-secondary {
  --bs-btn-active-bg: #1e293b;
  --bs-btn-active-border-color: #1e293b;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-success {
  --bs-btn-active-bg: #16a34a;
  --bs-btn-active-border-color: #16a34a;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-info {
  --bs-btn-active-bg: #0284c7;
  --bs-btn-active-border-color: #0284c7;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-warning {
  --bs-btn-active-bg: #ca8a04;
  --bs-btn-active-border-color: #ca8a04;
  --bs-btn-active-color: #0f172a;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-danger {
  --bs-btn-active-bg: #dc2626;
  --bs-btn-active-border-color: #dc2626;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-light {
  --bs-btn-active-bg: #0f172a;
  --bs-btn-active-border-color: #0f172a;
  --bs-btn-active-color: #f8fafc;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check:checked + .btn-outline-dark {
  --bs-btn-active-bg: #020617;
  --bs-btn-active-border-color: #020617;
  --bs-btn-active-color: #f8fafc;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check + .btn-outline-light:hover {
  --bs-btn-hover-bg: rgba(15, 23, 42, 0.15);
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-hover-border-color: #0f172a;
}
[data-bs-theme=dark] .btn-group-toggle .btn-check + .btn-outline-dark:hover {
  --bs-btn-hover-bg: rgba(2, 6, 23, 0.15);
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-hover-border-color: #020617;
}
[data-bs-theme=dark] .btn-primary-soft {
  --bs-btn-color: rgb(27.9440993789, 235.0559006211, 216.6459627329);
  --bs-btn-bg: rgba(13, 148, 136, 0.2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgb(27.9440993789, 235.0559006211, 216.6459627329);
  --bs-btn-hover-bg: rgba(13, 148, 136, 0.3);
  --bs-btn-active-color: rgb(27.9440993789, 235.0559006211, 216.6459627329);
  --bs-btn-active-bg: rgba(13, 148, 136, 0.35);
  --bs-btn-focus-shadow-rgb: 13, 148, 136;
}
[data-bs-theme=dark] .btn-secondary-soft {
  --bs-btn-color: rgb(64.3820224719, 87.9887640449, 126.6179775281);
  --bs-btn-bg: rgba(30, 41, 59, 0.2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgb(64.3820224719, 87.9887640449, 126.6179775281);
  --bs-btn-hover-bg: rgba(30, 41, 59, 0.3);
  --bs-btn-active-color: rgb(64.3820224719, 87.9887640449, 126.6179775281);
  --bs-btn-active-bg: rgba(30, 41, 59, 0.35);
  --bs-btn-focus-shadow-rgb: 30, 41, 59;
}
[data-bs-theme=dark] .btn-success-soft {
  --bs-btn-color: rgb(58.5189189189, 228.4810810811, 121.2);
  --bs-btn-bg: rgba(22, 163, 74, 0.2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgb(58.5189189189, 228.4810810811, 121.2);
  --bs-btn-hover-bg: rgba(22, 163, 74, 0.3);
  --bs-btn-active-color: rgb(58.5189189189, 228.4810810811, 121.2);
  --bs-btn-active-bg: rgba(22, 163, 74, 0.35);
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
}
[data-bs-theme=dark] .btn-info-soft {
  --bs-btn-color: rgb(50.0597014925, 183.9402985075, 252.9402985075);
  --bs-btn-bg: rgba(2, 132, 199, 0.2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgb(50.0597014925, 183.9402985075, 252.9402985075);
  --bs-btn-hover-bg: rgba(2, 132, 199, 0.3);
  --bs-btn-active-color: rgb(50.0597014925, 183.9402985075, 252.9402985075);
  --bs-btn-active-bg: rgba(2, 132, 199, 0.35);
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
}
[data-bs-theme=dark] .btn-warning-soft {
  --bs-btn-color: rgb(251.0776699029, 188.3203883495, 56.9223300971);
  --bs-btn-bg: rgba(202, 138, 4, 0.2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgb(251.0776699029, 188.3203883495, 56.9223300971);
  --bs-btn-hover-bg: rgba(202, 138, 4, 0.3);
  --bs-btn-active-color: rgb(251.0776699029, 188.3203883495, 56.9223300971);
  --bs-btn-active-bg: rgba(202, 138, 4, 0.35);
  --bs-btn-focus-shadow-rgb: 202, 138, 4;
}
[data-bs-theme=dark] .btn-danger-soft {
  --bs-btn-color: rgb(234.1666666667, 125.8333333333, 125.8333333333);
  --bs-btn-bg: rgba(220, 38, 38, 0.2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgb(234.1666666667, 125.8333333333, 125.8333333333);
  --bs-btn-hover-bg: rgba(220, 38, 38, 0.3);
  --bs-btn-active-color: rgb(234.1666666667, 125.8333333333, 125.8333333333);
  --bs-btn-active-bg: rgba(220, 38, 38, 0.35);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
[data-bs-theme=dark] .btn-light-soft {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: rgba(15, 23, 42, 0.2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(15, 23, 42, 0.3);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(15, 23, 42, 0.35);
}
[data-bs-theme=dark] .btn-dark-soft {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: rgba(2, 6, 23, 0.35);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(2, 6, 23, 0.45);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(2, 6, 23, 0.55);
}

/* ===================================================
   FORM ELEMENT OVERRIDES
=================================================== */
/* === Form Label Styling === */
.form-label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #334155;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  letter-spacing: 0 !important;
}

/* === Basic Form Controls === */
.form-control {
  background-color: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.2);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: #0f172a;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.form-control:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
  outline: none;
}
.form-control:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid) {
  border-color: rgba(15, 23, 42, 0.3);
}
.form-control::placeholder {
  color: #94a3b8;
  opacity: 0.7;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #f1f5f9;
  opacity: 0.75;
  cursor: not-allowed;
}

.form-control-sm {
  padding: 0.375rem 0.625rem;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  border-radius: 0.125rem;
}

.form-control-lg {
  padding: 0.875rem 1.125rem;
  font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  border-radius: 0.5rem;
}

/* === Select Controls === */
.form-select {
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  background-position: right 0.875rem center;
  background-size: 16px 12px;
  border: 1px solid rgba(15, 23, 42, 0.2);
}
.form-select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
  outline: none;
}
.form-select:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid) {
  border-color: rgba(15, 23, 42, 0.3);
}
.form-select:disabled {
  background-color: #f1f5f9;
  opacity: 0.75;
  cursor: not-allowed;
}

.form-select-sm {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.625rem;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
}

.form-select-lg {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  padding-left: 1.125rem;
  font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
}

/* === Checkboxes and Radios === */
.form-check-input {
  width: 1.125em;
  height: 1.125em;
  margin-top: 0.2em;
  border: 1.5px solid rgba(15, 23, 42, 0.25);
  background-color: #ffffff;
}
.form-check-input:checked {
  background-color: #0f766e;
  border-color: #0f766e;
}
.form-check-input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}
.form-check-input:hover:not(:checked):not(:disabled) {
  border-color: rgba(15, 23, 42, 0.4);
}
.form-check-input:disabled {
  opacity: 0.6;
}
.form-check-input:disabled:checked {
  background-color: rgba(15, 23, 42, 0.3);
}

/* Radio specific styles */
input[type=radio].form-check-input {
  border-radius: 50%;
}
input[type=radio].form-check-input:checked {
  background-image: none;
  position: relative;
}
input[type=radio].form-check-input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #ffffff;
}

/* Checkbox specific styles */
input[type=checkbox].form-check-input:checked {
  background-size: 75%;
}

/* Switch styling */
.form-switch .form-check-input {
  height: 1.25em;
  width: 2em;
  background-color: rgba(15, 23, 42, 0.15);
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
  background-position: left center;
  background-size: contain;
  transition: background-position 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.form-switch .form-check-input:focus {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25);
}
.form-switch .form-check-input:checked {
  background-color: #0f766e;
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position: right center;
}
.form-switch .form-check-input:hover:not(:disabled):not(:checked) {
  background-color: rgba(15, 23, 42, 0.2);
}

/* === Input Groups === */
.input-group {
  background-color: transparent;
}
.input-group .input-group-text,
.input-group .btn,
.input-group .form-control,
.input-group .form-select {
  position: relative;
  border: 1px solid #cbd5e1;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
  position: relative;
  border-color: #0f766e;
}
.input-group .btn {
  z-index: 2;
  padding: 0.75rem 1rem;
}
.input-group .btn:hover, .input-group .btn:focus {
  z-index: 4;
  position: relative;
  border-color: #94a3b8;
}
.input-group .btn.btn-light {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a;
}
.input-group .btn.btn-light:hover, .input-group .btn.btn-light:focus {
  background-color: #f1f5f9;
  border-color: #94a3b8 !important;
  color: #0f172a;
  z-index: 5;
}
.input-group .btn.btn-light:active {
  background-color: rgb(223.15, 232.25, 241.35) !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  z-index: 5;
}
.input-group .btn.btn-primary {
  border: 1px solid #0f766e !important;
}
.input-group .btn.btn-primary:hover, .input-group .btn.btn-primary:focus {
  border-color: #0d9488 !important;
}
.input-group .btn:not(:first-child) {
  margin-left: -1px;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .input-group-text {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 0.75rem 1rem;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  letter-spacing: 0 !important;
}
.input-group .input-group-text:first-child {
  border-right: 0;
}
.input-group .input-group-text:last-child {
  border-left: 0;
}

/* === Form Floating Improvements === */
.form-floating > label {
  padding: 0.75rem 1rem;
  color: #94a3b8;
  font-weight: 400;
  transform-origin: 0 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.form-floating > .form-control {
  height: calc(3.75rem + 2px);
  line-height: 1.5;
  padding: 1rem 1rem 0.5rem;
}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 0.8;
  transform: scale(0.8) translateY(-0.625rem) translateX(0.15rem);
  color: #0f766e;
}
.form-floating > .form-control::placeholder {
  color: transparent;
}
.form-floating.form-control-sm > .form-control {
  height: calc(3.25rem + 2px);
  padding-top: 0.875rem;
}
.form-floating.form-control-lg > .form-control {
  height: calc(4.25rem + 2px);
  padding-top: 1.125rem;
}

/* === Form Validation Styling === */
.valid-feedback,
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  font-weight: 500;
}

.valid-feedback {
  color: #16a34a;
}

.invalid-feedback {
  color: #dc2626;
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: rgb(58.5189189189, 228.4810810811, 121.2);
  padding-right: calc(1.5em + 0.75rem);
  background-position: right 1rem center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: rgb(234.1666666667, 125.8333333333, 125.8333333333);
  padding-right: calc(1.5em + 0.75rem);
  background-position: right 1rem center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control.is-valid ~ .valid-feedback,
.was-validated .form-select:valid ~ .valid-feedback,
.was-validated .form-select.is-valid ~ .valid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control.is-invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-select.is-invalid ~ .invalid-feedback {
  display: block;
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: rgb(58.5189189189, 228.4810810811, 121.2);
}
.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: #16a34a;
}
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: #16a34a;
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
  border-color: rgb(234.1666666667, 125.8333333333, 125.8333333333);
}
.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #dc2626;
}

.was-validated .input-group .form-control:valid,
.input-group .form-control.is-valid,
.was-validated .input-group .form-control:invalid,
.input-group .form-control.is-invalid {
  z-index: 3;
}

/* === Dark Mode Form Overrides === */
[data-bs-theme=dark] {
  /* === Dark Mode Form Validation === */
}
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
  background-color: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.133);
}
[data-bs-theme=dark] .form-control:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid),
[data-bs-theme=dark] .form-select:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid) {
  border-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .form-control::placeholder,
[data-bs-theme=dark] .form-select::placeholder {
  color: rgba(100, 116, 139, 0.7);
}
[data-bs-theme=dark] .form-control:disabled, [data-bs-theme=dark] .form-control[readonly],
[data-bs-theme=dark] .form-select:disabled,
[data-bs-theme=dark] .form-select[readonly] {
  background-color: rgba(15, 23, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme=dark] .form-label {
  color: #94a3b8;
}
[data-bs-theme=dark] .form-check-input {
  background-color: rgba(15, 23, 42, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .form-check-input:checked {
  background-color: #0d9488;
  border-color: #0d9488;
}
[data-bs-theme=dark] .form-check-input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.133);
}
[data-bs-theme=dark] .form-check-input:hover:not(:checked):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark] .form-switch .form-check-input {
  background-color: rgba(255, 255, 255, 0.15);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255, 0.25)'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255, 0.25)'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .form-switch .form-check-input:checked {
  background-color: #0d9488;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .form-switch .form-check-input:hover:not(:disabled):not(:checked) {
  background-color: rgba(255, 255, 255, 0.25);
}
[data-bs-theme=dark] .input-group .input-group-text,
[data-bs-theme=dark] .input-group .btn,
[data-bs-theme=dark] .input-group .form-control,
[data-bs-theme=dark] .input-group .form-select {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .input-group .input-group-text {
  background-color: #0f172a;
  color: #94a3b8;
}
[data-bs-theme=dark] .input-group .btn:hover, [data-bs-theme=dark] .input-group .btn:focus {
  border-color: rgba(255, 255, 255, 0.25);
}
[data-bs-theme=dark] .input-group .btn.btn-light {
  background-color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc;
}
[data-bs-theme=dark] .input-group .btn.btn-light:hover, [data-bs-theme=dark] .input-group .btn.btn-light:focus {
  background-color: #1e293b;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
[data-bs-theme=dark] .input-group .btn.btn-light:active {
  background-color: rgb(21.404494382, 29.2528089888, 42.095505618) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
[data-bs-theme=dark] .input-group .btn.btn-primary {
  border: 1px solid #0d9488 !important;
}
[data-bs-theme=dark] .input-group .btn.btn-primary:hover, [data-bs-theme=dark] .input-group .btn.btn-primary:focus {
  border-color: #14b8a6 !important;
}
[data-bs-theme=dark] .form-floating > .form-control:focus ~ label,
[data-bs-theme=dark] .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: #0d9488;
}
[data-bs-theme=dark] .valid-feedback {
  color: rgb(58.5189189189, 228.4810810811, 121.2);
}
[data-bs-theme=dark] .invalid-feedback {
  color: rgb(234.1666666667, 125.8333333333, 125.8333333333);
}
[data-bs-theme=dark] .was-validated .form-control:valid,
[data-bs-theme=dark] .form-control.is-valid,
[data-bs-theme=dark] .was-validated .form-select:valid,
[data-bs-theme=dark] .form-select.is-valid {
  border-color: rgb(28.0648648649, 207.9351351351, 94.4);
}
[data-bs-theme=dark] .was-validated .form-control:valid:focus,
[data-bs-theme=dark] .form-control.is-valid:focus,
[data-bs-theme=dark] .was-validated .form-select:valid:focus,
[data-bs-theme=dark] .form-select.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.45);
}
[data-bs-theme=dark] .was-validated .form-control:invalid,
[data-bs-theme=dark] .form-control.is-invalid,
[data-bs-theme=dark] .was-validated .form-select:invalid,
[data-bs-theme=dark] .form-select.is-invalid {
  border-color: rgb(227.0833333333, 81.9166666667, 81.9166666667);
}
[data-bs-theme=dark] .was-validated .form-control:invalid:focus,
[data-bs-theme=dark] .form-control.is-invalid:focus,
[data-bs-theme=dark] .was-validated .form-select:invalid:focus,
[data-bs-theme=dark] .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.45);
}

/* === Range Input Styling === */
.form-range {
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
}
.form-range:focus {
  outline: none;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}
.form-range:disabled {
  opacity: 0.5;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: rgba(15, 23, 42, 0.35);
}
.form-range:disabled::-moz-range-thumb {
  background-color: rgba(15, 23, 42, 0.35);
}
.form-range:disabled::-webkit-slider-runnable-track {
  background-color: rgba(15, 23, 42, 0.15);
}
.form-range:disabled::-moz-range-track {
  background-color: rgba(15, 23, 42, 0.15);
}
.form-range::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.5rem;
  border: 0;
  border-radius: 1rem;
  background-color: #0f766e;
  transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 100ms ease-in-out;
  appearance: none;
}
.form-range::-webkit-slider-thumb:active {
  transform: scale(1.15);
  background-color: #115e59;
}
.form-range::-webkit-slider-thumb:hover {
  background-color: #0d9488;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.375rem;
  background-color: rgba(15, 23, 42, 0.15);
  border-radius: 1rem;
  transition: background-color 150ms ease-in-out;
}
.form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 1rem;
  background-color: #0f766e;
  transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 100ms ease-in-out;
}
.form-range::-moz-range-thumb:active {
  transform: scale(1.15);
  background-color: #115e59;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.375rem;
  background-color: rgba(15, 23, 42, 0.15);
  border-radius: 1rem;
  transition: background-color 150ms ease-in-out;
}
.form-range::-moz-range-progress {
  height: 0.375rem;
  background-color: #0f766e;
  border-radius: 1rem 0 0 1rem;
}

/* Range sizing variants */
.form-range-sm {
  height: 1.25rem;
}
.form-range-sm::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.375rem;
}
.form-range-sm::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
}
.form-range-sm::-webkit-slider-runnable-track {
  height: 0.25rem;
}
.form-range-sm::-moz-range-track {
  height: 0.25rem;
}
.form-range-sm::-moz-range-progress {
  height: 0.25rem;
}

.form-range-lg {
  height: 2rem;
}
.form-range-lg::-webkit-slider-thumb {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.625rem;
}
.form-range-lg::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
}
.form-range-lg::-webkit-slider-runnable-track {
  height: 0.5rem;
}
.form-range-lg::-moz-range-track {
  height: 0.5rem;
}
.form-range-lg::-moz-range-progress {
  height: 0.5rem;
}

/* === Dark Mode Range Input Overrides === */
[data-bs-theme=dark] .form-range::-webkit-slider-thumb {
  background-color: #0d9488;
}
[data-bs-theme=dark] .form-range::-webkit-slider-thumb:active {
  background-color: rgb(8.8819875776, 101.1180124224, 92.9192546584);
}
[data-bs-theme=dark] .form-range::-webkit-slider-thumb:hover {
  background-color: #14b8a6;
}
[data-bs-theme=dark] .form-range::-moz-range-thumb {
  background-color: #0d9488;
}
[data-bs-theme=dark] .form-range::-moz-range-thumb:active {
  background-color: rgb(8.8819875776, 101.1180124224, 92.9192546584);
}
[data-bs-theme=dark] .form-range::-moz-range-thumb:hover {
  background-color: #14b8a6;
}
[data-bs-theme=dark] .form-range::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .form-range::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .form-range::-moz-range-progress {
  background-color: #0d9488;
}
[data-bs-theme=dark] .form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.133);
}
[data-bs-theme=dark] .form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.133);
}
[data-bs-theme=dark] .form-range:disabled::-webkit-slider-thumb {
  background-color: rgba(255, 255, 255, 0.35);
}
[data-bs-theme=dark] .form-range:disabled::-moz-range-thumb {
  background-color: rgba(255, 255, 255, 0.35);
}
[data-bs-theme=dark] .form-range:disabled::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .form-range:disabled::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .form-range:disabled::-moz-range-progress {
  background-color: rgba(255, 255, 255, 0.35);
}

/* ===================================================
   TYPOGRAPHY ELEMENTS
=================================================== */
/* === Headings === */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  letter-spacing: -0.025em;
  transition-property: color;
  transition-duration: 150ms;
  transition-timing-function: ease;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Lexend", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.lead {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0 !important;
}

/* === Blockquote === */
blockquote, .blockquote {
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  font-style: italic;
  background: #f8fafc;
  border-left: 4px solid #0f766e;
  color: #334155;
  font-family: "Lexend", "Times New Roman", serif;
  transition-property: background-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
[data-bs-theme=dark] blockquote, [data-bs-theme=dark] .blockquote {
  background: #0f172a;
  color: #cbd5e1;
}

.blockquote-footer {
  display: block;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  color: #94a3b8;
  margin-top: 0.5rem;
}
[data-bs-theme=dark] .blockquote-footer {
  color: #64748b;
}

code, kbd, samp {
  font-family: "Source Code Pro", monospace;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  color: #0f766e;
  background-color: #f8fafc;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  font-weight: 500;
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
[data-bs-theme=dark] code, [data-bs-theme=dark] kbd, [data-bs-theme=dark] samp {
  color: rgb(23.6278195489, 185.8721804511, 173.2706766917);
  background-color: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

pre {
  font-family: "Source Code Pro", monospace;
  background-color: #f8fafc;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin: 1.5rem 0;
  overflow: auto;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
pre code {
  padding: 0;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  color: inherit;
  background-color: transparent;
  border: none;
  box-shadow: none;
  display: block;
  line-height: 1.6;
}
[data-bs-theme=dark] pre {
  background-color: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.code-block {
  position: relative;
  margin: 1.5rem 0;
}
.code-block pre {
  margin: 0;
  padding-top: 2.5rem;
}
.code-block::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #ff5f56;
  box-shadow: 1.25rem 0 0 #ffbd2e, 2.5rem 0 0 #27c93f;
}
.code-block .code-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.code-block:hover .code-copy-btn {
  opacity: 1;
}

kbd {
  display: inline-block;
  font-family: "Source Code Pro", monospace;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  color: var(--bs-dark);
  background: #f7f7f7;
  padding: 0.15rem 0.4rem;
  margin: 0 0.1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  border-bottom-width: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
[data-bs-theme=dark] kbd {
  background: #2d2d2d;
  color: #f0f0f0;
  border-color: #444;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code,
.h1 code, .h2 code, .h3 code, .h4 code, .h5 code, .h6 code {
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  padding: 0.15rem 0.3rem;
  vertical-align: middle;
}

/* Additional Basic Elements */
a {
  color: var(--bs-primary);
  transition-property: color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
a:hover {
  color: #0d9488;
}

hr {
  border-color: rgba(0, 0, 0, 0.1);
  opacity: 0.2;
  transition-property: border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* === Text Transform Overrides === */
.text-uppercase {
  letter-spacing: 0.05em !important;
}

.small, small {
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  letter-spacing: 0 !important;
}

/* === UI Component Typography === */
.navbar-brand {
  font-family: "Lexend", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.025em !important;
}

.nav-link {
  letter-spacing: 0 !important;
}

.dropdown-item {
  letter-spacing: 0 !important;
}

.card-title {
  font-family: "Lexend", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.025em !important;
}

.form-label {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0 !important;
}

.input-group-text {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  letter-spacing: 0 !important;
}

.badge {
  letter-spacing: 0.05em !important;
}

.breadcrumb-item {
  letter-spacing: 0 !important;
}

.modal-title {
  letter-spacing: -0.025em !important;
}

.accordion-button {
  letter-spacing: 0 !important;
}

.toast-header {
  letter-spacing: -0.025em !important;
}

.list-group-item {
  letter-spacing: 0 !important;
}

/* === Dark Mode Typography Overrides === */
[data-bs-theme=dark] a:hover {
  color: #14b8a6;
}
[data-bs-theme=dark] code {
  background-color: #0f172a;
  border-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme=dark] hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ===================================================
   TABS COMPONENT OVERRIDES
=================================================== */
/* === Base Nav Tabs === */
.nav-tabs {
  border-bottom: 1px solid #e2e8f0;
  transition-property: border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
  margin-bottom: 1rem;
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  color: #334155;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  letter-spacing: 0 !important;
  transition-property: color, border-color, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: transparent;
  color: #0f766e;
  isolation: isolate;
}
.nav-tabs .nav-link.active {
  color: #0f766e;
  background-color: #ffffff;
  border-color: #e2e8f0 #e2e8f0 #ffffff;
}
.nav-tabs .nav-link.disabled {
  color: #94a3b8;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link > i,
.nav-tabs .nav-link > .bi,
.nav-tabs .nav-link > svg {
  font-size: 1rem;
  margin-right: 0.5rem;
  transform: translateY(-1px);
}

/* === Pills Style Tabs === */
.nav-pills, .nav-pills-soft {
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.nav-pills .nav-link, .nav-pills-soft .nav-link {
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  color: #334155;
  transition-property: color, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.nav-pills .nav-link:hover, .nav-pills-soft .nav-link:hover, .nav-pills .nav-link:focus, .nav-pills-soft .nav-link:focus {
  color: #0f766e;
  background-color: rgba(15, 23, 42, 0.05);
}
.nav-pills .nav-link.active, .nav-pills-soft .nav-link.active {
  color: #ffffff;
  background-color: #0f766e;
}
.nav-pills .nav-link.disabled, .nav-pills-soft .nav-link.disabled {
  color: #94a3b8;
  background-color: transparent;
}
.nav-pills .nav-link > i, .nav-pills-soft .nav-link > i,
.nav-pills .nav-link > .bi,
.nav-pills-soft .nav-link > .bi,
.nav-pills .nav-link > svg,
.nav-pills-soft .nav-link > svg {
  font-size: 1rem;
  margin-right: 0.5rem;
  transform: translateY(-1px);
}

/* === Soft Pills === */
.nav-pills-soft .nav-link:hover, .nav-pills-soft .nav-link:focus {
  background-color: rgba(15, 118, 110, 0.05);
}
.nav-pills-soft .nav-link.active {
  color: #0f766e;
  background-color: rgba(15, 118, 110, 0.1);
}
.nav-pills-soft .nav-link:hover:not(.active):not(.disabled) {
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.05);
}

/* === Button-like Tabs === */
.nav-tabs-buttons {
  border-bottom: 0;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}
.nav-tabs-buttons .nav-link {
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 0.625rem 1.25rem;
  background-color: #ffffff;
  color: #334155;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.nav-tabs-buttons .nav-link:hover, .nav-tabs-buttons .nav-link:focus {
  color: #0f766e;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.05);
  border-color: #e2e8f0;
  z-index: 1;
}
.nav-tabs-buttons .nav-link.active {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.3);
  background-color: rgba(15, 118, 110, 0.05);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.05);
}

/* === Underlined Tabs === */
.nav-tabs-underline {
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  margin-bottom: 1.5rem;
}
.nav-tabs-underline .nav-link {
  border: 0;
  border-radius: 0;
  padding: 0.75rem 1.25rem;
  color: #334155;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  position: relative;
  transition-property: color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.nav-tabs-underline .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transform: scaleX(0.5);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease, background-color 250ms ease;
}
.nav-tabs-underline .nav-link:hover, .nav-tabs-underline .nav-link:focus {
  color: #0f766e;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs-underline .nav-link:hover::after, .nav-tabs-underline .nav-link:focus::after {
  background-color: #e2e8f0;
  transform: scaleX(0.8);
  opacity: 0.7;
}
.nav-tabs-underline .nav-link.active {
  color: #0f766e;
  background-color: transparent;
}
.nav-tabs-underline .nav-link.active::after {
  background-color: #0f766e;
  transform: scaleX(1);
  opacity: 1;
}

/* === Vertical Tabs === */
.nav-tabs-vertical {
  flex-direction: column;
  border-bottom: 0;
  border-right: 1px solid #e2e8f0;
  margin-right: 1.5rem;
  margin-bottom: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}
.nav-tabs-vertical .nav-link {
  border-radius: 0.25rem 0 0 0.25rem;
  border: 1px solid transparent;
  margin-right: -1px;
  text-align: left;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  padding: 0.75rem 1rem;
  position: relative;
  display: block;
  z-index: 2;
  color: #334155;
}
.nav-tabs-vertical .nav-link.active {
  color: #0f766e;
  font-weight: 600;
  background-color: #ffffff;
  border-color: #e2e8f0 #ffffff #e2e8f0 #e2e8f0;
}
.nav-tabs-vertical .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background-color: #0f766e;
  border-radius: 0 4px 4px 0;
}
.nav-tabs-vertical .nav-link:hover:not(.active), .nav-tabs-vertical .nav-link:focus:not(.active) {
  color: #0f766e;
  background-color: transparent;
  border-color: transparent;
}

/* === Responsive Tabs === */
@media (max-width: 767.98px) {
  .nav-tabs:not(.nav-tabs-icon) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-tabs:not(.nav-tabs-icon)::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs:not(.nav-tabs-icon) .nav-link {
    white-space: nowrap;
  }
  .nav-tabs-vertical {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
    margin-right: 0;
    margin-bottom: 1.5rem;
    width: 100%;
  }
  .nav-tabs-vertical .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    margin-right: 0;
    margin-bottom: -1px;
  }
  .nav-tabs-vertical .nav-link.active {
    border-color: #e2e8f0 #e2e8f0 #ffffff;
  }
  .nav-tabs-vertical .nav-link.active::before {
    left: 20%;
    top: auto;
    bottom: 0;
    width: 60%;
    height: 3px;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs-vertical .nav-link:hover:not(.active), .nav-tabs-vertical .nav-link:focus:not(.active) {
    border-color: rgba(15, 23, 42, 0.1) rgba(15, 23, 42, 0.1) #e2e8f0;
  }
}
/* === Tab Content Styling === */
.tab-content > .tab-pane {
  padding: 0.5rem 0;
}
.tab-content.bordered {
  border: 1px solid #e2e8f0;
  border-top: 0;
  border-radius: 0 0 0.25rem 0.25rem;
  padding: 1.5rem;
  transition-property: border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.tab-content.with-background {
  background-color: rgba(15, 23, 42, 0.02);
  border-radius: 0 0 0.25rem 0.25rem;
  padding: 1.5rem;
  transition-property: background-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.tab-content .fade.show {
  animation: fadeTabIn 0.15s ease-in-out;
}

@keyframes fadeTabIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === Dark Mode Overrides === */
[data-bs-theme=dark] .nav-tabs {
  border-color: rgba(248, 250, 252, 0.2);
}
[data-bs-theme=dark] .nav-tabs .nav-link {
  color: #cbd5e1;
}
[data-bs-theme=dark] .nav-tabs .nav-link:hover, [data-bs-theme=dark] .nav-tabs .nav-link:focus {
  color: #f8fafc;
  border-color: rgba(248, 250, 252, 0.15) rgba(248, 250, 252, 0.15) rgba(248, 250, 252, 0.2);
  background-color: rgba(255, 255, 255, 0.02);
}
[data-bs-theme=dark] .nav-tabs .nav-link.active {
  color: #0d9488;
  background-color: #020617;
  border-color: rgba(248, 250, 252, 0.2) rgba(248, 250, 252, 0.2) #020617;
}
[data-bs-theme=dark] .nav-tabs .nav-link.disabled {
  color: #64748b;
}
[data-bs-theme=dark] .nav-pills .nav-link, [data-bs-theme=dark] .nav-pills-soft .nav-link {
  color: #cbd5e1;
}
[data-bs-theme=dark] .nav-pills .nav-link:hover, [data-bs-theme=dark] .nav-pills-soft .nav-link:hover, [data-bs-theme=dark] .nav-pills .nav-link:focus, [data-bs-theme=dark] .nav-pills-soft .nav-link:focus {
  color: #f8fafc;
  background-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme=dark] .nav-pills .nav-link.active, [data-bs-theme=dark] .nav-pills-soft .nav-link.active {
  color: #ffffff;
  background-color: #0d9488;
}
[data-bs-theme=dark] .nav-pills .nav-link.disabled, [data-bs-theme=dark] .nav-pills-soft .nav-link.disabled {
  color: #64748b;
}
[data-bs-theme=dark] .nav-pills-soft .nav-link:hover, [data-bs-theme=dark] .nav-pills-soft .nav-link:focus {
  background-color: rgba(13, 148, 136, 0.15);
}
[data-bs-theme=dark] .nav-pills-soft .nav-link.active {
  color: #0d9488;
  background-color: rgba(13, 148, 136, 0.2);
}
[data-bs-theme=dark] .nav-tabs-buttons .nav-link {
  background-color: #0f172a;
  border-color: rgba(248, 250, 252, 0.2);
  color: #cbd5e1;
}
[data-bs-theme=dark] .nav-tabs-buttons .nav-link:hover, [data-bs-theme=dark] .nav-tabs-buttons .nav-link:focus {
  color: #f8fafc;
  border-color: rgba(248, 250, 252, 0.2);
}
[data-bs-theme=dark] .nav-tabs-buttons .nav-link.active {
  color: #0d9488;
  border-color: rgba(13, 148, 136, 0.3);
  background-color: rgba(13, 148, 136, 0.1);
}
[data-bs-theme=dark] .nav-tabs-underline {
  border-color: rgba(248, 250, 252, 0.15);
}
[data-bs-theme=dark] .nav-tabs-underline .nav-link {
  color: #cbd5e1;
}
[data-bs-theme=dark] .nav-tabs-underline .nav-link:hover, [data-bs-theme=dark] .nav-tabs-underline .nav-link:focus {
  color: #f8fafc;
}
[data-bs-theme=dark] .nav-tabs-underline .nav-link:hover::after, [data-bs-theme=dark] .nav-tabs-underline .nav-link:focus::after {
  background-color: rgba(248, 250, 252, 0.2);
}
[data-bs-theme=dark] .nav-tabs-underline .nav-link.active {
  color: #0d9488;
}
[data-bs-theme=dark] .nav-tabs-underline .nav-link.active::after {
  background-color: #0d9488;
}
[data-bs-theme=dark] .nav-tabs-vertical {
  border-color: rgba(248, 250, 252, 0.2);
}
[data-bs-theme=dark] .nav-tabs-vertical .nav-link:hover:not(.active), [data-bs-theme=dark] .nav-tabs-vertical .nav-link:focus:not(.active) {
  background-color: rgba(13, 148, 136, 0.1);
  border-color: rgba(248, 250, 252, 0.15) rgba(248, 250, 252, 0.2) rgba(248, 250, 252, 0.15) rgba(248, 250, 252, 0.15);
}
[data-bs-theme=dark] .nav-tabs-vertical .nav-link.active {
  color: #0d9488;
  background-color: #020617;
  border-color: rgba(248, 250, 252, 0.2) #020617 rgba(248, 250, 252, 0.2) rgba(248, 250, 252, 0.2);
}
[data-bs-theme=dark] .nav-tabs-vertical .nav-link.active::before {
  background-color: #0d9488;
}
[data-bs-theme=dark] .tab-content.bordered {
  border-color: rgba(248, 250, 252, 0.2);
}
[data-bs-theme=dark] .tab-content.with-background {
  background-color: rgba(255, 255, 255, 0.03);
}
@media (max-width: 767.98px) {
  [data-bs-theme=dark] .nav-tabs-vertical {
    border-color: rgba(248, 250, 252, 0.2);
  }
  [data-bs-theme=dark] .nav-tabs-vertical .nav-link:hover:not(.active), [data-bs-theme=dark] .nav-tabs-vertical .nav-link:focus:not(.active) {
    border-color: rgba(248, 250, 252, 0.15) rgba(248, 250, 252, 0.15) rgba(248, 250, 252, 0.2);
  }
  [data-bs-theme=dark] .nav-tabs-vertical .nav-link.active {
    border-color: rgba(248, 250, 252, 0.2) rgba(248, 250, 252, 0.2) #020617;
  }
}

/* ===================================================
   TYPOGRAPHY UTILITIES
=================================================== */
/* === Font Size Classes === */
.fs-xs {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem) !important;
}

.fs-sm {
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem) !important;
}

.fs-base {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem) !important;
}

.fs-lg {
  font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem) !important;
}

.fs-xl {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem) !important;
}

.display-1 {
  font-size: clamp(3.5rem, 3rem + 2.5vw, 4.5rem) !important;
}

.display-2 {
  font-size: clamp(3rem, 2.5rem + 2.5vw, 4rem) !important;
}

.display-3 {
  font-size: clamp(2.5rem, 2.25rem + 1.25vw, 3rem) !important;
}

.display-4 {
  font-size: clamp(2rem, 1.75rem + 1.25vw, 2.5rem) !important;
}

.display-5 {
  font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem) !important;
}

.display-6 {
  font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem) !important;
}

/* === Font Weight Classes === */
.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

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

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-extrabold {
  font-weight: 800 !important;
}

/* === Font Family Utility Classes === */
.font-primary {
  font-family: "Inter", Helvetica, Arial, sans-serif !important;
}

.font-secondary {
  font-family: "Lexend", "Times New Roman", serif !important;
}

.font-code {
  font-family: "Source Code Pro", monospace !important;
}

/* === Custom Font Classes === */
.font-secondary-normal {
  font-family: "Lexend", "Times New Roman", serif;
  font-weight: 400;
}

.font-secondary-medium {
  font-family: "Lexend", "Times New Roman", serif;
  font-weight: 500;
}

.font-secondary-bold {
  font-family: "Lexend", "Times New Roman", serif;
  font-weight: 700;
}

/* === Letter Spacing Utilities === */
.text-tight {
  letter-spacing: -0.025em !important;
}

.text-normal {
  letter-spacing: 0 !important;
}

.text-wide {
  letter-spacing: 0.05em !important;
}

/* ===================================================
   LAYOUT UTILITIES
=================================================== */
/* === Section Spacing Classes === */
.section-mb {
  margin-bottom: clamp(4rem, 8vw, 6rem);
}

.section-py {
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.section-sm-mb {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-sm-py {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-lg-mb {
  margin-bottom: clamp(5rem, 10vw, 8rem);
}

.section-lg-py {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

/* === Spacing Utilities === */
:root {
  --bs-spacer-0: 0;
  --bs-spacer-1: 0.25rem;
  --bs-spacer-2: 0.5rem;
  --bs-spacer-3: 0.75rem;
  --bs-spacer-4: 1rem;
  --bs-spacer-5: 1.5rem;
  --bs-spacer-6: 2rem;
  --bs-spacer-8: 3rem;
  --bs-spacer-10: 4rem;
  --bs-spacer-12: 5rem;
  --bs-spacer-16: 8rem;
}

/* === Custom Spacing Classes === */
.m-responsive {
  margin: clamp(1rem, 3vw, 2rem) !important;
}

.mt-responsive {
  margin-top: clamp(1rem, 4vw, 3rem) !important;
}

.mb-responsive {
  margin-bottom: clamp(1rem, 4vw, 3rem) !important;
}

.mx-responsive {
  margin-left: clamp(1rem, 3vw, 2rem) !important;
  margin-right: clamp(1rem, 3vw, 2rem) !important;
}

.my-responsive {
  margin-top: clamp(1rem, 4vw, 3rem) !important;
  margin-bottom: clamp(1rem, 4vw, 3rem) !important;
}

/* === Content Spacing === */
.content-spacing > * + * {
  margin-top: 1.5rem;
}

.content-spacing-lg > * + * {
  margin-top: 2.5rem;
}

.rich-content > h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.rich-content > h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.rich-content > h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.rich-content > p {
  margin-bottom: 1.25rem;
}
.rich-content > ul, .rich-content > ol {
  margin-bottom: 1.5rem;
}
.rich-content > blockquote {
  margin: 2rem 0;
}
.rich-content > img, .rich-content > figure {
  margin: 2rem 0;
}

/* === Gap Utilities === */
.gap-5 {
  gap: 2rem !important;
}

.gap-6 {
  gap: 3rem !important;
}

/* ===================================================
   COLOR UTILITIES
=================================================== */
/* === Background Soft Colors === */
.bg-primary-soft {
  background-color: rgba(15, 118, 110, 0.1) !important;
}

.bg-secondary-soft {
  background-color: rgba(30, 41, 59, 0.1) !important;
}

.bg-success-soft {
  background-color: rgba(22, 163, 74, 0.1) !important;
}

.bg-info-soft {
  background-color: rgba(2, 132, 199, 0.1) !important;
}

.bg-warning-soft {
  background-color: rgba(202, 138, 4, 0.1) !important;
}

.bg-danger-soft {
  background-color: rgba(220, 38, 38, 0.1) !important;
}

/* === Opacity utilities === */
.opacity-5 {
  opacity: 0.05 !important;
}

.opacity-10 {
  opacity: 0.1 !important;
}

.opacity-15 {
  opacity: 0.15 !important;
}

.opacity-20 {
  opacity: 0.2 !important;
}

.opacity-30 {
  opacity: 0.3 !important;
}

.opacity-40 {
  opacity: 0.4 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

.opacity-70 {
  opacity: 0.7 !important;
}

.opacity-80 {
  opacity: 0.8 !important;
}

.opacity-85 {
  opacity: 0.85 !important;
}

.opacity-90 {
  opacity: 0.9 !important;
}

.opacity-95 {
  opacity: 0.95 !important;
}

/* === Background Opacity utilities === */
.bg-opacity-5 {
  --bs-bg-opacity: 0.05 !important;
}

.bg-opacity-10 {
  --bs-bg-opacity: 0.1 !important;
}

.bg-opacity-15 {
  --bs-bg-opacity: 0.15 !important;
}

.bg-opacity-20 {
  --bs-bg-opacity: 0.2 !important;
}

.bg-opacity-30 {
  --bs-bg-opacity: 0.3 !important;
}

.bg-opacity-40 {
  --bs-bg-opacity: 0.4 !important;
}

.bg-opacity-60 {
  --bs-bg-opacity: 0.6 !important;
}

.bg-opacity-70 {
  --bs-bg-opacity: 0.7 !important;
}

.bg-opacity-80 {
  --bs-bg-opacity: 0.8 !important;
}

.bg-opacity-85 {
  --bs-bg-opacity: 0.85 !important;
}

.bg-opacity-90 {
  --bs-bg-opacity: 0.9 !important;
}

.bg-opacity-95 {
  --bs-bg-opacity: 0.95 !important;
}

/* ===================================================
   DARK MODE UTILITIES
=================================================== */
[data-bs-theme=dark] .bg-primary-soft {
  background-color: rgba(15, 118, 110, 0.2) !important;
}
[data-bs-theme=dark] .bg-secondary-soft {
  background-color: rgba(30, 41, 59, 0.2) !important;
}
[data-bs-theme=dark] .bg-success-soft {
  background-color: rgba(22, 163, 74, 0.2) !important;
}
[data-bs-theme=dark] .bg-info-soft {
  background-color: rgba(2, 132, 199, 0.2) !important;
}
[data-bs-theme=dark] .bg-warning-soft {
  background-color: rgba(202, 138, 4, 0.2) !important;
}
[data-bs-theme=dark] .bg-danger-soft {
  background-color: rgba(220, 38, 38, 0.2) !important;
}

/* ===================================================
   SHADOW UTILITIES
=================================================== */
/* === Box Shadow Classes === */
.shadow-none {
  box-shadow: none !important;
}

.shadow-xs {
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.05) !important;
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px -1px rgba(2, 6, 23, 0.1) !important;
}

.shadow {
  box-shadow: 0 4px 6px -1px rgba(2, 6, 23, 0.1), 0 2px 4px -2px rgba(2, 6, 23, 0.1) !important;
}

.shadow-md {
  box-shadow: 0 10px 15px -3px rgba(2, 6, 23, 0.1), 0 4px 6px -4px rgba(2, 6, 23, 0.1) !important;
}

.shadow-lg {
  box-shadow: 0 20px 25px -5px rgba(2, 6, 23, 0.1), 0 8px 10px -6px rgba(2, 6, 23, 0.1) !important;
}

.shadow-xl {
  box-shadow: 0 25px 50px -12px rgba(2, 6, 23, 0.25) !important;
}

/* === Directional Shadows === */
.shadow-top {
  box-shadow: 0 -2px 5px rgba(2, 6, 23, 0.05) !important;
}

.shadow-right {
  box-shadow: 2px 0 5px rgba(2, 6, 23, 0.05) !important;
}

.shadow-bottom {
  box-shadow: 0 2px 5px rgba(2, 6, 23, 0.05) !important;
}

.shadow-left {
  box-shadow: -2px 0 5px rgba(2, 6, 23, 0.05) !important;
}

/* === Sharp Shadow Variants === */
.shadow-sharp {
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06) !important;
}

.shadow-sharp-lg {
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06), 0 2px 4px rgba(2, 6, 23, 0.06) !important;
}

/* === Inner Shadow === */
.shadow-inner {
  box-shadow: inset 0 2px 4px rgba(2, 6, 23, 0.06) !important;
}

.shadow-inner-sm {
  box-shadow: inset 0 1px 1px rgba(2, 6, 23, 0.05) !important;
}

/* === Interactive Shadows === */
.hover-shadow {
  transition: box-shadow 150ms ease;
}
.hover-shadow:hover {
  box-shadow: 0 10px 15px -3px rgba(2, 6, 23, 0.1), 0 4px 6px -4px rgba(2, 6, 23, 0.1) !important;
}

.focus-shadow:focus {
  box-shadow: 0 4px 6px -1px rgba(2, 6, 23, 0.1), 0 2px 4px -2px rgba(2, 6, 23, 0.1), 0 0 0 0.25rem rgba(15, 118, 110, 0.25) !important;
}

/* ===================================================
   ESSENTIAL LAYOUT HELPERS
=================================================== */
/* === Container Extensions === */
.container-breakout {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (max-width: 768px) {
  .container-fluid-sm {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* === Aspect Ratio Helpers === */
.ratio-1x1 {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
}

.ratio-4x3 {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}

.ratio-16x9 {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}

.ratio-3x2 {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
}

.ratio-3x4 {
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100%;
}

.ratio-2x3 {
  aspect-ratio: 2/3;
  object-fit: cover;
  width: 100%;
}

.ratio-9x16 {
  aspect-ratio: 9/16;
  object-fit: cover;
  width: 100%;
}

.ratio-21x9 {
  aspect-ratio: 21/9;
  object-fit: cover;
  width: 100%;
}

.ratio-golden {
  aspect-ratio: 1.618/1;
  object-fit: cover;
  width: 100%;
}

@supports not (aspect-ratio: 1/1) {
  [class*=ratio-] {
    position: relative;
  }
  [class*=ratio-]::before {
    content: "";
    display: block;
  }
  [class*=ratio-] > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .ratio-1x1::before {
    padding-top: 100%;
  }
  .ratio-16x9::before {
    padding-top: 56.25%;
  }
  .ratio-4x3::before {
    padding-top: 75%;
  }
  .ratio-3x2::before {
    padding-top: 66.666%;
  }
  .ratio-3x4::before {
    padding-top: 133.333%;
  }
  .ratio-2x3::before {
    padding-top: 150%;
  }
  .ratio-9x16::before {
    padding-top: 177.778%;
  }
  .ratio-21x9::before {
    padding-top: 42.857%;
  }
  .ratio-golden::before {
    padding-top: 61.8%;
  }
}
.mx-auto-responsive {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
@media (max-width: 768px) {
  .mx-auto-responsive {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* ===================================================
   HOVER EFFECTS UTILITIES
=================================================== */
/* === Hover Effects === */
.hover-lift {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(2, 6, 23, 0.1), 0 4px 6px -4px rgba(2, 6, 23, 0.1) !important;
}

.hover-scale {
  transition: transform 150ms ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow 150ms ease;
}
.hover-glow:hover {
  box-shadow: 0 0 15px rgba(15, 23, 42, 0.15);
}

.dropdown-menu {
  background-color: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 0.5rem 0;
  border-radius: 0.5rem;
  min-width: 10rem;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: var(--bs-body-color);
  transition: background 0.2s, color 0.2s;
}

.dropdown-item {
  color: var(--bs-body-color);
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.18s, color 0.18s;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(15, 118, 110, 0.07);
  color: var(--bs-primary);
}
.dropdown-item.active, .dropdown-item[aria-current=true] {
  background-color: var(--bs-primary);
  color: #fff;
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-text-muted, #94a3b8);
  background: none;
  opacity: 0.6;
}

[data-bs-theme=dark] .dropdown-menu {
  background-color: var(--bs-dark);
  border: 1px solid var(--bs-border-color-dark, #475569);
  color: var(--bs-body-color, #f8fafc);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
[data-bs-theme=dark] .dropdown-item {
  color: var(--bs-body-color, #f8fafc);
}
[data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus {
  background-color: rgba(20, 184, 166, 0.1);
  color: var(--bs-primary, #14b8a6);
}
[data-bs-theme=dark] .dropdown-item.active, [data-bs-theme=dark] .dropdown-item[aria-current=true] {
  background-color: var(--bs-primary, #14b8a6);
  color: #fff;
}
[data-bs-theme=dark] .dropdown-item.disabled, [data-bs-theme=dark] .dropdown-item:disabled {
  color: var(--bs-text-muted-dark-mode, #64748b);
  background: none;
  opacity: 0.6;
}

/*# sourceMappingURL=ui-kit.css.map */