:root{
  --navy:#0b2d55;--navy2:#123f73;--blue:#2f6fdf;--blue2:#245fc5;
  --text:#1b2b3d;--muted:#6b7b8e;--line:#dce4ed;--soft:#f4f7fa;
  --green:#17734a;--green-bg:#e7f6ee;--red:#a82b38;--red-bg:#fff0f2;
  --orange:#9a641b;--orange-bg:#fff6df;--shadow:0 14px 35px rgba(9,43,81,.08)
}
*{box-sizing:border-box}html{background:var(--soft)}body{margin:0;font:14px/1.55 "Segoe UI",Arial,sans-serif;color:var(--text);background:var(--soft)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid transparent;font-weight:800;border-radius:7px;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue2)}.btn.secondary{background:#fff;border-color:var(--line);color:var(--navy)}.btn.full{width:100%}.alert{padding:11px 13px;border-radius:7px;margin:0 0 16px;border:1px solid}.alert.error{background:var(--red-bg);border-color:#f2c8cd;color:var(--red)}.alert.success{background:var(--green-bg);border-color:#bee3cf;color:var(--green)}.kicker{font-size:.69rem;text-transform:uppercase;letter-spacing:.11em;font-weight:850;color:var(--blue);display:block;margin-bottom:5px}
.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100}.brand-area{display:flex;align-items:center;gap:9px}.portal-brand{display:flex;align-items:center;gap:10px}.portal-brand img{width:43px;height:43px;object-fit:contain}.portal-brand span{display:block;line-height:1.15}.portal-brand b,.portal-brand small{display:block}.portal-brand b{color:var(--navy);font-size:1rem}.portal-brand small{font-size:.68rem;color:var(--muted);margin-top:3px}.topbar-right{display:flex;align-items:center;gap:15px}.site-link{font-size:.75rem;color:var(--blue);font-weight:750}.user-menu{position:relative}.user-menu>button{display:flex;align-items:center;gap:8px;border:0;background:#fff;cursor:pointer;padding:6px}.user-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:850}.user-name{line-height:1.15;text-align:left}.user-name b,.user-name small{display:block}.user-name small{color:var(--muted);font-size:.64rem;margin-top:3px}.user-dropdown{display:none;position:absolute;right:0;top:52px;width:180px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:6px;z-index:20}.user-dropdown.open{display:block}.user-dropdown a{display:block;padding:9px 10px;border-radius:5px;font-size:.76rem}.user-dropdown a:hover{background:var(--soft)}.mobile-menu{display:none;border:1px solid var(--line);background:#fff;padding:7px}
.portal-layout{display:grid;grid-template-columns:225px minmax(0,1fr);min-height:calc(100vh - 70px)}.sidebar{background:var(--navy);padding:18px 10px;color:#dce8f4;display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:70px;height:calc(100vh - 70px)}.sidebar nav{display:grid;gap:3px}.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:7px;font-size:.78rem}.sidebar nav a span{width:27px;height:27px;display:grid;place-items:center;background:rgba(255,255,255,.08);border-radius:6px;font-size:.7rem}.sidebar nav a:hover,.sidebar nav a.active{background:#fff;color:var(--navy);font-weight:800}.sidebar nav a.active span{background:#edf4ff}.sidebar-bottom{border-top:1px solid rgba(255,255,255,.12);padding:14px 8px 5px}.sidebar-bottom span,.sidebar-bottom small{display:block}.sidebar-bottom span{font-size:.72rem;font-weight:800;color:#fff}.sidebar-bottom small{font-size:.63rem;color:#9eb3c9;margin-top:2px}
.main{min-width:0;padding:0 22px 38px}.context-bar{margin:0 -22px 22px;background:#fff;border-bottom:1px solid var(--line);padding:10px 22px}.context-form{display:flex;justify-content:flex-end;gap:10px;align-items:center}.context-form label{font-size:.66rem;color:var(--muted);font-weight:750}.context-form select{display:block;border:1px solid var(--line);padding:6px 8px;margin-top:2px;background:#fff}.context-student{margin-right:auto}.context-student span,.context-student b{display:block}.context-student span{font-size:.62rem;color:var(--muted);text-transform:uppercase}.context-student b{font-size:.8rem;color:var(--navy)}
.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin:26px 0 18px}.page-head h1{font-size:1.9rem;line-height:1.15;margin:0;color:var(--navy);letter-spacing:-.02em}.page-head p{margin:7px 0 0;color:var(--muted);max-width:760px}.date-chip{background:#fff;border:1px solid var(--line);padding:8px 11px;border-radius:7px;font-size:.75rem;color:var(--navy);font-weight:750}
.card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:18px;box-shadow:0 2px 0 rgba(20,56,93,.01)}.card-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:15px}.card-head h2{font-size:1.08rem;margin:0;color:var(--navy)}.card-head a{font-size:.72rem;color:var(--blue);font-weight:800}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:17px}.metric-card{background:#fff;border:1px solid var(--line);padding:15px;border-radius:8px}.metric-card span,.metric-card small,.metric-card b{display:block}.metric-card span{font-size:.7rem;color:var(--muted)}.metric-card b{font-size:1.35rem;color:var(--navy);margin:5px 0}.metric-card small{font-size:.65rem;color:#8593a3}.metric-card.accent{background:var(--navy);border-color:var(--navy)}.metric-card.accent span,.metric-card.accent small{color:#b9cbdd}.metric-card.accent b{color:#fff;font-size:1.15rem}
.dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-bottom:14px}.timeline{display:grid}.timeline article{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.timeline article:last-child{border-bottom:0}.timeline-date{width:48px;height:52px;background:#edf4ff;color:var(--navy);display:grid;place-items:center;align-content:center;border-radius:6px}.timeline-date b,.timeline-date span{display:block;line-height:1}.timeline-date b{font-size:1rem}.timeline-date span{font-size:.62rem;text-transform:uppercase;margin-top:3px}.timeline h3{font-size:.83rem;margin:1px 0 2px}.timeline p{font-size:.73rem;margin:0;color:var(--muted)}.timeline small{font-size:.65rem;color:#8795a6}.group-list{display:grid;gap:8px}.group-list>div{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:9px;border-radius:7px}.group-icon{width:38px;height:38px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:.58rem;font-weight:850;border-radius:6px}.group-list b,.group-list small{display:block}.group-list b{font-size:.76rem}.group-list small{font-size:.63rem;color:var(--muted)}.attendance-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}.attendance-mini>div{background:var(--soft);padding:9px;text-align:center;border-radius:6px}.attendance-mini span,.attendance-mini b{display:block}.attendance-mini span{font-size:.6rem;color:var(--muted)}.attendance-mini b{color:var(--navy);font-size:.95rem}
.finance-strip{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:20px;margin-bottom:14px}.finance-strip h2{font-size:1rem;margin:0;color:var(--navy)}.finance-strip-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.finance-strip-metrics span,.finance-strip-metrics b{display:block}.finance-strip-metrics span{font-size:.62rem;color:var(--muted)}.finance-strip-metrics b{font-size:.82rem;margin-top:3px}.announcement-list{display:grid}.announcement-list>a{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid var(--line)}.announcement-list>a:last-child{border-bottom:0}.announcement-list b{font-size:.78rem}.announcement-list p{font-size:.7rem;color:var(--muted);margin:3px 0 0}.new-dot{height:max-content;background:#e9f2ff;color:var(--blue);padding:4px 7px;border-radius:999px;font-size:.58rem;font-weight:850}.future-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.future-card{padding:18px;border:1px dashed #b9c8d8;background:#f9fbfd;border-radius:8px}.future-badge{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:850}.future-card h3{margin:6px 0;font-size:.95rem;color:var(--navy)}.future-card p{font-size:.72rem;color:var(--muted);margin:0}
.inline-filter label{font-size:.68rem;color:var(--muted);font-weight:800}.inline-filter select{display:block;margin-top:4px;border:1px solid var(--line);padding:7px 9px;background:#fff}.schedule-list{display:grid;gap:18px}.schedule-day{border:1px solid var(--line);border-radius:8px;overflow:hidden}.schedule-day-title{background:var(--navy);color:#fff;padding:10px 13px;display:flex;justify-content:space-between;align-items:center}.schedule-day-title span{font-size:.68rem;color:#c7d6e5}.schedule-day-title b{font-size:.85rem}.schedule-day-items{display:grid}.schedule-item{display:grid;grid-template-columns:80px 1fr 100px;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.schedule-item:last-child{border-bottom:0}.schedule-time{font-size:.85rem;color:var(--navy);font-weight:850}.schedule-time small{display:block;color:var(--muted);font-size:.65rem;font-weight:500}.schedule-main h3{font-size:.82rem;margin:0}.schedule-main p{font-size:.7rem;color:var(--muted);margin:2px 0}.schedule-main small{font-size:.66rem;color:#6e7e91}.schedule-room{text-align:center;background:var(--soft);padding:6px;border-radius:5px;font-size:.7rem}
.agenda-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.agenda-card .agenda-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.65rem}.agenda-card h2{font-size:1rem;color:var(--navy);margin:8px 0 3px}.agenda-sub{font-size:.68rem;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}.agenda-block{margin-top:12px}.agenda-block b,.agenda-next b{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--navy)}.agenda-block p,.agenda-next p{font-size:.74rem;margin:4px 0 0;color:#4f6173}.agenda-next{background:#eef5fd;padding:10px;border-radius:6px;margin-top:12px}
.attendance-head{align-items:center}.attendance-rate{width:120px;height:76px;background:var(--navy);color:#fff;border-radius:8px;display:grid;place-items:center;align-content:center}.attendance-rate b,.attendance-rate span{display:block}.attendance-rate b{font-size:1.4rem}.attendance-rate span{font-size:.6rem;color:#c8d7e6}.attendance-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.attendance-stats>div{background:#fff;border:1px solid var(--line);padding:13px;border-radius:8px}.attendance-stats span,.attendance-stats b{display:block}.attendance-stats span{font-size:.68rem;color:var(--muted)}.attendance-stats b{font-size:1.25rem;margin-top:3px}.attendance-stats .success b{color:var(--green)}.attendance-stats .danger b{color:var(--red)}.attendance-stats .warning b{color:var(--orange)}.attendance-stats .info b{color:var(--blue)}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:.74rem}.data-table th,.data-table td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}.data-table th{font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfd}.data-table td small{display:block;font-size:.62rem;color:var(--muted);margin-top:2px}.status-pill{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:.6rem;font-weight:850}.status-pill.hadir,.status-pill.success,.status-pill.diterima{background:var(--green-bg);color:var(--green)}.status-pill.alfa,.status-pill.danger,.status-pill.ditolak{background:var(--red-bg);color:var(--red)}.status-pill.izin,.status-pill.info,.status-pill.menunggu{background:#e9f2ff;color:var(--blue)}.status-pill.sakit,.status-pill.warning,.status-pill.sebagian{background:var(--orange-bg);color:var(--orange)}.status-pill.muted{background:#eef1f4;color:#718095}.table-link,.link-btn{font-size:.66rem;color:var(--blue);font-weight:800}.link-btn{border:0;background:transparent;cursor:pointer;padding:0}
.finance-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.finance-metrics>div{background:#fff;border:1px solid var(--line);padding:14px;border-radius:8px}.finance-metrics span,.finance-metrics b{display:block}.finance-metrics span{font-size:.66rem;color:var(--muted)}.finance-metrics b{font-size:1rem;color:var(--navy);margin-top:4px}.finance-metrics .accent{background:var(--navy)}.finance-metrics .accent span{color:#b8c9da}.finance-metrics .accent b{color:#fff}.confirmation-list{display:grid}.confirmation-list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.confirmation-list b,.confirmation-list small{display:block}.confirmation-list b{font-size:.75rem}.confirmation-list small{font-size:.63rem;color:var(--muted)}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px}.modal-backdrop{position:absolute;inset:0;background:rgba(5,24,45,.76)}.modal-card{position:relative;width:min(470px,100%);background:#fff;padding:22px;border-radius:9px;box-shadow:0 25px 80px rgba(0,0,0,.25)}.modal-card h2{color:var(--navy);font-size:1.2rem;margin:0 0 5px}.modal-card>p{font-size:.72rem;color:var(--muted)}.modal-close{position:absolute;right:10px;top:10px;border:1px solid var(--line);background:#fff;width:30px;height:30px;cursor:pointer}.form-stack{display:grid;gap:10px}.form-stack label{font-size:.7rem;font-weight:750}.form-stack input,.form-stack select,.form-stack textarea{display:block;width:100%;margin-top:4px;border:1px solid var(--line);padding:9px;background:#fff}.form-stack textarea{min-height:80px}
.announcement-page{display:grid;gap:12px}.announcement-card.unread{border-left:4px solid var(--blue)}.announcement-card-head{display:flex;justify-content:space-between;gap:15px}.announcement-card-head span{font-size:.62rem;color:var(--muted)}.announcement-card-head h2{font-size:1rem;color:var(--navy);margin:3px 0}.announcement-card-head a{font-size:.65rem;color:var(--blue);font-weight:800}.announcement-body{font-size:.76rem;color:#43566b}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.integration-card{min-height:220px}.integration-icon{width:48px;height:48px;display:grid;place-items:center;background:var(--navy);color:#fff;border-radius:8px;font-size:.65rem;font-weight:850}.integration-card h2{font-size:1.05rem;color:var(--navy);margin:13px 0 6px}.integration-card p{font-size:.75rem;color:var(--muted)}.coming{display:inline-flex;margin-top:10px;padding:5px 8px;border-radius:999px;background:#eef3f8;color:#607185;font-size:.62rem;font-weight:800}.available-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.available-links a{border:1px solid var(--line);padding:12px;border-radius:7px}.available-links b,.available-links span{display:block}.available-links b{font-size:.76rem;color:var(--navy)}.available-links span{font-size:.65rem;color:var(--muted);margin-top:3px}
.profile-grid{display:grid;grid-template-columns:.55fr 1fr 1fr;gap:12px;margin-bottom:14px}.profile-card{text-align:center;grid-row:span 2}.profile-avatar{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:1.8rem;font-weight:850;margin:5px auto 12px}.profile-card h2{font-size:1rem;margin:0;color:var(--navy)}.profile-card>span{font-size:.68rem;color:var(--muted)}.profile-status{display:inline-flex;margin-top:10px;background:var(--green-bg);color:var(--green);font-size:.6rem;font-weight:850;padding:4px 8px;border-radius:999px}.detail-list{margin:0;display:grid}.detail-list>div{display:grid;grid-template-columns:140px 1fr;padding:8px 0;border-bottom:1px solid var(--line)}.detail-list dt{font-size:.67rem;color:var(--muted)}.detail-list dd{font-size:.73rem;font-weight:700;margin:0}.account-actions{display:flex;justify-content:space-between;align-items:center;gap:15px}.account-actions b{font-size:.8rem}.account-actions p{font-size:.68rem;color:var(--muted);margin:2px 0 0}.narrow-card{max-width:600px}.empty-state{text-align:center;padding:38px}.empty-state h2{font-size:1rem;color:var(--navy);margin-top:0}.empty-state p,.empty-mini{font-size:.72rem;color:var(--muted)}.empty-mini{padding:15px 0}.portal-footer{min-height:50px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 22px 0 247px;color:var(--muted);font-size:.65rem}
.login-body{background:#071f3c;min-height:100vh}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}.login-visual{position:relative;overflow:hidden}.login-visual>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.login-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,25,48,.25),rgba(4,25,48,.85));z-index:1}.login-visual-copy{position:absolute;z-index:2;left:8%;right:8%;bottom:10%;color:#fff}.login-visual-copy span{font-size:.7rem;letter-spacing:.12em;font-weight:850;color:#b6d6f4}.login-visual-copy h1{font-size:2.4rem;line-height:1.08;max-width:700px;margin:8px 0 12px}.login-visual-copy p{max-width:600px;color:#d8e4ef}.login-panel{background:#fff;padding:28px 11%;display:flex;flex-direction:column;justify-content:space-between}.login-brand{display:flex;align-items:center;gap:10px}.login-brand img{width:48px;height:48px}.login-brand b,.login-brand small{display:block}.login-brand b{color:var(--navy);font-size:1rem}.login-brand small{font-size:.65rem;color:var(--muted)}.login-form-wrap{max-width:430px;width:100%;margin:auto}.login-form-wrap h2{font-size:1.65rem;color:var(--navy);margin:0}.login-form-wrap>p{font-size:.75rem;color:var(--muted);margin:6px 0 18px}.login-form{display:grid;gap:12px}.login-form label{font-size:.7rem;font-weight:800}.login-form input{width:100%;display:block;margin-top:4px;border:1px solid #cbd6e2;padding:11px;border-radius:6px}.password-field{position:relative}.password-field button{position:absolute;right:7px;top:11px;border:0;background:transparent;color:var(--blue);font-size:.65rem;font-weight:800}.password-field input{padding-right:54px}.login-help{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.login-help p{font-size:.66rem;color:var(--muted);margin:0}.login-help a{font-size:.7rem;color:var(--blue);font-weight:800}.login-footer a{font-size:.68rem;color:var(--blue)}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.finance-strip{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr 1fr}.profile-card{grid-row:auto}.agenda-grid{grid-template-columns:1fr}.finance-strip-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.portal-layout{grid-template-columns:1fr}.sidebar{position:fixed;left:-240px;top:70px;width:225px;z-index:90;transition:.2s}.sidebar.open{left:0}.main{padding:0 14px 30px}.context-bar{margin:0 -14px 18px;padding:9px 14px}.mobile-menu{display:block}.portal-footer{padding-left:14px}.dashboard-grid,.profile-grid,.integration-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh}.site-link{display:none}.available-links{grid-template-columns:1fr}}@media(max-width:620px){.topbar{padding:0 10px}.user-name{display:none}.portal-brand b{font-size:.85rem}.main{padding-bottom:25px}.context-form{align-items:flex-end;flex-wrap:wrap}.context-student{width:100%}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:1.55rem}.metric-grid,.attendance-stats,.finance-metrics,.future-grid{grid-template-columns:1fr 1fr}.schedule-item{grid-template-columns:65px 1fr}.schedule-room{display:none}.finance-strip-metrics{grid-template-columns:1fr 1fr}.data-table{min-width:720px}.attendance-rate{width:100%}.profile-grid{grid-template-columns:1fr}.detail-list>div{grid-template-columns:1fr;gap:2px}.portal-footer{flex-direction:column;justify-content:center;gap:2px}.login-panel{padding:20px}.login-form-wrap h2{font-size:1.4rem}}@media(max-width:420px){.metric-grid,.attendance-stats,.finance-metrics,.future-grid,.finance-strip-metrics{grid-template-columns:1fr}}


/* ============================================================
   V1.1 — FILTER + PAGINATION
   ============================================================ */
.filter-card{margin-bottom:12px}
.filter-bar{
  display:grid;
  grid-template-columns:170px 210px minmax(220px,1fr) auto;
  gap:9px;
  align-items:end;
  margin-bottom:12px
}
.filter-bar.compact-filter{grid-template-columns:180px minmax(220px,1fr) auto}
.filter-bar label{font-size:.66rem;color:var(--muted);font-weight:800}
.filter-bar input,.filter-bar select{
  width:100%;
  display:block;
  margin-top:4px;
  border:1px solid var(--line);
  background:#fff;
  padding:8px 9px;
  border-radius:6px;
  outline:none
}
.filter-bar input:focus,.filter-bar select:focus{border-color:#8eb2df;box-shadow:0 0 0 2px rgba(47,111,223,.08)}
.filter-actions{display:flex;gap:6px;align-items:center}
.filter-actions .btn{padding:8px 11px;font-size:.7rem;white-space:nowrap}
.record-meta{font-size:.66rem;color:var(--muted);margin:8px 0 12px}
.record-meta b{color:var(--navy)}
.data-head{align-items:center}
.data-head .record-meta{margin:0}
.pagination-wrap{display:flex;justify-content:center;margin:16px 0 3px}
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-top:16px;
  flex-wrap:wrap
}
.pagination .page-number,.pagination .page-arrow,.pagination .page-gap{
  min-width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:#fff;
  border-radius:6px;
  font-size:.68rem;
  font-weight:800;
  color:var(--navy)
}
.pagination .page-number:hover,.pagination .page-arrow:hover{border-color:#9cbbe0;background:#f4f8fd}
.pagination .page-number.active{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination .page-arrow.disabled{opacity:.35;cursor:not-allowed}
.pagination .page-gap{border-color:transparent;background:transparent;min-width:20px}
.agenda-empty{grid-column:1/-1}

@media(max-width:1050px){
  .filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-bar.compact-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-actions{align-self:end}
}
@media(max-width:620px){
  .filter-bar,.filter-bar.compact-filter{grid-template-columns:1fr}
  .filter-actions{display:grid;grid-template-columns:1fr 1fr}
  .filter-actions .btn{width:100%}
  .data-head{align-items:flex-start;flex-direction:column}
}


/* ============================================================
   V1.2 — ROLE-BASED PORTAL SISWA vs ORANG TUA
   ============================================================ */
.role-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  background:#f7f9fc;
  color:var(--navy);
  padding:5px 8px;
  border-radius:999px;
  font-size:.62rem;
  font-weight:850
}
.sidebar-role{
  margin:0 4px 14px;
  padding:10px 9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  border-radius:7px
}
.sidebar-role span,.sidebar-role b{display:block}
.sidebar-role span{font-size:.55rem;letter-spacing:.1em;color:#9fc1df;font-weight:850}
.sidebar-role b{font-size:.68rem;color:#fff;margin-top:3px}

/* Student Dashboard */
.student-focus-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px;
  margin-bottom:14px
}
.student-focus-card{
  background:#fff;
  border:1px solid var(--line);
  padding:16px;
  min-height:150px;
  border-radius:9px;
  display:flex;
  flex-direction:column
}
.student-focus-card>span{font-size:.66rem;color:var(--muted)}
.student-focus-card>b{
  font-size:1.35rem;
  color:var(--navy);
  line-height:1.2;
  margin:8px 0 5px
}
.student-focus-card>strong{font-size:.73rem;color:var(--text);font-weight:800}
.student-focus-card>small{font-size:.62rem;color:var(--muted);margin-top:auto;padding-top:10px}
.student-focus-card.primary-focus{background:var(--navy);border-color:var(--navy)}
.student-focus-card.primary-focus>span,
.student-focus-card.primary-focus>small{color:#bfd0e0}
.student-focus-card.primary-focus>b,
.student-focus-card.primary-focus>strong{color:#fff}
.student-dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px
}
.latest-material-list{display:grid}
.latest-material-list>a{
  display:grid;
  gap:2px;
  padding:10px 0;
  border-bottom:1px solid var(--line)
}
.latest-material-list>a:last-child{border-bottom:0}
.latest-material-list span{font-size:.6rem;color:var(--blue);font-weight:800}
.latest-material-list b{font-size:.77rem}
.latest-material-list small{font-size:.63rem;color:var(--muted)}
.student-program-card{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:20px;
  align-items:center;
  margin-bottom:14px
}
.student-program-card h2{font-size:1rem;color:var(--navy);margin:0}
.student-program-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.student-program-list>div{
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  column-gap:8px;
  border:1px solid var(--line);
  padding:9px;
  border-radius:7px
}
.student-program-list>div>span{
  grid-row:span 2;
  width:35px;height:35px;
  display:grid;place-items:center;
  background:#edf4ff;
  color:var(--navy);
  border-radius:6px;
  font-size:.55rem;
  font-weight:900
}
.student-program-list b{font-size:.7rem}
.student-program-list small{font-size:.58rem;color:var(--muted)}
.student-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.student-progress-box h2,.student-payment-box h2{font-size:.98rem;color:var(--navy);margin:0 0 6px}
.student-progress-box p,.student-payment-box p{font-size:.7rem;color:var(--muted)}
.student-progress-box a,.student-payment-box a{font-size:.68rem;color:var(--blue);font-weight:800}
.student-payment-box strong{display:block;font-size:1.3rem;color:var(--navy);margin:6px 0}
.student-payment-box small{display:block;font-size:.62rem;color:var(--muted);margin-bottom:10px}

/* Parent Dashboard */
.parent-child-count{
  display:inline-flex;
  background:#eef5fd;
  color:var(--navy);
  border:1px solid #cbddee;
  padding:7px 10px;
  border-radius:999px;
  font-size:.65rem;
  font-weight:850
}
.parent-alert-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:14px
}
.parent-alert-strip>div{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid #92abc4;
  padding:13px;
  border-radius:8px
}
.parent-alert-strip>div.good{border-top-color:#48a879}
.parent-alert-strip>div.attention{border-top-color:#d85b67;background:#fffafb}
.parent-alert-strip>div.neutral{border-top-color:#4d83c2}
.parent-alert-strip span,.parent-alert-strip b,.parent-alert-strip small{display:block}
.parent-alert-strip span{font-size:.62rem;color:var(--muted)}
.parent-alert-strip b{font-size:1.05rem;color:var(--navy);margin:3px 0}
.parent-alert-strip small{font-size:.59rem;color:var(--muted)}
.parent-dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px
}
.parent-dashboard-grid.second-row{grid-template-columns:1fr 1fr}
.parent-attendance-ring{
  display:grid;
  grid-template-columns:125px 1fr;
  align-items:center;
  gap:20px
}
.attendance-circle{
  width:112px;height:112px;
  border-radius:50%;
  border:10px solid #dcebf8;
  box-shadow:inset 0 0 0 6px #fff;
  background:#eef6fd;
  display:grid;
  place-items:center;
  align-content:center;
  margin:auto
}
.attendance-circle b{font-size:1.35rem;color:var(--navy)}
.attendance-circle span{font-size:.6rem;color:var(--muted)}
.parent-attendance-breakdown{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.parent-attendance-breakdown>div{
  padding:9px;
  background:var(--soft);
  border-radius:6px
}
.parent-attendance-breakdown span,.parent-attendance-breakdown b{display:block}
.parent-attendance-breakdown span{font-size:.6rem;color:var(--muted)}
.parent-attendance-breakdown b{font-size:.95rem;color:var(--navy)}
.parent-attendance-breakdown .attention-text b{color:var(--red)}
.parent-finance-summary{display:grid;gap:8px}
.parent-finance-summary>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line)
}
.parent-finance-summary span{font-size:.66rem;color:var(--muted)}
.parent-finance-summary b{font-size:.76rem;color:var(--navy)}
.parent-pay-btn{margin-top:13px;width:100%}
.parent-schedule-list,.parent-material-list{display:grid}
.parent-schedule-list>div,.parent-material-list>a{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line)
}
.parent-schedule-list>div:last-child,.parent-material-list>a:last-child{border-bottom:0}
.parent-schedule-list>div>span,.parent-material-list>a>span{font-size:.63rem;color:var(--blue);font-weight:800}
.parent-schedule-list small,.parent-material-list small{display:block;font-size:.61rem;color:var(--muted);margin-top:2px}
.parent-schedule-list b,.parent-material-list b{font-size:.74rem}
.parent-monitoring-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.parent-monitoring-note h2{font-size:1rem;color:var(--navy);margin:0}
.parent-monitoring-note p{font-size:.7rem;color:var(--muted);margin:5px 0 0;max-width:720px}

/* Finance by role */
.student-finance-metrics{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px;
  margin-bottom:10px
}
.student-finance-metrics>div{
  background:#fff;
  border:1px solid var(--line);
  padding:15px;
  border-radius:8px
}
.student-finance-metrics>div.accent{background:var(--navy);border-color:var(--navy)}
.student-finance-metrics span,.student-finance-metrics b,.student-finance-metrics small{display:block}
.student-finance-metrics span{font-size:.65rem;color:var(--muted)}
.student-finance-metrics b{font-size:1.15rem;color:var(--navy);margin:4px 0}
.student-finance-metrics small{font-size:.6rem;color:var(--muted)}
.student-finance-metrics .accent span,.student-finance-metrics .accent small{color:#bbcede}
.student-finance-metrics .accent b{color:#fff}
.student-finance-note{
  background:#fff8e8;
  border:1px solid #f1dfb3;
  color:#76581a;
  padding:10px 12px;
  border-radius:7px;
  font-size:.67rem;
  margin-bottom:14px
}

/* Parent Profile */
.parent-profile-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:12px;
  margin-bottom:14px
}
.parent-child-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.parent-child-list>div{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:7px
}
.parent-child-list>div.selected{border-color:#9bbde4;background:#f5f9fe}
.child-avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:850
}
.parent-child-list b,.parent-child-list small{display:block}
.parent-child-list b{font-size:.74rem}
.parent-child-list small{font-size:.61rem;color:var(--muted)}
.selected-child{
  padding:4px 7px;
  border-radius:999px;
  background:#e8f4ee;
  color:var(--green);
  font-size:.55rem;
  font-weight:850
}

@media(max-width:1100px){
  .student-focus-grid,.parent-alert-strip{grid-template-columns:repeat(2,1fr)}
  .student-program-card{grid-template-columns:1fr}
  .student-program-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
  .student-dashboard-grid,.student-bottom-grid,
  .parent-dashboard-grid,.parent-dashboard-grid.second-row,
  .parent-profile-grid{grid-template-columns:1fr}
  .parent-monitoring-note{align-items:flex-start;flex-direction:column}
  .role-chip{display:none}
}
@media(max-width:620px){
  .student-focus-grid,.parent-alert-strip,
  .student-program-list,.parent-child-list,
  .student-finance-metrics{grid-template-columns:1fr}
  .parent-attendance-ring{grid-template-columns:1fr}
  .parent-schedule-list>div,.parent-material-list>a{grid-template-columns:1fr;gap:3px}
}