/**
    This file includes styles to help apply a skin color on top of Tabler's default
    and it ensures all css color variables declared in "./colors.css" are applied correctly,
    particularly for dark mode.
*/

[data-bs-theme=dark] ::placeholder {
    color: rgba(var(--tblr-light-text), 0.5) !important;
}

[data-bs-theme=dark] ul.pagination li.paginate_button.page-item.active a.page-link {
    color: var(--tblr-light) !important;
}

[data-bs-theme=dark] .select2-selection--multiple input:not(:focus) {
    color: rgba(var(--tblr-light-text), 0.5) !important;
}

/*cards*/
[data-bs-theme=dark] .card-body {
    box-shadow: inset 0 calc(-1 * var(--tblr-navbar-border-width)) 0 0 var(--tblr-light-border-subtle) !important;
}

[data-bs-theme=dark] .card {
    border-color: var(--tblr-light-border-subtle);
}

[data-bs-theme=dark] .card-header,
[data-bs-theme=dark] .card-footer {
    background: var(--tblr-bg-surface);
    border-color: var(--tblr-light-border-subtle) !important;
}

.card-footer a:hover .text-primary {
    text-decoration: underline;
    text-decoration-color: var(--tblr-primary);
}

.card-footer a:hover .text-secondary {
    text-decoration: underline;
    text-decoration-color: var(--tblr-secondary);
}

.card-footer a:hover .text-success {
    text-decoration: underline;
    text-decoration-color: var(--tblr-success);
}

.card-footer a:hover .text-danger {
    text-decoration: underline;
    text-decoration-color: var(--tblr-danger);
}

.card-footer a:hover .text-warning {
    text-decoration: underline;
    text-decoration-color: var(--tblr-warning);
}

.card-footer a:hover .text-info {
    text-decoration: underline;
    text-decoration-color: var(--tblr-info);
}

.progress {
    background-color: var(--tblr-light-border-subtle) !important;
}

/*inputs*/
[data-bs-theme=dark] input[type=checkbox]:not(:checked).form-check-input {
    background-color: var(--tblr-primary-border-subtle);
}

[data-bs-theme=dark] input[type=checkbox]:not(:checked).form-check-input::after {
    background-color: var(--tblr-bg-surface);
}

[data-bs-theme=dark] input[type=checkbox]:checked.form-check-input {
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}

[data-bs-theme=dark] input:not(input[type=hidden]).form-control,
[data-bs-theme=dark] textarea.form-control,
[data-bs-theme=dark] select.form-control,
[data-bs-theme=dark] select.form-select,
[data-bs-theme=dark] :not(.navbar-filters) .select2-selection--single,
[data-bs-theme=dark] .select2-container .select2-dropdown .select2-search input.select2-search__field {
    background-color: var(--tblr-gray-800);
    border-color: var(--tblr-primary-border-subtle);
    color: rgba(var(--tblr-light-text), 0.5);
}

[data-bs-theme=dark] .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: rgba(var(--tblr-light-text), 0.5);
}

[data-bs-theme=dark] input[type=date].form-control::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

[data-bs-theme=dark] :not(.navbar-filters) .select2-selection--multiple {
    background-color: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-bg-surface) !important;
}

[data-bs-theme=dark] :not(.navbar-filters) .select2-container--open {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    border-color: var(--tblr-bg-surface) !important;
}

[data-bs-theme=dark] :not(.navbar-filters) .select2-results ul.select2-results__options li.select2-results__option.select2-results__option--highlighted {
    background-color: var(--tblr-primary);
}

[data-bs-theme=dark] :not(.navbar-filters) .select2-results ul.select2-results__options li.select2-results__option:not(.select2-results__option--highlighted),
[data-bs-theme=dark] .select2-container .select2-dropdown .select2-search {
    background-color: var(--tblr-dark) !important;
}

