@import 'tailwindcss'; @source '../../resources/views/**/*.blade.php'; @source '../../app/Http/Controllers/**/*.php'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; [x-cloak] { display: none !important; } @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } /* ── Dark Mode ──────────────────────────────────────────────────────────────── Unlayered CSS has higher cascade priority than Tailwind's @layer utilities, so these rules win without !important and without touching view files. Toggle: add/remove class "dark" on . ─────────────────────────────────────────────────────────────────────────── */ html.dark { color-scheme: dark; } /* Page background */ html.dark body { background-color: #0f172a; color: #f1f5f9; } /* ── Surfaces & borders ── */ html.dark .bg-white { background-color: #1e293b; } html.dark .bg-gray-50 { background-color: #162032; } html.dark .bg-gray-100 { background-color: #1e293b; } html.dark .bg-gray-200 { background-color: #334155; } html.dark .border-gray-50 { border-color: #1e293b; } html.dark .border-gray-100 { border-color: #1e293b; } html.dark .border-gray-200 { border-color: #334155; } html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; } /* ── Text ── */ html.dark .text-gray-950 { color: #f8fafc; } html.dark .text-gray-900 { color: #f1f5f9; } html.dark .text-gray-800 { color: #e2e8f0; } html.dark .text-gray-700 { color: #cbd5e1; } html.dark .text-gray-600 { color: #94a3b8; } html.dark .text-gray-500 { color: #64748b; } html.dark .text-gray-400 { color: #475569; } html.dark .text-gray-300 { color: #334155; } html.dark .text-gray-200 { color: #1e293b; } /* ── Hover states ── */ html.dark .hover\:bg-gray-50:hover { background-color: #1e293b; } html.dark .hover\:bg-gray-100:hover { background-color: #334155; } html.dark .hover\:bg-gray-200:hover { background-color: #475569; } html.dark .hover\:text-gray-900:hover { color: #f1f5f9; } html.dark .hover\:text-gray-700:hover { color: #cbd5e1; } html.dark .hover\:text-gray-600:hover { color: #94a3b8; } /* ── Form controls (browser default is white) ── */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.dark select, html.dark textarea { background-color: #1e293b; color: #f1f5f9; border-color: #334155; } html.dark option { background-color: #1e293b; color: #f1f5f9; } html.dark input::placeholder, html.dark textarea::placeholder { color: #475569; } /* ── Teal (brand) — sidebar nav & header ── */ html.dark aside .bg-teal-50 { background-color: rgba(20,184,166,0.12); } html.dark aside .text-teal-700 { color: #2dd4bf; } html.dark aside .text-teal-600 { color: #2dd4bf; } html.dark aside .border-teal-100 { border-color: rgba(20,184,166,0.2); } html.dark header .bg-teal-100 { background-color: rgba(20,184,166,0.2); } html.dark header .text-teal-700 { color: #2dd4bf; } /* ── Teal — content area ── */ html.dark main .bg-teal-50 { background-color: rgba(20,184,166,0.1); } html.dark main .bg-teal-100 { background-color: rgba(20,184,166,0.18); } html.dark main .text-teal-700 { color: #2dd4bf; } html.dark main .text-teal-600 { color: #2dd4bf; } html.dark main .border-teal-100 { border-color: rgba(20,184,166,0.2); } html.dark main .border-teal-200 { border-color: rgba(20,184,166,0.3); } /* ── Amber ── */ html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.1); } html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.18); } html.dark .bg-amber-200 { background-color: rgba(245,158,11,0.25); } html.dark .text-amber-800 { color: #f59e0b; } html.dark .text-amber-700 { color: #fbbf24; } html.dark .text-amber-600 { color: #fcd34d; } html.dark .text-amber-500 { color: #fde68a; } html.dark .border-amber-100 { border-color: rgba(245,158,11,0.2); } html.dark .border-amber-200 { border-color: rgba(245,158,11,0.3); } html.dark .divide-amber-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(245,158,11,0.2); } /* ── Red ── */ html.dark .bg-red-50 { background-color: rgba(239,68,68,0.1); } html.dark .bg-red-100 { background-color: rgba(239,68,68,0.18); } html.dark .text-red-700 { color: #fca5a5; } html.dark .text-red-600 { color: #f87171; } html.dark .text-red-500 { color: #f87171; } html.dark .text-red-400 { color: #fca5a5; } html.dark .border-red-100 { border-color: rgba(239,68,68,0.2); } html.dark .border-red-200 { border-color: rgba(239,68,68,0.3); } /* ── Green ── */ html.dark .bg-green-50 { background-color: rgba(34,197,94,0.1); } html.dark .bg-green-100 { background-color: rgba(34,197,94,0.18); } html.dark .text-green-700 { color: #4ade80; } html.dark .text-green-600 { color: #4ade80; } html.dark .border-green-100 { border-color: rgba(34,197,94,0.2); } html.dark .border-green-200 { border-color: rgba(34,197,94,0.3); } /* ── Blue ── */ html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.1); } html.dark .bg-blue-100 { background-color: rgba(59,130,246,0.18); } html.dark .text-blue-700 { color: #93c5fd; } html.dark .text-blue-600 { color: #60a5fa; } html.dark .border-blue-100 { border-color: rgba(59,130,246,0.2); } html.dark .border-blue-200 { border-color: rgba(59,130,246,0.3); } /* ── Purple ── */ html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.1); } html.dark .bg-purple-100 { background-color: rgba(168,85,247,0.18); } html.dark .text-purple-700 { color: #c084fc; } html.dark .text-purple-600 { color: #c084fc; } html.dark .border-purple-100 { border-color: rgba(168,85,247,0.2); } html.dark .border-purple-200 { border-color: rgba(168,85,247,0.3); } /* ── Indigo ── */ html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.1); } html.dark .text-indigo-700 { color: #818cf8; } html.dark .text-indigo-600 { color: #818cf8; } html.dark .border-indigo-200 { border-color: rgba(99,102,241,0.3); } /* ── Scrollbar ── */ html.dark ::-webkit-scrollbar-track { background: #0f172a; } html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } /* ── Calendar drag-and-drop (SortableJS) ── */ .cal-bar-drag { cursor: grab; box-shadow: 0 0 0 1.5px rgba(34,197,94,0.5); } .cal-bar-drag:hover { filter: brightness(0.88); box-shadow: 0 0 0 2px rgba(34,197,94,0.75), 0 2px 6px rgba(0,0,0,0.15); } .cal-bar-drag:active { cursor: grabbing; } .cal-ghost { opacity: 0 !important; } .cal-chosen { filter: brightness(0.9); box-shadow: 0 0 0 2px rgba(99,102,241,0.5), 0 4px 8px rgba(0,0,0,0.2); } .cal-drag-handle { background: rgba(0,0,0,0.06); } html.dark .cal-drag-handle { background: rgba(255,255,255,0.1); } .cal-drop-zone.cal-drop-highlight { background: rgba(16,185,129,0.08) !important; box-shadow: inset 0 0 0 1.5px rgba(16,185,129,0.45); } html.dark .cal-drop-zone.cal-drop-highlight { background: rgba(16,185,129,0.12) !important; box-shadow: inset 0 0 0 1.5px rgba(16,185,129,0.5); }