/* Global mobile/tablet interaction and smoothness fixes */

html,
body {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a,
button,
input,
textarea,
select,
summary,
[role="button"],
[tabindex] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Smooth touch interactions on mobile/tablet without heavy effects */
@media (hover: none) and (pointer: coarse) {
    a,
    button,
    [role="button"],
    .btn-action,
    .btn-send,
    .btn-discard,
    .menu-toggle,
    .profile-toggle,
    .nav-item {
        transition: transform 0.16s ease, opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    a:active,
    button:active,
    [role="button"]:active,
    .btn-action:active,
    .btn-send:active,
    .btn-discard:active,
    .menu-toggle:active,
    .profile-toggle:active,
    .nav-item:active {
        transform: scale(0.98) translateZ(0);
    }
}

/* Keep profile dropdown size/style consistent with dashboard across every page */
.profile-dropdown {
    min-width: 250px !important;
    max-width: min(78vw, 250px) !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Light/Cream unified theme tuning (dark theme remains unchanged) */
html[data-theme="light"],
html[data-theme="cream"] {
    color-scheme: light;
}

html[data-theme="light"] .profile-dropdown,
html[data-theme="cream"] .profile-dropdown {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16) !important;
    color: #0f0f0f !important;
}

html[data-theme="light"] .profile-header,
html[data-theme="cream"] .profile-header,
html[data-theme="light"] .profile-security-info,
html[data-theme="cream"] .profile-security-info {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .profile-header-username,
html[data-theme="cream"] .profile-header-username,
html[data-theme="light"] .profile-header-email,
html[data-theme="cream"] .profile-header-email,
html[data-theme="light"] #dropdownAccountIdDisplay,
html[data-theme="cream"] #dropdownAccountIdDisplay,
html[data-theme="light"] #displayAccountId,
html[data-theme="cream"] #displayAccountId,
html[data-theme="light"] .account-id-value,
html[data-theme="cream"] .account-id-value,
html[data-theme="light"] .profile-security-info,
html[data-theme="cream"] .profile-security-info,
html[data-theme="light"] .profile-label,
html[data-theme="cream"] .profile-label,
html[data-theme="light"] .profile-email,
html[data-theme="cream"] .profile-email {
    color: #111 !important;
}

html[data-theme="light"] .verified-badge-inline,
html[data-theme="cream"] .verified-badge-inline {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] .org-badge,
html[data-theme="cream"] .org-badge {
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .verification-popover,
html[data-theme="cream"] .verification-popover {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="light"] .verification-popover-title,
html[data-theme="cream"] .verification-popover-title,
html[data-theme="light"] .verification-popover-text,
html[data-theme="cream"] .verification-popover-text,
html[data-theme="light"] .verification-popover-history,
html[data-theme="cream"] .verification-popover-history,
html[data-theme="light"] .verification-popover-icon,
html[data-theme="cream"] .verification-popover-icon {
    color: #111 !important;
}

html[data-theme="light"] .verification-popover.placement-top::after,
html[data-theme="cream"] .verification-popover.placement-top::after {
    border-bottom-color: rgba(255, 255, 255, 0.98) !important;
}

html[data-theme="light"] .verification-popover.placement-bottom::after,
html[data-theme="cream"] .verification-popover.placement-bottom::after {
    border-top-color: rgba(255, 255, 255, 0.98) !important;
}

/* Message thread / email detail light background */
html[data-theme="light"] .content-area > .email-detail,
html[data-theme="light"] .content-area > .email-detail-view,
html[data-theme="cream"] .content-area > .email-detail,
html[data-theme="cream"] .content-area > .email-detail-view {
    background: #ffffff !important;
    color: #111 !important;
}

html[data-theme="light"] .detail-header,
html[data-theme="cream"] .detail-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .detail-header .page-title,
html[data-theme="cream"] .detail-header .page-title,
html[data-theme="light"] .detail-subject,
html[data-theme="cream"] .detail-subject,
html[data-theme="light"] .detail-sender-email,
html[data-theme="cream"] .detail-sender-email,
html[data-theme="light"] .detail-label,
html[data-theme="cream"] .detail-label,
html[data-theme="light"] .detail-value,
html[data-theme="cream"] .detail-value,
html[data-theme="light"] .detail-body,
html[data-theme="cream"] .detail-body,
html[data-theme="light"] .email-attachments-title,
html[data-theme="cream"] .email-attachments-title,
html[data-theme="light"] .email-attachment-name,
html[data-theme="cream"] .email-attachment-name,
html[data-theme="light"] .email-attachment-type,
html[data-theme="cream"] .email-attachment-type {
    color: #111 !important;
}

html[data-theme="light"] .detail-meta-container,
html[data-theme="cream"] .detail-meta-container,
html[data-theme="light"] .email-attachment-item,
html[data-theme="cream"] .email-attachment-item,
html[data-theme="light"] .email-attachment-image,
html[data-theme="cream"] .email-attachment-image {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Compose and logout overlays/modals */
html[data-theme="light"] .modal-overlay,
html[data-theme="cream"] .modal-overlay,
html[data-theme="light"] .logout-modal,
html[data-theme="cream"] .logout-modal {
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

html[data-theme="light"] .modal-content,
html[data-theme="cream"] .modal-content,
html[data-theme="light"] .logout-modal-card,
html[data-theme="cream"] .logout-modal-card {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.16) !important;
    color: #111 !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="cream"] .modal-header,
html[data-theme="light"] .modal-footer,
html[data-theme="cream"] .modal-footer {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="light"] .modal-header h2,
html[data-theme="cream"] .modal-header h2,
html[data-theme="light"] .form-label,
html[data-theme="cream"] .form-label,
html[data-theme="light"] .logout-modal-title,
html[data-theme="cream"] .logout-modal-title,
html[data-theme="light"] .logout-modal-message,
html[data-theme="cream"] .logout-modal-message {
    color: #111 !important;
}

html[data-theme="light"] .form-input,
html[data-theme="cream"] .form-input {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .form-input:focus,
html[data-theme="cream"] .form-input:focus {
    border-color: rgba(0, 0, 0, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08) !important;
}

/* Ensure button text/border/icons stay visible in light/cream */
html[data-theme="light"] .btn-action,
html[data-theme="cream"] .btn-action,
html[data-theme="light"] .btn-send,
html[data-theme="cream"] .btn-send,
html[data-theme="light"] .btn-discard,
html[data-theme="cream"] .btn-discard,
html[data-theme="light"] .logout-btn,
html[data-theme="cream"] .logout-btn,
html[data-theme="light"] #addNoteBtn,
html[data-theme="cream"] #addNoteBtn,
html[data-theme="light"] .detail-meta-toggle-btn,
html[data-theme="cream"] .detail-meta-toggle-btn,
html[data-theme="light"] .email-attachment-btn,
html[data-theme="cream"] .email-attachment-btn,
html[data-theme="light"] .media-viewer-btn,
html[data-theme="cream"] .media-viewer-btn,
html[data-theme="light"] .close-modal,
html[data-theme="cream"] .close-modal,
html[data-theme="light"] .compose-menu-toggle,
html[data-theme="cream"] .compose-menu-toggle,
html[data-theme="light"] .menu-toggle,
html[data-theme="cream"] .menu-toggle,
html[data-theme="light"] .nav-item,
html[data-theme="cream"] .nav-item,
html[data-theme="light"] .nav-item i,
html[data-theme="cream"] .nav-item i,
html[data-theme="light"] .search-icon,
html[data-theme="cream"] .search-icon {
    color: #111 !important;
    border-color: rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="light"] .btn-action,
html[data-theme="cream"] .btn-action,
html[data-theme="light"] .btn-send,
html[data-theme="cream"] .btn-send,
html[data-theme="light"] .btn-discard,
html[data-theme="cream"] .btn-discard,
html[data-theme="light"] .logout-btn,
html[data-theme="cream"] .logout-btn,
html[data-theme="light"] #addNoteBtn,
html[data-theme="cream"] #addNoteBtn,
html[data-theme="light"] .detail-meta-toggle-btn,
html[data-theme="cream"] .detail-meta-toggle-btn,
html[data-theme="light"] .email-attachment-btn,
html[data-theme="cream"] .email-attachment-btn,
html[data-theme="light"] .media-viewer-btn,
html[data-theme="cream"] .media-viewer-btn,
html[data-theme="light"] .close-modal,
html[data-theme="cream"] .close-modal,
html[data-theme="light"] .compose-menu-toggle,
html[data-theme="cream"] .compose-menu-toggle {
    background: #fff !important;
}

html[data-theme="light"] .btn-action:hover,
html[data-theme="cream"] .btn-action:hover,
html[data-theme="light"] .btn-send:hover,
html[data-theme="cream"] .btn-send:hover,
html[data-theme="light"] .btn-discard:hover,
html[data-theme="cream"] .btn-discard:hover,
html[data-theme="light"] .logout-btn:hover,
html[data-theme="cream"] .logout-btn:hover,
html[data-theme="light"] #addNoteBtn:hover,
html[data-theme="cream"] #addNoteBtn:hover,
html[data-theme="light"] .detail-meta-toggle-btn:hover,
html[data-theme="cream"] .detail-meta-toggle-btn:hover,
html[data-theme="light"] .email-attachment-btn:hover,
html[data-theme="cream"] .email-attachment-btn:hover,
html[data-theme="light"] .media-viewer-btn:hover,
html[data-theme="cream"] .media-viewer-btn:hover,
html[data-theme="light"] .close-modal:hover,
html[data-theme="cream"] .close-modal:hover,
html[data-theme="light"] .compose-menu-toggle:hover,
html[data-theme="cream"] .compose-menu-toggle:hover {
    background: #f3f4f6 !important;
    color: #000 !important;
}

/* Keep light/cream text readable (especially audit logs + action controls) */
html[data-theme="light"] .page-title,
html[data-theme="cream"] .page-title,
html[data-theme="light"] .content-area,
html[data-theme="cream"] .content-area,
html[data-theme="light"] .system-status,
html[data-theme="cream"] .system-status,
html[data-theme="light"] #sidebarStatusLabel,
html[data-theme="cream"] #sidebarStatusLabel,
html[data-theme="light"] .nav-label,
html[data-theme="cream"] .nav-label,
html[data-theme="light"] .search-bar,
html[data-theme="cream"] .search-bar,
html[data-theme="light"] .logout-modal-title,
html[data-theme="cream"] .logout-modal-title,
html[data-theme="light"] .logout-modal-message,
html[data-theme="cream"] .logout-modal-message,
html[data-theme="light"] .table-state-row td,
html[data-theme="cream"] .table-state-row td,
html[data-theme="light"] .log-table th,
html[data-theme="cream"] .log-table th,
html[data-theme="light"] .log-table td,
html[data-theme="cream"] .log-table td,
html[data-theme="light"] .log-table td::before,
html[data-theme="cream"] .log-table td::before {
    color: #111 !important;
}

html[data-theme="light"] .table-container,
html[data-theme="cream"] .table-container {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Theme-specific accent corrections (light=blue, cream=cream) */
html[data-theme="light"] .status-dot:not(.offline) {
    background: #1264d8 !important;
    box-shadow: 0 0 10px rgba(18, 100, 216, 0.85) !important;
    animation: statusDotPulseLight 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

html[data-theme="cream"] .status-dot:not(.offline) {
    background: #946335 !important;
    box-shadow: 0 0 10px rgba(148, 99, 53, 0.75) !important;
    animation: statusDotPulseCream 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

@keyframes statusDotPulseLight {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 0 0 6px rgba(18, 100, 216, 0.55);
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 14px rgba(18, 100, 216, 0.95);
    }
    100% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 0 0 6px rgba(18, 100, 216, 0.55);
    }
}

@keyframes statusDotPulseCream {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 0 0 6px rgba(148, 99, 53, 0.5);
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 14px rgba(148, 99, 53, 0.88);
    }
    100% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 0 0 6px rgba(148, 99, 53, 0.5);
    }
}

html[data-theme="light"] .resource-status,
html[data-theme="light"] .sync-db-status,
html[data-theme="light"] .sync-status-text #securityStatus,
html[data-theme="light"] .sync-status-text #cdnLatency {
    color: #1264d8 !important;
}

html[data-theme="cream"] .resource-status,
html[data-theme="cream"] .sync-db-status,
html[data-theme="cream"] .sync-status-text #securityStatus,
html[data-theme="cream"] .sync-status-text #cdnLatency {
    color: #946335 !important;
}

html[data-theme="light"] .sync-progress-bar {
    background: #1264d8 !important;
}

html[data-theme="cream"] .sync-progress-bar {
    background: #946335 !important;
}

html[data-theme="light"] .status-success {
    background: rgba(18, 100, 216, 0.1) !important;
    color: #1264d8 !important;
    border-color: rgba(18, 100, 216, 0.28) !important;
}

html[data-theme="cream"] .status-success {
    background: rgba(148, 99, 53, 0.11) !important;
    color: #946335 !important;
    border-color: rgba(148, 99, 53, 0.32) !important;
}

html[data-theme="light"] .signed-badge {
    background: rgba(18, 100, 216, 0.11) !important;
    border-color: rgba(18, 100, 216, 0.28) !important;
    color: #1264d8 !important;
}

html[data-theme="cream"] .signed-badge {
    background: rgba(148, 99, 53, 0.12) !important;
    border-color: rgba(148, 99, 53, 0.3) !important;
    color: #946335 !important;
}

/* Search field visibility across all pages */
html[data-theme="light"] .search-bar,
html[data-theme="cream"] .search-bar {
    border: 1px solid rgba(0, 0, 0, 0.38) !important;
}

html[data-theme="light"] .search-bar:focus,
html[data-theme="cream"] .search-bar:focus {
    border-color: rgba(0, 0, 0, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* Notes card readability in light/cream */
html[data-theme="light"] .note-title,
html[data-theme="cream"] .note-title,
html[data-theme="light"] .note-content,
html[data-theme="cream"] .note-content {
    color: #111 !important;
}

/* Custom alert/confirm readability for light/cream (profile, trash, notes, etc.) */
html[data-theme="light"] .modal-overlay .modal-header h2,
html[data-theme="cream"] .modal-overlay .modal-header h2,
html[data-theme="light"] .modal-overlay .modal-body,
html[data-theme="cream"] .modal-overlay .modal-body,
html[data-theme="light"] .modal-overlay .modal-body p,
html[data-theme="cream"] .modal-overlay .modal-body p,
html[data-theme="light"] .modal-overlay .modal-body span,
html[data-theme="cream"] .modal-overlay .modal-body span,
html[data-theme="light"] .modal-overlay .modal-body label,
html[data-theme="cream"] .modal-overlay .modal-body label,
html[data-theme="light"] .modal-overlay .modal-body legend,
html[data-theme="cream"] .modal-overlay .modal-body legend {
    color: #111 !important;
}

/* Notes export modal readability */
html[data-theme="light"] .export-notes-modal .export-notes-message,
html[data-theme="cream"] .export-notes-modal .export-notes-message,
html[data-theme="light"] .export-notes-modal .export-notes-group legend,
html[data-theme="cream"] .export-notes-modal .export-notes-group legend,
html[data-theme="light"] .export-notes-modal .export-note-option-title,
html[data-theme="cream"] .export-notes-modal .export-note-option-title,
html[data-theme="light"] .export-notes-modal .export-note-option-subtitle,
html[data-theme="cream"] .export-notes-modal .export-note-option-subtitle,
html[data-theme="light"] .export-notes-modal .export-note-option-meta,
html[data-theme="cream"] .export-notes-modal .export-note-option-meta {
    color: #111 !important;
}

html[data-theme="light"] .log-table tr:hover td,
html[data-theme="cream"] .log-table tr:hover td {
    background: rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .compose-btn,
html[data-theme="cream"] .compose-btn,
html[data-theme="light"] .btn-action,
html[data-theme="cream"] .btn-action,
html[data-theme="light"] .btn-send,
html[data-theme="cream"] .btn-send,
html[data-theme="light"] .btn-discard,
html[data-theme="cream"] .btn-discard,
html[data-theme="light"] .btn-attach,
html[data-theme="cream"] .btn-attach,
html[data-theme="light"] .logout-btn,
html[data-theme="cream"] .logout-btn,
html[data-theme="light"] #addNoteBtn,
html[data-theme="cream"] #addNoteBtn,
html[data-theme="light"] .detail-meta-toggle-btn,
html[data-theme="cream"] .detail-meta-toggle-btn,
html[data-theme="light"] .email-attachment-btn,
html[data-theme="cream"] .email-attachment-btn,
html[data-theme="light"] .media-viewer-btn,
html[data-theme="cream"] .media-viewer-btn,
html[data-theme="light"] .compose-btn span,
html[data-theme="cream"] .compose-btn span,
html[data-theme="light"] .btn-action span,
html[data-theme="cream"] .btn-action span,
html[data-theme="light"] .btn-send span,
html[data-theme="cream"] .btn-send span,
html[data-theme="light"] .btn-discard span,
html[data-theme="cream"] .btn-discard span,
html[data-theme="light"] .btn-attach span,
html[data-theme="cream"] .btn-attach span,
html[data-theme="light"] .logout-btn span,
html[data-theme="cream"] .logout-btn span,
html[data-theme="light"] #addNoteBtn span,
html[data-theme="cream"] #addNoteBtn span,
html[data-theme="light"] .compose-btn i,
html[data-theme="cream"] .compose-btn i,
html[data-theme="light"] .btn-action i,
html[data-theme="cream"] .btn-action i,
html[data-theme="light"] .btn-send i,
html[data-theme="cream"] .btn-send i,
html[data-theme="light"] .btn-discard i,
html[data-theme="cream"] .btn-discard i,
html[data-theme="light"] .btn-attach i,
html[data-theme="cream"] .btn-attach i,
html[data-theme="light"] .logout-btn i,
html[data-theme="cream"] .logout-btn i,
html[data-theme="light"] #addNoteBtn i,
html[data-theme="cream"] #addNoteBtn i {
    color: #111 !important;
}

/* Profile help request / send verification code button */
html[data-theme="light"] #sendHelpRequest,
html[data-theme="cream"] #sendHelpRequest,
html[data-theme="light"] .profile-help-send-btn,
html[data-theme="cream"] .profile-help-send-btn {
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.35) !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] #helpToggleLink,
html[data-theme="cream"] #helpToggleLink,
html[data-theme="light"] .profile-help-toggle,
html[data-theme="cream"] .profile-help-toggle {
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    background: #fff !important;
}

html[data-theme="light"] #helpToggleLink:hover,
html[data-theme="cream"] #helpToggleLink:hover,
html[data-theme="light"] .profile-help-toggle:hover,
html[data-theme="cream"] .profile-help-toggle:hover {
    background: #f3f4f6 !important;
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.52) !important;
}

html[data-theme="light"] #sendHelpRequest:hover,
html[data-theme="cream"] #sendHelpRequest:hover,
html[data-theme="light"] .profile-help-send-btn:hover,
html[data-theme="cream"] .profile-help-send-btn:hover {
    background: #f3f4f6 !important;
    color: #000 !important;
}

/* Profile avatar in dropdown/header should match light/cream surfaces */
html[data-theme="light"] .user-avatar {
    background: linear-gradient(135deg, #f8fbff, #e6f0ff) !important;
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="cream"] .user-avatar {
    background: linear-gradient(135deg, #fff7ea, #f3e2c8) !important;
    color: #2b2115 !important;
    border: 1px solid rgba(96, 74, 45, 0.24) !important;
    box-shadow: 0 6px 16px rgba(96, 74, 45, 0.14) !important;
}

html[data-theme="light"] img#navDropdownAvatar,
html[data-theme="cream"] img#navDropdownAvatar,
html[data-theme="light"] img#sidebarProfilePic,
html[data-theme="cream"] img#sidebarProfilePic {
    border: 1px solid rgba(0, 0, 0, 0.24) !important;
}

/* Profile selector dropdowns (font/theme) in light/cream */
html[data-theme="light"] .font-dropdown-toggle,
html[data-theme="cream"] .font-dropdown-toggle,
html[data-theme="light"] .theme-dropdown-toggle,
html[data-theme="cream"] .theme-dropdown-toggle {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] .font-dropdown-menu,
html[data-theme="cream"] .font-dropdown-menu,
html[data-theme="light"] .theme-dropdown-menu,
html[data-theme="cream"] .theme-dropdown-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.22) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .font-dropdown-menu-item,
html[data-theme="cream"] .font-dropdown-menu-item,
html[data-theme="light"] .theme-dropdown-menu-item,
html[data-theme="cream"] .theme-dropdown-menu-item {
    color: #111 !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .font-dropdown-menu-item:hover,
html[data-theme="cream"] .font-dropdown-menu-item:hover,
html[data-theme="light"] .theme-dropdown-menu-item:hover,
html[data-theme="cream"] .theme-dropdown-menu-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .font-dropdown-menu-item.selected,
html[data-theme="cream"] .font-dropdown-menu-item.selected,
html[data-theme="light"] .theme-dropdown-menu-item.selected,
html[data-theme="cream"] .theme-dropdown-menu-item.selected {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #000 !important;
}

/* Focused modal + button border corrections for light/cream */
html[data-theme="light"] .modal-overlay,
html[data-theme="cream"] .modal-overlay,
html[data-theme="light"] .logout-modal,
html[data-theme="cream"] .logout-modal {
    left: var(--sidebar-offset) !important;
    z-index: 9000 !important;
}

@media (max-width: 768px) {
    html[data-theme="light"] .modal-overlay,
    html[data-theme="cream"] .modal-overlay,
    html[data-theme="light"] .logout-modal,
    html[data-theme="cream"] .logout-modal {
        left: 0 !important;
    }
}

html[data-theme="light"] .modal-content,
html[data-theme="cream"] .modal-content,
html[data-theme="light"] .logout-modal-card,
html[data-theme="cream"] .logout-modal-card {
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
    border-radius: 24px !important;
}

html[data-theme="light"] .compose-btn,
html[data-theme="cream"] .compose-btn,
html[data-theme="light"] .btn-action,
html[data-theme="cream"] .btn-action,
html[data-theme="light"] .btn-send,
html[data-theme="cream"] .btn-send,
html[data-theme="light"] .btn-discard,
html[data-theme="cream"] .btn-discard,
html[data-theme="light"] .btn-attach,
html[data-theme="cream"] .btn-attach,
html[data-theme="light"] .logout-btn,
html[data-theme="cream"] .logout-btn,
html[data-theme="light"] #addNoteBtn,
html[data-theme="cream"] #addNoteBtn,
html[data-theme="light"] .detail-meta-toggle-btn,
html[data-theme="cream"] .detail-meta-toggle-btn,
html[data-theme="light"] .email-attachment-btn,
html[data-theme="cream"] .email-attachment-btn,
html[data-theme="light"] .media-viewer-btn,
html[data-theme="cream"] .media-viewer-btn,
html[data-theme="light"] .close-modal,
html[data-theme="cream"] .close-modal,
html[data-theme="light"] .compose-menu-toggle,
html[data-theme="cream"] .compose-menu-toggle,
html[data-theme="light"] .menu-toggle,
html[data-theme="cream"] .menu-toggle {
    border: 1px solid rgba(0, 0, 0, 0.32) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Profile custom confirm/alerts readability */
html[data-theme="light"] .customConfirmModal .modal-content,
html[data-theme="cream"] .customConfirmModal .modal-content,
html[data-theme="light"] #customConfirmModal .modal-content,
html[data-theme="cream"] #customConfirmModal .modal-content {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 24px !important;
}

html[data-theme="light"] .customConfirmModal .modal-header h2,
html[data-theme="cream"] .customConfirmModal .modal-header h2,
html[data-theme="light"] #customConfirmModal h2,
html[data-theme="cream"] #customConfirmModal h2,
html[data-theme="light"] #customConfirmModal p,
html[data-theme="cream"] #customConfirmModal p,
html[data-theme="light"] #customConfirmModal .modal-body,
html[data-theme="cream"] #customConfirmModal .modal-body {
    color: #111 !important;
}

/* Dashboard opened thread: remove shadow and keep a full-width divider across themes */
.content-area > .email-detail .detail-header,
.content-area > .email-detail-view .detail-header {
    box-shadow: none !important;
    margin-left: calc(-1 * clamp(16px, 2vw, 28px)) !important;
    margin-right: calc(-1 * clamp(16px, 2vw, 28px)) !important;
    padding-left: clamp(16px, 2vw, 28px) !important;
    padding-right: clamp(16px, 2vw, 28px) !important;
}

html[data-theme="light"] .content-area > .email-detail .detail-header,
html[data-theme="light"] .content-area > .email-detail-view .detail-header,
html[data-theme="cream"] .content-area > .email-detail .detail-header,
html[data-theme="cream"] .content-area > .email-detail-view .detail-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .content-area > .email-detail .detail-header,
html[data-theme="dark"] .content-area > .email-detail-view .detail-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Profile modals (change/configure/crop/custom confirm): keep perfectly rounded */
html[data-theme="light"] #passkeyModal .modal-content,
html[data-theme="dark"] #passkeyModal .modal-content,
html[data-theme="cream"] #passkeyModal .modal-content,
html[data-theme="light"] #cropModal .modal-content,
html[data-theme="dark"] #cropModal .modal-content,
html[data-theme="cream"] #cropModal .modal-content,
html[data-theme="light"] #customConfirmModal .modal-content,
html[data-theme="dark"] #customConfirmModal .modal-content,
html[data-theme="cream"] #customConfirmModal .modal-content {
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Edit modal stays rounded but must allow DOB dropdown to escape clipping */
html[data-theme="light"] #editModal .modal-content,
html[data-theme="dark"] #editModal .modal-content,
html[data-theme="cream"] #editModal .modal-content {
    border-radius: 24px !important;
    overflow: visible !important;
}

html[data-theme="light"] #editModal .modal-header,
html[data-theme="cream"] #editModal .modal-header,
html[data-theme="light"] #editModal .modal-footer,
html[data-theme="cream"] #editModal .modal-footer,
html[data-theme="light"] #passkeyModal .modal-header,
html[data-theme="cream"] #passkeyModal .modal-header,
html[data-theme="light"] #passkeyModal .modal-footer,
html[data-theme="cream"] #passkeyModal .modal-footer,
html[data-theme="light"] #cropModal .modal-header,
html[data-theme="cream"] #cropModal .modal-header,
html[data-theme="light"] #cropModal .modal-footer,
html[data-theme="cream"] #cropModal .modal-footer,
html[data-theme="light"] #customConfirmModal .modal-header,
html[data-theme="cream"] #customConfirmModal .modal-header,
html[data-theme="light"] #customConfirmModal .modal-footer,
html[data-theme="cream"] #customConfirmModal .modal-footer {
    border-radius: inherit !important;
}

/* Profile custom-alert/confirm text visibility */
html[data-theme="light"] #customConfirmModal .modal-body,
html[data-theme="dark"] #customConfirmModal .modal-body,
html[data-theme="cream"] #customConfirmModal .modal-body,
html[data-theme="light"] #customConfirmModal .modal-body *,
html[data-theme="dark"] #customConfirmModal .modal-body *,
html[data-theme="cream"] #customConfirmModal .modal-body *,
html[data-theme="light"] #helpErrorBox,
html[data-theme="dark"] #helpErrorBox,
html[data-theme="cream"] #helpErrorBox,
html[data-theme="light"] #helpSuccessBox,
html[data-theme="dark"] #helpSuccessBox,
html[data-theme="cream"] #helpSuccessBox {
    color: #111 !important;
}

/* Dark theme delete-confirm readability */
html[data-theme="dark"] #customConfirmModal .fa-exclamation-circle {
    color: #ff3b30 !important;
}

