/* Dark Mode Styles */

/* Root variables for dark mode */
:root {
    --bg-color-light: #ffffff;
    --text-color-light: #333333;
    --header-bg-light: #439cbc;
    --navbar-bg-light: #ffffff;
    --border-color-light: #ccc;
    --button-bg-light: #439cbc;
    --input-bg-light: #ffffff;
    --card-bg-light: #ffffff;
    
    --bg-color-dark: #1a1a1a;
    --text-color-dark: #d2d2d2;
    --header-bg-dark: #1a1a1a;
    --navbar-bg-dark: #1a1a1a;
    --border-color-dark: #00000000;
    --button-bg-dark: #439cbc;
    --input-bg-dark: #333;
    --card-bg-dark: #2d2d2d;
}

/* Header theme toggle button styles */
#theme-toggle-header {
    transition: all 0.3s ease !important;
    background: transparent !important;
    border: none !important;
    color: #439cbc !important;
    padding: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#theme-toggle-header:hover {
    transform: scale(1.2) !important;
    color: #357a96 !important;
}

#theme-toggle-header:focus {
    outline: none !important;
}

#theme-toggle-header:active {
    transform: scale(1.1) !important;
}

[data-theme="dark"] #theme-toggle-header {
    color: #ffd700 !important;
}

[data-theme="dark"] #theme-toggle-header:hover {
    color: #ffed4e !important;
}

/* Fix for theme icon color in dark mode */
[data-theme="dark"] #theme-icon {
    color: #ffd700 !important;
}

[data-theme="dark"] #theme-toggle-header:hover #theme-icon {
    color: #ffed4e !important;
}

/* Mobile adjustments for header button */
@media screen and (max-width: 767px) {
    #theme-toggle-header {
        padding: 6px !important;
    }
    
    #theme-icon {
        font-size: 16px !important;
    }
}

/* Extra small mobile adjustments */
@media screen and (max-width: 480px) {
    #theme-toggle-header {
        padding: 4px !important;
    }
    
    #theme-icon {
        font-size: 14px !important;
    }
}

