/* BuyBackTime — custom CSS only for what Tailwind utilities can't cover. Tailwind itself comes from the CDN script in includes/header.php. Light-mode strategy: we use Tailwind's dark utilities everywhere (`bg-slate-900`, `text-slate-100`, etc.) and re-skin them under `html:not(.dark)` so a single class toggle on flips themes. Page-level chrome (body bg, headers, modals) is mapped explicitly below; semantic surfaces (slate-700/800/900, white text, ring tones) are handled by class overrides. */ /* ---- Theme tokens ------------------------------------------------------- */ html.dark, :root { --bbt-bg: #0f172a; /* slate-900 */ --bbt-surface: #1e293b; /* slate-800 */ --bbt-text: #f1f5f9; /* slate-100 */ --bbt-muted: #94a3b8; /* slate-400 */ --bbt-accent: #6366f1; /* indigo-500 */ --bbt-accent-2: #818cf8; /* indigo-400 */ --bbt-success: #22c55e; --bbt-warning: #f59e0b; --bbt-error: #ef4444; --bbt-info: #3b82f6; } html:not(.dark) { --bbt-bg: #f8fafc; /* slate-50 */ --bbt-surface: #ffffff; --bbt-text: #0f172a; --bbt-muted: #64748b; --bbt-accent: #4f46e5; --bbt-accent-2: #6366f1; } /* ========================================================================= LIGHT MODE re-skin Apply when does NOT have the .dark class. We re-target Tailwind's slate scale, white text, and common ring tones. Element-specific tweaks are at the bottom of the rules so they win on specificity ties. ========================================================================= */ html:not(.dark) body { background: #f8fafc; color: #0f172a; } html:not(.dark) .bg-slate-900, html:not(.dark) [class*="bg-slate-900/"] { background-color: #f8fafc !important; } html:not(.dark) .bg-slate-800 { background-color: #ffffff !important; } html:not(.dark) [class*="bg-slate-800/"] { background-color: rgba(241,245,249,0.65) !important; } html:not(.dark) .bg-slate-700 { background-color: #e2e8f0 !important; } html:not(.dark) [class*="bg-slate-700/"] { background-color: rgba(226,232,240,0.55) !important; } /* `.text-white` is used in two roles: (a) plain text on a dark surface (heading on the page bg, label on slate-800/900 cards) → flip to dark in light mode, and (b) text on a saturated colored button/pill (bg-indigo-600, bg-rose-500, bg-amber-500, etc.) → must stay white. :not() lets us hold the second case while flipping the first. */ html:not(.dark) .text-white:not( [class*="bg-indigo"], [class*="bg-violet"], [class*="bg-purple"], [class*="bg-fuchsia"], [class*="bg-pink"], [class*="bg-rose"], [class*="bg-red"], [class*="bg-orange"], [class*="bg-amber"], [class*="bg-yellow"], [class*="bg-lime"], [class*="bg-green"], [class*="bg-emerald"], [class*="bg-teal"], [class*="bg-cyan"], [class*="bg-sky"], [class*="bg-blue"] ) { color: #0f172a !important; } /* Children of saturated buttons/pills (icons, sub-spans) also stay white. */ html:not(.dark) :is( [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-fuchsia-"], [class*="bg-pink-"], [class*="bg-rose-"], [class*="bg-red-"], [class*="bg-orange-"], [class*="bg-amber-"], [class*="bg-yellow-"], [class*="bg-lime-"], [class*="bg-green-"], [class*="bg-emerald-"], [class*="bg-teal-"], [class*="bg-cyan-"], [class*="bg-sky-"], [class*="bg-blue-"] ):not([class*="/15"]):not([class*="/20"]):not([class*="/30"]):not([class*="/40"]) .text-white { color: #fff !important; } html:not(.dark) .text-slate-100 { color: #0f172a !important; } html:not(.dark) .text-slate-200 { color: #1e293b !important; } html:not(.dark) .text-slate-300 { color: #334155 !important; } html:not(.dark) .text-slate-400 { color: #64748b !important; } html:not(.dark) .text-slate-500 { color: #94a3b8 !important; } /* Rings + dividers */ html:not(.dark) [class*="ring-white/5"] { --tw-ring-color: rgb(15 23 42 / 0.06) !important; } html:not(.dark) [class*="ring-white/10"] { --tw-ring-color: rgb(15 23 42 / 0.10) !important; } html:not(.dark) [class*="ring-white/20"] { --tw-ring-color: rgb(15 23 42 / 0.16) !important; } html:not(.dark) [class*="border-white/5"] { border-color: rgb(15 23 42 / 0.08) !important; } html:not(.dark) [class*="border-white/10"] { border-color: rgb(15 23 42 / 0.12) !important; } /* Hover affordances on surfaces */ html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgb(15 23 42 / 0.04) !important; } html:not(.dark) .hover\:bg-white\/10:hover { background-color: rgb(15 23 42 / 0.08) !important; } html:not(.dark) .hover\:bg-slate-700:hover { background-color: #cbd5e1 !important; } html:not(.dark) .hover\:bg-slate-800:hover { background-color: #f1f5f9 !important; } /* Sticky filter bar bg blur */ html:not(.dark) [class*="bg-slate-900/80"] { background-color: rgba(248,250,252,0.85) !important; } /* Modal backdrop softer in light mode */ html:not(.dark) [class*="bg-black/60"] { background-color: rgba(15,23,42,0.45) !important; } /* Form inputs */ html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) select { color-scheme: light; } html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #94a3b8 !important; } /* Date input handles */ html:not(.dark) input[type="datetime-local"], html:not(.dark) input[type="date"] { color-scheme: light !important; } /* Toast types — keep tinted backgrounds but flip text for legibility */ html:not(.dark) .bbt-toast { color: #0f172a; } html:not(.dark) .bbt-toast.bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.12) !important; color: #064e3b; } html:not(.dark) .bbt-toast.bg-rose-500\/15 { background-color: rgb(244 63 94 / 0.12) !important; color: #881337; } html:not(.dark) .bbt-toast.bg-amber-500\/15 { background-color: rgb(245 158 11 / 0.16) !important; color: #78350f; } html:not(.dark) .bbt-toast.bg-sky-500\/15 { background-color: rgb(14 165 233 / 0.12) !important; color: #0c4a6e; } /* Scrollbar in light mode */ html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-color: #f8fafc; } html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.32); } /* Shadow elevation (cards look flat without this in light mode) */ html:not(.dark) .shadow-sm { box-shadow: 0 1px 2px rgb(15 23 42 / 0.06); } html:not(.dark) .shadow-2xl { box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.18); } html, body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ---- Body scroll lock when a modal is open ------------------------------ */ body.bbt-modal-open { overflow: hidden; } /* ---- Toasts (slide in/out) ---------------------------------------------- */ .bbt-toast { transform: translateX(120%); transition: transform 220ms ease, opacity 220ms ease; opacity: 0; } .bbt-toast.bbt-toast-in { transform: translateX(0); opacity: 1; } .bbt-toast.bbt-toast-out { transform: translateX(120%); opacity: 0; } /* ---- Priority swatches (used in helpers.priority_badge_html) ----------- */ .priority-p1 { color: #ef4444; } /* red-500 */ .priority-p2 { color: #f59e0b; } /* amber-500 */ .priority-p3 { color: #94a3b8; } /* slate-400 */ /* ---- Custom round task-complete checkbox ------------------------------- Used on every task row. JS toggles aria-checked + .is-complete. */ .task-checkbox { appearance: none; -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 2px solid #64748b; /* slate-500 */ background: transparent; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; display: inline-grid; place-items: center; flex: none; } .task-checkbox:hover { border-color: var(--bbt-accent-2); } .task-checkbox.is-complete, .task-checkbox[aria-checked="true"] { background: var(--bbt-accent); border-color: var(--bbt-accent); } .task-checkbox.is-complete::after, .task-checkbox[aria-checked="true"]::after { content: ''; width: 0.55rem; height: 0.32rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } /* ---- Scrollbar polish (WebKit only) ------------------------------------ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 9999px; border: 2px solid var(--bbt-bg); } ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); } /* ---- Dashboard: overdue task row gets a left rail in rose-500 ---------- */ .task-row-overdue { border-left: 3px solid #f43f5e; /* rose-500 */ padding-left: calc(0.75rem - 3px); } /* ========================================================================= FullCalendar v6 — dark theme overrides (default app theme) ========================================================================= */ .fc { --fc-border-color: rgb(51 65 85); /* slate-700 */ --fc-page-bg-color: transparent; --fc-neutral-bg-color: rgb(30 41 59); /* slate-800 */ --fc-list-event-hover-bg-color: rgb(30 41 59); --fc-today-bg-color: rgb(30 41 59 / 0.5); --fc-now-indicator-color: rgb(99 102 241); /* indigo-500 */ --fc-event-text-color: #ffffff; color: rgb(226 232 240); /* slate-200 */ } .fc-theme-standard td, .fc-theme-standard th, .fc-scrollgrid, .fc-scrollgrid > * > tr > td { border-color: rgb(51 65 85); } .fc-col-header-cell { background-color: rgb(15 23 42); /* slate-900 */ color: rgb(148 163 184); /* slate-400 */ font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .fc-daygrid-day-number, .fc-list-day-text, .fc-list-day-side-text, .fc-timegrid-axis-cushion, .fc-timegrid-slot-label-cushion { color: rgb(203 213 225); /* slate-300 */ text-decoration: none; } .fc-day-today { background-color: rgb(30 41 59 / 0.5) !important; } .fc-day-today .fc-daygrid-day-number { color: rgb(129 140 248); /* indigo-400 */ font-weight: 600; } .fc-event { border-radius: 0.375rem; padding: 2px 6px; font-size: 0.75rem; cursor: pointer; border-width: 0 0 0 3px !important; /* left accent only */ } .fc-event.event-completed { opacity: 0.55; text-decoration: line-through; } .fc-event.event-overdue { box-shadow: 0 0 0 1px rgb(244 63 94 / 0.6) inset; } .fc-event.event-placeholder { background-color: transparent !important; color: rgb(203 213 225) !important; /* slate-300 */ border-width: 1px !important; border-style: dashed !important; opacity: 0.7; cursor: default; } .fc-event.event-placeholder:hover { filter: none; opacity: 0.9; } .fc-event:hover { filter: brightness(1.15); } .fc-button { background: rgb(30 41 59) !important; border-color: rgb(51 65 85) !important; color: rgb(226 232 240) !important; text-transform: none; } .fc-button:hover { background: rgb(51 65 85) !important; } .fc-button-active { background: rgb(99 102 241) !important; border-color: rgb(99 102 241) !important; color: #fff !important; } /* Light-mode FullCalendar tweaks: invert palette under html:not(.dark). */ html:not(.dark) .fc { --fc-border-color: rgb(226 232 240); /* slate-200 */ --fc-neutral-bg-color: rgb(248 250 252); /* slate-50 */ --fc-list-event-hover-bg-color: rgb(241 245 249); --fc-today-bg-color: rgb(238 242 255 / 0.85); /* indigo-50ish */ color: rgb(15 23 42); /* slate-900 */ } html:not(.dark) .fc-theme-standard td, html:not(.dark) .fc-theme-standard th, html:not(.dark) .fc-scrollgrid, html:not(.dark) .fc-scrollgrid > * > tr > td { border-color: rgb(226 232 240); } html:not(.dark) .fc-col-header-cell { background-color: rgb(248 250 252); color: rgb(71 85 105); } html:not(.dark) .fc-daygrid-day-number, html:not(.dark) .fc-timegrid-axis-cushion, html:not(.dark) .fc-timegrid-slot-label-cushion { color: rgb(51 65 85); } html:not(.dark) .fc-day-today { background-color: rgb(238 242 255) !important; } html:not(.dark) .fc-day-today .fc-daygrid-day-number { color: rgb(67 56 202); /* indigo-700 */ } /* ---- Fade-in on element creation (used by app.js for new toasts/rows) -- */ @keyframes bbt-fade-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } .bbt-fade-in { animation: bbt-fade-in 180ms ease-out both; }