@import url('/vendor/css/inter-fonts.css');

        body {
            font-family: 'Inter', sans-serif;
            height: 100dvh;
        }

        .loader {
            border: 3px solid #e5e7eb;
            border-top-color: #3b82f6;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }

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

        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        #visual-editor h1 {
            font-size: 2em;
            font-weight: bold;
            margin: 0.5em 0;
        }

        #visual-editor h2 {
            font-size: 1.5em;
            font-weight: bold;
            margin: 0.5em 0;
        }

        #visual-editor ul {
            list-style: disc;
            padding-left: 1.5em;
        }

        #visual-editor ol {
            list-style: decimal;
            padding-left: 1.5em;
        }

        #visual-editor a {
            color: #2563eb !important;
            text-decoration: underline !important;
        }

        #visual-editor a:hover {
            color: #1d4ed8 !important;
        }

        .prose a {
            color: #2563eb !important;
            text-decoration: underline !important;
        }

        .prose a:hover {
            color: #1d4ed8 !important;
        }

        .prose h1 {
            font-size: 1.75em;
            font-weight: bold;
            margin: 0.5em 0;
        }

        .prose h2 {
            font-size: 1.35em;
            font-weight: bold;
            margin: 0.5em 0;
        }

        .prose ul {
            list-style: disc;
            padding-left: 1.5em;
        }

        .prose ol {
            list-style: decimal;
            padding-left: 1.5em;
        }

        .logo-glow {
            filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
            transition: all 0.3s ease;
        }

        .logo-glow:hover {
            filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 32px rgba(59, 130, 246, 0.4));
            transform: scale(1.05);
        }

        .logo-login {
            filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
            animation: pulse-glow 2s ease-in-out infinite;
        }

        @keyframes pulse-glow {

            0%,
            100% {
                filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
            }

            50% {
                filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.8));
            }
        }

        .field-error {
            border-color: #ef4444 !important;
        }

        .error-text {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }

        .locked-item {
            opacity: 0.5;
            pointer-events: none;
            position: relative;
        }

        .locked-item::after {
            content: '';
            position: absolute;
            inset: 0;
            cursor: not-allowed;
            pointer-events: all;
        }

        .lock-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            color: #9ca3af;
        }

        /* Sidebar collapse styles */
        #sidebar {
            transition: width 0.3s ease, transform 0.3s ease;
        }

        #sidebar.collapsed {
            width: 64px;
        }

        #sidebar.collapsed .nav-label {
            display: none;
        }

        #sidebar.collapsed .nav-item {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
        }

        #sidebar.collapsed .nav-item svg {
            margin: 0;
        }

        #sidebar.collapsed #sidebar-nav {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        #sidebar .sidebar-logo-full {
            display: block;
        }

        #sidebar .sidebar-logo-icon {
            display: none;
        }

        #sidebar.collapsed .sidebar-logo-full {
            display: none;
        }

        #sidebar.collapsed .sidebar-logo-icon {
            display: block;
        }

        #sidebar-toggle-btn {
            transition: transform 0.3s ease;
        }

        #sidebar.collapsed #sidebar-toggle-btn svg {
            transform: rotate(180deg);
        }

        /* Mobile sidebar */
        @media (max-width: 767px) {
            #sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 40;
                transform: translateX(-100%);
                width: 260px !important;
            }

            #sidebar.mobile-open {
                transform: translateX(0);
            }

            #sidebar.collapsed {
                width: 260px !important;
            }

            #sidebar.collapsed .nav-label {
                display: inline;
            }

            #sidebar.collapsed .nav-item {
                justify-content: flex-start;
                padding-left: 1rem;
                padding-right: 1rem;
            }

            #sidebar.collapsed .sidebar-logo-full {
                display: block;
            }

            #sidebar.collapsed .sidebar-logo-icon {
                display: none;
            }

            #sidebar-toggle-btn {
                display: none;
            }
        }

        #sidebar-backdrop {
            transition: opacity 0.3s ease;
        }

        /* Dark Mode Extensions */
        html.dark body {
            background-color: #111827 !important;
            color: #f3f4f6 !important;
        }

        html.dark .bg-white {
            background-color: #1f2937 !important;
        }

        html.dark .bg-gray-50 {
            background-color: #374151 !important;
        }

        html.dark .bg-gray-100 {
            background-color: #111827 !important;
        }

        html.dark .bg-gray-200 {
            background-color: #4b5563 !important;
        }

        html.dark .bg-blue-50 {
            background-color: #1e3a8a !important;
            color: #bfdbfe !important;
            border-color: #1e40af !important;
        }

        html.dark .bg-blue-100 {
            background-color: #1e3a8a !important;
            color: #bfdbfe !important;
        }

        html.dark .bg-purple-50,
        html.dark .bg-purple-100 {
            background-color: #4c1d95 !important;
            color: #ddd6fe !important;
            border-color: #581c87 !important;
        }

        html.dark .bg-green-50,
        html.dark .bg-green-100 {
            background-color: #064e3b !important;
            color: #a7f3d0 !important;
            border-color: #065f46 !important;
        }

        html.dark .bg-amber-50,
        html.dark .bg-amber-100 {
            background-color: #78350f !important;
            color: #fde68a !important;
            border-color: #92400e !important;
        }

        html.dark .bg-red-50,
        html.dark .bg-red-100 {
            background-color: #7f1d1d !important;
            color: #fecaca !important;
            border-color: #991b1b !important;
        }

        @media (min-width: 640px) {
            html.dark .sm\:bg-transparent {
                background-color: transparent !important;
                color: inherit !important;
                border-color: transparent !important;
            }
        }

        html.dark .text-gray-900,
        html.dark .text-gray-800,
        html.dark .text-gray-700 {
            color: #f9fafb !important;
        }

        html.dark .text-blue-800,
        html.dark .text-blue-700,
        html.dark .text-blue-600 {
            color: #93c5fd !important;
        }

        html.dark .text-purple-800,
        html.dark .text-purple-700,
        html.dark .text-purple-600 {
            color: #c4b5fd !important;
        }

        html.dark .text-green-800,
        html.dark .text-green-700,
        html.dark .text-green-600 {
            color: #86efac !important;
        }

        html.dark .text-gray-600 {
            color: #f3f4f6 !important;
        }

        html.dark .text-gray-500 {
            color: #e5e7eb !important;
        }

        html.dark .text-gray-400,
        html.dark .text-gray-300 {
            color: #d1d5db !important;
        }

        html.dark .hover\:text-gray-600:hover,
        html.dark .hover\:text-gray-700:hover,
        html.dark .hover\:text-gray-800:hover {
            color: #ffffff !important;
        }

        html.dark .border,
        html.dark .border-t,
        html.dark .border-b,
        html.dark .border-l,
        html.dark .border-r,
        html.dark .border-gray-200,
        html.dark .border-gray-300,
        html.dark .border-gray-100 {
            border-color: #4b5563 !important;
        }

        html.dark input,
        html.dark textarea,
        html.dark select {
            background-color: #374151 !important;
            color: #f9fafb !important;
            border-color: #4b5563 !important;
        }

        html.dark input:-webkit-autofill,
        html.dark input:-webkit-autofill:hover,
        html.dark input:-webkit-autofill:focus,
        html.dark textarea:-webkit-autofill,
        html.dark select:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px #374151 inset !important;
            -webkit-text-fill-color: #f9fafb !important;
            border-color: #4b5563 !important;
            transition: background-color 5000s ease-in-out 0s;
        }

        /* Prose and Editor Overrides */
        html.dark .prose,
        html.dark #visual-editor,
        html.dark .prose p,
        html.dark #visual-editor p,
        html.dark .prose h1,
        html.dark #visual-editor h1,
        html.dark .prose h2,
        html.dark #visual-editor h2,
        html.dark .prose h3,
        html.dark #visual-editor h3,
        html.dark .prose ul,
        html.dark #visual-editor ul,
        html.dark .prose ol,
        html.dark #visual-editor ol,
        html.dark .prose li,
        html.dark #visual-editor li {
            color: #f9fafb !important;
        }

        html.dark .prose strong,
        html.dark #visual-editor strong,
        html.dark .prose b,
        html.dark #visual-editor b {
            color: #ffffff !important;
        }

        html.dark .hover\:bg-gray-50:hover {
            background-color: #374151 !important;
        }

        html.dark .hover\:bg-gray-100:hover {
            background-color: #4b5563 !important;
        }

        html.dark .hover\:bg-gray-200:hover {
            background-color: #6b7280 !important;
        }

        html.dark .hover\:bg-blue-50:hover {
            background-color: #1e3a8a !important;
            color: #bfdbfe !important;
        }

        html.dark .hover\:bg-amber-50:hover {
            background-color: #374151 !important;
            color: inherit;
        }

        html.dark .hover\:border-blue-300:hover {
            border-color: #60a5fa !important;
        }

        html.dark .hover\:border-green-300:hover {
            border-color: #34d399 !important;
        }

        /* Report table users */
        html.dark .report-table th.user-header .user-label {
            color: #f9fafb !important;
        }

        html.dark .shadow-sm,
        html.dark .shadow-lg,
        html.dark .shadow-2xl {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
        }

        html.dark #login-view {
            background: linear-gradient(to bottom right, #111827, #1f2937) !important;
        }

        html.dark .text-blue-600 {
            color: #60a5fa !important;
        }

        html.dark .text-blue-700 {
            color: #93c5fd !important;
        }

        /* Ad schedule date blink */
        .ad-date-active {
            animation: ad-date-blink 1.5s ease-in-out infinite;
        }

        @keyframes ad-date-blink {
            0%, 100% {
                background-color: #dcfce7;
                color: #15803d;
            }
            50% {
                background-color: #22c55e;
                color: #ffffff;
            }
        }

        html.dark .ad-date-active {
            animation: ad-date-blink-dark 1.5s ease-in-out infinite;
        }

        @keyframes ad-date-blink-dark {
            0%, 100% {
                background-color: #064e3b;
                color: #86efac;
            }
            50% {
                background-color: #16a34a;
                color: #ffffff;
            }
        }

        /* ── Upload Picker Dark Mode ── */
        html.dark .text-amber-700,
        html.dark .text-amber-600 {
            color: #fbbf24 !important;
        }

        html.dark .text-orange-600,
        html.dark .text-orange-500 {
            color: #fb923c !important;
        }

        html.dark .bg-amber-600 {
            background-color: #b45309 !important;
        }

        html.dark .hover\:bg-amber-700:hover {
            background-color: #92400e !important;
        }

        html.dark .hover\:bg-amber-100:hover {
            background-color: #78350f !important;
            color: #fde68a !important;
        }

        html.dark .border-amber-200 {
            border-color: #92400e !important;
        }

        html.dark #upload-picker-modal > div {
            background-color: #1f2937 !important;
        }

        html.dark #upload-picker-modal .bg-gradient-to-r {
            background: linear-gradient(to right, #78350f, #7c2d12) !important;
        }

        html.dark #upload-picker-modal .bg-gradient-to-r h3 {
            color: #fde68a !important;
        }

        /* ── File Usage Badge ── */
        .file-usage-badge {
            display: inline-flex;
            align-items: flex-start;
            gap: 4px;
            font-size: 0.65rem;
            padding: 2px 8px;
            border-radius: 4px;
            background: #eff6ff;
            color: #2563eb;
            border: 1px solid #bfdbfe;
            white-space: normal;
            word-break: break-word;
            line-height: 1.4;
        }

        html.dark .file-usage-badge {
            background: #1e3a8a !important;
            color: #93c5fd !important;
            border-color: #1e40af !important;
        }

        .file-usage-container {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
            padding-left: 0;
        }

        @media (max-width: 639px) {
            .file-usage-container {
                padding-left: 0;
            }
            .file-usage-badge {
                font-size: 0.6rem;
                padding: 2px 6px;
            }
        }

        .media-wrapper {
            min-width: min-content;
        }

        video { 
            min-width: 260px; 
            max-width: 100%; 
        }

        @media (max-width: 639px) {
            .media-wrapper, .media-wrapper video, .media-wrapper img,
            .prose video, #visual-editor video, #ann-content-editor video {
                width: 100% !important;
                max-width: 100% !important;
                float: none !important;
                margin-left: auto !important;
                margin-right: auto !important;
                display: block !important;
            }
        }

        @keyframes blink-neu {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }