html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ffffff; /* Default light background */
  margin: 0;
  padding: 0;
  min-height: 100dvh !important;
  min-height: -webkit-fill-available;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ffffff; /* Default light background */
  margin: 0;
  padding: 0;
  /* min-height: 50vh;
  min-height: -webkit-fill-available; */
  /* Apply safe area padding to body */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

[data-bs-theme="dark"] {
  background-color: #1f2937 !important;
}

[data-bs-theme="dark"] html {
  background-color: #1f2937 !important;
}

.main-container {
  min-height: 100dvh !important;
  overflow: hidden !important;
  display: flex;
}

a,
.btn-link {
  color: #006bb7;
}

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

.content {
  padding-top: 1.1rem;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.navbar {
  height: 3.5rem;
}

:root {
  /* Light mode body background - customize this RGB value */
  --bs-body-bg-rgb: rgba(249, 250, 251, 100) !important;

  .bg-body {
    background-color: rgba(
      249,
      250,
      251,
      100
    ) !important; /* Default: light gray (Bootstrap's --bs-gray-100) */
  }

  --bb-sidebar-width: 255px;
  --bb-sidebar-collapsed-width: 63px;
  --bb-sidebar-background-color: rgba(255, 255, 255);
  --bb-sidebar-top-row-background-color: rgba(255, 255, 255);
  --bb-sidebar-top-row-border-color: rgb(237, 237, 237);
  --bb-sidebar-title-text-color: rgb(0, 0, 0);
  --bb-sidebar-brand-icon-color: #6f42c1;
  --bb-sidebar-brand-image-width: 24px;
  --bb-sidebar-brand-image-height: 24px;
  --bb-sidebar-title-badge-text-color: rgb(255, 255, 255);
  --bb-sidebar-navbar-toggler-icon-color: rgb(0, 0, 0);
  --bb-sidebar-navbar-toggler-background-color: rgba(0, 0, 0, 0.08);
  --bb-sidebar-content-border-color: rgb(237, 237, 237);
  --bb-sidebar-nav-item-text-color: rgba(0, 0, 0, 0.9);
  --bb-sidebar-nav-item-text-active-color-rgb: 0, 0, 0;
  --bb-sidebar-nav-item-background-hover-color: rgba(219, 233, 254, 100);

  /* Step background variables - Light mode */
  --steps-bg-primary: 207, 226, 255; /* #cfe2ff */
  --steps-primary: 13, 110, 253; /* #0d6efd */
  --steps-bg-secondary: 226, 227, 229; /* #e2e3e5 */
  --steps-secondary: 108, 117, 125; /* #6c757d */
  --steps-bg-success: 209, 231, 221; /* #d1e7dd */
  --steps-success: 25, 135, 84; /* #198754 */
  --steps-bg-danger: 248, 215, 218; /* #f8d7da */
  --steps-danger: 220, 53, 69; /* #dc3545 */
  --steps-bg-warning: 254, 249, 195; /* #fef9c3 */
  --steps-warning: 202, 138, 3; /* #ca8a03 */
  --steps-bg-info: 209, 236, 241; /* #d1ecf1 */
  --steps-info: 12, 176, 209; /* #0cb0d1 */
  --steps-bg-light: 248, 249, 250; /* #f8f9fa */
  --steps-light: 73, 80, 87; /* #495057 */
  --steps-bg-dark: 33, 37, 41; /* #212529 */
  --steps-dark: 255, 255, 255; /* #ffffff */
}

/* Dark mode body background */
[data-bs-theme="dark"] {
  /* Dark mode body background - customize this RGB value */
  --bs-body-bg-rgb: rgb(33, 37, 41) !important;
  --bs-body-bg: #1f2937 !important;

  .bg-body {
    background-color: rgb(33, 37, 41) !important;
  }

  /* Step background variables - Dark mode */
  --steps-bg-primary: 30, 58, 95; /* #1e3a5f */
  --steps-primary: 110, 168, 254; /* #6ea8fe */
  --steps-bg-secondary: 71, 76, 81; /* #474c51 */
  --steps-secondary: 173, 181, 189; /* #adb5bd */
  --steps-bg-success: 15, 81, 50; /* #0f5132 */
  --steps-success: 117, 183, 152; /* #75b798 */
  --steps-bg-danger: 132, 32, 41; /* #842029 */
  --steps-danger: 234, 134, 143; /* #ea868f */
  --steps-bg-warning: 113, 63, 17; /* #713f11 */
  --steps-warning: 250, 204, 20; /* #facc14 */
  --steps-bg-info: 5, 81, 96; /* #055160 */
  --steps-info: 110, 223, 246; /* #6edff6 */
  --steps-bg-light: 52, 58, 64; /* #343a40 */
  --steps-light: 248, 249, 250; /* #f8f9fa */
  --steps-bg-dark: 248, 249, 250; /* #f8f9fa */
  --steps-dark: 33, 37, 41; /* #212529 */
  --bb-table-selected-row-color: rgba(250,250,250,1) !important;
  --bb-table-selected-row-hover-color: rgba(255,255,255,1) !important;
}

.top-bar {
  background-color: var(--bb-sidebar-background-color);
}

/* ===== NavMenu Styles ===== */
/* Navigation header styles */
.nav-header {
  height: 4rem;
  min-height: 4rem;
  border-color: var(--bs-border-color) !important;
}

.nav-logo {
  height: 2rem;
  width: auto;
}

.nav-logo-collapsed {
  height: 2rem;
  width: 2rem;
}

.nav-close-btn {
  color: var(--bs-secondary) !important;
  border: none !important;
}

.nav-close-btn:hover {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-light) !important;
}

.nav-menu-container {
  overflow-y: auto;
}

/* Navigation menu styles */
.nav-menu {
  overflow-y: auto;
  transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--bs-secondary);
  font-weight: 500;
  width: 100%;
  text-align: left;
  text-decoration: none;
  border: none;
  background: none;
}

.nav-item .btn:hover {
  border-radius: 0rem !important;
}

/* Only apply collapsed styling on desktop */
@media (min-width: 992px) {
  .nav-item.collapsed {
    gap: 0;
  }
}

.nav-item:hover {
  background-color: #e8ecf1;
  text-decoration: none;
}

.nav-item:hover .nav-text {
  color: var(--bs-dark);
}

.nav-item.active {
  color: #0d6efd !important;
  background-color: #cfe2ff !important;
  border-right: 2px solid #0d6efd;
}

[data-bs-theme="dark"] .dashboard-icon-primary,
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-primary > .text-white {
  color: #6ea8fe !important;
  background-color: #1e3a5f !important;
}

.nav-tabs .nav-link {
  border: none;
  box-shadow: none;
}

.nav-tabs .nav-link:hover {
  border: var(--bs-nav-tabs-border-width) solid #d2d2d2;
  transition: none;
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  border: var(--bs-nav-tabs-border-width) solid rgb(52, 54, 60);
  transition: none;
}

.nav-tabs .nav-link.active {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)) !important;
  border: var(--bs-nav-tabs-border-width) solid transparent !important;
  border-top-left-radius: var(--bs-nav-tabs-border-radius) !important;
  border-top-right-radius: var(--bs-nav-tabs-border-radius) !important;
  background-color: #f8f8f8 !important;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.176) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #252f3c !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Only apply collapsed active styling on desktop */
