/* Custom Dark Mode Styles for AdminLTE */

/* Dark Mode Toggle Button Styling */
#darkModeToggle {
    transition: all 0.3s ease;
}

#darkModeToggle:hover {
    opacity: 0.8;
}

#darkModeIcon {
    transition: transform 0.3s ease;
}

#darkModeToggle:hover #darkModeIcon {
    transform: rotate(20deg);
}

/* Dark Mode Card Enhancements */
.dark-mode .card {
    background-color: #343a40;
    border-color: #454d55;
}

.dark-mode .card-header {
    background-color: #3d4349;
    border-bottom-color: #454d55;
}

.dark-mode .card-body {
    color: #c2c7d0;
}

/* Dark Mode Table Enhancements */
.dark-mode .table {
    color: #c2c7d0;
}

.dark-mode .table-bordered {
    border-color: #454d55;
}

.dark-mode .table-bordered th,
.dark-mode .table-bordered td {
    border-color: #454d55;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Form Controls */
.dark-mode .form-control {
    background-color: #3d4349;
    border-color: #454d55;
    color: #c2c7d0;
}

.dark-mode .form-control:focus {
    background-color: #3d4349;
    border-color: #6c757d;
    color: #c2c7d0;
}

.dark-mode .form-control::placeholder {
    color: #6c757d;
}

/* Fix autofill background color in dark mode - global */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:active,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill:active,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #3d4349 inset !important;
    -webkit-text-fill-color: #c2c7d0 !important;
    caret-color: #c2c7d0;
    transition: background-color 5000s ease-in-out 0s;
}

/* Fix autofill in modals */
.dark-mode .modal input:-webkit-autofill,
.dark-mode .modal input:-webkit-autofill:hover,
.dark-mode .modal input:-webkit-autofill:focus,
.dark-mode .modal input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #3d4349 inset !important;
    -webkit-text-fill-color: #c2c7d0 !important;
    caret-color: #c2c7d0;
}

.dark-mode .custom-select {
    background-color: #3d4349;
    border-color: #454d55;
    color: #c2c7d0;
}

.dark-mode .custom-control-label {
    color: #c2c7d0;
}

/* Dark Mode Modal */
.dark-mode .modal-content {
    background-color: #343a40;
    border-color: #454d55;
}

.dark-mode .modal-header {
    background-color: #3d4349;
    border-bottom-color: #454d55;
}

.dark-mode .modal-footer {
    background-color: #3d4349;
    border-top-color: #454d55;
}

.dark-mode .modal-title {
    color: #c2c7d0;
}

.dark-mode .close {
    color: #c2c7d0;
    opacity: 0.8;
}

.dark-mode .close:hover {
    color: #fff;
    opacity: 1;
}

/* Dark Mode Dropdown */
.dark-mode .dropdown-menu {
    background-color: #343a40;
    border-color: #454d55;
}

.dark-mode .dropdown-item {
    color: #c2c7d0;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: #3d4349;
    color: #fff;
}

.dark-mode .dropdown-divider {
    border-top-color: #454d55;
}

.dark-mode .dropdown-header {
    color: #c2c7d0;
}

/* Dark Mode Callout */
.dark-mode .callout {
    background-color: #3d4349;
    border-left-color: #007bff;
}

.dark-mode .callout.callout-info {
    border-left-color: #17a2b8;
}

.dark-mode .callout h5 {
    color: #c2c7d0;
}

/* Dark Mode Small Box */
.dark-mode .small-box {
    box-shadow: 0 0 1px rgba(255, 255, 255, .125), 0 1px 3px rgba(255, 255, 255, .2);
}

/* Dark Mode Badge in Tables */
.dark-mode .badge {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark Mode Text Colors */
.dark-mode .text-muted {
    color: #6c757d !important;
}

/* Dark Mode DataTables (if used) */
.dark-mode .dataTables_wrapper {
    color: #c2c7d0;
}

.dark-mode .dataTables_wrapper .dataTables_filter input,
.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: #3d4349;
    border-color: #454d55;
    color: #c2c7d0;
}

/* Dark Mode Sidebar adjustments */
.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #007bff;
    color: #fff;
}

/* Sidebar scrolling fix for AdminLTE */
.main-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
}

/* Adjust sidebar height when test mode banner is active */
.main-sidebar[style*="margin-top: 41px"] {
    height: calc(100vh - 41px);
}

.main-sidebar .sidebar {
    overflow: visible !important;
}

/* Scrollbar styling for sidebar */
.main-sidebar::-webkit-scrollbar {
    width: 6px;
}

.main-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.main-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.main-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Smooth transitions */
body,
.main-header,
.main-footer,
.card,
.table,
.form-control,
.modal-content,
.dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========================================
   Login Page Dark Mode Styles
   ======================================== */
body.dark-mode.login-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

body.dark-mode.login-page .card {
    background-color: #343a40;
    color: #fff;
}

body.dark-mode.login-page .card-header {
    background-color: #2d3238;
    border-bottom-color: #454d55;
}

body.dark-mode.login-page .card-header a {
    color: #fff;
}

body.dark-mode.login-page .form-control {
    background-color: #454d55;
    border-color: #6c757d;
    color: #fff;
}

body.dark-mode.login-page .form-control::placeholder {
    color: #adb5bd;
}

body.dark-mode.login-page .input-group-text {
    background-color: #495057;
    border-color: #6c757d;
    color: #fff;
}

body.dark-mode.login-page .login-box-msg {
    color: #adb5bd;
}

body.dark-mode.login-page .text-muted {
    color: #adb5bd !important;
}

/* Fix autofill background color in dark mode */
body.dark-mode.login-page input:-webkit-autofill,
body.dark-mode.login-page input:-webkit-autofill:hover,
body.dark-mode.login-page input:-webkit-autofill:focus,
body.dark-mode.login-page input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #454d55 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
}

/* 2FA Code Input Styling */
.code-input {
    font-size: 2rem;
    letter-spacing: 0.5rem;
    text-align: center;
    font-family: monospace;
    padding: 15px;
}

.code-input::placeholder {
    letter-spacing: normal;
    font-size: 1rem;
}