/* Custom Dark Theme - Soft Dark for better readability and accessibility */
:root {
    /* Base backgrounds - soft dark, not pitch black */
    --adminlte-bg-base: #1e2a38;
    --adminlte-bg-surface: #263545;
    --adminlte-bg-elevated: #2e3f52;
    --adminlte-bg-input: #334a60;
    --adminlte-bg-input-disabled: #283848;

    /* Accent */
    --adminlte-accent: #d94465;
    --adminlte-accent-hover: #c03858;
    --adminlte-accent-subtle: rgba(217, 68, 101, 0.15);

    /* Borders */
    --adminlte-border: rgba(255, 255, 255, 0.12);
    --adminlte-border-input: #5a7a94;

    /* Text - off-white to reduce eye strain */
    --adminlte-text: #dce4ec;
    --adminlte-text-secondary: #a0b4c8;
    --adminlte-text-muted: #7a93aa;

    /* Functional colors */
    --adminlte-link: #6cb4d9;
    --adminlte-link-hover: #8ec8e8;
    --adminlte-success: #5cb87a;
    --adminlte-warning: #e0a838;
    --adminlte-danger: #d94465;
    --adminlte-info: #4a9fd4;
}

/* =============================================
   ADMIN PANEL (dark-mode)
   ============================================= */

/* Page background */
body.dark-mode,
.dark-mode,
.wrapper {
    background-color: var(--adminlte-bg-base) !important;
}

.dark-mode .content-wrapper {
    background-color: var(--adminlte-bg-base) !important;
}

.dark-mode .content {
    background-color: transparent !important;
}

/* Sidebar */
.dark-mode .main-sidebar {
    background-color: var(--adminlte-bg-surface) !important;
}

.dark-mode .brand-link {
    background-color: var(--adminlte-bg-surface) !important;
    border-bottom: 1px solid var(--adminlte-border) !important;
}

/* Top navbar */
.dark-mode .main-header.navbar {
    background-color: var(--adminlte-bg-surface) !important;
    border-bottom: 1px solid var(--adminlte-border) !important;
}

/* Cards */
.dark-mode .card {
    background-color: var(--adminlte-bg-elevated) !important;
    border-color: var(--adminlte-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dark-mode .card-header {
    border-color: var(--adminlte-border);
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.dark-mode .card-footer {
    border-color: var(--adminlte-border);
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Text */
.dark-mode .card,
.dark-mode .card-body,
.dark-mode .card-title,
.dark-mode label,
.dark-mode .content-header h1 {
    color: var(--adminlte-text) !important;
}

.dark-mode .text-muted {
    color: var(--adminlte-text-muted) !important;
}

.dark-mode .text-bold,
.dark-mode h5,
.dark-mode dt,
.dark-mode dd {
    color: var(--adminlte-text) !important;
}

.dark-mode p {
    color: var(--adminlte-text-secondary) !important;
}

/* Tables */
.dark-mode .table {
    color: var(--adminlte-text) !important;
}

.dark-mode .table thead th {
    border-color: var(--adminlte-border) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--adminlte-text-secondary) !important;
    font-weight: 600;
}

.dark-mode .table td,
.dark-mode .table th {
    border-color: var(--adminlte-border) !important;
}

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

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

/* Form controls */
.dark-mode .form-control {
    background-color: var(--adminlte-bg-input) !important;
    border-color: var(--adminlte-border-input) !important;
    color: var(--adminlte-text) !important;
}

.dark-mode .form-control:focus {
    background-color: var(--adminlte-bg-input) !important;
    border-color: var(--adminlte-accent) !important;
    color: var(--adminlte-text) !important;
    box-shadow: 0 0 0 0.2rem var(--adminlte-accent-subtle) !important;
}

.dark-mode .form-control::placeholder {
    color: var(--adminlte-text-muted) !important;
}

.dark-mode .form-control[readonly],
.dark-mode .form-control[disabled],
.dark-mode .form-control:disabled {
    background-color: var(--adminlte-bg-input-disabled) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--adminlte-text-muted) !important;
    cursor: not-allowed !important;
}

/* =============================================
   CUSTOM CHECKBOX & SWITCH (Bootstrap 4)
   ============================================= */

.dark-mode .custom-control-label {
    color: var(--adminlte-text) !important;
    cursor: pointer;
}

/* Box (checkbox) / Track (switch) — stato DEFAULT */
.dark-mode .custom-control-label::before {
    background-color: var(--adminlte-bg-input) !important;
    border: 1px solid var(--adminlte-border-input) !important;
    transition: background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Hover sul box/track vuoto */
.dark-mode .custom-control-input:not(:disabled):not(:checked) ~ .custom-control-label:hover::before {
    border-color: var(--adminlte-accent) !important;
}

/* ── CHECKED ── */

/* Checkbox checked: box accent */
.dark-mode .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--adminlte-accent) !important;
    border-color: var(--adminlte-accent) !important;
}

/* Checkbox checked: checkmark bianco SVG */
.dark-mode .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") !important;
}

