/* Accessible defaults shared by the admin and authentication screens. */
html {
    font-size: 100%;
}

body {
    font-size: 16px !important;
    line-height: 1.55 !important;
}

body,
.menu-title,
.menu-link,
.form-label,
.form-check-label,
.form-control,
.form-select,
.form-control-lg,
.btn {
    font-size: 16px !important;
}

table tbody tr[tabindex="0"]:focus-visible {
    background-color: #e8f1ff !important;
    outline: none !important;
}

/* Browsers do not reliably paint outlines around table rows. Build the full
   row frame from the cells instead. */
table tbody tr[tabindex="0"]:focus-visible > td {
    background-color: #e8f1ff !important;
    border-top: 3px dashed #005fcc !important;
    border-bottom: 3px dashed #005fcc !important;
}

table tbody tr[tabindex="0"]:focus-visible {
    box-shadow: none !important;
}

table tbody tr[tabindex="0"]:focus-visible > td:first-child {
    border-left: 0 !important;
    background-image: repeating-linear-gradient(
        to bottom,
        #005fcc 0,
        #005fcc 6px,
        transparent 6px,
        transparent 10px
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 3px 100% !important;
    background-position: left top !important;
}

table tbody tr[tabindex="0"]:focus-visible > td:last-child {
    border-right: 3px dashed #005fcc !important;
}

table thead th:focus-visible {
    outline: none !important;
    background-color: #e8f1ff !important;
    border-top: 3px dashed #005fcc !important;
    border-bottom: 3px dashed #005fcc !important;
}

table thead th:focus-visible:first-child {
    border-left: 0 !important;
    background-image: repeating-linear-gradient(
        to bottom,
        #005fcc 0,
        #005fcc 6px,
        transparent 6px,
        transparent 10px
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 3px 100% !important;
    background-position: left top !important;
}

table thead th:focus-visible:last-child {
    border-right: 3px dashed #005fcc !important;
}

[data-bs-theme="dark"] table tbody tr[tabindex="0"]:focus-visible,
body.bg-dark table tbody tr[tabindex="0"]:focus-visible,
body.dark-mode table tbody tr[tabindex="0"]:focus-visible {
    background-color: #1e3a5f !important;
}

body.bg-dark table tbody tr[tabindex="0"]:focus-visible > td,
[data-bs-theme="dark"] table tbody tr[tabindex="0"]:focus-visible > td,
body.dark-mode table tbody tr[tabindex="0"]:focus-visible > td {
    background-color: #1e3a5f !important;
    border-color: #7db7ff !important;
}

body.bg-dark table tbody tr[tabindex="0"]:focus-visible > td:first-child,
[data-bs-theme="dark"] table tbody tr[tabindex="0"]:focus-visible > td:first-child,
body.dark-mode table tbody tr[tabindex="0"]:focus-visible > td:first-child {
    background-image: repeating-linear-gradient(
        to bottom,
        #7db7ff 0,
        #7db7ff 6px,
        transparent 6px,
        transparent 10px
    ) !important;
}

[data-bs-theme="dark"] table thead th:focus-visible,
body.bg-dark table thead th:focus-visible,
body.dark-mode table thead th:focus-visible {
    background-color: #1e3a5f !important;
    border-color: #7db7ff !important;
}

[data-bs-theme="dark"] table thead th:focus-visible:first-child,
body.bg-dark table thead th:focus-visible:first-child,
body.dark-mode table thead th:focus-visible:first-child {
    background-image: repeating-linear-gradient(
        to bottom,
        #7db7ff 0,
        #7db7ff 6px,
        transparent 6px,
        transparent 10px
    ) !important;
}

/* The dark navigation needs an inset focus indicator so it is not clipped. */
.aside .menu-link:focus-visible,
.aside [role="button"]:focus-visible {
    outline: 3px dashed #ffffff !important;
    outline-offset: -3px !important;
    background-color: #1f4f7a !important;
    color: #ffffff !important;
}

label,
.form-label,
.form-check-label,
input,
select,
textarea,
button,
.btn {
    font-size: 16px !important;
}

.text-muted,
.text-gray-400,
.text-gray-500 {
    color: #374151 !important;
}

body.bg-dark .text-muted,
body.bg-dark .text-gray-400,
body.bg-dark .text-gray-500,
body.dark-mode .text-muted,
body.dark-mode .text-gray-400,
body.dark-mode .text-gray-500,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-gray-400,
[data-bs-theme="dark"] .text-gray-500 {
    color: #d1d5db !important;
}

body.dark-mode .text-dark,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700 {
    color: #f9fafb !important;
}

body.dark-mode .text-muted,
body.dark-mode .text-gray-400,
body.dark-mode .text-gray-500 {
    color: #e5e7eb !important;
}

body.dark-mode .bg-body,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .menu-sub-dropdown {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

body.dark-mode .bg-light,
body.dark-mode .bg-body-secondary {
    background-color: #273449 !important;
    color: #f3f4f6 !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea,
body.dark-mode input {
    background-color: #111827 !important;
    border-color: #526174 !important;
    color: #f9fafb !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

body.dark-mode table,
body.dark-mode table td,
body.dark-mode table th {
    color: #f3f4f6 !important;
    border-color: #6b7280 !important;
}

body.dark-mode .btn {
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-info,
body.dark-mode .btn-success,
body.dark-mode .btn-danger,
body.dark-mode .btn-warning,
body.dark-mode .btn-secondary {
    color: #ffffff !important;
    font-weight: 600;
}

body.dark-mode .btn-primary {
    background-color: #1167d8 !important;
}

body.dark-mode .btn-info {
    background-color: #087ea4 !important;
}

body.dark-mode .btn-success {
    background-color: #16803c !important;
}

body.dark-mode .btn-danger {
    background-color: #c5222d !important;
}

body.dark-mode .btn-warning {
    background-color: #d97706 !important;
    color: #111827 !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-light {
    background-color: #374151 !important;
    color: #ffffff !important;
}

body.dark-mode .badge-light-success,
body.dark-mode .badge-light-primary,
body.dark-mode .badge-light-info,
body.dark-mode .badge-light-warning,
body.dark-mode .badge-light-danger {
    color: #ffffff !important;
    font-weight: 700;
}

body.dark-mode .badge-light-success {
    background-color: #16803c !important;
}

body.dark-mode .badge-light-primary {
    background-color: #1167d8 !important;
}

body.dark-mode .badge-light-info {
    background-color: #087ea4 !important;
}

body.dark-mode .badge-light-warning {
    background-color: #d97706 !important;
    color: #111827 !important;
}

body.dark-mode .badge-light-danger {
    background-color: #c5222d !important;
}

/* Navigation icon states */
.aside .menu-link .menu-icon i,
.aside .menu-link .menu-icon svg {
    color: #64748b !important;
    fill: currentColor;
}

.aside .menu-link:hover .menu-icon i,
.aside .menu-link:hover .menu-icon svg {
    color: #0ea5e9 !important;
    fill: currentColor;
}

.aside .menu-link.active .menu-icon i,
.aside .menu-link.active .menu-icon svg,
.aside .menu-link[aria-current="page"] .menu-icon i,
.aside .menu-link[aria-current="page"] .menu-icon svg {
    color: #005fcc !important;
    fill: currentColor;
}

body.dark-mode .aside .menu-link .menu-icon i,
body.dark-mode .aside .menu-link .menu-icon svg {
    color: #ffffff !important;
}

body.dark-mode .aside .menu-link,
body.dark-mode .aside .menu-link .menu-title {
    color: #ffffff !important;
}

body.dark-mode .aside .menu-link:hover .menu-icon i,
body.dark-mode .aside .menu-link:hover .menu-icon svg {
    color: #1683ff !important;
}

body.dark-mode .aside .menu-link.active .menu-icon i,
body.dark-mode .aside .menu-link.active .menu-icon svg,
body.dark-mode .aside .menu-link[aria-current="page"] .menu-icon i,
body.dark-mode .aside .menu-link[aria-current="page"] .menu-icon svg {
    color: #1683ff !important;
}

body.dark-mode .aside .menu-link:hover,
body.dark-mode .aside .menu-link:hover .menu-title,
body.dark-mode .aside .menu-link.active,
body.dark-mode .aside .menu-link.active .menu-title,
body.dark-mode .aside .menu-link[aria-current="page"],
body.dark-mode .aside .menu-link[aria-current="page"] .menu-title {
    color: #1683ff !important;
}

body.dark-mode #kt_header .theme-mode,
body.dark-mode #kt_header .fonticon-sun,
body.dark-mode #kt_header .fonticon-moon {
    color: #ffffff !important;
}

body.dark-mode #kt_header a:hover .theme-mode,
body.dark-mode #kt_header a:hover .fonticon-sun,
body.dark-mode #kt_header a:hover .fonticon-moon,
body.dark-mode #kt_header .theme-mode-light:hover,
body.dark-mode #kt_header .theme-mode-dark:hover {
    color: #1683ff !important;
}

body.dark-mode #kt_aside_toggle,
body.dark-mode #kt_aside_toggle svg,
body.dark-mode #kt_aside_toggle svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

body.dark-mode #kt_aside_toggle:hover,
body.dark-mode #kt_aside_toggle:hover svg,
body.dark-mode #kt_aside_toggle:hover svg path {
    color: #1683ff !important;
    fill: #1683ff !important;
}

/* DataTables and Bootstrap pagination */
body.dark-mode .dataTables_wrapper .dataTables_paginate .pagination,
body.dark-mode nav[aria-label="Pagination"] .pagination,
body.dark-mode .pagination {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #9ca3af !important;
    border-radius: 0.5rem;
    background-color: #1f2937 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button,
body.dark-mode .pagination .page-link {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.dark-mode .pagination .page-link:hover {
    background-color: #1683ff !important;
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body.dark-mode .pagination .page-item.active .page-link {
    background-color: #1683ff !important;
    border: 0 !important;
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    border: 0 !important;
    color: #9ca3af !important;
}

body.dark-mode .btn:hover,
body.dark-mode .btn:focus-visible {
    border-color: #ffffff !important;
}
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 3px dashed #005fcc !important;
    outline-offset: 3px !important;
    position: relative;
    z-index: 10;
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

a {
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