@media (min-width: 992px) {
  .nav-item.collapsed.active {
    border-right: none;
    border-left: 2px solid var(--bs-primary);
  }
}

.nav-item.active .nav-text {
  color: var(--bs-primary);
}

.nav-item.collapsed.active .nav-text {
  color: var(--bs-primary);
}

.nav-text {
  color: #374151;
  opacity: 1;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
}

.nav-text:hover {
  color: black;
}

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

/* Animation for nav text when sidebar is collapsed */
.sidebar-collapsed .nav-text {
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
}

.sidebar-expanded .nav-text {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s; /* Slight delay for text to appear after width animation */
}

/* On mobile, keep nav text visible during animation */
@media (max-width: 991.98px) {
  .sidebar-collapsed .nav-text,
  .sidebar-expanded .nav-text {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
}

/* Footer styles */
.nav-footer {
  border-color: #eaeef1 !important;
  transition: all 0.2s ease-in-out;
}

.user-avatar-small {
  width: 2rem;
  height: 2rem;
}

/* Footer content animations */
.nav-footer .d-flex {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.sidebar-collapsed .nav-footer .text-truncate {
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
}

.sidebar-expanded .nav-footer .text-truncate {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}

/* On mobile, keep footer text visible during animation */
@media (max-width: 991.98px) {
  .sidebar-collapsed .nav-footer .text-truncate,
  .sidebar-expanded .nav-footer .text-truncate {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
}

/* Dark mode support */
[data-bs-theme="dark"] .nav-header {
  background-color: #252a2f !important;
  border-color: var(--bs-border-color-translucent) !important;
}

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

[data-bs-theme="dark"] .nav-close-btn:hover {
  color: var(--bs-white) !important;
  background-color: var(--bs-secondary) !important;
}

[data-bs-theme="dark"] .nav-item {
  color: var(--bs-light);
}

[data-bs-theme="dark"] .nav-item:hover {
  background-color: #374151;
}

[data-bs-theme="dark"] .nav-item:hover .nav-text {
  color: white;
}

[data-bs-theme="dark"] .nav-item.active {
  color: #6ea8fe !important;
  background-color: #1e3a5f !important;
  border-right: 2px solid #92c5fd;
}

/* Only apply dark mode collapsed active styling on desktop */
@media (min-width: 992px) {
  [data-bs-theme="dark"] .nav-item.collapsed.active {
    border-right: none;
    border-left: 2px solid #92c5fd;
    color: #92c5fd;
  }
}

[data-bs-theme="dark"] .nav-item.active .nav-text {
  color: #92c5fd;
}

[data-bs-theme="dark"] .nav-item.collapsed.active .nav-text {
  color: #92c5fd;
}

[data-bs-theme="dark"] .nav-footer {
  border-color: #313842 !important;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .nav-header {
    padding-right: 3rem;
  }
}

/* ===== Header Styles ===== */
/* Header component styles for Bootstrap conversion */
.header-fixed {
  position: sticky;
  top: 0;
  z-index: 1020;
  border-color: var(--bs-border-color) !important;
}

.header-toggle-btn {
  color: var(--bs-secondary) !important;
  border: none !important;
}

.header-toggle-btn:hover {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-light) !important;
}

.header-search {
  border-color: var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.header-search:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.header-notification-btn {
  color: var(--bs-secondary) !important;
  border: none !important;
}

.header-notification-btn:hover {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-light) !important;
}

.user-avatar {
  width: 2rem;
  height: 2rem;
}

.user-dropdown {
  min-width: 12rem;
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
  z-index: 1050;
}

/* Remove focus ring from dropdown button */
.dropdown .btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark mode support for Header */
[data-bs-theme="dark"] .header-fixed {
  background-color: #252a2f !important;
  border-color: var(--bs-border-color-translucent) !important;
}

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

[data-bs-theme="dark"] .header-toggle-btn:hover {
  color: var(--bs-white) !important;
  background-color: var(--bs-secondary) !important;
}

[data-bs-theme="dark"] .header-search {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color-translucent);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .header-search::placeholder {
  color: var(--bs-secondary);
}

[data-bs-theme="dark"] .header-search:focus {
  background-color: var(--bs-dark);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}

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

[data-bs-theme="dark"] .header-notification-btn:hover {
  color: var(--bs-white) !important;
  background-color: var(--bs-secondary) !important;
}

[data-bs-theme="dark"] .user-dropdown {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color-translucent);
}

/* Responsive adjustments for Header */
@media (max-width: 767.98px) {
  .header-search {
    width: 200px !important;
  }
}

@media (max-width: 575.98px) {
  .header-search {
    display: none !important;
  }
}

/* ===== MainLayout Styles ===== */
/* Main layout styles for Bootstrap conversion */

html[data-bs-theme="dark"] {
  background-color: #212529 !important;
  overflow: hidden !important;
  min-height: 100dvh !important;
  min-height: -webkit-fill-available;
}

html[data-bs-theme="dark"] .bg-light {
  background-color: #212529 !important;
}

html[data-bs-theme="dark"] .bg-white {
  background-color: #1f2937 !important;
}

html[data-bs-theme="dark"] .border-end {
  border-color: #495057 !important;
}

/* Sidebar styles */
.sidebar-container {
  position: relative;
  z-index: 1030;
  flex-shrink: 0; /* Prevent sidebar from shrinking */
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-expanded {
  width: 16rem; /* 256px equivalent to w-64 - force consistent width */
  min-width: 16rem; /* Ensure minimum width */
}

.sidebar-collapsed {
  width: 4rem !important; /* 64px equivalent to w-16 - force consistent width */
  min-width: 4rem !important; /* Ensure minimum width */
  max-width: 4rem !important; /* Ensure maximum width */
}

.sidebar-overlay {
  z-index: 1040;
}

html[data-bs-theme="dark"] .main-content {
  background-color: #101827 !important;
}

.main-content-container {
  height: 100dvh !important;
}

/* Responsive adjustments for MainLayout */
@media (max-width: 991.98px) {
  .sidebar-container {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    /* Override desktop width transitions on mobile */
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }

  .sidebar-expanded {
    transform: translateX(0);
    width: 100vw !important; /* Ensure consistent width when expanded on mobile */
  }

  /* Enhanced mobile overlay animation */
  .sidebar-overlay {
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(2px);
    pointer-events: none;
  }

  .sidebar-overlay.sidebar-expanded {
    opacity: 1;
    pointer-events: auto;
  }

  .main-content-container {
    height: 100dvh !important;
  }
}

@media (min-width: 992px) {
  .sidebar-overlay {
    display: none !important;
  }
}

/* Blazor error UI */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* Button styling fixes for light mode */
.btn-outline-light {
  color: #000 !important;
  background-color: #fff !important;
  border-color: #dee2e6 !important;
}

.btn-outline-light:hover {
  color: #000 !important;
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

.btn-outline-light:focus,
.btn-outline-light.focus {
  color: #000 !important;
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5) !important;
}

.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active {
  color: #000 !important;
  background-color: #e9ecef !important;
  border-color: #dee2e6 !important;
}

/* Dark mode button styling */
[data-bs-theme="dark"] .btn-outline-light {
  color: #f8f9fa !important;
  background-color: transparent !important;
  border-color: #434549 !important;
}

[data-bs-theme="dark"] .btn-outline-light:hover {
  color: #f8f9fa !important;
  background-color: rgba(248, 249, 250, 0.1) !important;
  border-color: #434549 !important;
}

[data-bs-theme="dark"] .btn-outline-light:focus,
[data-bs-theme="dark"] .btn-outline-light.focus {
  color: #f8f9fa !important;
  background-color: rgba(248, 249, 250, 0.1) !important;
  border-color: #434549 !important;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.25) !important;
}

[data-bs-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled):active,
[data-bs-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled).active {
  color: #f8f9fa !important;
  background-color: rgba(248, 249, 250, 0.15) !important;
  border-color: #434549 !important;
}

/* ===== Settlement Page Styles ===== */
.settlement-card {
  cursor: pointer;
  border-left: none;
  border-right: none;
  border-color: rgba(229, 231, 235, 1);
  border-width: 0.5px;
  border-radius: 0px;
  transition: all 0.15s ease-in-out;
}

/* Make all badge text uppercase on Settlements page */
.settlement-card .badge,
.month-header .badge,
.settlement-detail .badge {
  text-transform: uppercase !important;
}

.settlement-card:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  /* transform: translateY(-1px); */
}