/* Switch checked: track accent */
.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--adminlte-accent) !important;
    border-color: var(--adminlte-accent) !important;
}

/* Switch checked: pallino bianco */
.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff !important;
}

/* Switch NOT checked: pallino grigio chiaro visibile sul track scuro */
.dark-mode .custom-switch .custom-control-label::after {
    background-color: var(--adminlte-text-secondary) !important;
}

/* ── FOCUS ── */
.dark-mode .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--adminlte-accent-subtle) !important;
}

.dark-mode .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--adminlte-accent) !important;
}

/* ── DISABLED ── */
.dark-mode .custom-control-input:disabled ~ .custom-control-label {
    color: var(--adminlte-text-muted) !important;
    cursor: not-allowed;
}

.dark-mode .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--adminlte-bg-input-disabled) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .custom-switch .custom-control-input:disabled ~ .custom-control-label::after {
    background-color: var(--adminlte-text-muted) !important;
}

/* Select */
.dark-mode select.form-control {
    background-color: var(--adminlte-bg-input) !important;
    color: var(--adminlte-text) !important;
}

.dark-mode select.form-control option {
    background-color: var(--adminlte-bg-elevated);
    color: var(--adminlte-text);
}

/* Input group */
.dark-mode .input-group-text {
    background-color: var(--adminlte-bg-surface) !important;
    border-color: var(--adminlte-border-input) !important;
    color: var(--adminlte-text-muted) !important;
}

/* Select2 */
.dark-mode .select2-selection.select2-selection--single,
.dark-mode .select2-selection.select2-selection--multiple {
    height: 38px !important;
    background-color: var(--adminlte-bg-input) !important;
    border: 1px solid var(--adminlte-border-input) !important;
    color: var(--adminlte-text) !important;
}

.dark-mode .select2-selection__rendered {
    color: var(--adminlte-text) !important;
}

.dark-mode .select2-selection__arrow {
    display: none;
}

.dark-mode .select2-selection__choice {
    background-color: var(--adminlte-bg-surface) !important;
    border-color: var(--adminlte-border-input) !important;
    color: var(--adminlte-text) !important;
}

.dark-mode .select2-dropdown {
    background-color: var(--adminlte-bg-elevated) !important;
    border-color: var(--adminlte-border-input) !important;
}

.dark-mode .select2-results__option {
    color: var(--adminlte-text) !important;
}

.dark-mode .select2-results__option--highlighted {
    background-color: var(--adminlte-accent) !important;
    color: #fff !important;
}

.dark-mode .select2-search__field {
    background-color: var(--adminlte-bg-input) !important;
    color: var(--adminlte-text) !important;
}

/* Pagination */
.dark-mode .page-item .page-link {
    background-color: var(--adminlte-bg-elevated) !important;
    border-color: var(--adminlte-border) !important;
    color: var(--adminlte-text-secondary) !important;
}

.dark-mode .page-item.active .page-link {
    background-color: var(--adminlte-accent) !important;
    border-color: var(--adminlte-accent) !important;
    color: #fff !important;
}

.dark-mode .page-item.disabled .page-link {
    background-color: var(--adminlte-bg-surface) !important;
    color: var(--adminlte-text-muted) !important;
}

/* DataTables info & filter */
.dark-mode .dataTables_info,
.dark-mode .dataTables_length label,
.dark-mode .dataTables_filter label {
    color: var(--adminlte-text-muted) !important;
}

/* Alerts */
.dark-mode .alert-success {
    background-color: rgba(92, 184, 122, 0.15) !important;
    border-color: rgba(92, 184, 122, 0.3) !important;
    color: var(--adminlte-success) !important;
}

.dark-mode .alert-danger {
    background-color: rgba(217, 68, 101, 0.15) !important;
    border-color: rgba(217, 68, 101, 0.3) !important;
    color: #e87a93 !important;
}

.dark-mode .alert-warning {
    background-color: rgba(224, 168, 56, 0.15) !important;
    border-color: rgba(224, 168, 56, 0.3) !important;
    color: var(--adminlte-warning) !important;
}

.dark-mode .alert-info {
    background-color: rgba(74, 159, 212, 0.15) !important;
    border-color: rgba(74, 159, 212, 0.3) !important;
    color: var(--adminlte-info) !important;
}

/* Badges */
.dark-mode .badge-warning {
    background-color: var(--adminlte-warning) !important;
    color: #1a1a1a !important;
}

.dark-mode .badge-success {
    background-color: var(--adminlte-success) !important;
    color: #1a1a1a !important;
}

.dark-mode .badge-danger {
    background-color: var(--adminlte-danger) !important;
    color: #fff !important;
}

.dark-mode .badge-info {
    background-color: var(--adminlte-info) !important;
    color: #fff !important;
}

