/* ============================================ GTK KEPRI BEDELAU 2026 — PORTAL SHARED STYLES AdminTeam (green) + Judge (blue) portals ============================================ */ /* ------------------------------------------------------------------ CSS VARIABLES — overridden per-portal via a wrapper class ------------------------------------------------------------------ */ :root { /* Shared */ --portal-sidebar-w: 270px; --portal-header-h: 64px; --portal-radius: 12px; --portal-radius-sm: 8px; --portal-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --portal-shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --portal-shadow-lg: 0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05); --portal-transition: 0.22s ease; --portal-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* AdminTeam — green/teal */ --portal-primary: #059669; --portal-primary-dark: #047857; --portal-primary-light: #ecfdf5; --portal-sidebar-grad-a: #064e3b; --portal-sidebar-grad-b: #047857; --portal-sidebar-grad-c: #059669; --portal-active-dot: #6ee7b7; /* Semantic colours (shared) */ --portal-success: #16a34a; --portal-success-light:#f0fdf4; --portal-warning: #d97706; --portal-warning-light:#fffbeb; --portal-info: #0891b2; --portal-info-light: #ecfeff; --portal-danger: #dc2626; --portal-danger-light: #fef2f2; --portal-purple: #7c3aed; --portal-purple-light: #f5f3ff; } /* Judge portal override — add class="judge-portal" to */ .judge-portal { --portal-primary: #2563eb; --portal-primary-dark: #1d4ed8; --portal-primary-light: #eff6ff; --portal-sidebar-grad-a: #1e3a8a; --portal-sidebar-grad-b: #1d4ed8; --portal-sidebar-grad-c: #2563eb; --portal-active-dot: #93c5fd; } /* ============================================ RESET / BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; } .portal-body { background: #f1f5f9; font-family: var(--portal-font); color: #1e293b; font-size: 14px; line-height: 1.6; } /* ============================================ LAYOUT ============================================ */ .portal-wrapper { min-height: 100vh; display: flex; } .portal-content { margin-left: var(--portal-sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--portal-transition); } /* ============================================ SIDEBAR ============================================ */ .portal-sidebar { width: var(--portal-sidebar-w); background: linear-gradient( 160deg, var(--portal-sidebar-grad-a) 0%, var(--portal-sidebar-grad-b) 50%, var(--portal-sidebar-grad-c) 100% ); color: white; position: fixed; left: 0; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; z-index: 1000; transition: transform var(--portal-transition); box-shadow: 4px 0 20px rgba(0,0,0,.15); } .portal-sidebar::-webkit-scrollbar { width: 4px; } .portal-sidebar::-webkit-scrollbar-track { background: transparent; } .portal-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; } /* Sidebar Header */ .portal-sidebar-header { padding: 28px 20px 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.12); flex-shrink: 0; } .portal-sidebar-logo { width: 64px; height: 64px; border-radius: 50%; background: white; padding: 6px; object-fit: contain; box-shadow: 0 4px 12px rgba(0,0,0,.2); margin-bottom: 12px; } .portal-sidebar-header h5 { font-weight: 700; font-size: 1rem; letter-spacing: .3px; margin: 0 0 2px; } .portal-sidebar-header small { opacity: .7; font-size: .75rem; display: block; } /* Sidebar Nav */ .portal-sidebar-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; } .portal-section-title { display: block; padding: 8px 10px 6px; color: rgba(255,255,255,.5); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px; } .portal-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 2px; border-radius: var(--portal-radius-sm); color: rgba(255,255,255,.78); text-decoration: none; font-size: .875rem; font-weight: 500; transition: all var(--portal-transition); position: relative; cursor: pointer; background: none; border: none; width: 100%; text-align: left; } .portal-nav-item:hover { background: rgba(255,255,255,.12); color: white; transform: translateX(2px); text-decoration: none; } .portal-nav-item.active { background: rgba(255,255,255,.2); color: white; font-weight: 600; box-shadow: inset 3px 0 0 rgba(255,255,255,.8); } .portal-nav-item.active::after { content: ''; position: absolute; right: 10px; width: 6px; height: 6px; background: var(--portal-active-dot); border-radius: 50%; } .portal-nav-item i { font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; } .portal-nav-item.logout:hover { background: rgba(239,68,68,.25); color: #fca5a5; } .portal-nav-divider { height: 1px; background: rgba(255,255,255,.12); margin: 10px 4px; } /* ============================================ SIDEBAR OVERLAY (mobile) ============================================ */ .portal-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--portal-transition); } .portal-sidebar-overlay.show { display: block; opacity: 1; } /* ============================================ HEADER ============================================ */ .portal-header { background: white; border-bottom: 1px solid #e2e8f0; height: var(--portal-header-h); padding: 0 28px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: var(--portal-shadow-sm); } .portal-header-left { display: flex; align-items: center; gap: 16px; } .portal-btn-sidebar-toggle { display: none; background: none; border: 1px solid #e2e8f0; border-radius: var(--portal-radius-sm); width: 36px; height: 36px; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; cursor: pointer; transition: all var(--portal-transition); } .portal-btn-sidebar-toggle:hover { background: #f1f5f9; color: var(--portal-primary); border-color: #cbd5e1; } .portal-page-title { font-size: 1rem; font-weight: 600; color: #1e293b; } .portal-user-badge { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 40px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: .85rem; font-weight: 500; color: #475569; cursor: default; } .portal-user-badge i { font-size: 1.3rem; color: var(--portal-primary); } /* ============================================ PAGE CONTENT ============================================ */ .portal-page-content { flex: 1; padding: 28px; overflow-y: auto; } /* ============================================ FOOTER ============================================ */ .portal-footer { background: white; border-top: 1px solid #e2e8f0; padding: 14px 28px; text-align: center; color: #94a3b8; font-size: .8rem; } /* ============================================ PAGE HEADER ============================================ */ .portal-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; } .portal-page-header-title h5 { font-size: 1.2rem; font-weight: 700; color: #1e293b; margin: 0 0 3px; } .portal-page-header-title p { font-size: .82rem; color: #94a3b8; margin: 0; } /* ============================================ STAT CARDS ============================================ */ .portal-stat-card { background: white; border-radius: var(--portal-radius); padding: 22px 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--portal-shadow-sm); border: 1px solid #e2e8f0; transition: transform var(--portal-transition), box-shadow var(--portal-transition); overflow: hidden; position: relative; animation: portalFadeInUp .35s ease both; } .portal-stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; } .portal-stat-card:hover { transform: translateY(-3px); box-shadow: var(--portal-shadow); } .portal-stat-card:nth-child(1) { animation-delay: .04s; } .portal-stat-card:nth-child(2) { animation-delay: .08s; } .portal-stat-card:nth-child(3) { animation-delay: .12s; } .portal-stat-card:nth-child(4) { animation-delay: .16s; } .portal-stat-card:nth-child(5) { animation-delay: .20s; } .portal-stat-icon { width: 52px; height: 52px; border-radius: var(--portal-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .portal-stat-content { flex: 1; min-width: 0; } .portal-stat-label { color: #64748b; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .portal-stat-value { font-weight: 800; font-size: 1.75rem; color: #0f172a; line-height: 1.1; margin: 0; } .portal-stat-subtitle { color: #94a3b8; font-size: .75rem; margin-top: 3px; display: block; } /* Stat card colour variants */ .portal-stat-primary::before { background: var(--portal-primary); } .portal-stat-primary .portal-stat-icon { background: var(--portal-primary-light); color: var(--portal-primary); } .portal-stat-success::before { background: var(--portal-success); } .portal-stat-success .portal-stat-icon { background: var(--portal-success-light); color: var(--portal-success); } .portal-stat-warning::before { background: var(--portal-warning); } .portal-stat-warning .portal-stat-icon { background: var(--portal-warning-light); color: var(--portal-warning); } .portal-stat-danger::before { background: var(--portal-danger); } .portal-stat-danger .portal-stat-icon { background: var(--portal-danger-light); color: var(--portal-danger); } .portal-stat-info::before { background: var(--portal-info); } .portal-stat-info .portal-stat-icon { background: var(--portal-info-light); color: var(--portal-info); } /* ============================================ CARDS (generic) ============================================ */ .portal-card { background: white; border-radius: var(--portal-radius); border: 1px solid #e2e8f0; box-shadow: var(--portal-shadow-sm); overflow: hidden; animation: portalFadeInUp .3s ease both; } .portal-card-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: #fafbfc; } .portal-card-header h6 { font-size: .9rem; font-weight: 600; color: #374151; margin: 0; display: flex; align-items: center; gap: 8px; } .portal-card-header h6 i { color: var(--portal-primary); } .portal-card-body { padding: 20px; } /* ============================================ WELCOME BANNER ============================================ */ .portal-welcome-card { background: linear-gradient( 135deg, var(--portal-sidebar-grad-a) 0%, var(--portal-sidebar-grad-c) 100% ); border-radius: var(--portal-radius); padding: 28px 32px; color: white; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: var(--portal-shadow); } .portal-welcome-card::before { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; background: rgba(255,255,255,.06); border-radius: 50%; } .portal-welcome-card::after { content: ''; position: absolute; right: 40px; bottom: -60px; width: 120px; height: 120px; background: rgba(255,255,255,.04); border-radius: 50%; } .portal-welcome-card h4 { font-size: 1.35rem; font-weight: 700; margin: 0 0 6px; } .portal-welcome-card p { font-size: .9rem; opacity: .8; margin: 0; } /* ============================================ FILTER SECTION ============================================ */ .portal-filter-section { background: white; border: 1px solid #e2e8f0; border-radius: var(--portal-radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--portal-shadow-sm); } .portal-filter-section .form-control, .portal-filter-section .form-select { border-radius: var(--portal-radius-sm); border-color: #e2e8f0; font-size: .85rem; height: 38px; transition: border-color var(--portal-transition), box-shadow var(--portal-transition); } .portal-filter-section .form-control:focus, .portal-filter-section .form-select:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 3px rgba(5,150,105,.15); } .portal-filter-section .input-group-text { border-color: #e2e8f0; background: #f8fafc; } /* ============================================ TABLE ============================================ */ .portal-table-wrapper { background: white; border-radius: var(--portal-radius); border: 1px solid #e2e8f0; box-shadow: var(--portal-shadow-sm); overflow: hidden; } .portal-table-responsive { overflow-x: auto; } .portal-table { margin-bottom: 0; width: 100%; font-size: .84rem; } .portal-table thead th { background: #f8fafc; font-weight: 600; color: #475569; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; padding: 12px 14px; border-bottom: 2px solid #e2e8f0; white-space: nowrap; } .portal-table tbody td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; color: #374151; } .portal-table tbody tr:last-child td { border-bottom: none; } .portal-table tbody tr:hover td { background: #f8fafc; } /* ============================================ BADGES ============================================ */ .portal-badge-pending { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; padding: 4px 10px; border-radius: 20px; font-size: .73rem; font-weight: 600; letter-spacing: .2px; } .portal-badge-passed { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; padding: 4px 10px; border-radius: 20px; font-size: .73rem; font-weight: 600; letter-spacing: .2px; } .portal-badge-failed { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 4px 10px; border-radius: 20px; font-size: .73rem; font-weight: 600; letter-spacing: .2px; } /* ============================================ BUTTONS (portal-scoped) ============================================ */ .portal-btn { border-radius: var(--portal-radius-sm); font-size: .85rem; font-weight: 500; transition: all var(--portal-transition); } .portal-btn-primary { background: var(--portal-primary); border-color: var(--portal-primary); color: white; } .portal-btn-primary:hover { background: var(--portal-primary-dark); border-color: var(--portal-primary-dark); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,.35); } /* ============================================ DOCUMENT LINKS ============================================ */ .portal-doc-link { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 500; text-decoration: none; transition: all var(--portal-transition); margin: 2px 2px 2px 0; white-space: nowrap; } .portal-doc-link-admin { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .portal-doc-link-admin:hover { background: #dbeafe; color: #1d4ed8; text-decoration: none; } .portal-doc-link-support { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .portal-doc-link-support:hover { background: #dcfce7; color: #14532d; text-decoration: none; } /* ============================================ EMPTY STATE ============================================ */ .portal-empty-state { text-align: center; padding: 64px 32px; color: #94a3b8; } .portal-empty-state-icon { font-size: 3.5rem; color: #cbd5e1; margin-bottom: 16px; display: block; } .portal-empty-state h5 { color: #64748b; font-weight: 600; margin-bottom: 8px; } .portal-empty-state p { font-size: .88rem; max-width: 320px; margin: 0 auto; } /* ============================================ MODAL overrides ============================================ */ .portal-modal .modal-content { border: none; border-radius: var(--portal-radius); box-shadow: 0 20px 60px rgba(0,0,0,.15); } .portal-modal .modal-header { border-bottom: 1px solid #f1f5f9; padding: 18px 22px; background: #fafbfc; border-radius: var(--portal-radius) var(--portal-radius) 0 0; } .portal-modal .modal-title { font-size: .95rem; font-weight: 600; color: #1e293b; } .portal-modal .modal-body { padding: 22px; } .portal-modal .modal-footer { border-top: 1px solid #f1f5f9; padding: 14px 22px; background: #fafbfc; border-radius: 0 0 var(--portal-radius) var(--portal-radius); gap: 8px; } /* ============================================ ASSIGNMENT LIST (dashboard sub-cat list) ============================================ */ .portal-assignment-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; transition: background var(--portal-transition); } .portal-assignment-list-item:last-child { border-bottom: none; } .portal-assignment-list-item:hover { background: #f8fafc; } .portal-assignment-list-item .item-name { font-size: .88rem; font-weight: 500; color: #1e293b; } .portal-assignment-list-item .item-meta { font-size: .75rem; color: #94a3b8; margin-top: 2px; } .portal-assignment-list-item .item-count { background: var(--portal-primary-light); color: var(--portal-primary); font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } /* ============================================ LOGIN PAGE ============================================ */ .portal-login-page { min-height: 100vh; background: linear-gradient( 135deg, var(--portal-sidebar-grad-a) 0%, var(--portal-sidebar-grad-c) 60%, #ecfdf5 100% ); display: flex; align-items: center; justify-content: center; padding: 24px 16px; font-family: var(--portal-font); } .portal-login-card { background: white; border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.18); width: 100%; max-width: 440px; overflow: hidden; } .portal-login-card-header { background: linear-gradient( 135deg, var(--portal-sidebar-grad-a), var(--portal-sidebar-grad-c) ); padding: 36px 32px 28px; text-align: center; color: white; position: relative; overflow: hidden; } .portal-login-card-header::before { content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; background: rgba(255,255,255,.07); border-radius: 50%; } .portal-login-logo { width: 72px; height: 72px; border-radius: 50%; background: white; padding: 8px; object-fit: contain; box-shadow: 0 6px 20px rgba(0,0,0,.2); margin-bottom: 16px; position: relative; } .portal-login-card-header h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; position: relative; } .portal-login-card-header p { font-size: .85rem; opacity: .8; margin: 0; position: relative; } .portal-login-card-body { padding: 32px; } .portal-login-card-body .form-label { font-size: .83rem; font-weight: 600; color: #374151; margin-bottom: 6px; } .portal-login-card-body .form-control { border-radius: var(--portal-radius-sm); border-color: #e2e8f0; font-size: .9rem; padding: 10px 12px; transition: border-color var(--portal-transition), box-shadow var(--portal-transition); } .portal-login-card-body .form-control:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 3px rgba(5,150,105,.15); } .portal-login-card-body .input-group-text { border-color: #e2e8f0; background: #f8fafc; color: #94a3b8; } .portal-login-btn { background: linear-gradient( 135deg, var(--portal-sidebar-grad-b), var(--portal-sidebar-grad-c) ); border: none; border-radius: var(--portal-radius-sm); color: white; font-weight: 600; font-size: .9rem; padding: 12px; width: 100%; transition: all var(--portal-transition); box-shadow: 0 4px 14px rgba(5,150,105,.3); } .portal-login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,150,105,.4); color: white; } .portal-login-btn:active { transform: translateY(0); } /* ============================================ ALERTS (portal) ============================================ */ .portal-alert { border-radius: var(--portal-radius-sm); border: none; font-size: .875rem; padding: 12px 16px; } .portal-alert-danger { background: var(--portal-danger-light); color: #b91c1c; border-left: 4px solid var(--portal-danger); } /* ============================================ ANIMATIONS ============================================ */ @keyframes portalFadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes portalFadeIn { from { opacity: 0; } to { opacity: 1; } } .portal-card { animation: portalFadeInUp .3s ease both; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .portal-sidebar { transform: translateX(-100%); } .portal-sidebar.show { transform: translateX(0); } .portal-content { margin-left: 0; } .portal-btn-sidebar-toggle { display: flex; } .portal-page-content { padding: 20px 16px; } } @media (max-width: 768px) { .portal-header { padding: 0 16px; } .portal-stat-card { padding: 16px 14px; } .portal-stat-icon { width: 44px; height: 44px; font-size: 1.2rem; } .portal-stat-value { font-size: 1.4rem; } .portal-filter-section { padding: 14px; } .portal-welcome-card { padding: 20px; } } @media (max-width: 480px) { .portal-header { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; } .portal-page-content { padding: 14px 10px; } .portal-stat-card { flex-direction: column; text-align: center; padding: 18px 12px; } .portal-stat-icon { margin: 0 auto; } .portal-user-badge span { display: none; } .portal-welcome-card h4 { font-size: 1.1rem; } } /* ============================================ UTILITIES ============================================ */ .portal-text-primary { color: var(--portal-primary) !important; } .portal-border-start-primary { border-left: 3px solid var(--portal-primary) !important; } .portal-border-start-success { border-left: 3px solid var(--portal-success) !important; } .portal-border-start-warning { border-left: 3px solid var(--portal-warning) !important; } .portal-border-start-danger { border-left: 3px solid var(--portal-danger) !important; } /* ── Shared sp-filter components (mirrors admin-dashboard.css) ── */ .sp-filter { background:white; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 1px 4px rgba(0,0,0,.05); padding:18px 20px; margin-bottom:20px; } .sp-filter .form-control, .sp-filter .form-select { border-radius:8px; border-color:#e2e8f0; font-size:.85rem; } .sp-filter .form-control:focus, .sp-filter .form-select:focus { border-color:var(--portal-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); } .sp-filter .input-group-text { border-color:#e2e8f0; background:#f8fafc; } .sp-filter-label { font-size:.73rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.5px; } .sp-filter-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:12px; border-top:1px solid #f1f5f9; margin-top:12px; } .sp-filter-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:.73rem; font-weight:500; border:1px solid; }