/* /Components/Layout/AppShell.razor.rz.scp.css */
/* =====================================================================
GAINS — DashboardLayout.razor.css
Scoped styles for the main app shell (sidebar + topbar + content)
===================================================================== */
/* ── CSS Variables ── */
.gains-shell[b-53favc5946] {
--sb-width: 220px;
--sb-collapsed-width: 56px;
--topbar-h: 52px;
--sb-bg: #0f2340;
--sb-text: #b8cbe4;
--sb-hover: #172d4a;
--sb-active: #1a3a5c;
--sb-active-text: #ffffff;
--sb-section: #6b8aaa;
--sb-border: rgba(255,255,255,0.07);
--primary: #1a56a7;
--primary-dark: #0f3d82;
--primary-light: #e6f0fb;
--bg: #f0f4f9;
--card: #ffffff;
--border: #dde3ed;
--text: #1a2537;
--muted: #64748b;
--success: #16a34a;
--success-bg: #dcfce7;
--warning: #b45309;
--warning-bg: #fef3c7;
--danger: #b91c1c;
--danger-bg: #fee2e2;
--info: #0369a1;
--info-bg: #e0f2fe;
--radius: 8px;
--shadow: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.12);
}
/* ── Shell ── */
.gains-shell[b-53favc5946] {
display: flex;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 14px;
color: var(--text);
background: var(--bg);
}
/* ═══════════════════════════════
SIDEBAR
═══════════════════════════════ */
.gains-sidebar[b-53favc5946] {
width: var(--sb-width);
min-width: var(--sb-width);
background: var(--sb-bg);
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
transition: width 0.25s ease, min-width 0.25s ease;
z-index: 100;
flex-shrink: 0;
}
/* Collapsed state */
.gains-shell.sb-collapsed .gains-sidebar[b-53favc5946] {
width: var(--sb-collapsed-width);
min-width: var(--sb-collapsed-width);
}
.gains-shell.sb-collapsed .sb-label[b-53favc5946],
.gains-shell.sb-collapsed .sb-section-label[b-53favc5946],
.gains-shell.sb-collapsed .sb-chevron[b-53favc5946],
.gains-shell.sb-collapsed .sb-profile-info[b-53favc5946],
.gains-shell.sb-collapsed .sb-profile-caret[b-53favc5946],
.gains-shell.sb-collapsed .sb-logo-text[b-53favc5946],
.gains-shell.sb-collapsed .sb-profile-dropdown[b-53favc5946] { display: none; }
.gains-shell.sb-collapsed .sb-nav-item[b-53favc5946] { justify-content: center; padding: 10px 0; }
.gains-shell.sb-collapsed .sb-nav-children[b-53favc5946] { display: none !important; }
/* Logo */
.sb-logo[b-53favc5946] {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 14px;
border-bottom: 1px solid var(--sb-border);
text-decoration: none;
flex-shrink: 0;
}
.sb-logo-icon[b-53favc5946] {
width: 32px; height: 32px;
background: var(--primary);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sb-logo-text[b-53favc5946] { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
/* Profile */
.sb-profile[b-53favc5946] {
padding: 12px 14px;
border-bottom: 1px solid var(--sb-border);
position: relative;
flex-shrink: 0;
}
.sb-profile-trigger[b-53favc5946] {
display: flex; align-items: center; gap: 10px;
cursor: pointer; user-select: none;
}
.sb-avatar[b-53favc5946], .tb-avatar[b-53favc5946] {
width: 32px; height: 32px; border-radius: 50%;
background: var(--primary);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
letter-spacing: 0.5px;
}
.sb-profile-info[b-53favc5946] { flex: 1; min-width: 0; }
.sb-profile-name[b-53favc5946] { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-role[b-53favc5946] { font-size: 11px; color: var(--sb-section); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-caret[b-53favc5946] { color: var(--sb-section); font-size: 12px; transition: transform 0.2s; }
.sb-profile-caret.open[b-53favc5946] { transform: rotate(180deg); }
/* Profile dropdown */
.sb-profile-dropdown[b-53favc5946] {
position: absolute;
left: 10px; right: 10px;
top: calc(100% - 2px);
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
z-index: 200;
overflow: hidden;
border: 1px solid var(--border);
}
.sb-pd-header[b-53favc5946] {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
background: #f8fafc;
}
.sb-pd-name[b-53favc5946] { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-pd-meta[b-53favc5946] { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sb-pd-item[b-53favc5946] {
display: flex; align-items: center; gap: 9px;
padding: 9px 12px; cursor: pointer;
font-size: 13px; color: var(--text);
text-decoration: none;
background: none; border: none; width: 100%;
font-family: inherit; text-align: left;
transition: background 0.12s;
}
.sb-pd-item:hover[b-53favc5946] { background: #f1f5f9; }
.sb-pd-item i[b-53favc5946] { width: 16px; text-align: center; color: var(--muted); font-size: 15px; }
.sb-pd-divider[b-53favc5946] { height: 1px; background: var(--border); margin: 2px 0; }
.sb-pd-logout[b-53favc5946] { color: var(--danger) !important; }
.sb-pd-logout i[b-53favc5946] { color: var(--danger) !important; }
.sb-pd-logout:hover[b-53favc5946] { background: #fff5f5 !important; }
/* Nav */
.sb-nav[b-53favc5946] { flex: 1; overflow-y: auto; padding: 8px 0; }
.sb-nav[b-53favc5946]::-webkit-scrollbar { width: 3px; }
.sb-nav[b-53favc5946]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.sb-section-label[b-53favc5946] {
font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
color: var(--sb-section);
padding: 10px 14px 4px;
text-transform: uppercase;
}
/* Nav group trigger (parent item) */
.sb-nav-item[b-53favc5946] {
display: flex; align-items: center; gap: 9px;
padding: 9px 14px; cursor: pointer;
color: var(--sb-text);
font-size: 13px; transition: background 0.12s;
user-select: none; justify-content: space-between;
}
.sb-nav-item:hover[b-53favc5946] { background: var(--sb-hover); color: #fff; }
.sb-nav-item.active[b-53favc5946] { background: var(--sb-active); color: var(--sb-active-text); }
.sb-nav-item.active .sb-nav-icon[b-53favc5946] { color: #4e9cf5; }
.sb-nav-item-left[b-53favc5946] { display: flex; align-items: center; gap: 9px; }
.sb-nav-icon[b-53favc5946] { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.sb-label[b-53favc5946] { white-space: nowrap; }
.sb-chevron[b-53favc5946] { font-size: 12px; color: var(--sb-section); transition: transform 0.2s; }
.sb-chevron.open[b-53favc5946] { transform: rotate(180deg); }
/* Nav children */
.sb-nav-children[b-53favc5946] { }
.sb-nav-child[b-53favc5946] {
display: flex; align-items: center; gap: 8px;
padding: 7px 14px 7px 42px;
font-size: 12.5px; color: #8aa5c4; cursor: pointer;
transition: background 0.12s; border-left: 2px solid transparent;
text-decoration: none;
}
.sb-nav-child:hover[b-53favc5946] { background: var(--sb-hover); color: #d0dfee; border-left-color: rgba(255,255,255,0.15); }
.sb-nav-child.active[b-53favc5946] { color: #fff; background: rgba(26,86,167,0.25); border-left-color: #4e9cf5; }
.sb-nav-child[b-53favc5946]::before {
content: "";
width: 4px; height: 4px; border-radius: 50%;
background: currentColor; flex-shrink: 0; opacity: 0.5;
}
.sb-nav-child.active[b-53favc5946]::before { opacity: 1; background: #4e9cf5; }
/* Leaf nav item (no children) */
.sb-nav-leaf[b-53favc5946] { justify-content: flex-start; }
/* Footer collapse button */
.sb-footer[b-53favc5946] {
padding: 10px 14px;
border-top: 1px solid var(--sb-border);
flex-shrink: 0;
}
.sb-collapse-btn[b-53favc5946] {
display: flex; align-items: center; gap: 8px;
width: 100%; background: none; border: none; cursor: pointer;
color: var(--sb-section); font-size: 12px;
padding: 6px 0; transition: color 0.15s; font-family: inherit;
}
.sb-collapse-btn:hover[b-53favc5946] { color: #fff; }
/* ═══════════════════════════════
MAIN
═══════════════════════════════ */
.gains-main[b-53favc5946] {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* Topbar */
.gains-topbar[b-53favc5946] {
height: var(--topbar-h);
background: var(--card);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
padding: 0 20px;
flex-shrink: 0;
gap: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gains-topbar-left[b-53favc5946] { display: flex; align-items: center; gap: 12px; }
.gains-topbar-right[b-53favc5946] { display: flex; align-items: center; gap: 8px; }
.tb-hamburger[b-53favc5946] {
background: none; border: none; cursor: pointer;
color: var(--muted); font-size: 18px; padding: 4px;
display: flex; align-items: center;
border-radius: 6px; transition: background 0.12s;
}
.tb-hamburger:hover[b-53favc5946] { background: #f1f5f9; color: var(--text); }
/* Breadcrumb */
.gains-breadcrumb[b-53favc5946] { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.bc-parent[b-53favc5946] { color: var(--muted); }
.bc-sep[b-53favc5946] { font-size: 11px; color: #cbd5e1; }
.bc-current[b-53favc5946] { color: var(--text); font-weight: 600; }
/* FY selector */
.tb-fy-select[b-53favc5946] {
padding: 5px 10px; border-radius: var(--radius);
border: 1px solid var(--border); background: #f8fafc;
font-size: 12.5px; color: var(--text); cursor: pointer;
font-family: inherit;
}
.tb-fy-select:hover[b-53favc5946] { background: #f1f5f9; }
/* Icon button */
.tb-icon-btn[b-53favc5946] {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--border); background: #f8fafc;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 16px;
position: relative; transition: background 0.12s;
}
.tb-icon-btn:hover[b-53favc5946] { background: var(--primary-light); color: var(--primary); }
.tb-notif-dot[b-53favc5946] {
width: 8px; height: 8px; border-radius: 50%;
background: var(--danger); border: 2px solid #fff;
position: absolute; top: 2px; right: 2px;
}
/* Notifications panel */
.tb-notif-wrap[b-53favc5946] { position: relative; }
.tb-notif-panel[b-53favc5946] {
position: absolute; right: 0; top: calc(100% + 8px);
width: 300px; background: var(--card);
border-radius: var(--radius); border: 1px solid var(--border);
box-shadow: var(--shadow-md); z-index: 300; overflow: hidden;
}
.tb-notif-hdr[b-53favc5946] {
padding: 11px 14px; border-bottom: 1px solid var(--border);
font-size: 13px; font-weight: 600; color: var(--text);
display: flex; justify-content: space-between; align-items: center;
}
.tb-notif-mark[b-53favc5946] { font-size: 11px; color: var(--primary); cursor: pointer; font-weight: 400; background: none; border: none; font-family: inherit; }
.tb-notif-item[b-53favc5946] { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f8fafc; }
.tb-notif-item:last-child[b-53favc5946] { border-bottom: none; }
.tb-ndot[b-53favc5946] { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-top: 4px; flex-shrink: 0; }
.tb-ndot.read[b-53favc5946] { background: var(--border); }
.tb-ntext[b-53favc5946] { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.tb-ntime[b-53favc5946] { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* Topbar buttons */
.tb-btn[b-53favc5946] {
display: flex; align-items: center; gap: 6px;
padding: 6px 13px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--card);
cursor: pointer; font-size: 12.5px; color: var(--text);
font-family: inherit; transition: background 0.12s;
}
.tb-btn:hover[b-53favc5946] { background: #f1f5f9; }
.tb-btn.primary[b-53favc5946] { background: var(--primary); color: #fff; border-color: var(--primary); }
.tb-btn.primary:hover[b-53favc5946] { background: var(--primary-dark); }
/* User pill */
.tb-user-pill[b-53favc5946] { display: flex; align-items: center; gap: 8px; }
.tb-avatar[b-53favc5946] { width: 32px; height: 32px; font-size: 11px; }
.tb-user-name[b-53favc5946] { font-size: 13px; font-weight: 500; color: var(--text); }
/* ═══════════════════════════════
CONTENT
═══════════════════════════════ */
.gains-content[b-53favc5946] {
flex: 1;
overflow-y: auto;
padding: 20px;
background: var(--bg);
}
.gains-content[b-53favc5946]::-webkit-scrollbar { width: 4px; }
.gains-content[b-53favc5946]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* ═══════════════════════════════
LOGOUT MODAL
═══════════════════════════════ */
.gains-modal-overlay[b-53favc5946] {
position: fixed; inset: 0;
background: rgba(0,0,0,0.45);
z-index: 500;
display: flex; align-items: center; justify-content: center;
}
.gains-modal[b-53favc5946] {
background: var(--card);
border-radius: 14px;
padding: 30px 28px 24px;
width: 340px;
box-shadow: var(--shadow-md);
text-align: center;
}
.gains-modal-icon[b-53favc5946] { font-size: 40px; color: var(--danger); margin-bottom: 12px; }
.gains-modal-title[b-53favc5946] { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.gains-modal-sub[b-53favc5946] { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.gains-modal-actions[b-53favc5946] { display: flex; gap: 10px; justify-content: center; }
.gains-modal-btn[b-53favc5946] {
padding: 8px 24px; border-radius: var(--radius);
font-size: 13px; font-family: inherit;
cursor: pointer; font-weight: 600; transition: background 0.12s;
border: 1px solid var(--border);
}
.gains-modal-btn.cancel[b-53favc5946] { background: var(--card); color: var(--text); }
.gains-modal-btn.cancel:hover[b-53favc5946] { background: #f1f5f9; }
.gains-modal-btn.confirm[b-53favc5946] { background: var(--danger); color: #fff; border-color: var(--danger); }
.gains-modal-btn.confirm:hover[b-53favc5946] { background: #991b1b; }
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
/* =====================================================================
GAINS — DashboardLayout.razor.css (v2)
Pure SSR layout — all interactivity via app.js
===================================================================== */
/* ── Root tokens ── */
.gains-shell[b-5wcplwsv0q] {
--sb-w: 220px;
--sb-collapsed-w: 56px;
--topbar-h: 52px;
--footer-h: 44px;
--sb-bg: #0f2340;
--sb-text: #b8cbe4;
--sb-hover: #172d4a;
--sb-active: #1a3a5c;
--sb-border: rgba(255,255,255,0.07);
--primary: #1a56a7;
--primary-dark: #0f3d82;
--primary-light: #e6f0fb;
--bg: #f0f4f9;
--card: #ffffff;
--border: #dde3ed;
--text: #1a2537;
--muted: #64748b;
--danger: #b91c1c;
--danger-light: #fff5f5;
--radius: 8px;
--radius-lg: 12px;
--shadow: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.14);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.18);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 14px;
color: var(--text);
background: var(--bg);
}
/* ══════════════════════════════════════
SIDEBAR
══════════════════════════════════════ */
.gains-sidebar[b-5wcplwsv0q] {
width: var(--sb-w);
min-width: var(--sb-w);
background: var(--sb-bg);
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
transition: width 0.28s var(--ease), min-width 0.28s var(--ease);
flex-shrink: 0;
z-index: 100;
}
/* ── Collapsed state (JS adds .sb-collapsed to #gains-shell) ── */
.gains-shell.sb-collapsed .gains-sidebar[b-5wcplwsv0q] {
width: 0 !important;
min-width: 0 !important;
overflow: hidden;
border: none;
}
.gains-shell.sb-collapsed .sb-label[b-5wcplwsv0q] {
opacity: 0;
width: 0;
overflow: hidden;
pointer-events: none;
}
.gains-shell.sb-collapsed .sb-nav-children[b-5wcplwsv0q] {
display: none !important;
}
.gains-shell.sb-collapsed .sb-nav-item[b-5wcplwsv0q] {
justify-content: center;
padding: 10px 0;
}
.gains-shell.sb-collapsed .sb-section-label[b-5wcplwsv0q] {
opacity: 0;
}
.gains-shell.sb-collapsed .sb-profile-trigger[b-5wcplwsv0q] {
justify-content: center;
}
/* ── Logo ── */
.sb-logo[b-5wcplwsv0q] {
display: flex;
align-items: center;
align-self: flex-start;
gap: 8px;
width: fit-content;
margin: 14px 14px;
background: #1ab99a;
border: none;
cursor: pointer;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 9px 16px;
border-radius: 6px;
letter-spacing: 0.04em;
text-decoration: none;
text-align: left;
flex-shrink: 0;
transition: background 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(26,185,154,0.3);
}
.sb-logo:hover[b-5wcplwsv0q] {
background: #0e9e83;
}
.sb-logo i[b-5wcplwsv0q] {
font-size: 15px;
color: #fff;
}
.sb-label[b-5wcplwsv0q] {
transition: opacity 0.2s var(--ease), width 0.2s var(--ease);
}
.sb-logo-text[b-5wcplwsv0q] {
font-size: 13px;
font-weight: 600;
color: #fff;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* ══════════════════════════════════════
PROFILE BLOCK
══════════════════════════════════════ */
.sb-profile[b-5wcplwsv0q] {
padding: 12px 14px;
border-bottom: 1px solid var(--sb-border);
position: relative;
flex-shrink: 0;
}
.sb-profile-trigger[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
padding: 5px 6px;
border-radius: var(--radius);
transition: background 0.15s;
}
.sb-profile-trigger:hover[b-5wcplwsv0q] {
background: rgba(255,255,255,0.06);
}
.sb-avatar[b-5wcplwsv0q], .tb-avatar[b-5wcplwsv0q] {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary) 0%, #2472d4 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}
.sb-profile-info[b-5wcplwsv0q] {
flex: 1;
min-width: 0;
}
.sb-profile-name[b-5wcplwsv0q] {
font-size: 13px;
font-weight: 600;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sb-profile-role[b-5wcplwsv0q] {
font-size: 11px;
color: #6b8aaa;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sb-profile-caret[b-5wcplwsv0q] {
font-size: 12px;
color: #6b8aaa;
transition: transform 0.25s var(--ease);
flex-shrink: 0;
}
.sb-profile-caret.open[b-5wcplwsv0q] {
transform: rotate(180deg);
}
/* ── Profile Dropdown ── */
.sb-profile-dropdown[b-5wcplwsv0q] {
position: absolute;
left: 10px;
right: 10px;
top: calc(100% - 4px);
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 200;
border: 1px solid var(--border);
overflow: hidden;
/* Slide-down animation */
opacity: 0;
transform: translateY(-8px) scaleY(0.95);
transform-origin: top center;
pointer-events: none;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.sb-profile-dropdown.open[b-5wcplwsv0q] {
opacity: 1;
transform: translateY(0) scaleY(1);
pointer-events: all;
}
.sb-pd-header[b-5wcplwsv0q] {
padding: 12px 14px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, #f8fafc 0%, #f0f4f9 100%);
}
.sb-pd-avatar-row[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.sb-pd-avatar-lg[b-5wcplwsv0q] {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary) 0%, #2472d4 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.sb-pd-name[b-5wcplwsv0q] {
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.sb-pd-meta[b-5wcplwsv0q] {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
}
.sb-pd-meta i[b-5wcplwsv0q] {
font-size: 11px;
flex-shrink: 0;
}
.sb-pd-item[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
font-size: 13px;
color: var(--text);
text-decoration: none;
background: none;
border: none;
width: 100%;
font-family: inherit;
text-align: left;
transition: background 0.12s, padding-left 0.12s;
}
.sb-pd-item:hover[b-5wcplwsv0q] {
background: #f1f5f9;
padding-left: 18px;
}
.sb-pd-item i[b-5wcplwsv0q] {
width: 17px;
text-align: center;
color: var(--muted);
font-size: 15px;
flex-shrink: 0;
}
.sb-pd-divider[b-5wcplwsv0q] {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.sb-pd-logout[b-5wcplwsv0q] {
color: var(--danger) !important;
}
.sb-pd-logout i[b-5wcplwsv0q] {
color: var(--danger) !important;
}
.sb-pd-logout:hover[b-5wcplwsv0q] {
background: var(--danger-light) !important;
padding-left: 18px;
}
/* ══════════════════════════════════════
NAVIGATION
══════════════════════════════════════ */
.sb-nav[b-5wcplwsv0q] {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.sb-nav[b-5wcplwsv0q]::-webkit-scrollbar {
width: 3px;
}
.sb-nav[b-5wcplwsv0q]::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.sb-section-label[b-5wcplwsv0q] {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.8px;
color: #6b8aaa;
padding: 10px 14px 4px;
text-transform: uppercase;
transition: opacity 0.2s;
}
.sb-nav-item[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 14px;
cursor: pointer;
color: var(--sb-text);
font-size: 13px;
transition: background 0.12s, color 0.12s;
user-select: none;
justify-content: space-between;
}
.sb-nav-item:hover[b-5wcplwsv0q] {
background: var(--sb-hover);
color: #fff;
}
.sb-nav-item.active[b-5wcplwsv0q] {
background: var(--sb-active);
color: #fff;
}
.sb-nav-item.active .sb-nav-icon[b-5wcplwsv0q] {
color: #4e9cf5;
}
.sb-nav-item-left[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 9px;
}
.sb-nav-icon[b-5wcplwsv0q] {
font-size: 16px;
width: 18px;
text-align: center;
flex-shrink: 0;
}
.sb-chevron[b-5wcplwsv0q] {
font-size: 12px;
color: #6b8aaa;
transition: transform 0.25s var(--ease);
}
.sb-chevron.open[b-5wcplwsv0q] {
transform: rotate(180deg);
}
/* ── Nav children (smooth accordion) ── */
.sb-nav-children[b-5wcplwsv0q] {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s var(--ease), opacity 0.2s;
opacity: 0;
}
.sb-nav-children.open[b-5wcplwsv0q] {
max-height: 600px; /* large enough for any group */
opacity: 1;
}
.sb-nav-child[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 42px;
font-size: 12.5px;
color: #8aa5c4;
cursor: pointer;
transition: background 0.12s, border-left-color 0.12s, color 0.12s;
border-left: 2px solid transparent;
text-decoration: none;
}
.sb-nav-child:hover[b-5wcplwsv0q] {
background: var(--sb-hover);
color: #d0dfee;
border-left-color: rgba(255,255,255,0.15);
}
.sb-nav-child.active[b-5wcplwsv0q] {
color: #fff;
background: rgba(26,86,167,0.25);
border-left-color: #4e9cf5;
}
.sb-nav-child[b-5wcplwsv0q]::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
opacity: 0.5;
}
.sb-nav-child.active[b-5wcplwsv0q]::before {
opacity: 1;
background: #4e9cf5;
}
.sb-nav-leaf[b-5wcplwsv0q] {
justify-content: flex-start;
}
/* ── Sidebar footer (collapse btn) ── */
.sb-footer[b-5wcplwsv0q] {
padding: 0px 14px;
border-top: 1px solid var(--sb-border);
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sb-help-btn[b-5wcplwsv0q] {
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
width: 100%;
height: var(--footer-h);
box-sizing: border-box;
padding: 0 12px;
border: none;
background: none;
color: #b9c9dc;
text-decoration: none;
transition: color 0.15s;
}
.sb-help-btn:hover[b-5wcplwsv0q] {
color: #fff;
}
.sb-help-icon[b-5wcplwsv0q] {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid currentColor;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;
}
.sb-help-text[b-5wcplwsv0q] {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
}
.gains-shell.sb-collapsed .sb-help-btn[b-5wcplwsv0q] {
padding: 0;
}
.gains-shell.sb-collapsed .sb-help-text[b-5wcplwsv0q] {
display: none;
}
.sb-collapse-btn[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: none;
border: none;
cursor: pointer;
color: #6b8aaa;
font-size: 12px;
padding: 6px 0;
transition: color 0.15s;
font-family: inherit;
}
.sb-collapse-btn:hover[b-5wcplwsv0q] {
color: #fff;
}
.gains-shell.sb-collapsed .sb-collapse-btn[b-5wcplwsv0q] {
justify-content: center;
}
/* ══════════════════════════════════════
MAIN AREA
══════════════════════════════════════ */
.gains-main[b-5wcplwsv0q] {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* ── Topbar ── */
.gains-topbar[b-5wcplwsv0q] {
height: var(--topbar-h);
background: var(--card);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
flex-shrink: 0;
gap: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gains-topbar-left[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 12px;
}
.gains-topbar-right[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 8px;
}
/* ── GAINS branded sidebar toggle — exact match to old ASPX green button ── */
.tb-gains-toggle[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 7px;
background: #1ab99a;
border: none;
cursor: pointer;
color: #fff;
font-size: 13px;
font-weight: 200;
padding: 6px 13px;
border-radius: 6px;
font-family: inherit;
letter-spacing: 0.04em;
transition: background 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(26,185,154,0.3);
white-space: nowrap;
user-select: none;
flex-shrink: 0;
}
.tb-gains-toggle:hover[b-5wcplwsv0q] {
background: #0e9e83;
box-shadow: 0 3px 10px rgba(26,185,154,0.4);
}
.tb-gains-toggle:active[b-5wcplwsv0q] {
background: #0b8a72;
box-shadow: none;
}
.tb-toggle-icon[b-5wcplwsv0q] {
font-size: 16px;
display: flex;
align-items: center;
}
.tb-toggle-label[b-5wcplwsv0q] {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.06em;
}
.gains-breadcrumb[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
}
.bc-parent[b-5wcplwsv0q] {
color: var(--muted);
}
.bc-sep[b-5wcplwsv0q] {
font-size: 11px;
color: #cbd5e1;
}
.bc-current[b-5wcplwsv0q] {
color: var(--text);
font-weight: 600;
}
.tb-fy-badge[b-5wcplwsv0q] {
padding: 5px 10px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: #f8fafc;
font-size: 12.5px;
color: var(--text);
}
.tb-icon-btn[b-5wcplwsv0q] {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--border);
background: #f8fafc;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: 16px;
position: relative;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tb-icon-btn:hover[b-5wcplwsv0q] {
background: var(--primary-light);
color: var(--primary);
border-color: #b8d4f5;
}
.tb-notif-dot[b-5wcplwsv0q] {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--danger);
border: 2px solid var(--card);
position: absolute;
top: 2px;
right: 2px;
transition: transform 0.2s;
}
.tb-notif-dot.hidden[b-5wcplwsv0q] {
display: none;
}
.tb-notif-wrap:hover .tb-notif-dot[b-5wcplwsv0q] {
transform: scale(1.2);
}
/* ── Notifications panel ── */
.tb-notif-wrap[b-5wcplwsv0q] {
position: relative;
}
.tb-notif-panel[b-5wcplwsv0q] {
position: absolute;
right: 0;
top: calc(100% + 10px);
width: 310px;
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-lg);
z-index: 300;
overflow: hidden;
opacity: 0;
transform: translateY(-8px) scale(0.97);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.tb-notif-panel.open[b-5wcplwsv0q] {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
}
.tb-notif-hdr[b-5wcplwsv0q] {
padding: 12px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
color: var(--text);
display: flex;
justify-content: space-between;
align-items: center;
background: #f8fafc;
}
.tb-notif-mark[b-5wcplwsv0q] {
font-size: 11px;
color: var(--primary);
cursor: pointer;
font-weight: 500;
background: none;
border: none;
font-family: inherit;
padding: 3px 8px;
border-radius: 4px;
transition: background 0.12s;
}
.tb-notif-mark:hover[b-5wcplwsv0q] {
background: var(--primary-light);
}
.tb-notif-item[b-5wcplwsv0q] {
display: flex;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
transition: background 0.12s;
cursor: pointer;
}
.tb-notif-item:last-child[b-5wcplwsv0q] {
border-bottom: none;
}
.tb-notif-item:hover[b-5wcplwsv0q] {
background: #f8fafc;
}
.tb-ndot[b-5wcplwsv0q] {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--primary);
margin-top: 5px;
flex-shrink: 0;
}
.tb-ndot.read[b-5wcplwsv0q] {
background: var(--border);
}
.tb-ntext[b-5wcplwsv0q] {
font-size: 12.5px;
color: var(--text);
line-height: 1.4;
}
.tb-ntime[b-5wcplwsv0q] {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
/* ── Topbar buttons ── */
.tb-btn[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 13px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--card);
cursor: pointer;
font-size: 12.5px;
color: var(--text);
font-family: inherit;
transition: background 0.12s, border-color 0.12s;
}
.tb-btn:hover[b-5wcplwsv0q] {
background: #f1f5f9;
border-color: #c7d2e0;
}
.tb-user-pill[b-5wcplwsv0q] {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
padding: 5px 8px;
border-radius: var(--radius);
transition: background 0.15s;
}
.tb-user-pill:hover[b-5wcplwsv0q] {
background: #f1f5f9;
}
.tb-avatar[b-5wcplwsv0q] {
width: 32px;
height: 32px;
font-size: 11px;
}
.tb-user-name[b-5wcplwsv0q] {
font-size: 13px;
font-weight: 500;
color: var(--text);
}
/* ── Topbar Profile Dropdown ── */
.tb-profile-wrap[b-5wcplwsv0q] {
position: relative;
flex-shrink: 0;
}
.tb-profile-caret[b-5wcplwsv0q] {
font-size: 12px;
color: var(--muted);
transition: transform 0.25s var(--ease);
flex-shrink: 0;
}
.tb-profile-caret.open[b-5wcplwsv0q] {
transform: rotate(180deg);
}
.tb-profile-dropdown[b-5wcplwsv0q] {
position: absolute;
right: 0;
top: calc(100% + 8px);
width: 280px;
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 200;
border: 1px solid var(--border);
overflow: hidden;
opacity: 0;
transform: translateY(-8px) scaleY(0.95);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.tb-profile-dropdown.open[b-5wcplwsv0q] {
opacity: 1;
transform: translateY(0) scaleY(1);
pointer-events: all;
}
/* ── Content area ── */
.gains-content[b-5wcplwsv0q] {
flex: 1;
overflow-y: auto;
padding: 0;
background: var(--bg);
}
.gains-content[b-5wcplwsv0q]::-webkit-scrollbar {
width: 4px;
}
.gains-content[b-5wcplwsv0q]::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
/* ── Footer ── */
.gains-footer[b-5wcplwsv0q] {
flex-shrink: 0;
height: var(--footer-h);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
text-align: center;
font-size: 12px;
color: var(--text-muted, #6b7280);
background: var(--card);
border-top: 1px solid var(--border);
}
/* ══════════════════════════════════════
LOGOUT MODAL (improved)
══════════════════════════════════════ */
.gains-modal-overlay[b-5wcplwsv0q] {
display: flex; /* always flex — visibility via opacity/pointer-events */
position: fixed;
inset: 0;
background: rgba(15, 35, 64, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 500;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s var(--ease), backdrop-filter 0.22s;
}
.gains-modal-overlay.open[b-5wcplwsv0q] {
opacity: 1;
pointer-events: all;
}
.gains-modal[b-5wcplwsv0q] {
background: var(--card);
border-radius: 18px;
padding: 32px 28px 26px;
width: 360px;
max-width: calc(100vw - 32px);
box-shadow: var(--shadow-lg);
text-align: center;
transform: scale(0.88) translateY(12px);
transition: transform 0.25s var(--ease);
}
.gains-modal-overlay.open .gains-modal[b-5wcplwsv0q] {
transform: scale(1) translateY(0);
}
/* Icon circle */
.gains-modal-icon-wrap[b-5wcplwsv0q] {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
box-shadow: 0 0 0 8px #fee2e233;
}
.gains-modal-icon[b-5wcplwsv0q] {
font-size: 28px;
color: var(--danger);
line-height: 1;
}
.gains-modal-title[b-5wcplwsv0q] {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.gains-modal-sub[b-5wcplwsv0q] {
font-size: 13.5px;
color: var(--muted);
margin-bottom: 26px;
line-height: 1.5;
}
.gains-modal-actions[b-5wcplwsv0q] {
display: flex;
gap: 10px;
justify-content: center;
}
.gains-modal-btn[b-5wcplwsv0q] {
padding: 10px 28px;
border-radius: var(--radius);
font-size: 13.5px;
font-family: inherit;
cursor: pointer;
font-weight: 600;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
border: 1px solid var(--border);
min-width: 110px;
}
.gains-modal-btn:active[b-5wcplwsv0q] {
transform: scale(0.97);
}
.gains-modal-btn.cancel[b-5wcplwsv0q] {
background: var(--card);
color: var(--text);
}
.gains-modal-btn.cancel:hover[b-5wcplwsv0q] {
background: #f1f5f9;
}
.gains-modal-btn.confirm[b-5wcplwsv0q] {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #fff;
border-color: #dc2626;
box-shadow: 0 2px 8px rgba(185,28,28,0.35);
}
.gains-modal-btn.confirm:hover[b-5wcplwsv0q] {
background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
box-shadow: 0 4px 14px rgba(185,28,28,0.45);
}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
.gains-shell[b-5wcplwsv0q] {
--sb-w: 200px;
}
.tb-user-name[b-5wcplwsv0q], .tb-btn-label[b-5wcplwsv0q] {
display: none;
}
.tb-toggle-label[b-5wcplwsv0q] {
display: none;
}
.tb-gains-toggle[b-5wcplwsv0q] {
padding: 6px 10px;
}
}
/* Hide all sidebar content when fully collapsed */
.gains-shell.sb-collapsed .sb-label[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-nav-children[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-section-label[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-profile[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-nav[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-logo[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-footer[b-5wcplwsv0q] {
opacity: 0;
pointer-events: none;
}
/* ── Level-3 nav (Masters sub-categories) ── */
.sb-nav-sub[b-5wcplwsv0q] {
padding: 7px 14px 7px 32px !important;
font-size: 12.5px;
}
.sb-nav-icon-sm[b-5wcplwsv0q] {
font-size: 14px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.sb-nav-children-l3 .sb-nav-child[b-5wcplwsv0q] {
padding-left: 54px;
font-size: 12px;
color: #7a9ab8;
border-left: 2px solid transparent;
}
.sb-nav-children-l3 .sb-nav-child:hover[b-5wcplwsv0q] {
background: var(--sb-hover);
color: #c8ddf0;
border-left-color: rgba(255,255,255,0.1);
}
.sb-nav-children-l3 .sb-nav-child.active[b-5wcplwsv0q] {
color: #fff;
background: rgba(26,86,167,0.2);
border-left-color: #4e9cf5;
}
.sb-nav-children-l3 .sb-nav-child[b-5wcplwsv0q]::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
opacity: 0.4;
}
/* Siddharth 29 JUN 2026 16 :56 */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =====================================================
GAINS — MainLayout.razor.css
===================================================== */
.gains-layout[b-buakehe8mn] {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
}
/* Blazor error UI */
#blazor-error-ui[b-buakehe8mn] {
background: #fef2f2;
border-top: 1px solid #fecaca;
color: #b91c1c;
display: none;
font-size: 14px;
padding: 10px 16px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
}
#blazor-error-ui .reload[b-buakehe8mn] {
color: #1AB99A;
font-weight: 600;
margin-left: 8px;
text-decoration: none;
}
#blazor-error-ui .dismiss[b-buakehe8mn] {
cursor: pointer;
float: right;
font-weight: bold;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5nvn20xp0v],
.components-reconnect-repeated-attempt-visible[b-5nvn20xp0v],
.components-reconnect-failed-visible[b-5nvn20xp0v],
.components-pause-visible[b-5nvn20xp0v],
.components-resume-failed-visible[b-5nvn20xp0v],
.components-rejoining-animation[b-5nvn20xp0v] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-retrying[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-failed[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5nvn20xp0v] {
display: block;
}
#components-reconnect-modal[b-5nvn20xp0v] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-5nvn20xp0v 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-5nvn20xp0v 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5nvn20xp0v 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-5nvn20xp0v]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-5nvn20xp0v 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-5nvn20xp0v {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-5nvn20xp0v {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-5nvn20xp0v {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-5nvn20xp0v] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-5nvn20xp0v] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-5nvn20xp0v] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-5nvn20xp0v] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-5nvn20xp0v] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-5nvn20xp0v] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-5nvn20xp0v] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-5nvn20xp0v 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-5nvn20xp0v] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-5nvn20xp0v {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* =====================================================================
GAINS — Dashboard.razor.css (page-scoped styles)
===================================================================== */
.dash-page[b-uvd6ide2bl] { display: flex; flex-direction: column; gap: 16px; }
/* ── Page header ── */
.dash-hdr[b-uvd6ide2bl] { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.dash-title[b-uvd6ide2bl] { font-size: 20px; font-weight: 700; color: #1a2537; margin: 0; }
.dash-sub[b-uvd6ide2bl] { font-size: 12px; color: #64748b; margin: 2px 0 0; }
.dash-hdr-actions[b-uvd6ide2bl] { display: flex; gap: 8px; }
.dash-btn[b-uvd6ide2bl] {
display: flex; align-items: center; gap: 6px;
padding: 7px 13px; border-radius: 8px;
border: 1px solid #dde3ed; background: #fff;
cursor: pointer; font-size: 12.5px; color: #1a2537;
font-family: inherit; transition: background 0.12s;
}
.dash-btn:hover[b-uvd6ide2bl] { background: #f1f5f9; }
.dash-btn.primary[b-uvd6ide2bl] { background: #1a56a7; color: #fff; border-color: #1a56a7; }
.dash-btn.primary:hover[b-uvd6ide2bl] { background: #0f3d82; }
/* ── Stats row ── */
.dash-stats[b-uvd6ide2bl] { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.dash-stat-card[b-uvd6ide2bl] {
background: #fff; border: 1px solid #dde3ed;
border-radius: 8px; padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dash-stat-top[b-uvd6ide2bl] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.dash-stat-icon[b-uvd6ide2bl] {
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 17px;
}
.dash-stat-icon.blue[b-uvd6ide2bl] { background: #e0f2fe; color: #0369a1; }
.dash-stat-icon.green[b-uvd6ide2bl] { background: #dcfce7; color: #16a34a; }
.dash-stat-icon.amber[b-uvd6ide2bl] { background: #fef3c7; color: #b45309; }
.dash-stat-icon.red[b-uvd6ide2bl] { background: #fee2e2; color: #b91c1c; }
.dash-trend[b-uvd6ide2bl] {
font-size: 11px; font-weight: 600;
padding: 2px 6px; border-radius: 4px;
display: inline-flex; align-items: center; gap: 2px;
}
.dash-trend.up[b-uvd6ide2bl] { background: #dcfce7; color: #16a34a; }
.dash-trend.down[b-uvd6ide2bl] { background: #fee2e2; color: #b91c1c; }
.dash-trend.neutral[b-uvd6ide2bl] { background: #f1f5f9; color: #64748b; }
.dash-stat-val[b-uvd6ide2bl] { font-size: 22px; font-weight: 700; color: #1a2537; }
.dash-stat-label[b-uvd6ide2bl] { font-size: 12px; color: #64748b; margin-top: 2px; }
/* ── Card ── */
.dash-card[b-uvd6ide2bl] {
background: #fff; border: 1px solid #dde3ed;
border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
overflow: hidden;
}
.dash-card-hdr[b-uvd6ide2bl] {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 16px 11px; border-bottom: 1px solid #dde3ed;
}
.dash-card-title[b-uvd6ide2bl] { font-size: 13px; font-weight: 600; color: #1a2537; }
.dash-card-action[b-uvd6ide2bl] { font-size: 12px; color: #1a56a7; text-decoration: none; cursor: pointer; }
.dash-card-action:hover[b-uvd6ide2bl] { text-decoration: underline; }
.dash-card-body[b-uvd6ide2bl] { padding: 14px 16px; }
/* ── Panels row ── */
.dash-panels[b-uvd6ide2bl] { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
/* Bar chart */
.dash-bar-row[b-uvd6ide2bl] { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dash-bar-row:last-child[b-uvd6ide2bl] { margin-bottom: 0; }
.dash-bar-label[b-uvd6ide2bl] { font-size: 12px; color: #64748b; width: 110px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track[b-uvd6ide2bl] { flex: 1; height: 7px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.dash-bar-fill[b-uvd6ide2bl] { height: 100%; border-radius: 4px; }
.dash-bar-amt[b-uvd6ide2bl] { font-size: 12px; color: #1a2537; font-weight: 600; width: 52px; text-align: right; }
/* Activity */
.dash-act-item[b-uvd6ide2bl] { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.dash-act-item:last-child[b-uvd6ide2bl] { border-bottom: none; padding-bottom: 0; }
.dash-act-dot[b-uvd6ide2bl] { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.dash-act-dot.blue[b-uvd6ide2bl] { background: #1a56a7; }
.dash-act-dot.green[b-uvd6ide2bl] { background: #16a34a; }
.dash-act-dot.amber[b-uvd6ide2bl] { background: #d97706; }
.dash-act-dot.red[b-uvd6ide2bl] { background: #b91c1c; }
.dash-act-text[b-uvd6ide2bl] { font-size: 12.5px; color: #1a2537; line-height: 1.4; }
.dash-act-meta[b-uvd6ide2bl] { font-size: 11px; color: #64748b; margin-top: 2px; }
/* ── Bottom row ── */
.dash-bottom[b-uvd6ide2bl] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* Table */
.dash-table[b-uvd6ide2bl] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dash-table th[b-uvd6ide2bl] {
text-align: left; font-weight: 600; font-size: 11px;
color: #64748b; padding: 8px 12px;
border-bottom: 1px solid #dde3ed;
text-transform: uppercase; letter-spacing: 0.4px;
}
.dash-table td[b-uvd6ide2bl] { padding: 8px 12px; border-bottom: 1px solid #f8fafc; color: #1a2537; }
.dash-table tr:last-child td[b-uvd6ide2bl] { border-bottom: none; }
.dash-table tr:hover td[b-uvd6ide2bl] { background: #f8fafc; }
/* Badges */
.dash-badge[b-uvd6ide2bl] {
display: inline-flex; align-items: center;
font-size: 10.5px; font-weight: 600; padding: 2px 8px;
border-radius: 12px;
}
.dash-badge.approved[b-uvd6ide2bl] { background: #dcfce7; color: #16a34a; }
.dash-badge.pending[b-uvd6ide2bl] { background: #fef3c7; color: #b45309; }
.dash-badge.overdue[b-uvd6ide2bl] { background: #fee2e2; color: #b91c1c; }
.dash-badge.review[b-uvd6ide2bl] { background: #e0f2fe; color: #0369a1; }
/* AR/AP */
.dash-arap-block[b-uvd6ide2bl] { margin-bottom: 10px; }
.dash-arap-block:last-child[b-uvd6ide2bl] { margin-bottom: 0; }
.dash-arap-label[b-uvd6ide2bl] { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.dash-arap-val[b-uvd6ide2bl] { font-size: 20px; font-weight: 700; }
.dash-arap-val.green[b-uvd6ide2bl] { color: #16a34a; }
.dash-arap-val.red[b-uvd6ide2bl] { color: #b91c1c; }
.dash-arap-val.blue[b-uvd6ide2bl] { color: #1a56a7; }
.dash-arap-sub[b-uvd6ide2bl] { font-size: 11px; color: #64748b; margin-top: 2px; }
.dash-divider[b-uvd6ide2bl] { height: 1px; background: #dde3ed; margin: 10px 0; }
/* Quick access */
.dash-qa-grid[b-uvd6ide2bl] { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dash-qa-btn[b-uvd6ide2bl] {
display: flex; align-items: center; gap: 7px;
padding: 8px 10px; border-radius: 8px;
border: 1px solid #dde3ed; background: #fff;
cursor: pointer; font-size: 12px; color: #1a2537;
font-family: inherit; transition: background 0.12s, border-color 0.12s;
text-align: left;
}
.dash-qa-btn:hover[b-uvd6ide2bl] { background: #e6f0fb; border-color: #93c4ef; color: #1a56a7; }
.dash-qa-btn i[b-uvd6ide2bl] { font-size: 15px; color: #1a56a7; }
/* Role tags */
.dash-role-tags[b-uvd6ide2bl] { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid #dde3ed; }
.dash-role-tag[b-uvd6ide2bl] {
font-size: 10.5px; padding: 3px 8px;
border-radius: 4px;
background: #e6f0fb; color: #1a56a7; font-weight: 600;
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.dash-stats[b-uvd6ide2bl] { grid-template-columns: repeat(2, 1fr); }
.dash-bottom[b-uvd6ide2bl] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
.dash-panels[b-uvd6ide2bl] { grid-template-columns: 1fr; }
.dash-bottom[b-uvd6ide2bl] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Landing/GainsLanding.razor.rz.scp.css */
/*
GainsLanding.razor.css
Scoped to the landing page content only.
DashboardLayout provides the sidebar, topbar, and gains-content wrapper.
No gl-root / gl-topbar / gl-sidebar / gl-body / gl-main rules here.
*/
/* ── Page-level flex column so site-strip + welcome + scroll + footer stack ── */
:root[b-dv6ihzvhpq], .gains-content[b-dv6ihzvhpq] {
--gl-teal: #1AB99A;
}
/* Self-contained flex column wrapper owned by this page — doesn't depend
on DashboardLayout's internal class names, so the footer reliably pins
to the true bottom of the viewport regardless of how the layout shell
is structured. */
.gl-page[b-dv6ihzvhpq] {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
/* Kept as a defensive fallback in case DashboardLayout still wraps pages
in an element with this class — harmless no-op otherwise. */
:deep(.gains-content)[b-dv6ihzvhpq] {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
/* ── Site strip ── */
.gl-site-strip[b-dv6ihzvhpq] {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10px 20px 8px;
background: #fff;
border-bottom: 1px solid #dde3ed;
flex-shrink: 0;
flex-wrap: wrap;
gap: 8px;
}
/* .gl-site-strip-left-wrap and .gl-gains-toggle now live in
common-page-chrome.css (aliased alongside .bspl-title-left /
.bspl-gains-toggle) */
.gl-site-strip-left[b-dv6ihzvhpq] {
display: flex;
flex-direction: column;
gap: 2px;
}
.gl-site-strip-name[b-dv6ihzvhpq] {
font-size: 14px;
font-weight: 700;
color: #1AB99A;
cursor: pointer;
letter-spacing: 0.02em;
transition: opacity 0.15s;
}
.gl-site-strip-name:hover[b-dv6ihzvhpq] {
opacity: 0.8;
text-decoration: underline;
}
.gl-site-strip-period[b-dv6ihzvhpq] {
font-size: 11.5px;
color: #64748b;
}
.gl-set-default-btn[b-dv6ihzvhpq] {
background: none;
border: none;
padding: 0;
margin-top: 4px;
font-size: 11.5px;
font-weight: 700;
color: #1AB99A;
cursor: pointer;
font-family: inherit;
letter-spacing: 0.04em;
transition: opacity 0.15s;
}
.gl-set-default-btn:hover[b-dv6ihzvhpq] {
opacity: 0.75;
}
.gl-site-strip-right[b-dv6ihzvhpq] {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.gl-change-period-label[b-dv6ihzvhpq] {
font-size: 11.5px;
color: #64748b;
margin-right: 2px;
font-weight: 500;
}
.gl-period-btn[b-dv6ihzvhpq] {
padding: 4px 11px;
border-radius: 4px;
border: 1px solid #dde3ed;
background: #fff;
font-size: 12px;
font-family: inherit;
color: #374151;
cursor: pointer;
transition: background 0.12s;
}
.gl-period-btn:hover[b-dv6ihzvhpq] {
background: #f0f4f9;
}
.gl-period-btn.active[b-dv6ihzvhpq] {
border-color: #9ca3af;
font-weight: 500;
}
/* ── Welcome bar ── */
.gl-welcome-bar[b-dv6ihzvhpq] {
background: #f0fdf9;
border-bottom: 1px solid #a7f3d0;
padding: 6px 20px;
font-size: 12px;
color: #374151;
flex-shrink: 0;
}
.gl-welcome-bar strong[b-dv6ihzvhpq] {
color: #1AB99A;
font-weight: 700;
}
/* ── Error banner ── */
.gl-error-banner[b-dv6ihzvhpq] {
background: #fef2f2;
color: #b91c1c;
border-bottom: 1px solid #fecaca;
padding: 8px 20px;
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* ── Scrollable content area ── */
.gl-content-scroll[b-dv6ihzvhpq] {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.gl-content-scroll[b-dv6ihzvhpq]::-webkit-scrollbar {
width: 4px;
}
.gl-content-scroll[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
background: #dde3ed;
border-radius: 4px;
}
/* ── Loading ── */
.gl-loading-center[b-dv6ihzvhpq] {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
color: #1AB99A;
}
.gl-spin[b-dv6ihzvhpq] {
animation: gl-spin-b-dv6ihzvhpq 0.85s linear infinite;
display: inline-block;
}
.gl-spin-lg[b-dv6ihzvhpq] {
font-size: 32px;
}
@keyframes gl-spin-b-dv6ihzvhpq {
to {
transform: rotate(360deg);
}
}
/* .gl-footer now lives in common-page-chrome.css (aliased alongside .bspl-footer) */
.gl-footer-link[b-dv6ihzvhpq] {
color: #1AB99A;
text-decoration: none;
font-weight: 500;
}
.gl-footer-link:hover[b-dv6ihzvhpq] {
text-decoration: underline;
}
/* ── Dashboard grid ── */
.gl-dashboard[b-dv6ihzvhpq] {
display: flex;
flex-direction: row;
gap: 14px;
padding: 16px 20px;
align-items: stretch; /* both columns same total height */
}
.gl-left-col[b-dv6ihzvhpq],
.gl-right-col[b-dv6ihzvhpq] {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
min-width: 0;
}
/* Stats and Login details grow equally to fill mid row */
.gl-card-stats[b-dv6ihzvhpq],
.gl-card-login[b-dv6ihzvhpq] {
flex: 1;
}
/* Vouchers and Monthly grow equally to fill bottom row */
.gl-card-vouchers[b-dv6ihzvhpq],
.gl-card-monthly[b-dv6ihzvhpq] {
flex: 1;
}
.gl-col-span-2[b-dv6ihzvhpq] {
width: 100%;
}
/* ── Cards ── */
.gl-card[b-dv6ihzvhpq] {
background: #fff;
border-radius: 10px;
border: 0.5px solid #dde3ed;
}
.gl-card-site[b-dv6ihzvhpq], .gl-card-login[b-dv6ihzvhpq], .gl-card-stats[b-dv6ihzvhpq], .gl-card-monthly[b-dv6ihzvhpq], .gl-card-vouchers[b-dv6ihzvhpq] {
display: flex;
flex-direction: column;
}
/* Row 1 fixed height */
.gl-card-site[b-dv6ihzvhpq] {
height: 240px;
}
.gl-card-login[b-dv6ihzvhpq] {
flex: 1;
min-height: 0;
}
.gl-card-site .gl-info-table-wrap[b-dv6ihzvhpq] {
flex: 1;
overflow-y: auto;
min-height: 0;
height: 100%;
}
.gl-card-site .gl-info-table-wrap[b-dv6ihzvhpq]::-webkit-scrollbar {
width: 3px;
}
.gl-card-site .gl-info-table-wrap[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
background: #dde3ed;
border-radius: 3px;
}
.gl-card-login .gl-login-scroll[b-dv6ihzvhpq] {
max-height: 220px;
overflow-y: auto;
min-height: 0;
}
.gl-card-login .gl-login-scroll[b-dv6ihzvhpq]::-webkit-scrollbar {
width: 3px;
}
.gl-card-login .gl-login-scroll[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
background: #dde3ed;
border-radius: 3px;
}
.gl-card-login .gl-rtable td[b-dv6ihzvhpq] {
padding: 5px 14px;
font-size: 12px;
}
.gl-card-login .gl-rtable th[b-dv6ihzvhpq] {
padding: 5px 14px;
font-size: 10.5px;
position: sticky;
top: 0;
z-index: 1;
background: #fafafa;
}
.gl-card-stats[b-dv6ihzvhpq] {
justify-content: flex-start;
}
.gl-card-monthly .gl-months[b-dv6ihzvhpq] {
flex: 1;
}
.gl-card-vouchers .gl-vtypes[b-dv6ihzvhpq] {
flex: 1;
overflow-y: auto;
max-height: 160px;
}
.gl-card-vouchers .gl-vtypes[b-dv6ihzvhpq]::-webkit-scrollbar {
width: 3px;
}
.gl-card-vouchers .gl-vtypes[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
background: #dde3ed;
border-radius: 3px;
}
/* ── Card header ── */
.gl-card-hdr[b-dv6ihzvhpq] {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
color: #374151;
border-bottom: 0.5px solid #f3f4f6;
background: #fafafa;
}
.gl-card-hdr i[b-dv6ihzvhpq] {
color: #1AB99A;
}
.gl-card-hdr small[b-dv6ihzvhpq] {
font-size: 11px;
font-weight: 400;
color: #9ca3af;
}
/* ── Info table ── */
.gl-info-table[b-dv6ihzvhpq] {
width: 100%;
border-collapse: collapse;
}
.gl-info-table tr[b-dv6ihzvhpq] {
border-bottom: 0.5px solid #f3f4f6;
}
.gl-info-table tr:last-child[b-dv6ihzvhpq] {
border-bottom: none;
}
.gl-info-table td[b-dv6ihzvhpq] {
padding: 5px 14px;
font-size: 12.5px;
vertical-align: middle;
}
.gl-info-icon[b-dv6ihzvhpq] {
width: 32px;
color: #9ca3af;
font-size: 15px;
text-align: center;
}
.gl-info-key[b-dv6ihzvhpq] {
color: #9ca3af;
font-weight: 400;
width: 80px;
font-size: 12px;
}
.gl-info-val[b-dv6ihzvhpq] {
color: #374151;
font-weight: 400;
}
.gl-info-val.gl-teal[b-dv6ihzvhpq] {
color: #1AB99A !important;
font-weight: 500;
}
/* ── Password row ── */
.gl-pwd[b-dv6ihzvhpq] {
color: #9ca3af !important;
font-size: 11px !important;
font-style: italic;
font-weight: 400 !important;
}
.gl-pwd-row[b-dv6ihzvhpq] {
cursor: pointer;
transition: background 0.12s;
}
.gl-pwd-row:hover[b-dv6ihzvhpq] {
background: #f8fafc;
}
.gl-pwd-change-hint[b-dv6ihzvhpq] {
margin-left: 10px;
font-size: 11px;
color: #1AB99A;
font-weight: 600;
border: 0.5px solid #1AB99A;
border-radius: 4px;
padding: 1px 7px;
opacity: 0;
transition: opacity 0.15s;
}
.gl-pwd-row:hover .gl-pwd-change-hint[b-dv6ihzvhpq] {
opacity: 1;
}
/* ── Stats ── */
.gl-stat-row[b-dv6ihzvhpq] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-bottom: 0.5px solid #f3f4f6;
font-size: 12.5px;
}
.gl-stat-row:last-child[b-dv6ihzvhpq] {
border-bottom: none;
}
.gl-stat-icon[b-dv6ihzvhpq] {
width: 26px;
height: 26px;
border-radius: 6px;
background: #f0f4f9;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #1AB99A;
flex-shrink: 0;
}
.gl-stat-key[b-dv6ihzvhpq] {
flex: 1;
color: #374151;
}
.gl-stat-val[b-dv6ihzvhpq] {
font-weight: 700;
color: #1AB99A;
}
/* ── Voucher types ── */
.gl-vtypes[b-dv6ihzvhpq] {
padding: 8px 14px;
}
.gl-vtype-row[b-dv6ihzvhpq] {
display: grid;
grid-template-columns: 60px 1fr 60px 1fr;
gap: 4px;
padding: 4px 0;
border-bottom: 0.5px solid #f9fafb;
font-size: 12px;
}
.gl-vtype-row:last-child[b-dv6ihzvhpq] {
border-bottom: none;
}
.gl-vt-key[b-dv6ihzvhpq] {
color: #374151;
font-weight: 600;
}
.gl-vt-val[b-dv6ihzvhpq] {
color: #1AB99A;
font-weight: 700;
text-align: right;
padding-right: 10px;
}
/* ── FY buttons ── */
.gl-fy-btns[b-dv6ihzvhpq] {
display: flex;
gap: 6px;
padding: 10px 14px;
border-top: 0.5px solid #f3f4f6;
background: #fafafa;
}
.gl-fy-btn[b-dv6ihzvhpq] {
padding: 4px 10px;
border-radius: 5px;
border: 0.5px solid #dde3ed;
background: #fff;
font-size: 11px;
font-family: inherit;
cursor: pointer;
color: #374151;
transition: background 0.12s;
}
.gl-fy-btn:hover[b-dv6ihzvhpq] {
background: #f0f4f9;
}
.gl-fy-btn.active[b-dv6ihzvhpq] {
background: #1AB99A;
color: #fff;
border-color: #1AB99A;
}
.gl-fy1-btn[b-dv6ihzvhpq] {
margin-left: auto;
padding: 3px 9px;
border-radius: 5px;
border: 0.5px solid #dde3ed;
background: #f8fafc;
font-size: 11px;
font-family: inherit;
cursor: pointer;
color: #374151;
}
.gl-fy1-btn.active[b-dv6ihzvhpq] {
background: #1AB99A;
color: #fff;
border-color: #1AB99A;
}
/* ── Right table (login log) ── */
.gl-rtable[b-dv6ihzvhpq] {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.gl-rtable th[b-dv6ihzvhpq] {
padding: 7px 14px;
text-align: left;
font-size: 10.5px;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 0.5px solid #f3f4f6;
background: #fafafa;
}
.gl-rtable td[b-dv6ihzvhpq] {
padding: 8px 14px;
border-bottom: 0.5px solid #f9fafb;
color: #374151;
}
.gl-rtable tbody tr:last-child td[b-dv6ihzvhpq] {
border-bottom: none;
}
/* ── Monthly vouchers ── */
.gl-months[b-dv6ihzvhpq] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 10px 14px;
gap: 2px;
}
.gl-month-row[b-dv6ihzvhpq] {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 4px;
border-bottom: 0.5px solid #f9fafb;
font-size: 12px;
}
.gl-month-name[b-dv6ihzvhpq] {
font-weight: 600;
color: #374151;
min-width: 32px;
}
.gl-month-val[b-dv6ihzvhpq] {
color: #1AB99A;
font-weight: 700;
}
/* ── Utilities ── */
.gl-teal[b-dv6ihzvhpq] {
color: #1AB99A !important;
}
/* ── Modals ── */
.gl-modal-overlay[b-dv6ihzvhpq] {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.gl-modal[b-dv6ihzvhpq] {
background: #fff;
border-radius: 12px;
width: 100%;
max-width: 420px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
overflow: hidden;
}
.gl-modal-wide[b-dv6ihzvhpq] {
max-width: 620px;
}
.gl-modal-header[b-dv6ihzvhpq] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 14px;
border-bottom: 0.5px solid #f3f4f6;
}
.gl-modal-title[b-dv6ihzvhpq] {
font-size: 16px;
font-weight: 600;
color: #1AB99A;
}
.gl-modal-close[b-dv6ihzvhpq] {
background: none;
border: none;
font-size: 20px;
color: #9ca3af;
cursor: pointer;
line-height: 1;
padding: 0 4px;
transition: color 0.12s;
}
.gl-modal-close:hover[b-dv6ihzvhpq] {
color: #374151;
}
.gl-modal-body[b-dv6ihzvhpq] {
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.gl-modal-footer[b-dv6ihzvhpq] {
padding: 12px 22px 16px;
border-top: 0.5px solid #f3f4f6;
display: flex;
justify-content: flex-end;
}
.gl-modal-submit-btn[b-dv6ihzvhpq] {
width: auto !important;
padding: 9px 28px !important;
margin-top: 0 !important;
}
/* ── Password inputs ── */
.gl-pwd-input[b-dv6ihzvhpq] {
width: 100%;
padding: 10px 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 13px;
font-family: inherit;
color: #374151;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
background: #fafafa;
}
.gl-pwd-input:focus[b-dv6ihzvhpq] {
border-color: #1AB99A;
background: #fff;
box-shadow: 0 0 0 3px rgba(26,185,154,0.12);
}
.gl-pwd-input[b-dv6ihzvhpq]::placeholder {
color: #9ca3af;
}
.gl-pwd-submit[b-dv6ihzvhpq] {
width: 100%;
padding: 11px;
background: #1AB99A;
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.15s;
margin-top: 4px;
}
.gl-pwd-submit:hover:not(:disabled)[b-dv6ihzvhpq] {
background: #15a389;
}
.gl-pwd-submit:disabled[b-dv6ihzvhpq] {
opacity: 0.6;
cursor: not-allowed;
}
.gl-pwd-error[b-dv6ihzvhpq] {
background: #fef2f2;
color: #b91c1c;
border: 0.5px solid #fecaca;
border-radius: 8px;
padding: 8px 12px;
font-size: 12.5px;
display: flex;
align-items: center;
gap: 6px;
}
.gl-pwd-success[b-dv6ihzvhpq] {
background: #f0fdf9;
color: #065f46;
border: 0.5px solid #a7f3d0;
border-radius: 8px;
padding: 8px 12px;
font-size: 12.5px;
display: flex;
align-items: center;
gap: 6px;
}
/* ── Change Site modal ── */
.gl-changesite-body[b-dv6ihzvhpq] {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0 !important;
}
.gl-cs-left[b-dv6ihzvhpq] {
border-right: 1px solid #f3f4f6;
display: flex;
flex-direction: column;
}
.gl-cs-col-hdr[b-dv6ihzvhpq] {
padding: 10px 16px;
font-size: 11.5px;
color: #64748b;
background: #fafafa;
border-bottom: 1px solid #f3f4f6;
font-weight: 500;
}
.gl-cs-site-list[b-dv6ihzvhpq] {
flex: 1;
overflow-y: auto;
max-height: 220px;
padding: 4px 0;
}
.gl-cs-site-row[b-dv6ihzvhpq] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 16px;
cursor: pointer;
font-size: 13px;
transition: background 0.12s;
border-bottom: 0.5px solid #f9fafb;
}
.gl-cs-site-row:hover[b-dv6ihzvhpq] {
background: #f0f4f9;
}
.gl-cs-site-row.active[b-dv6ihzvhpq] {
background: #f0fdf9;
color: #1AB99A;
font-weight: 600;
}
.gl-cs-site-name[b-dv6ihzvhpq] {
flex: 1;
color: inherit;
}
.gl-cs-site-id[b-dv6ihzvhpq] {
font-size: 11px;
color: #9ca3af;
margin-left: 8px;
}
.gl-cs-right[b-dv6ihzvhpq] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
}
.gl-cs-date-row[b-dv6ihzvhpq] {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e5e7eb;
border-radius: 7px;
padding: 6px 10px;
background: #fafafa;
}
.gl-cs-yr-btn[b-dv6ihzvhpq] {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid #1AB99A;
background: none;
color: #1AB99A;
font-size: 16px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.12s, color 0.12s;
font-family: inherit;
}
.gl-cs-yr-btn:hover[b-dv6ihzvhpq] {
background: #1AB99A;
color: #fff;
}
.gl-cs-date-input[b-dv6ihzvhpq] {
flex: 1;
border: none;
background: none;
font-size: 13px;
font-family: inherit;
color: #374151;
outline: none;
}
.gl-cs-cal-icon[b-dv6ihzvhpq] {
font-size: 16px;
color: #9ca3af;
}
.gl-cs-fy-btns[b-dv6ihzvhpq] {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.gl-cs-fy-btn[b-dv6ihzvhpq] {
padding: 4px 10px;
border-radius: 5px;
border: 1px solid #dde3ed;
background: #fff;
font-size: 11.5px;
font-family: inherit;
color: #374151;
cursor: pointer;
}
.gl-cs-fy-btn:hover[b-dv6ihzvhpq] {
background: #f0fdf9;
border-color: #1AB99A;
color: #1AB99A;
}
/* ── Set Default modal ── */
.gl-sd-table[b-dv6ihzvhpq] {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.gl-sd-table th[b-dv6ihzvhpq] {
padding: 8px 12px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: #374151;
border-bottom: 1px solid #f3f4f6;
background: #fafafa;
}
.gl-sd-table td[b-dv6ihzvhpq] {
padding: 10px 12px;
}
.gl-sd-select[b-dv6ihzvhpq] {
width: 100%;
padding: 7px 10px;
border: 1px solid #e5e7eb;
border-radius: 7px;
font-size: 13px;
font-family: inherit;
color: #374151;
background: #fff;
outline: none;
cursor: pointer;
}
.gl-sd-select:focus[b-dv6ihzvhpq] {
border-color: #1AB99A;
}
.gl-sd-date-cell[b-dv6ihzvhpq] {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e5e7eb;
border-radius: 7px;
padding: 5px 10px;
background: #fff;
min-width: 160px;
cursor: pointer;
}
.gl-sd-date-cell:hover[b-dv6ihzvhpq], .gl-sd-date-cell:focus-within[b-dv6ihzvhpq] {
border-color: #1AB99A;
}
.gl-sd-cal-icon[b-dv6ihzvhpq] {
font-size: 16px;
color: #1AB99A;
flex-shrink: 0;
pointer-events: none;
}
.gl-sd-date-input[b-dv6ihzvhpq] {
flex: 1;
border: none;
background: none;
font-family: inherit;
font-size: 13px;
color: #374151;
outline: none;
cursor: pointer;
min-width: 120px;
padding: 0;
}
.gl-sd-date-input[b-dv6ihzvhpq]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.7;
}
.gl-sd-date-input[b-dv6ihzvhpq]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/* ── Responsive ── */
@media (max-width: 900px) {
/* BUG FIX: .gl-dashboard is a flex container (flex-direction:row), not
a grid — "grid-template-columns" here had zero effect, which is why
the left/right panels never actually stacked on mobile. */
.gl-dashboard[b-dv6ihzvhpq] {
flex-direction: column;
padding: 12px 14px;
gap: 12px;
}
.gl-left-col[b-dv6ihzvhpq],
.gl-right-col[b-dv6ihzvhpq] {
gap: 12px;
}
.gl-toggle-label[b-dv6ihzvhpq] {
display: none;
}
.gl-gains-toggle[b-dv6ihzvhpq] {
padding: 8px 10px;
}
/* Site strip — let left/right groups stack instead of squeezing */
.gl-site-strip[b-dv6ihzvhpq] {
padding: 8px 12px 6px;
gap: 6px;
}
.gl-site-strip-right[b-dv6ihzvhpq] {
gap: 4px;
width: 100%;
}
.gl-change-period-label[b-dv6ihzvhpq] {
width: 100%;
margin-bottom: 2px;
}
.gl-period-btn[b-dv6ihzvhpq] {
padding: 4px 9px;
font-size: 11px;
}
.gl-welcome-bar[b-dv6ihzvhpq] {
padding: 6px 12px;
font-size: 11px;
line-height: 1.5;
}
.gl-error-banner[b-dv6ihzvhpq] {
padding: 8px 12px;
font-size: 11px;
}
/* Fixed-height panels are sized for desktop — shrink them so they
don't dominate a small screen */
.gl-card-site[b-dv6ihzvhpq],
.gl-card-image[b-dv6ihzvhpq] {
height: 180px;
}
.gl-card-hdr[b-dv6ihzvhpq] {
padding: 8px 12px;
font-size: 11px;
}
/* Voucher-type pairs (2 per row) get tight on narrow phones — with
only 2 explicit columns, the 4 spans per row (key,val,key,val)
auto-wrap into 2 stacked rows instead of being hidden. */
.gl-vtype-row[b-dv6ihzvhpq] {
grid-template-columns: 1fr 1fr;
row-gap: 2px;
}
/* Monthly vouchers — 3 columns is cramped on phones */
.gl-months[b-dv6ihzvhpq] {
grid-template-columns: 1fr 1fr;
padding: 8px 10px;
}
.gl-info-table td[b-dv6ihzvhpq] {
padding: 5px 10px;
font-size: 12px;
}
.gl-info-key[b-dv6ihzvhpq] {
width: 64px;
}
}
@media (max-width: 480px) {
.gl-site-strip-name[b-dv6ihzvhpq] {
font-size: 13px;
}
.gl-card-site[b-dv6ihzvhpq],
.gl-card-image[b-dv6ihzvhpq] {
height: 150px;
}
.gl-months[b-dv6ihzvhpq] {
grid-template-columns: 1fr;
}
.gl-fy-btns[b-dv6ihzvhpq],
.gl-fy-btn[b-dv6ihzvhpq] {
font-size: 10.5px;
}
}
/* ── Right column wrapper — image + login stacked ── */
.gl-right-col[b-dv6ihzvhpq] {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ── Site image card ── */
.gl-card-image[b-dv6ihzvhpq] {
padding: 0;
overflow: hidden;
border-radius: 10px;
height: 240px;
flex-shrink: 0;
}
.gl-site-image[b-dv6ihzvhpq] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* /Components/Pages/Loader.razor.rz.scp.css */
/* ================================================================
GAINS Common Loader — Loader.razor.css
Transparent overlay, GAINS logo centred inside a spinning ring.
================================================================ */
.gl-overlay[b-h3509co2ak] {
position: absolute;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
/* Transparent background — only a faint frosted veil so the logo reads */
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Cover the entire viewport when requested */
.gl-fullscreen[b-h3509co2ak] {
position: fixed;
}
.gl-box[b-h3509co2ak] {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
/* ── Spinner: ring rotates, logo stays still ── */
.gl-spinner[b-h3509co2ak] {
position: relative;
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.gl-ring[b-h3509co2ak] {
position: absolute;
inset: 0;
border-radius: 50%;
border: 4px solid transparent;
/* Gradient ring matching the GAINS green→blue brand */
border-top-color: #2ec27e;
border-right-color: #1ab99a;
border-bottom-color: #2176c7;
animation: gl-spin-b-h3509co2ak 0.9s linear infinite;
}
.gl-logo[b-h3509co2ak] {
width: 56px;
height: 56px;
object-fit: contain;
background: transparent; /* keep the PNG's own transparency */
animation: gl-pulse-b-h3509co2ak 1.6s ease-in-out infinite;
}
.gl-msg[b-h3509co2ak] {
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: #334155;
letter-spacing: 0.01em;
}
/* Visually-hidden text for screen readers */
.gl-sr[b-h3509co2ak] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes gl-spin-b-h3509co2ak {
to { transform: rotate(360deg); }
}
@keyframes gl-pulse-b-h3509co2ak {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.92); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
.gl-ring[b-h3509co2ak] { animation-duration: 2s; }
.gl-logo[b-h3509co2ak] { animation: none; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ================================================================
GAINS Login Page — Login.razor.css (v4)
Left panel redesigned with product story.
Right panel/form classes unchanged.
================================================================ */
.gains-login-page[b-2ua8mk68tf] {
display: flex;
min-height: 100vh;
width: 100%;
font-family: 'Segoe UI', system-ui, sans-serif;
}
/* ════════════════════════════════════════════════════════
LEFT PANEL — completely redesigned
════════════════════════════════════════════════════════ */
.gains-left[b-2ua8mk68tf] {
width: 44%;
min-width: 320px;
background: #071c11;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
/* Decorative blobs — now purposeful glow, not circles */
.gains-deco1[b-2ua8mk68tf] {
position: absolute;
top: -120px;
right: -120px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(26,185,154,.22) 0%, transparent 65%);
pointer-events: none;
}
.gains-deco2[b-2ua8mk68tf] {
position: absolute;
bottom: -100px;
left: -100px;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(33,118,199,.18) 0%, transparent 65%);
pointer-events: none;
}
/* Extra subtle grid texture */
.gains-left[b-2ua8mk68tf]::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.032) 1px, transparent 1px);
background-size: 26px 26px;
pointer-events: none;
}
/* ── Brand block ── */
.gains-left-top[b-2ua8mk68tf] {
padding: 2.25rem 2.5rem 0;
position: relative;
z-index: 1;
}
.gains-brand[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 12px;
}
.gains-brand-icon[b-2ua8mk68tf] {
width: 44px;
height: 44px;
border-radius: 11px;
background: rgba(26,185,154,.15);
border: 1px solid rgba(26,185,154,.3);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.gains-brand-img[b-2ua8mk68tf] {
width: 30px;
height: 30px;
object-fit: contain;
}
.gains-brand-name[b-2ua8mk68tf] {
font-size: 18px;
font-weight: 800;
letter-spacing: .13em;
color: #fff;
line-height: 1.1;
}
.gains-brand-sub[b-2ua8mk68tf] {
font-size: 10px;
color: rgba(255,255,255,.35);
line-height: 1.4;
margin-top: 2px;
}
/* ── Mid: headline + description + feature list ── */
.gains-left-mid[b-2ua8mk68tf] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.75rem 2.5rem 1.5rem;
position: relative;
z-index: 1;
}
.gains-headline[b-2ua8mk68tf] {
font-size: 30px;
font-weight: 800;
color: #fff;
line-height: 1.22;
margin: 0 0 .9rem;
letter-spacing: -.02em;
}
.gains-headline span[b-2ua8mk68tf] {
color: #1AB99A;
}
.gains-desc[b-2ua8mk68tf] {
font-size: 13.5px;
color: rgba(255,255,255,.45);
line-height: 1.75;
margin: 0 0 1.6rem;
max-width: 340px;
}
/* Feature grid — replaces plain stats */
.gains-stats[b-2ua8mk68tf] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 0;
}
.gains-stat[b-2ua8mk68tf] {
display: flex;
align-items: flex-start;
gap: 10px;
background: rgba(255,255,255,.045);
border: .5px solid rgba(255,255,255,.09);
border-radius: 12px;
padding: 13px 14px;
transition: background .18s;
}
.gains-stat:hover[b-2ua8mk68tf] {
background: rgba(255,255,255,.07);
}
/* Icon for each stat — colour coded */
.gains-stat-icon[b-2ua8mk68tf] {
width: 32px;
height: 32px;
border-radius: 8px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.gains-stat-icon-teal[b-2ua8mk68tf] {
background: rgba(26,185,154,.2);
color: #1AB99A;
}
.gains-stat-icon-blue[b-2ua8mk68tf] {
background: rgba(33,118,199,.2);
color: #60a5fa;
}
.gains-stat-icon-purple[b-2ua8mk68tf] {
background: rgba(139,92,246,.2);
color: #a78bfa;
}
.gains-stat-icon-orange[b-2ua8mk68tf] {
background: rgba(251,146,60,.2);
color: #fb923c;
}
.gains-stat-body[b-2ua8mk68tf] {
flex: 1;
min-width: 0;
}
.gains-stat-num[b-2ua8mk68tf] {
font-size: 13px;
font-weight: 700;
color: #fff;
line-height: 1.2;
margin-bottom: 2px;
}
.gains-stat-label[b-2ua8mk68tf] {
font-size: 11px;
color: rgba(255,255,255,.4);
line-height: 1.4;
}
/* ── Bottom: trusted badges + test-drive CTA ── */
.gains-left-bottom[b-2ua8mk68tf] {
padding: 1.25rem 2.5rem 1.75rem;
position: relative;
z-index: 1;
border-top: .5px solid rgba(255,255,255,.07);
}
.gains-trusted[b-2ua8mk68tf] {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.3);
margin-bottom: 10px;
}
.gains-badges[b-2ua8mk68tf] {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.gains-badge[b-2ua8mk68tf] {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,.06);
border: .5px solid rgba(255,255,255,.1);
border-radius: 20px;
padding: 5px 11px;
font-size: 11px;
color: rgba(255,255,255,.55);
transition: background .15s;
}
.gains-badge:hover[b-2ua8mk68tf] {
background: rgba(255,255,255,.1);
}
.gains-badge i[b-2ua8mk68tf] {
font-size: 13px;
color: #1AB99A;
}
/* Test-drive CTA */
.gains-testdrive[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, rgba(26,185,154,.18), rgba(26,185,154,.08));
border: 1px solid rgba(26,185,154,.32);
border-radius: 12px;
padding: 12px 16px;
text-decoration: none;
color: #fff;
font-size: 13.5px;
font-weight: 600;
transition: background .18s, border-color .18s, transform .15s;
}
.gains-testdrive:hover[b-2ua8mk68tf] {
background: linear-gradient(135deg, rgba(26,185,154,.28), rgba(26,185,154,.15));
border-color: rgba(26,185,154,.55);
transform: translateY(-1px);
color: #fff;
}
.gains-testdrive i:first-child[b-2ua8mk68tf] {
font-size: 18px;
color: #1AB99A;
flex-shrink: 0;
}
.gains-testdrive span[b-2ua8mk68tf] {
flex: 1;
}
.gains-td-arrow[b-2ua8mk68tf] {
font-size: 16px;
color: rgba(255,255,255,.4);
transition: transform .15s;
flex-shrink: 0;
}
.gains-testdrive:hover .gains-td-arrow[b-2ua8mk68tf] {
transform: translateX(3px);
color: #1AB99A;
}
/* ════════════════════════════════════════════════════════
RIGHT PANEL — unchanged from original
════════════════════════════════════════════════════════ */
.gains-right[b-2ua8mk68tf] {
flex: 1;
background: #f4f6f8;
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem;
position: relative;
overflow: visible;
}
.gains-right-deco-tl[b-2ua8mk68tf] {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
border-right: .5px solid #e5e7eb;
border-bottom: .5px solid #e5e7eb;
border-radius: 0 0 100% 0;
pointer-events: none;
}
.gains-right-deco-br[b-2ua8mk68tf] {
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 150px;
border-left: .5px solid #e5e7eb;
border-top: .5px solid #e5e7eb;
border-radius: 100% 0 0 0;
pointer-events: none;
}
.gains-right-dots[b-2ua8mk68tf] {
position: absolute;
top: 24px;
right: 24px;
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 6px;
opacity: .25;
pointer-events: none;
}
.gains-right-dots span[b-2ua8mk68tf] {
width: 4px;
height: 4px;
border-radius: 50%;
background: #1AB99A;
display: block;
}
/* ── Form card ── */
.gains-card[b-2ua8mk68tf] {
width: 100%;
max-width: 400px;
background: #fff;
border-radius: 20px;
border: .5px solid #e5e7eb;
overflow: visible;
position: relative;
z-index: 1;
box-shadow: 0 4px 24px rgba(15,23,42,.08);
animation: gains-card-in-b-2ua8mk68tf .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gains-card-in-b-2ua8mk68tf {
from {
opacity: 0;
transform: translateY(14px) scale(.98);
}
to {
opacity: 1;
transform: none;
}
}
.gains-card-header[b-2ua8mk68tf] {
background: #071c11;
padding: 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.gains-card-step[b-2ua8mk68tf] {
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #1AB99A;
margin-bottom: 4px;
}
.gains-card-title[b-2ua8mk68tf] {
font-size: 20px;
font-weight: 700;
color: #fff;
}
.gains-card-subtitle[b-2ua8mk68tf] {
font-size: 13px;
color: rgba(255,255,255,.5);
margin-top: 2px;
}
.gains-card-icon-wrap[b-2ua8mk68tf] {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(26,185,154,.15);
border: 1px solid rgba(26,185,154,.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #1AB99A;
flex-shrink: 0;
}
.gains-card-progress[b-2ua8mk68tf] {
height: 3px;
background: rgba(26,185,154,.15);
}
.gains-card-progress-bar[b-2ua8mk68tf] {
height: 100%;
background: #1AB99A;
transition: width .3s;
}
.gains-card-body[b-2ua8mk68tf] {
padding: 1.75rem 2rem;
}
.gains-card-footer[b-2ua8mk68tf] {
padding: 1rem 2rem;
border-top: .5px solid #f3f4f6;
text-align: center;
font-size: 13px;
color: #6b7280;
background: #fafafa;
}
.gains-card-footer a[b-2ua8mk68tf] {
color: #1AB99A;
text-decoration: none;
font-weight: 600;
}
.gains-card-footer a:hover[b-2ua8mk68tf] {
color: #2176C7;
}
/* Error banner */
.gains-error[b-2ua8mk68tf] {
background: #fef2f2;
color: #b91c1c;
border: .5px solid #fecaca;
border-radius: 10px;
padding: 10px 12px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 1rem;
animation: gains-card-in-b-2ua8mk68tf .2s ease both;
}
.gains-error i[b-2ua8mk68tf] {
font-size: 16px;
flex-shrink: 0;
}
/* Mode selector */
.gains-mode-section[b-2ua8mk68tf] {
margin-bottom: 1.1rem;
}
.gains-mode-label[b-2ua8mk68tf] {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 8px;
}
.gains-mode-options[b-2ua8mk68tf] {
display: flex;
gap: 4px;
}
.gains-mode-opt[b-2ua8mk68tf] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
border-radius: 8px;
background: #f3f4f6;
border: 1.5px solid transparent;
font-size: 13px;
font-weight: 600;
color: #6b7280;
cursor: pointer;
user-select: none;
transition: all .15s;
}
.gains-mode-opt input[b-2ua8mk68tf] {
display: none;
}
.gains-mode-opt:has(input:checked)[b-2ua8mk68tf] {
background: #fff;
border-color: #1AB99A;
color: #1AB99A;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.gains-mode-opt:hover:not(:has(input:checked))[b-2ua8mk68tf] {
background: #e9ecef;
color: #374151;
}
/* Country code */
.gains-ccode[b-2ua8mk68tf] {
position: absolute;
left: 42px;
top: 50%;
transform: translateY(-50%);
height: 28px;
width: 84px;
border: none;
border-right: 1.5px solid #e5e7eb;
background: transparent;
font-size: 13px;
color: #374151;
outline: none;
cursor: pointer;
font-family: inherit;
z-index: 2;
padding: 0 4px;
}
.gains-input.gains-input-ccode[b-2ua8mk68tf] {
padding-left: 136px;
}
/* Invalid state */
.gains-input-invalid[b-2ua8mk68tf] {
border-color: #ef4444 !important;
background: #fef2f2 !important;
}
.gains-input-invalid:focus[b-2ua8mk68tf] {
box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.gains-validation[b-2ua8mk68tf] {
font-size: 12px;
color: #b91c1c;
margin-top: 5px;
}
/* Fields */
.gains-field[b-2ua8mk68tf] {
margin-bottom: 1.1rem;
}
.gains-field label[b-2ua8mk68tf] {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 7px;
}
.gains-input-wrap[b-2ua8mk68tf] {
position: relative;
display: flex;
align-items: center;
}
.gains-input-icon[b-2ua8mk68tf] {
position: absolute;
left: 13px;
font-size: 17px;
color: #1AB99A;
pointer-events: none;
z-index: 1;
}
.gains-input-icon-svg[b-2ua8mk68tf] {
width: 18px;
height: 18px;
color: #1AB99A;
}
.gains-input[b-2ua8mk68tf] {
width: 100%;
height: 46px;
padding: 0 44px 0 42px;
border: 1.5px solid #e5e7eb;
border-radius: 12px;
font-size: 14px;
color: #111827;
background: #f9fafb;
outline: none;
font-family: inherit;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.gains-input[b-2ua8mk68tf]::placeholder {
color: #9ca3af;
}
.gains-input:hover[b-2ua8mk68tf] {
border-color: #d1d5db;
}
.gains-input:focus[b-2ua8mk68tf] {
border-color: #1AB99A;
background: #fff;
box-shadow: 0 0 0 3px rgba(26,185,154,.12);
}
.gains-input:disabled[b-2ua8mk68tf] {
opacity: .6;
cursor: not-allowed;
}
.gains-eye-btn[b-2ua8mk68tf] {
position: absolute;
right: 12px;
background: none;
border: none;
cursor: pointer;
color: #9ca3af;
font-size: 18px;
padding: 0;
display: flex;
align-items: center;
transition: color .15s;
z-index: 1;
}
.gains-eye-btn:hover[b-2ua8mk68tf] {
color: #1AB99A;
}
/* Form row */
.gains-form-row[b-2ua8mk68tf] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.gains-remember[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #6b7280;
cursor: pointer;
}
.gains-remember input[b-2ua8mk68tf] {
accent-color: #1AB99A;
}
.gains-forgot[b-2ua8mk68tf] {
font-size: 13px;
color: #1AB99A;
text-decoration: none;
font-weight: 600;
}
.gains-forgot:hover[b-2ua8mk68tf] {
color: #2176C7;
}
/* Sign-in button */
.gains-signin-btn[b-2ua8mk68tf] {
width: 100%;
height: 48px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #1AB99A, #0d9480);
color: #fff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(26,185,154,.3);
transition: transform .1s, box-shadow .15s, opacity .15s;
margin-bottom: 1rem;
}
.gains-signin-btn:hover:not(:disabled)[b-2ua8mk68tf] {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(26,185,154,.4);
}
.gains-signin-btn:active:not(:disabled)[b-2ua8mk68tf] {
transform: scale(.99);
}
.gains-signin-btn:disabled[b-2ua8mk68tf] {
opacity: .5;
cursor: not-allowed;
}
.gains-signin-btn i[b-2ua8mk68tf] {
font-size: 18px;
}
/* Divider */
.gains-divider[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
}
.gains-divider hr[b-2ua8mk68tf] {
flex: 1;
border: none;
border-top: 1px solid #f3f4f6;
margin: 0;
}
.gains-divider span[b-2ua8mk68tf] {
font-size: 12px;
color: #9ca3af;
white-space: nowrap;
}
/* SSO */
.gains-sso-btn[b-2ua8mk68tf] {
width: 100%;
height: 44px;
border: 1.5px solid #e5e7eb;
border-radius: 12px;
background: #fff;
color: #374151;
font-size: 14px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .15s, border-color .15s;
}
.gains-sso-btn:hover[b-2ua8mk68tf] {
background: #f9fafb;
border-color: #1AB99A;
}
.gains-sso-btn i[b-2ua8mk68tf] {
font-size: 17px;
color: #2176C7;
}
/* Site picker */
.gains-site-list[b-2ua8mk68tf] {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 340px;
overflow-y: auto;
margin-bottom: .5rem;
padding-right: 2px;
}
.gains-site-list[b-2ua8mk68tf]::-webkit-scrollbar {
width: 4px;
}
.gains-site-list[b-2ua8mk68tf]::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 4px;
}
.gains-site-list[b-2ua8mk68tf]::-webkit-scrollbar-thumb {
background: #1AB99A;
border-radius: 4px;
}
.gains-site-btn[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #fff;
border: .5px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: border-color .12s, background .12s, transform .1s;
}
.gains-site-btn:hover[b-2ua8mk68tf] {
border-color: #1AB99A;
background: #f0fdf9;
transform: translateX(2px);
}
.gains-site-btn.gains-site-default[b-2ua8mk68tf] {
border-color: #1AB99A;
}
.gains-site-avatar[b-2ua8mk68tf] {
width: 34px;
height: 34px;
border-radius: 8px;
background: #f0fdf9;
border: .5px solid #a7f3d0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #065f46;
flex-shrink: 0;
}
.gains-site-default .gains-site-avatar[b-2ua8mk68tf] {
background: linear-gradient(135deg, #1AB99A, #0d9480);
color: #fff;
border-color: #1AB99A;
}
.gains-site-info[b-2ua8mk68tf] {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.gains-site-name[b-2ua8mk68tf] {
font-size: 13px;
font-weight: 600;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gains-site-id[b-2ua8mk68tf] {
font-size: 11px;
color: #9ca3af;
}
.gains-site-badge[b-2ua8mk68tf] {
font-size: 10px;
background: #1AB99A;
color: #fff;
border-radius: 4px;
padding: 2px 7px;
flex-shrink: 0;
font-weight: 600;
}
.gains-back-btn[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
font-size: 13px;
color: #1AB99A;
cursor: pointer;
font-family: inherit;
padding: 0;
transition: color .15s;
}
.gains-back-btn:hover[b-2ua8mk68tf] {
color: #2176C7;
}
/* Spinner */
.gains-spin[b-2ua8mk68tf] {
animation: gains-spin-b-2ua8mk68tf .85s linear infinite;
display: inline-block;
}
@keyframes gains-spin-b-2ua8mk68tf {
to {
transform: rotate(360deg);
}
}
/* ════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.gains-login-page[b-2ua8mk68tf] {
flex-direction: column;
}
.gains-left[b-2ua8mk68tf] {
width: 100%;
min-height: 0;
}
.gains-left-mid[b-2ua8mk68tf] {
padding: 1.25rem 1.5rem 1rem;
justify-content: flex-start;
}
.gains-headline[b-2ua8mk68tf] {
font-size: 24px;
}
.gains-desc[b-2ua8mk68tf], .gains-stats[b-2ua8mk68tf] {
display: none;
}
.gains-left-bottom[b-2ua8mk68tf] {
padding: 1rem 1.5rem 1.25rem;
}
.gains-testdrive[b-2ua8mk68tf] {
display: none;
}
.gains-right[b-2ua8mk68tf] {
padding: 2rem 1.5rem;
}
}
@media (max-width: 420px) {
.gains-card-body[b-2ua8mk68tf] {
padding: 1.25rem 1.25rem;
}
.gains-card-header[b-2ua8mk68tf] {
padding: 1.25rem 1.25rem;
}
.gains-card-footer[b-2ua8mk68tf] {
padding: .75rem 1.25rem;
}
}
/* =============================================
FORGOT PASSWORD MODAL
============================================= */
.modal-backdrop[b-2ua8mk68tf] {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(3px);
}
.modal-card[b-2ua8mk68tf] {
background: #fff;
border-radius: 18px;
width: 95%;
max-width: 460px;
box-shadow: 0 24px 60px rgba(0,0,0,0.2);
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-head[b-2ua8mk68tf] {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px 24px 18px;
border-bottom: 1px solid #f1f5f9;
}
.modal-head-icon[b-2ua8mk68tf] {
width: 42px;
height: 42px;
border-radius: 11px;
background: #eff4ff;
color: #3563e9;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.modal-title[b-2ua8mk68tf] {
font-size: 16px;
font-weight: 700;
color: #0f1923;
margin: 0 0 3px;
}
.modal-desc[b-2ua8mk68tf] {
font-size: 12.5px;
color: #6b7a8d;
margin: 0;
}
.modal-x[b-2ua8mk68tf] {
margin-left: auto;
background: none;
border: none;
cursor: pointer;
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 7px;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.modal-x:hover[b-2ua8mk68tf] {
background: #f1f5f9;
color: #0f1923;
}
.modal-body[b-2ua8mk68tf] {
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.radio-section-label[b-2ua8mk68tf] {
font-size: 11.5px;
font-weight: 700;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.radio-group[b-2ua8mk68tf] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.radio-pill[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 9px;
border: 1.5px solid #e5e7eb;
background: #f8fafd;
font-size: 13px;
font-weight: 500;
color: #4b5563;
cursor: pointer;
transition: all 0.15s;
user-select: none;
}
.radio-pill input[type="radio"][b-2ua8mk68tf] {
display: none;
}
.radio-pill:hover[b-2ua8mk68tf] {
border-color: #3563e9;
color: #3563e9;
background: #eff4ff;
}
.radio-active[b-2ua8mk68tf] {
border-color: #3563e9 !important;
background: #eff4ff !important;
color: #3563e9 !important;
}
.modal-field[b-2ua8mk68tf] {
display: flex;
flex-direction: column;
gap: 7px;
}
.req[b-2ua8mk68tf] {
color: #e94343;
margin-left: 2px;
}
.modal-input[b-2ua8mk68tf] {
width: 100%;
padding: 11px 14px;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
font-size: 13.5px;
color: #0f1923;
background: #f8fafd;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
font-family: inherit;
box-sizing: border-box;
}
.modal-input:focus[b-2ua8mk68tf] {
border-color: #3563e9;
background: #fff;
box-shadow: 0 0 0 3px rgba(53, 99, 233, 0.1);
}
.modal-error[b-2ua8mk68tf] {
display: flex;
align-items: center;
gap: 8px;
background: #fff2f2;
border: 1px solid #fecaca;
color: #b91c1c;
border-radius: 8px;
padding: 9px 12px;
font-size: 12.5px;
font-weight: 500;
}
.modal-foot[b-2ua8mk68tf] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid #f1f5f9;
background: #f8fafd;
}
.btn-ghost[b-2ua8mk68tf] {
padding: 9px 18px;
border-radius: 9px;
border: 1.5px solid #e5e7eb;
background: #fff;
color: #374151;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
}
.btn-ghost:hover:not(:disabled)[b-2ua8mk68tf] {
background: #f1f5f9;
}
.btn-ghost:disabled[b-2ua8mk68tf] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary[b-2ua8mk68tf] {
padding: 9px 20px;
border-radius: 9px;
border: none;
background: linear-gradient(135deg, #3563e9, #0ea472);
color: #fff;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 7px;
transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
font-family: inherit;
}
.btn-primary:hover:not(:disabled)[b-2ua8mk68tf] {
opacity: 0.92;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(53, 99, 233, 0.3);
}
.btn-primary:disabled[b-2ua8mk68tf] {
opacity: 0.6;
cursor: not-allowed;
}
/* /Components/Pages/Masters/MGroup.razor.rz.scp.css */
/* =====================================================================
GAINS — MGroup.razor.css (Masters → Group grid, page-scoped)
Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
Only Group-page-specific rules remain here.
===================================================================== */
/* .mu-row-click now lives in the global CSS/masters-forms.css so it can be
reused on any page. Nothing Group-specific to add here. */
/* =====================================================================
Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
MLogin. .mu-page becomes a full-height flex column; .mu-card (the
bordered table box) grows to fill the remaining space instead of being
sized only to its own content, and the footer sits as a direct sibling
below it so it always lands at the true bottom of the page.
===================================================================== */
.mu-page[b-ukuv8fcuje] {
display: flex;
flex-direction: column;
height: 100%;
}
.mu-card[b-ukuv8fcuje] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.mu-toolbar[b-ukuv8fcuje] {
flex-shrink: 0;
}
.mu-table-wrap[b-ukuv8fcuje] {
flex: 1;
overflow: auto;
min-height: 0;
}
.mu-foot[b-ukuv8fcuje] {
flex-shrink: 0;
}
/* mu-pager sits inside .bspl-footer-right now — undo the inherited
margin-left:auto/font-size/color from common-page-chrome.css so the
pagesize dropdown and page buttons keep their own sizing/typography. */
.bspl-footer-right[b-ukuv8fcuje] {
font-size: inherit;
color: inherit;
}
.mu-pager[b-ukuv8fcuje] {
display: flex;
align-items: center;
gap: 12px;
}
/* ── Mobile: "New group" button — icon only, stays top-right ── */
@media (max-width: 767px) {
.bspl-title-actions[b-ukuv8fcuje] {
margin-left: auto;
}
.bspl-title-actions .mu-btn-label[b-ukuv8fcuje] {
display: none;
}
.bspl-title-actions .mu-btn[b-ukuv8fcuje] {
padding: 8px 10px;
gap: 0;
}
.bspl-title-actions .mu-btn i[b-ukuv8fcuje] {
font-size: 15px;
}
.mu-foot-info[b-ukuv8fcuje] {
display: none;
}
}
/* /Components/Pages/Masters/MGroupEdit.razor.rz.scp.css */
/* =====================================================================
GAINS — MGroupEdit.razor.css (edit Group modal)
Shared "uf-" modal styles now live in wwwroot/CSS/masters-forms.css.
Only Group-edit-specific rules and small overrides remain here.
===================================================================== */
.uf-modal-sm[b-awuk0cjuz0] { max-width: 460px; }
/* Field spacing / section spacing specific to this (shorter) form */
.uf-field[b-awuk0cjuz0] { margin-bottom: 13px; }
.uf-field:last-child[b-awuk0cjuz0] { margin-bottom: 0; }
.uf-section[b-awuk0cjuz0] { margin: 0 0 0; }
/* Read-only depth row: "5 ASSETS" */
.uf-depth[b-awuk0cjuz0] { display: flex; align-items: center; gap: 12px; padding-top: 7px; }
.uf-depth-val[b-awuk0cjuz0] { font-size: 14px; font-weight: 600; color: #1e293b; }
.uf-depth-class[b-awuk0cjuz0] { font-size: 12px; font-weight: 700; color: #0f766e; letter-spacing: 0.6px; }
@media (max-width: 540px) {
.uf-field[b-awuk0cjuz0] { grid-template-columns: 1fr; gap: 4px; }
.uf-field > label[b-awuk0cjuz0] { padding-top: 0; }
}
/* /Components/Pages/Masters/MItem.razor.rz.scp.css */
/* =====================================================================
GAINS — MItem.razor.css (Masters → Item grid, page-scoped)
Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
Only Item-page-specific rules and small overrides remain here — mirrors
MLedger.razor.css exactly (same tabs/drawer/filter classes, reused as-is).
===================================================================== */
/* Numeric column alignment (OB Qty, Rate, OB Value, MRP, TAX %) */
.mu-table thead th.mu-th-num[b-vozfp7j4gg] {
text-align: right;
}
.mu-table tbody td.mu-num[b-vozfp7j4gg] {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ── Status icons: green check (active) / red cross (inactive) ──
Sizing + "active" green color are shared in wwwroot/CSS/masters-forms.css
(.mu-check, .mu-cross); only the page-specific "inactive" red remains here. */
.mu-cross[b-vozfp7j4gg] {
color: #dc2626;
}
/* Note: the filter drawer (.mu-drawer*/.mu-fld) is a shared[b-vozfp7j4gg], reusable rule
set in wwwroot/CSS/masters-forms.css — nothing page-specific to keep here. */
/* .mu-row-click now lives in the global CSS/masters-forms.css (reusable
anywhere) — no page-specific override needed here. */
/* ── Top tabs (GRID / ENTRY / REPORT / ITEMGALLERY / AUDIT) ── */
.le-toptabs[b-vozfp7j4gg] {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.le-toptab[b-vozfp7j4gg] {
padding: 8px 16px;
margin: 0 5px 6px 0;
border: 1px solid #dde3ed;
background: #fff;
color: #64748b;
font-size: 12px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
border-radius: 8px;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.le-toptab:hover[b-vozfp7j4gg] {
background: #f8fafc;
border-color: #c3ccdb;
color: #334155;
}
.le-toptab.active[b-vozfp7j4gg] {
background: #fff;
color: #14b8a6;
border: 1.5px solid #14b8a6;
}
.le-tabpane[b-vozfp7j4gg] {
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
}
.le-tabpane-msg[b-vozfp7j4gg] {
color: #94a3b8;
font-size: 14px;
}
/* =====================================================================
Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
MLogin / MGroup / MItemGroup / MLedger. .mu-page becomes a full-height
flex column; .mu-card (the bordered table box) grows to fill the
remaining space instead of being sized only to its own content, and the
footer sits as a direct sibling below it so it always lands at the true
bottom of the page.
===================================================================== */
.mu-page[b-vozfp7j4gg] {
display: flex;
flex-direction: column;
height: 100%;
}
.le-toptabs[b-vozfp7j4gg] {
flex-shrink: 0;
padding: 0 0 0 10px;
}
.mu-card[b-vozfp7j4gg] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.mu-table-wrap[b-vozfp7j4gg] {
flex: 1;
overflow: auto;
min-height: 0;
}
.mu-foot[b-vozfp7j4gg] {
flex-shrink: 0;
}
.bspl-footer-right[b-vozfp7j4gg] {
font-size: inherit;
color: inherit;
}
.mu-pager[b-vozfp7j4gg] {
display: flex;
align-items: center;
gap: 12px;
}
/* ── Mobile: "Filter" button — icon only, stays top-right ── */
@media (max-width: 767px) {
.bspl-title-actions[b-vozfp7j4gg] {
margin-left: auto;
}
.bspl-title-actions .mu-btn-label[b-vozfp7j4gg] {
display: none;
}
.bspl-title-actions .mu-btn[b-vozfp7j4gg] {
padding: 8px 10px;
gap: 0;
}
.bspl-title-actions .mu-btn i[b-vozfp7j4gg] {
font-size: 15px;
}
.mu-foot-info[b-vozfp7j4gg] {
display: none;
}
}
/* /Components/Pages/Masters/MItemEdit.razor.rz.scp.css */
/* =====================================================================
GAINS — MItemEdit.razor.css (Item entry form, inline — Masters → Item → ENTRY)
Blazor scopes component CSS per-file, so the generic "le-" field/row/button
look (originally written for MLedgerEdit) is duplicated here rather than
inherited — same convention already used across Masters pages.
===================================================================== */
.ie-root[b-8xc7kmihi6] {
background: #fff;
border: 1px solid #dde3ed;
border-radius: 0;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ie-main[b-8xc7kmihi6] {
display: flex;
align-items: stretch;
}
/* ── Left: form ── */
.ie-form[b-8xc7kmihi6] {
flex: 1;
min-width: 0;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.le-row[b-8xc7kmihi6] {
display: grid;
grid-template-columns: 130px 1fr;
align-items: center;
gap: 12px;
}
.le-row > label[b-8xc7kmihi6] {
font-size: 13px;
font-weight: 600;
color: #334155;
}
.le-req[b-8xc7kmihi6] {
color: #dc2626;
}
.le-inp[b-8xc7kmihi6] {
padding: 6px 8px;
border: 1px solid #cbd5e1;
border-radius: 5px;
font-size: 13px;
font-family: inherit;
color: #1a2537;
background: #fff;
outline: none;
max-width: 320px;
}
.le-inp:focus[b-8xc7kmihi6] {
border-color: #1a56a7;
box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
}
.le-inp.le-sm[b-8xc7kmihi6] {
max-width: 160px;
}
.le-inp.le-xs[b-8xc7kmihi6] {
width: 64px;
max-width: 64px;
}
.le-inp.le-amt[b-8xc7kmihi6] {
width: 110px;
max-width: 110px;
text-align: right;
}
.le-invalid[b-8xc7kmihi6] {
border-color: #e11d48 !important;
background: #fff5f6;
}
.le-field-err[b-8xc7kmihi6] {
color: #b42318;
font-size: 12px;
margin-top: 2px;
}
.ie-pair[b-8xc7kmihi6] {
display: flex;
align-items: center;
gap: 8px;
}
/* ── HSN Code shaded box ── */
.ie-hsn-box[b-8xc7kmihi6] {
background: #eef1f6;
border-radius: 6px;
padding: 10px 12px;
}
.ie-taxpct[b-8xc7kmihi6] {
color: #15803d;
font-weight: 700;
font-size: 13px;
white-space: nowrap;
}
.ie-taxpct-btn[b-8xc7kmihi6] {
background: none;
border: none;
padding: 0;
font-family: inherit;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
}
.ie-taxpct-btn:hover[b-8xc7kmihi6] {
color: #116630;
}
/* ── HSN tax-details popup — reuses the shared "uf-" modal system.
Field/section spacing set locally per the convention in MItemGroupEdit.razor.css. ── */
.uf-modal-hsn[b-8xc7kmihi6] {
max-width: 380px;
}
.uf-field[b-8xc7kmihi6] {
margin-bottom: 13px;
}
.uf-field:last-child[b-8xc7kmihi6] {
margin-bottom: 0;
}
.uf-section[b-8xc7kmihi6] {
margin: 14px 0 0;
}
.ie-hsn-popup-loading[b-8xc7kmihi6] {
padding: 20px 0;
text-align: center;
color: #64748b;
font-size: 13px;
}
/* ── Photo + price-history row ── */
.ie-media[b-8xc7kmihi6] {
display: flex;
gap: 20px;
margin-top: 4px;
flex-wrap: wrap;
}
.ie-photo-box[b-8xc7kmihi6] {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
flex: 0 0 auto;
}
.ie-photo-frame[b-8xc7kmihi6] {
width: 150px;
height: 150px;
border: 1px solid #dde3ed;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
}
.ie-photo-img[b-8xc7kmihi6] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ie-photo-placeholder[b-8xc7kmihi6] {
color: #cbd5e1;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.ie-photo-btn-row[b-8xc7kmihi6] {
display: flex;
align-items: center;
gap: 8px;
}
.ie-photo-upload-btn[b-8xc7kmihi6] {
cursor: pointer;
}
.ie-photo-remove-btn[b-8xc7kmihi6] {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dde3ed;
border-radius: 6px;
background: #fff;
color: #64748b;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ie-photo-remove-btn:hover[b-8xc7kmihi6] {
background: #fee2e2;
border-color: #f1aab2;
color: #dc2626;
}
.ie-history[b-8xc7kmihi6] {
flex: 1 1 220px;
min-width: 200px;
max-width: 300px;
height: 150px;
border: 1px solid #dde3ed;
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ie-hist-scroll[b-8xc7kmihi6] {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.ie-hist-table[b-8xc7kmihi6] {
width: 100%;
border-collapse: collapse;
font-size: 11.5px;
}
.ie-hist-table thead th[b-8xc7kmihi6] {
position: sticky;
top: 0;
background: #4b5563;
color: #fff;
font-weight: 600;
font-size: 11px;
line-height: 1.3;
padding: 5px 8px;
text-align: right;
}
.ie-hist-table thead th:first-child[b-8xc7kmihi6] {
text-align: left;
}
.ie-hist-table tbody td[b-8xc7kmihi6] {
padding: 5px 8px;
border-bottom: 1px solid #eef2f7;
text-align: right;
color: #1a2537;
line-height: 1.3;
}
.ie-hist-table tbody td:first-child[b-8xc7kmihi6] {
text-align: left;
}
.ie-hist-empty[b-8xc7kmihi6] {
text-align: center !important;
color: #94a3b8;
padding: 10px 0 !important;
font-size: 12px;
border-bottom: none !important;
}
/* ── Right: side action buttons (placeholders) ── */
.ie-side[b-8xc7kmihi6] {
flex: 0 0 190px;
background: #eef1f6;
border-left: 1px solid #e5e9f0;
padding: 18px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ie-side-btn[b-8xc7kmihi6] {
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #f1f5f9;
color: #94a3b8;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: not-allowed;
letter-spacing: 0.02em;
}
/* ── Footer ── */
.le-foot[b-8xc7kmihi6] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-top: 1px solid #e5e9f0;
background: #f7f9fc;
}
.le-btn[b-8xc7kmihi6] {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border-radius: 6px;
border: 1px solid #cbd5e1;
background: #fff;
color: #334155;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
letter-spacing: 0.04em;
white-space: nowrap;
user-select: none;
flex-shrink: 0;
transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.le-btn:hover[b-8xc7kmihi6] {
background: #eef4fb;
}
.le-btn:disabled[b-8xc7kmihi6] {
opacity: 0.6;
cursor: not-allowed;
}
.le-btn:disabled:hover[b-8xc7kmihi6] {
background: #fff;
}
.le-btn.save[b-8xc7kmihi6] {
background: #15803d;
border-color: #15803d;
color: #fff;
}
.le-btn.save:hover:not(:disabled)[b-8xc7kmihi6] {
background: #116630;
}
.le-btn.save:disabled[b-8xc7kmihi6] {
background: #86b99a;
border-color: #86b99a;
}
.le-btn.del[b-8xc7kmihi6] {
color: #b91c1c;
border-color: #f1c4c4;
}
.le-btn.del:hover:not(:disabled)[b-8xc7kmihi6] {
background: #fee2e2;
}
.ie-gear[b-8xc7kmihi6] {
margin-left: auto;
color: #94a3b8;
font-size: 16px;
cursor: pointer;
}
.ie-gear:hover[b-8xc7kmihi6] {
color: #64748b;
}
@media (max-width: 720px) {
.ie-main[b-8xc7kmihi6] {
flex-direction: column;
}
.ie-side[b-8xc7kmihi6] {
flex-direction: row;
flex-wrap: wrap;
border-left: none;
border-top: 1px solid #e5e9f0;
}
}
/* /Components/Pages/Masters/MItemGroup.razor.rz.scp.css */
/* =====================================================================
GAINS — MItemGroup.razor.css (Masters → Item Group grid, page-scoped)
Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
Only Item-Group-page-specific rules remain here.
===================================================================== */
/* =====================================================================
Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
MLogin / MGroup. .mu-page becomes a full-height flex column; .mu-card
(the bordered table box) grows to fill the remaining space instead of
being sized only to its own content, and the footer sits as a direct
sibling below it so it always lands at the true bottom of the page.
===================================================================== */
.mu-page[b-r0e2nyz8pf] {
display: flex;
flex-direction: column;
height: 100%;
}
.mu-card[b-r0e2nyz8pf] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.mu-toolbar[b-r0e2nyz8pf] {
flex-shrink: 0;
}
.mu-table-wrap[b-r0e2nyz8pf] {
flex: 1;
overflow: auto;
min-height: 0;
}
.mu-foot[b-r0e2nyz8pf] {
flex-shrink: 0;
}
.bspl-footer-right[b-r0e2nyz8pf] {
font-size: inherit;
color: inherit;
}
.mu-pager[b-r0e2nyz8pf] {
display: flex;
align-items: center;
gap: 12px;
}
/* ── Photo thumbnail column ── */
.mu-photo-cell[b-r0e2nyz8pf] {
width: 48px;
}
.mu-photo-thumb[b-r0e2nyz8pf] {
width: 36px;
height: 36px;
border-radius: 6px;
border: 1px solid #e2e8f0;
object-fit: cover;
display: block;
}
.mu-photo-placeholder[b-r0e2nyz8pf] {
width: 36px;
height: 36px;
border-radius: 6px;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* ── Mobile: "New item group" button — icon only, stays top-right ── */
@media (max-width: 767px) {
.bspl-title-actions[b-r0e2nyz8pf] {
margin-left: auto;
}
.bspl-title-actions .mu-btn-label[b-r0e2nyz8pf] {
display: none;
}
.bspl-title-actions .mu-btn[b-r0e2nyz8pf] {
padding: 8px 10px;
gap: 0;
}
.bspl-title-actions .mu-btn i[b-r0e2nyz8pf] {
font-size: 15px;
}
.mu-foot-info[b-r0e2nyz8pf] {
display: none;
}
}
/* /Components/Pages/Masters/MItemGroupEdit.razor.rz.scp.css */
/* =====================================================================
GAINS — MItemGroupEdit.razor.css (edit Item Group modal)
Shared "uf-" modal styles now live in wwwroot/CSS/masters-forms.css.
Only Item-Group-edit-specific rules and small overrides remain here.
===================================================================== */
.uf-modal-sm[b-gun49tn4fd] { max-width: 460px; }
/* Field spacing / section spacing specific to this (shorter) form */
.uf-field[b-gun49tn4fd] { margin-bottom: 13px; }
.uf-field:last-child[b-gun49tn4fd] { margin-bottom: 0; }
.uf-section[b-gun49tn4fd] { margin: 0 0 0; }
/* Read-only depth row */
.uf-depth[b-gun49tn4fd] { display: flex; align-items: center; gap: 12px; padding-top: 7px; }
.uf-depth-val[b-gun49tn4fd] { font-size: 14px; font-weight: 600; color: #1e293b; }
/* ── Photo: a rectangular preview box, with the upload/remove buttons stacked below it.
The real is visually hidden (clip-rect, not opacity) and triggered
by a