*/
.vg-wallet-tile--wide { grid-column: span 2; min-height: 120px; }
.vg-wallet-tile--wide .vg-wallet-amt { font-size: 26px; }
@media (min-width: 1024px) { .vg-wallet-tile--wide { grid-column: span 2; } }
/* =========================================================================
5. STATS
-------------------------------------------------------------------------
USAGE:
========================================================================= */
.vg-stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (min-width: 768px) { .vg-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.vg-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: #fff;
border: 1px solid var(--vg-line);
border-radius: var(--vg-radius-sm);
box-shadow: var(--vg-shadow-sm);
}
.vg-stat-ico {
width: 40px; height: 40px;
flex: 0 0 40px;
display: grid; place-items: center;
border-radius: 11px;
background: linear-gradient(135deg, rgba(22,196,127,.15), rgba(14,165,164,.15));
color: var(--vg-teal-deep);
font-size: 18px;
}
.vg-stat-val {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--vg-ink);
line-height: 1.2;
letter-spacing: -.3px;
/* Keep the currency token (e.g. "USDT") from breaking into "USD / T".
Allow a wrap only at the space, never mid-word, so "0.00 USDT" reads cleanly. */
overflow-wrap: normal;
word-break: keep-all;
white-space: nowrap;
}
.vg-stat > div { min-width: 0; }
.vg-stat-lbl {
display: block;
font-size: 11.5px;
color: var(--vg-muted);
font-weight: 500;
}
.vg-stat--up .vg-stat-val { color: var(--vg-green); }
.vg-stat--down .vg-stat-val { color: var(--vg-danger); }
/* =========================================================================
6. BUTTONS (min 44px tap target)
-------------------------------------------------------------------------
USAGE — do NOT also put bootstrap's .btn on these, the two will fight:
Cancel
Delete
Sizes: .vg-btn--sm (36px, use sparingly) / default 44px / .vg-btn--lg (52px)
========================================================================= */
.vg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--vg-tap);
min-width: var(--vg-tap);
padding: 11px 20px;
border: 1.5px solid transparent;
border-radius: 100px;
font-family: var(--vg-font);
font-size: 14.5px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-align: center;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: transform .2s var(--vg-ease), box-shadow .2s var(--vg-ease),
background .2s var(--vg-ease), color .2s var(--vg-ease),
border-color .2s var(--vg-ease);
}
.vg-btn i { font-size: 16px; }
.vg-btn:active { transform: scale(.97); }
.vg-btn:disabled,
.vg-btn.is-disabled { opacity: .55; pointer-events: none; }
.vg-btn:focus-visible { outline: 2px solid var(--vg-teal); outline-offset: 2px; }
.vg-btn--primary {
background: var(--vg-grad-green);
color: #fff;
box-shadow: 0 8px 20px rgba(16,196,127,.32);
}
.vg-btn--primary:hover { box-shadow: 0 12px 26px rgba(16,196,127,.42); color: #fff; }
.vg-btn--ghost {
background: #fff;
color: var(--vg-navy);
border-color: var(--vg-line);
}
.vg-btn--ghost:hover { border-color: var(--vg-teal); color: var(--vg-teal-deep); }
.vg-btn--navy { background: var(--vg-navy); color: #fff; }
.vg-btn--navy:hover { background: var(--vg-navy-3); color: #fff; }
.vg-btn--danger { background: var(--vg-danger); color: #fff; box-shadow: 0 8px 20px rgba(229,72,77,.28); }
.vg-btn--danger:hover { background: #cf3a3f; color: #fff; }
.vg-btn--soft { background: rgba(22,196,127,.12); color: var(--vg-teal-deep); }
.vg-btn--soft:hover { background: rgba(22,196,127,.2); }
.vg-btn--block { display: flex; width: 100%; }
.vg-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.vg-btn--sm i { font-size: 14px; }
.vg-btn--lg { min-height: 52px; padding: 14px 28px; font-size: 16px; }
/* icon-only: ALWAYS give it an aria-label */
.vg-btn--icon { padding: 0; width: var(--vg-tap); height: var(--vg-tap); border-radius: 50%; }
/* =========================================================================
7. FORMS
-------------------------------------------------------------------------
USAGE — keep name/id/value PHP EXACTLY as it was, only swap the class.
NEVER remove the CSRF hidden input from a form.
========================================================================= */
.vg-field { margin-bottom: 14px; }
.vg-label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--vg-slate);
margin-bottom: 6px;
}
.vg-label .vg-req { color: var(--vg-danger); }
.vg-input,
.vg-select,
.vg-textarea {
width: 100%;
min-height: var(--vg-tap);
padding: 11px 14px;
font-family: var(--vg-font);
font-size: 15px; /* >=16px avoids iOS zoom; 15px + touch-action is our compromise */
color: var(--vg-ink);
background: #fff;
border: 1.5px solid var(--vg-line);
border-radius: var(--vg-radius-sm);
transition: border-color .2s var(--vg-ease), box-shadow .2s var(--vg-ease);
-webkit-appearance: none;
appearance: none;
}
.vg-textarea { min-height: 92px; resize: vertical; }
.vg-input:focus,
.vg-select:focus,
.vg-textarea:focus {
outline: none;
border-color: var(--vg-green);
box-shadow: 0 0 0 3px rgba(22,196,127,.15);
}
.vg-input::placeholder,
.vg-textarea::placeholder { color: var(--vg-muted); opacity: .75; }
.vg-input:disabled,
.vg-select:disabled,
.vg-input[readonly] { background: var(--vg-bg-soft-2); color: var(--vg-muted); cursor: not-allowed; }
/* native select arrow (inline SVG data-uri — no external asset) */
.vg-select {
padding-right: 38px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7c8c'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6' stroke='%236b7c8c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
/* input with a leading icon */
.vg-input-wrap { position: relative; display: block; }
.vg-input-wrap > i {
position: absolute;
left: 13px; top: 50%;
transform: translateY(-50%);
color: var(--vg-muted);
font-size: 16px;
pointer-events: none;
}
.vg-input-wrap .vg-input { padding-left: 40px; }
.vg-help { display: block; font-size: 11.5px; color: var(--vg-muted); margin-top: 5px; }
.vg-error { display: block; font-size: 11.5px; color: var(--vg-danger); margin-top: 5px; font-weight: 500; }
.vg-input.is-invalid { border-color: var(--vg-danger); }
.vg-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229,72,77,.15); }
/* two-up field row on wider screens */
.vg-field-row { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 600px) { .vg-field-row { grid-template-columns: 1fr 1fr; } }
/* =========================================================================
8. BADGES / PILLS
-------------------------------------------------------------------------
USAGE:
Level 3
========================================================================= */
.vg-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 100px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .2px;
background: var(--vg-bg-soft-2);
color: var(--vg-slate);
white-space: nowrap;
}
.vg-badge i { font-size: 11px; }
.vg-badge--success { background: rgba(22,196,127,.14); color: #0d8f5b; }
.vg-badge--danger { background: rgba(229,72,77,.12); color: #c23237; }
.vg-badge--warn { background: rgba(245,165,36,.16); color: #a86a05; }
.vg-badge--info { background: rgba(14,165,164,.14); color: var(--vg-teal-deep); }
.vg-badge--navy { background: rgba(17,58,94,.10); color: var(--vg-navy-3); }
.vg-badge--solid { background: var(--vg-grad-green); color: #fff; }
/* Pill = larger, tappable chip (filter chips etc.) */
.vg-pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 6px 14px;
border-radius: 100px;
border: 1.5px solid var(--vg-line);
background: #fff;
color: var(--vg-slate);
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all .2s var(--vg-ease);
}
.vg-pill:hover { border-color: var(--vg-teal); color: var(--vg-teal-deep); }
.vg-pill.is-active { background: var(--vg-grad-green); border-color: transparent; color: #fff; }
/* horizontal scroller for a row of pills */
.vg-pill-row {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 2px 2px 8px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.vg-pill-row::-webkit-scrollbar { display: none; }
/* =========================================================================
9. LIST
-------------------------------------------------------------------------
USAGE — leading icon + text + trailing chevron. Use
for tappable rows.
========================================================================= */
.vg-list { list-style: none; margin: 0; padding: 0; }
.vg-list-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 10px 14px;
border-bottom: 1px solid var(--vg-line);
color: var(--vg-ink);
transition: background .18s var(--vg-ease);
-webkit-tap-highlight-color: transparent;
}
.vg-list > li:last-child .vg-list-item { border-bottom: 0; }
a.vg-list-item:hover { background: var(--vg-bg-soft); }
a.vg-list-item:active { background: var(--vg-bg-soft-2); }
.vg-list-ico {
width: 38px; height: 38px;
flex: 0 0 38px;
display: grid; place-items: center;
border-radius: 11px;
background: linear-gradient(135deg, rgba(22,196,127,.14), rgba(14,165,164,.14));
color: var(--vg-teal-deep);
font-size: 17px;
}
.vg-list-ico--navy { background: rgba(17,58,94,.10); color: var(--vg-navy-3); }
.vg-list-ico--danger { background: rgba(229,72,77,.12); color: var(--vg-danger); }
.vg-list-ico--warn { background: rgba(245,165,36,.16); color: #a86a05; }
.vg-list-txt { flex: 1 1 auto; min-width: 0; }
.vg-list-txt strong {
display: block;
font-size: 14.5px;
font-weight: 600;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vg-list-txt small {
display: block;
font-size: 12px;
color: var(--vg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vg-list-chev { color: var(--vg-muted); font-size: 14px; flex-shrink: 0; }
.vg-list-amt { font-size: 14.5px; font-weight: 700; flex-shrink: 0; letter-spacing: -.3px; }
.vg-list-amt--in { color: var(--vg-green); }
.vg-list-amt--out { color: var(--vg-danger); }
/* =========================================================================
10. TABLES — .vg-table-wrap scrolls INSIDE itself; the page never does.
-------------------------------------------------------------------------
USAGE — wrap EVERY data table. Keep bootstrap/DataTables classes on the
if a plugin needs them; the wrapper is what does the scrolling.
# User Amount
username); ?>
amount, 2)); ?>
voltera-app.js adds .vg-has-scroll-l/.vg-has-scroll-r for the edge shadows.
========================================================================= */
.vg-table-wrap {
position: relative;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--vg-radius-sm);
/* contain the scroll so it never bubbles to the page */
overscroll-behavior-x: contain;
}
.vg-table-wrap::-webkit-scrollbar { height: 6px; }
.vg-table-wrap::-webkit-scrollbar-thumb { background: rgba(107,124,140,.35); border-radius: 100px; }
.vg-table-wrap::-webkit-scrollbar-track { background: transparent; }
/* scroll-shadow affordance (toggled by JS) */
.vg-table-wrap::before,
.vg-table-wrap::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 22px;
pointer-events: none;
opacity: 0;
transition: opacity .2s var(--vg-ease);
z-index: 2;
}
.vg-table-wrap::before { left: 0; background: linear-gradient(90deg, rgba(10,31,51,.10), transparent); }
.vg-table-wrap::after { right: 0; background: linear-gradient(270deg, rgba(10,31,51,.10), transparent); }
.vg-table-wrap.vg-has-scroll-l::before { opacity: 1; }
.vg-table-wrap.vg-has-scroll-r::after { opacity: 1; }
.vg-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
background: #fff;
}
.vg-table thead th {
position: sticky;
top: 0;
background: var(--vg-bg-soft);
color: var(--vg-slate);
font-size: 11px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
text-align: left;
padding: 11px 12px;
border-bottom: 1px solid var(--vg-line);
white-space: nowrap;
}
.vg-table tbody td {
padding: 12px;
border-bottom: 1px solid var(--vg-line);
color: var(--vg-ink);
vertical-align: middle;
white-space: nowrap;
}
.vg-table tbody tr:last-child td { border-bottom: 0; }
.vg-table tbody tr:hover { background: var(--vg-bg-soft); }
.vg-table .vg-num { text-align: right; font-weight: 600; letter-spacing: -.2px; }
/* let a specific column wrap when you want it to */
.vg-table .vg-wrap-cell { white-space: normal; min-width: 180px; }
/* =========================================================================
11. MODAL
-------------------------------------------------------------------------
USAGE — pure CSS/JS, NOT bootstrap's modal (do not mix the two).
Open: Open
Close: any [data-vg-close] inside, the backdrop, or Esc.
On mobile it presents as a bottom sheet; >=600px as a centred dialog.
========================================================================= */
.vg-modal {
position: fixed;
inset: 0;
z-index: var(--vg-z-modal);
display: flex;
align-items: flex-end;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: opacity .25s var(--vg-ease), visibility .25s var(--vg-ease);
}
.vg-modal.is-open { visibility: visible; opacity: 1; }
.vg-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10,31,51,.55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.vg-modal-panel {
position: relative;
width: 100%;
max-height: 88vh;
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--vg-radius) var(--vg-radius) 0 0;
box-shadow: var(--vg-shadow-lg);
padding-bottom: var(--vg-safe-b);
transform: translateY(100%);
transition: transform .3s var(--vg-ease);
overflow: hidden;
}
.vg-modal.is-open .vg-modal-panel { transform: translateY(0); }
/* grabber handle for the bottom-sheet look */
.vg-modal-panel::before {
content: '';
width: 38px; height: 4px;
border-radius: 100px;
background: var(--vg-line);
margin: 8px auto 0;
flex-shrink: 0;
}
.vg-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--vg-line);
}
.vg-modal-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--vg-ink); }
.vg-modal-x {
width: var(--vg-tap); height: var(--vg-tap);
flex: 0 0 var(--vg-tap);
display: grid; place-items: center;
border: 0; background: transparent;
color: var(--vg-muted);
font-size: 18px; border-radius: 50%;
cursor: pointer;
}
.vg-modal-x:hover { background: var(--vg-bg-soft-2); color: var(--vg-ink); }
.vg-modal-body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vg-modal-foot {
display: flex;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--vg-line);
background: var(--vg-bg-soft);
}
.vg-modal-foot .vg-btn { flex: 1 1 0; }
@media (min-width: 600px) {
.vg-modal { align-items: center; padding: 20px; }
.vg-modal-panel {
max-width: 460px;
border-radius: var(--vg-radius);
transform: translateY(14px) scale(.97);
max-height: 84vh;
}
.vg-modal.is-open .vg-modal-panel { transform: translateY(0) scale(1); }
.vg-modal-panel::before { display: none; }
.vg-modal--lg .vg-modal-panel { max-width: 720px; }
}
/* set by JS while a modal/drawer is open, to stop the page behind scrolling */
.vg-noscroll { overflow: hidden !important; }
/* =========================================================================
12. TOAST — fired from JS: $vg.toast('Saved', 'success')
========================================================================= */
.vg-toast-host {
position: fixed;
left: 50%;
bottom: calc(var(--vg-tabbar-h) + var(--vg-safe-b) + 14px);
transform: translateX(-50%);
z-index: var(--vg-z-toast);
display: flex;
flex-direction: column;
gap: 8px;
width: max-content;
max-width: min(92vw, 420px);
pointer-events: none;
}
@media (min-width: 1024px) { .vg-toast-host { bottom: 24px; } }
.vg-toast {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-radius: 100px;
background: var(--vg-navy);
color: #fff;
font-size: 13.5px;
font-weight: 500;
box-shadow: var(--vg-shadow-md);
pointer-events: auto;
opacity: 0;
transform: translateY(12px);
transition: opacity .25s var(--vg-ease), transform .25s var(--vg-ease);
}
.vg-toast.is-open { opacity: 1; transform: translateY(0); }
.vg-toast i { font-size: 16px; flex-shrink: 0; }
.vg-toast--success i { color: var(--vg-green-light); }
.vg-toast--danger i { color: #ff8a8d; }
.vg-toast--warn i { color: #ffc861; }
.vg-toast--info i { color: #5eead4; }
/* =========================================================================
13. EMPTY STATE
-------------------------------------------------------------------------
USAGE — show instead of an empty table/list:
No transactions yet
Your activity will appear here once you make your first deposit.
========================================================================= */
.vg-empty-state { text-align: center; padding: 40px 22px; }
.vg-empty-ico {
width: 68px; height: 68px;
margin: 0 auto 16px;
display: grid; place-items: center;
border-radius: 20px;
background: linear-gradient(135deg, rgba(22,196,127,.13), rgba(14,165,164,.13));
color: var(--vg-teal-deep);
font-size: 28px;
}
.vg-empty-state h4 { font-size: 16px; font-weight: 700; color: var(--vg-ink); margin: 0 0 6px; }
.vg-empty-state p { font-size: 13.5px; color: var(--vg-muted); margin: 0 auto 18px; max-width: 320px; }
/* =========================================================================
14. SKELETON — placeholder while data loads
USAGE:
========================================================================= */
.vg-skeleton {
position: relative;
overflow: hidden;
background: var(--vg-bg-soft-2);
border-radius: 8px;
}
.vg-skeleton--circle { border-radius: 50%; }
.vg-skeleton--text { height: 12px; margin-bottom: 8px; }
.vg-skeleton::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
animation: vg-shimmer 1.4s infinite;
}
@keyframes vg-shimmer { 100% { transform: translateX(100%); } }
/* =========================================================================
15. FAB — floating action button (sits above the tab bar)
USAGE:
Deposit
Active
History
...
...
Or use plain tabs for server-rendered pages (no data-vg-tabs).
========================================================================= */
.vg-tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--vg-bg-soft-2);
border-radius: 100px;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: 14px;
}
.vg-tabs::-webkit-scrollbar { display: none; }
.vg-tabs-btn {
flex: 1 1 auto;
min-height: 38px;
padding: 8px 16px;
border: 0;
border-radius: 100px;
background: transparent;
color: var(--vg-slate);
font-family: var(--vg-font);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background .2s var(--vg-ease), color .2s var(--vg-ease), box-shadow .2s var(--vg-ease);
}
.vg-tabs-btn.is-active {
background: #fff;
color: var(--vg-teal-deep);
box-shadow: var(--vg-shadow-sm);
}
.vg-tabs-pane { display: none; }
.vg-tabs-pane.is-active { display: block; animation: vg-fade .25s var(--vg-ease); }
@keyframes vg-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* =========================================================================
17. AVATAR
USAGE: JD (initials fallback)
========================================================================= */
.vg-avatar {
width: 40px; height: 40px;
flex: 0 0 40px;
display: inline-grid;
place-items: center;
border-radius: 50%;
overflow: hidden;
background: var(--vg-grad-brand);
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
}
.vg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vg-avatar--sm { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; }
.vg-avatar--lg { width: 60px; height: 60px; flex-basis: 60px; font-size: 20px; }
.vg-avatar--ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-green); }
/* =========================================================================
18. SMALL UTILITIES (namespaced — safe next to bootstrap)
========================================================================= */
.vg-row { display: flex; align-items: center; gap: 10px; }
.vg-row--between { justify-content: space-between; }
.vg-grow { flex: 1 1 auto; min-width: 0; }
.vg-stack { display: flex; flex-direction: column; gap: 10px; }
.vg-center { text-align: center; }
.vg-right { text-align: right; }
.vg-mt-0 { margin-top: 0 !important; }
.vg-mb-0 { margin-bottom: 0 !important; }
.vg-muted { color: var(--vg-muted); }
.vg-strong { font-weight: 700; }
.vg-xs { font-size: 12px; }
.vg-sm { font-size: 13px; }
.vg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-hide { display: none !important; }
/* screen-reader-only (for icon-only controls) */
.vg-sr {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.vg-divider { height: 1px; background: var(--vg-line); border: 0; margin: 14px 0; }
.vg-text-green { color: var(--vg-green); }
.vg-text-danger { color: var(--vg-danger); }
/* =========================================================================
19. RESPONSIVE — desktop shell (>=1024px)
Sidebar becomes permanent, tab bar hides, content shifts right.
========================================================================= */
@media (min-width: 1024px) {
.vg-tabbar { display: none; }
.vg-sidebar { transform: translateX(0); }
.vg-scrim { display: none; }
.vg-appbar { left: var(--vg-sidebar-w); }
.vg-content {
margin-left: var(--vg-sidebar-w);
padding: calc(var(--vg-appbar-h) + var(--vg-safe-t) + 20px) 22px 32px;
transition: margin-left .28s var(--vg-ease);
}
/* collapsed rail — JS toggles .vg-sidebar-collapsed on .vg-app */
.vg-app.vg-sidebar-collapsed .vg-sidebar { width: 68px; }
.vg-app.vg-sidebar-collapsed .vg-sidebar-head span,
.vg-app.vg-sidebar-collapsed .vg-sidenav-item span,
.vg-app.vg-sidebar-collapsed .vg-sidenav-label { display: none; }
.vg-app.vg-sidebar-collapsed .vg-sidenav-item { justify-content: center; padding: 10px 0; }
.vg-app.vg-sidebar-collapsed .vg-sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; }
.vg-app.vg-sidebar-collapsed .vg-appbar { left: 68px; }
.vg-app.vg-sidebar-collapsed .vg-content { margin-left: 68px; }
.vg-content { max-width: none; }
.vg-card { margin-bottom: 18px; }
}
/* wider gutters on very large screens */
@media (min-width: 1440px) {
.vg-content { padding-left: 32px; padding-right: 32px; }
}
/* =========================================================================
20. ACCESSIBILITY / MOTION / PRINT
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.vg-app *,
.vg-app *::before,
.vg-app *::after,
.vg-sidebar, .vg-scrim, .vg-modal, .vg-modal-panel, .vg-toast, .vg-fab {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.vg-skeleton::after { animation: none; }
.vg-btn:active, .vg-fab:active, .vg-tab:active i { transform: none; }
}
/* visible keyboard focus everywhere */
.vg-app a:focus-visible,
.vg-app button:focus-visible,
.vg-tab:focus-visible,
.vg-list-item:focus-visible,
.vg-pill:focus-visible {
outline: 2px solid var(--vg-teal);
outline-offset: 2px;
border-radius: 8px;
}
@media print {
.vg-appbar, .vg-tabbar, .vg-sidebar, .vg-fab, .vg-scrim, .vg-toast-host { display: none !important; }
.vg-content { margin: 0 !important; padding: 0 !important; }
.vg-card { box-shadow: none; break-inside: avoid; }
.vg-table-wrap { overflow: visible; }
}
/* =========================================================================
12. DARK THEME — opt-in via `vg-dark` on
-------------------------------------------------------------------------
The member panel's legacy stylesheet (app/Assets/Website/assets/css/styles.css)
paints `body { background-color: var(--surface) }` = #11150f. The vg- system
was authored light, so loading it after the legacy sheet whited-out the panel.
This block restores the legacy dark palette WITHOUT touching the 43 views that
already use vg- classes.
The palette below is the legacy sheet's own :root, reused verbatim — not
re-invented: --surface #11150f, --secondary #7e8088, --primary #25c866,
--menuDark #222223, --backdrop #161616, --line #393737.
Scoped to `.vg-dark` so the AdminLTE admin panel, which loads this same file,
is unaffected.
========================================================================= */
.vg-dark {
/* page + surfaces */
--vg-bg: #11150f;
--vg-bg-soft: #11150f;
--vg-bg-soft-2: #1e241c;
--vg-surface: #181e16; /* cards / raised panels */
--vg-surface-2: #12170f; /* recessed: inputs, table stripes */
/* text */
--vg-ink: #e9eeec;
--vg-slate: #b4bcb7;
--vg-muted: #808a83;
/* lines */
--vg-line: #2f362d;
--vg-line-strong: #3d453a;
}
/* The legacy sheet already paints ; keep them in lockstep. */
body.vg-dark { background-color: var(--vg-bg); color: var(--vg-ink); }
.vg-dark .vg-app { background: var(--vg-bg); color: var(--vg-ink); }
/* ---- surfaces that hardcoded #fff ---------------------------------------- */
.vg-dark .vg-card,
.vg-dark .vg-stat,
.vg-dark .vg-modal-panel {
background: var(--vg-surface);
border-color: var(--vg-line);
color: var(--vg-ink);
}
.vg-dark .vg-card--soft { background: var(--vg-bg-soft-2); }
.vg-dark .vg-appbar--plain {
background: var(--vg-surface);
color: var(--vg-ink);
border-bottom-color: var(--vg-line);
}
/* bottom tab bar — translucent (it backdrop-blurs the page behind it), so this
must stay rgba rather than a flat token, and the light shadow must go dark. */
.vg-dark .vg-tabbar {
background: rgba(24, 30, 22, .94);
border-top-color: var(--vg-line);
box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
}
/* --vg-teal-deep (#0b8f8e) is a light-theme accent; too dim to read on #11150f */
.vg-dark .vg-tab.is-active { color: var(--vg-green); }
.vg-dark .vg-table { background: var(--vg-surface); color: var(--vg-ink); }
.vg-dark .vg-table th { background: var(--vg-bg-soft-2); color: var(--vg-slate); }
.vg-dark .vg-table td { border-color: var(--vg-line); }
.vg-dark .vg-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.vg-dark .vg-pill { background: var(--vg-bg-soft-2); color: var(--vg-slate); border-color: var(--vg-line); }
.vg-dark .vg-btn--ghost { background: var(--vg-surface); color: var(--vg-ink); border-color: var(--vg-line); }
.vg-dark .vg-btn--ghost:hover { background: var(--vg-bg-soft-2); }
.vg-dark .vg-tabs-btn.is-active { background: var(--vg-surface); color: var(--vg-ink); }
/* ---- accent TEXT colours: the token flip does not reach these -------------
The rules above fix surfaces. These components instead hardcode a *foreground*
that was chosen to sit on a WHITE card — dark teal/red/amber/navy. Flipping
the surface to #181e16 leaves that text stranded, so each one had to be
re-picked. Measured on the real pages with a computed-style contrast pass
(every pair below was failing WCAG AA before):
.vg-badge--navy #113a5e on #17211d = 1.41:1 <- effectively invisible
.vg-badge--danger #c23237 on #31231d = 2.74:1
.vg-btn--soft #0b8f8e on #183223 = 3.52:1
.vg-badge--info #0b8f8e on #17312a = 3.54:1
.vg-link #0b8f8e on #181e16 = 4.31:1
Each replacement keeps the component hue and only raises lightness, so the
semantic reading (green=ok, red=bad) is unchanged. These are shared vg-
components, so fixing them here fixes every admin + member page at once —
no page view needs to know. */
.vg-dark .vg-link { color: #5ed5d4; }
.vg-dark .vg-link:hover { color: var(--vg-green-light, #4ade80); }
.vg-dark .vg-btn--soft { color: #7ee2a8; }
.vg-dark .vg-badge--success { color: #7ee2a8; }
.vg-dark .vg-badge--danger { background: rgba(229,72,77,.16); color: #ff9b9e; }
.vg-dark .vg-badge--warn { color: #f5c37a; }
.vg-dark .vg-badge--info { color: #5ed5d4; }
/* navy-on-navy cannot work here: the .10 navy tint is nearly the page colour and
the navy text is darker still. Lift both onto a readable blue. */
.vg-dark .vg-badge--navy { background: rgba(106,184,255,.14); color: #9dc9f5; }
/* .vg-pill hardcodes background:#fff (section 8) */
.vg-dark .vg-pill:hover { border-color: var(--vg-teal); color: #5ed5d4; }
/* ---- form controls ------------------------------------------------------- */
/* background-COLOR, not the `background` shorthand: .vg-select paints its
dropdown caret as a background-image data-URI (section 7), and the shorthand
resets it to none — which silently removed the caret from every select in
dark mode, app-wide. */
.vg-dark .vg-input,
.vg-dark .vg-select,
.vg-dark .vg-textarea {
background-color: var(--vg-surface-2);
color: var(--vg-ink);
border-color: var(--vg-line-strong);
}
/* the caret SVG hardcodes fill/stroke #6b7c8c (a light-theme grey); re-issue it
at --vg-muted #808a83 so it reads against #12170f. */
.vg-dark .vg-select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23808a83'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6' stroke='%23808a83' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vg-dark .vg-input::placeholder,
.vg-dark .vg-textarea::placeholder { color: var(--vg-muted); }
.vg-dark .vg-input:disabled,
.vg-dark .vg-select:disabled,
.vg-dark .vg-input[readonly] { background: var(--vg-bg-soft-2); color: var(--vg-muted); }
/* native dropdown list + autofill both ignore the rules above */
.vg-dark .vg-select option { background: var(--vg-surface); color: var(--vg-ink); }
.vg-dark .vg-input:-webkit-autofill,
.vg-dark .vg-input:-webkit-autofill:hover,
.vg-dark .vg-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--vg-ink);
-webkit-box-shadow: 0 0 0 1000px var(--vg-surface-2) inset;
caret-color: var(--vg-ink);
}
.vg-dark { color-scheme: dark; }
/* ---- auth pages (login / register / forgot) ------------------------------
These pages define their own `vga-` namespace INLINE, after this file loads.
Equal-specificity rules would lose on source order, so every selector here is
`.vg-dark .vga-*` (0,2,0) which beats the page's bare `.vga-*` (0,1,0). */
.vg-dark.vga-body { background: var(--vg-bg); color: var(--vg-ink); }
/* the page's ::before lays a green/teal glow over the navy gradient; on black it
reads as haze, so soften it rather than remove it (keeps the brand warmth). */
.vg-dark.vga-body::before {
background:
radial-gradient(120% 70% at 50% -10%, rgba(37,200,102,.10) 0%, rgba(37,200,102,0) 60%),
radial-gradient(90% 55% at 100% 0%, rgba(14,165,164,.07) 0%, rgba(14,165,164,0) 65%);
}
.vg-dark .vga-card {
background: var(--vg-surface);
border: 1px solid var(--vg-line);
box-shadow: 0 26px 60px rgba(0,0,0,.55);
}
.vg-dark .vga-title { color: var(--vg-ink); }
.vg-dark .vga-sub,
.vg-dark .vga-secure { color: var(--vg-muted); }
.vg-dark .vga-foot { color: var(--vg-slate); }
/* light-theme alert text was darkened for white cards; unreadable on #181e16 */
.vg-dark .vga-alert--danger { background: rgba(229,72,77,.14); color: #ff9b9e; border-color: rgba(229,72,77,.34); }
.vg-dark .vga-alert--warn { background: rgba(245,165,36,.14); color: #f5c37a; border-color: rgba(245,165,36,.34); }
.vg-dark .vga-alert--success { background: rgba(37,200,102,.14); color: #7ee2a8; border-color: rgba(37,200,102,.34); }
/* ---- box-sizing: the auth pages are NOT inside .vg-app -------------------
`.vg-app *` (line ~141) is the ONLY border-box rule in this file, so on the
auth pages `.vg-input { width:100%; padding:11px 14px; border:1.5px }` fell
back to content-box and overflowed its card by exactly 31px. Scope it to the
auth shell too. This is a layout fix and is deliberately NOT under .vg-dark. */
.vga-body *,
.vga-body *::before,
.vga-body *::after { box-sizing: border-box; }
/* ---- registration credentials block -------------------------------------
Shown once on the register success modal because send_email() discards its
result: a silent SMTP failure would otherwise lock the member out for good. */
.vg-cred-box {
margin: 14px 0;
padding: 14px 16px;
border-radius: var(--vg-radius-sm);
background: var(--vg-bg-soft-2, #f4faf7);
border: 1px solid var(--vg-line);
}
.vg-cred-warn { margin: 0 0 10px; font-size: 13px; color: var(--vg-warn); }
.vg-cred-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.vg-cred-list dt { font-size: 12.5px; font-weight: 600; color: var(--vg-slate); }
.vg-cred-list dd { margin: 0; }
.vg-cred-list code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14.5px; font-weight: 600;
color: var(--vg-ink);
background: var(--vg-surface-2, rgba(0,0,0,.05));
border: 1px solid var(--vg-line);
border-radius: 6px;
padding: 4px 9px;
user-select: all; /* one click selects the whole value */
word-break: break-all;
}
/* ---- page-local namespaces ----------------------------------------------
The feature screens each define a page-scoped namespace inline (vgd- dashboard,
vgbh- boosting history, vgab- auto-blast, vgww-, vgrp-, vgmta-, vg-boost-).
Almost all of those rules read var(--vg-ink / --vg-line / --vg-bg-soft ...),
so the token overrides above already carry them. Listed here are ONLY the
surfaces that hardcode a literal white and therefore ignore the tokens.
NOT included on purpose:
.vgd-meter > span — a white meter fill sitting INSIDE a coloured wallet
gradient; white is correct there.
--vg-white — left at #fff; it is the text colour on brand gradients,
so flipping the token would wreck the wallet tiles. */
.vg-dark .vgd-action {
background: var(--vg-surface);
border-color: var(--vg-line);
box-shadow: none;
}
.vg-dark .vgd-action:hover { border-color: var(--vg-green); background: var(--vg-bg-soft-2); }
.vg-dark .vgbh-node { background: var(--vg-surface); border-color: var(--vg-line); }
.vg-dark .vgab-flow-step { background: var(--vg-surface); border-color: var(--vg-line); }
/* =========================================================================
13. ADMIN / ADMINLTE DARK — everything the tokens in 12 cannot reach
-------------------------------------------------------------------------
Section 12 recolours the `.vg-` components by flipping tokens. That works
because those components READ the tokens. AdminLTE 3 + bootstrap 4 do not:
they ship literal hexes (#fff, #f4f6f9, #343a40, #333 ...) baked into
dist/css/adminlte.min.css and the DataTables sheet. Those files load BEFORE
this one and are never edited, so the only way to darken them is to restate
the painted properties here.
The admin carries `vg-dark` (application/views/admin/header.php), so
the token block in 12 is already in effect; this section only fixes literals.
PALETTE: none invented. Everything resolves from 12, which reuses the legacy
member-panel sheet (app/Assets/Website/assets/css/styles.css) verbatim:
--surface #11150f --secondary #7e8088 --primary #25c866
--menuDark #222223 --backdrop #161616 --line #393737
SHELL PARITY: the member panel app bar is `.vg-appbar--navy` and its sidebar
is the same navy ramp, both floating over the #11150f body. The admin sidebar
already uses --vg-grad-navy; the top bar was hardcoded #fff, so it is flipped
to the same ramp below. That is what makes the two panels read as one product
rather than two themes.
SPECIFICITY: the inline