[data-bs-theme=dark] :not(.navbar-filters) .select2-results ul.select2-results__options li.select2-results__option:not(.select2-results__option--highlighted)[aria-selected=true] {
    color: var(--tblr-primary) !important;
}

[data-bs-theme=dark] select[multiple]:focus option:checked {
    background: var(--tblr-primary) linear-gradient(0deg, var(--tblr-primary) 0%, var(--tblr-primary) 100%);
}


[data-bs-theme=dark] .input-group button.popup_selector,
[data-bs-theme=dark] .input-group button.clear_elfinder_picker {
    background-color: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-primary-border-subtle) !important;
    color: var(--tblr-dark-text);
}

[data-bs-theme=dark] .input-group button.popup_selector:hover,
[data-bs-theme=dark] .input-group button.clear_elfinder_picker:hover {
    background-color: var(--tblr-dark-rgb) !important;
    color: var(--tblr-light-text);
}

/*phone*/
[data-bs-theme=dark] .dial-code {
    color: red !important;
}

/*ckeditor*/
[data-bs-theme=dark] .cke_top, span.cke_button_label.cke_button__source_label {
    background-color: var(--tblr-bg-surface) !important;
}

[data-bs-theme=dark] span.cke_button_icon,
[data-bs-theme=dark] span.cke_combo_arrow {
    filter: invert(1) !important;
}

[data-bs-theme=dark] span.cke_button_label,
[data-bs-theme=dark] span.cke_combo_text {
    color: var(--tblr-light-text) !important;
}

[data-bs-theme=dark] .cke_chrome {
    border: none;
}

[data-bs-theme=dark] span.cke_combo_text {
    color: var(--tblr-light-text) !important;
}

/*filters*/
[data-bs-theme=dark] .navbar-filters ul.select2-selection__rendered {
    background-color: var(--tblr-gray-600) !important;
    box-shadow: 0 0 3px var(--tblr-primary) !important;
}

[data-bs-theme=dark] .navbar-filters .select2-selection--multiple {
    background-color: var(--tblr-gray-800) !important;
    color: var(--tblr-light) !important;
}

[data-bs-theme=dark] table.table.table-striped > tbody > tr:nth-of-type(even) > * {
    --tblr-table-accent-bg: var(--tblr-bg-surface);
}

#crudTable_wrapper .table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.03);
}

[data-bs-theme=dark] header.top div.navbar-collapse div.navbar,
[data-bs-theme=dark] header.navbar {
    background-color: var(--tblr-dark);
}

[data-bs-theme=dark] .form-selectgroup-check {
    background-color: var(--tblr-bg-surface);
}

[data-bs-theme=dark] span.input-group-text {
    border-color: var(--tblr-primary-border-subtle);
    color: var(--tblr-light);
}

[data-bs-theme=dark] .old-theme-available {
    background: var(--tblr-body-bg);
    color: var(--tblr-light);
}

[data-bs-theme=dark] header.top div.navbar-collapse div.navbar .text-muted,
[data-bs-theme=dark] header.top div.navbar-collapse div.navbar .text-secondary,
[data-bs-theme=dark] header.navbar .text-muted,
[data-bs-theme=dark] header.navbar .text-secondary {
    color: var(--tblr-light) !important;
}

[data-bs-theme=dark] header.top div.navbar-collapse div.navbar .dropdown-header,
[data-bs-theme=dark] header.navbar .dropdown-header {
    color: var(--tblr-light);
}

[data-bs-theme=dark] header .dropdown-item {
    color: var(--tblr-light);
}

[data-bs-theme=dark] header .dropdown-item:hover {
    color: var(--tblr-light);
}

[data-bs-theme=dark] header.top div.navbar-collapse div.navbar .dropdown-item:hover:not(.active),
[data-bs-theme=dark] header.navbar .dropdown-item:hover:not(.active) {
    background-color: var(--tblr-primary);
}

