/* Fix progress bar container */
/* Add this CSS to your static/css/login.css file */

/* Root Variables for Theming */
:root {
    /* Dark mode (default) */
    --bg-color: #121212;
    --text-color: #F5F5F5;
    --heading-color: #F5F5F5;
  
    --sidebar-border: #2A2A2A;
    --card-bg: #1E1E1E;
    --card-border: rgba(255, 255, 255, 0.05);
    --menu-hover: #252525;
  
    --system-text: #B0B0B0;
  
    /* Original Primary Red Theme Colors */
    --primary-color: #D32F2F;
    --link-color: #D32F2F;
    --link-hover-color: #E57373;
  
    --action-icon-bg: #252525;
  
    /* Table specific colors */
    --table1-header-bg: #1F1F1F;
    --table1-border-color: #2A2A2A;
    --table1-border-alpha-light: rgba(255, 0, 0, 0.1);
    --table1-hover-bg: #252525;
    --table1-text: #F5F5F5;
    --table1-header-text: #B0B0B0;
    --table1-body-bg: transparent;
  
    /* Dropdown Specific */
    --dropdown-bg: var(--card-bg);
    --dropdown-border: var(--card-border);
    --dropdown-item-color: var(--text-color);
    --dropdown-item-hover-bg: var(--menu-hover);
    --dropdown-item-hover-color: var(--link-hover-color);
  
    /* Modal specific */
    --modal-bg: var(--bg-color);
    --modal-border: var(--sidebar-border);
    --modal-header-border: var(--card-border);
    --modal-footer-border: var(--card-border);
    --modal-title-color: var(--heading-color);
    --modal-text-color: var(--text-color);
    --modal-muted-text-color: var(--system-text);
  
  
    /* Input specific */
    --input-bg: #212121;
    --input-border: var(--sidebar-border);
    --input-text: var(--text-color);
    --input-placeholder: var(--system-text);
  
    /* Form Specific */
    --form-text-color: var(--system-text);
  
    --badge-bg: var(--primary-color);
    --code-bg: #212121;
  
    --sidebar-header-height: 60px;
  
    /* Status colors */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
  
    /* Specific element colors */
    --amount-color: var(--table1-text);
    --collected-color: var(--success-color);
    --balance-color: var(--warning-color);
  
    /* Badge Foreground/Text Colors */
    --badge-success-text-color: #FFFFFF;
    --badge-danger-text-color: #FFFFFF;
    --badge-info-text-color: #FFFFFF;
    --badge-warning-text-color: #212121;
    --badge-amount-text-color: #FFFFFF;
    --badge-collected-text-color: var(--badge-success-text-color);
    --badge-balance-text-color: var(--badge-warning-text-color);
  
    /* Hamburger Border */
    --hamburger-border-color: rgba(211, 47, 47, 0.4);
  
    /* Login Page Specific Colors (from first screenshot - blue/purple/green) */
    --login-primary-color: #6200EE; /* Blue/Purple from first screenshot */
    --login-primary-color-light: #9C27B0; /* Lighter Blue/Purple */
    --login-accent-color: #00C853; /* Green from first screenshot */
    --login-accent-color-light: #69F0AE; /* Lighter Green */
  
    /* Login Page Primary Button Color (Red from latest screenshot) */
    --login-button-primary-color: var(--primary-color); /* Use the main theme's primary red */
    --login-button-primary-color-light: var(--link-hover-color); /* Use the main theme's lighter red for hover */
  
    /* App Card Specific Colors (Themed) */
    --app-card-bg: var(--card-bg); /* Use the main card background variable */
    --app-card-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Dark shadow */
    --app-card-text-color: var(--text-color); /* Use main text color */
    --app-card-hover-shadow: 0 8px 16px rgba(0,0,0,0.6); /* More intense dark shadow */
    --app-card-hover-text-color: var(--link-hover-color); /* Use themed lighter red for hover */
    --app-card-border-gradient-start: var(--primary-color); /* Use themed red */
    --app-card-border-gradient-end: var(--login-accent-color); /* Use themed green */
    --app-card-reflection-color: rgba(255,255,255,0.3); /* Reflection of light on dark background */
    --grid-gap: 1.5rem;
    --grid-padding: 1.5rem;
  
    /* Select2 Specific Colors */
    --select2-bg: var(--input-bg);
    --select2-border: var(--input-border);
    --select2-text: var(--input-text);
    --select2-placeholder: var(--system-text);
    --select2-dropdown-bg: var(--dropdown-bg);
    --select2-dropdown-border: var(--dropdown-border);
    --select2-result-highlight-bg: var(--primary-color);
    --select2-result-highlight-text: #FFFFFF;
    --select2-selection-item-bg: var(--action-icon-bg);
    --select2-selection-item-border: var(--input-border);
    --select2-selection-item-text: var(--text-color);
    --select2-selection-item-close-color: var(--system-text);
    --select2-selected-option-bg: var(--menu-hover); /* Themed background for selected option */
    --select2-selected-option-text: var(--text-color); /* Themed text color for selected option */
  
    --link-color: #D32F2F;
    --link-hover-color: #E57373;
    --card-bg: #1E1E1E;
    --card-border: rgba(255, 255, 255, 0.05);
    --menu-hover: #252525;
    --system-text: #B0B0B0;
    }
  
  /* Light mode */
  .light-mode {
    --bg-color: #ecf0f5; /* Light background color */
    --text-color: #212121;
    --heading-color: #212121;
  
    --sidebar-border: #E0E0E0;
    --card-bg: #F9F9F9; /* Updated to match existing light card background */
    --card-border: #E0E0E0;
    --menu-hover: #F0F0F0;
  
    --system-text: #757575;
  
    /* Original Primary Red Theme Colors */
    --primary-color: #C62828;
    --link-color: var(--primary-color);
    --link-hover-color: #E53935;
  
    --action-icon-bg: #F0F0F0;
  
    /* Table specific colors */
    --table1-header-bg: #F5F5F5;
    --table1-border-color: #E0E0E0;
    --table1-border-alpha-light: rgba(200, 0, 0, 0.1);
    --table1-hover-bg: #F0F0F0;
    --table1-text: var(--text-color);
    --table1-header-text: var(--system-text);
    --table1-body-bg: var(--card-bg);
  
    /* Dropdown Specific */
    --dropdown-bg: var(--card-bg);
    --dropdown-border: var(--card-border);
    --dropdown-item-color: var(--text-color);
    --dropdown-item-hover-bg: var(--menu-hover);
    --dropdown-item-hover-color: var(--link-hover-color);
  
     /* Form Specific */
    --form-text-color: var(--system-text);
    --input-bg: #FFFFFF; /* Light background for inputs */
    --input-border: #D1D5DB; /* Light border color */
    --input-text: #212121; /* Dark text for inputs */
    --input-placeholder: #6B7280; /* Muted placeholder text */
  
  
    /* Status colors */
     --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
  
     /* Specific element colors */
    --amount-color: var(--table1-text);
    --collected-color: var(--success-color);
    --balance-color: var(--warning-color);
  
     /* Badge Foreground/Text Colors */
    --badge-success-text-color: #FFFFFF;
    --badge-danger-text-color: #FFFFFF;
    --badge-info-text-color: #FFFFFF;
    --badge-warning-text-color: #212121;
    --badge-amount-text-color: #FFFFFF;
    --badge-collected-text-color: var(--badge-success-text-color);
    --badge-balance-text-color: var(--badge-warning-text-color);
  
    /* Hamburger Border */
    --hamburger-border-color: rgba(198, 40, 40, 0.4);
  
    /* Login Page Specific Colors (from first screenshot - blue/purple/green) */
    --login-primary-color: #6200EE; /* Blue/Purple from first screenshot */
    --login-primary-color-light: #9C27B0; /* Lighter Blue/Purple */
    --login-accent-color: #00C853; /* Green from first screenshot */
    --login-accent-color-light: #69F0AE; /* Lighter Green */
  
    /* Login Page Primary Button Color (Red from latest screenshot) */
    --login-button-primary-color: var(--primary-color); /* Use the main theme's primary red */
    --login-button-primary-color-light: var(--link-hover-color); /* Use the main theme's lighter red for hover */
  
    /* App Card Specific Colors (Themed) */
    --app-card-bg: var(--card-bg); /* Use the main light card background variable */
    --app-card-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Light shadow */
    --app-card-text-color: #333; /* Keeping original dark text for contrast on light card */
    --app-card-hover-shadow: 0 8px 16px rgba(0,0,0,0.1); /* More intense light shadow */
    --app-card-hover-text-color: var(--link-hover-color); /* Use themed lighter red for hover */
    --app-card-border-gradient-start: var(--primary-color); /* Use themed red */
    --app-card-border-gradient-end: var(--login-accent-color); /* Use themed green */
    --app-card-reflection-color: rgba(0,0,0,0.2); /* Reflection of dark on light background */
    --grid-gap: 1.5rem;
    --grid-padding: 1.5rem;
  
    /* Select2 Specific Colors */
    --select2-bg: var(--input-bg);
    --select2-border: var(--input-border);
    --select2-text: var(--input-text);
    --select2-placeholder: var(--system-text);
    --select2-dropdown-bg: var(--dropdown-bg);
    --select2-dropdown-border: var(--dropdown-border);
    --select2-result-highlight-bg: var(--primary-color);
    --select2-result-highlight-text: #FFFFFF;
    --select2-selection-item-bg: var(--action-icon-bg);
    --select2-selection-item-border: var(--input-border);
    --select2-selection-item-text: var(--text-color);
    --select2-selection-item-close-color: var(--system-text);
     --select2-selected-option-bg: var(--menu-hover); /* Themed background for selected option */
    --select2-selected-option-text: var(--text-color); /* Themed text color for selected option */
  }
  
  
  /* Base Styles */
  @font-face {
    font-family: "cambria";
    src: local("cambria"), url("../fonts/cambria.ttf") format("truetype");
    font-display: swap;
  }
  
  body {
    font-family: cambria, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
  }
  
  /* Text Selection Highlight */
  ::selection {
    background-color: var(--primary-color); /* Use themed red for highlight background */
    color: #FFFFFF; /* Ensure text is visible on red background */
  }
  
  ::-moz-selection {
    background-color: var(--primary-color); /* Use themed red for highlight background (Firefox) */
    color: #FFFFFF; /* Ensure text is visible on red background (Firefox) */
  }
  
  
  /* Watermark background (if needed) */
  body::before {
    content: "";
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    background-attachment: fixed;
    opacity: 0.05;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
  }
  
  /* Links */
  a {
    color: var(--link-color); /* Using red shade */
    text-decoration: none; /* Removed default underline */
    transition: color 0.2s ease;
    font-weight: normal; /* Changed from 600 to normal */
  }
  
  a:hover {
    color: var(--link-hover-color); /* Using lighter red shade */
    text-decoration: none; /* Ensure no underline on hover */
    /* Optional: Add a subtle bottom border on hover for distinction */
    /* border-bottom: 1px solid var(--link-hover-color); */
  }
  
  /* Layout */
  .d-flex {
    display: flex;
  }
  
  
  
  /* Sidebar */
  .sidebar {
    background-color: var(--bg-color);
    border-right: 1px solid var(--sidebar-border);
    height: 100vh;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow by default */
  }
  
  /* Fixed Sidebar Header */
  .sidebar-header {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--sidebar-border);
    height: var(--sidebar-header-height);
    min-height: var(--sidebar-header-height);
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
  }
  
  .sidebar-logo {
    color: var(--primary-color); /* Using primary red for logo */
    font-size: 1.3rem;
    display: flex;
    align-items: center;
  }
  
  .close-sidebar {
    color: var(--text-color);
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  .close-sidebar:hover {
    color: var(--primary-color); /* Hover uses primary red */
  }
  
  /* Scrollable Sidebar Content */
  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    /* scrollbar-color cannot use variables with opacity directly */
    scrollbar-color: rgba(255, 0, 0, 0.3) transparent; /* Use RGBA Red for thumb in dark mode */
  }
  
  .sidebar-content::-webkit-scrollbar {
    width: 4px;
    height: 0; /* Hide horizontal scrollbar by default */
    background-color: transparent;
  }
  
  .sidebar-content:hover::-webkit-scrollbar,
  .sidebar-content:focus::-webkit-scrollbar,
  .sidebar-content:focus-within::-webkit-scrollbar {
    width: 4px;
    height: 4px; /* Show horizontal scrollbar on hover/focus */
  }
  
  .sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 0, 0, 0.3); /* Use RGBA Red */
    border-radius: 4px;
  }
  
  .sidebar-content:hover::-webkit-scrollbar-thumb,
  .sidebar-content:focus::-webkit-scrollbar-thumb,
  .sidebar-content:focus-within::-webkit-scrollbar {
    background-color: rgba(255, 0, 0, 0.6); /* Use RGBA Red */
  }
  
  .light-mode .sidebar-content {
     scrollbar-color: rgba(200, 0, 0, 0.3) transparent; /* Use RGBA Red for thumb in light mode */
  }
  
  .light-mode .sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(200, 0, 0, 0.3); /* Use RGBA Red */
  }
  
  .light-mode .sidebar-content:hover::-webkit-scrollbar-thumb,
  .light-mode .sidebar-content:focus::-webkit-scrollbar-thumb,
  .light-mode .sidebar-content:focus-within::-webkit-scrollbar {
    background-color: rgba(200, 0, 0, 0.5); /* Use RGBA Red */
  }
  
  
  /* Sidebar Menu */
  .system-menu-heading {
    color: var(--system-text);
    font-size: 0.8rem;
    padding: 15px 20px 5px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .menu-item {
    position: relative;
    cursor: pointer;
    color: var(--text-color);
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 4px solid transparent;
    margin-left: 0; /* Ensure no margin */
    width: 100%; /* Full width */
  }
  
  .menu-item:hover {
    background-color: var(--menu-hover);
  }
  
  .menu-item.active,
  .menu-item[aria-expanded="true"] {
    /* Active background uses opacity */
    background-color: rgba(211, 47, 47, 0.15); /* Primary Red with opacity (Dark) */
    border-left-color: var(--primary-color); /* Use primary red */
    color: var(--text-color);
  }
  
  .light-mode .menu-item.active,
  .light-mode .menu-item[aria-expanded="true"] {
      background-color: rgba(198, 40, 40, 0.1); /* Primary Red with opacity (Light) */
      color: var(--primary-color); /* Use primary red */
  }
  
  
  .menu-item.active > a.menu-link,
  .menu-item[aria-expanded="true"] > div,
  .menu-item.active > a.menu-link i,
  .menu-item[aria-expanded="true"] i {
    color: inherit; /* Inherit color from parent .menu-item */
  }
  
  .menu-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: inherit;
    text-decoration: none;
    width: 100%;
    /* Removed font-weight: 600; */
  }
  
  .menu-item > div {
    padding: 12px 20px;
    display: flex;
    align-items: center;
  }
  
  .menu-item i {
    font-size: 1.1rem;
    transition: color 0.2s ease;
    min-width: 20px; /* Ensure consistent width for icons */
    text-align: center; /* Center the icon */
  }
  
  .arrow-icon {
    transition: transform 0.3s ease;
  }
  
  /* Arrow rotation states */
  .menu-item[aria-expanded="true"] .arrow-icon {
    transform: rotate(90deg);
  }
  
  .menu-item[aria-expanded="false"] .arrow-icon {
    transform: rotate(0deg);
  }
  
  /* Submenu (Dropdown in Sidebar) */
  .submenu {
    background-color: var(--dropdown-bg); /* Use themed dropdown background */
    padding: 0;
    width: 100%; /* Full width */
    margin-left: 0; /* No margin */
    border-left: none; /* Remove left border */
    border-top: 1px solid var(--dropdown-border); /* Add subtle top border */
  }
  
  .submenu-item {
    display: flex;
    align-items: center;
    padding: 8px 15px 8px 40px; /* Reduced vertical padding, increased left padding */
    color: var(--dropdown-item-color); /* Use themed dropdown item color */
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 4px solid transparent;
    text-decoration: none;
    width: 100%; /* Full width */
    /* Removed font-weight: 600; */
  }
  
  .submenu-item:hover {
    background-color: var(--dropdown-item-hover-bg); /* Themed hover background */
    color: var(--dropdown-item-hover-color); /* Themed hover color (lighter red) */
  }
  
  .submenu-item.active {
    /* Active background uses opacity */
     background-color: rgba(211, 47, 47, 0.15); /* Primary Red with opacity (Dark) */
    border-left-color: var(--primary-color); /* Use primary red */
    color: var(--text-color);
  }
  
  .light-mode .submenu-item.active {
     background-color: rgba(198, 40, 40, 0.1); /* Primary Red with opacity (Light) */
     color: var(--primary-color); /* Use primary red */
  }
  
  
  
  
  /* Generic Dropdown Menu Styles (e.g., Bootstrap .dropdown-menu) */
  /* Assuming a standard Bootstrap-like dropdown structure */
  .dropdown-menu {
      background-color: var(--dropdown-bg);
      border: 1px solid var(--dropdown-border);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
      padding: 5px 0; /* Adjust padding */
  }
  
  .dropdown-item {
      color: var(--dropdown-item-color);
      padding: 8px 15px; /* Adjust padding for smaller items */
      font-size: 0.9rem; /* Smaller font size */
      transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  .dropdown-item:hover,
  .dropdown-item:focus {
      background-color: var(--dropdown-item-hover-bg);
      color: var(--dropdown-item-hover-color);
  }
  
  .dropdown-item.active {
      background-color: var(--primary-color);
      color: #FFFFFF;
  }
  
  
  .submenu-item i {
    font-size: 0.9rem;
    transition: color 0.2s ease;
    min-width: 18px; /* Ensure consistent width for icons */
    text-align: center; /* Center the icon */
  }
  
  /* Main Content */
  .main-content {
    flex-grow: 1;
    margin-left: 250px;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Header */
  .header {
    background-color: rgba(18, 18, 18, 0.8); /* Dark Black with opacity for glassy effect */
    backdrop-filter: blur(10px); /* Apply blur for glassy effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    position: sticky;
    top: 0;
    z-index: 1020;
    height: 60px; /* Match sidebar header height */
    border-bottom: 1px solid rgba(255, 0, 0, 0.2); /* Subtle red border */
  }
  
  .light-mode .header {
    background-color: rgba(255, 255, 255, 0.8); /* White with opacity for glassy effect in light mode */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(200, 0, 0, 0.2); /* Subtle red border in light mode */
  }
  
  
  .breadcrumb-item a {
    color: var(--system-text);
  }
  
  .breadcrumb-item.active {
    color: var(--text-color);
  }
  
  /* Mobile Header */
  .mobile-header {
    background-color: rgba(18, 18, 18, 0.8); /* Dark Black with opacity for glassy effect */
    backdrop-filter: blur(10px); /* Apply blur for glassy effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    position: sticky;
    top: 0;
    z-index: 1020;
    height: 60px; /* Match sidebar header height */
    border-bottom: 1px solid rgba(255, 0, 0, 0.2); /* Subtle red border */
    display: flex; /* Ensure flexbox is enabled */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Space out logo and actions */
    padding: 0 15px; /* Add padding */
  }
  
  .light-mode .mobile-header {
    background-color: rgba(255, 255, 255, 0.8); /* White with opacity for glassy effect in light mode */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(200, 0, 0, 0.2); /* Subtle red border in light mode */
  }
  
  
  .mobile-logo {
    display: flex;
    align-items: center;
    color: var(--primary-color); /* Using primary red for mobile logo */
    font-size: 1.2rem;
  }
  
  .mobile-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Removed margin-left: auto here to allow individual item positioning */
  }
  
  /* User Actions */
  .user-actions {
    gap: 15px;
    margin-left: auto; /* Push user actions group to the right */
  }
  
  .action-icon,
  .user-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--action-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .action-icon:hover,
  .user-icon:hover {
    background-color: var(--menu-hover);
  }
  
  /* Theme Toggle */
  .mode-switch {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
  }
  
  .mode-icon {
    position: absolute;
    transition: transform 0.5s ease, opacity 0.3s ease;
  }
  
  .moon-icon {
    opacity: 1;
    transform: translateY(0);
  }
  
  .sun-icon {
    opacity: 0;
    transform: translateY(100%);
  }
  
  .light-mode .moon-icon {
    opacity: 0;
    transform: translateY(-100%);
  }
  
  .light-mode .sun-icon {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Hamburger Button */
  .hamburger-btn {
    background: none;
    border: 1px solid var(--hamburger-border-color); /* Faint red border */
    border-radius: 4px; /* Slightly rounded corners */
    cursor: pointer;
    padding: 5px; /* Add padding inside the border */
    width: 40px; /* Adjusted size to accommodate padding and border */
    height: 30px; /* Adjusted size */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  
  .hamburger-btn:hover {
     background-color: rgba(211, 47, 47, 0.1); /* Subtle red background on hover */
     border-color: var(--primary-color); /* More opaque red border on hover */
  }
  
  
  .hamburger-btn .menu-icon {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .hamburger-btn .menu-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }
  
  body.sidebar-active .hamburger-btn .menu-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  body.sidebar-active .hamburger-btn .menu-icon span:nth-child(2) {
    opacity: 0;
  }
  
  body.sidebar-active .hamburger-btn .menu-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  
  /* Cards */
  .card {
    background-color: var(--card-bg); /* Use Hex variable */
    border: 1px solid var(--card-border); /* Use Hex variable */
    border-radius: 10px; /* Keep card border radius as in previous version */
    margin-bottom: 20px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); /* Matching example table1 container */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color); /* Use Hex variable */
    overflow: hidden; /* Important for border-radius on content */
  }
  
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); /* Slightly more intense hover shadow */
  }
  
  
  .card-header {
    /* background-color: rgba(0, 0, 0, 0.1);  Removed - use theme background if header is inside card */
    border-bottom: 1px solid var(--card-border);
    color: var(--heading-color);
    padding: 15px 20px;
  }
  
  .card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .card-title i {
    color: var(--primary-color); /* Use primary red for icons */
  }
  
  .card-body {
    padding: 0; /* Remove padding so table1 edges meet card edges */
  }
  
  .card-footer {
    background-color: rgba(0, 0, 0, 0.05); /* Use RGBA for consistency */
    border-top: 1px solid var(--card-border);
    padding: 12px 20px;
  }
  
  /* Sidebar Overlay (Mobile) */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Use RGBA for consistency */
    z-index: 1025;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  /* Content Area Styles */
  .content-area {
    flex-grow: 1;
    padding: 20px;
  }
  
  /* Table1 Styles */
  .table1 {
    width: 100%;
    margin: 0;
    color: var(--table1-text);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    border: 1px solid var(--table1-border-alpha-light);
    border-radius: 0;
    overflow: hidden;
  }
  
  .card .table1 {
      border: none;
      border-radius: 0;
  }
  
  .table1 thead th {
    background-color: var(--table1-header-bg);
    color: var(--table1-header-text);
    border-bottom: 1px solid var(--table1-border-alpha-light);
    padding: 12px 16px;
    text-align: left;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  /* Border after the first column header */
  .table1 thead th:first-child {
    border-right: 1px solid var(--table1-border-alpha-light);
  }
  
  .table1 tbody tr:hover {
    background-color: var(--table1-hover-bg);
  }
  
  .table1 tbody td {
    border-bottom: 1px solid var(--table1-border-alpha-light);
    padding: 4px 16px;
    vertical-align: middle;
    transition: background-color 0.2s ease;
    color: inherit;
  }
  
  /* Border after the first column data cell */
  .table1 tbody td:first-child {
    border-right: 1px solid var(--table1-border-alpha-light);
  }
  
  .table1 tbody tr:last-child td {
    border-bottom: none;
  }
  
  .table1-responsive {
     overflow-x: auto;
     scrollbar-width: thin;
     scrollbar-color: rgba(255, 0, 0, 0.4) transparent;
  }
  
  .table1-responsive::-webkit-scrollbar {
    height: 6px;
  }
  
  .table1-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(255, 0, 0, 0.4);
    border-radius: 3px;
  }
  
  .light-mode .table1-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(200, 0, 0, 0.4);
  }
  
  .table1-responsive::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  /* Alternating row colors */
  .table1 tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 0, 0, 0.03); /* Subtle red for dark mode */
  }
  
  .light-mode .table1 tbody tr:nth-of-type(odd) {
    background-color: rgba(200, 0, 0, 0.109); /* Even more subtle red for light mode */
  }
  
  /* Badge Styles */
  .badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    min-width: 70px;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  /* Specific badge colors based on status */
  .badge-success {
    background-color: var(--success-color) !important;
    color: var(--badge-success-text-color) !important;
  }
  
  .badge-danger {
    background-color: var(--danger-color) !important;
    color: var(--badge-danger-text-color) !important;
  }
  
  .badge-warning {
    background-color: var(--warning-color) !important;
    color: var(--badge-warning-text-color) !important;
  }
  
  .badge-info {
    background-color: var(--info-color) !important;
    color: var(--info-color) !important;
  }
  
  /* Handle the 'No' badge */
  .bg-secondary,
  .badge-secondary {
    background-color: var(--system-text) !important;
    color: var(--bg-color) !important;
  }
  
  /* Generic .badge-primary */
  .bg-primary,
  .badge-primary {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
  }
  
  /* Custom badge colors */
  .badge-amount {
    background-color: var(--amount-color) !important;
    color: var(--badge-amount-text-color) !important;
  }
  
  .badge-collected {
    background-color: var(--collected-color) !important;
    color: var(--badge-collected-text-color) !important;
  }
  
  .badge-balance {
    background-color: var(--balance-color) !important;
    color: var(--badge-balance-text-color) !important;
  }
  
  /* Pills */
  .badge-pill {
    border-radius: 50rem;
    padding-right: 0.8em;
    padding-left: 0.8em;
  }
  
  /* Code Styles */
  code {
    background-color: var(--code-bg);
    color: var(--text-color);
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border: 1px solid var(--table1-border-color);
  }
  
  /* Action Buttons */
  .action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  
  .action-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--action-icon-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  .view-icon {
    color: var(--primary-color);
  }
  
  .edit-icon {
    color: var(--warning-color);
  }
  
  .delete-icon {
    color: var(--danger-color);
  }

  .success-icon {
    color: var(--success-color);
  }

  .warning-icon {
    color: var(--warning-color);
  }

  .info-icon {
    color: var(--info-color);
  }
  
  .action-icon:hover {
    background-color: var(--menu-hover);
    color: var(--link-hover-color);
  }
  
  /* Search Form */
  .search-input {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
  }
  
  .search-input::placeholder {
    color: var(--input-placeholder);
  }
  
  .search-input:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.25);
    color: var(--input-text);
    outline: none;
  }
  
  .light-mode .search-input:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.25);
  }
  
  .btn-search {
    background-color: var(--action-icon-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  
  .btn-search:hover {
    background-color: var(--menu-hover);
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
  }
  
  
  /* --- Light Search Form Specific Styles --- */
  /* Apply these styles when the .light-search-form class is present */
  .light-search-form .search-input {
      background-color: var(--card-bg); /* Use light card background */
      border-color: var(--card-border); /* Use light card border */
      color: var(--text-color); /* Use main text color */
  }
  
  .light-search-form .search-input::placeholder {
      color: var(--system-text); /* Use system text for placeholder */
  }
  
  .light-search-form .search-input:focus {
      background-color: var(--card-bg); /* Keep background on focus */
      border-color: var(--primary-color); /* Use primary red for border on focus */
      /* Use rgba with the light mode primary color for the focus shadow */
      box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.25);
      color: var(--text-color);
  }
  
  /* Ensure dark mode focus shadow for light search form uses the dark mode primary color */
  /* This might be redundant if the overall theme is dark, but good for explicit control */
  body:not(.light-mode) .light-search-form .search-input:focus {
       border-color: var(--primary-color);
       box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.5);
  }
  
  
  .light-search-form .btn-search {
      background-color: var(--action-icon-bg); /* Use light action icon background */
      border-color: var(--card-border); /* Use light card border */
      color: var(--text-color); /* Use main text color */
  }
  
  .light-search-form .btn-search:hover {
      background-color: var(--menu-hover); /* Use light menu hover background */
      color: var(--link-hover-color); /* Use light link hover color */
      border-color: var(--link-hover-color); /* Use light link hover color for border */
  }
  
  
  /* --- Login Page Specific Styles (Matching Screenshot) --- */
  /* These styles apply specifically when the login theme colors are active */
  /* Ensure these are placed AFTER the general theme styles if login.css is the main theme file */
  
  
  /* Centered logo and text container */
  .logo-container {
      text-align: center;
      margin-bottom: 30px; /* Space below the logo/text block */
  }
  
  .company-name {
      font-size: 1.4rem; /* Adjust font size */
      font-weight: 700;
      color: var(--text-color); /* Use main text color */
      margin-top: 10px; /* Space above company name */
      margin-bottom: 5px; /* Space below company name */
  }
  
  .login-description {
      font-size: 1rem;
      color: var(--system-text); /* Use muted system text color */
      margin-bottom: 20px; /* Space below description */
  }
  
  
  /* Input field focus style */
  /* Overrides the general form-control:focus if login theme is active */
  .login-card .form-control:focus {
      border-color: var(--login-primary-color); /* Use login primary color (blue/purple) for border */
      box-shadow: 0 0 0 0.25rem rgba(98, 0, 238, 0.25); /* Use login primary color with opacity for shadow */
  }
  
  .light-mode .login-card .form-control:focus {
       border-color: var(--login-primary-color);
       box-shadow: 0 0 0 0.25rem rgba(98, 0, 238, 0.25);
  }
  
  
  /* Primary Button (SIGN IN) within the login card */
  /* This rule explicitly styles the login button with the themed red */
  .login-card .btn-primary {
      color: #FFFFFF; /* White text */
      background-color: var(--login-button-primary-color); /* Use the themed red color */
      border-color: var(--login-button-primary-color);
      padding: 12px 20px; /* Slightly more vertical padding */
      font-size: 1.1rem; /* Slightly larger font size */
      font-weight: 700; /* Bolder text */
      width: 100%; /* Full width button */
  }
  
  .login-card .btn-primary:hover {
      color: #FFFFFF;
      background-color: var(--login-button-primary-color-light); /* Use the themed lighter red on hover */
      border-color: var(--login-button-primary-color-light);
  }
  
  .login-card .btn-primary:focus {
      box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.5); /* Themed red focus shadow */
  }
  
  .light-mode .login-card .btn-primary:focus {
      box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.5); /* Themed red focus shadow in light mode */
  }
  
  
  /* Or Access Portals Divider */
  .social-login {
      text-align: center;
      margin: 25px 0; /* Increased margin */
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px; /* Space between divider and button */
  }
  
  .divider {
      position: relative;
      text-align: center;
      margin: 0; /* Remove margin here, handled by social-login gap */
      color: var(--system-text); /* Muted color */
      font-size: 0.95rem;
      text-transform: uppercase;
      z-index: 1; /* Ensure text is above the line */
      background-color: var(--card-bg); /* Match card background to hide line behind text */
      padding: 0 10px; /* Padding to create space around text */
  }
  
  .divider::before,
  .divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: calc(50% - 20px); /* Adjust width based on padding */
      height: 1px;
      background-color: var(--card-border); /* Use card border color for the line */
      z-index: -1; /* Place lines behind the text */
  }
  
  .divider::before {
      left: 0;
  }
  
  .divider::after {
      right: 0;
  }
  
  
  /* Tenant Portal Button (Themed Outline Success) */
  .btn-outline-success-themed {
      display: flex; /* Use flexbox to align icon and text */
      align-items: center; /* Vertically center items */
      justify-content: center; /* Center content horizontally */
      gap: 8px; /* Space between icon and text */
      width: 100%; /* Full width button */
      padding: 10px 20px; /* Match primary button padding */
      font-size: 1rem; /* Match primary button font size */
      font-weight: 600; /* Match primary button font weight */
      border-radius: 5px; /* Match primary button border radius */
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      text-decoration: none; /* Ensure no underline */
      text-transform: uppercase; /* Uppercase text as in screenshot */
  
      /* Themed outline styles */
      background-color: transparent;
      border: 1px solid var(--login-accent-color); /* Green border */
      color: var(--login-accent-color); /* Green text */
  }
  
  .btn-outline-success-themed:hover {
      background-color: rgba(0, 200, 83, 0.1); /* Subtle green background on hover */
      border-color: var(--login-accent-color-light); /* Lighter green border on hover */
      color: var(--login-accent-color-light); /* Lighter green text on hover */
  }
  
  .btn-outline-success-themed i {
      /* Style for the icon inside the button */
      font-size: 1.1rem; /* Adjust icon size */
  }
  
  
  /* Auth Links (Sign Up) - Keep original styling */
  .auth-links {
      color: var(--link-color); /* Uses login primary color */
      text-decoration: none;
      transition: color 0.2s ease;
       font-weight: 600;
      font-size: 0.95rem;
      text-align: center; /* Center the "Don't have an account?" text */
      display: block; /* Ensure it takes its own line */
      margin-top: 20px; /* Space above this section */
  }
  
  .auth-links:hover {
      color: var(--link-hover-color); /* Uses login lighter primary color */
      text-decoration: underline;
  }
  
  
  /* Responsive Styles */
  @media (max-width: 991.98px) {
    .sidebar {
      transform: translateX(-100%);
      width: 280px;
      box-shadow: none;
    }
  
    .main-content {
      margin-left: 0;
    }
  
    body.sidebar-active .sidebar {
      transform: translateX(0);
      box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2); /* Use RGBA */
    }
  
    body.sidebar-active .sidebar-overlay {
      opacity: 1;
      visibility: visible;
    }
  
    .card-header {
      flex-direction: column;
      align-items: flex-start !important;
    }
  
    .card-header form {
      margin-top: 1rem;
      max-width: 100% !important;
      width: 100%;
    }
  
    /* Improved mobile menu icon alignment */
    .menu-item i {
      margin-left: 5px;
    }
  
    .submenu-item {
      padding-left: 45px; /* Increased padding for better alignment */
    }
  
    /* Adjust mobile header layout to position hamburger better */
    .mobile-header {
      padding: 0 10px; /* Reduced padding slightly */
    }
  
    .mobile-header .hamburger-btn {
       margin-left: 15px; /* Add margin to the left of the hamburger */
       margin-right: 5px; /* Add subtle margin to the right */
       /* Removed margin-left: auto */
    }
  
     /* Ensure mobile actions are on the right */
    .mobile-actions {
      margin-left: auto; /* Keep pushing user actions to the right */
      display: flex;
      align-items: center;
      gap: 10px; /* Reduced gap slightly */
    }
  
     /* Style the hamburger button with a faint red surrounding */
    .hamburger-btn {
      /* Border styling moved to the main .hamburger-btn rule */
      /* Added padding inside the button to create space for the border */
      width: 40px; /* Adjusted width */
      height: 30px; /* Adjusted height */
    }
  
    /* Adjust divider width on small screens */
    .divider::before,
    .divider::after {
         width: calc(50% - 15px); /* Adjust width based on padding */
    }
    .divider {
        padding: 0 8px;
    }
  }
  
  @media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
      width: 80px;
    }
  
    body.sidebar-collapsed .sidebar .sidebar-logo span,
    body.sidebar-collapsed .sidebar .system-menu-heading,
    body.sidebar-collapsed .sidebar .menu-item span,
    body.sidebar-collapsed .sidebar .arrow-icon {
      display: none;
    }
  
    body.sidebar-collapsed .sidebar .sidebar-header {
      justify-content: center;
      padding: 15px 0;
    }
  
    body.sidebar-collapsed .sidebar .menu-item {
      text-align: center;
    }
  
    body.sidebar-collapsed .sidebar .menu-item > div,
    body.sidebar-collapsed .sidebar .menu-link {
      justify-content: center;
      padding: 12px 0;
    }
  
    body.sidebar-collapsed .sidebar .menu-item i {
      margin: 0;
    }
  
    body.sidebar-collapsed .main-content {
      margin-left: 80px;
    }
  
    body.sidebar-collapsed .submenu {
      display: none !important;
    }
  }
  
  /* Animation Classes */
  .animate__animated {
    animation-duration: 0.5s;
  }
  
  .animate__fadeInUp {
    animation-name: fadeInUp;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  /* --- Full-Width Layout Styles --- */
  /* Assuming your default main-content has a margin or is part of a grid/flex that accounts for the sidebar */
  /* Example: */
  /*
  .main-content {
      margin-left: 250px; // Or whatever your sidebar width is
      flex-grow: 1;
  }
  */
  
  /* CSS for the full-width layout */
  .main-content.full-width-layout {
      margin-left: 0; /* Remove the margin */
      width: 100%; /* Ensure it takes full width */
      /* Add padding if needed */
  }
  
  /* CSS for centering content inside the area when there's no sidebar */
  .content-area.no-sidebar-content {
      /* Example: Center a fixed-width container inside */
      /*
      .your-content-wrapper {
          margin: 0 auto;
          max-width: 800px; // Or whatever max width you want
          padding: 0 15px; // Add padding on smaller screens
      }
      */
      /* Or center text/inline elements */
      /* text-align: center; */
  
      /* Or center block elements using flexbox */
      /* display: flex;
      flex-direction: column;
      align-items: center; */
  
      /* Choose the method that best fits your content structure */
      /* A common pattern is max-width + margin auto on an inner div */
  }
  
  /* You might also need to hide the mobile hamburger button in the no-sidebar layout */
  .full-width-layout .mobile-header .hamburger-btn {
      display: none;
  }
  
  /* Adjust mobile header layout for no-sidebar if needed */
  .full-width-layout .mobile-header .mobile-logo {
       /* Adjust margin */
       margin-left: 15px;
       margin-right: auto;
  }
  .full-width-layout .mobile-header .user-actions {
      /* Adjust margin */
      margin-right: 15px;
  }
  
  /* --- User Avatar Styles --- */
  .user-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
  }
  
  .user-avatar-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
  }
  
  .user-avatar-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- App Grid and Card Styles --- */
  
  /* Main grid layout styles */
  .app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--grid-gap);
    padding: var(--grid-padding);
  }
  
  /* Card styles */
  .app-card {
    background-color: var(--app-card-bg); /* Themed */
    border-radius: 8px; /* Reduced curvature */
    box-shadow: var(--app-card-shadow); /* Themed */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  .app-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--app-card-hover-shadow); /* Themed */
  }
  
  /* Bottom border animation on hover */
  .app-card:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    /* Using themed accent colors for the border */
    background: linear-gradient(90deg, var(--app-card-border-gradient-start), var(--app-card-border-gradient-end));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .app-card:hover:after {
    transform: scaleX(1);
  }
  
  /* Link styles covering the card */
  .app-card a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--app-card-text-color); /* Inherit themed text color */
  }
  
  /* Icon reflection container */
  .reflection {
    position: relative;
    margin-bottom: 0.75rem; /* Space below icon/reflection */
  }
  
  /* Icon reflection pseudo-element */
  .reflection:after {
    content: "";
    position: absolute;
    bottom: -20px; /* Adjust position below the icon */
    left: 50%;
    transform: translateX(-50%) scaleY(-1); /* Flip vertically */
    width: 100%; /* Match icon width or slightly more */
    height: 20px; /* Height of the reflection */
    /* Themed reflection gradient */
    background: linear-gradient(to bottom, var(--app-card-reflection-color), transparent);
    opacity: 0.4;
    filter: blur(1px); /* Soften the reflection */
    z-index: 1; /* Ensure reflection is layered correctly */
  }
  
  /* Icon styles */
  .app-icon {
    width: auto;
    height: 60px;
    max-width: 100%;
    transition: transform 0.3s ease;
    object-fit: contain;
    position: relative; /* Create stacking context for z-index */
    z-index: 2; /* Ensure icon is above reflection */
  }
  
  .app-card:hover .app-icon {
    transform: scale(1.1);
  }
  
  /* Title styles */
  .app-title {
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    color: var(--app-card-text-color); /* Themed */
    transition: color 0.3s ease;
  }
  
  .app-card:hover .app-title {
    color: var(--app-card-hover-text-color); /* Themed hover color */
    font-weight: 600;
  }
  
  /* Responsive adjustments for grid and elements within cards */
  @media (max-width: 768px) {
    :root { /* Adjust variables responsively */
        --grid-gap: 1rem;
        --grid-padding: 1rem;
    }
  
    .app-grid {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      /* gap and padding now use variables */
    }
  
    .app-icon {
      height: 50px;
    }
  
    .app-title {
      font-size: 12px;
    }
  }
  
  @media (max-width: 480px) {
    :root { /* Adjust variables responsively */
        --grid-gap: 0.8rem;
        --grid-padding: 0.8rem;
    }
  
    .app-grid {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      /* gap and padding now use variables */
    }
  
    .app-icon {
      height: 40px;
    }
    /* .app-title size is already covered by the 768px rule */
  }
  
  
  
  /* --- Select2 Styles (Classic Theme) --- */
  /* Select2 container */
  .select2-container--classic .select2-selection--single,
  .select2-container--classic .select2-selection--multiple {
    background-color: var(--select2-bg);
    border: 1px solid var(--select2-border);
    color: var(--select2-text);
    border-radius: 6px; /* Match input border radius */
    min-height: 42px; /* Adjusted height to match form-control */
    padding: 0.375rem 0.75rem; /* Match Bootstrap form-control padding */
    display: flex; /* Align content vertically */
    align-items: center;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }
  
  .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: var(--select2-text);
    line-height: calc(1.5em + 0.75rem); /* Match Bootstrap form-control line-height */
    padding: 0; /* Remove default padding */
  }
  
  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: var(--select2-placeholder);
  }
  
  .select2-container--classic.select2-container--focus .select2-selection--single,
  .select2-container--classic.select2-container--open .select2-selection--single,
  .select2-container--classic.select2-container--focus .select2-selection--multiple,
  .select2-container--classic.select2-container--open .select2-selection--multiple {
      border-color: var(--primary-color); /* Themed focus border */
      box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.25); /* Themed focus shadow (Dark) */
      outline: 0;
  }
  
  .light-mode .select2-container--classic.select2-container--focus .select2-selection--single,
  .light-mode .select2-container--classic.select2-container--open .select2-selection--single,
  .light-mode .select2-container--classic.select2-container--focus .select2-selection--multiple,
  .light-mode .select2-container--classic.select2-container--open .select2-selection--multiple {
       border-color: var(--primary-color);
       box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.25); /* Themed focus shadow (Light) */
  }
  
  
  .select2-container--classic .select2-selection--single .select2-selection__arrow {
      height: calc(1.5em + 0.75rem); /* Match Bootstrap form-control height */
      top: 50%; /* Center vertically */
      transform: translateY(-50%);
      right: 8px; /* Adjust position */
  }
  
  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
      box-sizing: border-box;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
  }
  
  .select2-container--classic .select2-selection--multiple .select2-selection__rendered li {
      list-style: none;
  }
  
  
  /* Select2 dropdown */
  .select2-container--classic .select2-dropdown {
      background-color: var(--select2-dropdown-bg);
      border: 1px solid var(--select2-dropdown-border);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  }
  
  .select2-container--classic .select2-search--dropdown .select2-search__field {
      background-color: var(--select2-bg);
      border: 1px solid var(--select2-border);
      color: var(--select2-text);
      outline: none;
      padding: 8px 12px; /* Match result option padding */
      width: 100%; /* Ensure it takes full width */
      box-sizing: border-box; /* Include padding and border */
  }
  
  .select2-container--classic .select2-search--dropdown .select2-search__field::placeholder {
      color: var(--select2-placeholder);
  }
  
  
  /* Select2 results */
  .select2-container--classic .select2-results__options {
      /* Optional: Add padding to the results list if needed */
      /* padding: 5px 0; */
  }
  
  .select2-container--classic .select2-results__option {
      color: var(--select2-text);
      padding: 8px 12px; /* Adjust padding */
      transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  /* Ensure highlighted option is visible */
  .select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
      background-color: var(--select2-result-highlight-bg) !important; /* Use !important */
      color: var(--select2-result-highlight-text) !important; /* Use !important */
  }
  
  /* Style for selected option */
  .select2-container--classic .select2-results__option--selected {
      background-color: var(--select2-selected-option-bg); /* Themed background for selected option */
      color: var(--select2-selected-option-text); /* Themed text color for selected option */
  }
  
  .select2-container--classic .select2-results__option--disabled {
      color: var(--system-text);
  }
  
  /* Selected items in multiple select */
  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
      background-color: var(--select2-selection-item-bg);
      border: 1px solid var(--select2-selection-item-border);
      color: var(--select2-selection-item-text);
      border-radius: 4px;
      padding: 2px 5px;
      margin-top: 4px;
      margin-right: 5px;
  }
  
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
      color: var(--select2-selection-item-close-color);
      margin-right: 2px;
  }
  
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: var(--link-hover-color);
  }
  
  
  
  /* Form labels with required asterisk */
  .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
  }
  
  .form-label .text-danger {
    margin-left: 4px;
    font-weight: 700;
  }
  
  /* Help text styling */
  .form-text {
    color: var(--form-text-color);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
  }
  
  /* Error messages */
  .text-danger {
    color: var(--danger-color) !important;
  }
  
  /* Alert for non-field errors */
  .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: var(--danger-color);
    border-radius: 6px;
    padding: 12px 16px;
  }
  
  /* Button styles */
  .btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  
  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFFFFF;
  }
  
  .btn-primary:hover {
    background-color: var(--link-hover-color);
    border-color: var(--link-hover-color);
  }
  
  .btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.3);
  }
  
  .light-mode .btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.3);
  }
  
  .btn-outline-secondary {
    color: var(--text-color);
    border-color: var(--input-border);
    background-color: transparent;
  }
  
  .btn-outline-secondary:hover {
    background-color: var(--menu-hover);
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
  }
  
  /* Spinner animation for submit button */
  .spinner-border {
    width: 1rem;
    height: 1rem;
    margin-right: 8px;
    border-width: 0.15em;
  }
  
  /* Custom file input styling */
  .form-control[type="file"] {
    padding: 8px;
  }
  
  .form-control[type="file"]::file-selector-button {
    background-color: var(--action-icon-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    padding: 6px 12px;
    margin-right: 12px;
    transition: all 0.2s ease;
  }
  
  .form-control[type="file"]::file-selector-button:hover {
    background-color: var(--menu-hover);
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
  }
  
  /* Checkbox styling */
  .form-check-input {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
  }
  
  .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  
  /* Overall card styling */
  .card {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
  }
  
  .card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
  
  .card-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    padding: 16px 20px;
  }
  
  .card-body {
    padding: 20px;
  }
  
  /* Select2 Form Integration */
  .select2-container-wrapper {
    width: 100%;
  }
  
  /* Animation for fade-in form */
  @keyframes formFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-form {
    animation: formFadeIn 0.5s ease-out;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .card-body {
      padding: 16px;
    }
  
    .form-control,
    .form-select,
    .select2-container--classic .select2-selection--single {
      font-size: 14px;
    }
  
    .btn {
      width: 100%;
      margin-bottom: 8px;
    }
  
    /* Stack buttons on mobile */
    .d-flex.justify-content-between {
      flex-direction: column-reverse;
    }
  
    .d-flex.justify-content-between .btn {
      margin-bottom: 10px;
    }
  }
  
  
  
  
  .select2-dropdown {
    background-color: var(--select2-dropdown-bg);
    border: 1px solid var(--select2-dropdown-border);
    color: var(--select2-text);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  .select2-results__option {
    padding: 8px 12px;
    transition: background-color 0.2s ease;
  }
  
  .select2-results__option--highlighted {
    background-color: var(--select2-result-highlight-bg) !important;
    color: var(--select2-result-highlight-text) !important;
  }
  
  .select2-results__option--selected {
    background-color: var(--select2-selected-option-bg);
    color: var(--select2-selected-option-text);
  }
  /* General dropdown option style */
  .select2-results__option {
    background-color: var(--select2-dropdown-bg);
    color: var(--select2-text);
    padding: 8px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
  }
  
  /* Hover effect */
  .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--select2-result-highlight-bg) !important;
    color: var(--select2-result-highlight-text) !important;
  }
  
  /* Selected option */
  .select2-results__option--selected {
    background-color: var(--select2-selected-option-bg);
    color: var(--select2-selected-option-text);
  }
  
  /* Disabled option */
  .select2-results__option--disabled {
    color: var(--system-text);
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  
  /* Style all selectable options */
  .select2-results__option.select2-results__option--selectable {
    background-color: var(--select2-dropdown-bg);
    color: var(--select2-text);
    padding: 8px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
  }
  
  /* On hover */
  .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--select2-result-highlight-bg) !important;
    color: var(--select2-result-highlight-text) !important;
  }
  
  /* On selection */
  .select2-results__option--selected {
    background-color: var(--select2-selected-option-bg);
    color: var(--select2-selected-option-text);
  }
  
  /* Disabled option */
  .select2-results__option--disabled {
    color: var(--system-text);
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  
  .select2-selection__choice__remove {
    color: var(--select2-selection-item-close-color);           /* Dark: #B0B0B0 | Light: #757575 */
    cursor: pointer;
    font-weight: bold;
    margin-right: 4px;
  }
  
  .select2-selection__choice__remove:hover {
    color: var(--link-hover-color);                             /* Red hover effect */
  }
  
  
  /* Multiselect selected item (chip/tag) */
  .select2-selection__choice {
    background-color: var(--select2-selection-item-bg);         /* Dark: #252525 | Light: #F0F0F0 */
    border: 1px solid var(--select2-selection-item-border);     /* Dark: #2A2A2A | Light: #E0E0E0 */
    color: var(--select2-selection-item-text);                  /* Dark: #F5F5F5 | Light: #212121 */
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 4px;
    margin-right: 5px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  
  /* Make the entire multi-select area bigger */
  .select2-selection--multiple {
    min-height: 48px;
    font-size: 1rem; /* Slightly larger text */
    padding: 6px 8px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    transition: all 0.2s ease;
  }
  
  /* Inner selected choices (tags) */
  .select2-selection__choice {
    background-color: var(--select2-selection-item-bg);         /* Themed background */
    border: 1px solid var(--select2-selection-item-border);     /* Themed border */
    color: var(--select2-selection-item-text);                  /* Themed text */
    padding: 6px 10px;
    font-size: 0.95rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  /* Display text inside each selected choice */
  .select2-selection__choice__display {
    color: inherit;
  }
  
  /* Remove button (×) */
  .select2-selection__choice__remove {
    color: var(--select2-selection-item-close-color);
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  .select2-selection__choice__remove:hover {
    color: var(--link-hover-color); /* Lighter red on hover */
  }
  
  /* Adjust the inline search input (textarea) */
  .select2-search--inline .select2-search__field {
    background-color: transparent;
    color: var(--input-text);
    font-size: 1rem;
    min-width: 8ch;
    margin: 3px 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 4px;
  }
  
  /* Placeholder color (if any) */
  .select2-search--inline .select2-search__field::placeholder {
    color: var(--input-placeholder);
  }
  
  /* Style for text inside each selected tag (e.g., Loans Officer) */
  .select2-selection__choice__display {
    color: var(--select2-selection-item-text);   /* Themed text color */
    font-size: 1rem;                             /* Slightly larger for readability */
    font-weight: 500;                            /* Match overall UI tone */
    line-height: 1.4;
    padding-right: 2px;                          /* Add spacing from the "×" button */
    display: inline-block;
    transition: color 0.2s ease;
  }
  
  /* Style for the "---------" empty/null option */
  .select2-results__option.select2-results__option--selectable:empty,
  .select2-results__option.select2-results__option--selectable:has-text("---------"),
  .select2-results__option.select2-results__option--selectable:contains("---------") {
    color: var(--system-text);              /* Use muted theme color */
    font-style: italic;
    cursor: default;
    pointer-events: none;                   /* Make it unclickable */
    opacity: 0.6;
  }
  
  .select2-selection--single {
    min-height: 40px;                        /* Taller field */
    font-size: 1.05rem;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: var(--select2-bg);
    border: 1px solid var(--select2-border);
    color: var(--select2-text);
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
  }
  
  /* Styling for standard form select elements */
  .form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 6px;
    padding: 10px 12px;
    /* Ensure arrow color is visible in both modes */
    -webkit-appearance: none; /* Remove default arrow on WebKit browsers */
    -moz-appearance: none;    /* Remove default arrow on Firefox */
    appearance: none;         /* Remove default arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Default dark arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
  }
  
  /* Adjust arrow color for light mode */
  .light-mode .form-select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23757575' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Lighter arrow for light mode */
  }
  
  
  .form-select::placeholder {
    color: var(--input-placeholder);
  }
  
  .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.25);
    color: var(--input-text);
    outline: none;
  }
  
  .light-mode .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.25);
  }
  
  /* Styling for options within the select dropdown */
  /* Note: Direct styling of <option> elements is limited across browsers.
     The Select2 library handles much of this for enhanced dropdowns.
     For native <select>, the appearance is largely system-controlled.
     However, we ensure the base select element itself is themed. */
  .form-select option {
      background-color: var(--dropdown-bg); /* Use dropdown background for options */
      color: var(--dropdown-item-color); /* Use dropdown item text color */
  }
  
  .form-select option:checked {
      background-color: var(--primary-color); /* Highlight selected option */
      color: #FFFFFF; /* White text on highlighted option */
  }
  
  /* Hover effect for options in native select dropdown */
  .form-select option:hover {
      background-color: var(--link-hover-color); /* Use a good shade of red for hover */
      color: #FFFFFF; /* Ensure text is white on hover */
  }
  
  
  /* Styling for standard form control input elements */
  .form-control {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 6px;
    padding: 10px 12px;
  }
  
  .form-control::placeholder {
    color: var(--input-placeholder);
  }
  
  .form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(211, 47, 47, 0.25);
    color: var(--input-text);
    outline: none;
  }
  
  .light-mode .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.25);
  }
  
  /* Default (Dark Mode) */
  .text-muted {
    color: var(--system-text) !important; /* Typically a grey tone like #B0B0B0 */
  }
  
  /* Light Mode Override */
  .light-mode .text-muted {
    color: #757575 !important; /* Softer dark grey for light backgrounds */
  }
  
  .table-secondary {
    background-color: var(--table1-header-bg) !important;
    color: var(--table1-header-text) !important;
  }
  .light-mode .table-secondary {
    background-color: var(--table1-header-bg) !important;
    color: var(--table1-header-text) !important;
  }
  
  /* Default - Dark Mode */
  code {
    background-color: var(--code-bg);         /* Typically #212121 */
    color: var(--text-color);                 /* Light text */
    border: 1px solid var(--table1-border-color); /* Dark border */
  }
  
  /* Light Mode */
  .light-mode code {
    background-color: #f0f0f0;                /* Light background */
    color: #212121;                           /* Dark text */
    border: 1px solid #e0e0e0;                /* Light border */
  }
  
  
  
  /* PAGINATION THEME */
  .themed-pagination .page-link {
    background-color: var(--card-bg);
    color: var(--link-color);
    border: 1px solid var(--card-border);
    font-weight: 500;
    transition: all 0.2s ease;
  }
  
  .themed-pagination .page-link:hover,
  .themed-pagination .page-link:focus {
    background-color: var(--menu-hover);
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
  }
  
  /* Disabled/current page */
  .themed-pagination .page-item.disabled .page-link,
  .themed-pagination .current-page {
    background-color: transparent;
    color: var(--system-text);
    border: none;
    font-style: italic;
    cursor: default;
  }
  
  /* Light mode adjustments */
  .light-mode .themed-pagination .page-link {
    background-color: #ffffff;
    color: var(--link-color);
    border: 1px solid #ddd;
  }
  
  .light-mode .themed-pagination .page-link:hover,
  .light-mode .themed-pagination .page-link:focus {
    background-color: #f5f5f5;
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
  }
  
  
  
  /* --- Full Modal Theme Enforcement (for all modals) --- */
  .themed-modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--modal-text-color) !important;
    border: 1px solid var(--modal-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 10px !important;
  }
  
  .themed-modal-header,
  .themed-modal-footer {
    background-color: var(--modal-bg) !important;
    border-color: var(--modal-border) !important;
  }
  
  .themed-modal-title {
    color: var(--modal-title-color) !important;
    font-weight: 600 !important;
  }
  
  .themed-modal-body {
    color: var(--modal-text-color) !important;
    background-color: var(--modal-bg) !important;
  }
  
  /* Close Button */
  .themed-close {
    filter: invert(1) brightness(200%) !important;
    opacity: 0.8 !important;
  }
  .themed-close:hover {
    opacity: 1 !important;
  }
  
  /* Form Controls inside modal */
  .themed-modal-body .form-control,
  .themed-modal-body .form-select,
  .themed-modal-body .form-check-input {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
  }
  
  .themed-modal-body .form-control::placeholder,
  .themed-modal-body .form-select::placeholder {
    color: var(--input-placeholder) !important;
  }
  
  .themed-modal-body .form-control:focus,
  .themed-modal-body .form-select:focus,
  .themed-modal-body .form-check-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25) !important;
    outline: none;
  }
  
  /* Checkbox styling */
  .themed-modal-body .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
  }
  
  /* Light Mode Overrides */
  .light-mode .themed-modal-content {
    background-color: #ffffff !important;
    color: #212121 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  }
  
  .light-mode .themed-modal-header,
  .light-mode .themed-modal-footer {
    background-color: #f9f9f9 !important;
    border-color: #e0e0e0 !important;
  }
  
  .light-mode .themed-modal-title {
    color: #212121 !important;
  }
  
  .light-mode .themed-modal-body {
    background-color: #ffffff !important;
    color: #212121 !important;
  }
  
  .light-mode .themed-modal-body .form-control,
  .light-mode .themed-modal-body .form-select,
  .light-mode .themed-modal-body .form-check-input {
    background-color: #ffffff !important;
    color: #212121 !important;
    border: 1px solid #ced4da !important;
  }
  
  .light-mode .themed-modal-body .form-control::placeholder {
    color: #757575 !important;
  }
  
  .light-mode .themed-modal-body .form-control:focus,
  .light-mode .themed-modal-body .form-select:focus,
  .light-mode .themed-modal-body .form-check-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.25) !important;
  }
  
  /* DELETE MODAL SPECIAL STYLING */
  #deleteModal .modal-body i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  #deleteModal .modal-body p {
    color: var(--modal-text-color);
  }
  
  #deleteModal .modal-footer .btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff;
  }
  
  #deleteModal .modal-footer .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
  }
  
  .light-mode #deleteModal .modal-body p {
    color: #212121;
  }
  
  
  /* Themed summary card (e.g., Withdrawal Summary) */
  .themed-summary-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: var(--text-color);
    transition: all 0.3s ease;
  }
  
  .themed-summary-card .card-title {
    color: var(--heading-color);
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .themed-summary-card p {
    color: var(--text-color);
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
  }
  
  .themed-summary-card p strong {
    color: var(--link-color);
  }
  
  .light-mode .themed-summary-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #212121;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  
  .light-mode .themed-summary-card .card-title {
    color: #212121;
  }
  
  .light-mode .themed-summary-card p strong {
    color: var(--primary-color);
  }
  
  
  /* Input Group Text Styling */
  .input-group-text {
    background-color: var(--input-bg); /* Use input background color */
    border: 1px solid var(--input-border); /* Use input border color */
    color: var(--input-text); /* Use input text color */
    border-radius: 6px; /* Match form control border-radius */
    padding: 10px 12px; /* Match form control padding */
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  
  .light-mode .input-group-text {
    background-color: var(--input-bg); /* Use light input background color */
    border-color: var(--input-border); /* Use light input border color */
    color: var(--input-text); /* Use light input text color */
  }
  
  /* Scrollbar Styling for the entire page (Webkit browsers like Chrome, Safari, Edge) */
  /* This targets the main scrollbar for the body/html element */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 8px; /* Adjust width for vertical scrollbar */
    height: 8px; /* Adjust height for horizontal scrollbar, if any */
    background-color: transparent; /* Make track background transparent by default */
  }
  
  /* Scrollbar thumb (the draggable part) - Initially transparent */
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background-color: transparent; /* Make thumb transparent when not in use */
    border-radius: 4px; /* Rounded corners for the thumb */
    border: 1px solid transparent; /* Optional: subtle border */
  }
  
  /* Scrollbar thumb on hover - Appears on hover */
  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(211, 47, 47, 0.7); /* Primary Red with 70% opacity on hover (dark mode) */
  }
  
  /* Scrollbar track (the background behind the thumb) */
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background-color: transparent; /* Keep track transparent */
  }
  
  /* Theming for Light Mode - Scrollbar thumb initially transparent */
  .light-mode html::-webkit-scrollbar-thumb,
  .light-mode body::-webkit-scrollbar-thumb {
    background-color: transparent; /* Make thumb transparent when not in use in light mode */
  }
  
  /* Theming for Light Mode - Scrollbar thumb on hover */
  .light-mode html::-webkit-scrollbar-thumb:hover,
  .light-mode body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(198, 40, 40, 0.7); /* Primary Red with 70% opacity on hover (light mode) */
  }
  
  /* Firefox scrollbar styling */
  /* For Firefox, the scrollbar-width and scrollbar-color properties are used */
  html, body {
    scrollbar-width: thin; /* 'auto' or 'thin' */
    /* Initially transparent thumb and track */
    scrollbar-color: transparent transparent;
  }
  
  /* Firefox scrollbar on hover */
  /* Note: For Firefox, this makes the scrollbar appear when the entire 'html' or 'body' is hovered. */
  /* Pure CSS does not allow precise scrollbar-thumb hover for scrollbar-color in Firefox. */
  html:hover, body:hover {
    scrollbar-color: var(--primary-color) transparent; /* Thumb color appears on hover */
  }
  
  /* Adjust scrollbar color for Firefox in light mode on hover */
  .light-mode html:hover,
  .light-mode body:hover {
    scrollbar-color: var(--primary-color) transparent; /* Uses the light mode primary-color on hover */
  }
  
  /* Ensure body has overflow-y set to auto or scroll if content can exceed viewport height */
  body {
    overflow-y: auto;
  }