/* Dark Mode vars */
[data-theme="dark"] {
    --basic-100: #0e1d2c;
    --basic-000: #0c1926;
    --dark-blue-100: #14293f;
    --dark-blue-200: #435465;
    --dark-blue-300: #5b6979;
    --dark-blue-500: #8a949f;
    --dark-blue-700: #e8eaec;
    --alert-blue-100: #e6f5ff;
    --alert-red-100: #fff0ef;
    --alert-red-700: #ff9792;
    --alert-red-900: #ff6b63;
    --alert-yellow-700: #eebf68;
    --alert-yellow-900: #f2b74a;
}

[data-theme="dark"] {
    background-color: var(--basic-100);
    color: var(--dark-blue-700);
}

[data-theme="dark"] body {
    background-color: var(--basic-100);
    color: var(--dark-blue-700);
}

[data-theme="dark"] .box-item,
[data-theme="dark"] .box-item-login,
[data-theme="dark"] .box-item-update-password,
[data-theme="dark"] .box-item-rodo,
[data-theme="dark"] .flex-wrapper-register {
    background-color: var(--basic-000);
    border-color: var(--dark-blue-200);
}

[data-theme="dark"] .login-input,
[data-theme="dark"] .password-container,
[data-theme="dark"] .custom-select-trigger,
[data-theme="dark"] .search-box input {
    background-color: var(--basic-000);
    border-color: white;
    color: white;
}

[data-theme="dark"] .password-container input {
    background-color: var(--basic-000);
    color: white;
}

[data-theme="dark"] input::placeholder {
    color: white;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: var(--dark-blue-700);
}

[data-theme="dark"] .neutral-font,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .blue-font,
[data-theme="dark"] a,
[data-theme="dark"] span,
[data-theme="dark"] .custom-select-container > label,
[data-theme="dark"] p {
    color: white;
}

[data-theme="dark"] .navbar {
    background: var(--basic-000);
    border-bottom: 1px solid var(--dark-blue-200);
    box-shadow: 0 4px 8px 0 var(--dark-blue-100);
}

[data-theme="dark"] .register-svg,
[data-theme="dark"] .password-svg,
[data-theme="dark"] .avatar-icon,
[data-theme="dark"] .logo-img,
[data-theme="dark"] .svg,
[data-theme="dark"] .arrow,
[data-theme="dark"] .search-icon,
[data-theme="dark"] .navbar-logo {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .header {
    background: transparent;
}

[data-theme="dark"] .divider,
[data-theme="dark"] .section-divider {
    border-color: var(--dark-blue-200);
    background: var(--dark-blue-200);
}

[data-theme="dark"] .custom-select-dropdown {
    background-color: var(--basic-000);
    border-color: white;
    color: white;
}

[data-theme="dark"] .option-item {
    color: white;
}

[data-theme="dark"] .option-item.selected *,
[data-theme="dark"] .option-item[aria-selected="true"] * {
    color: var(--dark-blue-100) !important;
}

[data-theme="dark"] .option-item.highlighted span {
    color: var(--dark-blue-100) !important;
}

[data-theme="dark"] .option-item.highlighted:hover span {
    color: white !important;
}

[data-theme="dark"] .option-item.selected.highlighted:hover span {
    color: white !important;
}

[data-theme="dark"] .profile-card-input:checked + .profile-card-label,
[data-theme="dark"] .profile-card-input:checked + .profile-card-label * {
    color: var(--dark-blue-100) !important;
}

[data-theme="dark"] .profile-card-input:checked + .profile-card-label:hover,
[data-theme="dark"] .profile-card-input:checked + .profile-card-label:hover * {
    color: white !important;
}

[data-theme="dark"] .profile-card-input:checked + .profile-card-label .avatar-icon,
[data-theme="dark"] .profile-card-input:checked + .profile-card-label:hover .avatar-icon {
    filter: none;
}

[data-theme="dark"] .profile-card-input:checked + .profile-card-label:hover .avatar-initials {
    color: var(--dark-blue-100) !important;
}

[data-theme="dark"] button.tablinks {
    color: white;
}

[data-theme="dark"] .active-tab,
[data-theme="dark"] button.tablinks:focus-visible,
[data-theme="dark"] button.tablinks:hover {
    color: var(--dark-blue-100) !important;
}


[data-theme="dark"] .option-item:hover {
    background: var(--dark-blue-100);
}

[data-theme="dark"] .profile-card-label {
    background-color: var(--basic-000);
    border-color: var(--dark-blue-200);
}

[data-theme="dark"] .profile-card-label:hover {
    background: var(--dark-blue-100);
}

[data-theme="dark"] [data-tooltip]::after {
    background: var(--dark-blue-100);
    color: white;
}

[data-theme="dark"] .error-block,
[data-theme="dark"] .validation-error {
    color: var(--alert-red-100);
    background: var(--alert-red-900);
    border-color: var(--alert-red-700);
}

[data-theme="dark"] .info-block {
    background: var(--dark-blue-100);
}

[data-theme="dark"] .warning-block {
    background: var(--alert-yellow-900);
}

[data-theme="dark"] .action-bar {
    background: var(--basic-000);
    border-top: 1px solid var(--dark-blue-200);
    box-shadow: 0 4px 8px 0 var(--dark-blue-100);
}

[data-theme="dark"] .mobile-tab {
    background: var(--basic-000);
    border-color: var(--dark-blue-200);
}

[data-theme="dark"] .pagination-bar {
    background-color: var(--basic-100);
    border-top: 1px solid var(--dark-blue-200);
}

[data-theme="dark"] .pagination-bar__btn {
    background-color: var(--basic-000);
    border-color: white;
    color: white;
}

[data-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--basic-000) inset !important;
    -webkit-text-fill-color: #E5E7EB !important;
}

[data-theme="dark"] .search-input-wrapper,
[data-theme="dark"] .search-option input {
    background-color: var(--basic-100);
    color: white;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background-color: var(--dark-blue-200);
    border-radius: 1.5rem;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-blue-300);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:active {
    background-color: var(--dark-blue-200);
}

/* --- Firefox only --- */
@-moz-document url-prefix() {
    [data-theme="dark"] * {
        scrollbar-width: thin;
        scrollbar-color: var(--dark-blue-200) transparent;
    }
}