[data-bs-theme=dark] header.top div.navbar-collapse div.navbar .dropdown-item.active:hover,
[data-bs-theme=dark] header.navbar .dropdown-item.active:hover {
    color: var(--tblr-dropdown-link-active-color);
    background-color: var(--tblr-dropdown-link-active-bg);
}

[data-bs-theme=light] header.top div.navbar-collapse div.navbar .dropdown-item:hover:not(.active),
[data-bs-theme=light] header.navbar .dropdown-item:hover:not(.active) {
    background-color: var(--tblr-primary);
    color: var(--tblr-light);
    font-weight: 500;
}

[data-bs-theme=light] header.top div.navbar-collapse div.navbar .dropdown-item.active:hover,
[data-bs-theme=light] header.navbar .dropdown-item.active:hover {
    color: var(--tblr-dropdown-link-active-color);
    background-color: rgba(var(--tblr-primary-rgb), 0.06);;
}

[data-bs-theme=dark] .navbar.navbar-filters {
    background-color: var(--tblr-dark);
}

[data-bs-theme=dark] .navbar.navbar-filters .nav-link {
    color: var(--tblr-light) !important;
}

[data-bs-theme=dark] .markdown > table thead th,
[data-bs-theme=dark] .table thead th {
    background-color: var(--tblr-dark) !important;
    color: var(--tblr-light);
}

[data-bs-theme=dark] .nav-link {
    color: var(--tblr-light);
    font-weight: 500;
}

[data-bs-theme=dark] h1,
[data-bs-theme=dark] .h1 {
    color: var(--tblr-light);
}

[data-bs-theme=dark] table.dataTable.nowrap th,
[data-bs-theme=dark] table.dataTable.nowrap td {
    color: var(--tblr-light-text-emphasis) !important;
}

[data-bs-theme=dark] .text-muted {
    color: #8e99a3 !important;
}

.alert {
    background: var(--tblr-alert-color);
}

[data-bs-theme=dark] .alert {
    background: unset;
    position: relative;
}

[data-bs-theme=dark] .alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--tblr-alert-color);
    opacity: 0.4;
}

[data-bs-theme=dark] .alert > * {
    position: relative;
    z-index: +1;
}

.alert-info, .alert-danger, .alert-success, .alert-warning, .alert-primary, .alert-secondary {
    color: var(--tblr-light);
}

#crudTable_wrapper #crudTable, #crudTable_wrapper table.dataTable a:not([href]),
.card table a:not([href]) {
    cursor: default;
    color: unset;
}

#crudTable_wrapper #crudTable, #crudTable_wrapper table.dataTable a:not([href]):hover,
.card table a:not([href]):hover,
a.badge:hover {
    text-decoration: none;
}

.badge-primary {
    background-color: var(--tblr-primary);
    color: var(--tblr-light);
}

.badge-secondary {
    background-color: var(--tblr-secondary);
    color: var(--tblr-light);
}

.badge-success {
    background-color: var(--tblr-success);
    color: var(--tblr-light);
}

.badge-danger {
    background-color: var(--tblr-danger);
    color: var(--tblr-light);
}

.badge-warning {
    background-color: var(--tblr-warning);
    color: var(--tblr-light);
}

.badge-info {
    background-color: var(--tblr-info);
    color: var(--tblr-light);
}

.badge-light {
    background-color: var(--tblr-gray-300);
    color: var(--tblr-secondary) !important;
}

.badge-dark {
    background-color: var(--tblr-black);
    color: var(--tblr-light);
}

[data-bs-theme=dark] .badge-dark {
    background-color: var(--tblr-secondary);
    color: var(--tblr-light);
}

.badge-default {
    background-color: var(--tblr-primary-secondary);
    color: var(--tblr-light);
}

.badge > i {
    margin-right: 4px;
}

[data-bs-theme=light] .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tblr-primary) !important;
    color: var(--tblr-light) !important;;
}

