/*
* ══════════════════════════════════════════════════════════════════
* Athena HR Portal — Premium Brand Theme v3.0
* Author: Claude for Chandrasekar, CEO Athena Global Schools
* Date: June 2026
* Colors: Navy #1B2A6B | Gold #F5A623 | White #FFFFFF
* Usage: Add
* AFTER theme-v2.css in . No HTML changes needed.
* ══════════════════════════════════════════════════════════════════
*/
/* ── Token overrides ──────────────────────────────────────────── */
:root {
--navy: #1B2A6B;
--navy-deep: #0F1A45;
--navy-mid: #243580;
--gold: #F5A623;
--gold-soft: #FFF8EC;
--gold-border: #F5C877;
--orange: #F5A623; /* keeps existing references working */
--orange-soft: #FFF8EC;
--light: #F4F6FB;
--surface: #FFFFFF;
--grey: #111827;
--grey-soft: #111827;
--green: #1A7A4A;
--red: #C0392B;
--border: #E3E8F0;
--border-strong:#C5CEDF;
--sidebar-w: 248px;
--topbar-h: 60px;
--radius: 14px;
--radius-sm: 10px;
--shadow-sm: 0 1px 3px rgba(15,23,42,.05);
--shadow: 0 2px 8px rgba(15,23,42,.08);
--shadow-lg: 0 12px 32px -12px rgba(27,42,107,.22);
--font-heading: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
/* ── Base typography ──────────────────────────────────────────── */
body {
font-family: var(--font-body) !important;
background: var(--light) !important;
color: #1B2A6B !important;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.page-title, .table-title, .modal-title,
.card .card-value, .branch-card h3,
.chart-card h4, .profile-info h2,
.login-logo h2, .cal-nav h3,
.profile-section h4 {
font-family: var(--font-heading) !important;
color: var(--navy) !important;
letter-spacing: -0.02em;
}
/* ════════════════════════════════════════════════════════════════
LOGIN SCREEN
════════════════════════════════════════════════════════════════ */
body #loginScreen {
background: linear-gradient(150deg, #0F1A45 0%, #1B2A6B 55%, #2D4090 100%) !important;
position: relative;
overflow: hidden;
}
/* Decorative circles behind login card */
body #loginScreen::before {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: rgba(245,166,35,.06);
top: -160px; right: -160px;
pointer-events: none;
}
body #loginScreen::after {
content: '';
position: absolute;
width: 350px; height: 350px;
border-radius: 50%;
background: rgba(255,255,255,.03);
bottom: -100px; left: -100px;
pointer-events: none;
}
body .login-card {
border-radius: 20px;
padding: 44px 40px;
box-shadow: 0 32px 80px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
width: 400px;
background: #ffffff;
position: relative;
z-index: 1;
}
body .login-logo h2 { color: var(--navy) !important; font-size: 21px; font-weight: 700; }
body .login-logo p { color: var(--grey); font-size: 13px; margin-top: 4px; }
body .login-logo .circle {
background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
box-shadow: 0 8px 24px -4px rgba(27,42,107,.45);
}
body .login-field input:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(245,166,35,.18) !important;
outline: none;
}
body .btn-login {
background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
border-radius: var(--radius-sm);
box-shadow: 0 4px 14px -2px rgba(27,42,107,.45);
font-weight: 700;
letter-spacing: 0.01em;
transition: all .2s;
}
body .btn-login:hover {
box-shadow: 0 8px 24px -4px rgba(27,42,107,.55);
transform: translateY(-1px);
opacity: 1 !important;
}
/* ════════════════════════════════════════════════════════════════
TOP BAR
════════════════════════════════════════════════════════════════ */
body .topbar {
background: var(--navy) !important;
border-bottom: none !important;
box-shadow: 0 2px 12px rgba(15,23,42,.18) !important;
height: var(--topbar-h);
padding: 0 24px;
}
body .topbar h1 {
color: #ffffff !important;
font-weight: 700;
font-size: 15px;
font-family: var(--font-heading) !important;
}
body .topbar .logo-circle {
background: var(--gold) !important;
box-shadow: 0 4px 12px -2px rgba(245,166,35,.4);
width: 38px; height: 38px; font-size: 15px;
color: var(--navy) !important;
}
body .topbar .user-name { color: rgba(255,255,255,.9) !important; font-weight: 500; }
body .topbar .user-role {
background: rgba(245,166,35,.2) !important;
color: var(--gold) !important;
border: 1px solid rgba(245,166,35,.35);
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
}
body .topbar .branch-badge {
background: rgba(255,255,255,.12) !important;
color: rgba(255,255,255,.9) !important;
border: 1px solid rgba(255,255,255,.18);
font-weight: 600;
}
body .topbar .btn-logout {
background: transparent !important;
color: rgba(255,255,255,.7) !important;
border: 1px solid rgba(255,255,255,.18);
font-weight: 600;
border-radius: var(--radius-sm);
transition: all .2s;
}
body .topbar .btn-logout:hover {
background: rgba(255,255,255,.1) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.3);
}
body .topbar .hamburger { color: rgba(255,255,255,.85) !important; }
/* Branch dropdown overrides */
body #branchDropdown {
border-radius: var(--radius-sm) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-lg) !important;
}
body .branch-opt:hover { background: var(--gold-soft) !important; color: var(--navy) !important; }
body .branch-opt.active { background: var(--gold-soft) !important; color: var(--navy) !important; font-weight: 700 !important; }
/* ════════════════════════════════════════════════════════════════
SIDEBAR
════════════════════════════════════════════════════════════════ */
body .sidebar {
width: var(--sidebar-w);
background: #FFFFFF !important;
border-right: 1px solid var(--border) !important;
padding: 10px 0;
}
body .main {
margin-left: var(--sidebar-w);
margin-top: var(--topbar-h);
padding: 28px 32px;
background: var(--light) !important;
}
body .nav-section {
font-size: 10px !important;
font-weight: 700;
color: var(--grey-soft) !important;
letter-spacing: 1.1px;
padding: 18px 22px 6px;
text-transform: uppercase;
}
body .nav-item {
margin: 2px 10px;
padding: 10px 14px;
border-radius: var(--radius-sm);
border-left: none !important;
color: #475B8A !important;
font-weight: 500;
font-size: 13.5px;
gap: 12px;
transition: all .15s;
}
body .nav-item:hover {
background: #F4F6FB !important;
color: var(--navy) !important;
}
body .nav-item.active {
background: linear-gradient(90deg, #EEF2FF, #E8EDFF) !important;
color: var(--navy) !important;
font-weight: 700;
box-shadow: inset 3px 0 0 var(--gold);
}
body .nav-item .icon { font-size: 15px; }
body .nav-divider { margin: 10px 20px; background: var(--border); }
/* Nav badge */
body .nav-badge {
background: var(--red) !important;
box-shadow: 0 0 0 2px rgba(192,57,43,.15);
}
/* ════════════════════════════════════════════════════════════════
PAGE HEADER
════════════════════════════════════════════════════════════════ */
body .page-title {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: 6px;
color: var(--navy) !important;
}
body .page-sub, body .page-date { color: var(--grey) !important; }
/* ════════════════════════════════════════════════════════════════
DASHBOARD — HERO GREETING BAND
════════════════════════════════════════════════════════════════ */
#page-dashboard > .page-header {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #3D55A8 100%);
border: none !important;
border-radius: 18px;
padding: 28px 32px;
margin-bottom: 24px;
box-shadow: 0 8px 32px -8px rgba(27,42,107,.35);
position: relative;
overflow: hidden;
}
#page-dashboard > .page-header::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,166,35,.18), transparent 70%);
pointer-events: none;
}
#page-dashboard > .page-header::after {
content: '';
position: absolute;
bottom: -60px; left: -40px;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%);
pointer-events: none;
}
#page-dashboard > .page-header > div:first-child { position: relative; z-index: 1; }
#page-dashboard .page-title {
color: #ffffff !important;
font-size: 26px; font-weight: 700;
letter-spacing: -0.02em; margin-bottom: 4px;
}
#page-dashboard .page-sub { color: rgba(255,255,255,.75) !important; font-size: 14px; }
#page-dashboard .page-date {
display: inline-block; margin-top: 10px;
font-size: 12px; font-weight: 600;
color: var(--gold);
background: rgba(245,166,35,.15);
padding: 4px 12px; border-radius: 999px;
border: 1px solid rgba(245,166,35,.25);
}
#page-dashboard .quick-actions {
position: relative; z-index: 1;
margin-top: 20px; margin-bottom: 0;
display: flex; gap: 10px; flex-wrap: wrap;
}
#page-dashboard .quick-actions .btn {
background: rgba(255,255,255,.12) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.22) !important;
font-weight: 600;
backdrop-filter: blur(4px);
transition: all .2s;
}
#page-dashboard .quick-actions .btn:hover {
background: rgba(255,255,255,.22) !important;
border-color: rgba(255,255,255,.35) !important;
transform: translateY(-1px);
}
#page-dashboard .quick-actions .btn-primary {
background: var(--gold) !important;
color: var(--navy) !important;
border-color: var(--gold) !important;
font-weight: 700;
box-shadow: 0 4px 14px -4px rgba(245,166,35,.5);
}
#page-dashboard .quick-actions .btn-primary:hover {
background: #f7b840 !important;
box-shadow: 0 8px 20px -6px rgba(245,166,35,.6);
}
/* ════════════════════════════════════════════════════════════════
KPI STAT CARDS
════════════════════════════════════════════════════════════════ */
body .cards { gap: 16px; margin-bottom: 24px; }
body .card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius);
padding: 20px 22px;
box-shadow: var(--shadow-sm) !important;
border-left: 1px solid var(--border) !important;
transition: all .2s ease;
position: relative;
overflow: hidden;
}
body .card:hover {
box-shadow: var(--shadow-lg) !important;
transform: translateY(-2px);
border-color: var(--border-strong) !important;
}
body .card .card-label {
font-size: 11px; color: var(--grey) !important;
font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
body .card .card-value {
font-size: 34px; font-weight: 700;
color: var(--navy) !important;
margin: 10px 0 6px; letter-spacing: -0.03em;
font-family: var(--font-heading) !important;
}
body .card .card-sub { color: var(--grey) !important; font-size: 12.5px; }
/* Accent top strip */
body .card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
body .card.orange::before { background: linear-gradient(90deg, var(--gold), #f7c35a); }
body .card.green::before { background: linear-gradient(90deg, #1A7A4A, #2ECC71); }
body .card.red::before { background: linear-gradient(90deg, #C0392B, #e74c3c); }
body .card.navy::before { background: linear-gradient(90deg, var(--navy), #3D55A8); }
/* Remove thick left border from base — use top strip only */
body .card.orange,
body .card.green,
body .card.red,
body .card.navy { border-left: 1px solid var(--border) !important; }
/* Dashboard KPI cards */
#page-dashboard .cards .card {
border-radius: 16px;
border-left: none !important;
border: 1px solid #E8EEF8 !important;
box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
#page-dashboard .cards .card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--gold), var(--navy));
border-radius: 4px 0 0 4px;
}
#page-dashboard .cards .card.green::before { background: linear-gradient(180deg, #2ECC71, #1A7A4A); }
#page-dashboard .cards .card.red::before { background: linear-gradient(180deg, #e74c3c, #C0392B); }
#page-dashboard .cards .card.orange::before { background: linear-gradient(180deg, var(--gold), #e67e22); }
#page-dashboard .cards .card.navy::before { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); }
#page-dashboard .cards .card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg) !important;
border-color: #D0D9EE !important;
}
#page-dashboard .cards .card .card-label {
font-size: 11px; font-weight: 700; color: var(--grey-soft) !important;
letter-spacing: .07em; text-transform: uppercase;
font-family: var(--font-heading) !important;
}
#page-dashboard .cards .card .card-value {
font-size: 34px; font-weight: 800;
color: var(--navy) !important; letter-spacing: -0.02em;
margin: 10px 0 4px; line-height: 1;
font-family: var(--font-heading) !important;
}
#page-dashboard .cards .card .card-sub { font-size: 12px; color: var(--grey-soft) !important; }
/* ════════════════════════════════════════════════════════════════
BRANCH CARDS
════════════════════════════════════════════════════════════════ */
body .branch-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-sm) !important;
transition: all .2s;
}
body .branch-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg) !important;
}
body .branch-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--navy) !important; }
body .branch-card .stat { font-size: 13px; padding: 7px 0; }
#page-dashboard .branch-card {
background: #ffffff !important;
border: 1px solid #E8EEF8 !important;
border-radius: 16px;
padding: 20px 22px;
box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
position: relative;
}
#page-dashboard .branch-card::before {
content: ''; position: absolute;
top: 0; left: 20px; right: 20px; height: 3px;
background: linear-gradient(90deg, var(--gold), var(--navy), transparent);
border-radius: 0 0 3px 3px;
}
#page-dashboard .branch-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -14px rgba(27,42,107,.3) !important;
}
#page-dashboard .branch-card h3 {
font-size: 15px; font-weight: 700; color: var(--navy) !important;
letter-spacing: -0.01em; margin-bottom: 14px;
padding-bottom: 12px; border-bottom: 1px dashed #E3E8F0;
}
/* ════════════════════════════════════════════════════════════════
PHASE-2 BRANCH PROGRESS STRIP
════════════════════════════════════════════════════════════════ */
#phase2BranchStrip {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 22px;
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
}
#phase2BranchStrip h3 {
font-family: var(--font-heading) !important;
font-size: 14px; font-weight: 700;
color: var(--navy) !important;
margin: 0 0 14px;
display: flex; align-items: center; justify-content: space-between;
}
#phase2BranchStrip h3 .hint { font-size: 11px; font-weight: 600; color: var(--grey-soft); letter-spacing: .08em; text-transform: uppercase; }
#phase2BranchStrip .pb-row {
display: grid; grid-template-columns: 140px 1fr 70px;
align-items: center; gap: 14px; padding: 10px 0;
border-bottom: 1px dashed var(--border);
}
#phase2BranchStrip .pb-row:last-child { border-bottom: none; }
#phase2BranchStrip .pb-name { font-size: 13px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 8px; }
#phase2BranchStrip .pb-name .dot { width: 8px; height: 8px; border-radius: 50%; }
#phase2BranchStrip .pb-bar { height: 10px; background: #EEF2F9; border-radius: 999px; overflow: hidden; }
#phase2BranchStrip .pb-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
#phase2BranchStrip .pb-pct { font-family: var(--font-heading) !important; font-weight: 700; font-size: 15px; color: var(--navy); text-align: right; }
/* ════════════════════════════════════════════════════════════════
DOUGHNUT CHART CARD
════════════════════════════════════════════════════════════════ */
#phase2ChartRow {
display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 24px;
}
#phase2ChartRow .chart-card {
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius); padding: 22px;
box-shadow: var(--shadow-sm);
}
#phase2ChartRow h4 {
font-family: var(--font-heading) !important;
font-size: 14px; font-weight: 700;
color: var(--navy) !important; margin-bottom: 14px;
}
#phase2ChartRow .doughnut-center .big {
font-family: var(--font-heading) !important;
font-size: 28px; font-weight: 800; color: var(--navy); line-height: 1;
}
#phase2ChartRow .doughnut-center .lbl {
font-size: 11px; color: var(--grey); font-weight: 600;
letter-spacing: .05em; text-transform: uppercase; margin-top: 4px;
}
/* ════════════════════════════════════════════════════════════════
TABLES
════════════════════════════════════════════════════════════════ */
body .table-wrap {
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
background: var(--surface);
}
body .table-header { padding: 18px 22px; border-bottom: 1px solid var(--border); }
body .table-title { font-size: 15px; font-weight: 700; color: var(--navy) !important; }
body th {
background: #F4F6FB !important;
color: var(--grey) !important;
font-size: 11px; letter-spacing: .6px;
padding: 12px 16px; border-bottom: 1px solid var(--border);
text-transform: uppercase; font-weight: 700;
}
body td { padding: 13px 16px; font-size: 13px; color: #334155; }
body tr:hover td { background: #F8FAFF !important; }
/* Doc vault table header */
.doc-grouped-table thead th {
background: var(--navy) !important;
color: #ffffff !important;
}
/* ════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════ */
body .btn {
border-radius: var(--radius-sm);
font-weight: 600; font-size: 13px;
padding: 9px 18px;
transition: all .15s ease;
font-family: var(--font-body);
}
body .btn-primary {
background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(27,42,107,.3);
}
body .btn-primary:hover {
box-shadow: 0 6px 18px -4px rgba(27,42,107,.45);
transform: translateY(-1px); opacity: 1 !important;
}
body .btn-navy {
background: var(--navy) !important;
color: #fff !important;
}
body .btn-navy:hover { background: var(--navy-deep) !important; opacity: 1 !important; }
body .btn-outline {
background: var(--surface) !important;
border: 1px solid var(--border-strong) !important;
color: var(--navy) !important;
}
body .btn-outline:hover {
background: var(--light) !important;
border-color: var(--navy) !important;
}
body .btn-green { background: linear-gradient(135deg, #1A7A4A, #27AE60) !important; color: #fff !important; }
body .btn-danger { background: linear-gradient(135deg, #C0392B, #E74C3C) !important; color: #fff !important; }
body .btn-archive { background: #e67e22 !important; color: #fff !important; }
body .btn-archive:hover { background: #ca6f1e !important; }
/* Login CTA button */
body .btn-login {
background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
border-radius: var(--radius-sm);
box-shadow: 0 4px 14px -2px rgba(27,42,107,.4);
font-weight: 700;
}
body .btn-login:hover {
box-shadow: 0 8px 24px -4px rgba(27,42,107,.5);
transform: translateY(-1px); opacity: 1 !important;
}
/* ════════════════════════════════════════════════════════════════
FORMS & FILTERS
════════════════════════════════════════════════════════════════ */
body .form-group input,
body .form-group select,
body .form-group textarea,
body .filters input,
body .filters select {
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm);
padding: 10px 14px; font-size: 13px;
background: var(--surface);
transition: all .15s;
}
body .form-group input:focus,
body .form-group select:focus,
body .form-group textarea:focus,
body .filters input:focus,
body .filters select:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(245,166,35,.15);
outline: none !important;
}
/* ════════════════════════════════════════════════════════════════
MODALS
════════════════════════════════════════════════════════════════ */
body .modal {
border-radius: 18px;
padding: 32px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,.35);
}
body .modal-overlay { background: rgba(11,18,48,.55); backdrop-filter: blur(4px); }
body .modal-title { color: var(--navy) !important; }
/* ════════════════════════════════════════════════════════════════
BADGES
════════════════════════════════════════════════════════════════ */
body .badge {
padding: 4px 11px; font-size: 11px; font-weight: 700;
border-radius: 6px; letter-spacing: .2px;
}
body .badge-green { background: #D1FAE5 !important; color: #065F46 !important; }
body .badge-orange { background: var(--gold-soft) !important; color: #92400E !important; }
body .badge-red { background: #FEE2E2 !important; color: #991B1B !important; }
body .badge-blue { background: #DBEAFE !important; color: #1E40AF !important; }
body .badge-purple { background: #EDE9FE !important; color: #5B21B6 !important; }
body .badge-teal { background: #CCFBF1 !important; color: #0F766E !important; }
body .badge-navy { background: var(--navy) !important; color: #ffffff !important; }
/* ════════════════════════════════════════════════════════════════
TABS
════════════════════════════════════════════════════════════════ */
body .tab { color: var(--grey); }
body .tab:hover { color: var(--navy); }
body .tab.active { color: var(--navy) !important; border-bottom-color: var(--gold) !important; }
body .emp-tab-btn.active { background: var(--navy) !important; border-color: var(--navy) !important; }
/* ════════════════════════════════════════════════════════════════
CHART CARDS
════════════════════════════════════════════════════════════════ */
body .chart-card {
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
padding: 22px;
background: var(--surface);
}
body .chart-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--navy) !important; }
/* Dashboard chart row */
#page-dashboard .chart-card {
background: #fff !important;
border: 1px solid #E8EEF8 !important;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
/* ════════════════════════════════════════════════════════════════
ALERT ITEMS
════════════════════════════════════════════════════════════════ */
body .alert-item {
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: all .2s;
}
body .alert-item:hover {
box-shadow: var(--shadow) !important;
transform: translateY(-1px);
}
body .alert-icon { border-radius: 12px; }
body .alert-icon.warning { background: var(--gold-soft); }
/* ════════════════════════════════════════════════════════════════
POLICY BOX
════════════════════════════════════════════════════════════════ */
body .policy-box {
background: var(--gold-soft) !important;
border: 1px solid var(--gold-border) !important;
color: #7C4A00 !important;
border-radius: var(--radius-sm);
}
/* ════════════════════════════════════════════════════════════════
TOAST NOTIFICATIONS
════════════════════════════════════════════════════════════════ */
body #toast {
border-radius: var(--radius-sm);
font-family: var(--font-body);
}
body #toast.success { background: #1A7A4A !important; }
body #toast.error { background: #C0392B !important; }
body #toast.warning { background: var(--navy) !important; }
/* ════════════════════════════════════════════════════════════════
PROFILE SECTIONS
════════════════════════════════════════════════════════════════ */
body .profile-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
body .profile-section h4 { color: var(--navy) !important; font-size: 14px; font-weight: 700; }
/* ════════════════════════════════════════════════════════════════
CALENDAR
════════════════════════════════════════════════════════════════ */
body .cal-day.today { border-color: var(--gold) !important; background: var(--gold-soft) !important; }
body .cal-day.today .cal-num { background: var(--navy) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(27,42,107,.4); }
body .cal-nav h3 { color: var(--navy) !important; }
/* ════════════════════════════════════════════════════════════════
ATTENDANCE ABSTRACT CARDS
════════════════════════════════════════════════════════════════ */
body .abstract-overall {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
border-left-color: var(--gold) !important;
}
/* ════════════════════════════════════════════════════════════════
AI CHIPS
════════════════════════════════════════════════════════════════ */
body .ai-chip { background: var(--light); color: var(--navy); border-color: var(--border); }
body .ai-chip:hover { background: var(--gold-soft) !important; border-color: var(--gold) !important; color: var(--navy) !important; }
/* ════════════════════════════════════════════════════════════════
SCROLLBAR POLISH
════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C5CEDF; border-radius: 8px; border: 2px solid var(--light); }
::-webkit-scrollbar-thumb:hover { background: #8E9AB5; }
/* ════════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
#page-dashboard > .page-header { padding: 22px; }
#page-dashboard .page-title { font-size: 22px; }
#phase2ChartRow { grid-template-columns: 1fr; }
#phase2BranchStrip .pb-row { grid-template-columns: 100px 1fr 50px; gap: 8px; }
}
@media (max-width: 768px) {
body .sidebar { transform: translateX(-100%); }
body .sidebar.open { transform: translateX(0); }
body .main { margin-left: 0; padding: 16px; }
#page-dashboard > .page-header { padding: 18px 20px; }
}