html[data-theme="dark"] #customConfirmModal #confirmTitle {
    color: #4da3ff !important;
}

html[data-theme="dark"] #customConfirmModal #confirmMessage,
html[data-theme="dark"] #customConfirmModal p#confirmMessage {
    color: #ffffff !important;
}

/* DOB custom selector visibility (profile edit modal) */
html[data-theme="light"] #editModal .modal-content,
html[data-theme="dark"] #editModal .modal-content,
html[data-theme="cream"] #editModal .modal-content,
html[data-theme="light"] #editModal .modal-body,
html[data-theme="dark"] #editModal .modal-body,
html[data-theme="cream"] #editModal .modal-body,
html[data-theme="light"] #editModal .dob-picker,
html[data-theme="dark"] #editModal .dob-picker,
html[data-theme="cream"] #editModal .dob-picker,
html[data-theme="light"] #editModal .dob-picker-row,
html[data-theme="dark"] #editModal .dob-picker-row,
html[data-theme="cream"] #editModal .dob-picker-row,
html[data-theme="light"] #editModal .dob-select,
html[data-theme="dark"] #editModal .dob-select,
html[data-theme="cream"] #editModal .dob-select {
    overflow: visible !important;
}

html[data-theme="light"] #editModal .dob-select.open,
html[data-theme="dark"] #editModal .dob-select.open,
html[data-theme="cream"] #editModal .dob-select.open {
    z-index: 9300 !important;
}

