/* Atlas (powered by FYG) — palette & typography overrides. Locked brand: navy #1a2332, gold #c8a55b, grey #f5f5f5. */ :root { --fyg-navy: #1a2332; --fyg-gold: #c8a55b; --fyg-grey: #f5f5f5; --fyg-dark-grey: #4a4a4a; --fyg-line: #dddddd; } /* Single typeface for the whole ERP UI: Montserrat — a free, Google-Fonts geometric sans that's the closest legitimate match to the Tesla/Gotham look Andrew asked for (Tesla's actual Gotham is proprietary and can't be bundled). Use ONLY this font for any future UI edit/addition. (PDFs are separate — ReportLab Helvetica, locked, server-side.) */ :root { --fyg-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; } body { font-family: var(--fyg-font); background: var(--fyg-grey); color: var(--fyg-navy); } /* `html .x` (specificity 0,1,1) beats Tailwind's single-class utilities (0,1,0) regardless of stylesheet order — needed because the Tailwind CDN injects `.font-mono`/`.font-sans` AFTER this file, and money/figure columns carry Tailwind's `font-mono` (that's why digits stayed monospace while everything else changed). Neutralise all 3 Tailwind font utilities. */ html .font-display { font-family: var(--fyg-font); font-weight: 700; } /* "Mono" usage is money/figure columns — keep them aligned with tabular numerals instead of a second (monospace) font, per "only this font". */ html .font-mono { font-family: var(--fyg-font); font-variant-numeric: tabular-nums; } html .font-sans, html .font-serif { font-family: var(--fyg-font); } /* Form controls don't inherit font-family by default — make every single letter (inputs, selects, textareas, buttons) use it too. */ input, select, textarea, button { font-family: var(--fyg-font); } .fyg-gold-divider { height: 2px; background: var(--fyg-gold); } /* Hide elements until Alpine has initialised to avoid FOUC. */ [x-cloak] { display: none !important; } /* --------------------------------------------------------------------------- Dark mode. Toggled by adding `.dark` on (see index.html boot script + sidebar toggle). The app reuses a small, consistent class vocabulary, so instead of editing every page we remap those shared surfaces here. Higher specificity (`html.dark .x`) beats the single-class Tailwind utilities regardless of stylesheet order. The gold brand accent is left unchanged; server-side PDFs/documents are unaffected (locked brand). --------------------------------------------------------------------------- */ html.dark body { background: #0f141b; color: #e7e9ec; } /* Page canvas (deepest) vs. inner GREY panels (slightly elevated). */ html.dark #app-main { background: #0f141b; } html.dark .bg-fyg-grey { background: #161c25; } /* Cards / modals / table surfaces. */ html.dark .bg-white { background: #1a212c; } /* Navy: sidebar + primary buttons + login backdrop — lift slightly so it stays distinct from the dark card surface and reads on a darker canvas. */ html.dark .bg-fyg-navy { background: #283a59; } html.dark .hover\:bg-\[\#243049\]:hover { background: #31456a; } /* Text. */ html.dark .text-fyg-navy { color: #e7e9ec; } html.dark .text-fyg-dark-grey { color: #99a3b2; } /* The arbitrary-value #dddddd border is the app-wide "line" colour. Only remap that one — leave semantic borders (red errors, gold accents) alone. */ html.dark .border-\[\#dddddd\] { border-color: #2b3441; } /* Form controls. */ html.dark input, html.dark select, html.dark textarea { background: #111722; color: #e7e9ec; border-color: #2b3441; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7480; } /* Disabled inputs in dark mode — earlier rule only dimmed the text and left the parent's near-black ``#111722`` background, which made read-only fields (e.g. the auto-derived ``quote_number_format`` row) essentially invisible. Lift the background above the card surface and use near-white text so the value is readable. */ html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled { background: #283242; color: #e1e6ee; cursor: not-allowed; } /* Smooth the toggle. */ body { transition: background-color 0.2s ease, color 0.2s ease; } /* flatpickr popup is light-themed by default; tone it for dark so the date calendar isn't a jarring white box over the dark UI. */ html.dark .flatpickr-calendar { background: #1a212c; color: #e7e9ec; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } html.dark .flatpickr-calendar .flatpickr-months, html.dark .flatpickr-calendar .flatpickr-weekdays, html.dark .flatpickr-calendar span.flatpickr-weekday { background: #1a212c; color: #99a3b2; fill: #99a3b2; } html.dark .flatpickr-day { color: #e7e9ec; } html.dark .flatpickr-day:hover { background: #283a59; } html.dark .flatpickr-day.flatpickr-disabled { color: #4a4a4a; } html.dark .flatpickr-months .flatpickr-month, html.dark .flatpickr-current-month input.cur-year { color: #e7e9ec; } /* --------------------------------------------------------------------------- Mobile (< Tailwind md = 768px). Shell (drawer + top bar) is in index.html. This layer makes the injected pages feel like an app without per-page edits: stack grids, tame padding, comfortable touch sizing, and — the big one — turn wide data tables into labelled cards (labels are stamped onto cells by js/responsive-tables.js). Desktop is untouched. --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { #app-main .grid-cols-2, #app-main .grid-cols-3, #app-main .grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); } #app-main .p-8, #app-main .p-6 { padding: 1rem; } #app-main .max-w-4xl, #app-main .max-w-md, #app-main .max-w-sm, #app-main .max-w-lg { max-width: 100%; } /* Modals: the panel's max-h-[92vh] + vertical-centering clips the bottom (submit button) on iOS with nothing scrollable — "stuck". Make the whole overlay scroll instead, panel anchored to top, no vh clamp. Applies to every modal (they all share this .fixed.inset-0 > .relative shape). */ #app-main .fixed.inset-0 { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } #app-main .fixed.inset-0 > .relative { max-height: none; width: 100%; margin: 0.5rem 0; } /* Comfortable, app-like touch sizing. 16px inputs stop iOS zoom-on-focus. */ #app-main input, #app-main select, #app-main textarea { font-size: 16px; min-height: 44px; } #app-main button { min-height: 40px; } /* Data table → stacked cards. Header is visually hidden; each cell shows its column label on the left and the value on the right, one rounded elevated card per row. */ #app-main table, #app-main tbody, #app-main tbody tr, #app-main tbody td { display: block; width: 100%; } #app-main thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #app-main tbody tr { background: #ffffff; border: 1px solid #e3e3e3; border-radius: 0.75rem; margin: 0 0 0.75rem; padding: 0.25rem 0.95rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); } #app-main tbody td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: right; white-space: normal; word-break: break-word; padding: 0.62rem 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } #app-main tbody tr td:last-child { border-bottom: 0; } #app-main tbody td::before { content: attr(data-label); flex: 0 0 38%; text-align: left; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; color: #6b7280; } /* An unlabelled cell (e.g. the actions column) — value goes full width. */ #app-main tbody td[data-label=""] { justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; } #app-main tbody td[data-label=""]::before { display: none; } #app-main tbody td:empty { display: none; } /* Cells that span the whole row — "Loading…", empty-state messages, and statement/total label cells. They are NOT a label/value pair, so the card treatment (flex + injected data-label + 38% reserved column) crushes their text into a sliver, wrapping it one letter per line. Render them as a plain full-width block and drop the injected label; the cell keeps its own Tailwind alignment (text-center for empty states, text-right for totals). */ #app-main tbody td[colspan] { display: block; width: 100%; text-align: center; } #app-main tbody td[colspan].text-right { text-align: right; } #app-main tbody td[colspan].text-left { text-align: left; } #app-main tbody td[colspan]::before { display: none; } /* Cards in dark mode. */ html.dark #app-main tbody tr { background: #1a212c; border-color: #2b3441; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } html.dark #app-main tbody td { border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark #app-main tbody td::before { color: #97a1b0; } } .toast { animation: toast-in 0.18s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }