:root{ --primary:#1e3a8a; --primary-2:#0c4a6e; --primary-dark:#0f1d54; --accent:#0891b2; --gold:#b45309; --success:#15803d; --warning:#d97706; --danger:#b91c1c; --bg:#f4f6fa; --bg-2:#eaeef5; --surface:#ffffff; --surface-2:#fbfcfe; --text:#0f172a; --muted:#64748b; --border:#e2e8f0; --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.05); --shadow:0 6px 24px rgba(15,23,42,.06),0 2px 6px rgba(15,23,42,.04); --shadow-lg:0 24px 48px -12px rgba(15,23,42,.18); --radius:14px; --radius-sm:10px; } /* Dark mode — toggled via data-theme="dark" on */ html[data-theme="dark"]{ --bg:#0b1220; --bg-2:#0f172a; --surface:#1e293b; --surface-2:#172033; --text:#e2e8f0; --muted:#94a3b8; --border:#334155; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 24px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3); } html[data-theme="dark"] body{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);color:var(--text)} html[data-theme="dark"] .card,html[data-theme="dark"] .modal-content,html[data-theme="dark"] .dropdown-menu{background:var(--surface);color:var(--text);border-color:var(--border)} html[data-theme="dark"] .form-control,html[data-theme="dark"] .form-select{background:var(--surface-2);color:var(--text);border-color:var(--border)} html[data-theme="dark"] .form-control::placeholder{color:var(--muted)} html[data-theme="dark"] .table{color:var(--text);--bs-table-bg:transparent} html[data-theme="dark"] .table thead th,html[data-theme="dark"] th{background:var(--surface-2)!important;color:var(--text);border-color:var(--border)} html[data-theme="dark"] .text-muted{color:var(--muted)!important} html[data-theme="dark"] .border-bottom,html[data-theme="dark"] .border-top,html[data-theme="dark"] .border{border-color:var(--border)!important} html[data-theme="dark"] .modal-header,html[data-theme="dark"] .modal-footer{border-color:var(--border)} html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1) brightness(2)} html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5{color:#cbd5e1} html[data-theme="dark"] .alert-light{background:var(--surface-2);color:var(--text);border-color:var(--border)} html[data-theme="dark"] .bg-light{background:var(--surface-2)!important;color:var(--text)} html[data-theme="dark"] .progress{background:var(--surface-2)} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Heebo',system-ui,-apple-system,sans-serif; background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%); background-attachment:fixed; color:var(--text); direction:rtl; font-size:15px; line-height:1.55; letter-spacing:-.005em; min-height:100vh; } h1,h2,h3,h4,h5,h6{font-family:'Frank Ruhl Libre','Heebo',serif;letter-spacing:-.015em;font-weight:700;color:var(--primary-dark)} h3{font-size:1.6rem;margin-bottom:.6rem} h5{font-size:1.15rem} h6{font-size:.95rem;color:var(--text);font-family:'Heebo',sans-serif;font-weight:600} /* Navbar - elegant institutional gradient */ .navbar{ background:linear-gradient(115deg,#0f1d54 0%,#1e3a8a 45%,#0c4a6e 100%)!important; color:#fff; padding:.85rem 0; box-shadow:0 8px 32px rgba(15,29,84,.18); border-bottom:3px solid rgba(255,255,255,.06); position:relative; overflow:hidden; } .navbar::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 85% 50%,rgba(8,145,178,.18) 0%,transparent 60%); pointer-events:none; } .navbar .container{position:relative;z-index:1} .navbar-brand{ display:flex;align-items:center;gap:14px; font-weight:700;font-size:1.35rem;color:#fff!important; font-family:'Frank Ruhl Libre',serif;letter-spacing:.01em; } .brand-logo{ width:46px;height:46px; background:rgba(255,255,255,.97); border-radius:50%; padding:5px; box-shadow:0 6px 18px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.4); object-fit:contain; flex-shrink:0; } .brand-text{font-size:1.35rem;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.18)} #user-info{font-size:.92rem;font-weight:500} #user-info .btn{font-size:.78rem;padding:.18rem .55rem;border-radius:6px;border-width:1px} /* Cards - polished */ .card{ border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--border); background:var(--surface); transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s,border-color .25s; } .card:hover{box-shadow:var(--shadow);border-color:#cbd5e1} .card-tile{ padding:2rem 1.25rem; text-align:center;cursor:pointer; background:linear-gradient(160deg,#fff 0%,#f8fafc 100%); border-top:3px solid transparent; position:relative;overflow:hidden; } .card-tile::after{ content:'';position:absolute;top:0;right:0;left:0;height:3px; background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%); transform:scaleX(0);transform-origin:center; transition:transform .35s cubic-bezier(.4,0,.2,1); } .card-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .card-tile:hover::after{transform:scaleX(1)} .card-tile i{transition:transform .35s cubic-bezier(.4,0,.2,1);display:inline-block} .card-tile:hover i{transform:scale(1.12) rotate(-3deg)} .card-tile h5{margin-top:.85rem;color:var(--primary-dark)} .card-tile p{font-size:.85rem;color:var(--muted);margin-bottom:0} /* Buttons - refined */ .btn{font-weight:500;border-radius:9px;padding:.5rem 1.1rem;transition:all .2s;letter-spacing:.005em} .btn:active{transform:translateY(1px)} .btn-primary{ background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%); border:none;color:#fff; box-shadow:0 4px 12px rgba(30,58,138,.22); } .btn-primary:hover{ background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%); box-shadow:0 8px 20px rgba(30,58,138,.32);transform:translateY(-1px); } .btn-success{background:var(--success);border-color:var(--success)} .btn-success:hover{background:#166534;border-color:#166534} .btn-danger{background:var(--danger);border-color:var(--danger)} .btn-outline-primary{color:var(--primary);border-color:var(--primary)} .btn-outline-primary:hover{background:var(--primary);border-color:var(--primary)} .btn-link{color:var(--primary);text-decoration:none;font-weight:500} .btn-link:hover{color:var(--primary-dark);text-decoration:underline} /* Login page - hero card */ #page-login .card{ padding:2.5rem 2rem!important; margin-top:3rem!important; background:linear-gradient(160deg,#fff 0%,#fafbfd 100%); box-shadow:var(--shadow-lg),0 0 0 1px var(--border); border:none; } #page-login h3{ text-align:center; font-size:1.75rem;color:var(--primary-dark); margin-bottom:1.75rem!important; font-family:'Frank Ruhl Libre',serif; } /* Avatars and badges */ .avatar{ width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1e40af;display:inline-flex;align-items:center;justify-content:center; font-weight:700;font-size:.95rem; margin-left:8px;flex-shrink:0; box-shadow:inset 0 0 0 2px #fff,0 2px 6px rgba(30,58,138,.18); } .cat-badge{ display:inline-block;padding:4px 14px;border-radius:16px; font-size:.8rem;font-weight:500; background:#dbeafe;color:#1e40af; border:1px solid #bfdbfe; transition:transform .15s ease, box-shadow .15s ease; } .cat-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(30,64,175,.18)} html[data-theme="dark"] .cat-badge{background:rgba(59,130,246,.18);color:#93c5fd;border-color:rgba(59,130,246,.35)} /* Severity rows */ .severity-high{border-right:4px solid var(--danger);background:linear-gradient(to left,#fef2f2 0%,#fff 35%)} .severity-mid{border-right:4px solid var(--warning);background:linear-gradient(to left,#fffbeb 0%,#fff 35%)} .severity-low{border-right:4px solid var(--success);background:linear-gradient(to left,#f0fdf4 0%,#fff 35%)} /* Role badges */ .role-admin{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;font-weight:600;padding:.3rem .8rem} .role-rabbi{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e3a8a;font-weight:600;padding:.3rem .8rem} .role-readonly{background:#f1f5f9;color:#475569;font-weight:500;padding:.3rem .8rem} /* Form controls */ .form-control,.form-select{ border:1.5px solid var(--border); padding:.65rem .95rem; border-radius:var(--radius-sm); font-size:.95rem; background:var(--surface-2); transition:border-color .2s,box-shadow .2s,background .2s; } .form-control:hover,.form-select:hover{background:#fff} .form-control:focus,.form-select:focus{ box-shadow:0 0 0 4px rgba(30,58,138,.12); border-color:var(--primary); background:#fff; } .form-label{font-weight:500;font-size:.88rem;color:var(--text);margin-bottom:.4rem} /* Tables - refined */ .table{font-size:.92rem;color:var(--text)} .table thead th{ background:linear-gradient(180deg,#f8fafc,#f1f5f9); font-weight:600;font-size:.78rem; border-bottom:2px solid var(--border); color:var(--muted); text-transform:uppercase;letter-spacing:.04em; padding:.85rem .75rem; } .table tbody td{padding:.75rem;border-color:#f1f5f9;vertical-align:middle} .table-hover tbody tr{transition:background .15s,transform .15s} .table-hover tbody tr:hover{background:#f8fafc} /* Modal - polished */ .modal-content{ border-radius:var(--radius); border:none; box-shadow:0 32px 80px rgba(15,23,42,.22); overflow:hidden; } .modal-header{ background:linear-gradient(135deg,#f8fafc,#f1f5f9); border-bottom:1px solid var(--border); padding:1.1rem 1.4rem; } .modal-header h5{margin:0;font-family:'Frank Ruhl Libre',serif;color:var(--primary-dark)} .modal-body{padding:1.4rem} /* Stats display */ .display-6{ font-weight:800; color:var(--primary); font-family:'Frank Ruhl Libre',serif; letter-spacing:-.02em; } /* Misc */ .text-muted{color:var(--muted)!important} .alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac;border-radius:var(--radius-sm)} .alert-danger{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;border-radius:var(--radius-sm)} /* Sync indicator */ .sync-indicator{ position:fixed;bottom:20px;left:20px; padding:.55rem 1rem;border-radius:24px; background:#fff;box-shadow:var(--shadow); font-size:.82rem;font-weight:500; z-index:1000; border:1px solid var(--border); display:flex;align-items:center;gap:.5rem; } .sync-online{color:var(--success)} .sync-offline{color:var(--warning)} /* Toast notifications */ .toast-container{position:fixed;top:24px;left:24px;z-index:9999} .toast-msg{ background:#fff;border-radius:var(--radius-sm); box-shadow:0 16px 40px rgba(15,23,42,.18); padding:14px 20px;margin-bottom:12px; display:flex;align-items:center;gap:12px; animation:slideIn .35s cubic-bezier(.4,0,.2,1); border-right:4px solid var(--primary); max-width:400px;font-weight:500; } .toast-msg.success{border-color:var(--success)} .toast-msg.error{border-color:var(--danger)} .toast-msg.warn{border-color:var(--warning)} @keyframes slideIn{from{transform:translateX(-30px);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes fadeOut{to{opacity:0;transform:translateX(-30px)}} .toast-msg.fadeOut{animation:fadeOut .3s ease forwards} /* Loading overlay */ .loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9998} /* Mobile */ @media (max-width:768px){ body{font-size:14.5px;padding-bottom:80px} .navbar{padding:.7rem 0} .brand-logo{width:38px;height:38px} .brand-text{font-size:1.05rem} .card-tile{padding:1.25rem .75rem} .card-tile h5{font-size:.95rem} .table{font-size:.85rem} .display-6{font-size:1.5rem} h3{font-size:1.35rem} #page-login .card{padding:1.75rem 1.25rem!important;margin-top:1.5rem!important} /* Bigger tap targets (Apple HIG: 44px min) */ .btn,.form-control,.form-select,.btn-sm{min-height:44px} .btn-sm{font-size:.85rem;padding:.4rem .65rem} /* No horizontal scroll on tables */ .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Modals full-screen on mobile for easier interaction */ .modal-dialog{margin:0;max-width:100%;height:100%} .modal-content{border-radius:0;min-height:100vh} .modal-fullscreen-on-mobile .modal-body{max-height:calc(100vh - 180px);overflow-y:auto} /* Calendar table cells smaller text */ #cal-grid table{font-size:.75rem} #cal-grid td{height:60px!important;padding:2px!important} #cal-grid td .small{font-size:.6rem!important} /* Compact dashboard cards */ .display-6{font-size:1.4rem!important} /* Group filter cards into single column */ .row.g-2>.col-md-3,.row.g-2>.col-md-4,.row.g-2>.col-md-6{margin-bottom:.5rem} /* Sticky bottom action bar (for primary actions) */ .sticky-bottom-bar{ position:fixed;bottom:0;left:0;right:0; background:#fff;border-top:1px solid var(--border); padding:.6rem .75rem;display:flex;gap:.5rem; box-shadow:0 -4px 12px rgba(0,0,0,.08);z-index:1020; } .sticky-bottom-bar .btn{flex:1;min-height:48px} /* Hide secondary actions in compact mode */ .mobile-hide{display:none!important} /* Force wrap of long content */ .text-break-all{word-break:break-all} /* Bigger student avatars for tap */ .avatar{width:44px!important;height:44px!important} /* Toast positioned higher for mobile */ .toast-container{bottom:80px!important;top:auto!important} } /* Tablet */ @media (max-width:1024px) and (min-width:769px){ .btn,.form-control,.form-select{min-height:40px} #cal-grid td{height:75px} } /* Page enter animation */ @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} [id^="page-"]:not(.d-none){animation:pageIn .3s cubic-bezier(.4,0,.2,1)} /* Round-12 UX polish: skeleton loaders, better focus, smoother transitions */ @keyframes shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}} .skeleton{ background:#f1f5f9; background-image:linear-gradient(90deg,#f1f5f9 0px,#e2e8f0 40px,#f1f5f9 80px); background-size:200px 100%;background-repeat:no-repeat; animation:shimmer 1.4s infinite linear; border-radius:6px;height:1.25rem;display:inline-block;width:100%; } .btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible{ outline:2px solid var(--primary);outline-offset:2px; } .card:hover{transition:box-shadow .2s ease;} .card-tile:hover{transform:translateY(-2px);transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-lg)} /* Better empty states */ .empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)} .empty-state .bi{font-size:3rem;color:var(--border);margin-bottom:.5rem;display:block} /* Better error toasts */ .toast-msg.error{border-right-color:var(--danger);background:#fef2f2} .toast-msg.warn{border-right-color:var(--warning);background:#fffbeb} .toast-msg.success{border-right-color:var(--success);background:#f0fdf4} /* Disabled buttons clearer */ .btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed} /* Pulse animation for "new" badge */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}} /* Severity row tinting — left border accent */ .card.severity-high{border-right:4px solid var(--danger)!important;background:rgba(220,38,38,.025)} .card.severity-mid{border-right:4px solid var(--warning)!important;background:rgba(217,119,6,.02)} .card.severity-low{border-right:4px solid var(--success)!important;background:rgba(21,128,61,.02)} html[data-theme="dark"] .card.severity-high{background:rgba(220,38,38,.08)} html[data-theme="dark"] .card.severity-mid{background:rgba(217,119,6,.06)} html[data-theme="dark"] .card.severity-low{background:rgba(21,128,61,.06)} /* Print styles — hide chrome, keep content */ @media print { .navbar, .nav-tabs, .btn, .modal, .toast, .view-mode-toggle, #b-fstudent, #b-fcat, #b-fstudent-list, #b-fcat-list, button, .form-control, .form-select, .view-site-btn, #b-filter-status, .stu-hero-actions, .stu-hero-nav, .modal-footer, .btn-close { display: none !important; } body { background: #fff !important; color: #000 !important; padding: 8mm; } .card { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; } a { color: #000 !important; text-decoration: none !important; } h3 { page-break-after: avoid; } } /* Smooth scrollbar */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#f1f5f9} ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:#94a3b8} /* ========== View-mode toggle (comfortable / compact / cards) ========== */ [data-view-mode="compact"] .card.p-3{padding:.5rem .7rem!important} [data-view-mode="compact"] .card.p-3.mb-2{margin-bottom:.35rem!important} [data-view-mode="compact"] .card.p-3 p{margin-bottom:.15rem;font-size:.88rem;line-height:1.4} [data-view-mode="compact"] .card.p-3 small{font-size:.72rem} [data-view-mode="compact"] .card.p-3 .badge{font-size:.7rem;padding:.18rem .4rem} [data-view-mode="compact"] .card.p-3 strong{font-size:.92rem} [data-view-mode="compact"] .card.p-3 .btn-sm{padding:.15rem .35rem;font-size:.78rem} [data-view-mode="cards"] #b-list, [data-view-mode="cards"] #w-list, [data-view-mode="cards"] #r-list, [data-view-mode="cards"] #l-list, [data-view-mode="cards"] #y-list, [data-view-mode="cards"] #me-list, [data-view-mode="cards"] #co-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:.7rem; } [data-view-mode="cards"] #b-list .card.p-3, [data-view-mode="cards"] #w-list .card.p-3, [data-view-mode="cards"] #r-list .card.p-3, [data-view-mode="cards"] #l-list .card.p-3, [data-view-mode="cards"] #y-list .card.p-3, [data-view-mode="cards"] #me-list .card.p-3, [data-view-mode="cards"] #co-list .card.p-3{ margin-bottom:0!important; height:100%; display:flex;flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .15s ease,box-shadow .2s ease; } [data-view-mode="cards"] #b-list .card.p-3:hover, [data-view-mode="cards"] #w-list .card.p-3:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .view-mode-toggle .btn{padding:.18rem .5rem} .view-mode-toggle .btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} /* ========== Student Card v2 — Hero + KPI strip ========== */ .stu-hero{ position:relative; background:linear-gradient(120deg,#0f1d54 0%,#1e3a8a 50%,#0891b2 100%); color:#fff; border-radius:var(--radius) var(--radius) 0 0; padding:1.4rem 1.5rem 1.2rem; overflow:hidden; } .stu-hero::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 88% 30%,rgba(255,255,255,.12) 0%,transparent 55%),radial-gradient(circle at 10% 90%,rgba(255,255,255,.06) 0%,transparent 40%); pointer-events:none; } .stu-hero > *{position:relative;z-index:1} .stu-hero-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .stu-avatar-big{ width:78px;height:78px;border-radius:50%; background:rgba(255,255,255,.97);color:var(--primary-dark); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:2rem; box-shadow:0 6px 22px rgba(0,0,0,.25),inset 0 0 0 3px rgba(255,255,255,.5); cursor:pointer;flex-shrink:0;font-family:'Frank Ruhl Libre',serif; object-fit:cover; } .stu-hero h2{ color:#fff;margin:0 0 .15rem; font-family:'Frank Ruhl Libre',serif;font-size:1.7rem; text-shadow:0 2px 12px rgba(0,0,0,.25);letter-spacing:-.01em; } .stu-hero .stu-sub{ font-size:.92rem;opacity:.92;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center; } .stu-hero .stu-sub > span{display:inline-flex;align-items:center;gap:.3rem} .stu-hero .stu-sub .dot{opacity:.5} .stu-hero-actions{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap} .stu-hero-actions .btn{ background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff; font-size:.82rem;padding:.32rem .65rem;border-radius:8px;backdrop-filter:blur(4px); } .stu-hero-actions .btn:hover{background:rgba(255,255,255,.3);color:#fff} .stu-hero-actions .btn.wa{background:rgba(37,211,102,.85);border-color:transparent} .stu-hero-actions .btn.wa:hover{background:rgba(37,211,102,1)} .stu-hero-nav{ display:flex;justify-content:space-between;align-items:center; margin-bottom:.7rem;font-size:.85rem;opacity:.92; } .stu-hero-nav button{ background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff; padding:.2rem .55rem;border-radius:6px;font-size:.82rem;cursor:pointer; } .stu-hero-nav button:hover{background:rgba(255,255,255,.25)} .stu-alergic-badge{ display:inline-flex;align-items:center;gap:.3rem; background:rgba(220,38,38,.95);color:#fff;font-size:.78rem;font-weight:600; padding:.2rem .55rem;border-radius:999px;margin-right:.4rem; } /* KPI strip */ .stu-kpis{ display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem; margin:-.6rem 1rem 1rem;position:relative;z-index:2; } @media (max-width:640px){.stu-kpis{grid-template-columns:repeat(3,1fr)}} .kpi-card{ background:var(--surface);border-radius:var(--radius-sm); padding:.85rem .6rem .7rem;text-align:center; border:1px solid var(--border);box-shadow:var(--shadow-sm); transition:transform .15s ease,box-shadow .2s ease; } .kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .kpi-card .kpi-icon{font-size:1.15rem;margin-bottom:.1rem;display:block} .kpi-card .kpi-num{font-size:1.55rem;font-weight:700;line-height:1;color:var(--primary-dark);font-family:'Frank Ruhl Libre',serif} .kpi-card .kpi-label{font-size:.75rem;color:var(--muted);margin-top:.2rem} .kpi-card.k-events{border-top:3px solid var(--primary)} .kpi-card.k-events .kpi-icon{color:var(--primary)} .kpi-card.k-high{border-top:3px solid var(--danger)} .kpi-card.k-high .kpi-icon{color:var(--danger)} .kpi-card.k-high .kpi-num{color:var(--danger)} .kpi-card.k-conv{border-top:3px solid var(--accent)} .kpi-card.k-conv .kpi-icon{color:var(--accent)} .kpi-card.k-lessons{border-top:3px solid var(--gold)} .kpi-card.k-lessons .kpi-icon{color:var(--gold)} .kpi-card.k-rw{border-top:3px solid var(--success)} .kpi-card.k-rw .kpi-icon{color:var(--success)} /* Modal body — student card v2 */ .stu-body{padding:0 1.2rem 1rem} .stu-info-grid{ display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem; background:var(--surface-2);padding:.85rem 1rem;border-radius:var(--radius-sm); border:1px solid var(--border);margin-bottom:1rem;font-size:.92rem; } @media (max-width:640px){.stu-info-grid{grid-template-columns:1fr}} .stu-info-grid .lbl{color:var(--muted);font-size:.78rem;display:block;margin-bottom:.05rem} .stu-info-grid .val{font-weight:500;color:var(--text)} .stu-info-grid .row-full{grid-column:1/-1} .stu-info-grid .danger-row{background:rgba(220,38,38,.07);padding:.4rem .6rem;border-radius:6px;color:var(--danger);grid-column:1/-1;font-weight:600} /* Pill-style tabs */ .stu-tabs.nav-tabs{ border-bottom:1px solid var(--border);gap:.3rem;flex-wrap:wrap;margin-bottom:.7rem; } .stu-tabs.nav-tabs .nav-link{ border:1px solid transparent;border-radius:999px; padding:.32rem .85rem;color:var(--muted);font-size:.88rem;font-weight:500; background:transparent;transition:all .15s ease; } .stu-tabs.nav-tabs .nav-link:hover{background:var(--surface-2);color:var(--text)} .stu-tabs.nav-tabs .nav-link.active{ background:var(--primary);color:#fff;border-color:var(--primary); } html[data-theme="dark"] .stu-tabs.nav-tabs .nav-link.active{background:var(--accent);border-color:var(--accent)} .stu-trend-card{ background:var(--surface-2);border:1px solid var(--border); border-radius:var(--radius-sm);padding:.7rem .9rem;margin-bottom:1rem; } .stu-trend-card h6{margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem;color:var(--text)}