:root { --bg-primary:#0f1117; --bg-secondary:#161822; --bg-card:#1c1f2e; --bg-card-hover:#232738; --border-color:#2a2d3e; --border-focus:#4f8cff; --text-primary:#e8eaf0; --text-secondary:#8b8fa3; --text-muted:#5c6078; --accent:#4f8cff; --accent-hover:#3a7af0; --accent-light:rgba(79,140,255,0.1); --success:#34d399; --success-bg:rgba(52,211,153,0.1); --warning:#fbbf24; --danger:#f87171; --danger-bg:rgba(248,113,113,0.1); --purple:#a78bfa; --sidebar-width:260px; --topbar-height:64px; --radius:10px; --radius-sm:6px; --shadow:0 4px 24px rgba(0,0,0,0.3); }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',-apple-system,sans-serif; background:var(--bg-primary); color:var(--text-primary); line-height:1.6; }
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:var(--bg-primary); } ::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
.login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg-primary); }
.login-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:48px 40px; width:100%; max-width:420px; box-shadow:var(--shadow); }
.login-logo { text-align:center; margin-bottom:32px; } .login-logo .logo-icon { font-size:48px; margin-bottom:12px; } .login-logo h1 { font-size:24px; font-weight:700; } .login-logo p { color:var(--text-secondary); font-size:14px; }
.form-group { margin-bottom:20px; } .form-group label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); font-size:14px; outline:none; transition:0.2s; }
.form-group input:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-light); }
.error-msg { background:var(--danger-bg); color:var(--danger); padding:10px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; transition:0.2s; }
.btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent-hover); }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-color); } .btn-ghost:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.btn-sm { padding:6px 12px; font-size:12px; } .btn-full { width:100%; }
.sidebar { position:fixed; top:0; left:0; width:var(--sidebar-width); height:100vh; background:var(--bg-secondary); border-right:1px solid var(--border-color); display:flex; flex-direction:column; z-index:100; }
.sidebar-header { padding:20px 24px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border-color); font-size:18px; font-weight:700; } .sidebar-header .logo-icon.small { font-size:28px; }
.sidebar-nav { flex:1; padding:16px 12px; } .nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; color:var(--text-secondary); text-decoration:none; border-radius:var(--radius-sm); font-size:14px; font-weight:500; transition:0.2s; } .nav-item:hover { background:var(--bg-card); color:var(--text-primary); } .nav-item.active { background:var(--accent-light); color:var(--accent); } .nav-item svg { width:20px; height:20px; flex-shrink:0; }
.sidebar-footer { padding:16px 20px; border-top:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; } .user-info { display:flex; align-items:center; gap:10px; } .user-avatar { width:36px; height:36px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#fff; } .user-name { font-size:13px; font-weight:600; } .user-role { font-size:11px; color:var(--text-muted); } .btn-logout { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:8px; border-radius:var(--radius-sm); } .btn-logout:hover { color:var(--danger); background:var(--danger-bg); } .btn-logout svg { width:18px; height:18px; }
.main-content { margin-left:var(--sidebar-width); min-height:100vh; }
.topbar { height:var(--topbar-height); padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border-color); background:var(--bg-secondary); position:sticky; top:0; z-index:50; } .topbar h2 { font-size:20px; font-weight:600; } .topbar-actions { display:flex; gap:12px; }
.content-area { padding:32px; }
.section { display:none; } .section.active { display:block; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:32px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:24px; display:flex; align-items:center; gap:16px; } .stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; } .stat-icon.blue { background:var(--accent-light); } .stat-icon.green { background:var(--success-bg); } .stat-icon.purple { background:var(--purple); color:#fff; } .stat-icon.orange { background:var(--warning); color:#000; } .stat-info { display:flex; flex-direction:column; } .stat-number { font-size:28px; font-weight:700; } .stat-label { font-size:13px; color:var(--text-secondary); } .small-stats .stat-card { padding:16px; } .small-stats .stat-number { font-size:22px; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.item-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:24px; transition:0.2s; cursor:pointer; position:relative; } .item-card:hover { border-color:var(--accent); transform:translateY(-2px); } .item-card .card-actions { position:absolute; top:12px; right:12px; display:flex; gap:4px; opacity:0; transition:0.2s; } .item-card:hover .card-actions { opacity:1; } .item-card h3 { font-size:16px; font-weight:600; margin-bottom:4px; } .item-card .card-subtitle { font-size:13px; color:var(--text-secondary); } .item-card .card-meta { display:flex; gap:16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-color); font-size:12px; color:var(--text-muted); }
.add-card { border:2px dashed var(--border-color); background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; color:var(--text-muted); gap:8px; } .add-card:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); } .add-card .plus { font-size:36px; }
.breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:24px; font-size:13px; color:var(--text-secondary); } .breadcrumb a { color:var(--accent); cursor:pointer; } .breadcrumb .separator { color:var(--text-muted); }
.table-container { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); overflow:hidden; margin-top:20px; }
.data-table { width:100%; border-collapse:collapse; } .data-table th { padding:14px 20px; text-align:left; font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); } .data-table td { padding:14px 20px; font-size:14px; border-bottom:1px solid var(--border-color); } .data-table tbody tr:hover { background:var(--bg-card-hover); }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; } .modal-backdrop.active { display:flex; }
.modal { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); width:100%; max-width:640px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 48px rgba(0,0,0,0.4); animation:modalIn 0.2s ease; } @keyframes modalIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; } .modal-header h3 { font-size:18px; } .modal-close { background:none; border:none; color:var(--text-muted); font-size:24px; cursor:pointer; } .modal-close:hover { color:var(--danger); background:var(--danger-bg); }
.modal-body { padding:24px; overflow-y:auto; flex:1; } .modal-footer { padding:16px 24px; border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:12px; }
.modal-large { max-width:800px; }
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; } .badge-success { background:var(--success-bg); color:var(--success); } .badge-info { background:var(--accent-light); color:var(--accent); } .badge-warning { background:var(--warning); color:#000; }
.empty-state { text-align:center; padding:48px; color:var(--text-muted); }
.toast-container { position:fixed; top:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.toast { padding:14px 20px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; box-shadow:var(--shadow); animation:toastIn 0.3s, toastOut 0.3s 2.7s forwards; } .toast-success { background:var(--success); color:#0f1117; } .toast-error { background:var(--danger); color:#fff; } .toast-info { background:var(--accent); color:#fff; } @keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} } @keyframes toastOut { to{opacity:0} }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:24px; } .card h3 { font-size:16px; font-weight:600; margin-bottom:16px; }
.activity-list { display:flex; flex-direction:column; gap:12px; } .activity-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-color); font-size:13px; } .activity-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; } .activity-time { margin-left:auto; color:var(--text-muted); font-size:11px; }
.schools-dash-list { display:flex; flex-direction:column; gap:8px; } .school-dash-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--bg-secondary); border-radius:var(--radius-sm); font-size:13px; } .school-dash-item .school-name { font-weight:500; } .school-dash-item .school-count { color:var(--text-muted); font-size:12px; }
.search-input { padding:10px 16px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); font-size:14px; outline:none; width:300px; } .students-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.payment-concepts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .payment-concept-btn { padding:6px 14px; border:1px solid var(--border-color); border-radius:20px; background:transparent; color:var(--text-secondary); font-size:12px; cursor:pointer; } .payment-concept-btn:hover, .payment-concept-btn.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
.payments-list { max-height:250px; overflow-y:auto; } .payment-item { display:flex; align-items:center; justify-content:space-between; padding:12px; border:1px solid var(--border-color); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--bg-secondary); } .payment-item .payment-concept { font-size:13px; font-weight:500; } .payment-item .payment-date { font-size:11px; color:var(--text-muted); } .payment-item .payment-amount { font-size:16px; font-weight:700; color:var(--success); } .payment-delete { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; margin-left:8px; } .payment-delete:hover { color:var(--danger); }
.payment-summary { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--border-color); margin-top:8px; font-size:14px; } .payment-summary .total-amount { font-weight:700; color:var(--success); font-size:18px; }
.tabs { display:flex; border-bottom:1px solid var(--border-color); margin-bottom:20px; } .tab-btn { padding:10px 20px; background:none; border:none; color:var(--text-secondary); font-size:13px; cursor:pointer; border-bottom:2px solid transparent; } .tab-btn:hover { color:var(--text-primary); } .tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); } .tab-content { display:none; } .tab-content.active { display:block; }
.detail-section { margin-bottom:24px; } .detail-section h4 { font-size:14px; font-weight:600; color:var(--accent); margin-bottom:12px; } .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .detail-item .label { font-size:11px; color:var(--text-muted); text-transform:uppercase; } .detail-item .value { font-size:14px; }
.student-detail-header { display:flex; align-items:center; gap:20px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border-color); } .student-avatar { width:64px; height:64px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; }
.login-hint { margin-top:24px; padding:16px; background:var(--bg-secondary); border-radius:var(--radius-sm); text-align:center; } .login-hint p { font-size:12px; color:var(--text-muted); } .login-hint strong { color:var(--text-secondary); }
.file-upload-area { border:2px dashed var(--border-color); border-radius:var(--radius); padding:32px; text-align:center; cursor:pointer; } .file-upload-area:hover { border-color:var(--accent); background:var(--accent-light); } .upload-icon { font-size:36px; margin-bottom:8px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.text-center { text-align:center; } .text-success { color:var(--success); } .text-muted { color:var(--text-muted); } .flex { display:flex; } .gap-1 { gap:8px; } .mt-2 { margin-top:16px; }
@media(max-width:1024px){.dashboard-grid{grid-template-columns:1fr;}}
@media(max-width:768px){.sidebar{transform:translateX(-100%);}.main-content{margin-left:0;}.content-area{padding:20px;}.form-row{grid-template-columns:1fr;}}