/* Month group and header styles */
.month-group {
  background-color: #fff;
  border: none;
  border-radius: 0px;
  overflow: hidden;
}

.month-header {
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  background-color: #fff;
}

.month-header:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Remove border when expanded */
.month-group .month-header.expanded {
  border-bottom: none !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.settlement-detail {
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.settlement-detail:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  /* Month header mobile layout */
  .month-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  .month-header .d-flex {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .month-header .d-flex:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .month-header .text-end {
    text-align: left !important;
  }

  /* Settlement detail mobile layout */
  .settlement-detail {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  .settlement-detail .d-flex:last-child {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .settlement-detail .text-end {
    text-align: left !important;
  }

  /* Adjust badge sizes for mobile */
  .settlement-detail .badge {
    font-size: 0.75rem;
  }

  /* Ensure proper spacing for mobile */
  .settlement-detail .flex-grow-1 {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Hide download buttons on very small screens to prevent overflow */
@media (max-width: 576px) {
  .month-header .btn,
  .settlement-detail .btn {
    display: none;
  }
}

/* Dark mode styles for settlements */
html[data-bs-theme="dark"] .settlement-card {
  border-left: none;
  border-right: none;
  border-color: #495057 !important;
}

html[data-bs-theme="dark"] .settlement-card:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-bs-theme="dark"] .month-group {
  background-color: #1f2937 !important;
  border-color: #495057;
}

html[data-bs-theme="dark"] .month-header {
  background-color: #1f2937 !important;
}

html[data-bs-theme="dark"] .month-header:hover {
  background-color: #1c2432 !important;
}

html[data-bs-theme="dark"] .month-group .month-header.expanded {
  background-color: #1c2432 !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .settlement-detail:hover {
  background-color: #1c2432 !important;
}

.theme-button > a,
.btn-link {
  color: black;
}

.theme-button > a,
.btn-link:hover {
  color: rgb(92, 128, 157);
}

html[data-bs-theme="dark"] {
  .theme-button > a,
  .btn-link {
    color: white;
  }

  .theme-button > a,
  .btn-link:hover {
    color: rgb(206, 206, 206);
  }
}

small#bb-theme-text {
  display: none;
}

img.nav-logo {
  content: url("../icons/horizontal-og.svg");
}
img.nav-logo-collapsed {
  content: url("../icons/just-logo.svg");
  margin-left: 0.4rem;
}

html[data-bs-theme="dark"] {
  img.nav-logo {
    content: url("../icons/horizontal-og-dark.svg");
  }
  img.nav-logo-collapsed {
    content: url("../icons/just-logo-dark.svg");
    margin-left: 0.4rem;
  }
}

.settlements-filter {
  width: auto;
  cursor: pointer;
  border-radius: 1rem;
  padding-left: 1rem;
}

.dropdown-filter {
  width: auto;
  cursor: pointer;
  border-radius: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.dropdown-item {
  border-radius: 0.5rem;
  margin-top: 0.25rem !important;
}

.dropdown-item.active {
  color: #0d6efd !important;
  background-color: #cfe2ff !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: #e8ecf1;
}

[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: #374151;
}

[data-bs-theme="dark"] .dropdown-item.active {
  color: #6ea8fe !important;
  background-color: #1e3a5f !important;
}

.dropdown-menu {
  border-radius: 0.5rem !important;
  width: auto !important;
  width: fit-content !important;
  max-width: none !important;
  min-width: auto !important;
}

.dropdown-menu.dropdown-menu-start.show {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  min-width: min-content !important;
}

/* Prevent text truncation in dropdown items */
.dropdown-menu .dropdown-item {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: 100% !important;
  display: block !important;
}

/* Search input styling to match dropdown filters */
.search-input-filter {
  border-radius: 1rem !important;
  font-size: 0.875rem;
  height: calc(1.5em + 0.5rem + 2px); /* Match form-select-sm height */
  background-color: var(
    --bs-body-bg
  ) !important; /* Match dropdown background */
  border: var(--bs-border-width) solid var(--bs-border-color) !important; /* Match dropdown border */
  color: var(--bs-body-color) !important; /* Match dropdown text color */
}

.search-input-filter:focus {
  border-color: #86b7fe !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  background-color: var(--bs-body-bg) !important;
}

/* Input group styling for search filter */
.search-input-group {
  width: 300px;
}

.search-input-group .input-group-text {
  border-radius: 1rem 0 0 1rem !important;
  border-right: none;
  background-color: var(
    --bs-body-bg
  ) !important; /* Match dropdown background */
  border: var(--bs-border-width) solid var(--bs-border-color) !important; /* Match dropdown border */
  color: var(--bs-body-color) !important; /* Match dropdown text color */
}

.search-input-group .form-control {
  border-radius: 0 1rem 1rem 0 !important;
  border-left: none;
  background-color: var(
    --bs-body-bg
  ) !important; /* Match dropdown background */
  border: var(--bs-border-width) solid var(--bs-border-color) !important; /* Match dropdown border */
  color: var(--bs-body-color) !important; /* Match dropdown text color */
}

.search-input-group .form-control:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  background-color: var(--bs-body-bg) !important;
}

.btn.btn-sm.dropdown-toggle {
  background-color: white !important;
}

[data-bs-theme="dark"] .btn.btn-sm.dropdown-toggle {
  background-color: #1f2937 !important;
}

/* Dark mode support for search input */
[data-bs-theme="dark"] .search-input-group .input-group-text {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .search-input-group .form-control {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .search-input-group .form-control::placeholder {
  color: var(--bs-secondary);
}

[data-bs-theme="dark"] .search-input-group .form-control:focus {
  background-color: var(--bs-body-bg) !important;
  border-color: #86b7fe !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .search-input-filter {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .search-input-filter:focus {
  border-color: #86b7fe !important;
  background-color: var(--bs-body-bg) !important;
}

/* ===== Settlement Details Dropdown Styles ===== */

.settlement-group .settlement-card.expanded,
.settlement-group .card.settlement-card.expanded {
  border-bottom: none !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.settlement-group .settlement-details-card,
.settlement-group .card.settlement-details-card {
  border: none !important;
  border-bottom: 0.5px solid rgba(229, 231, 235, 1) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* More specific selectors for BlazorBootstrap Card components */
.settlement-group .bb-card.settlement-card.expanded,
.settlement-group .card.bb-card.settlement-card.expanded {
  border-bottom: none !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.settlement-group .bb-card.settlement-details-card,
.settlement-group .card.bb-card.settlement-details-card {
  border: none !important;
  border-bottom: 0.5px solid rgba(229, 231, 235, 1) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Dark mode styles for settlement details */
html[data-bs-theme="dark"] .settlement-group .settlement-card.expanded,
html[data-bs-theme="dark"] .settlement-group .card.settlement-card.expanded {
  border-bottom: none !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-bs-theme="dark"] .settlement-group .settlement-details-card,
html[data-bs-theme="dark"] .settlement-group .card.settlement-details-card {
  border: none !important;
  border-bottom: 0.5px solid #495057 !important;
  background-color: #1f2937 !important;
}

/* Mobile responsive styles for settlement details */
@media (max-width: 768px) {
  /*   .settlement-details-card .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem;
  } */

  .settlement-details-card .d-flex.justify-content-between.progress-details {
    flex-direction: row !important;
    width: 100%;
  }

  .settlement-details-card .h4 {
    font-size: 1.5rem;
  }
}

.settlement-details-card h6 > span {
  font-size: 1.15rem;
}

.view-toggle-container > button {
  border: none !important;
}

html[data-bs-theme="dark"] {
  .view-toggle-container {
    background-color: #3b3e41 !important;
  }

  .view-toggle-btn.active {
    background-color: #000000 !important;
    border: none !important;
  }

  .view-toggle-icon {
    color: white !important;
  }
}

/* ===== Document Name Styling ===== */
/* Center document name text and apply proper color styling for light/dark modes */

/* Grid view document name styling - highly specific selector to override Bootstrap */
.document-card .card-body .card-title.fw-medium.text-dark {
  text-align: center !important;
  color: #000000;
}

/* Alternative selector for grid view */
.document-card h6.card-title.fw-medium {
  text-align: center !important;
  color: #000000;
}

/* List view document name styling - more specific selector */
.list-group-item .fw-medium.text-dark {
  color: #000000;
}

/* Dark mode document name styling */
html[data-bs-theme="dark"] {
  .document-card .card-body .card-title.fw-medium {
    color: #ffffff;
  }

  .document-card h6.card-title.fw-medium {
    color: #ffffff;
  }

  .list-group-item .fw-medium.text-dark {
    color: #ffffff;
  }
}

/* Dark mode document name styling for data-bs-theme attribute */
html[data-bs-theme="dark"]
  .document-card
  .card-body
  .card-title.fw-medium.text-dark {
  color: #ffffff;
}

html[data-bs-theme="dark"] .document-card h6.card-title.fw-medium {
  color: #ffffff;
}

html[data-bs-theme="dark"] .list-group-item .fw-medium.text-dark {
  color: #ffffff;
}

/* File icon background styling for light and dark modes */
.bg-light.rounded.p-2 {
  background-color: #f0f0f3 !important; /* Light gray background for light mode */
}

html[data-bs-theme="dark"] .bg-light.rounded.p-2 {
  background-color: #3c3e41 !important; /* Dark gray background for dark mode */
}

/* ===== Document Card Hover Overlay Styles ===== */
/* Document card hover overlay functionality */

.document-card {
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.document-overlay {
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  border-radius: inherit;
  z-index: 10;
}

.document-card:hover .document-overlay {
  opacity: 1;
  visibility: visible;
}

.document-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Dark mode overlay styling */
html[data-bs-theme="dark"] .document-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Ensure buttons in overlay are properly styled */
.document-overlay .btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.document-overlay .btn:hover {
  transform: scale(1.1);
  transition: transform 0.1s ease-in-out;
}

/* ===== Enrollment Page Styles ===== */
/* Enrollment card styling for grid and list views */

.enrollment-card {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid rgba(229, 231, 235, 1);
}

.enrollment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 107, 183, 0.3);
}

/* Progress bar styling for enrollments */
.enrollment-card .progress {
  background-color: rgba(229, 231, 235, 1);
}

.enrollment-card .progress-bar {
  transition: width 0.3s ease-in-out;
}

/* List view enrollment item styling */
.list-group-item.list-group-item-action {
  transition: all 0.15s ease-in-out;
}

.list-group-item.list-group-item-action:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
  transform: translateX(2px);
}

/* Enrollment status badge styling */
.enrollment-card .badge {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Mobile responsive styles for enrollments */
@media (max-width: 768px) {
  .enrollment-card .card-title {
    font-size: 0.95rem;
  }

  .enrollment-card .small {
    font-size: 0.8rem;
  }

  /* Adjust progress bar height for mobile */
  .enrollment-card .progress {
    height: 4px !important;
  }
}

/* Dark mode styles for enrollments */
html[data-bs-theme="dark"] .enrollment-card {
  border-color: #495057;
  background-color: #252a2f;
}

html[data-bs-theme="dark"] .enrollment-card:hover {
  border-color: rgba(146, 197, 253, 0.5);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

html[data-bs-theme="dark"] .enrollment-card .progress {
  background-color: #1f2937;
}

html[data-bs-theme="dark"] .list-group-item.list-group-item-action:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-bs-theme="dark"] .enrollment-card .card-title {
  color: #ffffff;
}

html[data-bs-theme="dark"] .enrollment-card .text-muted {
  color: #adb5bd !important;
}

/* Enrollment icon background styling */
.enrollment-card .bg-light.rounded.p-2 {
  background-color: #f0f0f3 !important;
}

html[data-bs-theme="dark"] .enrollment-card .bg-light.rounded.p-2 {
  background-color: #3c3e41 !important;
}

/* ===== Documents Grid Column Styling ===== */
/* Fixed width columns for toggle caret, Status and Actions, expandable Document Name column */

/* Make all badge text uppercase on Documents page grids */
.documents-grid .badge {
  text-transform: uppercase !important;
}

/* Make all badge text uppercase on Documents.razor page */
.documents-status-column .badge,
.documents-name-column .badge,
.documents-actions-column .badge {
  text-transform: uppercase !important;
}

/* Make all badge text uppercase on Insurance.razor Documents tab */
.tab-card .badge {
  text-transform: uppercase !important;
}

.documents-grid .table th:nth-child(1),
.documents-grid .table td:nth-child(1) {
  width: 72px; /* Toggle caret column - max 72px as requested */
  min-width: 72px;
  max-width: 72px;
  text-align: center;
}

.documents-grid .table th:nth-child(2),
.documents-grid .table td:nth-child(2) {
  width: auto; /* Document Name column - expands to fill remaining space */
  min-width: 200px; /* Minimum width to ensure readability */
}

.documents-grid .table th:nth-child(3),
.documents-grid .table td:nth-child(3) {
  width: 80px; /* Fixed width for Status column - 80px as requested */
  min-width: 80px;
  max-width: 80px;
  text-align: right;
}

.documents-grid .table th:nth-child(4),
.documents-grid .table td:nth-child(4) {
  width: 80px; /* Fixed width for Actions column - 80px as requested */
  min-width: 80px;
  max-width: 80px;
  text-align: right;
}

/* Ensure table layout is fixed for consistent column widths */
.documents-grid .table {
  table-layout: fixed;
  width: 100%;
}

.table th > span {
  margin-left: 5px;
}

/* Additional CSS classes for column styling */
.documents-name-column {
  width: 85% !important;
  min-width: 85% !important;
}

.documents-status-column,
.documents-actions-column {
  text-align: left !important;
  width: 100px !important;
  max-width: 100px !important;
}

.documents-status-header,
.documents-actions-header {
  text-align: left !important;
  width: 100px !important;
  max-width: 100px !important;
}

html[data-bs-theme="dark"]
  .documents-grid
  .table
  tbody
  tr.bb-grid-detail-view-row-expanded {
  background-color: #3a3a3c !important;
}

html[data-bs-theme="dark"]
  .documents-grid
  .table
  tbody
  tr.bb-grid-detail-view-row-expanded:hover {
  background-color: #3a3a3c !important;
}

html[data-bs-theme="dark"]
  .documents-grid
  .table
  tbody
  tr.bb-grid-detail-view-row {
  background-color: #2c2c2e !important;
}

html[data-bs-theme="dark"]
  .documents-grid
  .table
  tbody
  tr.bb-grid-detail-view-row:hover {
  background-color: #2c2c2e !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .documents-grid .table th:nth-child(1),
  .documents-grid .table td:nth-child(1) {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
  }

  .documents-grid .table th:nth-child(2),
  .documents-grid .table td:nth-child(2) {
    min-width: 150px;
  }

  .documents-grid .table th:nth-child(3),
  .documents-grid .table td:nth-child(3) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }

  /* Hide Actions column in mobile view */
  .documents-grid .table th:nth-child(4),
  .documents-grid .table td:nth-child(4) {
    display: none !important;
  }
}

/* ===== Documents Grid Actions Button Styling ===== */
/* Dark mode Actions buttons styling for desktop view */
@media (min-width: 769px) {
  html[data-bs-theme="dark"] .documents-grid .btn-light {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: white !important;
  }

  html[data-bs-theme="dark"] .documents-grid .btn-light:hover {
    background-color: #343a40 !important;
    border-color: #343a40 !important;
    color: white !important;
  }

  html[data-bs-theme="dark"] .documents-grid .btn-light:focus,
  html[data-bs-theme="dark"] .documents-grid .btn-light:active {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
  }
}

.master-switch div.form-switch input.form-check-input {
  cursor: pointer;
}

.quick-actions-container .row.g-2 {
  gap: 1rem;
}

.quick-actions-container .col-12.col-sm-6.col-lg-6.col-xl-6 {
  padding: 0.5rem;
}

.quick-actions-container small {
  font-size: 0.625rem;
}

.quick-actions-card-font {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
}

.quick-actions-card-1 {
  background: radial-gradient(circle, #FFCF7A -100%, #FFA400 100%);
  transition: all 0.3s ease-in-out;
}

.quick-actions-card-1:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 6px 12px rgba(42, 88, 175, 0.2);
  background: radial-gradient(circle, #FFCF7A -100%, #FFA400 100%);
}

.quick-actions-card-2 {
  background: radial-gradient(circle, #00A88E -100%, #005144 100%);
  transition: all 0.3s ease-in-out;
}

.quick-actions-card-2:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 6px 12px rgba(10, 107, 71, 0.2);
  background: radial-gradient(circle, #00A88E -100%, #005144 100%);
}

.quick-actions-card-3 {
  background: radial-gradient(circle, #808899 -100%, #2B2D33 100%);
  transition: all 0.3s ease-in-out;
}

.quick-actions-card-3:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 6px 12px rgba(61, 62, 184, 0.2);
  background: radial-gradient(circle, #808899 -100%, #2B2D33 100%);
}

.quick-actions-card-4 {
  background: radial-gradient(circle, #0097DC -100%, #005176 100%);
  transition: all 0.3s ease-in-out;
}

.quick-actions-card-4:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 6px 12px rgba(90, 45, 145, 0.2);
  background: radial-gradient(circle, #0097DC -100%, #005176 100%);
}

.quick-actions-card-1:hover .bi,
.quick-actions-card-2:hover .bi,
.quick-actions-card-3:hover .bi,
.quick-actions-card-4:hover .bi {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

.quick-actions-card-1 .bi,
.quick-actions-card-2 .bi,
.quick-actions-card-3 .bi,
.quick-actions-card-4 .bi {
  transition: transform 0.2s ease-in-out;
}

.tab-card-header {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.nav-tabs {
  border-bottom: none !important;
}

@media (max-width: 991.98px) {
  .nav-tabs {
    flex-wrap: unset !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .nav-tabs > button {
    text-wrap: nowrap !important;
  }

  th {
    text-wrap: nowrap !important;
  }
}

.nav-link {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.15);
}

.card .nav-link {
  box-shadow: none;
}

.card.tab-card {
  border-top-left-radius: 0px !important;
}

.card .tab-card {
  box-shadow: none;
}

.card.tab-card > .card-header {
  border-top-left-radius: 0px !important;
}

.master-vendor > .form-check-input {
  height: 1.5rem !important;
  cursor: pointer !important;
  border-color: #bfbfbf;
  border-width: 1.15px;

}

[data-bs-theme="dark"] .master-vendor > .form-check-input {
  border-color: #657079;
  border-width: 1.15px;
}

.form-switch.master-vendor .form-check-input {
  width: 5rem !important;
}

.master-vendor > .form-check-input:checked {
  background-color: #a97c28;
  border: 0 !important;
}

.new-portal .form-check-input:checked {
  background-color: #055160;
  border: 0 !important;
}

[data-bs-theme="dark"] .new-portal .form-check-input:checked {
  background-color: #6DDEF4;
  border: 0 !important;
}

[data-bs-theme="dark"] .new-portal .form-check-input {
  border-color: #bfbfbf;
  color: #bfbfbf;
  border-width: 0.75px;
}

.master-switch {
  color: #8c8c8c;
}

.master-switch.checked {
  color: white;
}

[data-bs-theme="dark"] .master-switch {
  color: white;
}

[data-bs-theme="dark"] .master-switch.checked {
  color: white;
}

/* Master/Vendor switch conditional classes */
.master-switch-master {
  position: absolute;
  left: 10px;
  right: unset;
  bottom: 4px;
  color: white;
}

.master-switch-vendor {
  position: absolute;
  right: 10px;
  left: unset;
  bottom: 4px;
  color: #8c8c8c;
}

[data-bs-theme="dark"] .master-switch-vendor {
  color: white;
}

.search-filter .input-group-text {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.search-filter .form-control {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 0.875rem;
}
.search-filter .form-control:focus {
  border-color: unset;
  border: 0px;
  outline: unset;
  box-shadow: unset;
}

.search-filter:focus-within {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-color: rgb(222, 226, 230);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-radius: 1rem;
}

.input-group-text {
  font-size: 14px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  line-height: 1;
}

/* ===== Business Page Styles ===== */
/* Business card styling for grid view */

.business-card {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid rgba(229, 231, 235, 1);
  height: 100%;
}

.business-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 107, 183, 0.3);
}

/* Business card header styling */
.business-card .card-header {
  border-bottom: 1px solid rgba(229, 231, 235, 1);
}

/* Payment method item styling */
.business-card .bg-light.rounded {
  border: 1px solid rgba(229, 231, 235, 0.5);
  transition: all 0.15s ease-in-out;
}

/* Business card footer styling */
.business-card .card-footer {
  border-top: 1px solid rgba(229, 231, 235, 1);
}

/* Business card button styling */
.business-card .btn {
  transition: all 0.15s ease-in-out;
}

.business-card .btn:hover {
  transform: translateY(-1px);
}

/* Mobile responsive styles for business cards */
@media (max-width: 768px) {
  .business-card .card-title {
    font-size: 1rem;
  }

  .business-card .small {
    font-size: 0.8rem;
  }

  .business-card .card-footer {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  .business-card .card-footer .btn {
    width: 100%;
  }
}

/* Dark mode styles for business cards */
html[data-bs-theme="dark"] .business-card {
  border-color: #495057;
}

html[data-bs-theme="dark"] .business-card:hover {
  border-color: rgba(146, 197, 253, 0.5);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

html[data-bs-theme="dark"] .business-card .card-header {
  border-bottom-color: #495057;
}

html[data-bs-theme="dark"] .business-card .bg-light.rounded {
  border-color: rgba(73, 80, 87, 0.5);
}

html[data-bs-theme="dark"] .business-card .card-footer {
  border-top-color: #495057;
}

html[data-bs-theme="dark"] .business-card .card-title {
  color: #ffffff;
}

html[data-bs-theme="dark"] .business-card .text-muted {
  color: #adb5bd !important;
}

/* Business icon background styling */
.business-card .bg-light.rounded.p-2 {
  background-color: #f0f0f3 !important;
}

/* Business page empty state styling */
.business-empty-state {
  padding: 3rem 1rem;
  text-align: center;
}

.business-empty-state .text-muted {
  font-size: 1.1rem;
}

/* Business page loading state styling */
.business-loading-state {
  padding: 3rem 1rem;
  text-align: center;
}

.business-loading-state .spinner-border {
  width: 3rem;
  height: 3rem;
}

.card {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.15);
}

html[data-bs-theme="dark"] .card {
  box-shadow: none;
}

.fixed-w-col {
  width: 175px;
  max-width: 175px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-w-col-xs {
  width: 100px;
  max-width: 100px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-w-col-sm {
  width: 130px !important;
  max-width: 130px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-w-col-md {
  width: 230px !important;
  max-width: 230px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-w-col-lg {
  width: 325px !important;
  max-width: 325px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-wrap {
  white-space: nowrap !important;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: #1b6ec2;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

code {
  color: #c02d76;
}

/* ===== StatCard Styling ===== */
/* Apply similar contrast patterns to dashboard stat icon containers and icons */

/* Common dashboard icon container styling */
.dashboard-icon-bg {
  width: 38px;
  height: 38px;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Primary (Blue) Icon Containers - following .text-bg-danger pattern */
.dashboard-icon-primary,
.btn-primary,
.text-bg-primary,
.bg-primary {
  color: #0d6efd !important;
  background-color: #cfe2ff !important;

}

.bg-primary > .text-white {
  color: #0d6efd !important;
}

.progress-bar.bg-primary {
  background-color: #0d6efd !important;
}

[data-bs-theme="dark"] .dashboard-icon-primary,
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-primary > .text-white {
  color: #6ea8fe !important;
  background-color: #1e3a5f !important;
}

[data-bs-theme="dark"] .text-primary {
  color: #6ea8fe !important;
}

[data-bs-theme="dark"] .progress-bar.bg-primary {
  background-color: #6ea8fe !important;
}

/* Secondary (Grey) Icon Containers */
.dashboard-icon-secondary,
.btn-secondary,
.bg-secondary,
.text-bg-secondary {
  color: #6c757d !important;
  background-color: #e2e3e5 !important;
}

.bg-secondary > .text-white,
.text-bg-secondary {
  color: #6c757d !important;
}

.progress-bar.bg-secondary {
  background-color: #6c757d !important;
}

[data-bs-theme="dark"] .dashboard-icon-secondary,
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .bg-secondary,
[data-bs-theme="dark"] .bg-secondary > .text-white,
[data-bs-theme="dark"] .text-bg-secondary {
  color: #adb5bd !important;
  background-color: #474c51 !important;
}

[data-bs-theme="dark"] .text-secondary {
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .progress-bar.bg-secondary {
  background-color: #adb5bd !important;
}

/* Warning (Orange/Yellow) Icon Containers */
.dashboard-icon-warning,
.bg-warning,
.text-bg-warning {
  color: #ca8a03 !important;
  background-color: #fef9c3 !important;
}

.text-warning,
.bg-warning > .text-white,
.text-bg-warning {
  color: #ca8a03 !important;
}

.progress-bar.bg-warning {
  background-color: #fef9c3 !important;
}

[data-bs-theme="dark"] .dashboard-icon-warning,
[data-bs-theme="dark"] .bg-warning,
[data-bs-theme="dark"] .text-bg-warning,
[data-bs-theme="dark"] .bg-warning > .text-white,
[data-bs-theme="dark"] .text-bg-warning {
  color: #facc14 !important;
  background-color: #713f11 !important;
}

[data-bs-theme="dark"] .text-warning {
  color: #facc14 !important;
}

[data-bs-theme="dark"] .progress-bar.bg-warning {
  background-color: #facc14 !important;
}

/* Success (Green) Icon Containers */
.dashboard-icon-success,
.bg-success,
.btn-success,
.text-bg-success {
  color: #198754 !important;
  background-color: #d1e7dd !important;
}

[data-bs-theme="dark"] .text-success {
  color: #75b798 !important;
}

.bg-success > .text-white,
.text-bg-success {
  color: #198754 !important;
}

.progress-bar.bg-success {
  background-color: #198754 !important;
}

[data-bs-theme="dark"] .bg-success,
[data-bs-theme="dark"] .text-bg-success,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .dashboard-icon-success,
[data-bs-theme="dark"] .bg-success > .text-white,
[data-bs-theme="dark"] .text-bg-success {
  color: #75b798 !important;
  background-color: #0f5132 !important;
}

[data-bs-theme="dark"] .progress-bar.bg-success {
  background-color: #75b798 !important;
}

/* Danger (Red) Icon Containers */
.text-bg-danger,
.dashboard-icon-danger,
.bg-danger {
  color: #e63345 !important;
  background-color: #ffd2db !important;
}

.progress-bar.bg-danger {
  background-color: #e63345 !important;
}

[data-bs-theme="dark"] .text-bg-danger,
[data-bs-theme="dark"] .dashboard-icon-danger,
[data-bs-theme="dark"] .bg-danger {
  color: #efb8bd !important;
  background-color: #73282f !important;
}

[data-bs-theme="dark"] .progress-bar.bg-danger {
  background-color: #efb8bd !important;
}

/* Info (Cyan) Icon Containers */
.dashboard-icon-info,
.bg-info,
.tab-card .badge.bg-info,
.tab-card .badge.text-bg-info,
.badge.text-bg-info {
  color: #0894b0 !important;
  background-color: #d1e6e9 !important;
}

.btn-info {
  color: #89d6e5 !important;
  background-color: #055160 !important;
}

.text-info {
  color: #087990 !important;
}

[data-bs-theme="dark"] .dashboard-icon-info,
[data-bs-theme="dark"] .bg-info,
[data-bs-theme="dark"] .tab-card .badge.bg-info,
[data-bs-theme="dark"] .tab-card .badge.text-bg-info,
[data-bs-theme="dark"] .badge.text-bg-info {
  color: #abdde7 !important;
  background-color: #055160 !important;
}

[data-bs-theme="dark"] .btn-info {
  color: #89d6e5 !important;
  background-color: #055160 !important;
  border-color: #055160 !important;
}

[data-bs-theme="dark"] .text-info {
  color: #6edff6 !important;
}

[data-bs-theme="dark"] .progress-bar.bg-info {
  background-color: #5faebe !important;
}

.dashboard-change-indicator {
  font-weight: 800 !important;
}

/* =============================== */
/* ===== StatCard Styling ===== */
/* =============================== */
/* StatCard Shimmer Styles */
.shimmer-icon-bg {
  width: 32px;
  height: 32px;
  border-radius: 0.375rem;
  background: linear-gradient(90deg, #d5d7d7 25%, #c9cbcb 50%, #d5d7d7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.stat-shimmer-line {
  border-radius: 4px;
  background: linear-gradient(90deg, #d5d7d7 25%, #c9cbcb 50%, #d5d7d7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.stat-shimmer-line-label {
  width: 60px;
  height: 16px;
}

.stat-shimmer-line-title {
  width: 100px;
  height: 26px;
}

.stat-shimmer-line-diff {
  width: 30px;
  height: 16px;
}

.stat-shimmer-line-footer {
  width: 120px;
  height: 14px;
}

.stat-shimmer-icon-bg {
  width: 38px;
  height: 38px;
  border-radius: 0.375rem;
}

/* Dark mode shimmer styles */
[data-bs-theme="dark"] .stat-shimmer-icon-bg,
[data-bs-theme="dark"] .stat-shimmer-line {
  background: linear-gradient(90deg, #5a6570 25%, #4c5560 50%, #5a6570 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Add slight delay to different elements for more realistic effect */
.shimmer-line-title {
  animation-delay: 0.1s;
}

.shimmer-line-diff {
  animation-delay: 0.2s;
}

.shimmer-line-footer {
  animation-delay: 0.3s;
}

/* =============================== */
/* ===== ShimmerCard Styling ===== */
/* =============================== */
/* Light mode styles */
.shimmer-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
}

.shimmer-card-body {
  padding: 1rem;
}

.shimmer-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, #d5d7d7 25%, #c9cbcb 50%, #d5d7d7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.shimmer-line {
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #d5d7d7 25%, #c9cbcb 50%, #d5d7d7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.shimmer-line-title {
  width: 140px;
  height: 18px;
}

.shimmer-line-subtitle {
  width: 200px;
  height: 14px;
}

.shimmer-line-amount {
  width: 80px;
  height: 16px;
}

.shimmer-line-small {
  width: 100px;
  height: 12px;
}

.shimmer-badge {
  width: 60px;
  height: 24px;
  border-radius: 0.375rem;
  background: linear-gradient(90deg, #d5d7d7 25%, #c9cbcb 50%, #d5d7d7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.shimmer-badge-small {
  width: 80px;
  height: 20px;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #d5d7d7 25%, #c9cbcb 50%, #d5d7d7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.shimmer-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d5d7d7 25%, #c9cbcb 50%, #d5d7d7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Dark mode styles */
/* Support for explicit dark mode class (if using a CSS framework like Bootstrap or Tailwind) */
.dark .shimmer-card,
[data-bs-theme="dark"] .shimmer-card,
[data-theme="dark"] .shimmer-card {
  background: #1a1a1a;
  border: 1px solid #333;
}

.dark .shimmer-circle,
[data-bs-theme="dark"] .shimmer-circle,
[data-theme="dark"] .shimmer-circle {
  background: linear-gradient(90deg, #5a6570 25%, #4c5560 50%, #5a6570 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .shimmer-line,
[data-bs-theme="dark"] .shimmer-line,
[data-theme="dark"] .shimmer-line {
  background: linear-gradient(90deg, #5a6570 25%, #4c5560 50%, #5a6570 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .shimmer-badge,
[data-bs-theme="dark"] .shimmer-badge,
[data-theme="dark"] .shimmer-badge {
  background: linear-gradient(90deg, #5a6570 25%, #4c5560 50%, #5a6570 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .shimmer-badge-small,
[data-bs-theme="dark"] .shimmer-badge-small,
[data-theme="dark"] .shimmer-badge-small {
  background: linear-gradient(90deg, #5a6570 25%, #4c5560 50%, #5a6570 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .shimmer-icon,
[data-bs-theme="dark"] .shimmer-icon,
[data-theme="dark"] .shimmer-icon {
  background: linear-gradient(90deg, #5a6570 25%, #4c5560 50%, #5a6570 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Add slight delay to different elements for more realistic effect */
.shimmer-line:nth-child(2) {
  animation-delay: 0.1s;
}

.shimmer-badge {
  animation-delay: 0.2s;
}

.shimmer-icon {
  animation-delay: 0.3s;
}

/* ===== Enrollment Mobile Layout Styles ===== */
/* Mobile responsive styles for enrollment cards */
@media (max-width: 768px) {
  /* Make the main enrollment container stack vertically on mobile */
  .settlement-card .card-body .d-flex.justify-content-between {
    flex-direction: column !important;
  }

  .record-action-row {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Make enrollment-main full width on mobile */
  #enrollment-main {
    width: 100% !important;
  }

  /* Make enrollment-actions a column layout on mobile */
  #enrollment-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  /* First row container for status badge and progress (justified between) */
  #enrollment-actions .enrollment-actions-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* Second row for arrow icon (centered) */
  #enrollment-actions .enrollment-actions-row-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  /* Make progress section inline on mobile only */
  #enrollment-actions .progress-section {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* Hide bullet characters on mobile and make sections stack vertically */
  #enrollment-main .text-muted.small .mx-1,
  #enrollment-main .text-muted.small.mx-2 {
    display: none !important;
  }

  /* Make the package/started date section stack vertically */
  #enrollment-main .text-muted.small {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem;
  }

  /* Make the location/moderation section stack vertically */
  #enrollment-main .d-flex.align-items-center.flex-wrap.gap-1 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  /* Ensure location and moderation sections are on separate lines */
  #enrollment-main
    .d-flex.align-items-center.flex-wrap.gap-1
    > span.text-muted.small.me-2,
  #enrollment-main .d-flex.align-items-center.flex-wrap.gap-1 > .badge {
    margin-bottom: 0.25rem;
  }
}

/* Make progress section inline on mobile only */
#enrollment-actions .progress-section {
  align-items: center !important;
  padding-right: 1rem;
}

@media (max-width: 768px) {
  #enrollment-actions .progress-section {
    padding-right: 0px !important;
  }
}

.unified-loading {
  transition: opacity 0.3s ease-in-out;
}

.unified-loading .spinner-border {
  transition: all 0.3s ease-in-out;
}

.unified-loading p {
  transition: opacity 0.2s ease-in-out;
}

.theme-switcher > button {
  box-shadow: none !important;
}

.badge {
  height: 20px;
  display: inline-block;
  width: fit-content;
  min-width: 6rem;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
}

/* ===== Grid Badge Alignment Styles ===== */
/* Vertically center badges in grid rows and align them properly */

/* Ensure all table cells have vertical alignment */
.table td,
.table th {
  vertical-align: middle !important;
}

/* Specific styling for badge containers in grid cells */
.table td .badge,
.table th .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Right-align badges in grid columns */
.table td.text-right .badge,
.table th.text-right .badge {
  margin-left: auto;
}

.table td.text-center .badge {
  margin-right: auto;
  margin-left: auto;
}

.table td.text-end .badge {
  margin-right: unset;
  margin-left: auto;
}

/* Ensure grid cells containing badges are properly aligned */
.table td:has(.badge),
.table th:has(.badge) {
  text-align: right;
  vertical-align: middle !important;
}

/* Alternative approach for browsers that don't support :has() */
.grid-status-column {
  text-align: right !important;
  vertical-align: middle !important;
}

.grid-status-column .badge {
  margin-left: auto;
}

/* Specific styling for span elements containing badges */
.table td span.badge,
.table th span.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Ensure proper vertical centering for BlazorBootstrap grids */
.bb-grid .table td,
.bb-grid .table th {
  vertical-align: middle !important;
}

.bb-grid .table td .badge,
.bb-grid .table th .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Remove margin-end from span elements in grid headers */
.table th span.me-2,
.table thead th span.me-2 {
  margin-right: 0 !important;
}

/* More specific selector for BlazorBootstrap grid headers */
.bb-grid .table th span.me-2,
.bb-grid .table thead th span.me-2 {
  margin-right: 0 !important;
}

/* Ensure proper alignment for different text alignment classes */
.table td[class*="text-center"],
.table th[class*="text-center"] {
  text-align: center !important;
  vertical-align: middle !important;
}

.table td[class*="text-end"],
.table th[class*="text-end"] {
  text-align: end !important;
  vertical-align: middle !important;
}

.table td[class*="text-start"],
.table th[class*="text-start"] {
  text-align: start !important;
  vertical-align: middle !important;
}

.no-ml th > span.me-2 {
  margin-left: 0 !important;
}

/* Specific fixes for Documents.razor status column */
.documents-status-column {
  vertical-align: middle !important;
}

.documents-status-column .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-bar {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ===== ActionButton Component Styles ===== */
/* Base ActionButton styling for light and dark modes */

.action-button {
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
}

.action-button:hover {
  transform: translateY(-1px);
}

.action-button:active {
  transform: translateY(0);
}

/* Circular variant - round icon-only buttons */
.action-button-rounded {
  border-radius: 25% !important;
  padding: 0.5rem !important;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon with text variant */
.action-button-icon-text {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
}

/* Light mode styling */
.action-button.btn-light {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #495057;
}

.action-button.btn-light:hover {
  background-color: #e7e9eb;
  border-color: #dee2e6;
  color: #495057;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.action-button.btn-light:focus,
.action-button.btn-light:active {
  background-color: #dee2e6;
  border-color: #dee2e6;
  color: #495057;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

/* Dark mode styling */
[data-bs-theme="dark"] .action-button.btn-light {
  background-color: #343a40;
  border-color: #495057;
  color: #f8f9fa;
}

[data-bs-theme="dark"] .action-button.btn-light:hover {
  background-color: #495057;
  border-color: #6c757d;
  color: #ffffff;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .action-button.btn-light:focus,
[data-bs-theme="dark"] .action-button.btn-light:active {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.25);
}

/* Primary action button styling */
.action-button.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff;
}

.action-button.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #ffffff;
  box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .action-button.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff;
}

[data-bs-theme="dark"] .action-button.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #ffffff;
  box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.35);
}

/* Success action button styling */
.action-button.btn-success {
  background-color: #198754;
  border-color: #198754;
  color: #ffffff;
}

.action-button.btn-success:hover {
  background-color: #157347;
  border-color: #146c43;
  color: #ffffff;
  box-shadow: 0 0.125rem 0.25rem rgba(25, 135, 84, 0.25);
}

/* Danger action button styling */
.action-button.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #ffffff;
}

.action-button.btn-danger:hover {
  background-color: #bb2d3b;
  border-color: #b02a37;
  color: #ffffff;
  box-shadow: 0 0.125rem 0.25rem rgba(220, 53, 69, 0.25);
}

/* Warning action button styling */
.action-button.btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000000;
}

.action-button.btn-warning:hover {
  background-color: #ffca2c;
  border-color: #ffc720;
  color: #000000;
  box-shadow: 0 0.125rem 0.25rem rgba(255, 193, 7, 0.25);
}

/* Info action button styling */
.action-button.btn-info {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
  color: #000000;
}

.action-button.btn-info:hover {
  background-color: #31d2f2;
  border-color: #25cff2;
  color: #000000;
  box-shadow: 0 0.125rem 0.25rem rgba(13, 202, 240, 0.25);
}

/* Disabled state */
.action-button:disabled,
.action-button.disabled {
  opacity: 0.65;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Focus states for accessibility */
.action-button:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

[data-bs-theme="dark"] .action-button:focus-visible {
  outline-color: #6ea8fe;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .action-button-circular {
    width: 2rem;
    height: 2rem;
    padding: 0.375rem !important;
  }

  .action-button-icon-text {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
}

.nav-item .btn {
  border-radius: 0 !important;
}

.nav-item:hover .btn {
  border-radius: 0 !important;
}

.nav-item .btn:hover {
  border-radius: 0 !important;
}

.nav-item.btn:hover {
  border-radius: 0 !important;
}

.nav-item .btn:focus {
  border-radius: 0 !important;
}

.nav-item .btn:active {
  border-radius: 0 !important;
}

.nav-item.btn {
  border-radius: 0 !important;
}

.nav-item.btn:focus {
  border-radius: 0 !important;
}

.nav-item.btn:active {
  border-radius: 0 !important;
}

.text-dark {
  color: black !important;
}

[data-bs-theme="dark"] .text-dark {
  color: #f8f9fa !important;
}

/* Small radio buttons for forms */
.form-check > .form-check-input.radio-input {
  width: 1em !important;
  height: 1em !important;
}

.toast-container > .toast.fade.show {
  opacity: 1 !important;
  background-color: rgba(249, 250, 251, 100) !important;
  transition: none !important;
}

.toast-container > .toast.fade.show > .toast-header,
.toast-container > .toast.fade.show > .toast-body {
  opacity: 1 !important;
  background-color: rgba(249, 250, 251, 100) !important;
}

[data-bs-theme="dark"] .toast-container > .toast.fade.show {
  opacity: 1 !important;
  background-color: rgb(33, 37, 41) !important;
  transition: none !important;
}

[data-bs-theme="dark"] .toast-container > .toast.fade.show > .toast-header,
[data-bs-theme="dark"] .toast-container > .toast.fade.show > .toast-body {
  opacity: 1 !important;
  background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
}

/* Ensure Theme Switcher and other dropdowns appear above the Portal Choice Banner */
.theme-switcher .dropdown-menu,
.dropdown-menu.show {
  /* Portal banner now uses z-index: 999; ensure dropdowns stay above */
  z-index: 1050 !important;
}

/* ===== Actions Dropdown Button Styling ===== */
/* Custom styling for Actions dropdown button to match card header height */
.actions-dropdown .dropdown-menu .dropdown-item {
  font-size: 0.875rem !important;
}

/* Ensure the button text is vertically centered */
.actions-dropdown-button .btn-text {
  display: flex;
  align-items: center;
}

.actions-dropdown .dropdown-menu.show {
  padding: 0 4px 4px !important;
}

.nudge-badge-text {
  font-size: 12px !important; vertical-align: middle !important; display: inline-flex !important; align-items: center !important;
}

/* Light Mode - Nudge Action Button */
.nudge-action-btn {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

.nudge-action-btn:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

.nudge-action-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

/* Dark Mode - Nudge Action Button */
[data-bs-theme="dark"] .nudge-action-btn {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .nudge-action-btn:hover {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nudge-action-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
}