.dark-mode .badge-primary {
    background-color: #5b8ab5 !important;
    color: #fff !important;
}

.dark-mode .badge-secondary {
    background-color: #6b7f8e !important;
    color: #fff !important;
}

.dark-mode .badge-dark {
    background-color: #4a5568 !important;
    color: #fff !important;
}

/* Buttons */
.dark-mode .btn-primary {
    background-color: var(--adminlte-info) !important;
    border-color: var(--adminlte-info) !important;
    color: #fff !important;
}

.dark-mode .btn-primary:hover {
    background-color: #3d8fc4 !important;
    border-color: #3d8fc4 !important;
}

.dark-mode .btn-danger,
.dark-mode .bg-danger {
    background-color: var(--adminlte-accent) !important;
    border-color: var(--adminlte-accent) !important;
}

.dark-mode .btn-danger:hover {
    background-color: var(--adminlte-accent-hover) !important;
    border-color: var(--adminlte-accent-hover) !important;
}

.dark-mode .btn-secondary {
    background-color: #4a5c6e !important;
    border-color: #4a5c6e !important;
    color: var(--adminlte-text) !important;
}

.dark-mode .btn-secondary:hover {
    background-color: #3d4f60 !important;
    border-color: #3d4f60 !important;
}

.dark-mode .btn-warning {
    background-color: var(--adminlte-warning) !important;
    border-color: var(--adminlte-warning) !important;
    color: #1a1a1a !important;
}

/* Active sidebar */
.dark-mode .nav-sidebar .nav-link.active {
    background-color: var(--adminlte-accent) !important;
}

/* Footer */
.dark-mode .main-footer {
    background-color: var(--adminlte-bg-surface) !important;
    border-top: 1px solid var(--adminlte-border) !important;
    color: var(--adminlte-text-muted) !important;
}

/* Links */
.dark-mode a:not(.btn):not(.nav-link) {
    color: var(--adminlte-link) !important;
}

.dark-mode a:not(.btn):not(.nav-link):hover {
    color: var(--adminlte-link-hover) !important;
}

/* Preloader */
.preloader,
.dark-mode .preloader,
body .preloader {
    background-color: var(--adminlte-bg-base) !important;
    background: var(--adminlte-bg-base) !important;
}

/* =============================================
   AUTH PAGES (login, register, verify, etc.)
   ============================================= */

.login-page,
.register-page {
    background-color: var(--adminlte-bg-base) !important;
    color: var(--adminlte-text) !important;
}

.login-page .card,
.register-page .card,
.login-box .card,
.register-box .card {
    background-color: var(--adminlte-bg-elevated) !important;
    color: var(--adminlte-text) !important;
    border-color: var(--adminlte-border) !important;
}

.login-page .card-header,
.register-page .card-header {
    background-color: var(--adminlte-bg-surface) !important;
    border-color: var(--adminlte-border) !important;
    color: var(--adminlte-text) !important;
}

.login-page .card-body,
.register-page .card-body {
    background-color: var(--adminlte-bg-elevated) !important;
}

.login-page .card-footer,
.register-page .card-footer {
    background-color: var(--adminlte-bg-surface) !important;
    border-color: var(--adminlte-border) !important;
}

.login-page label,
.register-page label {
    color: var(--adminlte-text) !important;
}

.login-page a,
.register-page a {
    color: var(--adminlte-link) !important;
}

.login-page a:hover,
.register-page a:hover {
    color: var(--adminlte-link-hover) !important;
}

.login-page .form-control,
.register-page .form-control {
    background-color: var(--adminlte-bg-input) !important;
    border-color: var(--adminlte-border-input) !important;
    color: var(--adminlte-text) !important;
}

.login-page .form-control:focus,
.register-page .form-control:focus {
    background-color: var(--adminlte-bg-input) !important;
    border-color: var(--adminlte-accent) !important;
    color: var(--adminlte-text) !important;
    box-shadow: 0 0 0 0.2rem var(--adminlte-accent-subtle) !important;
}

.login-page .form-control::placeholder,
.register-page .form-control::placeholder {
    color: var(--adminlte-text-muted) !important;
}

.login-page .input-group-text,
.register-page .input-group-text {
    background-color: var(--adminlte-bg-surface) !important;
    border-color: var(--adminlte-border-input) !important;
    color: var(--adminlte-text-muted) !important;
}

.card-outline.card-danger {
    border-top-color: var(--adminlte-accent) !important;
}

/* =============================================
   BROWSER AUTOFILL OVERRIDE
   ============================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #3a5068 inset !important;
    box-shadow: 0 0 0 1000px #3a5068 inset !important;
    -webkit-text-fill-color: var(--adminlte-text) !important;
    caret-color: var(--adminlte-text) !important;
    border-color: var(--adminlte-border-input) !important;
    transition: background-color 5000s ease-in-out 0s;
}