/* Prevent white flash during page transitions - paint background immediately */
        html {
            background-color: #f3f4f6; /* gray-100 */
        }
        html.dark {
            background-color: #141414; /* neutral-900 */
        }

        body {
            background-color: #f3f4f6; /* gray-100 */
            min-height: 100vh;
        }
        html.dark body {
            background-color: #141414; /* neutral-900 */
        }

        /* Sidebar toggle icon rotation animation */
        #sidebar-toggle-icon.rotate-180 {
            transform: rotate(180deg) !important;
        }

        /* Loading spinner */
        .spinner {
            width: 44px;
            height: 44px;
            border: 4px solid #e5e7eb;
            border-top-color: #3B82F6;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            background: transparent;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Smooth page transitions: new page content eases in; on navigation the
           old content dims out and the spinner only fades in after a short
           delay so fast loads never flash it */
        main {
            animation: pageEnter 0.22s ease-out;
            transition: opacity 0.2s ease;
        }
        main.content-leaving {
            opacity: 0.4;
            pointer-events: none;
        }
        @keyframes pageEnter {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: none; }
        }
        #content-loader {
            animation: loaderFadeIn 0.2s ease 0.15s both;
        }
        @keyframes loaderFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            main, #content-loader {
                animation: none;
                transition: none;
            }
        }

        /* Dark mode styles */
        .dark {
            background-color: #141414 !important;
            color-scheme: dark;
        }
        .dark body {
            background-color: #141414 !important;
        }

        /* Background colors */
        /* bg-gray-100 is only used for chips, buttons, and selected states —
           render as a raised surface, not the base background */
        .dark .bg-gray-100 {
            background-color: #242424 !important;
        }
        .dark .bg-white,
        .dark [class*="bg-white"] {
            background-color: #1c1c1c !important;
        }
        .dark .bg-gray-50 {
            background-color: #1f1f1f !important;
        }

        /* Ensure all white backgrounds in forms are dark */
        .dark form .bg-white,
        .dark form [class*="bg-white"] {
            background-color: #1c1c1c !important;
        }

        /* Text colors */
        .dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700 {
            color: #e6e6e6 !important;
        }
        .dark .text-gray-600, .dark .text-gray-500 {
            color: #c6c6c6 !important;
        }
        .dark .text-gray-400 {
            color: #9aa0a6 !important;
        }
        .dark .text-black {
            color: #e6e6e6 !important;
        }

        /* Border colors */
        .dark .border-gray-200, .dark .border-gray-300, .dark .border-gray-100 {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark .border-b, .dark .border-t, .dark .border-l, .dark .border-r, .dark .border {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark .divide-gray-200 > * + *, .dark .divide-gray-100 > * + * {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        /* Form elements */
        .dark input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
        .dark select,
        .dark textarea {
            background-color: #242424 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #e6e6e6 !important;
        }
        .dark input::placeholder, .dark textarea::placeholder {
            color: #9aa0a6 !important;
        }

        /* Tables */
        .dark table {
            background-color: #1c1c1c !important;
        }
        .dark thead {
            background-color: #1f1f1f !important;
        }
        .dark th {
            color: #c6c6c6 !important;
        }
        .dark tbody tr {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark tbody tr:hover {
            background-color: #242424 !important;
        }
        .dark td {
            color: #e6e6e6 !important;
        }

        /* Cards and panels */
        .dark .shadow, .dark .shadow-lg, .dark .shadow-xl, .dark .shadow-md, .dark .shadow-sm {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
        }

        /* Colored backgrounds - keep them but slightly adjust */
        .dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
        .dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; }
        .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
        .dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; }
        .dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; }
        .dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.15) !important; }
        .dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
        .dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }

        /* Status badges - slightly brighter in dark mode */
        .dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; }
        .dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
        .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
        .dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18) !important; }
        .dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; }
        .dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; }
        .dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
        .dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.18) !important; }
        .dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; }
        .dark .bg-pink-100 { background-color: rgba(236, 72, 153, 0.18) !important; }
        .dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.18) !important; }
        .dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; }

        /* Colored badges keep their dark -700/-800 text classes, which are
           unreadable on the translucent dark backgrounds above — force light
           text on any element carrying a colored -100 background */
        .dark .bg-blue-100, .dark .bg-green-100, .dark .bg-red-100,
        .dark .bg-yellow-100, .dark .bg-purple-100, .dark .bg-orange-100,
        .dark .bg-amber-100, .dark .bg-teal-100, .dark .bg-indigo-100,
        .dark .bg-pink-100, .dark .bg-cyan-100, .dark .bg-rose-100 {
            color: #e6e6e6 !important;
        }

        /* Hover states */
        .dark .hover\:bg-gray-100:hover, .dark .hover\:bg-gray-50:hover {
            background-color: #242424 !important;
        }
        .dark .hover\:bg-gray-200:hover {
            background-color: #242424 !important;
        }
        /* Colored hover tints: the light -50/-200 hover shades are near-white
           and unreadable under light text in dark mode — use translucent
           color washes instead (same approach as the badge backgrounds) */
        .dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.2) !important; }
        .dark .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.2) !important; }
        .dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.2) !important; }
        .dark .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.2) !important; }
        .dark .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, 0.2) !important; }
        .dark .hover\:bg-yellow-50:hover { background-color: rgba(234, 179, 8, 0.2) !important; }
        .dark .hover\:bg-blue-200:hover { background-color: rgba(59, 130, 246, 0.35) !important; }
        .dark .hover\:bg-green-200:hover { background-color: rgba(34, 197, 94, 0.35) !important; }
        .dark .hover\:bg-red-200:hover { background-color: rgba(239, 68, 68, 0.35) !important; }
        .dark .hover\:bg-yellow-200:hover { background-color: rgba(234, 179, 8, 0.35) !important; }

        /* Links - only style links that don't have explicit colors */
        .dark a:not([class*="bg-"]):not([class*="text-blue"]):not([class*="text-red"]):not([class*="text-green"]):not(.text-white) {
            color: #93c5fd;
        }
        .dark a:not([class*="bg-"]):not([class*="text-"]):hover {
            color: #bfdbfe;
        }

        /* Spinner */
        .dark .spinner {
            border-color: rgba(255, 255, 255, 0.12);
            border-top-color: #60a5fa;
        }

        /* Dropdowns. (Deliberately no [class*="modal"] selector here — it
           would match the modal-open/modal-animated/modal-backdrop animation
           classes and paint full-screen modal wrappers opaque dark) */
        .dark .dropdown-menu {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        /* Header/Navbar */
        .dark header {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark header a {
            color: #c6c6c6 !important;
        }
        .dark header a:hover {
            color: #e6e6e6 !important;
        }
        .dark header .text-black {
            color: #e6e6e6 !important;
        }

        /* Sidebar */
        .dark .theme-sidebar, .dark nav#sidebar {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark #sidebar a {
            color: #c6c6c6 !important;
        }
        .dark #sidebar a:hover {
            background-color: #242424 !important;
        }
        .dark #sidebar .bg-gray-100 {
            background-color: #242424 !important;
        }
        .dark #sidebar .text-gray-900 {
            color: #e6e6e6 !important;
        }
        .dark #create-btn, .dark #sidebar a#create-btn {
            background-color: #333333 !important;
            color: #e6e6e6 !important;
        }
        .dark #create-btn:hover, .dark #sidebar a#create-btn:hover {
            background-color: #3d3d3d !important;
        }

        /* Ticket preview panel */
        .dark #ticket-preview-panel {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark #ticket-preview-panel .bg-gray-50 {
            background-color: #242424 !important;
        }

        /* Sticky header for ticket tables */
        .dark #sticky-header-wrapper {
            background-color: #242424 !important;
        }
        .dark #sticky-header-wrapper th {
            background-color: #242424 !important;
        }
        .dark #sticky-batch-bar {
            background-color: rgba(88, 28, 135, 0.3) !important;
        }

        /* Buttons */
        .dark .bg-gray-100 {
            background-color: #242424 !important;
        }
        .dark .bg-gray-200 {
            background-color: #333333 !important;
        }
        .dark button.hover\:bg-gray-100:hover {
            background-color: #242424 !important;
        }
        .dark button.hover\:bg-gray-200:hover {
            background-color: #333333 !important;
        }

        /* Checkboxes */
        .dark input[type="checkbox"] {
            background-color: #242424 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
        }

        /* Gradients override */
        .dark .bg-gradient-to-br {
            background: #141414 !important;
        }
        .dark .from-gray-50, .dark .via-white, .dark .to-gray-100 {
            --tw-gradient-from: #141414 !important;
            --tw-gradient-to: #141414 !important;
            --tw-gradient-stops: #141414 !important;
        }

        /* Batch actions bar */
        .dark .bg-purple-50 {
            background-color: rgba(88, 28, 135, 0.3) !important;
        }

        /* Fix for ticket row text */
        .dark .font-medium {
            color: #e6e6e6;
        }
        .dark .text-sm {
            color: #c6c6c6;
        }

        /* User dropdown in header */
        .dark header .bg-white {
            background-color: #1c1c1c !important;
        }

        /* Mobile nav */
        .dark #mobile-nav {
            background-color: #1c1c1c !important;
        }
        .dark #mobile-nav a {
            color: #c6c6c6 !important;
        }

        /* Scrollbar */
        .dark ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .dark ::-webkit-scrollbar-track {
            background: #1c1c1c;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #333333;
            border-radius: 4px;
        }
        .dark ::-webkit-scrollbar-thumb:hover {
            background: #3d3d3d;
        }

        /* Alert/warning boxes */
        .dark .bg-amber-50 {
            background-color: rgba(245, 158, 11, 0.15) !important;
        }
        .dark .border-amber-200 {
            border-color: rgba(245, 158, 11, 0.4) !important;
        }
        .dark .text-amber-800 {
            color: #fbbf24 !important;
        }
        .dark .text-amber-500 {
            color: #f59e0b !important;
        }

        /* Theme classes for ticket create/edit sidebar */
        .dark .theme-sidebar {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark .theme-sidebar-header {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark .theme-label {
            color: #9aa0a6 !important;
        }
        .dark .theme-input {
            background-color: #242424 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #e6e6e6 !important;
        }
        .dark .theme-input:focus {
            border-color: #f97316 !important;
        }
        .dark .theme-btn-danger {
            background-color: #dc2626 !important;
            color: white !important;
        }
        .dark .theme-btn-danger:hover {
            background-color: #b91c1c !important;
        }

        /* Ticket create/edit page specific */
        .dark .text-slate-900 {
            color: #e6e6e6 !important;
        }
        .dark .text-slate-700 {
            color: #c6c6c6 !important;
        }
        .dark .text-slate-600 {
            color: #9aa0a6 !important;
        }
        .dark .text-slate-500 {
            color: #9aa0a6 !important;
        }
        .dark .text-slate-400 {
            color: #868c92 !important;
        }
        .dark .border-slate-200, .dark .border-slate-300 {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark .bg-slate-50 {
            background-color: #242424 !important;
        }
        .dark .hover\:bg-slate-50:hover {
            background-color: #242424 !important;
        }

        /* Note editor / TinyMCE - comprehensive dark mode */
        .dark .tox-tinymce {
            border-color: rgba(255, 255, 255, 0.08) !important;
            background-color: #1c1c1c !important;
        }
        .dark .tox .tox-edit-area {
            background-color: #1c1c1c !important;
        }
        .dark .tox .tox-edit-area__iframe {
            background-color: #1c1c1c !important;
        }
        .dark .tox .tox-editor-header {
            background-color: #242424 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
        }
        .dark .tox .tox-toolbar-overlord,
        .dark .tox .tox-toolbar__primary,
        .dark .tox .tox-toolbar__overflow {
            background-color: #242424 !important;
            background: #242424 !important;
        }
        .dark .tox .tox-toolbar__group {
            border-color: rgba(255, 255, 255, 0.12) !important;
        }
        .dark .tox .tox-tbtn {
            color: #c6c6c6 !important;
        }
        .dark .tox .tox-tbtn svg {
            fill: #c6c6c6 !important;
        }
        .dark .tox .tox-tbtn:hover {
            background-color: #333333 !important;
        }
        .dark .tox .tox-tbtn--enabled,
        .dark .tox .tox-tbtn--enabled:hover {
            background-color: #333333 !important;
        }
        .dark .tox .tox-tbtn__select-label {
            color: #c6c6c6 !important;
        }
        .dark .tox .tox-split-button:hover {
            background-color: #333333 !important;
        }
        .dark .tox .tox-statusbar {
            background-color: #242424 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #9aa0a6 !important;
        }
        .dark .tox .tox-statusbar__path-item {
            color: #9aa0a6 !important;
        }
        .dark .tox .tox-statusbar__wordcount {
            color: #9aa0a6 !important;
        }
        .dark .tox .tox-statusbar__resize-handle svg {
            fill: #868c92 !important;
        }
        .dark .tox .tox-sidebar-wrap {
            background-color: #1c1c1c !important;
        }
        .dark .tox .tox-sidebar {
            background-color: #1c1c1c !important;
        }
        .dark .tox .tox-anchorbar {
            background-color: #242424 !important;
        }
        /* TinyMCE menus and dropdowns */
        .dark .tox .tox-menu {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark .tox .tox-collection__item {
            color: #c6c6c6 !important;
        }
        .dark .tox .tox-collection__item--active {
            background-color: #242424 !important;
        }
        .dark .tox .tox-collection__item-label {
            color: #c6c6c6 !important;
        }
        .dark .tox .tox-collection__item-checkmark svg {
            fill: #c6c6c6 !important;
        }

        /* Modals in dark mode */
        /* 50-60% black over the already-dark page reads as solid black —
           lighten the backdrops so the page behind stays visible */
        .dark .bg-black\/40,
        .dark .bg-black\/50,
        .dark .bg-black\/60 {
            background-color: rgba(0, 0, 0, 0.35) !important;
        }
        .dark .fixed .bg-white {
            background-color: #1c1c1c !important;
        }
        .dark [id$="-modal"] .bg-white {
            background-color: #1c1c1c !important;
        }

        /* Customer dropdown */
        .dark #customer_dropdown {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark #customer_dropdown > div {
            color: #c6c6c6 !important;
        }
        .dark #customer_dropdown > div:hover {
            background-color: #242424 !important;
        }

        /* Tooltip dark mode */
        .dark #customer-search-tooltip {
            background-color: #242424 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #e6e6e6 !important;
        }

        /* Note editor main container */
        .dark .flex-1.flex.flex-col.bg-white {
            background-color: #1c1c1c !important;
        }

        /* All child divs in the note editor should be dark */
        .dark .flex-1.flex.flex-col.bg-white > div {
            background-color: #1c1c1c !important;
        }
        .dark .flex-1.flex.flex-col.bg-white .p-4 {
            background-color: #1c1c1c !important;
        }

        /* Note type tabs */
        .dark .peer-checked\:bg-white {
            background-color: #1c1c1c !important;
        }
        .dark label span.bg-gray-100 {
            background-color: #242424 !important;
        }
        .dark .peer-checked\:text-gray-900 {
            color: #e6e6e6 !important;
        }
        .dark .peer-checked\:border-gray-300 {
            border-color: rgba(255, 255, 255, 0.12) !important;
        }

        /* Recipients section */
        .dark #recipients-section {
            background-color: #242424 !important;
        }

        /* Public note info */
        .dark #public-note-info {
            background-color: rgba(59, 130, 246, 0.15) !important;
        }

        /* User/customer list items */
        .dark .user-item, .dark .customer-item {
            color: #e6e6e6 !important;
        }
        .dark .user-item:hover, .dark .customer-item:hover {
            background-color: #242424 !important;
        }
        .dark #user-list, .dark #customer-list {
            background-color: #1c1c1c !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        /* History/replies section */
        .dark #history-container > div {
            background-color: #1c1c1c !important;
        }
        .dark .divide-gray-200 > * + * {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        /* Action buttons bar */
        .dark .border-t.p-3.bg-gray-50,
        .dark .border-t.p-4.bg-gray-50 {
            background-color: #242424 !important;
        }

        /* Theme button secondary */
        .dark .theme-btn-secondary {
            background-color: #333333 !important;
            color: #e6e6e6 !important;
            border-color: rgba(255, 255, 255, 0.16) !important;
        }
        .dark .theme-btn-secondary:hover {
            background-color: #3d3d3d !important;
        }

        /* Prose content in dark mode */
        .dark .prose {
            color: #c6c6c6 !important;
        }
        .dark .prose a {
            color: #93c5fd !important;
        }

        /* Reply history internal note */
        .dark .border-l-4.border-yellow-400 {
            border-color: #eab308 !important;
        }

        /* Attachments */
        .dark a.bg-gray-100.hover\:bg-gray-200 {
            background-color: #242424 !important;
        }
        .dark a.bg-gray-100.hover\:bg-gray-200:hover {
            background-color: #333333 !important;
        }
        .dark a.bg-gray-100 .text-gray-700 {
            color: #c6c6c6 !important;
        }

        /* Selected recipients tags */
        .dark #selected-recipients .bg-gray-100 {
            background-color: #242424 !important;
        }

        /* Original Request / History headers */
        .dark .border-t.bg-gray-50 > .border-b.bg-white {
            background-color: #1c1c1c !important;
        }
        .dark .border-t.bg-gray-50 > .p-4.bg-white {
            background-color: #1c1c1c !important;
        }

        /* iframe for email content */
        .dark iframe[srcdoc] {
            background-color: #1c1c1c !important;
        }