.btn-link, .btn-link:hover {
    color: var(--tblr-primary);
}

.link-secondary:focus, .link-secondary:hover {
    text-decoration: unset;
    opacity: 1 !important;
}

.link-secondary {
    color: var(--tblr-secondary);
}

[data-bs-theme=dark] .link-secondary {
    color: var(--tblr-light);
    opacity: 0.5;
    transition: opacity 0.3s ease-in;
}

.form-selectgroup-label {
    background: rgba(var(--tblr-primary-rgb), .04);
}

.form-selectgroup-input:checked + .form-selectgroup-label {
    background: var(--tblr-bg-forms);
}

.btn {
    box-shadow: unset;
}

[data-bs-theme=dark] .select2-container--bootstrap.select2-container--disabled .select2-selection,
[data-bs-theme=dark] .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tblr-gray-800) !important;
}

.existing-file {
    border-radius: unset !important;
    border-color: var(--tblr-primary-border-subtle) !important;
}

[data-bs-theme=dark] .existing-file {
    background-color: var(--tblr-gray-800) !important;
}

.existing-file > a {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
}

.existing-file .btn {
    float: right;
    padding: 4px;
    min-width: 10px;
    border-radius: 0;
    background-color: var(--tblr-primary) !important;
}

.backstrap-file-label {
    border-radius: unset !important;
    line-height: 1.8 !important;
    min-height: 40px;
}

.backstrap-file-label::after {
    line-height: 1.8 !important;
    min-height: 38px;
}

[data-bs-theme=dark] [data-bs-theme=dark] .backstrap-file-label {
    background-color: var(--tblr-gray-800) !important;
}

#crudTable tr th:first-child, #crudTable tr td:first-child, #crudTable table.dataTable tr th:first-child, #crudTable table.dataTable tr td:first-child {
    padding-left: 1.5rem;
}

[data-bs-theme=dark] .markdown > table, .table {
    --tblr-table-bg: rgb(255 255 255 / 8%);
}

[data-bs-theme=dark] .auth .auth-logo-container {
    color: var(--tblr-light);
}

.auth footer {
    margin-top: 2rem !important;
    --tblr-gutter-x: calc(var(--tblr-page-padding)* 2);
    --tblr-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--tblr-gutter-x)* .5);
    padding-left: calc(var(--tblr-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
    max-width: 30rem;
    color: rgb(var(--tblr-emphasis-color-rgb), 0.8);
}

.auth footer .text-center {
    text-align: left !important;
}

.auth .switch-mode {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background-color: var(--tblr-light);
}

[data-bs-theme=dark] .h1,
[data-bs-theme=dark] .h2,
[data-bs-theme=dark] .h3,
[data-bs-theme=dark] .h4,
[data-bs-theme=dark] .h5,
[data-bs-theme=dark] .h6,
[data-bs-theme=dark] h1,
[data-bs-theme=dark] h2,
[data-bs-theme=dark] h3,
[data-bs-theme=dark] h4,
[data-bs-theme=dark] h5,
[data-bs-theme=dark] h6 {
    color: var(--tblr-light);
}

[data-bs-theme=dark] .auth .h1,
[data-bs-theme=dark] .auth .h2,
[data-bs-theme=dark] .auth .h3,
[data-bs-theme=dark] .auth .h4,
[data-bs-theme=dark] .auth .h5,
[data-bs-theme=dark] .auth .h6,
[data-bs-theme=dark] .auth h1,
[data-bs-theme=dark] .auth h2,
[data-bs-theme=dark] .auth h3,
[data-bs-theme=dark] .auth h4,
[data-bs-theme=dark] .auth h5,
[data-bs-theme=dark] .auth h6 {
    color: rgb(var(--tblr-emphasis-color-rgb), 0.8);
}

[data-bs-theme=dark] .col-form-label, .form-label {
    color: rgb(var(--tblr-emphasis-color-rgb), 0.6);
}