html[data-theme="light"] #editModal .dob-select-menu,
html[data-theme="dark"] #editModal .dob-select-menu,
html[data-theme="cream"] #editModal .dob-select-menu {
    z-index: 9206 !important;
    max-height: min(320px, 45vh) !important;
}

/* Performance and visibility fixes for mobile/tablet */
@media (max-width: 1024px) {
    .dashboard-intro {
        display: none !important;
    }

    .sidebar,
    .header,
    .profile-dropdown,
    .logout-modal,
    .logout-modal-card,
    .modal-overlay,
    .modal-content,
    .verification-popover,
    .sidebar-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    .main-panel {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .content-area {
        padding: 14px !important;
        overflow-x: hidden !important;
    }

    .page-header,
    .toolbar-subrow,
    .header-actions {
        width: 100% !important;
        max-width: 100% !important;
    }

    .resource-grid,
    #notesGrid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .resource-card,
    .note-card,
    .email-card,
    .table-container,
    .settings-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .log-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .log-table th,
    .log-table td {
        word-break: break-word !important;
    }

    .sidebar-tab,
    .tab-btn,
    .folder-tab,
    .pages-tab,
    [data-sidebar-tab] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Light/Cream sidebar parity on mobile + tablet only (desktop unchanged) */
@media (max-width: 1024px) {
    html[data-theme="light"] .sidebar,
    html[data-theme="cream"] .sidebar {
        background: var(--sidebar-bg) !important;
        border-right: 1px solid var(--border-color) !important;
        box-shadow: none !important;
    }

    html[data-theme="light"] .brand,
    html[data-theme="cream"] .brand,
    html[data-theme="light"] .nav-label,
    html[data-theme="cream"] .nav-label,
    html[data-theme="light"] .nav-item,
    html[data-theme="cream"] .nav-item,
    html[data-theme="light"] .nav-item i,
    html[data-theme="cream"] .nav-item i,
    html[data-theme="light"] .sidebar-footer,
    html[data-theme="cream"] .sidebar-footer,
    html[data-theme="light"] .system-status,
    html[data-theme="cream"] .system-status {
        color: #111 !important;
    }

    html[data-theme="light"] .sidebar-footer,
    html[data-theme="cream"] .sidebar-footer {
        background: rgba(255, 255, 255, 0.62) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    html[data-theme="cream"] .sidebar-footer {
        background: rgba(255, 248, 236, 0.74) !important;
        border-top: 1px solid rgba(96, 74, 45, 0.2) !important;
    }

    html[data-theme="light"] .nav-item,
    html[data-theme="cream"] .nav-item,
    html[data-theme="light"] .sidebar-tab,
    html[data-theme="cream"] .sidebar-tab,
    html[data-theme="light"] .tab-btn,
    html[data-theme="cream"] .tab-btn,
    html[data-theme="light"] .folder-tab,
    html[data-theme="cream"] .folder-tab,
    html[data-theme="light"] .pages-tab,
    html[data-theme="cream"] .pages-tab,
    html[data-theme="light"] [data-sidebar-tab],
    html[data-theme="cream"] [data-sidebar-tab] {
        background: transparent !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
    }

    html[data-theme="light"] .nav-item:hover,
    html[data-theme="cream"] .nav-item:hover {
        background: rgba(0, 0, 0, 0.05) !important;
        color: #000 !important;
    }

    html[data-theme="light"] .sidebar-overlay,
    html[data-theme="cream"] .sidebar-overlay {
        background: rgba(0, 0, 0, 0.28) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    html[data-theme="light"] .main-panel.blurred,
    html[data-theme="dark"] .main-panel.blurred,
    html[data-theme="cream"] .main-panel.blurred,
    html[data-theme="light"] .main-panel.only-sidebar,
    html[data-theme="dark"] .main-panel.only-sidebar,
    html[data-theme="cream"] .main-panel.only-sidebar {
        filter: none !important;
    }
}

/* Fix left-edge shadow leak on mobile: show sidebar shadow only when open */
@media (max-width: 768px) {
    .sidebar:not(.active):not(.focused) {
        box-shadow: none !important;
    }

    html[data-theme="dark"] .sidebar.active,
    html[data-theme="dark"] .sidebar.focused {
        box-shadow: 16px 0 32px rgba(0, 0, 0, 0.42) !important;
    }

    html[data-theme="light"] .sidebar.active,
    html[data-theme="light"] .sidebar.focused {
        box-shadow: 16px 0 32px rgba(15, 23, 42, 0.2) !important;
    }

    html[data-theme="cream"] .sidebar.active,
    html[data-theme="cream"] .sidebar.focused {
        box-shadow: 16px 0 32px rgba(96, 74, 45, 0.22) !important;
    }
}

/* Dashboard mobile/tablet: keep Inbox/Sent/Trash items fully visible (all themes) */
@media (max-width: 1024px) {
    .sidebar .nav-list {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar .nav-item,
    .sidebar [data-nav] {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    .sidebar .nav-item:last-child,
    .sidebar [data-nav="trash"] {
        margin-bottom: 10px !important;
    }
}

/* Dashboard email view on desktop/mobile/tablet: full-body readability + hidden scrollbars */
    .content-area > .email-detail,
    .content-area > .email-detail-view,
    #emailDetailView {
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .detail-body,
    #detailBody {
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }

    .detail-body.is-html *,
    #detailBody.is-html * {
        max-height: none !important;
    }

    .content-area,
    #emailListContainer,
    #emailDetailView,
    .content-area > .email-detail,
    .content-area > .email-detail-view,
    .detail-body,
    #detailBody {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .content-area::-webkit-scrollbar,
    #emailListContainer::-webkit-scrollbar,
    #emailDetailView::-webkit-scrollbar,
    .content-area > .email-detail::-webkit-scrollbar,
    .content-area > .email-detail-view::-webkit-scrollbar,
    .detail-body::-webkit-scrollbar,
    #detailBody::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

/* Notes light/cream visibility: selection border + footer metadata/icons */
html[data-theme="light"] .note-select-checkbox,
html[data-theme="cream"] .note-select-checkbox {
    border: 1px solid #111 !important;
    background: #fff !important;
}

html[data-theme="light"] .note-select-checkbox:checked,
html[data-theme="cream"] .note-select-checkbox:checked {
    border-color: #0b62d6 !important;
    background: #0b62d6 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="light"] .note-select-checkbox:checked::after,
html[data-theme="cream"] .note-select-checkbox:checked::after {
    background: #fff !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

html[data-theme="light"] .note-time,
html[data-theme="cream"] .note-time {
    color: #222 !important;
}

html[data-theme="light"] .edit-note,
html[data-theme="cream"] .edit-note,
html[data-theme="light"] .delete-note,
html[data-theme="cream"] .delete-note {
    color: #222 !important;
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
    background: rgba(255, 255, 255, 0.85) !important;
}

/* Dashboard bulk-select controls visibility for light/cream */
html[data-theme="light"] .bulk-action-btn,
html[data-theme="cream"] .bulk-action-btn {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] .bulk-action-btn:hover,
html[data-theme="cream"] .bulk-action-btn:hover {
    background: #f3f4f6 !important;
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="light"] .bulk-action-btn.bulk-danger,
html[data-theme="cream"] .bulk-action-btn.bulk-danger {
    background: rgba(255, 77, 77, 0.12) !important;
    color: #8f1f1f !important;
    border-color: rgba(143, 31, 31, 0.42) !important;
}

html[data-theme="light"] .email-select-checkbox,
html[data-theme="cream"] .email-select-checkbox {
    border: 1px solid #111 !important;
    background: #fff !important;
}

html[data-theme="light"] .email-select-checkbox:checked,
html[data-theme="cream"] .email-select-checkbox:checked {
    border-color: #0b62d6 !important;
    background: #0b62d6 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="light"] .email-select-checkbox:checked::after,
html[data-theme="cream"] .email-select-checkbox:checked::after {
    background: #fff !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}