:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --sidebar: #111827;
    --sidebar-muted: #94a3b8;
    --bg: #f6f8fc;
    --border: #e7ebf2;
    --text: #172033;
    --muted: #718096;
    --radius: 18px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    background: var(--sidebar);
    color: white;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease;
}

.sidebar-brand {
    height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: white;
    font-size: 20px;
    flex: 0 0 auto;
}

.brand-copy { line-height: 1.05; }
.brand-copy strong { display:block; font-size: 17px; letter-spacing: .8px; }
.brand-copy small { color: #93c5fd; font-size: 10px; letter-spacing: 2px; }

.sidebar-nav { padding: 22px 14px; overflow-y: auto; }
.nav-caption { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; padding: 0 12px 9px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 3px 0;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--sidebar-muted);
    text-decoration: none;
    font-size: 14px;
    transition: .2s;
}

.nav-item i:first-child { width: 20px; text-align: center; font-size: 16px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(59,130,246,.7)); box-shadow: 0 7px 20px rgba(37,99,235,.2); }

.sidebar-bottom { margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }

.main-content {
    margin-left: 260px;
    min-height: 100vh;
}

.topbar {
    height: 82px;
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
}

.btn-icon {
    border: 0;
    background: transparent;
    font-size: 25px;
    color: var(--text);
}

