/**
 * SFTPGo BU Official Dual-Color System Override
 * BU Red (#C8102E) for primary actions, gray-white system for 70%+ of UI
 */

/* ========================================
   1. CSS Variables - BU Dual-Color System
   ======================================== */
   :root,
   [data-bs-theme="light"] {
       --bs-primary: #C8102E;
       --bs-primary-rgb: 200, 16, 46;
       --bs-primary-light: #F5E6E8;
       --bs-primary-lighter: #FBF5F6;
       --bs-primary-inverse: #FFFFFF;
       
       --bs-gray-100: #FAFAFA;
       --bs-gray-200: #F5F5F5;
       --bs-gray-300: #E8E8E8;
       --bs-gray-400: #D0D0D0;
       --bs-gray-500: #9A9A9A;
       --bs-gray-600: #6B6B6B;
       --bs-gray-700: #4A4A4A;
       --bs-gray-800: #2D2D2D;
       --bs-gray-900: #1A1A1A;
       
       --bs-secondary: #E8E8E8;
       --bs-secondary-inverse: #4A4A4A;
       
       --bs-body-bg: #FFFFFF;
       --bs-body-color: #2D2D2D;
       --bs-light: #FAFAFA;
       
       --bs-text-primary: #C8102E;
       --bs-text-gray-800: #2D2D2D;
       --bs-text-gray-700: #4A4A4A;
       --bs-text-gray-600: #6B6B6B;
       --bs-text-gray-500: #9A9A9A;
       
       --bs-danger: #C8102E;
       --bs-danger-inverse: #FFFFFF;
       --bs-danger-light: #F5E6E8;
       
       --bs-success: #4A4A4A;
       --bs-success-inverse: #FFFFFF;
       --bs-success-light: #E8E8E8;
       
       --bs-warning: #6B6B6B;
       --bs-warning-inverse: #FFFFFF;
       --bs-warning-light: #F5F5F5;
       
       --bs-info: #9A9A9A;
       --bs-info-inverse: #FFFFFF;
       --bs-info-light: #FAFAFA;
   }
   
   [data-bs-theme="dark"] {
       --bs-primary: #E0203E;
       --bs-primary-rgb: 224, 32, 62;
       --bs-primary-light: #3A1F24;
       --bs-primary-lighter: #2A1519;
       --bs-primary-inverse: #FFFFFF;
       
       --bs-gray-100: #1A1A1A;
       --bs-gray-200: #252525;
       --bs-gray-300: #333333;
       --bs-gray-400: #4A4A4A;
       --bs-gray-500: #6B6B6B;
       --bs-gray-600: #9A9A9A;
       --bs-gray-700: #D0D0D0;
       --bs-gray-800: #E8E8E8;
       --bs-gray-900: #FAFAFA;
       
       --bs-secondary: #333333;
       --bs-secondary-inverse: #E8E8E8;
       
       --bs-body-bg: #1A1A1A;
       --bs-body-color: #E8E8E8;
       --bs-light: #252525;
       
       --bs-text-primary: #E0203E;
       --bs-text-gray-800: #E8E8E8;
       --bs-text-gray-700: #D0D0D0;
       --bs-text-gray-600: #9A9A9A;
       --bs-text-gray-500: #6B6B6B;
       
       --bs-danger: #E0203E;
       --bs-danger-inverse: #FFFFFF;
       --bs-danger-light: #3A1F24;
       
       --bs-success: #9A9A9A;
       --bs-success-inverse: #FFFFFF;
       --bs-success-light: #333333;
       
       --bs-warning: #D0D0D0;
       --bs-warning-inverse: #1A1A1A;
       --bs-warning-light: #252525;
       
       --bs-info: #6B6B6B;
       --bs-info-inverse: #FFFFFF;
       --bs-info-light: #1A1A1A;
   }
   
   /* ========================================
      2. Button System
      ======================================== */
   .btn.btn-primary,
   .btn-flex.btn-primary,
   button.btn-primary,
   a.btn-primary {
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
       color: var(--bs-primary-inverse) !important;
       transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
       font-weight: 500;
   }
   
   .btn.btn-primary i,
   .btn-flex.btn-primary i,
   button.btn-primary i,
   a.btn-primary i,
   .btn.btn-primary .ki-duotone,
   .btn-flex.btn-primary .ki-duotone {
       color: #FFFFFF !important;
       color: var(--bs-primary-inverse) !important;
       transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
   }
   
   .btn.btn-primary i .path1,
   .btn.btn-primary i .path2,
   .btn.btn-primary i .path3,
   .btn.btn-primary i .path4,
   .btn-flex.btn-primary i .path1,
   .btn-flex.btn-primary i .path2,
   .btn-flex.btn-primary i .path3,
   .btn-flex.btn-primary i .path4 {
       fill: #FFFFFF !important;
       stroke: #FFFFFF !important;
   }
   
   .btn.btn-primary:hover,
   .btn-flex.btn-primary:hover,
   button.btn-primary:hover,
   a.btn-primary:hover,
   .btn.btn-primary:not(:disabled):not(.disabled):hover,
   .btn-flex.btn-primary:not(:disabled):not(.disabled):hover {
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
       color: var(--bs-primary-inverse) !important;
   }
   
   .btn.btn-primary:hover i,
   .btn-flex.btn-primary:hover i,
   button.btn-primary:hover i,
   a.btn-primary:hover i,
   .btn.btn-primary:not(:disabled):not(.disabled):hover i,
   .btn-flex.btn-primary:not(:disabled):not(.disabled):hover i,
   .btn.btn-primary:hover .ki-duotone,
   .btn-flex.btn-primary:hover .ki-duotone,
   button.btn-primary:hover .ki-duotone {
       color: #FFFFFF !important;
       color: var(--bs-primary-inverse) !important;
   }
   
   .btn.btn-primary:hover i .path1,
   .btn.btn-primary:hover i .path2,
   .btn.btn-primary:hover i .path3,
   .btn.btn-primary:hover i .path4,
   .btn-flex.btn-primary:hover i .path1,
   .btn-flex.btn-primary:hover i .path2,
   .btn-flex.btn-primary:hover i .path3,
   .btn-flex.btn-primary:hover i .path4 {
       fill: #FFFFFF !important;
       stroke: #FFFFFF !important;
   }
   
   .btn.btn-primary:focus,
   .btn.btn-primary:active,
   .btn.btn-primary:focus-visible,
   .btn-flex.btn-primary:focus,
   .btn-flex.btn-primary:active,
   .btn-flex.btn-primary:focus-visible,
   button.btn-primary:focus,
   button.btn-primary:active,
   a.btn-primary:focus,
   a.btn-primary:active {
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
       color: var(--bs-primary-inverse) !important;
       box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
   }
   
   .btn.btn-primary:disabled {
       background-color: var(--bs-gray-400) !important;
       border-color: var(--bs-gray-400) !important;
       color: var(--bs-gray-600) !important;
       opacity: 0.6;
   }
   
   .btn.btn-secondary {
       background-color: var(--bs-secondary) !important;
       border-color: var(--bs-secondary) !important;
       color: var(--bs-secondary-inverse) !important;
       transition: background-color 0.2s ease, border-color 0.2s ease;
   }
   
   .btn.btn-secondary:hover {
       background-color: var(--bs-gray-400) !important;
       border-color: var(--bs-gray-400) !important;
       color: var(--bs-gray-800) !important;
   }
   
   .btn.btn-light-primary,
   .btn-flex.btn-light-primary,
   button.btn-light-primary,
   a.btn-light-primary {
       background-color: var(--bs-gray-200) !important;
       border-color: var(--bs-gray-300) !important;
       color: var(--bs-primary) !important;
       transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
   }
   
   .btn.btn-light-primary i,
   .btn-flex.btn-light-primary i,
   button.btn-light-primary i,
   a.btn-light-primary i,
   .btn.btn-light-primary .ki-duotone,
   .btn-flex.btn-light-primary .ki-duotone {
       color: var(--bs-primary) !important;
       transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
   }
   
   .btn.btn-light-primary i .path1,
   .btn.btn-light-primary i .path2,
   .btn.btn-light-primary i .path3,
   .btn.btn-light-primary i .path4,
   .btn-flex.btn-light-primary i .path1,
   .btn-flex.btn-light-primary i .path2,
   .btn-flex.btn-light-primary i .path3,
   .btn-flex.btn-light-primary i .path4 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   .btn.btn-light-primary:hover,
   .btn-flex.btn-light-primary:hover,
   button.btn-light-primary:hover,
   a.btn-light-primary:hover,
   .btn.btn-light-primary:not(:disabled):not(.disabled):hover,
   .btn-flex.btn-light-primary:not(:disabled):not(.disabled):hover {
       background-color: var(--bs-gray-300) !important;
       border-color: var(--bs-gray-400) !important;
       color: var(--bs-primary) !important;
   }
   
   .btn.btn-light-primary:hover i,
   .btn-flex.btn-light-primary:hover i,
   button.btn-light-primary:hover i,
   a.btn-light-primary:hover i,
   .btn.btn-light-primary:not(:disabled):not(.disabled):hover i,
   .btn-flex.btn-light-primary:not(:disabled):not(.disabled):hover i,
   .btn.btn-light-primary:hover .ki-duotone,
   .btn-flex.btn-light-primary:hover .ki-duotone {
       color: var(--bs-primary) !important;
   }
   
   .btn.btn-light-primary:hover i .path1,
   .btn.btn-light-primary:hover i .path2,
   .btn.btn-light-primary:hover i .path3,
   .btn.btn-light-primary:hover i .path4,
   .btn-flex.btn-light-primary:hover i .path1,
   .btn-flex.btn-light-primary:hover i .path2,
   .btn-flex.btn-light-primary:hover i .path3,
   .btn-flex.btn-light-primary:hover i .path4 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   .btn-active-light-primary,
   .btn.btn-light-primary.active {
       background-color: var(--bs-primary-light) !important;
       border-color: var(--bs-primary) !important;
       color: var(--bs-primary) !important;
   }
   
   .btn-active-light-primary:hover,
   .btn.btn-light-primary.active:hover {
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
       color: var(--bs-primary-inverse) !important;
   }
   
   .btn.btn-light {
       background-color: var(--bs-gray-100) !important;
       border-color: var(--bs-gray-300) !important;
       color: var(--bs-gray-800) !important;
   }
   
   .btn.btn-light:hover {
       background-color: var(--bs-gray-200) !important;
       border-color: var(--bs-gray-400) !important;
       color: var(--bs-gray-900) !important;
   }
   
   .btn.btn-danger {
       background-color: var(--bs-danger) !important;
       border-color: var(--bs-danger) !important;
       color: var(--bs-danger-inverse) !important;
       transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
   }
   
   .btn.btn-danger:hover {
       background-color: var(--bs-danger) !important;
       border-color: var(--bs-danger) !important;
       color: var(--bs-danger-inverse) !important;
   }
   
   .btn.btn-light-danger {
       background-color: var(--bs-danger-light) !important;
       border-color: var(--bs-gray-300) !important;
       color: var(--bs-danger) !important;
   }
   
   .btn.btn-light-danger:hover {
       background-color: var(--bs-gray-300) !important;
       border-color: var(--bs-gray-400) !important;
       color: var(--bs-gray-800) !important;
   }
   
   /* ========================================
      3. Hover Effects
      ======================================== */
   
   .text-hover-primary {
       transition: color 0.2s ease;
   }
   
   .text-hover-primary:hover {
       color: var(--bs-gray-800) !important;
   }
   
   .text-hover-gray-800:hover {
       color: var(--bs-gray-900) !important;
   }
   
   .text-hover-gray-700:hover {
       color: var(--bs-gray-800) !important;
   }
   
   .text-hover-gray-600:hover {
       color: var(--bs-gray-700) !important;
   }
   
   a,
   .text-hover-primary,
   .text-hover-secondary,
   .text-hover-danger {
       transition: color 0.2s ease;
   }
   
   /* ========================================
      4. File System Styles
      ======================================== */
   
   .file-list,
   table tbody tr {
       color: var(--bs-gray-800) !important;
   }
   
   .file-list-item:hover,
   table tbody tr:hover {
       background-color: var(--bs-gray-100) !important;
       transition: background-color 0.2s ease;
   }
   
   .file-list-item.selected,
   table tbody tr.selected,
   table tbody tr.active {
       background-color: var(--bs-gray-200) !important;
       border-left: 3px solid var(--bs-primary) !important;
   }
   
   .table-hover tbody tr:hover {
       background-color: var(--bs-gray-100) !important;
       color: var(--bs-gray-800) !important;
   }
   
   .file-name,
   .file-link {
       color: var(--bs-gray-800) !important;
   }
   
   .file-name:hover,
   .file-link:hover {
       color: var(--bs-gray-900) !important;
       text-decoration: none;
   }
   
   .table {
       border-color: var(--bs-gray-300) !important;
   }
   
   .table th {
       background-color: var(--bs-gray-100) !important;
       color: var(--bs-gray-800) !important;
       border-color: var(--bs-gray-300) !important;
       font-weight: 600;
   }
   
   .table td {
       border-color: var(--bs-gray-300) !important;
   }
   
   /* ========================================
      5. Active States & Tabs
      ======================================== */
   
   .nav-link.active,
   .tab-active {
       color: var(--bs-primary) !important;
       border-bottom-color: var(--bs-primary) !important;
   }
   
   .nav-link.active:hover {
       color: var(--bs-gray-800) !important;
   }
   
   .menu-link.active,
   .menu-item .menu-link.active {
       background-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
   }
   
   .menu-link.active .menu-title,
   .menu-link.active .menu-title span {
       color: #FFFFFF !important;
   }
   
   .menu-link.active .menu-icon,
   .menu-link.active .menu-icon i,
   .menu-link.active .menu-icon svg {
       color: #FFFFFF !important;
   }
   
   .menu-link.active .menu-icon .path1,
   .menu-link.active .menu-icon .path2,
   .menu-link.active .menu-icon .path3,
   .menu-link.active .menu-icon .path4 {
       fill: #FFFFFF !important;
       stroke: #FFFFFF !important;
   }
   
   .menu-link.active:hover,
   .menu-item .menu-link.active:hover {
       background-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
   }
   
   .menu-link.active:hover .menu-title,
   .menu-link.active:hover .menu-title span,
   .menu-item .menu-link.active:hover .menu-title,
   .menu-item .menu-link.active:hover .menu-title span {
       color: #FFFFFF !important;
   }
   
   .menu-link.active:hover .menu-icon,
   .menu-link.active:hover .menu-icon i,
   .menu-link.active:hover .menu-icon svg,
   .menu-item .menu-link.active:hover .menu-icon,
   .menu-item .menu-link.active:hover .menu-icon i,
   .menu-item .menu-link.active:hover .menu-icon svg {
       color: #FFFFFF !important;
   }
   
   .menu-link.active:hover .menu-icon .path1,
   .menu-link.active:hover .menu-icon .path2,
   .menu-link.active:hover .menu-icon .path3,
   .menu-link.active:hover .menu-icon .path4,
   .menu-item .menu-link.active:hover .menu-icon .path1,
   .menu-item .menu-link.active:hover .menu-icon .path2,
   .menu-item .menu-link.active:hover .menu-icon .path3,
   .menu-item .menu-link.active:hover .menu-icon .path4 {
       fill: #FFFFFF !important;
       stroke: #FFFFFF !important;
   }
   
   .active:not(.menu-link) {
       background-color: var(--bs-primary-light) !important;
   }
   
   .text-active-primary {
       color: var(--bs-primary) !important;
   }
   
   /* ========================================
      6. Background Colors
      ======================================== */
   
   body {
       background-color: var(--bs-body-bg) !important;
   }
   
   .bg-light {
       background-color: var(--bs-light) !important;
   }
   
   .bg-light-primary {
       background-color: var(--bs-primary-light) !important;
   }
   
   .bg-primary {
       background-color: var(--bs-primary) !important;
       color: var(--bs-primary-inverse) !important;
   }
   
   .card {
       background-color: var(--bs-body-bg) !important;
       border-color: var(--bs-gray-300) !important;
   }
   
   /* ========================================
      7. Text Colors
      ======================================== */
   
   .text-primary {
       color: var(--bs-text-primary) !important;
   }
   
   .text-gray-900 {
       color: var(--bs-text-gray-800) !important;
   }
   
   .text-gray-800 {
       color: var(--bs-text-gray-800) !important;
   }
   
   .text-gray-700 {
       color: var(--bs-text-gray-700) !important;
   }
   
   .text-gray-600 {
       color: var(--bs-text-gray-600) !important;
   }
   
   .text-gray-500 {
       color: var(--bs-text-gray-500) !important;
   }
   
   .text-muted {
       color: var(--bs-gray-600) !important;
   }
   
   /* ========================================
      8. Success Feedback
      ======================================== */
   
   .text-success,
   .badge-success {
       color: var(--bs-primary) !important;
   }
   
   .bg-success {
       background-color: var(--bs-primary) !important;
       color: var(--bs-primary-inverse) !important;
   }
   
   /* ========================================
      9. Global Refinements
      ======================================== */
   
   * {
       transition-timing-function: ease !important;
   }
   
   .btn,
   .card,
   .modal-content {
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
   }
   
   .btn:focus {
       box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
   }
   
   /* ========================================
      10. Button Hover Enforcement
      ======================================== */
   
   .btn.btn-primary:hover,
   .btn-flex.btn-primary:hover,
   button.btn-primary:hover,
   a.btn-primary:hover,
   .btn.btn-danger:hover,
   .btn-flex.btn-danger:hover,
   button.btn-danger:hover,
   a.btn-danger:hover,
   .btn.btn-primary:not(:disabled):not(.disabled):hover,
   .btn-flex.btn-primary:not(:disabled):not(.disabled):hover,
   .btn.btn-danger:not(:disabled):not(.disabled):hover,
   .btn-flex.btn-danger:not(:disabled):not(.disabled):hover {
       color: #FFFFFF !important;
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
   }
   
   .btn-active-light-primary:hover,
   .btn.btn-light-primary.active:hover {
       color: #FFFFFF !important;
       color: var(--bs-primary-inverse) !important;
   }
   
   .btn.btn-primary,
   .btn-flex.btn-primary,
   button.btn-primary,
   a.btn-primary,
   .btn.btn-primary:hover,
   .btn-flex.btn-primary:hover,
   button.btn-primary:hover,
   a.btn-primary:hover,
   .btn.btn-primary:focus,
   .btn-flex.btn-primary:focus,
   button.btn-primary:focus,
   a.btn-primary:focus,
   .btn.btn-primary:active,
   .btn-flex.btn-primary:active,
   button.btn-primary:active,
   a.btn-primary:active,
   .btn.btn-primary:not(:disabled):not(.disabled),
   .btn-flex.btn-primary:not(:disabled):not(.disabled) {
       border-color: var(--bs-primary) !important;
       background-color: var(--bs-primary) !important;
   }
   
   .btn.btn-danger,
   .btn-flex.btn-danger,
   button.btn-danger,
   a.btn-danger,
   .btn.btn-danger:hover,
   .btn-flex.btn-danger:hover,
   button.btn-danger:hover,
   a.btn-danger:hover,
   .btn.btn-danger:focus,
   .btn-flex.btn-danger:focus,
   button.btn-danger:focus,
   a.btn-danger:focus,
   .btn.btn-danger:active,
   .btn-flex.btn-danger:active,
   button.btn-danger:active,
   a.btn-danger:active,
   .btn.btn-danger:not(:disabled):not(.disabled),
   .btn-flex.btn-danger:not(:disabled):not(.disabled) {
       border-color: var(--bs-danger) !important;
       background-color: var(--bs-danger) !important;
   }
   
   a {
       color: var(--bs-primary);
       transition: color 0.2s ease;
   }
   
   a:hover {
       color: var(--bs-gray-800);
       text-decoration: underline;
   }
   
   /* ========================================
      11. Gray-White Dominance
      ======================================== */
   
   .main-content,
   .content-wrapper {
       background-color: var(--bs-body-bg) !important;
   }
   
   .sidebar,
   .aside {
       background-color: var(--bs-gray-100) !important;
   }
   
   .list-item,
   .list-group-item {
       background-color: var(--bs-body-bg) !important;
       border-color: var(--bs-gray-300) !important;
       color: var(--bs-gray-800) !important;
   }
   
   .list-group-item:hover {
       background-color: var(--bs-gray-100) !important;
   }
   
   .form-control,
   .input-group-text {
       background-color: var(--bs-body-bg) !important;
       border-color: var(--bs-gray-300) !important;
       color: var(--bs-gray-800) !important;
   }
   
   .form-control:focus {
       border-color: var(--bs-primary) !important;
       box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
   }
   
   .select2-container .select2-selection {
       background-color: var(--bs-body-bg) !important;
       border-color: var(--bs-gray-300) !important;
   }
   
   /* ========================================
      12. Form Dropdown Hover
      ======================================== */
   
   .select2-results__option:hover,
   .select2-results__option--highlighted,
   .select2-results__option[aria-selected]:hover {
       color: var(--bs-primary) !important;
   }
   
   .select2-results__option--selected,
   .select2-results__option[aria-selected="true"] {
       color: var(--bs-primary) !important;
   }
   
   .dropdown-item:hover,
   .dropdown-item:focus {
       color: var(--bs-primary) !important;
   }
   
   .dropdown-item.active,
   .dropdown-item:active {
       background-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
   }
   
   option:hover {
       color: var(--bs-primary) !important;
   }
   
   [class*="dropdown"] [class*="option"]:hover,
   [class*="select"] [class*="option"]:hover,
   [class*="menu"] [class*="item"]:hover {
       color: var(--bs-primary) !important;
   }
   
   .select2-dropdown {
       border-color: var(--bs-gray-300) !important;
   }
   
   .select2-results__options {
       background-color: var(--bs-body-bg) !important;
   }
   
   .select2-results__option:hover,
   .select2-results__option--highlighted,
   .dropdown-item:hover,
   .dropdown-item:focus,
   [role="option"]:hover,
   [role="menuitem"]:hover {
       color: var(--bs-primary) !important;
   }
   
   /* ========================================
      13. Checkbox & Pagination
      ======================================== */
   
   .form-check-input:checked,
   input[type="checkbox"]:checked {
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
   }
   
   .form-check-input:checked::before,
   input[type="checkbox"]:checked::before,
   .form-check-input:checked::after,
   input[type="checkbox"]:checked::after {
       color: #FFFFFF !important;
   }
   
   .form-check-input[type="checkbox"]:checked {
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
   }
   
   .form-check-input:checked {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
   }
   
   .page-link.active,
   .page-item.active .page-link,
   .pagination .page-item.active .page-link {
       background-color: var(--bs-primary) !important;
       border-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
   }
   
   .page-link:hover,
   .page-item .page-link:hover {
       color: var(--bs-primary) !important;
   }
   
   .page-link:focus,
   .page-item .page-link:focus {
       border-color: var(--bs-primary) !important;
       box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
   }
   
   .btn[data-bs-toggle="dropdown"][aria-expanded="true"],
   .btn.dropdown-toggle.show,
   .btn.show {
       background-color: var(--bs-body-bg) !important;
       background: var(--bs-body-bg) !important;
   }
   
   .btn.btn-light-primary[aria-expanded="true"],
   .btn.btn-light-primary.show,
   .btn.btn-light-primary.dropdown-toggle.show,
   .btn-light-primary[data-bs-toggle="dropdown"][aria-expanded="true"],
   .btn-light-primary.dropdown-toggle.show,
   .btn.btn-light-primary[data-bs-toggle="dropdown"][aria-expanded="true"] {
       background-color: var(--bs-gray-200) !important;
       background: var(--bs-gray-200) !important;
       border-color: var(--bs-gray-300) !important;
       color: var(--bs-primary) !important;
   }
   
   .btn.btn-light-primary[aria-expanded="true"] .menu-title,
   .btn.btn-light-primary.show .menu-title,
   .btn.btn-light-primary[aria-expanded="true"] span,
   .btn.btn-light-primary.show span {
       color: var(--bs-primary) !important;
   }
   
   .btn.btn-light-primary[aria-expanded="true"]:not(:hover),
   .btn.btn-light-primary.show:not(:hover),
   .btn.btn-light-primary.dropdown-toggle.show:not(:hover) {
       background-color: var(--bs-gray-200) !important;
       background: var(--bs-gray-200) !important;
       border-color: var(--bs-gray-300) !important;
       color: var(--bs-primary) !important;
   }
   
   /* ========================================
      14. Theme Menu
      ======================================== */
   
   .menu-link[data-kt-element="mode"][data-kt-value="system"],
   .menu-link[data-kt-value="system"] {
       color: var(--bs-primary) !important;
   }
   
   .menu-link[data-kt-element="mode"][data-kt-value="system"] .menu-icon,
   .menu-link[data-kt-value="system"] .menu-icon,
   .menu-link[data-kt-element="mode"][data-kt-value="system"] .menu-icon i,
   .menu-link[data-kt-value="system"] .menu-icon i {
       color: var(--bs-primary) !important;
   }
   
   .menu-link[data-kt-element="mode"][data-kt-value="system"] .menu-icon .path1,
   .menu-link[data-kt-element="mode"][data-kt-value="system"] .menu-icon .path2,
   .menu-link[data-kt-element="mode"][data-kt-value="system"] .menu-icon .path3,
   .menu-link[data-kt-element="mode"][data-kt-value="system"] .menu-icon .path4,
   .menu-link[data-kt-value="system"] .menu-icon .path1,
   .menu-link[data-kt-value="system"] .menu-icon .path2,
   .menu-link[data-kt-value="system"] .menu-icon .path3,
   .menu-link[data-kt-value="system"] .menu-icon .path4 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   .menu-link[data-kt-element="mode"][data-kt-value="system"] .menu-title,
   .menu-link[data-kt-value="system"] .menu-title {
       color: var(--bs-primary) !important;
   }
   
   .menu-link[data-kt-element="mode"][data-kt-value="system"].active,
   .menu-link[data-kt-value="system"].active,
   .menu-link[data-kt-element="mode"][data-kt-value="system"][aria-selected="true"],
   .menu-link[data-kt-value="system"][aria-selected="true"] {
       background-color: var(--bs-primary-light) !important;
   }
   
   /* ========================================
      15. Theme Menu Hover
      ======================================== */
   
   [data-kt-element="theme-mode-menu"] .menu-link:hover,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-title {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon i {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path1,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path2,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path3,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path4,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path5,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path6,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path7,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path8,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path9,
   [data-kt-element="theme-mode-menu"] .menu-link:hover .menu-icon .path10 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-title {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon i {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path1,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path2,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path3,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path4,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path5,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path6,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path7,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path8,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path9,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="light"]:hover .menu-icon .path10 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="dark"]:hover,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="dark"]:hover .menu-title {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="dark"]:hover .menu-icon,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="dark"]:hover .menu-icon i {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="dark"]:hover .menu-icon .path1,
   [data-kt-element="theme-mode-menu"] .menu-link[data-kt-value="dark"]:hover .menu-icon .path2 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   /* ========================================
      16. Menu Links Hover
      ======================================== */
   
   .menu-link:hover:not(.active),
   .menu-link:hover:not(.active) .menu-title,
   .menu-link:hover:not(.active) .menu-title span {
       color: var(--bs-primary) !important;
   }
   
   .menu-link:hover:not(.active) .menu-icon,
   .menu-link:hover:not(.active) .menu-icon i,
   .menu-link:hover:not(.active) .menu-icon svg {
       color: var(--bs-primary) !important;
   }
   
   .menu-link:hover:not(.active) .menu-icon .path1,
   .menu-link:hover:not(.active) .menu-icon .path2,
   .menu-link:hover:not(.active) .menu-icon .path3,
   .menu-link:hover:not(.active) .menu-icon .path4,
   .menu-link:hover:not(.active) .menu-icon .path5,
   .menu-link:hover:not(.active) .menu-icon .path6,
   .menu-link:hover:not(.active) .menu-icon .path7,
   .menu-link:hover:not(.active) .menu-icon .path8,
   .menu-link:hover:not(.active) .menu-icon .path9,
   .menu-link:hover:not(.active) .menu-icon .path10 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   .menu .menu-link:hover,
   .menu .menu-link:hover .menu-title,
   .menu-sub .menu-link:hover,
   .menu-sub .menu-link:hover .menu-title,
   .menu-sub-dropdown .menu-link:hover,
   .menu-sub-dropdown .menu-link:hover .menu-title {
       color: var(--bs-primary) !important;
   }
   
   
   .menu-content .menu-link:hover,
   .menu-item .menu-link:hover {
       color: var(--bs-primary) !important;
   }
   
   a.menu-link:hover,
   a.menu-link:hover .menu-title {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link .menu-icon i.ki-screen,
   [data-kt-element="theme-mode-menu"] .menu-link .menu-icon .ki-screen {
       color: var(--bs-primary) !important;
   }
   
   [data-kt-element="theme-mode-menu"] .menu-link .menu-icon i.ki-screen .path1,
   [data-kt-element="theme-mode-menu"] .menu-link .menu-icon i.ki-screen .path2,
   [data-kt-element="theme-mode-menu"] .menu-link .menu-icon i.ki-screen .path3,
   [data-kt-element="theme-mode-menu"] .menu-link .menu-icon i.ki-screen .path4 {
       fill: var(--bs-primary) !important;
       stroke: var(--bs-primary) !important;
   }
   
   /* ========================================
      17. Dark Theme Active Menu
      ======================================== */
   
   [data-bs-theme="dark"] .menu-link.active {
       background-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
   }
   
   [data-bs-theme="dark"] .menu-link.active .menu-title,
   [data-bs-theme="dark"] .menu-link.active .menu-title span {
       color: #FFFFFF !important;
   }
   
   [data-bs-theme="dark"] .menu-link.active .menu-icon,
   [data-bs-theme="dark"] .menu-link.active .menu-icon i,
   [data-bs-theme="dark"] .menu-link.active .menu-icon svg {
       color: #FFFFFF !important;
   }
   
   [data-bs-theme="dark"] .menu-link.active .menu-icon .path1,
   [data-bs-theme="dark"] .menu-link.active .menu-icon .path2,
   [data-bs-theme="dark"] .menu-link.active .menu-icon .path3,
   [data-bs-theme="dark"] .menu-link.active .menu-icon .path4 {
       fill: #FFFFFF !important;
       stroke: #FFFFFF !important;
   }
   
   [data-bs-theme="dark"] .menu-link.active:hover {
       background-color: var(--bs-primary) !important;
       color: #FFFFFF !important;
   }
   
   [data-bs-theme="dark"] .menu-link.active:hover .menu-title,
   [data-bs-theme="dark"] .menu-link.active:hover .menu-title span {
       color: #FFFFFF !important;
   }
   
   [data-bs-theme="dark"] .menu-link.active:hover .menu-icon,
   [data-bs-theme="dark"] .menu-link.active:hover .menu-icon i,
   [data-bs-theme="dark"] .menu-link.active:hover .menu-icon svg {
       color: #FFFFFF !important;
   }
   
   [data-bs-theme="dark"] .menu-link.active:hover .menu-icon .path1,
   [data-bs-theme="dark"] .menu-link.active:hover .menu-icon .path2,
   [data-bs-theme="dark"] .menu-link.active:hover .menu-icon .path3,
   [data-bs-theme="dark"] .menu-link.active:hover .menu-icon .path4 {
       fill: #FFFFFF !important;
       stroke: #FFFFFF !important;
   }

   /* ======================================== 
   18. Google Login
   ======================================== */


    a[href*="oidclogin"] span[data-i18n="login.signin_openid"] {
    font-size: 0;
    position: relative;
    }

    a[href*="oidclogin"] span[data-i18n="login.signin_openid"]::after {
    content: "Google Login (Recommended)";
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    }

    /* ======================================== 
   19. Hide Password Login Button and Password Field (Client Only)
   ======================================== */
    form#sign_in_form[action*="/web/client/"] input[type="text"][name="username"] {
    display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] .fv-row.mb-10:has(input[type="text"][name="username"]) {
        display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] .fv-row.mb-10:first-of-type {
        display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] .fv-row.mb-10:has(input[type="password"]) {
        display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] .fv-row.mb-10:nth-of-type(2) {
        display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] input[type="password"][name="password"] {
        display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] [data-password-control="visibility"] {
        display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] a[data-i18n="login.forgot_password"] {
        display: none !important;
    }
    form#sign_in_form[action*="/web/client/"] #sign_in_submit {
        display: none !important;
    }