/* ========================================================================================== spike-app.css — project components Spike has no equivalent for (spec "Kept as-is, re-skinned only"). Every color is a Spike token; every direction-sensitive property is logical (RTL groundwork). Loaded after styles.css. Nothing here restyles a stock Spike component. Comment prose never contains a star followed by a slash (CLAUDE.md: it truncates the sheet). ========================================================================================== */ /* ---- Client feedback: every card-header (dashboard widgets, every DataTable list page's card, Employee/Leave/Sick Leave tab section cards, Roles/Profile, ...) carries styles.css's own faint `--bs-card-cap-bg` tint + a border-bottom — the reference dashboard (package/starerkit .../index2.html) never uses `.card-header` at all; every one of its widgets is a plain `

` sitting directly in `.card-body`, no separate capped region. Rather than rewrite the ~50 views that already structure a title inside `.card-header` (a real but far riskier change for a same-day pass), this neutralizes the ONE thing that made it read as a distinct "header" — its background and border — and removes its own bottom padding so it flows straight into the body below instead of stacking two paddings into an oversized gap. Every existing card-header's title/actions markup is untouched; only its chrome changes. ---- */ .card-header { background-color: transparent; border-bottom: 0; padding-block-end: 0; } /* ---- Known sharp edge: styles.css's LIGHT-mode --bs-*-text-emphasis tokens are literal, uncompiled Sass (e.g. `shade-color(#fb977d, 60%)` as a text string, not a color) — confirmed via getComputedStyle, every one of primary/secondary/success/info/warning/danger. The dark-mode block compiles these correctly (real hex); only light doesn't. `color: var(--bs-danger-text-emphasis)` is therefore invalid at computed-value time in light mode and silently falls back to the INHERITED color instead — confirmed live on a Select2 role chip: expected a shaded danger red, got plain inherited gray, no console error, nothing to suggest the variable was ever consulted. Recomputed with Bootstrap's own shade-color(60%) formula (mix 60% black into the real base hex from this file's :root block) so every current and future use of these six tokens is correct without needing its own per-call workaround. ---- */ :root, [data-bs-theme='light'] { --bs-primary-text-emphasis: #003558; --bs-secondary-text-emphasis: #1c515e; --bs-success-text-emphasis: #1e5338; --bs-info-text-emphasis: #093248; --bs-warning-text-emphasis: #634d2f; --bs-danger-text-emphasis: #643c32; } /* ---- Client feedback (two rounds): --bs-secondary-color/--bs-tertiary-color (.text-muted, .form-text, breadcrumb dividers/inactive items, stat-card captions, dropdown header text, disabled controls — anywhere "muted" text appears) rendered too faint to read comfortably. styles.css defines both as the body-text color at reduced alpha (secondary .75, tertiary .5), which reads washed out regardless of what's behind it. Round 1 made both fully opaque (same shade as body text); round 2 asked to go further — as dark/light as --bs-heading-color itself, not just matching body text — so these are now solid shades a couple of steps off heading-color rather than the original body-color hue, secondary closer to it than tertiary. ---- */ :root, [data-bs-theme='light'] { /* --bs-heading-color: #111c2d */ --bs-body-color: #233042; --bs-secondary-color: #233042; --bs-tertiary-color: #3c4858; } [data-bs-theme='dark'] { /* --bs-heading-color: #EAEFF4 */ --bs-body-color: #d6dee6; --bs-secondary-color: #d6dee6; --bs-tertiary-color: #bec8d4; } /* ---- Footer pinned to the viewport bottom on a short page, in normal flow after content on a long one. .body-wrapper already carries min-height:100vh (styles.css) but no flex — footer.php just sat wherever content ended, floating mid-page on any screen shorter than the viewport. ---- */ .body-wrapper { display: flex; flex-direction: column; } .body-wrapper > .container-fluid { flex: 1 0 auto; } /* ---- Every badge/pill gets a border in its own text color (global, client request) — none had one; a bg-{color}-subtle + text-{color}-emphasis badge (this app's own convention) always has a real color in `color`, so `currentColor` never needs a per-variant rule. ---- */ .badge { border: 1px solid currentColor; } /* ---- Sidebar pending-count badge (partials/sidebar.php's `bg-danger` pill) silently loses its own number on hover/active — confirmed live. It carries `.hide-menu` purely so the mini-sidebar collapse can hide it like every other label span, but styles.css's own per-item accent mechanism (`sidebar.php`'s rotating `$tint` -> `-hover-bg`) ALSO recolors every `.hide-menu` under a hovered/active row to that tint via `.danger-hover-bg:hover .hide-menu{color:var(--bs-danger)}` (one such rule per tint). Whenever a row's own rotating tint happens to be "danger" — the same hue as this badge's own solid background — the override paints the counter's text the EXACT color of its own background, not merely low-contrast: the number disappears outright. Pinned to a fixed, state-independent color/border here (not `currentColor`, precisely because currentColor is what the vendor rule was hijacking) so the badge reads the same regardless of hover, active, or which tint its own row landed on. #sidebarnav's id beats the vendor rule's `.tint-hover-bg:hover`/ `.active` selectors on specificity, not source order, so this can't be re-shadowed by an unrelated future stylesheet edit. ---- */ #sidebarnav .sidebar-link .badge.hide-menu { color: #fff !important; border-color: transparent; } /* ---- Toast container: styles.css bundles a second, unrelated toast-plugin's CSS under the exact same .toast-container class name, whose `width:100% !important` beats Bootstrap's own `.toast-container{width:max-content}` — the container silently spanned the full viewport width, so a toast (a plain block-level child, no inner alignment of its own) rendered flush against the LEFT edge instead of hugging bottom-right per its own bottom-0/end-0 utility classes (confirmed live). #id beats that vendor rule's plain class even against its !important. ---- */ #toast-container { width: max-content !important; } /* ---- Topbar (partials/navbar.php) must never split into two stacked rows/boxes on a narrow phone. styles.css's base `.navbar{display:flex;flex-wrap:wrap}` only gets `flex-wrap:nowrap` back from `.navbar-expand-lg` at >=992px (`@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap}}`) — below that, the two direct `