/* =============================================
   nd shop — Dark Mode: Menu Component
   =============================================
   Overrides for menu page, profile header,
   menu action buttons, and all menu modal types
   (shared modal, edit-profile, contact-owner,
    download-app, security, notifications,
    appearance, about, logout).
   ============================================= */

/* ─── Menu Page ─── */
[data-theme="dark"] .menu-page-wrapper {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .menu-profile-header {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .profile-name {
    color: var(--text-heading);
}

[data-theme="dark"] .profile-id {
    color: var(--text-muted);
}

/* ─── Menu Action Buttons ─── */
[data-theme="dark"] .menu-action-btn {
    color: var(--text-primary);
}

[data-theme="dark"] .menu-action-btn.outline-btn {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .menu-action-btn:hover {
    background-color: var(--bg-surface-hover, #2d2d2d);
    box-shadow: var(--shadow-card-hover, 0 5px 25px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .chevron {
    color: var(--text-faint);
}

[data-theme="dark"] .logout-btn {
    color: var(--brand-red) !important;
    border-color: var(--brand-red-light) !important;
}

[data-theme="dark"] .logout-btn .chevron {
    color: var(--brand-red);
}

[data-theme="dark"] .logout-btn:hover {
    background-color: var(--brand-red-hover-bg) !important;
}

/* ─── Shared Menu Modal ─── */
[data-theme="dark"] .menu-modal-overlay {
    background-color: var(--bg-modal-overlay);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .menu-modal-content {
    background-color: var(--modal-content-bg);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .menu-modal-header h3 {
    color: var(--text-heading);
}

[data-theme="dark"] .m-close {
    color: var(--close-btn-color);
    background-color: var(--close-btn-bg);
}

[data-theme="dark"] .m-close:hover {
    color: var(--close-btn-hover-color);
    background-color: var(--close-btn-hover-bg);
}

[data-theme="dark"] .menu-modal-footer {
    border-top-color: var(--border-light);
    background-color: var(--modal-content-bg);
}

[data-theme="dark"] .m-action-btn {
    background-color: var(--action-btn-bg);
    color: var(--action-btn-color);
}

[data-theme="dark"] .m-action-btn:hover {
    background-color: var(--action-btn-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .m-btn-primary {
    background-color: #8b5cf6;
    color: white;
    box-shadow: none;
}

[data-theme="dark"] .m-btn-primary:hover {
    background-color: #2c3e50;
    color: white;
}

/* ─── Edit Profile ─── */
[data-theme="dark"] .edit-profile-title {
    color: var(--text-heading);
}

[data-theme="dark"] .edit-profile-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .form-group label {
    color: var(--text-secondary);
}

[data-theme="dark"] .m-input {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .m-input:focus {
    border-color: #8b5cf6;
    background-color: var(--bg-input-focus);
}

[data-theme="dark"] .ep-dropdown-toggle {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .ep-dropdown-toggle:hover {
    border-color: var(--text-faint);
}

[data-theme="dark"] .ep-dropdown-wrapper.open .ep-dropdown-toggle {
    border-color: #8b5cf6;
    background-color: var(--bg-input-focus);
}

[data-theme="dark"] .ep-dropdown-arrow {
    color: var(--text-muted);
}

[data-theme="dark"] .ep-dropdown-wrapper.disabled .ep-dropdown-toggle {
    background-color: var(--bg-surface-alt);
    color: var(--text-faint);
    border-color: var(--border-primary);
}

[data-theme="dark"] .ep-dropdown-menu {
    background: var(--dropdown-bg);
    box-shadow: var(--shadow-md);
    border-color: var(--dropdown-border);
}

[data-theme="dark"] .ep-dropdown-option {
    color: var(--text-primary);
}

[data-theme="dark"] .ep-dropdown-option:hover {
    background-color: var(--dropdown-hover);
    color: #8b5cf6;
}

[data-theme="dark"] .ep-dropdown-option:not(:last-child) {
    border-bottom-color: var(--border-lighter);
}

[data-theme="dark"] .ep-dropdown-option.active {
    color: #8b5cf6;
}

[data-theme="dark"] .ep-dropdown-option.active .ep-dropdown-check::after {
    color: #8b5cf6;
}

/* ─── Contact Owner ─── */
[data-theme="dark"] .contact-title {
    color: var(--text-heading);
}

[data-theme="dark"] .contact-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .phone-number-container {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
}

[data-theme="dark"] .phone-number-text {
    color: var(--text-heading);
}

[data-theme="dark"] .copy-btn {
    background-color: var(--action-btn-bg);
    color: var(--action-btn-color);
}

[data-theme="dark"] .copy-btn:hover {
    background-color: var(--action-btn-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .copy-btn.copied {
    background-color: #141c26;
    color: #8b5cf6;
}

[data-theme="dark"] .call-owner-btn {
    background-color: #8b5cf6;
    box-shadow: none;
}

[data-theme="dark"] .call-owner-btn:hover {
    background-color: #2c3e50;
}

[data-theme="dark"] .contact-toast {
    background-color: var(--toast-bg);
}

/* ─── Download App ─── */
[data-theme="dark"] .download-app-title {
    color: var(--text-heading);
}

[data-theme="dark"] .download-app-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .download-app-icon {
    color: #8b5cf6;
    background-color: rgba(27, 38, 59, 0.12);
}

[data-theme="dark"] .download-app-icon.spin {
    background-color: var(--bg-surface-alt);
    color: var(--text-secondary);
}

[data-theme="dark"] .d-app-btn {
    background-color: #8b5cf6;
    box-shadow: none;
}

[data-theme="dark"] .d-app-btn.outline {
    background-color: transparent;
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .d-app-btn.outline:hover {
    background-color: var(--bg-surface-alt);
    border-color: var(--text-faint);
}

[data-theme="dark"] .d-progress-container {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
}

[data-theme="dark"] .d-progress-title {
    color: var(--text-heading);
}

[data-theme="dark"] .d-progress-percent {
    color: #8b5cf6;
}

[data-theme="dark"] .d-progress-track {
    background-color: var(--progress-track-bg);
}

[data-theme="dark"] .d-progress-fill {
    background-color: #8b5cf6;
}

[data-theme="dark"] .d-progress-speed {
    color: var(--text-muted);
}

[data-theme="dark"] .d-progress-cancel {
    color: var(--brand-red);
}

[data-theme="dark"] .d-success-container {
    background-color: var(--success-container-bg);
    border-color: var(--success-border);
    box-shadow: none;
}

[data-theme="dark"] .d-success-icon {
    background-color: #8b5cf6;
}

[data-theme="dark"] .d-success-text strong {
    color: #8b5cf6;
}

[data-theme="dark"] .d-success-text small {
    color: #8b5cf6;
    opacity: 0.8;
}

/* ─── Security Modal ─── */
[data-theme="dark"] .security-icon {
    color: var(--text-primary);
}

[data-theme="dark"] .security-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .sec-tab-bar {
    background-color: var(--tab-bar-bg);
}

[data-theme="dark"] .sec-tab {
    color: var(--tab-inactive-color);
}

[data-theme="dark"] .sec-tab.active {
    color: #ffffff;
}

[data-theme="dark"] .sec-tab-indicator {
    background-color: #8b5cf6;
    box-shadow: none;
}

[data-theme="dark"] .sec-panel-title {
    color: var(--text-heading);
}

[data-theme="dark"] .sec-panel-subtitle {
    color: var(--text-muted);
}

[data-theme="dark"] .req {
    color: var(--brand-red);
}

[data-theme="dark"] .password-toggle-icon {
    color: var(--text-faint);
}

[data-theme="dark"] .password-toggle-icon:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .sec-save-btn {
    background-color: #8b5cf6;
    box-shadow: none;
}

[data-theme="dark"] .sec-save-btn:hover {
    background-color: #2c3e50;
}

[data-theme="dark"] .sec-save-btn.success {
    background-color: #8b5cf6;
    box-shadow: none;
}

[data-theme="dark"] .otp-input {
    border-color: var(--otp-border);
    background-color: var(--otp-bg);
    color: var(--text-heading);
}

[data-theme="dark"] .otp-input:focus {
    border-color: #8b5cf6;
    background-color: var(--bg-input-focus);
    box-shadow: none;
}

/* ─── Notifications ─── */
[data-theme="dark"] .notifications-title {
    color: var(--text-heading);
}

[data-theme="dark"] .notifications-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .toggle-group-title {
    color: var(--text-faint);
}

[data-theme="dark"] .toggle-item {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .toggle-info strong {
    color: var(--text-primary);
}

[data-theme="dark"] .toggle-info span {
    color: var(--text-muted);
}

[data-theme="dark"] .slider {
    background-color: var(--toggle-off);
}

[data-theme="dark"] input:checked+.slider {
    background-color: #8b5cf6;
}

/* ─── Appearance (Theme Picker) ─── */
[data-theme="dark"] .appearance-title {
    color: var(--text-heading);
}

[data-theme="dark"] .appearance-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .theme-card {
    border-color: var(--border-primary);
    background-color: var(--bg-surface);
}

[data-theme="dark"] .theme-option:hover .theme-card {
    border-color: var(--text-faint);
    background-color: var(--bg-surface-alt);
}

[data-theme="dark"] .theme-option input:checked+.theme-card {
    border-color: #8b5cf6;
    background-color: #141c26;
    box-shadow: none;
}

[data-theme="dark"] .theme-visual {
    border-color: var(--border-primary);
}

[data-theme="dark"] .theme-label {
    color: var(--text-primary);
}

[data-theme="dark"] .theme-radio-btn {
    border-color: var(--text-faint);
}

[data-theme="dark"] .theme-option input:checked+.theme-card .theme-radio-btn {
    border-color: #8b5cf6;
}

[data-theme="dark"] .theme-radio-btn::after {
    background-color: #8b5cf6;
}

/* ─── About ─── */
[data-theme="dark"] .about-title {
    color: #8b5cf6;
}

[data-theme="dark"] .about-desc {
    color: var(--text-secondary);
}

[data-theme="dark"] .about-link-row {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
}

[data-theme="dark"] .about-link-row:hover {
    background-color: var(--bg-surface-hover);
}

[data-theme="dark"] .about-link-text strong {
    color: var(--text-primary);
}

[data-theme="dark"] .about-link-text span {
    color: var(--text-muted);
}

[data-theme="dark"] .about-link-arrow {
    color: var(--text-faint);
}

[data-theme="dark"] .about-copyright {
    color: var(--text-faint);
}

/* ─── Logout ─── */
[data-theme="dark"] .logout-warning-icon {
    background-color: var(--brand-red-bg);
    color: var(--brand-red);
    border-color: rgba(255, 77, 94, 0.15);
}

[data-theme="dark"] .logout-warning-title {
    color: var(--text-heading);
}

[data-theme="dark"] .logout-warning-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .m-btn-danger {
    background-color: var(--brand-red);
    color: white;
    box-shadow: none;
}

[data-theme="dark"] .m-btn-danger:hover {
    background-color: #dc3545;
    color: white;
}

/* ─── Request History ─── */
[data-theme="dark"] .rh-tab {
    background-color: var(--bg-surface);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

[data-theme="dark"] .rh-tab.active {
    background-color: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

[data-theme="dark"] .rh-sort-option {
    border-bottom-color: var(--border-lighter);
    color: var(--text-secondary);
}

[data-theme="dark"] .rh-sort-option:hover {
    background-color: var(--dropdown-hover);
}

[data-theme="dark"] .rh-sort-option.active {
    color: #8b5cf6;
    background-color: var(--bg-surface-alt);
}

[data-theme="dark"] .rh-card {
    background-color: var(--bg-surface);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .rh-status.pending { background: rgba(27, 38, 59, 0.1); }
[data-theme="dark"] .rh-status.approved { background: rgba(27, 38, 59, 0.2); }
[data-theme="dark"] .rh-status.declined { background: rgba(239, 68, 68, 0.1); }

[data-theme="dark"] .rh-date {
    color: var(--text-muted);
}

[data-theme="dark"] .rh-product-name {
    color: var(--text-heading);
}

[data-theme="dark"] .rh-details {
    color: var(--text-secondary);
    border-top-color: var(--border-light);
}

[data-theme="dark"] .rh-total {
    color: #8b5cf6;
}

[data-theme="dark"] #rhSearchInput {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] button[onclick*="rhSortDropdown"] {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #rhSortDropdown {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
}