/* Dark mode styles */
[data-theme="dark"] {
    background-color: var(--bg-color-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] body {
    background-color: var(--bg-color-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] label,
[data-theme="dark"] strong,
[data-theme="dark"] em,
[data-theme="dark"] small {
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] #header {
    background: var(--header-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] #navHeader {
    background-color: var(--navbar-bg-dark) !important;
}

[data-theme="dark"] .navbar {
    background-color: var(--navbar-bg-dark) !important;
}

[data-theme="dark"] .navbar-menu {
    background-color: var(--navbar-bg-dark) !important;
}

[data-theme="dark"] .navbar-item,
[data-theme="dark"] .navbar-link {
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .navbar-item:hover,
[data-theme="dark"] .navbar-link:hover {
    background-color: #44444400 !important;
    color: #fff !important;
}

[data-theme="dark"] a {
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .currency-option {
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] a:hover {
    color: #fff !important;
}

[data-theme="dark"] .navbar-item a,
[data-theme="dark"] .navbar-link a {
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: var(--bg-color-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .row,
[data-theme="dark"] .col,
[data-theme="dark"] .col-md-1,
[data-theme="dark"] .col-md-2,
[data-theme="dark"] .col-md-3,
[data-theme="dark"] .col-md-4,
[data-theme="dark"] .col-md-5,
[data-theme="dark"] .col-md-6,
[data-theme="dark"] .col-md-7,
[data-theme="dark"] .col-md-8,
[data-theme="dark"] .col-md-9,
[data-theme="dark"] .col-md-10,
[data-theme="dark"] .col-md-11,
[data-theme="dark"] .col-md-12,
[data-theme="dark"] .col-sm-1,
[data-theme="dark"] .col-sm-2,
[data-theme="dark"] .col-sm-3,
[data-theme="dark"] .col-sm-4,
[data-theme="dark"] .col-sm-5,
[data-theme="dark"] .col-sm-6,
[data-theme="dark"] .col-sm-7,
[data-theme="dark"] .col-sm-8,
[data-theme="dark"] .col-sm-9,
[data-theme="dark"] .col-sm-10,
[data-theme="dark"] .col-sm-11,
[data-theme="dark"] .col-sm-12 {
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .navbar-dropdown {
    background-color: var(--navbar-bg-dark) !important;
    border-color: var(--border-color-dark) !important;
}

[data-theme="dark"] .dropdown-content {
    background-color: var(--card-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

/* Currency and Language dropdowns */
[data-theme="dark"] .currency-dropdown,
[data-theme="dark"] .language-dropdown,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-item {
    background-color: var(--card-bg-dark) !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #444 !important;
    color: #fff !important;
}

[data-theme="dark"] .dropdown-toggle {
    background-color: var(--input-bg-dark) !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}

[data-theme="dark"] .dropdown-toggle:hover,
[data-theme="dark"] .dropdown-toggle:focus {
    background-color: #444 !important;
    color: #fff !important;
    border-color: var(--button-bg-dark) !important;
}

/* Additional dropdown styles for currency and language selectors */
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-secondary {
    background-color: var(--input-bg-dark) !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-secondary:hover {
    background-color: #444 !important;
    color: #fff !important;
}

[data-theme="dark"] .currency-flag,
[data-theme="dark"] .language-flag {
    filter: brightness(0.8) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color-dark) !important;
}

/* Light mode styles for currency and language dropdowns */
[data-theme="light"] .currency-dropdown,
[data-theme="light"] .language-dropdown,
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .dropdown-item {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #ccc !important;
}

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:focus {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

[data-theme="light"] .dropdown-toggle {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #ccc !important;
}

[data-theme="light"] .dropdown-toggle:hover,
[data-theme="light"] .dropdown-toggle:focus {
    background-color: #f8f9fa !important;
    color: #333 !important;
    border-color: #439cbc !important;
}

[data-theme="light"] .btn-outline-secondary,
[data-theme="light"] .btn-secondary {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #ccc !important;
}

[data-theme="light"] .btn-outline-secondary:hover,
[data-theme="light"] .btn-secondary:hover {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

[data-theme="light"] .dropdown-divider {
    border-color: #dee2e6 !important;
}

/* Additional styles for both themes to ensure dropdowns work properly */
.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu.show {
    display: block !important;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Currency and Language specific styles */
.currency-option,
.language-option {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.currency-flag,
.language-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
}

/* Ensure dropdowns are clickable and functional */
.dropdown-toggle {
    cursor: pointer;
    user-select: none;
}

.dropdown-toggle:focus {
    outline: none;
}

/* Forms and inputs */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=url],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=search],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg-dark) !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}

[data-theme="dark"] input[type=text]:focus,
[data-theme="dark"] input[type=password]:focus,
[data-theme="dark"] input[type=email]:focus,
[data-theme="dark"] input[type=url]:focus,
[data-theme="dark"] input[type=number]:focus,
[data-theme="dark"] input[type=tel]:focus,
[data-theme="dark"] input[type=search]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--button-bg-dark) !important;
    outline-color: var(--button-bg-dark) !important;
}

[data-theme="dark"] ::placeholder {
    color: #888 !important;
}

/* Buttons */
[data-theme="dark"] .button,
[data-theme="dark"] input[type=submit],
[data-theme="dark"] input[type=button] {
    background-color: var(--button-bg-dark) !important;
    color: white !important;
    border-color: var(--button-bg-dark) !important;
}

[data-theme="dark"] .button:hover,
[data-theme="dark"] input[type=submit]:hover,
[data-theme="dark"] input[type=button]:hover {
    background-color: #357a96 !important;
}

/* Tables */
[data-theme="dark"] table {
    background-color: var(--card-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] td,
[data-theme="dark"] th {
    border-color: var(--border-color-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] thead th,
[data-theme="dark"] tfoot td {
    background-color: #333 !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] tr.alt,
[data-theme="dark"] .row2 {
    background-color: #2a2a2a !important;
}

/* Cards and modules */
[data-theme="dark"] .module,
[data-theme="dark"] .card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .brand-card,
[data-theme="dark"] .item-card,
[data-theme="dark"] .box,
[data-theme="dark"] .panel,
[data-theme="dark"] .tile,
[data-theme="dark"] .media,
[data-theme="dark"] .message,
[data-theme="dark"] .notification {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
    /*border: 1px solid #444444 !important;*/
}

/* Fix for div.card specifically */
[data-theme="dark"] div.card {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Fix for card body and card header */
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Fix for DashIcon specifically */
[data-theme="dark"] .DashIcon {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}
[data-theme="dark"] .productCard,
[data-theme="dark"] .serviceCard {
    background-color: #2b2b2b !important;
    color: var(--text-color-dark) !important;
    border-color: #1b1b1b !important;
    border: 1px solid #3f3f3f !important;
}

/* Keep star ratings yellow in dark mode */
[data-theme="dark"] .fa-star,
[data-theme="dark"] .fas.fa-star,
[data-theme="dark"] .far.fa-star {
    color: #FFA41C !important;
}

[data-theme="dark"] .productCard .fa-star,
[data-theme="dark"] .productCard .fas.fa-star,
[data-theme="dark"] .productCard .far.fa-star,
[data-theme="dark"] .serviceCard .fa-star,
[data-theme="dark"] .serviceCard .fas.fa-star,
[data-theme="dark"] .serviceCard .far.fa-star {
    color: #FFA41C !important;
}

[data-theme="dark"] .module h2 {
    background-color: #333 !important;
    color: var(--text-color-dark) !important;
}

/* Product cards specific styling */
[data-theme="dark"] .product-item,
[data-theme="dark"] .product-container,
[data-theme="dark"] .item-container,
[data-theme="dark"] .brand-container {
    background-color: #3a3a3a !important;
    color: var(--text-color-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
}

/* Any div that acts as a card */
[data-theme="dark"] div[class*="card"],
[data-theme="dark"] div[class*="item"],
[data-theme="dark"] div[class*="product"],
[data-theme="dark"] div[class*="nofLabel"],
[data-theme="dark"] div[class*="brand"] {
    background-color: #1a1a1a !important;
    color: var(--text-color-dark) !important;
}

/* Additional card-like elements */
[data-theme="dark"] .content-box,
[data-theme="dark"] .widget,
[data-theme="dark"] .section-box,
[data-theme="dark"] .info-box,
[data-theme="dark"] .feature-box,
[data-theme="dark"] .service-box,
[data-theme="dark"] .offer-box {
    background-color: #3a3a3a !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}

/* White background elements that should be gray in dark mode */
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background: #fff"] {
    background-color: #3a3a3a !important;
}

/* Additional elements that might have white backgrounds */
[data-theme="dark"] .content,
[data-theme="dark"] .main-content,
[data-theme="dark"] .page-content,
[data-theme="dark"] .section,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .container-white,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .white-bg,
[data-theme="dark"] .light-bg {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Project specific elements */
[data-theme="dark"] .project-content,
[data-theme="dark"] .project-section,
[data-theme="dark"] .milestone-section,
[data-theme="dark"] .service-section,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .graph-container {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Tables and data displays */
[data-theme="dark"] .table-container,
[data-theme="dark"] .data-table,
[data-theme="dark"] .milestone-table {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Form sections */
[data-theme="dark"] .form-section,
[data-theme="dark"] .input-section,
[data-theme="dark"] .field-section {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Any element with light colors */
[data-theme="dark"] .light,
[data-theme="dark"] .bright,
[data-theme="dark"] .pale {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Specific fixes for project pages and milestone tables */
[data-theme="dark"] tbody,
[data-theme="dark"] tbody tr,
[data-theme="dark"] tbody td {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr {
    background-color: #2a2a2a !important;
}

[data-theme="dark"] .table tbody tr:nth-child(even) {
    background-color: #333333 !important;
}

/* Input fields in tables */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="file"] {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
}

/* Select dropdowns */
[data-theme="dark"] select option {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Any white or light colored divs */

[data-theme="dark"] div[style*="background-color:#ffffff"],
[data-theme="dark"] div[style*="background-color: #ffffff"],
[data-theme="dark"] div[style*="background-color:white"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background: #ffffff"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: white"] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Override for specific colored elements that should keep their colors */
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-info {
    color: #ffffff !important;
}

[data-theme="dark"] .text-success {
    color: #28a745 !important;
}

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

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

[data-theme="dark"] .text-info {
    color: #17a2b8 !important;
}

/* Keep colored backgrounds for Services, Products, Custom sections */
[data-theme="dark"] .bg-success,
[data-theme="dark"] .bg-primary,
[data-theme="dark"] .bg-info,
[data-theme="dark"] .bg-warning,
[data-theme="dark"] .bg-danger {
    color: #ffffff !important;
}

/* Preserve green, blue, and other colored headers */
[data-theme="dark"] [style*="background-color: #28a745"],
[data-theme="dark"] [style*="background-color: #007bff"],
[data-theme="dark"] [style*="background-color: #17a2b8"],
[data-theme="dark"] [style*="background-color: #6c757d"],
[data-theme="dark"] [style*="background: #28a745"],
[data-theme="dark"] [style*="background: #007bff"],
[data-theme="dark"] [style*="background: #17a2b8"],
[data-theme="dark"] [style*="background: #6c757d"] {
    background-color: inherit !important;
}

/* Project list */
[data-theme="dark"] .projectList {
    background-color: var(--input-bg-dark) !important;
    border-color: var(--border-color-dark) !important;
    color: var(--text-color-dark) !important;
}

/* Footer */
[data-theme="dark"] .footer-section {
    background-color: var(--card-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .footer-widget-heading h3 {
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .footer-widget ul li a {
    color: #aaa !important;
}

[data-theme="dark"] .footer-widget ul li a:hover {
    color: var(--button-bg-dark) !important;
}

[data-theme="dark"] .copyright-area {
    background-color: #111 !important;
}

/* Alerts */
[data-theme="dark"] .alert {
    background-color: #444 !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}

[data-theme="dark"] .alert.success {
    background-color: #1e4d1e !important;
}

[data-theme="dark"] .alert.warning {
    background-color: #4d3d1e !important;
}

[data-theme="dark"] .alert.info {
    background-color: #1e3d4d !important;
}

/* Notifications */
[data-theme="dark"] .notification-panel {
    background-color: var(--card-bg-dark) !important;
    border-color: var(--border-color-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .notification-item {
    border-color: var(--border-color-dark) !important;
}

[data-theme="dark"] .notification-item:hover {
    background-color: #333 !important;
}

[data-theme="dark"] .notification-item.unread {
    background-color: #2a3a4a !important;
}

/* Breadcrumbs */
[data-theme="dark"] div.breadcrumbs {
    background-color: #333 !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] div.breadcrumbs a {
    color: var(--button-bg-dark) !important;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: #333 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #555 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--button-bg-dark) !important;
}

/* Accordion */
[data-theme="dark"] .accordion {
    background-color: var(--input-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .accordion:hover {
    background-color: #444 !important;
}

[data-theme="dark"] .panel {
    background-color: var(--card-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

/* Specific fix for accordionOrders */
[data-theme="dark"] .accordionOrders,
[data-theme="dark"] #accordionOrders {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .accordionOrders .panel,
[data-theme="dark"] #accordionOrders .panel {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .accordionOrders .accordion,
[data-theme="dark"] #accordionOrders .accordion {
    background-color: #333333 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .accordionOrders .accordion:hover,
[data-theme="dark"] #accordionOrders .accordion:hover {
    background-color: #444444 !important;
}

/* Additional accordion-related elements */
[data-theme="dark"] .accordion-content,
[data-theme="dark"] .accordion-body,
[data-theme="dark"] .collapse,
[data-theme="dark"] .collapsible {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Any element with accordion in class name */
[data-theme="dark"] [class*="accordion"] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Bootstrap accordion components */
[data-theme="dark"] .accordion-item {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .accordion-header {
    background-color: #333333 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .accordion-button {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .accordion-button:hover {
    background-color: #444444 !important;
}

/* Tooltips */
[data-theme="dark"] .tooltip .tooltiptext {
    background-color: #555 !important;
    color: white !important;
}

/* Form containers */
[data-theme="dark"] .form-container {
    background-color: var(--card-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .form-container input[type=text],
[data-theme="dark"] .form-container input[type=password] {
    background-color: var(--input-bg-dark) !important;
    color: var(--text-color-dark) !important;
}

/* Circles and icons */
[data-theme="dark"] .circle {
    background-color: var(--button-bg-dark) !important;
}

[data-theme="dark"] .circleSmall {
    background-color: #dc3545 !important;
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Mobile adjustments for dark mode */
@media screen and (max-width: 767px) {
    [data-theme="dark"] .navbar-brand {
        color: var(--text-color-dark) !important;
    }
    
    [data-theme="dark"] .TitleFont {
        color: var(--text-color-dark) !important;
    }
}