/* ========================================================= P2PAYROLL – Theme Variables + Table Contrast theme.css Works with: theme.js (toggle sets ) ========================================================= */ /* ------------------------------- DEFAULT THEME (LIGHT) -------------------------------- */ :root{ /* Backgrounds */ --bg: #eef1f6; --card: #f9fafb; --card2: #ffffff; /* Text */ --text: #0f172a; --muted: #334155; --muted2:#64748b; /* Borders & shadow */ --border:#dbe1ea; --border2:#c7d0dd; --shadow: 0 12px 34px rgba(2,6,23,.12); /* Accent */ --primary: #2563eb; --primary2:#1d4ed8; --primarySoft: rgba(37,99,235,.14); --success:#16a34a; --successSoft: rgba(22,163,74,.16); --warning:#f59e0b; --warningSoft: rgba(245,158,11,.16); --danger:#ef4444; --dangerSoft: rgba(239,68,68,.16); /* Table (light) */ --tblHeadBg: #f1f5f9; --tblRowBg: #ffffff; --tblRowAlt: #fbfdff; --tblHover: #eef2ff; --tblText: #0f172a; --tblMuted: #475569; --tblBorder: #dbe1ea; } /* ------------------------------- DARK THEME (HIGH CONTRAST) -------------------------------- */ :root[data-theme="dark"]{ /* bg darker, cards brighter => separation */ --bg: #070b14; --card: rgba(255,255,255,.07); --card2: rgba(255,255,255,.06); /* stronger text */ --text: rgba(255,255,255,.94); --muted: rgba(255,255,255,.78); --muted2: rgba(255,255,255,.62); /* borders visible */ --border: rgba(255,255,255,.14); --border2: rgba(255,255,255,.20); --shadow: 0 18px 60px rgba(0,0,0,.58); /* accent */ --primary: #60a5fa; --primary2:#3b82f6; --primarySoft: rgba(96,165,250,.18); --success:#22c55e; --successSoft: rgba(34,197,94,.18); --warning:#fbbf24; --warningSoft: rgba(251,191,36,.18); --danger:#f87171; --dangerSoft: rgba(248,113,113,.18); /* Table (dark) */ --tblHeadBg: rgba(255,255,255,.10); --tblRowBg: rgba(255,255,255,.05); --tblRowAlt: rgba(255,255,255,.065); --tblHover: rgba(96,165,250,.20); --tblText: rgba(255,255,255,.94); --tblMuted: rgba(255,255,255,.74); --tblBorder: rgba(255,255,255,.12); } /* Dark theme premium gradient */ :root[data-theme="dark"] body{ background: radial-gradient(900px 520px at 18% 12%, rgba(96,165,250,.18), transparent 60%), radial-gradient(900px 520px at 82% 70%, rgba(34,197,94,.12), transparent 55%), linear-gradient(180deg, #070b14, #060810) !important; } /* ------------------------------- PAYROLL TABLE (HIGH CONTRAST) Use: -------------------------------- */ .table-wrap{ width:100%; overflow:auto; border-radius: 16px; } .tbl-payroll{ width:100%; border-collapse: separate; border-spacing: 0; background: var(--tblRowBg); border: 1px solid var(--tblBorder); border-radius: 16px; overflow: hidden; } .tbl-payroll thead th{ position: sticky; top: 0; z-index: 1; background: var(--tblHeadBg); color: var(--tblMuted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; padding: 12px 12px; border-bottom: 1px solid var(--tblBorder); white-space: nowrap; } .tbl-payroll tbody td{ padding: 12px 12px; border-bottom: 1px solid var(--tblBorder); color: var(--tblText); vertical-align: middle; } .tbl-payroll tbody tr:nth-child(even) td{ background: var(--tblRowAlt); } .tbl-payroll tbody tr:hover td{ background: var(--tblHover); } .tbl-payroll tbody tr:last-child td{ border-bottom: 0; } /* numeric alignment helpers */ .td-num{ text-align:right; font-variant-numeric: tabular-nums; } .td-center{ text-align:center; } .td-mono{ font-variant-numeric: tabular-nums; } /* badges inside table */ .tbl-badge{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--tblBorder); background: rgba(0,0,0,.04); font-size: 12px; font-weight: 900; color: var(--tblText); } :root[data-theme="dark"] .tbl-badge{ background: rgba(255,255,255,.06); } /* Better scrollbar */ .table-wrap::-webkit-scrollbar{ height: 10px; } .table-wrap::-webkit-scrollbar-thumb{ background: rgba(100,116,139,.35); border-radius: 999px; } :root[data-theme="dark"] .table-wrap::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.28); }