/* ================================================================= Zako Co.Work — project styles. Loaded LAST so it overrides Tabler / Bootstrap defaults. Conventions: - Brand colors override Tabler's CSS variables (--tblr-*). Change the values below to rebrand — no recompilation needed. - Dark mode via Bootstrap 5.3's [data-bs-theme="dark"] on . tabler-theme.min.js (in ) restores the persisted choice before first paint; the toggle lives in script.js and writes localStorage "tabler-theme". - Named utility classes replace inline style="" attributes. No `style=""` in views. ================================================================= */ /* ================================================================= Brand — Zako palette. Primary #0eb9fe Secondary #0da6e4 Dark #282828 White #ffffff ================================================================= */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --tblr-primary: #0eb9fe; --tblr-primary-rgb: 14, 185, 254; --tblr-primary-fg: #ffffff; --tblr-link-color: #0da6e4; --tblr-link-color-rgb: 13, 166, 228; --tblr-link-hover-color: #0eb9fe; --tblr-link-hover-color-rgb: 14, 185, 254; /* Legacy project tokens still referenced by utilities below. */ --brand: #0eb9fe; --accent: #0da6e4; --zako-dark: #282828; --avatar-md: 40px; --avatar-lg: 100px; --input-width-sm: 200px; --input-width-md: 280px; } /* ================================================================= Theme base — "neutral" (set via data-bs-theme-base on ), with the dark end of the gray ramp re-anchored to the Zako dark #19191c. Tabler's dark mode derives everything from this ramp: body = gray-900, cards/surfaces = gray-800, darkest = gray-950. Loaded after tabler-themes.min.css so these win. ================================================================= */ [data-bs-theme-base="neutral"] { --tblr-gray-800: #232326; --tblr-gray-900: #19191c; --tblr-gray-950: #101013; } .btn-primary { --tblr-btn-bg: #0eb9fe; --tblr-btn-border-color: #0eb9fe; --tblr-btn-hover-bg: #0da6e4; --tblr-btn-hover-border-color: #0da6e4; --tblr-btn-active-bg: #0da6e4; --tblr-btn-active-border-color: #0da6e4; --tblr-btn-color: #ffffff; --tblr-btn-hover-color: #ffffff; --tblr-btn-active-color: #ffffff; } .btn-outline-primary { --tblr-btn-color: #0da6e4; --tblr-btn-border-color: #0eb9fe; --tblr-btn-hover-bg: #0eb9fe; --tblr-btn-hover-border-color: #0eb9fe; --tblr-btn-hover-color: #ffffff; --tblr-btn-active-bg: #0da6e4; --tblr-btn-active-color: #ffffff; } /* ================================================================= Sidebar group titles — Tabler has no canonical nav group label; this mirrors its muted uppercase list headers. ================================================================= */ .navbar-vertical .nav-group-title { padding: 0.75rem 1rem 0.25rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tblr-secondary, #6c7a91); } /* Bigger sidebar logo on desktop only — the mobile collapsed header row keeps Tabler's default size so the hamburger line stays compact. */ @media (min-width: 992px) { .navbar-brand-image { height: 3.5rem; width: auto; margin-top: 1.5rem; } } /* ================================================================= Named utility classes — sweep targets for inline `style=""`. ================================================================= */ /* Filter search inputs in list-toolbars. */ .w-input-sm { width: var(--input-width-sm); } .w-input-md { width: var(--input-width-md); } /* Compact filter dropdowns: shrink-to-content selects. */ .form-select-auto { width: auto; } /* Avatar sizing. Use these instead of inline width/height. */ .avatar-square-md { width: var(--avatar-md); height: var(--avatar-md); object-fit: cover; } .avatar-circle-lg { width: var(--avatar-lg); height: var(--avatar-lg); object-fit: cover; } /* Account profile header — colored band above the body, with the avatar overlapping. Replaces a stack of inline `style="..."`. */ .account-cover { height: 100px; border-radius: var(--tblr-border-radius, 0.5rem) var(--tblr-border-radius, 0.5rem) 0 0; } .account-body-offset { margin-top: -60px; } /* Empty-state illustrations (Tabler .empty blocks + auth pages). */ .empty-img img { max-height: 12rem; } /* Language-switcher flags. Tabler's reboot sets `img { height: auto }`, which overrides height="" attributes — size them here instead. */ .lang-flag { height: 1.25rem; width: auto; } .lang-flag-sm { height: 1rem; width: auto; } /* Logo on the auth pages (same reboot-override reason as .lang-flag). */ .auth-logo { height: 2.5rem; width: auto; } /* ================================================================= flatpickr — brand the picker and make it follow the Tabler theme (its stock stylesheet is light-only). ================================================================= */ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--tblr-primary, #0eb9fe); border-color: var(--tblr-primary, #0eb9fe); } [data-bs-theme="dark"] .flatpickr-calendar { background: var(--tblr-bg-surface, #182433); box-shadow: 0 3px 13px rgba(0, 0, 0, 0.45); } [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after, [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--tblr-bg-surface, #182433); } [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after, [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before { border-top-color: var(--tblr-bg-surface, #182433); } [data-bs-theme="dark"] .flatpickr-months .flatpickr-month, [data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month, [data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month, [data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, [data-bs-theme="dark"] .flatpickr-current-month input.cur-year, [data-bs-theme="dark"] span.flatpickr-weekday, [data-bs-theme="dark"] .flatpickr-day, [data-bs-theme="dark"] .flatpickr-time input, [data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator, [data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: var(--tblr-body-color, #dce1e7); fill: var(--tblr-body-color, #dce1e7); } [data-bs-theme="dark"] .flatpickr-day.prevMonthDay, [data-bs-theme="dark"] .flatpickr-day.nextMonthDay, [data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--tblr-secondary, #6c7a91); } [data-bs-theme="dark"] .flatpickr-day:hover, [data-bs-theme="dark"] .flatpickr-day.today:hover { background: var(--tblr-active-bg, #1f2e41); border-color: transparent; } [data-bs-theme="dark"] .flatpickr-day.selected, [data-bs-theme="dark"] .flatpickr-day.startRange, [data-bs-theme="dark"] .flatpickr-day.endRange { background: var(--tblr-primary, #0eb9fe); border-color: var(--tblr-primary, #0eb9fe); color: #ffffff; } [data-bs-theme="dark"] .flatpickr-time, [data-bs-theme="dark"] .flatpickr-innerContainer { border-color: var(--tblr-border-color, #243049); } /* ================================================================= FullCalendar — small tweaks so FC blends with Tabler cards. ================================================================= */ .fc-daygrid-day-frame { padding: 0.25rem; } .fc-daygrid-day-number, .fc-col-header-cell-cushion, .fc-theme-standard a { color: var(--tblr-body-color, var(--bs-body-color)); } .fc-daygrid-event { border: none; margin-bottom: 0.15rem; } .fc-list-day-text { font-weight: 600; margin-right: 0.5rem; } /* ================================================================= Confirm popover (vanilla replacement for the old jQuery popover). ================================================================= */ .zo-confirm-popover .popover-body { min-width: 220px; } .zo-confirm-popover .zo-confirm-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } /* ================================================================= Global toast. Shown by ZO.toast(text, color) from script.js. ================================================================= */ #zo-toast { position: fixed; bottom: 1rem; right: 1rem; z-index: 1100; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--tblr-primary, var(--brand)); color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } #zo-toast.show { opacity: 1; transform: translateY(0); } /* Document toolbar (browser chrome above a printable document). */ .document-toolbar { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); } @media print { .document-toolbar { display: none !important; } } /* Navbar global search (desktop top bar). */ .navbar-search { width: 20rem; max-width: 40vw; } /* Help page (/help): numbered step lists inside the case cards + anchor jump targets that clear the page header when scrolled to. */ .help-steps { padding-left: 1.25rem; } .help-steps li { margin-bottom: 0.4rem; } .help-steps li::marker { color: var(--tblr-secondary); font-weight: 700; } .help-target { scroll-margin-top: 1rem; }