/* ARNDALE parent portal — responsive family experience */
:root {
    --p-brand: #7c3aed;
    --p-brand-dark: #6d28d9;
    --p-brand-soft: #f5f3ff;
    --p-accent: #f59e0b;
    --p-accent-soft: #fffbeb;
    --p-success: #059669;
    --p-ink: #172033;
    --p-muted: #64748b;
    --p-line: #e5e7eb;
    --p-canvas: #f7f7fb;
    --p-surface: #fff;
    --p-radius-sm: 12px;
    --p-radius: 18px;
    --p-radius-lg: 25px;
    --p-shadow: 0 11px 32px rgba(30,41,59,.07);
    --p-shadow-hover: 0 21px 48px rgba(30,41,59,.12);
    --sidebar-width: 270px;
    --sidebar-collapsed-width: 82px;
}
html { scroll-behavior: smooth; }
body { color: var(--p-ink) !important; background: var(--p-canvas) !important; font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important; }
body::before { content:""; position:fixed; inset:0 0 auto var(--sidebar-width); height:320px; pointer-events:none; z-index:-1; background:radial-gradient(circle at 84% 7%,rgba(245,158,11,.15),transparent 27%),linear-gradient(180deg,#f5f3ff 0%,rgba(247,247,251,0) 100%); }
*,*::before,*::after { box-sizing:border-box; }
a,button,input,select,textarea { transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
:is(a,button,input,select,textarea):focus-visible { outline:3px solid rgba(124,58,237,.22) !important; outline-offset:2px; }

/* Portal shell */
.sidebar { width:var(--sidebar-width) !important; padding:15px 12px; border:0 !important; border-right:1px solid rgba(255,255,255,.08) !important; background:linear-gradient(160deg,#261348 0%,#4c1d95 58%,#6d28d9 100%) !important; box-shadow:12px 0 34px rgba(30,20,60,.14) !important; }
.sidebar.collapsed { width:var(--sidebar-collapsed-width) !important; }.sidebar-header { padding:9px 8px 22px !important; border:0 !important; }.brand { color:#fff !important; padding:8px; }.brand i { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff !important; background:linear-gradient(135deg,var(--p-accent),#fb7185); box-shadow:0 9px 20px rgba(245,158,11,.22); }.brand span { color:#4c1d95 !important; background:#fef3c7 !important; }
.collapse-toggle { display:grid; place-items:center; width:34px; height:34px; color:#ddd6fe !important; border-radius:10px !important; }.collapse-toggle:hover { color:#fff !important; background:rgba(255,255,255,.1) !important; }
.nav-menu { padding:6px 0 !important; }.sidebar .nav-item { margin:4px 0 !important; }.sidebar .nav-link { min-height:48px; padding:11px 13px !important; border:0 !important; border-radius:13px !important; color:#ddd6fe !important; gap:12px !important; }.sidebar .nav-link i { width:23px !important; }.sidebar .nav-link:hover { color:#fff !important; background:rgba(255,255,255,.08) !important; transform:translateX(2px); }.sidebar .nav-link.active { color:#fff !important; background:linear-gradient(135deg,rgba(124,58,237,.96),rgba(245,158,11,.7)) !important; box-shadow:0 9px 22px rgba(49,20,90,.25); }
.sidebar-footer { margin-top:auto; padding:14px 4px 2px !important; border-top:1px solid rgba(255,255,255,.1) !important; }.sidebar-footer .user-info { padding:9px !important; border-radius:14px !important; color:#fff !important; background:rgba(255,255,255,.075) !important; }.sidebar-footer .user-avatar { border-radius:12px !important; background:linear-gradient(135deg,var(--p-accent),#fb7185) !important; }.sidebar-footer .user-name,.sidebar-footer .user-role { color:#fff !important; }

.main-wrapper { min-width:0; background:transparent !important; }.topbar { margin:15px 22px 0 !important; min-height:70px !important; padding:10px 13px !important; border:1px solid rgba(229,231,235,.92) !important; border-radius:18px; background:rgba(255,255,255,.9) !important; box-shadow:0 8px 25px rgba(30,41,59,.05) !important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }.topbar .page-title { color:var(--p-ink) !important; font-weight:750 !important; letter-spacing:-.025em; }.mobile-menu-toggle { display:grid; place-items:center; width:43px !important; height:43px !important; border:1px solid var(--p-line) !important; border-radius:13px !important; color:var(--p-ink) !important; background:#fff !important; box-shadow:0 4px 12px rgba(30,41,59,.05); }
.main-content { width:100%; max-width:1500px; margin:0 auto; padding:24px 22px 42px !important; }.breadcrumb-container { margin-bottom:20px !important; padding:0 !important; background:transparent !important; }.breadcrumb { margin:0 !important; font-size:.82rem; }.breadcrumb a { color:var(--p-brand) !important; text-decoration:none; }.footer { margin:0 22px 18px !important; padding:18px 4px !important; border-top:1px solid var(--p-line) !important; color:var(--p-muted) !important; background:transparent !important; }

/* Unify legacy page components */
:is(.card,.info-card,.stat-card,.stats-card,.summary-card,.student-card,.report-card,.attendance-card,.performance-card,.profile-card,.filter-card,.action-card,.term-card,.welcome-card) { border:1px solid var(--p-line) !important; border-radius:var(--p-radius) !important; background:var(--p-surface) !important; box-shadow:var(--p-shadow) !important; overflow:hidden; }
:is(.card,.info-card,.student-card,.report-card,.action-card):hover { border-color:#d1d5db !important; box-shadow:var(--p-shadow-hover) !important; }.card-header,.card-head { padding:17px 19px !important; border-bottom:1px solid var(--p-line) !important; color:var(--p-ink) !important; background:#fff !important; }.card-body,.card-body-p { padding:19px !important; }
h1,h2,h3,h4,h5,h6 { color:var(--p-ink); letter-spacing:-.025em; }.text-muted { color:var(--p-muted) !important; }.page-header,.welcome-section,.student-hero { margin-bottom:24px !important; padding:clamp(20px,3vw,29px) !important; border:1px solid var(--p-line) !important; border-radius:var(--p-radius-lg) !important; color:var(--p-ink) !important; background:linear-gradient(135deg,#fff 0%,#f5f3ff 65%,#fffbeb 100%) !important; box-shadow:var(--p-shadow) !important; }
.btn,.btn-report { min-height:43px; padding:.62rem 1rem !important; border-radius:12px !important; font-weight:680 !important; text-decoration:none; }.btn:hover,.btn-report:hover { transform:translateY(-1px); }.btn-primary,.btn-report { border:1px solid var(--p-brand) !important; color:#fff !important; background:linear-gradient(135deg,var(--p-brand),var(--p-brand-dark)) !important; box-shadow:0 7px 17px rgba(124,58,237,.18); }.btn-outline-primary { color:var(--p-brand) !important; border-color:#ddd6fe !important; background:#fff !important; }.btn-outline-primary:hover { color:#fff !important; background:var(--p-brand) !important; }.badge,.term-badge { border-radius:999px !important; font-weight:650 !important; }
.form-control,.form-select,.form-field select,.form-input { min-height:46px; border:1px solid #cbd5e1 !important; border-radius:12px !important; color:var(--p-ink) !important; background:#fff !important; }.form-control:focus,.form-select:focus,.form-field select:focus,.form-input:focus { border-color:var(--p-brand) !important; box-shadow:0 0 0 4px rgba(124,58,237,.1) !important; }.form-label,.form-field label { color:#334155 !important; font-weight:650 !important; }
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--p-line); border-radius:15px; background:#fff; }.table { width:100%; margin-bottom:0 !important; color:#334155 !important; }.table > :not(caption) > * > * { padding:.86rem .92rem !important; border-bottom-color:var(--p-line) !important; vertical-align:middle; }.table thead th { white-space:nowrap; color:#475569 !important; background:#fafafa !important; font-size:.73rem; text-transform:uppercase; letter-spacing:.05em; }
.alert { border:0 !important; border-radius:14px !important; box-shadow:0 6px 19px rgba(30,41,59,.06); }.dropdown-menu { padding:8px !important; border:1px solid var(--p-line) !important; border-radius:14px !important; box-shadow:var(--p-shadow-hover) !important; }.dropdown-item { padding:9px 11px; border-radius:9px; }.modal-content { border:0 !important; border-radius:22px !important; box-shadow:0 26px 70px rgba(30,41,59,.22) !important; }

/* Profile */
.parent-profile-hero { display:flex; align-items:center; gap:18px; }.parent-profile-avatar { display:grid; place-items:center; flex:0 0 72px; width:72px; height:72px; border-radius:22px; color:#fff; font-size:1.55rem; font-weight:800; background:linear-gradient(135deg,var(--p-brand),var(--p-accent)); box-shadow:0 12px 28px rgba(124,58,237,.2); }.profile-details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.profile-detail { padding:15px; border-radius:14px; background:#f8fafc; }.profile-detail span { display:block; margin-bottom:4px; color:var(--p-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }.profile-detail strong { overflow-wrap:anywhere; }

/* Login */
body.parent-login-page { position:relative; padding:24px !important; background:radial-gradient(circle at 12% 12%,rgba(245,158,11,.17),transparent 31%),radial-gradient(circle at 88% 88%,rgba(124,58,237,.17),transparent 34%),#fafafa !important; }.parent-login-page .login-container { max-width:470px !important; }.parent-login-page .login-card { padding:clamp(24px,5vw,40px) !important; border:1px solid rgba(229,231,235,.95) !important; border-radius:27px !important; box-shadow:0 28px 75px rgba(30,41,59,.14) !important; }.parent-login-page .login-card::before { height:6px !important; border-radius:27px 27px 0 0 !important; background:linear-gradient(90deg,var(--p-brand),var(--p-accent)) !important; }.parent-login-page .login-icon { width:72px !important; height:72px !important; border-radius:21px !important; background:linear-gradient(135deg,var(--p-brand),var(--p-accent)) !important; }.parent-login-page .login-title { color:var(--p-ink) !important; font-size:clamp(1.55rem,5vw,2rem) !important; }.parent-login-page .login-subtitle { color:var(--p-muted) !important; }

/* Printable midterm report */
body.parent-report-page { padding:20px; background:#eef2f7 !important; }.parent-report-page .report-card,.parent-report-page .container { max-width:1100px; margin-inline:auto; border-radius:18px; background:#fff; box-shadow:var(--p-shadow); }.parent-report-page img { max-width:100%; height:auto; }

@media (max-width:991.98px) { body::before { left:0; }.main-wrapper { width:100% !important; margin-left:0 !important; }.topbar { margin:11px 13px 0 !important; min-height:64px !important; border-radius:16px; }.main-content { padding:20px 13px 90px !important; }.footer { margin:0 13px 76px !important; }.offcanvas { width:min(88vw,320px) !important; border:0 !important; border-radius:0 22px 22px 0; }.offcanvas-header { color:#fff; background:linear-gradient(135deg,#3b176e,#6d28d9); }.offcanvas-title,.offcanvas-title i { color:#fff !important; }.offcanvas .nav-link { min-height:48px; border-radius:12px; color:#475569 !important; }.offcanvas .nav-link.active { color:var(--p-brand) !important; background:var(--p-brand-soft) !important; } }
@media (max-width:575.98px) { h1 { font-size:1.65rem !important; } h2 { font-size:1.4rem !important; }.row { --bs-gutter-x:.8rem; }.card-body,.card-header,.card-body-p,.card-head { padding:15px !important; }.btn,.btn-report { width:100%; justify-content:center; }.btn-group .btn,.input-group .btn,td .btn,.d-flex .btn,.flex-between .btn-report { width:auto; }.profile-details-grid { grid-template-columns:1fr; }.parent-profile-hero { align-items:flex-start; }.parent-profile-avatar { width:60px; height:60px; flex-basis:60px; border-radius:18px; }.parent-login-page { align-items:flex-start !important; padding:14px !important; overflow-y:auto; }.parent-login-page .login-container { margin:auto 0; }.parent-login-page .login-card { padding:25px 20px !important; border-radius:22px !important; } body.parent-report-page { padding:0; }.parent-report-page .report-card,.parent-report-page .container { border-radius:0; box-shadow:none; } }
@media print { body.parent-report-page { padding:0; background:#fff !important; }.parent-report-page .report-card,.parent-report-page .container { max-width:none; border-radius:0; box-shadow:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }