/* Dark Mode Toggle Switch */
.dark-mode-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

    .dark-mode-setting:hover {
        border-color: var(--blueteq-blue);
        box-shadow: 0 4px 12px rgba(24, 111, 181, 0.1);
    }

    /* Special hover for danger actions */
    .dark-mode-setting:has(.btn-danger):hover {
        border-color: rgba(212, 0, 0, 0.3);
        box-shadow: 0 4px 12px rgba(212, 0, 0, 0.1);
    }

    /* Button styling within settings */
    .dark-mode-setting .btn-sm {
        min-width: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        white-space: nowrap;
    }

    .dark-mode-setting .btn-danger {
        flex-shrink: 0;
    }

    /* Icon color for sign out */
    .dark-mode-setting:has(.btn-danger) .dark-mode-label i {
        color: var(--danger-red);
    }

    /* Icon color for MFA (security feature) */
    .dark-mode-setting:has(#mfaToggle) .dark-mode-label i {
        color: #10b981; /* Green for security */
    }

    /* Special hover effect for MFA setting */
    .dark-mode-setting:has(#mfaToggle):hover {
        border-color: rgba(16, 185, 129, 0.4);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    /* Icon color for MFA Method selector */
    .dark-mode-setting:has(#mfaMethodSelector) .dark-mode-label i {
        color: #f59e0b; /* Orange/amber for method selection */
    }

    /* Special hover effect for MFA method setting */
    .dark-mode-setting:has(#mfaMethodSelector):hover {
        border-color: rgba(245, 158, 11, 0.4);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    }

/* MFA QR Code Container */
.mfa-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
}


.mfa-qr-code-container {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.mfa-qr-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.mfa-qr-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .mfa-qr-icon i {
        font-size: 1.5rem;
        color: white;
    }

.mfa-qr-title h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mfa-qr-title p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mfa-qr-code-wrapper {
    flex-shrink: 0;
    width: 280px; 
    min-height: 300px; 
    background: #ffffff;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mfa-qr-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 0.75rem;
}

    .mfa-qr-loading-overlay[hidden] {
        display: none !important;
    }

    .mfa-qr-loading-overlay .fa-circle-notch {
        font-size: 1.75rem;
        color: var(--blueteq-blue);
    }

[data-theme="dark"] .mfa-qr-loading-overlay {
    background: rgba(30, 41, 59, 0.94);
}

[data-theme="dark"] .mfa-qr-code-wrapper {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mfa-qr-code-image {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}

.mfa-qr-instructions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mfa-qr-step {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.mfa-step-number {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--blueteq-blue) 0%, #1a7cc4 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.mfa-manual-key {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 2px;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px dashed var(--border-color);
}

.mfa-step-content {
    flex: 1;
    width: 100%;
}

    .mfa-step-content strong {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.6rem !important;
    }

    .mfa-step-content p {
        margin: 0;
        font-size: 0.85rem;
        gap: .4em;
        color: var(--text-secondary);
        line-height: 1.5;
    }

        .mfa-step-content p b {
            font-weight: 600;
            color: #fff;
        }

/* High Contrast Mode for QR Code Section */
[data-theme="high-contrast"] .mfa-qr-code-container {
    background: #000000;
    border: 3px solid #ffffff;
}

[data-theme="high-contrast"] .mfa-qr-header {
    border-bottom: 3px solid #ffffff;
}

[data-theme="high-contrast"] .mfa-qr-icon {
    background: #00ff00;
    border: 3px solid #ffffff;
}

    [data-theme="high-contrast"] .mfa-qr-icon i {
        color: #000000;
    }

[data-theme="high-contrast"] .mfa-qr-title h4 {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="high-contrast"] .mfa-qr-title p {
    color: #ffffff;
    font-weight: 600;
}

[data-theme="high-contrast"] .mfa-qr-code-wrapper {
    background: #ffffff;
    border: 3px solid #000000;
    box-shadow: none;
}

[data-theme="high-contrast"] .mfa-step-number {
    background: #0066ff;
    border: 2px solid #ffffff;
}

[data-theme="high-contrast"] .mfa-step-content strong {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="high-contrast"] .mfa-step-content p {
    color: #ffffff;
    font-weight: 600;
}

/* Theme Selector Dropdown */
.theme-selector, .mfa-method-selector {
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    min-width: 180px;
    flex-shrink: 0;
}

    .theme-selector:hover,
    .mfa-method-selector:hover {
        border-color: var(--blueteq-blue);
        box-shadow: 0 2px 8px rgba(24, 111, 181, 0.15);
    }

    .theme-selector:focus,
    .mfa-method-selector:focus {
        outline: none;
        border-color: var(--blueteq-blue);
        box-shadow: 0 0 0 3px rgba(24, 111, 181, 0.2);
    }

/* Dark mode theme selector adjustments */
[data-theme="dark"] .theme-selector,
[data-theme="dark"] .mfa-method-selector {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* High contrast theme selector */
[data-theme="high-contrast"] .theme-selector,
[data-theme="high-contrast"] .mfa-method-selector {
    border: 3px solid #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* Theme selector icon color */
.dark-mode-setting:has(#themeSelector) .dark-mode-label i {
    color: #8b5cf6; /* Purple for theme/appearance */
}

/* High Contrast mode for settings panel */
[data-theme="high-contrast"] .dark-mode-setting {
    background: #000000 !important;
    border: 3px solid #ffffff !important;
}

[data-theme="high-contrast"] .dark-mode-label,
[data-theme="high-contrast"] .dark-mode-description {
    color: #ffffff !important;
}

    [data-theme="high-contrast"] .dark-mode-label i {
        color: #ffffff !important;
    }

[data-theme="high-contrast"] .theme-selector,
[data-theme="high-contrast"] .mfa-method-selector {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
}

[data-theme="high-contrast"] .settings-section-title {
    color: #ffffff !important;
}

.dark-mode-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dark-mode-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .dark-mode-label i {
        color: var(--blueteq-blue);
    }

.dark-mode-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
    flex-shrink: 0;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 32px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

input:checked + .toggle-slider {
    background: linear-gradient(135deg, #186FB5 0%, #1a5a8f 100%);
    box-shadow: 0 0 8px rgba(24, 111, 181, 0.4);
}

    input:checked + .toggle-slider:before {
        transform: translateX(28px);
    }

input:focus + .toggle-slider {
    outline: 2px solid var(--blueteq-blue);
    outline-offset: 2px;
}

.toggle-switch:hover .toggle-slider {
    box-shadow: 0 0 0 4px rgba(24, 111, 181, 0.1);
}

/* Additional settings styling */
.settings-grid {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

    .settings-grid > div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

.settings-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* Dark mode specific Kendo overrides */
[data-theme="dark"] .k-tabstrip-items {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .k-tabstrip-item {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

    [data-theme="dark"] .k-tabstrip-item.k-active {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

/* Inputs and Textboxes */
[data-theme="dark"] .k-input,
[data-theme="dark"] .k-textbox,
[data-theme="dark"] .k-input-inner {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

    [data-theme="dark"] .k-input:hover,
    [data-theme="dark"] .k-textbox:hover {
        border-color: var(--blueteq-blue) !important;
    }

    [data-theme="dark"] .k-input:focus,
    [data-theme="dark"] .k-textbox:focus,
    [data-theme="dark"] .k-input-inner:focus {
        background-color: var(--bg-secondary) !important;
        border-color: var(--blueteq-blue) !important;
    }

/* MultiSelect */
[data-theme="dark"] .k-multiselect,
[data-theme="dark"] .k-multiselect-wrap {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

    [data-theme="dark"] .k-multiselect:hover {
        border-color: var(--blueteq-blue) !important;
    }

    [data-theme="dark"] .k-multiselect.k-focus,
    [data-theme="dark"] .k-multiselect:focus-within {
        background-color: var(--bg-secondary) !important;
        border-color: var(--blueteq-blue) !important;
    }

/* Chips in MultiSelect */
[data-theme="dark"] .k-chip {
    background-color: rgba(24, 111, 181, 0.2) !important;
    color: var(--text-primary) !important;
    border-color: rgba(24, 111, 181, 0.4) !important;
}

    [data-theme="dark"] .k-chip .k-chip-content {
        color: var(--text-primary) !important;
    }

[data-theme="dark"] .k-chip-remove-action {
    color: var(--text-secondary) !important;
}

    [data-theme="dark"] .k-chip-remove-action:hover {
        color: var(--text-primary) !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

/* Dropdown */
[data-theme="dark"] .k-dropdown,
[data-theme="dark"] .k-dropdown-wrap {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

    [data-theme="dark"] .k-dropdown:hover {
        border-color: var(--blueteq-blue) !important;
    }

    [data-theme="dark"] .k-dropdown.k-focus,
    [data-theme="dark"] .k-dropdown-wrap.k-focus {
        background-color: var(--bg-secondary) !important;
        border-color: var(--blueteq-blue) !important;
    }

[data-theme="dark"] .k-select {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

    [data-theme="dark"] .k-select .k-icon {
        color: var(--text-secondary) !important;
    }

/* Dropdown List Items */
[data-theme="dark"] .k-list-item {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

    [data-theme="dark"] .k-list-item:hover {
        background-color: rgba(24, 111, 181, 0.2) !important;
        color: var(--text-primary) !important;
    }

    [data-theme="dark"] .k-list-item.k-selected {
        background-color: rgba(24, 111, 181, 0.3) !important;
        color: var(--text-primary) !important;
    }

    [data-theme="dark"] .k-list-item.k-focus,
    [data-theme="dark"] .k-list-item:focus {
        background-color: rgba(24, 111, 181, 0.2) !important;
    }

/* Popup and Animation Container */
[data-theme="dark"] .k-animation-container,
[data-theme="dark"] .k-popup,
[data-theme="dark"] .k-list-container {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .k-list {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Kendo Switch */
[data-theme="dark"] .k-switch {
    background-color: transparent !important;
}

[data-theme="dark"] .k-switch-track {
    background-color: #475569 !important;
    border-color: #475569 !important;
}

[data-theme="dark"] .k-switch:hover .k-switch-track {
    background-color: #64748b !important;
}

[data-theme="dark"] .k-switch-on .k-switch-track {
    background-color: var(--blueteq-blue) !important;
    border-color: var(--blueteq-blue) !important;
}

[data-theme="dark"] .k-switch-thumb {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .k-switch-thumb-on {
    background-color: #ffffff !important;
}

/* Icons in dropdowns */
[data-theme="dark"] .k-icon,
[data-theme="dark"] .k-svg-icon {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .k-list-item:hover .k-icon,
[data-theme="dark"] .k-list-item:hover .k-svg-icon {
    color: var(--text-primary) !important;
}

@media (max-width: 768px) {
    .mfa-container {
        flex-direction: column;
        align-items: center;
    }

    .mfa-qr-code-wrapper {
        width: 100%;
        max-width: 300px;
        min-height: auto;
    }
}