/** * polish-2026-08.css — additive-only design polish. * * Deliberately conservative: I can't render or click through the live site * from this sandbox, so this file only ADDS rules that are safe in any * context (accessibility, touch targets, loading states, empty states) — * it never overrides your existing color/spacing/layout decisions in * main.css. Loaded after main.css so nothing here needs !important. * * Include order in : main.css, then this file. */ /* Visible keyboard focus everywhere — accessibility win with zero visual change for mouse/touch users, since it only shows on :focus-visible. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary, #16a34a); outline-offset: 2px; } /* Bigger, easier-to-tap buttons/links on phones — the exact class of thing users silently rage-tap and give up on. Only kicks in under 480px. */ @media (max-width: 480px) { .btn, .nav-link, .dropdown-item, button, a.btn { min-height: 44px; } .btn { padding-top: 0.6rem; padding-bottom: 0.6rem; } table.table td, table.table th { padding-top: 0.6rem; padding-bottom: 0.6rem; } } /* Smooth, native-feeling scrolling on long dashboard/table pages. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Skeleton-loading shimmer utility — opt-in via class="pds-skeleton", for any page that wants a loading placeholder instead of a blank flash while an AJAX call or slow query resolves. Doesn't apply anywhere unless used. */ .pds-skeleton { background: linear-gradient(90deg, #eef2f0 25%, #f7f9f8 37%, #eef2f0 63%); background-size: 400% 100%; animation: pds-shimmer 1.4s ease infinite; border-radius: var(--radius-sm, 8px); } @keyframes pds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .pds-skeleton { animation: none; } } /* Consistent, friendly empty-state block — opt-in via class="pds-empty", for "no tasks yet" / "no submissions yet" style screens. */ .pds-empty { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted, #6b7280); } .pds-empty i, .pds-empty svg { font-size: 2.5rem; opacity: .35; margin-bottom: .75rem; display: block; } .pds-empty h5 { color: inherit; font-weight: 600; margin-bottom: .25rem; } /* Table rows and cards get a slightly crisper hover cue on devices that actually have a mouse — skipped on touch so it doesn't cause a stray "stuck hover" state on mobile taps. */ @media (hover: hover) and (pointer: fine) { .card.pds-hoverable:hover, tr.pds-hoverable:hover { box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(22,163,74,0.12)); transform: translateY(-1px); transition: var(--transition, all .2s ease); } } /* Long numbers/₦ amounts in tight table cells shouldn't ever wrap mid-figure. */ .pds-nowrap-amount { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Badges used for the new trust-score / role indicators — slightly larger touch/legibility target than Bootstrap's default badge padding. */ .badge.pds-badge-lg { padding: .45em .75em; font-size: .8rem; }