.topbar-user { display:flex; align-items:center; gap:10px; }
.topbar-user strong { display:block; font-size:13px; }
.topbar-user small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.avatar {
    width: 40px; height:40px; border-radius: 13px;
    display:grid; place-items:center;
    color:white; font-weight:700;
    background: linear-gradient(135deg,#2563eb,#7c3aed);
}

.content-wrap { padding: 32px; max-width: 1600px; margin: auto; }

.welcome-card {
    min-height: 190px;
    border-radius: 24px;
    padding: 32px;
    color: white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    background:
        radial-gradient(circle at 85% 25%, rgba(255,255,255,.2), transparent 25%),
        linear-gradient(135deg,#1d4ed8,#4f46e5);
    box-shadow: 0 18px 45px rgba(37,99,235,.18);
}

.welcome-card .eyebrow { font-size:10px; letter-spacing:2px; opacity:.75; font-weight:700; }
.welcome-card h1 { font-size: 29px; margin: 8px 0 7px; font-weight: 750; }
.welcome-card p { opacity:.86; max-width:700px; }
.welcome-icon { font-size: 85px; opacity:.14; margin-right: 20px; }

.stat-card, .panel-card {
    background:white;
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(15,23,42,.035);
}

.stat-card { padding: 20px; min-height: 155px; position:relative; overflow:hidden; }
.stat-icon {
    width: 43px; height:43px; border-radius:13px;
    display:grid; place-items:center;
    color:#2563eb; background:#eff6ff; margin-bottom:20px;
}
.stat-label { color:var(--muted); font-size:13px; }
.stat-value { font-size:30px; font-weight:750; margin-top:3px; }

.panel-card { padding: 24px; }
.panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 15px; }
.panel-header h5 { margin:0; font-weight:700; font-size:17px; }
.panel-header p { margin:4px 0 0; color:var(--muted); font-size:12px; }

.empty-state { text-align:center; padding: 35px 15px; color:var(--muted); }
.empty-state i { font-size:38px; color:#93c5fd; }
.empty-state h6 { margin:12px 0 6px; color:var(--text); font-size:15px; }
.empty-state p { max-width:520px; margin:0 auto; font-size:13px; }

.quick-links a {
    display:flex; align-items:center; gap:12px; padding:13px 5px;
    color:var(--text); text-decoration:none; border-bottom:1px solid #f1f3f6;
    font-size:13px;
}
.quick-links a i:first-child { color:var(--primary); font-size:18px; }
.quick-links a i:last-child { margin-left:auto; color:#94a3b8; }
.quick-links a:hover { color:var(--primary); }

.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(37,99,235,.13), transparent 28%),
        radial-gradient(circle at 85% 85%, rgba(124,58,237,.12), transparent 28%),
        #f7f9fc;
}

.login-shell { width:100%; max-width:470px; }
.login-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.brand-title { font-weight:800; font-size:20px; }
.brand-subtitle { color:var(--muted); font-size:12px; margin-top:2px; }
.login-card { background:white; border:1px solid var(--border); border-radius:26px; padding:34px; box-shadow:0 25px 70px rgba(15,23,42,.09); }
.login-heading { font-size:26px; font-weight:800; margin-bottom:6px; }
.form-label { font-size:13px; font-weight:650; margin-bottom:7px; }
.input-modern .input-group-text { background:#f8fafc; border-color:#e5e7eb; color:#64748b; }
.input-modern .form-control { border-color:#e5e7eb; padding:12px 13px; }
.input-modern .form-control:focus { box-shadow:none; border-color:#93c5fd; }
.login-footer { color:#94a3b8; text-align:center; font-size:11px; }

.sidebar-overlay { display:none; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 20px 0 50px rgba(0,0,0,.15); }
    .sidebar.show { transform:translateX(0); }
    .sidebar-overlay.show { display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1030; }
    .main-content { margin-left:0; }
    .topbar { padding:0 18px; }
    .content-wrap { padding:22px 18px; }
    .welcome-card { padding:25px; }
    .welcome-icon { display:none; }
}

@media (max-width: 575.98px) {
    .content-wrap { padding:16px 12px; }
    .welcome-card { min-height:180px; border-radius:20px; padding:23px; }
    .welcome-card h1 { font-size:23px; }
    .stat-card { min-height:135px; padding:16px; }
    .stat-icon { margin-bottom:13px; }
    .stat-value { font-size:25px; }
    .login-card { padding:25px 20px; border-radius:21px; }
}


.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.page-heading h1 { font-size:24px; font-weight:800; margin:0; }
.page-heading p { color:var(--muted); margin:5px 0 0; font-size:13px; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-soft { background:#eff6ff; color:#2563eb; border:0; }
.btn-soft:hover { background:#dbeafe; color:#1d4ed8; }
.table-modern { vertical-align:middle; margin-bottom:0; }
.table-modern thead th { background:#f8fafc; color:#64748b; font-size:11px; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--border); white-space:nowrap; }
.table-modern td { padding:14px 12px; border-color:#eef1f5; font-size:13px; }
.table-modern tbody tr:hover { background:#fbfdff; }
.data-avatar { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#eff6ff; color:#2563eb; font-weight:800; flex:0 0 auto; }
.person-cell { display:flex; align-items:center; gap:11px; }
.person-cell strong { display:block; font-size:13px; }
.person-cell small { color:var(--muted); }
.badge-soft-success { background:#ecfdf3; color:#15803d; }
.badge-soft-warning { background:#fff7ed; color:#c2410c; }
.badge-soft-danger { background:#fef2f2; color:#dc2626; }
.badge-soft-info { background:#eff6ff; color:#2563eb; }
.filter-card { background:white; border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:18px; }
.form-card { background:white; border:1px solid var(--border); border-radius:18px; padding:24px; }
.form-section-title { font-size:15px; font-weight:750; margin:4px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.required::after { content:" *"; color:#dc2626; }
.detail-hero { background:linear-gradient(135deg,#1d4ed8,#4f46e5); color:#fff; border-radius:20px; padding:24px; margin-bottom:20px; }
.detail-hero .avatar-lg { width:58px; height:58px; border-radius:17px; display:grid; place-items:center; background:rgba(255,255,255,.18); font-size:23px; font-weight:800; }
.detail-hero h2 { font-size:22px; font-weight:800; margin:0; }
.detail-hero p { opacity:.8; margin:4px 0 0; font-size:13px; }
.member-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid #eef1f5; }
.member-row:last-child { border-bottom:0; }
.empty-small { color:var(--muted); font-size:13px; padding:22px 5px; text-align:center; }
.search-group { max-width:360px; }

.mutabaah-input-table th{position:sticky;top:0;z-index:2}.mutabaah-input-table .score-input{min-width:62px;text-align:center}.mutabaah-input-table td{padding:9px 6px}
@media print{.sidebar,.topbar,.page-heading .btn,.filter-card,.btn,.sidebar-overlay{display:none!important}.main-content{margin-left:0!important}.content-wrap{padding:0!important;max-width:none!important}.panel-card,.stat-card,.detail-hero{box-shadow:none!important;border:1px solid #ddd!important}body{background:#fff!important}}
.tahfizh-chip { font-size:11px; padding:6px 9px; border-radius:999px; }
.activity-card { border:1px solid var(--border); border-radius:16px; padding:16px; background:#fff; }

/* Tahap 9 - Portal Santri */
.portal-wrap .stat-card small { font-size: 12px; font-weight: 500; }
.portal-hero { border-radius:24px; padding:30px 34px; color:#fff; margin-bottom:22px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 26%),linear-gradient(135deg,#0f766e,#2563eb); box-shadow:0 18px 45px rgba(37,99,235,.14); }
.portal-hero .eyebrow { font-size:10px; letter-spacing:2px; font-weight:800; opacity:.72; }
.portal-hero h2 { margin:7px 0 4px; font-size:28px; font-weight:800; }
.portal-hero p { margin:0; opacity:.82; font-size:13px; }
.portal-hero-icon { font-size:86px; opacity:.15; padding-right:18px; }
.portal-quick { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.portal-quick a { color:#fff; text-decoration:none; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); padding:8px 13px; border-radius:10px; font-size:12px; }
.portal-big-number { font-size:38px; font-weight:800; margin-top:12px; }
.portal-big-number small { font-size:15px; color:#94a3b8; }
.portal-score-hero { border-radius:22px; padding:26px 30px; color:#fff; background:linear-gradient(135deg,#1d4ed8,#7c3aed); display:flex; justify-content:space-between; align-items:center; overflow:hidden; }
.portal-score-hero span { display:block; font-size:12px; opacity:.75; text-transform:uppercase; letter-spacing:1.4px; }
.portal-score-hero strong { display:block; font-size:52px; line-height:1.05; margin:5px 0 8px; }
.portal-score-hero small { display:block; opacity:.7; margin-top:10px; }
.portal-score-hero > i { font-size:90px; opacity:.14; }
.score-item h3 { font-size:30px; font-weight:800; margin:7px 0 12px; }
.score-icon { width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eff6ff;color:#2563eb; }
@media (max-width:575.98px){.portal-hero{padding:24px;border-radius:20px}.portal-hero-icon{display:none}.portal-hero h2{font-size:23px}.portal-score-hero{padding:23px}.portal-score-hero strong{font-size:43px}.portal-score-hero>i{display:none}}
/* Tahap 10 - Portal Wali */
.child-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--bs-border-color,#e5e7eb);border-radius:16px;text-decoration:none;color:inherit;transition:.2s;background:#fff}.child-card:hover,.child-card.selected{border-color:#86b7fe;box-shadow:0 6px 20px rgba(0,0,0,.06)}.child-card small{display:block;color:#6b7280;margin-top:3px}.child-avatar{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#eef5ff;color:#2563eb;font-size:20px}.portal-big-number{font-size:3rem;font-weight:800;line-height:1.1}.portal-big-number small{font-size:1rem;color:#6b7280;font-weight:600}.report-sheet{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:42px;box-shadow:0 8px 30px rgba(0,0,0,.06);max-width:1000px;margin:auto}@media(max-width:576px){.report-sheet{padding:20px}.portal-big-number{font-size:2.3rem}}