/* ==========================================================================
Theme variables — deep purple/indigo primary, gold/amber secondary.
Toggled via [data-theme="dark"] on , set/persisted by layout.js.
Scope: topbar, page background, the account-nav dropdown, and the
Dashboard's own cards (via the generic --surface-* aliases below).
========================================================================== */
:root {
--color-primary: #6d28d9;
--color-primary-hover: #5b21b6;
--color-secondary: #d69e2e;
--color-success: #16a34a;
--color-danger: #dc2626;
--color-warning: #f59e0b;
--page-bg: #f4f3f8;
--sidebar-bg: #ffffff;
--sidebar-border: #e6e3ef;
--sidebar-text: #4b4560;
--sidebar-text-muted: #8b8598;
--sidebar-icon: #6f6885;
--sidebar-hover-bg: #f1eefb;
--sidebar-active-bg: #ede8fc;
--sidebar-active-text: #4c1d95;
--sidebar-brand-text: #2e2a3d;
--topbar-bg: #ffffff;
--topbar-border: #e6e3ef;
--topbar-text: #4b4560;
--overlay-backdrop: rgba(15, 13, 20, 0.5);
--sidebar-transition: 220ms ease;
/* Generic surface aliases — reused by any card/panel (Dashboard's
stat/content cards, tables, forms). */
--surface-bg: var(--sidebar-bg);
--surface-border: var(--sidebar-border);
--surface-text: var(--sidebar-text);
--surface-text-muted: var(--sidebar-text-muted);
/* Tinted focus rings / shadows — these need their own theme-aware
values because an rgba() literal can't reference --color-primary's
hex directly, so it would otherwise stay stuck on the light-mode
tint even when --color-primary itself flips to its dark value. */
--focus-ring-primary: rgba(109, 40, 217, 0.15);
--focus-ring-danger: rgba(220, 38, 38, 0.15);
--scroll-shadow-color: rgba(15, 13, 20, 0.2);
/* Re-point Bootstrap's own theme variables so every plain Bootstrap
component (.card, .alert, .text-muted, headings, links, badges) that
was never given a custom class also follows light/dark mode. */
--bs-body-color: var(--surface-text);
--bs-body-bg: var(--page-bg);
--bs-border-color: var(--surface-border);
--bs-secondary-color: var(--surface-text-muted);
--bs-emphasis-color: var(--surface-text);
--bs-heading-color: var(--surface-text);
--bs-tertiary-bg: var(--sidebar-hover-bg);
--bs-card-bg: var(--surface-bg);
--bs-card-border-color: var(--surface-border);
--bs-card-cap-bg: var(--sidebar-hover-bg);
--bs-link-color: var(--color-primary);
--bs-link-hover-color: var(--color-primary-hover);
--bs-link-color-rgb: 109, 40, 217;
}
[data-theme="dark"] {
--color-primary: #8b5cf6;
--color-primary-hover: #a78bfa;
--color-secondary: #f0b429;
--color-success: #22c55e;
--color-danger: #ef4444;
--color-warning: #fbbf24;
--page-bg: #110f1a;
--sidebar-bg: #17151f;
--sidebar-border: #2b2838;
--sidebar-text: #cbc6db;
--sidebar-text-muted: #8b84a3;
--sidebar-icon: #a89fc4;
--sidebar-hover-bg: #241f33;
--sidebar-active-bg: #2f2547;
--sidebar-active-text: #d8b4fe;
--sidebar-brand-text: #f4f2fa;
--topbar-bg: #1c1926;
--topbar-border: #2b2838;
--topbar-text: #cbc6db;
--overlay-backdrop: rgba(0, 0, 0, 0.65);
/* --bs-link-color-rgb is a literal triplet, not a var() chain, so it
needs its own dark-mode value (matches dark --color-primary above). */
--bs-link-color-rgb: 139, 92, 246;
/* Dark-mode tints for the focus rings / scroll shadow above — matches
dark --color-primary (#8b5cf6) / --color-danger (#ef4444), with a
touch more opacity since a soft glow needs more strength to read
clearly against a dark surface than a light one. */
--focus-ring-primary: rgba(139, 92, 246, 0.25);
--focus-ring-danger: rgba(239, 68, 68, 0.25);
--scroll-shadow-color: rgba(0, 0, 0, 0.45);
}
body {
background-color: var(--page-bg);
transition: background-color var(--sidebar-transition);
}
/* ==========================================================================
Topbar
========================================================================== */
.app-topbar {
background-color: var(--topbar-bg);
border-bottom: 1px solid var(--topbar-border);
color: var(--topbar-text);
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
min-height: 56px;
position: sticky;
top: 0;
z-index: 1020;
}
.topbar-btn {
border: none;
background: transparent;
color: var(--topbar-text);
width: 34px;
height: 34px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: background-color 150ms ease;
}
.topbar-btn:hover {
background-color: var(--sidebar-hover-bg);
}
/* --- Topbar layout: left (brand/breadcrumb) | center (search) | actions --- */
.topbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
flex: 0 1 auto;
}
.topbar-center {
display: flex;
flex: 1 1 auto;
min-width: 0;
}
.topbar-actions {
display: flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
flex: 0 0 auto;
}
/* Brand — always visible now that there's no sidebar to carry it */
.topbar-brand {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--sidebar-brand-text);
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
white-space: nowrap;
flex-shrink: 0;
}
.topbar-brand img {
height: 22px;
}
.topbar-brand i {
font-size: 1.3rem;
color: var(--brand-accent-color, var(--color-primary));
}
/* Breadcrumb */
.topbar-breadcrumb {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
overflow: hidden;
}
.topbar-breadcrumb-link {
display: inline-flex;
align-items: center;
color: var(--topbar-text);
opacity: 0.75;
text-decoration: none;
font-size: 1.05rem;
flex-shrink: 0;
transition: color 150ms ease, opacity 150ms ease;
}
.topbar-breadcrumb-link:hover {
color: var(--color-primary);
opacity: 1;
}
.topbar-breadcrumb-sep {
font-size: 0.9rem !important;
color: var(--sidebar-text-muted);
flex-shrink: 0;
}
.topbar-breadcrumb-current {
font-size: 0.9rem;
font-weight: 600;
color: var(--topbar-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Search */
.topbar-search {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
max-width: 380px;
padding: 0.4rem 0.75rem;
border-radius: 8px;
background-color: var(--page-bg);
border: 1px solid var(--topbar-border);
color: var(--sidebar-text-muted);
transition: border-color 150ms ease;
}
.topbar-search:focus-within {
border-color: var(--color-primary);
}
.topbar-search i {
font-size: 1.05rem;
flex-shrink: 0;
}
.topbar-search-input {
border: none;
background: transparent;
outline: none;
color: var(--topbar-text);
font-size: 0.9rem;
width: 100%;
}
.topbar-search-input::placeholder {
color: var(--sidebar-text-muted);
}
.topbar-search-input:disabled {
cursor: not-allowed;
}
/* Global search results panel */
.global-search-panel {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
max-height: 420px;
overflow-y: auto;
background-color: var(--sidebar-bg);
border: 1px solid var(--sidebar-border);
border-radius: 10px;
box-shadow: 0 12px 28px rgba(15, 13, 20, 0.16);
padding: 0.4rem;
z-index: 1030;
}
.global-search-panel.show {
display: block;
}
.global-search-group-label {
padding: 0.5rem 0.6rem 0.3rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sidebar-text-muted);
}
.global-search-result {
display: flex;
flex-direction: column;
gap: 0.05rem;
padding: 0.5rem 0.6rem;
border-radius: 6px;
text-decoration: none;
color: var(--sidebar-text);
}
.global-search-result:hover,
.global-search-result.is-highlighted {
background-color: var(--sidebar-hover-bg);
color: var(--sidebar-text);
}
.global-search-result-title {
font-size: 0.88rem;
font-weight: 600;
}
.global-search-result-subtitle {
font-size: 0.78rem;
color: var(--sidebar-text-muted);
}
.global-search-status {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0.6rem;
font-size: 0.85rem;
color: var(--sidebar-text-muted);
}
.global-search-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--sidebar-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: globalSearchSpin 600ms linear infinite;
}
@keyframes globalSearchSpin {
to {
transform: rotate(360deg);
}
}
/* Notification bell badge */
.topbar-notification-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
background-color: var(--color-danger);
}
#notificationBtn {
position: relative;
}
/* User menu */
.topbar-user-btn {
display: flex;
align-items: center;
gap: 0.55rem;
border: none;
background: transparent;
padding: 0.3rem 0.5rem;
border-radius: 8px;
color: var(--topbar-text);
transition: background-color 150ms ease;
}
.topbar-user-btn:hover {
background-color: var(--sidebar-hover-bg);
}
.topbar-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--color-primary);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
.topbar-user-info {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
text-align: left;
}
.topbar-user-name-text {
font-size: 0.85rem;
font-weight: 600;
color: var(--topbar-text);
}
.topbar-user-role-text {
font-size: 0.72rem;
color: var(--sidebar-text-muted);
text-transform: capitalize;
}
.topbar-user-caret {
font-size: 0.9rem !important;
color: var(--sidebar-text-muted) !important;
}
/* Themed dropdown menus (Bootstrap dropdowns used by the topbar) */
.topbar-dropdown-menu {
background-color: var(--sidebar-bg);
border: 1px solid var(--sidebar-border);
box-shadow: 0 8px 24px rgba(15, 13, 20, 0.12);
min-width: 220px;
padding: 0.4rem;
}
.topbar-dropdown-header {
padding: 0.5rem 0.75rem 0.35rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sidebar-text-muted);
}
.topbar-dropdown-empty {
padding: 0.5rem 0.75rem 0.75rem;
font-size: 0.85rem;
color: var(--sidebar-text-muted);
}
.topbar-dropdown-item {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
border: none;
background: transparent;
color: var(--sidebar-text);
font-size: 0.88rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
text-align: left;
}
.topbar-dropdown-item:hover,
.topbar-dropdown-item:focus {
background-color: var(--sidebar-hover-bg);
color: var(--sidebar-text);
}
.topbar-dropdown-item i {
font-size: 1.05rem;
color: var(--sidebar-icon);
width: 1.2rem;
text-align: center;
flex-shrink: 0;
}
.topbar-dropdown-item-danger {
color: var(--color-danger);
}
.topbar-dropdown-item-danger i {
color: var(--color-danger);
}
.topbar-dropdown-item-danger:hover {
background-color: var(--sidebar-hover-bg);
color: var(--color-danger);
}
.dropdown-divider {
border-top-color: var(--sidebar-border);
margin: 0.3rem 0;
}
/* ==========================================================================
App header group — topbar + horizontal nav bar, sticky together as one
unit so both stay pinned while the page scrolls underneath.
========================================================================== */
.app-header-group {
position: sticky;
top: 0;
z-index: 1020;
}
.app-topbar {
position: static;
}
/* ==========================================================================
Horizontal nav bar — every top-level section, one click away. Vouchers /
Reports / Administration open a dropdown panel on hover or click.
========================================================================== */
.app-navbar {
background-color: var(--topbar-bg);
border-bottom: 1px solid var(--topbar-border);
display: flex;
align-items: stretch;
padding: 0 1rem;
min-height: 44px;
}
.app-navbar-list {
display: flex;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
gap: 0.15rem;
flex-wrap: wrap;
}
.app-navbar-link,
.app-navbar-dropdown-toggle {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.8rem;
color: var(--topbar-text);
text-decoration: none;
background: transparent;
border: none;
font-size: 0.86rem;
font-weight: 500;
white-space: nowrap;
border-radius: 6px;
position: relative;
transition: background-color 150ms ease, color 150ms ease;
}
.app-navbar-link:hover,
.app-navbar-dropdown-toggle:hover {
background-color: var(--sidebar-hover-bg);
color: var(--topbar-text);
}
.app-navbar-link.active,
.app-navbar-dropdown-toggle.active {
color: var(--color-primary);
font-weight: 600;
}
.app-navbar-link.active::after,
.app-navbar-dropdown-toggle.active::after {
content: "";
position: absolute;
left: 0.7rem;
right: 0.7rem;
bottom: 0;
height: 2px;
border-radius: 2px;
background-color: var(--color-primary);
}
.app-navbar-link i,
.app-navbar-dropdown-toggle i.app-navbar-icon {
font-size: 1.05rem;
flex-shrink: 0;
}
.app-navbar-chevron {
font-size: 0.85rem !important;
color: var(--sidebar-text-muted);
transition: transform 150ms ease;
}
.app-navbar-dropdown.open > .app-navbar-dropdown-toggle .app-navbar-chevron,
.app-navbar-dropdown:hover > .app-navbar-dropdown-toggle .app-navbar-chevron {
transform: rotate(180deg);
}
.app-navbar-dropdown {
position: relative;
display: flex;
align-items: stretch;
}
.app-navbar-dropdown-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: var(--sidebar-bg);
border: 1px solid var(--sidebar-border);
border-radius: 10px;
box-shadow: 0 12px 28px rgba(15, 13, 20, 0.16);
padding: 0.4rem;
z-index: 1025;
margin-top: 2px;
}
.app-navbar-dropdown.open > .app-navbar-dropdown-panel,
.app-navbar-dropdown:hover > .app-navbar-dropdown-panel {
display: block;
}
.app-navbar-sublink {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.7rem;
border-radius: 6px;
color: var(--sidebar-text);
text-decoration: none;
font-size: 0.87rem;
white-space: nowrap;
transition: background-color 150ms ease, color 150ms ease;
}
.app-navbar-sublink:hover {
background-color: var(--sidebar-hover-bg);
}
.app-navbar-sublink.active {
background-color: var(--sidebar-active-bg);
color: var(--sidebar-active-text);
font-weight: 600;
}
.app-navbar-sublink i {
font-size: 1.05rem;
color: var(--sidebar-icon);
width: 1.2rem;
text-align: center;
flex-shrink: 0;
}
.app-navbar-sublink.active i {
color: var(--sidebar-active-text);
}
/* Mobile hamburger toggle lives in the topbar; hidden on desktop */
.app-navbar-mobile-toggle {
display: none;
}
.app-navbar-backdrop {
display: none;
position: fixed;
inset: 0;
background-color: var(--overlay-backdrop);
z-index: 1030;
}
@media (max-width: 991.98px) {
.app-navbar-mobile-toggle {
display: inline-flex;
}
.app-navbar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 280px;
max-width: 84vw;
flex-direction: column;
align-items: stretch;
padding: 1rem 0.75rem;
overflow-y: auto;
transform: translateX(-100%);
transition: transform var(--sidebar-transition);
z-index: 1035;
border-right: 1px solid var(--topbar-border);
border-bottom: none;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
}
body[data-navbar-mobile="open"] .app-navbar {
transform: translateX(0);
}
body[data-navbar-mobile="open"] .app-navbar-backdrop {
display: block;
}
.app-navbar-list {
flex-direction: column;
align-items: stretch;
width: 100%;
flex-wrap: nowrap;
}
.app-navbar-dropdown {
flex-direction: column;
align-items: stretch;
}
.app-navbar-link.active::after,
.app-navbar-dropdown-toggle.active::after {
display: none;
}
.app-navbar-link.active,
.app-navbar-dropdown-toggle.active {
background-color: var(--sidebar-active-bg);
}
.app-navbar-dropdown-panel,
.app-navbar-dropdown:hover > .app-navbar-dropdown-panel {
display: block;
position: static;
box-shadow: none;
border: none;
background: transparent;
padding: 0 0 0 1.1rem;
margin-top: 0;
max-height: 0;
overflow: hidden;
transition: max-height var(--sidebar-transition);
}
.app-navbar-dropdown.open > .app-navbar-dropdown-panel {
max-height: 480px;
}
}
.app-main {
flex: 1 1 auto;
}
/* ==========================================================================
Responsive: topbar breadcrumb + search condense on small screens
========================================================================== */
@media (max-width: 767.98px) {
.topbar-breadcrumb,
.topbar-center {
display: none;
}
.topbar-user-info {
display: none;
}
}
/* ==========================================================================
Dashboard: stat cards + content cards
========================================================================== */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
}
.stat-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 1.5rem;
}
.stat-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background-color: var(--surface-bg);
border: 1px solid var(--surface-border);
border-radius: 12px;
padding: 1.25rem;
transition: border-color 150ms ease, transform 150ms ease;
}
.stat-card:hover {
border-color: var(--color-primary);
transform: translateY(-1px);
}
.stat-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
font-size: 1.5rem;
flex-shrink: 0;
background-color: rgba(109, 40, 217, 0.12);
color: var(--color-primary);
}
.stat-card-icon-gold {
background-color: rgba(214, 158, 46, 0.16);
color: var(--color-secondary);
}
.stat-card-icon-silver {
background-color: rgba(139, 133, 152, 0.16);
color: var(--sidebar-text-muted);
}
.stat-card-icon-success {
background-color: rgba(22, 163, 74, 0.14);
color: var(--color-success);
}
.stat-card-icon-danger {
background-color: rgba(220, 38, 38, 0.14);
color: var(--color-danger);
}
.stat-card-body {
min-width: 0;
}
.stat-card-label {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--surface-text-muted);
margin-bottom: 0.3rem;
}
.stat-card-value {
font-size: 1.55rem;
font-weight: 700;
color: var(--surface-text);
line-height: 1.2;
}
.stat-card-value-danger {
color: var(--color-danger);
}
.stat-card-unit {
font-size: 1rem;
font-weight: 500;
color: var(--surface-text-muted);
}
.stat-card-meta {
font-size: 0.78rem;
color: var(--surface-text-muted);
margin-top: 0.25rem;
}
.content-card {
background-color: var(--surface-bg);
border: 1px solid var(--surface-border);
border-radius: 12px;
overflow: hidden;
}
.content-card-header {
padding: 0.85rem 1.1rem;
border-bottom: 1px solid var(--surface-border);
font-weight: 600;
font-size: 0.92rem;
color: var(--surface-text);
}
.content-card-body {
padding: 1.1rem;
}
.dashboard-table {
color: var(--surface-text);
}
.dashboard-table thead th {
color: var(--surface-text-muted);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 600;
border-bottom-color: var(--surface-border);
}
.dashboard-table td {
border-color: var(--surface-border);
vertical-align: middle;
}
.dashboard-table tbody tr:hover {
background-color: var(--sidebar-hover-bg);
}
/* Fade/slide-in on page load — pure CSS, staggered per section */
@keyframes dashboardFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dashboard-fade-in {
animation: dashboardFadeIn 320ms ease both;
}
.dashboard-fade-in-delay-1 {
animation-delay: 40ms;
}
.dashboard-fade-in-delay-2 {
animation-delay: 80ms;
}
.dashboard-fade-in-delay-3 {
animation-delay: 120ms;
}
.dashboard-fade-in-delay-4 {
animation-delay: 160ms;
}
@media (max-width: 991.98px) {
.stat-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575.98px) {
.stat-card-grid {
grid-template-columns: 1fr;
}
.dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}
/* ==========================================================================
Shared data tables (master-data lists + reports)
========================================================================== */
/* Horizontal-scroll wrapper with a CSS-only edge shadow hint — no JS.
Two solid gradients (matching the surface color) ride along with the
scrolled content to hide the shadow near the edges; two radial shadow
gradients stay fixed to the viewport (background-attachment: scroll) so
they only read as "more to scroll" while there's content off-screen. */
.table-scroll-wrap {
position: relative;
/* The CSS Overflow spec always forces both axes to be non-visible
together once either one is (there's no valid "x: auto, y: visible"
combination — the UA silently promotes y to auto too). Rather than
fight that, this wrapper embraces it: bounded height + explicit
overflow on both axes, so the sticky below sticks correctly
to *this* box's own scroll instead of drifting relative to a scroll
container (the page) it was never actually part of. */
max-height: min(640px, 70vh);
overflow: auto;
border: 1px solid var(--surface-border);
border-radius: 12px;
background-color: var(--surface-bg);
background-image:
linear-gradient(to right, var(--surface-bg) 50%, rgba(255, 255, 255, 0)),
linear-gradient(to left, var(--surface-bg) 50%, rgba(255, 255, 255, 0)),
radial-gradient(farthest-side at 0 50%, var(--scroll-shadow-color), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow-color), rgba(0, 0, 0, 0));
background-position: left, right, left, right;
background-repeat: no-repeat;
background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
.data-table {
width: 100%;
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0;
color: var(--surface-text);
font-size: 0.88rem;
}
.data-table thead th {
position: sticky;
top: 0;
z-index: 5;
background-color: var(--surface-bg);
color: var(--surface-text-muted);
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.65rem 0.85rem;
border-bottom: 2px solid var(--surface-border);
white-space: nowrap;
}
.data-table tbody td {
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--surface-border);
vertical-align: middle;
height: 46px;
color: var(--surface-text);
}
.data-table tbody tr {
transition: background-color 120ms ease;
}
.data-table tbody tr:hover {
background-color: var(--sidebar-hover-bg);
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
/* Summary rows (opening balance, totals) — live as plain inside the
single
(see public/js/table-sort.js), not a separate tbody/tfoot,
because this browser breaks position: sticky on as soon as a table
has more than two row groups. */
.data-table tbody tr.summary-row td {
padding: 0.55rem 0.85rem;
color: var(--surface-text);
background-color: var(--sidebar-hover-bg);
font-weight: 700;
vertical-align: middle;
}
.data-table tbody tr.summary-row-totals td {
border-top: 2px solid var(--surface-border);
}
.data-table .cell-primary {
font-weight: 600;
color: var(--surface-text);
}
.data-table .cell-muted {
color: var(--surface-text-muted);
font-size: 0.82rem;
}
/* Sortable column headers (client-side sort, see public/js/table-sort.js —
only wired up on unpaginated report tables where all rows are already
in the DOM; paginated master-data lists keep their server-side order). */
.sortable-th {
cursor: pointer;
user-select: none;
}
.sortable-th .sort-icon {
margin-left: 0.3rem;
font-size: 0.8rem;
color: var(--surface-text-muted);
opacity: 0.45;
transition: opacity 150ms ease, color 150ms ease;
}
.sortable-th:hover .sort-icon {
opacity: 0.85;
}
.sortable-th.sort-asc .sort-icon,
.sortable-th.sort-desc .sort-icon {
opacity: 1;
color: var(--color-primary);
}
/* Search input above a table (keeps existing GET-form wiring, restyle only) */
.table-search-input {
background-color: var(--surface-bg);
border: 1px solid var(--surface-border);
color: var(--surface-text);
}
.table-search-input:focus {
background-color: var(--surface-bg);
border-color: var(--color-primary);
color: var(--surface-text);
box-shadow: 0 0 0 0.2rem var(--focus-ring-primary);
}
.table-search-input::placeholder {
color: var(--surface-text-muted);
}
/* Themed pagination (Laravel's default paginator markup, restyle only) */
.pagination .page-link {
background-color: var(--surface-bg);
border-color: var(--surface-border);
color: var(--surface-text);
}
.pagination .page-link:hover {
background-color: var(--sidebar-hover-bg);
color: var(--color-primary);
}
.pagination .page-item.active .page-link {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.pagination .page-item.disabled .page-link {
background-color: var(--surface-bg);
border-color: var(--surface-border);
color: var(--surface-text-muted);
}
/* ==========================================================================
Shared form styling (create/edit pages, incl. voucher grid cells)
========================================================================== */
.form-control,
.form-select {
background-color: var(--surface-bg);
border: 1px solid var(--surface-border);
color: var(--surface-text);
border-radius: 8px;
min-height: 42px;
}
.form-control:focus,
.form-select:focus {
background-color: var(--surface-bg);
border-color: var(--color-primary);
color: var(--surface-text);
box-shadow: 0 0 0 0.2rem var(--focus-ring-primary);
}
.form-control::placeholder {
color: var(--surface-text-muted);
}
.form-control:disabled,
.form-select:disabled {
background-color: var(--sidebar-hover-bg);
color: var(--surface-text-muted);
}
.form-label {
color: var(--surface-text);
font-weight: 500;
font-size: 0.85rem;
}
.form-text {
color: var(--surface-text-muted);
}
.form-check-input {
background-color: var(--surface-bg);
border-color: var(--surface-border);
}
.form-check-input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.form-check-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 0.2rem var(--focus-ring-primary);
}
.form-check-label {
color: var(--surface-text);
}
/* Floating labels — Bootstrap's own .form-floating positioning/height is
kept as-is (more specific than .form-control above); only colors here. */
.form-floating > label {
color: var(--surface-text-muted);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
color: var(--surface-text-muted);
}
/* Inline validation (Laravel's @error directive, styling only) */
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
border-color: var(--color-danger) !important;
}
.is-invalid:focus {
box-shadow: 0 0 0 0.2rem var(--focus-ring-danger) !important;
}
.invalid-feedback {
color: var(--color-danger);
font-size: 0.8rem;
}
/* Buttons */
.btn {
border-radius: 8px;
font-weight: 500;
}
.btn-primary {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--color-primary-hover) !important;
border-color: var(--color-primary-hover) !important;
}
.btn-outline-primary {
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline-primary:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline-secondary {
color: var(--surface-text);
border-color: var(--surface-border);
}
.btn-outline-secondary:hover {
background-color: var(--sidebar-hover-bg);
border-color: var(--surface-border);
color: var(--surface-text);
}
.btn-outline-danger:hover {
background-color: var(--color-danger);
}
/* Form sections — group related fields with a subtle divider */
.form-section + .form-section {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--surface-border);
}
.form-section-title {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--surface-text-muted);
margin-bottom: 0.75rem;
}
|