/* Tailwind CSS v4 — disable auto-detection, scan only what matters */ @import "tailwindcss" source(none); @source "../views"; @source "../js"; /* Tailwind v4 plugins */ @plugin "@tailwindcss/forms"; /* Dark mode: class-based strategy (replaces darkMode: 'class' in tailwind.config.js) */ @custom-variant dark (&:where(.dark, .dark *)); /* Color scheme: surface + accent variables. data-color-scheme set on . */ :root, [data-color-scheme="blue"] { /* Surface - Blue/Slate */ --surface-body: #f8fafc; --surface-body-dark: #0f172a; --surface-sidebar: #1e293b; --surface-sidebar-dark: #020617; --surface-header: #1e293b; --surface-header-dark: #020617; --surface-card: #ffffff; --surface-card-dark: #1e293b; --surface-dropdown: #0f172a; --surface-dropdown-dark: #020617; --surface-footer: #1e293b; --surface-footer-dark: #020617; --surface-hover: #f1f5f9; --surface-hover-dark: #1e293b; --border-default: #e2e8f0; --border-default-dark: #334155; --text-muted: #64748b; --text-muted-dark: #94a3b8; --surface-panel-alt: #f1f5f9; --surface-panel-alt-dark: #1e293b; --surface-chrome-border: rgba(255,255,255,0.08); --surface-chrome-border-dark: rgba(255,255,255,0.05); /* Accent - Blue */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --color-primary-950: #172554; } [data-color-scheme="emerald"] { --surface-body: #f0fdf4; --surface-body-dark: #071a12; --surface-sidebar: #14332a; --surface-sidebar-dark: #020c09; --surface-header: #14332a; --surface-header-dark: #020c09; --surface-card: #ffffff; --surface-card-dark: #0f2e24; --surface-dropdown: #0d281f; --surface-dropdown-dark: #020c09; --surface-footer: #14332a; --surface-footer-dark: #020c09; --surface-hover: #ecfdf5; --surface-hover-dark: #14532d; --border-default: #bbf7d0; --border-default-dark: #14532d; --text-muted: #047857; --text-muted-dark: #6ee7b7; --surface-panel-alt: #ecfdf5; --surface-panel-alt-dark: #14332a; --surface-chrome-border: rgba(255,255,255,0.08); --surface-chrome-border-dark: rgba(255,255,255,0.05); --color-primary-50: #ecfdf5; --color-primary-100: #d1fae5; --color-primary-200: #a7f3d0; --color-primary-300: #6ee7b7; --color-primary-400: #34d399; --color-primary-500: #10b981; --color-primary-600: #059669; --color-primary-700: #047857; --color-primary-800: #065f46; --color-primary-900: #064e3b; --color-primary-950: #022c22; } [data-color-scheme="violet"] { --surface-body: #faf5ff; --surface-body-dark: #120b20; --surface-sidebar: #2d1f4e; --surface-sidebar-dark: #0f0620; --surface-header: #2d1f4e; --surface-header-dark: #0f0620; --surface-card: #ffffff; --surface-card-dark: #1e1b4b; --surface-dropdown: #1e1b4b; --surface-dropdown-dark: #0f0620; --surface-footer: #2d1f4e; --surface-footer-dark: #0f0620; --surface-hover: #f5f3ff; --surface-hover-dark: #3b0764; --border-default: #e9d5ff; --border-default-dark: #6b21a8; --text-muted: #6d28d9; --text-muted-dark: #c4b5fd; --surface-panel-alt: #f5f3ff; --surface-panel-alt-dark: #2d1f4e; --surface-chrome-border: rgba(255,255,255,0.08); --surface-chrome-border-dark: rgba(255,255,255,0.05); --color-primary-50: #f5f3ff; --color-primary-100: #ede9fe; --color-primary-200: #ddd6fe; --color-primary-300: #c4b5fd; --color-primary-400: #a78bfa; --color-primary-500: #8b5cf6; --color-primary-600: #7c3aed; --color-primary-700: #6d28d9; --color-primary-800: #5b21b6; --color-primary-900: #4c1d95; --color-primary-950: #2e1065; } /* Theme customization (replaces theme.extend in tailwind.config.js) */ @theme { --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --radius-card: 0.75rem; --color-primary-50: var(--color-primary-50); --color-primary-100: var(--color-primary-100); --color-primary-200: var(--color-primary-200); --color-primary-300: var(--color-primary-300); --color-primary-400: var(--color-primary-400); --color-primary-500: var(--color-primary-500); --color-primary-600: var(--color-primary-600); --color-primary-700: var(--color-primary-700); --color-primary-800: var(--color-primary-800); --color-primary-900: var(--color-primary-900); --color-primary-950: var(--color-primary-950); } /* Import FontAwesome — only the weights we use (skips v4-compat font + shims) */ @import '@fortawesome/fontawesome-free/css/fontawesome.min.css'; @import '@fortawesome/fontawesome-free/css/solid.min.css'; @import '@fortawesome/fontawesome-free/css/regular.min.css'; @import '@fortawesome/fontawesome-free/css/brands.min.css'; /* Import custom CSP-safe styles */ @import './csp-safe.css'; /* Alpine.js x-cloak - hide elements until Alpine initializes */ [x-cloak] { display: none !important; } /* Default document flow - public/guest pages need vertical scrolling */ html, body { height: 100%; overflow-x: hidden; } /* App shells keep a fixed viewport and scroll inside their content panels */ html.app-shell, body.app-shell { overflow: hidden; } /* Structural surfaces: color scheme variables applied to main chrome */ body { background-color: var(--surface-body) !important; transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .dark body { background-color: var(--surface-body-dark) !important; } #sidebar { background-color: var(--surface-sidebar) !important; } .dark #sidebar { background-color: var(--surface-sidebar-dark) !important; } /* Header bar and the nav inside it - .surface-header raises specificity so we beat Tailwind bg utilities */ header.surface-header, header.surface-header nav { background-color: var(--surface-header) !important; } .dark header.surface-header, .dark header.surface-header nav { background-color: var(--surface-header-dark) !important; } .dropdown-menu { background-color: var(--surface-dropdown) !important; } .dark .dropdown-menu { background-color: var(--surface-dropdown-dark) !important; } footer { background-color: var(--surface-footer) !important; color: white; } .dark footer { background-color: var(--surface-footer-dark) !important; color: white; } /* Dark Mode Text Readability Fixes */ @layer base { /* Ensure dark backgrounds have light text */ .dark { color-scheme: dark; } /* Fix text-gray-700, text-gray-800, text-gray-900 in dark mode */ .dark .text-gray-700:not([class*="dark:text-"]) { color: rgb(209 213 219) !important; /* gray-300 */ } .dark .text-gray-800:not([class*="dark:text-"]) { color: rgb(229 231 235) !important; /* gray-200 */ } .dark .text-gray-900:not([class*="dark:text-"]) { color: rgb(243 244 246) !important; /* gray-100 */ } /* Ensure labels are readable in dark mode */ .dark label:not([class*="dark:text-"]) { color: rgb(209 213 219) !important; /* gray-300 */ } /* Fix table headers in dark mode */ .dark th:not([class*="dark:text-"]) { color: rgb(209 213 219) !important; /* gray-300 */ } /* Fix table cells in dark mode */ .dark td:not([class*="dark:text-"]) { color: rgb(229 231 235) !important; /* gray-200 */ } /* Ensure headings are visible in dark mode */ .dark h1:not([class*="dark:text-"]), .dark h2:not([class*="dark:text-"]), .dark h3:not([class*="dark:text-"]), .dark h4:not([class*="dark:text-"]), .dark h5:not([class*="dark:text-"]), .dark h6:not([class*="dark:text-"]) { color: rgb(243 244 246) !important; /* gray-100 */ } /* Fix select elements in dark mode */ .dark select:not([class*="dark:text-"]), .dark input:not([class*="dark:text-"]), .dark textarea:not([class*="dark:text-"]) { color: rgb(243 244 246) !important; /* gray-100 */ } } /* Page-level card container (rounded-xl, shadow) - !important so scheme wins over Tailwind utilities */ .card { background-color: var(--surface-card) !important; border: 1px solid var(--border-default) !important; @apply rounded-xl shadow-md transition-colors duration-200; } .dark .card { background-color: var(--surface-card-dark) !important; border-color: var(--border-default-dark) !important; } /* Content panels (welcome card, movies wrapper, profile wrapper, etc.) - same surface as cards */ .surface-panel { background-color: var(--surface-card) !important; border-color: var(--border-default); } .surface-panel.border { border-width: 1px; border-style: solid; } .dark .surface-panel { background-color: var(--surface-card-dark) !important; border-color: var(--border-default-dark); } /* Sub-sections (filter bars, toolbars) - subtle contrast from cards */ .surface-panel-alt { background-color: var(--surface-panel-alt) !important; border-color: var(--border-default); } .dark .surface-panel-alt { background-color: var(--surface-panel-alt-dark) !important; border-color: var(--border-default-dark); } .surface-panel-alt.border-b, .surface-panel-alt.border-t { border-color: var(--border-default); } .dark .surface-panel-alt.border-b, .dark .surface-panel-alt.border-t { border-color: var(--border-default-dark); } .auth-page { background-color: var(--surface-body) !important; } .dark .auth-page { background-color: var(--surface-body-dark) !important; } .auth-card { background-color: var(--surface-card) !important; border: 1px solid var(--border-default); } .dark .auth-card { background-color: var(--surface-card-dark) !important; border-color: var(--border-default-dark); } .release-chip { @apply inline-flex items-center rounded px-2 py-0.5 text-xs font-medium; background-color: var(--surface-panel-alt); color: rgb(55 65 81); } .dark .release-chip { background-color: var(--surface-panel-alt-dark); color: rgb(209 213 219); } .release-action { @apply inline-flex items-center justify-center rounded-lg px-2 py-1 text-sm transition; } .release-action-sm { @apply inline-flex items-center justify-center rounded px-3 py-1 text-xs font-medium transition; } .release-action-download { @apply bg-green-600 text-white hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800; } .release-action-primary { @apply bg-primary-600 text-white hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-800; } .release-action-muted { @apply bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600; } .surface-prose { @apply max-w-none text-gray-700 dark:text-gray-300; } .surface-prose h1, .surface-prose h2, .surface-prose h3, .surface-prose h4, .surface-prose h5, .surface-prose h6 { @apply mt-6 mb-3 font-semibold text-gray-900 dark:text-gray-100; } .surface-prose p, .surface-prose ul, .surface-prose ol { @apply mb-4; } .surface-prose ul, .surface-prose ol { @apply pl-6; } .surface-prose a { @apply text-primary-600 underline hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300; } .surface-prose img { @apply my-6 h-auto max-w-full rounded-lg; } .surface-prose blockquote { @apply my-6 border-l-4 border-gray-200 pl-4 italic text-gray-600 dark:border-gray-700 dark:text-gray-400; } .surface-prose code { @apply rounded bg-gray-100 px-1.5 py-1 text-sm dark:bg-gray-900; } .surface-prose pre { @apply my-6 overflow-x-auto rounded-lg bg-gray-900 p-4 text-gray-50; } .surface-prose pre code { @apply bg-transparent p-0 text-inherit; } /* Tables in main content - use scheme surfaces so they match sidebar/header/cards */ main table { background-color: var(--surface-card) !important; } .dark main table { background-color: var(--surface-card-dark) !important; } main thead th { background-color: var(--surface-dropdown) !important; border-bottom-color: var(--border-default) !important; } .dark main thead th { background-color: var(--surface-dropdown-dark) !important; border-bottom-color: var(--border-default-dark) !important; } /* Table body and every row use scheme surface (override Tailwind bg-white / dark:bg-gray-800) */ main tbody { background-color: var(--surface-card) !important; } .dark main tbody { background-color: var(--surface-card-dark) !important; } main tbody tr { background-color: var(--surface-card) !important; border-bottom-color: var(--border-default); } .dark main tbody tr { background-color: var(--surface-card-dark) !important; border-bottom-color: var(--border-default-dark); } main tbody tr:hover { background-color: var(--surface-hover) !important; } .dark main tbody tr:hover { background-color: var(--surface-hover-dark) !important; } /* Custom styles for proper spacing and button alignment */ .btn { @apply inline-flex items-center justify-center px-4 py-2 border rounded-lg font-semibold text-sm transition-colors duration-150; } .btn i { @apply mr-2; } .btn-primary { @apply bg-primary-600 text-white border border-primary-600 hover:bg-primary-700 dark:bg-primary-700 dark:border-primary-700 dark:hover:bg-primary-800; } .btn-secondary { @apply bg-gray-600 dark:bg-gray-700 text-white border-gray-600 dark:border-gray-700 hover:bg-gray-700 dark:hover:bg-gray-800; } .btn-success { @apply bg-green-600 dark:bg-green-700 text-white border-green-600 dark:border-green-700 hover:bg-green-700 dark:hover:bg-green-800; } .btn-danger { @apply bg-red-600 dark:bg-red-700 text-white border-red-600 dark:border-red-700 hover:bg-red-700 dark:hover:bg-red-800; } .btn-warning { @apply bg-yellow-500 dark:bg-yellow-600 text-white border-yellow-500 dark:border-yellow-600 hover:bg-yellow-600 dark:hover:bg-yellow-700; } .btn-info { @apply bg-cyan-600 dark:bg-cyan-700 text-white border-cyan-600 dark:border-cyan-700 hover:bg-cyan-700 dark:hover:bg-cyan-800; } .btn-sm { @apply px-3 py-1 text-xs; } .btn-lg { @apply px-6 py-3 text-base; } /* Button group spacing */ .btn-group { @apply inline-flex space-x-2; } /* Icon spacing */ .fas, .far, .fab, .fa { @apply inline-block; min-width: 1em; text-align: center; } /* Table action buttons */ .table-actions { @apply flex items-center gap-2; } .table-actions .btn { @apply shrink-0; } /* Mobile Responsive Improvements */ /* Mobile-friendly tables */ @media (max-width: 768px) { .table-responsive { overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; } .table-responsive table { min-width: max-content; } /* Card-style table rows for mobile */ .table-mobile-cards tbody tr { display: block; border: 1px solid rgb(229 231 235); border-radius: 0.5rem; margin-bottom: 1rem; padding: 1rem; } .dark .table-mobile-cards tbody tr { border-color: rgb(55 65 81); } .table-mobile-cards tbody td { display: block; text-align: left; padding-left: 50% !important; position: relative; } .table-mobile-cards tbody td::before { content: attr(data-label); position: absolute; left: 1rem; font-weight: 600; color: rgb(55 65 81); } .dark .table-mobile-cards tbody td::before { color: rgb(209 213 219); } .table-mobile-cards thead { display: none; } /* Stack buttons vertically on mobile */ .btn-group { display: flex; flex-direction: column; row-gap: 0.5rem; column-gap: 0; } /* Full width buttons on mobile */ .btn-mobile-full { width: 100%; justify-content: center; } /* Mobile search forms */ .search-form-mobile { flex-direction: column; row-gap: 0.5rem; } .search-form-mobile select, .search-form-mobile input { width: 100%; border-radius: 0.25rem; } /* Reduce padding on small screens */ .container { padding-left: 0.5rem; padding-right: 0.5rem; } /* Stack navigation items */ .nav-mobile-stack { flex-direction: column; row-gap: 0.5rem; column-gap: 0; } /* Hide non-essential columns on mobile */ .hide-mobile { display: none; } /* Smaller text on mobile */ .text-mobile-sm { font-size: 0.75rem; line-height: 1rem; } /* Mobile dropdown menus should be full width */ .dropdown-menu { left: 0; right: 0; width: auto; margin-left: 0.5rem; margin-right: 0.5rem; } /* Mobile modal adjustments */ .modal-content { margin-left: 0.5rem; margin-right: 0.5rem; max-height: 90vh; overflow-y: auto; } /* Smaller font sizes for headings on mobile */ h1 { font-size: 1.5rem; line-height: 2rem; } h2 { font-size: 1.25rem; line-height: 1.75rem; } h3 { font-size: 1.125rem; line-height: 1.75rem; } /* Mobile grid adjustments */ .grid-mobile-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } /* Touch-friendly sizing */ .touch-target { min-height: 44px; min-width: 44px; } /* Mobile-optimized badges and labels */ .badge { font-size: 0.75rem; line-height: 1rem; padding: 0.25rem 0.5rem; } /* Improve readability of release titles */ .release-title { font-size: 0.875rem; line-height: 1.25rem; } /* Stack action buttons in cards */ .card-actions { flex-direction: column; row-gap: 0.5rem; column-gap: 0; } /* Make pagination more compact */ .pagination { font-size: 0.875rem; line-height: 1.25rem; } .pagination .page-link { padding: 0.25rem 0.5rem; min-width: 2rem; } /* Optimize data tables for mobile */ table.dataTable { font-size: 0.875rem; } table.dataTable td, table.dataTable th { padding: 0.5rem 0.25rem; } /* Improve form labels */ label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; } /* Better spacing for form groups */ .form-group { margin-bottom: 0.75rem; } /* Mobile-friendly alerts */ .alert { font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem 0.75rem; } /* Compact breadcrumbs */ .breadcrumb { font-size: 0.75rem; line-height: 1rem; } /* Stack filter options vertically */ .filter-options { flex-direction: column; row-gap: 0.5rem; } } /* Small mobile devices */ @media (max-width: 480px) { /* Even smaller text on very small screens */ body { font-size: 0.875rem; line-height: 1.25rem; } .btn { font-size: 0.75rem; line-height: 1rem; padding: 0.5rem 0.75rem; } /* Stack form fields */ .form-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.5rem; } /* Compact headers */ .page-header { font-size: 1.25rem; line-height: 1.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } /* Reduce card padding */ .card-mobile-compact { padding: 0.75rem; } } /* Tablet improvements */ @media (min-width: 768px) and (max-width: 1024px) { /* 2-column layout on tablets where appropriate */ .tablet-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Tablet-optimized navigation */ .nav-tablet { column-gap: 0.5rem; } } /* Landscape mobile optimization */ @media (max-height: 600px) and (orientation: landscape) { /* Reduce vertical padding in landscape */ .py-6 { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* Compact modals in landscape */ .modal-content { max-height: 85vh; } /* Smaller fixed buttons */ #mobile-sidebar-toggle, #theme-toggle { padding: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; } } /* Preview Modal CSP-Safe Styles */ .preview-modal-hidden, .modal-hidden { display: none; } #previewModal, .modal-z-index { z-index: 9999; } #previewModal.flex { display: flex; } /* Modal content scroll area */ .modal-content-scroll { max-height: calc(90vh - 80px); } /* Search highlight styling */ .search-highlight, mark { @apply bg-yellow-200 px-0.5 rounded; } .dark .search-highlight, .dark mark { @apply bg-yellow-700; }