/* ========================================================= PPMS Design System Palette: deep forest green sidebar, mint-tinted surface, Sora for display type, Inter for body/UI/data. ========================================================= */ :root { /* ---- Color tokens ---- */ --brand-50: #F3FAF5; --brand-100: #E4F4E9; --brand-200: #CCE9D5; --brand-300: #9FD6B0; --brand-500: #3E9A63; --brand-600: #2F7D53; --brand-700: #235F40; --brand-800: #1B4A32; --brand-900: #123524; --ink: #16241D; --ink-muted: #5B6B63; --ink-faint: #8A968F; --surface: #FFFFFF; --surface-sunk: #F3FAF5; --border: #DCEAE1; --border-soft: #E9F3EC; --danger: #C0392B; --danger-bg: #FBEAE8; --warning: #B7791F; --warning-bg: #FBF3E3; /* Admin accent — deliberately distinct (slate navy) from the green client/participant brand, so the two login screens and the admin panel don't get mistaken for each other. */ --admin-50: #F1F5FA; --admin-100: #E7ECF2; --admin-200: #D3DFEC; --admin-300: #9AB7D9; --admin-500: #3E6690; --admin-600: #2E4A6B; --admin-700: #22374F; --admin-800: #182739; --admin-900: #0F1A26; /* Super Admin accent — teal, mirrored to the same shape as the admin navy scale above so both roles can recolor the sidebar the same way (dark gradient bg, light tint for active item). */ --teal-50: #F0FDFA; --teal-100: #CCFBF1; --teal-200: #99F6E4; --teal-300: #5EEAD4; --teal-500: #14B8A6; --teal-600: #0D9488; --teal-700: #0F766E; --teal-800: #115E59; --teal-900: #134E4A; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --shadow-card: 0 1px 2px rgba(18, 53, 36, 0.04), 0 8px 24px -12px rgba(18, 53, 36, 0.12); /* ---- Bootstrap variable overrides ---- */ --bs-primary: var(--brand-600); --bs-primary-rgb: 47, 125, 83; --bs-body-color: var(--ink); --bs-body-bg: var(--brand-50); --bs-border-color: var(--border); --bs-link-color: var(--brand-700); --bs-link-hover-color: var(--brand-800); --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--brand-50); font-feature-settings: "tnum" 1; } /* ========================================================= Role re-skin: the whole picadmin panel — buttons, tabs, avatars, status pills, links — is built from the --brand-* variables above. Overriding them here on recolors all of it for the logged-in role, without editing every page. ========================================================= */ body.role-admin { --brand-50: var(--admin-50); --brand-100: var(--admin-100); --brand-200: var(--admin-200); --brand-300: var(--admin-300); --brand-500: var(--admin-500); --brand-600: var(--admin-600); --brand-700: var(--admin-700); --brand-800: var(--admin-800); --brand-900: var(--admin-900); --bs-primary-rgb: 46, 74, 107; } body.role-super { --brand-50: var(--teal-50); --brand-100: var(--teal-100); --brand-200: var(--teal-200); --brand-300: var(--teal-300); --brand-500: var(--teal-500); --brand-600: var(--teal-600); --brand-700: var(--teal-700); --brand-800: var(--teal-800); --brand-900: var(--teal-900); --bs-primary-rgb: 13, 148, 136; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Sora', 'Inter', sans-serif; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } /* ========================================================= App shell: sidebar + main column ========================================================= */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-900) 100%); color: #EAF6EE; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; transition: transform 0.2s ease; } /* Admin: navy sidebar instead of the default brand green. */ .sidebar.sidebar-role-admin { background: linear-gradient(180deg, var(--admin-800) 0%, var(--admin-900) 100%); } /* Super Admin: teal sidebar. */ .sidebar.sidebar-role-super { background: linear-gradient(180deg, var(--teal-800) 0%, var(--teal-900) 100%); } .sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 1.5rem 1.25rem 1.25rem; } .sidebar-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-300); color: var(--brand-900); display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; } .sidebar-brand-text { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.05rem; color: #FFFFFF; line-height: 1.1; } .sidebar-brand-text small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.68rem; color: rgba(234, 246, 238, 0.6); letter-spacing: 0.03em; text-transform: uppercase; } .sidebar-role-tag { padding: 0 1.25rem 1rem; margin-top: -0.4rem; } .sidebar-nav { flex: 1; padding: 0.5rem 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; } .sidebar-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.85rem; border-radius: var(--radius-sm); color: rgba(234, 246, 238, 0.78); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; } /* The default link/text colors above carry a mint-green tint made for the green sidebar. On the navy/teal role sidebars, use a neutral white-based tint instead so nothing still reads as "green". */ .sidebar.sidebar-role-admin .sidebar-link, .sidebar.sidebar-role-super .sidebar-link { color: rgba(255, 255, 255, 0.78); } .sidebar.sidebar-role-admin .sidebar-brand-text small, .sidebar.sidebar-role-super .sidebar-brand-text small { color: rgba(255, 255, 255, 0.6); } .sidebar.sidebar-role-admin .sidebar-foot small, .sidebar.sidebar-role-super .sidebar-foot small { color: rgba(255, 255, 255, 0.45); } .sidebar-link i { font-size: 1.05rem; width: 1.1rem; text-align: center; } .sidebar-link:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; } .sidebar-link.active { background: var(--brand-300); color: var(--brand-900); font-weight: 600; } /* Active nav item on the navy/teal sidebars: a translucent white pill rather than a light role-tint, per request — reads clearly against either background without introducing a third color. */ .sidebar.sidebar-role-admin .sidebar-link.active, .sidebar.sidebar-role-super .sidebar-link.active { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; } /* The role tag inside the sidebar sits on a background that's already that role's color, so give it a translucent white pill instead of a solid fill (which would blend into the background). */ .sidebar .role-tag { background: rgba(255, 255, 255, 0.18); color: #fff; } .sidebar-foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-foot small { color: rgba(234, 246, 238, 0.45); font-size: 0.72rem; } .app-main { flex: 1; margin-left: 248px; display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.75rem; background: var(--surface); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 1020; } /* Role-colored strip under the topbar itself, so the role shows up in the header bar at a glance, not just in the avatar/tag inside it. */ .topbar.topbar-role-admin { border-bottom: 3px solid var(--admin-600); } .topbar.topbar-role-super { border-bottom: 3px solid var(--teal-600); } .sidebar-toggle { display: none; border: none; background: transparent; font-size: 1.3rem; color: var(--ink); } /* Only shown on mobile (see the max-width: 991.98px block below) */ .sidebar-close { display: none; position: absolute; top: 0.85rem; right: 0.85rem; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; align-items: center; justify-content: center; font-size: 0.95rem; } .sidebar-close:hover { background: rgba(255, 255, 255, 0.2); } .topbar-user { display: flex; align-items: center; gap: 0.6rem; } .topbar-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem; } /* Admin: solid navy, same tone as the admin login screen's brand panel (--admin-600), so it's unmistakably blue, not a pale tint. */ .topbar-user .avatar.avatar-admin { background: var(--admin-600); color: #fff; } /* Super Admin: solid teal — a different hue entirely from the navy above and the green brand, so the two roles never look alike. */ .topbar-user .avatar.avatar-super { background: var(--teal-600); color: #fff; } .role-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle; } .role-tag-admin { background: var(--admin-600); color: #fff; } .role-tag-super { background: var(--teal-600); color: #fff; } .content { flex: 1; padding: 1.75rem; width: 100%; max-width: 1600px; margin: 0 auto; } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } body.sidebar-open .sidebar { transform: translateX(0); } .app-main { margin-left: 0; } .sidebar-toggle { display: inline-flex; } .sidebar-close { display: inline-flex; } body.sidebar-open::after { content: ""; position: fixed; inset: 0; background: rgba(18, 53, 36, 0.35); z-index: 1025; } } /* ========================================================= Cards, tables, forms, badges ========================================================= */ .card { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .card .card-body { padding: 1.5rem; } .stat-card { border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); } .stat-card .stat-label { font-size: 0.8rem; color: var(--ink-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } .stat-card .stat-value { font-family: 'Sora', sans-serif; font-size: 2.1rem; font-weight: 700; color: var(--ink); margin-top: 0.15rem; } .stat-card .stat-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .table { --bs-table-bg: transparent; font-size: 0.9rem; } .table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface-sunk); padding: 0.7rem 0.85rem; } .table tbody td { padding: 0.7rem 0.85rem; vertical-align: middle; border-bottom: 1px solid var(--border-soft); } .table-responsive { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); overflow: hidden; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--surface-sunk); } .btn { border-radius: var(--radius-sm); font-weight: 500; font-size: 0.9rem; padding: 0.5rem 1rem; } .btn-primary { background: var(--brand-600); border-color: var(--brand-600); } .btn-primary:hover, .btn-primary:focus { background: var(--brand-700); border-color: var(--brand-700); } .btn-outline-primary { color: var(--brand-700); border-color: var(--brand-300); } .btn-outline-primary:hover { background: var(--brand-600); border-color: var(--brand-600); } .btn-outline-secondary { color: var(--ink-muted); border-color: var(--border); } .btn-outline-danger { color: var(--danger); border-color: #E8C7C2; } .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); } /* Compact icon-only action buttons for table rows (View/Edit/Delete). Fixed square size keeps them from wrapping onto multiple lines on narrow screens, unlike full-text pill buttons. */ .action-icons { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .btn-icon { width: 2.1rem; height: 2.1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; flex: 0 0 auto; } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); font-size: 0.9rem; padding: 0.55rem 0.8rem; } .form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(62, 154, 99, 0.15); } .form-label { font-size: 0.85rem; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; } .badge { font-weight: 500; font-size: 0.72rem; padding: 0.35em 0.65em; border-radius: 999px; } .text-bg-success { background-color: var(--brand-100) !important; color: var(--brand-800) !important; } .text-bg-secondary { background-color: #EEF1EF !important; color: var(--ink-muted) !important; } .alert { border-radius: var(--radius-md); border: 1px solid transparent; font-size: 0.9rem; } .alert-success { background: var(--brand-100); color: var(--brand-800); border-color: var(--brand-200); } .alert-danger { background: var(--danger-bg); color: var(--danger); border-color: #F0D2CE; } /* ========================================================= Auth pages (login / verify) — split panel ========================================================= */ .auth-shell { min-height: 100vh; display: flex; } .auth-brand-panel { flex: 1; background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand-900) 100%); color: #EAF6EE; display: flex; flex-direction: column; justify-content: center; padding: 3rem; position: relative; overflow: hidden; } .auth-brand-panel::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(159, 214, 176, 0.12); top: -120px; right: -140px; } .auth-brand-panel::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(159, 214, 176, 0.08); bottom: -100px; left: -80px; } .auth-brand-panel .brand-mark { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-300); color: var(--brand-900); display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; margin-bottom: 1.5rem; position: relative; } .auth-brand-panel h1 { color: #FFFFFF; font-size: 1.9rem; max-width: 380px; position: relative; } .auth-brand-panel p { color: rgba(234, 246, 238, 0.75); max-width: 380px; font-size: 0.95rem; position: relative; } .auth-form-panel { width: 440px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--surface); } .auth-form-panel .auth-form-inner { width: 100%; max-width: 340px; } /* Admin login — same layout, slate-navy accent instead of the green client brand, so it reads as a different area at a glance. */ .auth-shell--admin .auth-brand-panel { background: linear-gradient(160deg, var(--admin-700) 0%, var(--admin-900) 100%); } .auth-shell--admin .auth-brand-panel::before { background: rgba(154, 183, 217, 0.12); } .auth-shell--admin .auth-brand-panel::after { background: rgba(154, 183, 217, 0.08); } .auth-shell--admin .auth-brand-panel .brand-mark { background: var(--admin-300); color: var(--admin-900); } .auth-shell--admin .btn-primary { background: var(--admin-600); border-color: var(--admin-600); } .auth-shell--admin .btn-primary:hover, .auth-shell--admin .btn-primary:focus { background: var(--admin-700); border-color: var(--admin-700); } @media (max-width: 767.98px) { .auth-shell { flex-direction: column; } .auth-brand-panel { padding: 2rem; min-height: 200px; } .auth-form-panel { width: 100%; } } /* ========================================================= Loading overlay (save/delete feedback) ========================================================= */ .ppms-overlay { position: fixed; inset: 0; background: rgba(18, 53, 36, 0.35); backdrop-filter: blur(1px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .ppms-overlay.show { opacity: 1; pointer-events: all; } .ppms-overlay-box { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.25rem 1.75rem; display: flex; align-items: center; gap: 0.85rem; font-weight: 500; color: var(--ink); } .ppms-overlay-box .spinner-border { color: var(--brand-600); } /* ========================================================= Dashboard: clickable stat cards + chart/report panels ========================================================= */ a.stat-card { display: flex; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; } a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px -4px rgba(18, 53, 36, 0.18), 0 14px 28px -14px rgba(18, 53, 36, 0.18); } .stat-card .stat-sub { font-size: 0.76rem; color: var(--ink-faint); margin-top: 0.35rem; } .stat-card.stat-card-warning .stat-icon { background: var(--warning-bg); color: var(--warning); } .dash-panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.4rem 1.5rem; height: 100%; } .dash-panel h2 { font-size: 1rem; margin-bottom: 1rem; } .dash-panel-empty { color: var(--ink-faint); font-size: 0.88rem; text-align: center; padding: 2rem 0; } /* The Reports filter form reuses .dash-panel for its box styling only — override the height: 100% (meant for side-by-side dashboard panels) so it doesn't stretch to fill the page and push content down. */ .dash-panel.report-filter-form { height: auto; } .recent-cert-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-soft); } .recent-cert-row:last-child { border-bottom: none; } .recent-cert-row .recent-cert-name { font-weight: 500; color: var(--ink); font-size: 0.9rem; } .recent-cert-row .recent-cert-meta { font-size: 0.78rem; color: var(--ink-muted); } .recent-cert-row .recent-cert-date { font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; }