/* ========================================================= WHITE BANGER ERP — MASTER STYLESHEET v4.0 Refined Design System · Premium Education Platform ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ========================================================= DESIGN TOKENS ========================================================= */ :root { /* ── White Banger "Bold Light" design system ────────── Source of truth: G:\My Drive\website\THEME-GUIDE.md (whitebanger.org). Clean white surfaces, deep NAVY as the brand anchor, electric BLUE for links/accents/hover, GOLD for the one conversion action on a screen. Every legacy token below is remapped onto these values so the ~100 pages that reference --primary / --gray-* / --shadow-* pick the theme up without per-page edits. */ --navy: #060e38; --navy-2: #0b1a5e; --navy-3: #12277f; --blue: #1a56db; --blue-dk: #1546b8; --blue-lt: #3b7bff; --blue-soft: #eaf0ff; --blue-line: #cfdcff; --gold: #fbb50e; --gold-dk: #e09d00; --gold-soft: #fff6dc; --gold-line: #ffe4a3; --green: #16a34a; --green-soft:#ecfdf5; --wa: #25d366; --ink: #0b1230; --faint: #8b93a7; --bg2: #f5f7fc; --bg3: #eef2f9; --line: #e4e8f1; --line2: #d7dde9; --r-sm: 12px; --r: 18px; --r-lg: 24px; --r-xl: 30px; --pill: 999px; --sh-sm: 0 2px 6px -1px rgba(6,14,56,.07), 0 1px 2px rgba(6,14,56,.05); --sh: 0 12px 32px -14px rgba(6,14,56,.22); --sh-lg: 0 28px 64px -28px rgba(6,14,56,.45); --sh-gold: 0 12px 26px -12px rgba(251,181,14,.75); --sh-blue: 0 12px 26px -12px rgba(26,86,219,.7); --ff-d: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --ff-b: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease: cubic-bezier(.2,.8,.2,1); --maxw: 1200px; /* ── Brand (legacy names → navy / blue) ──────── */ --primary: var(--navy); /* filled buttons, active states, headline accents */ --primary-hover: var(--blue); /* navy → blue on hover, per the guide */ --primary-light: var(--blue-soft); /* tinted pills, icon tiles, highlighted rows */ --primary-dark: var(--navy-2); --primary-glow: rgba(26,86,219,0.14); --gold-dark: var(--gold-dk); --gold-light: var(--gold-soft); /* ── Accents ─────────────────────────────────── */ --neon-cyan: var(--blue-lt); --neon-blue: var(--blue); --neon-purple: var(--navy-3); --neon-pink: #ec4899; --neon-green: var(--green); --neon-amber: var(--gold); --space-1: var(--navy); --space-2: var(--navy-2); --space-3: var(--navy-3); /* ── Semantic ────────────────────────────────── */ --success: var(--green); --success-light: var(--green-soft); --warning: var(--gold-dk); --warning-light: var(--gold-soft); --danger: #dc2626; --danger-light: #fef2f2; --info: var(--blue); --info-light: var(--blue-soft); --purple: var(--navy-3); --purple-light: var(--blue-soft); /* ── Neutrals (navy-tinted, never pure grey/black) ── */ --gray-50: var(--bg2); --gray-100: var(--bg3); --gray-200: var(--line); --gray-300: var(--line2); --gray-400: var(--faint); --gray-500: #6b7590; --gray-600: #4b5570; --gray-700: #2e3856; --gray-800: #1a2244; --gray-900: var(--ink); /* ── Layout ──────────────────────────────────── */ --sidebar-w: 260px; --sidebar-w-col: 68px; --topbar-h: 60px; --radius-sm: var(--r-sm); --radius-md: var(--r); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); /* ── Shadows — always navy-tinted ────────────── */ --shadow-xs: 0 1px 2px rgba(6,14,56,0.05); --shadow-sm: var(--sh-sm); --shadow-md: 0 6px 18px -8px rgba(6,14,56,0.16), 0 2px 4px rgba(6,14,56,0.05); --shadow-lg: var(--sh); --shadow-xl: var(--sh-lg); --shadow-2xl: 0 36px 80px -32px rgba(6,14,56,0.55); --shadow-primary: var(--sh-blue); --shadow-success: 0 12px 26px -12px rgba(22,163,74,0.6); /* ── Motion ──────────────────────────────────── */ --transition: all 0.18s var(--ease); --transition-slow: all 0.3s var(--ease); --transition-spring: all 0.28s var(--ease); /* guide: nothing bounces */ /* ── Surfaces ────────────────────────────────── */ --bg-page: var(--bg2); /* soft blue-white app canvas */ --bg-card: #ffffff; /* white cards on the tinted canvas */ --bg-sidebar: var(--navy); /* navy brand rail (gradient applied in .erp-sidebar) */ --bg-topbar: rgba(255,255,255,0.9); --bg-card-solid: #ffffff; --glass-edge: transparent; --glass-blur: blur(10px); --border: var(--line); --border-strong: var(--line2); --text-primary: var(--ink); --text-secondary: #4b5570; --text-muted: var(--faint); --text-sidebar: rgba(255,255,255,0.75); --text-sidebar-active: #ffffff; /* ── Legacy/alias tokens ─────────────────────── */ --bg: var(--bg-card); --bg-2: var(--bg-card); --bg-secondary: var(--bg-card); --bg-input: var(--bg-card); --card-bg: var(--bg-card); --surface: var(--bg-card); --surface-2: var(--bg-card); --surface-3: var(--bg-card); --input-bg: var(--bg-card); --erp-bg: var(--bg-card); --erp-surface: var(--bg-card); --text: var(--text-primary); --erp-text: var(--text-primary); --muted: var(--text-secondary); --erp-text-muted: var(--text-muted); --border-s: var(--border); --erp-border: var(--border); --accent: var(--blue); --erp-accent: var(--blue); --accent-h: var(--blue-dk); --erp-danger: var(--danger); --warning-bg: var(--warning-light); --warning-dark: var(--gold-dark); --hover-bg: rgba(6,14,56,.04); } /* ─── DARK MODE — DEEP NAVY ─────────────────────────────── */ /* The guide is light-first; dark mode re-uses its navy band recipe as the canvas so the two modes read as the same brand. Blue/gold stay the accents; text follows the guide's on-dark opacities. */ [data-theme="dark"] { --primary: var(--blue-lt); --primary-hover: #5b90ff; --primary-light: rgba(59,123,255,0.14); --primary-dark: var(--blue); --primary-glow: rgba(59,123,255,0.24); --bg-page: #050b2c; --bg-card: #0a1546; --bg-sidebar: #03071f; --bg-topbar: rgba(5,11,44,0.85); --bg-card-solid: #0e1c58; --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --hover-bg: rgba(255,255,255,.06); --text-primary: #ffffff; --text-secondary: rgba(255,255,255,0.75); --text-muted: rgba(255,255,255,0.5); --text-sidebar: rgba(255,255,255,0.7); --text-sidebar-active: #ffffff; --success: #34d399; --success-light: rgba(52,211,153,0.14); --danger: #f87171; --danger-light: rgba(248,113,113,0.14); --warning: var(--gold); --warning-light: rgba(251,181,14,0.14); --info: var(--blue-lt); --info-light: rgba(59,123,255,0.14); --purple: #8fb0ff; --purple-light: rgba(59,123,255,0.14); --gold-light: rgba(251,181,14,0.14); --gold-dark: var(--gold); --gray-50: #0a1546; --gray-100: #0e1c58; --gray-200: rgba(255,255,255,0.08); --gray-300: rgba(255,255,255,0.14); --gray-400: rgba(255,255,255,0.45); --gray-500: rgba(255,255,255,0.6); --gray-600: rgba(255,255,255,0.75); --gray-700: rgba(255,255,255,0.85); --gray-800: rgba(255,255,255,0.92); --gray-900: #ffffff; --shadow-xs: 0 1px 4px rgba(0,0,0,0.5); --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 4px 20px rgba(0,0,0,0.5); --shadow-lg: 0 10px 40px rgba(0,0,0,0.55); --shadow-xl: 0 20px 60px rgba(0,0,0,0.65); --shadow-2xl: 0 30px 80px rgba(0,0,0,0.75); --shadow-primary: 0 0 24px rgba(59,123,255,0.3), 0 4px 12px rgba(0,0,0,0.5); --shadow-success: 0 0 20px rgba(52,211,153,0.25), 0 4px 12px rgba(0,0,0,0.5); } /* ========================================================= RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text-primary); background: var(--bg-page); line-height: 1.6; min-height: 100vh; min-height: 100dvh; /* tracks the real visible viewport as the mobile address bar collapses/expands */ transition: background 0.3s, color 0.3s; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; } input, select, textarea { font-family: inherit; } /* ========================================================= SCROLLBAR ========================================================= */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(59,123,255,0.25); border-radius: 10px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(59,123,255,0.45); } /* ========================================================= LAYOUT ========================================================= */ .erp-layout { display: flex; min-height: 100vh; min-height: 100dvh; } /* ========================================================= SIDEBAR ========================================================= */ .erp-sidebar { width: var(--sidebar-w); background: var(--bg-sidebar, #17180F); position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; display: flex; flex-direction: column; transition: width 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1); overflow: hidden; border-right: none; } .erp-sidebar.collapsed { width: var(--sidebar-w-col); } /* Notch/Dynamic-Island safe area — inert (env() resolves to 0) outside an installed standalone PWA on a notched device, so this is a no-op in an ordinary browser tab. */ .erp-sidebar { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); } /* Brand */ .erp-sidebar-brand { display: flex; align-items: center; padding: 0 14px; height: var(--topbar-h); border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .erp-sidebar-brand img { display: block; height: 40px; max-width: 172px; object-fit: contain; } .erp-brand-logo { width: 36px; height: 36px; background: linear-gradient(135deg, #060e38 0%, #3b7bff 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #fff; flex-shrink: 0; box-shadow: 0 4px 14px rgba(26,86,219,0.35); letter-spacing: -0.5px; } .erp-brand-text { white-space: nowrap; overflow: hidden; } .erp-brand-text strong { display: block; font-size: 14px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.3px; line-height: 1.3; } .erp-brand-text span { font-size: 10px; color: rgba(255,255,255,0.45); font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; } /* Nav */ .erp-sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0 8px; } .erp-sidebar-nav::-webkit-scrollbar { width: 2px; } .erp-sidebar-nav::-webkit-scrollbar-thumb { background: var(--gray-300); } .erp-nav-section { padding: 0 10px; } .erp-nav-section-label, .erp-nav-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: rgba(255,255,255,0.35); padding: 14px 10px 4px; white-space: nowrap; } .erp-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; } .erp-sidebar.collapsed .erp-nav-section-label, .erp-sidebar.collapsed .erp-nav-label { opacity: 0; height: 0; padding: 0; overflow: hidden; } .erp-nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--text-sidebar, rgba(255,255,255,0.6)); font-size: 13px; font-weight: 500; transition: background 0.15s, color 0.15s; white-space: nowrap; margin-bottom: 1px; position: relative; letter-spacing: -0.1px; } .erp-nav-link { color: rgba(255,255,255,0.6); } .erp-nav-link:hover { background: rgba(255,255,255,0.07); color: #FFFFFF; } .erp-nav-link.active { background: rgba(255,255,255,0.1); color: #FFFFFF; font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); } .erp-nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0.9; } .erp-nav-icon svg { width: 17px; height: 17px; } .erp-nav-text { flex: 1; white-space: nowrap; overflow: hidden; } /* ── Sidebar notification badge ───────────────────────────────── */ .erp-nav-badge { flex-shrink: 0; margin-left: auto; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; min-width: 17px; border-radius: 20px; text-align: center; animation: erp-badge-pop 0.2s cubic-bezier(0.34,1.56,0.64,1); } @keyframes erp-badge-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Keep badge visible even when sidebar is collapsed (icon-only mode) */ .erp-sidebar.collapsed .erp-nav-badge { position: absolute; top: 3px; right: 4px; font-size: 8px; padding: 1px 4px; min-width: 14px; } .erp-nav-badge { margin-left: auto; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; } .erp-sidebar.collapsed .erp-nav-text, .erp-sidebar.collapsed .erp-nav-badge, .erp-sidebar.collapsed .erp-brand-text { display: none; } .erp-sidebar.collapsed .erp-sidebar-brand img { max-width: 36px; height: 36px; object-fit: cover; } /* ── Collapsible Nav Groups ────────────────────────── */ .erp-nav-group { margin-bottom: 1px; } .erp-nav-group-header { display: flex; align-items: center; gap: 10px; padding: 8.5px 12px; border-radius: 9px; color: var(--text-sidebar); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; white-space: nowrap; } .erp-nav-group-header:hover { background: rgba(255,255,255,0.07); color: #FFFFFF; } .erp-nav-group-header.open { color: #FFFFFF; } .erp-nav-group-arrow { margin-left: auto; flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 9px; opacity: 0.4; transition: transform 0.2s var(--ease), opacity 0.15s; } .erp-nav-group-header.open .erp-nav-group-arrow { transform: rotate(90deg); opacity: 0.8; } .erp-nav-group-children { max-height: 0; overflow: hidden; transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1); padding-left: 4px; } .erp-nav-group-children.open { max-height: 600px; } .erp-nav-group-children .erp-nav-link { padding-left: 32px; font-size: 12.5px; color: rgba(255,255,255,0.48); } .erp-nav-group-children .erp-nav-link::before { content: ''; position: absolute; left: 18px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.18); transform: translateY(-50%); transition: background 0.15s, transform 0.15s; } .erp-nav-group-children .erp-nav-link:hover::before { background: rgba(255,255,255,0.7); } .erp-nav-group-children .erp-nav-link.active::before { background: var(--primary); transform: translateY(-50%) scale(1.3); } .erp-nav-sep { height: 1px; background: rgba(255,255,255,0.05); margin: 6px 8px; } /* Collapsed sidebar: flatten groups */ .erp-sidebar.collapsed .erp-nav-group-header { justify-content: center; padding: 9px; } .erp-sidebar.collapsed .erp-nav-group-header .erp-nav-text, .erp-sidebar.collapsed .erp-nav-group-arrow { display: none; } .erp-sidebar.collapsed .erp-nav-group-children { max-height: none !important; padding-left: 0; } .erp-sidebar.collapsed .erp-nav-group-children .erp-nav-link { padding-left: 12px; justify-content: center; } .erp-sidebar.collapsed .erp-nav-group-children .erp-nav-link::before { display: none; } /* Sidebar Footer */ .erp-sidebar-footer { padding: 10px; border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; } .erp-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; transition: background 0.15s; } .erp-sidebar-user:hover { background: rgba(255,255,255,0.05); } .erp-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #060e38 0%, #3b7bff 50%, #cfdcff 100%); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0; box-shadow: 0 2px 10px rgba(59,123,255,0.35), 0 0 0 1.5px rgba(59,123,255,0.2); } .erp-user-info { white-space: nowrap; overflow: hidden; flex: 1; } .erp-user-info strong, .erp-user-name { display: block; font-size: 12.5px; color: #fff; font-weight: 600; line-height: 1.3; } .erp-user-info span { font-size: 10.5px; color: rgba(255,255,255,0.32); } .erp-sidebar.collapsed .erp-user-info { display: none; } /* ========================================================= MAIN AREA ========================================================= */ .erp-main { margin-left: var(--sidebar-w); flex: 1; /* min-width:0 lets this flex item shrink below the intrinsic width of wide content (e.g. tables with min-width). Without it, a wide table forces the whole page wider than the viewport on mobile (horizontal overflow bug). */ min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1); } .erp-main.sidebar-collapsed { margin-left: var(--sidebar-w-col); } /* ========================================================= TOPBAR ========================================================= */ .erp-topbar { height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--bg-topbar); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding-left: 24px; padding-right: 24px; gap: 12px; position: sticky; top: 0; z-index: 100; box-shadow: none; transition: background 0.3s, border-color 0.3s; } .erp-topbar-toggle { background: none; border: none; width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition); flex-shrink: 0; } .erp-topbar-toggle:hover { background: var(--gray-100); color: var(--primary); } .erp-topbar-toggle svg { width: 19px; height: 19px; } .erp-breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); flex: 1; min-width: 0; } .erp-breadcrumb span { color: var(--text-muted); flex-shrink: 0; } .erp-breadcrumb strong { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erp-bc-link { color: var(--text-muted); text-decoration: none; transition: color 0.15s; white-space: nowrap; flex-shrink: 0; } .erp-bc-link:hover { color: var(--primary); } .erp-bc-chevron { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.45; } .erp-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .erp-topbar-btn { width: 36px; height: 36px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); position: relative; transition: var(--transition); } .erp-topbar-btn:hover { background: var(--primary-light); color: var(--primary); border-color: rgba(26,86,219,0.3); } .erp-topbar-btn svg { width: 17px; height: 17px; } .erp-topbar-btn.erp-push-active { background: var(--primary-light); color: var(--primary); border-color: rgba(26,86,219,0.3); } .erp-lang-btn { font-size: 12px; font-weight: 800; letter-spacing: .2px; width: auto; padding: 0 10px; } .erp-notif-dot { display: none; /* hidden until notifications are implemented — show via JS when count > 0 */ position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--danger); border-radius: 50%; border: 2px solid var(--bg-topbar); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.8; } } .erp-topbar-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #060e38 0%, #3b7bff 50%, #cfdcff 100%); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; cursor: pointer; box-shadow: 0 2px 12px rgba(59,123,255,0.3), 0 0 0 2px rgba(59,123,255,0.15); transition: box-shadow 0.2s, transform 0.2s; } .erp-topbar-avatar:hover { box-shadow: 0 0 20px rgba(59,123,255,0.45), 0 0 0 2px rgba(59,123,255,0.35); transform: scale(1.08); } /* Role Badge */ .erp-role-badge { padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .erp-role-badge.admin { background: var(--primary-light); color: var(--primary); } .erp-role-badge.manager { background: var(--info-light); color: #0369a1; } .erp-role-badge.teacher { background: var(--success-light); color: #166534; } .erp-role-badge.student { background: var(--warning-light); color: #92400e; } .erp-role-badge.staff { background: var(--purple-light); color: #12277f; } .erp-role-badge.partner { background: #f0f9ff; color: #0369a1; border: 1px solid #7dd3fc; } .erp-role-badge.superadmin { background: #eaf0ff; color: #12277f; } .erp-role-badge.crm { background: #fff6dc; color: #8a5a00; border: 1px solid #ffe4a3; } /* Demo banner */ .erp-demo-banner { background: linear-gradient(90deg, #fbb50e, #e09d00); color: #fff; padding: 7px 16px; font-size: 12px; font-weight: 600; text-align: center; display: none; } .erp-demo-banner.visible { display: block; } /* Branch badge */ .erp-branch-badge { background: rgba(26,86,219,0.08); color: var(--primary); padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid rgba(26,86,219,0.15); } /* ========================================================= HUB TAB BAR — horizontal page switcher within a hub ========================================================= */ .erp-hub-tabbar { background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0; position: sticky; top: var(--topbar-h); z-index: 90; box-shadow: 0 1px 0 var(--border); } .erp-hub-tab-scroll { display: flex; align-items: center; padding: 0 18px; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; height: 46px; } .erp-hub-tab-scroll::-webkit-scrollbar { display: none; } .erp-hub-tab { display: inline-flex; align-items: center; padding: 6px 14px; height: 32px; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; border-radius: 8px; border: 1.5px solid transparent; transition: var(--transition); flex-shrink: 0; gap: 6px; } .erp-hub-tab:hover { color: var(--primary); background: var(--primary-light); } .erp-hub-tab.active { color: var(--primary); background: var(--primary-light); border-color: rgba(26,86,219,0.2); font-weight: 600; } .erp-hub-tab-icon { width: 14px; height: 14px; flex-shrink: 0; } @media (max-width: 768px) { .erp-hub-tab { padding: 5px 11px; font-size: 12.5px; } .erp-hub-tab-scroll { padding: 0 10px; height: 44px; } } [data-theme="dark"] .erp-hub-tabbar { background: var(--bg-card); border-bottom-color: var(--border); } [data-theme="dark"] .erp-hub-tab:hover { background: var(--primary-light); color: var(--primary); } [data-theme="dark"] .erp-hub-tab.active { color: var(--primary); background: var(--primary-light); border-color: rgba(59,123,255,0.25); } /* ========================================================= PAGE CONTENT ========================================================= */ .erp-content { padding: 28px 30px; flex: 1; min-width: 0; } .erp-page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .erp-page-title { font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.9px; line-height: 1.1; } .erp-page-subtitle { font-size: 13.5px; color: var(--text-muted); margin-top: 5px; font-weight: 400; line-height: 1.5; } .erp-page-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; align-items: center; } /* Panel loading */ .erp-panel-loading { display: flex; align-items: center; justify-content: center; height: 60vh; flex-direction: column; gap: 14px; color: var(--text-muted); font-size: 14px; } .erp-spinner { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--primary); animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================= BUTTONS ========================================================= */ .erp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; border-radius: 22px; font-size: 13px; font-weight: 600; border: 1.5px solid transparent; transition: var(--transition); cursor: pointer; white-space: nowrap; letter-spacing: -0.1px; position: relative; overflow: hidden; } .erp-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .erp-btn:active { transform: scale(0.97) !important; } .erp-btn:disabled { opacity: 0.52; cursor: not-allowed; pointer-events: none; } .erp-btn svg { width: 15px; height: 15px; flex-shrink: 0; } .erp-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: none; } .erp-btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); } .erp-btn-outline { background: transparent; color: var(--primary); border-color: var(--border); } .erp-btn-outline:hover { background: var(--primary-light); border-color: rgba(26,86,219,0.35); transform: translateY(-1px); } .erp-btn-success { background: linear-gradient(135deg, #15803d 0%, var(--success) 100%); color: #fff; border-color: #15803d; box-shadow: 0 2px 8px rgba(22,163,74,0.2); } .erp-btn-success:hover { background: linear-gradient(135deg, #166534 0%, #15803d 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,0.3); } .erp-btn-danger { background: linear-gradient(135deg, #dc2626 0%, var(--danger) 100%); color: #fff; border-color: #dc2626; } .erp-btn-danger:hover { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); transform: translateY(-1px); } .erp-btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); } .erp-btn-ghost:hover { background: var(--gray-100); color: var(--text-primary); border-color: var(--border-strong); } .erp-btn-gold { background: linear-gradient(135deg, #e09d00 0%, var(--gold) 100%); color: #fff; border-color: #e09d00; box-shadow: 0 2px 8px rgba(251,181,14,0.2); } .erp-btn-gold:hover { background: linear-gradient(135deg, #e09d00 0%, #e09d00 100%); transform: translateY(-1px); } .erp-btn-white { background: rgba(255,255,255,0.14); color: #fff; border: 1.5px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); } .erp-btn-white:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.38); } .erp-btn-sm { padding: 7px 15px; font-size: 12px; border-radius: 20px; gap: 5px; } .erp-btn-sm svg { width: 13px; height: 13px; } .erp-btn-lg { padding: 13px 30px; font-size: 14.5px; border-radius: 26px; } .erp-btn-icon { padding: 8px; } /* ========================================================= CARDS ========================================================= */ .erp-card { background: var(--bg-card); border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: none; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .erp-card:hover { border-color: var(--border-strong); } .erp-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .erp-card-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; } .erp-card-body { padding: 20px; } /* ========================================================= KPI STAT CARDS ========================================================= */ .erp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .erp-stat-card { background: var(--bg-card); border-radius: var(--radius-xl); border: 1px solid var(--border); padding: 20px; display: flex; align-items: center; gap: 16px; transition: var(--transition); box-shadow: none; position: relative; overflow: hidden; } .erp-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; width: auto; background: var(--primary); border-radius: var(--radius-md) var(--radius-md) 0 0; } .erp-stat-card.stat-green::before { background: var(--success); } .erp-stat-card.stat-gold::before { background: var(--gold); } .erp-stat-card.stat-red::before { background: var(--danger); } .erp-stat-card.stat-purple::before { background: var(--purple); } .erp-stat-card.stat-cyan::before { background: var(--info); } .erp-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .erp-stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } .erp-stat-icon.blue { background: linear-gradient(135deg, #1a56db, #3b82f6); color: #fff; box-shadow: 0 6px 18px rgba(26,86,219,0.32); } .erp-stat-icon.green { background: linear-gradient(135deg, #15803d, #16a34a); color: #fff; box-shadow: 0 6px 18px rgba(5,150,105,0.32); } .erp-stat-icon.gold { background: linear-gradient(135deg, #e09d00, #fbb50e); color: #fff; box-shadow: 0 6px 18px rgba(217,119,6,0.32); } .erp-stat-icon.red { background: linear-gradient(135deg, #dc2626, #dc2626); color: #fff; box-shadow: 0 6px 18px rgba(220,38,38,0.32); } .erp-stat-icon.purple { background: linear-gradient(135deg, #1a56db, #1a56db); color: #fff; box-shadow: 0 6px 18px rgba(26,86,219,0.32); } .erp-stat-icon.cyan { background: linear-gradient(135deg, #0284c7, #06b6d4); color: #fff; box-shadow: 0 6px 18px rgba(2,132,199,0.32); } .erp-stat-icon.cyan { background: linear-gradient(135deg, rgba(14,165,233,0.13), rgba(34,211,238,0.18)); color: var(--info); box-shadow: 0 4px 12px rgba(14,165,233,0.18); } .erp-stat-info { flex: 1; min-width: 0; } .erp-stat-value { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1.1; letter-spacing: -0.8px; } .erp-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; } .erp-stat-trend { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 6px; display: inline-block; } .erp-stat-trend.up { background: var(--success-light); color: #166534; } .erp-stat-trend.down { background: var(--danger-light); color: #b91c1c; } /* ========================================================= CHARTS GRID ========================================================= */ .erp-charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 22px; } .erp-chart-container { position: relative; height: 280px; } /* ========================================================= TABLES ========================================================= */ .erp-table-wrap, .erp-table-container, .erp-table-responsive { overflow-x: auto; } table.erp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .erp-table th { background: rgba(248,249,255,0.6); color: var(--text-secondary); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 11px 16px; text-align: left; border-bottom: 1.5px solid var(--border); white-space: nowrap; } .erp-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; font-size: 13px; } .erp-table tbody tr:last-child td { border-bottom: none; } .erp-table tbody tr { transition: background 0.12s; } .erp-table tbody tr:nth-child(even) td { background: rgba(249,250,251,0.7); } .erp-table tbody tr:hover td { background: var(--primary-light) !important; } [data-theme="dark"] .erp-table tbody tr:hover { background: rgba(26,86,219,0.07); } [data-theme="dark"] .erp-table th { background: rgba(255,255,255,0.02); } /* ========================================================= INVOICE MANAGEMENT TABS ========================================================= */ .erp-inv-tabs { display: flex; border-bottom: 1.5px solid var(--border); padding: 0 20px; background: var(--bg-card); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .erp-inv-tab { padding: 14px 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1.5px; cursor: pointer; transition: var(--transition); white-space: nowrap; } .erp-inv-tab:hover { color: var(--primary); } .erp-inv-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .erp-inv-tab-content { display: none; } .erp-inv-tab-content.active { display: block; } .erp-inv-toolbar { display: flex; gap: 8px; align-items: center; padding: 14px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .erp-inv-search { flex: 1; min-width: 200px; max-width: 300px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--bg-page); color: var(--text-primary); transition: var(--transition); } .erp-inv-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .erp-sortable-th { cursor: pointer; user-select: none; } .erp-sortable-th:hover { background: var(--primary-light); color: var(--primary); } .erp-sortable-th .sort-icon { margin-left: 4px; opacity: 0.4; font-size: 9px; } .erp-sortable-th.sort-asc .sort-icon::after { content: '▲'; opacity: 1; color: var(--primary); } .erp-sortable-th.sort-desc .sort-icon::after { content: '▼'; opacity: 1; color: var(--primary); } .erp-sortable-th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: '⇅'; } /* ========================================================= BADGES ========================================================= */ .erp-badge { display: inline-flex; align-items: center; padding: 2.5px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: 0.1px; } .erp-badge-success { background: var(--success-light); color: #166534; } .erp-badge-danger { background: var(--danger-light); color: #b91c1c; } .erp-badge-warning { background: var(--warning-light); color: #92400e; } .erp-badge-info { background: var(--info-light); color: #0369a1; } .erp-badge-primary { background: var(--primary-light); color: var(--primary); } .erp-badge-purple { background: var(--purple-light); color: #12277f; } .erp-badge-gold { background: var(--gold-light); color: #92400e; } .erp-badge-gray { background: var(--gray-100); color: var(--gray-600); } /* ========================================================= AVATAR ========================================================= */ .erp-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #060e38 0%, #3b7bff 50%, #cfdcff 100%); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; } .erp-avatar-sm { width: 28px; height: 28px; font-size: 10px; } .erp-avatar-lg { width: 52px; height: 52px; font-size: 18px; } .erp-avatar.green { background: linear-gradient(135deg, #166534, var(--success)); } .erp-avatar.gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #fff; } .erp-avatar.purple { background: linear-gradient(135deg, #12277f, var(--purple)); } .erp-avatar.red { background: linear-gradient(135deg, #b91c1c, var(--danger)); } /* ========================================================= FORMS ========================================================= */ .erp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .erp-form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .erp-form-grid.cols-1 { grid-template-columns: 1fr; } .erp-form-group { display: flex; flex-direction: column; gap: 5px; } .erp-form-group.full { grid-column: 1 / -1; } .erp-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .erp-input, .erp-select, .erp-textarea { width: 100%; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 13.5px; color: var(--text-primary); background: rgba(255,255,255,0.85); transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; outline: none; min-height: 40px; } .erp-input::placeholder, .erp-textarea::placeholder { color: var(--text-muted); } .erp-input:hover:not(:focus), .erp-select:hover:not(:focus), .erp-textarea:hover:not(:focus) { border-color: var(--border-strong); } .erp-input:focus, .erp-select:focus, .erp-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,0.1); background: #fff; } .erp-textarea { resize: vertical; min-height: 88px; } [data-theme="dark"] .erp-input, [data-theme="dark"] .erp-select, [data-theme="dark"] .erp-textarea { background: rgba(255,255,255,0.04); } /* ========================================================= SEARCH BAR ========================================================= */ .erp-search-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .erp-search-input-wrap { position: relative; flex: 1; min-width: 200px; } .erp-search-input-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; } .erp-search-input-wrap .erp-input { padding-left: 36px; } .erp-filter-select { padding: 9.5px 13px; min-width: 150px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); background: rgba(255,255,255,0.85); cursor: pointer; outline: none; transition: border-color 0.18s; } .erp-filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } /* ========================================================= MODAL ========================================================= */ .erp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 500; display: none; align-items: center; justify-content: center; padding: 24px; } .erp-modal-overlay.open { display: flex; } .erp-modal { background: #FBFAF6; border-radius: var(--radius-xl); box-shadow: 0 24px 60px rgba(25,26,18,0.2), 0 6px 16px rgba(25,26,18,0.1); border: 1px solid var(--border); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; animation: modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1); } .erp-modal-lg { max-width: 780px; } .erp-modal-xl { max-width: 1000px; } @keyframes modalIn { from { opacity: 0; transform: scale(0.94) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .erp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); } .erp-modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; } .erp-modal-body { padding: 24px; } .erp-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border); } [data-theme="dark"] .erp-modal-footer { background: rgba(255,255,255,0.02); } .erp-modal-close { background: none; border: none; width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 17px; line-height: 1; transition: var(--transition); } .erp-modal-close:hover { background: var(--danger-light); color: var(--danger); } /* ========================================================= PROGRESS BAR ========================================================= */ .erp-progress { height: 7px; background: var(--gray-200); border-radius: 20px; overflow: hidden; display: inline-block; min-width: 80px; vertical-align: middle; } .erp-progress-bar { height: 100%; border-radius: 20px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); } .erp-progress-bar.blue { background: linear-gradient(90deg, var(--primary), #60a5fa); } .erp-progress-bar.green { background: linear-gradient(90deg, #15803d, var(--success)); } .erp-progress-bar.gold { background: linear-gradient(90deg, #e09d00, var(--gold)); } .erp-progress-bar.red { background: linear-gradient(90deg, #dc2626, var(--danger)); } /* ========================================================= KANBAN (CRM) ========================================================= */ .erp-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; } .erp-kanban::-webkit-scrollbar { height: 5px; } .erp-kanban::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; } .erp-kanban-col { flex: 1; min-width: 220px; max-width: 280px; } .erp-kanban-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: 0.2px; } .erp-kanban-body { background: var(--gray-50); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 8px; min-height: 300px; display: flex; flex-direction: column; gap: 7px; } [data-theme="dark"] .erp-kanban-body { background: rgba(255,255,255,0.02); } .erp-kanban-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; cursor: grab; transition: var(--transition); } .erp-kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .erp-kanban-card-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .erp-kanban-card-info { font-size: 11px; color: var(--text-muted); } .erp-kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; } .kc-new { background: var(--info); } .kc-contacted { background: var(--primary); } .kc-interested { background: #e09d00; } .kc-converted { background: var(--success); } .kc-enrolled { background: var(--success); } .kc-demo { background: var(--purple); } .kc-negotiation { background: var(--warning); color: #111; } .kc-lost { background: var(--gray-500); } .kc-not-interested { background: var(--gray-500); } /* ========================================================= TOAST NOTIFICATIONS ========================================================= */ .erp-toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .erp-toast { display: flex; align-items: flex-start; gap: 12px; background: #FBFAF6; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px 16px; box-shadow: 0 12px 32px rgba(25,26,18,0.14), 0 2px 8px rgba(25,26,18,0.08); min-width: 280px; max-width: 360px; animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events: all; } @keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } .erp-toast-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; } .erp-toast-content { flex: 1; } .erp-toast-title { font-size: 13px; font-weight: 700; color: var(--text-primary); } .erp-toast-msg { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; } .erp-toast.success { border-left: 3px solid var(--success); } .erp-toast.error { border-left: 3px solid var(--danger); } .erp-toast.info { border-left: 3px solid var(--primary); } .erp-toast.warning { border-left: 3px solid var(--warning); } /* ========================================================= PLACEMENT STATS ========================================================= */ .erp-placement-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; } .erp-place-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); } .erp-place-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .erp-place-stat-val { font-size: 30px; font-weight: 800; color: var(--primary); letter-spacing: -1px; line-height: 1.15; } .erp-place-stat-lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; } /* ========================================================= NOTIFICATIONS ========================================================= */ .erp-notif-type-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 20px; } .erp-notif-type-card { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: var(--transition); text-align: center; } .erp-notif-type-card.selected { border-color: var(--primary); background: var(--primary-light); } .erp-notif-type-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .erp-notif-type-icon { font-size: 26px; margin-bottom: 8px; } .erp-notif-type-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } /* ========================================================= MATERIAL CARDS ========================================================= */ .erp-materials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .erp-material-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; transition: var(--transition); } .erp-material-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary); } .erp-material-icon { font-size: 30px; margin-bottom: 12px; } .erp-material-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.1px; } .erp-material-meta { font-size: 11.5px; color: var(--text-muted); } /* ========================================================= FEE SUMMARY ========================================================= */ .erp-fee-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; } .erp-fee-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; transition: var(--transition); } .erp-fee-item:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .erp-fee-amount { font-size: 23px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.2; } .erp-fee-label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 4px; } /* ========================================================= ACTIVITY FEED ========================================================= */ .erp-activity-feed { display: flex; flex-direction: column; } .erp-activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } .erp-activity-item:last-child { border-bottom: none; } .erp-activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-top: 6px; flex-shrink: 0; } .erp-activity-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .erp-activity-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .erp-activity-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; } .erp-activity-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; } /* ========================================================= CERTIFICATE ========================================================= */ .erp-cert-preview { background: linear-gradient(135deg, #0c1a3e 0%, #1a56db 100%); border-radius: var(--radius-lg); padding: 40px; color: #fff; text-align: center; position: relative; overflow: hidden; } .erp-cert-preview::before { content: ''; position: absolute; inset: 14px; border: 1.5px solid rgba(255,255,255,0.12); border-radius: 10px; pointer-events: none; } .erp-cert-logo { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: 2.5px; margin-bottom: 16px; text-transform: uppercase; } .erp-cert-title { font-size: 27px; font-weight: 300; margin-bottom: 8px; opacity: 0.78; } .erp-cert-name { font-size: 36px; font-weight: 900; margin-bottom: 8px; letter-spacing: -0.5px; } .erp-cert-course { font-size: 15px; margin-bottom: 4px; opacity: 0.85; } .erp-cert-date { font-size: 13px; opacity: 0.55; margin-bottom: 24px; } .erp-cert-id { font-size: 10.5px; opacity: 0.45; letter-spacing: 1.2px; } /* ========================================================= EXAM ENGINE ========================================================= */ .erp-exam-card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 32px; max-width: 720px; margin: 0 auto; box-shadow: var(--shadow-md); } .erp-exam-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .erp-exam-title { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; } .erp-exam-timer-wrap, .erp-exam-timer { display: flex; align-items: center; gap: 8px; background: var(--danger-light); color: var(--danger); padding: 7px 15px; border-radius: 20px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid rgba(239,68,68,0.2); } .erp-exam-progress { margin-bottom: 24px; } .erp-exam-q-num { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .erp-exam-question { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; line-height: 1.55; } .erp-exam-options { display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; } .erp-exam-option { display: flex; align-items: center; gap: 14px; padding: 13px 17px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); font-size: 14px; color: var(--text-primary); } .erp-exam-option:hover { border-color: var(--primary); background: var(--primary-light); transform: translateX(3px); } .erp-exam-option.selected { border-color: var(--primary); background: var(--primary-light); } .erp-exam-option.correct { border-color: var(--success); background: var(--success-light); } .erp-exam-option.wrong { border-color: var(--danger); background: var(--danger-light); } .erp-exam-option-letter { width: 26px; height: 26px; flex-shrink: 0; background: var(--gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; } /* ========================================================= ATTENDANCE ========================================================= */ .erp-attend-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--border); transition: background 0.12s; } .erp-attend-row:last-child { border-bottom: none; } .erp-attend-row:hover { background: var(--gray-50); } .erp-attend-student { display: flex; align-items: center; gap: 12px; } .erp-attend-radio { display: flex; align-items: center; gap: 6px; } .erp-attend-radio label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; padding: 5px 10px; border-radius: 6px; border: 1.5px solid var(--border); transition: var(--transition); } .erp-attend-radio input[type="radio"] { display: none; } .erp-attend-radio input[type="radio"]:checked + label.present { background: var(--success-light); border-color: var(--success); color: #166534; font-weight: 700; } .erp-attend-radio input[type="radio"]:checked + label.absent { background: var(--danger-light); border-color: var(--danger); color: #b91c1c; font-weight: 700; } .erp-attend-radio input[type="radio"]:checked + label.late { background: var(--warning-light); border-color: var(--warning); color: #92400e; font-weight: 700; } /* ========================================================= WELCOME BANNER ========================================================= */ .erp-welcome-banner { background: linear-gradient(135deg, #060e38 0%, #1a56db 55%, #3b7bff 100%); border-radius: var(--radius-lg); padding: 26px 30px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #fff; position: relative; overflow: hidden; box-shadow: 0 8px 40px rgba(26,86,219,0.35), inset 0 1px 0 rgba(255,255,255,0.08); border: 1px solid rgba(59,123,255,0.2); } .erp-welcome-banner::before { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: rgba(255,255,255,0.04); border-radius: 50%; } .erp-welcome-banner::after { content: ''; position: absolute; right: 80px; bottom: -80px; width: 160px; height: 160px; background: rgba(255,255,255,0.03); border-radius: 50%; } .erp-welcome-title { font-size: 21px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.4px; } .erp-welcome-sub { font-size: 13px; opacity: 0.7; } /* ========================================================= TEACHER TABS ========================================================= */ .teacher-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--border); margin-bottom: 22px; } .teacher-tab { padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: var(--transition); } .teacher-tab:hover { color: var(--primary); } .teacher-tab.active { color: var(--primary); border-bottom-color: var(--primary); } /* ========================================================= LEGACY GRID COMPATIBILITY ========================================================= */ .erp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .erp-col-1 { grid-column: span 1; } .erp-col-2 { grid-column: span 2; } .erp-col-3 { grid-column: span 1; } .erp-col-4 { grid-column: span 4; } .erp-col-12 { grid-column: 1 / -1; } .erp-stat-card .val { font-size: 26px; font-weight: 800; color: var(--text-primary); margin-top: 4px; letter-spacing: -0.5px; } .erp-stat-card h3 { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; } /* ========================================================= LOGIN PAGE ========================================================= */ .erp-login-page { min-height: 100vh; min-height: 100dvh; background: var(--bg-page, #F1F0EA); display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; } .erp-login-page::before { background-image: linear-gradient(rgba(59,123,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(59,123,255,0.04) 1px, transparent 1px); background-size: 40px 40px; position: absolute; inset: 0; content: ''; pointer-events: none; } .erp-login-page::before { content: ''; position: absolute; width: 800px; height: 800px; background: radial-gradient(circle, rgba(26,86,219,0.22) 0%, transparent 65%); border-radius: 50%; top: -250px; right: -250px; animation: pulse 9s ease-in-out infinite; } .erp-login-page::after { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(59,123,255,0.14) 0%, transparent 65%); border-radius: 50%; bottom: -120px; left: -120px; animation: pulse 11s ease-in-out infinite reverse; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } } .erp-login-card { background: rgba(255,255,255,0.97); backdrop-filter: blur(32px) saturate(1.8); -webkit-backdrop-filter: blur(32px) saturate(1.8); border-radius: 22px; box-shadow: 0 32px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,123,255,0.2), 0 0 60px rgba(26,86,219,0.15); width: 100%; max-width: 420px; padding: 46px 38px; position: relative; z-index: 1; animation: loginIn 0.45s cubic-bezier(0.34,1.56,0.64,1); border-top: 1px solid rgba(255,255,255,0.6); border-left: 1px solid rgba(255,255,255,0.4); } @keyframes loginIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } [data-theme="dark"] .erp-login-card { background: rgba(24,23,42,0.96); backdrop-filter: blur(32px) saturate(2); box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(59,123,255,0.18), 0 0 60px rgba(26,86,219,0.12); border-top: 1px solid rgba(59,123,255,0.15); border-left: 1px solid rgba(59,123,255,0.1); } .erp-login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; } .erp-login-logo-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary), #60a5fa); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; color: #fff; box-shadow: 0 6px 18px rgba(26,86,219,0.38); } .erp-login-logo-text strong { display: block; font-size: 17px; font-weight: 800; color: #111; letter-spacing: -0.3px; } .erp-login-logo-text span { font-size: 11.5px; color: #888; font-weight: 400; } [data-theme="dark"] .erp-login-logo-text strong { color: var(--text-primary); } [data-theme="dark"] .erp-login-logo-text span { color: var(--text-muted); } .erp-login-title { font-size: 25px; font-weight: 800; color: #111; margin-bottom: 6px; letter-spacing: -0.5px; } .erp-login-subtitle { font-size: 13px; color: #777; margin-bottom: 28px; } [data-theme="dark"] .erp-login-title { color: var(--text-primary); } [data-theme="dark"] .erp-login-subtitle { color: var(--text-muted); } /* ========================================================= OVERLAY (mobile) ========================================================= */ .erp-overlay-drop { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.4); display: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .erp-overlay-drop.open { display: block; } /* ========================================================= UTILITY CLASSES ========================================================= */ .erp-flex { display: flex; } .erp-flex-center { display: flex; align-items: center; } .erp-gap-8 { gap: 8px; } .erp-gap-12 { gap: 12px; } .erp-gap-16 { gap: 16px; } .erp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .erp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .erp-mb-8 { margin-bottom: 8px; } .erp-mb-12 { margin-bottom: 12px; } .erp-mb-16 { margin-bottom: 16px; } .erp-mb-24 { margin-bottom: 24px; } .erp-text-sm { font-size: 12px; } .erp-text-muted { color: var(--text-muted); } .erp-text-primary { color: var(--primary); } .erp-text-success { color: var(--success); } .erp-text-danger { color: var(--danger); } .erp-fw-700 { font-weight: 700; } .erp-fw-600 { font-weight: 600; } .erp-text-center { text-align: center; } .erp-w-full { width: 100%; } .erp-divider { height: 1px; background: var(--border); margin: 20px 0; } .erp-mt-0 { margin-top: 0 !important; } .erp-p-0 { padding: 0 !important; } /* Info box */ .erp-info-box { background: var(--primary-light); border: 1px solid rgba(26,86,219,0.18); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: 13px 16px; font-size: 13px; color: var(--primary); line-height: 1.5; } /* ========================================================= RESPONSIVE — COMPREHENSIVE Breakpoints: 1200 → 1024 → 900 → 768 → 640 → 480 → 380 ========================================================= */ /* ── 1200px : Large tablet ─────────────────────────────── */ @media (max-width: 1200px) { .erp-stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ── 1024px : Tablet ──────────────────────────────────── */ @media (max-width: 1024px) { .erp-charts-grid { grid-template-columns: 1fr; } .erp-grid { grid-template-columns: repeat(2, 1fr); } .erp-form-grid.cols-3 { grid-template-columns: 1fr 1fr; } } /* ── 900px ────────────────────────────────────────────── */ @media (max-width: 900px) { .erp-grid-2 { grid-template-columns: 1fr !important; } .erp-charts-grid { grid-template-columns: 1fr !important; } } /* ── 768px : Mobile / tablet pivot ────────────────────── */ @media (max-width: 768px) { /* ── Glass / performance tuning for phones ────────────── - Lighter blur: heavy backdrop-filter jank-scrolls on mobile GPUs. - Fixed background attachment is broken on iOS Safari — use scroll. */ :root { --glass-blur: blur(14px) saturate(1.5); } /* Sidebar — slide off-screen; overlay closes it. Opaque on mobile so nav stays readable while it floats over content. */ .erp-sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; z-index: 300; background: rgba(255,255,255,0.98); backdrop-filter: none; -webkit-backdrop-filter: none; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s; } [data-theme="dark"] .erp-sidebar { background: rgba(22,21,15,0.99); } .erp-sidebar.mobile-open { transform: translateX(0); box-shadow: 8px 0 48px rgba(6,14,56,0.28); } .erp-main { margin-left: 0 !important; } /* Comfortable tap targets (≥44px) for nav + topbar controls */ .erp-nav-link, .erp-nav-group-header { padding-top: 11px; padding-bottom: 11px; } .erp-topbar-btn, .erp-topbar-avatar, .erp-topbar-toggle { min-width: 40px; min-height: 40px; } /* Topbar */ .erp-topbar { padding: 0 12px; padding-top: env(safe-area-inset-top); gap: 8px; height: calc(56px + env(safe-area-inset-top)); } .erp-breadcrumb { font-size: 12px; } /* Hub tab bar: adjust sticky top to match reduced mobile topbar height */ .erp-hub-tabbar { top: 56px; } .erp-breadcrumb > span:not(strong), .erp-breadcrumb .erp-bc-link:first-child, .erp-breadcrumb .erp-bc-chevron:first-of-type { display: none; } /* hide "Dashboard ›" prefix on mobile */ /* Content */ .erp-content { padding: 14px 12px 24px; } /* Page header */ .erp-page-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .erp-page-title { font-size: 17px; } .erp-page-subtitle { font-size: 12px; } .erp-page-actions { width: 100%; flex-wrap: wrap; gap: 6px; } /* Stats cards */ .erp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } .erp-stat-card { padding: 14px 12px; gap: 10px; } .erp-stat-icon { width: 40px; height: 40px; font-size: 17px; } .erp-stat-value { font-size: 20px; } .erp-stat-label { font-size: 11.5px; } /* Charts */ .erp-charts-grid { grid-template-columns: 1fr !important; } /* Tables — horizontal scroll */ .erp-table-wrap, .erp-table-container, .erp-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 var(--radius-md) var(--radius-md); } .erp-table { min-width: 600px; } .erp-table td, .erp-table th { padding: 10px 12px; } /* Table action cells — don't wrap */ .erp-table td:last-child > div { flex-wrap: nowrap !important; } /* Search / filter bar */ .erp-search-bar { flex-direction: column; align-items: stretch; gap: 8px; } .erp-search-input-wrap { min-width: 0; } .erp-filter-select { min-width: 0; width: 100%; } /* Form grids → 2-col inside modals / pages */ .erp-form-grid, .erp-form-grid.cols-3 { grid-template-columns: 1fr 1fr !important; } /* Opt-in utility: any inline multi-column row stacks to one column on mobile */ .erp-stack-mobile { grid-template-columns: 1fr !important; } /* Kanban (CRM) */ .erp-kanban { flex-direction: column; } .erp-kanban-col { max-width: 100%; min-width: 0; } /* Fee summary */ .erp-fee-summary { grid-template-columns: 1fr 1fr; } /* Placement stats */ .erp-placement-stats { grid-template-columns: 1fr 1fr !important; } /* Notification type cards */ .erp-notif-type-grid { grid-template-columns: 1fr 1fr; } /* Generic grid */ .erp-grid { grid-template-columns: repeat(2, 1fr); } /* Login */ .erp-login-card { padding: 28px 20px; max-width: calc(100vw - 32px); } /* Certificate preview */ .erp-cert-preview { padding: 24px 16px; } .erp-cert-name { font-size: 22px; } .erp-cert-title { font-size: 16px; } /* Exam card */ .erp-exam-card { padding: 20px 16px; } .erp-exam-header { flex-direction: column; align-items: flex-start; gap: 10px; } .erp-exam-question { font-size: 14px; } /* Invoice tabs */ .erp-inv-tabs { overflow-x: auto; padding: 0 10px; } .erp-inv-tab { padding: 10px 12px; font-size: 12.5px; flex-shrink: 0; } .erp-inv-toolbar { padding: 10px 12px; gap: 6px; } .erp-inv-search { min-width: 0; max-width: none; flex: 1; } /* Toast */ .erp-toast-container { bottom: 10px; right: 10px; left: 10px; } .erp-toast { min-width: 0; max-width: 100%; width: 100%; } /* Modals — bottom-sheet */ .erp-modal-overlay { padding: 0; align-items: flex-end; } .erp-modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; max-width: 100% !important; width: 100%; max-height: 94vh; animation: modalInMobile 0.32s cubic-bezier(0.34,1.56,0.64,1); } @keyframes modalInMobile { from { transform: translateY(100%); opacity: 0.8; } to { transform: translateY(0); opacity: 1; } } .erp-modal-header { padding: 14px 16px; } .erp-modal-body { padding: 16px; } .erp-modal-footer { padding: 10px 16px; } /* Attendance rows */ .erp-attend-row { flex-wrap: wrap; gap: 8px; } .erp-attend-radio { flex-wrap: wrap; gap: 4px; } } /* ── 640px : Small phones ─────────────────────────────── */ @media (max-width: 640px) { /* All form grids → single column */ .erp-form-grid, .erp-form-grid.cols-3, .erp-form-grid.cols-2 { grid-template-columns: 1fr !important; } /* Fee summary → single col */ .erp-fee-summary { grid-template-columns: 1fr !important; } /* Placement stats → single col */ .erp-placement-stats { grid-template-columns: 1fr !important; } /* Page actions → full-width stacked */ .erp-page-actions { flex-direction: column; align-items: stretch; } .erp-page-actions > .erp-btn { width: 100%; justify-content: center; } /* Stat cards */ .erp-stat-card { padding: 12px 10px; gap: 8px; } .erp-stat-icon { width: 34px; height: 34px; font-size: 14px; } .erp-stat-value { font-size: 17px; letter-spacing: -0.3px; } /* Hide table action button labels on tiny screens */ .erp-btn.erp-btn-sm .btn-text { display: none; } /* Hide role badge + extra topbar tags (e.g. partner "VIEW ONLY") */ .erp-role-badge { display: none; } .erp-topbar-tag { display: none !important; } /* Keep the topbar title from pushing actions off-screen */ .erp-topbar-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* The topbar is a fixed-height, no-wrap flex row, so on a phone its action buttons were simply off the right edge with no way to reach them: on the WhatsApp Inbox at 390px the bar measured 719px wide, putting New Broadcast and Broadcast History outside the screen entirely. Let the action strip scroll sideways instead of overflowing into nothing. Every page that puts buttons up there gets this. */ .erp-topbar { padding-left: 12px; padding-right: 12px; gap: 8px; } .erp-topbar-actions { flex-shrink: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* NOT flex-end: with it the buttons overflow past the LEFT edge at negative offsets, which no browser can scroll back to, so they are invisible and unreachable. Left-aligned content overflows rightward, which scrolls. margin-left:auto still keeps the strip right-aligned when it fits. */ justify-content: flex-start; margin-left: auto; } .erp-topbar-actions::-webkit-scrollbar { display: none; } .erp-topbar-actions > * { flex-shrink: 0; } /* The breadcrumb must give way first; the buttons are what people need. */ .erp-breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 2; } /* Notif cards → 1 col */ .erp-notif-type-grid { grid-template-columns: 1fr !important; } /* Exam timer and question on same line */ .erp-exam-timer-wrap, .erp-exam-timer { font-size: 13px; padding: 5px 12px; } /* Card body padding */ .erp-card-body { padding: 14px; } .erp-card-header { padding: 12px 14px; } } /* ── 480px : Very small / iPhone SE ───────────────────── */ @media (max-width: 480px) { .erp-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; } .erp-grid { grid-template-columns: 1fr !important; } .erp-content { padding: 10px 8px 20px; } .erp-topbar { padding: 0 8px; padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); } .erp-hub-tabbar { top: 52px; } .erp-hub-tab { padding: 0 10px; height: 38px; font-size: 12.5px; } .erp-page-title { font-size: 15px; } .erp-table td, .erp-table th { padding: 8px 10px; font-size: 12px; } .erp-stat-value { font-size: 15px; } .erp-stat-icon { width: 30px; height: 30px; font-size: 13px; } /* Login card */ .erp-login-card { padding: 22px 14px; } } /* ── 380px : Tiny phones ──────────────────────────────── */ @media (max-width: 380px) { .erp-stats-grid { grid-template-columns: 1fr !important; } .erp-topbar-btn, .erp-topbar-avatar { width: 30px; height: 30px; font-size: 11px; } .erp-stat-card { flex-direction: row; align-items: center; } } /* ========================================================= PAGE-SPECIFIC RESPONSIVE HELPERS (classes added to inline-styled elements so media queries can reach them) ========================================================= */ /* student-fees.html — 4-col fee summary */ @media (max-width: 768px) { .erp-fee-stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } } @media (max-width: 480px) { .erp-fee-stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .erp-fee-stats-row > div > div:first-child { font-size: 20px !important; } } /* Generic inline grid helpers used across pages */ @media (max-width: 768px) { /* 3-column section headers in detail views */ [class*="detail-grid-3"], .resp-3col { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 640px) { [class*="detail-grid-3"], .resp-3col, .resp-2col { grid-template-columns: 1fr !important; } } /* Overlay for mobile sidebar close */ .erp-overlay-drop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 290; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; transition: opacity 0.2s; } .erp-overlay-drop.open { display: block; } /* ── PARTNER (VIEWER) VIEW-ONLY MODE ───────────────────────── Primary lockdown is ERPViewOnly.lock() in erp-script.js, which disables any button/link whose text, aria-label or title reads as a mutating action, plus every input inside an .erp-modal. The rules below are defense-in-depth: known-dangerous classes are dimmed even before that JS pass runs, and .erp-locked (added by the JS) always renders as visually inert regardless of what selector caught it. */ .partner-view .erp-btn-primary:not(.pv-allow), .partner-view .erp-btn-danger:not(.pv-allow), .partner-view [data-modal-open]:not(.pv-allow) { opacity: 0.45; pointer-events: none; cursor: not-allowed; } .partner-view .erp-locked { opacity: 0.45 !important; pointer-events: none !important; cursor: not-allowed !important; } .partner-view .erp-modal input:disabled, .partner-view .erp-modal select:disabled, .partner-view .erp-modal textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-secondary, #f1f5f9); } /* ========================================================= FUTURISTIC THEME — CYBERPUNK OVERRIDES All rules are either [data-theme="dark"] scoped or apply universal visual upgrades (glows, animations). Zero structural / layout changes. ========================================================= */ /* ── Keyframe Animations ─────────────────────────────── */ @keyframes brand-glow { 0%, 100% { box-shadow: 0 4px 16px rgba(26,86,219,0.45), 0 0 0 1px rgba(255,255,255,0.08); } 50% { box-shadow: 0 4px 24px rgba(59,123,255,0.55), 0 0 0 1px rgba(255,255,255,0.12); } } @keyframes erp-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes erp-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ── Typography refinements ──────────────────────────── */ .erp-page-title { letter-spacing: -0.5px; } .erp-brand-text strong { letter-spacing: -0.4px; } /* ── Entrance animations ─────────────────────────────── */ .erp-stats-grid .erp-stat-card { animation: erp-fade-up 0.45s cubic-bezier(0.16,1,0.3,1) both; } .erp-stats-grid .erp-stat-card:nth-child(1) { animation-delay: 0.03s; } .erp-stats-grid .erp-stat-card:nth-child(2) { animation-delay: 0.08s; } .erp-stats-grid .erp-stat-card:nth-child(3) { animation-delay: 0.13s; } .erp-stats-grid .erp-stat-card:nth-child(4) { animation-delay: 0.18s; } .erp-stats-grid .erp-stat-card:nth-child(5) { animation-delay: 0.23s; } .erp-stats-grid .erp-stat-card:nth-child(6) { animation-delay: 0.28s; } .erp-content > .erp-card { animation: erp-fade-up 0.4s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.06s; } /* Flat warm-grey page background */ body:not([data-theme="dark"]) { background: var(--bg-page); } /* Light theme: flat warm-grey card surfaces */ body:not([data-theme="dark"]) .erp-card { box-shadow: none; border-color: var(--border); } body:not([data-theme="dark"]) .erp-card:hover { box-shadow: none; border-color: var(--border-strong); } /* Stat card: flat warm-grey */ body:not([data-theme="dark"]) .erp-stat-card { box-shadow: none; } body:not([data-theme="dark"]) .erp-stat-card:hover { box-shadow: none; transform: translateY(-2px); } /* ── Dark Mode — Page Background (flat) ──────────────── */ [data-theme="dark"] body, body[data-theme="dark"] { background-color: var(--bg-page); background-image: none; } /* ── Dark Mode — Sidebar ──────────────────────────────── */ [data-theme="dark"] .erp-sidebar { background: #16150F; border-right: 1px solid rgba(255,255,255,0.07); box-shadow: none; } [data-theme="dark"] .erp-sidebar-brand { border-bottom: 1px solid rgba(255,255,255,0.07); background: transparent; } [data-theme="dark"] .erp-brand-text strong { color: #F1F5F9; } [data-theme="dark"] .erp-brand-text span { color: #64748B; } [data-theme="dark"] .erp-nav-section-label, [data-theme="dark"] .erp-nav-label { color: #475569; } [data-theme="dark"] .erp-nav-link { color: #94A3B8; } [data-theme="dark"] .erp-nav-link:hover { background: rgba(59,123,255,0.08); color: #3b7bff; } [data-theme="dark"] .erp-nav-link.active { background: rgba(59,123,255,0.14); color: #3b7bff; box-shadow: inset 3px 0 0 #3b7bff; font-weight: 600; } [data-theme="dark"] .erp-nav-group-header { color: #94A3B8; } [data-theme="dark"] .erp-nav-group-header:hover { background: rgba(59,123,255,0.08); color: #3b7bff; } [data-theme="dark"] .erp-nav-group-header.open { color: #3b7bff; } [data-theme="dark"] .erp-nav-group-children .erp-nav-link.active { color: #3b7bff; } [data-theme="dark"] .erp-nav-group-children .erp-nav-link.active::before { background: #3b7bff; box-shadow: 0 0 6px rgba(59,123,255,0.5); } [data-theme="dark"] .erp-nav-sep { background: rgba(255,255,255,0.06); } [data-theme="dark"] .erp-sidebar-footer { border-top: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .erp-sidebar-user:hover { background: rgba(59,123,255,0.08); } /* ── Dark Mode — Topbar ───────────────────────────────── */ [data-theme="dark"] .erp-topbar { background: rgba(22,21,15,0.94); border-bottom: 1px solid rgba(255,255,255,0.07); box-shadow: 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); } [data-theme="dark"] .erp-topbar-toggle:hover { background: rgba(59,123,255,0.1); color: #3b7bff; } [data-theme="dark"] .erp-topbar-btn { border-color: rgba(255,255,255,0.1); color: #A1A1AA; } [data-theme="dark"] .erp-topbar-btn:hover { background: rgba(59,123,255,0.1); border-color: rgba(59,123,255,0.3); color: #3b7bff; } [data-theme="dark"] .erp-topbar-btn.erp-push-active { background: rgba(59,123,255,0.1); border-color: rgba(59,123,255,0.3); color: #3b7bff; } [data-theme="dark"] .erp-notif-dot { border-color: rgba(22,21,15,0.94); } /* ── Dark Mode — Cards ────────────────────────────────── */ [data-theme="dark"] .erp-card { background: #221F17; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 1px 3px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03); } [data-theme="dark"] .erp-card:hover { border-color: rgba(59,123,255,0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,123,255,0.1); transform: translateY(-1px); } [data-theme="dark"] .erp-card-header { background: rgba(59,123,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); } /* ── Dark Mode — Stat Cards ───────────────────────────── */ [data-theme="dark"] .erp-stat-card { background: #221F17; border: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] .erp-stat-card:hover { border-color: rgba(59,123,255,0.22); box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(59,123,255,0.1); transform: translateY(-3px); } [data-theme="dark"] .erp-stat-card::before { opacity: 0.9; } [data-theme="dark"] .erp-stat-icon.blue { background: linear-gradient(135deg, #1a4fba, #2563eb); box-shadow: 0 6px 20px rgba(26,86,219,0.4); } [data-theme="dark"] .erp-stat-icon.green { background: linear-gradient(135deg, #166534, #15803d); box-shadow: 0 6px 20px rgba(5,150,105,0.4); } [data-theme="dark"] .erp-stat-icon.gold { background: linear-gradient(135deg, #e09d00, #e09d00); box-shadow: 0 6px 20px rgba(217,119,6,0.4); } [data-theme="dark"] .erp-stat-icon.red { background: linear-gradient(135deg, #b91c1c, #dc2626); box-shadow: 0 6px 20px rgba(220,38,38,0.4); } [data-theme="dark"] .erp-stat-icon.purple { background: linear-gradient(135deg, #1a56db, #1a56db); box-shadow: 0 6px 20px rgba(26,86,219,0.4); } [data-theme="dark"] .erp-stat-icon.cyan { background: linear-gradient(135deg, #0369a1, #0284c7); box-shadow: 0 6px 20px rgba(2,132,199,0.4); } [data-theme="dark"] .erp-stat-icon.cyan { background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(59,123,255,0.2)); box-shadow: 0 4px 14px rgba(34,211,238,0.22); } /* ── Dark Mode — Buttons ──────────────────────────────── */ [data-theme="dark"] .erp-btn-primary { background: linear-gradient(135deg, #060e38 0%, #3b7bff 100%); border-color: #1a56db; box-shadow: 0 4px 14px rgba(26,86,219,0.4), 0 2px 8px rgba(0,0,0,0.3); color: #fff; } [data-theme="dark"] .erp-btn-primary:hover { background: linear-gradient(135deg, #1a56db 0%, #3b7bff 100%); box-shadow: 0 6px 20px rgba(26,86,219,0.55), 0 4px 12px rgba(0,0,0,0.4); transform: translateY(-1px); } [data-theme="dark"] .erp-btn-outline { background: rgba(59,123,255,0.07); color: #3b7bff; border-color: rgba(59,123,255,0.28); } [data-theme="dark"] .erp-btn-outline:hover { background: rgba(59,123,255,0.14); border-color: rgba(59,123,255,0.5); box-shadow: 0 0 16px rgba(59,123,255,0.15); } [data-theme="dark"] .erp-btn-ghost { background: rgba(255,255,255,0.04); color: #A1A1AA; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .erp-btn-ghost:hover { background: rgba(255,255,255,0.08); color: #F1F5F9; border-color: rgba(255,255,255,0.18); } [data-theme="dark"] .erp-btn-success { background: linear-gradient(135deg, #15803d 0%, #34d399 100%); box-shadow: 0 0 14px rgba(52,211,153,0.2), 0 2px 8px rgba(0,0,0,0.4); } [data-theme="dark"] .erp-btn-success:hover { box-shadow: 0 0 22px rgba(52,211,153,0.35), 0 4px 12px rgba(0,0,0,0.5); } [data-theme="dark"] .erp-btn-danger { background: linear-gradient(135deg, #dc2626 0%, #f87171 100%); box-shadow: 0 0 14px rgba(248,113,113,0.2), 0 2px 8px rgba(0,0,0,0.4); } /* ── Dark Mode — Tables ───────────────────────────────── */ [data-theme="dark"] .erp-table th { background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.08); color: #71717A; } [data-theme="dark"] .erp-table td { border-bottom: 1px solid rgba(255,255,255,0.05); } [data-theme="dark"] .erp-table tbody tr:nth-child(even) td { background: rgba(59,123,255,0.02); } [data-theme="dark"] .erp-table tbody tr:hover td { background: rgba(59,123,255,0.07) !important; } /* ── Dark Mode — Forms ────────────────────────────────── */ [data-theme="dark"] .erp-input, [data-theme="dark"] .erp-select, [data-theme="dark"] .erp-textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #F1F5F9; } [data-theme="dark"] .erp-input:hover:not(:focus), [data-theme="dark"] .erp-select:hover:not(:focus), [data-theme="dark"] .erp-textarea:hover:not(:focus) { border-color: rgba(255,255,255,0.18); } [data-theme="dark"] .erp-input:focus, [data-theme="dark"] .erp-select:focus, [data-theme="dark"] .erp-textarea:focus { border-color: #3b7bff; box-shadow: 0 0 0 3px rgba(59,123,255,0.15); background: rgba(59,123,255,0.06); } [data-theme="dark"] .erp-input::placeholder, [data-theme="dark"] .erp-textarea::placeholder { color: #52525B; } [data-theme="dark"] .erp-filter-select { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #F1F5F9; } [data-theme="dark"] .erp-inv-search { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #F1F5F9; } /* ── Dark Mode — Modals ───────────────────────────────── */ [data-theme="dark"] .erp-modal { background: #221F17; border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 32px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(59,123,255,0.08); } [data-theme="dark"] .erp-modal-header { border-bottom: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] .erp-modal-footer { background: rgba(59,123,255,0.04); border-top: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] .erp-modal-overlay { background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); } /* ── Dark Mode — Toasts ───────────────────────────────── */ [data-theme="dark"] .erp-toast { background: #221F17; border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 8px 32px rgba(0,0,0,0.6); } [data-theme="dark"] .erp-toast.success { border-left: 3px solid #34d399; } [data-theme="dark"] .erp-toast.error { border-left: 3px solid #f87171; } [data-theme="dark"] .erp-toast.info { border-left: 3px solid #3b7bff; } [data-theme="dark"] .erp-toast.warning { border-left: 3px solid #fbb50e; } /* ── Dark Mode — Badges ───────────────────────────────── */ [data-theme="dark"] .erp-badge-success { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.2); } [data-theme="dark"] .erp-badge-danger { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.2); } [data-theme="dark"] .erp-badge-warning { background: rgba(251,191,36,0.12); color: #fbb50e; border: 1px solid rgba(251,191,36,0.2); } [data-theme="dark"] .erp-badge-info { background: rgba(34,211,238,0.12); color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); } [data-theme="dark"] .erp-badge-primary { background: rgba(59,123,255,0.12); color: #3b7bff; border: 1px solid rgba(59,123,255,0.2); } [data-theme="dark"] .erp-badge-purple { background: rgba(192,132,252,0.12); color: #c084fc; border: 1px solid rgba(192,132,252,0.2); } [data-theme="dark"] .erp-badge-gold { background: rgba(251,191,36,0.12); color: #fbb50e; border: 1px solid rgba(251,191,36,0.2); } [data-theme="dark"] .erp-badge-gray { background: rgba(255,255,255,0.06); color: #A1A1AA; border: 1px solid rgba(255,255,255,0.1); } /* ── Dark Mode — Progress Bars ────────────────────────── */ [data-theme="dark"] .erp-progress { background: rgba(59,123,255,0.1); } [data-theme="dark"] .erp-progress-bar.blue { background: linear-gradient(90deg, #060e38, #3b7bff); box-shadow: 0 0 8px rgba(59,123,255,0.4); } [data-theme="dark"] .erp-progress-bar.green { background: linear-gradient(90deg, #15803d, #34d399); box-shadow: 0 0 8px rgba(52,211,153,0.4); } [data-theme="dark"] .erp-progress-bar.gold { background: linear-gradient(90deg, #e09d00, #fbb50e); box-shadow: 0 0 8px rgba(251,191,36,0.4); } [data-theme="dark"] .erp-progress-bar.red { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 8px rgba(248,113,113,0.4); } /* ── Dark Mode — Welcome Banner ───────────────────────── */ [data-theme="dark"] .erp-welcome-banner { background: linear-gradient(135deg, #16150F 0%, #221F17 40%, #0b1a5e 70%, #1a56db 100%); border: 1px solid rgba(59,123,255,0.2); box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 40px rgba(26,86,219,0.1), inset 0 1px 0 rgba(59,123,255,0.1); } /* ── Dark Mode — Role Badges ──────────────────────────── */ [data-theme="dark"] .erp-role-badge.admin { background: rgba(59,123,255,0.12); color: #3b7bff; border: 1px solid rgba(59,123,255,0.25); } [data-theme="dark"] .erp-role-badge.manager { background: rgba(34,211,238,0.12); color: #22d3ee; border: 1px solid rgba(34,211,238,0.25); } [data-theme="dark"] .erp-role-badge.teacher { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); } [data-theme="dark"] .erp-role-badge.student { background: rgba(251,191,36,0.12); color: #fbb50e; border: 1px solid rgba(251,191,36,0.25); } [data-theme="dark"] .erp-role-badge.staff { background: rgba(192,132,252,0.12); color: #c084fc; border: 1px solid rgba(192,132,252,0.25); } [data-theme="dark"] .erp-role-badge.partner { background: rgba(34,211,238,0.1); color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); } [data-theme="dark"] .erp-role-badge.superadmin { background: rgba(192,132,252,0.12); color: #c084fc; border: 1px solid rgba(192,132,252,0.25); } [data-theme="dark"] .erp-role-badge.crm { background: rgba(251,181,14,0.12); color: #fbb50e; border: 1px solid rgba(251,181,14,0.25); } /* ── Dark Mode — Kanban ───────────────────────────────── */ [data-theme="dark"] .erp-kanban-card { background: #221F17; border: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] .erp-kanban-card:hover { border-color: rgba(59,123,255,0.22); box-shadow: 0 4px 20px rgba(0,0,0,0.5); } [data-theme="dark"] .erp-kanban-body { background: rgba(7,6,14,0.5); border-color: rgba(255,255,255,0.06); } /* ── Dark Mode — Exam Engine ──────────────────────────── */ [data-theme="dark"] .erp-exam-card { background: #221F17; border: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .erp-exam-option { border-color: rgba(255,255,255,0.08); background: rgba(59,123,255,0.03); } [data-theme="dark"] .erp-exam-option:hover { border-color: rgba(59,123,255,0.32); background: rgba(59,123,255,0.08); } [data-theme="dark"] .erp-exam-option.selected { border-color: #3b7bff; background: rgba(59,123,255,0.1); box-shadow: 0 0 0 3px rgba(59,123,255,0.12); } /* ── Dark Mode — Material Cards ───────────────────────── */ [data-theme="dark"] .erp-material-card { background: #221F17; border: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] .erp-material-card:hover { border-color: rgba(59,123,255,0.25); box-shadow: 0 4px 20px rgba(0,0,0,0.5); } /* ── Dark Mode — Fee Cards ────────────────────────────── */ [data-theme="dark"] .erp-fee-item { background: #221F17; border: 1px solid rgba(59,123,255,0.1); backdrop-filter: blur(8px); } /* ── Dark Mode — Info Box ─────────────────────────────── */ [data-theme="dark"] .erp-info-box { background: rgba(59,123,255,0.08); border-color: rgba(59,123,255,0.22); border-left-color: #3b7bff; color: #cfdcff; } /* ── Dark Mode — Spinner ──────────────────────────────── */ [data-theme="dark"] .erp-spinner { border-color: rgba(59,123,255,0.15); border-top-color: #3b7bff; } /* ── Dark Mode — Branch / Demo badges ────────────────── */ [data-theme="dark"] .erp-branch-badge { background: rgba(59,123,255,0.1); color: #3b7bff; border-color: rgba(59,123,255,0.25); } /* ── Dark Mode — Sortable table headers ───────────────── */ [data-theme="dark"] .erp-sortable-th:hover { background: rgba(59,123,255,0.08); color: #3b7bff; } /* ── Dark Mode — Tabs (teacher-tabs / erp-inv-tabs) ──── */ [data-theme="dark"] .erp-inv-tabs { background: rgba(22,21,15,0.7); border-bottom-color: rgba(255,255,255,0.07); } [data-theme="dark"] .erp-inv-tab:hover { color: #3b7bff; } [data-theme="dark"] .erp-inv-tab.active { color: #3b7bff; border-bottom-color: #3b7bff; } [data-theme="dark"] .teacher-tab:hover { color: #3b7bff; } [data-theme="dark"] .teacher-tab.active { color: #3b7bff; border-bottom-color: #3b7bff; } [data-theme="dark"] .teacher-tabs { border-bottom-color: rgba(255,255,255,0.08); } /* ── Dark Mode — Activity Feed ────────────────────────── */ [data-theme="dark"] .erp-activity-item { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .erp-activity-dot { background: #3b7bff; box-shadow: 0 0 6px rgba(59,123,255,0.4); } /* ── Dark Mode — Placement Stats ─────────────────────── */ [data-theme="dark"] .erp-place-stat { background: #221F17; border: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] .erp-place-stat:hover { border-color: rgba(59,123,255,0.22); } [data-theme="dark"] .erp-place-stat-val { color: #cfdcff; } /* ── Dark Mode — Login Page ───────────────────────────── */ [data-theme="dark"] .erp-login-page { background: linear-gradient(135deg, #16150F 0%, #221F17 30%, #0b1a5e 65%, #1a56db 85%, #060e38 100%); } [data-theme="dark"] .erp-login-logo-text strong { color: #F1F5F9; } /* ── Dark Mode — Placement cards ─────────────────────── */ [data-theme="dark"] .erp-notif-type-card { background: #221F17; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .erp-notif-type-card.selected { border-color: #3b7bff; background: rgba(59,123,255,0.1); } [data-theme="dark"] .erp-notif-type-card:hover { border-color: rgba(59,123,255,0.3); } /* ── Dark Mode — Mobile overlay ───────────────────────── */ [data-theme="dark"] .erp-overlay-drop { background: rgba(0,0,0,0.65); } /* ── Page Title Gradient (dark mode) ───────────────────── */ [data-theme="dark"] .erp-page-title { background: linear-gradient(135deg, #eaf0ff 0%, #3b7bff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .erp-card-title { color: #cfdcff; } /* ── Stat Value gradient (dark mode) ────────────────────── */ [data-theme="dark"] .erp-stat-value { background: linear-gradient(135deg, #eaf0ff 0%, #3b7bff 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Futuristic attend rows ─────────────────────────────── */ [data-theme="dark"] .erp-attend-row { border-bottom-color: rgba(59,123,255,0.07); } [data-theme="dark"] .erp-attend-row:hover { background: rgba(59,123,255,0.04); } [data-theme="dark"] .erp-attend-radio label { border-color: rgba(59,123,255,0.15); } [data-theme="dark"] .erp-attend-radio input[type="radio"]:checked + label.present { background: rgba(52,211,153,0.12); border-color: #34d399; color: #34d399; } [data-theme="dark"] .erp-attend-radio input[type="radio"]:checked + label.absent { background: rgba(248,113,113,0.12); border-color: #f87171; color: #f87171; } [data-theme="dark"] .erp-attend-radio input[type="radio"]:checked + label.late { background: rgba(251,191,36,0.12); border-color: #fbb50e; color: #fbb50e; } /* ── Futuristic breadcrumb (dark mode) ─────────────────── */ [data-theme="dark"] .erp-breadcrumb strong { color: #c8ddf0; } /* ── Glow utility classes ──────────────────────────────── */ .erp-glow-blue { box-shadow: 0 0 20px rgba(59,123,255,0.35) !important; } .erp-glow-green { box-shadow: 0 0 20px rgba(52,211,153,0.35) !important; } .erp-glow-purple { box-shadow: 0 0 20px rgba(192,132,252,0.35) !important; } .erp-text-glow { text-shadow: 0 0 12px currentColor; } /* ========================================================= GLOBAL SEARCH OVERLAY (Ctrl+K) Self-injects on every authenticated page via ERPSearch.init() in erp-script.js — no per-page HTML changes needed. ========================================================= */ #erp-search-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.52); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: none; align-items: flex-start; justify-content: center; padding: 72px 16px 0; animation: srch-fade-in .15s ease; } #erp-search-overlay.open { display: flex; } @keyframes srch-fade-in { from { opacity:0 } to { opacity:1 } } .erp-search-box { width: 100%; max-width: 640px; background: #FBFAF6; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 24px 60px rgba(25,26,18,0.2), 0 6px 16px rgba(25,26,18,0.1); overflow: hidden; animation: srch-slide-in .18s cubic-bezier(.22,1,.36,1); } [data-theme="dark"] .erp-search-box { background: rgba(30,41,59,0.9); border-color: rgba(255,255,255,0.12); } @keyframes srch-slide-in { from { transform: translateY(-18px); opacity:0 } to { transform: translateY(0); opacity:1 } } .erp-search-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1.5px solid var(--border); } .erp-search-input-wrap > svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--text-muted); } #erp-search-input { flex: 1; border: none; outline: none; font-size: 15px; font-weight: 500; background: transparent; color: var(--text-primary); font-family: 'Inter', sans-serif; } #erp-search-input::placeholder { color: var(--text-muted); font-weight: 400; } .erp-search-input-wrap kbd { font-size: 11px; color: var(--text-muted); background: var(--bg-page); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; font-family: inherit; white-space: nowrap; flex-shrink: 0; } #erp-search-results { max-height: 440px; overflow-y: auto; padding: 6px 0; } .erp-search-hint { padding: 36px 18px; text-align: center; color: var(--text-muted); font-size: 13px; } .erp-search-hint svg { display: block; margin: 0 auto 10px; opacity: .35; } .erp-search-group { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .7px; padding: 10px 18px 4px; } .erp-search-result { display: flex; align-items: center; gap: 12px; padding: 10px 18px; text-decoration: none; color: var(--text-primary); transition: background .1s; cursor: pointer; border-radius: 0; } .erp-search-result:hover, .erp-search-result.focused { background: var(--primary-light); } .erp-search-result-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .erp-search-result-name { font-size: 13px; font-weight: 600; line-height: 1.3; } .erp-search-result-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } /* Button-based result rows (student quick-view) reset to look like the link rows */ button.erp-search-result { width: 100%; border: none; background: transparent; font-family: inherit; text-align: left; } /* Page navigation rows: square icon tile instead of round avatar */ .erp-search-result-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); border: 1px solid rgba(26,86,219,0.12); } .erp-search-result-icon svg { width: 17px; height: 17px; } .erp-search-result-hint { margin-left: auto; flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: var(--primary); background: var(--primary-light); border: 1px solid rgba(26,86,219,0.14); padding: 2px 9px; border-radius: 20px; opacity: 0; transition: opacity .12s; } .erp-search-result:hover .erp-search-result-hint, .erp-search-result.focused .erp-search-result-hint { opacity: 1; } .erp-search-no-results { padding: 28px 18px; text-align: center; color: var(--text-muted); font-size: 13px; } .erp-search-footer { padding: 8px 18px; border-top: 1px solid var(--border); display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--text-muted); } .erp-search-footer kbd { background: var(--bg-page); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-family: inherit; } /* Dark mode */ [data-theme="dark"] .erp-search-result:hover, [data-theme="dark"] .erp-search-result.focused { background: rgba(59,123,255,0.1); } /* ========================================================= SLIDE-IN DETAIL PANEL (glass, right side) Self-injected via ERPPanel.init() in erp-script.js. ========================================================= */ .erp-panel-overlay { position: fixed; inset: 0; z-index: 8500; background: rgba(6,14,56,0.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .erp-panel-overlay.open { opacity: 1; pointer-events: auto; } .erp-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 360px; max-width: 90vw; background: #FBFAF6; border-left: 1px solid var(--border); box-shadow: -16px 0 48px rgba(25,26,18,0.14); padding: 18px; overflow-y: auto; transform: translateX(100%); transition: transform .26s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; gap: 14px; } .erp-panel-overlay.open .erp-panel { transform: translateX(0); } .erp-panel-head { display: flex; align-items: center; justify-content: space-between; } .erp-panel-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); } .erp-panel-close { background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--text-muted); width: 28px; height: 28px; border-radius: 8px; transition: background .12s, color .12s; } .erp-panel-close:hover { background: var(--primary-light); color: var(--primary); } .erp-panel-id { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.55); border: 1px solid var(--glass-edge, rgba(255,255,255,0.9)); } .erp-panel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; } .erp-panel-name { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; } .erp-panel-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .erp-panel-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-top: 2px; } .erp-panel-table { width: 100%; border-collapse: collapse; } .erp-panel-table td { padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); } .erp-panel-table tr:last-child td { border-bottom: none; } .erp-panel-table td:first-child { color: var(--text-muted); } .erp-panel-table td:last-child { text-align: right; font-weight: 600; color: var(--text-primary); } .erp-panel-table td.ok { color: #15803d; } .erp-panel-table td.warn { color: #e09d00; } .erp-panel-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .erp-panel-btn { display: block; text-align: center; text-decoration: none; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.7); border: 1px solid var(--border); color: var(--text-secondary); transition: background .12s, border-color .12s, transform .1s; } .erp-panel-btn:hover { background: #fff; border-color: var(--border-strong); transform: translateY(-1px); } .erp-panel-btn.primary { background: linear-gradient(135deg, var(--primary), #1a56db); color: #fff; border-color: var(--primary); box-shadow: 0 4px 14px rgba(26,86,219,0.3); } .erp-panel-btn.primary:hover { box-shadow: 0 6px 18px rgba(26,86,219,0.42); } [data-theme="dark"] .erp-panel { background: rgba(30,41,59,0.92); border-left-color: rgba(255,255,255,0.1); } [data-theme="dark"] .erp-panel-id { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .erp-panel-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--text-secondary); } @media (max-width: 600px) { .erp-panel { width: 100%; max-width: 100%; } } /* Touch devices have no hover — always reveal the quick-view affordance */ @media (hover: none) { .erp-search-result-hint { opacity: 1; } } /* Command palette on phones — sit higher, fill width, lighter blur */ @media (max-width: 640px) { #erp-search-overlay { padding: 12px 10px 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .erp-search-box { max-width: 100%; border-radius: 14px; } #erp-search-results { max-height: 70vh; } .erp-search-result { padding: 12px 16px; } } /* ========================================================= ONBOARDING TOURS Self-injects via ERPTour.start() in erp-script.js. The spotlight's oversized box-shadow IS the page dimming — no separate scrim element. ========================================================= */ #erp-tour-overlay { position: fixed; inset: 0; z-index: 9200; display: none; } #erp-tour-overlay.open { display: block; } .erp-tour-spotlight { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; pointer-events: none; } .erp-tour-tooltip { position: fixed; width: 100%; max-width: 320px; background: #FBFAF6; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(25,26,18,0.2), 0 6px 16px rgba(25,26,18,0.1); padding: 18px 20px; visibility: hidden; animation: srch-fade-in .18s ease; } [data-theme="dark"] .erp-tour-tooltip { background: rgba(30,41,59,0.95); border-color: rgba(255,255,255,0.12); } .erp-tour-step-count { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; } .erp-tour-title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; } .erp-tour-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; } .erp-tour-actions { display: flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .erp-tour-tooltip { max-width: calc(100vw - 24px); } } /* ========================================================= SCROLL-TO-TOP BUTTON Self-injects via ERPScrollTop.init() in erp-script.js. Appears on .erp-main scroll > 300px, hidden otherwise. ========================================================= */ #erp-scroll-top { position: fixed; bottom: 28px; right: 28px; z-index: 800; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.12); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s, background .15s, color .15s; } #erp-scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } #erp-scroll-top:hover { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 6px 20px var(--primary-glow); } #erp-scroll-top svg { width: 16px; height: 16px; } [data-theme="dark"] #erp-scroll-top { box-shadow: 0 4px 16px rgba(0,0,0,.35); } /* ========================================================= SKELETON LOADERS Usage:
========================================================= */ @keyframes skeleton-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .erp-skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75% ); background-size: 1200px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 6px; } [data-theme="dark"] .erp-skeleton { background: linear-gradient(90deg, rgba(59,123,255,0.05) 25%, rgba(59,123,255,0.12) 50%, rgba(59,123,255,0.05) 75% ); background-size: 1200px 100%; } .erp-skeleton-text { height: 14px; width: 100%; margin-bottom: 8px; border-radius: 4px; } .erp-skeleton-text.w-75 { width: 75%; } .erp-skeleton-text.w-50 { width: 50%; } .erp-skeleton-text.w-33 { width: 33%; } .erp-skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .erp-skeleton-avatar-lg { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; } .erp-skeleton-block { height: 48px; width: 100%; } .erp-skeleton-block-lg { height: 120px; width: 100%; border-radius: var(--radius-md); } /* Table row skeleton */ .erp-skeleton-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); } .erp-skeleton-row:last-child { border-bottom: none; } /* ========================================================= EMPTY STATE Usage:
📭
No records found
Try adjusting your search or filters
========================================================= */ .erp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 24px; color: var(--text-muted); gap: 10px; } .erp-empty-icon { width: 64px; height: 64px; background: var(--gray-100); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 6px; } [data-theme="dark"] .erp-empty-icon { background: rgba(59,123,255,0.08); } .erp-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; } .erp-empty-sub { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 300px; margin-bottom: 4px; } /* ========================================================= PHASE 1 POLISH — extra light-mode refinements ========================================================= */ /* Stat icon: slightly larger */ .erp-stat-icon { width: 50px; height: 50px; } /* Topbar toggle: cleaner */ body:not([data-theme="dark"]) .erp-topbar-toggle:hover { background: var(--gray-100); color: var(--primary); } /* Search bar input */ body:not([data-theme="dark"]) .erp-search-input-wrap .erp-input, body:not([data-theme="dark"]) .erp-filter-select { background: #f9fafb; } body:not([data-theme="dark"]) .erp-search-input-wrap .erp-input:focus, body:not([data-theme="dark"]) .erp-filter-select:focus { background: #fff; } /* Card title: stronger weight */ .erp-card-title { font-size: 14px; font-weight: 700; } /* Label: slightly softer */ .erp-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.4px; } /* ========================================================= PHASE 2 — COMPONENT LIBRARY UPGRADE ========================================================= */ /* ── Stat cards — flat warm-grey (colour comes from the icon) ─── */ body:not([data-theme="dark"]) .erp-stat-card { background: var(--bg-card); } /* ── Table row actions: reveal on hover ─────────────────── */ .erp-row-actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.15s; } .erp-table tbody tr:hover .erp-row-actions { opacity: 1; } .erp-row-action-btn { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--border); color: var(--text-muted); cursor: pointer; transition: var(--transition); flex-shrink: 0; } .erp-row-action-btn svg { width: 13px; height: 13px; } .erp-row-action-btn:hover { background: var(--primary-light); color: var(--primary); border-color: rgba(26,86,219,0.3); } .erp-row-action-btn.danger:hover { background: var(--danger-light); color: var(--danger); border-color: rgba(239,68,68,0.3); } .erp-row-action-btn.success:hover { background: var(--success-light); color: var(--success); border-color: rgba(22,163,74,0.3); } [data-theme="dark"] .erp-row-action-btn { border-color: rgba(255,255,255,0.1); color: #71717A; } [data-theme="dark"] .erp-row-action-btn:hover { background: rgba(59,123,255,0.1); color: #3b7bff; border-color: rgba(59,123,255,0.35); } [data-theme="dark"] .erp-row-action-btn.danger:hover { background: rgba(248,113,113,0.1); color: #f87171; border-color: rgba(248,113,113,0.35); } /* ── Button loading state ───────────────────────────────── */ .erp-btn.loading { pointer-events: none; color: transparent !important; } .erp-btn.loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.65s linear infinite; } .erp-btn-ghost.loading::after, .erp-btn-outline.loading::after { border-color: rgba(26,86,219,0.25); border-top-color: var(--primary); } /* ── Badge dot indicator ────────────────────────────────── */ .erp-badge-dot { display: inline-flex; align-items: center; gap: 5px; } .erp-badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; opacity: 0.7; } /* Pulsing dot for live/active states */ .erp-badge.pulsing::before { animation: pulse-dot 2s infinite; } /* ── Section divider with title ─────────────────────────── */ .erp-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--border); } .erp-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.1px; } .erp-section-count { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--gray-100); padding: 2px 8px; border-radius: 20px; margin-left: 8px; } [data-theme="dark"] .erp-section-count { background: rgba(59,123,255,0.08); color: #A1A1AA; } /* ── Dashboard view tabs (replace inline styles) ────────── */ .erp-dash-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 22px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; } .erp-dash-tabs::-webkit-scrollbar { display: none; } .erp-dash-tab { padding: 9px 20px; border: none; background: none; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; font-family: inherit; } .erp-dash-tab:hover { color: var(--primary); } .erp-dash-tab.active { color: var(--primary); border-bottom-color: var(--primary); } [data-theme="dark"] .erp-dash-tab:hover { color: #cfdcff; } [data-theme="dark"] .erp-dash-tab.active { color: #3b7bff; border-bottom-color: #3b7bff; } [data-theme="dark"] .erp-dash-tabs { border-bottom-color: rgba(255,255,255,0.08); } /* ── Input group with icon prefix ──────────────────────── */ .erp-input-group { position: relative; display: flex; align-items: center; } .erp-input-group .erp-input-icon { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; display: flex; align-items: center; } .erp-input-group .erp-input-icon svg { width: 15px; height: 15px; } .erp-input-group .erp-input { padding-left: 38px; } .erp-input-group .erp-input-suffix { position: absolute; right: 12px; color: var(--text-muted); font-size: 12px; font-weight: 600; pointer-events: none; } /* ── Card top accent band variants ──────────────────────── */ .erp-card.accent-blue { border-top: 3px solid var(--primary) !important; } .erp-card.accent-green { border-top: 3px solid var(--success) !important; } .erp-card.accent-gold { border-top: 3px solid var(--gold) !important; } .erp-card.accent-red { border-top: 3px solid var(--danger) !important; } .erp-card.accent-purple { border-top: 3px solid var(--purple) !important; } .erp-card.accent-cyan { border-top: 3px solid var(--info) !important; } /* ── Dashboard hero greeting banner ─────────────────────── */ .erp-dash-hero { background: linear-gradient(135deg, #060e38 0%, #1a56db 60%, #3b7bff 100%); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #fff; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(26,86,219,0.28); } .erp-dash-hero::before { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; background: rgba(255,255,255,0.05); border-radius: 50%; } .erp-dash-hero::after { content: ''; position: absolute; right: 80px; bottom: -60px; width: 140px; height: 140px; background: rgba(255,255,255,0.04); border-radius: 50%; } .erp-dash-hero-left { position: relative; z-index: 1; } .erp-dash-hero-greeting { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.65; margin-bottom: 5px; } .erp-dash-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 5px; } .erp-dash-hero-sub { font-size: 13px; opacity: 0.65; line-height: 1.5; } .erp-dash-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; position: relative; z-index: 1; } .erp-dash-hero-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 20px; white-space: nowrap; } .erp-dash-hero-pill.pill-warning { background: rgba(251,191,36,0.22); border-color: rgba(251,191,36,0.4); color: #fef9c3; } .erp-dash-hero-pill.pill-green { background: rgba(52,211,153,0.2); border-color: rgba(52,211,153,0.35); color: #d1fae5; } .erp-dash-hero-pill.pill-red { background: rgba(248,113,113,0.2); border-color: rgba(248,113,113,0.35); color: #fee2e2; } .erp-dash-hero-right { flex-shrink: 0; position: relative; z-index: 1; } .erp-dash-hero-date { text-align: right; opacity: 0.7; font-size: 12px; line-height: 1.6; } .erp-dash-hero-date strong { display: block; font-size: 15px; font-weight: 700; opacity: 1; } [data-theme="dark"] .erp-dash-hero { background: linear-gradient(135deg, #16150F 0%, #221F17 40%, #0b1a5e 70%, #1a56db 100%); box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 40px rgba(26,86,219,0.1); border: 1px solid rgba(59,123,255,0.18); } /* ── Improved panel loading state ───────────────────────── */ .erp-panel-loading { display: flex; align-items: center; justify-content: center; height: 56vh; flex-direction: column; gap: 16px; color: var(--text-muted); font-size: 13.5px; } .erp-spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--primary); animation: spin 0.7s linear infinite; } /* ── Help text under form inputs ────────────────────────── */ .erp-help-text { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } .erp-help-text.error { color: var(--danger); } .erp-help-text.success { color: var(--success); } /* ── Tag / chip input ───────────────────────────────────── */ .erp-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 9px; background: var(--bg-card); min-height: 40px; cursor: text; transition: border-color 0.18s, box-shadow 0.18s; } .erp-tags-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,0.1); } .erp-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(26,86,219,0.18); } .erp-tag-remove { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; opacity: 0.6; transition: opacity 0.15s; } .erp-tag-remove:hover { opacity: 1; } /* ── Divider with text label ────────────────────────────── */ .erp-divider-label { display: flex; align-items: center; gap: 10px; margin: 20px 0; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.7px; } .erp-divider-label::before, .erp-divider-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Responsive stat card on hero ─────────────────────── */ @media (max-width: 768px) { .erp-dash-hero { padding: 18px 16px; } .erp-dash-hero-title { font-size: 17px; } .erp-dash-hero-right { display: none; } } /* ══════════════════════════════════════════════════════════ PHASE 8 — MICRO-ANIMATIONS, SKELETONS, EMPTY STATES ══════════════════════════════════════════════════════════ */ /* ── Page fade-in ──────────────────────────────────────── */ /* Opacity only — deliberately no `transform` here. A `transform` on (even translateY(0) at the end of the animation, which `fill-mode: both` keeps applied permanently) creates a new containing block for every `position: fixed` descendant, breaking the sidebar so it scrolls with the page instead of staying pinned to the viewport. */ body.erp-ready { animation: erp-page-in 0.28s ease both; } @keyframes erp-page-in { from { opacity: 0; } to { opacity: 1; } } /* ── Stat card entrance stagger ────────────────────────── */ .erp-stats-grid .erp-stat-card { animation: erp-card-in 0.32s ease both; } .erp-stats-grid .erp-stat-card:nth-child(1) { animation-delay: 0.04s; } .erp-stats-grid .erp-stat-card:nth-child(2) { animation-delay: 0.08s; } .erp-stats-grid .erp-stat-card:nth-child(3) { animation-delay: 0.12s; } .erp-stats-grid .erp-stat-card:nth-child(4) { animation-delay: 0.16s; } .erp-stats-grid .erp-stat-card:nth-child(5) { animation-delay: 0.20s; } .erp-stats-grid .erp-stat-card:nth-child(6) { animation-delay: 0.24s; } @keyframes erp-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── Stat card hover lift ──────────────────────────────── */ .erp-stat-card { transition: transform 0.18s ease, box-shadow 0.18s ease; will-change: transform; } .erp-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(26,86,219,0.14), 0 2px 6px rgba(17,24,39,0.05), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="dark"] .erp-stat-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35); } /* ── Button press micro-animation ──────────────────────── */ .erp-btn { transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.18s ease, color 0.18s ease; } .erp-btn:active { transform: scale(0.96); box-shadow: none !important; } /* ── Modal slide-in ────────────────────────────────────── */ .erp-modal-box { animation: erp-modal-in 0.22s cubic-bezier(0.34,1.3,0.64,1) both; } @keyframes erp-modal-in { from { opacity: 0; transform: scale(0.92) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Table row hover ───────────────────────────────────── */ .erp-table tbody tr { transition: background 0.14s ease; } /* ── Activity icon pulse on new item ──────────────────────── */ .erp-activity-item.is-new .erp-activity-icon { animation: erp-pulse-ring 0.6s ease 0.1s both; } @keyframes erp-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 99,102,241), 0.45); } 70% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb, 99,102,241), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 99,102,241), 0); } } /* ── Skeleton shimmer loader ───────────────────────────── */ @keyframes erp-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .erp-skeleton { border-radius: 6px; background: linear-gradient(90deg, var(--border) 25%, var(--bg-secondary) 50%, var(--border) 75% ); background-size: 1200px 100%; animation: erp-shimmer 1.4s ease-in-out infinite; color: transparent !important; pointer-events: none; user-select: none; } .erp-skeleton-line { display: block; height: 14px; border-radius: 4px; margin-bottom: 8px; } .erp-skeleton-line.w-80 { width: 80%; } .erp-skeleton-line.w-60 { width: 60%; } .erp-skeleton-line.w-40 { width: 40%; } .erp-skeleton-circle { display: inline-block; width: 36px; height: 36px; border-radius: 50%; } .erp-skeleton-card { background: var(--bg-card); border-radius: 10px; padding: 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; } [data-theme="dark"] .erp-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75% ); background-size: 1200px 100%; } /* ── Empty state ───────────────────────────────────────── */ .erp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; gap: 10px; animation: erp-card-in 0.3s ease both; } .erp-empty-state svg { color: var(--text-muted); opacity: 0.45; margin-bottom: 4px; } .erp-empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin: 0; } .erp-empty-state-sub { font-size: 13px; color: var(--text-muted); margin: 0; max-width: 280px; } /* ── Animated counter ──────────────────────────────────── */ [data-countup] { transition: none; /* counter updates via JS, no CSS transition needed */ } /* ── Lazy chart canvas fade-in ─────────────────────────── */ canvas.erp-chart-loaded { animation: erp-page-in 0.4s ease both; } /* ── Badge pop on update ───────────────────────────────── */ .erp-badge.erp-badge-pop { animation: erp-badge-pop 0.25s cubic-bezier(0.34,1.6,0.64,1) both; } @keyframes erp-badge-pop { from { transform: scale(0.6); } to { transform: scale(1); } } /* ── Sidebar nav link hover ────────────────────────────── */ .erp-nav-link { transition: background 0.14s ease, color 0.14s ease, padding-left 0.14s ease; } /* ── Hero entrance ─────────────────────────────────────── */ .erp-dash-hero { animation: erp-hero-in 0.38s cubic-bezier(0.22,1,0.36,1) both; } @keyframes erp-hero-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= BOLD LIGHT — COMPONENT LAYER Applies the whitebanger.org design system (THEME-GUIDE.md) on top of the legacy component rules above. Kept as one block, last in the file, so every earlier rule is overridden in a single reviewable place rather than edited in 40 spots. Tokens live in :root. ========================================================= */ /* ── Typography: heavy, tight Jakarta display; calm Inter body ── */ body { font-family: var(--ff-b); color: var(--text-primary); } h1, h2, h3, h4, h5, .erp-page-title, .erp-card-title, .erp-modal-title, .erp-stat-value, .erp-login-title, .erp-brand-text strong, .erp-welcome-banner h2, .erp-section-title, .erp-inv-tab, .erp-btn, .erp-nav-section-label, .erp-nav-label { font-family: var(--ff-d); } h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: var(--text-primary); } .erp-page-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; } .erp-page-subtitle { color: var(--text-secondary); font-size: 14.5px; } .erp-card-title { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; } .erp-modal-title { font-size: 18px; font-weight: 800; letter-spacing: -0.025em; } .erp-stat-value { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .erp-stat-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; } .erp-nav-section-label, .erp-nav-label { font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.45); font-weight: 700; } a { color: inherit; } .erp-content a:not(.erp-btn):not(.erp-nav-link):not([class*="erp-"]) { color: var(--blue); } .erp-content a:not(.erp-btn):not(.erp-nav-link):not([class*="erp-"]):hover { color: var(--blue-dk); } /* ── Eyebrow label (guide §3) — opt-in class for pages that want it ── */ .erp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-d); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 6px 14px; border-radius: var(--pill); } .erp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } /* ── Buttons: pills, Jakarta 700, lift 2px, navy → blue, gold = conversion ── */ .erp-btn { font-family: var(--ff-d); font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: var(--pill); border: 1.5px solid transparent; transition: transform .18s var(--ease), background .2s, color .2s, box-shadow .2s, border-color .2s; overflow: visible; letter-spacing: 0; } .erp-btn:hover { transform: translateY(-2px); } .erp-btn:active { transform: translateY(0) scale(.98) !important; } .erp-btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: var(--pill); } .erp-btn-lg { padding: 14px 26px; font-size: 15px; border-radius: var(--pill); } .erp-btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: none; } .erp-btn-primary:hover { background: var(--blue); border-color: var(--blue); box-shadow: var(--sh-blue); } [data-theme="dark"] .erp-btn-primary { background: var(--blue); border-color: var(--blue); } [data-theme="dark"] .erp-btn-primary:hover { background: var(--blue-lt); border-color: var(--blue-lt); } .erp-btn-gold, .erp-btn-cta { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: var(--sh-gold); } .erp-btn-gold:hover, .erp-btn-cta:hover { background: #ffc42e; border-color: #ffc42e; color: var(--navy); box-shadow: var(--sh-gold); } .erp-btn-ghost { background: var(--bg-card); color: var(--text-primary); border-color: var(--line2); } .erp-btn-ghost:hover { background: var(--bg-card); border-color: var(--navy); color: var(--navy); } [data-theme="dark"] .erp-btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.3); } [data-theme="dark"] .erp-btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; } .erp-btn-outline { background: transparent; color: var(--blue); border-color: var(--blue-line); } .erp-btn-outline:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dk); } .erp-btn-success { background: var(--green); border-color: var(--green); color: #fff; box-shadow: none; } .erp-btn-success:hover { background: #15803d; border-color: #15803d; box-shadow: var(--shadow-success); } .erp-btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; } .erp-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; } .erp-btn-white { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: none; } .erp-btn-white:hover { background: #fff; color: var(--navy); border-color: #fff; } .erp-btn-whatsapp, .erp-btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; } .erp-btn-whatsapp:hover, .erp-btn-wa:hover { background: #1fb457; border-color: #1fb457; } .erp-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(26,86,219,.22); } /* ── Cards: white, 24px, navy-tinted shadow, lift on hover ── */ .erp-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .erp-card:hover { border-color: var(--blue-line); box-shadow: var(--sh); } .erp-card-header { border-bottom: 1px solid var(--line); padding: 16px 22px; } .erp-card-body { padding: 22px; } .erp-stat-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .erp-stat-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--blue-line); } .erp-stat-card::before, .erp-stat-card::after { display: none; } /* no leftover glow decorations */ .erp-stat-icon { width: 52px; height: 52px; border-radius: 16px; box-shadow: none !important; background: var(--blue-soft) !important; color: var(--navy) !important; transition: background .3s, color .3s; } .erp-stat-icon svg { width: 22px; height: 22px; } .erp-stat-card:hover .erp-stat-icon { background: var(--navy) !important; color: #fff !important; } .erp-stat-icon.gold { background: var(--gold-soft) !important; color: var(--gold-dk) !important; } .erp-stat-icon.green { background: var(--green-soft) !important; color: var(--green) !important; } .erp-stat-icon.red { background: var(--danger-light) !important; color: var(--danger) !important; } .erp-stat-card:hover .erp-stat-icon.gold { background: var(--gold) !important; color: var(--navy) !important; } .erp-stat-card:hover .erp-stat-icon.green { background: var(--green) !important; color: #fff !important; } .erp-stat-card:hover .erp-stat-icon.red { background: var(--danger) !important; color: #fff !important; } [data-theme="dark"] .erp-stat-icon { background: rgba(59,123,255,.16) !important; color: #fff !important; } [data-theme="dark"] .erp-card, [data-theme="dark"] .erp-stat-card { background: var(--bg-card); border-color: var(--border); } /* ── Forms: 12px radius, 1.5px line2 border, blue focus ring ── */ .erp-input, .erp-select, .erp-textarea, .erp-filter-select, .erp-inv-search { border: 1.5px solid var(--line2); border-radius: var(--r-sm); background: var(--bg-card); color: var(--text-primary); font-family: var(--ff-b); font-size: 14px; padding: 11px 14px; min-height: 42px; } .erp-input::placeholder, .erp-textarea::placeholder, .erp-inv-search::placeholder { color: var(--faint); } .erp-input:hover:not(:focus), .erp-select:hover:not(:focus), .erp-textarea:hover:not(:focus) { border-color: var(--blue-line); } .erp-input:focus, .erp-select:focus, .erp-textarea:focus, .erp-filter-select:focus, .erp-inv-search:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,86,219,.14); background: var(--bg-card); outline: none; } .erp-input.error, .erp-input:invalid:not(:placeholder-shown):not(:focus) { border-color: #dc2626; } .erp-form-label, .erp-label, label.erp-label { font-family: var(--ff-d); font-weight: 700; font-size: 12.5px; color: var(--text-secondary); letter-spacing: .01em; } .erp-filter-select { padding: 9px 34px 9px 12px; min-height: 40px; font-size: 13px; } [data-theme="dark"] .erp-input, [data-theme="dark"] .erp-select, [data-theme="dark"] .erp-textarea, [data-theme="dark"] .erp-filter-select, [data-theme="dark"] .erp-inv-search { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #fff; } /* ── Sidebar: navy brand rail with the guide's blue glow + dot grid ── */ .erp-sidebar { background: linear-gradient(170deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%); box-shadow: 8px 0 32px -20px rgba(6,14,56,.6); } .erp-sidebar::before { content: ""; position: absolute; top: -220px; right: -180px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(26,86,219,.45), transparent 62%); pointer-events: none; } .erp-sidebar::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 70%); pointer-events: none; } .erp-sidebar > * { position: relative; z-index: 1; } .erp-sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.1); } .erp-nav-link { border-radius: var(--pill); padding: 9px 14px; color: rgba(255,255,255,.72); font-weight: 500; font-size: 13.5px; } .erp-nav-link:hover { background: rgba(255,255,255,.08); color: #fff; } .erp-nav-link.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); } .erp-nav-link.active .erp-nav-icon { color: var(--gold); } .erp-nav-badge { background: var(--gold); color: var(--navy); font-family: var(--ff-d); font-weight: 800; } .erp-sidebar-footer { border-top: 1px solid rgba(255,255,255,.1); } .erp-user-avatar { background: var(--gold); color: var(--navy); font-family: var(--ff-d); font-weight: 800; } [data-theme="dark"] .erp-sidebar { background: linear-gradient(170deg, #03071f 0%, var(--navy) 70%, var(--navy-2) 100%); } /* ── Topbar: white 90% + blur, sticky ── */ .erp-topbar { background: var(--bg-topbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: none; } .erp-topbar-btn { border-radius: var(--pill); } .erp-topbar-btn:hover { background: var(--blue-soft); color: var(--blue); } .erp-topbar-avatar { background: var(--navy); color: #fff; font-family: var(--ff-d); font-weight: 800; border-radius: 50%; } .erp-role-badge { font-family: var(--ff-d); font-weight: 700; letter-spacing: .06em; border-radius: var(--pill); background: var(--blue-soft); color: var(--blue); } .erp-role-badge.superadmin, .erp-role-badge.admin { background: var(--navy); color: #fff; } .erp-role-badge.manager { background: var(--gold-soft); color: var(--gold-dk); } .erp-breadcrumb strong { font-family: var(--ff-d); font-weight: 700; color: var(--text-primary); } /* ── Tables: navy-tinted heads, blue-soft hover ── */ .erp-table th { font-family: var(--ff-d); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); background: var(--bg2); border-bottom: 1px solid var(--line); } .erp-table td { border-bottom: 1px solid var(--line); color: var(--text-primary); } .erp-table tbody tr:hover { background: var(--blue-soft); } [data-theme="dark"] .erp-table th { background: rgba(255,255,255,.03); } [data-theme="dark"] .erp-table tbody tr:hover { background: rgba(59,123,255,.1); } /* ── Tabs / segmented control: bg2 container, navy active pill ── */ .erp-inv-tabs { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--pill); padding: 4px; gap: 2px; } .erp-inv-tab { border-radius: var(--pill); border-bottom: none !important; padding: 8px 16px; font-weight: 700; font-size: 13px; color: var(--text-secondary); } .erp-inv-tab:hover { color: var(--navy); background: rgba(6,14,56,.05); } .erp-inv-tab.active { background: var(--navy); color: #fff; box-shadow: 0 6px 16px -8px rgba(6,14,56,.6); } [data-theme="dark"] .erp-inv-tabs { background: rgba(255,255,255,.04); } [data-theme="dark"] .erp-inv-tab.active { background: var(--blue); } .erp-hub-tab.active { color: var(--navy); background: var(--blue-soft); } /* ── Badges: pills, tinted ── */ .erp-badge { border-radius: var(--pill); font-family: var(--ff-d); font-weight: 700; font-size: 11px; letter-spacing: .02em; padding: 4px 10px; } .erp-badge-info { background: var(--blue-soft); color: var(--blue); } .erp-badge-warning { background: var(--gold-soft); color: var(--gold-dk); } .erp-badge-success { background: var(--green-soft); color: var(--green); } .erp-badge-danger { background: var(--danger-light); color: var(--danger); } .erp-badge-primary, .erp-badge-purple { background: var(--blue-soft); color: var(--navy); } /* ── Modals, panels, toasts ── */ .erp-modal, .erp-modal-content, .erp-modal-box { border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid var(--line); } .erp-modal-overlay, .erp-panel-overlay { background: rgba(6,14,56,.45); } .erp-panel { background: var(--bg-card); box-shadow: var(--sh-lg); } .erp-toast { border-radius: var(--r); box-shadow: var(--sh-lg); border: 1px solid var(--line); font-family: var(--ff-b); } .erp-toast::before { display: none; } /* ── Welcome / hero bands: the guide's dark band recipe ── */ .erp-welcome-banner, .erp-dash-hero, .erp-hero-band { background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%); color: #fff; border-radius: var(--r-xl); position: relative; overflow: hidden; border: none; } .erp-welcome-banner::before, .erp-dash-hero::before, .erp-hero-band::before { content: ""; position: absolute; top: -260px; right: -160px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(26,86,219,.5), transparent 62%); pointer-events: none; } .erp-welcome-banner h1, .erp-welcome-banner h2, .erp-dash-hero h1, .erp-dash-hero h2 { color: #fff; } .erp-welcome-banner p, .erp-dash-hero p { color: rgba(255,255,255,.75); } .erp-dash-hero-pill { border-radius: var(--pill); font-family: var(--ff-d); font-weight: 700; } .erp-dash-hero-pill.pill-gold, .erp-gold-text { background: linear-gradient(92deg, #ffd166, var(--gold) 55%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Progress, skeleton, scrollbar ── */ .erp-progress-bar > div, .erp-progress-fill { background: linear-gradient(90deg, var(--navy), var(--blue) 60%, var(--gold)); } ::-webkit-scrollbar-thumb { background: var(--line2); } ::-webkit-scrollbar-thumb:hover { background: var(--faint); } /* ── Login page: dark navy hero + white form card, gold CTA ── */ .erp-login-page { background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%); } .erp-login-page::before { background: radial-gradient(circle, rgba(26,86,219,.5), transparent 62%); animation: none; width: 640px; height: 640px; top: -260px; right: -160px; } .erp-login-page::after { background: radial-gradient(circle, rgba(251,181,14,.22), transparent 62%); animation: none; } .erp-login-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: erp-fade-up .45s var(--ease); overflow: hidden; } .erp-login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--navy), var(--blue) 60%, var(--gold)); } .erp-login-title { font-size: 26px; letter-spacing: -0.03em; color: var(--text-primary); } .erp-login-subtitle { color: var(--text-secondary); } .erp-login-logo-text strong { color: var(--text-primary); } .erp-login-logo-text span { color: var(--faint); } .erp-login-card .erp-btn-primary[type="submit"], .erp-login-card .erp-login-submit { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: var(--sh-gold); } .erp-login-card .erp-btn-primary[type="submit"]:hover, .erp-login-card .erp-login-submit:hover { background: #ffc42e; border-color: #ffc42e; } [data-theme="dark"] .erp-login-card { background: #0a1546; border: 1px solid rgba(255,255,255,.1); } /* ── Focus ring everywhere ── */ :focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(26,86,219,.22); border-radius: 6px; } /* ── Page canvas: white cards on bg2 and 24px gutters ── */ .erp-content { padding: 24px; } @media (max-width: 768px) { .erp-content { padding: 18px; } } @media (max-width: 480px) { .erp-content { padding: 16px; } }