/* ========================================================================= ui-polish.css — presentation-only refinement layer for pd.cash Loaded LAST + unlayered in templates/header.php + templates/auth_layout.php. Additive & reversible: remove the lines (or empty this file) to revert. Brand #00D632 preserved. Dark-only. NO behavior/logic changes. ------------------------------------------------------------------------ Section index: 1. Tokens 8. Buttons — premium primary CTA 2. Focus-visible rings 9. Responsive fixes 3. Selection + form accent 10. Interaction states 4. Refined scrollbars 11. Admin analytics — Today vs Yesterday 5. Tabular numerals 12. Admin analytics — Profit by Method 6. Micro-interactions 13. Admin analytics — Profit by User 7. Surfaces & elevation 14. Collapsed panel — tidy header 15. Nav dropdown internals 16. Tonal secondary CTAs ========================================================================= */ /* 1. Tokens ---------------------------------------------------------------- */ :root{ --ui-brand:#00D632; --ui-brand-rgb:0,214,50; --ui-brand-hover:#00b82b; --ui-canvas:#030712; --ui-surface:#111827; --ui-surface-2:#1f2937; --ui-hairline:rgba(255,255,255,.08); --ui-hairline-strong:rgba(255,255,255,.14); --ui-radius:12px; --ui-shadow-sm:0 1px 2px rgba(0,0,0,.35); --ui-shadow:0 4px 16px -6px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35); --ui-shadow-lg:0 14px 44px -10px rgba(0,0,0,.62); --ui-ease:cubic-bezier(.4,0,.2,1); } /* 2. Accessibility — consistent, visible keyboard focus ring --------------- */ a:focus-visible,button:focus-visible,[role="button"]:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible, summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid rgba(var(--ui-brand-rgb),.85); outline-offset:2px; } /* 3. Selection + native form accent --------------------------------------- */ ::selection{background:rgba(var(--ui-brand-rgb),.30);color:#fff;} :root{accent-color:var(--ui-brand);} /* 4. Refined scrollbars (webkit + firefox root). The app's .scrollbar-none keeps hiding its own bars — that rule is more specific than these. ---- */ html{scrollbar-width:thin;scrollbar-color:#374151 transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:#374151;border-radius:9px;border:2px solid transparent;background-clip:content-box;} ::-webkit-scrollbar-thumb:hover{background:#4b5563;} /* 5. Money & figures — lining/tabular numerals for clean vertical alignment */ table, .rs-secondary-stat,.dashboard-balance-card-body, [class*="text-xl"],[class*="text-2xl"],[class*="text-3xl"],[class*="text-4xl"],[class*="text-5xl"]{ font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; } /* 6. Micro-interactions ---------------------------------------------------- */ a,button,[role="button"],.gw-card,[class*="hover:bg-"],[class*="hover:border-"]{ transition:background-color .16s var(--ui-ease),border-color .16s var(--ui-ease), color .16s var(--ui-ease),box-shadow .16s var(--ui-ease), transform .16s var(--ui-ease),opacity .16s var(--ui-ease); } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } } @media (prefers-reduced-transparency:reduce){ [class*="backdrop-blur"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} } /* 7. Surfaces & elevation -------------------------------------------------- */ /* Give flat rounded panels/cards a soft shadow + subtle top highlight so they read as elevated surfaces on the near-black canvas. Scoped to cards that DON'T already declare a shadow utility, so intentional dropdown/modal shadow-2xl etc. are never weakened. */ [class*="rounded-xl"][class*="border-gray-7"][class*="bg-gray-8"]:not([class*="shadow"]):not(.gw-card), [class*="rounded-2xl"][class*="border-gray-7"][class*="bg-gray-8"]:not([class*="shadow"]):not(.gw-card), [class*="rounded-xl"][class*="border-gray-7"][class*="bg-gray-9"]:not([class*="shadow"]):not(.gw-card), [class*="rounded-2xl"][class*="border-gray-7"][class*="bg-gray-9"]:not([class*="shadow"]):not(.gw-card){ box-shadow:var(--ui-shadow),inset 0 1px 0 rgba(255,255,255,.045); } /* Gateway cards: gentle resting depth + a confident hover lift. */ .gw-card{box-shadow:var(--ui-shadow-sm);} .gw-card:hover{ border-color:rgba(var(--ui-brand-rgb),.42); box-shadow:var(--ui-shadow); transform:translateY(-1px); } /* 8. Buttons — premium primary CTA ---------------------------------------- */ /* `~=` matches the exact token `bg-primary-500` only, so opacity variants (bg-primary-500/15 icon chips) are NOT touched. Adds a subtle top sheen + brand glow + tactile hover/active so every CTA reads intentional. Hue is unchanged (brand preserved). */ a[class~="bg-primary-500"],button[class~="bg-primary-500"], [role="button"][class~="bg-primary-500"],.btn-primary{ background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%,rgba(0,0,0,.07)); box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 6px 16px -7px rgba(var(--ui-brand-rgb),.55),var(--ui-shadow-sm); } a[class~="bg-primary-500"]:hover,button[class~="bg-primary-500"]:hover, [role="button"][class~="bg-primary-500"]:hover,.btn-primary:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 22px -7px rgba(var(--ui-brand-rgb),.72),var(--ui-shadow-sm); } a[class~="bg-primary-500"]:active,button[class~="bg-primary-500"]:active, [role="button"][class~="bg-primary-500"]:active,.btn-primary:active{ transform:translateY(1px); box-shadow:inset 0 1px 3px rgba(0,0,0,.25),0 3px 10px -6px rgba(var(--ui-brand-rgb),.5); } /* 9. Responsive fixes ----------------------------------------------------- */ /* Dashboard balance-card meta chips: the app's <=640px 2-col grid truncates labels/values ("Withdrawa... 16..."). Restore content-sized flex-wrap so every chip reads in full and wraps gracefully. Higher specificity (html body ...) + !important to win over the body-inline rules. No overflow introduced (flex-wrap moves a too-wide chip to its own line). */ @media (max-width:640px){ html body #dash-stat-badges{ display:flex !important; flex-wrap:wrap !important; gap:.4rem !important; } html body #dash-stat-badges > *{ width:auto !important; max-width:100% !important; flex:0 1 auto !important; white-space:nowrap; } html body #dash-stat-badges span{ min-width:0; overflow:visible; text-overflow:clip; white-space:nowrap; } } /* 10. Interaction states (secondary buttons + table rows) ----------------- */ /* Subtle hover lift for neutral/secondary buttons so they feel tactile and consistent with the primary CTA — additive :hover only, no resting change. */ a[class*="bg-gray-7"][class*="border-gray-6"]:hover, a[class*="bg-gray-8"][class*="border-gray-7"]:hover, button[class*="bg-gray-7"][class*="border-gray-6"]:hover, button[class*="bg-gray-8"][class*="border-gray-7"]:hover{ transform:translateY(-1px); box-shadow:var(--ui-shadow-sm); } /* Gentle row hover for data tables (kept minimal; header left untouched so the shared admin panel is unaffected). */ table tbody tr{transition:background-color .15s var(--ui-ease);} table tbody tr:hover{background:rgba(255,255,255,.025);} /* 11. Admin analytics — Today vs Yesterday stat tiles --------------------- */ /* Scoped to #hourly_comparison-body (admin dashboard only). Turns the flat grid cells into refined stat cards; tabular figures; delta % as a subtle chip. */ #hourly_comparison-body > .grid > div{ border:1px solid var(--ui-hairline); border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)); transition:border-color .16s var(--ui-ease),transform .16s var(--ui-ease),box-shadow .16s var(--ui-ease); } #hourly_comparison-body > .grid > div:hover{ border-color:var(--ui-hairline-strong); transform:translateY(-1px); box-shadow:var(--ui-shadow-sm); } #hourly_comparison-body .text-base.font-bold{ font-size:1.1rem; letter-spacing:-.015em; font-variant-numeric:tabular-nums lining-nums; } #hourly_comparison-body .flex.items-end > span + span{ padding:1px 5px 1px 4px; border-radius:6px; background:rgba(255,255,255,.05); } /* 12. Admin analytics — Profit by Method rows ----------------------------- */ /* Scoped to #method-profit-section (admin only). A touch more row breathing room, a thicker glossy data bar, and fixed-width Rev/Fees rails so figures align into clean vertical columns down the list. */ #method-profit-section .method-row{padding-top:.5625rem;padding-bottom:.5625rem;} #method-profit-section .method-row .h-1{height:.375rem;} #method-profit-section .method-row .h-1 > div{ background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0)); } #method-profit-section .text-right.shrink-0.hidden{min-width:3.5rem;} #method-profit-section .sort-btn{transition:background-color .15s var(--ui-ease),color .15s var(--ui-ease);} #method-profit-section .sort-btn:hover{background:rgba(255,255,255,.06);} /* 13. Admin analytics — Profit by User rows ------------------------------- */ /* Scoped to #user-profit-section (admin only). Same bar/row refinements as §12 (its Rev/Fee columns already have fixed widths, so no min-width rail). Email lifted from gray-600 for legibility without competing with the name. */ #user-profit-section .user-row{padding-top:.5625rem;padding-bottom:.5625rem;} #user-profit-section .user-row .h-1{height:.375rem;} #user-profit-section .user-row .h-1 > div{ background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0)); } #user-profit-section .user-row .text-gray-600{color:#7b8494;} #user-profit-section .sort-btn{transition:background-color .15s var(--ui-ease),color .15s var(--ui-ease);} #user-profit-section .sort-btn:hover{background:rgba(255,255,255,.06);} /* 14. Admin analytics — collapsed panel = tidy header (no dead space) ------ */ /* .card-base has 1rem padding, so a COLLAPSED collapsible card (body hidden) left ~20px of dead space below its header, reading as an empty card. When the header's aria-expanded="false" (toggled by the app's collapse handler), drop the card's bottom padding so it reads as a clean header row. Horizontal padding is untouched (no content shift). :has() is supported in the admin's modern browser; older engines simply keep the previous look. */ .card-base:has(> [role="button"][aria-expanded="false"]){padding-bottom:.25rem;} /* 15. Nav dropdown internals — inset rounded hover + icon affordance ------- */ /* The header nav dropdowns ([id$="Dropdown"]) and the user menu (#userMenu) render full-bleed flat hover highlights. Inset each item slightly and round it so the hover reads as a modern pill (Linear/macOS style) instead of an edge-to-edge bar. Scoped to `> .py-2 > a/button` (the item wrappers), so the section headers/dividers are untouched. Icons pick up the brand green on hover in the functional nav menus as a subtle affordance. Additive/hover-only — resting layout unchanged (px-4 padding intact; .375rem side gutter only). */ [id$="Dropdown"] > .py-2 > a, [id$="Dropdown"] > .py-2 > button, #userMenu > .py-2 > a, #userMenu > .py-2 > button{ margin-inline:.375rem; border-radius:8px; } [id$="Dropdown"] > .py-2 > a:hover > i, [id$="Dropdown"] > .py-2 > button:hover > i{ color:var(--ui-brand); } /* 16. Tonal secondary CTAs — nav-link greens recede, submit buttons stay bold */ /* The app uses solid brand-green for both real submit CTAs (